/* Kontaktformular v2, FAQ-Gruppen, Veredelung */

/* ---------- Formular: Umschalter, Select, Hinweise ---------- */
.switch { display: flex; flex-wrap: wrap; gap: .5rem; }
.switch legend { width: 100%; margin-bottom: .5rem; }
.switch__opt { position: relative; flex: 1 1 12rem; }
.switch__opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.switch__opt span { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid #3a3b40; font-weight: 700; cursor: pointer; transition: all .25s var(--ease); }
.switch__opt span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #686d75; transition: all .25s var(--ease); }
.switch__opt input:checked + span { border-color: var(--red); background: rgba(227,22,31,.14); color: #fff; }
.switch__opt input:checked + span::before { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--night-2); }
.switch__opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #b8bcc4 50%), linear-gradient(135deg, #b8bcc4 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; cursor: pointer; }
.field select option { background: #111214; color: #fff; }
.field .opt { color: #8a9099; font-weight: 400; }
.field[hidden] { display: none; }
.field input::placeholder, .field textarea::placeholder { color: #6b717a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form button[disabled] { opacity: .6; cursor: progress; }
.contact__hints { margin-top: 1.6rem; display: grid; gap: .9rem; }
.contact__hints li { position: relative; padding-left: 1.4rem; color: #b8bcc4; font-size: .95rem; line-height: 1.5; }
.contact__hints li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--red); }
.contact__hints b { color: #fff; }

/* ---------- FAQ: Themen-Navigation + Gruppen ---------- */
.faq-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.faq-nav a { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .55rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); transition: all .25s var(--ease); }
.faq-nav a:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.qa-group { font-size: .8rem; font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); margin: 2.6rem 0 .4rem; display: flex; align-items: center; gap: .8rem; scroll-margin-top: 100px; }
.qa-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.faq-nav + .qa-group { margin-top: 1.4rem; }
.qa-group + .qa { border-top: 0; }
.qa summary { transition: color .2s; }
.qa summary:hover { color: var(--red-ink); }
.qa[open] { background: linear-gradient(90deg, rgba(227,22,31,.05), transparent 60%); }
.qa__a a { color: var(--red-ink); }
@media (min-width: 961px) { .faq__grid .intro { position: sticky; top: 110px; align-self: start; } }

/* ---------- Körnung + Scroll-Fortschritt ---------- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 70; background: var(--red); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* ---------- Laufband ---------- */
.ticker { background: var(--red); color: #fff; overflow: hidden; padding: .32rem 0; border-block: 1px solid #b80f17; }
.ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 1.1rem; padding-right: 1.1rem; font-weight: 900; font-size: clamp(.72rem, .7rem + .15vw, .85rem); letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.ticker__track span i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .55; }
.ticker__track span.o { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.9); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */
.instrument { perspective: 1200px; }
.panel { transition: transform .6s var(--ease), box-shadow .6s var(--ease); will-change: transform; }
.instrument__photo { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } }
.hero h1 em { position: relative; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .9s; }
.hero h1.is-in em::after { transform: scaleX(1); }

/* ---------- Karten: Lichtkegel folgt der Maus ---------- */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(227,22,31,.10), transparent 60%); z-index: 1; }
.card:hover::after { opacity: 1; }
.card--heat::after, .card--smoke::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 60%); z-index: 3; }

/* ---------- Ablauf: Linie zeichnet sich ---------- */
.steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s; opacity: .35; }
.steps.is-drawn::before { transform: scaleX(1); }
.step__no { overflow: hidden; }
.step__no::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.step:hover .step__no::after { transform: translateX(120%); }

/* ---------- Partner: Wasserzeichen ---------- */
.audience { position: relative; overflow: hidden; }
.audience::before { content: "BE·BB"; position: absolute; right: -2rem; top: 1.5rem; font-weight: 900; font-size: clamp(8rem, 5rem + 14vw, 20rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(17,17,17,.08); pointer-events: none; }
.audience .wrap { position: relative; }
.aud { transition: transform .5s var(--ease); }
.aud h3 { transition: color .3s; }
.aud:hover { transform: translateY(-4px); }
.aud:hover h3 { color: var(--red-ink); }

.countdown__num { text-shadow: 0 0 40px rgba(227,22,31,.35); }

@media (prefers-reduced-motion: reduce) {
  .ticker__track, .instrument__photo { animation: none; }
  .steps::before { transform: none; }
  .hero h1 em::after { transform: scaleX(1); }
}
@media (max-width: 640px) {
  .audience::before { font-size: 7rem; top: .5rem; right: -1rem; }
  .switch__opt { flex-basis: 100%; }
}