/*
 * Formular-Zentrale: Frontend-Styles im KS-Design.
 * Nachbau der Workshop-Mockups (mockup-firmen-anfrage-formular.html /
 * mockup-anfrage-prozessbegleitung.html). Alles gescoped unter .ks-form,
 * plugin-eigene --ksf-*-Variablen (keine Kollision), keine externen Assets.
 */
.ks-form{
  --ksf-blau:#253d54; --ksf-gruen:#326569; --ksf-beige:#e1ddd4; --ksf-rot:#931204;
  --ksf-ink:#253d54; --ksf-soft:#33454f; --ksf-muted:#6f7c86;
  --ksf-line:#e2e3e8; --ksf-hair:rgba(37,61,84,.14); --ksf-panel:#faf9f5;
  --ksf-display:'Cinzel','Trajan Pro',Georgia,serif;
  --ksf-body:'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
  --ksf-ui:'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif;

  max-width:720px;margin:24px auto;background:#fff;border-radius:22px;
  box-shadow:0 24px 60px -30px rgba(37,61,84,.5);overflow:hidden;
  font-family:var(--ksf-body);color:var(--ksf-ink);line-height:1.6;
}
.ks-form *,.ks-form *::before,.ks-form *::after{box-sizing:border-box}
.ks-form [hidden]{display:none !important}
.ks-form h2,.ks-form h3,.ks-form h4{font-family:var(--ksf-display);font-weight:500;letter-spacing:.02em;margin:0}

