/* ==========================================================
   KAAFA Services — gemeinsames Stylesheet
   Schriften bewusst systemseitig: kein externer Ladevorgang,
   damit ohne Einwilligung keine Daten an Dritte gehen.
   ========================================================== */
:root{
  color-scheme:light only;
  --kreide:#F2F1ED;
  --papier:#E8E6E0;
  --tinte:#14171A;
  --stahl:#39424A;
  --nebel:#5F656A;
  --linie:rgba(20,23,26,.13);
  --linie-hell:rgba(242,241,237,.20);
  --signal:#2F6D4F;
  --mass:1240px;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#F2F1ED;color-scheme:light only}
body{margin:0;background:#F2F1ED;color:#14171A;font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.bahn{max-width:var(--mass);margin:0 auto;padding:0 26px;width:100%}
.marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nebel)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.nur-vorlese{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:14px;top:-60px;z-index:99;background:var(--tinte);color:var(--kreide);padding:11px 18px;font-family:var(--mono);font-size:12px;text-decoration:none;transition:top .2s}
.sprung:focus{top:14px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;padding:15px 0;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,padding .35s}
.kopf .bahn{display:flex;align-items:center;gap:18px}
.kopf.fest,.kopf--hell{background:rgba(242,241,237,.95);backdrop-filter:blur(14px);border-bottom-color:var(--linie);padding:9px 0}
.logo{height:32px;width:auto;filter:invert(1);transition:filter .35s,height .35s}
.kopf.fest .logo,.kopf--hell .logo{filter:none;height:28px}
.kopf nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.kopf nav a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:#fff;opacity:.82;padding:10px 11px;transition:opacity .3s,color .3s}
.kopf.fest nav a,.kopf--hell nav a{color:var(--tinte);opacity:.7}
.kopf nav a:hover{opacity:1}
.kopf nav .ruf{border:1px solid rgba(255,255,255,.45);opacity:1;padding:10px 17px}
.kopf.fest nav .ruf,.kopf--hell nav .ruf{border-color:var(--tinte)}
@media(max-width:980px){.kopf nav a:not(.ruf){display:none}}

/* ---------- Bühne ---------- */
.buehne{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;color:var(--kreide)}
.buehne--klein{min-height:62svh}
.buehne__bild{position:absolute;inset:-14% 0;background-size:cover;background-position:54% 50%;will-change:transform;animation:auf 2.2s cubic-bezier(.16,1,.3,1) both}
html:not(.js) .buehne__bild{animation:none;opacity:1}
@keyframes auf{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:none}}
.buehne__schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,16,.52) 0%,rgba(10,13,16,.10) 34%,rgba(10,13,16,.18) 62%,rgba(10,13,16,.74) 100%),linear-gradient(93deg,rgba(10,13,16,.50) 0%,rgba(10,13,16,0) 58%)}
.satz{position:relative;z-index:2;align-self:center;padding:132px 0 40px}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;border:1px solid var(--linie-hell);border-radius:999px;padding:7px 15px 7px 12px;margin-bottom:30px;backdrop-filter:blur(6px)}
.puls{width:6px;height:6px;border-radius:50%;background:#8FD9B0;animation:puls 2.8s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(143,217,176,.5)}70%{box-shadow:0 0 0 9px rgba(143,217,176,0)}100%{box-shadow:0 0 0 0 rgba(143,217,176,0)}}
h1{font-size:clamp(36px,6.4vw,78px);line-height:1.03;margin-bottom:24px;max-width:18ch;text-wrap:balance}
h1 em{font-style:normal;display:block;color:#fff}
.anriss{font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:#D2D7DA;max-width:48ch;margin-bottom:34px}
.aktionen{display:flex;flex-wrap:wrap;gap:11px}
.knopf{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border:1px solid transparent;cursor:pointer;display:inline-block;transition:background .3s,color .3s,border-color .3s}
.knopf--voll{background:var(--kreide);color:var(--tinte)}
.knopf--voll:hover{background:#fff}
.knopf--leer{border-color:var(--linie-hell);color:var(--kreide)}
.knopf--leer:hover{border-color:var(--kreide)}
.knopf--dunkel{background:var(--tinte);color:var(--kreide)}
.knopf--dunkel:hover{background:#000}
.zusagen{position:relative;z-index:2;border-top:1px solid var(--linie-hell)}
.zusagen .bahn{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px 32px;padding-top:18px;padding-bottom:22px}
.zusage{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#B2B9BE}
.zusage b{color:var(--kreide);font-weight:500}

/* ---------- Brotkrumen ---------- */
.krumen{background:var(--papier);border-bottom:1px solid var(--linie);padding:13px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nebel)}
.krumen a{color:var(--nebel);text-decoration:none}
.krumen a:hover{color:var(--tinte)}
.krumen span{margin:0 8px}

/* ---------- Kennzahlen ---------- */
.beleg{background:var(--papier);padding:28px 0;border-bottom:1px solid var(--linie)}
.beleg .bahn{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.beleg div{border-left:1px solid var(--linie);padding-left:16px}
.beleg b{display:block;font-family:var(--serif);font-size:clamp(21px,2.4vw,28px);line-height:1.15;font-weight:400}
.beleg span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nebel)}
@media(max-width:760px){.beleg .bahn{grid-template-columns:1fr 1fr;gap:18px}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:88px 0}
.abschnitt--eng{padding:70px 0}
.abschnitt--papier{background:var(--papier)}
.kopfzeile{max-width:760px;margin-bottom:46px}
.kopfzeile .marke{display:block;margin-bottom:18px}
.kopfzeile h2{font-size:clamp(29px,4vw,48px);line-height:1.1;margin-bottom:16px;text-wrap:balance}
.kopfzeile p{color:var(--stahl);max-width:56ch}
.fliess p{color:var(--stahl);max-width:66ch;margin-bottom:16px}
.fliess h3{font-family:var(--sans);font-weight:600;font-size:19px;margin:30px 0 9px}
.fliess ul{color:var(--stahl);max-width:66ch;padding-left:20px;margin:10px 0}
.fliess li{margin-bottom:6px}

/* ---------- Leistungskacheln ---------- */
.felder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feld{background:var(--kreide);color:var(--tinte);border:1px solid var(--linie);display:flex;flex-direction:column;text-decoration:none;transition:border-color .3s}
.feld:hover{border-color:var(--tinte)}
.feld__auge{position:relative;overflow:hidden;display:block}
.feld__auge::after{content:"";display:block;padding-top:62%}
.feld__auge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.feld__text{display:block;padding:24px 24px 28px}
.feld h3{font-size:25px;line-height:1.15;margin-bottom:11px}
.feld ul{margin:0;padding:0;list-style:none;font-size:14.5px;line-height:1.8;color:var(--stahl)}
.feld ul li::before{content:"— ";color:var(--nebel)}
.feld__mehr{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
@media(max-width:900px){.felder{grid-template-columns:1fr}}

/* ---------- Modell ---------- */
.modell .bahn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.modell h2{font-size:clamp(27px,3.6vw,42px);line-height:1.12;margin-bottom:18px;max-width:16ch}
.modell p{color:var(--stahl);margin-bottom:16px;max-width:50ch}
.gegen{border-top:1px solid var(--linie)}
.gegen div{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--linie)}
.gegen span{padding:15px 14px 15px 0;font-size:15px;line-height:1.5}
.gegen span:first-child{color:var(--nebel);text-decoration:none}
.gegen span:last-child{font-weight:500;padding-left:14px;border-left:1px solid var(--linie)}
.gegen b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nebel);font-weight:400;padding-bottom:9px}
@media(max-width:900px){.modell .bahn{grid-template-columns:1fr;gap:38px}}

/* ---------- Band ---------- */
.band{position:relative;height:56svh;min-height:300px;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:114%;object-fit:cover;will-change:transform}
.band__text{position:absolute;inset:auto 0 0 0;padding:36px 0;background:linear-gradient(transparent,rgba(10,13,16,.72));color:var(--kreide)}
.band__text .marke{color:#AEB5BA;display:block;margin-bottom:9px}
.band__text p{font-family:var(--serif);font-size:clamp(21px,3vw,36px);line-height:1.2;max-width:22ch}

/* ---------- Ablauf ---------- */
.stufen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--tinte)}
.stufe{padding:24px 22px 32px 0;border-right:1px solid var(--linie)}
.stufe:last-child{border-right:0}
.stufe b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--nebel);font-weight:400;margin-bottom:22px}
.stufe h3{font-family:var(--sans);font-weight:500;font-size:18px;margin-bottom:8px}
.stufe p{font-size:15px;color:var(--stahl);line-height:1.55}
@media(max-width:900px){.stufen{grid-template-columns:1fr 1fr}.stufe{border-bottom:1px solid var(--linie)}.stufe:nth-child(2n){border-right:0}}
@media(max-width:540px){.stufen{grid-template-columns:1fr}.stufe{border-right:0}}

