/* Lissy Alltagsbegleitung · Vorabseite bis zum Anerkennungsbescheid
   Bausteine, Farben und Maße nach bausteinkatalog-lissy.html und styleguide-lissy.html.
   Schriften liegen lokal im Ordner "schriften". Kein einziger externer Aufruf. */

@font-face{font-family:'Caveat';src:url('schriften/caveat-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('schriften/ebgaramond-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('schriften/ebgaramond-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('schriften/ebgaramond-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Open Sans';src:url('schriften/opensans-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('schriften/opensans-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}

:root{
  --petrol:#0F3F44; --petrol-deep:#0A2225; --petrol-mid:#2F7076;
  --rose:#CC8994; --rose-light:#F0C3C6; --rose-sand:#E3D3CD;
  --creme:#F4F1EC; --ink:#12302F; --muted:#41514F; --line:#E0E7E4;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --script:'Caveat', 'EB Garamond', Georgia, serif;
  --sans:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6}
img,svg{max-width:100%}
a{color:var(--petrol)}
a:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:3px}
.in{max-width:1120px;margin:0 auto;padding:0 22px}
.eng{max-width:760px;margin:0 auto;padding:0 22px}

/* Band ganz oben: Hinweis auf die Vorabseite */
.vorabband{background:var(--rose-sand);color:#3A2428;padding:12px 0}
.vorabband p{margin:0;font-size:16px;line-height:1.5;max-width:80ch}
.vorabband b{color:#2C1E22}

/* Header */
.w-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:2}
.w-header .in{padding:14px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.w-logo{display:block;text-decoration:none;flex:none;line-height:0}
.w-logo svg{width:190px;height:auto;display:block}
.kopf-tel{margin-left:auto;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--petrol);color:#fff;font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap}
.kopf-tel:hover{background:var(--petrol-deep)}
.kopf-tel:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:999px}

/* Streifen */
.streifen{padding:56px 0}
.streifen.creme{background:var(--creme)}
.streifen.weiss{background:#fff}
.streifen.petrol{background:var(--petrol);color:#EAF2F0}
.streifen.eng-oben{padding-top:34px}

/* Hero */
.hero-streifen{background:var(--petrol);color:#DDE8E5;padding:64px 0 68px}
.hero{position:relative;display:grid;gap:44px;grid-template-columns:1.2fr .85fr;align-items:center}
.hero-text{max-width:44ch}
.hero-karte{background:var(--creme);color:var(--ink);border-radius:15px;padding:26px 28px;border-top:5px solid var(--rose)}
.hero-karte h2{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol-mid);margin:0 0 12px}
.hero-karte p{font-size:17px;line-height:1.55;margin:0 0 12px;color:var(--ink)}
.hero-karte strong{font-weight:600;color:var(--petrol)}
.karte-link{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-weight:600;font-size:16.5px;color:var(--petrol)}
.hero h1{font-family:var(--script);font-size:60px;line-height:1.0;font-weight:600;color:#fff;margin:0 0 10px;letter-spacing:0}
.hero .ortszeile{display:block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-light);margin:0 0 20px}
.hero p{font-size:19px;line-height:1.6;margin:0 0 24px}
.w-tel{display:inline-flex;align-items:center;min-height:58px;padding:0 32px;border-radius:999px;background:var(--rose-light);color:var(--petrol-deep);font-size:24px;font-weight:700;text-decoration:none}
.w-tel:hover{background:var(--rose)}
.w-tel:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero .darunter{font-size:16.5px;color:#B6CCC8;margin:16px 0 0;max-width:42ch}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px}}
.kontakt-marke{display:block;width:120px;margin:0 auto 18px;opacity:.55;line-height:0}
.kontakt-marke svg{width:100%;height:auto;display:block}
@media (max-width:760px){
  .hero h1{font-size:44px}
  .hero .ortszeile{font-size:13.5px}
  .hero-streifen{padding:44px 0 48px}
  }

/* Hinweiskasten, Ausprägung Anerkennungsstatus */
.w-hinweis{max-width:66ch;border-radius:15px;padding:18px 22px;border-left:4px solid var(--petrol-mid);background:#fff}
.w-hinweis h3{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--petrol)}
.w-hinweis p{margin:0 0 10px;font-size:16.5px;line-height:1.55;color:var(--ink)}
.w-hinweis p:last-child{margin:0}
.w-hinweis.anerkennung{border-left-color:var(--rose);background:var(--rose-light);color:#3A2428}
.w-hinweis.anerkennung h3,.w-hinweis.anerkennung p{color:#3A2428}
.w-hinweis.mitte{margin:0 auto}

/* Kasten „In einem Satz“ */
.w-satz{max-width:64ch;background:var(--petrol);color:#EAF2F0;border-radius:6px;padding:24px 26px;margin:0 auto}
.w-satz .marke{font-family:var(--script);font-size:23px;color:var(--rose-light);display:block;margin-bottom:4px;line-height:1}
.w-satz p{font-size:20px;line-height:1.5;margin:0}
.w-satz strong{color:#fff;font-weight:600}

.textbahn{max-width:68ch}

/* Überschriften der Streifen */
.streifen h2.klein{font-size:31px;margin-top:34px}
.rechtsstand{font-size:15.5px;color:var(--muted);margin-top:22px}
.w-kontakt .klein{font-size:15px;color:#AFC7C3;margin:20px auto 0;max-width:48ch}
.streifen h2{font-family:var(--script);font-size:40px;line-height:1.05;font-weight:600;color:var(--petrol);margin:0 0 8px}
.streifen.petrol h2{color:#fff}
.streifen .vorspann{font-size:18px;color:var(--muted);margin:0 0 26px;max-width:60ch}
.streifen.petrol .vorspann{color:#B6CCC8}

/* Kachelraster */
.w-kacheln{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:1000px}
.w-kachel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px 22px 20px}
.w-kachel{border-top:4px solid var(--rose-sand)}
.w-kachel h3{margin:0 0 7px;font-size:19px;font-weight:600;color:var(--petrol)}
.w-kachel p{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink)}

/* Was andere übernehmen */
.abgrenzung{max-width:66ch;margin:30px 0 0;font-size:16.5px;line-height:1.6;color:var(--muted)}

/* Zusagen-Reihe */
.w-zusagen{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:1000px;list-style:none;padding:0;margin:0}
.streifen h2 + .w-zusagen,.streifen h2 + .w-kacheln{margin-top:26px}
.w-zusagen li{background:var(--petrol);color:#EAF2F0;border-radius:15px;padding:20px 22px}
.w-zusagen h3{margin:0 0 6px;font-size:17px;font-weight:600;color:#fff}
.w-zusagen p{margin:0;font-size:16px;line-height:1.5}

/* Ortsband */
.w-orte{max-width:820px}
.w-orte h2{margin:0 0 10px}
.w-orte p{margin:0;font-size:17.5px;line-height:1.7;color:var(--ink)}
.w-orte .heim{font-weight:600;color:var(--petrol)}

/* Kontaktblock */
.w-kontakt{background:var(--petrol);color:#EAF2F0;border-radius:16px;padding:34px 32px;max-width:760px;margin:0 auto;text-align:center}
.w-kontakt h2{font-family:var(--script);font-size:38px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.05}
.w-kontakt p{font-size:17px;line-height:1.55;margin:0 auto 20px;max-width:46ch;color:#CFE0DC}
.w-kontakt .w-tel{background:var(--rose-light);color:var(--petrol-deep);font-size:26px}
.w-kontakt .w-tel:hover{background:var(--rose)}
.w-kontakt .w-tel:focus-visible{outline:3px solid #fff;outline-offset:2px}
.w-kontakt .mail a{color:#CFE0DC}
.w-kontakt .klein{font-size:15px;color:#AFC7C3;margin:20px auto 0}

/* Footer */
.w-footer{background:var(--petrol-deep);color:#B6CCC8;padding:38px 22px 26px;font-size:15.5px}
.w-footer .in{max-width:1120px;margin:0 auto;padding:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.w-footer h3{margin:0 0 9px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#7FA9A5;font-weight:600}
.w-footer p{margin:0 0 4px;line-height:1.6}
.w-footer a{color:#DDE8E5;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.w-footer a:hover{text-decoration:underline}
.w-footer ul{list-style:none;margin:0;padding:0}
.w-footer li{margin-bottom:4px}
.w-footer .unten{max-width:1120px;margin:26px auto 0;padding-top:16px;border-top:1px solid #24403F;font-size:14px;color:#7F9997;display:flex;gap:18px;flex-wrap:wrap}

/* Pflichtseiten */
.recht{padding:48px 0 64px}
.recht h1{font-family:var(--script);font-size:48px;font-weight:600;color:var(--petrol);margin:0 0 22px;line-height:1.05}
.recht h2{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--petrol);margin:34px 0 8px}
.recht p,.recht li{font-size:17px;line-height:1.65}
.recht ul{margin:0 0 15px;padding-left:22px}
.recht li{margin-bottom:6px}
.recht .lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--muted);margin-bottom:8px}
.recht .stand-datum{color:var(--muted);font-size:16px;margin-top:40px}


/* Telefonhörer in den Schaltflächen */
.hoerer{width:1.05em;height:1.05em;flex:none;margin-right:.55em;display:block}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Die beiden Wege unter der Telefonnummer */
.wege{list-style:none;margin:22px auto 0;padding:0;max-width:46ch;text-align:center;display:grid;gap:10px}
.wege li{font-size:16.5px;line-height:1.5;color:#CFE0DC;padding-left:0}
.wege b{color:#fff;font-weight:600}
.wege a{color:#fff;display:inline-flex;align-items:center;min-height:44px}

/* Zurückhaltendes Auftauchen beim Scrollen. Nur die Karten und Kacheln,
   nicht der Fließtext. Innerhalb einer Reihe leicht versetzt.
   Reines CSS, kein JavaScript. Zwei Sicherungen: die Regeln greifen nur,
   wo der Browser scrollgesteuerte Animationen kennt, und nur, wenn niemand
   weniger Bewegung verlangt hat. Sonst steht alles unbewegt da. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .w-kachel,
    .w-zusagen li,
    .w-kontakt{
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: cover 2% cover 28%;
    }
    .w-kacheln > :nth-child(2),
    .w-zusagen > :nth-child(2){animation-range: cover 6% cover 32%}
    .w-kacheln > :nth-child(3),
    .w-zusagen > :nth-child(3){animation-range: cover 10% cover 36%}
    @keyframes auftauchen{
      from{opacity:.15;transform:translateY(24px)}
      to{opacity:1;transform:none}
    }
  }
}

/* Beim Drucken und in der Leseansicht steht alles still und voll sichtbar */
@media print{
  *,*::before,*::after{animation:none !important;transform:none !important;opacity:1 !important}
  .vorabband,.kopf-tel{position:static}
  .hero-streifen,.streifen.petrol,.w-kontakt,.w-zusagen li,.w-footer{background:#fff !important;color:#000 !important}
  .hero h1,.w-kontakt h2,.w-zusagen h3{color:#000 !important}
  a{color:#000 !important;text-decoration:underline}
}