/* =====================================================================
   site.css - Website von FelisCare (index*.asp und die zwoelf Rechtstexte).
   NICHT die App (index.html: core.css + app.css), NICHT die Hilfe
   (hilfe_*.html: hilfe.css, laeuft im iframe).

   Gestaltung: "Die Notfallmappe fuer die Katze" - ruhig, vertrauenswuerdig, warm.
   Die Markenfarbe der App ist die Marke, Koralle ist ausschliesslich der Notfall. Beschreibung
   samt Reglern und Regeln: DESIGN.md im selben Verzeichnis.

   Kopf- und Fusszeile folgen dem Familien-Bauplan (Reihenfolge, 64px, Fuss
   ohne Betreiberzeile) - daran wird nicht gerueckt.

   Aufbau:
     0. Schriften
     1. Farbwerte (vier Bloecke)
     2. Gemeinsam       Grundgeruest, Kopf, Knoepfe, Fuss, Hilfe-Panel
     3. Nur Startseite  .page-home
     4. Nur Rechtstexte .page-legal
   ===================================================================== */

/* =====================================================================
   0. Schriften - selbst gehostet (fonts/), beide SIL Open Font License.
     Bricolage Grotesque  Ueberschriften, Wortmarke (variabel 600-800)
     Atkinson Hyperlegible Fliesstext - gebaut fuer Lesbarkeit, auch
                           unter Stress und bei schlechter Sicht
   ===================================================================== */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-var.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-700.woff2) format("woff2")}

/* =====================================================================
   1. Farbwerte - vier Bloecke wie ueberall in der Familie.
   Der Knopf in der Kopfzeile wechselt System -> Hell -> Dunkel und merkt
   sich die Wahl unter "user-theme". .theme-forced am <html> schaltet die
   Media-Query ab. Jede Flaeche und jede Linie haengt an diesen Tokens.
   ===================================================================== */
