/* =============================================================================
   concierge.css — Anfrage-Assistent (Startseite #kontakt + Dialog).
   Sprache der Seite: Poppins, schwere Versal-Überschriften (.h2/.eyebrow),
   Felder wie .form/.field, Pillen-Buttons (.btn-pill). Akzent = var(--pink-hot).
   Hervorhebung NUR über Rundum-Rahmen, Pillen und Hintergrund —
   KEINE farbigen Striche an der linken Kante von Boxen (Wunsch des Betreibers).
   Ebenen: Dim 690, Dialog 700 (über Detail-Overlay ≤570, unter Gewinnspiel ≥890).
   ============================================================================= */

/* Schriftskala des Assistenten (5 Stufen) + einheitlicher Fokus */
.cc, .cc-launch{
  --cc-fs-xs:.72rem;   /* Micro-Label: versal, fett, gesperrt */
  --cc-fs-s:.82rem;    /* Label, Hinweis, Meta */
  --cc-fs-m:.92rem;    /* Fließtext, Buttons, Chips */
  --cc-fs-l:1rem;      /* Lead, Abschnitt-Überschrift */
  --cc-fs-xl:1.08rem;  /* kleine Titel */
  --cc-focus:0 0 0 4px color-mix(in srgb,var(--pink-hot) 28%,transparent);
  /* Bewegung wie auf der übrigen Seite: .btn-pill / .event = .4s var(--ease-ui) */
  --cc-t:.4s var(--ease-ui);
  --cc-lift:translateY(-5px);                                   /* Karten-Hover wie .event */
  --cc-card-hover:color-mix(in srgb,var(--pink-hot) 6%,#0A111C); /* = #171022 der .event-Karten, folgt dem Seitenakzent */
  --cc-tint:color-mix(in srgb,var(--pink-hot) 9%,transparent);   /* Chips/Optionen: zarter Pink-Hauch */
}
.cc-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- gemeinsame Bausteine ------------------------------------------------ */
.cc-link{ color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--pink-hot) 75%,transparent);
  text-decoration-thickness:2px; text-underline-offset:3px; background:none; border:0; padding:0; cursor:pointer; font-size:inherit;
  transition:color var(--cc-t), text-decoration-color var(--cc-t); }
@media (hover:hover){ .cc-link:hover{ color:var(--pink-soft); text-decoration-color:var(--pink-hot); } }
.cc-muted{ color:rgba(255,255,255,.62); font-size:var(--cc-fs-s); }
.cc-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; color:#fff; }
.cc-pill{ display:inline-flex; align-items:center; font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1;
  padding:.42em .72em; border-radius:var(--r-pill); background:color-mix(in srgb,var(--pink-hot) 16%,transparent); color:var(--pink-soft); white-space:nowrap; }
.cc-pill--empf{ background:var(--pink-hot); color:#fff; }
.cc-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:.6rem; }
.cc-pills .cc-pill{ font-size:var(--cc-fs-xs); }

/* Pillen-Buttons im Assistenten: Grundlage ist .btn-pill der Seite */
.cc-btn{ justify-content:center; }
.cc-btn-sm{ font-size:var(--cc-fs-m); padding:.78em 1.2em; }
/* nur im Assistenten – die Pillen der übrigen Seite bleiben unberührt */
:where(.cc, .cc-launch) .btn-pill.btn-pill--ghost{ backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Hover wie überall auf der Seite (.btn-pill: scale 1.04 + brightness 1.06); Ghost hellt zusätzlich leicht auf */
@media (hover:hover){ :where(.cc, .cc-launch) .btn-pill--ghost:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); } }
:where(.cc, .cc-launch) .btn-pill:active{ transform:scale(.97); transition-duration:.15s; }
/* Fokus im Assistenten: überall derselbe Pink-Ring (Felder, Chips, Kacheln, Buttons, X) */
:where(.cc, .cc-launch) :is(a, button, summary):focus-visible{ outline:none; box-shadow:var(--cc-focus); }
:where(.cc, .cc-launch) .btn-pill:focus-visible{ box-shadow:var(--cc-focus); }

/* =============================================================================
   1. STARTFELD (rechte Spalte) — luftig, Themen als kleine Karten wie .event
   ============================================================================= */
/* Zweispalter: die Assistenten-Spalte ist jetzt etwas höher als der Text links →
   Textspalte vertikal mittig, damit beide Spalten ausgewogen nebeneinander stehen */
@media (min-width:1025px){ #kontakt .contact{ align-items:center; } }

.cc-launch{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card);
  padding:clamp(26px,2.5vw,34px);
}
/* weiches Akzent-Leuchten oben rechts (Fläche, kein Kantenstreifen) */
.cc-launch::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-40%; right:-30%; width:80%; aspect-ratio:1;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--pink-hot) 15%,transparent), transparent);
}
.cc-launch__eyebrow{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-hot); }
.cc-launch__title{ font-size:clamp(1.45rem,2.1vw,1.95rem); font-weight:900; line-height:1; letter-spacing:-.005em; text-transform:uppercase; margin:.55rem 0 1.15rem; }

