:root { --ci-pad: 18px; }
* { box-sizing: border-box; }
/* Honeypot (Spam-Schutz): für Menschen unsichtbar, Bots füllen es aus. */
.ci-hp { position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }

/* ── Selbst-Abgleich (E-Mail + Geburtsdatum) ── */
.ci-lookup { background:#f0f9ff; border:2px solid #bae6fd; border-radius:12px; padding:10px 16px; margin-bottom:14px; }
/* Akkordeon-Kopf: volle Breite, klickbar. Body eingeklappt → kein Scrollen bei 1024×768. */
.ci-lookup-title { display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px;
    font-size:15px; font-weight:800; color:#0369a1; background:none; border:0; padding:4px 0; cursor:pointer; text-align:left; font-family:inherit; }
.ci-lookup-chev { flex:0 0 auto; transition:transform .2s ease; }
.ci-lookup.open .ci-lookup-chev { transform:rotate(180deg); }
.ci-lookup-body { max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease, margin .2s ease; }
.ci-lookup.open .ci-lookup-body { max-height:340px; opacity:1; margin-top:8px; }
.ci-lookup-sub { font-size:12px; color:#64748b; margin:2px 0 10px; }
.ci-req { color:#dc2626; font-weight:800; margin-left:3px; }
/* Vollbild-Button im Kiosk-Kopf */
.ci-fs-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:10px;
    border:1px solid var(--bre-border,#e2e8f0); border-radius:10px; background:#fff; color:#475569; cursor:pointer; padding:0; flex:0 0 auto; transition:.15s; }
.ci-fs-btn:hover { background:#f1f5f9; color:#0f172a; }
.ci-lookup-btn { margin-top:10px; background:#0284c7; color:#fff; border:0; border-radius:10px; padding:10px 18px; font-size:15px; font-weight:700; cursor:pointer; transition:.15s; }
.ci-lookup-btn:hover { filter:brightness(1.08); }
.ci-lookup-btn:disabled { opacity:.5; cursor:default; }
html,body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:var(--bre-bg,#f8fafc); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--bre-text-main,#1e293b); -webkit-user-select:none; user-select:none; display:flex; align-items:center; justify-content:center; }

/* Kiosk-Auflösung 1024×768. Höhe nutzt die echte Viewport-Höhe (max 768),
   damit bei sichtbarer Browser-Leiste nichts überläuft / scrollt. */
#ci-stage { width:1024px; height:100vh; max-width:100vw; max-height:768px; flex-shrink:0; display:flex; flex-direction:column; background:#fff; box-shadow:0 0 60px rgba(0,0,0,.15); border-radius:16px; overflow:hidden; }

/* ── Progress ── */
.ci-progress-wrap { height:5px; background:#e2e8f0; width:100%; flex-shrink:0; }
.ci-progress-bar  { height:5px; background:var(--bre-primary,#bd0000); transition:width .35s ease; width:0%; }
.ci-step-info { text-align:center; font-size:12px; font-weight:800; color:#94a3b8; padding:8px 0 0; letter-spacing:.5px; text-transform:uppercase; min-height:24px; }
.ci-step-info:empty { display:none; }

/* ── Header ── */
.ci-head  { display:flex; align-items:center; justify-content:space-between; padding:12px var(--ci-pad); border-bottom:1px solid var(--bre-border,#e2e8f0); flex-shrink:0; }
.ci-logo  { display:flex; align-items:center; gap:12px; }
.ci-logo img { max-height:40px; }
.ci-logo b   { font-size:20px; font-weight:900; color:var(--bre-primary,#bd0000); }

/* ── Sprach-Flags ── */
.ci-flags { display:flex; gap:10px; }
.ci-flag  { width:72px; height:50px; border-radius:8px; border:3px solid transparent; cursor:pointer; overflow:hidden; background:#fff; padding:0; transition:.15s; }
.ci-flag svg   { display:block; width:100%; height:100%; }
.ci-flag.active { border-color:var(--bre-primary,#bd0000); transform:scale(1.06); }

/* ── Body / Steps ── */
.ci-body  { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--ci-pad); display:flex; flex-direction:column; min-height:0; }
.ci-step  { display:none; flex-direction:column; flex:1; }
.ci-step.active { display:flex; }
.ci-title { font-size:22px; font-weight:900; margin:0 0 2px; }
.ci-sub   { font-size:14px; color:var(--bre-text-muted,#64748b); margin:0 0 12px; }

/* ── Bereichs-Auswahl (Step 0) ── */
.ci-areas { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; flex:1; align-content:center; padding:10px 0; }
.ci-area-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px 16px; border:3px solid var(--bre-border,#e2e8f0); border-radius:20px; background:#fafafa; cursor:pointer; transition:.2s; width:100%; }
.ci-area-btn:hover  { border-color:#94a3b8; background:#f1f5f9; transform:translateY(-2px); }
.ci-area-btn:active { transform:scale(.98); }
.ci-area-btn.sel    { border-color:var(--bre-primary,#bd0000); background:#fff5f5; }
.ci-area-icon { width:72px; height:72px; color:var(--bre-primary,#bd0000); }
.ci-area-icon svg { width:100%; height:100%; }
.ci-area-label { font-size:18px; font-weight:900; color:var(--bre-text-main,#1e293b); text-align:center; }
.ci-area-sub   { font-size:12px; color:var(--bre-text-muted,#64748b); text-align:center; margin-top:-6px; }

/* ── Formular-Grid ── */
.ci-row { display:grid; gap:6px 14px; margin-bottom:7px; }
.ci-row.r-3-3-3 { grid-template-columns:1fr 1fr 1fr; }
.ci-row.r-half  { grid-template-columns:1fr 1fr; }
.ci-row.r-2-4-3 { grid-template-columns:1.2fr 2fr 1.4fr; }
.ci-row.r-full  { grid-template-columns:1fr; }

/* ── Felder ── */
.ci-field { display:flex; flex-direction:column; }
.ci-field label { font-size:11px; font-weight:800; color:#475569; margin-bottom:3px; text-transform:uppercase; letter-spacing:.5px; }
.ci-field input,
.ci-field select { font-size:16px; padding:9px 12px; border:2px solid var(--bre-border,#cbd5e1); border-radius:var(--bre-radius-btn,10px); outline:none; transition:.15s; background:#fff; width:100%; }
.ci-field input:focus,
.ci-field select:focus { border-color:var(--bre-primary,#bd0000); }

/* ── Grüner Haken ── */
.ci-fw { position:relative; }
.ci-fcheck { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; pointer-events:none; opacity:0; transition:opacity .2s; }
.ci-fw.ok .ci-fcheck          { opacity:1; }
.ci-fw.ok > input,
.ci-fw.ok > select             { border-color:#16a34a; padding-right:38px; }
.ci-fw.ok .ci-phone-wrap input { border-color:#16a34a; padding-right:38px; }

/* ── @-Schnelltaste: nur Desktop (Maus/Trackpad), auf Touch/Mobil ausgeblendet ── */
.ci-at-btn { display:none; }
@media (hover:hover) and (pointer:fine) {
    .ci-fw > .ci-at-btn {
        display:flex; align-items:center; justify-content:center;
        position:absolute; right:8px; top:50%; transform:translateY(-50%);
        width:30px; height:30px; padding:0; margin:0;
        border:1px solid var(--bre-border,#cbd5e1); border-radius:8px;
        background:#f1f5f9; color:#334155;
        font-size:17px; font-weight:800; line-height:1; cursor:pointer;
        transition:.15s;
    }
    .ci-fw > .ci-at-btn:hover  { background:#e2e8f0; border-color:#94a3b8; }
    .ci-fw > .ci-at-btn:active { transform:translateY(-50%) scale(.92); }
    .ci-fw > input[type="email"] { padding-right:46px; }
    .ci-fw.ok > .ci-at-btn { display:none; }   /* gültige Mail -> grünes Häkchen übernimmt */
}

/* ── Domain-Schnellwahl: Anbieter-Chips, nur Desktop ── */
.ci-maildomains { display:none; }
@media (hover:hover) and (pointer:fine) {
    .ci-maildomains { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
    .ci-dom {
        font-size:12px; font-weight:700; line-height:1;
        padding:6px 10px; border-radius:999px;
        border:1px solid var(--bre-border,#cbd5e1); background:#f8fafc; color:#475569;
        cursor:pointer; transition:.15s;
    }
    .ci-dom:hover  { background:#eef2f7; border-color:#94a3b8; color:#1e293b; }
    .ci-dom:active { transform:scale(.94); }
}

/* ── E-Mail (name)@(anbieter) getrennt — NUR Desktop (Maus/Trackpad). Kunden
   finden das "@"-Zeichen auf der Tastatur oft nicht; hier ist es fest vorgegeben.
   Auf Touch/Mobil bleibt das normale E-Mail-Feld (dort zeigt die Bildschirm-
   tastatur bei type=email das "@" ohnehin prominent an). ── */
.ci-email-split { display:none; }
@media (hover:hover) and (pointer:fine) {
    .ci-fw > input[type="email"] { display:none; }
    .ci-fw > .ci-at-btn { display:none; }
    .ci-fw > .ci-email-split {
        display:flex; align-items:stretch; width:100%; box-sizing:border-box;
        border:2px solid var(--bre-border,#cbd5e1); border-radius:var(--bre-radius-btn,10px);
        background:#fff; overflow:hidden; transition:.15s;
    }
    .ci-fw > .ci-email-split:focus-within { border-color:var(--bre-primary,#bd0000); }
    .ci-fw.ok > .ci-email-split { border-color:#16a34a; padding-right:38px; }
    .ci-email-split input { flex:1 1 0; min-width:0; border:0; border-radius:0; padding:9px 10px; font-size:16px; outline:none; background:transparent; }
    .ci-email-split .ci-email-at { flex:0 0 auto; display:flex; align-items:center; padding:0 4px; font-size:16px; font-weight:900; color:#94a3b8; user-select:none; }
}

/* ── Telefon-Vorwahl (intl-tel-input: Land-Suche + Flagge) ── */
.ci-phone-wrap { display:flex; gap:6px; }
.ci-phone-wrap .iti { flex:1; width:100%; }
.ci-phone-wrap input   { flex:1; font-size:16px; padding:9px 12px; border:2px solid var(--bre-border,#cbd5e1); border-radius:var(--bre-radius-btn,10px); outline:none; transition:.15s; background:#fff; width:100%; }
.ci-phone-wrap input:focus { border-color:var(--bre-primary,#bd0000); }
.ci-phone-wrap .iti input { padding-left:52px; }

/* ── DSGVO ── */
.ci-consent       { display:flex; align-items:center; gap:12px; font-size:14px; color:#475569; cursor:pointer; margin-top:4px; line-height:1.4; }
.ci-consent input { width:22px; height:22px; flex:0 0 auto; margin-top:1px; cursor:pointer; accent-color:var(--bre-primary,#bd0000); }
/* Datenschutz als Toggle-Switch (statt Checkbox) */
.ci-consent .ci-consent-toggle { flex:0 0 auto; height:auto; }

/* ── Kinder-Counter (Step Kids) ── */
.ci-kids-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.ci-kids-counter { display:flex; align-items:center; justify-content:center; gap:40px; }
.ci-kids-btn { width:88px; height:88px; font-size:44px; font-weight:900; border:3px solid var(--bre-border,#e2e8f0); border-radius:50%; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; color:var(--bre-text-main,#1e293b); line-height:1; padding-bottom:2px; }
.ci-kids-btn:hover { border-color:var(--bre-primary,#bd0000); background:#fff5f5; color:var(--bre-primary,#bd0000); }
.ci-kids-btn:active { transform:scale(.95); }
.ci-kids-count { font-size:80px; font-weight:900; color:var(--bre-primary,#bd0000); min-width:90px; text-align:center; line-height:1; }
.ci-kids-hint { font-size:14px; color:#94a3b8; font-weight:700; }

/* ── Zeile Geburtsdatum / Größe / Gewicht / Hotel-Toggle ── */
.ci-row.r-geb { grid-template-columns:1.5fr 1fr 1fr 0.9fr; align-items:end; }

/* ── Hotelgast-Toggle (Switch) ── */
.ci-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none; height:42px; }
.ci-toggle input { position:absolute; opacity:0; pointer-events:none; }
.ci-toggle-track { width:56px; height:32px; border-radius:32px; background:#cbd5e1; position:relative; transition:.2s; flex:0 0 auto; display:inline-block; }
.ci-toggle-thumb { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.2s; }
.ci-toggle input:checked + .ci-toggle-track { background:var(--bre-toggle-on,#16a34a); }
.ci-toggle input:checked + .ci-toggle-track .ci-toggle-thumb { transform:translateX(24px); }
.ci-toggle-label { font-size:14px; font-weight:700; color:#475569; margin-left:10px; }

/* ── Hotel-Auswahl (erscheint bei Toggle) ── */
.ci-hotel-wrap { margin-top:12px; background:#f0f9ff; border:2px solid #bae6fd; border-radius:12px; padding:12px 14px; }
.ci-hotel-wrap label { display:block; font-size:11px; font-weight:800; color:#0369a1; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.ci-hotel-select { width:100%; font-size:16px; padding:11px 12px; border:2px solid #7dd3fc; border-radius:10px; background:#fff; outline:none; }
.ci-hotel-select:focus { border-color:#0284c7; }

/* ── Ungültiges Feld (Validierung) ── */
.ci-field input.ci-bad,
.ci-field select.ci-bad,
.ci-phone-wrap input.ci-bad { border-color:#dc2626 !important; background:#fef2f2; }

/* ── Fehler ── */
.ci-err { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:12px; padding:12px 16px; font-size:16px; font-weight:700; margin-bottom:14px; display:none; }

/* ── Danke-Screen ── */
.ci-thanks     { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; }
.ci-thanks .chk { width:100px; height:100px; border-radius:50%; background:#dcfce7; color:#16a34a; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }

/* ── Kundennummer-Box ── */
.ci-cno-box   { display:none; margin-top:16px; background:#f0fdf4; border:2px solid #16a34a; border-radius:12px; padding:16px 24px; }
.ci-cno-box.is-visible { display:inline-block; }
.ci-cno-label { font-size:12px; font-weight:700; color:#15803d; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.ci-cno-value { font-size:34px; font-weight:900; color:#15803d; letter-spacing:2px; }

/* ── Flat-Footer (Bike / Paragliding – kein Wizard) ── */
.ci-flat-foot { display:none; gap:14px; padding:12px var(--ci-pad); border-top:1px solid var(--bre-border,#e2e8f0); background:#f8fafc; flex-shrink:0; }
.ci-flat-foot .ci-flat-submit { flex:1; font-size:20px; font-weight:800; padding:16px; border:0; border-radius:12px; cursor:pointer; background:var(--bre-primary,#bd0000); color:#fff; transition:.15s; }
.ci-flat-foot .ci-flat-submit:hover   { filter:brightness(1.08); }
.ci-flat-foot .ci-flat-submit:active  { transform:scale(.99); }
.ci-flat-foot .ci-flat-submit:disabled { opacity:.5; cursor:default; }

/* ── Nav-Footer ── */
.ci-nav { display:flex; gap:14px; padding:18px var(--ci-pad); border-top:1px solid var(--bre-border,#e2e8f0); background:#f8fafc; flex-shrink:0; }
.ci-nav-back { background:#e2e8f0; color:#475569; flex:0 0 auto; padding:16px 26px; font-size:18px; font-weight:800; border:0; border-radius:14px; cursor:pointer; transition:.15s; }
.ci-nav-back:hover   { background:#cbd5e1; }
.ci-nav-back:active  { transform:scale(.98); }
.ci-nav-next { flex:1; font-size:22px; font-weight:800; padding:18px; border:0; border-radius:14px; cursor:pointer; background:var(--bre-primary,#bd0000); color:#fff; transition:.15s; }
.ci-nav-next:hover   { filter:brightness(1.08); }
.ci-nav-next:active  { transform:scale(.99); }
.ci-nav-next:disabled { opacity:.5; cursor:default; }

/* ── Responsive ──
   Smartphones inkl. iPhone SE 2020 (375×667 CSS-px). Aus der zentrierten
   1024×768-Kiosk-Karte wird ein full-bleed-Layout. Höhe = dynamische
   Viewport-Höhe (dvh) statt 100vh, damit der Submit-Button unter iOS-Safari
   nicht hinter der Adressleiste verschwindet. Felder bleiben ≥16px → kein
   Auto-Zoom auf iOS beim Fokus. */
@media (max-width:480px) {
    :root { --ci-pad: 15px; }

    /* Karte vollflächig statt zentriert */
    html, body { display:block; }
    #ci-stage {
        width:100vw; max-width:100vw;
        height:100vh;          /* Fallback für alte Browser */
        height:100dvh;         /* iOS Safari 15.4+: ohne Toolbar-Überlauf */
        max-height:none;
        border-radius:0; box-shadow:none;
    }

    /* Header kompakter, Vollbild-Button am Handy sinnlos → ausblenden */
    .ci-head { padding:10px var(--ci-pad); }
    .ci-logo img { max-height:32px; }
    .ci-logo b   { font-size:17px; }
    .ci-flags { gap:7px; }
    .ci-flag  { width:46px; height:32px; border-width:2px; }
    .ci-fs-btn { display:none; }

    /* Typo / Abstände */
    .ci-title { font-size:20px; }
    .ci-sub   { font-size:13px; margin-bottom:10px; }

    /* Bereichs-Auswahl (falls Step 0 sichtbar) */
    .ci-areas { grid-template-columns:1fr; gap:12px; }
    .ci-area-btn  { flex-direction:row; justify-content:flex-start; gap:16px; padding:16px; }
    .ci-area-icon { width:44px; height:44px; flex-shrink:0; }

    /* Formular: einspaltig — außer kleinen Zahlenfeldern */
    .ci-row { gap:5px 10px; margin-bottom:6px; }
    .ci-row.r-3-3-3 { grid-template-columns:1fr; }
    .ci-row.r-half  { grid-template-columns:1fr; }

    /* PLZ | Ort nebeneinander, Land darunter volle Breite */
    .ci-row.r-2-4-3 { grid-template-columns:0.8fr 1.2fr; }
    .ci-row.r-2-4-3 > .ci-field:nth-child(3) { grid-column:1 / -1; }

    /* Geburtsdatum (Pflicht) volle Breite, Größe|Gewicht nebeneinander,
       Hotel-Toggle eigene Zeile — statt 4 gequetschter Spalten */
    .ci-row.r-geb { grid-template-columns:1fr 1fr; align-items:end; }
    .ci-row.r-geb > .ci-field:nth-child(1) { grid-column:1 / -1; }
    .ci-row.r-geb > .ci-field:nth-child(4) { grid-column:1 / -1; }

    /* Alle Eingaben ≥16px → kein iOS-Auto-Zoom beim Fokus */
    .ci-field input, .ci-field select,
    .ci-phone-wrap input, .ci-hotel-select { font-size:16px; }

    /* Footer touch-freundlich, etwas kompakter */
    .ci-flat-foot { padding:10px var(--ci-pad); }
    .ci-flat-foot .ci-flat-submit { font-size:18px; padding:15px; }
    .ci-nav      { padding:12px var(--ci-pad); }
    .ci-nav-next { font-size:19px; padding:15px; }
    .ci-nav-back { font-size:16px; padding:15px 20px; }

    /* Kinder-Counter (nur Ski-Wizard) kleiner */
    .ci-kids-count { font-size:64px; }
    .ci-kids-btn   { width:72px; height:72px; font-size:36px; }
}

/* Sehr schmale Geräte (<360px, z.B. iPhone SE 1. Gen / Mini) */
@media (max-width:360px) {
    .ci-row.r-2-4-3 { grid-template-columns:1fr; }
    .ci-row.r-2-4-3 > .ci-field:nth-child(3) { grid-column:auto; }
    .ci-row.r-geb   { grid-template-columns:1fr; }
    .ci-flag { width:40px; height:28px; }
}