/* DSGVO: Figtree is self-hosted — no request to fonts.gstatic.com,
     so no visitor IP is transferred to Google (LG München I, 3 O 17493/20).
     Files are the identical binaries the app bundles; licence: assets/fonts/OFL.txt. */
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Figtree-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Figtree-Medium.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Figtree-SemiBold.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Figtree-Bold.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/Figtree-ExtraBold.ttf') format('truetype');
  }

  /* ════════════════════════════════════════════════════════════════
     Digitale Engel — Landingpage
     Palette aus der Fotostrecke: Tannengruen, warmes Holz, Cremeweiss.
     Genau ein Akzent: Ziegelrot. Ein Theme: Licht.
     Barrierefreiheit: Fliesstext >= 20px, Zeilenhoehe 1.6, linksbuendig,
     Ziele >= 44px, keine Magergewichte, keine Versalien im Lesetext.
     ════════════════════════════════════════════════════════════════ */
  :root {
    --paper:#F4F1EA; --card:#FBF9F4; --paper-warm:#EDE8DD;
    --pine:#1A382C; --pine-soft:#25493B;
    --ink:#1D2522; --ink-mid:#3D4D47; --ink-faint:#5E776D;
    --brick:#A8391C; --brick-deep:#8E2F16;
    --line:#DED8CA; --line-dark:rgba(244,241,234,.16);
    --shell: 78rem;
    --font:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
    --ease:cubic-bezier(.22,.61,.36,1);
    --snap:cubic-bezier(.34,1.4,.64,1);
    --shadow:0 1.5rem 3rem -1.5rem rgba(33,36,30,.22);
    --shadow-lift:0 2.5rem 5rem -2rem rgba(33,36,30,.3);
  }

  *,*::before,*::after { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
  body {
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font); font-size:1.25rem; line-height:1.6;
    font-weight:400; -webkit-font-smoothing:antialiased;
  }
  img { display:block; max-width:100%; height:auto; }
  h1,h2,h3,h4 { margin:0; line-height:1.1; letter-spacing:-.022em; font-weight:800; }
  p { margin:0; }
  a { color:inherit; }
  :focus-visible { outline:3px solid var(--brick); outline-offset:3px; border-radius:4px; }

  .shell { width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }
  @media (min-width:60rem){ .shell { width:min(100% - 5rem, var(--shell)); } }

  .skip {
    position:absolute; left:1rem; top:-6rem; z-index:100;
    background:var(--brick); color:#fff; padding:1rem 1.5rem;
    border-radius:999px; text-decoration:none; font-weight:700;
    transition:top .2s var(--ease);
  }
  .skip:focus { top:1rem; }

  /* ── Typografie-Skala ───────────────────────────────────────── */
  .h-hero { font-size:clamp(3rem,7.4vw,4.75rem); font-weight:800; }
  .h-hero .accent { color:var(--brick); display:block; }
  .h-sec { font-size:clamp(2.25rem,4.4vw,3.25rem); }
  .h-sec .accent { color:var(--brick); display:block; }
  .h-sub { font-size:1.375rem; font-weight:700; letter-spacing:-.012em; }
  .lead { font-size:clamp(1.3125rem,1.8vw,1.5rem); color:var(--ink-mid); line-height:1.55; }
  .measure { max-width:42ch; }
  .muted { color:var(--ink-mid); }

  /* Kleines Vorspann-Label. Bewusst KEINE Versalien: gesperrte
     Kleinbuchstaben tragen dieselbe Rolle und bleiben lesbar. */
  .eyebrow {
    display:block; font-size:1rem; font-weight:700; color:var(--brick);
    letter-spacing:.16em; margin-bottom:1.125rem;
  }

  /* ── Knoepfe ────────────────────────────────────────────────── */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
    min-height:3.75rem; padding:1rem 2rem; border-radius:999px;
    font-size:1.1875rem; font-weight:700; text-decoration:none;
    border:2px solid transparent; cursor:pointer;
    transition:transform .3s var(--snap), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
  }
  .btn svg { flex:none; }
  .btn-fill { background:var(--brick); color:#fff; box-shadow:0 .75rem 1.5rem -.75rem rgba(168,57,28,.6); }
  .btn-fill:hover { background:var(--brick-deep); transform:translateY(-2px); box-shadow:0 1.25rem 2rem -.85rem rgba(168,57,28,.65); }
  .btn-line { border-color:var(--brick); color:var(--brick); background:transparent; }
  .btn-line:hover { background:rgba(168,57,28,.07); transform:translateY(-2px); }
  .btn-dark { background:var(--pine); color:var(--paper); }
  .btn-dark:hover { background:var(--pine-soft); transform:translateY(-2px); }
  .btn:active { transform:translateY(0) scale(.985); }

  /* ── Kopfzeile ──────────────────────────────────────────────── */
  .nav {
    position:sticky; top:0; z-index:60; background:rgba(244,241,234,.86);
    backdrop-filter:blur(14px); border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .nav.stuck { border-bottom-color:var(--line); box-shadow:0 .5rem 1.5rem -1rem rgba(33,36,30,.25); }
  .nav-in { display:flex; align-items:center; gap:1.5rem; min-height:5.5rem; }
  .brand { display:inline-flex; align-items:center; min-height:44px; gap:.85rem; text-decoration:none; font-weight:800; font-size:1.3125rem; letter-spacing:-.02em; flex:none; }
  .brand-mark { width:3.4rem; height:auto; }
  .nav-links { display:none; margin-inline:auto; gap:2.25rem; }
  .nav-links a { text-decoration:none; font-size:1.0625rem; font-weight:600; color:var(--ink-mid); min-height:44px; display:inline-flex; align-items:center; position:relative; }
  .nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:.55rem; height:2px; background:var(--brick); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
  .nav-links a:hover { color:var(--ink); }
  .nav-links a:hover::after { transform:scaleX(1); }
  .nav-cta { display:none; }
  @media (min-width:64rem){ .nav-links { display:flex; } .nav-cta { display:inline-flex; min-height:3.25rem; padding:.75rem 1.6rem; font-size:1.0625rem; } }
  .nav-mini { margin-left:auto; white-space:nowrap; }
  @media (min-width:64rem){ .nav-mini { display:none; } }

  /* ── Held ───────────────────────────────────────────────────── */
  .hero { display:grid; gap:2.5rem; padding-block:clamp(2.5rem,5vw,4rem) 0; align-items:center; }
  .hero > * { min-width:0; }
  .hero-text > * + * { margin-top:1.5rem; }
  .hero-sub { font-size:1.375rem; font-weight:700; color:var(--pine); }
  .hero-actions { display:flex; flex-wrap:wrap; gap:1rem; }
  .hero-trust { display:flex; flex-wrap:wrap; gap:1rem 2rem; padding-top:.75rem; }
  .hero-trust span { display:inline-flex; align-items:center; gap:.6rem; font-size:1rem; font-weight:600; color:var(--ink-mid); }
  .hero-trust svg { flex:none; color:var(--brick); }

  .hero-media { position:relative; }
  .hero-media img {
    width:100%; height:clamp(20rem,58vw,34rem); object-fit:cover; object-position:50% 42%;
    border-radius:2rem;
  }
  .call-card {
    position:absolute; left:1rem; right:1rem; bottom:-2.5rem;
    background:var(--card); border:1px solid var(--line); border-radius:1.25rem;
    padding:1rem 1.25rem; box-shadow:var(--shadow-lift);
    display:flex; align-items:center; gap:.9rem;
  }
  .call-card .status { font-size:.9375rem; font-weight:600; color:var(--ink-mid); }
  .call-card .who { display:flex; align-items:center; gap:.75rem; margin-top:.6rem; }
  .call-card .who img { width:3rem; height:3rem; border-radius:50%; object-fit:cover; object-position:50% 22%; flex:none; }
  .call-card .who b { display:block; font-size:1.0625rem; font-weight:700; line-height:1.2; }
  .call-card .who small { display:block; font-size:.9375rem; color:var(--ink-mid); }
  .call-card .ring { margin-left:auto; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--brick); color:#fff; display:grid; place-items:center; flex:none; }
  .pulse { width:.5rem; height:.5rem; border-radius:50%; background:var(--brick); display:inline-block; margin-right:.5rem; animation:pulse 2s var(--ease) infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

  @media (min-width:60rem){
    .hero { grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:4rem; padding-block:clamp(3rem,5vw,5rem) 7rem; }
    .hero-media { margin-right:calc(min(50vw - 2.5rem, 39rem) - 50vw); }
    .hero-media img { height:clamp(30rem,44vw,38rem); border-radius:20rem 0 0 20rem; }
    .call-card { left:auto; right:calc(50vw - min(50vw - 2.5rem, 39rem) + 1.5rem); bottom:16%; width:20rem; display:block; }
  }

  /* ── Dunkles Leistungsband ──────────────────────────────────── */
  .bar-wrap { margin-top:clamp(4rem,7vw,5.5rem); position:relative; z-index:2; }
  @media (min-width:60rem){ .bar-wrap { margin-top:-3rem; } }
  .bar {
    background:var(--pine); color:var(--paper); border-radius:1.75rem;
    padding:clamp(2rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.5rem);
    display:grid; gap:2rem; box-shadow:var(--shadow);
  }
  @media (min-width:40rem){ .bar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:64rem){ .bar { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; } }
  .bar-item { text-align:center; }
  .bar-ico {
    width:3.75rem; height:3.75rem; margin:0 auto 1rem; border-radius:50%;
    border:2px solid rgba(244,241,234,.32); display:grid; place-items:center;
    color:#E8B4A0; transition:border-color .3s var(--ease), transform .3s var(--snap);
  }
  .bar-item:hover .bar-ico { border-color:#E8B4A0; transform:translateY(-3px); }
  .bar-item b { display:block; font-size:1.125rem; font-weight:700; }
  .bar-item span { display:block; font-size:1rem; color:rgba(244,241,234,.8); margin-top:.3rem; }

  /* ── Abschnitte ─────────────────────────────────────────────── */
  section { padding-block:clamp(4.5rem,8vw,7rem); }
  .split { display:grid; gap:3rem; align-items:center; }
  .split > * { min-width:0; }
  @media (min-width:62rem){ .split { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:4.5rem; } }
  .split-text > * + * { margin-top:1.5rem; }

  .checks { display:grid; gap:.85rem; }
  .checks li { display:flex; align-items:flex-start; gap:.85rem; font-size:1.125rem; }
  .checks svg { flex:none; margin-top:.35rem; color:var(--brick); }
  ul.checks { list-style:none; margin:0; padding:0; }
  /* Der Listen-Reset oben ist spezifischer als `.split-text > * + *` und
     hat dessen Abstand ausgehebelt — die Liste klebte am Absatz. */
  .split-text > ul.checks { margin-top:1.75rem; }

  /* Telefon-Attrappe mit umschwebenden Themenchips */
  .phone-scene { position:relative; display:grid; place-items:center; gap:1rem; }
  /* ── Telefon-Attrappe ────────────────────────────────────────
     Gehaeuse, Dynamic Island und die Anruf-Oberflaeche sind CSS und SVG,
     nicht ins Foto eingebrannt: so bleiben sie auf jedem Display scharf
     und die Texte sind echte Zeichen, keine Pixel. Alles rein dekorativ
     und per aria-hidden aus dem Vorlesefluss genommen. */
  .phone {
    position:relative; width:min(17rem,72vw); flex:none;
    background:linear-gradient(150deg,#2A4E3F 0%,#192B24 38%,#121E19 100%);
    border-radius:3rem; padding:.5rem;
    box-shadow:var(--shadow-lift), inset 0 0 0 1px rgba(255,255,255,.14);
  }
  /* Seitentasten */
  .phone::before, .phone::after {
    content:""; position:absolute; width:.17rem; border-radius:1rem;
    background:linear-gradient(180deg,#36584B,#1A2C24);
  }
  .phone::before { left:-.17rem; top:26%; height:9%; box-shadow:0 2.6rem 0 #1A382C, 0 4.6rem 0 #1A382C; }
  .phone::after { right:-.17rem; top:31%; height:12%; }

  .phone-screen {
    width:100%; aspect-ratio:9/19.3; border-radius:2.55rem;
    overflow:hidden; position:relative; background:var(--pine-soft);
  }
  .phone-screen > img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; }

  /* Abdunklung, damit die weisse Oberflaeche auf jedem Bildinhalt traegt */
  .ui-scrim { position:absolute; left:0; right:0; pointer-events:none; }
  .ui-scrim.top { top:0; height:40%; background:linear-gradient(180deg,rgba(12,15,11,.72) 0%,rgba(12,15,11,.54) 25%,rgba(12,15,11,.38) 50%,transparent 100%); }
  .ui-scrim.bot { bottom:0; height:32%; background:linear-gradient(0deg,rgba(12,15,11,.72) 0%,rgba(12,15,11,.34) 50%,transparent 100%); }

  .ui-island {
    position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
    width:31%; height:1.2rem; border-radius:999px; background:#050704;
  }
  .ui-status {
    position:absolute; top:.78rem; left:0; right:0; padding-inline:1.15rem;
    display:flex; align-items:center; justify-content:space-between;
    color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.01em;
  }
  .ui-status .ic { display:inline-flex; align-items:center; gap:.22rem; }

  .ui-caller {
    position:absolute; top:2.6rem; left:0; right:0; text-align:center; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .ui-caller b { display:block; font-size:1rem; font-weight:700; letter-spacing:-.01em; }
  .ui-caller span { display:block; font-size:.75rem; font-weight:500; color:rgba(255,255,255,.88); margin-top:.12rem; }

  /* Selbstansicht: der Senior sieht sich klein in der Ecke */
  .ui-self {
    position:absolute; right:.6rem; bottom:4.4rem; width:3.1rem; aspect-ratio:3/4;
    border-radius:.7rem; overflow:hidden; box-shadow:0 .4rem .9rem -.3rem rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.3);
  }
  .ui-self img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; }

  .phone-controls { position:absolute; left:0; right:0; bottom:1.15rem; display:flex; justify-content:center; gap:.55rem; }
  .phone-controls span {
    width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.22); color:#fff;
    backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  }
  .phone-controls .end { background:var(--brick); color:#fff; box-shadow:0 .4rem .9rem -.3rem rgba(168,57,28,.8); }
  .chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
  .chip {
    display:inline-flex; align-items:center; gap:.65rem;
    background:var(--card); border:1px solid var(--line); border-radius:1rem;
    padding:.8rem 1.15rem; font-size:1rem; font-weight:600;
    box-shadow:0 .5rem 1.25rem -.85rem rgba(33,36,30,.3);
  }
  .chip svg { flex:none; color:var(--brick); }
  /* Drei Spalten erst, wenn die Chips links und rechts wirklich passen.
     Bei 62rem quetschte die rechte Spalte ueber den Viewport hinaus. */
  @media (min-width:75rem){
    .phone-scene { grid-template-columns:minmax(0,auto) auto minmax(0,auto); align-items:center; gap:1.25rem; }
    .chips { flex-direction:column; align-items:stretch; }
    .chips-l { align-items:flex-end; }
  }

  /* ── Ablauf in drei Schritten ───────────────────────────────── */
  .panel {
    background:var(--card); border:1px solid var(--line); border-radius:1.75rem;
    padding:clamp(2rem,4vw,3.5rem);
  }
  .steps-head { text-align:center; }
  .steps-head .eyebrow { margin-inline:auto; }
  .steps-grid { display:grid; gap:1.25rem; margin-top:clamp(2rem,4vw,3rem); align-items:stretch; }
  @media (min-width:56rem){ .steps-grid { grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; } }
  .step {
    position:relative; background:var(--paper-warm); border-radius:1.25rem;
    padding:2.5rem 1.75rem 1.75rem; text-align:center; height:100%;
    transition:transform .35s var(--snap), box-shadow .35s var(--ease);
  }
  .step:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .step-n {
    position:absolute; top:-1.1rem; left:1.5rem; width:2.5rem; height:2.5rem;
    border-radius:50%; background:var(--pine); color:var(--paper);
    display:grid; place-items:center; font-weight:800; font-size:1.125rem;
  }
  .step-ico { color:var(--brick); margin:0 auto 1.15rem; }
  .step h3 { margin-bottom:.65rem; }
  .step p { font-size:1.0625rem; color:var(--ink-mid); }
  .arrow { display:none; color:var(--ink-faint); }
  @media (min-width:56rem){ .arrow { display:block; } }

  /* ── Engel werden ───────────────────────────────────────────── */
  .engel-band { background:var(--paper-warm); border-top:1px solid var(--line); margin-top:clamp(3rem,6vw,4.5rem); }
  .engel { position:relative; }
  .engel-media img { width:100%; height:clamp(18rem,42vw,28rem); object-fit:cover; object-position:50% 40%; border-radius:1.75rem; }
  .mini { display:grid; gap:.9rem 1.5rem; }
  @media (min-width:32rem){ .mini { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .mini div { display:flex; align-items:center; gap:.65rem; font-size:1.0625rem; color:var(--ink-mid); }
  .mini svg { flex:none; color:var(--brick); }
  .badge-70 {
    width:9.5rem; height:9.5rem; border-radius:50%; background:var(--pine); color:var(--paper);
    display:grid; place-items:center; text-align:center; flex:none;
    box-shadow:var(--shadow-lift);
  }
  .badge-70 b { display:block; font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
  .badge-70 span { display:block; font-size:1rem; color:rgba(244,241,234,.75); margin-top:.35rem; }
  .engel-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 2rem; }

  /* ── Preis ──────────────────────────────────────────────────── */
  .price-grid { display:grid; gap:1.25rem; margin-top:clamp(2rem,4vw,3rem); }
  @media (min-width:52rem){ .price-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch; } }
  .price-poster {
    background:var(--pine); color:var(--paper); border-radius:1.75rem;
    padding:clamp(2rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center;
  }
  .price-poster .n { font-size:clamp(4.5rem,11vw,7rem); font-weight:800; line-height:.9; letter-spacing:-.04em; }
  .price-poster .n small { display:block; font-size:1.375rem; font-weight:700; letter-spacing:0; color:rgba(244,241,234,.8); margin-bottom:.35rem; }
  .price-poster .u { font-size:1.375rem; font-weight:700; margin-top:.75rem; }
  .price-poster .note { font-size:1.0625rem; color:rgba(244,241,234,.8); margin-top:1rem; }
  .ledger { list-style:none; margin:0; padding:0; display:grid; gap:0; }
  .ledger li { display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--line); font-size:1.0625rem; color:var(--ink-mid); }
  .ledger li:last-child { border-bottom:0; }
  .ledger svg { flex:none; margin-top:.3rem; color:var(--brick); }
  .ledger b { color:var(--ink); }

  /* ── Fragen ─────────────────────────────────────────────────── */
  .faq-list { margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
  .faq-list details { border-bottom:1px solid var(--line); }
  .faq-list summary {
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:1.5rem;
    padding:1.65rem 0; font-size:1.1875rem; font-weight:700; min-height:44px;
  }
  .faq-list summary::-webkit-details-marker { display:none; }
  .faq-list summary svg { flex:none; margin-left:auto; color:var(--brick); transition:transform .35s var(--snap); }
  .faq-list details[open] summary svg { transform:rotate(45deg); }
  .faq-list .ans { padding-bottom:1.65rem; color:var(--ink-mid); font-size:1.0625rem; max-width:68ch; }
  .faq-list .ans p + p { margin-top:.85rem; }

  /* ── Vertrauensband ─────────────────────────────────────────── */
  .trust { display:grid; gap:1.75rem; }
  @media (min-width:40rem){ .trust { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:64rem){ .trust { grid-template-columns:repeat(4,minmax(0,1fr)); } }
  .trust > div { display:flex; align-items:flex-start; gap:.9rem; }
  .trust svg { flex:none; margin-top:.15rem; color:var(--brick); }
  .trust b { display:block; font-size:1.0625rem; font-weight:700; }
  .trust span { display:block; font-size:1rem; color:var(--ink-mid); margin-top:.15rem; }
  .trust-title { text-align:center; font-size:1.375rem; font-weight:700; margin-bottom:2rem; }

  /* ── Laden ──────────────────────────────────────────────────── */
  .get { display:grid; gap:2rem; align-items:center; }
  @media (min-width:56rem){ .get { grid-template-columns:auto minmax(0,1fr) auto; gap:2.5rem; } }
  .get-tile { width:5.5rem; height:5.5rem; border-radius:1.5rem; background:var(--pine); display:grid; place-items:center; flex:none; }
  .get-tile img { width:3.6rem; }
  .get h2 { font-size:clamp(1.75rem,3vw,2.25rem); }
  .get p { color:var(--ink-mid); font-size:1.0625rem; margin-top:.5rem; }
  .stores { display:flex; gap:.85rem; flex-wrap:wrap; }
  .store { display:inline-flex; align-items:center; gap:.8rem; min-height:4rem; padding:.85rem 1.5rem; background:var(--pine); color:var(--paper); text-decoration:none; border-radius:1rem; transition:transform .35s var(--snap), background-color .25s var(--ease); }
  .store:hover { background:var(--pine-soft); transform:translateY(-2px); }
  .store small { display:block; font-size:.8125rem; opacity:.78; line-height:1.2; }
  .store strong { display:block; font-size:1.0625rem; font-weight:700; line-height:1.25; }

  /* ── Fuss ───────────────────────────────────────────────────── */
  footer { background:var(--pine); color:var(--paper); padding-block:clamp(2.5rem,5vw,3.5rem); }
  .foot-in { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }
  .foot-legal { font-size:1rem; color:rgba(244,241,234,.8); max-width:52ch; }
  .foot-nav { display:flex; flex-wrap:wrap; gap:.25rem 1.75rem; margin-left:auto; }
  .foot-nav a { color:rgba(244,241,234,.86); text-decoration:none; font-size:1rem; min-height:44px; display:inline-flex; align-items:center; }
  .foot-nav a:hover { color:#E8B4A0; text-decoration:underline; }

  /* ── Bewegung: nur Einblenden beim Scrollen ─────────────────── */
  .rise { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .rise.on { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; }
    .rise { opacity:1; transform:none; }
  }

  /* ════════════════════════════════════════════════════════════════
     Unterseiten (/fuer-senioren/, /fuer-engel/)
     Bauen auf denselben Bausteinen auf wie die Startseite. Alles hier
     ist zusaetzlich, nichts ueberschreibt die Klassen von oben.
     ════════════════════════════════════════════════════════════════ */

  /* Rueckweg zur Startseite, direkt ueber der Ueberschrift */
  .crumb {
    display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
    font-size:1rem; font-weight:600; color:var(--ink-mid); text-decoration:none;
  }
  .crumb:hover { color:var(--brick); }
  .crumb svg { flex:none; }

  .sub-hero { display:grid; gap:2.5rem; align-items:center; padding-block:clamp(2rem,4vw,3.5rem) clamp(2.5rem,5vw,4rem); }
  .sub-hero > * { min-width:0; }
  .sub-hero-text > * + * { margin-top:1.5rem; }
  .sub-hero-text .crumb + * { margin-top:1rem; }
  .sub-hero h1 { font-size:clamp(2.5rem,5.6vw,4rem); }
  .sub-hero h1 .accent { color:var(--brick); display:block; }
  .sub-hero-media img { width:100%; height:clamp(17rem,40vw,27rem); object-fit:cover; border-radius:2rem; }
  @media (min-width:62rem){
    .sub-hero { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:4rem; }
  }

  /* Zwei gleichrangige Wege: erst lesen, dann anmelden */
  .btn-pair { display:flex; flex-wrap:wrap; gap:1rem; }


  /* Karten-Raster */
  .cards { display:grid; gap:1.25rem; margin-top:clamp(2rem,4vw,3rem); }
  @media (min-width:48rem){ .cards-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:64rem){ .cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .card {
    background:var(--card); border:1px solid var(--line); border-radius:1.5rem;
    padding:1.85rem 1.75rem; height:100%;
    transition:transform .35s var(--snap), box-shadow .35s var(--ease);
  }
  .card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .card-ico { color:var(--brick); margin-bottom:1.15rem; }
  .card h3 { margin-bottom:.6rem; }
  .card p { font-size:1.0625rem; color:var(--ink-mid); }
  .card p + p { margin-top:.75rem; }
  .card ul.checks { margin-top:1rem; }
  .card ul.checks li { font-size:1.0625rem; }

  /* Nummerierter Ablauf, senkrecht — traegt beliebig lange Texte,
     anders als die drei Kacheln der Startseite. */
  .flow { list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0; counter-reset:flow; }
  .flow li { position:relative; padding:0 0 2.25rem 4.25rem; counter-increment:flow; }
  .flow li:last-child { padding-bottom:0; }
  .flow li::before {
    content:counter(flow); position:absolute; left:0; top:0;
    width:2.75rem; height:2.75rem; border-radius:50%;
    background:var(--pine); color:var(--paper);
    display:grid; place-items:center; font-weight:800; font-size:1.125rem;
  }
  .flow li::after {
    content:""; position:absolute; left:1.32rem; top:3.1rem; bottom:.35rem;
    width:2px; background:var(--line);
  }
  .flow li:last-child::after { display:none; }
  .flow b { display:block; font-size:1.1875rem; font-weight:700; letter-spacing:-.012em; }
  .flow p { font-size:1.0625rem; color:var(--ink-mid); margin-top:.45rem; }

  /* Rechenbeispiel: eine Quittung, keine Tabelle */
  .calc { background:var(--paper-warm); border-radius:1.5rem; padding:clamp(1.5rem,3vw,2.25rem); }
  .calc-head { font-size:1.0625rem; font-weight:700; color:var(--ink-mid); margin-bottom:.5rem; }
  .calc-row { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:1.0625rem; }
  .calc-row span:last-child { font-weight:700; white-space:nowrap; }
  .calc-row.total { border-bottom:0; font-size:1.1875rem; }
  .calc-row.total span:last-child { color:var(--brick); font-size:1.375rem; font-weight:800; }
  .calc-note { font-size:1rem; color:var(--ink-mid); margin-top:1rem; }

  /* Hinweiskasten (bewusst NICHT `.note` — der Name gehoert schon
     der Fussnote im Preis-Poster der Startseite). */
  .callout {
    background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brick);
    border-radius:.5rem 1.25rem 1.25rem .5rem; padding:1.35rem 1.6rem;
    font-size:1.0625rem; color:var(--ink-mid);
  }
  .callout b { color:var(--ink); }
  .callout + .callout { margin-top:1rem; }

  /* Abschluss-Aufruf am Seitenende */
  .cta-band {
    background:var(--pine); color:var(--paper); border-radius:1.75rem;
    padding:clamp(2rem,4vw,3.25rem); display:grid; gap:1.75rem; align-items:center;
  }
  @media (min-width:56rem){ .cta-band { grid-template-columns:minmax(0,1fr) auto; gap:3rem; } }
  .cta-band h2 { font-size:clamp(1.875rem,3.4vw,2.5rem); }
  .cta-band p { color:rgba(244,241,234,.82); font-size:1.0625rem; margin-top:.75rem; max-width:52ch; }
  .cta-band .btn-line { border-color:rgba(244,241,234,.55); color:var(--paper); }
  .cta-band .btn-line:hover { background:rgba(244,241,234,.12); border-color:var(--paper); }
  .cta-band :focus-visible { outline-color:#E8B4A0; }