:root{
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --text:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --bg:#f3f6f7; --surface:#ffffff; --ink:#0f1d22; --ink-soft:#4a5a60;
  --accent:#1f6478; --accent-ink:#ffffff; --accent-soft:#dcebf0; --accent-red:#c2352b;
  --tint:#e4eef1; --tint-2:#d3e3e9;
  --alarm:#c2352b; --alarm-soft:#fbe7e3;
  --border:#d3dfe3; --border-soft:rgba(15,29,34,.08); --btn-secondary-bg:#e5ecef;
  --header-bg:rgba(243,246,247,.86);
  --shadow:0 1px 2px rgba(15,35,42,.06),0 10px 28px rgba(15,35,42,.07);
  --card-shadow:rgba(15,35,42,.08);
  --lift-shadow:0 14px 34px rgba(15,35,42,.13);
  --phone-frame:#0f1d22;
  --phone-shadow:0 2px 4px rgba(15,35,42,.10),0 30px 60px -12px rgba(15,35,42,.30);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#0b1417; --surface:#121f23; --ink:#e6eef1; --ink-soft:#a0b2b8;
    --accent:#5bbcd6; --accent-ink:#04161b; --accent-soft:#15303a; --accent-red:#ff7a66;
    --tint:#11232a; --tint-2:#17303a;
    --alarm:#ff7a66; --alarm-soft:#2e1a17;
    --border:#243f48; --border-soft:rgba(230,238,241,.08); --btn-secondary-bg:#1a2d33;
    --header-bg:rgba(11,20,23,.86);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
    --card-shadow:rgba(0,0,0,.35);
    --lift-shadow:0 14px 34px rgba(0,0,0,.5);
    --phone-frame:#03080a;
    --phone-shadow:0 2px 4px rgba(0,0,0,.4),0 30px 60px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
body.theme-dark{
  --bg:#0b1417; --surface:#121f23; --ink:#e6eef1; --ink-soft:#a0b2b8;
  --accent:#5bbcd6; --accent-ink:#04161b; --accent-soft:#15303a; --accent-red:#ff7a66;
  --tint:#11232a; --tint-2:#17303a;
  --alarm:#ff7a66; --alarm-soft:#2e1a17;
  --border:#243f48; --border-soft:rgba(230,238,241,.08); --btn-secondary-bg:#1a2d33;
  --header-bg:rgba(11,20,23,.86);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  --card-shadow:rgba(0,0,0,.35);
  --lift-shadow:0 14px 34px rgba(0,0,0,.5);
  --phone-frame:#03080a;
  --phone-shadow:0 2px 4px rgba(0,0,0,.4),0 30px 60px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
body.theme-light{
  --bg:#f3f6f7; --surface:#ffffff; --ink:#0f1d22; --ink-soft:#4a5a60;
  --accent:#1f6478; --accent-ink:#ffffff; --accent-soft:#dcebf0; --accent-red:#c2352b;
  --tint:#e4eef1; --tint-2:#d3e3e9;
  --alarm:#c2352b; --alarm-soft:#fbe7e3;
  --border:#d3dfe3; --border-soft:rgba(15,29,34,.08); --btn-secondary-bg:#e5ecef;
  --header-bg:rgba(243,246,247,.86);
  --shadow:0 1px 2px rgba(15,35,42,.06),0 10px 28px rgba(15,35,42,.07);
  --card-shadow:rgba(15,35,42,.08);
  --lift-shadow:0 14px 34px rgba(15,35,42,.13);
  --phone-frame:#0f1d22;
  --phone-shadow:0 2px 4px rgba(15,35,42,.10),0 30px 60px -12px rgba(15,35,42,.30);
  color-scheme:light;
}


/* =====================================================================
   2. Gemeinsam - Startseite und Rechtstexte
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;padding-top:64px}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------------
   EINHEITLICHE MASSE (Familie): Kopfzeile 64px, Inhalt ab 64px,
   Sprungziele 76px, Klappmenue bei 64px, Fuss 1px Strich 28px/40px.
   Reihenfolge: Wortmarke - Navigation - Farbmodus - Sprachwahl - Knopf - Menue.
   .navlinks traegt margin-inline:auto; die Wortmarke hat KEIN margin-right:auto.
   --------------------------------------------------------------------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header-bg);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border-soft)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-decoration:none;
  color:var(--ink);font-size:21px;white-space:nowrap}
/* Der Punkt gehoert zur Wortmarke "CanisCare." und traegt die Markenfarbe. */
.brand .dot{color:var(--accent);margin-left:.02em}
.navlinks{display:flex;align-items:center;gap:2px;margin-inline:auto}
.navlinks a{text-decoration:none;color:var(--ink-soft);font-size:16px;padding:12px 14px;
  border-radius:10px;min-height:48px;display:flex;align-items:center;
  transition:color .18s ease,background-color .18s ease}
@media (hover:hover) and (pointer:fine){
  .navlinks a:hover{color:var(--ink);background:var(--btn-secondary-bg)}
}

/* Knoepfe: ein Radius fuer alles Drueckbare (12px); Flaechen 20px. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 20px;border-radius:12px;font:inherit;font-weight:700;
  font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--ink);border:1.5px solid var(--border);
  transition:transform .16s var(--ease-out),border-color .18s ease,background-color .18s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn i{font-size:.95em}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--ink-soft)}
  .btn-primary:hover{filter:brightness(1.07);border-color:var(--accent)}
}

.iconbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;
  display:grid;place-content:center;
  transition:border-color .18s ease,color .18s ease,transform .16s var(--ease-out)}
.iconbtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .iconbtn:hover{border-color:var(--accent);color:var(--accent)}
}
.burger{display:none}

/* Sprachwahl. NUR auf den Startseiten, zweimal im Markup (Leiste + Klappliste). */
.lang-switch{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.04em}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:4px 2px;
  border-bottom:2px solid transparent;transition:color .18s ease}
.lang-switch a.active{color:var(--ink);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--border)}
@media (hover:hover) and (pointer:fine){ .lang-switch a:hover{color:var(--accent)} }

@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px 16px 16px;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:0 12px 24px var(--card-shadow)}
  .navlinks.open{display:flex}
  .nav > .brand{margin-right:auto}
  .nav > .btn{display:none}
  .navlinks a.cta-menu{display:flex;justify-content:center;width:100%;margin-top:12px;color:var(--accent-ink)}
  .nav > .lang-switch{display:none}
  .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px}
}
@media (min-width:861px){
  .navlinks .lang-switch{display:none}
  .navlinks a.cta-menu{display:none}
}

/* FUSSZEILE - Wortmarke, Abstand, vier Rechtstexte, ganz aussen Hilfe.
   Kein "Startseite", kein "Kontakt", keine Sprachwahl, kein Betreibersatz. */
footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--ink-soft);font-size:15px}
footer .fl{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
footer .fl > a{white-space:nowrap}
footer .brand-sm{white-space:nowrap;flex:0 0 auto;font-size:18px}
@media (max-width:640px){
  footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px}
  footer .grow{display:none}
  footer .brand-sm{flex:0 0 100%}
}
footer a{color:var(--ink-soft);text-decoration:none}
footer a.brand{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ footer a:hover{color:var(--ink)} }

/* HILFE - Panel von rechts, hilfe_<sprache>.html im iframe, nur vom Fuss aus. */
.help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(4,12,10,.5);
  display:none;opacity:0;transition:opacity .3s ease}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;
  background:var(--surface);border-left:1px solid var(--border);z-index:1100;
  display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform .34s var(--ease-drawer),visibility 0s linear .34s}
.help-panel.open{transform:translateX(0);visibility:visible;box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);
  transition:transform .34s var(--ease-drawer),visibility 0s}
@media (max-width:800px){ .help-panel{width:100%;max-width:none;min-width:0} }
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.help-panel-header h3{margin:0;font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink)}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)}
.help-close{width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--ink);
  font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-content:center}
@media (hover:hover) and (pointer:fine){ .help-close:hover{border-color:var(--accent);color:var(--accent)} }


/* =====================================================================
   3. Nur die Startseite (index.asp, index_en.asp, index_es.asp)
   ===================================================================== */
.page-home main{overflow-x:clip}
.page-home section{padding:96px 0}
.page-home section[id]{scroll-margin-top:76px}
.page-home h1,.page-home h2,.page-home h3{font-family:var(--display);color:var(--ink);text-wrap:balance}
.page-home h2{font-size:clamp(30px,4.2vw,48px);line-height:1.05;font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
.page-home h3{font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.page-home .lead{color:var(--ink-soft);max-width:60ch;margin:0 0 44px;font-size:19px}
.page-home p{max-width:65ch}

/* --- HERO -------------------------------------------------------------
   Ueberschrift ueber die volle Breite (zwei Zeilen auf dem Desktop),
   darunter links Text und Knoepfe, rechts zwei Telefone mit echten
   Screenshots. .hero traegt zugleich .wrap - nur Longhand-padding. */
.page-home .hero{padding-top:56px;padding-bottom:40px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title" "copy stage";
  column-gap:48px;align-items:start}
.page-home .hero h1{grid-area:title;font-size:clamp(40px,5.8vw,74px);line-height:1.02;
  font-weight:800;letter-spacing:-.035em;margin:0 0 36px;max-width:22ch}
.page-home .hero-copy{grid-area:copy;padding-top:8px}
.page-home .hero p.sub{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--ink-soft);margin:0 0 30px;max-width:34ch}
.page-home .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-home .hero-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:40px 0 0;padding:0;list-style:none}
.page-home .hero-facts li{display:flex;flex-direction:column;gap:2px}
.page-home .hero-facts b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.page-home .hero-facts span{font-size:15px;color:var(--ink-soft)}
.page-home .hero-stage{grid-area:stage;position:relative;min-height:560px}

/* Telefon: Rahmen um einen echten Screenshot der App (images/site/<sprache>/). */
.phone{position:relative;width:268px;border-radius:40px;padding:9px;background:var(--phone-frame);
  box-shadow:var(--phone-shadow)}
.phone img{width:100%;height:auto;border-radius:31px;aspect-ratio:390/844;object-fit:cover;object-position:top}
.page-home .hero-stage .phone-back{position:absolute;top:30px;left:4%;transform:rotate(-7deg);width:238px;opacity:.96}
.page-home .hero-stage .phone-front{position:absolute;top:0;right:6%;transform:rotate(3deg)}
@media (prefers-reduced-motion:no-preference){
  .page-home .hero-stage .phone-front{animation:rise-front .9s var(--ease-out) both .1s}
  .page-home .hero-stage .phone-back{animation:rise-back .9s var(--ease-out) both .25s}
}
@keyframes rise-front{from{opacity:0;transform:translateY(28px) rotate(5deg)}to{opacity:1;transform:rotate(3deg)}}
@keyframes rise-back{from{opacity:0;transform:translateY(34px) rotate(-10deg)}to{opacity:.96;transform:rotate(-7deg)}}

/* --- IM ERNSTFALL: drei Schritte (Reihenfolge traegt Bedeutung) -------- */
.page-home #erste-stunde{background:var(--tint)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding-top:64px;border-top:2px solid var(--border)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:14px;left:0;
  font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--accent)}
.steps li:first-child{border-top-color:var(--alarm)}
.steps li:first-child::before{color:var(--alarm)}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--ink-soft)}

