@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/barlow/barlow-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/*
 * Angleichung an das Layout der Live-Seite (dort liefert das WordPress-Theme diese Regeln).
 * Wird nach ki-registrations.css geladen; das Plugin-CSS selbst bleibt unverändert.
 */
:root { --ki-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ki-ink: #1d1d1b; --ki-field-gap: 24px; --ki-field-height: 56px; }

body, .ki-reg, .ki-reg input, .ki-reg select, .ki-reg button, .ki-reg textarea { font-family: var(--ki-font); }
.ki-reg { box-sizing: border-box; width: 100%; color: var(--ki-ink); padding-top: 24px; }

/* Überschriften: klein, Großbuchstaben, gesperrt */
.ki-title, h2#ki-step2-title, h2#ki-step3-title, h2#ki-step4-title, h2#ki-step5-title, h2#ki-step6-title, h2#ki-step7-title {
  font-family: var(--ki-font); text-transform: uppercase; letter-spacing: .22em; font-weight: 600; color: var(--ki-ink);
}
.ki-title { font-size: 18px; margin: 0; }
h2#ki-step2-title, h2#ki-step3-title, h2#ki-step4-title, h2#ki-step5-title, h2#ki-step6-title, h2#ki-step7-title { font-size: 18px; margin: 0 0 1.6em; }
.ki-progress-step-label { font-weight: 700; }

/* Eingabefelder: Rahmen zählt zur Breite, feste Höhe, Abstand zwischen den Zeilen */
.ki-reg input, .ki-reg select, .ki-reg textarea { box-sizing: border-box; color: var(--ki-ink); }
.ki-reg input::placeholder { color: #b8b8b8; opacity: 1; }
.ki-row input, .ki-row select, input#birthdate-dp, input#email, input#g_birthdate-dp, input#g_email, input#g_phone, input#phone { height: var(--ki-field-height); padding-block: 0; }
.ki-cell, .ki-fullwidth { height: var(--ki-field-height); }
.ki-row { margin-bottom: var(--ki-field-gap); }
.ki-row.flex-row { gap: 4%; }
.ki-cell { width: 48%; }
.ki-cell:first-child { margin-bottom: 0; }
.ki-fullwidth, .ki-gender .ki-fullwidth, .ki-g-gender .ki-fullwidth { height: auto; }
.ki-row.ki-gender, .ki-row.ki-g-gender { margin-bottom: 20px; }
.ki-iti, .iti { width: 100%; }
.iti input.iti__tel-input, .iti input[type=tel] { width: 100%; }

/* Geschlecht: größere Schaltflächen */
.ki-gender button, .ki-g-gender button { font-size: 17px; padding: .75rem 1.25rem; min-height: 50px; }
.ki-gender .ki-fullwidth, .ki-g-gender .ki-fullwidth { gap: 10px; align-items: center; justify-content: flex-start; }
.ki-gender .ki-fullwidth .txt-label, .ki-g-gender .ki-fullwidth .txt-label { width: auto; order: 0; margin: 0 0 0 .25rem; min-height: 0; }

/* Untere Leiste */
.ki-controls button { font-size: 18px; }
select.ki-lang-select { font-size: 16px; min-height: 3.25em; border-color: #ddd; }

/* Handy: seitlicher Abstand, Felder untereinander, Geschlecht-Beschriftung oben */
@media (max-width: 840px) {
  .ki-reg { padding-inline: clamp(20px, 9vw, 48px); }
  .ki-title { font-size: 15px; }
  h2#ki-step2-title, h2#ki-step3-title, h2#ki-step4-title, h2#ki-step5-title, h2#ki-step6-title, h2#ki-step7-title { font-size: 16px; margin-bottom: 1.8em; }
  .ki-row.flex-row { flex-direction: column; gap: var(--ki-field-gap); }
  .ki-row.flex-row .ki-cell { width: 100%; }
  .ki-gender .ki-fullwidth, .ki-g-gender .ki-fullwidth { gap: 6px; }
  .ki-gender button, .ki-g-gender button { font-size: 14px; padding: .55rem .6rem; min-height: 44px; }
  .ki-gender .ki-fullwidth .txt-label, .ki-g-gender .ki-fullwidth .txt-label { width: 100%; order: -1; margin: 0; }
}

/* Handy: Die feste Button-Leiste soll das Ende des Formulars nicht verdecken (Höhe misst ki-layout.js) */
@media (max-width: 600px) {
  .ki-reg { padding-bottom: calc(var(--ki-controls-h, 100px) + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Barrierefreiheit (WCAG 2.1 AA) ─────────────────────────────────────── */

/* 2.4.7 / 1.4.11: deutlich sichtbarer Fokus für Tastaturnutzer (die Markenfarbe allein reicht als Fokus nicht) */
.ki-reg :focus-visible,
.ki-reg .ki-row input:focus-visible,
.ki-reg .ki-row select:focus-visible,
.ki-reg input#birthdate-dp:focus-visible { outline: 3px solid #1d1d1b; outline-offset: 2px; }
.ki-reg .ki-controls button:focus-visible { outline-color: #1d1d1b; box-shadow: 0 0 0 2px #fff; }

/* 1.4.3: graue Texte mit ausreichendem Kontrast (Markenorange bleibt unverändert) */
.ki-reg input::placeholder { color: #767676; }
.ki-progress-step { color: #6b6b6b; }
.ki-progress-step-label { color: #4d4d4d; opacity: 1; }
.ki-agb-accordion--locked .ki-agb-accordion-title,
.ki-agb-accordion--locked .ki-agb-accordion-toggle { color: #5a5a5a; }

/* 2.3.3 / Komfort: Animationen reduzieren, wenn das Betriebssystem es verlangt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 1.4.10 Reflow: bei 320 px kein horizontaler Überlauf (Fortschrittsleiste, Button-Leiste) */
.ki-progress-container { box-sizing: border-box; max-width: 100%; }
@media (max-width: 360px) {
  .ki-progress-container { padding-inline: 0; }
  .ki-controls { box-sizing: border-box; max-width: 100%; padding: 5px; }
  .ki-controls-row { flex-wrap: nowrap; gap: 4px; justify-content: space-between; width: 100%; box-sizing: border-box; }
  .ki-controls button { min-width: 0; flex: 1 1 0; margin: 0; padding: .4rem .25rem; font-size: 14px; }
  .ki-controls select.ki-lang-select { flex: 1.2 1 0; min-width: 0; width: auto; padding: 0 .4rem; font-size: 14px; }
}