/* Korkenbuch – öffentliche Startseite. Baut auf app.css (Variablen --kb-*) auf. Hell/Dunkel über prefers-color-scheme. */
:root{
  --ks-rahmen:#0c1624; --ks-navy:#15304d; --ks-gold:#e9a21a; --ks-rot:#b8283f; --ks-creme:#f7ecd2;
  --ks-flaeche:#fff; --ks-flaeche-2:#eef2f7; --ks-schatten:0 18px 40px -18px rgba(21,48,77,.45),0 2px 6px rgba(21,48,77,.12);
  --km-land:#eceae2; --km-park:#cfe3c4; --km-wasser:#b8d7ee; --km-strasse:#fff; --km-haus:#dcd8cc;
}
@media (prefers-color-scheme: dark){
  :root{
    --ks-flaeche:#17233a; --ks-flaeche-2:#0f172a; --ks-schatten:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
    --ks-rahmen:#3a4d6b; --km-land:#1c2636; --km-park:#1e3a2b; --km-wasser:#183b5c; --km-strasse:#34445c; --km-haus:#243148;
  }
}
body.ks{display:block;padding-bottom:0;background:var(--kb-bg);overflow-x:hidden}
.ks main{max-width:none;margin:0;padding:0}
.ks h1,.ks h2,.ks h3{margin:0}
.ks img{display:block}

