/* Support-Plattform: gemeinsamer Stil (V2, Entwurf 31.10.2026, Auftrag Mike).
   Farben aus dem Firmenlogo. Kontraste gemessen, Text mindestens 7:1 oder 4.5:1 bei Knoepfen.
   Wird NACH hilfe.css geladen und passt die Hilfe-Seite ueber deren Variablen an. */

/* Bisher aus Bootstrap: hilfe.js blendet die Themen per hidden aus, hilfe.css setzt dort display:grid */
[hidden]{display:none!important}
:root{
  --logo-gelb:#F4D05D; --logo-magenta:#B31E78; --logo-rot:#D92957; --logo-teal:#06789A; --logo-teal-dunkel:#125062;
  --teal-tief:#0d3a47; --teal-hell:#e4f1f5; --magenta-hell:#f8e8f2; --gelb-hell:#fdf5d8;
  --text:#1f2933; --text-2:#3f4754; --rand:#6b7480; --linie:#c9d1da; --flaeche:#f4f6f9; --weiss:#fff;
  --fehler:#a30f35; --ok:#1d6b3a; --radius:12px;
  --schatten:0 1px 2px rgba(13,58,71,.10),0 6px 16px rgba(13,58,71,.08);
  /* Hilfe-Seite (hilfe.css) auf die Logofarben umstellen */
  --sh-blau:#125062; --sh-blau-dunkel:#0d3a47; --sh-blau-hell:#e4f1f5; --sh-orange:#F4D05D; --sh-orange-dunkel:#ebc13f;
  --sh-text:#1f2933; --sh-grau:#3f4754; --sh-linie:#c9d1da; --sh-flaeche:#f4f6f9; --sh-radius:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--flaeche);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:1.0625rem;line-height:1.55}
h1,h2,h3{line-height:1.25}
p{margin:0 0 1em}
a{color:var(--logo-teal-dunkel);text-underline-offset:2px}
a:hover{color:var(--logo-magenta)}
img,svg{max-width:100%}
.fas{line-height:1}

/* Tastatur-Fokus: auf jeder Flaeche klar sichtbar */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--logo-magenta);outline-offset:2px}
.saf-held a:focus-visible,.sh-held a:focus-visible,.sh-held button:focus-visible,.sh-suche input:focus-visible,.saf-fuss a:focus-visible,.sh-kontakt a:focus-visible{outline-color:var(--logo-gelb)}

