/* Schriften selbst ausgeliefert (SIL Open Font License, siehe /assets/fonts/OFL.txt): Inter variabel 400–800, Lilita One */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2?v=1) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2?v=1) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lilita-latin-ext.woff2?v=1) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lilita-latin.woff2?v=1) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* oha.voidctrl.org – Marinas LEGO-Sammlung · Designsystem
   Reihenfolge: Schriften · Tokens · Dunkel-Tokens · Basis · Layout · Komponenten · Hilfsklassen.
   Media-Queries stehen am Ende ihres Komponenten-Blocks. Verwaltung: admin.css. */

/* ===== Tokens ===== */
:root{
  /* Marke: Marinas kroatisches Schema */
  --marke-rot:#E4002B; --marke-blau:#171796; --marke-hellblau:#3A6FD8; --weiss:#FFFFFF;
  /* LEGO-Steinpalette: Kopfleisten-Reiter und alles, was zu ihnen gehört (Abschnitts-Steine, Cockpit, Podest, News-Datum) */
  --stein-rot:#D01012; --stein-blau:#0057A8; --stein-gelb:#F2CD37; --stein-gruen:#007A27; --stein-lila:#7B3FE4; --stein-orange:#C2560F; --stein-rosa:#C8287A; --stein-grau:#5B6178; --stein-weiss:#FFFFFF;
  --twitch:#9146FF; --amazon:#FFD814; --schwarz:#1B1B1B;
  /* Aliase aus der Anfangszeit (thema_farbe() und Inline-Stile nutzen sie) – nicht für neue Regeln */
  --rot:var(--marke-rot); --blau:var(--blau-flaeche); --hellblau:var(--marke-hellblau); --gelb:#FFFFFF; --gruen:var(--blau-flaeche);
  --orange:var(--marke-rot); --lila:var(--marke-hellblau); --rosa:#FFD6DE; --lime:#FFFFFF; --weissstein:#FFFFFF; --rot-d:#A80020; --blau-d:#0E0E66;
  /* Flächen, Text, Linien */
  --bg:#F3F4F8; --bg-noppe:rgba(23,23,150,.07); --bg-noppe-licht:rgba(255,255,255,.9);
  --card:#FFFFFF; --text:#1B1B1B; --muted:#6B6F78; --muted-stark:#555A63; --line:#DCE0EA;
  --rot-text:#E4002B; --blau-flaeche:#171796; --text-blau:#171796; --lila-text:#6A2FD6; --gruen-text:#007A27; --link:#171796; --fokus:#3A6FD8;
  --rot-bg:#FFE3E8; --blau-bg:#E1E4F7; --grau-bg:#ECEDEF; --gelb-bg:#F2F4FA;
  --ok:#0E7A3C; --ok-bg:#DDF3E4; --fehler:#B3001F; --fehler-bg:#FFE0E5;
  --kl-aus:#E2E5EE; --kl-aus-text:#4A5068; --platte-leer:#C9CDD8; --leiste:#171796;
  --nur-hell:block; --nur-dunkel:none;
  --schatten:0 8px 24px rgba(27,27,27,.10); --schatten-hoch:0 14px 30px rgba(27,27,27,.18);
  /* Form */
  --r-klein:8px; --r:12px; --r-gross:16px; --akzent-rand:6px;
  --titel-schrift:"Lilita One",Inter,sans-serif;
  color-scheme:light;
}
/* ===== Dunkel-Tokens (System-Einstellung und erzwungen – beide Blöcke gleich halten) ===== */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#16171C; --bg-noppe:rgba(255,255,255,.035); --bg-noppe-licht:rgba(255,255,255,.06);
  --card:#202228; --text:#F3F3F1; --muted:#A8A9AE; --muted-stark:#CACBCF; --line:#2C2F37;
  --rot-text:#FF5C6C; --blau-flaeche:#3A4FE0; --text-blau:#FFFFFF; --lila-text:#B48CFF; --gruen-text:#3DD07A; --link:#9DB8FF; --fokus:#8FB0FF;
  --rot-bg:#4A1020; --blau-bg:#2A2C33; --grau-bg:#2A2C33; --gelb-bg:#27292F;
  --ok:#9DE0B4; --ok-bg:#163A26; --fehler:#FFB3C0; --fehler-bg:#4A1020;
  --kl-aus:#2A2C33; --kl-aus-text:#AAACB4; --platte-leer:#3A3C44; --leiste:#121454; --stein-weiss:#E2E4EA;
  --nur-hell:none; --nur-dunkel:block;
  --schatten:0 8px 24px rgba(0,0,0,.4); --schatten-hoch:0 14px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16171C; --bg-noppe:rgba(255,255,255,.035); --bg-noppe-licht:rgba(255,255,255,.06);
  --card:#202228; --text:#F3F3F1; --muted:#A8A9AE; --muted-stark:#CACBCF; --line:#2C2F37;
  --rot-text:#FF5C6C; --blau-flaeche:#3A4FE0; --text-blau:#FFFFFF; --lila-text:#B48CFF; --gruen-text:#3DD07A; --link:#9DB8FF; --fokus:#8FB0FF;
  --rot-bg:#4A1020; --blau-bg:#2A2C33; --grau-bg:#2A2C33; --gelb-bg:#27292F;
  --ok:#9DE0B4; --ok-bg:#163A26; --fehler:#FFB3C0; --fehler-bg:#4A1020;
  --kl-aus:#2A2C33; --kl-aus-text:#AAACB4; --platte-leer:#3A3C44; --leiste:#121454; --stein-weiss:#E2E4EA;
  --nur-hell:none; --nur-dunkel:block;
  --schatten:0 8px 24px rgba(0,0,0,.4); --schatten-hoch:0 14px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ===== Basis / Typo ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);line-height:1.45;min-height:100vh;background-color:var(--bg);
  background-image:radial-gradient(circle at 50% 42%,var(--bg-noppe-licht) 0 2px,transparent 3px),radial-gradient(circle at 50% 50%,var(--bg-noppe) 0 7px,transparent 8px);
  background-size:36px 36px,36px 36px}
a{color:var(--link);text-decoration:none} a:not([class]):hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
:where(button,input,select,textarea){font:inherit}
[hidden]{display:none!important}
.display{font-family:var(--titel-schrift);font-weight:400;letter-spacing:.01em}
.hinweis{font-size:13px;color:var(--muted)}
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,.kl-stein:focus-visible,.kl-marke:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
summary{min-height:32px;cursor:pointer}

/* ===== Layout ===== */
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;container-type:inline-size}