.ks-leiste{max-width:1120px;margin:0 auto;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px}
.ks-marke{display:flex;align-items:center;gap:10px;color:var(--kb-text);text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:.01em}
.ks-login{color:var(--kb-primary);font-weight:700;text-decoration:none;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.ks-login:hover{text-decoration:underline}

/* Hero */
.ks-hero{position:relative;max-width:1120px;margin:0 auto;padding:12px 16px 40px;display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
.ks-kappen{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ks-deko{position:absolute;opacity:.16}
.ks-hero-text,.ks-hero-bild{position:relative;z-index:1}
.ks-auge{margin:0 0 10px;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kb-muted)}
.ks-hero h1{font-size:clamp(2rem,7.4vw,3.2rem);line-height:1.08;letter-spacing:-.01em}
.ks-lead{font-size:1.1rem;color:var(--kb-text);margin:14px 0 20px;max-width:34em}
.ks-knoepfe{display:grid;gap:10px;max-width:420px}
.ks-knoepfe-mitte{margin:0 auto 14px}
.ks-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ks-chips li{font-size:.85rem;color:var(--kb-muted);border:1px solid var(--kb-line);background:var(--ks-flaeche);border-radius:99px;padding:5px 12px}
.ks-hero-bild{margin:0;display:flex;justify-content:center}

/* Telefonrahmen */
.ks-phone{position:relative;width:236px;max-width:100%;aspect-ratio:9/16.2;border-radius:34px;border:7px solid var(--ks-rahmen);background:var(--kb-bg);box-shadow:var(--ks-schatten);overflow:hidden;flex:none}
.ks-phone::before{content:"";position:absolute;top:6px;left:50%;width:56px;height:14px;margin-left:-28px;border-radius:9px;background:var(--ks-rahmen);z-index:3}
.ks-beispiel{position:absolute;top:26px;right:8px;z-index:4;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--ks-gold);color:#2b1a00;border-radius:99px;padding:2px 7px}
.ks-schirm{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:26px 9px 0;font-size:11px;line-height:1.3;color:var(--kb-text);background:var(--kb-bg)}
.ks-app-kopf{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12px;padding:2px 2px 4px}
.ks-box{background:var(--kb-surface);border:1px solid var(--kb-line);border-radius:11px;padding:8px 9px}
.ks-box-titel{font-weight:800;font-size:11.5px;margin-bottom:4px}
.ks-klein{font-size:9.5px;color:var(--kb-muted)}
.ks-zahl{font-size:11px;color:var(--kb-muted)} .ks-zahl b{font-size:22px;color:var(--kb-text);line-height:1}
.ks-balken{height:8px;border-radius:5px;background:var(--kb-line);overflow:hidden;margin:5px 0}
.ks-balken i{display:block;height:100%;border-radius:5px;background:var(--kb-accent)}
.ks-medaillen{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 4px;text-align:center}
.ks-medaille{display:flex;flex-direction:column;align-items:center;gap:1px}
.ks-medaille span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:var(--kb-surface);border:4px solid var(--metall)}
.ks-medaille b{font-size:9.5px;line-height:1.1;margin-top:2px}
.ks-medaille small{font-size:8.5px;color:var(--kb-muted);line-height:1.1}
.ks-box-zeilen{padding:4px 9px}
.ks-kv{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px solid var(--kb-line)}
.ks-kv:last-child{border:0}
.ks-zeile{display:flex;gap:7px;align-items:center;padding:3px 0}
.ks-zeile small{display:block;font-size:9.5px;color:var(--kb-muted)}
.ks-emoji{font-size:17px;display:inline-flex;align-items:center;justify-content:center;min-width:26px}
.ks-emoji img{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ks-nav{margin:auto -9px 0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--kb-line);background:var(--kb-surface);padding:5px 2px 9px;text-align:center;font-size:14px}
.ks-nav span{display:flex;flex-direction:column;align-items:center;opacity:.55}
.ks-nav span.an{opacity:1}
.ks-nav i{font-style:normal;font-size:7.5px;font-weight:700;margin-top:1px}
.ks-nav .an i{color:var(--kb-primary)}

/* Plopp-Knopf im Mockup */
.ks-plopp-buehne{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ks-plopp-knopf{position:relative;width:136px;height:136px}
.ks-plopp-knopf svg,.ks-plopp-knopf img{width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
/* „Plopp!“ steckt als Prägung in der Grafik (app.css v9, Lilita One); nur die Unterzeile ist Text im selben geprägten Stil */
.ks-plopp-knopf{font-size:136px}
.ks-plopp-knopf span{position:absolute;inset:0;display:block;line-height:1;font-size:inherit}
.ks-plopp-knopf b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ks-plopp-knopf small{position:absolute;left:0;right:0;top:60%;text-align:center;font-family:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;font-weight:400;font-size:.086em;letter-spacing:.04em;color:#553403;text-shadow:-.5px -.5px 0 rgba(255,240,176,.85),.6px 1.2px 1.2px rgba(66,36,0,.5)}
.ks-privat{font-size:10px;font-weight:700;color:var(--kb-privat);border:1.5px solid var(--kb-privat);border-radius:99px;padding:3px 10px}

/* Sammlung */
.ks-seg{display:flex;gap:3px;background:var(--kb-surface);border:1px solid var(--kb-line);border-radius:9px;padding:2px;font-size:9px;font-weight:700;text-align:center}
.ks-seg span{flex:1;padding:4px 0;border-radius:7px;color:var(--kb-muted)}
.ks-seg .an{background:var(--kb-primary);color:var(--kb-on-primary)}
.ks-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 4px;padding:2px}
.ks-korken{display:flex;flex-direction:column;align-items:center;gap:2px}
.ks-korken svg,.ks-korken img{width:100%;max-width:56px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
.ks-korken small{font-size:8.5px;font-weight:700}
.ks-gesperrt{opacity:.5} .ks-gesperrt svg{filter:none} .ks-gesperrt small{font-weight:500}

/* Karte */
.ks-karte{position:relative;height:200px;border-radius:11px;overflow:hidden;border:1px solid var(--kb-line)}
.ks-karte>svg{position:absolute;inset:0;width:100%;height:100%}
.km-land{fill:var(--km-land)} .km-park{fill:var(--km-park)} .km-wasser{fill:var(--km-wasser)} .km-haus rect{fill:var(--km-haus)}
.km-strasse path{fill:none;stroke:var(--km-strasse);stroke-width:7;stroke-linecap:round}
.ks-pin{position:absolute;width:34px;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.ks-pin svg,.ks-pin img{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.ks-pin i{font-style:normal;font-size:8.5px;font-weight:800;background:var(--kb-surface);color:var(--kb-text);border-radius:6px;padding:0 4px;margin-top:1px}
.ks-chip{position:absolute;left:7px;top:7px;font-size:8.5px;font-weight:700;background:var(--kb-surface);border-radius:99px;padding:2px 8px;border:1px solid var(--kb-line)}
.ks-sprech small{display:block;font-size:9.5px;color:var(--kb-muted)}
.ks-av{display:inline-flex;width:16px;height:16px;border-radius:50%;background:var(--kb-primary,#1772ab);color:#fff;font-style:normal;font-weight:800;font-size:9px;align-items:center;justify-content:center;margin-right:5px;vertical-align:1px}

/* Rangliste */
.ks-rang{display:grid;grid-template-columns:38px 1fr 20px;gap:6px;align-items:center;margin:2px 0;font-size:10.5px}
.ks-rang .ks-balken{margin:0;height:9px}
.ks-rang .ks-balken i{background:var(--kb-primary)}
.ks-rang.ich{font-weight:800} .ks-rang.ich .ks-balken i{background:var(--kb-accent)}
.ks-rang b{text-align:right}

/* Abschnitte */
.ks-bereich{max-width:1120px;margin:0 auto;padding:44px 16px 8px}
.ks-bereich h2{font-size:clamp(1.5rem,5vw,2rem);line-height:1.15;text-align:center}
.ks-unter{max-width:40em;margin:12px auto 26px;text-align:center;color:var(--kb-muted)}
.ks-unter strong{color:var(--kb-text)}

/* Mobil: Phones als wischbare Reihe */
.ks-schau{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 22px;margin:0 -16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ks-fig{margin:0;flex:0 0 min(236px,72vw);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ks-fig .ks-phone{width:100%}
.ks-fig figcaption{font-size:.92rem;color:var(--kb-muted);text-align:center}
.ks-fig figcaption b{display:block;color:var(--kb-text);font-size:1rem;margin-bottom:2px}

.ks-karten{display:grid;gap:14px;margin-top:22px}
.ks-karte-n{background:var(--ks-flaeche);border:1px solid var(--kb-line);border-radius:16px;padding:18px}
.ks-karte-n h3{font-size:1.05rem;margin:6px 0 6px}
.ks-karte-n p{margin:0;color:var(--kb-muted)}
.ks-sym{font-size:1.8rem}

.ks-liste-ikon{list-style:none;padding:0;margin:22px 0 14px;display:grid;gap:12px}
.ks-liste-ikon li{display:flex;gap:14px;align-items:flex-start;background:var(--ks-flaeche);border:1px solid var(--kb-line);border-radius:16px;padding:16px}
.ks-liste-ikon li>span{font-size:1.7rem;line-height:1}
.ks-liste-ikon b{display:block;margin-bottom:2px}
.ks-liste-ikon div{color:var(--kb-muted)}
.ks-schutz .kb-klein{text-align:center}

.ks-schritte{display:grid;gap:14px}
.ks-schritte ol{margin:6px 0 0;padding-left:1.2em;color:var(--kb-muted)}
.ks-schritte li{margin:4px 0}

.ks-schluss{max-width:520px;margin:0 auto;padding:48px 16px 28px;text-align:center}
.ks-schluss img{margin:0 auto 10px}
.ks-schluss h2{font-size:1.7rem;margin-bottom:18px}
.ks-schluss .kb-fuss{margin-top:28px}

@media (min-width:760px){
  .ks-schritte,.ks-karten{grid-template-columns:repeat(2,1fr)}
  .ks-liste-ikon{grid-template-columns:repeat(3,1fr)}
  .ks-liste-ikon li{flex-direction:column}
}
@media (min-width:900px){
  .ks-hero{grid-template-columns:1.1fr .9fr;padding-top:28px;padding-bottom:56px}
  .ks-phone{width:260px}
  .ks-hero-bild .ks-phone{width:272px;transform:rotate(3deg)}
  .ks-schau{overflow:visible;justify-content:center;margin:0;padding:6px 0 10px;gap:22px}
  .ks-fig{flex:1 1 0;min-width:0}
  .ks-fig .ks-phone{max-width:250px}
  .ks-karten{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion: no-preference){
  .ks-plopp-knopf svg,.ks-plopp-knopf img{animation:kb-wackel 3.2s ease-in-out infinite}
}