/* --- BENTO: sieben Dinge, sieben Zellen (4 x 3) ---------------------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);gap:16px}
.tile{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:20px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow)}
}
.tile .ico{width:44px;height:44px;border-radius:12px;display:grid;place-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:19px;margin-bottom:18px;flex:0 0 auto}
.tile p{margin:0;color:var(--ink-soft);font-size:16px}
.tile .big{font-family:var(--display);font-weight:800;font-size:56px;line-height:.95;letter-spacing:-.03em;margin:0 0 6px}
.tile-emergency{grid-column:span 2;grid-row:span 2;background:var(--alarm-soft);border-color:transparent}
.tile-emergency .ico{background:var(--alarm);color:#fff}
.tile-emergency .big{color:var(--alarm)}
.tile-checklists{grid-row:span 2;background:var(--tint)}
.tile-wide{grid-column:span 2}
.tile-shot{margin:24px -26px -26px auto;width:78%;max-width:300px;align-self:flex-end;
  border-radius:24px 24px 0 0;padding:8px 8px 0;background:var(--phone-frame);flex:1 1 auto;
  display:flex;height:260px;overflow:hidden}
.tile-shot img{border-radius:17px 17px 0 0;width:100%;height:100%;object-fit:cover;object-position:top}
.tile-emergency .tile-shot{width:58%;max-width:320px;height:300px}
.tile-checklists .tile-shot{width:88%;height:300px}

/* --- REGISTER: sechs Koerperbereiche wie die Reiter eines Ordners ------ */
.register{margin:0;padding:0;list-style:none;border-top:1px solid var(--border)}
.register li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;gap:8px 28px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--border)}
.register h3{margin:0;font-size:22px}
.register p{margin:0;color:var(--ink-soft);font-size:16px}
.register .count{display:flex;align-items:baseline;gap:10px;justify-self:end;white-space:nowrap}
.register .count b{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.pill{display:inline-block;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pill.free{background:var(--btn-secondary-bg);color:var(--ink-soft)}

/* --- AUFBAU EINER KRANKHEIT: Telefon links, neun Abschnitte rechts ----- */
.anatomy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.anatomy .phone{margin:0 auto;position:sticky;top:100px}
.sections{margin:0;padding:0;list-style:none;counter-reset:sec;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.sections li{counter-increment:sec;padding:18px 0 18px 48px;border-top:1px solid var(--border);position:relative}
.sections li::before{content:counter(sec);position:absolute;left:0;top:16px;width:32px;height:32px;border-radius:50%;
  display:grid;place-content:center;background:var(--accent-soft);color:var(--accent);
  font-family:var(--display);font-weight:800;font-size:16px}
.sections li.stop::before{background:var(--alarm-soft);color:var(--alarm)}
.sections b{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sections span{color:var(--ink-soft);font-size:16px}

/* --- HINWEIS: ein Satz ueber die volle Breite -------------------------- */
.page-home #hinweis{background:var(--accent);color:var(--accent-ink)}
.page-home #hinweis h2{color:var(--accent-ink);font-size:clamp(34px,5vw,64px);max-width:16ch;margin-bottom:22px}
.page-home #hinweis p{color:var(--accent-ink);opacity:.9;font-size:19px;max-width:58ch;margin:0 0 12px}
.page-home #hinweis a{color:var(--accent-ink);font-weight:700}
.page-home #hinweis .ico-big{font-size:34px;margin-bottom:26px;display:block;opacity:.9}

/* --- PREISE: eine Tafel, drei Spalten, keine drei gleichen Karten ------ */
.price-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.tier{padding:32px 28px 30px;display:flex;flex-direction:column;border-left:1px solid var(--border)}
.tier:first-child{border-left:0}
.tier.featured{background:var(--tint)}
.tier .name{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.tier .amount{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.03em;line-height:1;margin:0}
.tier .per{color:var(--ink-soft);font-size:15px;margin:6px 0 22px}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tier li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:16px;color:var(--ink)}
.tier li i{color:var(--accent);margin-top:4px}
.price-note{margin:24px 0 0;color:var(--ink-soft);font-size:16px}
.price-note b{color:var(--ink)}

/* --- FRAGEN: aufklappbar ---------------------------------------------- */
.faq{max-width:820px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;min-height:48px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--accent);transition:transform .25s var(--ease-out);flex:0 0 auto}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details p{margin:0 0 22px;color:var(--ink-soft)}

/* --- SCHLUSS ------------------------------------------------------------ */
.closing{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.closing-icon{width:clamp(110px,13vw,150px);aspect-ratio:1;border-radius:24%;overflow:hidden;box-shadow:var(--phone-shadow)}
.closing-icon img{width:100%;height:100%;object-fit:cover}
.closing p{color:var(--ink-soft);margin:0 0 26px;font-size:19px;max-width:46ch}

/* --- Auftritt beim Scrollen (js/site.js vergibt .reveal / .in) ---------- */
.page-home .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.page-home .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page-home .reveal{opacity:1;transform:none;transition:none}
  .tile,.btn,.faq summary i{transition:none}
}

/* --- Tablet ---------------------------------------------------------------- */
@media (max-width:980px){
  .page-home section{padding:80px 0}
  .page-home .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "copy" "stage";padding-top:40px}
  .page-home .hero h1{margin-bottom:22px}
  .page-home .hero-stage{min-height:0;height:520px;max-width:520px;width:100%;margin:40px auto 0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-emergency{grid-column:span 2;grid-row:auto}
  .tile-checklists{grid-row:span 2}
  .anatomy{grid-template-columns:minmax(0,1fr);gap:40px}
  .anatomy .phone{position:relative;top:0}
  .register li{grid-template-columns:minmax(0,1fr) auto}
  .register li p{grid-column:1 / -1;grid-row:2}
}
/* --- Telefon --------------------------------------------------------------- */
@media (max-width:640px){
  body{font-size:17px}
  .page-home section{padding:64px 0}
  .page-home .lead{font-size:18px;margin-bottom:32px}
  .page-home .hero-stage{height:440px;margin-top:32px}
  .phone{width:220px;border-radius:34px;padding:8px}
  .phone img{border-radius:26px}
  .page-home .hero-stage .phone-back{width:188px;left:0;top:34px}
  .page-home .hero-stage .phone-front{right:0}
  .page-home .hero-facts b{font-size:26px}
  .steps{grid-template-columns:minmax(0,1fr);gap:24px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .tile-emergency,.tile-wide{grid-column:auto}
  .tile-checklists{grid-row:auto}
  .tile .big{font-size:48px}
  .sections{grid-template-columns:minmax(0,1fr)}
  .register li{grid-template-columns:minmax(0,1fr)}
  .register h3{font-size:20px}
  .register .count{justify-self:start;grid-row:2}
  .register li p{grid-row:3}
  .price-board{grid-template-columns:minmax(0,1fr)}
  .tier{border-left:0;border-top:1px solid var(--border)}
  .tier:first-child{border-top:0}
  .closing{grid-template-columns:minmax(0,1fr);gap:24px}
  .faq summary{font-size:18px}
}


/* =====================================================================
   4. Nur die Rechtstexte (.page-legal)
   ===================================================================== */
.page-legal main{padding:56px 0 72px}
.page-legal .legal{max-width:78ch;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.page-legal .legal h1{font-family:var(--display);font-size:clamp(28px,7.4vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0 0 10px}
.page-legal .legal .stand{color:var(--ink-soft);font-size:15px;margin:0 0 34px}
.page-legal .legal h2{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.015em;margin:44px 0 12px;
  padding-top:28px;border-top:1px solid var(--border)}
.page-legal .legal h2:first-of-type{border-top:none;padding-top:0}
.page-legal .legal h3{font-family:var(--display);font-size:18.5px;font-weight:700;margin:26px 0 8px}
.page-legal .legal p,.page-legal .legal ul,.page-legal .legal ol{
  color:var(--ink-soft);font-size:17px;line-height:1.65;margin:0 0 14px}
.page-legal .legal ul,.page-legal .legal ol{padding-left:22px}
.page-legal .legal li{margin-bottom:7px}
.page-legal .legal strong{color:var(--ink)}
.page-legal .legal code{font-family:var(--num);font-size:.92em;background:var(--accent-soft);
  padding:2px 6px;border-radius:4px}
.page-legal .legal .box{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 20px}
.page-legal .toc{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);padding:18px 24px;margin:0 0 38px}
.page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:16px;line-height:1.7}
.page-legal .toc a{text-decoration:none}
.page-legal .toc a:hover{text-decoration:underline}
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px}
@media (max-width:640px){
  .page-legal .toc ol{columns:1}
  .page-legal .toc{padding:16px 18px}
  .page-legal .legal .box{padding:16px}
}