/* Startseite pflegekonto.app */
body.start{background:radial-gradient(1200px 600px at 85% -10%,#d6ece8 0%,rgba(214,236,232,0) 60%),radial-gradient(900px 500px at -10% 20%,#eef6f3 0%,rgba(238,246,243,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 #c9d8d4;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='%2314504c' 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 #17231f,0 30px 60px rgba(20,40,35,.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,#1d6b66,#14504c);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,40,35,.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,40,35,.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:#fbf7f5}
.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%,#eef7f5)}
.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,#1d6b66,#14504c);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:#eef7f5}

.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)}}