/* Vorsorge-Produktseiten v08 (REFC-494 Teil E): Stilblock der A2-Seite rosenkrieg-navigator.html (z61) unveraendert. */
  :root{--anthrazit:#0F172A;--gold:#B8893C;--weiss:#FFFFFF;--papier:#F8FAFC;
        --text:#475569;--rand:#E2E8F0;--wein:#6B1D2F}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
       color:var(--anthrazit);background:var(--weiss);font-size:18px;line-height:1.6}
  .bahn{max-width:1120px;margin:0 auto;padding:0 28px}
  .satz{max-width:680px}
  h1{font-size:54px;line-height:1.08;font-weight:700;letter-spacing:-.02em}
  h2{font-size:38px;line-height:1.15;font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
  h3{font-size:20px;font-weight:700;margin-bottom:8px}
  p{color:var(--text);margin-bottom:14px}
  .gross{font-size:21px;line-height:1.5}
  .klein{font-size:15px}
  .vor{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
       font-weight:700;margin-bottom:14px}

  .knopf{display:inline-block;border-radius:999px;padding:15px 32px;font-size:17px;font-weight:700;
       text-decoration:none;text-align:center;min-width:190px;max-width:290px;border:2px solid transparent}
  .knopf.voll{background:var(--gold);color:#1A1205}
  .knopf.rand{background:transparent;color:var(--gold);border-color:var(--gold)}
  .knopf.klein{padding:10px 24px;font-size:15px;min-width:0}
  
  @media (hover: hover){
    .knopf{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
    .knopf.voll:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,.18);color:var(--weiss)}
    .knopf.rand:hover{background:var(--gold);color:var(--weiss)}
    .knopf.voll:active,.knopf.rand:active{transform:translateY(0);box-shadow:none}
  }
  .reihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
  .unterknopf{font-size:15px;color:var(--text)}

  header{background:var(--weiss);border-bottom:1px solid var(--rand);position:sticky;top:0;
       z-index:30;padding:14px 0}
  header .bahn{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .marke{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:inherit}
  
  .marke .wappen{height:32px;width:auto;display:block}
  footer .marke .wappen{height:28px}
  nav a{margin-right:22px;text-decoration:none;color:var(--text);font-size:15px}
  
  @media(max-width:880px){header nav{display:none}}
  
  @media(max-width:480px){
    header .bahn{gap:10px}
    header .marke{white-space:nowrap;flex:0 0 auto}
    header .knopf.klein{width:auto;padding:8px 10px;font-size:14px;white-space:nowrap;flex:0 0 auto}
  }
  @media(max-width:400px){
    header .bahn{gap:8px}
    header .marke{gap:8px;font-size:16px}
    header .marke .wappen{height:28px}
    header .knopf.klein{padding:8px 9px;font-size:13px;line-height:1.25;white-space:normal;flex:0 1 auto;min-width:0}
  }
  @media(max-width:340px){
    header .marke{font-size:15px}
    header .knopf.klein{padding:7px 8px;font-size:12px}
  }

  section{padding:82px 0}
  section.papier{background:var(--papier)}
  section.dunkel{background:var(--anthrazit);color:var(--weiss)}
  section.dunkel h2,section.dunkel h3{color:var(--weiss)}
  section.dunkel p{color:#CBD5E1}

  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
  .leitmotiv{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;font-size:15px;
       letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold)}
  .leitmotiv span:not(:last-child):after{content:" ·";color:var(--rand);margin-left:10px}
  .haken{list-style:none;margin:22px 0 0}
  .haken li{padding:5px 0 5px 30px;position:relative;color:var(--text);font-size:17px}
  .haken li:before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:700}
  section.dunkel .haken li{color:#CBD5E1}
  .schirm{border:1px solid var(--rand);border-radius:14px;background:var(--papier);
       overflow:hidden;margin:0;padding:0;max-width:100%}
  .schirm img{display:block;width:100%;height:auto}
  .schirm.deckel{aspect-ratio:16/10}
  .schirm.deckel img{height:100%;object-fit:cover;object-position:top}
  
  .geraet{position:relative;padding-bottom:44px;padding-right:12%}
  .geraet .rechner{border:1px solid var(--rand);border-radius:14px;overflow:hidden;background:var(--papier)}
  .geraet .rechner img{display:block;width:100%;height:auto}
  .geraet .telefon{position:absolute;right:0;bottom:0;width:26%;border:1px solid var(--rand);
       border-radius:14px;overflow:hidden;background:var(--weiss);box-shadow:0 12px 30px rgba(15,23,42,.18)}
  .geraet .telefon img{display:block;width:100%;height:auto}
  
  .tonkarte{border:1px solid var(--rand);border-radius:10px;background:var(--weiss);
       padding:14px 16px;text-align:left;max-width:360px;margin:14px auto 0;font-size:14px;
       display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
  .tonkarte .abspieler{margin:0;border:1px solid var(--rand);border-radius:8px;overflow:hidden;
       background:var(--papier);pointer-events:none;user-select:none}
  .tonkarte .abspieler img{display:block;width:100%;height:auto}
  .tonkarte .titel{font-weight:700;color:var(--anthrazit);font-size:15px}
  .tonzeile{display:flex;align-items:center;gap:10px;margin-top:10px}
  .tonbalken{flex:1;height:4px;border-radius:999px;background:var(--rand);position:relative}
  .tonbalken i{position:absolute;left:0;top:0;height:4px;width:35%;border-radius:999px;background:var(--gold)}
  .tonkarte .klein{grid-column:1 / -1;margin:0}
  @media(max-width:480px){.tonkarte{grid-template-columns:1fr}}

  .leiste{background:var(--anthrazit);color:#CBD5E1;padding:18px 0;font-size:15px}
  .leiste .bahn{display:flex;flex-wrap:wrap;gap:8px 36px;justify-content:center}

  .drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:34px}
  .karte{background:var(--weiss);border:1px solid var(--rand);border-radius:14px;padding:26px}
  
  section.dunkel .karte{background:#16213B;border-color:#1E293B}
  section.dunkel .schirm{border-color:#1E293B}
  
  @media (hover: hover){
    .schirm,.geraet .rechner,.geraet .telefon,.preiskarte{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
    .schirm:hover,section.dunkel .schirm:hover,.geraet .rechner:hover,.preiskarte:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(15,23,42,.12);border-color:var(--gold)}
    .geraet .telefon:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,23,42,.18),0 6px 18px rgba(15,23,42,.12);border-color:var(--gold)}
    
    .karte:has(.bild){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
    .karte:has(.bild):hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(15,23,42,.12);border-color:var(--gold)}
  }
  .karte .nr{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.1em}
  .bild{border:1px solid var(--rand);border-radius:8px;background:var(--papier);
       overflow:hidden;margin:14px 0;aspect-ratio:16/10}
  .bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

  .kern{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:40px}
  .kern.gedreht{direction:rtl}.kern.gedreht>*{direction:ltr}
  @media(max-width:860px){.kern,.hero{grid-template-columns:1fr}.kern.gedreht{direction:ltr}}

  .ablauf{display:flex;gap:10px;margin-top:34px;overflow-x:auto;padding-bottom:6px}
  .schritt{flex:1 0 148px;border:1px solid var(--rand);border-radius:12px;padding:18px;
       background:var(--weiss);text-align:center}
  .schritt .nr{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.1em}
  .schritt b{display:block;margin-top:8px;font-size:15px}
  @media(max-width:860px){.ablauf{flex-direction:column;overflow:visible}}

  .gegen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
  .gegen ul{list-style:none}
  .gegen li{padding:9px 0 9px 28px;position:relative;font-size:16px;border-bottom:1px solid var(--rand)}
  .vorher li:before{content:"\2013";position:absolute;left:4px;color:var(--text)}
  .nachher li:before{content:"\2713";position:absolute;left:2px;color:var(--gold);font-weight:700}
  @media(max-width:760px){.gegen{grid-template-columns:1fr}}

  .strahl{border-left:2px solid var(--rand);margin-top:30px;padding-left:26px}
  .strahl .punkt{position:relative;padding-bottom:24px}
  .strahl .punkt:before{content:"";position:absolute;left:-33px;top:7px;width:12px;height:12px;
       border-radius:50%;background:var(--gold)}
  .strahl .wann{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .preiskarte{max-width:470px;margin:24px auto 0;border:1px solid var(--rand);border-radius:18px;padding:36px;
       background:var(--weiss);box-shadow:0 1px 3px rgba(15,23,42,.06)}
  .preiskarte .zahl{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.02em}
  .preiskarte .einmal{color:var(--text);font-size:16px;margin-bottom:22px}

  details{border-top:1px solid var(--rand);padding:18px 0}
  details:last-of-type{border-bottom:1px solid var(--rand)}
  summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;
       justify-content:space-between;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary:after{content:"+";color:var(--gold);font-size:22px;line-height:1}
  details[open] summary:after{content:"\2013"}
  details p{margin-top:12px;font-size:16px}

  .hinweis{border:1px solid var(--rand);border-left:5px solid var(--wein);border-radius:10px;
       padding:24px;background:var(--papier)}
  .hinweis p{font-size:17px;margin:0;color:var(--anthrazit)}
  .hinweis .rufnummer{font-weight:700;white-space:nowrap}
  
  .hinweis .weiter{margin-top:10px;font-size:16px}
  .hinweis .weiter a{color:var(--anthrazit);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
  .hinweis .weiter a:hover,.hinweis .weiter a:focus-visible{color:var(--gold)}
  .geltung{font-size:16px;color:var(--text);border-top:1px solid var(--rand);padding-top:24px}

  footer{background:var(--anthrazit);color:#94A3B8;padding:46px 0 30px;font-size:14px}
  footer .marke{color:var(--gold);margin-bottom:20px}
  footer .wege a{color:#CBD5E1;text-decoration:none;margin-right:20px;font-size:14px;line-height:2.2;white-space:nowrap}
  footer .wege a:hover,footer .wege a:focus-visible{color:var(--gold);text-decoration:underline}
  footer .firma a{color:#94A3B8;text-decoration:none}
  footer .firma{margin-top:20px;padding-top:18px;border-top:1px solid #1E293B;color:#64748B;
       font-size:13px;line-height:1.7}

  @media(max-width:860px){
    body{font-size:17px} h1{font-size:34px} h2{font-size:26px} section{padding:52px 0}
    .bahn{padding:0 18px} .knopf{width:100%;max-width:none;min-width:0}
  }
  .geldband{background:#B8893C;color:#1A1205;text-align:center;padding:18px 0}
  .geldband p{margin:0;color:#1A1205;max-width:none}
  .geldband .geldband-eins{font-size:20px;font-weight:700;line-height:1.35}
  .geldband .geldband-zwei{font-size:14px;font-weight:400;line-height:1.5;margin-top:4px}
  @media(max-width:480px){.geldband .geldband-eins{font-size:17px}}
  .geldzusage{border-left:3px solid #B8893C;padding:2px 0 2px 12px;margin:0 0 18px;text-align:left}
  .geldzusage p{margin:0;max-width:none}
  .geldzusage .geldzusage-eins{font-size:15px;font-weight:700;color:#0F172A;line-height:1.4}
  .geldzusage .geldzusage-zwei{font-size:13px;font-weight:400;color:#475569;line-height:1.45;margin-top:2px}
  .abgrenzung{color:#64748B}
  .reihe + .abgrenzung{margin-top:14px}
  .geldleiste{background:var(--papier);border-bottom:1px solid var(--rand);padding:5px 12px;text-align:center}
  .geldleiste p{margin:0;font-size:13px;line-height:1.4;color:var(--anthrazit);white-space:nowrap}
  @media(max-width:360px){.geldleiste p{font-size:12px}}
  .geldknopf{margin:14px 0 0;color:var(--anthrazit);font-weight:600}
  .geldknopf + .abgrenzung{margin-top:6px}
  footer .geldfuss{margin:16px 0 0;color:#94A3B8;font-size:14px;line-height:1.6}
  .geltung a{color:var(--anthrazit);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
  .geltung a:hover,.geltung a:focus-visible{color:var(--gold)}
  @media(max-width:860px){.ablauf-teil{display:none}}
  .zielgruppe{margin-top:18px;padding-left:14px;border-left:4px solid var(--gold);font-size:19px;line-height:1.5;font-weight:600;color:var(--anthrazit)}
  @media(max-width:860px){.zielgruppe{font-size:17px}}
  #lesen-hoeren .satz > h2,#lesen-hoeren .satz > p{text-align:center}
  #lesen-hoeren .gross{margin-bottom:0}
  a.knopf,button.knopf{-webkit-tap-highlight-color:transparent}
  @media (hover: none){.knopf.voll:active{background:#A27632}}

/* REFC-494 Teil E: Ergaenzungen fuer die Vorsorge-Produktseiten (Stilblock oben = A2-Seite rosenkrieg-navigator.html, z61) */
footer .firma p{color:#64748B;margin:0}
#preis .hinweis{max-width:680px;margin:0 auto}
/* REFC-495: Netto-Zeile (Regel aus vorsorge-v07.css) und dritte Zeile im Rueckgabe-Kasten (wie die zweite) */
.preiskarte .netto{color:var(--text);font-size:15px;margin:10px 0 0}
.geldzusage .geldzusage-drei{font-size:13px;font-weight:400;color:#475569;line-height:1.45;margin-top:2px}
/* REFC-498 Teil E: Fuss mittig (Logo, Verweiszeile, Firmenzeilen) */
footer .bahn{text-align:center}
footer .marke{justify-content:center}
footer .wege{display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px}
footer .wege a{margin-right:0}
/* REFC-501 A-1: Schrift auf dunklem Grund heller – Fließtext #E5E7EB, Gewicht 500; Fuß-Kleintext #C7CCD6 (je ≥ 7:1) */
section.dunkel p{color:#E5E7EB}
:where(section.dunkel) p{font-weight:500}
section.dunkel .haken li{color:#E5E7EB}
:where(section.dunkel .haken) li{font-weight:500}
.leiste{color:#E5E7EB;font-weight:500}
footer{color:#C7CCD6}
footer .wege a{color:#E5E7EB}
:where(footer .wege) a{font-weight:500}
footer .firma{color:#C7CCD6}
footer .firma a{color:#C7CCD6}
footer .firma p{color:#C7CCD6}
footer .geldfuss{color:#C7CCD6}
/* REFC-503 A-10: Fundstellen im Fuß wie auf scheidungsvorbereitungs-check.html (REFC-501 A-1/B-2) */
footer .fundstellen{margin-top:20px;padding-top:18px;border-top:1px solid #1E293B;color:#64748B;
     font-size:13px;line-height:1.7;overflow-wrap:anywhere}
footer .fundstellen h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#94A3B8;margin-bottom:6px;line-height:1.5}
footer .fundstellen p{color:#64748B;margin-bottom:6px}
footer .fundstellen{color:#C7CCD6}
footer .fundstellen p{color:#C7CCD6}
footer .fundstellen{text-align:left}
section.dunkel .unterknopf{color:#E5E7EB !important;font-weight:500}