/* ---------- Fragen ---------- */
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;font-size:18px;font-weight:500;line-height:1.4}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:6px;top:20px;font-size:22px;font-weight:300;color:var(--nebel);transition:transform .3s}
.frage[open] summary::after{transform:rotate(45deg)}
.frage__inhalt{padding:0 60px 24px 0;color:var(--stahl);font-size:16px}

/* ---------- Bildstreifen ---------- */
.streifen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.streifen figure{margin:0;position:relative;overflow:hidden}
.streifen figure::after{content:"";display:block;padding-top:76%}
.streifen img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;will-change:transform}
@media(max-width:900px){.streifen{grid-template-columns:1fr 1fr}}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--papier);border-top:1px solid var(--linie)}
.kontakt .bahn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px}
.kontakt h2{font-size:clamp(28px,3.8vw,44px);line-height:1.1;margin-bottom:18px;max-width:15ch}
.kontakt__vor{color:var(--stahl);max-width:42ch;margin-bottom:30px}
.direkt{display:grid;gap:11px;padding-top:24px;border-top:1px solid var(--linie)}
.direkt a{color:var(--tinte);text-decoration:none;font-size:19px;border-bottom:1px solid var(--linie);padding-bottom:3px;width:fit-content}
.direkt a:hover{border-bottom-color:var(--tinte)}
.direkt small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--nebel)}
form{display:grid;gap:22px}
fieldset{border:0;padding:0;margin:0}
legend,.feldname{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--nebel);margin-bottom:12px;display:block}
.feldname__optional{font-size:.9em;letter-spacing:.12em;opacity:.72}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{font-size:14.5px;padding:10px 17px;border:1px solid var(--linie);cursor:pointer;background:var(--kreide);transition:background .25s,color .25s,border-color .25s}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl label:has(input:checked){background:var(--tinte);color:var(--kreide);border-color:var(--tinte)}
.wahl label:focus-within{outline:2px solid var(--tinte);outline-offset:2px}
input[type=text],input[type=tel],input[type=email],textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(20,23,26,.3);color:var(--tinte);font-family:var(--sans);font-size:16px;padding:11px 0;transition:border-color .3s}
textarea{min-height:92px;resize:vertical;line-height:1.55}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--tinte)}
::placeholder{color:#666D72}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.einwilligung{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--stahl);line-height:1.5}
.einwilligung input{margin-top:3px;accent-color:#14171A;width:16px;height:16px}
.absenden{justify-self:start;background:var(--tinte);color:var(--kreide);border:0}
.kleingedruckt{font-size:12.5px;color:var(--nebel)}
.hinweis{padding:14px 16px;border:1px solid rgba(47,109,79,.45);color:var(--signal);font-size:13.5px;display:none}
.hinweis.an{display:block}
.hinweis--fehler{border-color:rgba(150,40,40,.5);color:#8C2A2A}
@media(max-width:860px){.kontakt .bahn{grid-template-columns:1fr;gap:44px}.paar{grid-template-columns:1fr}}

.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Recht ---------- */
.recht h2{font-size:clamp(24px,3vw,34px);margin-bottom:22px}
.recht h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:26px 0 7px}
.recht p,.recht li{font-size:15px;color:var(--stahl);line-height:1.62}
.recht ul{padding-left:19px;margin:7px 0}
.recht .bahn>div{max-width:76ch}
.pflege{background:rgba(47,109,79,.09);border-left:2px solid var(--signal);padding:13px 16px;font-size:14px;color:var(--stahl);margin:14px 0}
.pflege b{color:var(--signal)}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:#868E93;padding:52px 0 46px}
.fuss .bahn{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
.fuss img{display:block;width:clamp(130px,12vw,160px);height:auto;filter:none!important;opacity:1;margin-bottom:18px}
.fuss h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#B2B9BE;margin:0 0 12px;font-weight:400}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:7px}
.fuss a{color:#868E93;text-decoration:none;font-size:14px}
.fuss a:hover{color:var(--kreide)}
.fuss p{font-size:14px;line-height:1.6}
.fuss__unten{border-top:1px solid var(--linie-hell);margin-top:34px;padding-top:22px;font-size:12.5px;color:#8B9298;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline}
.ki-hinweis{grid-column:1/-1;font-size:12px;line-height:1.6;color:#9AA1A6;margin-top:14px;max-width:78ch}
@media(max-width:820px){.fuss .bahn{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss .bahn{grid-template-columns:1fr}}

/* ---------- Enthüllen ---------- */
/* Inhalte sind IMMER sichtbar. Nur wenn JavaScript nachweislich laeuft
   (html.js wird per Inline-Skript gesetzt), wird die Einblendung aktiviert.
   So bleibt die Seite ohne JS, bei Ladefehlern und fuer Suchmaschinen lesbar. */
html.js .zeig{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
html.js .zeig.da{opacity:1;transform:none}

/* ==========================================================
   Schutz gegen erzwungenen Dunkelmodus (Chrome Auto Dark Theme)
   ========================================================== */
@media (prefers-color-scheme: dark){
  html,body{background-color:#F2F1ED !important;color:#14171A !important}
  .abschnitt,.fragen,.felder,.stufen,.krumen{background-color:#F2F1ED !important}
  .beleg,.modell,.abschnitt--papier,.kontakt,.recht{background-color:#E8E6E0 !important}
  .feld,.wahl label{background-color:#F2F1ED !important;color:#14171A !important}
  .buehne,.fuss,.sprung,.absenden,.knopf--dunkel,
  .wahl label:has(input:checked){background-color:#14171A !important}
  .abschnitt h2,.abschnitt h3,.abschnitt p,.abschnitt li,.kopfzeile h2,
  .feld h3,.stufe h3,.frage summary,.kontakt h2,.direkt a,.recht h2,.recht h3,
  .beleg b,.gegen span:last-child,.modell h2,.fliess h3{
    color:#14171A !important;-webkit-text-fill-color:#14171A !important}
  .kopfzeile p,.feld ul,.stufe p,.frage__inhalt,.kontakt__vor,.modell p,
  .recht p,.recht li,.einwilligung,.fliess p,.fliess ul{
    color:#39424A !important;-webkit-text-fill-color:#39424A !important}
  .marke,.beleg span,.direkt small,.kleingedruckt,.gegen b,
  .gegen span:first-child,legend,.feldname,.krumen,.krumen a{
    color:#727A80 !important;-webkit-text-fill-color:#727A80 !important}
  .buehne h1,.buehne .anriss,.buehne .status,.band__text p,
  .knopf--voll,.absenden{
    color:#F2F1ED !important;-webkit-text-fill-color:#F2F1ED !important}
  .buehne .zusage{color:#B2B9BE !important;-webkit-text-fill-color:#B2B9BE !important}
  .buehne .zusage b{color:#F2F1ED !important;-webkit-text-fill-color:#F2F1ED !important}
  .fuss,.fuss a,.fuss p{
    color:#868E93 !important;-webkit-text-fill-color:#868E93 !important}
  .fuss h4,.band__text .marke{
    color:#B2B9BE !important;-webkit-text-fill-color:#B2B9BE !important}
  input,textarea{background-color:transparent !important;color:#14171A !important;-webkit-text-fill-color:#14171A !important}
  img{filter:none !important}
}
img,.band img,.streifen img,.feld__auge img,.buehne__bild{forced-color-adjust:none}

/* Formularauswahl: finaler, auch im Auto-Dark-Mode lesbarer Zustand. */
.wahl label:has(input:checked) {
  background: #171714;
  color: #f3eee2;
  border-color: #b99759;
}
.wahl label:has(input:checked) span {
  color: #f3eee2 !important;
  -webkit-text-fill-color: #f3eee2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.wahl label:focus-within {
  outline: 2px solid #b99759;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html.js .zeig{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}