/* Startseite einkaufsblick.app (gleicher Aufbau wie pflegekonto.app) */
body.start{background:radial-gradient(1200px 600px at 85% -10%,#d9e6f6 0%,rgba(217,230,246,0) 60%),radial-gradient(900px 500px at -10% 20%,#eef3fa 0%,rgba(238,243,250,0) 70%),var(--bg)}
.kopfzeile{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) 16px 8px}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.kopfnav{display:flex;align-items:center;gap:18px;font-size:15px}
.kopfnav a{color:var(--muted);text-decoration:none;font-weight:700}
.kopfnav a:hover{color:var(--ink)}
.kopfnav a.anmelden{color:var(--accent-dark);border:1px solid #c6d3e2;background:#fff;border-radius:999px;padding:7px 14px}
@media (max-width:560px){.kopfnav a:not(.anmelden){display:none}}

main{max-width:1080px;margin:0 auto;padding:0 16px 48px;display:flex;flex-direction:column;gap:72px}
a.primary,a.ghost{text-decoration:none;display:inline-block;text-align:center;color:#fff}
a.ghost{color:var(--ink)}
.gross{font-size:17px;padding:15px 22px;border-radius:14px}

/* Kopfbereich */
.held{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-top:40px}
.held-text{display:flex;flex-direction:column;gap:20px}
.eyebrow{align-self:flex-start;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:6px 12px}
.held h1{font-size:clamp(30px,5vw,50px);line-height:1.1;margin:0;letter-spacing:-.025em}
.held h1 em{font-style:normal;color:var(--accent)}
.unter{font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--muted);margin:0;max-width:560px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.haken{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.haken li{display:flex;align-items:center;gap:7px}
.haken li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4a84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.haken.senkrecht{flex-direction:column;gap:8px;font-size:15px;color:var(--ink)}

/* Handy-Abbildung */
.buehne{position:relative;min-height:520px;display:flex;justify-content:center;align-items:center}
.handy{position:relative;z-index:2;width:290px;background:#fff;border-radius:36px;padding:22px 16px 18px;box-shadow:0 0 0 8px #162231,0 30px 60px rgba(20,35,60,.25);display:flex;flex-direction:column;gap:12px}
.handy-kopf{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.logo.klein{width:22px;height:22px;border-radius:6px}
.handy-karte{background:linear-gradient(135deg,#2b5fa6,#1f4a84);color:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:2px}
.handy-karte small{opacity:.85;font-size:12px}
.handy-karte strong{font-size:30px;letter-spacing:-.02em}
.handy-topf{display:flex;flex-direction:column;gap:5px}
.handy-topf .tk{display:flex;justify-content:space-between;font-size:13px}
.handy-topf .tk b{font-variant-numeric:tabular-nums}
.handy-topf .bar{height:8px}
.handy-hinweis{background:var(--warn);color:var(--warnink);border-radius:12px;padding:9px 10px;font-size:12px;line-height:1.35}
.handy-knopf{background:var(--accent);color:#fff;border-radius:12px;padding:11px;text-align:center;font-weight:700;font-size:14px}
.zettel{position:absolute;z-index:3;background:#fffdf8;border-radius:10px;padding:14px 16px;width:190px;box-shadow:0 12px 30px rgba(20,35,60,.14);display:flex;flex-direction:column;gap:3px;font-size:13px;border-top:4px solid #e7d9b9}
.zettel b{font-size:13px}
.zettel span{color:var(--muted)}
.zettel i{font-style:normal;font-weight:700;font-size:16px;margin-top:4px}
.z1{left:-8px;top:24px;transform:rotate(-6deg)}
.z2{right:-8px;bottom:-28px;transform:rotate(5deg)}
.sticker{position:absolute;z-index:4;right:2%;top:150px;background:var(--okbg);color:#1f5e22;font-weight:700;font-size:13px;border-radius:999px;padding:8px 13px;box-shadow:0 8px 20px rgba(20,35,60,.12)}

/* Zahlenband */
.zahlenband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.zahlenband div{background:#fff;padding:20px 18px;display:flex;flex-direction:column;gap:4px}
.zahlenband b{font-size:clamp(22px,3vw,30px);color:var(--accent-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zahlenband span{font-size:14px;color:var(--muted);line-height:1.35}

/* Abschnitte */
.block{display:flex;flex-direction:column;gap:20px}
.block h2,.schluss h2{font-size:clamp(24px,3.4vw,34px);margin:0;letter-spacing:-.02em;line-height:1.2}
.vergleich{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vergleich ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;line-height:1.45}
.vergleich li{display:flex;gap:10px}
.vorher{background:#f8f6f3}
.vorher li::before{content:"✕";color:var(--bad);font-weight:700;flex:none}
.nachher{border:2px solid var(--accent-soft)}
.nachher li::before{content:"✓";color:var(--accent);font-weight:700;flex:none}

.schritte{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.schritte li{background:var(--card);border-radius:20px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;line-height:1.5}
.schritte svg{width:46px;height:46px;padding:10px;border-radius:14px;background:var(--accent-soft);fill:none;stroke:var(--accent-dark);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box;margin-bottom:4px}
.schritte b{font-size:19px}
.schritte span{color:var(--muted)}

.rechner-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center}
.rechner-text{display:flex;flex-direction:column;gap:14px}
.rechner{gap:6px}
.rechner .li{cursor:default}
.rechner .summe{font-size:20px;color:var(--accent-dark)}

.preise{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.preiskarte{padding:26px;gap:14px;position:relative}
.preiskarte h3{font-size:19px}
.preis{font-size:40px;font-weight:700;margin:0;letter-spacing:-.02em}
.preis small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.kombi{background:linear-gradient(160deg,#fff 40%,#eef3fa)}
.schild{position:absolute;top:-12px;right:20px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px}

.fragen{display:flex;flex-direction:column;gap:10px;max-width:820px}
details{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
summary{font-weight:700;cursor:pointer;font-size:17px}
details p{line-height:1.55;color:var(--muted);margin:10px 0 0}

.schluss{background:linear-gradient(135deg,#2b5fa6,#1f4a84);color:#fff;border-radius:28px;padding:44px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.schluss h2{max-width:640px}
a.primary.hell{background:#fff;color:var(--accent-dark);box-shadow:none}
a.primary.hell:hover{background:#eef3fa}

.fuss{text-align:center;padding:24px 16px calc(32px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--muted)}
[hidden]{display:none!important}

@media (max-width:860px){
  .held{grid-template-columns:1fr;gap:24px;padding-top:20px}
  .buehne{min-height:500px}
  .zahlenband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rechner-block{grid-template-columns:minmax(0,1fr);gap:18px}
  .schritte{grid-template-columns:1fr}
}
@media (max-width:600px){
  main{gap:52px}
  .vergleich,.preise{grid-template-columns:1fr}
  .buehne{min-height:470px;overflow-x:clip}
  .handy{width:260px}
  .zettel{width:140px;padding:9px 11px}
  .z1{left:0;top:0}
  .z2{right:0;bottom:-20px}
  .sticker{right:0;top:130px}
  .ctas a{flex:1 1 100%}
}

/* Hilfe auf der Startseite */
.block-kopf{display:flex;flex-direction:column;gap:10px;max-width:720px}
.gross-hint{font-size:16px}
.hilfe-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.hilfe-raster details.hilfe{background:#fff;box-shadow:var(--shadow);border:0;padding:16px 18px}
@media (max-width:700px){.hilfe-raster{grid-template-columns:minmax(0,1fr)}}

/* Verweis auf Tagesblick */
.tb-karte{flex-direction:row;align-items:flex-start;gap:18px;max-width:820px;padding:22px}
.tb-karte img{flex:none;border-radius:14px}
.tb-karte>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tb-karte h3{margin:0;font-size:19px}
@media (max-width:560px){.tb-karte{flex-direction:column}}

/* Hinweis auf Tagesblick ganz oben */
.geschwister{display:flex;align-items:center;justify-content:center;gap:10px;background:#a4520a;color:#fff;text-decoration:none;font-size:15px;padding:9px 16px;text-align:left}
.geschwister:hover{background:#7f3f06}
.geschwister img{flex:none;border-radius:6px}
.geschwister .pfeil{font-weight:700;white-space:nowrap;text-decoration:underline}
@media (max-width:560px){.geschwister{font-size:14px}.geschwister img{display:none}}

/* Erklärvideo, wie bei Tagesblick */
.video{margin:8px 0 0;max-width:900px}
.video video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:20px;background:#162231;box-shadow:var(--shadow)}
.video .v-hoch{display:none}
@media (max-width:600px){.video .v-quer{display:none}.video .v-hoch{display:block;aspect-ratio:9/16;width:auto;max-width:100%;height:min(78vh,calc((100vw - 32px)*16/9));margin:0 auto;border-radius:16px}}
.video figcaption{margin-top:12px;text-align:center;color:var(--muted);font-size:15px}

/* Einkaufsblick: Liste im Handy und Knopf-Gerät */
.eb-art{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.eb-art:first-of-type{border-top:0}
.eb-art i{width:20px;height:20px;border-radius:50%;border:2px solid #b7c6d8;flex:none}
.eb-art.ok i{background:var(--ok);border-color:var(--ok)}
.eb-art.ok span{text-decoration:line-through;color:var(--muted)}
.eb-art span{flex:1;font-weight:700}
.eb-art small{color:var(--muted);font-size:12px}
.eb-art b{background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;padding:1px 8px;font-size:12px}
.knopfgeraet{position:absolute;z-index:3;left:-10px;bottom:-10px;width:200px;background:#14202e;border-radius:22px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:7px;box-shadow:0 18px 40px rgba(20,35,60,.3);transform:rotate(-4deg)}
.knopfgeraet small{grid-column:1/-1;color:#cfe0f5;text-align:center;font-size:11px;font-weight:700}
.knopfgeraet span{background:#2b5fa6;color:#fff;border-radius:11px;font-weight:700;font-size:13px;display:grid;place-items:center;min-height:46px;text-align:center}
.knopfgeraet span.hit{background:#2e7d32;font-size:11px}
.familie{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.familie .tb-karte{max-width:none}
@media (max-width:760px){.familie{grid-template-columns:1fr}}
@media (max-width:600px){.knopfgeraet{width:165px;left:0;bottom:-14px}.knopfgeraet span{min-height:38px;font-size:12px}}