/* ===== Steine (Grundbaustein für Kacheln, Fakten, Mauer, Baubalken, Abschnitte) ===== */
.noppen{display:flex;gap:5px;position:absolute;left:14px;top:-9px;pointer-events:none;font-size:0}
.noppen>span{width:20px;height:11px;border-radius:10px 10px 4px 4px;background:var(--card);font-size:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.stein{--c:var(--marke-rot);position:relative;border-radius:10px;background:var(--c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(0,0,0,.14)}
.stein>.noppen>span{width:16px;height:9px;background:var(--c)}
.stein.rot{--c:var(--marke-rot)} .stein.blau{--c:var(--blau-flaeche)} .stein.hellblau{--c:var(--marke-hellblau)}
.stein.weiss{--c:var(--stein-weiss);color:#1B1B1B;box-shadow:inset 0 0 0 1px var(--line),0 6px 14px rgba(0,0,0,.12)}
.stein.gelb{--c:var(--stein-gelb);color:#1B1B1B} .stein.gruen{--c:var(--stein-gruen)} .stein.lila{--c:var(--stein-lila)} .stein.orange{--c:var(--stein-orange)} .stein.grau{--c:var(--stein-grau)}

/* ===== Kopfleiste (Entwurf C): Logo, Reiter als bunte LEGO-Steine, Werkzeuge ===== */
.kopfleiste{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 30px;padding:16px 0 12px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.kl-marke{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--text);border-radius:10px}
.logo{width:52px;height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--titel-schrift);font-size:19px;color:#fff;
  background:repeating-conic-gradient(var(--marke-rot) 0 25%,#fff 0 50%) 0 0/16px 16px;text-shadow:0 0 3px var(--marke-blau),0 0 3px var(--marke-blau),0 1px 2px var(--marke-blau);
  box-shadow:inset 0 0 0 3px var(--marke-blau),0 4px 10px rgba(0,0,0,.2)}
.kl-marke .logo{width:40px;height:40px;font-size:14px}
.kl-name{font-family:var(--titel-schrift);font-size:20px;line-height:1;white-space:nowrap}
.kl-tabs{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:5px 6px;overflow-x:auto;scrollbar-width:none}
.kl-tabs::-webkit-scrollbar{display:none}
.kl-tabs.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.kl-tabs.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.kl-tabs.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.kl-stein{--c:var(--stein-grau);position:relative;flex:0 0 auto;display:flex;align-items:center;height:36px;padding:0 13px;border-radius:10px;font-weight:800;font-size:13px;white-space:nowrap;
  color:var(--kl-aus-text);background:var(--kl-aus);box-shadow:none;transition:transform .15s ease,background-color .15s,color .15s}
.kl-stein::before{content:"";position:absolute;top:-5px;left:10px;width:12px;height:5px;border-radius:4px 4px 1px 1px;background:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.kl-stein::after{content:"";position:absolute;top:-5px;left:27px;width:12px;height:5px;border-radius:4px 4px 1px 1px;background:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.kl-stein:hover{background:var(--c);color:#fff}
.kl-stein.an{background:var(--c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px rgba(0,0,0,.3)}
.kl-stein.s-rot{--c:var(--stein-rot)} .kl-stein.s-blau{--c:var(--stein-blau)} .kl-stein.s-gruen{--c:var(--stein-gruen)} .kl-stein.s-lila{--c:var(--stein-lila)}
.kl-stein.s-orange{--c:var(--stein-orange)} .kl-stein.s-grau{--c:var(--stein-grau)} .kl-stein.s-gelb{--c:var(--stein-gelb)} .kl-stein.s-tuerkis{--c:#0A8FA8}
.kl-stein.s-gelb:hover,.kl-stein.s-gelb.an{color:#1B1B1B}
.kl-werkzeug{display:flex;align-items:center;gap:6px;flex-shrink:0}
.kl-werkzeug .btn{height:36px;min-height:36px;padding-top:0;padding-bottom:0;margin:0}
.sprache{display:inline-flex;gap:3px}
.sprache .btn{padding-left:10px;padding-right:10px;font-size:12px;letter-spacing:.06em}
.theme-schalter .hell{display:var(--nur-hell)} .theme-schalter .dunkel{display:var(--nur-dunkel)}
/* knapp: alles in einer Zeile (bei 1024 px Fensterbreite) */
/* acht Reiter: auf jeder Desktop-Breite (Wrap max. 1180 px) kompakt, sonst passt die Reihe nicht in eine Zeile */
/* ===== Desktop (Container > 860 px): ein Kopfband, 64 px, alles in einer Zeile – Reiter mittig als geschlossene Steinreihe ===== */
@container (min-width:881px){
  .kopfleiste{flex-wrap:nowrap;gap:0 18px;height:64px;margin:0 0 28px;padding:0;border-bottom:1px solid var(--line);box-sizing:border-box}
  .kl-marke{gap:9px} .kl-marke .logo{width:38px;height:38px} .kl-name{font-size:18px}
  .kl-tabs{flex:1 1 auto;justify-content:center;gap:4px;padding:6px 0 0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .kl-stein{height:34px;padding:0 10px;font-size:12.5px;letter-spacing:.01em;border-radius:10px;box-shadow:none}
  .kl-stein::before,.kl-stein::after{top:-4px;height:4px;width:10px} .kl-stein::before{left:9px} .kl-stein::after{left:23px}
  .kl-stein.an{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.25)}
  .kl-werkzeug{gap:4px} .kl-werkzeug .btn{height:34px;min-height:34px;padding-left:9px;padding-right:9px;font-size:12px}
  .sprache{gap:0;border-radius:10px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.08)} .sprache .btn{border-radius:0;box-shadow:none;padding-left:9px;padding-right:9px} .sprache .btn:first-child{border-radius:5px 0 0 5px} .sprache .btn:last-child{border-radius:0 5px 5px 0}
}
@container (min-width:881px) and (max-width:1300px){ .kl-lang{display:none} }
@container (min-width:881px) and (max-width:1075px){ .kl-name{display:none} .kl-tabs{gap:3px} .kl-stein{padding:0 8px;font-size:12px} .kl-stein::after{left:21px} .kl-stein .kl-voll{display:none} .kl-stein .kl-kurz{display:inline} .kopfleiste{gap:0 12px} }
/* zu schmal: Reiter in eigene Zeile, seitlich scrollbar */
/* Reiter in eigener Zeile wieder in voller Größe (wie bisher live), nur das Handy verkleinert */
/* schmal: Reiter in eigener Zeile, umbrechend statt seitlich scrollend – alle Reiter sind sichtbar, Reihen füllen die Breite */
/* ===== schmal (Container ≤ 880 px): Reiter weg, Menü-Stein rechts, Vollbild-Menü mit Farbkacheln ===== */
@container (max-width:880px){
  .kl-tabs{display:none}
  .kl-werkzeug .sprache,.kl-werkzeug .theme-schalter{display:none}
  .kl-werkzeug .kl-menu{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:36px;padding:0 11px;border:0;border-radius:10px;background:var(--marke-rot);cursor:pointer;box-shadow:none}
  .kl-menu i{display:block;height:3px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
  html.menu-offen .kl-menu i:nth-child(1){transform:translateY(7px) rotate(45deg)} html.menu-offen .kl-menu i:nth-child(2){opacity:0} html.menu-offen .kl-menu i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .kopfleiste{gap:10px 12px;flex-wrap:nowrap} .kl-marke{flex:1 1 auto;min-width:0} .kl-werkzeug{margin-left:auto}
}
@container (min-width:881px){ .kl-menu,.mega{display:none!important} }
/* kompakte Kopfleiste (.eng, wie zwischen 881 und 1075 px) und zweizeilige (.zwei) – setzt das Skript in kopfleiste(), wenn die Steine nicht in eine Zeile passen */
@container (min-width:881px){
  .kopfleiste.eng .kl-name{display:none} .kopfleiste.eng .kl-tabs{gap:3px} .kopfleiste.eng .kl-stein{padding:0 8px;font-size:12px} .kopfleiste.eng .kl-stein::after{left:21px}
  .kopfleiste.eng .kl-stein .kl-voll{display:none} .kopfleiste.eng .kl-stein .kl-kurz{display:inline} .kopfleiste.eng{gap:0 12px} .kopfleiste.eng .kl-lang{display:none}
}
@container (min-width:881px){
  .kopfleiste.zwei{flex-wrap:wrap;height:auto;padding:10px 0 0;gap:6px 18px}
  .kopfleiste.zwei .kl-werkzeug{margin-left:auto}
  .kopfleiste.zwei .kl-tabs{order:3;flex:1 1 100%;justify-content:center;gap:6px;padding:8px 0 12px}
  .kopfleiste.zwei .kl-name{display:inline}
  .kopfleiste.zwei .kl-stein{padding:0 12px;font-size:13px} .kopfleiste.zwei .kl-stein::after{left:23px}
  .kopfleiste.zwei .kl-stein .kl-voll{display:inline} .kopfleiste.zwei .kl-stein .kl-kurz{display:none}
}
.kl-menu{display:none}
.mega{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:color-mix(in srgb,var(--bg) 96%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:14px 16px calc(16px + env(safe-area-inset-bottom));overflow:auto}
html.menu-offen .mega{display:flex;animation:mega-auf .22s ease-out}
@keyframes mega-auf{from{opacity:0;transform:translateY(-8px)}}
.mega-kopf{display:flex;align-items:center;gap:10px;margin-bottom:18px} .mega-kopf b{font-family:var(--titel-schrift);font-weight:400;font-size:20px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-admin{flex:none;min-height:40px;display:inline-flex;align-items:center} .mega-zu{width:40px;height:40px;border:0;border-radius:10px;background:var(--card);color:var(--text);font-size:18px;cursor:pointer;box-shadow:var(--schatten);flex:none}
.mega-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin:6px 0 auto}
.mega-stein{--c:var(--stein-grau);position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:92px;padding:14px 14px 12px;border-radius:10px;background:var(--c);color:#fff;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px rgba(0,0,0,.2);transition:transform .12s}
.mega-stein:active{transform:translateY(2px)}
.mega-stein.s-rot{--c:var(--stein-rot)} .mega-stein.s-blau{--c:var(--stein-blau)} .mega-stein.s-gelb{--c:var(--stein-gelb);color:#1B1B1B} .mega-stein.s-gruen{--c:var(--stein-gruen)} .mega-stein.s-lila{--c:var(--stein-lila)} .mega-stein.s-orange{--c:var(--stein-orange)} .mega-stein.s-grau{--c:var(--stein-grau)} .mega-stein.s-tuerkis{--c:#0A8FA8}
.mega-stein .hp-noppen{left:12px;top:-9px} .mega-stein .hp-noppen i{background:var(--c)}
.mega-stein b{font-family:var(--titel-schrift);font-weight:400;font-size:21px;line-height:1.05} .mega-stein small{font-size:12px;font-weight:700;opacity:.85}
.mega-stein.an{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px var(--bg),0 0 0 6px var(--text),0 8px 18px rgba(0,0,0,.25)}
.mega-fuss{display:flex;align-items:center;gap:8px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)} .mega-fuss .twitch{margin-left:auto}
@media (min-width:641px){ .mega{padding:18px 24px} .mega-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px;max-width:900px} .mega-stein{min-height:110px} }
@media (max-width:360px){ .mega-stein{min-height:80px;padding:12px} .mega-stein b{font-size:18px} }
.kl-kurz{display:none}
@media (max-width:640px){
  .kl-lang{display:none} .kl-name{font-size:17px} .kl-marke .logo{width:34px;height:34px;font-size:12px}
  .kl-tabs{gap:9px 6px;padding-top:8px} .kl-stein{height:32px;font-size:11.5px;padding:0 6px} .kl-stein::before{left:8px;width:10px} .kl-stein::after{left:22px;width:10px}
  .kl-voll{display:none} .kl-kurz{display:inline}
  .kopfleiste{margin-bottom:20px;padding-top:10px}
}
@media (max-width:360px){ .kl-name{display:none} .kl-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-height:500px){ .kopfleiste{position:static} }

/* ===== Knöpfe = Steine ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 12px;border-radius:10px;font-family:inherit;font-weight:700;font-size:14px;line-height:1;border:0;cursor:pointer;
  background:var(--card);color:var(--text);box-shadow:0 2px 4px rgba(0,0,0,.08);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:16px;height:16px;flex:none}
.btn.klein{padding:7px 11px 9px;font-size:13px;min-height:32px}
.btn.primar{background:var(--marke-rot);color:#fff} .btn.blau{background:var(--blau-flaeche);color:#fff} .btn.twitch{background:var(--twitch);color:#fff}
.btn.aktiv{background:var(--stein-rot);color:#fff}
.btn.gefahr{color:var(--rot-text)}
.btn.amazon{background:var(--amazon);color:#1B1B1B;box-shadow:none;justify-content:center;text-align:center;white-space:normal;gap:6px}
.btn .anzahl{font-weight:600;color:var(--muted)} .btn.aktiv .anzahl{color:#fff}

/* ===== Filterzeilen (eine Komponente: .filterzeile; alte Namen bleiben bis zur Umstellung) ===== */
.ueb-filter,.themen,.gruppe{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 18px}
.werkzeuge .gruppe{margin:0}
.gruppe .lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.werkzeuge{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.suche{flex:1 1 240px;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:0 12px;box-shadow:0 2px 4px rgba(0,0,0,.06)}
.suche:focus-within{box-shadow:0 0 0 3px var(--fokus)}
.suche input{border:0;background:transparent;padding:12px 0 13px;width:100%;font-weight:600;color:var(--text);outline:none;-webkit-appearance:none;appearance:none}
.suche input::-webkit-search-decoration{display:none}
@media (max-width:640px){ .gruppe .lbl{flex-basis:100%} }

/* ===== Seitenkopf: Dachzeile, H1, Einleitung (alle Seiten) ===== */
.seitenkopf{margin:0 0 22px}
.held-zeile{margin:0 0 6px;color:var(--rot-text);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.seitenkopf h1,.ueber h1{font-family:var(--titel-schrift);font-weight:400;font-size:clamp(30px,4vw,42px);line-height:1.05;letter-spacing:.01em;margin:0 0 8px;color:var(--text)}
.seitenkopf>p:not(.held-zeile){margin:0 0 16px;color:var(--muted);font-size:16px;font-weight:500;max-width:60ch}

/* ===== Abschnitt: H2 mit Stein (auch „Gerade im Bau“ mit Pulspunkt) ===== */
.abschnitt,.imbau h2{margin:0 0 14px;font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1.15;display:flex;align-items:center;gap:12px}
.abschnitt .stein{flex:0 0 34px;width:34px;height:18px;margin-top:8px}
.abschnitt .stein .noppen{left:5px;top:-7px;gap:4px} .abschnitt .stein .noppen>span{width:10px;height:8px}
.abschnitt .stein.rot{--c:var(--stein-rot)} .abschnitt .stein.blau{--c:var(--stein-blau)}
.abschnitt small,.abschnitt .hinweis{font:600 13px/1.3 Inter,sans-serif;color:var(--muted)}
.imbau{margin:0 0 28px}
@media (max-width:640px){
  .abschnitt,.imbau h2{flex-wrap:wrap;row-gap:2px;font-size:22px}
  .abschnitt small,.abschnitt .hinweis{flex-basis:100%;padding-left:46px}
}
/* Trennpunkt nur, wenn der Hinweis neben der Überschrift steht (am Handy bricht er darunter um) */
@media (min-width:641px){ .abschnitt>small.hinweis::before{content:"· "} }

/* ===== Startseite: Kacheln und Ziel ===== */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 10px;margin-top:18px}
.kachel{padding:12px 12px 10px}
.kachel b{display:block;font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1}
.kachel>span:not(.noppen){display:block;font-size:11px;font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.kachel.stein.weiss b{color:var(--marke-rot)}
.ziel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;background:var(--card);border-radius:var(--r);padding:10px 14px;box-shadow:var(--schatten)}
.ziel .lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .ziel .lbl b{color:var(--text);font-size:14px}
.ziel-balken{flex:1 1 220px;position:relative;height:18px;border-radius:10px;background:var(--grau-bg);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.ziel-voll{height:100%;background:repeating-linear-gradient(90deg,var(--marke-rot) 0 24px,var(--blau-flaeche) 24px 48px)}
.ziel-balken i{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.6)}
.ziel-rest{font-size:14px;font-weight:600;color:var(--muted)} .ziel-rest b{color:var(--rot-text);font-size:16px}
@media (min-width:600px) and (max-width:899px){ .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){ .kacheln{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:599px){ .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px} }

/* ===== Gerade im Bau: Baustelle, Baubild, Baubalken ===== */
.puls{position:relative;flex:none;width:12px;height:12px;margin:0 11px;border-radius:50%;background:var(--marke-rot)}
.puls::after,.live-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:puls 1.6s ease-out infinite}
@keyframes puls{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
.bau-karte{display:grid;grid-template-columns:minmax(160px,320px) minmax(0,1fr);gap:22px;background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--schatten);
  align-items:center;position:relative;overflow:hidden;color:inherit;margin-bottom:14px}
.bau-karte::before{content:"";position:absolute;left:0;top:0;right:0;height:14px;background:repeating-conic-gradient(var(--marke-rot) 0 25%,#fff 0 50%) 0 0/28px 28px}
.bau-karte a{color:inherit;text-decoration:none}
.bau-karte .bild{background:#fff;border-radius:var(--r-klein);padding:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-top:8px}
.bau-karte .bild img{max-height:100%;object-fit:contain}
.bau-karte h3{margin:0 0 4px;font-family:var(--titel-schrift);font-weight:400;font-size:30px;line-height:1.1;overflow-wrap:anywhere}
.bau-karte .nr{font-size:13px;font-weight:700;color:var(--muted)}
.bau-karte .meta{color:var(--muted);font-weight:500;margin-bottom:10px}
.notiz{background:var(--blau-bg);border-radius:var(--r-klein);padding:10px 12px;font-size:15px;margin-top:12px;white-space:pre-line;border-left:var(--akzent-rand) solid var(--blau-flaeche)}
.baubild{position:relative;background:#fff;border-radius:var(--r-klein);padding:8px;aspect-ratio:1;margin-top:8px;overflow:hidden}
.baubild .roh{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center}
.baubild img{max-height:100%;max-width:100%;object-fit:contain}
.baubild .roh img{filter:grayscale(1) contrast(.6) brightness(1.25);opacity:.28}
.baubild .fertig{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;clip-path:inset(calc(100% - var(--p)) 0 0 0)}
.baubild .linie{position:absolute;left:0;right:0;bottom:var(--p);border-top:3px dashed var(--marke-blau);pointer-events:none}
.baubild .linie span{position:absolute;right:8px;top:-14px;background:var(--marke-blau);color:#fff;font-size:11px;font-weight:800;padding:3px 7px;border-radius:10px;letter-spacing:.03em}
.baubalken{display:flex;align-items:center;gap:4px;margin:14px 0 4px;max-width:520px}
.baubalken .stein{flex:1;height:18px;border-radius:10px;margin-top:8px;min-width:0}
.baubalken .stein .noppen{left:4px;top:-7px;gap:3px} .baubalken .stein .noppen>span{width:9px;height:7px}
.baubalken .stein.leer{--c:var(--grau-bg);box-shadow:none}
.baubalken .stein.halb{opacity:.55}
.baubalken b{font-family:var(--titel-schrift);font-weight:400;font-size:22px;margin-left:8px;min-width:58px;text-align:right}
.bauregler{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 4px;padding:10px 12px;border-radius:var(--r-klein);background:var(--bg);border:1px dashed var(--line)}
.bauregler .lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.bauregler form{display:inline-flex;align-items:center;gap:6px;margin:0}
.bauregler .schieber{flex:1 1 200px;min-width:200px;margin-left:8px}
.bauregler input[type=range]{flex:1;min-width:100px} .bauregler output{font-weight:800;min-width:44px;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .bau-karte{grid-template-columns:minmax(0,1fr);padding:16px} .bau-karte h3{font-size:24px}
  .baubalken{gap:3px;margin-top:12px} .baubalken .stein .noppen{left:3px;gap:2px} .baubalken .stein .noppen>span{width:7px;height:6px} .baubalken b{font-size:20px;min-width:52px;margin-left:4px}
  /* Regler auf dem Handy: Beschriftung, dann vier gleich breite Knöpfe, dann Schieber mit Speichern */
  .bauregler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}
  .bauregler .lbl{grid-column:1/-1;margin:0}
  .bauregler form{display:flex;min-width:0} .bauregler form>.btn{flex:1;justify-content:center;padding-left:4px;padding-right:4px;min-height:36px}
  .bauregler .schieber{grid-column:1/-1;margin:0;min-width:0;gap:8px} .bauregler .schieber>.btn{flex:0 0 auto;padding-left:12px;padding-right:12px}
  .bauregler input[type=range]{min-width:0} .bauregler output{min-width:40px;text-align:right}
}

/* ===== Karte (Set-Raster) ===== */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px 14px;margin-bottom:40px}
.karte{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);display:flex;flex-direction:column;position:relative;min-width:0;
  transition:transform .15s,box-shadow .15s;color:var(--text);margin-top:10px}
.karte .bild{background:#fff;aspect-ratio:4/3;position:relative;border-radius:var(--r) var(--r) 0 0}
.karte .bild>span{z-index:2}
.karte .bild img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.karte .bild.foto{background:#000}
.karte .bild.foto img{inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r) var(--r) 0 0}
.leer:not(.stein){position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7A8394;font-family:var(--titel-schrift);font-size:30px}
.karte .inhalt,.nk-text{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;border-top:4px solid var(--farbe,var(--line))}
.karte .nr,.nk-text .nr{font-size:12px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.karte h3{margin:0;font-size:15px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;hyphens:manual}
.karte .thema,.nk-thema{font-size:12px;color:var(--muted);font-weight:600}
.karte .fuss{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto;padding-top:8px;font-size:13px;font-weight:700}
.karte .fuss .teile{color:var(--muted)}
.bild>.anzahl,.figur-bild>.anzahl{position:absolute;left:10px;top:10px;background:#1B1B1B;color:#fff;font-size:12px;font-weight:800;padding:3px 7px;border-radius:10px}
.mein-foto{position:absolute;left:10px;bottom:10px;background:rgba(23,23,150,.92);color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:10px;letter-spacing:.03em;z-index:1}
.neu-schild{position:absolute;right:-6px;top:12px;background:var(--marke-rot);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px 5px;transform:rotate(6deg);box-shadow:0 3px 8px rgba(0,0,0,.25);border-radius:3px}
.neu-schild.statisch{position:static;transform:none;display:inline-block;margin-left:8px;vertical-align:middle}
.neu-schild.erschienen{background:var(--stein-lila)}
.leerhinweis{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.status{display:inline-block;padding:4px 8px 5px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;box-shadow:none}
.status.im_bau{background:var(--marke-rot);color:#fff} .status.gebaut{background:var(--blau-flaeche);color:#fff}
.status.ungebaut{background:#fff;color:var(--marke-blau);box-shadow:inset 0 0 0 2px var(--marke-blau)}
.status.wunsch{background:var(--marke-hellblau);color:#fff} .status.zerlegt{background:#6B6F78;color:#fff}
/* Wunschliste: Karte + Abstimmung + Amazon */
.wunsch-karte{display:flex;flex-direction:column;gap:8px;min-width:0} .wunsch-karte .karte{flex:1}
.wunsch-karte>.btn.amazon{width:100%}
.meine-stimme{border-radius:var(--r);box-shadow:0 0 0 3px var(--stein-rot),var(--schatten)}
.stimme{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:var(--card);border-radius:var(--r-klein);padding:8px 10px;box-shadow:var(--schatten)}
.stimme .stimmen{font-size:13px;color:var(--muted)} .stimme .stimmen b{font-family:var(--titel-schrift);font-weight:400;font-size:20px;color:var(--text);margin-right:2px}
.wunsch-mehr{text-align:center;margin:16px 0 4px}
.amazon-hinweis{font-size:12px;margin-top:10px}
@media (hover:hover){ .karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)} }
@media (max-width:640px){
  .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .karte .inhalt{padding:10px 11px 12px} .karte h3{font-size:14px} .karte .fuss{font-size:12px}
  .noppen{left:10px}
}

/* ===== Cockpit „Was fehlt noch?“ ===== */
.hp-cockpit{background:var(--card);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:22px 22px 26px;margin:6px 0 18px}
.hp-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:26px}
.hp-kopf h2{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:30px;line-height:1}
.hp-kopf span{font-weight:600;color:var(--muted)} .hp-kopf span b{color:var(--text);font-family:var(--titel-schrift);font-weight:400;font-size:22px}
.hp-kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 12px;margin-bottom:26px}
.hp-kachel{--c:var(--stein-grau);position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px 18px;border-radius:10px;background:var(--c);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px rgba(0,0,0,.18);transition:transform .15s ease}
.hp-kachel b{font-family:var(--titel-schrift);font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hp-kachel span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;overflow-wrap:anywhere}
.hp-kachel.gruen{--c:var(--stein-gruen)} .hp-kachel.rot{--c:var(--stein-rot)} .hp-kachel.blau{--c:var(--stein-blau)} .hp-kachel.orange{--c:var(--stein-orange)} .hp-kachel.lila{--c:var(--stein-lila)} .hp-kachel.gelb{--c:var(--stein-gelb);color:#1B1B1B} .hp-kachel.gelb b{text-shadow:0 2px 0 rgba(255,255,255,.3)}
.hp-noppen{position:absolute;top:-9px;left:12px;display:flex;gap:9px;font-style:normal}
.hp-noppen i{display:block;width:26px;height:10px;border-radius:9px 9px 2px 2px;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.hp-platte-zeile+.hp-platte-zeile{margin-top:22px}
.hp-platte-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hp-platte-kopf b{font-family:var(--titel-schrift);font-weight:400;font-size:18px;letter-spacing:0;text-transform:none;color:var(--text)}
.hp-platte{position:relative;height:30px;border-radius:10px;background:var(--platte-leer);box-shadow:none}
.hp-fuell{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:10px;transform-origin:left center;background:linear-gradient(180deg,#12A845,var(--stein-gruen));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);animation:hp-wachsen 1.1s cubic-bezier(.2,.8,.2,1) both}
.hp-platte em{position:absolute;right:8px;top:50%;transform:translateY(-58%);font-style:normal;font-family:var(--titel-schrift);font-size:15px;line-height:1;color:var(--text);background:var(--card);padding:3px 6px 4px;border-radius:10px}
.hp-noppen-reihe{position:absolute;left:6px;right:6px;top:-8px;display:flex;justify-content:space-between}
.hp-noppen-reihe i{width:calc(100% / 24 - 6px);max-width:24px;height:9px;border-radius:8px 8px 2px 2px;background:var(--platte-leer);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.hp-noppen-reihe i.an{background:#12A845;animation:hp-noppe .5s ease both}
@keyframes hp-wachsen{from{transform:scaleX(0)}}
@keyframes hp-noppe{from{transform:translateY(4px);opacity:0}}
@media (hover:hover){ a.hp-kachel:hover{transform:translateY(-3px)} }
@media (max-width:860px){ .hp-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .hp-cockpit{padding:18px 14px 20px} .hp-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px} .hp-kachel.lila:last-child{grid-column:1/-1} .hp-kopf h2{font-size:24px} .hp-noppen-reihe i:nth-child(even){display:none} }
/* Liste je Jahr: vorhanden / fehlt */
.ueb-jahr{font-family:var(--titel-schrift);font-weight:400;font-size:24px;margin:26px 0 10px}
.ueb-jahr small{font:700 13px Inter,sans-serif;color:var(--muted);margin-left:6px}
.ueb-t-da{color:var(--gruen-text)}
.ueb-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ueb-set{position:relative;display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:8px 10px 8px 8px;min-width:0;border-left:var(--akzent-rand) solid var(--stein-gruen)}
.ueb-set.fehlt{border-left-color:var(--muted)}
.ueb-set.fehlt .ueb-bild img{filter:grayscale(1);opacity:.55}
.ueb-bild{position:relative;z-index:1;flex:0 0 72px;height:56px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ueb-bild img{max-width:64px;max-height:50px;object-fit:contain}
.ueb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ueb-text .nr{font-size:12px;color:var(--muted);font-weight:700}
.ueb-name{font-weight:800;font-size:14px;line-height:1.25;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ueb-name[href]::after,.nk-name[href]::after{content:"";position:absolute;inset:0}
.ueb-marken{display:flex;flex-wrap:wrap;gap:4px}
.ueb-marke{align-self:flex-start;font-size:11px;font-weight:800;padding:2px 7px;border-radius:10px;margin-top:2px}
.ueb-marke.da{background:var(--stein-gruen);color:#fff} .ueb-marke.fehlt{background:var(--grau-bg);color:var(--muted-stark)} .ueb-marke.doppelt{background:var(--stein-lila);color:#fff}
.btn.amazon.ueb-kauf{position:relative;z-index:1;flex:0 0 auto;padding:8px 10px}
.ueb-kauf span{font-size:11px}
@media (max-width:520px){ .ueb-liste{grid-template-columns:minmax(0,1fr)} .ueb-marke{font-size:12px} }

/* ===== Podest und Abstimmung ===== */
.ab-imbau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:10px 16px 10px 10px;margin:0 0 30px;color:var(--text);text-decoration:none;border-left:var(--akzent-rand) solid var(--marke-rot)}
.ab-imbau-bild{width:70px;height:54px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ab-imbau-bild img{max-width:62px;max-height:48px;object-fit:contain}
.ab-imbau small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--rot-text)}
.ab-imbau b{font-size:16px}
.ab-imbau .baubalken{margin-left:auto;flex:0 0 auto;width:min(340px,100%)}

.ab-podest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);align-items:end;gap:14px;margin:10px 0 40px}
.ab-platz{display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-bild{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--r);aspect-ratio:4/3;padding:12px;box-shadow:var(--schatten);position:relative}
.ab-bild img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.ab-platz.p1 .ab-bild{box-shadow:0 0 0 4px #E3A400,var(--schatten)}
.ab-name{display:flex;flex-direction:column;gap:2px;text-align:center;min-height:58px}
.ab-name a{font-weight:800;font-size:15px;line-height:1.25;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;hyphens:manual}
.ab-name .nr{font-size:12px;color:var(--muted);font-weight:700}
.ab-sockel{--c:#6B7385;--t:#fff;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 10px 18px;border-radius:var(--r-klein);background:var(--c);color:var(--t);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px rgba(0,0,0,.2)}
.ab-sockel .hp-noppen{left:50%;transform:translateX(-50%)}
.ab-sockel .btn{white-space:nowrap}
.ab-platz.p1 .ab-sockel{--c:#E3A400;--t:#1B1B1B;padding-top:34px;padding-bottom:34px}
.ab-platz.p2 .ab-sockel{--c:#6B7385;padding-top:24px;padding-bottom:22px}
.ab-platz.p3 .ab-sockel{--c:#9A5424}
.ab-rang{font-family:var(--titel-schrift);font-size:44px;line-height:.9;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.ab-platz.p1 .ab-rang{font-size:60px;text-shadow:0 3px 0 rgba(255,255,255,.35)}
.ab-stimmen{font-weight:700;font-size:13px} .ab-stimmen b{font-family:var(--titel-schrift);font-weight:400;font-size:20px}
.ab-liste{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.ab-zeile{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:10px 14px 10px 10px}
.ab-nr{font-family:var(--titel-schrift);font-size:22px;color:var(--muted);width:30px;text-align:center;flex:0 0 30px}
.ab-mini{flex:0 0 76px;height:58px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ab-mini img{max-width:68px;max-height:52px;object-fit:contain}
.ab-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ab-info>a{font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-info .nr{font-size:12px;color:var(--muted);font-weight:700} .ab-info .nr b{color:var(--text)}
.ab-balken{height:10px;border-radius:3px;background:var(--grau-bg);overflow:hidden}
.ab-balken i{display:block;height:100%;min-width:4px;background:linear-gradient(90deg,var(--marke-rot),#FF5C5C);border-radius:3px;box-shadow:none}
@media (max-width:640px){
  .ab-podest{gap:8px} .ab-name{min-height:52px} .ab-name a{font-size:13px} .ab-rang{font-size:34px} .ab-platz.p1 .ab-rang{font-size:44px}
  .ab-sockel{padding-left:6px;padding-right:6px} .ab-stimmen{font-size:12px}
  .ab-sockel .btn{font-size:12px;padding:6px 8px 8px;gap:4px}
  .ab-zeile{flex-wrap:wrap} .ab-zeile form{width:100%} .ab-zeile form .btn{width:100%;justify-content:center}
  .ab-info>a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  .ab-imbau .baubalken{margin-left:0;width:100%}
}

/* ===== Twitch-Bühne: immer dunkel wie Twitch – Kopfzeile, Player, Chat ===== */
.twitch-buehne{margin:8px 0 34px;background:#0E0E10;border-radius:var(--r-gross);overflow:hidden;box-shadow:0 0 0 1px rgba(145,70,255,.35),0 18px 40px rgba(0,0,0,.35);color:#EFEFF1}
.twitch-buehne.ist-live{box-shadow:0 0 0 2px #9146FF,0 0 40px rgba(145,70,255,.35),0 18px 40px rgba(0,0,0,.35)}
.tb-kopf{display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(90deg,rgba(145,70,255,.22),rgba(145,70,255,0) 70%)}
.tb-profil{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #9146FF;display:block}
.twitch-buehne.ist-live .tb-profil{box-shadow:0 0 0 3px #EB0400}
.tb-profil img{width:100%;height:100%;object-fit:cover}
.tb-profil .logo{width:52px;height:52px}
.tb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tb-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-zeile b{font-family:var(--titel-schrift);font-weight:400;font-size:20px;line-height:1}
.tb-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px 4px;border-radius:10px;background:#3A3A3D;color:#D3D3DA}
.tb-status.an{background:#EB0400;color:#fff}
.tb-dauer{font-size:13px;color:#ADADB8;font-weight:600}
.tb-titel{font-size:14px;color:#DEDEE3;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-knopf{flex-shrink:0;margin:0}
.tb-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.tb-player{position:relative;aspect-ratio:16/9;width:100%;max-height:calc(100svh - 140px);max-width:calc((100svh - 140px) * 16 / 9);margin:0 auto;background:#000}
.tb-player iframe,.tb-chat iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tb-chat{position:relative;border-left:1px solid #26262C;background:#18181B}
/* Fassade statt iframes, bis jemand klickt */
.tb-fassade{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;color:#EFEFF1;
  background:radial-gradient(ellipse at 50% 38%,rgba(145,70,255,.28),rgba(145,70,255,0) 62%),#0E0E10}
.tb-fassade-bild,.tb-fassade>.logo{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #9146FF,0 10px 30px rgba(0,0,0,.5)}
.twitch-buehne.ist-live .tb-fassade-bild{box-shadow:0 0 0 4px #EB0400,0 10px 30px rgba(0,0,0,.5)}
.tb-fassade-kanal{font-family:var(--titel-schrift);font-weight:400;font-size:24px;line-height:1;margin-top:4px}
.tb-fassade-status{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ADADB8}
.btn.tb-start{margin-top:6px;padding:14px 24px 17px;font-size:16px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px rgba(145,70,255,.35)}
.btn.tb-start::before{content:"";width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tb-fassade-chat{background:#18181B}
.btn.tb-chat-start{background:#2F2F35;color:#EFEFF1;margin-top:6px}
.tb-chat-symbol{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(145,70,255,.16);color:#BF94FF;box-shadow:0 0 0 2px rgba(145,70,255,.45)}
.tb-fassade-chat .tb-fassade-kanal{font-size:21px}
.tb-fassade-chat .tb-fassade-hinweis{max-width:26ch}
.tb-fassade-hinweis{max-width:44ch;font-size:12px;line-height:1.4;color:#ADADB8}
.tb-fassade-hinweis a{color:#EFEFF1;text-decoration:underline;text-underline-offset:2px}
/* Offline: nur die schlanke Leiste (eine Zeile, ~80 px), ruhiger Rahmen statt Leuchten */
.twitch-buehne.tb-leiste{margin:6px 0 30px;box-shadow:0 0 0 1px rgba(145,70,255,.28),0 8px 22px rgba(0,0,0,.18)}
.tb-leiste .tb-kopf{padding:14px 18px;background:linear-gradient(90deg,rgba(145,70,255,.18),rgba(145,70,255,0) 55%)}
.tb-leiste .tb-titel{white-space:normal;color:#ADADB8}
.tb-leiste .tb-knopf svg{flex-shrink:0}
/* Live: volle Bühne steht oben direkt unter dem Startbereich */
.twitch-buehne.ist-live{margin:4px 0 34px}
@media (max-width:900px){ .tb-inhalt{grid-template-columns:minmax(0,1fr)} .tb-chat{display:none} }
@media (max-width:560px){
  .tb-kopf{flex-wrap:wrap;gap:10px 12px;padding:12px} .tb-knopf{width:100%;justify-content:center} .tb-leiste .tb-kopf{padding:12px 14px 14px} .tb-leiste .tb-titel{font-size:13px} .tb-profil{flex-basis:44px;width:44px;height:44px} .tb-zeile b{font-size:18px}
  .tb-fassade{gap:6px} .tb-fassade-bild,.tb-fassade>.logo{width:60px;height:60px} .tb-fassade-kanal{font-size:19px} .btn.tb-start{padding:11px 18px 14px;font-size:15px}
  .tb-fassade-status{display:none} .tb-fassade-hinweis{font-size:11px;max-width:34ch}
}

/* ===== Live-Banner (schlank) ===== */
.live-banner{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:12px;min-height:40px;padding:8px 16px;background:var(--card);color:var(--text);font-weight:500;font-size:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.12)}
.live-banner:hover .live-cta{text-decoration:underline}
.live-marke{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:var(--marke-rot);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px 4px;border-radius:10px}
.live-punkt{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:#fff}
.live-banner b{font-weight:700;flex-shrink:0}
.live-titel{font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.live-cta{color:var(--rot-text);margin-left:4px;font-weight:700;flex-shrink:0;white-space:nowrap}
@media (max-width:520px){ .live-banner{justify-content:flex-start;font-size:13px;gap:9px} .live-cta{margin-left:auto} }

/* ===== News ===== */
.neuheiten-banner{display:flex;align-items:center;gap:14px;margin:0 0 22px;border-radius:var(--r);padding:14px 18px 16px;color:#fff;background:linear-gradient(100deg,var(--stein-lila),var(--stein-blau));box-shadow:0 8px 20px rgba(0,0,0,.18)}
.nb-stern{font-size:28px;line-height:1}
.nb-text,.ns-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nb-text b{font-family:var(--titel-schrift);font-weight:400;font-size:20px;letter-spacing:.01em}
.nb-text small{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-pfeil{display:inline-flex;align-items:center;flex:none;padding:9px 14px 11px;border-radius:10px;font-weight:700;font-size:14px;line-height:1.1;white-space:nowrap;background:#fff;color:var(--stein-blau);box-shadow:0 2px 4px rgba(0,0,0,.08)}
.news-streifen{display:flex;align-items:center;gap:14px;margin:0 0 26px;border-radius:var(--r);padding:12px 16px 14px 12px;background:var(--card);box-shadow:var(--schatten);color:var(--text);border-left:var(--akzent-rand) solid var(--stein-lila)}
.news-streifen .nb-pfeil{background:var(--stein-lila);color:#fff}
.ns-bilder{display:flex;flex-shrink:0}
.ns-bilder img{width:58px;height:46px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ns-bilder img+img{margin-left:-14px}
.ns-text small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--lila-text)}
.ns-text b{font-family:var(--titel-schrift);font-weight:400;font-size:19px;line-height:1.1}
.ns-text>span{font-size:13px;color:var(--muted);font-weight:600}
.news-leer{background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:var(--schatten);margin-bottom:30px}
.news-zeitleiste{display:flex;flex-direction:column;gap:22px;margin-bottom:36px}
.nz-eintrag{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px}
.nz-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start;background:var(--stein-lila);color:#fff;border-radius:var(--r-klein);padding:10px 4px 12px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.nz-datum b{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1} .nz-datum span{font-size:12px;font-weight:700}
.nz-inhalt h3{margin:4px 0 12px;font-size:17px}
.news-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px 14px;margin-bottom:34px}
.news-karte{--farbe:var(--stein-lila);position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);min-width:0;margin-top:10px}
.news-karte .noppen{top:-9px}
.nk-bild{position:relative;display:block;aspect-ratio:4/3;background:#fff;border-radius:var(--r) var(--r) 0 0}
.nk-bild img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.nk-name{font-weight:800;font-size:15px;line-height:1.25;color:var(--text);overflow-wrap:anywhere;hyphens:manual}
.nk-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.nk-fuss .btn.amazon{position:relative;z-index:1;width:100%;padding:7px 10px 9px}
@media (max-width:640px){ .news-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px} .nk-text{padding:10px 11px 12px} .nk-name{font-size:14px} .news-streifen .nb-pfeil{display:none} .ns-bilder img:nth-child(n+3){display:none} }
@media (max-width:520px){ .neuheiten-banner .nb-pfeil{display:none} .nz-eintrag{grid-template-columns:minmax(0,1fr)} .nz-datum{flex-direction:row;gap:6px;justify-self:start;padding:6px 12px 9px} .nz-datum b{font-size:18px} }

/* ===== Detail / Set-Seite ===== */
.detail{display:grid;grid-template-columns:minmax(240px,460px) minmax(0,1fr);gap:28px;background:var(--card);border-radius:var(--r-gross);padding:22px;box-shadow:var(--schatten);margin:12px 0 30px;position:relative}
.detail>*{min-width:0}
.detail .noppen{top:-9px}
.detail .bild{background:#fff;border-radius:var(--r);padding:12px;display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative}
.detail .bild>img{max-height:100%;object-fit:contain}
.detail .bild.foto{padding:0;background:#000;overflow:hidden;display:block;aspect-ratio:auto}
.detail .bild.foto img{width:100%;height:auto;max-height:70dvh;object-fit:contain}
.detail h1{margin:4px 0 6px;font-family:var(--titel-schrift);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.1;overflow-wrap:anywhere;hyphens:manual}
.detail .nr{color:var(--muted);font-weight:700}
.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;margin:22px 0 16px}
.fakt{padding:14px 12px 12px;min-width:0}
.fakt b{display:block;font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1;overflow-wrap:anywhere}
.fakt>span:not(.noppen){font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.beschreibung{margin:18px 0 6px;padding:2px 0 2px 16px;border-left:var(--akzent-rand) solid var(--marke-rot)}
.beschreibung>p:first-child{margin:0;font-size:15px;line-height:1.6}
.beschreibung details{margin-top:12px}
.beschreibung summary{font-weight:800;font-size:14px;color:var(--text);list-style:none;display:inline-flex;align-items:center;gap:6px}
.beschreibung summary::-webkit-details-marker{display:none}
.beschreibung summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:10px;background:var(--marke-rot);color:#fff;font-weight:800;font-size:14px;line-height:1}
.beschreibung details[open] summary::before{content:"–"}
.beschreibung ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55}
.beschreibung ul b{font-weight:800}
.beschreibung .quelle{margin:12px 0 0;font-size:12px;color:var(--muted);font-weight:600}
.beschreibung .quelle a{color:inherit;text-decoration:underline}
.galerie-titel{margin:14px 0 8px;font-family:var(--titel-schrift);font-weight:400;font-size:18px}
.katalog{margin-top:12px} .katalog .bild{margin-top:8px;aspect-ratio:auto;padding:8px}
@media (min-width:701px){ .detail>.beschreibung,.detail>.setinfo{grid-column:1/-1;margin-top:0} }
@media (max-width:700px){ .detail{grid-template-columns:minmax(0,1fr);gap:18px;padding:14px} .detail .bild{padding:8px} .fakten{gap:14px 8px} }
@media (max-width:359px){ .fakt>span:not(.noppen){font-size:10px;letter-spacing:.02em} .fakt b{font-size:22px} }

/* ===== Galerie, Figuren, Lightbox ===== */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.galerie.gross{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:30px}
.galerie-bild{display:block;aspect-ratio:1;border-radius:var(--r-klein);overflow:hidden;background:#000;box-shadow:var(--schatten)}
.galerie-bild img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.galerie-karte{margin:0;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
.galerie-karte .galerie-bild{border-radius:0;aspect-ratio:4/3;box-shadow:none}
.galerie-karte figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px} .galerie-karte figcaption a{font-weight:700;color:var(--text)}
.regal{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);margin:0 0 22px;max-width:960px} .regal img{width:100%}
.figuren{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.figur{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column;transition:transform .15s}
.figur-bild{position:relative;aspect-ratio:3/4;background:#fff;overflow:hidden} .figur-bild img{width:100%;height:100%;object-fit:cover}
.figur-leer{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.07) 0 5px,transparent 6px) 0 0/22px 22px,linear-gradient(180deg,#F4F5F8,#E3E6EE)}
.figur-leer::before{content:"";width:58%;height:78%;background:#A9B0BF;-webkit-mask:var(--figur-maske) center bottom/contain no-repeat;mask:var(--figur-maske) center bottom/contain no-repeat}
.figur-leer{--figur-maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Crect x='24' y='0' width='12' height='4' rx='1'/%3E%3Crect x='18' y='3' width='24' height='19' rx='6'/%3E%3Crect x='25' y='22' width='10' height='3'/%3E%3Cpath d='M16 25h28l5 26H11z'/%3E%3Cpath d='M11 27l-6 18 5 3 7-15z'/%3E%3Cpath d='M49 27l6 18-5 3-7-15z'/%3E%3Crect x='13' y='51' width='34' height='6' rx='1'/%3E%3Cpath d='M13 57h16v23H13zM31 57h16v23H31z'/%3E%3C/svg%3E")}
.figur-nr{position:absolute;right:8px;top:8px;background:var(--marke-rot);color:#fff;font-family:var(--titel-schrift);font-size:15px;padding:3px 8px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.figur-text{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px} .figur-text b{font-size:14px;line-height:1.25} .figur-text small{color:var(--muted);font-size:11px;font-weight:600} .figur-text p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000;display:flex;align-items:center;justify-content:center;cursor:zoom-out;touch-action:none;overscroll-behavior:contain}
.lightbox img{max-width:96vw;max-height:94dvh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-zu{position:absolute;right:16px;top:12px;background:#fff;color:#1B1B1B;border:0;border-radius:10px;font-size:22px;width:44px;height:44px;cursor:pointer}
@media (hover:hover){ .galerie-bild:hover img{transform:scale(1.06)} .figur:hover{transform:translateY(-3px)} }
@media (max-width:640px){ .figuren{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .galerie.gross{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} }

/* ===== Über mich ===== */
.ueber{position:relative;background:var(--card);border-radius:var(--r);padding:28px 32px;box-shadow:var(--schatten);margin:12px 0 10px;max-width:820px;border-left:var(--akzent-rand) solid var(--marke-rot)}
.ueber .noppen{left:26px}
.ueber p{font-size:17px;line-height:1.6;margin:0 0 16px} .ueber p:last-child{margin-bottom:0}
.ueber p a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.ueber b{color:var(--rot-text)}
/* Impressum und Datenschutz: ruhige Textkarte im Stil von „Über mich“ */
.rechtstext{border-left-color:var(--blau-flaeche)}
.rechtstext h2{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1.15;margin:28px 0 8px;color:var(--text)}
.rechtstext h2:first-of-type{margin-top:4px}
.rechtstext p,.rechtstext li{font-size:16px;line-height:1.6}
.rechtstext p{margin:0 0 12px}
.rechtstext ul{margin:0 0 14px;padding-left:20px} .rechtstext li{margin:0 0 4px}
.rechtstext a{color:var(--link);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.rechtstext b{color:var(--text);font-weight:700}
.rechtstext .stand{margin-top:22px;color:var(--muted);font-size:14px}
.rechts-sprache{max-width:820px;margin:0 0 12px}
/* Wunschliste: Hinweis „aktuelle Sets“ mit Knopf für ältere */
.wunsch-auswahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 18px;padding:12px 16px;background:var(--card);border-radius:var(--r-klein);box-shadow:var(--schatten)}
.wunsch-auswahl p{margin:0;flex:1 1 320px;font-size:14px;color:var(--muted-stark)}
@media (max-width:640px){ .ueber{padding:20px 18px} }

/* ===== Radio (Balkanbeatz) ===== */
.radio-karte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--card);border-radius:var(--r);padding:16px 20px;box-shadow:var(--schatten);margin:10px 0 0;border-left:var(--akzent-rand) solid var(--marke-rot)}
.radio-logo img{height:56px;width:auto;max-width:220px}
.radio-logo .hell{display:var(--nur-hell)} .radio-logo .dunkel{display:var(--nur-dunkel)}
.radio-text b{display:block;font-family:var(--titel-schrift);font-weight:400;font-size:20px;margin-bottom:2px}
.radio-text p{margin:0;color:var(--muted);font-size:14px}
.radio-aktionen{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:700px){ .radio-karte{grid-template-columns:minmax(0,1fr);text-align:center} .radio-logo img{margin:0 auto} .radio-aktionen{justify-content:center} }

/* ===== Kästen, Formulare, Meldungen (Galerie-Upload, Anmeldung; Verwaltung ergänzt admin.css) ===== */
.box{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:20px;margin-bottom:20px}
.box h2{margin:0 0 12px;font-family:var(--titel-schrift);font-weight:400;font-size:22px}
label{display:block;font-size:14px;font-weight:700;color:var(--text);margin:10px 0 4px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=email],input[type=url],.admin input[type=search]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
textarea{width:100%;min-height:90px;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
input[type=range]{accent-color:var(--marke-rot)}
input[type=file]{display:block;width:100%;max-width:100%;padding:10px 12px;border:2px dashed var(--line);border-radius:var(--r-klein);background:var(--bg);margin:4px 0 10px;color:var(--text)}
input[type=file]::file-selector-button{font:inherit;font-weight:700;padding:8px 12px;border:0;border-radius:10px;background:var(--blau-flaeche);color:#fff;margin-right:10px;cursor:pointer}
.meldung{padding:12px 14px;border-radius:var(--r-klein);margin-bottom:16px;font-weight:700}
.meldung.ok{background:var(--ok-bg);color:var(--ok)} .meldung.fehler{background:var(--fehler-bg);color:var(--fehler)}

.login{max-width:380px;margin:60px auto}
.login .box{text-align:center}
.login .logo{margin:0 auto 10px;width:64px;height:64px;font-size:24px}

/* ===== Fehlerseite und Leerzustände (Stein in CSS) ===== */
.fehlerseite{max-width:600px;margin:30px auto 50px;text-align:center}
.fehlerseite h1{font-size:clamp(30px,4vw,42px);line-height:1.05;margin:0 0 10px}
.fehlerseite p{color:var(--muted);font-size:16px;margin:0 0 18px}
.fehlerseite .fs-knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;color:inherit}
.leerzustand{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);text-align:center;padding:34px 20px 30px;margin-bottom:24px;font-weight:600}
.leerzustand p{margin:0}
.fehlerseite::before{content:"";display:block;width:112px;height:62px;margin:10px auto 22px;transform:rotate(-4deg);border-radius:10px;
  background:radial-gradient(circle at 50% 100%,var(--stein-rot) 12px,transparent 12.5px) 18px 0/26px 13px no-repeat,radial-gradient(circle at 50% 100%,var(--stein-rot) 12px,transparent 12.5px) 68px 0/26px 13px no-repeat,
    linear-gradient(to bottom,transparent 12px,var(--stein-rot) 12px,var(--stein-rot) 54px,#9E0B0D 54px) 0 0/100% 100% no-repeat;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.leerzustand::before{content:"";display:block;margin:6px auto 18px;transform:rotate(-4deg);border-radius:10px;background-repeat:no-repeat;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));width:84px;height:48px;background-size:20px 10px,20px 10px,100% 100%;background-position:13px 0,51px 0,0 0;
  background-image:radial-gradient(circle at 50% 100%,var(--stein-blau) 9px,transparent 9.5px),radial-gradient(circle at 50% 100%,var(--stein-blau) 9px,transparent 9.5px),linear-gradient(to bottom,transparent 9px,var(--stein-blau) 9px,var(--stein-blau) 42px,#003F7A 42px)}

/* ===== Fuß: Steinmauer und Fußzeile ===== */
.mauer{display:flex;gap:4px;flex-wrap:nowrap;margin:10px 0 0}
.mauer .stein{height:26px;flex:1 1 0;min-width:0;border-radius:10px;margin-top:10px}
.mauer .stein .noppen{left:8px;top:-8px;gap:5px} .mauer .stein .noppen>span{width:12px;height:9px}
.fuss-zeile{color:var(--muted);font-size:13px;padding:16px 0 40px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px 24px}
.fuss-zeile>span:first-child{flex:1 1 420px;max-width:80ch}
.fuss-zeile>span+span{display:flex;flex-wrap:wrap;gap:0 16px}
.fuss-zeile a{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
@media (max-width:640px){ .mauer{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))} .fuss-zeile{font-size:12px} .fuss-zeile>span:first-child{flex-basis:100%} }

/* ===== Konfetti ===== */
#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:999}
.konfetti-text{position:fixed;left:50%;top:18%;transform:translateX(-50%) rotate(-3deg);z-index:1000;background:var(--marke-rot);color:#fff;font-family:var(--titel-schrift);font-size:clamp(24px,5vw,48px);padding:12px 28px;border-radius:var(--r-klein);box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;animation:konf 4.5s forwards}
@keyframes konf{0%{opacity:0;transform:translateX(-50%) scale(.6) rotate(-3deg)}10%{opacity:1;transform:translateX(-50%) scale(1.05) rotate(-3deg)}85%{opacity:1}100%{opacity:0}}

/* ===== Hilfsklassen ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:10px;z-index:60;transform:translateY(-200%);padding:10px 16px 12px;border-radius:10px;background:#fff;color:#1B1B1B;font-weight:800;font-size:14px;
  box-shadow:inset 0 0 0 1px #DCE0EA,0 6px 16px rgba(0,0,0,.25)}
.skip:focus{transform:none;outline:3px solid var(--fokus);outline-offset:3px}
.skip::before{content:"";position:absolute;top:-5px;left:10px;width:12px;height:5px;border-radius:4px 4px 1px 1px;background:#fff;box-shadow:17px 0 0 #fff}
/* ===== Ergänzungen der Vorlagen: Noppen-Schriftzug, Symbole, Abstimmung, Rücklink, Fuß ===== */
/* „oha“ auf den großen Noppen (Karten, Set-Seite, Über mich) nur per CSS – im DOM stehen leere Spans, Überschriften bleiben sauber */
.noppen>span::after{content:"oha";display:block;font:800 6px/11px Inter,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-align:center;color:rgba(23,23,150,.32)}
.stein>.noppen>span::after,.mauer .noppen>span::after,.baubalken .noppen>span::after{content:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .noppen>span::after{color:rgba(255,255,255,.28)} }
:root[data-theme="dark"] .noppen>span::after{color:rgba(255,255,255,.28)}
.sym{flex:none}
.suche>.sym{color:var(--muted)}
.theme-schalter .sym{width:16px;height:16px}
.nb-stern .sym{width:26px;height:26px;fill:#FFD814;stroke:#FFD814}
.btn.amazon .sym{width:15px;height:15px}
.seitenkopf h1{overflow-wrap:anywhere;hyphens:manual}
.seitenkopf .set-thema{margin:0;font-size:15px;font-weight:600}
.set-thema a{color:var(--muted-stark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ruecklink{margin:-14px 0 12px;font-size:14px;font-weight:700}
.ruecklink a{display:inline-flex;align-items:center;min-height:32px;color:var(--link)}
.set-abstimmen{margin:12px 0 0}
.meldung.info{background:var(--blau-bg);color:var(--text)}
.stimme-marke{display:inline-block;align-self:flex-start;background:var(--stein-rot);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px 4px;border-radius:10px}
.ab-zeile.meine-stimme,.ab-platz.meine-stimme{border-radius:var(--r)}
.ueb-jahr-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:26px 0 10px}
.ueb-jahr-kopf .ueb-jahr{margin:0}
.ueb-jahr-info{margin:0;font-weight:700;font-size:13px;color:var(--muted)}
.ueb-kauf .sym{width:14px;height:14px}

.galerie-verwalten{margin:0 0 16px}

.leerzustand p+p{margin-top:10px}
.fuss-zeile a.fuss-klein{font-weight:500;font-size:12px;color:var(--muted)}
#bb-play .sym-pause,#bb-play.spielt .sym-play{display:none} #bb-play.spielt .sym-pause{display:inline}
.btn .sym-extern{width:13px;height:13px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== Nachträge Prüfrunde ===== */
/* Amazon-Knopf: Symbol und Text als eine zentrierte Gruppe; in schmalen Karten (Handy) die kurze Fassung „Amazon*“ */
.btn.amazon .az-text{display:inline}
.btn.amazon .az-kurz{display:none}
@media (max-width:640px){
  .wunsch-karte .btn.amazon .az-lang,.nk-fuss .btn.amazon .az-lang{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wunsch-karte .btn.amazon .az-kurz,.nk-fuss .btn.amazon .az-kurz{display:inline}
  .wunsch-karte .btn.amazon,.nk-fuss .btn.amazon{white-space:nowrap}
}
/* Abstimmung ohne Stimmen: leeres Podest als Platzhalter */

/* ===== Abstimmung: Stand-Steine im Kopf, Stimmenanteil am Sockel ===== */
.ab-stats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.ab-stats .stein{display:inline-flex;align-items:baseline;gap:7px;padding:11px 14px 9px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.12)}
.ab-stats .stein .noppen{left:10px;gap:4px} .ab-stats .stein .noppen>span{width:14px;height:8px}
.ab-stats b{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1}
.ab-stats small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ab-anteil{font-size:12px;font-weight:800;opacity:.85;margin-top:-4px}

/* ===== Abstimmung auf dem Handy: Platz 1 als große Karte, 2 und 3 daneben, Liste als Karten-Raster ===== */
@media (max-width:640px){
  .ab-stats{gap:8px;margin-top:16px} .ab-stats .stein{flex:1 1 auto;justify-content:center;padding:11px 10px 9px} .ab-stats b{font-size:20px} .ab-stats small{font-size:10px}
  .ab-podest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px 10px;margin:6px 0 30px}
  .ab-podest .ab-platz{display:flex;flex-direction:column;gap:8px;background:var(--card);border-radius:var(--r);padding:0 0 10px;box-shadow:var(--schatten);overflow:hidden}
  .ab-podest .ab-platz.p1{grid-column:1/-1;order:-1} .ab-podest .ab-platz.p3{order:1}
  .ab-podest .ab-platz .ab-bild{border-radius:0;box-shadow:none;padding:10px}
  .ab-podest .ab-platz.p1 .ab-bild{box-shadow:inset 0 0 0 5px #E3A400;aspect-ratio:16/10}
  .ab-podest .ab-platz .ab-name{text-align:left;min-height:0;gap:3px;padding:0 12px}
  .ab-podest .ab-platz .ab-name a{font-size:14px;-webkit-line-clamp:3}
  .ab-podest .ab-platz.p1 .ab-name a{font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1.08;-webkit-line-clamp:3}
  .ab-podest .ab-platz .ab-sockel{margin:6px 10px 0;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 10px;padding:14px 12px 12px}
  .ab-podest .ab-platz.p1 .ab-sockel{padding:16px 14px 14px;gap:6px 12px}
  .ab-podest .ab-platz .ab-sockel .hp-noppen{left:12px;transform:none}
  .ab-podest .ab-platz .ab-rang{font-size:34px;line-height:1} .ab-podest .ab-platz.p1 .ab-rang{font-size:46px}
  .ab-podest .ab-platz .ab-stimmen{font-size:12px} .ab-podest .ab-platz.p1 .ab-stimmen{font-size:14px}
  .ab-podest .ab-platz .ab-anteil{flex:0 0 100%;margin:-4px 0 0;font-size:12px;text-align:right} .ab-podest .ab-platz.p1 .ab-anteil{flex:0 0 auto;margin:0 0 0 auto;font-size:15px;text-align:left}
  .ab-podest .ab-platz .stimme-marke{flex:0 0 100%;align-self:auto;width:max-content}
  .ab-podest .ab-platz .ab-sockel form{flex:1 1 100%;margin-top:2px} .ab-podest .ab-platz .ab-sockel .btn{width:100%;justify-content:center;min-height:38px;font-size:13px;padding:8px 10px 10px}
  .ab-podest .ab-platz.p1 .ab-sockel .btn{min-height:44px;font-size:15px}
  .ab-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .ab-zeile{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
  .ab-zeile .ab-nr{position:absolute;z-index:2;left:8px;top:8px;width:30px;height:30px;line-height:30px;border-radius:10px;background:var(--marke-blau);color:#fff;font-size:17px;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .ab-zeile .ab-mini{flex:none;width:100%;height:auto;aspect-ratio:4/3;border-radius:0;padding:10px;box-sizing:border-box}
  .ab-zeile .ab-mini img{max-width:100%;max-height:100%}
  .ab-zeile .ab-info{padding:10px 12px 8px;gap:6px;border-top:4px solid var(--marke-blau)}
  .ab-zeile .ab-info>a{font-size:14px;line-height:1.3;min-height:2.6em}
  .ab-zeile form{width:auto;padding:0 10px 10px;margin:auto 0 0}
  .ab-zeile form .btn{min-height:40px;font-size:14px}
  .ab-zeile .stimme-marke{align-self:flex-start}
}

/* ===== Podest: Gold, Silber, Bronze (Metall-Verlauf, Rahmen ums Bild, geprägte Platznummer) ===== */
.ab-platz.p1{--rand:#E3A400} .ab-platz.p2{--rand:#B9C0CC} .ab-platz.p3{--rand:#B8692F}
.ab-platz .ab-bild{box-shadow:0 0 0 4px var(--rand),var(--schatten)}
.ab-platz.p1 .ab-bild{box-shadow:0 0 0 5px var(--rand),0 0 0 7px rgba(227,164,0,.35),var(--schatten)}
.ab-sockel{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.18),0 10px 22px rgba(0,0,0,.2)}
.ab-platz.p1 .ab-sockel{--c:#EDB800;--t:#1B1B1B;background:linear-gradient(165deg,#FFEA8E 0%,#F7C10E 30%,#D29300 66%,#FFD95F 100%)}
.ab-platz.p2 .ab-sockel{--c:#CDD3DE;--t:#1B1B1B;background:linear-gradient(165deg,#FBFCFE 0%,#CFD5E0 30%,#979FB0 66%,#E8EBF1 100%)}
.ab-platz.p3 .ab-sockel{--c:#CD7B3E;--t:#fff;background:linear-gradient(165deg,#F3B886 0%,#CD7B3E 30%,#8F4A1F 66%,#E39C60 100%)}
.ab-platz.p1 .ab-rang,.ab-platz.p2 .ab-rang{text-shadow:0 2px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.2)}
.ab-platz.p3 .ab-rang{text-shadow:0 2px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.3)}
.ab-platz .ab-anteil{opacity:.9}
@media (max-width:640px){
  .ab-podest .ab-platz .ab-bild{box-shadow:inset 0 0 0 4px var(--rand)}
  .ab-podest .ab-platz.p1 .ab-bild{box-shadow:inset 0 0 0 5px var(--rand)}
}

/* ===== Wunschliste: eine Karte je Set (Bild, Text, Stimmen, Amazon), Rang-Schild Gold/Silber/Bronze ===== */
.wunsch-karte{position:relative;gap:0;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);transition:transform .15s ease,box-shadow .15s ease}
.wunsch-karte .karte{box-shadow:none;background:transparent;border-radius:var(--r) var(--r) 0 0}
.wunsch-karte .karte:hover{transform:none;box-shadow:none}
@media (hover:hover){ .wunsch-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)} }
.wunsch-karte .stimme{box-shadow:none;border-radius:0;padding:6px 12px 10px;border-top:1px solid var(--line)}
.wunsch-karte>.btn.amazon{width:auto;margin:0 10px 10px}
.wunsch-karte.platz1{--rand:#E3A400} .wunsch-karte.platz2{--rand:#B9C0CC} .wunsch-karte.platz3{--rand:#B8692F}
.wunsch-karte.platz1,.wunsch-karte.platz2,.wunsch-karte.platz3{box-shadow:0 0 0 3px var(--rand),var(--schatten)}
.wunsch-karte.meine-stimme{box-shadow:0 0 0 3px var(--stein-rot),var(--schatten)}
.wk-rang{position:absolute;z-index:3;left:10px;top:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-family:var(--titel-schrift);font-size:19px;line-height:1;
  color:#fff;background:var(--marke-blau);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.wunsch-karte.platz1 .wk-rang{color:#1B1B1B;background:linear-gradient(165deg,#FFEA8E,#F7C10E 40%,#D29300)}
.wunsch-karte.platz2 .wk-rang{color:#1B1B1B;background:linear-gradient(165deg,#FBFCFE,#CFD5E0 40%,#979FB0)}
.wunsch-karte.platz3 .wk-rang{background:linear-gradient(165deg,#F3B886,#CD7B3E 40%,#8F4A1F)}
.wk-rang~.karte .bild>.anzahl{left:auto;right:10px}
.ab-stats a.stein{color:#1B1B1B;text-decoration:none}
@media (max-width:640px){
  .wunsch-karte .stimme{flex-direction:column;align-items:stretch;gap:4px;padding:6px 10px 8px}
  .wunsch-karte .stimme .btn{justify-content:center;min-height:38px;font-size:14px}
  .wunsch-karte .stimme .stimmen{text-align:center}
  .wunsch-karte>.btn.amazon{margin:0 10px 10px;min-height:36px}
  .wk-rang{width:30px;height:30px;font-size:17px;left:8px;top:8px}
}

/* ===== „Was fehlt noch?“: Jahres-Sprungleiste, klebrige Jahresköpfe mit Fortschritt ===== */
.ueb-jahre{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 6px}
.ueb-jahre .btn{font-variant-numeric:tabular-nums;padding-left:10px;padding-right:10px}
.ueb-jahre .btn.voll{box-shadow:inset 0 0 0 2px var(--stein-gruen),0 2px 4px rgba(0,0,0,.08)}
.ueb-jahr-kopf{position:sticky;top:calc(var(--kl-h,70px) - 1px);z-index:5;margin:22px 0 10px;padding:8px 0 6px;scroll-margin-top:calc(var(--kl-h,70px) + 8px);
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.ueb-jahr-kopf.voll .ueb-jahr::after{content:"✓";margin-left:8px;font-family:Inter,sans-serif;font-weight:800;font-size:15px;color:var(--gruen-text);vertical-align:middle}
.ueb-jahr-balken{flex:0 0 100%;display:block;height:6px;border-radius:3px;background:var(--platte-leer);overflow:hidden;margin-top:4px;max-width:420px}
.ueb-jahr-balken i{display:block;height:100%;background:var(--stein-gruen);border-radius:3px}
@media (max-height:500px){ .ueb-jahr-kopf{position:static} }
@media (max-width:640px){
  .ueb-jahre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-4px -16px 8px;padding:4px 16px 6px}
  .ueb-jahre::-webkit-scrollbar{display:none}
  .ueb-jahre .btn{flex:0 0 auto}
  .ueb-jahr-kopf{margin:18px -4px 8px;padding:8px 4px 6px}
  .ueb-jahr-balken{max-width:none}
  .ueb-set{padding:8px 10px 8px 8px}
}

/* ===== News: Stand-Steine als Filter, Jahresköpfe wie bei „Was fehlt noch?“ ===== */
.ab-stats a.stein{transition:transform .12s} .ab-stats .stein.lila,.ab-stats .stein.gruen{color:#fff} .ab-stats a.stein.lila,.ab-stats a.stein.gruen,.ab-stats a.stein.blau{color:#fff}
@media (hover:hover){ .ab-stats a.stein:hover{transform:translateY(-2px)} }
.news-jahr-kopf .ueb-jahr-balken i{background:var(--stein-lila)}
.news-filter .news-stand{margin-left:auto}
.news-jahr-kopf+.news-raster{margin-top:6px}
@media (max-width:640px){ .news-filter .news-stand{margin-left:0;flex:0 0 100%;width:max-content} }

/* ===== Galerie: Steine als Reiter, Lightbox mit Vor/Zurück, Wischen, Zähler ===== */

.ab-stats .stein.orange{color:#fff}
.ab-stats a.stein:not(.an){opacity:.78} .ab-stats a.stein.an{opacity:1;box-shadow:0 0 0 3px var(--text),inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.12)}
.ab-stats a.stein.leer{opacity:.5}
.lightbox{flex-direction:column;gap:10px}
.lightbox img{cursor:zoom-out}
.lb-vor,.lb-zur{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:56px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:40px;line-height:1;cursor:pointer;z-index:2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.lb-vor{right:12px} .lb-zur{left:12px}
.lb-vor:hover,.lb-zur:hover{background:rgba(255,255,255,.26)}
.lb-fuss{display:flex;align-items:center;justify-content:center;gap:14px;max-width:92vw;color:#fff;font-size:14px;font-weight:600;cursor:default;padding:0 60px}
.lb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-zaehler{font-family:var(--titel-schrift);font-size:16px;letter-spacing:.04em;flex:none;background:rgba(255,255,255,.14);padding:4px 10px;border-radius:10px}
.lb-zaehler:empty{display:none}
.lb-einzeln .lb-vor,.lb-einzeln .lb-zur{display:none}
.lightbox img{max-height:84dvh}
@media (max-width:640px){
  
  .lb-vor,.lb-zur{top:auto;bottom:14px;transform:none;width:56px;height:48px;font-size:34px}
  .lb-fuss{position:absolute;left:0;right:0;bottom:22px;padding:0 80px;flex-direction:column;gap:6px}
  .lightbox img{max-height:72dvh;margin-bottom:60px}
}

/* ===== Startseite auf dem Handy: Suche volle Breite, Filterzeilen seitlich scrollbar, Trefferzeile, 4 Wunsch-Karten ===== */
.treffer{margin:-4px 0 12px;font-size:13px;font-weight:700;color:var(--muted)}
@media (max-width:640px){
  .werkzeuge{gap:8px 10px;margin-bottom:8px}
  .suche{flex:1 1 100%}
  .gruppe,.themen,.ueb-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-left:-16px;margin-right:-16px;padding:4px 16px 6px}
  .gruppe::-webkit-scrollbar,.themen::-webkit-scrollbar,.ueb-filter::-webkit-scrollbar{display:none}
  .werkzeuge .gruppe{margin:0 -16px}
  .themen{margin:0 -16px 10px} .ueb-filter{margin:0 -16px 14px}
  .gruppe .lbl{flex:0 0 auto;flex-basis:auto;white-space:nowrap;margin-right:2px}
  .gruppe .btn,.themen .btn,.ueb-filter .btn{flex:0 0 auto;white-space:nowrap}
  .news-filter .news-stand{flex:0 0 auto;width:auto}
  .wunsch-raster>.karte:nth-child(5){display:none}
  .wunsch-mehr{display:flex;gap:8px} .wunsch-mehr .btn{flex:1;justify-content:center;text-align:center}
}
/* Masken für seitlich scrollbare Zeilen – nur wenn es links/rechts weitergeht (Klassen setzt app.js) */
.gruppe.mehr-rechts,.themen.mehr-rechts,.ueb-filter.mehr-rechts,.ueb-jahre.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.gruppe.mehr-links,.themen.mehr-links,.ueb-filter.mehr-links,.ueb-jahre.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.gruppe.mehr-links.mehr-rechts,.themen.mehr-links.mehr-rechts,.ueb-filter.mehr-links.mehr-rechts,.ueb-jahre.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* ===== Set-Seite: Teilen-Knopf, Handy-Feinschliff ===== */
.btn.teilen .sym{width:15px;height:15px}
.links .btn{white-space:nowrap}
@media (max-width:640px){
  .detail .bild:not(.foto){aspect-ratio:4/3}
  .detail>.notiz,.notiz{font-size:14px}
  .set-abstimmen .btn{width:100%;justify-content:center;min-height:40px}
  .links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin:16px -14px 0;padding:4px 14px 6px}
  .links::-webkit-scrollbar{display:none}
  .links .btn{flex:0 0 auto} .links .teilen{order:-1}
  .links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .links.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
  .links.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .detail .galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Kopfleiste auf dem Handy: Werkzeuge kompakter, damit auch angemeldet (mit Zahnrad) alles in eine Zeile passt ===== */
@media (max-width:640px){
  .kl-werkzeug{gap:4px} .kl-werkzeug .btn{padding-left:9px;padding-right:9px} .sprache{gap:2px} .sprache .btn{padding-left:8px;padding-right:8px}
  .kopfleiste{gap:8px 12px}
}

/* ===== Set-Seite: Reiter (Steine) mit Datenblatt-Liste, Highlights, Beschreibung ===== */
.setinfo{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.si-reiter{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px;padding-top:6px}
.si-tab{--c:var(--stein-rot);position:relative;display:inline-flex;align-items:center;height:38px;padding:0 16px;border:0;border-radius:10px;font:800 14px Inter,system-ui,sans-serif;cursor:pointer;
  color:var(--kl-aus-text);background:var(--kl-aus);box-shadow:none;transition:background-color .15s,color .15s}
.si-tab::before,.si-tab::after{content:"";position:absolute;top:-5px;width:12px;height:5px;border-radius:4px 4px 1px 1px;background:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.si-tab::before{left:12px} .si-tab::after{left:29px}
.si-tab:nth-child(2){--c:var(--stein-blau)} .si-tab:nth-child(3){--c:var(--stein-gruen)}
.si-tab:hover,.si-tab.an{background:var(--c);color:#fff}
.si-tab.an{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.25)}
.si-tab:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.si-js .si-panel>.si-titel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.si-titel{margin:18px 0 10px;font-family:var(--titel-schrift);font-weight:400;font-size:21px}
.si-unter{margin:18px 0 8px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px}
.si-unter small{font:800 11px/1 Inter,sans-serif;color:var(--muted);background:var(--bg);padding:3px 6px 4px;border-radius:10px}
.db-liste{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 24px}
.db-zeile{display:grid;grid-template-columns:18px 112px minmax(0,1fr);align-items:baseline;gap:0 10px;padding:9px 0;border-bottom:1px solid var(--line)}
.db-stein{--c:var(--stein-grau);position:relative;align-self:center;width:14px;height:9px;border-radius:2px;background:var(--c);box-shadow:none}
.db-stein::before{content:"";position:absolute;left:2px;top:-3px;width:4px;height:3px;border-radius:2px 2px 0 0;background:var(--c);box-shadow:6px 0 0 var(--c)}
.db-stein.rot{--c:var(--stein-rot)} .db-stein.blau{--c:var(--stein-blau)} .db-stein.gelb{--c:var(--stein-gelb)} .db-stein.gruen{--c:var(--stein-gruen)} .db-stein.grau{--c:var(--stein-grau)} .db-stein.lila{--c:var(--stein-lila)}
.db-zeile dt{margin:0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.db-zeile dd{margin:0;font-size:15px;font-weight:800;min-width:0;overflow-wrap:anywhere}
.db-zeile dd small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.db-zeile dd .stern{font-style:normal;color:#E3A400} .db-zeile .mono{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:14px;letter-spacing:.04em}
.db-figuren{display:flex;flex-wrap:wrap;gap:6px}
.db-figuren span{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px 6px;border-radius:10px;background:var(--bg);font-size:13px;font-weight:700;box-shadow:none}
.highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 24px}
.highlights li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.highlights li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:9px;border-radius:2px;background:var(--marke-rot);box-shadow:none}
.highlights li::after{content:"";position:absolute;left:4px;top:11px;width:4px;height:3px;border-radius:2px 2px 0 0;background:var(--marke-rot);box-shadow:6px 0 0 var(--marke-rot)}
.highlights li b{font-weight:800;display:block}
.beschreibung-text{position:relative;font-size:15px;line-height:1.65;max-width:72ch}
.beschreibung-text p{margin:0}
.beschreibung-text.kurz{max-height:9.9em;overflow:hidden}
.beschreibung-text.kurz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(180deg,transparent,var(--card))}
.btn.mehr-lesen{margin-top:8px}
.fakt .stern{font-style:normal;font-size:20px;color:#E3A400;vertical-align:2px}
.fakt.stein.gruen .stern{color:#FFE27A}
.setinfo .quelle{margin:16px 0 0;font-size:12px;color:var(--muted);font-weight:600} .setinfo .quelle a{color:inherit;text-decoration:underline}
@media (max-width:640px){
  .si-reiter{gap:6px;margin-bottom:12px} .si-tab{flex:1 1 auto;justify-content:center;padding:0 10px;font-size:13px;height:36px}
  .db-liste{grid-template-columns:minmax(0,1fr)}
  .db-zeile{grid-template-columns:16px 92px minmax(0,1fr);gap:0 8px} .db-zeile dt{font-size:10px} .db-zeile dd{font-size:14px}
  .highlights{grid-template-columns:minmax(0,1fr)}
  .fakten{grid-template-columns:repeat(3,minmax(0,1fr))} .fakt b{font-size:22px} .fakt .stern{font-size:17px}
}

/* ===== Karten: UVP bei Wunsch-Sets ===== */
.karte .fuss .uvp{font-size:12px;font-weight:700;color:var(--muted)} .karte .fuss .uvp b{font-family:var(--titel-schrift);font-weight:400;font-size:17px;color:var(--text);margin-right:3px}

/* ===== Preise aus Brickset auf „Was fehlt noch?“ und in den News ===== */
.ueb-preis{color:var(--text);font-weight:800;white-space:nowrap}
.ueb-euro{color:var(--rot-text)}
.nk-preis{font-family:var(--titel-schrift);font-weight:400;font-size:17px;margin-right:auto}
.nk-fuss .btn.amazon{flex:0 0 100%}

/* ===== Verfügbarkeit (Brickset): im Handel / ausgelaufen; verwandte Sets auf der Set-Seite ===== */
.ueb-marke.handel{background:var(--stein-gruen);color:#fff} .ueb-marke.aus{background:var(--grau-bg);color:var(--muted-stark);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.35)}
.ueb-set.fehlt:has(.ueb-marke.handel){border-left-color:var(--stein-gruen);border-left-style:dashed}
.set-kauf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.raster.verwandt{margin-bottom:30px}

/* ===== Zahlen & Rekorde ===== */
.rekorde{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:34px}
.rekord{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:10px 12px 10px 10px;color:var(--text);text-decoration:none;min-width:0;transition:transform .15s,box-shadow .15s}
@media (hover:hover){ .rekord:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)} }
.rk-bild{position:relative;flex:0 0 72px;height:60px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rk-bild img{max-width:64px;max-height:54px;object-fit:contain} .rk-bild .leer{font-size:18px}
.rk-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.rk-text small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rk-text b{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1.05} .rk-text b small{font:600 11px/1 Inter,sans-serif;text-transform:none;letter-spacing:0}
.rk-text b .stern{font-style:normal;color:#E3A400;font-size:18px}
.rk-text>span{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zb-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px 18px;margin-bottom:36px;align-items:start}
.zb-box{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:18px 18px 16px;min-width:0}
.zb-box .abschnitt{margin-top:0;margin-bottom:14px;font-size:20px} .zb-box .hinweis{margin:8px 0 0;font-size:12px}
.zb-liste{display:flex;flex-direction:column;gap:9px}
.zb-zeile{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.zb-label{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.zb-balken{position:relative;height:16px;border-radius:10px;background:var(--grau-bg);overflow:visible;box-shadow:inset 0 2px 3px rgba(0,0,0,.1)}
.zb-balken i{--c:var(--marke-rot);position:relative;display:block;height:100%;min-width:12px;border-radius:10px;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);animation:hp-wachsen .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left center}
.zb-balken i b{position:absolute;left:4px;top:-4px;width:7px;height:4px;border-radius:3px 3px 1px 1px;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.zb-balken i.rot{--c:var(--marke-rot)} .zb-balken i.blau{--c:var(--blau-flaeche)} .zb-balken i.gruen{--c:var(--stein-gruen)} .zb-balken i.lila{--c:var(--stein-lila)} .zb-balken i.orange{--c:var(--stein-orange)}
.zb-wert{white-space:nowrap;font-weight:700;color:var(--muted);text-align:right} .zb-wert b{font-family:var(--titel-schrift);font-weight:400;font-size:17px;color:var(--text)}
.zb-stapel{display:flex;height:26px;border-radius:10px;overflow:hidden;background:var(--grau-bg);box-shadow:none}
.zb-stapel i,.zb-legende i{--c:var(--stein-grau);background:var(--c)} .zb-stapel i{display:block;height:100%;box-shadow:inset 1px 0 0 rgba(255,255,255,.4)}
.zb-stapel .blau,.zb-legende .blau{--c:var(--blau-flaeche)} .zb-stapel .rot,.zb-legende .rot{--c:var(--marke-rot)} .zb-stapel .weiss,.zb-legende .weiss{--c:#FFFFFF} .zb-stapel .grau,.zb-legende .grau{--c:#6B6F78}
.zb-legende{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;font-weight:700}
.zb-legende li{display:flex;align-items:center;gap:7px} .zb-legende i{width:14px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.zb-legende b{font-family:var(--titel-schrift);font-weight:400;font-size:17px} .zb-legende small{color:var(--muted);font-weight:600}
.kachel .stern{font-style:normal;color:#E3A400;font-size:20px}
@media (max-width:640px){
  .rekorde{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .rekord{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
  .rk-bild{flex:none;width:100%;height:86px} .rk-bild img{max-width:90%;max-height:78px}
  .rk-text>span{white-space:normal;font-size:12px;line-height:1.3} .rk-text b{font-size:20px}
  .zb-raster{grid-template-columns:minmax(0,1fr)} .zb-box{padding:14px}
  .zb-zeile{grid-template-columns:minmax(56px,auto) minmax(0,1fr) auto;gap:8px;font-size:12px} .zb-label{max-width:110px}
}

/* ===== Wunschliste: Sortierung, Handel-Filter; Marke „erscheint …“ ===== */
.ueb-marke.bald{background:var(--stein-lila);color:#fff}
.wl-sort{margin-bottom:10px} .wl-sort .lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.wl-sort .wl-handel{margin-left:auto} .wl-sort .wl-handel.aktiv{background:var(--stein-gruen)}
.karte .fuss .ueb-marke{margin-top:0}
@media (max-width:640px){ .wl-sort .wl-handel{margin-left:0} }

/* ===== Startseite: Rekorde-Streifen ===== */
.rekord-streifen{margin:4px 0 30px}
.rs-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .rs-kopf .abschnitt{margin-bottom:12px}
.rs-liste{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
@media (max-width:900px){ .rs-liste{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===== Bau-Tagebuch (bt-*): Zeitleiste auf der Set-Seite, Teaser auf der Baukarte ===== */
.tagebuch{margin:0 0 34px}
.bt-liste{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.bt-liste::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:4px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--marke-rot) 0 14px,var(--blau-flaeche) 14px 28px)}
.bt-eintrag{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:12px 14px 12px;margin-bottom:12px}
.bt-punkt{position:absolute;left:-22px;top:16px;width:16px;height:10px;border-radius:2px;background:var(--marke-rot);box-shadow:none}
.bt-punkt::before{content:"";position:absolute;left:3px;top:-3px;width:4px;height:3px;border-radius:2px 2px 0 0;background:inherit;box-shadow:6px 0 0 var(--marke-rot)}
.bt-eintrag.fertig .bt-punkt{background:var(--stein-gruen)} .bt-eintrag.fertig .bt-punkt::before{box-shadow:6px 0 0 var(--stein-gruen)}
.bt-eintrag.start .bt-punkt{background:var(--blau-flaeche)} .bt-eintrag.start .bt-punkt::before{box-shadow:6px 0 0 var(--blau-flaeche)}
.bt-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px} .bt-kopf time{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bt-stand{display:inline-flex;align-items:center;gap:8px;flex:1 1 140px;max-width:260px;height:10px;border-radius:3px;background:var(--grau-bg);position:relative;margin-right:48px}
.bt-stand i{display:block;height:100%;border-radius:3px;background:var(--marke-rot);box-shadow:none} .bt-stand b{position:absolute;right:-48px;top:-5px;font-family:var(--titel-schrift);font-weight:400;font-size:15px}
.bt-titel{display:block;font-family:var(--titel-schrift);font-weight:400;font-size:20px;margin:4px 0 2px}
.bt-eintrag.fertig .bt-titel{color:var(--gruen-text)}
.bt-eintrag p{margin:4px 0 0;font-size:15px;line-height:1.55}
.bt-foto{display:block;margin-top:10px;border-radius:var(--r-klein);overflow:hidden;background:#000;max-width:420px} .bt-foto img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.bt-teaser{display:flex;gap:10px;align-items:center;margin-top:12px;padding:8px 10px;border-radius:var(--r-klein);background:var(--bg);color:var(--text);text-decoration:none;border-left:var(--akzent-rand) solid var(--stein-orange)}
.bt-teaser img{width:56px;height:44px;object-fit:cover;border-radius:10px;flex:none} .bt-teaser span{display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:600;min-width:0} .bt-teaser small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media (max-width:640px){ .bt-stand{max-width:none} .bt-foto{max-width:none} }

/* ===== Vorher-Nachher-Schieber (Set-Seite: Katalogbild ↔ eigenes Foto) ===== */
.vergleich{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;aspect-ratio:4/3;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:var(--schatten)}
.vg-unten,.vg-oben{position:absolute;inset:0} .vg-unten img,.vg-oben img{width:100%;height:100%;object-fit:contain;display:block}
.vg-unten{background:#000} .vg-unten img{object-fit:cover}
.vg-oben{background:#fff;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vg-oben img{padding:12px;box-sizing:border-box}
.vg-griff{position:absolute;top:0;bottom:0;left:50%;width:0;border-left:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;transform:translateX(-1.5px)}
.vg-griff i{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:var(--marke-rot);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.vg-griff i::before,.vg-griff i::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translateY(-50%)}
.vg-griff i::before{left:9px;border-right:7px solid #fff} .vg-griff i::after{right:9px;border-left:7px solid #fff}
.vg-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vg-regler:focus-visible~.vg-griff{outline:3px solid var(--fokus);outline-offset:2px}
.vg-label{position:absolute;top:10px;padding:4px 9px 5px;border-radius:10px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;transition:opacity .15s}
.vg-label.links{left:10px;background:rgba(255,255,255,.9);color:#1B1B1B} .vg-label.rechts{right:10px;background:rgba(23,23,150,.92);color:#fff}
.vergleich.vg-links .vg-label.links,.vergleich.vg-rechts .vg-label.rechts{opacity:0}
.vg-gross{position:absolute;right:10px;bottom:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:18px;text-decoration:none;z-index:2}
.funken{display:inline-flex;align-items:flex-end;gap:2px;height:22px;flex:0 0 auto;padding:0 2px;border-bottom:1px solid rgba(0,0,0,.15)}
.funken i{display:block;width:5px;min-height:0;border-radius:1px 1px 0 0;background:currentColor;opacity:.75} .funken i:last-child{opacity:1}
.ab-platz.p1 .funken{color:#1B1B1B} .ab-platz.p2 .funken{color:#1B1B1B} .ab-platz.p3 .funken{color:#fff}
@media (max-width:640px){ .ab-podest .ab-platz .funken{order:2} .ab-podest .ab-platz.p1 .funken{margin-left:auto} }

/* ===== Würfel-Knopf, PWA-Hinweis ===== */
.btn.wuerfel{padding-left:9px;padding-right:9px} .btn.wuerfel svg{width:17px;height:17px}
.pwa-hinweis{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 12px;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);border-left:var(--akzent-rand) solid var(--marke-rot)}
.pwa-hinweis .logo{width:40px;height:40px;font-size:13px;flex:none}
.pwa-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:14px} .pwa-text small{color:var(--muted);font-weight:600;font-size:12px}
.pwa-hinweis .btn{flex:none}

/* ===== Bau-Timer im Baustand-Regler ===== */
.bauregler .timer .btn{font-variant-numeric:tabular-nums} .bauregler .timer.an .btn{animation:timer-puls 2s ease-in-out infinite}
@keyframes timer-puls{50%{box-shadow:0 0 0 4px rgba(228,0,43,.25)}}
@media (max-width:640px){ .bauregler .timer{grid-column:1/-1} .bauregler .timer .btn{width:100%} }

@media (max-width:640px){ .fakt.stein.orange b{font-size:19px;line-height:1.1} }

/* ===== Set-Vergleich ===== */
.vgl-fest{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:10px 12px;margin:0 0 18px}
.vgl-fest-bild{flex:0 0 72px;height:56px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden} .vgl-fest-bild img{max-width:64px;max-height:50px;object-fit:contain}
.vgl-fest>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .vgl-fest small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .vgl-fest b{font-size:15px}
.vgl-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:36px}
.vgl-karte{display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:var(--r-klein);box-shadow:var(--schatten);padding:8px;color:var(--text);text-decoration:none;min-width:0;transition:transform .12s}
@media (hover:hover){ .vgl-karte:hover{transform:translateY(-3px)} }
.vgl-karte-bild{display:flex;align-items:center;justify-content:center;height:84px;background:#fff;border-radius:10px;overflow:hidden} .vgl-karte-bild img{max-width:92%;max-height:76px;object-fit:contain} .vgl-karte-bild .leer{position:static;font-size:18px}
.vgl-karte b{font-size:13px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .vgl-karte small{font-size:11px;color:var(--muted);font-weight:700;display:flex;flex-wrap:wrap;gap:4px;align-items:center} .vgl-karte .status{font-size:10px;padding:2px 5px 3px}
.vgl{background:var(--card);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:18px;margin-bottom:34px}
.vgl-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px}
.vgl-set{display:flex;flex-direction:column;gap:3px;color:var(--text);text-decoration:none;min-width:0;text-align:center}
.vgl-bild{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#fff;border-radius:var(--r);padding:10px;overflow:hidden;position:relative} .vgl-bild img{max-width:100%;max-height:100%;object-fit:contain}
.vgl-set small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:6px} .vgl-set b{font-size:16px;line-height:1.2}
.vgl-vs{align-self:center;font-family:var(--titel-schrift);font-size:26px;color:var(--muted);padding:0 2px}
.vgl-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.vgl-tabelle th{width:30%;text-align:center;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 6px}
.vgl-tabelle td{width:35%;text-align:center;padding:9px 6px;font-weight:800;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.vgl-tabelle td:first-child{text-align:right} .vgl-tabelle td:last-child{text-align:left}
.vgl-tabelle td.gewinnt{color:var(--gruen-text);position:relative} .vgl-tabelle td.gewinnt::after{content:"✓";margin-left:6px;font-size:13px}
.vgl-tabelle td .stern{font-style:normal;color:#E3A400} .vgl-tabelle td small{font-weight:600;color:var(--muted)} .vgl-tabelle td .ueb-marke{margin:0}
.vgl-fazit{margin:14px 0 10px;font-size:15px;text-align:center} .vgl-fazit b{font-family:var(--titel-schrift);font-weight:400;font-size:20px}
.vgl-aktionen{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.btn.vergleichen{white-space:nowrap}
@media (max-width:640px){
  .vgl{padding:12px} .vgl-kopf{gap:8px} .vgl-set b{font-size:14px} .vgl-set small{font-size:10px} .vgl-vs{font-size:20px}
  .vgl-tabelle{font-size:14px} .vgl-tabelle th{font-size:10px;width:26%;padding:8px 4px} .vgl-tabelle td{width:37%;padding:8px 4px}
  .vgl-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgl-aktionen .btn{flex:1 1 auto;justify-content:center}
}

/* ===== Logo = Marinas Twitch-Profilbild (rund, blauer Ring) ===== */
.logo.logo-bild{background:#fff;padding:0;overflow:hidden;border-radius:50%;box-shadow:0 0 0 3px var(--marke-blau),0 4px 10px rgba(0,0,0,.2);text-shadow:none}
.logo.logo-bild img{width:100%;height:100%;object-fit:cover;display:block}
.seitenleiste .logo.logo-bild{box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.25)}

/* ===== Über mich ===== */
.um-held{position:relative;min-height:380px;display:flex;align-items:flex-end;border-radius:var(--r-gross);overflow:hidden;margin:4px 0 22px;box-shadow:var(--schatten-hoch);background:#1a1230 var(--banner) center 30%/cover no-repeat;color:#fff}
.um-held::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,30,.88) 0%,rgba(14,10,30,.7) 45%,rgba(14,10,30,.15) 100%)}
.um-held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,var(--stein-rot) 0 48px,var(--stein-blau) 48px 96px,var(--stein-gelb) 96px 144px,var(--stein-gruen) 144px 192px)}
.um-held-text{position:relative;z-index:1;padding:34px 36px 40px;max-width:620px}
.um-avatar{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #fff,0 8px 24px rgba(0,0,0,.4);margin-bottom:14px} .um-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.um-held .held-zeile{color:#FFD95F;margin:0 0 2px}
.um-held h1{font-family:var(--titel-schrift);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:.95;margin:0 0 10px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.um-sub{margin:0 0 4px;font-size:17px;font-weight:800;color:#fff} .um-sub2{margin:0 0 18px;font-size:16px;color:rgba(255,255,255,.85);max-width:52ch}
.um-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.um-knoepfe .btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.um-knoepfe .btn.twitch{background:var(--twitch)}
.um-fakten{grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 26px}
.um-fakten .fakt.lila{--c:var(--stein-lila)} .um-fakten .fakt.gruen{--c:var(--stein-gruen)} .um-fakten .fakt.orange{--c:var(--stein-orange)}
.um-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:24px;align-items:start;margin-bottom:30px}
.um-text{max-width:none;margin:0}
.um-seite .abschnitt{margin-top:0}
.um-weg{list-style:none;margin:0 0 18px;padding:0 0 0 22px;position:relative}
.um-weg::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:4px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--marke-rot) 0 14px,var(--blau-flaeche) 14px 28px)}
.um-weg li{position:relative;padding:0 0 18px 4px}
.um-weg-punkt{position:absolute;left:-22px;top:4px;width:16px;height:10px;border-radius:2px;background:var(--stein-gelb);box-shadow:none}
.um-weg-punkt::before{content:"";position:absolute;left:3px;top:-3px;width:4px;height:3px;border-radius:2px 2px 0 0;background:inherit;box-shadow:6px 0 0 var(--stein-gelb)}
.um-weg time{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.um-weg b{display:block;font-family:var(--titel-schrift);font-weight:400;font-size:19px;margin:2px 0 3px}
.um-weg p{margin:0;font-size:14px;line-height:1.5;color:var(--muted-stark)}
.um-bau{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:10px 12px 10px 10px;color:var(--text);text-decoration:none;border-left:var(--akzent-rand) solid var(--marke-rot)}
.um-bau img{width:72px;height:56px;object-fit:contain;background:#fff;border-radius:10px;flex:none} .um-bau>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.um-bau small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--rot-text)} .um-bau b{font-size:15px}
.um-bau .baubalken{margin:6px 0 0;max-width:none} .um-bau .baubalken b{font-size:16px;min-width:44px}
.um-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.um-clip{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--schatten);aspect-ratio:16/9;color:#fff;text-decoration:none;transition:transform .15s}
.um-clip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.um-clip span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:13px;font-weight:800;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));display:flex;align-items:center;gap:6px}
.um-clip span svg{color:var(--twitch)}
@media (hover:hover){ .um-clip:hover{transform:translateY(-3px)} .um-clip:hover img{transform:scale(1.05)} }
.um-fotos{margin-bottom:34px}
@media (max-width:900px){ .um-fakten{grid-template-columns:repeat(3,minmax(0,1fr))} .um-raster{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .um-held{min-height:0;background-position:72% 20%;margin-bottom:16px} .um-held::before{background:linear-gradient(180deg,rgba(14,10,30,.25) 0%,rgba(14,10,30,.85) 55%,rgba(14,10,30,.95) 100%)}
  .um-held-text{padding:150px 18px 30px} .um-avatar{width:72px;height:72px;margin-bottom:10px} .um-sub{font-size:15px} .um-sub2{font-size:14px}
  .um-knoepfe .btn{flex:1 1 auto;justify-content:center}
  .um-fakten{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px} .um-fakten .fakt b{font-size:22px}
  .ueber.um-text{padding:20px 18px}
  .um-clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .um-clip span{font-size:12px;padding:20px 8px 8px}
}

/* ===== Figuren-Seite (eigener Stein „Figuren“, rosa) ===== */
.stein.rosa{--c:var(--stein-rosa);color:#fff} .ab-stats .stein.rosa,.ab-stats a.stein.rosa{color:#fff}
.kl-stein.s-rosa{--c:var(--stein-rosa)} .mega-stein.s-rosa{--c:var(--stein-rosa)}
.figur{color:inherit;text-decoration:none}
.figur-bild img.produkt{object-fit:contain;padding:6px;background:#fff}
.figur-detail .bild.produkt{display:block;background:#fff;border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.figur-detail .bild.produkt img{width:100%;height:100%;object-fit:contain}
.figur-detail .bild.figur-bild{border-radius:var(--r);aspect-ratio:3/4}
.figur-text-lang p{margin:14px 0 0;font-size:16px;line-height:1.6}
.figur-detail .figuren-quelle{margin:16px 0 0;clear:both}
.figur-bild .mein-foto{left:8px;bottom:8px;font-size:10px;padding:3px 6px}
.figur-nr{font-size:16px}
/* Funko-Pop-Silhouette: großer Kopf, kleiner Körper */
.figur-leer.pop{--figur-maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Crect x='6' y='2' width='48' height='40' rx='17'/%3E%3Crect x='24' y='41' width='12' height='4'/%3E%3Cpath d='M18 44h24l3 20H15z'/%3E%3Cpath d='M15 46l-6 13 4 2 6-10z'/%3E%3Cpath d='M45 46l6 13-4 2-6-10z'/%3E%3Crect x='17' y='63' width='11' height='15' rx='3'/%3E%3Crect x='32' y='63' width='11' height='15' rx='3'/%3E%3C/svg%3E")}
.figur-leer.pop::before{width:64%;height:82%}
.figuren-quelle{margin:-8px 0 24px;font-size:12px}
:root[data-theme="dark"] .figur-bild{background:#F4F5F8}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .figur-bild{background:#F4F5F8} }

/* Anmelden / Passwort vergessen (Verwaltung, ohne admin.css) */
.wrap.login{max-width:420px;margin:0 auto;padding:clamp(24px,8vh,80px) 16px 40px}
.login .login-karte{text-align:left;padding:28px 26px 24px;border-top:6px solid var(--marke-rot)}
.login-marke{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--titel-schrift);font-size:18px}
.login .login-marke .logo{margin:0;width:44px;height:44px;font-size:16px}
.login-titel{margin:0 0 14px;font-size:28px;color:var(--text-blau)}
.login-karte label{margin-top:12px}
.login-knopf{width:100%;justify-content:center;margin-top:18px;padding-top:13px;padding-bottom:15px;font-size:15px}
.login-links{display:flex;justify-content:space-between;gap:12px;margin:16px 0 0;font-size:13.5px;font-weight:700}
.login-notweg{margin-top:22px;border-top:1px solid var(--line);padding-top:12px} .login-notweg summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:700}
/* Startseite: Abstimm-Kasten „Was soll ich als Nächstes bauen?“ (Kandidaten wie das Podest, Spitzenreiter mit Goldrand) */
.held-knopf{margin:-4px 0 18px}
.abstimm-kasten{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:16px 18px 18px;margin:0 0 30px;border-left:var(--akzent-rand) solid var(--blau-flaeche)}
.ak-kopf{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin:0 0 14px}
.ak-ico{font-size:30px;line-height:1}
.ak-kopf>div{flex:1 1 220px;min-width:0}
.ak-kopf h2{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1.1;margin:0 0 3px}
.ak-kopf p{margin:0;color:var(--muted);font-size:14px}
.ak-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.ak-set{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;align-items:center;padding:8px 10px 8px 8px;border-radius:var(--r-klein);background:var(--gelb-bg);color:var(--text);text-decoration:none!important;border:2px solid transparent}
.ak-set:hover{border-color:var(--line)} .ak-set.vorn{border-color:#E3A400}
.ak-bild{grid-row:1/4;width:64px;height:50px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ak-bild img{max-width:58px;max-height:46px;width:auto;height:auto;object-fit:contain} .ak-bild .leer{font-size:11px;font-weight:800;color:var(--muted)}
.ak-name{font-weight:700;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-balken{display:block;height:8px;border-radius:10px;background:var(--grau-bg);overflow:hidden} .ak-balken i{display:block;height:100%;background:var(--rot)}
.ak-set.vorn .ak-balken i{background:#E3A400}
.ak-zahl{font-size:12px;font-weight:600;color:var(--muted)}
.ak-mehr{margin:10px 0 0;font-size:13px;font-weight:700}
@media (max-width:640px){ .ak-kopf .btn{width:100%;justify-content:center} .held-knopf .btn{width:100%;justify-content:center} .held-knopf .hk-lang{display:none} }   /* am Handy kurz, die Frage steht im Kasten */

/* „Was fehlt noch?“-Cockpit ruhiger (17.10.2026, Eric: „wirkt zu fett“): getönte Kacheln statt voller Steinfarbe, schlanke Fortschrittsbalken */
.hp-cockpit .hp-kacheln{gap:16px 12px}
.hp-cockpit .hp-kachel{background:var(--card);background:color-mix(in srgb,var(--c) 11%,var(--card));color:var(--text);border-top:4px solid var(--c);border-radius:8px;padding:14px 14px 14px;gap:4px;box-shadow:none}
.hp-cockpit .hp-kachel b{font-size:clamp(22px,2.3vw,28px);text-shadow:none!important;color:var(--text)}
.hp-cockpit .hp-kachel span{font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted-stark)}
.hp-cockpit .hp-kachel .hp-noppen{top:-8px;left:10px;gap:6px}
.hp-cockpit .hp-kachel .hp-noppen i{width:14px;height:5px;border-radius:4px 4px 1px 1px;box-shadow:none}
.hp-cockpit .hp-platte-zeile+.hp-platte-zeile{margin-top:16px}
.hp-cockpit .hp-platte-kopf{margin-bottom:8px;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
.hp-cockpit .hp-platte-kopf b{font-family:inherit;font-weight:700;font-size:14px}
.hp-cockpit .hp-platte-kopf small{font-size:14px;font-weight:600;color:var(--muted)}
.hp-cockpit .hp-platte{height:10px;border-radius:10px;box-shadow:none}
.hp-cockpit .hp-fuell{border-radius:10px;background:var(--stein-gruen);box-shadow:none}
.hp-cockpit .hp-platte em,.hp-cockpit .hp-noppen-reihe{display:none}

/* Menü aufgeräumt (17.10.2026): Unterreiter je Bereich, alle Seiten im Fuß, News-Zusammenfassung */
.unter-nav{display:flex;gap:24px;margin:4px 0 18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.unter-nav::-webkit-scrollbar{display:none}
.unter-nav a{flex:none;padding:10px 0 9px;margin-bottom:-1px;border-bottom:3px solid transparent;color:var(--muted-stark);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.unter-nav a:hover{color:var(--text)}
.unter-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--stein-rot)}
.fuss-nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin:18px 0 6px;font-size:15px;font-weight:700}
.fuss-nav a{color:var(--text);text-decoration:none;padding:6px 0}
.fuss-nav a:hover{text-decoration:underline}
.news-kurz{display:grid;gap:10px;margin:0 0 24px}
.news-kurz-zeile{display:grid;grid-template-columns:minmax(150px,auto) 1fr auto;align-items:center;gap:6px 18px;padding:14px 18px;border-radius:10px;background:var(--card);box-shadow:var(--schatten);color:var(--text);text-decoration:none}
.news-kurz-zeile b{font-size:17px}
.news-kurz-zeile>span:not(.ueb-jahr-balken){color:var(--muted);font-size:14px}
.news-kurz-zeile .ueb-jahr-balken{grid-column:1/-1;display:block;margin:0}
.news-kurz-zeile em{font-style:normal;font-weight:700;font-size:14px;color:var(--leiste)}
a.news-kurz-zeile:hover em{text-decoration:underline}
:root[data-theme="dark"] .news-kurz-zeile em{color:#9DB4FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .news-kurz-zeile em{color:#9DB4FF}}
@media (max-width:640px){.news-kurz-zeile{grid-template-columns:1fr}.news-kurz-zeile em{justify-self:start}}
.news-kurz-zeile .ueb-jahr-balken{max-width:none}

/* Minifiguren-Seite und Steine nach Farbe (17.10.2026) */
.mf-gruppe{margin:0 0 26px}
.mf-titel{font-family:var(--titel-schrift);font-weight:400;font-size:24px;margin:0 0 12px}
.mf-titel small{font-family:inherit;font-size:16px;color:var(--muted)}
.mf-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mf-karte{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--card);box-shadow:var(--schatten);min-width:0}
.mf-bild{position:relative;aspect-ratio:1;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.mf-bild img{width:92%;height:92%;object-fit:contain}
.mf-anzahl{position:absolute;right:6px;top:6px;background:var(--stein-rot);color:#fff;font-weight:800;font-size:12px;padding:2px 6px;border-radius:10px}
.mf-karte b{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.mf-sets{font-size:12px;color:var(--muted);line-height:1.35}
.mf-sets a{color:inherit}
.farb-box{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:18px;margin:0 0 30px}
.farb-stapel{display:flex;height:34px;border-radius:10px;overflow:hidden;gap:2px;box-shadow:inset 0 0 0 1px var(--line)}
.farb-stapel i{display:block;flex-basis:0;min-width:3px;background:var(--f);box-shadow:none}
.farb-stapel i.trans,.farb-liste i.trans{background-image:linear-gradient(135deg,rgba(255,255,255,.55) 25%,transparent 25% 50%,rgba(255,255,255,.55) 50% 75%,transparent 75%);background-size:8px 8px;background-color:var(--f)}
.farb-stapel i.rest{background:var(--platte-leer)}
.farb-liste{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 18px}
.farb-liste li{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:10px;font-size:14px}
.farb-liste li i{width:22px;height:22px;border-radius:10px;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.farb-liste li span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.farb-liste li small{color:var(--muted);font-variant-numeric:tabular-nums}
.farb-box .hinweis{margin:12px 0 0;font-size:12px}

/* Bauzeit-Tippspiel und Zeitraffer (17.10.2026) */
.tipp-kurz{margin:10px 0 0;font-size:14px;color:var(--muted-stark)}
.tipp-kurz code,.tippspiel code{background:var(--kl-aus);padding:1px 6px;border-radius:10px;font-weight:700;color:var(--text)}
.tipp-box{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:16px 18px;margin:0 0 26px}
.tipp-box p{margin:0 0 10px}
.tipp-ergebnis b{font-size:20px}
.tipp-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px;counter-reset:t}
.tipp-liste li{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);counter-increment:t;font-size:14px}
.tipp-liste li::before{content:counter(t);font-weight:800;color:var(--muted);text-align:center}
.tipp-liste li span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipp-liste li small{color:var(--muted)}
.tipp-liste li.platz1::before{content:"1";color:#B8860B} .tipp-liste li.platz2::before{color:#7A8494} .tipp-liste li.platz3::before{color:#A0522D}
.tipp-liste li.platz1,.tipp-liste li.platz2,.tipp-liste li.platz3{font-weight:800}
.zeitraffer{margin:0 0 26px}
.zr-bild{position:relative;border-radius:var(--r);overflow:hidden;background:#000;max-width:860px}
.zr-bild img,.zr-video{display:block;width:100%;max-width:860px;border-radius:var(--r);background:#000}
.zr-start{position:absolute;left:14px;bottom:14px}
.ad-bot{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:14px}
.ad-bot dt{font-weight:800} .ad-bot dd{margin:0;overflow-wrap:anywhere} .ad-bot code{font-size:12px}

/* Hogwarts-Schlosskarte auf „Was fehlt noch?“ (17.10.2026) */
.hk{margin:0 0 26px}
.hk-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;margin:0 0 14px}
.hk-kopf h2{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:30px;line-height:1.05}
.hk-kopf p{margin:6px 0 0;color:var(--muted-stark);max-width:640px}
.hk-stand{background:var(--card);border-radius:10px;box-shadow:var(--schatten);padding:12px 16px;min-width:280px}
.hk-stand-zeile{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hk-stand-zeile span{color:var(--muted)}
.hk-balken{display:flex;height:8px;border-radius:10px;background:var(--platte-leer);overflow:hidden;margin:8px 0}
.hk-balken i{display:block} .hk-balken .gebaut{background:#1E9E4A} .hk-balken .bereit{background:#E8A21B}
.hk-legende{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:0;font-size:12px;font-weight:700;color:var(--muted-stark)}
.hk-legende li{display:flex;align-items:center;gap:6px;margin:0;padding:0;line-height:1.3} .hk-legende i{width:10px;height:10px;border-radius:2px}
.hk-legende .hk-gebaut i{background:#1E9E4A} .hk-legende .hk-bereit i{background:#E8A21B} .hk-legende .hk-fehlt i{background:#B7BCCB}
.hk-buehne{position:relative;aspect-ratio:1260/860;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#17183C 0%,#23265A 48%,#2B3C6E 64%,#24557A 64.2%,#1C3F5E 100%);box-shadow:0 14px 40px rgba(23,23,60,.25)}
.hk-buehne::before{content:"";position:absolute;inset:0;opacity:.8;background-image:radial-gradient(1.5px 1.5px at 12% 14%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 46% 18%,#fff,transparent),radial-gradient(1px 1px at 63% 6%,#fff,transparent),radial-gradient(1.5px 1.5px at 81% 15%,#fff,transparent),radial-gradient(1px 1px at 92% 28%,#fff,transparent)}
.hk-mond{position:absolute;right:5.5%;top:5%;width:5.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFF8D6,#F2D98A);box-shadow:0 0 40px rgba(255,240,180,.45)}
.hk-see{position:absolute;left:2%;bottom:2%;font-family:var(--titel-schrift);font-size:clamp(14px,1.8vw,22px);color:rgba(255,255,255,.35)}
.hk-teil{position:absolute;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;text-decoration:none;color:#1B1B1B;transition:transform .15s}
.hk-teil:hover{transform:translateY(-3px)}
.hk-bild{flex:1;display:grid;place-items:center;padding:6px;min-height:0}
.hk-bild img{max-width:100%;max-height:100%;object-fit:contain}
.hk-text{padding:6px 9px 8px;background:rgba(255,255,255,.96)}
.hk-text b{display:block;font-size:clamp(11px,1.05vw,13px);line-height:1.25}
.hk-text span{display:flex;align-items:center;gap:5px;font-size:clamp(10px,.95vw,12px);font-weight:700;margin-top:2px}
.hk-text span i{width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.hk-teil.gebaut{background:#fff;box-shadow:0 0 0 3px #1E9E4A,0 10px 24px rgba(10,40,20,.35)} .hk-teil.gebaut .hk-text span{color:#167A39}
.hk-teil.bereit{background:#fff;box-shadow:0 0 0 3px #E8A21B,0 10px 24px rgba(60,40,0,.3)} .hk-teil.bereit .hk-text span{color:#A86A00}
.hk-teil.fehlt{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.hk-teil.fehlt .hk-bild img{filter:grayscale(1) brightness(1.15) opacity(.45)}
.hk-teil.fehlt .hk-text{background:rgba(20,20,52,.86);color:#E8EAF6} .hk-teil.fehlt .hk-text span{color:#C9CDE8}
@media (max-width:760px){
  .hk-buehne{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
  .hk-teil{position:static;width:auto!important;height:190px!important}
  .hk-mond,.hk-see{display:none}
  .hk-kopf h2{font-size:24px}
}

/* Partner-Kasten auf Set-Seiten anderer Marken (z. B. Lumibricks), als Werbung gekennzeichnet (17.10.2026) */
.partner-kasten{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding:12px 16px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.partner-kasten b{font-size:16px}
.partner-kasten code{background:var(--kl-aus);padding:1px 6px;border-radius:10px;font-weight:800}
.partner-werbung{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.partner-kasten .btn{margin-left:auto}

/* Lumibricks-Seite (17.10.2026) */
.lumi-bald{margin:10px 0 26px}
.lumi-bald p{margin:0 0 6px}
.lumi-marke{margin:26px 0 0;font-size:12px}

/* Lumibricks-Katalog und -Abstimmung (17.10.2026) */
.lk-abst-text{margin:-6px 0 12px}
.lk-top{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px;counter-reset:lk}
.lk-top li{display:grid;grid-template-columns:minmax(0,1fr) 160px auto auto;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:var(--card);box-shadow:var(--schatten);counter-increment:lk}
.lk-top li>a{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;min-width:0}
.lk-top li>a::before{content:counter(lk);font-weight:800;color:var(--muted);width:18px}
.lk-top img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;flex:none}
.lk-top b{display:block;font-size:15px} .lk-top small{color:var(--muted)}
.lk-balken{display:block;height:8px;border-radius:10px;background:var(--platte-leer);overflow:hidden} .lk-balken i{display:block;height:100%;background:var(--stein-rot)}
.lk-top em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap}
.lk-serien{margin-top:0}
.lk-serie{font-family:var(--titel-schrift);font-weight:400;font-size:24px;margin:22px 0 10px;scroll-margin-top:calc(var(--kl-h,70px) + 10px)}
.lk-serie small{font-family:inherit;font-size:15px;color:var(--muted)}
.lk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.lk-karte{display:flex;flex-direction:column;border-radius:10px;background:var(--card);box-shadow:var(--schatten);overflow:hidden;scroll-margin-top:calc(var(--kl-h,70px) + 10px)}
.lk-bild{position:relative;display:block;aspect-ratio:1;background:#000;overflow:hidden}
.lk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-bild .leer{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.lk-marke{position:absolute;left:8px;top:8px;padding:2px 7px;border-radius:10px;font-size:11px;font-weight:800;color:#fff;background:var(--stein-lila)}
.lk-marke.da{background:var(--stein-gruen)} .lk-marke.wunsch{background:var(--stein-blau)}
.lk-text{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;flex:1}
.lk-text .nr{font-size:12px;color:var(--muted)} .lk-text b{font-size:15px;line-height:1.3}
.lk-text p{margin:2px 0 0;font-size:13px;color:var(--muted-stark);line-height:1.4}
.lk-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.lk-stimmen{font-size:12px;color:var(--muted)}
.lk-shop{margin-left:auto;font-size:13px;font-weight:700}
@media (max-width:640px){.lk-top li{grid-template-columns:1fr auto}.lk-top .lk-balken,.lk-top em{display:none}.lk-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lk-text p{display:none}}

/* ===== Lumibricks: Karten-Links, Stimme zurücknehmen, Detailseite (18.10.2026) ===== */
.lk-text b a{color:inherit;text-decoration:none} .lk-text b a:hover{text-decoration:underline}
.lk-details{margin-left:auto;font-size:13px;font-weight:700} .lk-details+.lk-shop{margin-left:0}
.lk-karte.meine-stimme{box-shadow:0 0 0 3px var(--stein-rot),var(--schatten)}
.lk-meine{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:-4px 0 16px;padding:10px 12px;border-radius:10px;background:var(--card);box-shadow:var(--schatten)}
.stimme-zurueck{display:inline-flex;margin:0}
.meldung .stimme-zurueck{margin-left:10px;vertical-align:middle}
.lk-marke.statisch{position:static;display:inline-block;font-size:12px}
.lumi-detail .ld-haupt{display:block;position:relative;aspect-ratio:1;background:#000;border-radius:var(--r);overflow:hidden}
.lumi-detail .ld-haupt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lumi-detail .ld-haupt .leer{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.ld-daumen{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:8px}
.ld-daumen a{display:block;position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#000}
.ld-daumen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .15s}
.ld-daumen a:hover img{opacity:.8}
.ld-kurz{margin:14px 0;line-height:1.55;color:var(--muted-stark)}
.ld-daten{margin:6px 0 4px}
.ld-stimme{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0}
.ld-stimme .meldung{flex:0 0 100%;margin:0}
.ld-stimme form{margin:0}
.ld-abschnitte{display:grid;gap:14px;margin:0 0 22px}
.ld-abschnitt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:center;padding:14px;border-radius:var(--r);background:var(--card);box-shadow:var(--schatten)}
.ld-abschnitt:nth-child(even)>a{order:2}
.ld-abschnitt>a{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--r-klein);overflow:hidden;background:#000}
.ld-abschnitt>a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ld-abschnitt.ohne-bild{grid-template-columns:minmax(0,1fr)}
.ld-abschnitt h2{font-size:19px;margin:0 0 6px}
.ld-abschnitt p{margin:0;line-height:1.55;color:var(--muted-stark)}
.ld-pack{margin:0 0 22px;padding:16px 18px;border-radius:var(--r);background:var(--card);box-shadow:var(--schatten)}
.ld-pack h2{font-size:19px;margin:0}
.ld-pack ul{columns:2;column-gap:28px;margin:10px 0 0;padding-left:18px}
.ld-pack li{margin:3px 0;break-inside:avoid}
@media (max-width:700px){.ld-abschnitt{grid-template-columns:minmax(0,1fr);gap:12px}.ld-abschnitt:nth-child(even)>a{order:0}.ld-pack ul{columns:1}.meldung .stimme-zurueck{display:flex;margin:8px 0 0}}
.ld-alt{color:var(--muted);font-weight:400} .ld-preis-info{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.ld-weitere{margin:0 0 22px} .ld-weitere h2{font-size:19px;margin:0 0 10px}
.ld-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ld-raster a{display:block;position:relative;aspect-ratio:1;border-radius:var(--r-klein);overflow:hidden;background:#000}
.ld-raster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .15s} .ld-raster a:hover img{opacity:.85}

/* ===== Kontakt, Social Media, Datenschutz-Hinweis (18.10.2026) ===== */
.sm-instagram{--sm:#D62976} .sm-youtube{--sm:#FF0000} .sm-tiktok{--sm:#FE2C55} .sm-kick{--sm:#1C9B0B} .sm-twitch{--sm:var(--twitch)} .sm-radio{--sm:var(--marke-blau)}
.sm-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0 0 24px}
.sm-karte{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--card);border-radius:var(--r);padding:18px 18px 16px;box-shadow:var(--schatten);border-top:var(--akzent-rand) solid var(--sm);color:var(--text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.sm-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.sm-kopf{display:flex;align-items:center;gap:12px}
.sm-sym{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--sm);color:#fff;box-shadow:none}
.sm-instagram .sm-sym{background:linear-gradient(45deg,#F9CE34,#EE2A7B 50%,#6228D7)}
.sm-tiktok .sm-sym,.kt-kanaele .sm-tiktok .kt-sym{background:#111;box-shadow:none}
.sm-name{display:flex;flex-direction:column;min-width:0;flex:1} .sm-name b{font-family:var(--titel-schrift);font-weight:400;font-size:22px;line-height:1.1} .sm-name small{color:var(--muted);font-weight:600;font-size:14px;overflow-wrap:anywhere}
.sm-text{flex:1;font-size:15px;line-height:1.5;color:var(--muted-stark)}
.sm-knopf{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:800;font-size:14px;color:var(--sm)}
.sm-tiktok .sm-knopf{color:var(--text)} .sm-radio .sm-knopf{color:var(--link)}
.sm-knopf svg{width:14px;height:14px}
.sm-kontakt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:var(--r);padding:16px 20px;box-shadow:var(--schatten);margin:0 0 10px;border-left:var(--akzent-rand) solid var(--marke-rot)}
.sm-kontakt p{margin:0;font-size:16px;line-height:1.5}
.kt-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start;margin:0 0 10px}
.kt-formular,.kt-karte{position:relative;background:var(--card);border-radius:var(--r);padding:24px 26px;box-shadow:var(--schatten)}
.kt-formular{border-left:var(--akzent-rand) solid var(--marke-rot)}
.kt-formular h2,.kt-karte h2{display:flex;align-items:center;gap:8px;font-family:var(--titel-schrift);font-weight:400;font-size:24px;margin:0 0 12px}
.kt-seite{display:flex;flex-direction:column;gap:16px} .kt-karte p{margin:0 0 8px;font-size:15px;line-height:1.5} .kt-karte p:last-child{margin-bottom:0}
.kt-karte p a{font-weight:700;overflow-wrap:anywhere}
.kt-felder label{margin:0 0 14px} .kt-felder label small{font-weight:500;color:var(--muted)}
.kt-felder input[type=text],.kt-felder input[type=email],.kt-felder textarea{margin-top:6px;font:inherit;font-weight:400;font-size:16px}
.kt-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kt-ok{display:flex !important;gap:10px;align-items:flex-start;font-weight:500 !important;font-size:14px !important;line-height:1.45}
.kt-ok input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--marke-rot)} .kt-ok a{font-weight:700}
.kt-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kt-kanaele{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.kt-kanaele a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-klein);background:var(--bg);color:var(--text);text-decoration:none}
.kt-kanaele a:hover{background:var(--grau-bg)}
.kt-kanaele b{font-size:15px} .kt-kanaele small{margin-left:auto;color:var(--muted);font-weight:600;font-size:13px}
.kt-sym{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--sm);color:#fff;flex:none}
.kt-kanaele .sm-instagram .kt-sym{background:linear-gradient(45deg,#F9CE34,#EE2A7B 50%,#6228D7)}
@media (max-width:760px){ .kt-raster{grid-template-columns:1fr} .kt-zwei{grid-template-columns:1fr} .kt-formular,.kt-karte{padding:20px 18px} }
/* Datenschutz-Hinweis unten */
.fuss-link{display:inline-flex;align-items:center;min-height:32px;background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer}
.ds-hinweis{position:fixed;left:16px;right:16px;bottom:16px;z-index:1100;display:flex;justify-content:center;pointer-events:none}
.ds-hinweis[hidden]{display:none}
.ds-hinweis-in{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:880px;width:100%;background:var(--card);color:var(--text);border-radius:var(--r);padding:16px 18px;box-shadow:0 14px 40px rgba(0,0,0,.28);border-left:var(--akzent-rand) solid var(--marke-rot)}
.ds-hinweis p{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5} .ds-hinweis p b{display:block;font-size:15px;margin-bottom:2px} .ds-hinweis p a{font-weight:700;text-decoration:underline}
.ds-hinweis-knoepfe{display:flex;flex-wrap:wrap;gap:8px} .ds-hinweis-knoepfe .btn{white-space:nowrap}
@media (max-width:520px){ .ds-hinweis{left:10px;right:10px;bottom:10px} .ds-hinweis-knoepfe{width:100%} .ds-hinweis-knoepfe .btn{flex:1;justify-content:center} }
/* ===== Lumibricks-Schnellansicht (Popup auf /lumibricks.php, 18.10.2026) ===== */
.lp{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:28px 72px;background:rgba(14,14,40,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overscroll-behavior:contain;animation:lp-ein .18s ease-out}
.lp[hidden]{display:none}
@keyframes lp-ein{from{opacity:0}to{opacity:1}}
@keyframes lp-hoch{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.lp-karte{position:relative;width:min(1160px,100%);max-height:calc(100dvh - 56px);display:flex;flex-direction:column;background:var(--card);color:var(--text);border-radius:var(--r-gross);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:lp-hoch .24s cubic-bezier(.2,.8,.2,1)}
.lp-karte>.noppen{left:28px;top:-9px} .lp-karte>.noppen>span{background:var(--card)}
.lp-inhalt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:0;flex:1;border-radius:var(--r-gross);overflow:hidden}
.lp-inhalt.laedt{min-height:min(620px,80dvh)}
.lp-inhalt.laedt::after{content:"";grid-column:1/-1;align-self:center;justify-self:center;width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--marke-rot);animation:lp-dreh .8s linear infinite}
@keyframes lp-dreh{to{transform:rotate(360deg)}}
.lp-buehne{display:flex;flex-direction:column;background:#07070C;min-height:0}
.lp-gross{position:relative;flex:1;min-height:340px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#23243A 0%,#07070C 72%)}
.lp-gross img{grid-area:1/1;width:100%;height:100%;max-height:min(66dvh,640px);object-fit:contain;animation:lp-bild .25s ease-out}
@keyframes lp-bild{from{opacity:.2;transform:scale(1.015)}to{opacity:1;transform:none}}
.lp-gross .lk-marke{font-size:12px;left:14px;top:14px}
.lp-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:32px;line-height:1;padding:0 0 4px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,transform .15s}
.lp-pfeil:hover{background:rgba(255,255,255,.28);transform:translateY(-50%) scale(1.06)}
.lp-zur{left:14px} .lp-vor{right:14px}
.lp-zaehler{position:absolute;right:14px;bottom:12px;font-family:var(--titel-schrift);font-size:15px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:10px}
.lp-daumen{display:flex;gap:8px;padding:10px 12px 12px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lp-daumen button{flex:none;width:64px;height:64px;padding:0;border:0;border-radius:8px;overflow:hidden;background:#000;cursor:pointer;opacity:.55;outline:2px solid transparent;outline-offset:2px;transition:opacity .15s,outline-color .15s}
.lp-daumen button:hover{opacity:.9}
.lp-daumen button[aria-current]{opacity:1;outline-color:var(--marke-rot)}
.lp-daumen img{width:100%;height:100%;object-fit:cover;display:block}
.lp-info{padding:30px 30px 24px;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.lp-info .held-zeile{padding-right:44px}
.lp-titel{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:.01em;padding-right:36px}
.lp-fakten{margin:24px 0 18px}
.lp-fakten .fakt b{font-size:24px}
.lp-text{margin:0 0 16px;color:var(--muted-stark);font-size:15.5px;line-height:1.55}
.lp-preis{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:var(--r);background:var(--gelb-bg)}
.lp-preis span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lp-preis b{font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1}
.lp-preis s{color:var(--muted);font-weight:600}
.lp-stimme{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.lp-stimme .btn{font-size:15px;padding:12px 18px 14px}
.lp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.lp-zu{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:var(--card);color:var(--text);font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .15s}
.lp-zu:hover{transform:rotate(90deg)}
.lp-set{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:84px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:40px;line-height:1;cursor:pointer;transition:background .15s}
.lp-set:hover{background:rgba(255,255,255,.26)}
.lp-set-zur{left:12px} .lp-set-vor{right:12px}
.lp-set small{position:absolute;top:calc(100% + 8px);width:120px;font-size:11px;font-weight:700;line-height:1.25;opacity:.85;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lp-set-zur small{left:0;text-align:left} .lp-set-vor small{right:0;text-align:right}
.lp :focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.lk-bild[data-lumi]{cursor:zoom-in}
.lk-bild[data-lumi] img{transition:transform .3s}
.lk-bild[data-lumi]:hover img{transform:scale(1.04)}
@media (max-width:900px){
  .lp{padding:0;align-items:stretch}
  .lp-karte{max-height:none;height:100dvh;border-radius:0}
  .lp-karte>.noppen{display:none}
  .lp-inhalt{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;overflow-y:auto;border-radius:0}
  .lp-gross{min-height:0;height:min(52dvh,460px)}
  .lp-gross img{max-height:none}
  .lp-info{overflow:visible;padding:20px 16px 90px}
  .lp-titel{padding-right:0}
  .lp::after{content:"";position:fixed;left:0;right:0;bottom:0;height:84px;background:linear-gradient(to bottom,transparent,var(--card) 45%);pointer-events:none;z-index:1}
  .lp-set{top:auto;bottom:14px;transform:none;display:inline-flex;align-items:center;gap:6px;width:auto;max-width:calc(50% - 18px);height:44px;padding:0 16px 2px;font-size:22px;background:var(--blau-flaeche);border-radius:22px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .lp-set small{position:static;width:auto;display:block;font-size:14px;line-height:1;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lp-set-zur{left:12px} .lp-set-vor{right:12px}
}
@media (prefers-reduced-motion:reduce){ .lp,.lp-karte,.lp-gross img{animation:none} .lk-bild[data-lumi] img{transition:none} }

.mega-fuss [data-app-installieren][hidden]{display:none}

/* Minifiguren-Liste (24.10.2026) + anklickbare Kacheln */
a.kachel-link{position:relative;display:block;color:inherit;text-decoration:none;transition:transform .12s}
a.kachel-link:active{transform:translateY(2px)}
a.kachel-link:focus-visible{outline:3px solid var(--fokus,#F7D117);outline-offset:3px}
.kachel-pfeil{position:absolute;right:10px;bottom:6px;font-style:normal;font-size:24px;line-height:1;opacity:.85}
.mf-alle{margin:16px 0 0}
.mfl-hinweis{margin:14px 0 0;padding:10px 14px;border-radius:8px;background:var(--card);box-shadow:inset 4px 0 0 var(--stein-gruen),var(--schatten);font-size:14px;line-height:1.5}
.mfl-werkzeug{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.mfl-suche{flex:1;min-width:0;min-height:46px;padding:0 14px;border:2px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit}
.mfl-suche:focus{outline:3px solid var(--fokus,#F7D117);outline-offset:1px}
.mfl-zaehler{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.mfl-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mfl-karte{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;border-radius:10px;background:var(--card);box-shadow:var(--schatten);min-width:0}
.mfl-karte[hidden]{display:none}
.mfl-bild{position:relative;align-self:start;width:96px;height:96px;border-radius:8px;background:#fff;overflow:hidden}
.mfl-bild img{display:block;width:100%;height:100%;object-fit:contain}
.mfl-bild .leer{display:grid;place-items:center;height:100%;font-weight:800;color:#bbb}
.mfl-bild .mf-anzahl{position:absolute;right:4px;bottom:4px}
.mfl-info{min-width:0}
.mfl-info h2{margin:0 0 2px;font-family:var(--titel-schrift);font-weight:400;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.mfl-beschr{margin:0 0 8px;font-size:14px;line-height:1.45;color:var(--text)}
.mfl-fakten{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px}
.mfl-fakten div{display:flex;gap:6px;align-items:baseline}
.mfl-fakten dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mfl-fakten dd{margin:0;font-weight:700;font-size:14px}
.mfl-sets{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.mfl-sets small{color:var(--muted)}
.mfl-admin{margin-top:12px;padding-top:10px;border-top:2px dashed var(--line)}
.mfl-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mfl-felder label{display:grid;gap:3px;min-width:0;font-size:12px;font-weight:800;color:var(--muted)}
.mfl-felder input{width:100%;min-height:44px;padding:0 10px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:16px;box-sizing:border-box}
.mfl-felder .mfl-notiz{grid-column:1/-1}
.mfl-diff{margin:8px 0 0;font-size:14px}
.mfl-diff.plus b{color:var(--stein-gruen)} .mfl-diff.minus b{color:var(--marke-rot)}
.mfl-tendenz{margin:8px 0 0;display:grid;gap:4px;font-size:13px;line-height:1.45}
.mfl-stufe{display:inline-block;justify-self:start;padding:3px 9px 4px;border-radius:10px;font-weight:700;color:#fff;background:var(--stein-grau);box-shadow:none}
.mfl-stufe.s-gruen{background:var(--stein-gruen)} .mfl-stufe.s-gelb{background:var(--stein-gelb);color:#1B1B1B} .mfl-stufe.s-grau{background:var(--stein-grau)}
.mfl-tendenz small{color:var(--muted)}
.mfl-speichern{position:sticky;bottom:0;z-index:5;margin:16px -4px 0;padding:12px 4px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 40%)}
.mfl-speichern .btn{width:100%;min-height:50px;justify-content:center}
@media (min-width:760px){ .mfl-liste{grid-template-columns:repeat(2,minmax(0,1fr))} .mfl-karte{grid-template-columns:120px minmax(0,1fr)} .mfl-bild{width:120px;height:120px} }
@media (min-width:1100px){ .mfl-speichern .btn{width:auto;min-width:260px} }

/* ===== Streaming-Setup (29.10.2026) – setup.php ===== */
.su-k-kamera{--su:var(--stein-rot)} .su-k-audio{--su:var(--stein-blau)} .su-k-licht{--su:var(--stein-gelb);--su-text:#1B1B1B} .su-k-pc{--su:var(--stein-lila)}
.su-k-steuerung{--su:var(--stein-orange)} .su-k-bauplatz{--su:var(--stein-gruen)} .su-k-zubehoer{--su:var(--stein-grau)}
.su-gesamt{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px;margin:0 0 26px}
.su-gesamt.einzeln{grid-template-columns:1fr;grid-auto-rows:auto}
.su-g{position:relative;display:block;overflow:hidden;border-radius:var(--r);box-shadow:var(--schatten);background:var(--grau-bg)}
.su-g img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.su-g:hover img{transform:scale(1.03)}
.su-g.gross{grid-column:span 2;grid-row:span 2}
.su-gesamt.einzeln .su-g img{height:auto;max-height:70vh}
.su-mehr{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font-family:var(--titel-schrift);font-size:30px}
.su-sprung{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.su-sprung a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px 10px;border-radius:10px;background:var(--su);color:var(--su-text,#fff);font-weight:800;font-size:14px;text-decoration:none;box-shadow:none}
.su-sprung a span{opacity:.8;font-weight:700}
.su-sprung a:hover{filter:brightness(1.08)}
.su-bereich{margin:0 0 30px;scroll-margin-top:calc(var(--kl-h,70px) + 10px)}
.su-bereich h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1.1}
.su-sym{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--su);color:var(--su-text,#fff);box-shadow:none}
.su-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.su-karte{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden;border-top:var(--akzent-rand) solid var(--su);scroll-margin-top:calc(var(--kl-h,70px) + 10px)}
.su-bild{position:relative;aspect-ratio:4/3;background:var(--grau-bg)}
.su-bild a{display:block;height:100%}
.su-bild img{display:block;width:100%;height:100%;object-fit:cover}
.su-platzhalter{display:grid;place-items:center;height:100%;color:var(--su);opacity:.55}
.su-k-licht .su-platzhalter{color:#B8961B}
.su-anzahl{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:700;pointer-events:none}
.su-inhalt{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.su-hersteller{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.su-inhalt h3{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:21px;line-height:1.15}
.su-inhalt p{margin:0;font-size:15px;line-height:1.5;color:var(--muted-stark);flex:1}
.su-inhalt .amazon{align-self:flex-start;margin-top:6px}
.su-leer{text-align:center;padding:34px 20px}
.su-leer p{margin:0;font-size:17px;color:var(--muted-stark)}
@media (max-width:640px){
  .su-gesamt{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:8px}
  .su-g.gross{grid-column:1/-1;grid-row:span 2}
  .su-sprung{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
  .su-sprung a{flex:none}
  .su-raster{grid-template-columns:1fr 1fr;gap:10px}
  .su-inhalt{padding:10px 11px 12px}
  .su-inhalt h3{font-size:17px}
  .su-inhalt p{font-size:13.5px}
  .su-inhalt .btn.amazon .az-lang{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .su-inhalt .btn.amazon .az-kurz{display:inline}
  .su-bereich h2{font-size:22px}
  .su-sym{width:36px;height:36px}
}
@media (max-width:380px){ .su-raster{grid-template-columns:1fr} }
/* Produktbilder (freigestellt auf Weiß): ganz zeigen statt beschneiden, mit Schild */
.su-bild.produkt{background:#fff;overflow:hidden}
.su-bild.produkt>a{position:absolute;inset:0}
.su-bild.produkt img{object-fit:contain;padding:14px}
.su-produkt-schild{position:absolute;left:8px;top:8px;padding:2px 8px 3px;border-radius:10px;background:rgba(27,27,27,.72);color:#fff;font-size:11px;font-weight:700;pointer-events:none}

/* ===== Streaming-Setup v2 (29.10.2026): Kopf mit Zahlen, Bereichs-Steine, klickbare Karten mit Highlights, Detailansicht (Seite + Fenster) ===== */
.su-held{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin:6px 0 22px;padding:26px 28px 24px;border-radius:var(--r-gross);background:var(--card);box-shadow:var(--schatten);overflow:hidden}
.su-held::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--stein-rot) 0 20%,var(--stein-blau) 20% 40%,var(--stein-gelb) 40% 60%,var(--stein-lila) 60% 80%,var(--stein-orange) 80%)}
.su-held-text{flex:1 1 420px;min-width:0}
.su-held-ober{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rot-text)}
.su-held h1{margin:0 0 8px;font-family:var(--titel-schrift);font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.02}
.su-held-text p:last-child{margin:0;max-width:60ch;font-size:16px;line-height:1.55;color:var(--muted-stark)}
.su-zahlen{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.su-zahlen li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:12px 12px 14px;border-radius:10px;background:var(--su);color:var(--su-text,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(0,0,0,.14)}
.su-zahlen li::before,.su-zahlen li::after{content:"";position:absolute;top:-6px;width:18px;height:7px;border-radius:5px 5px 1px 1px;background:var(--su);box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.su-zahlen li::before{left:18px} .su-zahlen li::after{right:18px}
.su-zahlen b{font-family:var(--titel-schrift);font-weight:400;font-size:34px;line-height:1}
.su-zahlen span{margin-top:3px;font-size:12px;font-weight:800;opacity:.92;white-space:nowrap}

.su-sprung{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 10px;margin:0 0 28px}
.su-sprung a{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px 13px;border-radius:8px;font-size:14px}
.su-sprung a b{flex:1;min-width:0;font-weight:800;line-height:1.15;padding-right:22px}
.su-sprung-sym{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18)}
.su-k-licht .su-sprung-sym{background:rgba(0,0,0,.08)}
.su-sprung a .su-sprung-zahl{position:absolute;top:-8px;right:-6px;min-width:26px;padding:3px 7px 4px;border-radius:999px;background:var(--card);color:var(--text);text-align:center;font-weight:800;font-size:13px;opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.su-sprung a{transition:transform .15s,filter .15s} .su-sprung a:hover{transform:translateY(-2px)}

.su-bereich h2 .su-bereich-zahl{margin-left:2px;padding:2px 9px 3px;border-radius:999px;background:var(--grau-bg);font:800 13px/1.3 Inter,system-ui,sans-serif;color:var(--muted)}
.su-karte{position:relative;transition:transform .18s,box-shadow .18s}
.su-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.su-karte-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;border-radius:var(--r) var(--r) 0 0}
.su-karte-link:focus-visible{outline:3px solid var(--fokus);outline-offset:-3px}
.su-karte .su-bild img{transition:transform .3s}
.su-karte:hover .su-bild img{transform:scale(1.05)}
.su-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.su-chips li{padding:4px 9px 6px;border-radius:10px;background:var(--bg);font-size:12.5px;font-weight:800;line-height:1.1;box-shadow:none}
.su-chips li:first-child{background:var(--su);color:var(--su-text,#fff)}
.su-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px 14px}
.su-fuss .amazon{margin:0;flex:none}
.su-fuss .btn.amazon .az-lang{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.su-fuss .btn.amazon .az-kurz{display:inline}
.su-details{font-size:13px;font-weight:800;color:var(--link);text-decoration:none;white-space:nowrap}
.su-details span{display:inline-block;transition:transform .15s} .su-karte:hover .su-details span{transform:translateX(3px)}
.su-inhalt p{flex:0 1 auto}

/* Detail (Seite + Fenster) */
.sd{--su-dunkel:color-mix(in srgb,var(--su) 82%,#000);background:var(--card);border-radius:var(--r-gross);box-shadow:var(--schatten);overflow:hidden}
.sd-band{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 10px 8px 18px;background:var(--su);color:var(--su-text,#fff);box-shadow:none}
.sd-bereich{display:inline-flex;align-items:center;gap:8px;color:inherit;font-weight:800;font-size:14px;text-decoration:none}
.sd-bereich:hover{text-decoration:underline}
.sd-zu{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:rgba(0,0,0,.2);color:inherit;cursor:pointer}
.sd-zu:hover{background:rgba(0,0,0,.32)} .sd-zu:focus-visible{outline:3px solid #fff;outline-offset:1px}
.sd-kopf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;padding:22px 24px 8px}
.sd-haupt{position:relative;margin:0;aspect-ratio:5/4;border-radius:var(--r);background:var(--grau-bg);overflow:hidden;display:grid;place-items:center}
.sd-haupt img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sd-haupt.produkt{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sd-haupt.produkt img{object-fit:contain;padding:22px}
.sd-haupt.ohne .su-platzhalter{height:auto}
.sd-daumen{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:thin}
.sd-daumen button{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:8px;background:var(--grau-bg);overflow:hidden;cursor:pointer}
.sd-daumen button.produkt{background:#fff} .sd-daumen button.an{border-color:var(--su)}
.sd-daumen img{width:100%;height:100%;object-fit:cover} .sd-daumen button.produkt img{object-fit:contain;padding:4px}
.sd-info{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:4px}
.sd-titel{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:clamp(28px,3.6vw,40px);line-height:1.05;overflow-wrap:anywhere}
.sd-kurz{margin:0;font-size:17px;line-height:1.55;color:var(--muted-stark)}
.sd-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:6px 0 4px;padding:0;list-style:none}
.sd-hl li{--c:var(--stein-rot);position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 13px 14px;border-radius:10px;background:var(--c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sd-hl li.f1{--c:var(--stein-blau)} .sd-hl li.f2{--c:var(--stein-gelb);color:#1B1B1B} .sd-hl li.f3{--c:var(--stein-gruen)}
.sd-hl b{font-size:17px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.sd-hl span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.sd-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sd-mehr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px 30px;padding:14px 24px 22px}
.sd-mehr h2,.sd-mehr h3{margin:12px 0 10px;font-family:var(--titel-schrift);font-weight:400;font-size:22px}
.sd-text p{margin:0 0 10px;font-size:16px;line-height:1.65}
.sd-daten .db-liste{grid-template-columns:minmax(0,1fr)}
.sd-daten .db-zeile{grid-template-columns:18px minmax(96px,150px) minmax(0,1fr)}
.sd-daten .hinweis{margin:10px 0 0;font-size:12px}
.sd-mehr>:only-child{grid-column:1/-1}
.sd-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 24px 22px}
.sd-nb{display:flex;flex-direction:column;gap:2px;padding:11px 14px 13px;border-radius:8px;background:var(--bg);color:inherit;text-decoration:none;box-shadow:none;min-width:0}
.sd-nb.nach{text-align:right;grid-column:2}
.sd-nb small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sd-nb b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-nb:hover{background:var(--grau-bg)}
.sd-krumen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px;font-size:13px;font-weight:700;color:var(--muted)}
.sd-krumen a{color:var(--link);text-decoration:none} .sd-krumen a:hover{text-decoration:underline}
.sd-alle{margin:18px 0 10px}

/* Fenster */
.sd-fenster{width:min(1060px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;border-radius:var(--r-gross);background:transparent;color:var(--text);overflow:auto;overscroll-behavior:contain}
.sd-fenster::backdrop{background:rgba(14,15,24,.62);backdrop-filter:blur(4px)}
.sd-fenster[open]{animation:sd-rein .22s ease-out}
@keyframes sd-rein{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.sd-fenster .sd{box-shadow:none;overflow:visible}
.sd-fenster .sd-band{border-radius:var(--r-gross) var(--r-gross) 0 0}
.sd-fenster .sd-blaettern{border-radius:0 0 var(--r-gross) var(--r-gross)}
.sd-fenster .sd-band{position:sticky;top:0;z-index:2}
html.sd-offen{overflow:hidden}
.sd-laden{display:grid;place-items:center;min-height:320px;background:var(--card);border-radius:var(--r-gross)}
.sd-laden span{width:44px;height:44px;border-radius:50%;border:5px solid var(--grau-bg);border-top-color:var(--stein-rot);animation:sd-dreh .8s linear infinite}
@keyframes sd-dreh{to{transform:rotate(360deg)}}
.sd-fehler{margin:0;padding:40px 24px;background:var(--card);border-radius:var(--r-gross);text-align:center;font-weight:700}
@media (prefers-reduced-motion:reduce){ .su-karte,.su-karte .su-bild img,.sd-fenster[open],.su-sprung a{transition:none;animation:none} .su-karte:hover{transform:none} }

@media (max-width:860px){
  .sd-kopf{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 16px 4px}
  .sd-haupt{aspect-ratio:4/3}
  .sd-mehr{grid-template-columns:minmax(0,1fr);gap:0;padding:6px 16px 16px}
  .sd-blaettern{padding:0 16px 16px}
}
@media (max-width:640px){
  .su-held{padding:20px 16px 18px;margin-top:0}
  .su-zahlen{width:100%} .su-zahlen li{flex:1;min-width:0} .su-zahlen b{font-size:28px}
  .su-sprung{display:flex;gap:8px;padding-top:10px}
  .su-sprung a b{white-space:nowrap}
  .su-sprung a{flex:none;padding:8px 10px 10px} .su-sprung-sym{width:28px;height:28px}
  .su-fuss{padding:0 11px 11px;flex-wrap:wrap}
  .su-chips li{font-size:11.5px;padding:3px 7px 5px}
  .su-chips li:nth-child(2){display:none}
  .su-details{font-size:12px}
  .sd-fenster{width:100vw;max-height:100vh;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .sd-fenster .sd{border-radius:0;min-height:100%} .sd-fenster .sd-band{border-radius:0}
  .sd-titel{font-size:28px}
  .sd-hl b{font-size:15px}
  .sd-daten .db-zeile{grid-template-columns:16px 104px minmax(0,1fr)}
  .sd-nb b{font-size:14px}
}

/* Detail: Pfeile + Zähler auf dem großen Bild (29.10.2026) */
.sd-pfeil{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:42px;height:42px;margin-top:-21px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(27,27,27,.62);color:#fff;font:700 28px/1 Inter,system-ui,sans-serif;cursor:pointer;opacity:.85;transition:opacity .15s,background-color .15s}
.sd-pfeil.vor{left:10px} .sd-pfeil.nach{right:10px}
.sd-pfeil:hover{opacity:1;background:rgba(27,27,27,.85)} .sd-pfeil:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.sd-zaehler{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(27,27,27,.65);color:#fff;font-size:12px;font-weight:800;pointer-events:none}
.sd-haupt{touch-action:pan-y}

/* ===== Setup: Signalweg „So hängt alles zusammen“ (29.10.2026) – Streamer-Look: immer dunkel, Neon, laufende Datenströme je Kabelart ===== */
.su-held-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:800;color:var(--link);text-decoration:none}
.su-held-link:hover{text-decoration:underline}
.sw{--sw-bg:#0B0C16;--sw-text:#EDEBFF;--sw-matt:#9C9BB8;--sw-karte:rgba(255,255,255,.045);--sw-rand:rgba(255,255,255,.09);
  --k-hdmi:#22D3EE;--k-usb:#A78BFA;--k-xlr:#F472B6;--k-wlan:#4ADE80;--k-dmx:#FBBF24;--k-aus:#9146FF;--k-daten:#60A5FA;
  position:relative;margin:10px 0 30px;padding:24px 26px 28px;border-radius:var(--r-gross);color:var(--sw-text);overflow:hidden;isolation:isolate;
  background:radial-gradient(900px 380px at 12% 0%,rgba(145,70,255,.28),transparent 60%),radial-gradient(700px 360px at 100% 100%,rgba(34,211,238,.18),transparent 60%),var(--sw-bg);
  box-shadow:0 18px 40px rgba(8,6,30,.45),inset 0 0 0 1px rgba(255,255,255,.06);scroll-margin-top:calc(var(--kl-h,70px) + 10px)}
.sw::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.sw-kopf h2{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:var(--titel-schrift);font-weight:400;font-size:28px;line-height:1.1;color:#fff;text-shadow:0 0 18px rgba(167,139,250,.55)}
.sw-kopf .su-sym{background:linear-gradient(135deg,#9146FF,#22D3EE);box-shadow:0 0 18px rgba(145,70,255,.6);color:#fff}
.sw-kopf p{margin:0 0 12px;color:var(--sw-matt);font-size:15px}
.sw-legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 20px;padding:0;list-style:none}
.sw-legende li{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sw-matt)}
.sw-legende li::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--k);box-shadow:0 0 8px var(--k)}
.k-hdmi{--k:var(--k-hdmi)} .k-usb{--k:var(--k-usb)} .k-xlr{--k:var(--k-xlr)} .k-wlan{--k:var(--k-wlan)} .k-dmx{--k:var(--k-dmx)} .k-aus{--k:var(--k-aus)} .k-daten{--k:var(--k-daten)}
.sw-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr) minmax(0,1.25fr);align-items:stretch}
.sw-spalte h3{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sw-matt)}
.sw-rein h3{padding-right:28px} .sw-raus h3{padding-left:28px}
.sw-spalte ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.sw-spur{display:flex;align-items:center;min-height:52px}
.sw-rein .sw-spur{justify-content:flex-end}
/* Geräte: dunkle Glas-Karten mit Leuchtkante in Bereichsfarbe */
.sw-knoten{--su:var(--stein-grau);flex:0 1 auto;display:flex;align-items:center;gap:9px;min-width:0;padding:6px 11px 6px 6px;border-radius:10px;color:var(--sw-text);text-decoration:none;
  background:var(--sw-karte);border:1px solid var(--sw-rand);box-shadow:inset 3px 0 0 var(--su),0 0 0 rgba(0,0,0,0);backdrop-filter:blur(2px);transition:transform .15s,box-shadow .2s,border-color .2s}
.sw-knoten.su-k-licht{--su:#FBBF24} .sw-knoten.su-k-steuerung{--su:#FB923C} .sw-knoten.su-k-zubehoer{--su:#94A3B8}
.sw-knoten.su-k-kamera{--su:#F43F5E} .sw-knoten.su-k-audio{--su:#38BDF8} .sw-knoten.su-k-pc{--su:#A78BFA}
a.sw-knoten:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--su) 70%,transparent);box-shadow:inset 3px 0 0 var(--su),0 0 18px color-mix(in srgb,var(--su) 45%,transparent)}
a.sw-knoten:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sw-bild{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden;color:var(--su)}
.sw-bild.produkt{background:#fff}
.sw-bild img{width:100%;height:100%;object-fit:cover} .sw-bild.produkt img{object-fit:contain;padding:3px}
.sw-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.sw-text b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.sw-text small{font-size:11.5px;font-weight:700;color:var(--sw-matt)}
.sw-twitch{--su:#9146FF;border-color:rgba(145,70,255,.6);box-shadow:inset 3px 0 0 #9146FF,0 0 22px rgba(145,70,255,.45)}
.sw-twitch .sw-bild{background:#9146FF;color:#fff;box-shadow:0 0 14px rgba(145,70,255,.8)}
/* Kabel: leuchtende Leitung mit laufenden Datenpaketen */
.sw-kabel{position:relative;flex:1 1 18px;min-width:22px;max-width:70px;height:3px;margin:0 7px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.95) 45%,transparent 60%) 0 0/36px 100% repeat-x,color-mix(in srgb,var(--k) 75%,transparent);
  box-shadow:0 0 6px var(--k),0 0 14px color-mix(in srgb,var(--k) 55%,transparent);animation:sw-fluss 1.1s linear infinite}
.sw-kabel::after{content:"";position:absolute;right:-3px;top:-4px;border:5.5px solid transparent;border-left:7px solid var(--k);border-right:0;filter:drop-shadow(0 0 4px var(--k))}
.sw-kabel span{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);padding:1px 6px 2px;border-radius:10px;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--k);white-space:nowrap;background:rgba(11,12,22,.85);box-shadow:0 0 0 1px color-mix(in srgb,var(--k) 40%,transparent)}
.sw-kabel span:empty{display:none}
.sw-kabel.k-wlan{background:linear-gradient(90deg,var(--k) 0 7px,transparent 7px 13px) 0 0/13px 100% repeat-x;animation-duration:.9s}
.sw-kabel.sw-ende,.sw-kabel.sw-anfang{flex:1 0 30px;max-width:none}
.sw-kabel.sw-ende{margin-right:0} .sw-kabel.sw-anfang{margin:0 7px 0 0}
@keyframes sw-fluss{to{background-position:36px 0,0 0}}
.sw-kabel.k-wlan{animation-name:sw-funk} @keyframes sw-funk{to{background-position:13px 0}}
.sw-plus{flex:none;width:8px}
/* PC in der Mitte: Neon-Rahmen, OBS, LIVE */
.sw-pc{display:flex}
.sw-pc-kasten{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 14px 16px;border-radius:14px;color:#fff;
  background:linear-gradient(180deg,#1A1440,#100E26) padding-box,linear-gradient(160deg,#9146FF,#22D3EE 55%,#F472B6) border-box;border:2px solid transparent;
  box-shadow:0 0 28px rgba(145,70,255,.45),0 0 60px rgba(34,211,238,.18);animation:sw-glimmen 4s ease-in-out infinite}
@keyframes sw-glimmen{50%{box-shadow:0 0 36px rgba(145,70,255,.6),0 0 80px rgba(34,211,238,.28)}}
.sw-pc-kasten h3{margin:0;color:#fff;font-family:var(--titel-schrift);font-weight:400;font-size:24px;letter-spacing:0;text-transform:none;text-shadow:0 0 14px rgba(167,139,250,.7)}
.sw-live{position:absolute;top:16px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 4px;border-radius:10px;background:#E91916;color:#fff;font-size:11px;font-weight:900;letter-spacing:.1em;box-shadow:0 0 14px rgba(233,25,22,.7)}
.sw-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:sw-puls 1.4s ease-in-out infinite}
@keyframes sw-puls{50%{opacity:.25}}
.sw-obs{display:flex;flex-direction:column;padding:10px 12px 12px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.sw-obs b{font-size:16px} .sw-obs small{font-size:12px;color:var(--sw-matt);font-weight:700}
.sw-pc-teile{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.sw-pc-teile .sw-knoten{max-width:none}
@media (prefers-reduced-motion:reduce){ .sw-kabel,.sw-pc-kasten,.sw-live::before{animation:none} }

@media (max-width:1000px){
  .sw-raster{grid-template-columns:minmax(0,1fr);gap:0}
  .sw-rein h3,.sw-raus h3{padding:0}
  .sw-rein .sw-spur{justify-content:flex-start}
  .sw-kabel.sw-ende,.sw-kabel.sw-anfang{display:none}
  .sw-pc{margin:34px 0 38px;position:relative}
  .sw-pc::before,.sw-pc::after{content:"";position:absolute;left:50%;width:3px;height:26px;margin-left:-1.5px;border-radius:2px;
    background:linear-gradient(180deg,transparent 0 30%,#fff 45%,transparent 60%) 0 0/100% 30px repeat-y,#A78BFA;box-shadow:0 0 10px #A78BFA;animation:sw-runter 1.1s linear infinite}
  .sw-pc::before{top:-31px} .sw-pc::after{bottom:-33px;background-color:#9146FF;box-shadow:0 0 10px #9146FF}
  @keyframes sw-runter{to{background-position:0 30px,0 0}}
  .sw-pc-teile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sw{padding:20px 14px 22px}
  .sw-kopf h2{font-size:23px}
  .sw-spur{min-height:0}
  .sw-knoten{flex:1 1 0;max-width:max-content;padding:5px 8px 5px 5px;gap:7px}
  .sw-bild{width:32px;height:32px}
  .sw-kabel{flex:0 0 30px;margin:0 5px}
  .sw-kabel span{font-size:8.5px;padding:1px 4px}
  .sw-text b{font-size:12.5px;white-space:normal;overflow-wrap:anywhere}
  .sw-text small{font-size:11px}
  .sw-pc-teile{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .sw-pc::before,.sw-pc::after{animation:none} }
/* Signalweg: Pegel im OBS-Feld + Puls um Twitch */
.sw-pegel{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:10px}
.sw-pegel i{flex:1;height:30%;border-radius:2px 2px 0 0;background:linear-gradient(0deg,#22D3EE,#A78BFA 60%,#F472B6);box-shadow:0 0 6px rgba(167,139,250,.6);animation:sw-pegel 1.2s ease-in-out infinite alternate}
.sw-pegel i:nth-child(3n){animation-duration:.9s} .sw-pegel i:nth-child(3n+1){animation-duration:1.5s;animation-delay:-.4s} .sw-pegel i:nth-child(4n){animation-duration:.7s;animation-delay:-.2s} .sw-pegel i:nth-child(5n){animation-delay:-.8s}
@keyframes sw-pegel{0%{height:18%}50%{height:85%}100%{height:40%}}
.sw-twitch{position:relative}
.sw-twitch::after{content:"";position:absolute;inset:-1px;border-radius:10px;border:2px solid #9146FF;opacity:0;animation:sw-ring 2.2s ease-out infinite;pointer-events:none}
@keyframes sw-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .sw-pegel i,.sw-twitch::after{animation:none} .sw-pegel i{height:55%} }
/* Signalweg: freigestellte Gerätebilder schweben mit Leuchten auf dem dunklen Grund */
.sw-bild.frei{width:46px;height:40px;background:none;overflow:visible;border-radius:0}
.sw-bild.frei img{display:block;width:46px;height:40px;max-width:none;object-fit:contain;padding:0;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--su) 55%,transparent)) drop-shadow(0 2px 3px rgba(0,0,0,.6));transition:transform .2s,filter .2s}
a.sw-knoten:hover .sw-bild.frei img{transform:scale(1.12);filter:drop-shadow(0 0 9px var(--su)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.sw-pc-teile .sw-bild.frei img{filter:drop-shadow(0 0 5px rgba(167,139,250,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
@media (max-width:640px){ .sw-bild.frei,.sw-bild.frei img{width:38px;height:34px} }
/* Signalweg v3: Kurven-Leitungen (SVG, nur breite Bildschirme), Anschlüsse am PC, Hover-Spur, echter Live-Status */
.sw-raster{position:relative}
.sw-leitungen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.sw-spalte{position:relative;z-index:1}
@media (min-width:1001px){
  .sw-kabel.sw-ende,.sw-kabel.sw-anfang{background:none;box-shadow:none;animation:none}
  .sw-kabel.sw-ende::after,.sw-kabel.sw-anfang::after,.sw-kabel.sw-ende span,.sw-kabel.sw-anfang span{display:none}
}
.sw-linie{fill:none;stroke:var(--k);stroke-width:2.6;stroke-linecap:round;opacity:.85;filter:drop-shadow(0 0 4px var(--k));transition:opacity .2s,stroke-width .2s}
.sw-leitung.funk .sw-linie{stroke-dasharray:7 6;animation:sw-strich .9s linear infinite}
@keyframes sw-strich{to{stroke-dashoffset:-13}}
.sw-paket{fill:#fff;filter:drop-shadow(0 0 4px var(--k)) drop-shadow(0 0 8px var(--k))}
.sw-schild rect{fill:rgba(11,12,22,.92);stroke:var(--k);stroke-opacity:.5}
.sw-schild text{fill:var(--k);font:800 9.5px Inter,system-ui,sans-serif;letter-spacing:.08em;text-anchor:middle}
.sw-port{fill:#0B0C16;stroke:var(--k);stroke-width:2.5;filter:drop-shadow(0 0 5px var(--k))}
.sw-spur{transition:opacity .2s}
@media (hover:hover){ .sw.fokus .sw-spur:not(.an){opacity:.32} .sw.fokus .sw-leitung:not(.an){opacity:.12} }
.sw-leitung.an .sw-linie{stroke-width:4;opacity:1}
.sw-leitung{transition:opacity .2s}
.sw:not(.ist-live) .sw-live{background:#3A3B4F;box-shadow:none;color:#C9C8E0}
.sw:not(.ist-live) .sw-live::before{background:#8E8DA8;animation:none}
.sw.ist-live .sw-twitch small{color:#fff}
a.sw-twitch:hover{border-color:#9146FF}
/* Signalweg v4: Twitch-Live-Daten (Titel, Kategorie, Sendezeit, Zuschauer) + Tempo der Datenströme */
.sw-kabel{animation-duration:calc(1.1s * var(--sw-tempo,1))}
.sw-leitung.funk .sw-linie{animation-duration:calc(.9s * var(--sw-tempo,1))}
.sw:not(.ist-live) .sw-paket{opacity:.55}
.sw:not(.ist-live) .sw-linie{opacity:.6}
.sw-liveleiste{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:4px 0 16px;padding:11px 14px;border-radius:12px;color:#fff;text-decoration:none;
  background:linear-gradient(90deg,rgba(233,25,22,.22),rgba(145,70,255,.22));border:1px solid rgba(255,90,90,.45);box-shadow:0 0 24px rgba(233,25,22,.25)}
a.sw-liveleiste:hover{border-color:#FF6B6B;box-shadow:0 0 30px rgba(233,25,22,.4)}
.sw-lb-marke{flex:none;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 5px;border-radius:10px;background:#E91916;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 14px rgba(233,25,22,.7)}
.sw-lb-marke::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:sw-puls 1.4s ease-in-out infinite}
.sw-lb-text{flex:1 1 260px;display:flex;flex-direction:column;gap:3px;min-width:0}
.sw-lb-text b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.sw-lb-text small{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;font-weight:700;color:#D9D6F5}
.sw-zuschauer::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 6px #FF4D4D;vertical-align:1px}
.sw-lb-knopf{flex:none;padding:8px 14px 9px;border-radius:10px;background:#9146FF;font-size:13px;font-weight:800;box-shadow:0 0 16px rgba(145,70,255,.6)}
.sw-sendezeit{margin-top:-6px;font-size:12px;font-weight:800;color:#FF8A8A;letter-spacing:.02em}
@media (max-width:640px){ .sw-lb-knopf{width:100%;text-align:center} }
/* Detail: freigestellte Produktbilder auf einer leuchtenden Bühne in Bereichsfarbe (statt weißem Kasten) */
.sd-haupt.frei{background:radial-gradient(55% 50% at 50% 56%,color-mix(in srgb,var(--su) 18%,transparent),transparent 72%),radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--su) 12%,transparent),transparent 70%),var(--grau-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--su) 25%,transparent)}
.sd-haupt.frei img{object-fit:contain;padding:44px 48px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}
.sd-daumen button.frei{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--su) 28%,transparent),transparent 70%),var(--grau-bg)}
.sd-daumen button.frei img{object-fit:contain;padding:5px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
@media (max-width:640px){ .sd-haupt.frei img{padding:18px} }
/* Übersicht: Kartenbilder freigestellt auf derselben Bühne wie im Detail-Fenster */
.su-bild.frei{background:radial-gradient(58% 55% at 50% 58%,color-mix(in srgb,var(--su) 18%,transparent),transparent 72%),radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--su) 10%,transparent),transparent 70%),var(--grau-bg);overflow:hidden}
.su-bild.frei img{object-fit:contain;padding:22px 26px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.33))}
@media (max-width:640px){ .su-bild.frei img{padding:12px 14px} }
/* Signalweg: ON AIR – Kameras der laufenden OBS-Szene (nur live) */
.sw-knoten.onair{border-color:#FF3B3B;box-shadow:inset 3px 0 0 #FF3B3B,0 0 0 1px rgba(255,59,59,.5),0 0 22px rgba(255,59,59,.55);animation:sw-onair 2s ease-in-out infinite}
.sw-knoten.onair::after{content:"ON AIR";position:absolute;top:-9px;right:-6px;padding:2px 6px 3px;border-radius:10px;background:#E91916;color:#fff;font:900 9px/1.2 Inter,system-ui,sans-serif;letter-spacing:.1em;box-shadow:0 0 10px rgba(233,25,22,.8)}
.sw-knoten{position:relative}
@keyframes sw-onair{50%{box-shadow:inset 3px 0 0 #FF3B3B,0 0 0 1px rgba(255,59,59,.7),0 0 34px rgba(255,59,59,.75)}}
.sw-leitung.onair .sw-linie{stroke-width:4;opacity:1}
@media (prefers-reduced-motion:reduce){ .sw-knoten.onair{animation:none} }
.sw-knoten.onair:not(.su-k-kamera)::after{display:none}
/* ===== Setup: Kamera-Zeit (29.10.2026) – unter der Topologie, gleicher Neon-Look ===== */
.kz{position:relative;margin:-12px 0 30px;padding:22px 26px 24px;border-radius:var(--r-gross);color:#EDEBFF;overflow:hidden;scroll-margin-top:calc(var(--kl-h,70px) + 10px);
  background:radial-gradient(600px 260px at 100% 0%,rgba(244,63,94,.22),transparent 60%),radial-gradient(600px 300px at 0% 100%,rgba(145,70,255,.22),transparent 60%),#0B0C16;box-shadow:0 18px 40px rgba(8,6,30,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.kz-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
.kz-kopf h2{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1.1;color:#fff;text-shadow:0 0 16px rgba(244,63,94,.5)}
.kz-kopf .su-sym{background:linear-gradient(135deg,#F43F5E,#9146FF);color:#fff;box-shadow:0 0 16px rgba(244,63,94,.55)}
.kz-kopf p{margin:0;color:#9C9BB8;font-size:14.5px;max-width:60ch}
.kz-reiter{display:flex;gap:6px;padding:4px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.kz-reiter button{padding:7px 13px 8px;border:0;border-radius:10px;background:none;color:#C9C8E0;font:800 13px Inter,system-ui,sans-serif;cursor:pointer}
.kz-reiter button.an{background:#C8102E;color:#fff;box-shadow:0 0 14px rgba(244,63,94,.55)}
.kz-reiter button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kz-summe{margin:0 0 10px;font-size:13px;color:#9C9BB8} .kz-summe b{color:#fff}
.kz-liste{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.kz-liste a{display:grid;grid-template-columns:52px minmax(120px,190px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px 6px 6px;border-radius:10px;color:inherit;text-decoration:none;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);transition:border-color .2s,box-shadow .2s}
.kz-liste a:hover{border-color:rgba(244,63,94,.6);box-shadow:0 0 18px rgba(244,63,94,.3)}
.kz-liste a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kz-bild{display:grid;place-items:center;width:52px;height:42px;color:#F43F5E}
.kz-bild img{width:52px;height:42px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(244,63,94,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.kz-name{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-balken{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.kz-balken i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#9146FF,#F43F5E);box-shadow:0 0 12px rgba(244,63,94,.6)}
.kz-wert{display:flex;flex-direction:column;align-items:flex-end;min-width:96px;line-height:1.15}
.kz-wert b{font-size:14px;color:#fff;white-space:nowrap} .kz-wert small{font-size:11.5px;font-weight:800;color:#FF8A9B}
.kz-leer{margin:4px 0 0;padding:16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.15);color:#C9C8E0;font-size:14px}
.sd-kamerazeit{margin:2px 0 0;font-size:14px;color:var(--muted-stark)} .sd-kamerazeit b{color:var(--text)} .sd-kamerazeit a{margin-left:6px;font-weight:800;font-size:13px;color:var(--link);text-decoration:none}
@media (max-width:640px){
  .kz{padding:18px 14px 18px}
  .kz-liste a{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"bild name wert" "bild balken balken";gap:4px 10px;padding:6px 10px 8px 6px}
  .kz-bild{grid-area:bild;width:42px;height:38px} .kz-bild img{width:42px;height:38px} .kz-name{grid-area:name} .kz-balken{grid-area:balken;height:9px} .kz-wert{grid-area:wert;min-width:0}
}

/* Funko-Wellen wie die Rückseite der Box: alle Figuren der Welle als Kacheln, vorhandene farbig mit Haken, fehlende als Silhouette (07.11.2026) */
.wellen{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.welle{background:var(--card);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:18px 20px 20px;min-width:0}
.welle-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:16px}
.welle-titel{min-width:0} .welle-titel h3{margin:0;font-family:var(--titel-schrift);font-weight:400;font-size:24px;line-height:1.15}
.welle-titel small{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.35}
.welle-stand{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"zahl rest" "balken balken";align-items:baseline;gap:6px 12px;width:min(300px,100%)}
.welle-zahl{grid-area:zahl;font-family:var(--titel-schrift);font-weight:400;font-size:30px;line-height:1;white-space:nowrap} .welle-zahl span{font:700 14px/1 Inter,sans-serif;color:var(--muted)}
.welle-rest{grid-area:rest;justify-self:end;font-size:13px;font-weight:700;color:var(--muted-stark)}
.welle-balken{grid-area:balken;height:10px;border-radius:99px;background:var(--grau-bg);overflow:hidden}
.welle-balken span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--marke-rot),#FF5A7A)}
.welle.fertig .welle-balken span{background:#1E8E3E} .welle.fertig .welle-rest{color:#1E8E3E}
.welle-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.wk{position:relative;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;color:inherit;text-decoration:none;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .15s,box-shadow .15s}
a.wk:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--marke-hellblau),var(--schatten)}
.wk-bild{position:relative;aspect-ratio:3/4;background:#fff;overflow:hidden} .wk-bild img{width:100%;height:100%;object-fit:cover} .wk-bild img.produkt{object-fit:contain;padding:4px}
.wk-nr{position:absolute;right:5px;top:5px;background:var(--marke-rot);color:#fff;font-family:var(--titel-schrift);font-size:12px;line-height:1;padding:4px 6px;border-radius:10px}
.wk-haken{position:absolute;left:5px;top:5px;width:22px;height:22px;border-radius:50%;background:#1E8E3E;color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.wk-name{margin:6px 7px 8px;font-size:12px;font-weight:700;line-height:1.25;max-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
#wellen{scroll-margin-top:calc(90px + env(safe-area-inset-top,0px))}
.wk{-webkit-tap-highlight-color:transparent;touch-action:manipulation} a.wk:active{transform:scale(.96)}
.ad-gesucht{white-space:nowrap} .ad-gesucht b{font-weight:900}
.wk.hab{box-shadow:0 0 0 2px #1E8E3E}
.wk.fehlt{background:transparent;box-shadow:none;outline:2px dashed var(--line);outline-offset:-2px}
.wk.fehlt .wk-bild{background:transparent} .wk.fehlt .figur-leer{opacity:.55;background:none} .wk.fehlt .wk-nr{background:var(--muted)} .wk.fehlt .wk-name{color:var(--muted-stark);font-weight:600}
.wk-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--marke-hellblau);color:#fff;font-size:24px;font-weight:800;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .15s}
a.wk.fehlt:hover .wk-plus,a.wk.fehlt:focus-visible .wk-plus{opacity:1} @media (hover:none){ .wk-plus{opacity:.9;width:28px;height:28px;font-size:20px} }
a.wk.fehlt:hover{outline-color:var(--marke-hellblau)}
.welle-mehr{margin-top:10px} .welle-mehr>.welle-raster{margin-top:10px}
.welle-mehr summary{cursor:pointer;display:inline-block;font-size:13px;font-weight:800;color:var(--marke-hellblau);list-style:none;padding:6px 0} .welle-mehr summary::-webkit-details-marker{display:none}
.wellen-intro{margin:-6px 0 16px;color:var(--muted);font-size:14px;max-width:720px}
@media (max-width:640px){
  .welle{padding:14px;border-radius:var(--r)} .welle-kopf{margin-bottom:12px} .welle-titel h3{font-size:20px} .welle-stand{width:100%}
  /* Handy: kompaktes Raster mit 4 Kacheln je Reihe, nur nach unten scrollen; Rest hinter einem großen „weitere anzeigen“ */
  .welle-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .wk{border-radius:8px} .wk-nr{font-size:10px;padding:3px 4px;right:3px;top:3px} .wk-haken{width:18px;height:18px;font-size:11px;left:3px;top:3px}
  .wk-name{margin:4px 5px 6px;font-size:10.5px;font-weight:700;line-height:1.2;max-height:2.4em}
  .welle .welle-mehr summary{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border-radius:var(--r-klein);background:var(--grau-bg);margin-top:8px}
}
.welle-mehr summary{min-height:36px}

/* ---------- Pokémon (07.11.2026): Karten im Kartenformat 63:88, Erfassen, Portfolio, Markt – am Handy alles untereinander, nie seitlich scrollen ---------- */
.pkm-rueck{display:block;width:100%;height:100%;min-height:40px;border-radius:inherit;background:radial-gradient(circle at 50% 50%,#fff 0 9%,#1B1B1B 9.5% 13%,transparent 13.5%),linear-gradient(180deg,#E4002B 0 47%,#1B1B1B 47% 53%,#F3F4F8 53%);opacity:.35}
.pkm-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:10px 0 18px}
.pkm-raster.gross{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.pkm-k{display:flex;flex-direction:column;gap:5px;color:inherit;text-decoration:none;min-width:0}
.pkm-k-bild{position:relative;aspect-ratio:63/88;border-radius:4.5%/3.2%;overflow:hidden;background:var(--grau-bg);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pkm-k-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pkm-k-bild>.anzahl{position:absolute;left:6px;top:6px;background:#1B1B1B;color:#fff;font-size:12px;font-weight:800;padding:3px 7px;border-radius:10px}
.pkm-k-text{display:flex;flex-direction:column;min-width:0} .pkm-k-text b{font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pkm-k-text small{font-size:11px;color:var(--muted);font-weight:600}
.pkm-k.fehlt .pkm-k-bild{box-shadow:none;outline:2px dashed var(--line);outline-offset:-2px} .pkm-k.fehlt img{filter:grayscale(1);opacity:.32} .pkm-k.fehlt .pkm-k-text b{color:var(--muted-stark);font-weight:600}
a.pkm-k{transition:transform .15s} a.pkm-k:hover{transform:translateY(-3px)} a.pkm-k:active{transform:scale(.97)} a.pkm-k.fehlt:hover .pkm-k-bild{outline-color:var(--marke-hellblau)}
.pkm-abschnitt .pkm-logo{height:34px;width:auto;margin-left:auto;object-fit:contain}
.pkm-setliste .pkm-raster{margin-top:12px} .pkm-extra-titel{margin:6px 0 0;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-stark)}
.pkm-siegel{position:absolute;right:8px;top:8px;background:#1E8E3E;color:#fff;font-size:11px;font-weight:800;padding:3px 7px;border-radius:10px}
.pkm-boxen .figur-bild .pkm-rueck{opacity:.2}
/* Tendenz */
.pkm-tend{display:inline-block;font-size:12px;font-weight:800;padding:2px 6px;border-radius:10px;white-space:nowrap;background:var(--grau-bg);color:var(--muted-stark)}
.pkm-tend.hoch{background:#E3F4E8;color:#137333} .pkm-tend.runter{background:#FCE8E6;color:#B3261E} .pkm-tend.leer{background:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-tend.hoch{background:rgba(52,168,83,.18);color:#6DD58C} :root:not([data-theme="light"]) .pkm-tend.runter{background:rgba(234,67,53,.18);color:#F28B82} }
:root[data-theme="dark"] .pkm-tend.hoch{background:rgba(52,168,83,.18);color:#6DD58C} :root[data-theme="dark"] .pkm-tend.runter{background:rgba(234,67,53,.18);color:#F28B82}
/* Verwaltung: Erfassen */
.pkm-erfassen h2{margin-top:0}
.pkm-erfassen-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:12px 0}
.pkm-erfassen-knoepfe>label.btn{cursor:pointer} .pkm-tag{margin-left:auto} .pkm-tag label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px} .pkm-tag input{width:auto}
.pkm-suche input{width:100%}
.pkm-suchtreffer{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:10px;max-height:420px;overflow-y:auto;padding:2px}
.pkm-suchtreffer button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:var(--r-klein);padding:6px 10px 6px 6px;cursor:pointer;min-width:0}
.pkm-suchtreffer button:hover{border-color:var(--marke-hellblau)} .pkm-suchtreffer img,.pkm-suchtreffer .pkm-rueck{width:44px;height:61px;flex:0 0 44px;border-radius:3px;object-fit:cover}
.pkm-suchtreffer span{display:flex;flex-direction:column;min-width:0} .pkm-suchtreffer b{font-size:14px} .pkm-suchtreffer small{color:var(--muted);font-size:12px}
.pkm-liste{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pkm-e{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;border-radius:var(--r);background:var(--grau-bg);align-items:start}
.pkm-e-bild{aspect-ratio:63/88;border-radius:10px;overflow:hidden;background:var(--card)} .pkm-e-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pkm-e-mitte{display:flex;flex-direction:column;gap:6px;min-width:0} .pkm-e-mitte>b{font-size:17px;line-height:1.2} .pkm-e-mitte>small{color:var(--muted);font-weight:600}
.pkm-e-schon{color:#137333!important} .pkm-e-wert{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pkm-e-euro{font-family:var(--titel-schrift);font-weight:400;font-size:26px;line-height:1}
.pkm-e-var{margin:2px 0} .pkm-e-unten{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pkm-e-anz{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-klein);background:var(--card);overflow:hidden}
.pkm-e-anz button{width:40px;height:40px;border:0;background:none;color:inherit;font-size:20px;font-weight:800;cursor:pointer} .pkm-e-anz span{min-width:28px;text-align:center;font-weight:800}
.pkm-e-auf{min-height:42px} .pkm-e-ok{color:#137333} .pkm-e.fertig{background:color-mix(in srgb,#1E8E3E 12%,var(--grau-bg))}
.pkm-e.laedt .pkm-e-mitte>b::after{content:" ⏳"} .pkm-e.laedt{opacity:.8} .pkm-e.fehler{background:color-mix(in srgb,#D93025 10%,var(--grau-bg))}
.pkm-e-andere small{color:var(--muted);font-weight:700;font-size:12px} .pkm-e-andere>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pkm-e-andere button{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:3px;cursor:pointer;color:inherit;width:54px}
.pkm-e-andere img{width:46px;height:64px;object-fit:cover;border-radius:3px} .pkm-e-andere span{font-size:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.pkm-alle{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 14px;border-radius:var(--r);background:var(--card);box-shadow:var(--schatten-hoch)}
/* Verwaltung: Portfolio-Liste, Sets, Markt */
.pkm-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .pkm-kopfzeile h2{margin:0}
.pkm-portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:8px;margin-top:12px}
.pkm-zeile{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px 8px 8px;border-radius:var(--r-klein);background:var(--grau-bg);color:inherit;text-decoration:none}
.pkm-zeile:hover{box-shadow:0 0 0 2px var(--marke-hellblau)}
.pkm-z-bild{width:52px;aspect-ratio:63/88;border-radius:3px;overflow:hidden;display:block;background:var(--card)} .pkm-z-bild img{width:100%;height:100%;object-fit:cover;display:block} .pkm-z-bild.box{aspect-ratio:1} .pkm-z-bild.box img{object-fit:contain}
.pkm-z-text{display:flex;flex-direction:column;min-width:0} .pkm-z-text b{font-size:14px;line-height:1.25} .pkm-z-text small{color:var(--muted);font-size:12px;font-weight:600}
.pkm-z-wert{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right} .pkm-z-wert b{font-size:15px;white-space:nowrap} .pkm-z-wert small{color:var(--muted);font-size:11px}
.pkm-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px;margin-top:12px}
.pkm-set{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:var(--r-klein);background:var(--grau-bg);color:inherit;text-decoration:none} .pkm-set:hover{box-shadow:0 0 0 2px var(--marke-hellblau)}
.pkm-set-logo img{width:80px;height:40px;object-fit:contain} .pkm-set-text{display:flex;flex-direction:column;gap:4px;min-width:0} .pkm-set-text small{color:var(--muted);font-weight:600}
.pkm-set-zahlen{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px} .pkm-set-zahlen b{font-family:var(--titel-schrift);font-weight:400;font-size:24px}
.pkm-markt h2{margin-top:0} .pkm-m-ueber{margin:16px 0 8px;font-size:15px}
.pkm-m-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pkm-m-spalte h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-stark)}
.pkm-m{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border-radius:var(--r-klein);color:inherit;text-decoration:none} .pkm-m:hover{background:var(--grau-bg)}
.pkm-m-bild{width:38px;aspect-ratio:63/88;border-radius:3px;overflow:hidden;display:block;background:var(--grau-bg)} .pkm-m-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pkm-m-text{display:flex;flex-direction:column;min-width:0} .pkm-m-text b{font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pkm-m-text small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkm-m-hab{color:#137333;font-weight:800} .pkm-m-wert{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .pkm-m-wert b{font-size:13px;white-space:nowrap}
/* Karte bearbeiten */
.pkm-gross{padding:12px} .pkm-gross img{width:100%;border-radius:4.5%/3.2%;display:block;box-shadow:0 6px 18px rgba(0,0,0,.25)} .pkm-gross .pkm-rueck{aspect-ratio:63/88}
.pkm-preis-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pkm-preis-kopf>b{font-family:var(--titel-schrift);font-weight:400;font-size:36px;line-height:1}
.pkm-preis-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0} .pkm-preis-dl dt{color:var(--muted);font-weight:600} .pkm-preis-dl dd{margin:0;font-weight:700}
.pkm-preis-dl .plus{color:#137333} .pkm-preis-dl .minus{color:#B3261E}
.pkm-verlauf{width:100%;height:70px;display:block;background:var(--grau-bg);border-radius:var(--r-klein);margin:6px 0}
.pkm-haken{display:flex;align-items:center;gap:8px;font-weight:700;margin:12px 0} .pkm-haken input{width:20px;height:20px}
@media (max-width:900px){ .pkm-m-spalten{grid-template-columns:1fr} }
@media (max-width:640px){
  .pkm-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .pkm-raster.gross{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pkm-abschnitt .pkm-logo{display:none}
  .pkm-e{grid-template-columns:76px minmax(0,1fr);gap:10px;padding:10px} .pkm-e-euro{font-size:22px} .pkm-e-auf{flex:1}
  .pkm-tag{margin-left:0;width:100%} .pkm-erfassen-knoepfe>label.btn{flex:1;justify-content:center}
  .pkm-suchtreffer{grid-template-columns:1fr}
}

.pkm-kurvenbox h2{margin:0} .pkm-kurve-kopf{margin:12px 0 6px;font-weight:800;font-size:18px} .pkm-kurve-kopf small{color:var(--muted);font-weight:600;font-size:12px} .pkm-kurve-kopf .plus{color:#137333} .pkm-kurve-kopf .minus{color:#B3261E}
.pkm-kurve{width:100%;height:170px;display:block} .pkm-kurve-achse{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:600;margin-top:4px} .pkm-kurve-leer{margin:12px 0 0}
@media (max-width:640px){ .pkm-kurve{height:130px} }

.pkm-meine{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px 14px} .pkm-schalter{margin:0} .pkm-schalter .pkm-haken{margin:0;font-size:13px}

/* Pokémon: öffentlicher Karten-Check und Bewertungsseite (07.11.2026) */
.pkm-check h2{margin:0 0 6px}
.pkm-check-zeile{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:14px 0 8px}
.pkm-check .suche{background:var(--grau-bg);box-shadow:inset 0 0 0 1px var(--line)} .pkm-check .suche:focus-within{box-shadow:0 0 0 3px var(--fokus)}
.pkm-check-foto{cursor:pointer;justify-content:center;min-height:46px} .pkm-check-foto svg{width:18px;height:18px}
.pkm-check-zeile:has(#pkm-foto:focus-visible) .pkm-check-foto{box-shadow:0 0 0 3px var(--fokus)}
.pkm-check-ds{margin:0} .pkm-check-status{margin:10px 0 0;font-weight:700} .pkm-check-status:empty{display:none}
.pkm-treffer{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px 14px;margin-top:8px}
.pkm-treffer .pkm-m-wert b{color:var(--link)}
.pkm-alt{display:flex;flex-direction:column;gap:8px;margin:-14px 0 30px;padding:12px;border-radius:var(--r);background:var(--card);box-shadow:var(--schatten)}
.pkm-alt>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px}
.pkm-alt a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r-klein);color:inherit;text-decoration:none;background:var(--grau-bg);min-width:0}
.pkm-alt a:hover{box-shadow:0 0 0 2px var(--marke-hellblau)} .pkm-alt img,.pkm-alt .pkm-rueck{width:34px;height:47px;flex:0 0 34px;border-radius:3px;object-fit:cover}
.pkm-alt a>span{display:flex;flex-direction:column;min-width:0} .pkm-alt b{font-size:13px} .pkm-alt small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:701px){ .pkm-detail{grid-template-columns:minmax(220px,380px) minmax(0,1fr)} }
.pkm-detail-bild a,.pkm-detail-bild>.pkm-rueck{display:block;aspect-ratio:63/88;border-radius:4.5%/3.2%;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.28);background:var(--grau-bg)}
.pkm-detail-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pkm-wertkopf{margin:16px 0 0;padding:14px 16px;border-radius:var(--r);background:var(--grau-bg);display:flex;flex-direction:column;gap:4px}
.pkm-wertkopf>small:first-child{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-stark)}
.pkm-wertkopf-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pkm-wertkopf-zeile b{font-family:var(--titel-schrift);font-weight:400;font-size:clamp(34px,5vw,48px);line-height:1}
.pkm-wertkopf-zeile .pkm-tend{font-size:15px;padding:4px 9px}
.pkm-detail .fakt b{font-size:22px}
.pkm-bewertung{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px;margin-bottom:30px}
.pkm-b{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:14px 16px;border-left:6px solid var(--line)}
.pkm-b b{display:block;font-size:16px;margin-bottom:4px} .pkm-b p{margin:0;font-size:14px;color:var(--muted-stark)}
.pkm-b.top{border-left-color:var(--stein-gelb)} .pkm-b.gut{border-left-color:#1E8E3E} .pkm-b.warn{border-left-color:#D93025} .pkm-b.info{border-left-color:var(--stein-blau)}
.pkm-analyse-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px 28px}
.pkm-analyse h3,.pkm-set-box h3{margin:0 0 10px;font-size:15px} .pkm-verlauf-titel{margin-top:18px!important}
.pkm-balken{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pkm-balken-z{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px} .pkm-balken-z>span:first-child{color:var(--muted);font-weight:600}
.pkm-balken-s{height:12px;border-radius:10px;background:var(--grau-bg);overflow:hidden} .pkm-balken-s i{display:block;height:100%;border-radius:10px;background:var(--stein-blau)}
.pkm-balken-z:last-child .pkm-balken-s i{background:var(--stein-gelb)} .pkm-balken-z b{white-space:nowrap}
.pkm-usa-art{margin:0;font-weight:800;font-size:13px}
.pkm-set-rang{margin:0 0 10px;font-weight:600}
.pkm-set-box .pkm-meine{margin-top:4px}
.pkm-daten .pkm-preis-dl{margin-top:0}
.pkm-angriff{padding:10px 0;border-top:1px solid var(--line)} .pkm-angriff p{margin:4px 0 0;font-size:14px;color:var(--muted-stark)}
.pkm-angriff-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .pkm-angriff-kopf b{font-size:16px}
.pkm-kosten,.pkm-faehigkeit{font-size:12px;font-weight:700;color:var(--muted)} .pkm-faehigkeit{color:var(--rot-text);text-transform:uppercase;letter-spacing:.05em}
.pkm-schaden{margin-left:auto;font-family:var(--titel-schrift);font-size:22px}
.pkm-effekt{margin:10px 0 0} .pkm-flavor{margin:10px 0 0;font-style:italic;color:var(--muted)}
@media (max-width:700px){ .pkm-detail-bild{max-width:300px;margin:0 auto;width:100%} .pkm-check-foto{flex:1 1 100%} .pkm-balken-z{grid-template-columns:92px minmax(0,1fr) auto} }
@media (max-width:700px){ .pkm-detail .links{flex-wrap:wrap;overflow:visible;margin:16px 0 0;padding:0;-webkit-mask-image:none;mask-image:none} .pkm-detail .links .btn{flex:1 1 auto;justify-content:center}
  .pkm-detail .fakt b{font-size:17px;white-space:nowrap} .pkm-detail .fakten{gap:14px 6px} .pkm-detail .fakt{padding:12px 8px 10px} .pkm-detail .fakt>span:not(.noppen){font-size:10px} }
/* Box-Check (07.11.2026): Produktbilder quadratisch, ganz sichtbar */
.pkm-m-box .pkm-m-bild{aspect-ratio:1;width:44px;background:#fff} .pkm-m-box .pkm-m-bild img{object-fit:contain}
.pkm-m-box{grid-template-columns:44px minmax(0,1fr) auto}
.pkm-treffer-titel{margin:14px 0 2px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-stark)} .pkm-treffer-titel small{text-transform:none;letter-spacing:0;font-weight:600}
.pkm-box-bild a,.pkm-box-bild>.pkm-rueck{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:var(--r);background:#fff;padding:14px;box-shadow:var(--schatten)}
.pkm-box-bild img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pkm-alt img.box{object-fit:contain;background:#fff}
.pkm-box-inhalt p{margin:0 0 8px;font-size:14px;color:var(--muted-stark)} .pkm-box-inhalt p:last-child{margin:0}
/* Karten- & Box-Check, Handy-Ausbau (07.11.2026): Hero mit großem Kamera-Knopf, Scan-Ansicht, Leiste „Nächste scannen“ */
.pkm-check{position:relative;overflow:hidden;border-radius:var(--r-gross);padding:22px;margin-bottom:26px;box-shadow:var(--schatten);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--stein-gelb) 38%,transparent),transparent 60%),radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--stein-rot) 14%,transparent),transparent 65%),var(--card)}
.pkm-check-kopf{display:flex;gap:14px;align-items:flex-start}
.pkm-check-kopf h2{margin:0 0 4px;font-family:var(--titel-schrift);font-weight:400;font-size:clamp(22px,3vw,30px);line-height:1.1}
.pkm-check-kopf p{margin:0;color:var(--muted-stark);font-size:14px}
.pkm-check-ball{flex:0 0 48px;width:48px;height:48px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.2);
  background:radial-gradient(circle at 50% 50%,#fff 0 16%,#1B1B1B 17% 23%,transparent 24%),linear-gradient(180deg,#E4002B 0 46%,#1B1B1B 46% 54%,#fff 54%)}
.pkm-check-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:18px 0 10px}
.pkm-check-foto{min-height:52px;padding:0 20px;font-size:15px;white-space:nowrap}
.pkm-check .suche{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);min-height:52px}
.pkm-check-ds{margin:0;font-size:12px}
.pkm-m-pfeil{color:var(--link);font-size:18px}
.pkm-treffer .pkm-m{min-height:56px}
/* Scan-Ansicht */
.pkm-scan{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,12,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pkm-scan[hidden]{display:none}
html.pkm-scan-offen{overflow:hidden}
.pkm-scan-karte{width:min(100%,340px);background:var(--card);border-radius:var(--r-gross);padding:18px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pkm-scan-bild{position:relative;margin:0 auto 14px;width:min(100%,230px);aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#000}
.pkm-scan-bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.pkm-scan-bild i{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(242,205,55,.55) 85%,#F2CD37);box-shadow:0 2px 14px #F2CD37;animation:pkm-scan 1.6s ease-in-out infinite alternate}
@keyframes pkm-scan{from{transform:translateY(-100%)}to{transform:translateY(360%)}}
.pkm-scan.fehler .pkm-scan-bild i{display:none} .pkm-scan.fehler .pkm-scan-bild img{opacity:.45;filter:grayscale(1)}
.pkm-scan-text{margin:0;font-weight:800;font-size:16px;line-height:1.35} .pkm-scan.fehler .pkm-scan-text{font-weight:600;font-size:14px}
.pkm-scan-knoepfe{display:flex;flex-direction:column;gap:8px;margin-top:14px} .pkm-scan-knoepfe .btn{justify-content:center;min-height:46px;cursor:pointer}
@media (prefers-reduced-motion:reduce){ .pkm-scan-bild i{animation:none;top:auto;bottom:0;height:6px} }
/* Leiste „Nächste scannen“ */
.pkm-leiste{display:flex;gap:10px;margin:6px 0 24px}
.pkm-leiste .btn{min-height:50px;justify-content:center;cursor:pointer} .pkm-leiste label.btn{flex:1 1 auto;font-size:15px} .pkm-leiste-suche{flex:0 0 56px;padding:0}
@media (min-width:701px){ .pkm-leiste{max-width:520px} }
@media (max-width:700px){
  .pkm-check{padding:18px 16px;margin:0 -2px 22px}
  .pkm-check-ball{flex-basis:40px;width:40px;height:40px}
  .pkm-check-zeile{grid-template-columns:minmax(0,1fr)}
  .pkm-check-foto{min-height:60px;font-size:17px;border-radius:12px}
  .pkm-check .suche{min-height:50px}
  .pkm-treffer .pkm-m{grid-template-columns:48px minmax(0,1fr) auto;padding:8px 4px} .pkm-treffer .pkm-m-bild{width:48px}
  .pkm-treffer .pkm-m-box{grid-template-columns:52px minmax(0,1fr) auto} .pkm-treffer .pkm-m-box .pkm-m-bild{width:52px}
  .pkm-treffer .pkm-m-text b,.pkm-m-box .pkm-m-text b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px}
  .pkm-leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -6px 20px rgba(0,0,0,.14)}
  body:has(.pkm-leiste){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .pkm-wertkopf{margin-top:12px} .pkm-wertkopf-zeile b{font-size:40px}
  .pkm-bewertung{gap:10px} .pkm-b{padding:12px 14px}
}
.pkm-leiste:has(input:focus-visible) label{box-shadow:0 0 0 3px var(--fokus)}
/* „–“ ohne Kursdaten: die allgemeine .leer-Regel (absolut positioniert) hier nicht anwenden */
.pkm-tend.leer{position:static;inset:auto;display:inline-block;font-family:inherit;font-size:12px;color:var(--muted)}
#check{scroll-margin-top:calc(var(--kl-h,64px) + 12px)}
/* Pokémon „maximal“ (07.11.2026): Holo-Karte, Wertklasse, Stapel */
.pkm-holo{perspective:1000px}
.pkm-holo.an a{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .2s;will-change:transform;touch-action:pan-y}
.pkm-holo.an a:hover{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.pkm-holo.an a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:color-dodge;opacity:calc(var(--glanz,0) * .9);transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.65),transparent 42%),
  linear-gradient(115deg,transparent 18%,rgba(255,0,170,.32) 34%,rgba(0,240,255,.32) 50%,rgba(255,240,0,.32) 66%,transparent 82%);
  background-size:100% 100%,260% 260%;background-position:center,var(--mx,50%) var(--my,50%)}
.pkm-holo.intro a::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;mix-blend-mode:color-dodge;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 45%,rgba(120,220,255,.5) 52%,transparent 66%);background-size:250% 100%;animation:pkm-glanz 1.4s ease-out 1 forwards}
@keyframes pkm-glanz{from{background-position:120% 0;opacity:1}to{background-position:-60% 0;opacity:0}}
.pkm-klasse{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:10px;background:var(--card);color:var(--muted-stark)}
.pkm-klasse.top{background:linear-gradient(90deg,#F2CD37,#FFE58A,#F2CD37);color:#1B1B1B;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(242,205,55,.45)}
.pkm-klasse.top::before{content:"★"} .pkm-klasse.gut{background:#E3F4E8;color:#137333}
:root[data-theme="dark"] .pkm-klasse.gut{background:rgba(52,168,83,.18);color:#6DD58C}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-klasse.gut{background:rgba(52,168,83,.18);color:#6DD58C} }
.pkm-wertkopf-zeile b{font-variant-numeric:tabular-nums}
.pkm-stapel-rein.drin{background:#E3F4E8;color:#137333}
.pkm-stapel-knopf{white-space:nowrap;font-variant-numeric:tabular-nums} .pkm-stapel-knopf svg{width:18px;height:18px}
.pkm-stapel-hero{margin:0 0 10px;min-height:44px}
.pkm-leiste .pkm-stapel-knopf{flex:0 0 auto;padding:0 14px}
/* Stapel-Blatt */
.pkm-blatt{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,12,20,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pkm-blatt[hidden]{display:none}
.pkm-blatt-in{width:min(100%,560px);max-height:88dvh;display:flex;flex-direction:column;background:var(--card);border-radius:18px 18px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:pkm-hoch .22s ease-out}
@keyframes pkm-hoch{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:701px){ .pkm-blatt{align-items:center} .pkm-blatt-in{border-radius:18px} }
.pkm-blatt-kopf{display:flex;align-items:center;justify-content:space-between} .pkm-blatt-kopf b{font-family:var(--titel-schrift);font-weight:400;font-size:24px}
.pkm-blatt-zu{width:40px;height:40px;border:0;border-radius:8px;background:var(--grau-bg);color:inherit;font-size:16px;cursor:pointer}
.pkm-blatt-summe{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0 10px;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--stein-gelb) 30%,var(--grau-bg)),var(--grau-bg))}
.pkm-blatt-summe b{font-family:var(--titel-schrift);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums} .pkm-blatt-summe small{color:var(--muted-stark);font-weight:700}
.pkm-blatt-inhalt{overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
.pkm-blatt-z{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:4px;border-bottom:1px solid var(--line)}
.pkm-blatt-weg{width:40px;height:40px;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;border-radius:8px} .pkm-blatt-weg:hover{background:var(--grau-bg)}
.pkm-blatt-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
@media (max-width:700px){ .pkm-leiste label.btn{font-size:15px;padding:0 12px} .pkm-leiste .pkm-stapel-knopf{font-size:14px} }
@media (prefers-reduced-motion:reduce){ .pkm-blatt-in{animation:none} .pkm-holo.intro a::before{display:none} }
@media (max-width:700px){ .pkm-leiste label.btn{white-space:nowrap;font-size:14px;gap:6px;padding:0 10px} .pkm-leiste label.btn svg{width:18px;height:18px} .pkm-leiste .pkm-stapel-knopf{padding:0 10px;gap:6px} .pkm-leiste-suche{flex-basis:50px} }

/* Karte ohne Katalogbild (z. B. Basis-Energien): Platzhalter bzw. eigenes Scan-Foto (07.11.2026) */
.pkm-ohne-bild{position:relative;aspect-ratio:63/88;border-radius:4.5%/3.2%;overflow:hidden;background:var(--grau-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.pkm-ohne-bild .pkm-rueck{width:46%;height:auto;aspect-ratio:1;min-height:0;border-radius:50%;opacity:.5}
.pkm-ohne-bild small{font-size:13px;font-weight:700;color:var(--muted);text-align:center;padding:0 12px}
.pkm-ohne-bild.foto{display:block;background:#000} .pkm-ohne-bild.foto img{width:100%;height:100%;object-fit:cover;display:block}
.pkm-ohne-bild.foto small{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:10px;padding:6px 8px;font-size:12px}

/* Scan: ausgeschnittene Karte ganz zeigen (07.11.2026) */
.pkm-scan.zugeschnitten .pkm-scan-bild img{object-fit:contain}

/* Box-/Booster-Seite nach einem Scan: eigenes Foto groß, englisches Katalogbild klein (07.11.2026) */
.pkm-box-bild.mit-foto{position:relative}
.pkm-eigen{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--schatten)}
.pkm-eigen img{width:100%;height:100%;object-fit:contain;display:block}
.pkm-eigen small{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:10px;padding:4px 8px;font-size:12px;font-weight:700}
.pkm-katalog-klein{display:flex;align-items:center;gap:10px;margin-top:10px}
.pkm-katalog-klein>a{flex:0 0 72px;width:72px;aspect-ratio:1;padding:4px!important;border-radius:8px!important}
.pkm-katalog-klein small{font-size:12px;color:var(--muted);font-weight:600}
.pkm-katalog-klein>a{height:72px;aspect-ratio:auto!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden} .pkm-katalog-klein>a img{max-height:64px;max-width:64px;width:auto;height:auto}

/* Welche KI hat erkannt (07.11.2026) */
.pkm-ki-info{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--muted-stark);display:flex;align-items:center;gap:6px}
.pkm-ki-info.lokal{color:#137333} :root[data-theme="dark"] .pkm-ki-info.lokal{color:#6DD58C}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-ki-info.lokal{color:#6DD58C} }

/* Sammler-Konten (07.11.2026): Anmelden/Registrieren, Mein Portfolio, Kasten auf Bewertungsseiten */
.sm-karte{background:var(--card);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:22px;max-width:560px;margin-bottom:26px}
.sm-karte .kt-felder label{display:block} .sm-karte .kt-felder input[type=password]{margin-top:6px;font:inherit;font-weight:400;font-size:16px;width:100%}
.sm-unten{margin:16px 0 0} .sm-twitch{width:100%;justify-content:center;min-height:48px}
.sm-oder{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:700;margin:14px 0} .sm-oder::before,.sm-oder::after{content:"";flex:1;height:1px;background:var(--line)}
.sm-vergessen{margin-top:14px} .sm-vergessen summary{cursor:pointer;font-weight:700;color:var(--link)} .sm-vergessen form{margin-top:12px}
.sm-leiste{margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--muted-stark)} .sm-leiste a{font-weight:800}
.sm-aktionen{margin-top:12px} .sm-aktionen .btn svg{width:18px;height:18px}
.sm-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:0 0 22px}
.sm-zahl{background:var(--card);border-radius:var(--r);box-shadow:var(--schatten);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.sm-zahl small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .sm-zahl b{font-family:var(--titel-schrift);font-weight:400;font-size:30px;line-height:1.1}
.sm-zahl span{font-size:13px;font-weight:700;color:var(--muted-stark)} .sm-zahl span.plus{color:#137333} .sm-zahl span.minus{color:#B3261E}
.sm-zahl.haupt{background:linear-gradient(135deg,color-mix(in srgb,var(--stein-gelb) 30%,var(--card)),var(--card))} .sm-zahl.haupt b{font-size:38px}
.sm-liste{display:flex;flex-direction:column;gap:4px;padding:10px}
.sm-z{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:var(--r-klein)} .sm-z:hover{background:var(--grau-bg)}
.sm-z-bild{width:48px;aspect-ratio:63/88;border-radius:10px;overflow:hidden;display:block;background:var(--grau-bg)} .sm-z-bild.box{aspect-ratio:1;background:#fff} .sm-z-bild img{width:100%;height:100%;object-fit:cover;display:block} .sm-z-bild.box img{object-fit:contain}
.sm-z-text{display:flex;flex-direction:column;min-width:0} .sm-z-text a{color:inherit;text-decoration:none} .sm-z-text b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sm-z-text small{font-size:12px;color:var(--muted);font-weight:600}
.sm-z-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .sm-z-r>b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-anz{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.sm-anz button{width:34px;height:32px;border:0;background:none;color:inherit;font-size:18px;font-weight:800;cursor:pointer} .sm-anz span{min-width:26px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.sm-einst{display:flex;flex-direction:column;gap:14px} .sm-einst details summary{cursor:pointer;font-weight:800} .sm-einst details form{margin-top:12px}
.sm-link{margin:6px 0 0 28px;font-size:13px;overflow-wrap:anywhere} .sm-abmelden{margin-top:4px}
.sm-mein{margin-top:16px;padding:14px;border-radius:var(--r);background:var(--grau-bg);display:flex;flex-direction:column;gap:10px}
.sm-mein-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .sm-mein-kopf span{font-size:13px;font-weight:700;color:var(--muted-stark)}
.sm-mein-zeile{display:flex;gap:8px;flex-wrap:wrap} .sm-mein-zeile .btn.primar{flex:1 1 auto;justify-content:center;min-height:44px}
.sm-var{flex-wrap:wrap}
.sm-mein-aus{margin:14px 0 0;font-size:13.5px;font-weight:700}
.sm-st-wartet{background:#FFF1C9!important;color:#7A5300!important} .sm-st-aktiv{background:#E3F4E8!important;color:#137333!important} .sm-st-gesperrt{background:#FCE8E6!important;color:#B3261E!important}
.sm-ad-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .sm-ad-knoepfe form{margin:0} .sm-ad-notiz{margin-top:10px}
.pkm-blatt-fuss .btn.primar{flex:1 1 100%;justify-content:center}
@media (max-width:600px){ .sm-z{grid-template-columns:42px minmax(0,1fr) auto;gap:10px} .sm-z-bild{width:42px} .sm-zahl b{font-size:26px} .sm-zahl.haupt b{font-size:32px} }

/* Sammler: Freunde & Ranking (08.11.2026) */
.sm-aktionen{display:flex;flex-wrap:wrap;gap:8px} .sm-zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--stein-rot,#E3000B);color:#fff;font-size:12px;font-weight:800;margin-left:4px}
.sm-rang{display:flex;flex-direction:column;gap:4px;padding:10px}
.sm-rang-z{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 8px;border-radius:var(--r-klein);color:inherit;text-decoration:none}
.sm-rang-z:hover{background:var(--grau-bg)} .sm-rang-z.ich{background:color-mix(in srgb,var(--stein-gelb) 22%,var(--card))}
.sm-rang-nr{font-family:var(--titel-schrift);font-size:22px;text-align:center}
.sm-rang-name{display:flex;flex-direction:column;min-width:0} .sm-rang-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sm-rang-name small{font-size:12px;color:var(--muted);font-weight:600}
.sm-rang-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap} .sm-rang-r b{font-variant-numeric:tabular-nums;font-size:16px} .sm-rang-r small{font-size:11.5px;color:var(--muted);font-weight:600}
.sm-tr{font-weight:800;font-variant-numeric:tabular-nums} .sm-tr.plus{color:#137333} .sm-tr.minus{color:#B3261E} .sm-tr.ohne,.sm-tr.gleich{color:var(--muted)}
.sm-rang-fuss{margin:6px 8px 0;font-size:12px}
.sm-fr-liste{display:flex;flex-direction:column;gap:2px} .sm-fr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px;border-top:1px solid var(--line);flex-wrap:wrap}
.sm-fr:first-child{border-top:0} .sm-fr-name{display:flex;flex-direction:column;min-width:0;flex:1 1 180px} .sm-fr-name small{font-size:12.5px;color:var(--muted);font-weight:600} .sm-fr-name a{color:inherit}
.sm-fr-knoepfe{display:flex;gap:6px} .sm-fr-knoepfe form{margin:0} .sm-fr-zeigen{margin-top:6px;font-size:13.5px}
.sm-fr-neu{display:flex;flex-direction:column;gap:10px} .sm-fr-neu input{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-klein);background:var(--card);color:inherit;box-sizing:border-box}
.sm-fr-neu .btn{align-self:flex-start} .sm-fr-link{margin-left:0}
.sm-vergleich h2{margin-top:0} .sm-vg-balken{display:flex;flex-direction:column;gap:8px}
.sm-vg-balken div{display:grid;grid-template-columns:minmax(60px,110px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;font-weight:700}
.sm-vg-balken span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sm-vg-balken i{display:block;height:14px;border-radius:10px;background:var(--stein-blau,#1E3A8A);min-width:4px} .sm-vg-balken .ich i{background:var(--stein-gelb,#F5C400)}
.sm-vg-balken b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-vg-text{font-weight:800;margin:12px 0 6px} .sm-vg-zahlen{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--muted-stark);margin:0}

/* Pokémon-Kopf: am Handy immer 2 Bausteine je Zeile (08.11.2026) */
@media (max-width:640px){ .pkm-stats .stein{flex:1 1 calc(50% - 4px)} }

/* ===== Pokémon-Kopf als feine Kacheln statt dicker Steine + schlanke Such-/Foto-Leiste (08.11.2026, Eric „nicht so globbig“) ===== */
.pkm-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0 4px;max-width:1080px}
.pkm-kachel{--c:var(--stein-grau,#6B6F78);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card);color:var(--text);text-decoration:none;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(27,27,27,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.pkm-kachel:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--c) 22%,transparent)}
.pkm-kachel:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.pkm-k-sym{flex:0 0 42px;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card))}
.pkm-k-sym svg{width:21px;height:21px} .pkm-k-sym em{font-style:normal;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pkm-k-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2} .pkm-k-txt b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkm-k-txt small{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkm-kachel.rot{--c:var(--stein-rot)} .pkm-kachel.lila{--c:var(--stein-lila)} .pkm-kachel.blau{--c:var(--stein-blau)} .pkm-kachel.gruen{--c:var(--stein-gruen)}
.pkm-kachel.rosa{--c:var(--stein-rosa)} .pkm-kachel.gelb{--c:#B98900} .pkm-kachel.grau{--c:#6B7280}
.pkm-kachel.rot .pkm-k-sym{background:var(--c);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--c) 35%,transparent)}
:root[data-theme="dark"] .pkm-kachel .pkm-k-sym{background:color-mix(in srgb,var(--c) 26%,var(--card));color:color-mix(in srgb,var(--c) 55%,#fff)}
:root[data-theme="dark"] .pkm-kachel.rot .pkm-k-sym{background:var(--c);color:#fff}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-kachel .pkm-k-sym{background:color-mix(in srgb,var(--c) 26%,var(--card));color:color-mix(in srgb,var(--c) 55%,#fff)}
  :root:not([data-theme="light"]) .pkm-kachel.rot .pkm-k-sym{background:var(--c);color:#fff} }
/* Check-Karte: ruhiger, Suche + Foto als eine Leiste */
.pkm-check{padding:24px 26px 20px}
.pkm-check-kopf{align-items:center} .pkm-check-ball{flex-basis:44px;width:44px;height:44px}
.pkm-check-kopf h2{font-size:clamp(21px,2.4vw,26px)} .pkm-check-kopf p{font-size:14px;max-width:70ch}
.pkm-leiste2{display:flex;gap:0;align-items:stretch;margin:18px 0 12px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 14px rgba(27,27,27,.06);padding:5px}
.pkm-leiste2:focus-within{box-shadow:inset 0 0 0 2px var(--fokus),0 4px 14px rgba(27,27,27,.06)}
.pkm-leiste2 .suche{flex:1 1 auto;min-width:0;min-height:46px;background:none;box-shadow:none!important;border-radius:10px}
.pkm-leiste2 .suche input{font-size:16px}
.pkm-leiste2 .pkm-check-foto{flex:0 0 auto;min-height:46px;padding:0 18px;border-radius:10px;font-size:14.5px;gap:8px;box-shadow:none}
.pkm-leiste2 .pkm-check-foto svg{width:18px;height:18px}
.pkm-check .sm-leiste{margin:4px 0 6px;font-size:13.5px} .pkm-check-ds{font-size:12px;color:var(--muted)}
@media (max-width:640px){
  .pkm-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
  .pkm-kachel{padding:10px;gap:10px;border-radius:12px} .pkm-k-sym{flex-basis:36px;width:36px;height:36px;border-radius:10px} .pkm-k-sym svg{width:18px;height:18px}
  .pkm-k-txt b{font-size:14px} .pkm-k-txt small{font-size:11.5px}
  .pkm-check{padding:18px 16px 16px} .pkm-check-kopf{align-items:flex-start} .pkm-kachel:last-child:nth-child(odd){grid-column:1/-1}
  .pkm-leiste2{flex-direction:column;gap:6px;padding:6px}
  .pkm-leiste2 .pkm-check-foto{min-height:52px;font-size:16px;justify-content:center;order:-1}
}
/* Such-/Foto-Leiste flacher (08.11.2026: „nicht zu hoch“) – gesamt 50 px */
.pkm-leiste2{padding:4px;border-radius:12px;margin:16px 0 10px}
.pkm-leiste2 .suche{min-height:42px;height:42px;padding:0 10px} .pkm-leiste2 .suche input{padding:0;height:42px;font-size:15.5px}
.pkm-leiste2 .pkm-check-foto{min-height:42px;height:42px;padding:0 16px;border-radius:9px;font-size:14px;margin:0}
@media (max-width:640px){ .pkm-leiste2 .pkm-check-foto{height:48px;min-height:48px;font-size:15.5px} .pkm-leiste2{padding:5px} }

.sm-fr-vorschlag{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px} .sm-fr-vorschlag form{margin:0}

/* Sammler entdecken (Freunde-Seite) */
.sm-entdecken{max-height:420px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:12px;padding:2px 10px}
.sm-entdecken .sm-fr{flex-wrap:nowrap} .sm-entdecken .sm-fr[hidden]{display:none}
.sm-fr-ava{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--stein-lila)}
.sm-entdecken .sm-fr-name{flex:1 1 auto}
@media (max-width:520px){ .sm-entdecken .sm-fr-knoepfe .btn{padding:8px 10px;font-size:13px} }

/* ===== Freunde & Ranking als App-Ansicht (08.11.2026) ===== */
.sm-zaehler{border-radius:10px}
.sm-fr-kopf h1{margin-bottom:6px}
.sm-block{background:var(--card);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 22px rgba(27,27,27,.07);padding:18px 18px 14px;margin:0 0 18px;max-width:760px}
.sm-block h2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:19px;font-weight:800;font-family:inherit}
.sm-block h2 small{font-size:13px;font-weight:600;color:var(--muted)}
.sm-anfragen{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--stein-rot) 45%,transparent),0 8px 22px rgba(27,27,27,.07)}
.sm-ava{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;background:var(--a,#7B3FE4)}
.sm-zeile{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)} .sm-zeile:first-of-type{border-top:0}
.sm-zeile[hidden]{display:none} .sm-zeile form{margin:0}
.sm-fr-name{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .sm-fr-name b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sm-fr-name a{color:inherit;text-decoration:none}
.sm-fr-name small{font-size:12.5px;color:var(--muted);font-weight:600}
.sm-fr-knoepfe{display:flex;gap:6px;flex:0 0 auto}
/* Ranking */
.sm-rangliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sm-rangliste .sm-rang-z{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:inherit;text-decoration:none;background:var(--grau-bg)}
.sm-rangliste .sm-rang-z.ich{background:color-mix(in srgb,var(--stein-gelb) 26%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--stein-gelb) 60%,transparent)}
.sm-rangliste .sm-rang-z:active{transform:scale(.99)}
.sm-rangliste .sm-rang-nr{flex:0 0 26px;font-size:20px;font-weight:800;text-align:center;font-family:var(--titel-schrift)}
.sm-rangliste .sm-rang-name{flex:1 1 auto} .sm-rangliste .sm-rang-name em{font-style:normal;font-size:12px;color:var(--muted);font-weight:700;margin-left:4px}
.sm-rangliste .sm-rang-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.sm-rangliste .sm-rang-r b{font-size:16.5px;font-variant-numeric:tabular-nums}
.sm-tz-zeile{display:flex;gap:10px;font-size:12px} .sm-tz{display:inline-flex;gap:4px;align-items:baseline;white-space:nowrap} .sm-tz i{font-style:normal;color:var(--muted);font-weight:700}
.sm-leer-text{color:var(--muted);font-size:14px;margin:10px 2px} .sm-fuss{color:var(--muted);font-size:12px;margin:10px 2px 0}
/* Suche + Entdecken */
.sm-suche{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:12px;background:var(--grau-bg);box-shadow:inset 0 0 0 1.5px var(--line);margin:0 0 6px}
.sm-suche:focus-within{box-shadow:inset 0 0 0 2px var(--fokus)} .sm-suche>.sym,.sm-suche svg{color:var(--muted);flex:0 0 auto}
.sm-suche input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--text);font:inherit;font-size:16px;font-weight:600;outline:none;-webkit-appearance:none;appearance:none}
.sm-entdecken{display:flex;flex-direction:column}
.sm-anfrage-knopf{flex:0 0 auto;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;color:#fff;background:var(--stein-rot);white-space:nowrap}
.sm-anfrage-knopf:active{transform:scale(.97)}
.sm-mehr-knopf{margin:8px 0 2px;padding:11px;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--link);font:inherit;font-weight:800;cursor:pointer}
.sm-teilen-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--stein-lila) 10%,var(--card))}
.sm-teilen-zeile>span{display:flex;flex-direction:column;min-width:0} .sm-teilen-zeile small{font-size:12.5px;color:var(--muted);font-weight:600}
.sm-teilen-zeile .btn{flex:0 0 auto;white-space:nowrap}
/* Freunde + Schalter */
.sm-freund{border-top:1px solid var(--line);padding:4px 0 8px} .sm-freund .sm-zeile{border-top:0}
.sm-freund-unten{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:52px} .sm-freund-unten form{margin:0}
.sm-ansehen{flex:0 0 auto;font-weight:800;font-size:14px;color:var(--link);text-decoration:none}
.sm-text-knopf{border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--muted);padding:6px 2px} .sm-text-knopf.gefahr{color:var(--stein-rot)}
.sm-sch-form{margin:0 0 6px}
.sm-sch{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;padding:6px 0}
.sm-sch-t{display:flex;flex-direction:column;min-width:0} .sm-sch-t b{font-size:14.5px} .sm-sch-t small{font-size:12.5px;color:var(--muted);font-weight:600}
.sm-sch input{position:absolute;opacity:0;width:1px;height:1px}
.sm-sch i{flex:0 0 46px;width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;transition:background .15s}
.sm-sch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.sm-sch input:checked+i{background:#1E8E3E} .sm-sch input:checked+i::after{transform:translateX(18px)}
.sm-sch input:focus-visible+i{outline:3px solid var(--fokus);outline-offset:2px} .sm-sch input:disabled+i{opacity:.4}
.sm-freund-unten .sm-sch{padding:2px 0} .sm-freund-unten .sm-sch-t b{font-size:13.5px;font-weight:700}
@media (max-width:640px){
  .sm-block{padding:16px 14px 12px;border-radius:14px;margin:0 -4px 14px}
  .sm-rangliste .sm-rang-z{padding:10px} .sm-ava{flex-basis:36px;width:36px;height:36px;border-radius:10px;font-size:15px}
  .sm-rangliste .sm-rang-r b{font-size:15px} .sm-tz-zeile{gap:8px;font-size:11.5px}
  .sm-freund-unten{padding-left:48px}
  .sm-teilen-zeile{flex-direction:column;align-items:stretch} .sm-teilen-zeile .btn{justify-content:center;min-height:46px}
  .sm-fr-knoepfe .btn{padding:8px 12px}
}
/* Web-App (vom Startbildschirm): Platz für Home-Leiste */
@media (display-mode:standalone){ .sm-block:last-of-type{margin-bottom:calc(18px + env(safe-area-inset-bottom,0px))} }

.sm-einladung{display:flex;align-items:center;gap:12px;padding:12px;margin:0 0 12px;border-radius:12px;background:color-mix(in srgb,var(--stein-gruen) 12%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--stein-gruen) 45%,transparent)} .sm-einladung form{margin:0}

/* Kursdiagramm (Kartenseite) */
.pkm-chart{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.pkm-chart-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:6px} .pkm-chart-kopf h3{margin:0;font-size:16px}
.pkm-chart-wert{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;flex:1 1 auto} .pkm-chart-wert small{font-size:13px;font-weight:700;color:var(--muted);margin-left:6px}
.pkm-chart-wert small.plus{color:#137333} .pkm-chart-wert small.minus{color:#B3261E}
.pkm-chart-tabs{display:flex;gap:4px;background:var(--grau-bg);padding:3px;border-radius:9px}
.pkm-chart-tabs button{border:0;background:none;color:var(--muted-stark);font:inherit;font-size:13px;font-weight:800;padding:5px 10px;border-radius:10px;cursor:pointer}
.pkm-chart-tabs button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pkm-chart-flaeche{position:relative;touch-action:pan-y} .pkm-ch{display:block;width:100%;height:auto;overflow:visible}
.pkm-ch-gitter{stroke:var(--line);stroke-width:1} .pkm-ch-achse{fill:var(--muted);font-size:12px;font-weight:600}
.pkm-ch-lbl{fill:var(--text);font-size:12.5px;font-weight:800;paint-order:stroke;stroke:var(--card);stroke-width:4px}
.pkm-ch-pkt{fill:var(--card);stroke:var(--muted-stark);stroke-width:2} .pkm-ch-linie{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3} .pkm-ch-punkt{fill:var(--card);stroke-width:3}
.pkm-chart-hinweis{margin:6px 0 0;font-size:12px}
@media (max-width:640px){ .pkm-chart-wert{flex-basis:100%;order:3} .pkm-ch-achse{font-size:15px} .pkm-ch-lbl{font-size:15px} }

/* Markt: Zeitraum, Kennzahlen, Sets nach Wert (08.11.2026) */
.pkm-zeitraum{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px;align-items:center}
.pkm-zeitraum a,.pkm-zeitraum summary{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:var(--text);font-weight:800;font-size:14px;text-decoration:none;cursor:pointer;list-style:none}
.pkm-zeitraum summary::-webkit-details-marker{display:none} .pkm-zeitraum summary::after{content:" ▾";margin-left:4px;color:var(--muted)}
.pkm-zeitraum a[aria-current="true"]{background:var(--stein-blau);border-color:var(--stein-blau);color:#fff}
.pkm-zeitraum-mehr{position:relative} .pkm-zeitraum-mehr[open] summary{border-color:var(--stein-blau)}
.pkm-zeitraum-mehr>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-width:min(520px,92vw)}
.pkm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:0 0 16px}
.pkm-kpi{background:var(--card);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(27,27,27,.06);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.pkm-kpi small{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .pkm-kpi>b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.pkm-kpi span{font-size:12.5px;color:var(--muted-stark);font-weight:600} .pkm-kpi .plus{color:#137333} .pkm-kpi .minus{color:#B3261E}
.pkm-stimmung{display:flex;height:12px;border-radius:10px;overflow:hidden;background:var(--grau-bg);margin:6px 0 2px} .pkm-stimmung i{display:block;height:100%}
.pkm-stimmung .hoch{background:#1E8E3E} .pkm-stimmung .gleich{background:var(--line)} .pkm-stimmung .runter{background:#D93025}
.pkm-aufbau{margin:-6px 0 12px}
.pkm-sets-titel{margin:22px 0 10px;font-size:18px}
.pkm-setliste{display:flex;flex-direction:column;gap:2px;padding:8px}
.pkm-setz{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px} .pkm-setz:hover{background:var(--grau-bg)}
.pkm-setz-nr{flex:0 0 22px;text-align:center;font-weight:800;color:var(--muted)}
.pkm-setz-logo{flex:0 0 70px;height:34px;display:grid;place-items:center} .pkm-setz-logo img{max-width:70px;max-height:34px;object-fit:contain}
.pkm-setz-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px} .pkm-setz-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkm-setz-text small{font-size:12.5px;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pkm-setz-text a{color:var(--link)}
.pkm-setz-balken{display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--stein-blau),color-mix(in srgb,var(--stein-blau) 50%,var(--stein-lila)));min-width:3px}
.pkm-setz-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px} .pkm-setz-r b{font-variant-numeric:tabular-nums}
@media (max-width:640px){ .pkm-setz{gap:8px;padding:10px 4px} .pkm-setz-logo{flex-basis:48px} .pkm-setz-logo img{max-width:48px} .pkm-kpi>b{font-size:22px} .pkm-zeitraum a,.pkm-zeitraum summary{height:34px;padding:0 11px;font-size:13.5px} }

.pkm-zeitraum{margin-bottom:8px} .pkm-jahre{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center;margin:0 0 14px;font-size:13.5px}
.pkm-jahre span{color:var(--muted);font-weight:700;margin-right:4px} .pkm-jahre a{padding:4px 7px;border-radius:10px;color:var(--link);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.pkm-jahre a:hover{background:var(--grau-bg)} .pkm-jahre a[aria-current="true"]{background:var(--stein-blau);color:#fff}

/* unsichtbare Datei-Felder (Foto-Scan) nie über den Rand ragen lassen (08.11.2026: Kartenseite war 16 px breiter) */
input.sr-only[type=file]{left:0;top:0}
.pkm-chart-tabs:empty{display:none}
#markt{scroll-margin-top:84px}
@media (max-width:640px){ .pkm-kpis{grid-template-columns:1fr 1fr;gap:8px} .pkm-kpi{padding:12px} .pkm-kpi:last-child{grid-column:1/-1} .pkm-kpi>b{font-size:20px} .pkm-kpi small{font-size:10.5px} }

.pkm-chart-legende{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--muted-stark)}
.pkm-chart-legende span{display:inline-flex;align-items:center;gap:6px} .pkm-chart-legende i{display:inline-block;width:14px;height:4px;border-radius:2px}
.pkm-ch-skala{fill:var(--muted);font-size:11px;font-weight:600;opacity:.8} .pkm-chart-wert span{font-weight:800}
@media (max-width:640px){ .pkm-ch-skala{font-size:14px} }

/* Kursdiagramm v2 (08.11.2026): eigene Karte, Kennzahlen, Info-Karte am Zeiger */
.pkm-chart.v2{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;background:linear-gradient(180deg,color-mix(in srgb,#2F6FDE 7%,var(--card)) 0,var(--card) 140px)}
.pkm-chart.v2 .pkm-chart-kopf{align-items:center;margin-bottom:12px}
.pkm-chart.v2 .pkm-chart-kopf h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-stark);flex-basis:100%;margin-bottom:-2px}
.pkm-chart.v2 .pkm-chart-wert{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:inherit}
.pkm-chart.v2 .pkm-chart-wert b{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.pkm-chart.v2 .pkm-chart-wert em{font-style:normal;font-size:14px;font-weight:800;padding:3px 8px;border-radius:10px}
.pkm-chart.v2 em.plus{color:#137333;background:color-mix(in srgb,#1E8E3E 14%,transparent)} .pkm-chart.v2 em.minus{color:#B3261E;background:color-mix(in srgb,#D93025 14%,transparent)}
.pkm-ch-kz{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0 0 12px}
.pkm-ch-kz div{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 11px;min-width:0}
.pkm-ch-kz small{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pkm-ch-kz b{display:block;font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkm-ch-kz b.plus{color:#137333} .pkm-ch-kz b.minus{color:#B3261E} .pkm-ch-kz span{font-size:11.5px;color:var(--muted)}
.pkm-chart.v2 .pkm-chart-flaeche{overflow:hidden} .pkm-chart.v2 .pkm-ch{width:100%;height:auto;overflow:visible}
.pkm-chart.v2 .pkm-ch-gitter{stroke:var(--line);stroke-dasharray:2 4} .pkm-chart.v2 .pkm-ch-skala{fill:var(--muted);font-size:11.5px;font-weight:700;opacity:1}
.pkm-chart.v2 .pkm-ch-achse{fill:var(--muted);font-size:11.5px;font-weight:700}
.pkm-chart.v2 .pkm-ch-pkt{fill:var(--card);stroke-width:2.5} .pkm-ch-pkt.hoch{stroke:#1E8E3E} .pkm-ch-pkt.tief{stroke:#D93025}
.pkm-ch-puls{opacity:.18;transform-box:fill-box;transform-origin:center;animation:pkmPuls 2.4s ease-out infinite}
@keyframes pkmPuls{0%{transform:scale(.5);opacity:.35}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.pkm-ch-puls{animation:none}}
.pkm-ch-info{position:absolute;top:6px;z-index:2;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 10px;box-shadow:0 8px 24px rgba(20,24,40,.16);font-size:12.5px;white-space:nowrap}
.pkm-ch-info small{display:block;font-weight:800;color:var(--muted);margin-bottom:2px}
.pkm-ch-info span{display:flex;align-items:center;gap:6px;font-weight:600} .pkm-ch-info span b{margin-left:auto;padding-left:12px;font-variant-numeric:tabular-nums}
.pkm-ch-info i{width:8px;height:8px;border-radius:2px;display:inline-block}
.pkm-chart.v2 .pkm-chart-legende{margin-top:8px}
@media (max-width:640px){
  .pkm-chart.v2{padding:14px 12px 12px;border-radius:14px}
  .pkm-chart.v2 .pkm-chart-wert{flex-basis:auto;order:0} .pkm-chart.v2 .pkm-chart-wert b{font-size:24px}
  .pkm-chart.v2 .pkm-chart-tabs{flex-basis:100%} .pkm-chart.v2 .pkm-chart-tabs button{flex:1}
  .pkm-ch-kz{grid-template-columns:1fr 1fr} .pkm-ch-kz b{font-size:15px}
  .pkm-chart.v2 .pkm-ch-skala,.pkm-chart.v2 .pkm-ch-achse{font-size:11px}
}
.pkm-ch-quelle{font-size:12px;font-weight:700;color:var(--muted)}
.pkm-chart.v2 .pkm-ch-skala{paint-order:stroke;stroke:var(--card);stroke-width:3px}
@media (max-width:640px){ .pkm-chart.v2{margin-left:-6px;margin-right:-6px} .pkm-chart.v2 .pkm-ch-quelle{flex-basis:100%;margin-top:-6px} }
:root[data-theme="dark"] .pkm-chart.v2 em.plus,:root[data-theme="dark"] .pkm-ch-kz b.plus{color:#6DDB8B} :root[data-theme="dark"] .pkm-chart.v2 em.minus,:root[data-theme="dark"] .pkm-ch-kz b.minus{color:#FF8F85}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-chart.v2 em.plus,:root:not([data-theme="light"]) .pkm-ch-kz b.plus{color:#6DDB8B} :root:not([data-theme="light"]) .pkm-chart.v2 em.minus,:root:not([data-theme="light"]) .pkm-ch-kz b.minus{color:#FF8F85} }

/* Kartenseite kompakt (08.11.2026, Eric: „nicht so globbig, kompakter, kleinere Schriften, besseres Layout“) – nur main.pkm-seite */
.pkm-seite .ruecklink{margin:4px 0 6px;font-size:13px}
.pkm-seite .detail{gap:22px;padding:18px;margin:8px 0 18px}
@media (min-width:701px){ .pkm-seite .pkm-detail{grid-template-columns:minmax(200px,290px) minmax(0,1fr);align-items:start} .pkm-seite .pkm-detail-bild{position:sticky;top:84px} }
.pkm-seite .held-zeile{font-size:11.5px;margin:0 0 2px}
.pkm-seite .detail h1{font-size:clamp(24px,2.4vw,31px);margin:0 0 4px}
.pkm-seite .set-thema{font-size:13.5px;margin:0;color:var(--muted-stark)}
/* Marktwert: eine kompakte Zeile */
.pkm-seite .pkm-wertkopf{margin-top:12px;padding:10px 14px;gap:2px;border-radius:12px}
.pkm-seite .pkm-wertkopf>small:first-child{font-size:10.5px}
.pkm-seite .pkm-klasse{font-size:10.5px;padding:2px 7px;position:absolute;right:12px;top:10px}
.pkm-seite .pkm-wertkopf{position:relative}
.pkm-seite .pkm-wertkopf-zeile{gap:10px} .pkm-seite .pkm-wertkopf-zeile b{font-size:clamp(26px,2.8vw,34px)}
.pkm-seite .pkm-wertkopf-zeile .pkm-tend{font-size:12.5px;padding:2px 7px}
.pkm-seite .pkm-wertkopf .hinweis{font-size:11.5px}
/* Fakten: flache Kacheln statt großer Steine */
.pkm-seite .fakten{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.pkm-seite .fakt.stein{flex:1 1 0;min-width:90px;padding:7px 10px 7px 12px;border-radius:9px;background:var(--grau-bg);color:var(--text);box-shadow:inset 3px 0 0 var(--c);display:flex;flex-direction:column;gap:1px}
.pkm-seite .fakt.stein.weiss{box-shadow:inset 3px 0 0 var(--line)}
.pkm-seite .fakt .noppen{display:none}
.pkm-seite .fakt b,.pkm-seite .pkm-detail .fakt b{font-family:inherit;font-weight:800;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkm-seite .fakt>span:not(.noppen){font-size:10px;color:var(--muted);letter-spacing:.05em}
/* Knöpfe klein in einer Reihe */
.pkm-seite .links,.pkm-seite .pkm-detail .links{margin:10px 0 0;gap:6px}
.pkm-seite .links .btn{font-size:12.5px;padding:6px 11px;min-height:32px}
.pkm-seite .links .btn svg{width:14px;height:14px}
/* Portfolio-Kasten */
.pkm-seite .sm-mein{margin-top:10px;padding:9px 12px;gap:7px;border-radius:12px}
.pkm-seite .sm-mein-kopf b{font-size:13.5px} .pkm-seite .sm-mein-kopf span{font-size:12px}
.pkm-seite .sm-mein-zeile .btn{font-size:13px;min-height:36px;padding:6px 12px}
.pkm-seite .sm-mein-zeile .btn.primar{min-height:36px}
.pkm-seite .sm-mein-aus{margin-top:10px;font-size:12.5px}
.pkm-seite .detail .btn.klein{font-size:12px;padding:5px 10px;min-height:30px}
.pkm-seite .detail>div>p:last-child{margin:8px 0 0}
/* Abschnitte */
.pkm-seite .abschnitt{font-size:20px;margin:0 0 10px;gap:10px}
.pkm-seite .abschnitt .stein{flex-basis:26px;width:26px;height:14px;margin-top:6px} .pkm-seite .abschnitt .stein .noppen{left:4px;top:-5px;gap:3px} .pkm-seite .abschnitt .stein .noppen>span{width:7px;height:6px}
/* Bewertung: kleine Hinweiskarten, auf breiten Schirmen 4 nebeneinander */
.pkm-seite .pkm-bewertung{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px;margin-bottom:20px}
.pkm-seite .pkm-b{padding:9px 12px;border-left-width:4px;border-radius:10px}
.pkm-seite .pkm-b b{font-size:13.5px;margin-bottom:2px} .pkm-seite .pkm-b p{font-size:12.5px;line-height:1.45}
/* Marktanalyse */
.pkm-seite .pkm-analyse{padding:16px;margin-bottom:18px}
.pkm-seite .pkm-analyse-spalten{gap:14px 26px;margin-top:4px}
.pkm-seite .pkm-analyse h3{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-stark);margin:0 0 8px}
.pkm-seite .pkm-analyse h3 small{text-transform:none;letter-spacing:0}
.pkm-seite .pkm-balken{gap:5px} .pkm-seite .pkm-balken-z{font-size:12.5px;grid-template-columns:96px minmax(0,1fr) auto} .pkm-seite .pkm-balken-s{height:7px}
.pkm-seite .pkm-preis-dl{font-size:13px;gap:3px 14px;margin:10px 0} .pkm-seite .pkm-preis-dl dd small{font-size:11.5px}
.pkm-seite .pkm-usa-art{font-size:12px;color:var(--muted-stark)}
.pkm-seite .hinweis{font-size:11.5px}
.pkm-seite p.hinweis{margin:6px 0 0}
/* Diagramm v2 kompakt */
.pkm-seite .pkm-chart.v2{margin:0 0 16px;padding:12px 14px 10px;border-radius:12px}
.pkm-seite .pkm-chart.v2 .pkm-chart-kopf{margin-bottom:8px;gap:4px 10px}
.pkm-seite .pkm-chart.v2 .pkm-chart-kopf h3{font-size:11px;margin:0}
.pkm-seite .pkm-chart.v2 .pkm-chart-wert b{font-size:22px} .pkm-seite .pkm-chart.v2 .pkm-chart-wert em{font-size:12px;padding:2px 6px;border-radius:10px}
.pkm-seite .pkm-ch-quelle{font-size:11px}
.pkm-seite .pkm-chart.v2 .pkm-chart-tabs{padding:2px;border-radius:8px} .pkm-seite .pkm-chart.v2 .pkm-chart-tabs button{font-size:12px;padding:4px 9px}
.pkm-seite .pkm-ch-kz{gap:6px;margin-bottom:8px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.pkm-seite .pkm-ch-kz div{padding:6px 9px;border-radius:9px}
.pkm-seite .pkm-ch-kz small{font-size:9.5px} .pkm-seite .pkm-ch-kz b{font-size:13.5px} .pkm-seite .pkm-ch-kz span{font-size:10.5px}
.pkm-seite .pkm-chart.v2 .pkm-chart-legende{font-size:11.5px;margin-top:4px}
.pkm-seite .pkm-chart-hinweis{font-size:11px;line-height:1.4}
@media (max-width:700px){
  .pkm-seite .detail{padding:14px;gap:14px}
  .pkm-seite .pkm-detail-bild{max-width:210px}
  .pkm-seite .detail>div{text-align:left}
  .pkm-seite .fakt.stein{min-width:0}
  .pkm-seite .pkm-detail .links .btn{flex:0 1 auto}
  .pkm-seite .pkm-chart.v2{margin-left:0;margin-right:0;padding:10px 10px 8px}
  .pkm-seite .pkm-chart.v2 .pkm-chart-wert b{font-size:20px}
  .pkm-seite .pkm-ch-kz{grid-template-columns:1fr 1fr}
  .pkm-seite .pkm-analyse{padding:12px}
  .pkm-seite .pkm-balken-z{grid-template-columns:84px minmax(0,1fr) auto}
}
/* Set, Kartendaten, weitere Karten: gleiche kompakte Linie */
.pkm-seite .box{padding:14px 16px;margin-bottom:18px}
.pkm-seite .pkm-set-box p,.pkm-seite .pkm-set-rang{font-size:13.5px;margin:0 0 6px}
.pkm-seite .pkm-set-box h3{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-stark);margin:10px 0 6px}
.pkm-seite .pkm-meine{gap:6px 18px}
.pkm-seite .pkm-m{padding:5px 6px;gap:10px} .pkm-seite .pkm-m-bild{width:30px;flex-basis:30px}
.pkm-seite .pkm-m-text b{font-size:13px} .pkm-seite .pkm-m-text small,.pkm-seite .pkm-m-text span{font-size:11.5px}
.pkm-seite .pkm-m-wert b{font-size:13px} .pkm-seite .pkm-m-wert .pkm-tend{font-size:11px}
.pkm-seite .pkm-daten .pkm-preis-dl{font-size:12.5px;gap:2px 16px;margin:0 0 8px}
.pkm-seite .pkm-angriff,.pkm-seite .pkm-faehigkeit{padding:8px 0;font-size:13px}
.pkm-seite .pkm-angriff-kopf b,.pkm-seite .pkm-faehigkeit b{font-size:14px} .pkm-seite .pkm-schaden{font-size:20px}
.pkm-seite .pkm-angriff p,.pkm-seite .pkm-faehigkeit p{font-size:13px;margin:2px 0 0}
.pkm-seite .pkm-wertkopf:has(.pkm-klasse)>small:first-child{padding-right:112px}
/* Kennzahlen als eine schmale Zeile statt Kästen (Eric 08.11. 12:48) */
.pkm-seite .pkm-ch-kz{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 6px;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pkm-seite .pkm-ch-kz div{background:none;border:0;padding:0;border-radius:0;display:flex;align-items:baseline;gap:6px;min-width:0}
.pkm-seite .pkm-ch-kz small{display:inline;font-size:10px}
.pkm-seite .pkm-ch-kz b{display:inline;font-size:13px}
.pkm-seite .pkm-ch-kz span{font-size:11px}
.pkm-seite .pkm-chart.v2 .pkm-chart-kopf h3{display:none}
.pkm-seite .pkm-chart.v2 .pkm-chart-kopf{margin-bottom:6px}
.pkm-seite .pkm-chart.v2 .pkm-chart-wert b{font-size:20px}
.pkm-seite .pkm-chart-hinweis{font-size:10.5px;color:var(--muted)}
@media (max-width:700px){ .pkm-seite .pkm-ch-kz{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px} .pkm-seite .pkm-ch-kz span{display:none} }

/* Hinweis nach Auto-Übernahme ins Portfolio (10.11.2026) – über der festen Scan-Leiste */
.pkm-pf-hinweis{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1150;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);width:max-content;padding:10px 10px 10px 16px;border-radius:14px;background:var(--card);color:var(--text);box-shadow:var(--schatten-hoch,0 8px 24px rgba(0,0,0,.22));border-left:5px solid #2E9E5B;font-size:15px;line-height:1.35}
.pkm-pf-hinweis[hidden]{display:none}
.pkm-pf-hinweis small{display:block;color:var(--muted);font-size:13px}
.pkm-pf-hinweis .btn{flex:none;min-height:40px}
@media (max-width:700px){ body:has(.pkm-leiste) .pkm-pf-hinweis{bottom:calc(86px + env(safe-area-inset-bottom,0px))} .pkm-pf-hinweis{width:calc(100vw - 32px)} .pkm-pf-hinweis>span{flex:1;min-width:0} }

/* Fußzeile v2 (12.11.2026) */
.seitenfuss{margin:56px 0 24px;padding:36px 36px 0;border-radius:22px;background:var(--card);border:1px solid var(--line);color:var(--text)}
.sf-oben{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-bottom:30px}
.sf-name{display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-family:var(--titel-schrift);font-size:24px;line-height:1}
.sf-name img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card),0 0 0 4px color-mix(in srgb,var(--twitch) 70%,transparent)}
.sf-marke p{margin:14px 0 18px;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:32ch}
.sf-social{display:flex;flex-wrap:wrap;gap:8px}
.sf-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted-stark,var(--muted));background:color-mix(in srgb,var(--text) 6%,transparent);transition:color .15s,background .15s,transform .15s}
.sf-social a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 12%,transparent);transform:translateY(-1px)}
.sf-titel{margin:6px 0 14px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sf-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sf-spalte a{display:inline-block;padding:5px 0;color:color-mix(in srgb,var(--text) 82%,transparent);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .15s}
.sf-spalte a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sf-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding:16px 0 20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.sf-recht{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.sf-recht a,.sf-recht .fuss-link{display:inline-flex;align-items:center;min-height:36px;color:var(--muted);font-weight:500;font-size:13px;text-decoration:none}
.sf-recht a:hover,.sf-recht .fuss-link:hover{color:var(--text)}
.sf-hinweis{flex-basis:100%;margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--muted);opacity:.8}
@media (max-width:960px){.sf-oben{grid-template-columns:repeat(3,minmax(0,1fr))}.sf-marke{grid-column:1/-1}}
@media (max-width:560px){.seitenfuss{padding:26px 18px 0;margin-top:40px;border-radius:18px}.sf-oben{grid-template-columns:1fr 1fr;gap:26px 16px}.sf-unten{flex-direction:column;align-items:flex-start}}

/* ===== Modern v1 (12.11.2026, Eric: „komplett modernisieren“) =====
   Schicht über dem Stein-Design: keine Noppen, keine Steinkanten, ruhige Flächen, feine Rahmen, weiche Schatten.
   Zurück zum alten Look: diesen Block entfernen und die Sicherung style.css.vor_modern_* einspielen (Steinkanten wurden in der Datei entfernt). */
:root{--r-klein:10px;--r:14px;--r-gross:20px;--m-rand:color-mix(in srgb,var(--text) 9%,transparent);--flaeche:color-mix(in srgb,var(--text) 4%,var(--card));
  --schatten:0 1px 2px rgba(16,18,40,.05),0 8px 24px -12px rgba(16,18,40,.18);--schatten-hoch:0 2px 4px rgba(16,18,40,.06),0 18px 40px -16px rgba(16,18,40,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--schatten:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -14px rgba(0,0,0,.7);--schatten-hoch:0 1px 0 rgba(255,255,255,.04) inset,0 20px 44px -18px rgba(0,0,0,.8)}}
:root[data-theme="dark"]{--schatten:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -14px rgba(0,0,0,.7);--schatten-hoch:0 1px 0 rgba(255,255,255,.04) inset,0 20px 44px -18px rgba(0,0,0,.8)}

/* Hintergrund: weicher Schimmer statt Noppenmuster */
body{background-image:radial-gradient(1100px 520px at 15% -180px,color-mix(in srgb,var(--marke-hellblau) 12%,transparent),transparent 70%),radial-gradient(900px 480px at 100% -120px,color-mix(in srgb,var(--marke-rot) 7%,transparent),transparent 70%);
  background-size:auto;background-repeat:no-repeat;background-attachment:fixed}

/* Noppen überall aus */
.noppen,.hp-noppen,.hp-noppen-reihe,.kl-stein::before,.kl-stein::after{display:none!important}

/* Kopfleiste */
.kopfleiste{border-bottom:1px solid var(--m-rand)}
.kl-tabs{gap:2px}
.kl-stein{height:36px;padding:0 10px;border-radius:10px;font-weight:600;font-size:13px;color:var(--muted-stark,var(--muted));background:transparent;box-shadow:none;transition:background-color .15s,color .15s}
.kl-stein:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.kl-stein.an,.kl-stein.s-gelb.an{color:var(--text);background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.kl-stein.s-gelb:hover{color:var(--text)}
.kl-menu{border-radius:10px!important}

/* Knöpfe */
.btn{min-height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14px;background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand),0 1px 2px rgba(0,0,0,.06);transition:background-color .15s,box-shadow .15s,transform .15s,filter .15s}
.btn:hover{background:color-mix(in srgb,var(--text) 6%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 18%,transparent),0 4px 12px -6px rgba(0,0,0,.25)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--m-rand)}
.btn.klein{min-height:32px;padding:0 11px;font-size:13px}
.btn.primar{background:linear-gradient(180deg,color-mix(in srgb,var(--marke-rot) 88%,#fff),var(--marke-rot));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px var(--marke-rot)}
.btn.blau{background:linear-gradient(180deg,color-mix(in srgb,var(--blau-flaeche) 85%,#fff),var(--blau-flaeche));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 16px -8px var(--blau-flaeche)}
.btn.twitch{background:linear-gradient(180deg,#a066ff,var(--twitch));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px var(--twitch)}
.btn.aktiv{background:var(--stein-rot);color:#fff;box-shadow:none}
.btn.primar:hover,.btn.blau:hover,.btn.twitch:hover,.btn.aktiv:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.amazon{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 16px -10px rgba(0,0,0,.5)}
.kl-werkzeug .btn{border-radius:10px}

/* Steine → ruhige Flächen */
.stein{border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 22px -14px var(--c)}
.stein.weiss{box-shadow:inset 0 0 0 1px var(--m-rand),0 8px 22px -16px rgba(0,0,0,.4)}

/* Kennzahl-Kacheln (Startseite, Zahlen, Mitmachen …): Karte mit farbiger Zahl */
.kachel.stein,.fakt.stein,.ab-stats .stein{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand),var(--schatten);padding:14px 16px 13px;overflow:hidden}
.kachel.stein::before,.fakt.stein::before,.ab-stats .stein::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.kachel.stein b,.fakt.stein b,.ab-stats .stein b{color:color-mix(in srgb,var(--c) 75%,var(--text))}
.kachel.stein.weiss::before,.fakt.stein.weiss::before{background:var(--line)}
.kachel.stein.weiss b,.fakt.stein.weiss b{color:var(--text)}
.kachel.stein>span:not(.noppen),.fakt.stein>span:not(.noppen),.ab-stats .stein small{color:var(--muted);font-weight:600;letter-spacing:.06em}
.kachel.stein.gelb b,.fakt.stein.gelb b,.ab-stats .stein.gelb b{color:color-mix(in srgb,#b88a00 80%,var(--text))}

/* Karten und Kästen */
.karte,.box{border-radius:var(--r-gross);box-shadow:inset 0 0 0 1px var(--m-rand),var(--schatten)}
.karte{transition:transform .2s,box-shadow .2s}

/* Startseiten- und Menü-Kacheln */
.hp-kachel,.mega-stein{border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 26px -16px var(--c)}
.mega-stein.an{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}

/* Baufortschritt: schlanke Segmente */
.baubalken .stein{height:10px;border-radius:6px;margin-top:4px;box-shadow:none}
.baubalken .stein.leer{box-shadow:none}

/* Status-Schilder */
.status{border-radius:7px;padding:4px 9px;box-shadow:none}
.status.ungebaut{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--text-blau)}

/* Abschnitts-Zeichen vor Überschriften: schmaler Farbstrich statt Stein */
.abschnitt .stein{flex:0 0 4px;width:4px;height:22px;margin-top:6px;border-radius:2px;box-shadow:none}

/* Reiter (Set-Seite: Beschreibung/Datenblatt) */
.si-reiter{gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent);display:inline-flex;box-shadow:inset 0 0 0 1px var(--m-rand)}
.si-tab{height:34px;padding:0 14px;border-radius:9px;font-weight:600;font-size:13.5px;background:transparent;color:var(--muted-stark,var(--muted));box-shadow:none}
.si-tab::before,.si-tab::after{display:none}
.si-tab:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.si-tab.an{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 0 0 1px var(--m-rand)}

/* ===== Modern v2 (12.11.2026, Stil-Audit): letzte Stein-Reste, Handy-Menü, keine Wischleisten, einheitliche Kacheln ===== */
:root{--akzent-rand:3px}

/* Aktiver Menüpunkt: überall gleich statt je Seite eine andere Farbe */
.kl-stein.an,.kl-stein.s-gelb.an{background:color-mix(in srgb,var(--text) 9%,transparent);box-shadow:inset 0 -2px 0 var(--marke-rot);color:var(--text)}

/* Handy-Menü: ruhige Liste statt bunter Kacheln */
.mega-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mega-stein,.mega-stein.s-gelb{min-height:0;padding:13px 14px 12px 16px;border-radius:12px;background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand);justify-content:flex-start;overflow:hidden}
.mega-stein::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.mega-stein b{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:15.5px;line-height:1.2}
.mega-stein small{font-weight:500;color:var(--muted);opacity:1}
.mega-stein.an{background:color-mix(in srgb,var(--text) 7%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}
@media (min-width:641px){ .mega-stein{min-height:0} }

/* Keine Wischleisten am Handy: Filter, Themen, Jahre, Sortierung, Serien, Set-Knöpfe umbrechen */
@media (max-width:900px){
  .gruppe,.themen,.ueb-filter,.ueb-jahre,.links,.su-sprung,.wl-sort,.unter-nav,.lk-serien{flex-wrap:wrap!important;overflow:visible!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;-webkit-mask-image:none!important;mask-image:none!important}
  .su-sprung a,.links .btn,.unter-nav a{flex:0 0 auto}
  .werkzeuge .gruppe{margin:0!important}
}

/* Set-Seite: Zahlen in Kacheln nicht mitten im Wort umbrechen */
.fakt b{overflow-wrap:normal;word-break:keep-all}
@media (max-width:520px){ .fakten{grid-template-columns:repeat(2,minmax(0,1fr))} .fakt b{font-size:21px} }

/* Schilder: nie umbrechen, eckig statt Pille, „ausgelaufen“ lesbar */
.ueb-marke{white-space:nowrap;border-radius:6px;font-weight:700}
.ueb-marke.aus{background:transparent;color:var(--muted-stark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 25%,transparent);text-decoration-color:currentColor}
.status.wunsch{background:var(--stein-lila)}

/* Zahlen & Rekorde: Balken ohne Noppe, Beschriftung mit fester Breite */
.zb-balken i b{display:none}
.zb-balken{height:12px;box-shadow:none}
.zb-label{width:150px;flex:none}
@media (max-width:640px){ .zb-label{width:110px} }

/* Startseite: „Nächstes Ziel“ als ruhiger Verlauf, „Gerade im Bau“ ohne Absperrband */
.ziel-balken{height:12px;box-shadow:none}
.ziel-balken i{display:none}
.bau-karte::before{height:3px;background:var(--marke-rot)}
.baubild{padding:0;background:#fff;box-shadow:inset 0 0 0 1px var(--m-rand)}

/* „Was fehlt noch?“: Kacheln wie überall (Karte, Farbstrich links) */
.hp-cockpit .hp-kachel{background:var(--card);border-top:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--m-rand),var(--schatten);overflow:hidden}
.hp-cockpit .hp-kachel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.hk-teil.gebaut{box-shadow:0 0 0 2px #1E9E4A,0 10px 24px rgba(10,40,20,.3)}
.hk-teil.bereit{box-shadow:0 0 0 2px #E8A21B,0 10px 24px rgba(60,40,0,.25)}

/* Mitmachen: Treppchen ruhig – Karte mit Farbkante oben statt Metall-Verlauf */
.ab-sockel,.ab-platz.p1 .ab-sockel,.ab-platz.p2 .ab-sockel,.ab-platz.p3 .ab-sockel{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand),inset 0 3px 0 var(--rand-farbe,var(--line)),var(--schatten)}
.ab-platz.p1{--rand-farbe:#E3A400} .ab-platz.p2{--rand-farbe:#9AA3B2} .ab-platz.p3{--rand-farbe:#B8692F}
.ab-platz .ab-rang,.ab-platz.p1 .ab-rang,.ab-platz.p2 .ab-rang,.ab-platz.p3 .ab-rang{text-shadow:none;color:var(--rand-farbe)}
.ab-platz.p1 .ab-bild{box-shadow:0 0 0 3px var(--rand),var(--schatten)}
.ab-platz .ab-bild{box-shadow:0 0 0 2px var(--rand),var(--schatten)}
.funken{display:none!important}

/* Über mich: ohne bunten Streifen, Zeitleiste mit Punkten auf feiner Linie */
.um-held::after{display:none}
.um-weg::before{width:2px;left:7px;background:var(--line)}
.um-weg-punkt{width:12px!important;height:12px!important;border-radius:50%!important;box-shadow:0 0 0 3px var(--bg)!important}
.um-weg-punkt::before{display:none}

/* Set-Seite: Merkmale und Bau-Tagebuch ohne Steine */
.highlights li::before{left:4px;top:15px;width:7px;height:7px;border-radius:50%}
.highlights li::after{display:none}
.bt-liste::before{width:2px;left:7px;background:var(--line)}
.bt-punkt{width:12px;height:12px;border-radius:50%;left:-20px;box-shadow:0 0 0 3px var(--card)}
.bt-punkt::before{display:none}

/* Setup: Kennzahlen als Karten, Sprungleiste ruhig, Schilder eckig */
.su-held::before{height:3px;background:var(--marke-rot)}
.su-zahlen li{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand);overflow:hidden}
.su-zahlen li::before{display:block;left:0;top:0;bottom:0;width:3px;height:auto;border-radius:0;background:var(--su);box-shadow:none}
.su-zahlen li::after{display:none}
.su-zahlen b{color:color-mix(in srgb,var(--su) 75%,var(--text))}
.su-sprung a{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--m-rand);font-weight:600;overflow:visible}
.su-sprung a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--su)}
.su-sprung a:hover{transform:none;background:color-mix(in srgb,var(--text) 6%,var(--card))}
.su-sprung a .su-sprung-zahl{position:static;margin-left:auto;border-radius:6px;box-shadow:none;background:color-mix(in srgb,var(--text) 8%,transparent);min-width:0;padding:2px 7px}
.su-chips li{border-radius:6px;white-space:nowrap}
.su-anzahl,.su-bereich-zahl{border-radius:6px!important}

/* Textkästen: Display-Schrift nur für große Titel, Rechtstexte ruhig */
.rechtstext h2{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em}

/* News: Datum als ruhiger Block */
.nz-datum{background:color-mix(in srgb,var(--stein-lila) 16%,var(--card));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stein-lila) 35%,transparent)}

/* Ersatzbild ohne Foto: leise statt „LEGO“-Schriftzug */
.leer:not(.stein){font-size:15px;color:color-mix(in srgb,var(--muted) 70%,transparent);letter-spacing:.08em}

/* Über mich: zweizeilige Kachel-Beschriftung enger */
.fakt.stein>span:not(.noppen){line-height:1.25}

/* ===== Modern v3 (12.11.2026, Nachprüfung) ===== */
/* Setup: Schilder dürfen umbrechen, Sprungleiste als gleichmäßiges Raster */
.su-chips li{white-space:normal}
.su-sprung{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.su-sprung a{white-space:nowrap}
@media (max-width:640px){ .su-sprung{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px} .su-sprung a{white-space:normal;font-size:13.5px;min-width:0;gap:8px;padding:10px 10px 10px 12px} .su-sprung a>*{min-width:0} .su-sprung a>span:not(.su-sprung-zahl):not(.su-sprung-sym){white-space:normal;overflow-wrap:anywhere;line-height:1.2} .su-sprung-zahl,.su-sprung-sym{flex:none} }
/* Handy: Filter kompakter, damit die Sets nicht weit nach unten rutschen */
@media (max-width:640px){
  .themen,.ueb-filter,.ueb-jahre,.gruppe,.wl-sort{gap:6px!important}
  .themen .btn,.ueb-filter .btn,.ueb-jahre a,.gruppe .btn,.wl-sort .btn{min-height:32px;padding:0 10px;font-size:13px}
  .unter-nav{gap:4px 16px!important}
  .unter-nav a{padding:7px 0 6px;font-size:14px}
}
/* Zahlen: Unterthemen-Namen nicht abschneiden, notfalls zweizeilig */
@media (max-width:640px){ .zb-label{width:auto;min-width:96px;max-width:46vw;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2} }
/* Startseite: Zielbalken ohne Stein-Streifen */
.ziel-voll{background:linear-gradient(90deg,var(--marke-rot),color-mix(in srgb,var(--marke-rot) 70%,var(--blau-flaeche)))}
/* Cookie-Banner: am Handy nicht breiter als der Bildschirm */
.ds-hinweis-in{min-width:0;box-sizing:border-box}
.ds-hinweis p{flex:1 1 240px;min-width:0}
/* Restliche Pillen eckig */
.wk-nr,.pkm-tend,.pkm-stimmung,.lk-marke,.su-produkt-schild,.su-anzahl{border-radius:6px!important}
.ds-hinweis-knoepfe{flex-wrap:wrap;min-width:0;gap:8px}
@media (max-width:640px){ .ds-hinweis{left:12px;right:12px} .ds-hinweis-in{padding:14px} .ds-hinweis-knoepfe{width:100%} .ds-hinweis-knoepfe .btn{flex:1 1 auto;justify-content:center} }
@media (max-width:640px){ .su-sprung a b{flex:1 1 auto;min-width:0;white-space:normal;hyphens:manual;line-height:1.2} }

/* ===== Kennzahl-Kacheln mit Klemmbaustein-Bildern (12.11.2026) ===== */
/* Grundform (Handy/Tablet): Bild oben rechts, Zahl + Text unten links */
.kacheln.kz-bilder .kachel.stein{position:relative;min-height:98px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;padding:14px 14px 13px 16px;transition:transform .2s,box-shadow .2s}
.kacheln.kz-bilder .kachel.stein::after{content:"";position:absolute;right:-34px;top:-34px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c,var(--line)) 24%,transparent),transparent 68%);z-index:-1;pointer-events:none}
.kacheln.kz-bilder .kachel.stein.weiss::after{background:radial-gradient(circle,color-mix(in srgb,var(--text) 10%,transparent),transparent 68%)}
.kacheln.kz-bilder .kz-bild{position:absolute;right:8px;top:8px;width:46px;height:46px;object-fit:contain;transform:rotate(-6deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.2,.9,.3,1.3);pointer-events:none;z-index:0}
.kacheln.kz-bilder .kachel.stein:hover{transform:translateY(-2px)}
.kacheln.kz-bilder .kachel.stein:hover .kz-bild{transform:rotate(0deg) scale(1.12) translateY(-3px)}
.kacheln.kz-bilder .kachel.stein>b,.kacheln.kz-bilder .kachel.stein>span:not(.noppen){position:relative;z-index:1}
.kacheln.kz-bilder .kachel-pfeil{z-index:2;right:10px;bottom:8px;font-size:20px}
/* Desktop: 3 × 2 große Kacheln, Bild rechts daneben */
@media (min-width:900px){
  .kacheln.kz-bilder{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .kacheln.kz-bilder .kachel.stein{min-height:92px;justify-content:center;padding:14px 104px 13px 18px}
  .kacheln.kz-bilder .kachel.stein>b{font-size:34px}
  .kacheln.kz-bilder .kachel.stein>span:not(.noppen){font-size:12px}
  .kacheln.kz-bilder .kz-bild{width:76px;height:76px;right:16px;top:50%;transform:translateY(-50%) rotate(-5deg)}
  .kacheln.kz-bilder .kachel.stein:hover .kz-bild{transform:translateY(-56%) rotate(0deg) scale(1.1)}
  .kacheln.kz-bilder .kachel.stein::after{width:160px;height:160px;right:-36px;top:50%;transform:translateY(-50%)}
  .kacheln.kz-bilder .kachel-pfeil{right:12px;bottom:8px}
}
@media (prefers-reduced-motion:reduce){ .kacheln.kz-bilder .kz-bild,.kacheln.kz-bilder .kachel.stein{transition:none} }

/* ===== Klemmbaustein-Bilder Runde 2 (12.11.2026): Startseiten-Kopf, Übersicht, Pokémon, Lumibricks, Über mich, Abstimmung ===== */
/* Allgemein: Kachel mit Bild rechts */
.mit-bild{--kzb:66px;position:relative;isolation:isolate;padding-right:calc(var(--kzb) + 26px)!important;overflow:hidden}
.mit-bild>.kz-bild{position:absolute;right:12px;top:50%;width:var(--kzb);height:var(--kzb);object-fit:contain;transform:translateY(-50%) rotate(-5deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.2,.9,.3,1.3);pointer-events:none;z-index:0}
.mit-bild:hover>.kz-bild{transform:translateY(-56%) rotate(0deg) scale(1.1)}
.mit-bild>b,.mit-bild>span:not(.noppen),.mit-bild>small{position:relative;z-index:1}
/* Raster: Desktop 3 Spalten, damit Zahl und Bild nebeneinander Platz haben */
@media (min-width:900px){ .kz-raster{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (min-width:600px) and (max-width:899px){ .kz-raster{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
.hp-kacheln.kz-raster .mit-bild{min-height:96px;justify-content:center;--kzb:72px}
.um-fakten.kz-raster .mit-bild{min-height:92px;display:flex;flex-direction:column;justify-content:center;--kzb:68px}
.pkm-nav.kz-raster{max-width:none}
.pkm-nav .mit-bild{--kzb:58px;min-height:78px}
@media (max-width:599px){
  .mit-bild{--kzb:44px;padding-right:calc(var(--kzb) + 14px)!important}
  .mit-bild>.kz-bild{right:7px}
  .hp-kacheln.kz-raster .mit-bild,.um-fakten.kz-raster .mit-bild{--kzb:44px;min-height:84px}
  .pkm-nav .mit-bild{padding-right:10px!important} .pkm-nav .mit-bild>.kz-bild{display:none}
  .hp-kacheln.kz-raster .hp-kachel.lila:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){ .mit-bild>.kz-bild{transition:none} }

/* Startseite: Bauszene neben der Überschrift */
.seitenkopf.mit-held{position:relative}
.held-bild{display:none}
@media (min-width:900px){
  .held-bild{display:block;position:absolute;right:0;top:-18px;width:min(300px,28vw);height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));pointer-events:none;animation:held-schweben 6s ease-in-out infinite}
  .seitenkopf.mit-held>.held-zeile,.seitenkopf.mit-held>h1,.seitenkopf.mit-held>p{max-width:calc(100% - min(320px,30vw))}
}
@keyframes held-schweben{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){ .held-bild{animation:none} }

/* Lumibricks: Seitenkopf mit leuchtender Baustein-Straße */
.seitenkopf.lb-kopf{position:relative;overflow:hidden;border-radius:var(--r-gross,22px);padding:44px 40px 30px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  background:linear-gradient(90deg,rgba(14,10,30,.92) 0%,rgba(14,10,30,.72) 34%,rgba(14,10,30,0) 62%),url(/assets/kacheln/lumibricks-kopf.webp?v=2) right center/cover no-repeat,#1a1430;
  box-shadow:0 18px 40px -20px rgba(80,40,160,.6)}
.seitenkopf.lb-kopf h1{color:#fff;text-shadow:0 0 24px rgba(255,190,90,.35)}
.seitenkopf.lb-kopf>p{color:rgba(255,255,255,.82)!important;max-width:44ch}
.lb-kopf .ab-stats .stein{background:rgba(20,16,40,.55)!important;color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;align-items:center!important;padding:8px 14px 8px 10px!important}
.lb-kopf .ab-stats .stein small{color:rgba(255,255,255,.75)!important}
.lb-kopf .ab-stats .stein.gelb b{color:#FFD45C!important}
.kz-mini{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));align-self:center}
@media (max-width:640px){
  .seitenkopf.lb-kopf{padding:180px 16px 18px;min-height:0;border-radius:16px;
    background:linear-gradient(180deg,rgba(14,10,30,0) 0px,rgba(14,10,30,0) 110px,rgba(14,10,30,.75) 205px,rgba(14,10,30,.97) 275px,#140f26 100%),url(/assets/kacheln/lumibricks-kopf-900.webp) right top/auto 280px no-repeat,#140f26}
  .kz-mini{width:30px;height:30px}
}

/* Abstimmung: Pokale aus Bausteinen auf dem Podest */
.ab-pokal{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));margin:-4px 0 -2px;transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.ab-platz.p1 .ab-pokal{width:92px;height:92px;animation:held-schweben 4s ease-in-out infinite}
.ab-platz:hover .ab-pokal{transform:scale(1.08) rotate(-4deg)}
.ab-platz .ab-sockel{background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--rand-farbe,var(--line)) 22%,transparent),transparent 70%),var(--card)!important}
@media (max-width:640px){
  .ab-pokal{width:40px;height:40px;margin:0}
  .ab-platz.p1 .ab-pokal{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){ .ab-platz.p1 .ab-pokal{animation:none} }

/* ===== Seitenköpfe mit Bild-Banner (12.11.2026): Start, Pokémon, Figuren, Galerie, Was fehlt noch, Abstimmung ===== */
.banner-kopf{position:relative;overflow:hidden;border-radius:var(--r-gross,22px);padding:42px 40px 30px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;margin-bottom:22px;
  background:linear-gradient(90deg,rgba(10,9,22,.94) 0%,rgba(10,9,22,.74) 36%,rgba(10,9,22,0) 64%),var(--kopf-bild) right center/cover no-repeat,#14122a;
  box-shadow:0 18px 40px -22px rgba(60,40,140,.7)}
.seitenkopf>.banner-kopf{margin-bottom:18px}
.banner-kopf h1{color:#fff!important;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.banner-kopf>p:not(.held-zeile):not(.held-knopf){color:rgba(255,255,255,.84)!important;max-width:46ch}
.banner-kopf>p a{color:#FFD45C}
.banner-kopf .held-zeile{color:#FF8E8E!important}
.banner-kopf .held-knopf{margin-bottom:0}
.banner-kopf .ab-stats .stein{background:rgba(18,15,38,.58)!important;color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}
.banner-kopf .ab-stats .stein small{color:rgba(255,255,255,.76)!important}
.banner-kopf .ab-stats .stein.an{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)!important}
@media (max-width:640px){
  .banner-kopf{padding:180px 16px 18px;min-height:0;border-radius:16px;
    background:linear-gradient(180deg,rgba(10,9,22,0) 0px,rgba(10,9,22,0) 110px,rgba(10,9,22,.75) 205px,rgba(10,9,22,.97) 275px,#0f0d1d 100%),var(--kopf-bild-m) right top/auto 280px no-repeat,#0f0d1d}
}

/* ===== Über mich: neuer Kopf (12.11.2026) – Marina freigestellt vor Baustein-Studio ===== */
.um-held.um-held-neu{background:#1a0f2e url(/assets/kacheln/kopf-ueber.webp?v=2) center/cover no-repeat;min-height:400px;box-shadow:0 22px 50px -24px rgba(230,40,160,.55)}
.um-held-neu::before{z-index:1;background:linear-gradient(90deg,rgba(14,8,30,.95) 0%,rgba(14,8,30,.78) 34%,rgba(14,8,30,0) 60%)!important}
.um-held-neu .um-person{position:absolute;right:0;top:0;height:100%;width:auto;max-width:60%;object-fit:cover;object-position:left top;z-index:0;filter:drop-shadow(-24px 0 40px rgba(255,70,170,.28));pointer-events:none}
.um-held-neu .um-held-text{z-index:2}
.um-held-neu h1{background:linear-gradient(90deg,#fff 0%,#FFC2E6 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(255,60,170,.35))}
.um-held-neu .um-avatar{display:none}
.um-held-neu .um-knoepfe .btn:not(.twitch){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:640px){
  .um-held.um-held-neu{background:#140b24 url(/assets/kacheln/kopf-ueber-900.webp) 70% top/auto 300px no-repeat;min-height:0}
  .um-held-neu .um-person{height:300px;max-width:none;right:-40px;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
  .um-held-neu::before{background:linear-gradient(180deg,rgba(14,8,30,0) 0%,rgba(14,8,30,0) 150px,rgba(14,8,30,.9) 255px,rgba(14,8,30,1) 296px,rgba(14,8,30,1) 100%)!important}
  .um-held-neu .um-held-text{padding-top:230px}
}
/* Seitenköpfe auf dem Tablet: Text schmaler, dunkle Fläche breiter */
@media (min-width:641px) and (max-width:1023px){
  .banner-kopf,.seitenkopf.lb-kopf{background-image:linear-gradient(90deg,rgba(10,9,22,.96) 0%,rgba(10,9,22,.86) 46%,rgba(10,9,22,.35) 70%,rgba(10,9,22,0) 86%),var(--kopf-bild,url(/assets/kacheln/lumibricks-kopf.webp?v=2))!important;background-size:auto,cover!important;background-position:0 0,right center!important}
  .banner-kopf>h1,.banner-kopf>p,.seitenkopf.lb-kopf>h1,.seitenkopf.lb-kopf>p{max-width:58%!important}
  .um-held-neu::before{background:linear-gradient(90deg,rgba(14,8,30,.96) 0%,rgba(14,8,30,.85) 48%,rgba(14,8,30,0) 72%)!important}
  .um-held-neu .um-held-text{max-width:56%}
}
/* Setup-Sprungleiste: lange Bereichsnamen dürfen umbrechen statt an die Zahl zu stoßen (12.11.2026) */
.su-sprung{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.su-sprung a{white-space:normal;min-width:0}
.su-sprung a b{white-space:normal!important;padding-right:0;line-height:1.2;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}
.su-sprung a .su-sprung-zahl{flex:none}
@media (max-width:640px){ .su-sprung{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media (min-width:1100px){ .su-sprung{grid-template-columns:repeat(6,minmax(0,1fr))!important} }
@media (min-width:641px) and (max-width:1099px){ .su-sprung{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (min-width:1100px){ .su-sprung a{gap:8px;padding:10px 10px 11px 12px} .su-sprung-sym{width:28px!important;height:28px!important} .su-sprung-sym svg{width:17px;height:17px} }

/* ===== Setup: Kopf mit Bild, Bereichsbilder (12.11.2026) ===== */
.su-held.banner-kopf{flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:40px 40px 30px;min-height:320px}
.su-held.banner-kopf::before{display:none}
.su-held.banner-kopf .su-held-text p:last-child{color:rgba(255,255,255,.84);max-width:46ch}
.su-held.banner-kopf .su-held-ober{color:#FF8E8E}
.su-held.banner-kopf .su-zahlen li{background:rgba(18,15,38,.6);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.su-held.banner-kopf .su-zahlen span{color:rgba(255,255,255,.8)}
.su-held.banner-kopf .su-zahlen b{color:color-mix(in srgb,var(--su) 70%,#fff)}
@media (min-width:1024px){ .su-held.banner-kopf .su-held-text{flex:0 1 52%} }
@media (max-width:640px){ .su-held.banner-kopf{padding:180px 16px 18px;min-height:0} }
.su-k-bild{flex:none;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.su-sprung a{padding-top:8px!important;padding-bottom:8px!important}
.su-sprung a:hover .su-k-bild{transform:scale(1.12) rotate(-5deg)}
.su-bereich h2 .su-k-bild{width:54px;height:54px;margin-right:4px}
@media (max-width:640px){ .su-k-bild{width:38px;height:38px} .su-bereich h2 .su-k-bild{width:44px;height:44px} }
@media (prefers-reduced-motion:reduce){ .su-k-bild{transition:none} }
@media (min-width:641px){ .su-sprung{grid-template-columns:repeat(3,minmax(0,1fr))!important} .su-sprung a{font-size:15px} }
@media (min-width:1100px){ .su-k-bild{width:52px;height:52px} .su-sprung a{gap:12px;padding:10px 14px 10px 14px!important} }

/* ===== Schrift-Ruhe (12.11.2026): Zierschrift nur für Titel, Abschnitte und große Zahlen – Rest Inter, Größen etwas kleiner ===== */
:root{--ui-schrift:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
/* 1. Kleine Titel, Namen, Preise, Daten: Inter kräftig statt Zierschrift */
.bau-karte h3,.baubalken b,.leer:not(.stein),.stimme .stimmen b,.hp-kopf span b,.hp-platte-kopf b,.hp-platte em,.ueb-jahr,.ab-stimmen b,.ab-nr,.tb-zeile b,.tb-fassade-kanal,
.nb-text b,.ns-text b,.nz-datum b,.galerie-titel,.figur-nr,.radio-text b,.ab-podest .ab-platz.p1 .ab-name a,.si-titel,.karte .fuss .uvp b,.nk-preis,.rk-text b,.zb-wert b,.zb-legende b,
.bt-stand b,.bt-titel,.vgl-fazit b,.um-weg b,.mf-titel,.hk-see,.lk-serie,.sm-name b,.kt-formular h2,.kt-karte h2,.lp-titel,.lp-preis b,.mfl-info h2,.su-mehr,.su-inhalt h3,
.sd-titel,.sd-mehr h2,.sd-mehr h3,.sw-pc-kasten h3,.welle-titel h3,.wk-nr,.pkm-schaden,.pkm-blatt-kopf b,.sm-zahl b,.sm-rang-nr,.sm-rangliste .sm-rang-nr,.zb-box h2
{font-family:var(--ui-schrift)!important;font-weight:800!important;letter-spacing:-.01em}
/* 2. Seitentitel: einheitlich und etwas kleiner */
.seitenkopf h1,.banner-kopf h1,.su-held h1,.detail h1,.ueber h1{font-size:clamp(30px,3.4vw,42px)!important;line-height:1.05!important;letter-spacing:.005em}
.um-held h1{font-size:clamp(40px,4.6vw,56px)!important}
.zs-held-titel h1{font-size:clamp(34px,4.2vw,52px)!important;line-height:1.02!important} .zs-held-titel h1 span{font-size:inherit!important}
/* 3. Abschnittsüberschriften */
.abschnitt,.imbau h2,.box h2,.hp-kopf h2,.su-bereich h2,.sw-kopf h2,.kz-kopf h2,.pkm-check-kopf h2,.ak-kopf h2,.hk-kopf h2,.zs-h2,main>h2,.ziele h2
{font-size:clamp(21px,2.1vw,24px)!important;line-height:1.15!important}
/* 4. Kleine Titel und Werte: feste Stufen */
.su-inhalt h3,.welle-titel h3,.bau-karte h3,.lk-serie,.sw-pc-kasten h3,.kt-formular h2,.kt-karte h2,.mfl-info h2,.zb-box h2,.sd-titel{font-size:17px!important;line-height:1.25!important}
.ueb-jahr{font-size:19px!important}
.rk-text b,.sm-name b,.nz-datum b{font-size:17px!important}
.baubalken b,.tb-zeile b,.radio-text b,.ns-text b,.nb-text b,.bt-titel,.um-weg b{font-size:15px!important}
.karte .fuss .uvp b,.zb-wert b,.bt-stand b,.lp-preis b{font-size:15px!important}
.figur-nr,.wk-nr{font-size:12px!important}
/* 5. Große Zahlen (bleiben in Zierschrift), eine Stufe kleiner */
.kacheln.kz-bilder .kachel.stein>b{font-size:30px!important}
.hp-kachel b{font-size:clamp(22px,2.4vw,28px)!important}
.fakt b{font-size:24px!important}
.su-zahlen b{font-size:30px!important}
.ab-stats b{font-size:19px!important}
.welle-zahl{font-size:26px!important}
@media (max-width:640px){
  .seitenkopf h1,.banner-kopf h1,.su-held h1,.detail h1,.ueber h1{font-size:30px!important}
  .um-held h1{font-size:40px!important}
  .abschnitt,.imbau h2,.box h2,.hp-kopf h2,.su-bereich h2,.sw-kopf h2,.kz-kopf h2,.pkm-check-kopf h2,.ak-kopf h2,.hk-kopf h2,.zs-h2,main>h2{font-size:21px!important}
  .kacheln.kz-bilder .kachel.stein>b{font-size:28px!important}
  .fakt b{font-size:22px!important}
}
.zs-gewinn h2{font-size:clamp(26px,2.8vw,32px)!important;line-height:1.1!important}
.zs-ruf h2{font-size:clamp(22px,2.3vw,26px)!important;line-height:1.15!important}
/* Kontrast: farbige Zahlen der Fakten-Kacheln etwas heller (WCAG 4,5:1 auch bei kleiner Schrift) */
.fakt.stein b{color:color-mix(in srgb,var(--c) 62%,var(--text))!important}
.fakt.stein.weiss b{color:var(--text)!important}

/* Audit 12.11.2026: Kontraste im dunklen Modus (Pokémon) */
:root[data-theme="dark"] .pkm-kpi .plus{color:#6DDB8B} :root[data-theme="dark"] .pkm-kpi .minus{color:#FF8A80}
:root[data-theme="dark"] .welle-mehr summary{color:#8FB0FF}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pkm-kpi .plus{color:#6DDB8B} :root:not([data-theme="light"]) .pkm-kpi .minus{color:#FF8A80} :root:not([data-theme="light"]) .welle-mehr summary{color:#8FB0FF} }
.pkm-setz-text small a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.wk.fehlt .wk-nr{background:#5E6270!important;color:#fff}
/* Audit 12.11.2026: Kontraste Social + Minifiguren-Liste */
.sm-knopf{color:color-mix(in srgb,var(--sm) 72%,var(--text))}
.mfl-bild .leer{color:#6B6D75}
.mfl-sets a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}