.saf-sprung{position:absolute;left:12px;top:-60px;z-index:50;background:var(--logo-teal-dunkel);color:#fff;padding:12px 16px;border-radius:8px;font-weight:700}
.saf-sprung:focus{top:12px;color:#fff}

/* ---------- Kopf ---------- */
.saf-kopf{background:var(--weiss)}
.saf-kopf::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--logo-gelb) 0 25%,var(--logo-magenta) 25% 50%,var(--logo-rot) 50% 75%,var(--logo-teal) 75% 100%)}
.saf-kopf-innen{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px}
.saf-marke{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:#3a3c4e;text-decoration:none}
.saf-marke:hover{color:#3a3c4e;text-decoration:none}
.saf-marke-bild{height:34px;width:auto;flex:0 0 auto;display:block}
.saf-marke-text{display:inline-flex;align-items:center;gap:9px;font-size:1.32rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.saf-marke-text i{color:var(--logo-teal);font-size:1.02rem}

.saf-haupt{display:grid;grid-template-columns:repeat(3,132px);gap:10px}
.saf-nk{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 10px;border-radius:var(--radius);border:2px solid transparent;font-size:1rem;font-weight:700;text-decoration:none;box-shadow:0 1px 2px rgba(13,58,71,.25);position:relative;transition:background-color .15s,transform .15s,box-shadow .15s}
.saf-nk:hover{text-decoration:none;box-shadow:0 3px 8px rgba(13,58,71,.3);transform:translateY(-1px)}
.saf-nk-shop{background:var(--logo-teal);border-color:#045a74;color:#fff}
.saf-nk-shop:hover{background:#056783;color:#fff}
.saf-nk-wissen{background:var(--logo-magenta);border-color:#8a155c;color:#fff}
.saf-nk-wissen:hover{background:#991a66;color:#fff}
.saf-nk-kontakt{background:var(--logo-gelb);border-color:#7a5c00;color:var(--text)}
.saf-nk-kontakt:hover{background:#ebc13f;color:var(--text)}
/* Aktive Seite: nicht nur ueber Farbe erkennbar */
.saf-nk[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:2px;background:currentColor}

/* ---------- Heldenbereich ---------- */
.saf-held{background:linear-gradient(160deg,var(--logo-teal-dunkel) 0%,var(--teal-tief) 100%);color:#fff;padding:32px 16px 30px;text-align:center}
.saf-held h1{margin:0 auto 8px;max-width:760px;font-size:clamp(1.55rem,4.6vw,2.2rem);font-weight:700;color:#fff}
.saf-held p{margin:0 auto;max-width:640px;font-size:1.06rem;color:#fff}
.saf-held-klein{padding:18px 16px 16px}
.saf-held-klein h1{margin-bottom:4px;font-size:clamp(1.4rem,4.2vw,1.9rem)}
.saf-held-klein p{font-size:1rem}

.saf-inhalt{max-width:760px;margin:0 auto;padding:24px 16px 48px}

/* ---------- Drei Wege ---------- */
.saf-wahl{display:grid;gap:14px}
.saf-wahl-karte{display:flex;align-items:center;gap:16px;padding:18px 16px;background:#fff;border:2px solid var(--rand);border-radius:var(--radius);color:var(--text);text-decoration:none;box-shadow:var(--schatten);transition:border-color .15s,transform .15s}
.saf-wahl-karte:hover{border-color:var(--logo-teal-dunkel);color:var(--text);text-decoration:none;transform:translateY(-1px)}
.saf-wahl-icon{flex:0 0 54px;height:54px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem}
.saf-wahl-angebot .saf-wahl-icon{background:var(--logo-gelb);color:var(--text)}
.saf-wahl-beratung .saf-wahl-icon{background:var(--logo-magenta);color:#fff}
.saf-wahl-frage .saf-wahl-icon{background:var(--logo-teal);color:#fff}
.saf-wahl-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.saf-wahl-text strong{font-size:1.13rem;font-weight:700;line-height:1.3}
.saf-wahl-text small{font-size:1rem;line-height:1.4;color:var(--text-2)}
.saf-wahl-pfeil{color:var(--logo-teal-dunkel);font-size:1.05rem}
.saf-wahl-fuss{margin:24px 0 0;text-align:center;color:var(--text-2)}
.saf-wahl-fuss a{font-weight:700}

/* ---------- Formular ---------- */
.saf-formular{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:20px 16px}
.saf-zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:8px;font-weight:600;text-decoration:none}
.saf-zurueck:hover{text-decoration:underline}
.saf-datenschutz{margin:0 0 20px;padding:12px 14px;border-left:4px solid var(--logo-teal);border-radius:0 8px 8px 0;background:var(--teal-hell);color:var(--text);font-size:.97rem;line-height:1.5}
.saf-pflicht-info{margin:0 0 16px;font-size:.97rem;color:var(--text-2)}
.saf-stern{color:var(--fehler);font-weight:700}
.saf-fehler:focus{outline:3px solid var(--fehler);outline-offset:2px}
.saf-fehler{display:flex;gap:10px;margin:0 0 18px;padding:14px;border:2px solid var(--fehler);border-radius:10px;background:#fdecef;color:#6f0a24;font-weight:600}
.saf-fehler i{margin-top:4px}

.saf-feld{margin:0 0 18px}
.saf-titel,.saf-block legend,.saf-wahlweg legend{display:block;margin:0 0 6px;font-size:1rem;font-weight:700;color:var(--text)}
.saf-optional{font-weight:400;color:var(--text-2)}
.saf-eingabe{display:block;width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:1.06rem;color:var(--text);background:#fff;border:2px solid var(--rand);border-radius:10px;-webkit-appearance:none;appearance:none}
textarea.saf-eingabe{min-height:150px;resize:vertical;line-height:1.5}
.saf-eingabe::placeholder{color:#59606d;opacity:1}
.saf-eingabe:hover{border-color:var(--logo-teal-dunkel)}
.saf-eingabe:focus{border-color:var(--logo-teal-dunkel);outline:3px solid var(--logo-magenta);outline-offset:2px}
.saf-fehlt .saf-eingabe{border-color:var(--fehler);background:#fff6f8}
.saf-fehlt-text{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.97rem;font-weight:700;color:var(--fehler)}
.saf-rechnen-fehlt{border-color:var(--fehler);background:#fff6f8}
.saf-hilfe{display:block;margin-top:5px;font-size:.95rem;line-height:1.4;color:var(--text-2)}

.saf-block{min-width:0;margin:0 0 20px;padding:0;border:0;border-top:2px solid var(--linie)}
.saf-block legend{float:left;width:100%;padding:16px 0 8px;font-size:1.13rem;color:var(--logo-teal-dunkel)}
.saf-block legend + *{clear:both}
.saf-block-grund{margin:0 0 14px;font-size:.97rem;line-height:1.5;color:var(--text-2)}
.saf-zeile{display:grid;grid-template-columns:1fr;gap:0 14px}
.saf-zeile-strasse{grid-template-columns:1fr 92px}
.saf-zeile-ort{grid-template-columns:110px 1fr}

.saf-wahlweg{min-width:0;margin:0 0 18px;padding:0;border:0}
.saf-block .saf-wahlweg legend{float:none;padding:0;margin:0 0 6px;font-size:1rem;color:var(--text)}
.saf-wahlweg-optionen{display:grid;grid-template-columns:1fr;gap:10px}
.saf-wahlweg-opt{position:relative;display:block;margin:0;cursor:pointer}
.saf-wahlweg-opt input{position:absolute;left:16px;top:50%;width:22px;height:22px;margin:-11px 0 0;accent-color:var(--logo-teal-dunkel)}
.saf-wahlweg-opt span{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px 12px 50px;background:#fff;border:2px solid var(--rand);border-radius:10px;font-weight:600}
.saf-wahlweg-opt:hover span{border-color:var(--logo-teal-dunkel)}
.saf-wahlweg-opt input:checked + span{border-color:var(--logo-teal-dunkel);background:var(--teal-hell);box-shadow:inset 0 0 0 1px var(--logo-teal-dunkel)}
.saf-wahlweg-opt input:focus-visible + span{outline:3px solid var(--logo-magenta);outline-offset:2px}

.saf-datei-eingabe{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.saf-datei-knopf{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;margin:0;background:#fff;border:2px dashed var(--rand);border-radius:10px;font-weight:600;color:var(--logo-teal-dunkel);cursor:pointer;overflow-wrap:anywhere}
.saf-datei-knopf:hover{border-color:var(--logo-teal-dunkel);background:var(--teal-hell)}
.saf-datei-eingabe:focus-visible + .saf-datei-knopf{outline:3px solid var(--logo-magenta);outline-offset:2px}

.saf-rechnen{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--flaeche);border:2px solid var(--linie);border-radius:10px}
.saf-rechnen label{margin:0;font-size:1.06rem;font-weight:700}
.saf-rechnen .saf-eingabe{width:92px;flex:0 0 92px;text-align:center;font-weight:700}

.saf-aktionen{display:flex;flex-direction:column;margin-top:22px}
.saf-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 24px;border-radius:var(--radius);border:2px solid transparent;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .15s}
.saf-knopf:hover{text-decoration:none}
.saf-knopf-haupt{background:var(--logo-teal-dunkel);border-color:var(--teal-tief);color:#fff}
.saf-knopf-haupt:hover{background:var(--teal-tief);color:#fff}
.saf-knopf-sendet,.saf-knopf-sendet:hover{background:var(--text-2);border-color:var(--text-2);cursor:progress}
.saf-knopf-neben{background:#fff;border-color:var(--rand);color:var(--text)}
.saf-knopf-neben:hover{background:var(--flaeche);color:var(--text)}

/* ---------- Danke-Seite ---------- */
.saf-danke{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:32px 20px;text-align:center}
.saf-danke-haken{font-size:3rem;color:var(--ok);margin-bottom:12px}
.saf-danke h1{margin:0 0 14px;font-size:1.55rem}
.saf-danke p{max-width:520px;margin:0 auto 14px;color:var(--text-2)}
.saf-ticketnr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.2rem;font-weight:700;color:var(--logo-teal-dunkel)}
.saf-danke-wege{display:grid;gap:10px;margin-top:20px}
.saf-daten{max-width:640px;margin:22px auto 0;padding-top:18px;border-top:1px solid var(--linie);text-align:left}
.saf-daten h2{margin:0 0 12px;font-size:1.15rem}
.saf-daten h3{margin:16px 0 6px;font-size:1rem}
.saf-daten dl{display:grid;gap:10px;margin:0}
.saf-daten dl>div{display:grid;gap:1px}
.saf-daten dt{font-weight:700}
.saf-daten dd{margin:0;color:var(--text-2);overflow-wrap:anywhere}
.saf-danke .saf-daten p{max-width:none;margin:0 0 12px;overflow-wrap:anywhere}
@media (min-width:600px){.saf-daten dl>div{grid-template-columns:190px 1fr;gap:12px}}

/* ---------- Fuss ---------- */
.saf-fuss{background:var(--teal-tief);color:#fff;padding:20px 16px;text-align:center}
.saf-fuss-wege{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;max-width:420px;margin:0 auto 8px;padding:0;list-style:none}
.saf-fuss-wege a{display:flex;align-items:center;justify-content:center;min-height:44px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.saf-fuss-wege a:hover{color:var(--logo-gelb)}
.saf-fuss p{margin:0;font-size:.97rem}

/* ---------- Ab Tablet/PC ---------- */
@media (min-width:640px){
  .saf-formular{padding:28px}
  .saf-zeile{grid-template-columns:1fr 1fr}
  .saf-zeile-strasse{grid-template-columns:1fr 110px}
  .saf-zeile-ort{grid-template-columns:130px 1fr}
  .saf-wahlweg-optionen{grid-template-columns:1fr 1fr}
  .saf-aktionen{align-items:flex-end}
  .saf-knopf-haupt{min-width:220px}
  .saf-danke-wege{grid-template-columns:auto auto;justify-content:center}
  .saf-fuss-wege{display:flex;justify-content:center;max-width:none;gap:6px 26px}
}

/* ---------- Handy: Kopf zweizeilig, drei gleiche Knoepfe ---------- */
@media (max-width:759px){
  .saf-kopf-innen{flex-direction:column;align-items:stretch;padding:10px 16px 14px}
  .saf-haupt{grid-template-columns:repeat(3,1fr);gap:8px}
  .saf-nk{flex-direction:column;gap:5px;min-height:68px;padding:9px 4px 11px;font-size:1rem}
  .saf-nk i{font-size:1.25rem}
  .saf-nk[aria-current="page"]::after{bottom:3px}
}
@media (max-width:359px){
  .saf-marke-text{font-size:1.14rem}
  .saf-marke-bild{height:28px}
}

/* ---------- Hilfe-Seite: nur Kontrast und Abgrenzung, Inhalte bleiben ---------- */
.sh-schnell{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.sh-schnell{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:359px){.sh-schnell{grid-template-columns:minmax(0,1fr)}}
.sh-held p{opacity:1}
.sh-chips{font-size:1rem}
.sh-chips span{opacity:1}
.sh-chips a{background:rgba(255,255,255,.14);border:2px solid #fff;min-height:44px;display:inline-flex;align-items:center}
.sh-suche input{min-height:56px;border:2px solid #fff;font-family:inherit}
.sh-suche input::placeholder{color:#59606d;opacity:1;font-size:.94rem}
.sh-suche button{background:var(--logo-teal);width:48px;height:48px;font-size:1.1rem}
.sh-schnell a{border:2px solid var(--rand)}
.sh-box,.sh-ansicht-kopf,details.sh-frage,.sh-leer{border:1px solid var(--linie)}
.sh-schnell a:hover{border-color:var(--logo-teal-dunkel)}
.sh-schnell b{font-size:1.03rem}
.sh-schnell small,.sh-box-text{font-size:.95rem}
.sh-ic-klein{background:var(--teal-hell);color:var(--logo-teal-dunkel)}
.sh-ic{background:var(--logo-teal)}
.sh-ic-orange{background:var(--logo-gelb);color:var(--text)}
.sh-box li a{font-size:1.02rem}
.sh-alle{border:2px solid var(--logo-teal-dunkel)}
.sh-alle:hover{background:var(--logo-teal-dunkel)}
.sh-haupt a:hover{color:var(--logo-magenta)}
.sh-alle:hover,.sh-haupt .sh-alle:hover{color:#fff!important}
.sh-unter-nav{flex-wrap:wrap;overflow-x:visible}
.sh-unter-nav a{border:2px solid var(--rand);min-height:44px;display:inline-flex;align-items:center;white-space:normal}
.sh-hilfreich{font-size:.97rem}
.sh-hilfreich button{min-height:44px;padding:8px 14px;border:2px solid var(--rand);color:var(--text)}
.sh-hilfreich button.voted{border-color:var(--ok);color:var(--ok)}
/* Handy: Frage eine Zeile, Ja und Nein gleich breit nebeneinander. Der Fragetext steht ohne eigenes Element im HTML,
   darum erzwingt ::after den Umbruch. */
@media (max-width:599px){
  .sh-hilfreich::after{content:"";flex:0 0 100%;height:0;order:1}
  .sh-hilfreich button{flex:1 1 0;order:2}
}
.sh-knopf{border:2px solid #7a5c00;color:var(--text)!important}
.sh-mobil-leiste{background:#fff}
.sh-mobil-leiste .sh-knopf{min-height:52px}
.sh-kontakt{background:var(--logo-teal-dunkel);border:0;color:#fff}
.sh-kontakt h2,.sh-kontakt b{color:#fff}
.sh-kontakt p{color:#fff}
.sh-kontakt .sh-ic-klein{background:#fff;color:var(--logo-teal-dunkel)}
.sh-kontakt .sh-knopf{width:100%}
@media (min-width:900px){.sh-kontakt .sh-knopf{width:auto;white-space:nowrap}}

.saf-nk:active,.saf-knopf:active,.saf-wahl-karte:active,.sh-knopf:active{transform:translateY(1px);box-shadow:none}
.sh-antwort h3{margin:16px 0 6px;font-size:1.12rem;font-weight:700}
.sh-antwort h4{margin:14px 0 6px;font-size:1.03rem;font-weight:700}
.sh-antwort p,.sh-antwort ul,.sh-antwort ol{margin-top:0;margin-bottom:.8rem}
@media (forced-colors:active){.saf-nk[aria-current="page"]::after{background:CanvasText}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  .saf-nk:hover,.saf-wahl-karte:hover,.sh-schnell a:hover{transform:none}
}