/* ---- Kopf ---- */
.ks-form__head{
  background:radial-gradient(120% 130% at 0% 0%,rgba(50,101,105,.34),transparent 55%),var(--ksf-blau);
  color:#fff;padding:26px 34px 22px;
}
.ks-form__eyebrow{font-family:var(--ksf-ui);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ks-form__title{font-size:26px;color:#fff;margin:6px 0 0}
.ks-form__banner{background:var(--ksf-rot);color:#fff;text-align:center;font-family:var(--ksf-ui);font-size:13px;padding:8px 14px}
.ks-form__steps{display:flex;gap:6px;margin-top:20px}
.ks-form__seg{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.ks-form__seg i{display:block;height:100%;width:0;background:#7fc0b6;transition:width .4s ease}
.ks-form__seg.is-done i,.ks-form__seg.is-active i{width:100%}
.ks-form__steplabel{margin-top:10px;font-family:var(--ksf-ui);font-size:12.5px;color:rgba(255,255,255,.8)}

/* ---- Body / Panels ---- */
.ks-form__body{padding:30px 34px 34px;min-height:340px;position:relative}
.ks-form__panel{display:none;animation:ksf-slide .35s ease}
.ks-form__panel.is-on{display:block}
@keyframes ksf-slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ks-form__panel h3{font-size:22px;color:var(--ksf-ink);margin-bottom:4px}
.ks-form__sub{color:var(--ksf-muted);font-family:var(--ksf-ui);font-size:14.5px;margin:0 0 22px}

/* ---- Pfad-Karten (Router) ---- */
.ks-form__paths{display:flex;flex-direction:column;gap:12px}
.ks-form__pathcard{display:flex;gap:15px;align-items:flex-start;padding:18px;border:1.5px solid var(--ksf-line);border-radius:14px;cursor:pointer;transition:.18s;background:#fff}
.ks-form__pathcard:hover{border-color:var(--ksf-gruen);background:#f6f9f8}
.ks-form__pathcard .ks-form__ic{flex:none;width:46px;height:46px;border-radius:12px;background:#e7efec;display:flex;align-items:center;justify-content:center}
.ks-form__pathcard .ks-form__ic svg{width:24px;height:24px;fill:none;stroke:var(--ksf-gruen);stroke-width:1.6}
.ks-form__pathcard h4{font-size:18px;color:var(--ksf-ink);margin-bottom:3px}
.ks-form__pathcard p{font-family:var(--ksf-ui);font-size:13.5px;color:var(--ksf-muted);margin:0}
.ks-form__pathcard .ks-form__go{align-self:center;margin-left:auto;color:var(--ksf-muted)}
.ks-form__pathcard .ks-form__go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* ---- Auswahlkarten (single, mit Icon) ---- */
.ks-form__choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ks-form__choice{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1.5px solid var(--ksf-line);border-radius:12px;cursor:pointer;transition:.18s;background:#fff}
.ks-form__choice:hover{border-color:var(--ksf-gruen);background:#f6f9f8}
.ks-form__choice.is-sel{border-color:var(--ksf-blau);background:#eef3f2;box-shadow:0 0 0 3px rgba(37,61,84,.08)}
.ks-form__choice svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ksf-gruen);stroke-width:1.6}
.ks-form__choice span{font-family:var(--ksf-ui);font-size:15px;color:var(--ksf-ink)}

/* ---- Chips (multi) ---- */
.ks-form__chips{display:flex;flex-wrap:wrap;gap:9px}
.ks-form__chip{padding:9px 16px;border:1.5px solid var(--ksf-line);border-radius:99px;cursor:pointer;font-family:var(--ksf-ui);font-size:14px;color:var(--ksf-soft);transition:.18s;background:#fff}
.ks-form__chip:hover{border-color:var(--ksf-gruen)}
.ks-form__chip.is-sel{background:var(--ksf-blau);border-color:var(--ksf-blau);color:#fff}

/* ---- Check-Karten (multi) ---- */
.ks-form__checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ks-form__checkitem{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--ksf-line);border-radius:10px;cursor:pointer;font-family:var(--ksf-ui);font-size:14.5px;color:var(--ksf-soft)}
.ks-form__checkitem:hover{border-color:var(--ksf-gruen)}
.ks-form__checkitem.is-sel{border-color:var(--ksf-blau);background:#eef3f2;color:var(--ksf-ink)}
.ks-form__checkitem .ks-form__box{width:20px;height:20px;border:1.6px solid var(--ksf-muted);border-radius:5px;flex:none;display:flex;align-items:center;justify-content:center}
.ks-form__checkitem.is-sel .ks-form__box{background:var(--ksf-blau);border-color:var(--ksf-blau)}
.ks-form__checkitem .ks-form__box svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;opacity:0}
.ks-form__checkitem.is-sel .ks-form__box svg{opacity:1}

/* ---- Segmented (single, wenige Optionen) ---- */
.ks-form__segbar{display:inline-flex;flex-wrap:wrap;gap:5px;background:#e9e4d9;border-radius:11px;padding:5px}
.ks-form__segbar label{background:transparent;color:var(--ksf-muted);font-family:var(--ksf-ui);font-size:14.5px;padding:9px 16px;border-radius:8px;cursor:pointer;transition:.18s}
.ks-form__segbar label.is-sel{background:var(--ksf-blau);color:#fff}

/* ---- Slider ---- */
.ks-form__slider{display:flex;align-items:center;gap:16px}
.ks-form__slider input[type=range]{flex:1;accent-color:var(--ksf-gruen)}
.ks-form__slider .ks-form__val{font-family:var(--ksf-display);font-weight:500;font-size:22px;color:var(--ksf-blau);min-width:64px;text-align:right}

/* ---- Felder ---- */
.ks-form__field{margin-bottom:18px}
.ks-form__field>label,.ks-form__label{display:block;font-family:var(--ksf-ui);font-size:13px;color:var(--ksf-ink);margin-bottom:7px}
.ks-form__req{color:var(--ksf-rot)}
.ks-form__opt{color:var(--ksf-muted)}
.ks-form__field input,.ks-form__field textarea,.ks-form__field select,.ks-form__input{
  width:100%;padding:12px 14px;border:1.5px solid var(--ksf-line);border-radius:10px;
  font-family:var(--ksf-body);font-size:15.5px;color:var(--ksf-ink);background:#fff;
}
.ks-form__field input:focus,.ks-form__field textarea:focus,.ks-form__field select:focus,.ks-form__input:focus{outline:none;border-color:var(--ksf-gruen);box-shadow:0 0 0 3px rgba(50,101,105,.12)}
.ks-form__field textarea{resize:vertical;min-height:96px}
.ks-form__field.is-error input,.ks-form__field.is-error textarea{border-color:var(--ksf-rot);box-shadow:0 0 0 3px rgba(147,18,4,.12)}
.ks-form__field.is-error>label{color:var(--ksf-rot)}
.ks-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ks-form__row .ks-form__field{margin-bottom:18px}

/* ---- Vertraulichkeits-/Hinweisbox ---- */
.ks-form__note{display:flex;gap:11px;align-items:flex-start;background:var(--ksf-panel);border:1px solid var(--ksf-line);border-left:3px solid var(--ksf-gruen);border-radius:10px;padding:13px 15px;font-family:var(--ksf-ui);font-size:13px;color:var(--ksf-soft);margin-bottom:16px}
.ks-form__note svg{width:20px;height:20px;flex:none;stroke:var(--ksf-gruen);fill:none;stroke-width:1.6;margin-top:1px}

/* ---- Zustimmung ---- */
.ks-form__consent{display:flex;gap:11px;align-items:flex-start;font-family:var(--ksf-ui);font-size:13.5px;color:var(--ksf-soft);margin-bottom:12px;cursor:pointer}
.ks-form__consent input{margin-top:3px;flex:none;accent-color:var(--ksf-gruen)}
.ks-form__consent a{color:var(--ksf-gruen)}
.ks-form__consent.is-error{color:var(--ksf-rot)}

/* ---- Honeypot ---- */
.ks-form__hp{position:absolute;left:-9999px}

/* ---- Navigation ---- */
.ks-form__nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--ksf-hair)}
.ks-form__btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:10px;border:0;font-family:var(--ksf-ui);font-size:15.5px;cursor:pointer;transition:.18s}
.ks-form__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ks-form__btn--primary{background:var(--ksf-blau);color:#fff;margin-left:auto}
.ks-form__btn--primary:hover{background:var(--ksf-gruen)}
.ks-form__btn--ghost{background:transparent;color:var(--ksf-muted)}
.ks-form__btn--ghost:hover{color:var(--ksf-ink)}
.ks-form__btn.is-busy{opacity:.5;cursor:progress}

/* ---- Fehlerzeile ---- */
.ks-form__error{background:rgba(147,18,4,.08);border:1px solid rgba(147,18,4,.25);color:var(--ksf-rot);border-radius:10px;padding:11px 15px;margin-top:14px;font-family:var(--ksf-ui);font-size:14px}

/* ---- Erfolgs-Screen ---- */
.ks-form__done{text-align:center;padding:16px 10px 6px}
.ks-form__done .ks-form__circle{width:84px;height:84px;border-radius:50%;background:#e7efec;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.ks-form__done .ks-form__circle svg{width:42px;height:42px;stroke:var(--ksf-gruen);fill:none;stroke-width:2.4}
.ks-form__done h3{font-size:26px;margin-bottom:10px;color:var(--ksf-ink)}
/* Anschluss-Knopf (Kennenlerngespräch): ist ein Link, kein Button. */
.ks-form__done .ks-form__btn{text-decoration:none;margin:0 auto}
.ks-form__done .ks-form__btn--primary:hover{color:#fff}
.ks-form__done p{color:var(--ksf-soft);max-width:40ch;margin:0 auto 8px}

@media(max-width:640px){
  .ks-form{margin:16px auto;border-radius:18px}
  .ks-form__choices,.ks-form__checks,.ks-form__row{grid-template-columns:1fr}
  .ks-form__body{padding:24px 20px}
  .ks-form__head{padding:22px 22px 18px}
  .ks-form__title{font-size:23px}

  /* iOS zoomt beim Antippen automatisch in Eingabefelder, deren Schrift kleiner
     als 16px ist. Die Seite springt dann und muss von Hand zurueckgezogen
     werden. Deshalb auf dem Handy genau 16px. */
  .ks-form__field input,.ks-form__field textarea,.ks-form__field select,.ks-form__input{font-size:16px}

  /* Zwei Schaltflaechen nebeneinander werden auf schmalen Displays gequetscht:
     lieber umbrechen lassen und die Hauptaktion voll ausnutzen. */
  .ks-form__nav{flex-wrap:wrap;gap:10px}
  .ks-form__btn{padding:13px 20px!important;font-size:15px}
  .ks-form__btn--primary{flex:1 1 auto;justify-content:center}

  .ks-form{margin:16px auto!important;border-radius:18px!important}
  .ks-form__body{padding:24px 20px!important}
  .ks-form__head{padding:22px 22px 18px!important}

  .ks-form__done h3{font-size:22px}
  .ks-form__done .ks-form__circle{width:70px;height:70px}
}

/* ======================================================================
 * Divi-Reset neutralisieren (Befund 18.08.2026, am DOM verifiziert)
 * ----------------------------------------------------------------------
 * Der Divi-Builder bringt einen eigenen Reset mit, der auf ALLE Elemente
 * innerhalb seines Containers wirkt:
 *
 *   #et-boc .et-l div, … section, … { margin:0; padding:0; border:none;
 *     background:transparent; box-shadow:none; border-radius:0; }
 *   #et-boc .et-l section { display:block; }
 *
 * Dieser Selektor hat die Spezifitaet ID+Klasse+Element und schlaegt damit
 * jede einfache Klassenregel, egal in welcher Reihenfolge die Dateien
 * geladen werden. Konkret verschwanden auf einer Divi-Seite die weisse
 * Karte, alle Rahmen und Rundungen, und weil `section{display:block}` das
 * `display:none` der Panels aufhob, standen alle Schritte gleichzeitig
 * untereinander.
 *
 * Gegen eine ID im Selektor hilft weder mehr Verschachtelung noch eine
 * spaetere Ladeposition, nur `!important`. Deshalb steht hier bewusst
 * gebuendelt, was der Reset zerstoert, statt es ueber die ganze Datei zu
 * verteilen. Wird Divi irgendwann abgeloest, kann dieser Block ersatzlos
 * entfallen.
 * ====================================================================== */

/* Traeger: Karte, Panels-Umschaltung */
.ks-form{
  max-width:720px!important;margin:24px auto!important;background:#fff!important;
  border-radius:22px!important;box-shadow:0 24px 60px -30px rgba(37,61,84,.5)!important;
  overflow:hidden!important;
}
.ks-form__panel{display:none!important}
.ks-form__panel.is-on{display:block!important}
.ks-form [hidden]{display:none!important}

/* Kopfbereich */
.ks-form__head{
  background:radial-gradient(120% 130% at 0% 0%,rgba(50,101,105,.34),transparent 55%),var(--ksf-blau)!important;
  padding:26px 34px 22px!important;color:#fff!important;
}
.ks-form__banner{background:var(--ksf-rot)!important;padding:8px 14px!important;color:#fff!important}
.ks-form__steps{margin-top:20px!important}
.ks-form__seg{background:rgba(255,255,255,.22)!important;border-radius:99px!important;height:5px!important}
.ks-form__seg i{background:#7fc0b6!important}

/* Inhalt */
.ks-form__body{padding:30px 34px 34px!important}
.ks-form__sub{margin:0 0 22px!important}
.ks-form__field{margin-bottom:18px!important}

/* Auswahl-Elemente */
.ks-form__pathcard,.ks-form__choice,.ks-form__checkitem{
  border:1.5px solid var(--ksf-line)!important;border-radius:12px!important;background:#fff!important;
}
.ks-form__pathcard{padding:18px!important;border-radius:14px!important}
.ks-form__choice{padding:15px 16px!important}
.ks-form__checkitem{padding:11px 13px!important;border-radius:10px!important}
.ks-form__choice.is-sel,.ks-form__checkitem.is-sel{background:#eef3f2!important;border-color:var(--ksf-blau)!important}
.ks-form__pathcard .ks-form__ic{background:#e7efec!important;border-radius:12px!important}

.ks-form__chip{
  border:1.5px solid var(--ksf-line)!important;border-radius:99px!important;
  background:#fff!important;padding:9px 16px!important;
}
.ks-form__chip.is-sel{background:var(--ksf-blau)!important;border-color:var(--ksf-blau)!important;color:#fff!important}

/* Eingabefelder */
.ks-form__field input,.ks-form__field textarea,.ks-form__field select,.ks-form__input{
  border:1.5px solid var(--ksf-line)!important;border-radius:10px!important;
  background:#fff!important;padding:12px 14px!important;
}

/* Hinweisboxen.
   ACHTUNG: NICHT `.ks-form__box` mitfassen, das ist das Ankreuzkaestchen der
   Check-Karten und keine Hinweisbox. Hier zusammengefasst hatte es 13px
   Innenabstand und beigen Grund bekommen und sah aus wie ein leeres Feld. */
.ks-form__note{
  background:var(--ksf-panel)!important;border:1px solid var(--ksf-line)!important;
  border-left:3px solid var(--ksf-gruen)!important;
  border-radius:10px!important;padding:13px 15px!important;
}
.ks-form__error{
  background:rgba(147,18,4,.08)!important;border:1px solid rgba(147,18,4,.25)!important;
  border-radius:10px!important;padding:11px 15px!important;margin-top:14px!important;
}

/* Navigation und Schaltflaechen */
.ks-form__nav{margin-top:24px!important;padding-top:20px!important;border-top:1px solid var(--ksf-hair)!important}
.ks-form__btn{padding:13px 26px!important;border-radius:10px!important;border:0!important}
.ks-form__btn--primary{background:var(--ksf-blau)!important;color:#fff!important}
.ks-form__btn--primary:hover{background:var(--ksf-gruen)!important}
.ks-form__btn--ghost{background:transparent!important;color:var(--ksf-muted)!important}

/* Erfolgs-Screen */
.ks-form__done{padding:16px 10px 6px!important}
.ks-form__done .ks-form__circle{
  background:#e7efec!important;border-radius:50%!important;
  width:84px!important;height:84px!important;margin:0 auto 20px!important;
}

/* Segment-Leiste (Vor Ort / Online / Hybrid) */
.ks-form__segbar{background:#e9e4d9!important;border-radius:11px!important;padding:5px!important}
.ks-form__segbar label{padding:9px 16px!important;border-radius:8px!important;background:transparent!important}
.ks-form__segbar label.is-sel{background:var(--ksf-blau)!important;color:#fff!important}

/* Zustimmungszeilen */
.ks-form__consent{margin-bottom:12px!important}
.ks-form__hp{position:absolute!important;left:-9999px!important}

/* ----------------------------------------------------------------------
 * Textfarben (zweite Welle desselben Divi-Befunds, 18.08.2026)
 * Der Reset setzt zusaetzlich `color:inherit` auf alle Elemente. In einer
 * Divi-Sektion mit dunklem Hintergrund erben damit saemtliche Texte im
 * Formular deren Weiss und stehen weiss auf weisser Karte, also unsichtbar.
 * Deshalb hier jede Textfarbe der Karte explizit festhalten. Die Texte auf
 * dem blauen Kopf und auf gefuellten Flaechen bleiben bewusst weiss.
 * -------------------------------------------------------------------- */
.ks-form{color:var(--ksf-ink)!important}
.ks-form__panel h3,.ks-form__panel h4,.ks-form__pathcard h4{color:var(--ksf-ink)!important}
.ks-form__sub,.ks-form__pathcard p{color:var(--ksf-muted)!important}
.ks-form__choice span{color:var(--ksf-ink)!important}
.ks-form__chip{color:var(--ksf-soft)!important}
.ks-form__chip.is-sel{color:#fff!important}
.ks-form__checkitem{color:var(--ksf-soft)!important}
.ks-form__checkitem.is-sel{color:var(--ksf-ink)!important}
.ks-form__segbar label{color:var(--ksf-muted)!important}
.ks-form__segbar label.is-sel{color:#fff!important}
.ks-form__field>label,.ks-form__label{color:var(--ksf-ink)!important}
.ks-form__field.is-error>label{color:var(--ksf-rot)!important}
.ks-form__req{color:var(--ksf-rot)!important}
.ks-form__opt{color:var(--ksf-muted)!important}
.ks-form__field input,.ks-form__field textarea,.ks-form__field select,.ks-form__input{color:var(--ksf-ink)!important}
.ks-form__field input::placeholder,.ks-form__field textarea::placeholder{color:var(--ksf-muted)!important;opacity:1}
.ks-form__note,.ks-form__consent{color:var(--ksf-soft)!important}
.ks-form__consent a{color:var(--ksf-gruen)!important}
.ks-form__consent.is-error{color:var(--ksf-rot)!important}
.ks-form__error{color:var(--ksf-rot)!important}
.ks-form__slider .ks-form__val{color:var(--ksf-blau)!important}
.ks-form__done h3{color:var(--ksf-ink)!important}
.ks-form__done p{color:var(--ksf-soft)!important}
.ks-form__btn--ghost{color:var(--ksf-muted)!important}
.ks-form__btn--primary,.ks-form__btn--primary:hover{color:#fff!important}

/* Kopfbereich: weiss ist hier richtig, gegen fremde dunkle Vererbung sichern */
.ks-form__head,.ks-form__title{color:#fff!important}
.ks-form__eyebrow{color:rgba(255,255,255,.75)!important}
.ks-form__steplabel{color:rgba(255,255,255,.8)!important}

/* ----------------------------------------------------------------------
 * Ankreuzkaestchen der Check-Karten (Divi-Reset, dritte Welle)
 * Der Reset nimmt dem Kaestchen Rahmen, Groesse und Hintergrund, dadurch
 * blieb die Auswahl nur am Kartenrahmen erkennbar und der Haken unsichtbar.
 * -------------------------------------------------------------------- */
.ks-form__checkitem .ks-form__box{
  width:20px!important;height:20px!important;flex:none!important;
  border:1.6px solid var(--ksf-muted)!important;border-radius:5px!important;
  background:#fff!important;padding:0!important;
  display:flex!important;align-items:center;justify-content:center;
}
.ks-form__checkitem.is-sel .ks-form__box{
  background:var(--ksf-blau)!important;border-color:var(--ksf-blau)!important;
}
.ks-form__checkitem .ks-form__box svg{
  width:12px!important;height:12px!important;
  stroke:#fff!important;fill:none!important;stroke-width:3;opacity:0;
}
.ks-form__checkitem.is-sel .ks-form__box svg{opacity:1}

/* ----------------------------------------------------------------------
 * Ueberschriften im Karteninneren (vierte Welle, Erfolgs-Screen)
 * `.ks-form__done h3` allein reichte nicht: Divi faerbt Ueberschriften
 * ueber einen Selektor mit ID, der auch ein `!important` derselben
 * Spezifitaetsklasse noch schlaegt. Deshalb hier mit zusaetzlicher
 * Verschachtelung. Betrifft jede Ueberschrift auf weisser Karte, der
 * Kopfbereich bleibt ausgenommen und weiss.
 * -------------------------------------------------------------------- */
.ks-form .ks-form__body h3,
.ks-form .ks-form__body h4,
.ks-form .ks-form__done h3,
.ks-form .ks-form__panel h3,
.ks-form .ks-form__pathcard h4{color:var(--ksf-ink)!important}
.ks-form .ks-form__done p{color:var(--ksf-soft)!important}
.ks-form .ks-form__sub{color:var(--ksf-muted)!important}

/* ----------------------------------------------------------------------
 * Mobil- und Tablet-Optimierung (Broadcast 24.08.2026)
 * Geprueft gegen 320, 360, 390 und 768 px. Zwei Befunde:
 * (2) Touch-Ziele: Chips, Check-Karten und Segment-Leiste lagen bei 38 bis
 *     42 px und damit unter den geforderten 44 px.
 * (3) Schriftgroessen: Bedienelemente und Fliesstext lagen bei 13 bis 15 px.
 * Beides wird hier NUR fuer schmale Viewports korrigiert, damit die
 * Desktop-Optik unveraendert bleibt.
 * -------------------------------------------------------------------- */
@media(max-width:640px){
  /* Touch-Ziele auf mindestens 44 px */
  .ks-form__chip{padding:12px 18px!important;font-size:16px!important;min-height:44px;display:inline-flex;align-items:center}
  .ks-form__checkitem{padding:13px 14px!important;font-size:16px!important;min-height:44px}
  .ks-form__segbar label{padding:12px 18px!important;font-size:16px!important;min-height:44px;display:inline-flex;align-items:center}
  .ks-form__choice{padding:16px!important;min-height:52px}
  .ks-form__pathcard{padding:16px!important}
  .ks-form__btn{min-height:46px}

  /* Lesbare Schrift ohne Zoom */
  .ks-form__sub{font-size:16px!important;line-height:1.5}
  .ks-form__choice span{font-size:16px!important}
  .ks-form__field>label,.ks-form__label{font-size:15px!important}
  .ks-form__pathcard p{font-size:15px!important}
  .ks-form__note,.ks-form__consent{font-size:15px!important;line-height:1.5}
  .ks-form__steplabel{font-size:14px!important}

  /* Zustimmungs-Kaestchen bequemer treffen */
  .ks-form__consent{gap:14px;padding:4px 0}
  .ks-form__consent input{width:22px;height:22px}

  /* Segment-Leiste darf scrollen statt zu ueberlaufen */
  .ks-form__segbar{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}

/* Sehr schmale Geraete (320 px) */
@media(max-width:360px){
  .ks-form__body{padding:20px 16px!important}
  .ks-form__head{padding:18px 16px 16px!important}
  .ks-form__title{font-size:21px}
  .ks-form__nav{gap:8px}
  .ks-form__btn{padding:12px 16px!important;font-size:15px}
}