.cc-ask__box{
  display:flex; align-items:center; gap:8px; padding:6px 6px 6px 22px; border-radius:var(--r-pill);   /* Knopf rundum gleich weit eingerückt */
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:border-color var(--cc-t), box-shadow var(--cc-t), background var(--cc-t);
}
@media (hover:hover){ .cc-ask__box:hover{ border-color:rgba(255,255,255,.24); } }
.cc-ask__box:focus-within{
  border-color:var(--pink-hot); background:rgba(255,255,255,.07);
  box-shadow:var(--cc-focus);
}
.cc-ask__in{ flex:1; min-width:0; height:46px; background:none; border:0; color:#fff; font:inherit; font-size:var(--cc-fs-l); padding:0; text-overflow:ellipsis; }
.cc-ask__in:focus, .cc-ask__in:focus-visible{ outline:none; }
.cc-ask__in::placeholder{ color:rgba(255,255,255,.5); }
/* runder Pink-Knopf: Hover wie .btn-pill der Seite (scale + brightness) */
.cc-ask__go{
  flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-content:center;
  background:var(--pink-hot); color:#fff;
  transition:transform var(--cc-t), filter var(--cc-t);
}
.cc-ask__go svg{ width:19px; height:19px; transition:transform var(--cc-t); }
@media (hover:hover){
  .cc-ask__go:hover{ transform:scale(1.04); filter:brightness(1.06); }
  .cc-ask__go:hover svg{ transform:translateX(2px); }
}
.cc-ask__go:active{ transform:scale(.96); }
.cc-ask__go:focus-visible{ outline:none; box-shadow:0 0 0 3px #fff, var(--cc-focus); border-radius:50%; }
/* EINE Hinweiszeile mit fester Höhe — wächst nie */
.cc-ask__hint{ height:1.5em; line-height:1.5em; margin:.7rem 0 0 22px; font-size:var(--cc-fs-s); color:rgba(255,255,255,.56); overflow:hidden; white-space:nowrap; }
.cc-ask__hint > span{ display:flex; min-width:0; }
.cc-ask__erk{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cc-ask__erk b{ font-weight:700; color:var(--green); }
.cc-ask__enter{ flex:none; margin-left:.4em; color:rgba(255,255,255,.42); }
@media (max-width:760px), (hover:none){ .cc-ask__enter{ display:none; } }

/* Zwischentitel im Eyebrow-Stil der Seite (ruhig, ohne Trennstrich) */
.cc-launch__t{ margin:1.3rem 0 .8rem; font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* Themen: kleine Karten nach dem Muster .event (Fläche, 1px-Rahmen, Icon im getönten Quadrat) */
.cc-topics{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 12px; }
.cc-topics li{ display:flex; min-width:0; }
.cc-topic{
  width:100%; min-width:0; display:flex; align-items:center; gap:14px; padding:12px 16px; text-align:left;
  border-radius:clamp(16px,1.4vw,20px); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); color:#fff;
  transition:transform var(--cc-t), border-color var(--cc-t), background var(--cc-t);
}
.cc-topic__ico{ flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-content:center;
  background:color-mix(in srgb,var(--pink-hot) 12%,transparent); color:var(--pink-hot);
  transition:background var(--cc-t), color var(--cc-t); }
.cc-topic__ico svg{ width:20px; height:20px; }
.cc-topic__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cc-topic__txt b{ font-size:var(--cc-fs-m); font-weight:700; line-height:1.2; overflow-wrap:break-word; -webkit-hyphens:manual; hyphens:manual; }
.cc-topic__txt small{ font-size:.78rem; line-height:1.3; color:rgba(255,255,255,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--cc-t); }
@media (hover:hover){
  .cc-topic:hover{ transform:var(--cc-lift); border-color:var(--pink-hot); background:var(--cc-card-hover); }
  .cc-topic:hover .cc-topic__ico{ background:var(--pink-hot); color:#fff; }
  .cc-topic:hover .cc-topic__txt small{ color:var(--text-dim); }
}
.cc-topic:active{ transform:scale(.98); }
.cc-topic:focus-visible{ outline:none; border-color:var(--pink-hot); box-shadow:var(--cc-focus); border-radius:clamp(16px,1.4vw,20px); }

/* Zwei echte Buttons: Pink = online reservieren, Weiß = anrufen */
.cc-fast__row{ display:flex; flex-wrap:wrap; gap:12px; }
.cc-fast__btn{ flex:1 1 auto; justify-content:center; padding:1.02em 1.4em; font-size:var(--cc-fs-m); }
.cc-fast__btn[hidden]{ display:none; }

/* =============================================================================
   2. DIALOG
   ============================================================================= */
.cc-dim{ position:fixed; inset:0; z-index:690; background:rgba(4,3,10,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s var(--ease-ui); }
.cc-dim.is-on{ opacity:1; }
.cc-dim[hidden], .cc[hidden]{ display:none; }
.cc{ position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease-ui), visibility 0s linear .28s; }
.cc.is-open{ opacity:1; visibility:visible; transition:opacity .28s var(--ease-ui), visibility 0s; }   /* sofort fokussierbar */

.cc__card{
  position:relative; width:min(680px,100%); max-height:min(860px, calc(100vh - 48px)); max-height:min(860px, calc(100dvh - 48px));
  display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb,var(--pink-hot) 11%,transparent), transparent 60%),
    var(--bg-elev);
  border:1px solid rgba(255,255,255,.1); border-radius:clamp(22px,3vw,30px);
  box-shadow:0 50px 140px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.2);
  opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity .32s var(--ease-ui), transform .55s cubic-bezier(.16,1.18,.3,1);
}
.cc.is-card-in .cc__card{ opacity:1; transform:none; }
.cc__card.is-shake{ animation:ccShake .42s var(--ease-ui); }
@keyframes ccShake{ 20%{ translate:-7px 0; } 45%{ translate:6px 0; } 70%{ translate:-3px 0; } 100%{ translate:0 0; } }
.cc__grab{ display:none; }

/* Kopf: Eyebrow + Versal-Titel wie die Abschnitte der Seite */
.cc__head{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:20px 16px; padding:30px 34px 22px; border-bottom:1px solid rgba(255,255,255,.07); }
.cc__eyebrow{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-hot); }
.cc__title{ font-size:clamp(1.55rem,3.3vw,2.05rem); font-weight:900; line-height:.98; letter-spacing:-.005em; text-transform:uppercase; margin-top:.5rem; }
.cc__title:focus{ outline:none; }
.cc__x{ position:relative; flex:none; width:42px; height:42px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  transition:background var(--cc-t), border-color var(--cc-t), transform var(--cc-t); }
.cc__x::before, .cc__x::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; border-radius:2px; background:#fff; translate:-50% -50%; }
.cc__x::before{ rotate:45deg; } .cc__x::after{ rotate:-45deg; }
@media (hover:hover){ .cc__x:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); transform:rotate(90deg); } }
.cc__x:active{ transform:scale(.94); }
.cc__x:focus-visible{ outline:none; box-shadow:var(--cc-focus); border-radius:var(--r-pill); }

/* Fortschritt: vier Segmente (Rundum-Pillen, keine Kantenstreifen) */
.cc__steps{ grid-column:1 / -1; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cc__steps[hidden]{ display:none; }
.cc__stepbtn{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:2px 0; text-align:left;
  font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); cursor:default; transition:color var(--cc-t); }
