/* ==========================================================================
   Funktionsseiten – Komponentensatz  (assets/css/feature-page.css)

   Wiederverwendbare Bausteine für alle /funktionen/-Seiten:
     .fp-hero        Feature-Hero mit Produktkomposition
     .fp-frame       Produktrahmen: nachgebaute AirLST-Oberfläche im
                     Look der Demand Engine (Icon-Leiste, Kopf, Arbeitsfläche)
     .fp-ui-*        UI-Bausteine innerhalb des Rahmens (Tabelle, Pills,
                     Filter, Karten, Stepper, Detail, Scan)
     .fp-showcase    Vollbreiter Produktabschnitt mit Callouts
     .fp-split       Text neben Produkt
     (Ablaufkette: ds_flow_carousel aus dem Design System)
     .fp-trust       Kompakte Wertaussage
     .fp-seo         Ruhiger Textbereich
     .fp-faq         Fragen als <details>
     .fp-cta         Abschluss

   Tokens kommen aus main.css (--violet, --text, --border, --font-*). Hier nur
   Abstände, Rahmen und die App-Nachbauten. Purple ausschließlich für Aktion
   und aktiven Zustand.
   ========================================================================== */

.fp {
  --fp-gap:     clamp(88px, 10vw, 150px);
  --fp-line:    var(--border, #E5E7EB);
  --fp-soft:    #F3F2F7;
  --fp-soft2:   var(--grey-50, #F9FAFB);
  --fp-ink:     var(--text, #111827);
  --fp-muted:   var(--text-muted, #686F7A);
  --fp-faint:   #8A92A2;
  --fp-accent:  var(--violet, #7531AE);
  --fp-accent-soft: #F0E7FF;
  --fp-ok:      #177A3E;
  --fp-ok-soft: #E4F5EA;
  --fp-warn:    #8A4E00;   /* 4,6:1 auf --fp-warn-soft */
  --fp-warn-soft: #FDF1DC;
  --fp-bad:     #B4233C;
  --fp-bad-soft: #FBE7EB;
  --fp-radius:  18px;
  --fp-radius-sm: 10px;
  --fp-shadow:  0 30px 80px -40px rgba(20, 16, 40, .35), 0 2px 6px -2px rgba(20, 16, 40, .08);
  --fp-maxtext: 680px;
  color: var(--fp-ink);
}
/* Gleiches Raster wie Header und Breadcrumb: --max-w plus Seitenabstand aus main.css */
.fp .container { max-width: var(--max-w, 1400px); }
.fp section { padding: var(--fp-gap) 0; }
.fp section + section { padding-top: 0; }
.fp .fp-trust + section { padding-top: var(--fp-gap); }
/* Getönte Bandsektion: eigener Abstand oben und unten, Folgesection setzt neu an */
.fp .fp-band { background: var(--fp-soft); padding: calc(var(--fp-gap) * .7) 0; }
.fp .fp-band + section { padding-top: var(--fp-gap); }
[data-theme="dark"] .fp .fp-band { background: rgba(255,255,255,.035); }
[data-theme="dark"] .fp-band .fp-filter { background: #1B1D24; }
.fp h1, .fp h2, .fp h3 { font-family: var(--font-display); letter-spacing: var(--ds-type-display-l-tracking); color: var(--fp-ink); }
.fp h2 { margin: 0 0 22px; font-weight: 700; }
.fp h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
.fp p { margin: 0; }
.fp-eyebrow {
  display: inline-block; margin-bottom: 18px; text-transform: uppercase;
  color: var(--fp-accent);
}
.fp-lead { color: var(--fp-muted); }
.fp-body { color: var(--fp-muted); }
.fp-body + .fp-body { margin-top: 16px; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fp a.fp-link { color: var(--link); text-decoration: none; font-weight: 600; }
.fp a.fp-link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Buttons ohne Familien-Sonderform: dieselben DS-Buttons wie auf der Startseite (Martin, 07.10.2026) */

/* Reveal: dezent, nur Opazität und 14px */

/* ---- Hero ---------------------------------------------------------- */
.fp-hero { padding: 24px 0 clamp(24px, 3vw, 48px); overflow: hidden; }
@media (min-width: 1040px) { .fp-hero { padding-top: 0; } }
.fp-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1040px) { .fp-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); } }
.fp-hero h1 { margin: 0 0 24px; font-weight: 700;
}
.fp-hero h1 span { color: var(--fp-muted); font-weight: 400; display: block; }
.fp-hero .fp-lead { margin-bottom: 30px; font-size: 18px; }
.fp-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--fp-muted); }
.fp-hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.fp-hero-trust svg { color: var(--fp-accent); }

/* Produktkomposition im Hero: Hauptrahmen, rechts angeschnitten, Karten darüber */
.fp-hero-visual { position: relative; padding-bottom: 12px; }
@keyframes fpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 1039px) {
  .fp-hero-visual { display: flex; flex-direction: column; gap: 14px; }
}

/* Handy im Hero: die Gästeliste als Mobile-Komposition mit erklärenden Karten */
.fp-hero-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 560px; }
@media (min-width: 1040px) { .fp-hero-stage { margin-top: 12px; } }
.fp-hero-stage::before { content: ""; position: absolute; width: 520px; height: 520px; max-width: 96%; left: 50%; top: 50%; transform: translate(-50%, -46%); border-radius: 50%; background: radial-gradient(closest-side, rgba(117,49,174,.16), rgba(117,49,174,.04) 55%, transparent 72%); filter: blur(4px); pointer-events: none; }
.fp-mobile {
  position: relative; z-index: 2; width: 320px; aspect-ratio: 9 / 18.8;
  background: #15131C; border-radius: 48px; padding: 12px;
  box-shadow: 0 46px 100px -34px rgba(20,16,40,.55), 0 14px 34px -18px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.07);
  transform: rotate(-2deg); transition: transform .6s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) { .fp-mobile:hover { transform: rotate(0); } }
