/*
Theme Name: CyberAlex Journal
Theme URI: https://cyberalex.ironbytes.de/
Description: Ruhiges, responsives persönliches Magazin für Kochen, Reisen, Technik und alles dazwischen. Child-Theme von Twenty Twenty.
Author: CyberAlex
Version: 1.0.0
Template: twentytwenty
Text Domain: cyberalex-journal
Requires PHP: 8.0
*/
:root{--cx-ink:#182c39;--cx-text:#34424d;--cx-muted:#65737c;--cx-accent:#a65e3d;--cx-line:#e2e4e1;--cx-surface:#fff;--cx-bg:#f6f5f0;--cx-radius:15px;--cx-max:1190px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.cx-site{background:var(--cx-bg);color:var(--cx-text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.68;margin:0}
body.cx-site a{color:var(--cx-accent);text-decoration:none}
body.cx-site a:hover{text-decoration:underline}
body.cx-site button,body.cx-site input{font:inherit}
body.cx-site img{max-width:100%;height:auto}
.cx-container{width:min(calc(100% - 44px),var(--cx-max));margin:0 auto}
.cx-skip{position:absolute;left:12px;top:-100px;z-index:200;padding:10px 18px;background:white;color:#111}.cx-skip:focus{top:12px}
.cx-header{position:relative;z-index:15;background:rgba(255,255,255,.97);border-bottom:1px solid var(--cx-line)}
.cx-header-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:91px}
.cx-brand{display:flex;flex-direction:column;line-height:1.2;flex-shrink:0}
body.cx-site .cx-wordmark{color:var(--cx-ink);font-weight:850;font-size:27px;letter-spacing:-.055em;line-height:1.2}
.cx-wordmark span{color:var(--cx-accent)}
.cx-strap{font-size:11px;color:var(--cx-muted);letter-spacing:.10em;text-transform:uppercase;margin-top:6px}
.cx-desktop-nav{display:flex;align-items:center;gap:18px}
.cx-desktop-nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.cx-desktop-nav li{margin:0;padding:0}
body.cx-site .cx-desktop-nav a{color:var(--cx-ink);font-size:14px;font-weight:650}
body.cx-site .cx-desktop-nav a:hover,body.cx-site .cx-desktop-nav .current-menu-item>a{color:var(--cx-accent)}
.cx-search{display:flex;align-items:center;gap:0;border:1px solid var(--cx-line);border-radius:30px;background:#fff;overflow:hidden}
.cx-search input{width:130px;min-width:0;border:0!important;background:transparent!important;padding:9px 3px 9px 14px!important;color:var(--cx-ink)!important;font-size:13px!important;margin:0!important}
.cx-search button{border:0!important;background:transparent!important;color:var(--cx-accent)!important;padding:8px 11px!important;cursor:pointer}
.cx-mobile{display:none;position:relative}.cx-mobile summary{cursor:pointer;color:var(--cx-ink);font-weight:700;list-style:none}.cx-mobile summary::-webkit-details-marker{display:none}
.cx-mobile-panel{position:absolute;right:0;top:36px;width:min(320px,85vw);padding:20px;background:#fff;border:1px solid var(--cx-line);border-radius:12px;box-shadow:0 15px 30px #182c391c}
.cx-mobile-panel ul{list-style:none;padding:0;margin:0 0 14px}.cx-mobile-panel li{margin:10px 0}.cx-mobile-panel .cx-search input{width:100%}
.cx-intro{padding:67px 0 30px}.cx-eyebrow{color:var(--cx-accent);font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin:0 0 12px}.cx-intro h1{font-size:clamp(38px,5vw,69px);line-height:1.10;letter-spacing:-.045em;color:var(--cx-ink);font-weight:850;margin:0 0 18px}.cx-intro p.cx-lead{font-size:clamp(16px,2vw,20px);color:var(--cx-muted);max-width:740px;line-height:1.65;margin:0}
.cx-topicbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:28px 0 0}.cx-topicbar a{display:inline-flex;padding:8px 15px;border:1px solid #d8dcd9;border-radius:99px;background:#fff;color:var(--cx-ink)!important;font-size:13px;font-weight:650}.cx-topicbar a:hover{border-color:var(--cx-accent);color:var(--cx-accent)!important;text-decoration:none}
.cx-section{padding:36px 0 72px}.cx-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin:0 0 24px}.cx-section-head h2{font-size:28px;letter-spacing:-.035em;color:var(--cx-ink);margin:0}.cx-small-link{font-size:13px;font-weight:750}
.cx-feature{display:grid;grid-template-columns:1.18fr 1fr;min-height:390px;background:var(--cx-surface);border:1px solid var(--cx-line);border-radius:var(--cx-radius);overflow:hidden;box-shadow:0 10px 26px #172b390a;margin:8px 0 25px}
.cx-feature .cx-media{height:100%;min-height:360px;border-radius:0}.cx-feature-info{padding:clamp(25px,4vw,55px);display:flex;flex-direction:column;justify-content:center}.cx-feature-info h2{font-size:clamp(27px,3vw,43px);line-height:1.18;letter-spacing:-.04em;margin:11px 0 13px;color:var(--cx-ink)}.cx-feature-info h2 a{color:inherit}.cx-feature-info p{font-size:15px;line-height:1.65;color:var(--cx-muted);margin:0 0 20px}
.cx-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--cx-muted);font-size:12px;font-weight:600}.cx-category{color:var(--cx-accent)!important;text-transform:uppercase;letter-spacing:.085em;font-size:11px;font-weight:800}
.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cx-card{display:flex;flex-direction:column;background:var(--cx-surface);border:1px solid var(--cx-line);border-radius:var(--cx-radius);overflow:hidden;min-width:0;box-shadow:0 8px 19px #172b3908;transition:transform .2s,box-shadow .2s}
.cx-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #172b3916}
.cx-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#273e4c,#77909a);color:#fff!important}
.cx-media img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;transition:transform .3s}
.cx-card:hover .cx-media img,.cx-feature:hover .cx-media img{transform:scale(1.035)}
.cx-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:25px;text-align:center;background:linear-gradient(135deg,#203745,#506a75);color:#d6e0e2;font-size:17px;font-weight:750;letter-spacing:.025em}
.cx-card-body{padding:22px 22px 25px;display:flex;flex-direction:column;flex:1}.cx-card-body h3{font-size:21px;line-height:1.30;letter-spacing:-.026em;font-weight:780;color:var(--cx-ink);margin:9px 0 11px;min-height:2.6em}.cx-card-body h3 a{color:inherit}.cx-card-body p{font-size:14px;color:var(--cx-muted);line-height:1.65;margin:0 0 21px;flex:1}.cx-card .cx-meta{margin-top:auto}
.cx-pager{margin-top:34px}.cx-pager .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.cx-pager .page-numbers{padding:9px 15px;background:white;border:1px solid var(--cx-line);border-radius:9px;color:var(--cx-ink);font-size:14px}.cx-pager .current{background:var(--cx-ink);color:white}
.cx-page-intro{padding:62px 0 30px}.cx-page-intro h1{margin:0 0 12px;color:var(--cx-ink);font-size:clamp(32px,4vw,52px);letter-spacing:-.04em}.cx-page-intro p{max-width:700px;color:var(--cx-muted);font-size:17px}
.cx-story{max-width:860px;margin:0 auto;padding:56px 22px 85px}.cx-story-header{text-align:center;margin:0 auto 38px;max-width:790px}.cx-story-header h1{font-size:clamp(36px,5vw,62px);line-height:1.15;letter-spacing:-.045em;color:var(--cx-ink);margin:12px 0 18px}.cx-story-header .cx-meta{justify-content:center}.cx-story-cover{margin:0 auto 35px;width:100%;border-radius:15px;overflow:hidden}.cx-story-cover img{width:100%;max-height:620px;object-fit:cover}.cx-story-content{background:#fff;border:1px solid var(--cx-line);padding:clamp(23px,5vw,62px);border-radius:var(--cx-radius);color:#263642;font-size:17px;line-height:1.82;overflow-wrap:anywhere}
.cx-story-content h2,.cx-story-content h3,.cx-story-content h4{color:var(--cx-ink);line-height:1.28;letter-spacing:-.025em;margin-top:1.7em}.cx-story-content h2{font-size:30px}.cx-story-content h3{font-size:23px}.cx-story-content p{margin:0 0 1.35em}.cx-story-content a{text-decoration:underline;text-underline-offset:2px}.cx-story-content figure{max-width:100%;margin:28px 0}.cx-story-content img{max-width:100%;height:auto;border-radius:9px}.cx-story-content .wp-block-image img{height:auto}.cx-story-content ul,.cx-story-content ol{margin:0 0 22px;padding-left:26px}.cx-story-content blockquote{border-left:4px solid var(--cx-accent);padding:12px 22px;margin:26px 0;background:var(--cx-bg);font-style:italic}.cx-story-content pre{max-width:100%;overflow-x:auto;padding:20px;background:#182c39;color:#fff;border-radius:10px}.cx-story-content iframe{max-width:100%}.cx-story-content .gallery{max-width:100%}
.cx-story-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:26px;flex-wrap:wrap}.cx-story-footer a{font-size:14px;font-weight:700}.cx-comments{margin-top:30px}
.cx-footer{background:var(--cx-ink);color:#bdc9d0;padding:43px 0}.cx-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.cx-footer .cx-wordmark{color:white!important}.cx-footer p{margin:6px 0 0;font-size:13px}.cx-footer ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}.cx-footer li{margin:0}.cx-footer a{color:#dce4e8!important;font-size:13px}.cx-footer a:hover{color:white!important}
.cx-empty{padding:65px 25px;text-align:center;background:white;border:1px solid var(--cx-line);border-radius:15px;color:var(--cx-muted)}.cx-empty h2{color:var(--cx-ink)}
@media(max-width:980px){.cx-desktop-nav{display:none}.cx-mobile{display:block}.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-feature{grid-template-columns:1fr 1fr}.cx-feature .cx-media{min-height:320px}}
@media(max-width:680px){.cx-container{width:min(calc(100% - 28px),var(--cx-max))}.cx-header-inner{min-height:73px}.cx-wordmark{font-size:24px!important}.cx-strap{font-size:9px}.cx-intro{padding:44px 0 17px}.cx-section{padding:24px 0 49px}.cx-section-head h2{font-size:25px}.cx-feature{grid-template-columns:1fr}.cx-feature .cx-media{min-height:0;height:auto;aspect-ratio:4/3}.cx-feature-info{padding:26px}.cx-feature-info h2{font-size:30px}.cx-grid{grid-template-columns:1fr;gap:17px}.cx-card-body h3{min-height:0}.cx-page-intro{padding:40px 0 24px}.cx-story{padding:35px 14px 55px}.cx-story-header{margin-bottom:25px}.cx-story-content{font-size:16px}.cx-story-content h2{font-size:25px}.cx-footer-inner{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}