/* Leistungen-Seite (Akkordeon, Paketkarten) und Anfrage-Funnel (Overlay).
   Seit 05.09.2026. CD: Schwarz/Weiss aus styles.css, kuehles Blau aus /tradeshows. */

:root{
  --af-blau:#8fb8ff;
  --af-blau-hell:#d7e6ff;
}

/* ── Seite: Kopf ─────────────────────────────────────────────────────────── */
.lz-sub{
  font-family:var(--serif);
  font-size:20px;
  line-height:1.65;
  max-width:860px;
  margin:0 !important;
  color:var(--fg) !important;
}
.lz-preis{
  margin:14px 0 0 !important;
  font-size:15px;
}

/* ── Akkordeon ───────────────────────────────────────────────────────────── */
.lz-liste{ margin-top:22px; }
.lz-kat{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.03);
  margin-top:14px;
  scroll-margin-top:100px;
}
.lz-kat summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
  min-height:64px;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.2;
  user-select:none;
}
.lz-kat summary::-webkit-details-marker{ display:none; }
.lz-kat summary:focus-visible{ outline:2px solid var(--af-blau); outline-offset:-4px; border-radius:22px; }
.lz-kat summary .lz-anzahl{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}
.lz-kat summary .lz-chevron{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px;
  transition:transform .18s ease;
}
.lz-kat[open] summary .lz-chevron{ transform:rotate(180deg); }
.lz-kat[open] summary{ border-bottom:1px solid rgba(255,255,255,.08); }
.lz-kat-body{ padding:18px 24px 24px; }
.lz-intro{
  color:var(--muted);
  line-height:1.75;
  max-width:820px;
  margin:0 0 6px;
  font-size:16px;
}
.lz-mehr{
  display:inline-block;
  margin:0 0 18px;
  color:var(--af-blau-hell);
  text-decoration:underline;
  font-size:14px;
  min-height:44px;
  line-height:44px;
}

/* ── Paketkarten ─────────────────────────────────────────────────────────── */
.lz-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:16px;
}
.lz-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lz-card.is-signature{
  border-color:rgba(143,184,255,.55);
  box-shadow:0 0 0 1px rgba(143,184,255,.16) inset;
}
.lz-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.lz-badge{
  display:inline-flex;
  align-items:center;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
}
.lz-badge-inkl{
  border-color:rgba(143,184,255,.6);
  color:var(--af-blau-hell);
  font-weight:600;
}
.lz-card h3{
  font-family:var(--serif);
  font-size:22px;
  margin:0;
  line-height:1.25;
}
.lz-card ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.6;
  font-size:14.5px;
}
.lz-card li{ margin:6px 0; }
.lz-card .btn{
  margin-top:auto;
  align-self:flex-start;
  min-height:44px;
}

/* ── Funnel-Overlay ──────────────────────────────────────────────────────── */
.af-overlay{
  position:fixed;
  inset:0;
  z-index:9990;               /* unter dem Termin-Widget-Modal (9999) */
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.74);
}
.af-overlay.is-open{ display:flex; }
body.af-open{ overflow:hidden; }

/* Kein transform, kein filter: das Widget-Modal darin ist position:fixed
   und muss am Viewport haengen, nicht am Panel. */
