/* kinux, Unterseiten im hellen Rahmen der Startseite (September 2026).
   Gilt für FAQ, Kontakt, Newsletter, Anmelden, Impressum, Datenschutz und AGB in DE, FR, IT und EN.
   Kopf, Fusszeile, Schrift und Grundwerte kommen aus rahmen.css (vor dieser Datei geladen); hier steht nur,
   was der Seiteninhalt braucht. Eingebunden von tools/build_unterseiten.py mit einem Inhalts-Hash als ?v=.
   Farben wie auf der Startseite: Grund #FFFFFF, Flächen #F5F7F9, Text #17242E, leise #5C6C79, Links #0A6A9E,
   Knöpfe #17242E mit heller Schrift. Nur IBM Plex Sans, keine Schreibmaschinenschrift.
   Kontraste (WCAG AA): Text 15,8:1; leise 5,4:1 auf Weiss und 5,0:1 auf der Fläche; Links 5,9:1 und 5,5:1;
   Platzhalter #66747F 4,8:1; Feldrand #7F8C98 3,4:1; Fokusring #0C7CB8 4,6:1. */

:root{--kx-link:#0A6A9E;--kx-linie:rgba(23,36,46,.12);--kx-feldrand:#7F8C98;--kx-spalte:760px}
[hidden]{display:none!important}

/* Fusszeile bleibt auch auf kurzen Seiten unten */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}