.cc__stepbtn::before{ content:""; width:100%; height:3px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); transition:background .45s var(--ease-ui); }
.cc__stepn{ display:none; }
.cc__step.is-done .cc__stepbtn{ color:var(--text-dim); }
.cc__step.is-done .cc__stepbtn::before{ background:color-mix(in srgb,var(--pink-hot) 55%,transparent); }
.cc__step.is-active .cc__stepbtn{ color:#fff; }
.cc__step.is-active .cc__stepbtn::before{ background:var(--pink-hot); }
.cc__stepbtn:not([disabled]){ cursor:pointer; }
@media (hover:hover){ .cc__stepbtn:not([disabled]):hover{ color:#fff; } .cc__step.is-done .cc__stepbtn:not([disabled]):hover::before{ background:var(--pink-hot); } }
.cc__stepbtn:focus-visible{ outline:none; box-shadow:var(--cc-focus); border-radius:6px; }

.cc__form{ display:flex; flex-direction:column; min-height:0; flex:1; }
.cc__body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:28px 34px 20px; transition:opacity .17s var(--ease-ui), transform .17s var(--ease-ui); }
.cc__body.is-leaving{ opacity:0; transform:translateY(-8px); }
.cc__body.is-entering{ opacity:0; transform:translateY(10px); transition:none; }
.cc-pane[hidden]{ display:none; }

.cc__status{ margin:0 34px; font-size:var(--cc-fs-m); font-weight:600; color:var(--text-dim); }
.cc__status:empty{ display:none; }
.cc__status:not(:empty){ margin-top:4px; margin-bottom:10px; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.cc__status.is-bad{ color:#fff; background:color-mix(in srgb,var(--pink-hot) 13%,transparent); border-color:color-mix(in srgb,var(--pink-hot) 45%,transparent); }
.cc__status.is-warn{ color:#fff; background:color-mix(in srgb,var(--peach) 12%,transparent); border-color:color-mix(in srgb,var(--peach) 42%,transparent); }
.cc__status .cc-link{ white-space:nowrap; }

/* Fuß: Zurück = Ghost-Pille, Weiter = Pink-Pille */
.cc__foot{ display:flex; align-items:center; gap:12px; padding:20px 34px 26px; border-top:1px solid rgba(255,255,255,.07); }
.cc__foot.is-ende{ display:none; }
.cc__foot .btn-pill{ padding:1em 1.6em; font-size:var(--cc-fs-m); }
.cc__foot [hidden]{ display:none !important; }
.cc-next{ margin-left:auto; }
.cc-next[disabled]{ opacity:.7; cursor:progress; transform:none !important; }
/* Sperre in „Etwas anderes": Weiter sichtbar zurückgenommen (bleibt fokussierbar, Klick schüttelt nur) */
.cc-next[aria-disabled="true"]{ opacity:.42; filter:saturate(.35); cursor:not-allowed; transform:none !important; }
.cc-aw-anfrage.cc-link{ font-size:var(--cc-fs-m); padding:.6em 0; }

/* ---- Themenwahl (Radio-Kacheln) ----------------------------------------- */
.cc-themen{ border:0; margin:0; padding:0; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cc-tile{
  position:relative; width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:18px; border-radius:20px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); color:#fff;
  transition:transform var(--cc-t), border-color var(--cc-t), background var(--cc-t);
}
.cc-tile__ico{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-content:center;
  background:color-mix(in srgb,var(--pink-hot) 12%,transparent); color:var(--pink-hot); transition:background var(--cc-t), color var(--cc-t); }
.cc-tile__ico svg{ width:20px; height:20px; }
.cc-tile__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cc-tile__txt b{ font-size:var(--cc-fs-m); font-weight:700; line-height:1.2; overflow-wrap:break-word; }
.cc-tile__txt small{ font-size:var(--cc-fs-s); color:var(--text-dim); line-height:1.3; }
@media (hover:hover){
  .cc-tile:hover{ border-color:var(--pink-hot); background:var(--cc-card-hover); transform:var(--cc-lift); }
  .cc-tile:hover .cc-tile__ico{ background:color-mix(in srgb,var(--pink-hot) 24%,transparent); }
}
.cc-tile--radio{ padding-right:38px; }
.cc-tile--radio input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cc-tile:active{ transform:scale(.98); }
.cc-tile--radio:has(input:checked){ border-color:var(--pink-hot); background:color-mix(in srgb,var(--pink-hot) 18%,#101626); }
.cc-tile--radio:has(input:checked) .cc-tile__ico{ background:var(--pink-hot); color:#fff; }
/* Auswahl-Haken oben rechts: eindeutig gewählt, auch neben einer Kachel unter der Maus */
.cc-tile--radio::after{ content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
  background:var(--pink-hot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  opacity:0; transform:scale(.6); transition:opacity var(--cc-t), transform var(--cc-t); pointer-events:none; }
.cc-tile--radio:has(input:checked)::after{ opacity:1; transform:none; }
.cc-tile--radio:has(input:focus-visible){ outline:none; box-shadow:var(--cc-focus); }

/* ---- Abschnitte + Felder (Raster: 6 Spalten, Abstände 8/12/16/20) -------- */
.cc-felder[hidden]{ display:none; }
.cc-sec{ padding:24px 0; border-top:1px solid rgba(255,255,255,.07); }
.cc-felder > .cc-sec:first-child{ padding-top:2px; border-top:0; }
.cc-felder > .cc-sec:last-child{ padding-bottom:6px; }
.cc-sec[hidden]{ display:none; }
.cc-sec__t{ font-size:var(--cc-fs-l); font-weight:900; line-height:1.1; letter-spacing:.02em; text-transform:uppercase; color:#fff; margin-bottom:18px; text-wrap:balance; }
.cc-sec__t .cc-req{ font-weight:700; }
.cc-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row dense; gap:20px 14px; }
.cc-grid > .cc-warn{ grid-column:1 / -1; margin-top:-6px; }
.cc-field{ grid-column:span 6; min-width:0; display:flex; flex-direction:column; gap:10px; border:0; margin:0; padding:0; }
.cc-w2{ grid-column:span 2; }
.cc-w3{ grid-column:span 3; }
.cc-lbl{ display:block; font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); padding:0; }
legend.cc-lbl{ margin-bottom:12px; float:left; width:100%; }
legend.cc-lbl + *{ clear:both; }
legend.cc-lbl.cc-sr{ float:none; }
.cc-req{ color:var(--pink-hot); margin-left:2px; }
.cc-opt{ text-transform:none; letter-spacing:0; font-weight:500; font-size:var(--cc-fs-xs); color:rgba(255,255,255,.42); margin-left:4px; }

/* Eingabe wie .field input der Seite + Pink-Fokus */
.cc-in{
  width:100%; min-width:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-input);
  padding:15px 17px; color:#fff; font:inherit; font-size:var(--cc-fs-l); line-height:1.3; color-scheme:dark;
  transition:border-color var(--cc-t), background var(--cc-t), box-shadow var(--cc-t);
}
@media (hover:hover){ .cc-field:not(.is-error) .cc-in:hover:not(:focus){ border-color:rgba(255,255,255,.24); } }
.cc-in::placeholder{ color:rgba(255,255,255,.36); }
.cc-in:focus, .cc-in:focus-visible{ outline:none; border-color:var(--pink-hot); background:rgba(255,255,255,.07);
  box-shadow:var(--cc-focus); border-radius:var(--r-input); }
textarea.cc-in{ min-height:104px; resize:vertical; line-height:1.5; }
input[type="date"].cc-in, input[type="time"].cc-in{ min-height:54px; -webkit-appearance:none; appearance:none; }
input[type="date"].cc-in::-webkit-calendar-picker-indicator, input[type="time"].cc-in::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.7); cursor:pointer; }
.cc-field.is-error .cc-in{ border-color:var(--pink-hot); background:color-mix(in srgb,var(--pink-hot) 8%,transparent); }
.cc-err{ font-size:var(--cc-fs-s); font-weight:600; color:var(--pink-soft); }
.cc-err[hidden], .cc-warn[hidden]{ display:none; }
.cc-warn{ display:flex; align-items:flex-start; gap:8px; font-size:var(--cc-fs-s); line-height:1.4; color:#fff; padding:9px 12px; border-radius:12px;
  background:color-mix(in srgb,var(--peach) 11%,transparent); border:1px solid color-mix(in srgb,var(--peach) 38%,transparent); }
.cc-warn svg{ flex:none; width:15px; height:15px; margin-top:1px; color:var(--peach); }
.cc-count, .cc-feldtipp{ font-size:var(--cc-fs-s); color:rgba(255,255,255,.5); }
.cc-count{ text-align:right; margin-top:-2px; }
.cc-count:empty, .cc-feldtipp:empty{ display:none; }

/* Zahl mit −/+ */
.cc-num{ display:flex; gap:8px; }
.cc-num .cc-in{ text-align:center; -moz-appearance:textfield; appearance:textfield; padding-left:6px; padding-right:6px; }
.cc-num .cc-in::-webkit-outer-spin-button, .cc-num .cc-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cc-num__b{ flex:none; width:48px; border-radius:var(--r-input); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:1.25rem; font-weight:500; color:#fff; transition:background var(--cc-t), border-color var(--cc-t), color var(--cc-t), transform var(--cc-t); }
@media (hover:hover){ .cc-num__b:hover{ background:var(--cc-tint); border-color:var(--pink-hot); } }
.cc-num__b:active{ transform:scale(.94); }

/* Chips: Pillen, ausgewählt = gefüllt Pink + Weiß */
.cc-group{ display:block; }
.cc-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cc-chip{ position:relative; display:inline-flex; cursor:pointer; }
.cc-chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.cc-chip span{ display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.25em; border-radius:var(--r-pill); line-height:1.1;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); font-weight:600; font-size:var(--cc-fs-m); color:var(--text-dim);
  transition:background var(--cc-t), border-color var(--cc-t), color var(--cc-t), transform var(--cc-t); }
/* Hover: Pink-Rahmen + zarter Pink-Hauch (gewählte Chips bleiben gefüllt) */
@media (hover:hover){ .cc-chip:hover input:not(:checked) + span{ border-color:var(--pink-hot); background:var(--cc-tint); color:#fff; } }
.cc-chip input:checked + span{ background:var(--pink-hot); border-color:var(--pink-hot); color:#fff; font-weight:700; }
.cc-chip input[type="checkbox"]:checked + span::before{ content:""; width:.38em; height:.7em; border:solid #fff; border-width:0 2px 2px 0; rotate:45deg; translate:0 -1px; margin:0 .1em 0 .05em; }
.cc-chip input:focus-visible + span{ outline:none; box-shadow:var(--cc-focus); border-color:var(--pink-hot); }
.cc-chip input:active + span{ transform:scale(.96); transition-duration:.15s; }
.cc-group.is-error .cc-chip span{ border-color:color-mix(in srgb,var(--pink-hot) 65%,transparent); }
.cc-chips--gross .cc-chip span{ padding:.95em 1.4em; font-size:var(--cc-fs-m); }
.cc-group .cc-err{ margin-top:10px; }

/* Info-Zeile im Formular (z. B. Schichten bei Bewerbung) — Rundum-Rahmen, kein Kantenstreifen */
.cc-info{ display:flex; align-items:center; gap:12px; margin:0; padding:12px 16px; border-radius:16px; font-size:var(--cc-fs-m); color:var(--text-dim); line-height:1.4;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); }
.cc-info__ico{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-content:center;
  background:color-mix(in srgb,var(--pink-hot) 12%,transparent); color:var(--pink-hot); }
.cc-info__ico svg{ width:17px; height:17px; }
.cc-grid > .cc-info{ grid-column:1 / -1; }

/* „Übernommen"-Leiste (Werte aus der Frage) */
.cc-erkannt{ display:flex; align-items:center; gap:10px; font-size:var(--cc-fs-s); color:var(--text-dim); margin-bottom:22px;
  padding:10px 16px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--green) 9%,transparent); border:1px solid color-mix(in srgb,var(--green) 30%,transparent); }
.cc-erkannt__ico{ flex:none; display:grid; color:var(--green); }
.cc-erkannt__ico svg{ width:16px; height:16px; }
.cc-erkannt[hidden]{ display:none; }

/* ---- Reservierung: zuerst die Online-Buchung ---------------------------- */
.cc-deflect[hidden]{ display:none; }
.cc-deflect:not([hidden]){ margin-bottom:22px; }
.cc-deflect__box{ text-align:center; padding:34px 28px 30px; border-radius:24px;
  background:radial-gradient(110% 90% at 50% 0%, color-mix(in srgb,var(--pink-hot) 22%,transparent), transparent 70%), rgba(255,255,255,.02);
  border:1px solid color-mix(in srgb,var(--pink-hot) 42%,transparent); }
.cc-deflect__ico{ width:56px; height:56px; margin:0 auto; border-radius:50%; display:grid; place-content:center; background:var(--pink-hot); color:#fff;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--pink-hot) 14%,transparent); }
.cc-deflect__ico svg{ width:26px; height:26px; }
.cc-deflect__eye{ margin-top:18px; font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); }
.cc-deflect__t{ font-size:clamp(1.35rem,3vw,1.7rem); font-weight:900; line-height:1; text-transform:uppercase; margin:.4rem 0 .6rem; }
.cc-deflect__txt{ color:var(--text-dim); font-size:var(--cc-fs-m); max-width:40ch; margin:0 auto; text-wrap:pretty; }
.cc-deflect__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
.cc-oder{ display:flex; align-items:center; gap:14px; margin:22px 0; font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.cc-oder::before, .cc-oder::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.09); }
.cc-alt{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:20px; text-align:left; color:#fff;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:transform var(--cc-t), border-color var(--cc-t), background var(--cc-t); }
.cc-alt__ico{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-content:center;
  background:color-mix(in srgb,var(--pink-hot) 12%,transparent); color:var(--pink-hot); transition:background var(--cc-t), color var(--cc-t); }
.cc-alt__ico svg{ width:18px; height:18px; }
.cc-alt__txt{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cc-alt__txt b{ font-size:var(--cc-fs-l); font-weight:700; }
.cc-alt__txt small{ font-size:var(--cc-fs-s); color:var(--text-dim); line-height:1.4; }
.cc-alt__pfeil{ flex:none; color:rgba(255,255,255,.6); transition:transform var(--cc-t), color var(--cc-t); }
.cc-alt__pfeil svg{ width:20px; height:20px; display:block; }
@media (hover:hover){
  .cc-alt:hover{ transform:var(--cc-lift); border-color:var(--pink-hot); background:var(--cc-card-hover); }
  .cc-alt:hover .cc-alt__ico{ background:var(--pink-hot); color:#fff; }
  .cc-alt:hover .cc-alt__pfeil{ transform:translateX(4px); color:#fff; }
}
.cc-alt:active{ transform:scale(.99); }
.cc-alt:focus-visible{ outline:none; box-shadow:var(--cc-focus); }
.cc-deflect-mini{ display:flex; align-items:center; gap:10px; font-size:var(--cc-fs-s); color:var(--text-dim); margin-bottom:22px;
  padding:10px 16px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--pink-hot) 8%,transparent); border:1px solid color-mix(in srgb,var(--pink-hot) 28%,transparent); }
.cc-deflect-mini svg{ flex:none; width:16px; height:16px; color:var(--pink-hot); }
.cc-deflect-mini[hidden]{ display:none; }

/* ---- Hinweis-Boxen (Rundum-Rahmen) -------------------------------------- */
.cc-hint{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-radius:18px; font-size:var(--cc-fs-m); color:var(--text-dim);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); }
.cc-hint[hidden]{ display:none; }
.cc-hint__ico{ flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-content:center; background:color-mix(in srgb,var(--pink-hot) 14%,transparent); color:var(--pink-hot); }
.cc-hint__ico svg{ width:18px; height:18px; }
.cc-hint b{ color:#fff; }
.cc-hint + .cc-hint{ margin-top:12px; }
.cc-hint__t{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); margin-bottom:10px; }
.cc-hint__more{ margin-top:12px; font-size:var(--cc-fs-s); }
/* Pakete im Formular: eingeklappt, eine Zeile (Pille mit Rundum-Rahmen) */
.cc-pkslot[hidden]{ display:none; }
.cc-pkmini{ border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); transition:border-color var(--cc-t), background var(--cc-t); }
.cc-pkmini[open]{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.14); }
.cc-pkmini > summary{ list-style:none; display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-radius:20px;
  font-size:var(--cc-fs-m); font-weight:700; color:#fff; }
.cc-pkmini > summary::-webkit-details-marker{ display:none; }
@media (hover:hover){ .cc-pkmini:not([open]):hover{ border-color:var(--pink-hot); background:var(--cc-card-hover); } .cc-pkmini:not([open]):hover .cc-pkmini__ico{ background:var(--pink-hot); color:#fff; } }
.cc-pkmini__ico{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-content:center; background:color-mix(in srgb,var(--pink-hot) 14%,transparent); color:var(--pink-hot); transition:background var(--cc-t), color var(--cc-t); }
.cc-pkmini__ico svg{ width:16px; height:16px; }
.cc-pkmini__t{ flex:1; min-width:0; }
.cc-pkmini__n{ display:inline-grid; place-content:center; min-width:1.6em; height:1.6em; padding:0 .4em; margin-left:.3em; border-radius:var(--r-pill);
  font-size:var(--cc-fs-xs); background:rgba(255,255,255,.1); color:#fff; vertical-align:1px; }
.cc-pkmini__pfeil{ flex:none; width:9px; height:9px; border:solid rgba(255,255,255,.7); border-width:0 2px 2px 0; rotate:45deg; translate:0 -2px; transition:rotate .3s var(--ease-ui), translate .3s var(--ease-ui); }
.cc-pkmini[open] .cc-pkmini__pfeil{ rotate:225deg; translate:0 2px; }
.cc-pkmini__inhalt{ padding:4px 16px 16px; }
.cc-intro{ color:var(--text-dim); margin-bottom:22px; font-size:var(--cc-fs-m); text-wrap:pretty; }

/* ---- Pakete ------------------------------------------------------------- */
.cc-pks{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.cc-pk{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:3px 14px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.cc-pk.is-empf{ background:color-mix(in srgb,var(--pink-hot) 12%,transparent); border-color:var(--pink-hot);
  box-shadow:0 18px 40px -26px var(--pink-hot); }
.cc-pk__kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.cc-pk__kopf b{ font-weight:700; color:#fff; font-size:var(--cc-fs-m); line-height:1.25; }
.cc-pk__preis{ font-weight:900; color:#fff; white-space:nowrap; text-align:right; font-size:var(--cc-fs-l); }
.cc-pk__preis small{ font-weight:500; font-size:var(--cc-fs-xs); color:var(--text-dim); }
.cc-pk__grp{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.cc-pk__meta{ grid-column:1 / -1; font-size:var(--cc-fs-s); font-weight:600; color:var(--pink-soft); }
/* Jede Angabe wandert als Ganzes in die nächste Zeile; nur eine Angabe, die länger als die Zeile ist
   (lange Begriffe aus dem Board), bricht in sich um – nie über den Rand hinaus. Der Trenner hängt am Begriff. */
.cc-pk__meta > span{ display:inline-block; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.cc-pk__meta > span:not(:last-child)::after{ content:" ·"; }
.cc-pk__text{ grid-column:1 / -1; font-size:var(--cc-fs-s); color:var(--text-dim); text-wrap:pretty; }
.cc-pkg + .cc-pkg, .cc-pks--empf + .cc-pkg{ margin-top:16px; }
.cc-pkg__t{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:8px; }
.cc-notiz{ margin-top:8px; line-height:1.45; }
.cc-laedt{ animation:ccPuls 1.4s ease-in-out infinite; }
@keyframes ccPuls{ 50%{ opacity:.45; } }

.cc-pakete{ margin-top:20px; padding:18px; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); font-size:var(--cc-fs-m); }
.cc-frage{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:16px 18px; border-radius:20px;
  background:color-mix(in srgb,var(--pink-hot) 9%,transparent); border:1px solid color-mix(in srgb,var(--pink-hot) 36%,transparent); }
.cc-frage[hidden]{ display:none; }
.cc-frage__t{ font-weight:700; font-size:var(--cc-fs-l); }
.cc-frage__acts{ display:flex; flex-wrap:wrap; gap:8px; }
[data-pakete-msg]{ margin-top:20px; border-top:0; padding:0; }

/* ---- Antwort-Schritt ---------------------------------------------------- */
.cc-q{ margin-bottom:22px; }
.cc-q__t{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cc-q__text{ font-size:var(--cc-fs-xl); font-weight:600; color:#fff; line-height:1.35; margin-top:.3rem; overflow-wrap:anywhere; }
.cc-q__erk{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:.55rem; font-size:var(--cc-fs-s); color:var(--text-dim); }
.cc-q__erk span{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  padding:.35em .7em; border-radius:var(--r-pill); background:color-mix(in srgb,var(--green) 12%,transparent); }
.cc-answers{ display:flex; flex-direction:column; gap:14px; }
.cc-ans{ padding:20px 22px; border-radius:22px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  animation:ccAnsIn .5s var(--ease-ui) both; animation-delay:calc(var(--i,0) * 70ms); }
.cc-ans.is-top{ background:linear-gradient(160deg, color-mix(in srgb,var(--pink-hot) 16%,transparent), color-mix(in srgb,var(--pink-hot) 3%,transparent) 70%);
  border-color:color-mix(in srgb,var(--pink-hot) 45%,transparent); }
@keyframes ccAnsIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.cc-ans__kopf{ display:flex; align-items:center; gap:12px; }
.cc-ans__ico{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-content:center;
  background:color-mix(in srgb,var(--pink-hot) 15%,transparent); color:var(--pink-hot); }
.cc-ans.is-top .cc-ans__ico{ background:var(--pink-hot); color:#fff; }
.cc-ans__ico svg{ width:19px; height:19px; }
.cc-ans__eye{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); }
.cc-ans__t{ font-size:var(--cc-fs-l); font-weight:700; line-height:1.25; color:#fff; margin-top:.1rem; text-wrap:balance; }
.cc-ans__inhalt{ margin-top:12px; }
.cc-ans__inhalt > p{ font-size:var(--cc-fs-m); color:var(--text-dim); text-wrap:pretty; }
.cc-ans__inhalt > p + p{ margin-top:.45rem; }
.cc-ans__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:16px; }
.cc-ans__acts .cc-link{ font-size:var(--cc-fs-m); }

/* Öffnungszeiten */
.cc-status{ display:flex; align-items:baseline; gap:.5em; font-size:var(--cc-fs-m) !important; font-weight:600; color:#fff !important; margin:.5rem 0 .2rem; }
.cc-status::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; translate:0 -1px; }
.cc-status.is-offen::before{ background:var(--green); box-shadow:0 0 10px var(--green); }
.cc-status.is-zu::before{ background:var(--peach); }
.cc-status b{ font-weight:700; }
.cc-zeiten{ display:grid; grid-template-columns:1fr 1fr; gap:3px 22px; font-size:var(--cc-fs-s); margin:.5rem 0; }
.cc-zeiten div{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.cc-zeiten dt{ font-weight:700; color:#fff; }
.cc-zeiten dd{ color:var(--text-dim); white-space:nowrap; }
.cc-zeiten dd.is-zu{ color:rgba(255,255,255,.42); }

/* ---- „Etwas anderes": Prüfung + Tipps unter dem Textfeld ----------------- */
.cc-check{ margin-top:16px; padding:16px 18px; border-radius:20px; font-size:var(--cc-fs-m); color:var(--text-dim); }
.cc-check[hidden]{ display:none; }
.cc-check b{ color:#fff; }
.cc-check.is-block{ background:color-mix(in srgb,var(--pink-hot) 10%,transparent); border:1px solid color-mix(in srgb,var(--pink-hot) 50%,transparent); }
.cc-check.is-hinweis{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); }
.cc-check.is-hinweis[hidden]{ display:none; }
.cc-check.is-hinweis p{ flex:1 1 260px; }
.cc-check__kopf{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.cc-check__ico{ flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-content:center; background:var(--pink-hot); color:#fff; }
.cc-check__ico svg{ width:18px; height:18px; }
.cc-check__t{ font-size:var(--cc-fs-l); font-weight:700; color:#fff; }
.cc-check__acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cc-tipps{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.cc-tipps[hidden]{ display:none; }
.cc-tipps__t{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cc-tipps .cc-ans{ padding:16px 18px; }

/* ---- Einwilligung ------------------------------------------------------- */
.cc-consent{ padding-top:18px; border-top:1px solid rgba(255,255,255,.07); margin-top:6px; }
.cc-consent[hidden]{ display:none; }
.cc-consent .consent-group{ margin-top:0; }

/* ---- Zusammenfassung ---------------------------------------------------- */
.cc-sum{ padding:18px 20px 10px; border-radius:20px; margin-bottom:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); }
.cc-sum__kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.cc-sum__kopf h3{ font-size:var(--cc-fs-s); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.cc-sum__edit{ display:inline-flex; align-items:center; gap:.35em; font-size:var(--cc-fs-s); }
.cc-sum__edit svg{ width:14px; height:14px; }
.cc-sum__row{ display:grid; grid-template-columns:minmax(110px,36%) 1fr; gap:14px; padding:11px 0; border-top:1px solid rgba(255,255,255,.06); font-size:var(--cc-fs-m); }
.cc-sum__row dt{ color:var(--text-dim); }
.cc-sum__row dd{ color:#fff; font-weight:600; overflow-wrap:anywhere; }

/* ---- Erfolg ------------------------------------------------------------- */
.cc-ok{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:6px 0 18px; }
.cc-ok__badge{ width:76px; height:76px; border-radius:50%; display:grid; place-content:center; color:#fff; background:var(--pink-hot);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--pink-hot) 16%,transparent), 0 22px 50px -16px var(--pink-hot);
  animation:ccPop .7s cubic-bezier(.16,1.18,.3,1) both; }
.cc-ok__badge svg{ width:36px; height:36px; }
@keyframes ccPop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.cc-ok__lead{ font-size:var(--cc-fs-xl); color:#fff; max-width:44ch; text-wrap:pretty; }
.cc-ok__sum{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; }
.cc-ok__sum div{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
/* ungerade Anzahl: die letzte Kachel steht nicht allein links, sondern über beide Spalten */
.cc-ok__sum > div:last-child:nth-child(odd){ grid-column:1 / -1; }
.cc-ok__sum dt{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.cc-ok__sum dd{ font-size:var(--cc-fs-m); font-weight:600; color:#fff; overflow-wrap:anywhere; }
.cc-ok__h{ font-size:var(--cc-fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); margin-top:4px; }
.cc-ok__steps{ list-style:none; counter-reset:cc; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
/* Nummer läuft im Text mit: auch zweizeilige Punkte bleiben sauber zentriert */
.cc-ok__steps li{ counter-increment:cc; display:block; font-size:var(--cc-fs-m); line-height:1.5; color:var(--text-dim); text-wrap:pretty; }
.cc-ok__steps li::before{ content:counter(cc); width:22px; height:22px; margin-right:10px; vertical-align:middle; translate:0 -1px; border-radius:50%; display:inline-grid; place-content:center; font-size:var(--cc-fs-xs); font-weight:700; line-height:1;
  color:#fff; background:color-mix(in srgb,var(--pink-hot) 30%,transparent); }
.cc-ok__acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; margin-top:8px; }
.cc-ok__more{ font-size:var(--cc-fs-m); }

/* ---- „Abbrechen?" ------------------------------------------------------- */
.cc-confirm{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:24px; background:rgba(10,14,26,.84);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:ccFade .25s var(--ease-ui) both; }
.cc-confirm[hidden]{ display:none; }
@keyframes ccFade{ from{ opacity:0; } }
.cc-confirm__box{ width:min(380px,100%); text-align:center; padding:26px 24px; border-radius:24px; background:#161d31; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.cc-confirm__t{ font-size:1.3rem; font-weight:900; text-transform:uppercase; margin-bottom:.4rem; }
.cc-confirm__box > p:not(.cc-confirm__t){ color:var(--text-dim); font-size:var(--cc-fs-m); }
.cc-confirm__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:1.2rem; }

/* Touch (touch.js vergibt .is-tap) */
@media (hover:none){
  .cc-tile.is-tap, .cc-topic.is-tap, .cc-alt.is-tap{ border-color:var(--pink-hot); background:var(--cc-card-hover); }
  .cc-topic.is-tap .cc-topic__ico, .cc-alt.is-tap .cc-alt__ico{ background:var(--pink-hot); color:#fff; }
  .cc-tile.is-tap .cc-tile__ico{ background:color-mix(in srgb,var(--pink-hot) 24%,transparent); }
  .cc-tile--radio.is-tap:has(input:checked) .cc-tile__ico{ background:var(--pink-hot); color:#fff; }
  .cc-chip.is-tap input:not(:checked) + span{ border-color:var(--pink-hot); background:var(--cc-tint); color:#fff; }
}

/* =============================================================================
   3. RESPONSIV — Handy: Bottom-Sheet, 16px-Inputs (kein iOS-Zoom)
   ============================================================================= */
/* schmale Zweispalter (1025–1200 px): Textspalte links ist hier am kürzesten */
@media (min-width:1025px) and (max-width:1200px){
  .cc-topic{ padding:12px 14px; gap:12px; }
  .cc-topic__ico{ width:38px; height:38px; border-radius:12px; }
  .cc-fast__btn{ padding:1em 1.15em; }
}
@media (max-width:1024px){
  .cc-launch{ max-width:640px; }
}
@media (max-width:760px){
  .cc-launch{ padding:26px 20px 24px; text-align:center; }
  .cc-launch__title{ font-size:1.4rem; margin-bottom:1.1rem; }
  .cc-ask__in{ font-size:16px; }
  .cc-ask__box{ padding-left:18px; }
  .cc-ask__hint{ margin-left:10px; font-size:var(--cc-fs-xs); }
  .cc-launch__t{ margin:1.5rem 0 .8rem; }
  .cc-topics{ gap:10px; }
  .cc-topic{ padding:11px 14px; gap:14px; border-radius:18px; }
  .cc-topic__ico{ width:38px; height:38px; border-radius:12px; }
  .cc-fast__row{ gap:10px; }
  .cc-fast__btn{ padding:1.05em 1.2em; }

  .cc{ align-items:flex-end; padding:0; }
  .cc__card{ width:100%; max-height:calc(100vh - 12px); max-height:calc(100dvh - 12px); border-radius:24px 24px 0 0; border-bottom:0;
    transform:translateY(100%); transition:opacity .25s var(--ease-ui), transform .5s cubic-bezier(.2,.9,.25,1.02); }
  .cc__grab{ display:block; flex:none; width:44px; height:5px; border-radius:var(--r-pill); background:rgba(255,255,255,.22); margin:10px auto 0; }
  .cc__head{ padding:12px 22px 18px; gap:16px 12px; }
  .cc__title{ font-size:1.45rem; }
  .cc__x{ width:40px; height:40px; }
  .cc__stepbtn{ font-size:var(--cc-fs-xs); letter-spacing:.06em; gap:6px; }
  .cc__body{ padding:22px 22px 14px; }
  .cc__status{ margin:0 22px; }
  .cc__foot{ padding:14px 22px calc(16px + env(safe-area-inset-bottom)); }
  .cc__foot .btn-pill{ padding:1em 1.25em; }
  .cc__foot [data-weiter]{ flex:1; justify-content:center; }
  .cc.is-antwort .cc__foot{ flex-direction:column-reverse; align-items:stretch; }
  .cc.is-antwort .cc__foot .btn-pill{ justify-content:center; margin:0; padding:.85em 1.2em; }
  .cc.is-antwort .cc__foot{ gap:8px; }
  .cc-pane[data-pane="fertig"]{ padding-bottom:env(safe-area-inset-bottom); }
  .cc-in, .cc-chip span{ font-size:16px; }
  .cc-chip span{ padding:.68em 1.05em; }
  .cc-themen{ gap:10px; }
  .cc-tile{ padding:14px; gap:12px; }
  .cc-tile__ico{ width:38px; height:38px; border-radius:12px; }
  .cc-sec{ padding:22px 0; }
  .cc-grid{ gap:18px 12px; }
  .cc-deflect__box{ padding:28px 20px 24px; }
  .cc-deflect__acts > *{ flex:1 1 100%; justify-content:center; }
  .cc-alt{ padding:16px; gap:14px; }
  .cc-ans{ padding:18px; }
  .cc-sum__row{ grid-template-columns:1fr; gap:2px; }
  .cc-ok__sum div{ padding:8px 10px; }
  .cc-zeiten{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  /* Handy: Themen als 2er-Raster kleiner Karten – Icon oben, Name darunter, Unterzeile entfällt */
  .cc-topics{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cc-topic{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:9px; padding:12px 13px 13px; border-radius:16px; }
  .cc-topic__ico{ width:32px; height:32px; border-radius:10px; }
  .cc-topic__ico svg{ width:18px; height:18px; }
  .cc-topic__txt b{ font-size:var(--cc-fs-s); line-height:1.25; }
  .cc-topic__txt small{ display:none; }
  .cc-w2{ grid-column:span 3; }
  .cc-themen{ grid-template-columns:1fr; }
  .cc-tile__txt small{ display:block; }
}
/* ≤360px: die Hinweiszeile unter dem Fragefeld hat zwei feste Zeilen statt einer (bei 320px ist die Spalte
   nur ~230px breit – „Sofort-Antwort zu Preisen, Paketen & Zeiten." würde sonst mit „…" abgeschnitten).
   Höhe bleibt fest (wächst beim Tippen nicht), längere „Erkannt:"-Zeilen enden nach 2 Zeilen. */
@media (max-width:360px){
  .cc-ask__hint{ height:3em; white-space:normal; }
  .cc-ask__erk{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
}
@media (max-width:340px){
  .cc-grid{ grid-template-columns:1fr; }
  .cc-field, .cc-w2, .cc-w3{ grid-column:1 / -1; }
  .cc-topic{ padding:12px; }
  .cc-topic__txt b{ font-size:var(--cc-fs-s); }
}

/* =============================================================================
   3b. HANDY: ALLES ZENTRIERT (wie die übrige Seite auf dem Handy, Wunsch des Betreibers Okt. 2026)
   Auch getippter Text in einzeiligen Feldern steht mittig (.cc-in). Ausnahmen mit Absicht:
   mehrzeiliger Text in der Textarea (linksbündig), Checkbox-Zeilen der Einwilligung,
   Öffnungszeiten-Liste (Tag | Zeit) — wie auf der übrigen Seite.
   ============================================================================= */
@media (max-width:760px){
  /* Startfeld */
  .cc-ask__hint{ margin-left:0; }
  .cc-ask__hint > span{ justify-content:center; }
  /* Themen-Karten ohne Icon: kompakt, Name mittig */
  .cc-topic{ justify-content:center; align-items:center; text-align:center; min-height:58px; }
  .cc-topic__ico{ display:none; }
  .cc-topic__txt{ align-items:center; }
  .cc-fast__row{ justify-content:center; }

  /* Dialog (Bottom-Sheet) */
  .cc__card{ text-align:center; }
  .cc__head{ grid-template-columns:40px minmax(0,1fr) 40px; }
  .cc__kopf{ grid-column:2; grid-row:1; align-self:center; }
  .cc__x{ grid-column:3; grid-row:1; }
  .cc__stepbtn{ align-items:center; text-align:center; }
  .cc__status{ text-align:center; }
  .cc__foot{ justify-content:center; }
  .cc-next{ margin-left:0; }
  /* Themenwahl im Dialog: wie die Karten im Startfeld ohne Icon, Haken bleibt oben rechts */
  .cc-tile{ justify-content:center; text-align:center; padding:14px 38px; }
  .cc-tile__ico{ display:none; }
  .cc-tile__txt{ align-items:center; }
  /* Abschnitte, Labels, Hinweise */
  .cc-chips{ justify-content:center; }
  .cc-err, .cc-count, .cc-feldtipp{ text-align:center; }
  /* Hinweiszeilen: Icon läuft im Text mit (Textmitte = Boxmitte, auch zweizeilig); Info-Kachel steht über dem Text */
  .cc-warn, .cc-erkannt, .cc-deflect-mini{ display:block; text-align:center; }
  .cc-warn[hidden], .cc-erkannt[hidden], .cc-deflect-mini[hidden]{ display:none; }
  .cc-warn svg, .cc-deflect-mini svg{ display:inline-block; vertical-align:-3px; margin:0 6px 0 0; }
  .cc-erkannt__ico{ display:inline-grid; vertical-align:-3px; margin-right:6px; }
  .cc-info{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
  /* Zahl mit −/+: Gruppe kompakt und mittig; allein stehende Felder über die volle Breite */
  .cc-num{ justify-content:center; }
  .cc-num .cc-in{ flex:0 1 96px; }
  .cc-field--num.cc-w3:not(:has(+ .cc-field--num.cc-w3)):not(.cc-field--num.cc-w3 + .cc-field--num.cc-w3){ grid-column:1 / -1; }
  .cc-in{ text-align:center; }
  textarea.cc-in{ text-align:left; }
  .cc-consent{ text-align:left; }
  .cc-alt{ flex-direction:column; justify-content:center; text-align:center; gap:10px; }
  .cc-alt__pfeil{ display:none; }
  .cc-hint{ flex-direction:column; align-items:center; text-align:center; }
  .cc-pkmini > summary{ justify-content:center; }
  .cc-pkmini__t{ flex:0 1 auto; }
  .cc-frage{ flex-direction:column; justify-content:center; text-align:center; }
  .cc-frage__acts, .cc-check__acts{ justify-content:center; }
  .cc-check__kopf{ flex-direction:column; justify-content:center; gap:10px; }
  .cc-check.is-hinweis{ flex-direction:column; justify-content:center; text-align:center; }
  .cc-check.is-hinweis p{ flex:0 1 auto; }
  .cc-tipps{ align-items:stretch; }
  /* Antwort-Schritt */
  .cc-q__erk{ justify-content:center; }
  .cc-ans__kopf{ flex-direction:column; justify-content:center; gap:10px; }
  .cc-ans__acts{ justify-content:center; }
  .cc-status{ justify-content:center; }
  .cc-zeiten{ text-align:left; }
  .cc-pk{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .cc-pk__kopf{ flex-direction:column; align-items:center; justify-content:center; gap:6px; }
  .cc-pk__preis{ text-align:center; }
  /* Zusammenfassung */
  .cc-sum__kopf{ flex-direction:column; justify-content:center; gap:4px; }
  /* Erfolg */
  .cc-ok__sum{ text-align:center; }
}
@media (max-width:560px){
  /* Personen (neben Datum/Uhrzeit) stünde sonst allein in der linken Hälfte */
  .cc-field--num.cc-w2{ grid-column:1 / -1; }
}

/* =============================================================================
   4. WENIGER BEWEGUNG
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  .cc, .cc-dim, .cc__card, .cc__body, .cc-tile, .cc-topic, .cc-topic__ico, .cc-tile__ico, .cc-chip span, .cc-ask__go, .cc-ask__go svg, .cc__x,
  .cc-alt, .cc-alt__ico, .cc-alt__pfeil, .cc-num__b, .cc-pkmini, .cc-tile--radio::after, :where(.cc, .cc-launch) .btn-pill{ transition:none !important; }
  .cc-tile--radio::after{ transform:none !important; }
  /* Hover/Tap ohne Verschieben oder Skalieren – Rahmen und Farbe bleiben als Rückmeldung */
  .cc-topic, .cc-tile, .cc-alt, .cc-ask__go, .cc-ask__go svg, .cc__x, .cc-num__b, .cc-chip span, :where(.cc, .cc-launch) .btn-pill{ transform:none !important; }
  .cc-ans, .cc-ok__badge, .cc__card.is-shake, .cc-confirm, .cc-laedt{ animation:none !important; }
  .cc__card, .cc.is-card-in .cc__card{ transform:none; }
}
.cc[data-reduce="1"] .cc__card, .cc[data-reduce="1"] .cc__body{ transition:none !important; }
.cc[data-reduce="1"] .cc-ans{ animation:none; }

/* Während der Dialog offen ist: Gewinnspiel-Orb ausblenden (liegt sonst über den Feldern) */
body.cc-lock .gw-orb-layer{ opacity:0; pointer-events:none; }
body.cc-lock .gw-orb-layer *{ pointer-events:none !important; }