.af-panel{
  position:relative;
  width:min(720px, 100%);
  max-height:min(92vh, 940px);
  overflow:auto;
  overflow-x:hidden;          /* iOS: input[type=date] hat eine intrinsische Breite */
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:28px 28px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  -webkit-overflow-scrolling:touch;
}
.af-close{
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.af-close:hover{ background:rgba(255,255,255,.09); }
.af-kicker{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.af-titel{
  font-family:var(--serif);
  font-size:26px;
  margin:6px 0 2px;
  padding-right:56px;
  line-height:1.2;
}
.af-wechsel{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.af-link{
  background:none;
  border:0;
  color:var(--af-blau-hell);
  text-decoration:underline;
  cursor:pointer;
  padding:6px 0;
  font-size:13px;
  min-height:36px;
}
.af-select{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:#111;
  color:#fff;
  font-size:16px;             /* unter 16 px zoomt iOS-Safari beim Fokus hinein */
  max-width:100%;
  min-height:44px;
}
.af-select[hidden]{ display:none; }

.af-progress{ margin:18px 0 4px; }
.af-progress[hidden]{ display:none; }
.af-progress-bar{
  height:4px;
  background:rgba(255,255,255,.10);
  border-radius:99px;
  overflow:hidden;
}
.af-progress-bar span{
  display:block;
  height:100%;
  width:0;
  background:var(--af-blau);
  transition:width .25s ease;
}
.af-progress-text{ font-size:12px; color:var(--muted); margin-top:8px; }

.af-frage{
  font-family:var(--serif);
  font-size:24px;
  margin:14px 0 16px;
  line-height:1.25;
}
.af-hint{ color:var(--muted); font-size:14px; margin:-6px 0 14px; }

.af-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.af-field-voll{ grid-column:1 / -1; }
.af-field label{
  display:block;
  font-size:13px;
  color:#fff;
  margin:0 0 8px;
}
.af-req{ color:var(--af-blau-hell); margin-left:2px; }
.af-opt{ color:var(--muted); font-size:12px; }
.af-field input,
.af-field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  color:#000;
  outline:none;
  font-size:16px;             /* verhindert den Fokus-Zoom in iOS-Safari */
  min-height:44px;
  font-family:var(--sans);
}
/* iOS: input[type=date] bringt eine intrinsische Breite mit und laeuft sonst
   nach rechts ueber (Sichtpruefung iPhone, 05.09.2026). */
.af-field input[type="date"]{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  display:block;
  -webkit-appearance:none;
  appearance:none;
}
.af-grid > *{ min-width:0; }
.af-field input:focus,
.af-field textarea:focus{ border-color:var(--af-blau); box-shadow:0 0 0 2px rgba(143,184,255,.35); }
.af-field input:disabled{ background:#d9d9d9; color:#555; }
.af-field textarea{ min-height:120px; resize:vertical; }
.af-field [aria-invalid="true"]{ border-color:#ff8f8f; box-shadow:0 0 0 2px rgba(255,143,143,.35); }
.af-field-error{ color:#ffb6b6; font-size:12px; margin-top:6px; line-height:1.4; }
.af-field-error[hidden]{ display:none; }
.af-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  min-height:44px;
  cursor:pointer;
}
.af-check input{ width:18px; height:18px; margin:0; }

.af-choices{ display:grid; gap:12px; }
.af-choice{
  display:block;
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:18px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  min-height:44px;
  transition:border-color .12s ease, background .12s ease;
}
.af-choice:hover{ background:rgba(255,255,255,.05); }
.af-choice input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.af-choice:focus-within{ outline:2px solid rgba(143,184,255,.6); outline-offset:2px; }
.af-choice.is-selected{
  border-color:var(--af-blau);
  box-shadow:0 0 0 1px var(--af-blau) inset;
  background:rgba(143,184,255,.06);
}
.af-choice.is-empfohlen{ border-color:rgba(143,184,255,.45); }
.af-badge{
  display:inline-block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--af-blau-hell);
  border:1px solid rgba(143,184,255,.55);
  border-radius:999px;
  padding:4px 10px;
  margin-bottom:10px;
}
.af-choice-titel{
  display:block;
  font-family:var(--serif);
  font-size:20px;
  line-height:1.25;
}
.af-choice-text{
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-top:6px;
}
.af-choice-extra{ margin-top:14px; }
.af-choice-extra[hidden]{ display:none; }
.af-choices-klein .af-choice{ padding:13px 16px; }
.af-choices-klein .af-choice-titel{ font-family:var(--sans); font-size:16px; }

.af-fenster{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.af-fenster-label{ width:100%; font-size:13px; margin-bottom:2px; }
.af-pill{
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  cursor:pointer;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.af-pill input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.af-pill.is-selected{ border-color:var(--af-blau); background:rgba(143,184,255,.12); }

.af-captcha{ margin-top:16px; display:flex; justify-content:center; }
.af-captcha[hidden]{ display:none; }
.af-error{ margin-top:14px; color:#ffb6b6; font-size:14px; line-height:1.5; }
.af-error[hidden]{ display:none; }

.af-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
}
.af-foot .btn{ min-height:44px; }
.af-foot .btn[hidden]{ display:none; }
.af-next{ margin-left:auto; }

/* Erfolg */
.af-erfolg{ text-align:center; padding:6px 0 0; }
.af-erfolg-icon{
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--af-blau);
  color:var(--af-blau);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:26px;
  margin-bottom:6px;
}
.af-erfolg-text{ color:var(--muted); line-height:1.7; margin:0 0 8px; }
.af-erfolg-leise{ font-size:13px; }
.af-termin{
  margin-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:20px;
}
.af-termin h5{ font-family:var(--serif); font-size:22px; margin:0 0 6px; }
.af-termin p{ color:var(--muted); margin:0 0 14px; line-height:1.6; }
[data-anfrage-funnel] > [data-booking-widget][hidden]{ display:none !important; }

@media (max-width:720px){
  .af-overlay{ padding:0; align-items:stretch; }
  .af-panel{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    border:0;
    padding:20px 18px 28px;
  }
  .af-grid{ grid-template-columns:1fr; }
  .af-titel{ font-size:22px; }
  .af-frage{ font-size:22px; }
  .af-foot{ position:sticky; bottom:0; background:#0d0d0d; padding-top:12px; margin-top:16px; }
  .lz-kat summary{ font-size:22px; padding:18px; }
  .lz-kat summary .lz-anzahl{ display:none; }
  .lz-kat-body{ padding:16px 18px 18px; }
  .lz-cards{ grid-template-columns:1fr; }
  .lz-sub{ font-size:18px; }
}