.fp-mobile::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 98px; height: 24px; background: #000; border-radius: 14px; z-index: 7; }
.fp-mobile-screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; background: #F4F8FF; font-size: 12px; font-family: var(--font-micro); }
.fp-m-head { padding: 56px 16px 12px; background: #fff; border-bottom: 1px solid var(--fp-line); }
.fp-m-event { display: block; font-size: 10.5px; font-family: var(--font-micro); font-weight: 600; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-accent); margin-bottom: 4px; }
.fp-m-head b { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 20px; letter-spacing: -.4px; margin-bottom: 10px; }
.fp-m-head b em { font-style: normal; font-size: 12px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-faint); }
.fp-m-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--fp-soft2); border: 1px solid var(--fp-line); color: var(--fp-muted); font-size: 12px; font-family: var(--font-micro); }
.fp-m-chips { display: flex; gap: 6px; padding: 10px 16px; overflow: hidden; white-space: nowrap; }
.fp-m-chips span { font-size: 11px; font-family: var(--font-micro); font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--fp-line); color: var(--fp-muted); flex: none; }
.fp-m-chips span.is-on { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-m-list { flex: 1; padding: 0 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.fp-m-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 9px 11px; }
.fp-m-row.is-hi { border-color: #CDB7EE; box-shadow: 0 0 0 3px rgba(117,49,174,.08); }
.fp-m-row .fp-avatar { margin: 0; width: 28px; height: 28px; font-size: 10px; font-family: var(--font-micro); flex: none; }
.fp-m-row div { min-width: 0; flex: 1; }
.fp-m-row b { display: block; font-size: 12.5px; font-family: var(--font-micro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-m-row small { display: block; font-size: 10.5px; font-family: var(--font-micro); color: var(--fp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-m-row .fp-st { font-size: 10px; font-family: var(--font-micro); padding: 2px 7px; flex: none; }
.fp-m-row .fp-st::before { width: 5px; height: 5px; }
.fp-m-tabs { display: flex; justify-content: space-around; align-items: flex-end; padding: 10px 6px 18px; background: #fff; border-top: 1px solid var(--fp-line); }
.fp-m-tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-faint); }
.fp-m-tabs span.is-on { color: var(--fp-accent); }
.fp-m-tabs i { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.fp-m-tabs span.is-on i { background: var(--fp-accent-soft); }
.fp-m-tabs .fp-m-scan i { width: 46px; height: 46px; border-radius: 999px; background: var(--fp-accent); color: #fff; margin-top: -22px; box-shadow: 0 10px 22px -8px rgba(117,49,174,.7); }
.fp-m-tabs .fp-m-scan { color: var(--fp-accent); }

/* Erklärkarten neben dem Handy: greifen räumlich auf die UI zu */
.fp-hero-notes { position: absolute; inset: 0; pointer-events: none; }
.fp-note-card {
  position: absolute; z-index: 3; width: 232px; pointer-events: auto;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 14px; background: #fff; border: 1px solid var(--fp-line);
  animation: fpFloat 7s ease-in-out infinite;
}
.fp-note-card i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--fp-accent-soft); color: var(--fp-accent); display: flex; align-items: center; justify-content: center; }
.fp-note-card b { display: block; font-size: 13px; margin-bottom: 3px; }
.fp-note-card span { display: block; font-size: 12px; font-family: var(--font-micro); line-height: 1.45; color: var(--fp-muted); }
.fp-note-card--1 { left: -4%; top: 8%; }
.fp-note-card--2 { right: -6%; top: 44%; animation-delay: -2.4s; }
.fp-note-card--3 { left: -2%; bottom: 10%; animation-delay: -4.8s; }
@media (max-width: 1039px) {
  .fp-hero-stage { min-height: 0; flex-direction: column; align-items: center; gap: 14px; }
  .fp-hero-notes { position: static; display: grid; gap: 10px; width: 100%; margin-top: 8px; }
  .fp-note-card { position: static; width: auto; animation: none; }
  .fp-mobile { transform: none; }
}
@media (min-width: 600px) and (max-width: 1039px) { .fp-hero-notes { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fp-mobile { transition: none; } .fp-note-card { animation: none; } }

/* ---- Produktrahmen: App-Shell im Look der Demand Engine ----------- */
.fp-frame {
  position: relative;
  display: grid; grid-template-columns: var(--fp-rail-w, 56px) minmax(0, 1fr);
  grid-auto-rows: min-content;
  border: 1px solid var(--fp-line); border-radius: var(--fp-radius);
  background: #F4F8FF; box-shadow: var(--fp-shadow);
  font-size: 13px; color: var(--fp-ink); text-align: left;
}
.fp-frame--plain { grid-template-columns: minmax(0, 1fr); }
.fp-frame--plain .fp-rail { display: none; }
.fp-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--fp-rail-w, 56px); overflow: visible; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; background: #fff; border-right: 1px solid var(--fp-line);
}
.fp-frame:not(.fp-frame--plain) .fp-main { grid-column: 2; }
/* Rail wie in der Suite: Logo mit Einklapp-Knopf, Trennlinie, Module als Illustrationen,
   das aktive auf einer hellvioletten Kachel; Glocke und Profil unten als violette Kreise. */
.fp-rail-top { position: relative; width: 100%; display: flex; justify-content: center; padding-bottom: 11px; margin-bottom: 8px; border-bottom: 1px solid var(--fp-line); }
.fp-rail .fp-rail-logo { width: 26px; height: 24px; }
.fp-rail-toggle { position: absolute; top: 1px; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-color-white); border: 1px solid var(--fp-line); display: flex; align-items: center; justify-content: center; color: var(--fp-muted); box-shadow: 0 1px 2px rgba(20,16,40,.06); }
.fp-rail-list { flex: 1; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fp-rail i { width: 44px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.fp-rail i .illuicon { width: 24px; height: 24px; }
.fp-rail i.is-on { background: var(--ds-color-violet-100); }
.fp-main { min-width: 0; padding: 18px 20px 20px; }
.fp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fp-head h4, .fp-head .fp-head-title { margin: 0; display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.fp-head .fp-tag { font-size: 11px; font-family: var(--font-micro); font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--fp-soft); color: var(--fp-muted); }
.fp-head .fp-btns { margin-left: auto; display: flex; gap: 6px; }
.fp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; font-size: 12px; font-family: var(--font-micro); font-weight: 600; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); white-space: nowrap; }
.fp-btn--p { background: var(--fp-accent); color: #fff; border-color: var(--fp-accent); }
.fp-card { background: #fff; border: 1px solid var(--fp-line); }
.fp-frame .fp-card + .fp-card { margin-top: 12px; }

/* Toolbar innerhalb einer Karte */
.fp-tools { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fp-soft); }
.fp-search { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--fp-line); border-radius: 9px; font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-faint); min-width: 190px; background: #fff; }
.fp-search b { color: var(--fp-ink); font-weight: 500; }
.fp-search .fp-caret { width: 1px; height: 14px; background: var(--fp-accent); animation: fpCaret 1s steps(2) infinite; }
@keyframes fpCaret { to { visibility: hidden; } }
.fp-tools .fp-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-family: var(--font-micro); font-weight: 600; background: var(--fp-soft); color: var(--fp-muted); white-space: nowrap; }
.fp-chip.is-on { background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-chip .x { opacity: .6; }
.fp-count { font-size: 12px; font-family: var(--font-micro); color: var(--fp-faint); white-space: nowrap; }
.fp-count b { color: var(--fp-ink); }

/* Tabelle */
.fp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: var(--font-micro); }
.fp-table th { text-align: left; padding: 10px 12px; font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-faint); border-bottom: 1px solid var(--fp-soft); white-space: nowrap; }
.fp-table th svg { vertical-align: -2px; margin-left: 3px; opacity: .5; }
.fp-table td { padding: 10px 12px; border-bottom: 1px solid var(--fp-soft); white-space: nowrap; vertical-align: middle; }
.fp-table--tight th, .fp-table--tight td { padding: 9px 10px; }
.fp-table .fp-barcell { width: 26%; }
.fp-table .fp-barcell .fp-bar { min-width: 60px; }
.fp-table tr:last-child td { border-bottom: 0; }
.fp-table tr.is-sel td { background: var(--fp-accent-soft); }
.fp-table tr.is-dim td { opacity: .35; }
.fp-table .fp-name { font-weight: 600; color: var(--fp-ink); }
.fp-table .fp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--fp-muted); }
.fp-table .fp-mail { color: var(--fp-muted); }
.fp-table .fp-dim { color: var(--fp-faint); }
.fp-table .r { text-align: right; }
.fp-check { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #CFCBDD; vertical-align: -2px; }
.fp-check.is-on { background: var(--fp-accent); border-color: var(--fp-accent); position: relative; }
.fp-check.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fp-filterrow td { padding: 6px 12px; }
.fp-filterrow .fp-fin { display: inline-flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 8px; border: 1px solid var(--fp-line); border-radius: 6px; font-size: 11.5px; font-family: var(--font-micro); color: var(--fp-faint); background: #fff; }
.fp-filterrow .fp-fin b { color: var(--fp-ink); font-weight: 500; }
.fp-filterrow .fp-fin.is-on { border-color: var(--fp-accent); box-shadow: 0 0 0 3px rgba(117,49,174,.12); }
.fp-avatar { display: inline-flex; width: 22px; height: 22px; border-radius: 999px; background: var(--fp-accent-soft); color: var(--fp-accent); font-size: 10px; font-family: var(--font-micro); font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; }

/* Status-Pills wie im Produkt */
.fp-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; white-space: nowrap; }
.fp-st::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.fp-st--imp { background: var(--fp-soft); color: var(--fp-muted); }
.fp-st--inv { background: #E3EEFB; color: #1E4E8C; }
.fp-st--req { background: var(--fp-warn-soft); color: var(--fp-warn); }
.fp-st--wait { background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-st--ok { background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-st--bad { background: var(--fp-bad-soft); color: var(--fp-bad); }
.fp-st--in { background: #14161C; color: #fff; }
.fp-st--in::before { background: #4ECB7D; }

/* Fußzeile der Tabelle */
.fp-tfoot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12px; font-family: var(--font-micro); color: var(--fp-faint); }
.fp-tfoot .fp-pages { margin-left: auto; display: flex; gap: 4px; }
.fp-tfoot b { color: var(--fp-ink); }
/* Bausteine ohne fp-Rahmen (Rundgang der Startseite): Kopfknöpfe bzw. Sprachauswahl über dem Inhalt */
.fp-gl-acts, .fp-tpl-lang { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.config-demo--fp :is(.fp-tools, .fp-tpl-btns) { flex-wrap: wrap; row-gap: 8px; }
/* Bausteine Ticket-Kategorien und Check-in live (funktionen/_tpl/views/): Stile statt Inline-Angaben der Seiten */
.fp-card--form { padding: 14px; }
.fp-card--form .fp-note { margin-top: 12px; }
.fp-in-unit { margin-left: auto; }
.fp-kpis.fp-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 640px) { .fp-kpis.fp-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-stat-legend i.is-all { background: var(--ds-color-violet-700); }
.fp-stat-legend i.is-n { background: var(--ds-color-green-500); }
.fp-stat-legend i.is-s { background: var(--ds-color-blue-500); }
.fp-stat-legend .fp-stat-time { margin-left: auto; }
/* Bausteine Zahlungen und Agenda-Builder (funktionen/_tpl/views/): Stile statt Inline-Angaben der Seiten */
.fp-tools-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fp-toggles.fp-toggles--pad { padding: 12px 14px; }
.fp-card.fp-card--flush { padding: 0; }
/* Agenda-Builder: Tagesleiste und Hinweis unter dem Session-Titel (vorher event-app.css, nur auf /event-app/) */
.fp-daybar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fp-daybar .fp-chip { display: inline-flex; align-items: baseline; gap: 6px; }
.fp-daybar .fp-chip em { font-style: normal; font-family: var(--font-micro); font-size: 9.5px; opacity: .7; }
.fp-daybar-r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-micro); font-size: 11px; color: var(--fp-faint); }
.fp-table td b + small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--fp-faint); }
/* Rundgang schmaler: Nebenspalten aus wie mobil auf den Funktionsseiten */
@media (max-width: 1240px) {
  .config-demo--fp .fp-table .fp-hide-m, .config-demo--fp .fp-tpl :is(th, td):nth-child(3) { display: none; }
}
.fp-tfoot .fp-pages i { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.fp-tfoot .fp-pages i.is-on { background: var(--fp-accent); color: #fff; }

/* Callouts, die sich auf die UI beziehen */
.fp-callout {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; background: #14161C; color: #fff;
  font-size: 12.5px; font-family: var(--font-micro); font-weight: 500; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
  max-width: 260px;
}
.fp-callout::before { content: ""; position: absolute; width: 10px; height: 10px; background: #14161C; transform: rotate(45deg); }
.fp-callout--l::before { left: -5px; top: 50%; margin-top: -5px; }
.fp-callout--t::before { top: -5px; left: 22px; }
.fp-callout--r::before { right: -5px; top: 50%; margin-top: -5px; }
.fp-callout i { width: 8px; height: 8px; border-radius: 999px; background: #B892F8; flex: none; }
@media (max-width: 899px) { .fp-callout { position: static; margin-top: 10px; max-width: none; } .fp-callout::before { display: none; } }

/* Kennzahlen-Kachel wie im Cockpit */
.fp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fp-kpi { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--fp-line); background: #fff; }
.fp-kpi span { display: block; font-size: 11.5px; font-family: var(--font-micro); color: var(--fp-faint); margin-bottom: 6px; }
.fp-kpi b { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: var(--ds-type-num-tracking); line-height: 1; }
.fp-kpi--ok b { color: var(--fp-ok); } .fp-kpi--warn b { color: var(--fp-warn); } .fp-kpi--bad b { color: var(--fp-bad); }
.fp-bar { height: 8px; border-radius: 4px; background: var(--fp-soft); overflow: hidden; display: flex; }
.fp-bar i { height: 100%; display: block; }
@media (max-width: 640px) { .fp-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Stepper (Import) */
.fp-steps { display: flex; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; }
.fp-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-muted); border-bottom: 2px solid var(--fp-soft); }
.fp-steps li.is-on { color: var(--fp-accent); border-bottom-color: var(--fp-accent); }
.fp-steps li.is-done { color: var(--fp-ink); }
.fp-steps em { font-style: normal; width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-micro); background: var(--fp-soft); }
.fp-steps li.is-on em { background: var(--fp-accent); color: #fff; }
.fp-steps li.is-done em { background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-map { display: grid; grid-template-columns: 180px 1fr; gap: 0; border: 1px solid var(--fp-line); border-radius: 10px; overflow: hidden; }
.fp-map > div { padding: 10px 12px; border-bottom: 1px solid var(--fp-soft); font-size: 12.5px; font-family: var(--font-micro); display: flex; align-items: center; gap: 8px; min-height: 42px; }
.fp-map > div:nth-last-child(-n+2) { border-bottom: 0; }
.fp-map .fp-sel { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 9px; border: 1px solid var(--fp-line); border-radius: 7px; font-weight: 600; color: var(--fp-ink); background: #fff; }
.fp-map .fp-src b { color: var(--fp-ink); font-weight: 600; margin-right: 6px; }
.fp-map .fp-src { color: var(--fp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-map .fp-hd { background: var(--fp-soft2); font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-faint); }
.fp-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-family: var(--font-micro); }
.fp-note--ok { background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-note--warn { background: var(--fp-warn-soft); color: var(--fp-warn); }
.fp-note--acc { background: var(--fp-accent-soft); color: var(--fp-accent); }

/* Gastdetail */
.fp-detail { display: grid; grid-template-columns: 150px 1fr 118px; gap: 20px; padding: 18px 20px; }
.fp-detail-side { border-right: 1px solid var(--fp-soft); padding-right: 18px; }
.fp-detail-side .fp-av { width: 68px; height: 68px; border-radius: 999px; background: var(--fp-accent-soft); color: var(--fp-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.fp-detail-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-muted); }
.fp-detail-side li { display: flex; align-items: center; gap: 8px; }
.fp-detail-side li.is-bad { color: var(--fp-bad); }
.fp-detail h4, .fp-detail .fp-detail-name { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.fp-detail .fp-sub { font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-muted); }
.fp-detail-tabs { display: flex; gap: 14px; padding: 12px 20px 0; border-bottom: 1px solid var(--fp-soft); font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-faint); overflow: hidden; white-space: nowrap; }
.fp-detail-tabs span { padding-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; }
.fp-detail-tabs span.is-on { color: var(--fp-accent); border-bottom: 2px solid var(--fp-accent); }
.fp-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 16px; font-size: 12.5px; font-family: var(--font-micro); }
.fp-kv div span { display: block; font-size: 11px; font-family: var(--font-micro); color: var(--fp-faint); margin-bottom: 2px; }
.fp-kv div b { font-weight: 500; }
.fp-qr { width: 96px; height: 96px; border-radius: 6px; background-color: #fff; background-image: url("/assets/images/qr-airlst.svg"); background-size: 100% 100%; }
.fp-qr-wrap { text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--fp-muted); }
.fp-qr-wrap .fp-qr { margin: 0 auto 8px; }
.fp-log { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; font-size: 12.5px; font-family: var(--font-micro); }
.fp-log li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--fp-soft); }
.fp-log li span { color: var(--fp-faint); font-variant-numeric: tabular-nums; }
.fp-log li b { font-weight: 500; }
.fp-log li em { font-style: normal; color: var(--fp-muted); }
@media (max-width: 720px) { .fp-detail { grid-template-columns: 1fr; } .fp-detail-side { border: 0; padding: 0; } .fp-qr-wrap { display: none; } }

/* Check-in: Handy-Ansicht */
.fp-phone { width: 250px; border-radius: 30px; border: 1px solid var(--fp-line); background: #fff; overflow: hidden; padding: 16px 14px 18px; font-size: 12.5px; font-family: var(--font-micro); }
.fp-phone-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-family: var(--font-micro); color: var(--fp-faint); margin-bottom: 14px; }
.fp-scan { position: relative; height: 138px; border-radius: 14px; background: #14161C url("/assets/images/qr-airlst.svg") center / auto calc(100% - 60px) no-repeat; overflow: hidden; margin-bottom: 14px; }
.fp-scan::before { content: ""; position: absolute; inset: 26px 50px; border: 2px solid rgba(255,255,255,.55); border-radius: 10px; }
.fp-scan i { position: absolute; left: 50px; right: 50px; top: 26px; height: 2px; background: #B892F8; box-shadow: 0 0 12px #B892F8; animation: fpScan 2.4s ease-in-out infinite; }
@keyframes fpScan { 50% { transform: translateY(84px); } }
@media (prefers-reduced-motion: reduce) { .fp-scan i { animation: none; top: 68px; } }
.fp-scan-ok { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-scan-ok b { display: block; color: var(--fp-ink); font-weight: 700; }
.fp-scan-ok span { font-size: 11.5px; font-family: var(--font-micro); }
.fp-scan-ok svg { flex: none; }

/* Sync-Verbindung zwischen zwei Rahmen */
.fp-sync { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .fp-sync { grid-template-columns: minmax(0, 1fr) 250px; gap: 56px; } }
@media (max-width: 899px) { .fp-sync .fp-phone { margin: 0 auto; } }
.fp-sync-line { display: none; }
@media (min-width: 900px) {
  .fp-sync-line { display: block; position: absolute; left: calc(100% - 250px - 56px + 8px); width: 40px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--fp-accent) 0 6px, transparent 6px 12px); }
}

/* ---- Showcase: vollbreiter Produktabschnitt ----------------------- */
.fp-showcase-head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 56px); }
.fp-showcase-stage { position: relative; }
.fp-showcase-notes { display: grid; }
.fp-showcase-notes div { padding-top: 16px; }
.fp-showcase-notes b { display: block; }
.fp-showcase-notes p { color: var(--fp-muted); }

/* ---- Split ---------------------------------------------------------- */
.fp-split { display: grid; gap: clamp(30px, 4vw, 60px); align-items: center; }
.fp-split > * , .fp-sync > *, .fp-filters > *, .fp-privacy > * { min-width: 0; }
@media (min-width: 980px) { .fp-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } .fp-split.is-flipped { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } .fp-split.is-flipped > :first-child { order: 2; } }
@media (min-width: 980px) { .fp-split.is-even { grid-template-columns: 1fr 1fr; } }
.fp-facts { padding: 0; list-style: none; }
.fp-facts li b { display: block; }
.fp-facts li span { color: var(--fp-muted); }

/* ---- Trust / Wertaussage: dunkle Markenfläche wie die Plattform-Sektion der Startseite */
.fp-trust {
  padding: clamp(56px, 6vw, 88px) 0 !important;
  color: #fff;
  background:
    radial-gradient(60rem 30rem at 15% 0%, rgba(117, 49, 165, 0.35), transparent 60%),
    radial-gradient(50rem 26rem at 90% 100%, rgba(84, 94, 211, 0.18), transparent 55%),
    #260E3A;
}
.fp-trust-grid { display: grid; gap: 28px; }
/* Ueberschrift links, Punkte rechts: drei Punkte in einer Reihe, vier als 2 x 2. Vier nebeneinander
   liessen den Ueberschriften nur rund 20 Zeichen, laengere brachen um und rissen das Raster auf. */
@media (min-width: 981px) {
  .fp-trust-grid { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; align-items: start; }
  .fp-trust-grid h2 { grid-row: 1 / span 2; align-self: start; }
  .fp-trust-grid:has(> .fp-trust-item:nth-of-type(4)) { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); }
}
.fp-trust-grid h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 0; color: #fff; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.fp-trust-item b { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; color: #fff; }
.fp-trust-item b em { font-style: normal; font-size: 11px; font-family: var(--font-micro); font-weight: 700; color: #C9AEF6; letter-spacing: 1px; }
.fp-trust-item p { font-size: 14.5px; line-height: 1.55; color: rgba(228, 217, 247, 0.78); }
/* Dunkle Fläche schließt direkt an den Hero an */
.fp-hero + .fp-trust { margin-top: clamp(24px, 3vw, 48px); }

/* ---- Filter-Sequenz ---------------------------------------------- */
.fp-filters { display: grid; gap: 12px; }
@media (min-width: 760px) { .fp-filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .fp-filters--row { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* Kompakte Bandsektion: Kopf zweispaltig, Inhalt in voller Breite */
.fp-band-head { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 48px); }
@media (min-width: 980px) { .fp-band-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: end; } .fp-band-head h2 { margin-bottom: 0; } .fp-band-head .fp-body { margin-bottom: 8px; } }
.fp-showcase-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.fp-showcase-head--center .fp-lead { margin-left: auto; margin-right: auto; }
/* Uebersichtsseiten: Seitenkopf (H1, Einleitung) steht im Kopf des ersten Karussells auf der Buehne
   oben, ohne eigenen page-hero-Block (Martin, 07.10.2026) */
.fp.page-hero--hub { padding: 0; }
.fp.page-hero--hub > .hub-sec:first-child { padding-top: clamp(24px, 3vw, 40px); }
.fp.page-hero--hub h1 { margin: 0 0 16px; font-weight: 700; font-size: var(--ds-type-h1-size); line-height: var(--ds-type-h1-line-height); letter-spacing: var(--ds-type-h1-tracking); text-wrap: balance; }
.fp.page-hero--hub .fp-showcase-head .fp-lead { max-width: 62ch; }
.fp-narrow { max-width: 1040px; margin: 0 auto; }
.fp-filter { padding: 18px 20px; border: 1px solid var(--fp-line); border-radius: 14px; background: #fff; }
.fp-filter-q { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fp-filter-q .fp-chip { font-weight: 500; }
.fp-filter-q .fp-chip b { font-weight: 700; }
.fp-filter-res { display: flex; align-items: baseline; gap: 8px; }
.fp-filter-res b { font-family: var(--font-display); font-size: 28px; letter-spacing: -.6px; }
.fp-filter-res span { font-size: 13px; color: var(--fp-muted); }
.fp-filter-save { margin-top: 12px; font-size: 12px; font-family: var(--font-micro); color: var(--fp-accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Gegenüberstellung ------------------------------------------- */
.fp-vs { display: grid; gap: 14px; }
@media (min-width: 760px) { .fp-vs { grid-template-columns: 1fr 1fr; gap: 22px; } }
.fp-vs > div { min-width: 0; padding: 22px 24px; border: 1px solid var(--fp-line); background: #fff; }
.fp-vs > div.is-acc { border-color: #D9C7F5; background: linear-gradient(180deg, #FBF8FF, #fff); }
.fp-vs .fp-vs-cap { font-size: 11px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-faint); margin-bottom: 14px; display: block; }
.fp-vs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fp-vs li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--fp-soft2); color: var(--fp-muted); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.fp-vs li svg { flex: none; }
.fp-vs li.is-x { text-decoration: line-through; opacity: .6; }
.fp-vs .is-acc li { font-family: var(--font-sans); font-size: 13.5px; color: var(--fp-ink); background: #fff; border: 1px solid var(--fp-soft); }
.fp-users { display: flex; align-items: center; margin-bottom: 14px; }
.fp-users i { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #fff; margin-left: -8px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fp-users i:first-child { margin-left: 0; }


/* ---- Datenschutz-Zeile ------------------------------------------- */
.fp-privacy { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 760px) { .fp-privacy { grid-template-columns: repeat(3, 1fr); } }
.fp-privacy div { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--fp-line); background: #fff; }
.fp-privacy b { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-bottom: 8px; }
.fp-privacy b svg { color: var(--fp-accent); }
.fp-privacy p { font-size: 14px; line-height: 1.55; color: var(--fp-muted); }

/* ---- SEO-Textbereich ---------------------------------------------- */
.fp-seo { background: var(--fp-soft2); }
.fp-seo-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .fp-seo-aside { position: sticky; } }
.fp-seo-intro { margin: 16px 0 0; color: var(--fp-muted); }
.fp-seo-nav { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; font-size: 14.5px; }
.fp-seo-nav a { color: var(--fp-ink); text-decoration: none; display: flex; }
.fp-seo-nav em { font-style: normal; font-weight: 700; }
.fp-seo-body > div:first-child > p:first-of-type { color: var(--fp-ink); }
.fp-seo-body p { color: var(--fp-muted); }
.fp-seo-body p + p { margin-top: 14px; }
.fp-seo-body ul { max-width: 68ch; margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--fp-muted); }
.fp-seo-body a { color: var(--fp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- Social Proof: ruhige Logozeile ------------------------------- */
.fp-logos { margin-top: clamp(28px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--fp-line); display: grid; gap: 18px; }
.fp-logos > span { font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--fp-muted); font-weight: 600; }
.fp-logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.fp-logos-row img { width: auto; filter: grayscale(1); opacity: .5; transition: opacity .2s, filter .2s; }
.fp-logos-row img:hover { opacity: .9; filter: none; }
@media (min-width: 980px) { .fp-logos { grid-template-columns: 260px minmax(0, 1fr); align-items: center; gap: 40px; } .fp-logos-row { justify-content: space-between; gap: 20px 28px; } }
@media (max-width: 640px) { .fp-logos-row img { height: auto !important; max-height: 24px; max-width: 96px; } }
[data-theme="dark"] .fp-logos-row img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; }
[data-theme="dark"] .fp-logos-row img[data-mono] { filter: invert(1); }

/* ---- FAQ ---------------------------------------------------------- */
.fp-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.fp-faq details { border-top: 1px solid var(--fp-line); }
.fp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 700; }
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after { font-size: 22px; font-weight: 300; color: var(--fp-faint); }
.fp-faq summary:focus-visible { outline: 2px solid var(--fp-accent); }
.fp-faq-a a { color: var(--fp-accent); }

/* ---- CTA ---------------------------------------------------------- */

/* ---- Mobile: Produktrahmen lesbar halten -------------------------- */
@media (max-width: 760px) {
  .fp-frame { grid-template-columns: minmax(0, 1fr); font-size: 12px; font-family: var(--font-micro); }
  .fp-rail { display: none; }
  .fp-frame:not(.fp-frame--plain) .fp-main { grid-column: 1; }
  .fp-main { padding: 14px; }
  .fp-head .fp-btns { display: none; }
  .fp-frame .fp-hide-m, .fp-frame .fp-mono, .fp-frame th.fp-th-code { display: none !important; }
  .fp-hero-visual .fp-frame { width: 100%; }
  .fp-tools .fp-right { display: none; }
  .fp-tools .fp-search { min-width: 0; flex: 1; }
  .fp-card { overflow: hidden; }
  .fp-card > .fp-table, .fp-table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fp-detail-tabs { overflow-x: auto; }
  .fp-callout { position: static; margin: 10px 0 0; max-width: none; }
}
/* Nur breit clippen: schmal muss der Wrap scrollen (die Regel stand frueher ohne Media Query
   hinter dem 760er-Block und hob dessen overflow-x: auto auf, Spalten wurden abgeschnitten). */
@media (min-width: 761px) { .fp-table-wrap { overflow: hidden; } }
.fp-card { overflow: hidden; }
.fp-frame { overflow: hidden; }

/* Dark Mode: gleiche Struktur, gedämpfte Flächen */
[data-theme="dark"] .fp { --fp-line: rgba(255,255,255,.12); --fp-soft: rgba(255,255,255,.06); --fp-soft2: rgba(255,255,255,.035); --fp-faint: #9AA2B1; --fp-accent-soft: rgba(117,49,174,.28); --fp-ok-soft: rgba(34,160,90,.2); --fp-warn-soft: rgba(240,160,40,.18); --fp-bad-soft: rgba(220,38,38,.2); }
[data-theme="dark"] .fp-frame, [data-theme="dark"] .fp-card, [data-theme="dark"] .fp-rail, [data-theme="dark"] .fp-filter, [data-theme="dark"] .fp-vs > div, [data-theme="dark"] .fp-privacy div, [data-theme="dark"] .fp-phone, [data-theme="dark"] .fp-kpi, [data-theme="dark"] .fp-search, [data-theme="dark"] .fp-btn, [data-theme="dark"] .fp-map .fp-sel, [data-theme="dark"] .fp-filterrow .fp-fin { background: #1B1D24; }
[data-theme="dark"] .fp-frame { background: #15171D; }
/* Handy-Screen und Kontextkarten bleiben helle Flaechen; Textfarben darin nicht mitkippen */
[data-theme="dark"] .fp-mobile-screen, [data-theme="dark"] .fp-mail { --fp-ink: #111827; --fp-muted: #686F7A; --fp-line: #E5E7EB; --fp-soft: #F3F2F7; --fp-accent-soft: #F0E7FF; color: #111827; }

/* ==========================================================================
   E-Mail-Bausteine (Einladungsmanagement)
   ========================================================================== */
/* Mail-Vorschau: gerenderte Einladung im Markendesign */
.fp-mail { border: 1px solid var(--fp-line); border-radius: 12px; overflow: hidden; background: #fff; font-size: 12.5px; font-family: var(--font-micro); }
.fp-mail-meta { padding: 12px 16px; border-bottom: 1px solid var(--fp-soft); display: grid; grid-template-columns: 74px 1fr; gap: 4px 10px; font-size: 11.5px; font-family: var(--font-micro); }
.fp-mail-meta i { font-style: normal; color: var(--fp-faint); }
.fp-mail-meta b { font-weight: 500; color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-mail-head { background: #fff; color: #14213D; padding: 16px 22px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #DCE6F3; }
.fp-mail-head svg { display: none; }
.fp-mail-head span { font-size: 15px !important; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
.fp-mail-hero { height: 120px; background: linear-gradient(90deg, rgba(10,20,45,.86) 0%, rgba(10,20,45,.55) 60%, rgba(10,20,45,.3)), url('/assets/images/solutions/konferenzen/audience-640.webp') center 35% / cover; position: relative; }
.fp-mail-hero b { position: absolute; left: 22px; bottom: 16px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; letter-spacing: -.2px; }
.fp-mail-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; color: var(--fp-muted); line-height: 1.55; }
.fp-mail-body p { margin: 0; }
.fp-mail-body .fp-token { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--fp-accent-soft); color: var(--fp-accent); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.fp-mail-body .fp-resolved { color: var(--fp-ink); font-weight: 600; }
.fp-mail-facts { display: grid; grid-template-columns: 60px 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: 2px; background: #F4F8FD; border-left: 3px solid #1F5FD1; font-size: 12px; font-family: var(--font-micro); }
.fp-mail-facts i { font-style: normal; color: var(--fp-faint); }
.fp-mail-cta { align-self: flex-start; padding: 9px 18px; border-radius: 2px; background: #1F5FD1; color: #fff; font-weight: 600; font-size: 12.5px; font-family: var(--font-micro); }
.fp-mail-attach { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px 16px; border-top: 1px solid var(--fp-soft); }
.fp-mail-attach span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--fp-line); border-radius: 7px; font-size: 11.5px; font-family: var(--font-micro); color: var(--fp-muted); background: #fff; }
.fp-mail-attach svg { color: #1F5FD1; }

/* Editor: Vorschau links, Blockpalette rechts */
.fp-editor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 16px; }
.fp-editor-canvas { border: 1px solid var(--fp-line); border-radius: 12px; background: var(--fp-soft2); padding: 14px; }
.fp-editor-canvas .fp-mail { box-shadow: 0 8px 24px -14px rgba(20,16,40,.3); }
.fp-blocks { border: 1px solid var(--fp-line); border-radius: 12px; background: #fff; padding: 12px; }
.fp-blocks-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.fp-blocks-tabs span { flex: 1; text-align: center; font-size: 10.5px; font-family: var(--font-micro); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 0; border-radius: 7px; color: var(--fp-faint); }
.fp-blocks-tabs span.is-on { background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-blocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fp-block { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--fp-soft); border-radius: 9px; font-size: 9.5px; font-family: var(--font-micro); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--fp-muted); }
.fp-block svg { color: var(--fp-ink); }
.fp-block.is-drag { border-color: var(--fp-accent); background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-block.is-drag svg { color: var(--fp-accent); }
.fp-drop { border: 2px dashed #CDB7EE; border-radius: 8px; padding: 10px; text-align: center; font-size: 11px; font-family: var(--font-micro); color: var(--fp-accent); background: rgba(117,49,174,.05); }
@media (max-width: 720px) { .fp-editor { grid-template-columns: 1fr; } .fp-blocks-grid { grid-template-columns: repeat(6, 1fr); } }

/* Vorlagen-Tabelle: Status-Trigger sichtbar */
.fp-type { font-size: 10.5px; font-family: var(--font-micro); font-weight: 600; padding: 3px 7px; border-radius: 5px; background: var(--fp-soft); color: var(--fp-muted); }
.fp-type--sys { background: var(--fp-ok-soft); color: var(--fp-ok); }

/* Einstellungen-Formular (Absender, Anlagen) */
.fp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fp-form label { display: block; font-size: 11px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-muted); margin-bottom: 5px; }
.fp-form .fp-in { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border: 1px solid var(--fp-line); border-radius: 8px; font-size: 12.5px; font-family: var(--font-micro); background: #fff; color: var(--fp-ink); white-space: nowrap; overflow: hidden; }
.fp-form .fp-in.is-ok { border-color: #BFE3CC; }
.fp-form .fp-in .fp-ok { margin-left: auto; color: var(--fp-ok); display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--font-micro); font-weight: 600; }
.fp-form .fp-in .fp-token { padding: 1px 6px; border-radius: 5px; background: var(--fp-accent-soft); color: var(--fp-accent); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.fp-form .full { grid-column: 1 / -1; }
.fp-toggles { display: flex; flex-direction: column; gap: 8px; }
.fp-toggle { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-ink); }
.fp-toggle i { width: 32px; height: 18px; border-radius: 999px; background: var(--fp-line); position: relative; flex: none; }
.fp-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.fp-toggle.is-on i { background: var(--fp-accent); }
.fp-toggle.is-on i::after { left: 16px; }
.fp-toggle small { margin-left: auto; color: var(--fp-muted); font-size: 11px; font-family: var(--font-micro); }
@media (max-width: 600px) { .fp-form { grid-template-columns: 1fr; } }

/* Status-Automatik: Status -> Vorlage */
.fp-auto { display: grid; gap: 8px; }
.fp-auto-row { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fp-line); border-radius: 10px; background: #fff; }
.fp-auto-row.is-off { opacity: .55; }
.fp-auto-row > svg { color: var(--fp-faint); justify-self: center; }
.fp-auto-row .fp-tpl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: var(--font-micro); font-weight: 600; }
.fp-auto-row .fp-tpl svg { color: var(--fp-accent); }
.fp-auto-row .fp-tpl small { font-weight: 400; color: var(--fp-faint); font-size: 11px; font-family: var(--font-micro); }

/* Versand-Dialog */
.fp-send { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; }
.fp-send-side { display: flex; flex-direction: column; gap: 12px; }
.fp-recips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-recips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid #D9C7F5; color: var(--fp-accent); font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; background: #FBF8FF; }
.fp-send-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 760px) { .fp-send { grid-template-columns: 1fr; } }

/* Statistik: Kennzahlen + 7-Tage-Chart */
.fp-stat-chart { position: relative; height: 120px; margin-top: 8px; }
.fp-stat-chart svg { width: 100%; height: 100%; display: block; }
.fp-stat-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11.5px; font-family: var(--font-micro); color: var(--fp-muted); }
.fp-stat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fp-stat-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fp-kpi--muted b { color: var(--fp-faint); font-size: 14px; }
.fp-kpi small { display: block; margin-top: 6px; font-size: 11px; font-family: var(--font-micro); color: var(--fp-accent); font-weight: 600; }

/* Opt-in-Historie */
.fp-optin { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.fp-optin--on { background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-optin--off { background: var(--fp-bad-soft); color: var(--fp-bad); }
.fp-optin--pending { background: var(--fp-warn-soft); color: var(--fp-warn); }

/* ==========================================================================
   Art-Direction-Pass: Typo-Skala, Tiefe, Section-Archetypen
   Ueberschreibt bewusst die Basiswerte oben; Inhalte und Bausteine bleiben.
   ========================================================================== */
.fp { --fp-shadow: 0 1px 2px rgba(20,16,40,.05), 0 14px 34px -22px rgba(20,16,40,.22); --fp-radius: 20px; }
.fp-hero h1 { font-size: var(--ds-type-display-xl-size); line-height: var(--ds-type-display-xl-line-height); letter-spacing: var(--ds-type-display-xl-tracking); }
.fp-hero h1 span { font-size: .68em; letter-spacing: var(--ds-type-display-xl-tracking); margin-top: 12px; }
.fp h2 { font-size: var(--ds-type-h1-size); line-height: var(--ds-type-h1-line-height); letter-spacing: var(--ds-type-h1-tracking); }
.fp h2.is-xl { font-size: clamp(44px, 4vw, 62px); line-height: 1; letter-spacing: var(--ds-type-h1-tracking); }
.fp h2.is-xxl { font-size: clamp(46px, 4.8vw, 74px); line-height: .98; letter-spacing: var(--ds-type-h1-tracking); max-width: 16ch; }
.fp h2.is-sm { font-size: clamp(30px, 2.4vw, 40px); line-height: 1.08; letter-spacing: var(--ds-type-h1-tracking); }
.fp-lead { font-size: 18px; line-height: 1.55; max-width: 620px; }
.fp-body { font-size: 16px; line-height: 1.6; max-width: 620px; }
.fp-eyebrow { font-size: 11px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); }
.fp-eyebrow em { font-style: normal; color: var(--fp-faint); margin-right: 10px; }
.fp-eyebrow em::after { content: "\2014"; margin-left: 10px; }
/* Utility-Ebene: Zahlen tabellarisch, Codes und Marken technisch */
.fp-frame, .fp-filter, .fp-mobile, .fp-phone, .fp-kpi, .fp-table, .fp-log, .fp-tfoot { font-variant-numeric: tabular-nums; }
.fp-kpi b, .fp-filter-res b, .fp-m-head b { letter-spacing: var(--ds-type-num-tracking); }
.fp-m-event, .fp-log span, .fp-trust-item em, .fp-seo-nav em, .fp-eyebrow em { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; }
/* Tiefe: Hairlines statt Floating-Shadows, Radien differenziert */
.fp-note-card { box-shadow: 0 1px 2px rgba(20,16,40,.05), 0 12px 28px -18px rgba(20,16,40,.25); }
.fp-card { border-radius: 12px; }
.fp-filter { border-radius: 12px; }
.fp-vs > div { border-radius: 16px; }
.fp-phone { box-shadow: 0 1px 2px rgba(20,16,40,.05), 0 18px 40px -24px rgba(20,16,40,.3); }

/* Archetyp: Screen bis an den Rand gecroppt und leicht vergroessert */
/* Archetyp: Screen ohne App-Rahmen, als vergroessertes Detail direkt auf der Flaeche */
.fp-frame--bare { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; zoom: 1.08; }
.fp-frame--bare .fp-head { display: none; }
.fp-frame--bare .fp-main { padding: 0; }
.fp-frame--bare .fp-card { box-shadow: 0 1px 2px rgba(20,16,40,.05), 0 18px 44px -26px rgba(20,16,40,.28); border-radius: 16px; }
@media (max-width: 760px) { .fp-frame--bare { zoom: 1; } }

/* Archetyp: helle violette Flaeche */
.fp .fp-band--violet { background: linear-gradient(180deg, #F7F2FF 0%, #ECE2F9 100%); }
.fp-band--violet .fp-frame, .fp-band--violet .fp-phone { box-shadow: none; border-color: #D9C8F1; }
.fp-band--violet .fp-showcase-notes div { border-top-color: #D9C8F1; }
[data-theme="dark"] .fp .fp-band--violet { background: linear-gradient(180deg, rgba(117,49,174,.16), rgba(117,49,174,.06)); }
[data-theme="dark"] .fp-band--violet .fp-frame, [data-theme="dark"] .fp-band--violet .fp-phone, [data-theme="dark"] .fp-band--violet .fp-showcase-notes div { border-color: rgba(255,255,255,.14); }

/* Archetyp: reduzierte Trust-Komposition (Datenschutz) */
.fp-trustc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 980px) { .fp-trustc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 84px; align-items: center; } }
.fp-trustc-rows { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--fp-line); }
.fp-trustc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--fp-line); align-items: baseline; }
.fp-trustc-rows b { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.025em; line-height: 1.15; }
.fp-trustc-rows span { font-size: 14.5px; line-height: 1.5; color: var(--fp-muted); }
.fp-trustc-rows a { color: var(--fp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp-roles { border: 1px solid var(--fp-line); border-radius: 12px; overflow: hidden; background: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.fp-roles > div { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--fp-line); }
.fp-roles > div > span:not(:first-child) { text-align: center; }
.fp-roles-head { border-top: 0 !important; background: var(--fp-soft); font-size: 10.5px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-faint); }
.fp-roles i { display: inline-flex; width: 22px; height: 22px; border-radius: 999px; align-items: center; justify-content: center; font-style: normal; font-size: 12px; }
.fp-roles i.y { background: var(--fp-ok-soft); color: var(--fp-ok); }
.fp-roles i.n { background: var(--fp-soft); color: var(--fp-faint); }
/* Zusatz unter dem Kasten: 15 px wie überall; .fp p setzt margin sonst auf 0 */
.fp .fp-roles-cap { margin: 15px 0 0; font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-muted); }
[data-theme="dark"] .fp-roles { background: #1B1D24; }

/* Systemflow "Teil von AirLST": ds_flow_carousel ueber fp_flow() (fp.php), Stile im Design System */

/* Archetyp: SEO als Editorial-Artikel */
.fp-seo-body h2 { letter-spacing: var(--ds-type-h2-tracking); line-height: 1.1; margin-bottom: 18px; }
.fp-seo-body h3 { font-size: 21px; letter-spacing: var(--ds-type-h3-tracking); margin: 36px 0 10px; }
.fp-pull { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--fp-accent); font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; letter-spacing: -.025em; color: var(--fp-ink); max-width: 30ch; }
.fp-pull.fp-pull { color: var(--fp-ink); }
.fp-keyfacts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0 0; }
@media (max-width: 640px) { .fp-keyfacts { grid-template-columns: 1fr; } }
.fp-keyfacts b { display: block; font-family: var(--font-display); letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.fp-keyfacts span { font-size: 13px; line-height: 1.45; color: var(--fp-muted); display: block; }
[data-theme="dark"] .fp-keyfacts div { background: #1B1D24; }
@media (min-width: 980px) { .fp-seo-cols { columns: 2; column-gap: 44px; } .fp-seo-cols p { max-width: none; break-inside: avoid; } .fp-seo-cols p + p { margin-top: 14px; } }
.fp-seo-body .fp-pull { color: var(--fp-ink); }
.fp .fp-seo { padding: calc(var(--fp-gap) * .8) 0; }
.fp .fp-seo + section { padding-top: var(--fp-gap); }

/* Dark Mode: Kontextkarten am Hero in dunklem Violett statt Weiss */
[data-theme="dark"] .fp-note-card { background: linear-gradient(180deg, #2C1846, #22123A); border-color: rgba(184,146,248,.28); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 36px -18px rgba(117,49,174,.55); color: #F3EEFB; }
[data-theme="dark"] .fp-note-card b { color: #fff; }
[data-theme="dark"] .fp-note-card span { color: rgba(243,238,251,.72); }
[data-theme="dark"] .fp-note-card i { background: rgba(184,146,248,.18); color: #C9A9F6; }

/* Hero-Text oben ausgerichtet: Breadcrumb -> Eyebrow rund 52px, Handy bleibt vertikal zentriert */
@media (min-width: 1040px) { .fp-hero-grid > div:first-child { align-self: start; padding-top: 52px; } }

/* Benefit-Leiste unter Produkt-Screens: Nummern statt Linien, vertikale Divider, kompakte Copy */
.fp-showcase-notes { margin-top: 40px; gap: 22px; counter-reset: note; }
.fp-showcase-notes div { position: relative; padding: 0 0 0 0; border-top: 0; counter-increment: note; }
.fp-showcase-notes div::before { content: "0" counter(note); display: block; margin-bottom: 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--fp-accent); }
.fp-showcase-notes b { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; max-width: 22ch; }
.fp-showcase-notes p { font-size: 15.5px; line-height: 1.5; max-width: 34ch; }
@media (min-width: 760px) {
  .fp-showcase-notes { gap: 0; }
  .fp-showcase-notes div { padding: 4px 28px 4px 0; }
  .fp-showcase-notes div + div { padding-left: 28px; border-left: 1px solid var(--fp-line); }
}
.fp .fp-band--violet .fp-showcase-notes div + div { border-left-color: #D9C8F1; }
/* Nach einer Benefit-Leiste frueher in die naechste Section uebergehen */
.fp #kontingente, .fp #gaesteliste, .fp #filter.fp-band { padding-bottom: calc(var(--fp-gap) * .65); }

/* Fakten neben Screens: nummeriertes 2x2-Grid statt Dokumentationszeilen */
.fp-facts { margin: 34px 0 0; border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; counter-reset: fact; }
@media (max-width: 520px) { .fp-facts { grid-template-columns: 1fr; gap: 22px; } }
.fp-facts li { padding: 0; border-bottom: 0; counter-increment: fact; }
.fp-facts li::before { content: "0" counter(fact); display: block; margin-bottom: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--fp-accent); }
.fp-facts li b { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin-bottom: 6px; }
.fp-facts li span { font-size: 14.5px; line-height: 1.5; }
.fp-stage { position: relative; }

/* Erlaeuterungen unter einer Buehne: als Reihe mittig unter dem Screen (gilt ueberall) */
@media (min-width: 760px) {
  .fp-showcase-notes { grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; column-gap: clamp(32px, 4vw, 64px); }
}

/* Rail-Fuss: Glocke, Hilfe, Avatar (wie im Hero der Startseite) */
.fp-rail-foot { width: 100%; padding-top: 10px; border-top: 1px solid var(--fp-line); display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.fp-rail-foot i { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-color-violet-700); color: var(--ds-color-white); }
.fp-rail-bell em { position: absolute; top: -4px; right: -5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--ds-color-red-500); color: var(--ds-color-white); font-size: 9px; font-family: var(--font-micro); font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--ds-color-white); }
.fp-rail-back { margin-top: auto; width: 32px !important; height: 32px !important; border: 1px solid var(--fp-line); border-radius: 50% !important; color: var(--fp-muted); }
.fp-rail-back + .fp-rail-foot { margin-top: 8px; }
.fp-rail-sep { width: 26px; height: 1px; background: var(--fp-line); margin: 4px 0; flex: none; }

/* Ehrlichkeitsmarker fx_verify(): sichtbar im Entwurf, vor Livegang fachlich prüfen (19.09.2026) */
.fx-verify { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #FFF4E0; color: #8A4E00; font-size: 12px; font-family: var(--font-micro); font-weight: 600; vertical-align: middle; }
[data-theme="dark"] .fx-verify { background: rgba(222,168,47,.18); color: #F2C879; }

/* ---------- Hintergrund-Sektion (.fp-seo): Remake mit sticky Inhaltsverzeichnis ---------- */
.fp .fp-seo { background: #fff; border-top: 1px solid var(--fp-line); }
@media (min-width: 980px) { .fp-seo-grid { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; } .fp-seo-aside { top: 96px; } }
.fp-seo-aside { display: flex; flex-direction: column; padding: 28px 24px 26px; border-radius: 22px; background: linear-gradient(180deg, #F6F2FC 0%, #EFE8FA 100%); border: 1px solid #E6DDF6; }
.fp-seo-aside h2 { font-size: clamp(22px, 2vw, 26px); line-height: 1.12; letter-spacing: var(--ds-type-h2-tracking); margin: 6px 0 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.fp-seo-nav a, .fp-seo-intro, .fp-seo-cta b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.fp-seo-body h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
.fp-seo-aside h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--fp-accent); }
.fp-seo-intro { font-size: 14px; line-height: 1.6; margin-top: 14px; }
.fp-seo-nav { gap: 6px; margin-top: 22px; }
.fp-seo-nav a { align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; font-weight: 500; transition: background .18s, color .18s; }
.fp-seo-nav a:hover { background: rgba(255,255,255,.65); color: var(--fp-ink); }
.fp-seo-nav a.is-active { background: #fff; color: var(--fp-ink); box-shadow: 0 6px 18px rgba(80,40,130,.10); }
.fp-seo-nav em { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #E6DDF6; font-size: 11px; font-family: var(--font-micro); letter-spacing: 0; color: var(--fp-accent); }
.fp-seo-nav a.is-active em { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-seo-cta { margin-top: 28px; padding: 20px 18px 18px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid #E6DDF6; }
.fp-seo-cta-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #fff; color: var(--fp-accent); font-size: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(80,40,130,.10); }
.fp-seo-cta b { display: block; font-family: var(--font-display); font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--fp-ink); }
.fp-seo-cta p { margin: 8px 0 12px; font-size: 13px; line-height: 1.5; color: var(--fp-muted); }
.fp-seo-cta a { font-size: 13.5px; font-weight: 700; color: var(--fp-accent); text-decoration: none; }
.fp-seo-cta a:hover { text-decoration: underline; }
/* Bloecke: Nummer und Linie ueber jeder Ueberschrift */
.fp-seo-body { counter-reset: fpseo; }
.fp-seo-body > div { counter-increment: fpseo; }
.fp-seo-body > div::before { content: counter(fpseo, decimal-leading-zero); display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fp-accent); }
.fp-seo-body > div { position: relative; }
.fp-seo-body > div::after { content: ""; position: absolute; left: 44px; right: 0; top: 7px; height: 1px; background: var(--fp-line); }
.fp-seo-body > div + div { margin-top: 56px; padding-top: 0; border-top: 0; }
.fp-seo-body > div + div::after { top: 7px; }
.fp-seo-body h2 { font-size: clamp(28px, 2.6vw, 38px); margin: 0 0 16px; }
.fp-seo-body p { font-size: 16px; line-height: 1.7; max-width: 72ch; }
.fp-seo-body > div:first-child > p:first-of-type { font-size: 18px; line-height: 1.65; }
/* Zitat als Box mit Anfuehrungszeichen */
.fp-seo-body .fp-pull { position: relative; margin: 30px 0; padding: 22px 26px 22px 64px; border-left: 3px solid var(--fp-accent); border-radius: 0 14px 14px 0; background: #F6F2FC; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; max-width: none; }
.fp-seo-body .fp-pull::before { content: "\201C"; position: absolute; left: 24px; top: 14px; font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--fp-accent); }
/* Faktenkarten mit Icon-Kreis */
.fp-keyfacts { gap: 16px; margin-top: 26px; }
.fp-keyfacts div { position: relative; padding: 20px 20px 18px; border-radius: 16px; border: 1px solid var(--fp-line); background: #fff; box-shadow: 0 8px 24px rgba(30,20,60,.04); }
.fp-keyfacts div::before { content: ""; display: block; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: #F0E7FF radial-gradient(circle at center, var(--fp-accent) 0 4px, transparent 5px); }
.fp-keyfacts b { font-size: 32px; }
/* Nummerierte Schritte */
.fp-seo-body ol { list-style: none; counter-reset: fpstep; margin: 20px 0 0; padding: 0; max-width: 76ch; }
.fp-seo-body ol li { counter-increment: fpstep; position: relative; padding: 10px 0 10px 46px; font-size: 15.5px; line-height: 1.6; color: var(--fp-muted); border-top: 1px solid var(--fp-line); }
.fp-seo-body ol li:first-child { border-top: 0; }
.fp-seo-body ol li::before { content: counter(fpstep); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F0E7FF; color: var(--fp-accent); font-size: 12.5px; font-weight: 700; }
.fp-seo-body ol li b { color: var(--fp-ink); }
.fp-seo-body ul { padding-left: 18px; }
[data-theme="dark"] .fp .fp-seo { background: #14161D; }
[data-theme="dark"] .fp-seo-aside { background: linear-gradient(180deg, #221C33 0%, #1B1626 100%); border-color: #2E2740; }
[data-theme="dark"] .fp-seo-nav em, [data-theme="dark"] .fp-seo-nav a.is-active, [data-theme="dark"] .fp-seo-cta, [data-theme="dark"] .fp-seo-cta-ic { background: #2A2340; border-color: #3A3152; }
[data-theme="dark"] .fp-seo-body .fp-pull, [data-theme="dark"] .fp-keyfacts div::before, [data-theme="dark"] .fp-seo-body ol li::before { background-color: #2A1740; }

/* Hero-Notizkarten: Custom-Illustrationen statt Strich-Icons (19.09.2026) */
.fp-note-card i:has(.illuicon) { width: 40px; height: 40px; border-radius: 11px; }
.fp-note-card i .illuicon { width: 30px; height: 30px; display: block; }

/* ---------- FAQ (.fp-faq): Remake im Stil der Hintergrund-Sektion, nur CSS ---------- */
.fp .fp-faq { background: var(--fp-soft2); border-top: 1px solid var(--fp-line); }
.fp .fp-seo { padding-bottom: calc(var(--fp-gap) * .5); }
.fp .fp-seo + .fp-faq { padding-top: calc(var(--fp-gap) * .5); }
@media (min-width: 980px) { .fp-faq-grid { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; } .fp-faq-grid > div:first-child { position: sticky; top: 96px; } }
.fp-faq-grid > div:first-child { padding: 28px 24px 26px; border-radius: 22px; background: linear-gradient(180deg, #F6F2FC 0%, #EFE8FA 100%); border: 1px solid #E6DDF6; }
.fp-faq-grid > div:first-child h2 { font-size: clamp(22px, 2vw, 26px) !important; line-height: 1.12; letter-spacing: var(--ds-type-h2-tracking); margin: 6px 0 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.fp-faq-grid > div:first-child h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--fp-accent); }
.fp-faq-grid > div:first-child::after { content: "Ihre Frage ist nicht dabei? Wir antworten persönlich: kontakt@airlst.com"; display: block; margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--fp-muted); }
html[lang="en"] .fp-faq-grid > div:first-child::after { content: "Didn't find your question? Email us at kontakt@airlst.com and we will answer personally."; }
[data-theme="dark"] .fp .fp-faq { background: #14161D; }
[data-theme="dark"] .fp-faq-grid > div:first-child { background: linear-gradient(180deg, #221C33 0%, #1B1626 100%); border-color: #2E2740; }

/* Phone-Mock: Tableiste immer am unteren Rand, Bildschirm komplett gefuellt */
.fp-mobile-screen > .fp-m-tabs { margin-top: auto; }
/* FAQ-Karten nach Mockup: Plus/Minus-Kreis links, Chevron rechts, offene Karte lavendel */
.fp-faq-grid > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fp-faq details { position: relative; border: 1px solid var(--fp-line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(30,20,60,.04); transition: border-color .18s, background-color .18s, box-shadow .18s; }
.fp-faq details:last-child { border-bottom: 1px solid var(--fp-line); }
.fp-faq details:hover { border-color: #D6C7F0; }
.fp-faq details[open] { border-color: #C9B4EC; background: #FBF9FE; box-shadow: 0 12px 30px rgba(80,40,130,.08); }
.fp-faq summary { padding: 20px 24px 20px 90px; min-height: 84px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.fp-faq summary::before { content: "+"; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #F0E7FF; color: var(--fp-accent); font-size: 26px; font-weight: 300; line-height: 1; }
.fp-faq details[open] summary::before { content: "\2212"; top: 24px; transform: none; }
.fp-faq details[open] summary { padding-bottom: 8px; }
.fp-faq summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--fp-muted); border-bottom: 2px solid var(--fp-muted); transform: translateY(-3px) rotate(45deg); flex: none; margin-right: 6px; transition: transform .2s; }
.fp-faq details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.fp-faq summary:focus-visible { outline-offset: -4px; border-radius: 14px; }
.fp-faq-a { margin: 0; padding: 0 90px 24px; max-width: none; font-size: 16px; line-height: 1.6; color: var(--fp-muted); }
/* Links im Fliesstext brauchen ausser der Farbe ein zweites Merkmal (WCAG 1.4.1, Lighthouse link-in-text-block) */
.fp-faq-a a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .fp-faq summary { padding-left: 74px; font-size: 16.5px; } .fp-faq summary::before { left: 16px; width: 40px; height: 40px; } .fp-faq-a { padding: 0 24px 22px 74px; } }
[data-theme="dark"] .fp-faq details { background: #1B1D24; border-color: #2A2D38; }
[data-theme="dark"] .fp-faq details[open] { background: #211B30; border-color: #3A3152; }
[data-theme="dark"] .fp-faq summary::before { background: #2A1740; }

/* ---- Hero-Variante "Bühne" (20.09.2026): Text zentriert wie auf der Startseite,
   darunter das Systemfenster in Desktop-Größe im scheinenden Rahmen. ---- */
.fp-hero--stage { padding-bottom: clamp(56px, 6vw, 96px); }
.fp-hero--stage .fp-hero-center { text-align: center; max-width: 900px; margin: 0 auto; padding-top: 50px; }
@media (max-width: 768px) { .fp-hero--stage .fp-hero-center { padding-top: 20px; } }
.fp-hero--stage .fp-hero-center .fp-eyebrow { justify-content: center; }
.fp-hero--stage .fp-hero-center h1 { text-wrap: balance; }
.fp-hero--stage .fp-hero-center h1 span { margin-inline: auto; }
.fp-hero--stage .fp-lead { margin-inline: auto; max-width: 720px; }
.fp-hero--stage .fp-actions, .fp-hero--stage .fp-hero-trust { justify-content: center; }
.fp-hero-window { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1180px; border-radius: 22px; background: var(--fp-soft2, #F4F8FF); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 20px rgba(255,255,255,.28), 0 0 0 21px rgba(201,174,246,.35), 0 0 24px 2px rgba(255,255,255,.35), 0 0 70px 10px rgba(190,130,255,.16), 0 30px 80px -24px rgba(84,28,126,.32); }
.fp-hero-window > .fp-frame { border: 0; border-radius: 22px; box-shadow: none; margin: 0; }
.fp-hero-window .fp-callout { z-index: 3; }
[data-theme="dark"] .fp-hero-window { border-color: rgba(255,255,255,.12); box-shadow: 0 0 0 20px rgba(255,255,255,.06), 0 0 0 21px rgba(201,174,246,.22), 0 0 70px 10px rgba(190,130,255,.14), 0 30px 80px -24px rgba(0,0,0,.6); }
@media (max-width: 768px) { .fp-hero-window { border-radius: 16px; box-shadow: 0 0 0 6px rgba(255,255,255,.28), 0 0 0 7px rgba(201,174,246,.35), 0 0 36px 6px rgba(190,130,255,.16), 0 20px 50px -18px rgba(84,28,126,.32); } .fp-hero-window > .fp-frame { border-radius: 16px; } }
.fp-hero-window .fp-editor-canvas { min-height: 460px; }
.fp-hero-window .fp-editor-canvas .fp-drop { padding: 22px; }
/* ---------- Faktenkarten in Reihe (.fp-filters--row): Icon-Kachel statt Pill, Headline und Info untereinander, mehr Höhe ---------- */
.fp-filters--row .fp-filter { display: flex; flex-direction: column; min-height: 248px; padding: 24px 24px 22px; border-radius: 18px; box-shadow: 0 8px 24px rgba(30,20,60,.04); }
.fp-filters--row .fp-filter-q { margin-bottom: 18px; gap: 12px; align-items: center; }
.fp-filters--row .fp-filter-q .fp-chip:has(> svg) { background: none; padding: 0; border-radius: 0; white-space: normal; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-faint); }
.fp-filters--row .fp-filter-q .fp-chip:has(> svg.illuicon) { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fp-muted); }
.fp-filters--row .fp-filter-q .fp-chip > svg { flex: none; width: 22px; height: 22px; padding: 11px; box-sizing: content-box; border-radius: 14px; background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-filters--row .fp-filter-q .fp-chip > svg.illuicon { width: 64px; height: 64px; padding: 0; border-radius: 0; background: none; margin: -6px 0 -6px -11px; }   /* Motiv hat im viewBox Luft: linke Motivkante auf die Textkante */
.fp-filters--row .fp-filter-res { display: block; }
.fp-filters--row .fp-filter-res b { display: block; font-size: clamp(24px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -.025em; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.fp-filters--row .fp-filter-res span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.fp-filters--row .fp-filter-save { margin-top: auto; padding-top: 18px; }
[data-theme="dark"] .fp-filters--row .fp-filter-q .fp-chip > svg:not(.illuicon) { background: #2A1740; }
/* Erklärkarten am Bühnen-Hero: hängen links und rechts am Fensterrand */
.fp-hero-window .fp-hero-notes { inset: 0; }
.fp-hero-window .fp-note-card { width: 250px; }
.fp-hero-window .fp-note-card--1 { left: -110px; top: 110px; }
.fp-hero-window .fp-note-card--2 { right: -110px; top: 62%; }
.fp-hero-window .fp-note-card--3 { left: -110px; bottom: 90px; }
@media (max-width: 1039px) { .fp-hero-window .fp-hero-notes { padding: 12px; } }
/* Faktenkarten mit Illustration statt Punkt: illu_icon() als erstes Kind, der Punkt entfällt */
.fp-keyfacts div > svg.illuicon { display: block; width: 46px; height: 46px; margin: -2px 0 14px -3px; }
.fp-keyfacts div:has(> svg.illuicon)::before { display: none; }
/* ---------- Gastdetails: eine Karte, die Reiter laufen durch ---------- */
.fp-detail--guest { grid-template-columns: 132px 1fr 104px; gap: 16px; }
.fp-detail--guest .fp-sub.fp-dim { color: var(--fp-faint); }
.fp-gd .fp-detail-tabs span { cursor: default; transition: color .25s, border-color .25s; }
.fp-gd-panels { position: relative; border-top: 1px solid var(--fp-soft); padding: 14px 14px 16px; }
.fp-gd-panel { position: absolute; left: 14px; right: 14px; top: 14px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.fp-gd-panel.is-on { position: relative; left: auto; right: auto; top: auto; opacity: 1; transform: none; pointer-events: auto; transition: opacity .4s .18s, transform .4s .18s; }
.fp-gd-cap { display: block; font-size: 11px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-faint); margin: 0 0 8px; }
.fp-gd-cap + table + .fp-gd-cap, .fp-gd-grid + .fp-gd-cap { margin-top: 16px; }
.fp-gd-row { display: flex; align-items: center; gap: 12px; }
.fp-gd-preset { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-micro); color: var(--fp-muted); padding: 4px 9px; border: 1px solid var(--fp-line); border-radius: 8px; background: #fff; }
.fp-gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 4px; }
.fp-gd-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-family: var(--font-micro); color: var(--fp-faint); }
.fp-gd-grid .fp-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--fp-line); background: #fff; font-size: 12.5px; font-family: var(--font-micro); color: var(--fp-ink); }
.fp-gd-grid .fp-in--ok { background: var(--fp-ok-soft); border-color: #BBE7CD; color: var(--fp-ok); }
.fp-gd-grid .fp-in--bad { background: var(--fp-bad-soft); border-color: #F3C6CE; color: var(--fp-bad); }
.fp-gd-grid .fp-in .svgicon { color: currentColor; opacity: .7; }
.fp-gd-panel .fp-table { margin: 0; }
/* Dunkles Design: die Felder waren weiss gesetzt und damit unlesbar */
[data-theme="dark"] .fp-gd-grid .fp-in { background: #1B1D24; color: var(--fp-ink); }
[data-theme="dark"] .fp-gd-grid .fp-in--ok { background: var(--fp-ok-soft); border-color: rgba(34,160,90,.45); color: #8FE0B0; }
[data-theme="dark"] .fp-gd-grid .fp-in--bad { background: var(--fp-bad-soft); border-color: rgba(220,38,38,.45); color: #F5A3B3; }
[data-theme="dark"] .fp-gd-preset { background: #1B1D24; }
@media (max-width: 720px) { .fp-gd-grid { grid-template-columns: 1fr; } .fp-gd-preset { display: none; } }
/* Mobil duerfen die Zeilen der Gastdetails umbrechen; sonst schiebt ein langer
   Betreff die Tabelle ueber den Bildschirmrand hinaus. */
@media (max-width: 760px) { .fp-gd-panel .fp-table th, .fp-gd-panel .fp-table td { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .fp-gd-panel { transition: none; } }

/* ---------- Ticketing-Hero: Bühne mit Wellen und Publikum, echtes Ticket ---------- */
.fp-hero--ticket { position: relative; overflow: clip; }
.fp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fp-hero-bg picture, .fp-hero-bg img { display: block; }
.fp-hero-wave { position: absolute; inset: 0; }
.fp-hero-wave img { width: 100%; height: 100%; object-fit: cover; object-position: right top; opacity: .9; }
.fp-hero-crowd { position: absolute; right: -6%; top: 0; width: 66%; height: 100%; }
.fp-hero-crowd img { width: 100%; height: 100%; object-fit: cover; opacity: .3;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 40%, #000 30%, transparent 72%); mask-image: radial-gradient(120% 90% at 78% 40%, #000 30%, transparent 72%); }
.fp-hero--ticket > .container { position: relative; z-index: 1; }
.fp-hero--ticket h1 span.fp-hero-accent { display: block; color: var(--fp-accent); font-size: 1em; letter-spacing: -.04em; margin-top: 0; }
.fp-hero-sub { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.025em; color: var(--fp-muted); }
.fp-hero--ticket .fp-lead { margin-top: 18px; }
.fp-hero--ticket .fp-actions .btn-outline .svgicon { margin-right: 8px; }
/* Vier Merkmale unter den Buttons */
/* Ticketing-Hero: Zahlungsanbieter als Logo-Kacheln (Martin 08.10.2026) */
.fp-hero-pay { margin: 34px 0 0; max-width: 560px; }
.fp .fp-hero-pay-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--fp-muted); }
.fp-hero-pay-head b { display: block; font-size: 15px; color: var(--fp-ink); }
.fp-hero-pay-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fp-hero-pay-logos li { display: grid; place-items: center; height: 64px; border-radius: 14px; border: 1px solid var(--fp-line); background: var(--ds-color-white); box-shadow: 0 1px 2px rgba(20, 16, 40, .05); }
.fp-hero-pay-logos img { width: auto; height: 26px; max-width: 70%; }
.fp .fp-hero-pay-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fp-muted); }
[data-theme="dark"] .fp-hero-pay-logos li { background: var(--ds-color-night-900); border-color: var(--ds-color-night-700); }
[data-theme="dark"] .fp-hero-pay-logos img { filter: brightness(0) invert(1); }
/* Ticketing: Zahlarten je Anbieter unter der Bezahl-Ansicht */
.fp-paygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.fp-paygrid > div { padding: 22px 22px 20px; border-radius: 16px; border: 1px solid var(--fp-line); background: var(--ds-color-white); }
.fp-paygrid img { display: block; width: auto; height: 26px; }
.fp .fp-paygrid p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--fp-muted); }
.fp .fp-paygrid-cap { margin: 18px 0 0; max-width: 820px; font-size: 14.5px; line-height: 1.6; color: var(--fp-muted); }
.fp-paygrid-cap b { color: var(--fp-ink); }
@media (max-width: 760px) { .fp-paygrid { grid-template-columns: minmax(0, 1fr); } }
[data-theme="dark"] .fp-paygrid > div { background: var(--ds-color-night-900); border-color: var(--ds-color-night-700); }
[data-theme="dark"] .fp-paygrid img { filter: brightness(0) invert(1); }
/* Das Ticket im Telefon */
.fp-tkscreen { background: #0F1117; display: flex; flex-direction: column; padding: 44px 14px 16px; }
.fp-tkbar { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 11px; font-family: var(--font-micro); padding: 0 4px 12px; }
.fp-tkbar b { color: #fff; font-size: 13px; }
.fp-tkbar .svgicon { color: rgba(255,255,255,.7); }
.fp-tk { border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.fp-tk-head { padding: 14px 16px 12px; background: linear-gradient(135deg, var(--fp-accent), #9A5BF0); color: #fff; }
.fp-tk-meta { display: flex; justify-content: space-between; font-size: 9.5px; font-family: var(--font-micro); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fp-tk-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 3px; }
.fp-tk-title b { font-size: 14.5px; font-weight: 700; }
.fp-tk-title span { font-size: 12px; font-weight: 600; }
.fp-tk-claim { margin: 6px 0 0; font-size: 10.5px; font-family: var(--font-micro); opacity: .8; }
/* Perforation: Kerben links und rechts, dazwischen die Reißlinie */
.fp-tk-perf { position: relative; height: 14px; background: #fff; }
.fp-tk-perf::before, .fp-tk-perf::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #0F1117; transform: translateY(-50%); }
.fp-tk-perf::before { left: -8px; } .fp-tk-perf::after { right: -8px; }
.fp-tk-perf i { position: absolute; left: 14px; right: 14px; top: 50%; border-top: 1px dashed #D8D5E4; }
.fp-tk-body { padding: 4px 16px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; font-size: 11.5px; font-family: var(--font-micro); }
.fp-tk-body small { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-faint); margin-bottom: 1px; }
.fp-tk-body b { font-weight: 600; color: var(--fp-ink); }
.fp-tk-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 16px; font-size: 11px; color: var(--fp-muted); }
.fp-tk-qr .fp-qr { width: 118px; height: 118px; }
.fp-tk-wallet { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: 12px; font-family: var(--font-micro); }
.fp-tk-wallet b { flex: 1; font-weight: 600; }
.fp-tk-wallet .svgicon { color: #fff; opacity: .9; }
/* Zusätze in den Erklärkarten */
.fp-tk-badges { display: inline-flex; gap: 6px; margin-top: 8px; }
.fp-tk-badges em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10px; font-family: var(--font-micro); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-muted); }
.fp-tk-badges .svgicon { color: var(--fp-ink); }
.fp-tk-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.fp-tk-check em { font-style: normal; font-size: 10px; font-family: var(--font-micro); color: var(--fp-faint); }
[data-theme="dark"] .fp-hero-crowd img { opacity: .22; }
[data-theme="dark"] .fp-hero-wave img { opacity: .18; }
[data-theme="dark"] .fp-tk-badges em { background: #1B1D24; border-color: #2A2D38; }
@media (max-width: 1039px) { .fp-hero-crowd { width: 100%; right: 0; } }
/* Mailadresse im FAQ-Kasten darf schmal umbrechen (sonst bestimmt sie die Spaltenbreite) */
.fp-faq-grid > div:first-child::after { overflow-wrap: anywhere; }
/* Pruefhinweis als Inline-Block: nicht breiter als die Zeile */
.fx-verify { max-width: 100%; }

/* ---------- Hintergrund/Wissen nuechtern (Oktober 2026) ----------
   Einheitlich mit den Loesungsseiten (.sda-seo, Vorbild Festzelt-Software):
   Seitenspalte ohne Karte, Inhaltsverzeichnis als Liste mit Trennlinien und
   Mono-Nummern, Abschnitte mit Linie statt Zaehler, Zitat als Linie ohne Box,
   Schritte als einfache Liste, Fakten ohne Karten. Gleiche Regeln in
   feature-page.css (.fp-seo) und solution-page.css (.sp-editorial). */
.fp-seo { background: #fff; border-top: 1px solid var(--fp-line); }
@media (min-width: 980px) { .fp-seo .fp-seo-grid { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); } .fp-seo .fp-seo-aside { top: calc(var(--nav-h, 76px) + 32px); } }
.fp-seo .fp-seo-aside { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fp-seo .fp-seo-aside h2 { margin: 14px 0; font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.08; letter-spacing: -.03em; }
.fp-seo .fp-seo-aside h2::after { content: none; }
.fp-seo .fp-seo-aside > p, .fp-seo .fp-seo-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--fp-muted); }
.fp-seo .fp-seo-nav { display: block; list-style: none; margin: 0; padding: 0; }
.fp-seo .fp-seo-nav a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fp-line); border-radius: 0; background: none; box-shadow: none; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--fp-ink); text-decoration: none; }
.fp-seo .fp-seo-nav li:last-child a { border-bottom: 1px solid var(--fp-line); }
.fp-seo .fp-seo-nav a:hover, .fp-seo .fp-seo-nav a.is-active { background: none; box-shadow: none; color: var(--fp-accent); }
.fp-seo .fp-seo-nav em, .fp-seo .fp-seo-nav a.is-active em { display: inline; width: auto; height: auto; padding-top: 2px; border: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--font-micro); font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--fp-accent); }
.fp-seo .fp-seo-cta { margin-top: 28px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--fp-line); border-radius: 0; background: none; }
.fp-seo .fp-seo-cta-ic { display: none; }
.fp-seo .fp-seo-body { max-width: 68ch; }
.fp-seo .fp-seo-body > div::before, .fp-seo .fp-seo-body > div::after { content: none; }
.fp-seo .fp-seo-body > div + div { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--fp-line); }
.fp-seo .fp-seo-body h2 { margin: 0 0 18px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.025em; }
.fp-seo .fp-seo-body h3 { margin: 30px 0 12px; font-size: 20px; }
.fp-seo .fp-seo-body p, .fp-seo .fp-seo-body li, .fp-seo .fp-seo-body > div:first-child > p:first-of-type { max-width: none; font-size: 16px; line-height: 1.75; color: var(--fp-muted); }
.fp-seo .fp-seo-body p { margin: 0 0 16px; }
.fp-seo .fp-seo-body p + p { margin-top: 0; }
.fp-seo .fp-seo-body li b, .fp-seo .fp-seo-body p b { color: var(--fp-ink); }
.fp-seo .fp-seo-body .fp-pull { position: static; margin: 28px 0; padding: 0 0 0 22px; border: 0; border-left: 2px solid var(--fp-accent); border-radius: 0; background: none; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: var(--fp-ink); }
.fp-seo .fp-seo-body .fp-pull::before { content: none; }
.fp-seo .fp-seo-body ol { list-style: decimal; counter-reset: none; margin: 0 0 16px; padding-left: 20px; max-width: none; }
.fp-seo .fp-seo-body ol li { padding: 0; border: 0; margin: 0 0 8px; }
.fp-seo .fp-seo-body ol li::before { content: none; }
.fp-seo .fp-seo-body ol li::marker { color: var(--fp-accent); font-weight: 600; }
.fp-seo .fp-seo-body ul { margin: 0 0 16px; padding-left: 20px; }
.fp-seo .fp-keyfacts { gap: 24px; margin: 28px 0; }
.fp-seo .fp-keyfacts div { padding: 16px 0 0; border: 0; border-top: 1px solid var(--fp-line); border-radius: 0; background: none; box-shadow: none; }
.fp-seo .fp-keyfacts div::before { content: none; }
.fp-seo .fp-keyfacts b { font-size: 28px; color: var(--fp-ink); }
@media (max-width: 979px) { .fp-seo .fp-seo-aside { position: static; } }
[data-theme="dark"] .fp-seo { background: #14161D; }
[data-theme="dark"] .fp-seo .fp-seo-aside, [data-theme="dark"] .fp-seo .fp-seo-nav em, [data-theme="dark"] .fp-seo .fp-seo-nav a.is-active, [data-theme="dark"] .fp-seo .fp-seo-cta, [data-theme="dark"] .fp-seo .fp-seo-body .fp-pull, [data-theme="dark"] .fp-seo .fp-keyfacts div { background: none; }
/* Wissensblock: Ueberschrift der Seitenspalte und erste Ueberschrift rechts auf einer Hoehe
   (Eyebrow 16 px + 14 px Abstand = 30 px Vorlauf rechts) */
@media (min-width: 980px) {
  .fp-seo .fp-seo-aside > .fp-eyebrow { display: block; margin: 0 0 14px; line-height: 16px; }
  .fp-seo .fp-seo-aside h2 { margin-top: 0; }
  .fp-seo .fp-seo-body { padding-top: 30px; }
}

/* ---------- FAQ nuechtern (Oktober 2026), angelehnt an den Wissensblock ----------
   Seitenspalte ohne Kasten, Fragen als Liste mit Trennlinien statt Karten,
   Plus in der Markenfarbe statt Kreis und Pfeil, offene Frage ohne Flaeche. */
.fp .fp-faq, .fp-faq { background: #fff; border-top: 1px solid var(--fp-line); }
@media (min-width: 980px) { .fp-faq-grid { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); } .fp-faq-grid > div:first-child { top: calc(var(--nav-h, 76px) + 32px); } }
.fp-faq-grid > div:first-child { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fp-faq-grid > div:first-child > :first-child { display: flex; margin: 0 0 14px; line-height: 16px; }
.fp-faq-grid > div:first-child h2 { margin: 0; font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.08; letter-spacing: -.03em; }
.fp-faq-grid > div:first-child h2::after { content: none; }
.fp-faq-grid > div:first-child::after { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--fp-muted); }
.fp-faq-grid > div:last-child { display: block; }
.fp-faq details, .fp-faq details:hover, .fp-faq details[open] { border: 0; border-top: 1px solid var(--fp-line); border-radius: 0; background: none; box-shadow: none; }
.fp-faq details:last-child { border-bottom: 1px solid var(--fp-line); }
.fp-faq summary, .fp-faq details[open] summary { min-height: 0; padding: 20px 0; font-size: 18px; line-height: 1.35; color: var(--fp-ink); }
.fp-faq summary::before, .fp-faq details[open] summary::before { content: none; display: none; }
.fp-faq summary::after, .fp-faq details[open] summary::after { content: "+"; width: auto; height: auto; margin: 0; border: 0; flex: none; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1; color: var(--fp-accent); transform: none; transition: transform .2s; }
.fp-faq details[open] summary::after { transform: rotate(45deg); }
.fp-faq summary:hover { color: var(--fp-accent); }
.fp-faq summary:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 4px; border-radius: 4px; }
.fp-faq-a { max-width: 68ch; padding: 0 40px 22px 0; font-size: 16px; line-height: 1.75; color: var(--fp-muted); }
@media (max-width: 640px) { .fp-faq summary, .fp-faq details[open] summary { padding: 18px 0; font-size: 16.5px; } .fp-faq-a { padding: 0 0 20px; } }
[data-theme="dark"] .fp .fp-faq { background: #14161D; }
[data-theme="dark"] .fp-faq-grid > div:first-child, [data-theme="dark"] .fp-faq details, [data-theme="dark"] .fp-faq details[open] { background: none; }

/* ---------- Leaderfassung (Oktober 2026): Modifikatoren fuer bestehende Bausteine ---------- */
/* Rollenmatrix mit vier Rollen */
.fp-roles--4 > div { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.fp-roles small { font-size: 11px; font-family: var(--font-micro); color: var(--fp-muted); }
@media (max-width: 560px) { .fp-roles--4 > div { padding: 10px 12px; gap: 4px; } .fp-roles--4 .fp-roles-head { font-size: 9px; } }
/* Inhalt unter dem Kopf der nachgebauten Handy-App */
.fp-m-body { display: flex; flex-direction: column; gap: 8px; margin: 10px 12px 0; }
.fp-m-body .fp-scan { height: 104px; }
.fp-m-body .fp-scan-ok { margin: 0; }
.fp-m-body .fp-m-chips { padding: 0; }
.fp-m-body .fp-note { padding: 8px 10px; font-size: 11.5px; }
/* Callout-Position ueber Custom Properties statt Einzelstilen (neue Seiten) */
@media (min-width: 900px) { .fp-callout { left: var(--cl, auto); right: var(--cr, auto); top: var(--ct, auto); bottom: var(--cb, auto); } }
/* Lange H1 (Zielbegriff mit Kompositum): kleinere Display-Stufe, damit nichts mitten im Wort bricht */
.fp-hero h1.fp-h1--long { font-size: clamp(36px, 4.4vw, 62px); }
.fp-hero h1.fp-h1--long span { font-size: .62em; }
/* Handy-Nachbau mittig in seiner Spalte */
.fp-stage--center { display: flex; justify-content: center; }
.ds-flow ~ .fp-body { margin-top: 24px; max-width: none; font-size: 15px; }
/* Schmale Handys (320 px): Hero-Raster einspaltig ohne Mindestbreite, Handy-Nachbau passt sich an
   (vorher ragte der 320 px breite Nachbau 20 px ueber den Rand, auf allen Funktionsseiten) */
@media (max-width: 1039px) { .fp-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 399px) { .fp-mobile { width: 100%; max-width: 320px; } }
/* Gegenueberstellung im Dunkelmodus: Akzent-Karten und ihre Zeilen auf dunklem Grund */
[data-theme="dark"] .fp-vs > div.is-acc { background: linear-gradient(180deg, rgba(117,49,174,.16), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .fp-vs .is-acc li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--fp-ink); }

/* ---------- Leaderfassung: Scan-Bildschirm und Lead-Formular wie in der ScanMyLead-App ---------- */
/* Grosses Kamerafenster mit Suchrahmen */
.fp-scan.fp-scan--xl, .fp-m-body .fp-scan--xl { height: 330px; margin: 0; border-radius: 18px; background-size: auto 132px; }
.fp-scan--xl::before { inset: 70px 52px; border: 0; border-radius: 16px;
  background:
    linear-gradient(#fff, #fff) left top / 26px 3px no-repeat, linear-gradient(#fff, #fff) left top / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) right top / 26px 3px no-repeat, linear-gradient(#fff, #fff) right top / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 26px 3px no-repeat, linear-gradient(#fff, #fff) left bottom / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 26px 3px no-repeat, linear-gradient(#fff, #fff) right bottom / 3px 26px no-repeat; }
.fp-scan--xl i { left: 64px; right: 64px; top: 82px; animation-name: fpScanXl; }
@keyframes fpScanXl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(162px); } }
@media (prefers-reduced-motion: reduce) { .fp-scan--xl i { animation: none; transform: translateY(81px); } }
.fp-scan-tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; white-space: nowrap; }
.fp-scan-torch { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.fp-m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-m-actions .fp-btn { justify-content: center; }
@media (max-width: 399px) { .fp-m-body .fp-scan--xl { height: 260px; } .fp-scan--xl::before { inset: 50px 36px; } .fp-scan--xl i { left: 48px; right: 48px; top: 62px; animation-name: fpScan; } }
/* Lead-Formular (Vorschau mobil) */
.fp-lf { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.fp-lf-eyebrow { font-size: 9.5px; font-family: var(--font-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-faint); }
.fp-lf-auto { padding: 9px 11px; border-radius: 10px; border: 1px solid #F1B46A; background: #FFF6EA; color: #6B4510; }
.fp-lf-auto b { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #B4690E; }
.fp-lf-label { font-weight: 700; color: var(--fp-ink); }
.fp-lf-field { min-height: 46px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--fp-line); color: var(--fp-muted); background: #fff; }
.fp-lf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-lf-chips span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); font-size: 11px; }
.fp-lf-chips span.is-on { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-lf .fp-btn--p { justify-content: center; padding: 10px; }
[data-theme="dark"] .fp-lf-auto { background: rgba(241,180,106,.12); border-color: rgba(241,180,106,.4); color: #F5D2A3; }
[data-theme="dark"] .fp-lf-field, [data-theme="dark"] .fp-lf-chips span { background: #1B1D24; }
.fp-bar i[style*="--w"] { width: var(--w); background: var(--fp-accent); }
.fp-card--pad { padding: 12px 16px; }
.fp-card--pad .fp-log { margin-top: 0; }

/* Bildnachweis am Seitenende (sp_credit_notice): nur bei Creative-Commons-Bildern */
.sp-credit-notice { margin: 8px 0 40px; font-size: 12px; line-height: 1.6; color: var(--text-muted, #686F7A); }
.sp-credit-notice span { font-weight: 600; }
.sp-credit-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Kurzanleitungen je KI-Assistent (/funktionen/ki-anbindung/): Karten nach Design System, Logo, Badge,
   nummerierte Schritte (01, 02). Vier Spalten ab 981 px, zwei ab 561 px. */
.fp-clients { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); }
@media (min-width: 561px) { .fp-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .fp-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-client { display: flex; flex-direction: column; gap: var(--ds-space-5); padding: var(--ds-space-6); border: 1px solid var(--ds-border-card); border-radius: var(--ds-radius-card); background: var(--ds-surface-default); }
.fp-client-head { display: flex; align-items: center; gap: var(--ds-space-3); }
.fp-client-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--ds-radius-md); background: var(--ds-surface-subtle); color: var(--ds-text-primary); }
.fp .fp-client h3 { margin: 0; font-size: var(--ds-font-size-md); line-height: 1.3; }
.fp-client-head .ds-badge { margin-top: var(--ds-space-1); }
.fp-client ol { display: grid; gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; counter-reset: fpclient; }
/* Schrittnummer wie die Abschnittsnummern der Eyebrows (01, 02 …): Monospace, gedaempft */
.fp-client li { counter-increment: fpclient; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--ds-space-2); color: var(--ds-text-secondary); font-size: var(--ds-font-size-sm); line-height: 1.5; }
.fp-client li::before { content: counter(fpclient, decimal-leading-zero); padding-top: 3px; color: var(--fp-faint); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: var(--ds-type-eyebrow-tracking); }

/* ---------- Airstage-Builder (Event-Webseiten, Hero) — Nachbau nach airlst.test, 07.10.2026 ----------
   Markup: funktionen/_tpl/airstage-builder.php. Spalten: Seiten | Module | Leinwand | Module settings.
   Animation in 10 s: Modul „Gallery“ hebt sich in der Modulspalte, fliegt zwischen Steps und Agenda,
   erscheint dort mit Label-Tab. */
.fp-frame--asb .fp-head { flex-wrap: wrap; row-gap: 8px; }
.fp-asb-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--fp-line); border-radius: 9px; background: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--fp-muted); }
.fp-asb-seg > * { padding: 4px 7px; border-radius: 6px; }
.fp-asb-seg b { background: var(--fp-soft); color: var(--fp-ink); }
.fp-asb-tools { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--fp-line); border-radius: 9px; color: var(--fp-muted); background: #fff; }
.fp-asb-tools small { font-size: 9px; margin-left: -4px; }
.fp-asb-dev { gap: 2px; padding: 3px; }
.fp-asb-dev i { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; }
.fp-asb-dev i.is-on { background: var(--fp-soft); color: var(--fp-ink); }
.fp-asb-gear { border-color: transparent; background: none; }
.fp-frame--asb .fp-chip .svgicon { margin-right: 5px; }

.fp-asb { position: relative; display: grid; grid-template-columns: 108px 176px minmax(0, 1fr) 200px; gap: 0; height: 620px; --gx0: 132px; --gy0: 522px; --gx1: 520px; --gy1: 196px; }
.fp-asb > aside { min-height: 0; overflow: hidden; padding: 0 10px 12px; border-right: 1px solid var(--fp-line); background: #fff; }
.fp-asb-h { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 2px; margin-bottom: 4px; color: var(--fp-muted); }
.fp-asb-h b { flex: 1; font-size: 12.5px; color: var(--fp-ink); }
.fp-asb-pages { display: flex; flex-direction: column; gap: 6px; }
.fp-asb-pages > span { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--fp-line); border-radius: 8px; font-size: 11px; font-weight: 500; color: var(--fp-ink); }
.fp-asb-pages > span i { margin-left: auto; display: inline-flex; }
.fp-asb-pages > span.is-on { border-color: var(--fp-accent); background: var(--fp-accent-soft); color: var(--fp-accent); font-weight: 600; }
.fp-asb-mods { display: flex; flex-direction: column; gap: 5px; }
.fp-asb-mods small { margin: 4px 2px 1px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--fp-faint); }
.fp-asb-mod { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 7px; align-items: center; padding: 6px 7px; border: 1px solid var(--fp-line); border-radius: 8px; background: #fff; }
.fp-asb-mod b { font-size: 10.5px; color: var(--fp-ink); line-height: 1.2; }
.fp-asb-mod em { grid-column: 2; font-style: normal; font-size: 9px; line-height: 1.3; color: var(--fp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-asb-mod .th { grid-row: span 2; }
/* Miniaturen der Module, gezeichnet */
.th { display: block; width: 34px; height: 24px; border-radius: 4px; background: #EAF0F9; position: relative; overflow: hidden; }
.th::before, .th::after { content: ""; position: absolute; border-radius: 1px; }
.th--hd::before { left: 4px; right: 4px; top: 9px; height: 4px; background: linear-gradient(90deg, #2A2A2A 30%, transparent 30% 60%, #B7C4D8 60%); }
.th--ft::before { left: 4px; right: 4px; bottom: 4px; height: 3px; background: #B7C4D8; }
.th--hero::before { inset: 3px; background: linear-gradient(90deg, #1F5FD1 0 40%, transparent 40%) 0 4px / 100% 3px no-repeat, linear-gradient(#2A2A2A, #2A2A2A) 0 10px / 60% 2px no-repeat, linear-gradient(#9DB8E0, #5A7BB0) 70% 0 / 30% 100% no-repeat; }
.th--txt::before { inset: 5px 4px; background: repeating-linear-gradient(#B7C4D8 0 2px, transparent 2px 4px); }
.th--ico::before { inset: 7px 3px; background: radial-gradient(circle, #1F5FD1 2px, transparent 2.5px) 0 0 / 9px 10px; }
.th--steps::before { inset: 6px 3px; background: linear-gradient(90deg, #B7C4D8 0 30%, transparent 30%) 0 0 / 100% 2px no-repeat, linear-gradient(90deg, #4A6390 0 22%, transparent 22% 26%) 12px 0 / 9px 100% repeat-x; }
.th--ag::before { inset: 4px; background: repeating-linear-gradient(#fff 0 3px, transparent 3px 5px), linear-gradient(90deg, #1F5FD1 0 20%, transparent 20% 30%, #B7C4D8 30%); }
.th--sp::before { inset: 4px 3px; background: radial-gradient(circle at 50% 35%, #6E8CC0 3px, transparent 3.5px) 0 0 / 9px 100%, linear-gradient(transparent 60%, #B7C4D8 60% 70%, transparent 70%) 0 0 / 9px 100%; }
.th--gal::before { inset: 4px 3px; background: linear-gradient(90deg, #2E4A7A 0 30%, transparent 30% 35%, #5F86C2 35% 65%, transparent 65% 70%, #3D5F99 70%); border-radius: 2px; }
.th--map::before { inset: 3px; background: linear-gradient(135deg, #DDE8D5 25%, #EDE4D3 25% 50%, #DDE8D5 50% 75%, #EDE4D3 75%) 0 0 / 8px 8px; }
.th--map::after { left: 15px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #1F5FD1; }
.th--cd::before { left: 6px; right: 6px; top: 9px; height: 6px; background: repeating-linear-gradient(90deg, #2A2A2A 0 4px, transparent 4px 6px); }
.th--form::before { inset: 4px 6px; background: repeating-linear-gradient(#fff 0 3px, #D3DEEC 3px 5px, transparent 5px 7px); }
.th--form::after { left: 6px; bottom: 3px; width: 10px; height: 3px; background: #1F5FD1; }
.th--gal { background: #EAF0F9; }

.fp-asb-canvas { position: relative; min-width: 0; overflow: hidden; padding: 16px 16px 0; background: linear-gradient(180deg, #EFE6FB, #F6F2FC); }
.fp-asb-site { background: #F4F8FD; color: #14213D; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 14px 36px -22px rgba(40,20,70,.45); }
.fp-asb-m { position: relative; margin: 0; padding: 26px 22px 18px; outline: 1px solid transparent; }
.fp-asb-tab { position: absolute; left: 6px; top: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid #DCD5E8; border-radius: 4px; background: #fff; font-family: var(--font-body, system-ui), sans-serif; font-size: 8px; letter-spacing: .08em; color: #8A8396; }
.fp-asb-tab b { color: #14213D; font-size: 8px; }
.fp-asb-tab em { font-style: normal; padding: 1px 4px; border-radius: 3px; background: #ECE8F2; color: #6B6478; }
.fp-asb-tab .svgicon { color: #9C95A8; }
.fp-asb-m.is-hidden { outline: 1px dashed #CFC6DD; outline-offset: -4px; }
.fp-asb-m.is-hidden > :not(.fp-asb-tab) { opacity: .38; filter: grayscale(.6); }
.fp-asb-m.is-sel { outline: 2px solid var(--fp-accent); outline-offset: -2px; }
.fp-asb-m.is-sel .fp-asb-tab { border-color: var(--fp-accent); }
.fp-asb-steps { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 8px; align-items: center; }
.fp-asb-steps b { display: block; font-size: 18px; font-weight: 400; }
.fp-asb-steps p { margin: 4px 0 0; font-size: 9.5px; color: #5A6B85; }
.fp-asb-steps figure { margin: 0; }
.fp-asb-steps i { display: block; height: 46px; border-radius: 4px; background: var(--img) center / cover; }
.fp-asb-steps figcaption { margin-top: 4px; font-size: 7.5px; color: #6B7A90; font-family: system-ui, sans-serif; }
.fp-asb-agenda > b { display: block; margin-bottom: 8px; font-size: 21px; font-weight: 400; }
.fp-asb-row { display: grid; grid-template-columns: 54px 1fr; padding: 8px 0; border-bottom: 1px solid #DCE6F3; }
.fp-asb-row time { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 700; color: #1F5FD1; }
.fp-asb-row span { font-size: 10px; color: #5A6B85; font-family: system-ui, sans-serif; }
.fp-asb-row span b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 12.5px; color: #14213D; }
.fp-asb-drop { height: 0; margin: 0 22px; border-radius: 3px; background: var(--fp-accent); box-shadow: 0 0 0 4px rgba(117,49,174,.15); opacity: 0; }
.fp-asb-gal { overflow: hidden; outline: 1px solid var(--fp-accent); outline-offset: -1px; }
.fp-asb-galrow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; }
.fp-asb-galrow i { display: block; height: 70px; border-radius: 4px; background: var(--img) center / cover; }

.fp-asb-set { border-right: 0 !important; border-left: 1px solid var(--fp-line); display: flex; flex-direction: column; gap: 4px; }
.fp-asb-pill { flex: 0 1 auto !important; padding: 1px 6px; border-radius: 5px; background: var(--fp-accent-soft); color: var(--fp-accent); font-size: 8.5px; font-weight: 600; white-space: nowrap; }
.fp-asb-x { margin-left: auto; font-style: normal; font-size: 13px; color: var(--fp-faint); }
.fp-asb-set label { display: flex; align-items: center; font-size: 8px; font-weight: 700; letter-spacing: .06em; color: var(--fp-muted); margin-top: 3px; }
.fp-asb-set label.is-top { font-size: 10px; letter-spacing: 0; font-weight: 600; color: var(--fp-ink); margin-top: 8px; }
.fp-asb-set label em { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; padding: 1px 5px; border: 1px solid var(--fp-line); border-radius: 4px; font-style: normal; font-size: 8px; font-weight: 500; color: var(--fp-muted); }
.fp-asb-in { display: block; min-height: 24px; padding: 5px 8px; border: 1px solid var(--fp-line); border-radius: 6px; background: #fff; font-size: 10.5px; color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-asb-sw { display: flex; gap: 4px; flex-wrap: wrap; }
.fp-asb-sw i { width: 15px; height: 15px; border-radius: 4px; background: var(--c, #fff); border: 1px solid rgba(0,0,0,.08); }
.fp-asb-sw i.is-off { background: linear-gradient(135deg, #fff 45%, #C0392B 45% 55%, #fff 55%); }
.fp-asb-sw i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--fp-accent); }
.fp-asb-rep { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px; border-radius: 8px; background: var(--fp-soft2, #F7F8FA); }
.fp-asb-rep.is-next { opacity: .75; }

.fp-asb-ghost { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border: 1px solid var(--fp-accent); border-radius: 8px; background: #fff; color: var(--fp-ink); font-size: 11px; font-weight: 600; box-shadow: 0 16px 32px -10px rgba(84,28,126,.45); pointer-events: none; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fp-asb-mod.is-drag { animation: fpAsbTile 10s ease-in-out infinite; }
  .fp-asb-ghost { animation: fpAsbGhost 10s cubic-bezier(.45,.05,.3,1) infinite; }
  .fp-asb-drop { animation: fpAsbDrop 10s ease-in-out infinite; }
  .fp-asb-gal { animation: fpAsbGal 10s ease-in-out infinite; }
}
@keyframes fpAsbTile { 0%, 8% { transform: none; box-shadow: none; } 13%, 18% { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px -8px rgba(84,28,126,.45); border-color: var(--fp-accent); } 22%, 100% { transform: none; box-shadow: none; } }
@keyframes fpAsbGhost { 0%, 14% { opacity: 0; left: var(--gx0); top: var(--gy0); transform: rotate(-3deg); } 18% { opacity: 1; left: var(--gx0); top: var(--gy0); transform: rotate(-3deg); } 34% { opacity: 1; left: var(--gx1); top: var(--gy1); transform: rotate(2deg); } 38%, 100% { opacity: 0; left: var(--gx1); top: var(--gy1); transform: none; } }
@keyframes fpAsbDrop { 0%, 22% { height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; } 26%, 36% { height: 3px; opacity: 1; margin-top: 6px; margin-bottom: 6px; } 40%, 100% { height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; } }
@keyframes fpAsbGal { 0%, 36% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } 44%, 92% { max-height: 140px; padding-top: 26px; padding-bottom: 18px; opacity: 1; } 100% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } }

[data-theme="dark"] .fp-asb > aside, [data-theme="dark"] .fp-asb-mod, [data-theme="dark"] .fp-asb-in, [data-theme="dark"] .fp-asb-tools, [data-theme="dark"] .fp-asb-seg, [data-theme="dark"] .fp-asb-ghost { background: #1B1D24; border-color: #2A2D38; }
[data-theme="dark"] .fp-asb-pages > span.is-on { background: #2A1740; border-color: #7531AE; color: #C9AEF6; }
[data-theme="dark"] .fp-asb-rep { background: #22252E; }
[data-theme="dark"] .fp-asb-canvas { background: linear-gradient(180deg, #221C33, #1B1626); }

/* Rundgang der Startseite (fp_airstage_builder(['tour' => true])): Startseite des Brand Summit mit Header,
   Hero im blauen Bild und Galerie; fester Zustand, Höhe aus dem Fenster des Rundgangs */
.fp-asb.fp-asb--tour { grid-template-columns: 120px 184px minmax(0, 1fr) 216px; height: 100%; min-height: 680px; }
@media (max-width: 1240px) { .fp-asb.fp-asb--tour { grid-template-columns: 184px minmax(0, 1fr) 216px; } .fp-asb--tour .fp-asb-pages { display: none; } }
@media (max-width: 980px) {
  .fp-asb.fp-asb--tour { grid-template-columns: minmax(0, 1fr); height: 560px; min-height: 0; }
  .fp-asb--tour > aside { display: none; }
}
/* Leiste über der Leinwand: wird sie zu schmal, fallen Sprachen und KI-Menü weg, der Eventname bleibt lesbar */
.fp-asb--tour .fp-asb-work { container-type: inline-size; }
@container (max-width: 640px) { .fp-asb--tour .fp-asb-top .fp-asb-seg, .fp-asb--tour .fp-asb-top .fp-asb-tools:has(use[href="#ic-sparkle"]) { display: none; } }
.fp-asb-hd { display: flex; align-items: center; gap: 16px; padding: 24px 22px 12px; font-family: system-ui, -apple-system, sans-serif; font-size: 10.5px; color: #4A5872; }
.fp-asb-hd > b { margin-right: auto; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 400; color: #14213D; }
.fp-asb-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 30px 34px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(12,28,74,.5), rgba(12,28,74,.72)), var(--img) center / cover; }
.fp-asb-hero small { font-family: system-ui, sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; }
.fp-asb-hero > b { font-size: 26px; font-weight: 400; line-height: 1.15; }
.fp-asb-hero p { margin: 0; max-width: 380px; font-family: system-ui, sans-serif; font-size: 10.5px; color: rgba(255,255,255,.85); }
.fp-asb-hero em { margin-top: 6px; padding: 7px 14px; border-radius: 4px; background: #1F5FD1; font-family: system-ui, sans-serif; font-size: 10px; font-style: normal; font-weight: 600; }

@media (max-width: 1100px) { .fp-asb { grid-template-columns: 170px minmax(0, 1fr); --gx0: 24px; --gx1: 400px; --gy1: 167px; } .fp-asb-pages, .fp-asb-set { display: none; } }
@media (max-width: 760px) {
  .fp-asb { grid-template-columns: minmax(0, 1fr); height: 440px; }
  .fp-asb-mods, .fp-asb-ghost, .fp-frame--asb .fp-asb-tools, .fp-frame--asb .fp-asb-seg, .fp-frame--asb .fp-chip { display: none; }
  .fp-asb-canvas { padding: 10px 10px 0; }
  .fp-asb-steps { grid-template-columns: repeat(2, 1fr); }
  .fp-asb-steps > div { grid-column: 1 / -1; }
}

/* ---------- Event-Website aus Airstage-Modulen (Abschnitt „Vorschau“), Desktop + Handy ---------- */
.fp-ass { position: relative; padding: 18px 200px 18px 18px; border-radius: 12px; background: linear-gradient(180deg, #EFE6FB, #F6F2FC); font-family: system-ui, -apple-system, sans-serif; color: #14213D; }
.fp-ass-desk { border-radius: 8px; overflow: hidden; background: #F4F8FD; box-shadow: 0 18px 40px -24px rgba(40,20,70,.5); }
.fp-ass-nav { display: flex; align-items: center; gap: 18px; padding: 12px 22px; font-size: 11px; color: #4A5872; }
.fp-ass-nav b { margin-right: auto; font-family: Georgia, serif; font-size: 14px; font-weight: 400; color: #14213D; }
.fp-ass-nav em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 7px; border: 1px solid #D3DEEC; border-radius: 4px; }
.fp-ass-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 54px 34px 30px; color: #fff; background: linear-gradient(90deg, rgba(10,20,45,.82) 0%, rgba(10,20,45,.5) 55%, rgba(10,20,45,.2)), var(--img) center 30% / cover; }
.fp-ass-hero small { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: #BFD4F6; }
.fp-ass-hero b { font-family: Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.01em; }
.fp-ass-hero p { margin: 0; max-width: 440px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.86); }
.fp-ass-cta { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.fp-ass-cta > em { padding: 9px 16px; background: #1F5FD1; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; }
.fp-ass-cd { display: flex; gap: 6px; }
.fp-ass-cd i { display: flex; flex-direction: column; align-items: center; min-width: 40px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.35); font-style: normal; font-size: 8.5px; color: rgba(255,255,255,.8); }
.fp-ass-cd b { font-family: Georgia, serif; font-size: 16px; font-weight: 400; color: #fff; }
.fp-ass-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #DCE6F3; border-bottom: 1px solid #DCE6F3; }
.fp-ass-icons > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 16px 20px; background: #F4F8FD; }
.fp-ass-icons i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #E3EDFC; color: #1F5FD1; }
.fp-ass-icons b { font-family: Georgia, serif; font-weight: 400; font-size: 14px; }
.fp-ass-icons span { font-size: 10.5px; color: #5A6B85; }
.fp-ass-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; padding: 24px 28px; }
.fp-ass-h { display: block; margin-bottom: 8px; font-family: Georgia, serif; font-weight: 400; font-size: 20px; }
.fp-ass-row { display: grid; grid-template-columns: 50px 1fr; padding: 7px 0; border-bottom: 1px solid #DCE6F3; font-size: 12px; }
.fp-ass-row time { font-size: 10.5px; font-weight: 700; color: #1F5FD1; }
.fp-ass-row span { font-family: Georgia, serif; }
.fp-ass-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-content: start; padding: 18px; background: #fff; border: 1px solid #DCE6F3; }
.fp-ass-form .fp-ass-h, .fp-ass-f.is-w, .fp-ass-btn { grid-column: 1 / -1; }
.fp-ass-f { display: flex; flex-direction: column; gap: 3px; }
.fp-ass-f label { font-size: 9.5px; font-weight: 600; color: #4A5872; }
.fp-ass-f > i { font-style: normal; padding: 6px 8px; border: 1px solid #D3DEEC; font-size: 11px; color: #14213D; background: #FAFCFF; }
.fp-ass-rad { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.fp-ass-rad i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #A9B7CC; }
.fp-ass-rad i.is-on { border: 3.5px solid #1F5FD1; }
.fp-ass-rad i + i, .fp-ass-rad i:not(:first-child) { margin-left: 10px; }
.fp-ass-btn { justify-self: start; margin-top: 4px; padding: 8px 14px; background: #14213D; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }
.fp-ass-map { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: center; padding: 0 28px 24px; }
.fp-ass-map span { font-size: 11.5px; color: #4A5872; }
.fp-ass-map > i { height: 92px; background: radial-gradient(circle at 58% 46%, #1F5FD1 5px, rgba(31,95,209,.25) 6px 13px, transparent 14px), linear-gradient(160deg, transparent 47%, #fff 47% 51%, transparent 51%), linear-gradient(40deg, transparent 60%, #FFFFFF 60% 63%, transparent 63%), #E6EBDD; }
.fp-ass-foot { display: flex; justify-content: space-between; padding: 14px 28px; background: #14213D; color: #B9C6DA; font-size: 10.5px; }
.fp-ass-foot b { font-family: Georgia, serif; font-weight: 400; color: #fff; }
.fp-ass-phone { position: absolute; right: 22px; top: 70px; width: 200px; padding: 8px; border-radius: 30px; background: #1C1A22; box-shadow: 0 30px 60px -20px rgba(30,15,60,.55); }
.fp-ass-screen { border-radius: 23px 23px 0 0; overflow: hidden; background: #F4F8FD; }
.fp-ass-phone .fp-ass-nav { padding: 18px 14px 9px; }
.fp-ass-phone .fp-ass-nav b { font-size: 12px; }
.fp-ass-phone .fp-ass-hero { padding: 30px 14px 16px; background-position: 40% 30%; }
.fp-ass-phone .fp-ass-hero b { font-size: 22px; }
.fp-ass-phone .fp-ass-hero p { font-size: 9.5px; }
.fp-ass-phone .fp-ass-cta > em { font-size: 10px; padding: 7px 12px; }
.fp-ass-mob { padding: 14px 14px 18px; background: #F4F8FD; border-radius: 0 0 23px 23px; }
.fp-ass-mob .fp-ass-h { font-size: 15px; }
.fp-ass-mob .fp-ass-row { font-size: 10px; grid-template-columns: 40px 1fr; }
[data-theme="dark"] .fp-ass { background: linear-gradient(180deg, #221C33, #1B1626); }
@media (max-width: 900px) { .fp-ass { padding: 12px; } .fp-ass-phone { display: none; } .fp-ass-two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fp-ass-icons { grid-template-columns: 1fr; } .fp-ass-map { grid-template-columns: 1fr; } .fp-ass-nav span { display: none; } .fp-ass-cd { display: none; } }

/* ---------- Form Builder (Online-Anmeldungen, Hero) — Nachbau nach airlst.test, 07.10.2026 ----------
   Markup: funktionen/_tpl/form-builder.php. Spalten: Feldpalette | Formular | Einstellungen.
   Animation in 10 s: Feld „Auswahlliste“ fliegt ins Formular und erscheint als „Workshop-Runde 1“. */
.fp-frame--fbx .fp-head { flex-wrap: wrap; row-gap: 8px; }
.fp-fbx-dim { font-size: 11.5px; color: var(--fp-muted); margin-right: 4px; }
.fp-fbx { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 236px; height: 620px; --gx0: 14px; --gy0: 344px; --gx1: 300px; --gy1: 472px; }
.fp-fbx > aside { min-height: 0; overflow: hidden; padding: 12px 10px; background: #fff; }
.fp-fbx-pal { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--fp-line); }
.fp-fbx-pal small { margin: 2px 2px 1px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--fp-faint); }
.fp-fbx-pal > span { display: flex; flex-direction: column; padding: 5px 8px; border: 1px solid var(--fp-line); border-radius: 7px; background: #fff; font-size: 9px; color: var(--fp-muted); line-height: 1.3; }
.fp-fbx-pal > span b { font-size: 10.5px; color: var(--fp-ink); }
.fp-fbx-pal p { margin: 4px 2px 0; font-size: 9.5px; color: var(--fp-faint); }
.fp-fbx-canvas { min-width: 0; overflow: hidden; padding: 14px 16px 0; background: var(--fp-soft2, #F7F8FA); }
.fp-fbx-form { min-height: 100%; padding: 26px 15% 20px; background: #F4F8FD; color: #14213D; box-shadow: 0 10px 30px -22px rgba(40,20,70,.4); }
.fp-fbx-title { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; margin-bottom: 14px; }
.fp-fbx-steps { display: flex; align-items: center; gap: 0; }
.fp-fbx-steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #A9B7CC; font-style: normal; font-size: 10px; font-weight: 700; color: #5A6B85; background: #F4F8FD; }
.fp-fbx-steps i.is-on { background: #1F5FD1; border-color: #1F5FD1; color: #fff; box-shadow: 0 0 0 3px rgba(31,95,209,.2); }
.fp-fbx-steps em { flex: 1; height: 1.5px; background: #D3DEEC; }
.fp-fbx-steplab { display: flex; justify-content: space-between; margin: 4px 0 12px; font-size: 9.5px; color: #4A5872; }
.fp-fbx-f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.fp-fbx-f label { font-size: 10px; font-weight: 600; color: #14213D; font-family: system-ui, sans-serif; }
.fp-fbx-f label em { font-style: normal; color: #1F5FD1; }
.fp-fbx-f i { display: flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid #D3DEEC; border-radius: 4px; background: #fff; font-style: normal; font-size: 10.5px; color: #14213D; font-family: system-ui, sans-serif; }
.fp-fbx-f i s { margin-left: auto; text-decoration: none; color: #6B7A90; }
.fp-fbx-cond { position: relative; margin: 2px -6px 9px; padding: 6px 6px 0; border: 1px dashed #CDBEDF; border-radius: 4px; }
.fp-fbx-tag { position: absolute; right: 4px; top: -8px; padding: 1px 6px; border-radius: 4px; background: #EFE6FB; color: #7531AE; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; font-family: system-ui, sans-serif; }
.fp-fbx-group { display: block; margin: 4px 0 8px; font-family: Georgia, serif; font-weight: 400; font-size: 15px; }
.fp-fbx-submit { display: block; margin-top: 6px; padding: 8px; border-radius: 4px; background: #1F5FD1; color: #fff; text-align: center; font-size: 11px; font-weight: 600; font-family: system-ui, sans-serif; }
.fp-fbx-drop { height: 0; border-radius: 3px; background: var(--fp-accent); box-shadow: 0 0 0 4px rgba(117,49,174,.15); opacity: 0; }
.fp-fbx-new { overflow: hidden; outline: 2px solid var(--fp-accent); outline-offset: 2px; border-radius: 3px; }
.fp-fbx-set { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--fp-line); }
.fp-fbx-set label { margin-top: 6px; font-size: 10px; font-weight: 600; color: var(--fp-ink); }
.fp-fbx-in { display: flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid var(--fp-line); border-radius: 6px; background: #fff; font-size: 10.5px; color: var(--fp-ink); }
.fp-fbx-in s { margin-left: auto; text-decoration: none; color: var(--fp-faint); }
.fp-fbx-in.is-area { min-height: 40px; align-items: flex-start; line-height: 1.4; border-top-left-radius: 0; border-top-right-radius: 0; }
.fp-fbx-rt { display: flex; gap: 9px; padding: 4px 8px; border: 1px solid var(--fp-line); border-bottom: 0; border-radius: 6px 6px 0 0; font-size: 9.5px; color: var(--fp-muted); margin-bottom: -3px; }
.fp-fbx-rt i { font-style: normal; font-weight: 700; display: inline-flex; }
.fp-fbx-chk { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; color: var(--fp-ink); }
.fp-fbx-chk i { width: 11px; height: 11px; border: 1.5px solid var(--fp-line); border-radius: 3px; }
.fp-fbx-ghost { position: absolute; z-index: 5; display: flex; flex-direction: column; padding: 6px 10px; border: 1px solid var(--fp-accent); border-radius: 7px; background: #fff; font-size: 9px; color: var(--fp-muted); box-shadow: 0 16px 32px -10px rgba(84,28,126,.45); pointer-events: none; opacity: 0; }
.fp-fbx-ghost b { font-size: 11px; color: var(--fp-ink); }
@media (prefers-reduced-motion: no-preference) {
  .fp-fbx-pal > span.is-drag { animation: fpAsbTile 10s ease-in-out infinite; }
  .fp-fbx-ghost { animation: fpAsbGhost 10s cubic-bezier(.45,.05,.3,1) infinite; }
  .fp-fbx-drop { animation: fpAsbDrop 10s ease-in-out infinite; }
  .fp-fbx-new { animation: fpFbxNew 10s ease-in-out infinite; }
}
@keyframes fpFbxNew { 0%, 36% { max-height: 0; margin-bottom: 0; opacity: 0; outline-color: transparent; } 44% { max-height: 60px; margin-bottom: 9px; opacity: 1; outline-color: var(--fp-accent); } 82% { outline-color: var(--fp-accent); } 88%, 94% { max-height: 60px; margin-bottom: 9px; opacity: 1; outline-color: transparent; } 100% { max-height: 0; margin-bottom: 0; opacity: 0; outline-color: transparent; } }
.fp-fbx-new > .fp-fbx-f { margin-bottom: 0; }
[data-theme="dark"] .fp-fbx > aside, [data-theme="dark"] .fp-fbx-pal > span, [data-theme="dark"] .fp-fbx-in, [data-theme="dark"] .fp-fbx-ghost { background: #1B1D24; border-color: #2A2D38; }
[data-theme="dark"] .fp-fbx-canvas { background: #14161D; }
@media (max-width: 1100px) { .fp-fbx { grid-template-columns: 150px minmax(0, 1fr); --gx1: 300px; } .fp-fbx-set { display: none; } }
/* Rundgang der Startseite (fp_form_builder(['tour' => true])): fester Zustand, Höhe aus dem Fenster des Rundgangs,
   das neue Feld steht ohne Markierung im Formular */
.fp-fbx.fp-fbx--tour { height: 100%; min-height: 680px; }
.fp-fbx--tour .fp-fbx-new { animation: none; outline: 0; margin-bottom: 9px; }
@media (max-width: 760px) {
  .fp-fbx { grid-template-columns: minmax(0, 1fr); height: 520px; }
  .fp-fbx-pal, .fp-fbx-ghost, .fp-frame--fbx .fp-fbx-dim { display: none; }
  .fp-fbx-form { padding: 20px 16px; }
}

/* ---------- Builder-Rahmen (fp_builder_open): Leiste volle Hoehe, Spalten volle Hoehe ---------- */
.fp-frame--bld { overflow: hidden; }
.fp-frame--bld .fp-main { padding: 0; }
.fp-frame--bld .fp-rail { padding-top: 14px; }
.fp-bld-col { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border: 1px solid var(--fp-line); border-radius: 50%; background: #fff; color: var(--fp-muted); flex: none; }
.fp-asb-work { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fp-asb-top { display: flex; align-items: center; gap: 6px; height: 52px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--fp-line); background: #fff; }
.fp-asb-crumb { margin-right: auto; display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; font-size: 10.5px; color: var(--fp-muted); }
.fp-asb-crumb i { font-style: normal; }
.fp-asb-crumb b { font-family: var(--font-display); font-size: 14px; color: var(--fp-ink); }
.fp-asb-top .fp-asb-seg, .fp-asb-top .fp-asb-tools { padding: 4px 6px; gap: 6px; }
.fp-asb-top .fp-asb-seg { padding: 2px; font-size: 9px; white-space: nowrap; flex: none; }
.fp-asb-top > * { flex: none; }
.fp-asb-top .fp-asb-crumb { flex: 0 1 auto; overflow: hidden; }
.fp-asb-top .fp-asb-gear { display: none; }
.fp-asb-top .fp-chip .svgicon { margin-right: 3px; }
.fp-asb-top .fp-asb-seg > * { padding: 3px 5px; }
.fp-asb-top .fp-asb-dev { padding: 2px; gap: 1px; }
.fp-asb-top .fp-asb-dev i { width: 20px; height: 20px; }
.fp-asb-top .fp-chip { padding: 4px 8px; font-size: 10.5px; }
.fp-asb-top .fp-btn { padding: 5px 9px; font-size: 10.5px; }
.fp-asb-work .fp-asb-canvas { flex: 1; min-height: 0; }
.fp-asb-set > .fp-asb-h { margin-bottom: 0; }
[data-theme="dark"] .fp-asb-top, [data-theme="dark"] .fp-bld-col { background: #1B1D24; border-color: #2A2D38; }
@media (max-width: 1240px) { .fp-asb-top .fp-asb-seg { display: none; } }
@media (max-width: 760px) { .fp-asb-top > :not(.fp-asb-crumb):not(.fp-btn) { display: none; } }

/* Form Builder: Kopfzeile ueber die volle Breite (wie in der Suite) */
.fp-fbx { grid-template-rows: 52px minmax(0, 1fr); }
.fp-fbx-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--fp-line); background: #fff; }
.fp-fbx-crumb { font-size: 11px; color: var(--fp-muted); white-space: nowrap; }
.fp-fbx-crumb i { font-style: normal; margin-left: 4px; }
.fp-fbx-name { padding: 5px 10px; min-width: 170px; border: 1px solid var(--fp-line); border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--fp-ink); white-space: nowrap; }
.fp-fbx-top .fp-fbx-dim { white-space: nowrap; }
.fp-fbx-act { margin-left: auto; display: flex; gap: 6px; }
.fp-fbx-act .fp-btn { padding: 5px 10px; font-size: 11px; }
[data-theme="dark"] .fp-fbx-top { background: #1B1D24; border-color: #2A2D38; }
@media (max-width: 760px) { .fp-fbx-top .fp-fbx-dim, .fp-fbx-top .fp-fbx-crumb { display: none; } .fp-fbx-name { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } .fp-fbx-act .fp-btn:not(.fp-btn--p) { display: none; } }

/* Website-Nachbauten (Event-Seite, Anmeldeformular des Gastes): Akzent der Vorlage Brand Summit statt Produkt-Lila */
.fp-site { --fp-accent: #1F5FD1; --fp-accent-soft: #E3EDFC; }
.fp-site .fp-btn--p { border-radius: 2px; }

/* ---------- Untermenue-Spalte (fp_submenu_html): wie in der Suite neben der Leiste ----------
   Nur bei Rahmen ab ~760 px Breite (Container-Query), schmalere Nachbauten bleiben ohne. */
.fp-frame--sub { container-type: inline-size; }
.fp-subnav { display: none; }
@container (min-width: 760px) {
  .fp-frame--sub .fp-subnav { position: absolute; top: 0; bottom: 0; left: var(--fp-rail-w, 56px); z-index: 1; width: 150px; display: flex; flex-direction: column; gap: 3px; padding: 12px 9px; background: #fff; border-right: 1px solid var(--fp-line); overflow: hidden; }
  .fp-frame--sub .fp-main { margin-left: 150px; }
}
 .fp-subnav-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fp-line); }
 .fp-subnav-head i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ds-color-violet-100, #F0E7FF); flex: none; }
 .fp-subnav-head span { display: flex; flex-direction: column; min-width: 0; }
 .fp-subnav-head b { font-size: 12px; color: var(--fp-ink); line-height: 1.2; }
 .fp-subnav-head small { font-size: 9.5px; color: var(--fp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-subnav > span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; font-size: 11px; color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-subnav > span em { width: 6px; height: 6px; border-radius: 2px; background: var(--fp-line); flex: none; }
.fp-subnav > span.is-on { border-color: var(--fp-accent); background: var(--fp-accent-soft); color: var(--fp-accent); font-weight: 600; }
.fp-subnav > span.is-on em { background: var(--fp-accent); }
[data-theme="dark"] .fp-frame--sub .fp-subnav { background: #1B1D24; border-color: #2A2D38; }

/* ---------- Event-Cockpit (funktionen/_tpl/cockpit.php) — Nachbau nach airlst.test, 07.10.2026 ---------- */
.fp-ck { display: flex; flex-direction: column; gap: 12px; }
.fp-ck-event { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px; border: 1px solid var(--fp-line); border-radius: 12px; background: #fff; }
.fp-ck-date { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--fp-line); border-radius: 9px; overflow: hidden; align-self: start; }
.fp-ck-date small { align-self: stretch; text-align: center; padding: 2px 0; background: var(--fp-accent); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.fp-ck-date b { font-family: var(--font-display); font-size: 22px; line-height: 1.15; color: var(--fp-ink); }
.fp-ck-date span { font-size: 9px; color: var(--fp-faint); padding-bottom: 3px; }
.fp-ck-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-ck-info b { font-size: 14px; color: var(--fp-ink); margin-bottom: 2px; }
.fp-ck-info span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-ck-info span.is-link { color: var(--fp-accent); }
.fp-ck-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fp-ck-act span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--fp-line); border-radius: 7px; font-size: 10.5px; font-weight: 600; color: var(--fp-ink); white-space: nowrap; }
.fp-ck-quick { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.fp-ck-quick span { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--fp-line); border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--fp-ink); }
.fp-ck-quick i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--fp-soft); flex: none; }
.fp-ck-quick em { margin-left: auto; font-style: normal; color: var(--fp-faint); }
.fp-ck-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--fp-accent-soft); color: var(--fp-accent); font-size: 11.5px; }
.fp-ck-state span { color: var(--fp-muted); }
.fp-ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fp-ck-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px 0; border: 1px solid var(--fp-line); border-radius: 12px; background: #fff; overflow: hidden; }
.fp-ck-kpi > span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--fp-muted); white-space: nowrap; }
.fp-ck-kpi > span i { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--fp-accent); color: #fff; font-style: normal; font-size: 8px; font-weight: 700; }
.fp-ck-kpi b { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.5px; color: var(--fp-ink); font-variant-numeric: tabular-nums; }
.fp-ck-kpi b em { padding: 1px 6px; border-radius: 5px; background: var(--fp-ok-soft); color: var(--fp-ok); font-style: normal; font-size: 10px; font-family: var(--font-micro); letter-spacing: 0; }
.fp-ck-kpi small { font-size: 10px; color: var(--fp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-ck-spark { display: block; width: calc(100% + 24px); height: 34px; margin: 6px -12px 0; }
.fp-ck-table { padding: 0; }
.fp-ck-th { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fp-soft); }
.fp-ck-th b { font-size: 13px; }
.fp-ck-count { padding: 0 6px; border-radius: 999px; background: var(--fp-accent-soft); color: var(--fp-accent); font-size: 10px; font-weight: 700; }
.fp-ck-th em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--fp-accent); }
.fp-ck-det { color: var(--fp-accent); font-size: 11px; font-weight: 600; white-space: nowrap; }
.fp-ck.is-compact .fp-ck-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fp-ck.is-compact .fp-ck-act, .fp-ck.is-compact .fp-ck-info .is-link { display: none; }
.fp-ck.is-compact .fp-ck-event { grid-template-columns: 54px minmax(0, 1fr); padding: 12px; }
.fp-ck.is-compact .fp-ck-kpi { padding: 10px 10px 0; }
.fp-ck.is-compact .fp-ck-kpi b { font-size: 20px; }
.fp-ck.is-compact .fp-ck-kpi b em { display: none; }
.fp-ck.is-compact .fp-ck-spark { width: calc(100% + 20px); margin: 4px -10px 0; height: 28px; }
[data-theme="dark"] .fp-ck-event, [data-theme="dark"] .fp-ck-kpi { background: #1B1D24; border-color: #2A2D38; }
@container (max-width: 700px) { .fp-ck-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fp-ck-event { grid-template-columns: 46px minmax(0, 1fr); } .fp-ck-act { display: none; } .fp-ck-quick { grid-template-columns: 1fr; } .fp-ck-kpis { grid-template-columns: 1fr 1fr; } .fp-ck-table th:nth-child(4), .fp-ck-table td:nth-child(4), .fp-ck-table th:nth-child(3), .fp-ck-table td:nth-child(3) { display: none; } }
/* Cockpit im Hero (Eventstatistiken): Hinweiskarten neben die Kennzahlen statt darueber */
.fp-hero-stage:has(.fp-ck) .fp-note-card--2 { top: -2%; }
.fp-hero-stage:has(.fp-ck) .fp-note-card--3 { bottom: -10%; }
@media (max-width: 640px) { .fp-ck.is-compact .fp-ck-kpis { grid-template-columns: 1fr 1fr; } }

/* Gaesteliste: sechs Kennzahlen ueber der Tabelle wie in der Suite */
.fp-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.fp-kpis--6 .fp-kpi { padding: 10px 12px; }
.fp-kpis--6 .fp-kpi span { font-size: 10.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-kpis--6 .fp-kpi b { font-size: 20px; }
@container (max-width: 900px) { .fp-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fp-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* E-Mail-Vorlagen wie in der Suite: Vorlagenuebersicht mit Betreffzeile, Aktionen je Zeile, Knoepfe darunter */
.fp-tpl-head { padding: 12px 14px 4px; font-size: 13px; }
.fp-tpl-sub { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-tpl-act { white-space: nowrap; color: var(--fp-muted); text-align: right; }
.fp-tpl-act .svgicon { margin-left: 6px; }
.fp-tpl-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.fp-tpl-btns .fp-btn { font-size: 11px; padding: 6px 10px; }
@media (max-width: 640px) { .fp-tpl th:nth-child(3), .fp-tpl td:nth-child(3), .fp-tpl th:nth-child(5), .fp-tpl td:nth-child(5) { display: none; } }
@container (max-width: 900px) {
  .fp-tpl th:nth-child(3), .fp-tpl td:nth-child(3) { display: none; }
  .fp-tpl-sub { max-width: 150px; }
  .fp-frame--sub:has(.fp-tpl) .fp-btns .fp-chip:last-child { display: none; }
}

/* ---------- KI-Anbindung (Hero): Airstage-Look mit Vorschau und Verlauf des Assistenten ---------- */
.fp-kix { display: flex; flex-direction: column; min-height: 0; }
.fp-kix .fp-asb-top { gap: 8px; }
.fp-kix-agent { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--fp-ok-soft); color: var(--fp-ok); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.fp-kix-agent i { width: 6px; height: 6px; border-radius: 50%; background: var(--fp-ok); animation: fpPulse 1.6s ease-in-out infinite; }
@keyframes fpPulse { 50% { opacity: .35; } }
.fp-kix-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 0; }
.fp-kix-canvas { padding: 12px; background: linear-gradient(180deg, #EFE6FB, #F6F2FC); }
.fp-kix-site { background: #F4F8FD; color: #14213D; box-shadow: 0 10px 26px -18px rgba(40,20,70,.45); }
.fp-kix-nav { display: flex; gap: 10px; padding: 8px 12px; font-size: 9px; color: #4A5872; }
.fp-kix-nav b { margin-right: auto; font-family: Georgia, serif; font-weight: 400; font-size: 11px; color: #14213D; }
.fp-kix-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 12px 14px; color: #fff; background: linear-gradient(90deg, rgba(10,20,45,.85), rgba(10,20,45,.35)), var(--img) center 35% / cover; }
.fp-kix-hero small { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; color: #BFD4F6; }
.fp-kix-hero b { font-family: Georgia, serif; font-weight: 400; font-size: 17px; }
.fp-kix-hero em { margin-top: 4px; padding: 4px 8px; background: #1F5FD1; font-style: normal; font-size: 8.5px; font-weight: 600; }
.fp-kix-row { display: grid; grid-template-columns: 34px 1fr; margin: 0 12px; padding: 5px 0; border-bottom: 1px solid #DCE6F3; font-size: 9px; }
.fp-kix-row time { font-weight: 700; color: #1F5FD1; }
.fp-kix-row.is-new { outline: 1.5px solid var(--fp-accent); outline-offset: 2px; border-radius: 2px; margin-bottom: 10px; }
.fp-kix-log { padding: 10px 12px; background: #fff; border-left: 1px solid var(--fp-line); min-width: 0; }
.fp-kix-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--fp-accent); }
.fp-kix-h b { flex: 1; font-size: 11.5px; color: var(--fp-ink); }
.fp-kix-log .fp-log { margin: 0; }
.fp-kix-log .fp-log li { font-size: 10.5px; }
[data-theme="dark"] .fp-kix-log { background: #1B1D24; border-color: #2A2D38; }
@media (max-width: 640px) { .fp-kix-body { grid-template-columns: minmax(0, 1fr); } .fp-kix-canvas { display: none; } .fp-kix .fp-asb-tools { display: none; } }
.fp-kix-log .fp-log li { grid-template-columns: 44px 1fr; gap: 6px; padding: 7px 0; }
.fp-hero-stage:has(.fp-kix) .fp-note-card--2 { top: -4%; }
.fp-hero-stage:has(.fp-kix) .fp-note-card--3 { bottom: -22%; left: -8%; }
html[lang="en"] .fp-kix-log .fp-log li { grid-template-columns: 58px 1fr; }
.fp-kix-log .fp-log li span { white-space: nowrap; }

/* Geraeterahmen fuer App-Nachbauten (Martin, 08.10.2026): dunkle Einfassung, Dynamic Island, Statusleiste */
.fp-dev { width: 292px; max-width: 100%; padding: 9px; border-radius: 44px; background: #1C1A22; box-shadow: 0 0 0 1px #2E2B36, 0 26px 50px -22px rgba(30,15,60,.55); }
.fp-dev-screen { border-radius: 36px; background: #fff; padding: 12px 16px 20px; font-size: 12.5px; font-family: var(--font-micro); overflow: hidden; }
.fp-dev-bar { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 6px; margin-bottom: 10px; font-size: 11px; color: #14161C; }
.fp-dev-bar i { width: 74px; height: 21px; border-radius: 12px; background: #000; }
.fp-dev-bar span { font-size: 9.5px; font-weight: 700; }
[data-theme="dark"] .fp-dev-screen { color: #14161C; }
@media (max-width: 720px) { .fp-dev .fp-qr-wrap { display: block; } }

/* ---------- Umfrage-Editor (funktionen/_tpl/survey-editor.php) — Nachbau nach airlst.test, 08.10.2026 ---------- */
.fp-sv { display: flex; flex-direction: column; gap: 12px; }
.fp-sv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fp-sv-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fp-muted); white-space: nowrap; }
.fp-sv-back i { font-style: normal; }
.fp-sv-back b { color: var(--fp-ink); font-size: 13px; }
.fp-sv-chips { display: flex; gap: 6px; margin-left: auto; }
.fp-sv-chips em { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--fp-soft); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--fp-muted); white-space: nowrap; }
.fp-sv-chips em.is-on { background: var(--fp-accent-soft); color: var(--fp-accent); }
.fp-sv-tabs { display: flex; gap: 4px; }
.fp-sv-tabs > * { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; color: var(--fp-muted); white-space: nowrap; }
.fp-sv-tabs b { background: var(--fp-accent-soft); color: var(--fp-accent); font-weight: 600; }
.fp-sv-tabs .fp-sv-prev { border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); }
.fp-sv-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.fp-sv-list, .fp-sv-stats { border: 1px solid var(--fp-line); border-radius: 12px; background: #fff; padding: 12px; }
.fp-sv-list { display: flex; flex-direction: column; gap: 4px; }
.fp-sv-list small { font-size: 12px; font-weight: 700; color: var(--fp-ink); margin-bottom: 4px; }
.fp-sv-list > span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 11.5px; color: var(--fp-ink); }
.fp-sv-list > span .svgicon { flex: none; color: var(--fp-muted); }
.fp-sv-list > span.is-on { background: var(--fp-soft); }
.fp-sv-list > span i { margin-left: auto; color: var(--fp-ok); display: inline-flex; }
.fp-sv-add { justify-content: center; margin-top: auto; border: 1px solid var(--fp-line); color: var(--fp-accent) !important; font-weight: 600; }
.fp-sv-add .svgicon { color: var(--fp-accent) !important; }
.fp-sv-stats { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.fp-sv-stats > b { font-size: 14px; }
.fp-sv-stats > div { display: grid; grid-template-columns: repeat(2, minmax(0, 104px)); gap: 6px; }
.fp-sv-stats > div span { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--fp-line); border-radius: 8px; font-size: 10px; color: var(--fp-muted); }
.fp-sv-stats strong { font-family: var(--font-display); font-size: 18px; color: var(--fp-ink); }
.fp-sv-stats strong.is-acc { color: var(--fp-accent); }
.fp-sv-stats p { margin: 0; font-size: 10.5px; color: var(--fp-faint); }
[data-theme="dark"] .fp-sv-list, [data-theme="dark"] .fp-sv-stats, [data-theme="dark"] .fp-sv-tabs .fp-sv-prev { background: #1B1D24; border-color: #2A2D38; }
@media (max-width: 640px) { .fp-sv-body { grid-template-columns: minmax(0, 1fr); } .fp-sv-chips, .fp-sv-tabs > :not(b) { display: none; } }
/* Ticketing-Hero: Hintergrund laeuft oben weich in Topbar und Breadcrumb aus (Martin, 08.10.2026) */
.fp-hero--ticket .fp-hero-bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 220px); mask-image: linear-gradient(to bottom, transparent 0, #000 220px); }
/* Publikumsbild: links weich auslaufen statt Kante bei Bildbeginn (Martin, 08.10.2026) */
.fp-hero-crowd img { -webkit-mask-image: radial-gradient(120% 90% at 78% 40%, #000 30%, transparent 72%), linear-gradient(to right, transparent 0, #000 45%); -webkit-mask-composite: source-in; mask-image: radial-gradient(120% 90% at 78% 40%, #000 30%, transparent 72%), linear-gradient(to right, transparent 0, #000 45%); mask-composite: intersect; }

/* Logos der Zahlungsanbieter in der Liste (Martin, 08.10.2026) */

/* ---------- Sitzplan-Bühne (fp_seating_hero, views/seating.php) ----------
   Drei Szenen im Systemfenster: Festsaal, Theatersaal, Stadion. Grundzustand ist der Endzustand jeder
   Szene; die Abläufe laufen nur unter .ss.is-anim (seating-stage.js, Desktop ohne reduzierte Bewegung).
   Der Raum ist 86 × 43 em groß, 1 em folgt der Breite der Fläche (Container-Einheit). */
@property --ss-n { syntax: '<integer>'; inherits: true; initial-value: 0; }
.ss { --ss-empty: var(--ds-color-night-150); --ss-seat: var(--ds-color-white); }
.ss-g--v { --c: var(--ds-color-violet-700); }
.ss-g--p { --c: var(--ds-color-green-700); }
.ss-g--r { --c: var(--ds-color-blue-600); }
.ss-g--g { --c: var(--ds-color-night-600); }
.ss .fp-main { padding: 16px 18px 18px; }
.ss .fp-head { margin-bottom: 10px; }
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ss-rooms { display: flex; gap: 6px; }
.ss-room { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--fp-line); background: var(--ss-seat); font-size: 12px; font-family: var(--font-micro); font-weight: 600; color: var(--fp-muted); transition: color .3s, background-color .3s, border-color .3s; }
.ss[data-scene="1"] .ss-room--1, .ss[data-scene="2"] .ss-room--2, .ss[data-scene="3"] .ss-room--3 { background: var(--fp-accent-soft); border-color: var(--ds-color-violet-200); color: var(--fp-accent); }
.ss-scene { display: none; }
.ss[data-scene="1"] [data-ss-scene="1"], .ss[data-scene="2"] [data-ss-scene="2"], .ss[data-scene="3"] [data-ss-scene="3"] { display: block; }
.ss.is-anim .ss-scene { animation: ss-fade .45s ease both; }
.ss-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ss-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; font-family: var(--font-micro); color: var(--fp-muted); white-space: nowrap; }
.ss-bar > i { width: 1px; height: 13px; background: var(--fp-line); }
.ss-n, .ss-sw { font-weight: 700; color: var(--fp-ink); }
.ss-n::after { counter-reset: ssn var(--ss-n); content: counter(ssn); }
.ss-n--p1 { --ss-n: 46; } .ss-n--p2 { --ss-n: 156; } .ss-n--s2 { --ss-n: 168; }
.ss-tools { display: flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid var(--fp-line); background: var(--ss-seat); }
.ss-tool { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; color: var(--fp-muted); }
.ss-tool.is-on { background: var(--fp-accent-soft); color: var(--fp-accent); box-shadow: inset 0 0 0 1px var(--ds-color-violet-200); }
.ss-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.ss-side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--fp-line); background: var(--ss-seat); font-size: 12px; font-family: var(--font-micro); }
.ss-search, .ss-filter { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--fp-line); color: var(--fp-faint); }
.ss-filter { height: 26px; width: max-content; font-size: 11px; color: var(--fp-muted); }
.ss-filter.is-on { background: var(--fp-accent-soft); border-color: var(--ds-color-violet-200); color: var(--fp-accent); }
.ss-count { font-size: 10.5px; color: var(--fp-faint); }
.ss-list { list-style: none; margin: 0 -4px; padding: 0; display: grid; gap: 2px; }
.ss-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 8px; }
.ss-list--check li { grid-template-columns: 13px 24px minmax(0, 1fr) auto; }
.ss-list b { display: block; font-size: 11.5px; font-weight: 600; color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-list small { display: block; font-size: 10px; color: var(--fp-faint); }
.ss-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: var(--ds-color-white); font-size: 9px; font-weight: 700; font-style: normal; }
.ss-badge { display: inline-grid; justify-items: end; font-style: normal; font-size: 10px; font-weight: 700; }
.ss-badge > span { grid-area: 1 / 1; }
.ss-badge > span, .ss-badge:not(.ss-badge--swap) { padding: 2px 6px; border-radius: 6px; background: var(--fp-ok-soft); color: var(--fp-ok); white-space: nowrap; }
.ss-badge--swap { padding: 0; background: none; }
.ss-badge--swap > span:first-child { opacity: 0; }
.ss-badge.is-none > span:first-child, .ss-badge.is-none:not(.ss-badge--swap) { background: var(--fp-soft); color: var(--fp-faint); }
.ss-badge > span.is-bad { background: var(--fp-bad-soft); color: var(--fp-bad); }
.ss-list--check u { width: 13px; height: 13px; border-radius: 4px; background: var(--fp-accent); box-shadow: inset 0 0 0 1px var(--fp-accent); }
.ss-act { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 8px; background: var(--fp-accent); color: var(--ds-color-white); font-size: 11.5px; font-weight: 600; }
.ss-side-h { font-size: 13px; font-family: var(--font-display); }
.ss-file { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 10px; border-radius: 10px; border: 1px dashed var(--ds-color-violet-200); background: var(--fp-accent-soft); color: var(--fp-accent); }
.ss-file b { display: block; font-size: 11.5px; color: var(--fp-ink); overflow-wrap: anywhere; }
.ss-file small { font-size: 10px; color: var(--fp-faint); }
.ss-file > i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--ss-seat); overflow: hidden; }
.ss-file u { display: block; height: 100%; background: var(--fp-accent); }
.ss-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.ss-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ss-steps li > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fp-ok); color: var(--ds-color-white); }
.ss-steps b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.ss-steps small { display: block; font-size: 10px; color: var(--fp-accent); font-weight: 600; }

/* Raum */
.ss-canvas { position: relative; container-type: inline-size; border-radius: 12px; border: 1px solid var(--fp-line);
  background: var(--fp-soft2) radial-gradient(circle, var(--ds-color-night-100) 1px, transparent 1.5px) 0 0 / 18px 18px; }
.ss-plane { position: relative; width: 100%; aspect-ratio: 86 / 43; font-size: 9px; font-size: calc(100cqi / 86); }
.ss-plane > * { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.ss-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.ss-zoom i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--fp-line); background: var(--ss-seat); font-style: normal; font-size: 13px; color: var(--fp-muted); }
.ss-stagebar { width: var(--w); height: 2.6em; display: grid; place-items: center; border-radius: .6em; background: var(--ds-color-night-100); color: var(--fp-muted); font-size: 1.1em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ss-tbl { display: grid; place-items: center; background: var(--fp-accent-soft); border: .12em solid var(--ds-color-violet-200); color: var(--fp-accent); font-size: 1em; font-weight: 700; }
.ss-tbl--r { width: 7.4em; height: 7.4em; border-radius: 50%; }
.ss-tbl--q { width: 12.4em; height: 5.2em; border-radius: .5em; }
.ss-s { width: 2.3em; height: 2.3em; border-radius: 50%; border: .12em solid var(--ss-empty); background: var(--ss-seat); display: grid; place-items: center; }
.ss-s > i { font-style: normal; font-size: .82em; font-weight: 600; color: var(--fp-faint); }
.ss-s > b { position: absolute; inset: -.12em; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: var(--ds-color-white); font-size: .8em; font-weight: 700; letter-spacing: -.02em; }
.ss-s > .ss-out { display: none; }
.ss-ghost { left: 0; top: 0; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)); z-index: 4; padding: .55em 1.1em; border-radius: 99px; background: var(--c); color: var(--ds-color-white); font-size: 1.15em; font-weight: 700; white-space: nowrap; box-shadow: 0 .8em 1.8em -.6em rgba(20, 16, 40, .55); opacity: 0; }
.ss-toast { left: auto; right: 1.4em; top: auto; bottom: 1.4em; transform: none; z-index: 3; display: grid; gap: .2em; padding: .9em 1.2em; border-radius: .8em; background: var(--fp-bad-soft); border: .1em solid var(--ds-color-red-200); color: var(--fp-bad); font-size: 1.1em; opacity: 0; }
.ss-toast b { font-size: 1em; }
.ss-tip { z-index: 3; transform: translate(-50%, calc(-100% - 1.8em)); display: grid; gap: .15em; padding: .8em 1.1em; border-radius: .7em; background: var(--ds-color-night-900); color: var(--ds-color-white); font-size: 1.05em; white-space: nowrap; box-shadow: 0 1em 2em -1em rgba(20, 16, 40, .6); }
.ss-tip::after { content: ""; position: absolute; left: 50%; bottom: -.4em; width: .8em; height: .8em; background: inherit; transform: translateX(-50%) rotate(45deg); }
.ss-tip b { font-size: .9em; color: var(--ds-color-violet-200); }
.ss-tip small { font-size: .85em; opacity: .7; }
.ss-legend { left: 1.4em; top: auto; bottom: 1em; transform: none; display: flex; gap: 1.2em; font-size: 1.05em; color: var(--fp-muted); }
.ss-legend span { display: flex; align-items: center; gap: .5em; }
.ss-legend i { width: 1em; height: 1em; border-radius: 50%; background: var(--c, var(--ss-seat)); border: .12em solid var(--c, var(--ss-empty)); }
/* Reihen: Plätze als Punktreihe, belegte Plätze als Wischer in Gruppenfarbe */
.ss-row, .ss-lasso, .ss-blk { transform: translateY(-50%); }
.ss-row { width: calc(var(--n) * 1.9em); height: 1.9em;
  background: radial-gradient(circle, var(--ss-seat) .5em, var(--ss-empty) .52em .66em, transparent .7em) 0 0 / 1.9em 1.9em repeat-x; }
.ss-row > i { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--f) * 1.9em); background: radial-gradient(circle, var(--c) .66em, transparent .7em) 0 0 / 1.9em 1.9em repeat-x; }
.ss-rowlab { font-size: 1em; font-weight: 700; color: var(--fp-faint); }
.ss-lasso { transform: none; width: var(--w); height: var(--h); border: .14em dashed var(--fp-accent); border-radius: .5em; background: color-mix(in srgb, var(--fp-accent) 8%, transparent); opacity: 0; }
.ss-chipnote { transform: translate(-100%, -50%); padding: .35em .8em; border-radius: 99px; background: var(--ss-seat); border: .1em solid var(--fp-line); font-size: 1em; font-weight: 700; color: var(--fp-ink); white-space: nowrap; }
/* Stadion */
.ss-blue { left: 0; top: 0; transform: none; width: 100%; height: 100%; border-radius: inherit; opacity: 0;
  background: linear-gradient(var(--ds-color-violet-200) .06em, transparent .06em) 0 0 / 2.3em 2.3em, linear-gradient(90deg, var(--ds-color-violet-200) .06em, transparent .06em) 0 0 / 2.3em 2.3em; }
.ss-pitch { left: 25em; top: 10.4em; transform: none; width: 36em; height: 22em; border-radius: .6em; border: .16em solid var(--ds-color-white);
  background: var(--ds-color-green-500) repeating-linear-gradient(90deg, transparent 0 3.6em, rgba(255, 255, 255, .08) 3.6em 7.2em);
  box-shadow: inset 0 0 0 1.1em var(--ds-color-green-500), inset 0 0 0 1.25em rgba(255, 255, 255, .7); }
.ss-pitch i { position: absolute; left: 50%; top: 1.1em; bottom: 1.1em; width: .15em; background: rgba(255, 255, 255, .7); }
.ss-pitch i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; border-radius: 50%; border: .15em solid rgba(255, 255, 255, .7); transform: translate(-50%, -50%); }
.ss-blk { transform: none; width: var(--w); height: var(--h); border-radius: .5em; border: .1em solid var(--fp-line); overflow: hidden;
  background: var(--ss-seat) radial-gradient(circle, var(--ss-empty) .3em, transparent .34em) .3em .3em / 1.05em 1.05em; }
.ss-blk > i { position: absolute; inset: 0; background: radial-gradient(circle, var(--c) .34em, transparent .38em) .3em .3em / 1.05em 1.05em; }
.ss-blk > b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .1em .5em; border-radius: .4em; background: var(--ss-seat); font-size: 1em; color: var(--fp-ink); }
.ss-tip--blk { transform: translate(-10%, calc(-100% - 1.6em)); }
.ss-tip--blk::after { left: 10%; }
.ss-sw { display: inline-grid; } .ss-sw > span { grid-area: 1 / 1; } .ss-sw > span:first-child { opacity: 0; }

/* Erklärkarten: links oben über dem Kopf, rechts neben dem Raum; das Gästepanel bleibt frei */
/* Überstand höchstens bis 16 px vor den Fensterrand (100% = Fensterbreite) */
.fp-hero-window.ss { --ss-out: calc(-1 * max(0px, min(80px, (100vw - 100%) / 2 - 16px))); }
.fp-hero-window.ss .fp-note-card--1 { left: auto; right: var(--ss-out); top: -58px; }
.fp-hero-window.ss .fp-note-card--2 { left: var(--ss-out); top: auto; bottom: -74px; }
.fp-hero-window.ss .fp-note-card--3 { left: auto; right: var(--ss-out); top: auto; bottom: -74px; animation-delay: -4.8s; }

/* Umschalter unter dem Fenster */
.ss-switch { display: flex; justify-content: center; gap: 8px; margin: 46px auto 0; }
.ss-switch[hidden] { display: none; }
.ss-switch button { position: relative; overflow: hidden; min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--fp-line); background: var(--ss-seat, var(--ds-color-white)); color: var(--fp-muted); font: 600 14px/1 var(--font-micro); cursor: pointer; }
.ss-switch button[aria-pressed="true"] { border-color: var(--ds-color-violet-200); background: var(--fp-accent-soft); color: var(--fp-accent); }
.ss-switch button > i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--fp-accent); transform: scaleX(0); transform-origin: left; }
.ss-switch.is-auto button[aria-pressed="true"] > i { animation: ss-progress var(--ss-dur, 10s) linear both; }

/* Abläufe */
.ss.is-anim .ss-in { animation: ss-pop .4s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
.ss.is-anim .ss-s > .ss-out { display: grid; animation: ss-gone 1s ease var(--d) both; }
.ss.is-anim .ss-ghost { animation: ss-drag 1.3s ease-in-out calc(var(--d) - 1.3s) both; }
.ss.is-anim .ss-toast { animation: ss-toast 1.8s ease var(--d) both; }
.ss.is-anim .ss-tip { animation: ss-pop-tip .35s ease var(--d) both; }
.ss.is-anim .ss-drag { animation: ss-hl 1.5s ease calc(var(--d) - 1.3s) both; }
.ss.is-anim .ss-cancel { animation: ss-hl-bad 1.4s ease var(--d) both; }
.ss.is-anim .ss-badge--swap > span:first-child, .ss.is-anim .ss-sw > span:first-child { animation: ss-hide .2s linear var(--d) both; }
.ss.is-anim .ss-badge--swap > span:last-child, .ss.is-anim .ss-sw > span:last-child { animation: ss-on .2s linear var(--d) both; }
.ss.is-anim .ss-n--p1 { animation: ss-p1 10.6s linear both; }
.ss.is-anim .ss-n--p2 { animation: ss-p2 9.6s linear both; }
.ss.is-anim .ss-n--s2 { animation: ss-s2 9.6s linear both; }
.ss.is-anim .ss-row, .ss.is-anim .ss-rowlab { animation: ss-wipe .5s ease-out var(--d) both; }
.ss.is-anim .ss-row > i, .ss.is-anim .ss-blk > i { animation: ss-wipe .9s ease-in-out var(--fd) both; }
.ss.is-anim .ss-lasso { animation: ss-lasso 1.5s ease 2.4s both; }
.ss.is-anim .ss-chipnote { animation: ss-pop-l .35s ease var(--d) both; }
.ss.is-anim .ss-tick u { animation: ss-check .25s ease var(--d) both; }
.ss.is-anim .ss-act { animation: ss-press .6s ease var(--d) both; }
.ss.is-anim .ss-file u { animation: ss-load 1.6s ease-in-out .3s both; }
.ss.is-anim .ss-steps li { animation: ss-step .3s ease var(--d) both; }
.ss.is-anim .ss-blue { animation: ss-blue 3.2s ease .2s both; }
.ss.is-anim .ss-pitch { animation: ss-wipe 1.2s ease-in-out .6s both, ss-plan 2.2s ease .6s both; }
.ss.is-anim .ss-blk { animation: ss-blk .45s ease var(--d) both; }
@keyframes ss-fade { from { opacity: 0; } }
@keyframes ss-pop { from { transform: scale(0); opacity: 0; } }
@keyframes ss-pop-tip { from { opacity: 0; translate: 0 .6em; } }
@keyframes ss-pop-l { from { opacity: 0; translate: .8em 0; } }
@keyframes ss-gone { 0% { box-shadow: none; } 15% { box-shadow: 0 0 0 .3em var(--fp-bad); } 60% { transform: none; opacity: 1; box-shadow: 0 0 0 .3em var(--fp-bad); } 100% { transform: scale(0); opacity: 0; box-shadow: none; } }
@keyframes ss-drag { 0% { opacity: 0; transform: translate(-15em, var(--fy)) scale(.9); } 12% { opacity: 1; transform: translate(-15em, var(--fy)); } 85% { opacity: 1; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)); } 100% { opacity: 0; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(.6); } }
@keyframes ss-toast { 0% { opacity: 0; translate: 0 .8em; } 12%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes ss-hl { 0%, 100% { background: transparent; } 10%, 80% { background: var(--fp-accent-soft); } }
@keyframes ss-hl-bad { 0%, 100% { background: transparent; } 10%, 70% { background: var(--fp-bad-soft); } }
@keyframes ss-on { from { opacity: 0; } }
@keyframes ss-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes ss-p1 { 0%, 23% { --ss-n: 43; } 24.5%, 44% { --ss-n: 44; } 46.5%, 60% { --ss-n: 46; } 61%, 76% { --ss-n: 45; } 77.5%, 100% { --ss-n: 46; } }
@keyframes ss-p2 { 0%, 34% { --ss-n: 0; } 40%, 55% { --ss-n: 36; } 60%, 66% { --ss-n: 56; } 84%, 100% { --ss-n: 156; } }
@keyframes ss-s2 { 0%, 3% { --ss-n: 0; } 28%, 100% { --ss-n: 168; } }
@keyframes ss-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ss-lasso { 0% { opacity: 1; clip-path: inset(0 100% 100% 0); } 40%, 75% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes ss-check { from { background: var(--ss-seat); box-shadow: inset 0 0 0 1px var(--ss-empty); } }
@keyframes ss-press { 0%, 100% { transform: none; } 40% { transform: scale(.95); box-shadow: 0 0 0 4px var(--fp-accent-soft); } }
@keyframes ss-load { from { width: 0; } }
@keyframes ss-step { from { opacity: .35; } }
@keyframes ss-blue { 0% { opacity: 0; } 20%, 60% { opacity: .9; } 100% { opacity: .35; } }
@keyframes ss-plan { 0%, 55% { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--fp-accent); } }
@keyframes ss-blk { from { opacity: 0; transform: scale(.85); border-style: dashed; border-color: var(--fp-accent); } }
@keyframes ss-progress { to { transform: scaleX(1); } }
.ss-blue { opacity: .35; }

/* Fenster bis 1240 px: schmaleres Panel; bis 980 px Werkzeugleiste kürzer */
@media (max-width: 1240px) { .ss-body { grid-template-columns: 190px minmax(0, 1fr); } }
@media (max-width: 980px) { .ss-tool:nth-child(n+6) { display: none; } }
/* Mobil zeigt Produkt: nur der Raum, als Ausschnitt in lesbarer Größe; Szenen wechselt der Umschalter */
@media (max-width: 760px) {
  .ss .fp-main { padding: 12px; }
  .ss-side, .ss-tools, .ss-zoom, .ss-legend, .ss .fp-head { display: none; }
  .ss-head { overflow-x: auto; }
  .ss-bar { gap: 6px; font-size: 11px; flex-wrap: wrap; white-space: normal; }
  .ss-body { grid-template-columns: minmax(0, 1fr); }
  .ss-canvas { overflow: hidden; }
  .ss-plane { width: 86em; font-size: 7.5px; left: 50%; transform: translateX(-50%); }
  .ss-switch { flex-wrap: wrap; margin-top: 28px; }
  .ss-switch button { font-size: 13px; padding: 0 14px; }
}
[data-theme="dark"] .ss { --ss-empty: var(--ds-color-night-600); --ss-seat: var(--ds-color-night-900); }
[data-theme="dark"] .ss-canvas { background-color: var(--ds-color-night-950); background-image: radial-gradient(circle, var(--ds-color-night-700) 1px, transparent 1.5px); }
[data-theme="dark"] .ss-stagebar { background: var(--ds-color-night-700); }
[data-theme="dark"] .ss-tbl { background: rgba(184, 146, 248, .14); border-color: rgba(184, 146, 248, .4); color: var(--ds-color-violet-200); }
[data-theme="dark"] .ss-g--g { --c: var(--ds-color-night-300); }
[data-theme="dark"] .ss-g--g.ss-av, [data-theme="dark"] .ss-s > .ss-g--g, [data-theme="dark"] .ss-ghost.ss-g--g { color: var(--ds-color-night-950); }
[data-theme="dark"] .ss-tip { background: var(--ds-color-night-700); }
[data-theme="dark"] .ss-file { background: rgba(184, 146, 248, .1); }
[data-theme="dark"] .ss-switch button { background: var(--ds-color-night-900); border-color: var(--ds-color-night-700); color: var(--ds-color-night-200); }
[data-theme="dark"] .ss-switch button[aria-pressed="true"] { background: rgba(184, 146, 248, .16); border-color: rgba(184, 146, 248, .45); color: var(--ds-color-violet-200); }

/* ---------- Rollentabellen im Stil der Preistabelle (Martin 08.10.2026): kein Kasten, keine graue Kopfzeile,
   Rollen in normaler Schrift, gruene Haken, Strich fuer "nein", Kopflinie dunkles Violett ---------- */
.fp-roles { border: 0; border-radius: 0; background: none; font-size: 14.5px; overflow: visible; }
[data-theme="dark"] .fp-roles { background: none; }
.fp-roles > div { padding: 15px 4px; border-top: 1px solid var(--fp-line); }
.fp-roles > div:last-child { border-bottom: 1px solid var(--fp-line); }
.fp-roles > div > span:first-child { font-weight: 500; color: var(--fp-ink); }
.fp-roles-head { background: none; padding-top: 0 !important; padding-bottom: 14px !important; border-top: 0 !important; border-bottom: 2px solid var(--ds-color-violet-800); font: 700 13.5px/1.3 var(--font-display) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fp-ink) !important; }
.fp-roles-head + div { border-top: 0; }
.fp-roles-head > span:first-child { font: 700 11px/1.3 var(--font-micro); letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-faint) !important; }
.fp-roles i { width: 24px; height: 24px; }
.fp-roles i.y { background: var(--ds-color-green-500); color: var(--ds-color-white); }   /* gruene Haken (Martin 08.10.2026) */
.fp-roles i.n { background: none; color: var(--fp-faint); font-size: 15px; }
[data-theme="dark"] .fp-roles i.y { background: var(--ds-color-green-500); color: var(--ds-color-white); }
.fp-roles i.y svg { width: 13px; height: 13px; stroke-width: 2.6; }
.fp-roles:not(.fp-roles--4) > div { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.fp-roles > div > span:first-child { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { .fp-roles > div { padding: 12px 2px; } .fp-roles-head { font-size: 10.5px !important; } .fp-roles-head > span { hyphens: auto; overflow-wrap: break-word; } }

[data-theme="dark"] .fp-roles-head { border-bottom-color: var(--ds-color-violet-500); }   /* dunkles Violett waere auf Nacht unsichtbar */

/* Ticketing, Zahlungen: Umsatz als hervorgehobene Kachel mit illustrativem Euro- bzw. Dollar-Icon (Martin 08.10.2026) */
.fp-kpi--rev { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; border-color: var(--ds-color-violet-200, #E4D4F4); background: var(--ds-color-violet-50, #F7F2FD); }
.fp-kpi--rev .illuicon { grid-row: span 2; width: 52px; height: 52px; margin: -6px -2px -6px -6px; }
.fp-kpi--rev span { margin-bottom: 4px; color: var(--fp-accent); font-weight: 600; }
.fp-kpi--rev b { color: var(--fp-ink); font-size: 24px; white-space: nowrap; }
[data-theme="dark"] .fp-kpi--rev { background: rgba(117, 49, 174, .2); border-color: rgba(154, 116, 244, .35); }
@media (max-width: 640px) { .fp-kpi--rev .illuicon { width: 40px; height: 40px; } .fp-kpi--rev b { font-size: 20px; } }

/* FAQ mit Trennlinie braucht Luft nach oben, auch direkt nach einer anderen Sektion (Martin 08.10.2026) */
.fp section.fp-faq { padding-top: min(var(--fp-gap), 88px); }

/* Check-in-App, Hero-Handy: Scanbereich prominent (Martin 08.10.2026): QR rund doppelt so gross, Eckwinkel statt Rahmen */
.fp-scan.fp-scan--hero { height: 214px; border-radius: 16px; background-size: auto 136px; }
.fp-scan--hero::before { inset: 22px calc(50% - 92px); border: 0; border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) left top / 24px 3px no-repeat, linear-gradient(#fff, #fff) left top / 3px 24px no-repeat,
    linear-gradient(#fff, #fff) right top / 24px 3px no-repeat, linear-gradient(#fff, #fff) right top / 3px 24px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 24px 3px no-repeat, linear-gradient(#fff, #fff) left bottom / 3px 24px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 24px 3px no-repeat, linear-gradient(#fff, #fff) right bottom / 3px 24px no-repeat; }
.fp-scan--hero i { left: calc(50% - 82px); right: calc(50% - 82px); top: 30px; animation-name: fpScanHero; }
@keyframes fpScanHero { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(152px); } }
@media (prefers-reduced-motion: reduce) { .fp-scan--hero i { animation: none; transform: translateY(76px); } }

/* ---- Hero zentriert (Muster der Branchenseiten) und Integrations-Bühne fp-ihub (API & Integrationen) ---- */
.fp-hero--center .fp-hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; text-align: center; padding-top: clamp(4px, 2vw, 24px); }
.fp-hero--center h1 { font-size: clamp(36px, 5vw, 68px); line-height: 1.04; margin: 14px 0 20px; }
.fp-hero--center h1 span { margin-top: 8px; font-size: .62em; }
.fp-hero--center .fp-lead { max-width: 64ch; margin: 0 auto; }
.fp-hero--center .fp-actions { justify-content: center; margin-top: 28px; }

.fp-ihub { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.fp-ihub::before { content: ""; position: absolute; left: 50%; top: 46%; width: 640px; height: 640px; max-width: 100%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(117, 49, 174, .14), rgba(117, 49, 174, .03) 60%, transparent 74%); pointer-events: none; }
.fp-ihub-map { position: relative; display: grid; grid-template-columns: 26% 32% 26%; column-gap: 8%; align-items: stretch; }
.fp-ihub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fp-ihub-line { fill: none; stroke: var(--fp-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; opacity: .55; animation: fpIhubFlow 1.6s linear infinite; }
.fp-ihub-line--out { animation-direction: normal; }
@keyframes fpIhubFlow { to { stroke-dashoffset: -24; } }
.fp-ihub-col { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; position: relative; }
.fp-ihub-node {
  align-self: center; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--fp-line); background: var(--ds-surface-default); box-shadow: 0 10px 28px rgba(28, 20, 55, .08);
}
.fp-ihub-node i { flex: none; display: flex; }
.fp-ihub-node i .illuicon { width: 34px; height: 34px; }
.fp-ihub-node b { display: block; font-size: 14.5px; }
.fp-ihub-node small { display: block; font-size: 12px; line-height: 1.4; color: var(--fp-muted); }
.fp-ihub-node em { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--fp-accent-soft); color: var(--fp-accent); font-style: normal; font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; }
.fp-ihub-core {
  position: relative; align-self: center; display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: 18px; border: 1px solid var(--fp-line); background: var(--ds-surface-default); box-shadow: 0 18px 48px rgba(28, 20, 55, .14);
}
.fp-ihub-core-top { display: flex; align-items: center; gap: 12px; }
.fp-ihub-core-top > span:not(.fp-st) { flex: 1; min-width: 0; }
.fp-ihub-core-top b { display: block; font-size: 15px; }
.fp-ihub-core-top small { display: block; font-size: 12px; color: var(--fp-muted); }
.fp-ihub-core-top i .illuicon { width: 38px; height: 38px; }
.fp-ihub-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fp-ihub-kpis li { padding: 10px; border-radius: 10px; background: var(--fp-soft); text-align: center; }
.fp-ihub-kpis b { display: block; font-size: 18px; font-family: var(--font-display); }
.fp-ihub-kpis small { display: block; font-size: 11px; color: var(--fp-muted); }
.fp-ihub-log { margin: 0; }
.fp-ihub-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 761px) { .fp-ihub-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-ihub-notes .fp-note-card { position: static; width: auto; animation: none; }
[data-theme="dark"] .fp-ihub-node, [data-theme="dark"] .fp-ihub-core { background: #1B1D24; border-color: #2A2D38; }
/* Bis 980 px: Mitte oben, Systeme als zwei Spalten darunter, ohne Linien. Bis 760 px und bei reduzierter Bewegung kein Fluss. */
@media (max-width: 980px) {
  .fp-ihub-map { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 14px; }
  .fp-ihub-core { grid-column: 1 / -1; grid-row: 1; }
  .fp-ihub-col { grid-template-rows: none; }
  .fp-ihub-lines { display: none; }
}
@media (max-width: 560px) {
  .fp-ihub-map { grid-template-columns: minmax(0, 1fr); }
  .fp-ihub-kpis b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce), (max-width: 760px) { .fp-ihub-line { animation: none; } }