/* toysandcrew.com — ein Stylesheet für alles.
   Kopf und Fuß übernehmen Aufbau und Maße,
   damit man die Seiten als Familie erkennt. Akzent: Signalgelb (Andreas, 03.10.2026). */

:root{
  --ink:#0a0a0a; --muted:#5b5f66; --line:#e3e4e8; --bg:#ffffff; --card:#f4f5f7;
  --header-bg:#000; --header-ink:#fff;
  --accent:#FFC72C; --accent-on:#000;
  --maxw:1200px;
  --font-head:'Karantina', 'Arial Narrow', sans-serif;
  --font-body:'Mulish', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-menu:'Poppins', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#f2f3f5; --muted:#a2a7b0; --line:#2a2d33; --bg:#0e1013; --card:#171a1f; }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
a:focus-visible, button:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.schmal{max-width:780px}
h1,h2,h3{margin:0; font-weight:700}
.sprung{position:absolute; left:-9999px; top:0; background:var(--accent); color:#000; padding:10px 14px; z-index:300}
.sprung:focus{left:12px; top:12px}

/* ---------- Kopf ---------- */
.es-header{position:sticky; top:0; z-index:100; background:var(--header-bg); color:var(--header-ink); border-bottom:4px solid var(--accent)}
.es-header a{color:var(--header-ink); text-decoration:none}
.es-topbar{border-bottom:1px solid rgba(255,255,255,.08)}
.es-topbar-inner{max-width:var(--maxw); margin:0 auto; padding:8px 20px; display:flex; justify-content:flex-end; gap:22px; font-size:13px; color:#cfd3d8}
.es-topbar-inner a{color:#cfd3d8}
.es-topbar-inner a:hover{color:var(--accent)}
@media(max-width:900px){ .es-topbar{display:none} }
.es-bar{max-width:var(--maxw); margin:0 auto; padding:0 20px; min-height:78px; display:flex; align-items:center; gap:22px}

.logo{display:flex; flex-direction:column; line-height:1}
.logo-wort{font-family:var(--font-head); font-size:46px; letter-spacing:.01em; color:#fff; white-space:nowrap}
.logo-wort .amp{color:var(--accent); padding:0 .06em}
.logo-zeile{font-family:var(--font-menu); font-weight:600; font-size:12px; color:#cfd3d8; margin-top:3px; align-self:flex-end}

.es-nav{display:flex; align-items:center; margin-left:auto}
.es-nav-list{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end}
.es-nav-item{position:relative}
.es-nav-link{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-menu); font-weight:700; text-transform:uppercase; font-size:14px; color:#fff; padding:10px 12px; border-radius:8px; white-space:nowrap; background:none; border:0; cursor:pointer}
.es-nav-link:hover, .es-nav-link[aria-current="page"], .es-nav-link.ist-aktiv,
.es-nav-item:hover > .es-nav-link, .es-nav-item.open > .es-nav-link{color:var(--accent)}
.es-caret{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; opacity:.85}
.es-nav-item.open > .es-nav-link .es-caret{transform:rotate(-135deg) translateY(0)}
.es-dropdown{position:absolute; top:100%; left:0; min-width:236px; background:#fff; color:#0a0a0a; border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.16); padding:10px; margin:10px 0 0; list-style:none; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s}
.es-header .es-dropdown a{display:block; color:#0a0a0a; font-family:var(--font-menu); font-weight:700; font-size:14px; text-transform:uppercase; padding:11px 14px; border-radius:10px; white-space:nowrap}
.es-header .es-dropdown a:hover{background:#f4f4f2; box-shadow:inset 4px 0 0 var(--accent)}
@media (hover:hover) and (min-width:901px){ .es-nav-item:hover > .es-dropdown{opacity:1; visibility:visible; transform:translateY(0)} }
.es-nav-item.open > .es-dropdown{opacity:1; visibility:visible; transform:translateY(0)}

.es-burger{display:none; margin-left:auto; width:42px; height:42px; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px}
.es-burger span{display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.es-header.nav-open .es-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.es-header.nav-open .es-burger span:nth-child(2){opacity:0}
.es-header.nav-open .es-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .es-burger{display:flex}
  .es-nav{position:fixed; top:82px; left:0; right:0; bottom:0; padding:14px 20px 40px; background:#000; overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; align-items:flex-start}
  .es-header.nav-open .es-nav{transform:translateX(0)}
  .es-nav-list{flex-direction:column; align-items:stretch; width:100%}
  .es-nav-item{width:100%; border-bottom:1px solid rgba(255,255,255,.08)}
  .es-nav-link{width:100%; font-size:15px; padding:15px 6px; justify-content:space-between}
  .es-dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-radius:0; margin:0 0 8px; padding:0 0 6px 8px; background:transparent; display:none}
  .es-nav-item.open > .es-dropdown{display:block}
  .es-header .es-dropdown a{color:#cfd3d8; text-transform:none; font-size:14.5px; padding:9px 8px}
  .es-header .es-dropdown a:hover{background:rgba(255,255,255,.06); color:var(--accent); box-shadow:none}
  .logo-wort{font-size:40px}
}

/* ---------- Bausteine ---------- */
.rubrik{display:inline-block; font-family:var(--font-menu); font-weight:700; font-size:12.5px; line-height:1; background:var(--accent); color:var(--accent-on); padding:6px 9px 5px; border-radius:3px; text-decoration:none}
.rubrik-typ{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--accent); margin-top:2px}
.zeit{color:var(--muted); font-size:13.5px}
.titel-link{text-decoration:none}
a.titel-link:hover, .titel-link:hover{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; text-underline-offset:4px}
.pfad{font-size:14px; color:var(--muted); margin:26px 0 16px}
.pfad a{color:var(--muted)}
.seiten-h1{font-family:var(--font-head); font-size:clamp(48px, 6vw, 76px); line-height:.95; margin:10px 0 26px}
.leer{font-size:19px; color:var(--muted); padding:30px 0}
.knopf{display:inline-block; font:inherit; font-family:var(--font-menu); font-weight:700; font-size:14px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); border-radius:8px; padding:10px 16px; cursor:pointer; text-decoration:none}
.knopf-primaer{background:var(--accent); border-color:var(--accent); color:#000}

/* ---------- Startseite ---------- */
.datumzeile{display:flex; justify-content:space-between; align-items:baseline; padding:22px 0 14px; border-bottom:1px solid var(--line); margin-bottom:28px; gap:16px; flex-wrap:wrap}
.datumzeile strong{font-family:var(--font-menu); font-size:14px}
.datumzeile span{color:var(--muted); font-size:14px}
.oben{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line)}
.oben:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.aufmacher-bild{aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:4px}
.aufmacher-text{margin-top:18px}
.aufmacher h2{font-family:var(--font-head); font-size:clamp(44px, 5.4vw, 74px); line-height:.95; letter-spacing:.005em; margin:12px 0 14px; max-width:22ch}
.aufmacher p{font-size:19px; line-height:1.55; color:var(--muted); margin:0 0 10px; max-width:60ch}
.latest h2{font-family:var(--font-menu); font-size:15px; padding-bottom:10px; border-bottom:3px solid var(--ink); margin-bottom:4px}
.latest ol{list-style:none; margin:0; padding:0}
.latest li{padding:16px 0; border-bottom:1px solid var(--line)}
.latest li:last-child{border-bottom:0}
.latest .zeit{display:block; margin-bottom:4px}
.latest h3{font-family:var(--font-body); font-size:18px; line-height:1.3; font-weight:800}
.rubrikblock{padding:40px 0 44px; border-bottom:1px solid var(--line)}
.rubrikkopf{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; gap:12px}
.rubrikkopf h2{font-family:var(--font-head); font-size:44px; line-height:1}
.rubrikkopf a{font-family:var(--font-menu); font-weight:600; font-size:14px; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px}
.drei{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-bottom:40px}
.karte-bild{aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:4px; margin-bottom:14px}
.karte h3{font-family:var(--font-body); font-size:21px; line-height:1.28; font-weight:800; margin:10px 0 6px}
.karte p{margin:0 0 8px; color:var(--muted); font-size:15.5px; line-height:1.5}
.haefen{background:#000; color:#fff; border-radius:4px; margin:44px 0; padding:40px; display:grid; gap:14px; justify-items:start}
.haefen h2{font-family:var(--font-head); font-size:56px; line-height:.95}
.haefen p{color:#cfd3d8; margin:0; max-width:60ch}
.haefen dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:6px 0 0; font-size:15px}
.haefen dt{color:var(--accent); font-family:var(--font-menu); font-weight:600}
.haefen dd{margin:0}
@media (max-width:900px){
  .oben{grid-template-columns:1fr; gap:32px}
  .drei{grid-template-columns:1fr; gap:34px}
  .haefen{padding:28px 22px}
  .haefen h2{font-size:46px}
}

/* ---------- Artikel ---------- */
.artikel-raster{display:grid; grid-template-columns:minmax(0,720px) minmax(0,1fr); gap:56px; padding-bottom:60px}
.artikel h1{font-family:var(--font-head); font-size:clamp(48px, 6.6vw, 82px); line-height:.94; margin:14px 0 18px}
.vorspann{font-size:21px; line-height:1.5; margin:0 0 22px; font-weight:500}
.autor{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:26px}
.autor img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.autor a{text-decoration:none}
.autor a:hover b{text-decoration:underline; text-decoration-color:var(--accent)}
.autor b{display:block; font-size:15.5px}
.autor span{color:var(--muted); font-size:14px}
figure{margin:0 0 30px}
.artikel-bild{width:100%; border-radius:4px}
figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
.text p, .text li{max-width:68ch}
.text p{margin:0 0 20px}
.text h2{font-family:var(--font-body); font-weight:800; font-size:26px; line-height:1.25; margin:36px 0 12px}
.text h3{font-family:var(--font-body); font-weight:800; font-size:20px; margin:28px 0 8px}
.text a{text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
.text ul, .text ol{margin:0 0 20px; padding-left:22px}
.tabelle{overflow-x:auto; margin:0 0 24px; max-width:100%}
.text table{border-collapse:collapse; width:100%; font-size:15.5px; min-width:420px}
.text th{font-family:var(--font-menu); font-size:13px; text-align:left; border-bottom:3px solid var(--ink); padding:8px 12px 8px 0}
.text td{border-bottom:1px solid var(--line); padding:9px 12px 9px 0; vertical-align:top}
.meinung{border-left:6px solid var(--accent); background:var(--card); padding:22px 26px; margin:34px 0; border-radius:0 4px 4px 0}
.meinung h2{margin:0 0 8px; font-size:22px}
.meinung p:last-child{margin-bottom:0}
.quellen{border:1px solid var(--line); border-radius:4px; padding:20px 24px; margin-top:34px; font-size:15px}
.quellen h2{font-family:var(--font-menu); font-size:15px; margin:0 0 10px}
.quellen dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0}
.quellen dt{color:var(--muted)}
.quellen dd{margin:0}
.quellen a{text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
.disclaimer{font-size:14px; color:var(--muted); margin:22px 0 0; max-width:68ch; padding-top:14px; border-top:1px solid var(--line)}
.offenlegung{font-size:14px; color:var(--muted); margin-top:20px; max-width:68ch}
.seitenspalte{position:sticky; top:130px; align-self:start; margin-top:26px}
@media (max-width:900px){
  .artikel-raster{grid-template-columns:1fr; gap:40px}
  .seitenspalte{position:static}
}

/* ---------- Textseiten ---------- */
.textseite{padding:26px 20px 60px}
.textseite h2{font-family:var(--font-body); font-weight:800; font-size:22px; margin:30px 0 8px}
.textseite p{margin:0 0 16px}
.textseite a{text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
.autor-kopf{display:flex; align-items:center; gap:24px; margin-bottom:10px}
.autor-kopf img{width:120px; height:120px; border-radius:50%; object-fit:cover}
.autor-kopf .seiten-h1{margin-bottom:4px}
.autor-rolle{color:var(--muted); margin:0}
.autor-liste{padding-left:20px}
.autor-liste li{margin-bottom:8px}

/* ---------- Fuß ---------- */
.es-footer{background:#000; color:#cfd3d8; padding:18px 20px; font-size:13.5px; border-top:3px solid var(--accent)}
.es-footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 32px}
.es-footer .logo-wort{font-size:26px}
.es-footer nav{display:flex; flex-wrap:wrap; gap:8px 22px; flex:1}
.es-footer nav a, .es-footer nav button{color:#cfd3d8; text-decoration:none; font-family:var(--font-menu); font-weight:600; font-size:13px; background:none; border:0; padding:0; cursor:pointer}
.es-footer nav a:hover, .es-footer nav button:hover{color:var(--accent)}
.es-footer small{color:#7d828b; font-size:12px}
@media (max-width:720px){ .es-footer-inner{flex-direction:column; align-items:flex-start; gap:12px} }

/* ---------- Einwilligung (nur wenn GA4 aktiv) ---------- */
.einwilligung{position:fixed; left:16px; right:16px; bottom:16px; z-index:200; display:flex; justify-content:center}
.einwilligung-inhalt{max-width:640px; background:#fff; color:#0a0a0a; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25); padding:20px 22px; border-top:4px solid var(--accent)}
.einwilligung h2{font-size:18px; margin:0 0 6px}
.einwilligung p{margin:0 0 14px; font-size:15px}
.einwilligung-knoepfe{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.einwilligung .knopf{color:#0a0a0a; border-color:#0a0a0a}
.einwilligung .knopf-primaer{border-color:var(--accent)}
.einwilligung a{font-size:14px; color:#0a0a0a}

/* ---------- Nur Vorschau ---------- */
.entwurf-hinweis{background:#FFC72C; color:#000; text-align:center; padding:8px 16px; border-bottom:2px solid #000; font-family:var(--font-menu); font-weight:700; font-size:13px}

[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* Bilder in Textseiten (About, Autorenseite) */
.seiten-figur{margin:22px 0 26px}
.seiten-figur img{width:100%; height:auto; display:block; border-radius:4px}
.seiten-figur figcaption{font-size:14px; color:#6b7280; margin-top:8px}