/* ---------- Kopf und Fusszeile: nur die Ergänzungen der Unterseiten ---------- */
/* Aktuelle Sprache ist kein Link, sondern ein markierter Text (Werte wie die Links in rahmen.css) */
.kx-lang-btns span[aria-current="true"]{display:inline-block;min-width:34px;min-height:36px;padding:10px 7px;border-radius:4px;font-size:13.5px;letter-spacing:.02em;line-height:16px;text-align:center;font-weight:600;color:var(--kx-text)}
@media (min-width:1180px) and (max-width:1359.98px){.kx-lang-btns span[aria-current="true"]{padding:10px 5px;min-width:30px}}
.kx-fuss .kx-lang-btns span[aria-current="true"]{padding:8px 7px;min-height:32px}
.kx-fuss .kx-lang{margin-left:auto}
/* Aktuelle Seite in Navigation, Menü und Fusszeile */
.kx-hd.light .kx-hd-nav a[aria-current="page"]{color:var(--kx-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.kx-menu nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.kx-hd.light .kx-hd-login[aria-current="page"],.kx-menu-login[aria-current="page"]{border-color:var(--kx-text)}
.kx-fuss-g a[aria-current="page"]{color:var(--kx-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- Seitenraster: Textspalte links auf der Achse der Startseite ---------- */
.pg{width:min(1240px,calc(100% - 2 * var(--kx-rand)));margin:0 auto;padding:calc(var(--kx-kopf-ist,var(--kx-kopf)) + 56px) 0 112px}
.pg > *{max-width:var(--kx-spalte)}
.pg a{color:var(--kx-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(10,106,158,.45)}
.pg a:hover{text-decoration-color:currentColor}

/* Rückweg zur Startseite; die Klasse bleibt für tab-back.js, der Pfeil ist eine Maske, damit das Skript den Text ersetzen kann */
.pg .kx-zurueck{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:0 0 20px;font-size:15px;font-weight:500;color:var(--kx-leise);text-decoration:none}
.pg .kx-zurueck:hover{color:var(--kx-text)}
.kx-zurueck::before{content:'';width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}

.pg h1{margin:0;font-weight:600;font-size:clamp(32px,1.6vw + 16px,44px);line-height:1.1;letter-spacing:-.025em;color:var(--kx-text);text-wrap:balance}
.pg .kx-meta{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--kx-leise)}
.pg .lead{margin:18px 0 0;font-size:clamp(17px,.4vw + 14px,19px);line-height:1.55;color:var(--kx-text);max-width:36em;text-wrap:pretty}
/* Sprachhinweise der Übersetzungen (FR, IT, EN) */
.pg .kx-langhinweis,.pg .hinweis,.ob-card .kx-langhinweis{margin:24px 0 0;padding:14px 18px;background:#EEF5FA;border-radius:12px;font-size:15.5px;line-height:1.55;color:var(--kx-text);max-width:var(--kx-spalte)}

/* ---------- FAQ: Aufklapper wie auf der Startseite ---------- */
.fnav{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.pg .fnav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid rgba(23,36,46,.18);border-radius:999px;font-size:15px;font-weight:500;line-height:1.3;color:var(--kx-text);text-decoration:none;background:#FFFFFF;transition:background-color .2s ease,border-color .2s ease}
.pg .fnav a:hover{background:var(--kx-flaeche);border-color:rgba(23,36,46,.34)}
.fgrp{margin-top:56px}
.fgrp h2{margin:0 0 16px;font-size:clamp(22px,.5vw + 16px,26px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--kx-text)}
.fitem{background:var(--kx-flaeche);border-radius:12px}
.fitem + .fitem{margin-top:8px}
.fitem h3{margin:0;font:inherit;letter-spacing:normal}
.fq{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;margin:0;padding:18px 22px;border:0;border-radius:12px;background:none;font:inherit;font-size:17px;font-weight:600;line-height:1.35;color:var(--kx-text);text-align:left;cursor:pointer}
.fq svg{display:none}                         /* Pfeil der alten Seiten; das Plus-Zeichen kommt aus ::after */
.fq::after{content:'';flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) 0 6px / 14px 2px no-repeat,linear-gradient(currentColor,currentColor) 6px 0 / 2px 14px no-repeat}
.fitem.open .fq::after{background:linear-gradient(currentColor,currentColor) 0 6px / 14px 2px no-repeat}
.fq:focus-visible{outline-offset:-2px;border-radius:12px}
.fa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.fitem.open .fa{grid-template-rows:1fr}
.fa > div{overflow:hidden;min-height:0}
.fa p{margin:0;padding:0 22px 20px;font-size:16.5px;line-height:1.6;color:var(--kx-text);max-width:62ch;text-wrap:pretty}
.pg .fend{margin-top:48px;padding:20px 22px;background:var(--kx-flaeche);border-radius:12px;font-size:16px;line-height:1.6;color:var(--kx-leise)}

/* ---------- Rechtstexte ---------- */
.legal h2{margin:48px 0 12px;font-size:clamp(20px,.4vw + 16px,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--kx-text)}
.legal h3{margin:28px 0 8px;font-size:18px;font-weight:600;line-height:1.35}
.legal p{margin:0 0 14px;font-size:17px;line-height:1.65}
.legal ul,.legal ol{margin:0 0 14px;padding-left:24px}
.legal li{margin:6px 0;line-height:1.6}
.legal li::marker{color:var(--kx-leise)}
.legal strong{font-weight:600}
.legal dl{margin:0;padding:6px 24px;background:var(--kx-flaeche);border-radius:12px}
.legal dt{padding-top:16px;font-size:15px;font-weight:600;color:var(--kx-text)}
.legal dd{margin:4px 0 16px}
.legal dd + dt{border-top:1px solid var(--kx-linie)}
.legal dd p{margin:0 0 6px}
.legal .kx-meta + h2{margin-top:40px}

/* ---------- Formulare (Kontakt, Newsletter, Anmelden) ---------- */
.pg .termin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:32px 0 0;padding:20px 24px;background:var(--kx-flaeche);border-radius:12px;font-size:16px;line-height:1.5;color:var(--kx-text);max-width:600px}
.pg .termin span{flex:1 1 260px}
.pg .termin a,.go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:12px 24px;border:0;border-radius:8px;background:var(--kx-text);color:#F2F6FC;font:inherit;font-size:16px;font-weight:600;line-height:1.3;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,transform .15s ease}
.pg .termin a:hover,.go:hover{background:#243440;color:#F2F6FC}
.pg .termin a:active,.go:active{transform:translateY(1px)}
.formcard{margin:24px 0 0;padding:32px;background:var(--kx-flaeche);border-radius:16px;max-width:600px}
.feld{margin:0 0 20px}
.feld label{display:block;margin:0 0 8px;font-size:15px;font-weight:600;line-height:1.4;color:var(--kx-text)}
.feld input,.feld select,.feld textarea{display:block;width:100%;min-height:48px;margin:0;padding:11px 14px;border:1px solid var(--kx-feldrand);border-radius:8px;background:#FFFFFF;color:var(--kx-text);font:inherit;font-size:16px;line-height:1.4}
.feld textarea{min-height:160px;resize:vertical;line-height:1.55}
.feld select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%235C6C79' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.feld input::placeholder,.feld textarea::placeholder{color:#66747F;opacity:1}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--kx-leise)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--kx-akzent);outline-offset:1px;border-color:var(--kx-akzent)}
.formcard .go{margin-top:4px}
.nl-check{display:flex;align-items:flex-start;gap:12px;margin:0 0 22px}
.nl-check input{flex:none;width:20px;height:20px;margin:2px 0 0;-webkit-appearance:none;appearance:none;border:1.5px solid var(--kx-feldrand);border-radius:4px;background:#FFFFFF center / 14px 14px no-repeat;cursor:pointer}
.nl-check input:hover{border-color:var(--kx-leise)}
.nl-check input:checked{border-color:var(--kx-link);background-color:var(--kx-link);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.nl-check input:focus-visible{outline:2px solid var(--kx-akzent);outline-offset:2px}
.nl-check label{font-size:16px;line-height:1.5;color:var(--kx-text);cursor:pointer}
.nl-hinweis{margin:18px 0 0;font-size:14.5px;line-height:1.55;color:var(--kx-leise)}
.hp-falle{display:none!important}
/* Rückmeldungen nach dem Absenden (kontakt-feedback.js, newsletter-feedback.js, onboarding-feedback.js) */
.band,.ob-feedback{display:flex;align-items:flex-start;gap:12px;margin:0 0 20px;padding:14px 16px;border-radius:12px;font-size:15.5px;line-height:1.5;color:var(--kx-text);text-align:left}
.band svg{flex:none;width:18px;height:18px;margin-top:2px}
.band.ok,.ob-feedback--ok{background:#ECF7F0;border:1px solid #9CCFB1}
.band.ok svg{color:#1B6E3F}
.band.err,.ob-feedback--fehler{background:#FCEFEE;border:1px solid #E2A49D}
.band.err svg{color:#B3261E}
.band b,.ob-feedback strong,.ob-feedback b{font-weight:600}
.ob-feedback{display:block}
.formcard .band{margin:0}
.formcard .band + form{margin-top:20px}
.ob-card .ob-feedback{margin:20px 0 0}
.ob-card .ob-feedback + form{margin-top:20px}
.ob-card .ob-feedback + .go{margin-top:16px}
.ob-feedback a{color:var(--kx-link);text-decoration:underline;text-underline-offset:3px}

/* ---------- Anmelden: ruhige Karte in der Mitte ---------- */
.ob-main{display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--kx-kopf-ist,var(--kx-kopf)) + 56px) var(--kx-rand) 112px}
.ob-wrap{width:100%;max-width:460px}
.ob-card{padding:36px 32px 28px;background:#FFFFFF;border:1px solid var(--kx-linie);border-radius:16px;box-shadow:0 1px 2px rgba(15,32,44,.04),0 20px 44px -28px rgba(15,32,44,.22)}
.ob-h{margin:0;font-size:clamp(26px,1vw + 16px,32px);font-weight:600;line-height:1.18;letter-spacing:-.02em;color:var(--kx-text)}
.ob-sub{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--kx-leise)}
.ob-card form{margin-top:28px}
.ob-card .go{width:100%;margin-top:8px}
.feld-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:0 0 8px}
.feld-rij label{margin:0}
.feld-rij a,.wechsel a{color:var(--kx-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,106,158,.45)}
.feld-rij a{font-size:15px}
.feld-rij a:hover,.wechsel a:hover{text-decoration-color:currentColor}
.pw-huelle{position:relative}
.pw-huelle input{padding-right:56px}
.pw-knopf{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--kx-leise);cursor:pointer}
.pw-knopf:hover{color:var(--kx-text);background:var(--kx-flaeche)}
.pw-knopf svg{width:20px;height:20px;display:block}
.wechsel{margin:24px 0 0;padding:16px 18px;background:var(--kx-flaeche);border-radius:12px;font-size:15.5px;line-height:1.55;color:var(--kx-text)}
.ob-back{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:20px 0 0;font-size:15px;font-weight:500;color:var(--kx-leise);text-decoration:none}
.ob-back:hover{color:var(--kx-text)}
.ob-back svg{flex:none;width:16px;height:16px}

/* ---------- Handy und Tablet ---------- */
@media (max-width:767.98px){
  .pg{padding-top:calc(var(--kx-kopf-ist,var(--kx-kopf)) + 32px);padding-bottom:80px}
  .fgrp{margin-top:44px}
  .legal h2{margin-top:40px}
  .formcard{padding:24px 20px}
  .pg .termin{padding:18px 20px}
  .ob-main{padding-top:calc(var(--kx-kopf-ist,var(--kx-kopf)) + 28px);padding-bottom:72px}
  .ob-card{padding:28px 20px 22px}
  .legal dl{padding:4px 18px}
}
@media (max-width:639.98px){
  .fq{padding:15px 16px;font-size:16.5px}
  .fa p{padding:0 16px 18px}
  .pg .fend{padding:18px 16px}
}
@media (max-width:479.98px){
  .pg .termin a,.formcard .go{width:100%}
}

/* ---------- Bewegung, Kontrastmodus, Druck ---------- */
@media (prefers-reduced-motion:reduce){
  .fa,.go,.pg .termin a,.pg .fnav a{transition:none}
  .go:active,.pg .termin a:active{transform:none}
}
@media (forced-colors:active){
  .fq svg{display:block;width:16px;height:16px}
  .fq::after{display:none}
  .nl-check input{-webkit-appearance:auto;appearance:auto}
  .fitem,.formcard,.pg .termin,.wechsel,.pg .fend,.pg .kx-langhinweis,.ob-card .kx-langhinweis,.legal dl{border:1px solid CanvasText}
}
@media print{
  .kx-hd,.kx-menu,.kx-fuss,.fnav,.kx-zurueck,.ob-back{display:none!important}
  .pg,.ob-main{padding-top:0}
  .fa{grid-template-rows:1fr}
  .fq::after{display:none}
}

/* Lange deutsche Titel (Allgemeine Geschäftsbedingungen, Datenschutzerklärung) auf 320 px sauber trennen */
.pg h1,main h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}