/*
Theme Name: Staud Journal
Author: Matthias Staud / Entwurf
Description: Eigenständiges, leichtes WordPress-Theme für einen praxisnahen IT-Blog.
Version: 0.2.4
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: staud-journal
*/

:root{--ink:#342833;--ink-deep:#302030;--muted:#685b62;--line:#eadacc;--paper:#fff8ef;--white:#fffdfa;--accent:#ffc85e;--accent-dark:#a5472c;--forest:#284b3b;--berry:#78394c;--site-width:1216px;--body-width:760px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea{font:inherit}
button{cursor:pointer}
::selection{background:#ffd98e;color:var(--ink-deep)}
:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px}
.site-wrap{width:min(calc(100% - 48px),var(--site-width));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;left:16px;top:16px;z-index:9999;padding:12px 18px;background:#fff;color:var(--ink)}
.eyebrow,.hero-kicker{font:700 .75rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}

/* Header */
.site-header{position:relative;z-index:20;background:var(--ink-deep);color:#fff5e9;border-top:4px solid var(--accent)}
.header-inner{min-height:86px;display:flex;align-items:center;gap:46px}
.brand{display:inline-flex;align-items:center;gap:14px;flex:none;line-height:1.1}
.brand:hover .brand-copy strong{color:var(--accent)}
.brand-logo{display:block;flex:none;width:47px;height:47px;object-fit:contain}
.footer-brand span{color:var(--accent)}
.brand-copy{display:grid;gap:4px}
.brand-copy strong{font-size:1.02rem;letter-spacing:-.025em;transition:color .2s}
.brand-copy small{color:#d1a9a9;font:.72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.desktop-nav{flex:1}
.desktop-nav .menu,.mobile-nav .menu{margin:0;padding:0;list-style:none}
.desktop-nav .menu{display:flex;align-items:center;justify-content:flex-end;gap:30px}
.desktop-nav .menu>li{position:relative}
.desktop-nav .menu>li>a{display:block;padding:31px 0;font-size:.91rem;font-weight:650;color:#f1dfe0;transition:color .2s}
.desktop-nav a:hover,.desktop-nav .current-menu-item>a,.desktop-nav .current-menu-ancestor>a{color:var(--accent)!important}
.desktop-nav .sub-menu{display:none;position:absolute;left:-18px;top:100%;min-width:185px;margin:0;padding:8px;list-style:none;background:#4b2c41;border:1px solid #875c6b;border-radius:8px;box-shadow:0 18px 36px #24121e55}
.desktop-nav li:hover>.sub-menu,.desktop-nav li:focus-within>.sub-menu{display:block}
.desktop-nav .sub-menu a{display:block;padding:9px 12px;color:#fff0e9;font-size:.88rem;white-space:nowrap}
.desktop-nav .sub-menu a:hover{color:var(--accent)}
.header-actions{position:relative;display:flex;align-items:center;gap:12px}
.header-search-details summary{display:grid;place-items:center;width:42px;height:42px;border:1px solid #7d5867;border-radius:8px;color:#fff0e9;list-style:none;cursor:pointer}
.header-search-details summary::-webkit-details-marker{display:none}
.header-search-details summary:hover{border-color:var(--accent);color:var(--accent)}
.header-search-details summary span{font-size:2rem;line-height:.5;transform:rotate(-25deg) translateY(-2px)}
.header-search-panel{position:absolute;z-index:40;right:0;top:53px;width:min(420px,calc(100vw - 32px));padding:20px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);box-shadow:0 20px 45px #30203038}
.header-search-panel .search-form{margin:0}
.mobile-nav{display:none}

/* Landing and lists */
.hero{background:radial-gradient(circle at 84% 13%,#c66c37 0,#a4483d 31%,transparent 59%),linear-gradient(115deg,#69344b 0%,#873d48 58%,#a94b38 100%);color:#fff8ef;overflow:hidden}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(255px,.55fr);gap:64px;padding-top:77px;padding-bottom:83px}
.hero-inner::after{content:"";position:absolute;left:47%;top:0;height:100%;border-left:1px solid #ffffff0d;transform:skewX(-19deg);pointer-events:none}
.hero-kicker{display:flex;align-items:center;gap:12px;color:var(--accent)}
.accent-line{display:inline-block;width:27px;height:2px;background:var(--accent)}
.hero h1{margin:18px 0 17px;max-width:760px;font-size:clamp(3.2rem,6vw,5.75rem);line-height:1.04;letter-spacing:-.075em;font-weight:790}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:670px;margin:0;color:#ffe6d9;font-size:1.13rem;line-height:1.75}
.hero-topics{position:relative;align-self:end;padding:0 0 4px 28px;border-left:1px solid #f6cfaa80}
.hero-topics>.eyebrow{display:block;margin-bottom:17px;color:#ffe1ba}
.topic-links{display:grid}
.topic-links>a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 1px;border-bottom:1px solid #ffffff2a;font-weight:650;font-size:.92rem}
.topic-links>a span{font-size:1.1rem;color:var(--accent);transition:transform .2s}
.topic-links>a:hover{color:var(--accent)}
.topic-links>a:hover span{transform:translate(2px,-2px)}
.posts-section{padding-top:60px;padding-bottom:100px}
.section-heading{display:flex;align-items:end;gap:28px;margin-bottom:28px}
.section-heading .eyebrow{color:var(--accent-dark)}
.section-heading h2{margin:4px 0 0;font-size:2rem;letter-spacing:-.055em;line-height:1.2}
.section-rule{height:1px;flex:1;background:var(--line);margin-bottom:8px}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.post-card{min-width:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #763f2b0a;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 16px 35px #763f2b1f}
.post-card:not(.post-card--featured){border-top:4px solid #d97937}
.post-card:not(.post-card--featured):nth-child(3n){border-top-color:#8f4b68}
.post-card:not(.post-card--featured):nth-child(3n+1){border-top-color:#c7962d}
.post-card__image{display:block;max-height:235px;overflow:hidden;background:#f1dec9}
.post-card__image img{display:block;width:100%;height:235px;object-fit:cover}
.post-card__body{display:flex;flex:1;flex-direction:column;padding:32px 34px 30px}
.post-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;color:#84727a;font-size:.78rem}
.post-card__meta .eyebrow{color:var(--accent-dark);font-size:.7rem}
.post-card__title{margin:0 0 12px;font-size:clamp(1.38rem,2vw,1.88rem);line-height:1.25;letter-spacing:-.04em;font-weight:760}
.post-card__title a:hover{color:var(--accent-dark)}
.post-card__excerpt{color:var(--muted);font-size:.94rem;line-height:1.75}
.post-card__excerpt p{margin:0}
.post-card__more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding-top:27px;color:var(--accent-dark);font-size:.87rem;font-weight:750}
.post-card__more span{font-size:1.08rem;transition:transform .2s}
.post-card__more:hover span{transform:translate(2px,-2px)}
.post-card--featured{grid-column:1/-1;min-height:315px;background:linear-gradient(120deg,#315943,#254637 68%,#1d3d34);border-color:#315943;color:#fffaf0}
.post-card--featured .post-card__body{max-width:850px;padding:45px 55px}
.post-card--featured .post-card__meta{justify-content:flex-start;gap:22px;color:#d4e0cb}
.post-card--featured .post-card__meta .eyebrow,.post-card--featured .post-card__more{color:var(--accent)}
.post-card--featured .post-card__title{font-size:clamp(2rem,3.2vw,3.15rem);line-height:1.13;letter-spacing:-.056em}
.post-card--featured .post-card__title a:hover{color:var(--accent)}
.post-card--featured .post-card__excerpt{max-width:670px;color:#e0e9d9;font-size:1rem}
.post-card--featured .post-card__more{padding-top:23px}
.listing-header{padding-top:64px;padding-bottom:8px}
.listing-header>.eyebrow{color:var(--accent-dark)}
.listing-header h1{margin:8px 0 8px;font-size:clamp(2.5rem,5vw,4.25rem);letter-spacing:-.07em;line-height:1.1}
.archive-description{max-width:700px;color:var(--muted)}
.listing-header+.posts-section{padding-top:34px}
.navigation.pagination{margin-top:42px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.page-numbers{display:inline-grid;place-items:center;min-width:40px;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:.88rem;font-weight:650}
.page-numbers.current,.page-numbers:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.empty-state{max-width:700px;padding:45px;background:#fff;border:1px solid var(--line);border-radius:10px}
.empty-state h2{margin-top:0}

/* Articles */
.single-main{padding-top:54px;padding-bottom:95px}
.article-header{max-width:980px;margin-bottom:36px}
.article-breadcrumb{display:flex;gap:10px;margin-bottom:38px;color:#806e73;font-size:.82rem}
.article-breadcrumb a:hover{color:var(--accent-dark)}
.article-header>.eyebrow{color:var(--accent-dark)}
.article-header h1{max-width:1020px;margin:14px 0 25px;font-size:clamp(2.6rem,5.2vw,4.7rem);line-height:1.12;letter-spacing:-.065em;font-weight:790}
.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#78686e;font-size:.85rem}
.article-byline a{font-weight:700;color:var(--ink)}
.byline-dot{width:3px;height:3px;border-radius:50%;background:#ad9090}
.article-cover{max-width:1040px;margin:0 0 46px}
.article-cover img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:8px}
.article-layout{display:grid;grid-template-columns:minmax(0,var(--body-width)) minmax(190px,1fr);gap:72px;align-items:start}
.article-column{min-width:0}
.entry-content{font-size:1.08rem;line-height:1.82;color:#3c3037;overflow-wrap:anywhere}
.entry-content>*:first-child{margin-top:0}
.entry-content p{margin:0 0 1.45em}
.entry-content h2,.entry-content h3,.entry-content h4{scroll-margin-top:28px;line-height:1.25;letter-spacing:-.04em;color:var(--ink)}
.entry-content h2{margin:2.2em 0 .72em;font-size:1.88rem}
.entry-content h3{margin:1.7em 0 .6em;font-size:1.4rem}
.entry-content h4{margin:1.5em 0 .5em;font-size:1.15rem}
.entry-content a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:#71301f}
.entry-content ul,.entry-content ol{padding-left:1.5em;margin:0 0 1.5em}
.entry-content li{padding-left:.25em;margin:.3em 0}
.entry-content blockquote{margin:2em 0;padding:12px 24px;border-left:4px solid var(--accent-dark);background:#ffedd9;color:#513640}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content code,.entry-content kbd{padding:.13em .35em;border-radius:4px;background:#ffe8cb;color:#8b3e25;font:.88em/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.entry-content pre,.entry-content .wp-block-code,.entry-content .syntaxhighlighter{max-width:100%;overflow-x:auto;margin:1.6em 0;padding:21px 24px;border-radius:8px;background:#332534!important;color:#fff0d6!important;font:.88rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace!important;white-space:pre}
.entry-content pre code,.entry-content .wp-block-code code{padding:0;background:transparent;color:inherit;font:inherit}
.entry-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.5em 0;font-size:.93rem}
.entry-content .dt-layout-table{overflow-x:auto}
.entry-content table.tablepress{display:table;min-width:700px;width:100%;max-width:none;overflow:visible}
.entry-content table.tablepress th,.entry-content table.tablepress td{overflow-wrap:normal;word-break:normal}
.entry-content table.tablepress th:first-child,.entry-content table.tablepress td:first-child{min-width:115px}
.entry-content th,.entry-content td{padding:10px 14px;border:1px solid var(--line);text-align:left}
.entry-content th{background:#ffebd1}
.entry-content img{max-width:100%;border-radius:6px}
.entry-content figure{margin:1.7em 0}
.entry-content figcaption,.wp-caption-text{color:#807077;font-size:.78rem;text-align:center}
.entry-content iframe{max-width:100%}
.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:48px 0 30px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-tags>span{margin-right:7px;color:#806e73;font:.72rem ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.1em}
.article-tags a{padding:5px 11px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:.78rem}
.article-tags a:hover{border-color:var(--accent-dark);color:var(--accent-dark)}
.post-navigation .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.post-navigation .nav-links>div{min-width:0}
.post-navigation a{display:block;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:.9rem;font-weight:700;line-height:1.35}
.post-navigation a:hover{border-color:var(--accent-dark)}
.post-navigation a span{display:block;margin-bottom:5px;color:#806e73;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.article-aside{position:sticky;top:30px;padding-top:9px}
.aside-box{padding:25px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aside-box>.eyebrow{color:var(--accent-dark)}
.aside-box h2{margin:5px 0 13px;font-size:1.3rem;letter-spacing:-.04em}
.aside-box .topic-links>a{border-color:var(--line);font-size:.86rem}
.aside-box .topic-links>a span{color:var(--accent-dark)}
.aside-note{margin-top:25px;padding-left:13px;border-left:2px solid var(--accent-dark);color:#8a7275;font:.78rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.page-main{padding-top:70px;padding-bottom:100px}
.page-article{max-width:var(--body-width)}
.not-found{min-height:58vh;padding-top:100px;padding-bottom:100px}
.not-found h1{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.06em}
.not-found>a{display:inline-block;margin-top:20px;color:var(--accent-dark);font-weight:700}

/* Search and discussion */
.search-form{max-width:620px;margin:20px 0}
.search-form label{display:block;margin-bottom:8px;font-size:.82rem;font-weight:700}
.search-form__row{display:flex;gap:8px}
.search-form input{min-width:0;flex:1;padding:11px 14px;border:1px solid #c9aea0;border-radius:6px;background:#fff;color:var(--ink)}
.search-form button,.comment-form input[type=submit]{padding:11px 18px;border:0;border-radius:6px;background:var(--ink-deep);color:#fff;font-size:.88rem;font-weight:700}
.search-form button:hover,.comment-form input[type=submit]:hover{background:var(--accent-dark)}
.comments-area{margin-top:70px}
.comments-area h2,.comment-reply-title{font-size:1.75rem;letter-spacing:-.04em}
.comment-list{padding:0;list-style:none}
.comment-list .children{margin-left:30px;padding-left:20px;border-left:2px solid var(--line);list-style:none}
.comment-body{margin:0 0 16px;padding:22px 24px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.92rem}
.comment-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.78rem;color:#8a777a}
.comment-author{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.88rem}
.comment-author img{border-radius:50%}
.comment-content p{margin:.65em 0}
.reply a{color:var(--accent-dark);font-weight:700}
.comment-form p{margin:0 0 15px}
.comment-form label{display:block;margin-bottom:6px;font-size:.82rem;font-weight:700}
.comment-form textarea,.comment-form input:not([type=checkbox]):not([type=submit]){width:100%;max-width:100%;padding:11px;border:1px solid #c9aea0;border-radius:6px;background:#fff}
.comment-form-cookies-consent label{display:inline;font-weight:400}

/* Footer */
.site-footer{background:var(--ink-deep);color:#fff0e9}
.footer-inner{display:flex;justify-content:space-between;gap:40px;padding-top:62px;padding-bottom:45px}
.footer-brand{font-size:1.4rem;font-weight:770;letter-spacing:-.05em}
.footer-inner p{margin:9px 0 0;color:#d2b2b8;font-size:.88rem}
.footer-links{display:flex;align-items:start;gap:30px;font-size:.82rem}
.footer-categories>.eyebrow{color:var(--accent)}
.footer-categories ul{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));column-gap:22px;row-gap:8px;margin:11px 0 0;padding:0;list-style:none}
.footer-categories li{margin:0}
.footer-links .menu{display:flex;gap:30px;margin:0;padding:0;list-style:none}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:28px;border-top:1px solid #735263;color:#c3a5ac;font-size:.74rem}

@media(max-width:1000px){.header-inner{gap:18px}.desktop-nav .menu{gap:17px}.article-layout{grid-template-columns:minmax(0,1fr) 210px;gap:35px}.hero-inner{gap:35px}}
@media(max-width:760px){.site-wrap{width:min(calc(100% - 32px),var(--site-width))}.header-inner{min-height:72px}.brand-logo{width:42px;height:42px}.desktop-nav{display:none}.header-actions{margin-left:auto}.mobile-nav{display:block;position:relative}.mobile-nav summary{display:grid;align-content:center;gap:4px;width:42px;height:42px;padding:11px;border:1px solid #304a55;border-radius:8px;list-style:none;cursor:pointer}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary span{height:2px;background:#e7f2f4}.mobile-nav nav{position:absolute;right:0;top:50px;width:min(78vw,300px);padding:14px 20px;background:#102a37;border:1px solid #31505b;border-radius:8px;box-shadow:0 18px 32px #0005}.mobile-nav .menu>li>a,.mobile-nav .sub-menu a{display:block;padding:9px 0;color:#edf7f8;font-size:.9rem}.mobile-nav .sub-menu{margin:0 0 5px;padding-left:16px;list-style:none;border-left:1px solid #41616d}.hero-inner{grid-template-columns:1fr;gap:37px;padding-top:52px;padding-bottom:55px}.hero-inner::after{display:none}.hero h1{font-size:clamp(2.9rem,11vw,4.7rem)}.hero p{font-size:1rem}.hero-topics{align-self:start}.posts-section{padding-top:42px;padding-bottom:70px}.post-grid{grid-template-columns:1fr}.post-card--featured{min-height:auto}.post-card--featured .post-card__body{padding:32px}.post-card--featured .post-card__title{font-size:2rem}.article-layout{display:block}.article-aside{position:static;margin-top:55px}.aside-note{display:none}.article-header h1{font-size:clamp(2.4rem,8vw,3.9rem)}.single-main{padding-top:34px}.article-breadcrumb{margin-bottom:26px}.footer-inner{padding-top:42px}}
@media(max-width:500px){.post-card__body{padding:25px 24px}.post-card--featured .post-card__body{padding:28px 25px}.post-card--featured .post-card__title{font-size:1.75rem}.post-card__meta{flex-wrap:wrap;justify-content:flex-start;gap:5px 15px}.footer-inner{display:block}.footer-links,.footer-links .menu{flex-wrap:wrap;gap:12px 20px;margin-top:22px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}.post-navigation .nav-links{grid-template-columns:1fr}.search-form__row{display:block}.search-form input,.search-form button{width:100%}.search-form button{margin-top:8px}.comment-list .children{margin-left:10px;padding-left:10px}.brand-copy strong{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media(max-width:500px){.hero-inner{gap:25px;padding-top:38px;padding-bottom:40px}.hero h1{margin:13px 0 13px;font-size:2.75rem}.hero p{line-height:1.58}.hero-topics{padding:0;border:0}.hero-topics>.eyebrow{margin-bottom:10px}.hero-topics .topic-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero-topics .topic-links>a{min-height:40px;padding:7px 9px;border:1px solid #ffffff35;border-radius:5px;font-size:.76rem}.hero-topics .topic-links>a span{font-size:.95rem}}
@media(max-width:760px){.mobile-nav summary{border-color:#7d5867}.mobile-nav summary span{background:#fff0e9}.mobile-nav nav{background:#4b2c41;border-color:#875c6b}.mobile-nav .menu>li>a,.mobile-nav .sub-menu a{color:#fff0e9}.mobile-nav .sub-menu{border-color:#875c6b}}