/*
Theme Name: LI Bricks Theme
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* STATELY:START */
/* ==========================================================================
   STATELY — Child Theme (Avada)
   Nur was Avada nicht über Global Options abdeckt. Farben und Schrift kommen
   aus den Global Options; hier stehen die Hilfsklassen der Sektionen.
   ========================================================================== */

:root {
  --st-navy: #0b2559;
  --st-gold: #c9b489;
  --st-bronze: #96803f;
  --st-blue: #123ab4;
  --st-paper: #ffffff;
  --st-paper-alt: #f5f6f8;
  --st-ink: #0e1726;
  --st-soft: #4a5466;
  --st-mute: #737d8c;
  --st-line: rgba(11, 37, 89, .14);
  --wave-gold: url("images/raster-champagner.svg");
  --wave-navy: url("images/raster-navy.svg");
  --wave-wide: url("images/raster-champagner.svg");
}

/* ---------- Textbausteine ---------- */
.st-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--st-bronze); margin: 0 0 18px; }
.st-eyebrow--blue { color: var(--st-blue); }
.st-lead { font-size: 1.12rem; line-height: 1.62; color: var(--st-soft); max-width: 58ch; }
.st-tiny { font-size: .78rem; line-height: 1.5; color: var(--st-mute); }
.st-dim { color: rgba(255, 255, 255, .62); }

.st-pill { display: inline-flex; align-items: center; gap: 9px; font-size: .71rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--st-line);
  border-radius: 999px; padding: 7px 14px; }
.st-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--st-gold); }

.st-tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--st-bronze); background: rgba(150, 128, 63, .11);
  border-radius: 5px; padding: 5px 9px; }
.st-tag--blue { color: var(--st-blue); background: rgba(18, 58, 180, .08); }

.st-step-n { font-size: .73rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--st-blue); font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.st-stat { font-size: 1.7rem; font-weight: 600; letter-spacing: -.038em; margin: 0;
  font-variant-numeric: tabular-nums; }
.st-stat-l { font-size: .79rem; color: rgba(255, 255, 255, .62); margin: 5px 0 0; }
.st-role { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-bronze); margin: 6px 0 0; }
.st-av { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.18rem; font-weight: 600; color: var(--st-gold); background: var(--st-navy);
  margin: 0 0 18px; }

.st-kv { width: 100%; border-collapse: collapse; margin: 18px 0 0; }
.st-kv th { text-align: left; font-size: .69rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--st-mute); font-weight: 500; padding: 0 0 2px; width: 42%; }
.st-kv td { font-size: .99rem; font-weight: 600; letter-spacing: -.022em; padding: 0 0 14px; }

.st-callout { border-left: 3px solid var(--st-bronze); background: rgba(150, 128, 63, .09);
  padding: 20px 24px; border-radius: 0 14px 14px 0; }
.st-toc { list-style: none; margin: 0; padding: 0; }
.st-toc li { border-left: 1px solid var(--st-line); }
.st-toc a { display: block; font-size: .87rem; color: var(--st-soft); padding: 7px 0 7px 15px; }
.st-toc a:hover { color: var(--st-ink); }

/* ---------- Dunkle Sektionen ---------- */
.st-dark, .st-dark h1, .st-dark h2, .st-dark h3, .st-dark h4, .st-dark h5, .st-dark h6,
.st-dark p, .st-dark li, .st-dark strong, .st-dark td, .st-dark th,
.st-dark .fusion-title .title-heading-left, .st-dark .fusion-title .title-heading-center,
.st-dark .fusion-title-heading, .st-dark .fusion-text, .st-dark .fusion-text p,
.st-dark .fusion-form-field label, .st-dark .fusion-form-label { color: #f5f7fa !important; }
.st-dark .st-eyebrow, .st-dark .st-eyebrow p { color: var(--st-gold) !important; }
.st-dark .st-lead, .st-dark .st-tiny, .st-dark .st-lead p, .st-dark .st-stat-l { color: rgba(255, 255, 255, .72) !important; }
.st-dark .st-pill { border-color: rgba(255, 255, 255, .16); }
.st-dark .st-kv th { color: rgba(255, 255, 255, .55) !important; }
.st-dark .fusion-button.button-default { background: var(--st-gold); color: var(--st-navy); }
.st-dark .fusion-button.button-default:hover { background: #d6c49f; }
.st-dark a { color: var(--st-gold); }

/* ---------- Linienraster ---------- */
.st-dark:not(.st-header), .st-cta { position: relative; overflow: hidden; }
.st-dark > .fusion-builder-row, .st-cta > .fusion-builder-row { position: relative; z-index: 1; }
.st-dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wave-wide) center / cover no-repeat; opacity: .15;
}
.st-cta::after { opacity: .11; }
.st-stats::after { opacity: 0; }
.st-wave-light { position: relative; overflow: hidden; }
.st-wave-light::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wave-navy) center / cover no-repeat; opacity: .07;
}

/* ---------- Karten ---------- */
.fusion-layout-column.st-card { background: var(--st-paper); border: 1px solid var(--st-line);
  border-radius: 18px; }

/* ---------- Formular im dunklen Band ---------- */
.st-dark .fusion-form-form-wrapper { max-width: 480px; }
.st-dark .fusion-form-input { background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16); color: #f5f7fa; border-radius: 999px;
  padding: 14px 20px; }
.st-dark .fusion-form-input::placeholder { color: rgba(255, 255, 255, .5); }
.st-cta .fusion-form-form-wrapper { margin-inline: auto; }

/* ---------- Mobil ---------- */
@media (max-width: 800px) {
  .st-kv th { width: 46%; }
  .st-stat { font-size: 1.45rem; }
}

/* ---------- Kopf- und Fusszeile (Layout Sections) ---------- */
.st-header .fusion-menu > li > a { font-size: .87rem; font-weight: 500; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .78); }
.st-header .fusion-menu > li > a:hover,
.st-header .fusion-menu > li.current-menu-item > a { color: #fff; }
.st-btn-gold .fusion-button { background: var(--st-gold); color: var(--st-navy); }

.st-ftr-t { font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin: 0 0 17px; }
.st-ftr-l { list-style: none; margin: 0; padding: 0; }
.st-ftr-l li + li { margin-top: 11px; }
.st-ftr-l a { font-size: .88rem; color: rgba(255, 255, 255, .78); }
.st-ftr-l a:hover { color: #fff; }
.st-footer .st-tiny { color: rgba(255, 255, 255, .55); max-width: 80ch; }

/* ---------- Formular ---------- */
.st-form-submit .fusion-button { border-radius: 999px; }
.st-dark .fusion-form-consent-label,
.st-dark .fusion-form-consent-label *,
.st-dark .fusion-form-consent-description { color: rgba(255, 255, 255, .66) !important; font-size: .78rem; }


/* ==========================================================================
   Kopf- und Fusszeile (Layout Sections)
   ========================================================================== */
.fusion-tb-header .awb-menu a,
.fusion-tb-header .awb-menu .awb-menu__main-a { color: #ffffff !important; font-size: .84rem;
  letter-spacing: -.005em; font-weight: 500; }
.fusion-tb-header .awb-menu .menu-text,
.fusion-tb-header .awb-menu li > a .menu-text,
.fusion-tb-header .awb-menu .current-menu-item > a .menu-text,
.fusion-tb-header .awb-menu .current_page_item > a .menu-text { color: #ffffff !important; }
.fusion-tb-header .awb-menu li > a:hover .menu-text,
.fusion-tb-header .awb-menu a:hover { color: var(--st-gold) !important; }
.fusion-tb-header .awb-menu__main-ul { gap: 30px; }
.fusion-tb-header .awb-menu__main-li { margin: 0; }
/* Kopfzeile: Avada bringt hier reichlich eigenes Polster mit */
.fusion-tb-header > p, .fusion-tb-footer > p { display: none !important; }
.fusion-tb-header .awb-menu__main-ul { min-height: 0 !important; }
.fusion-tb-header .awb-menu__main-li,
.fusion-tb-header .awb-menu__main-li > a { height: auto !important; min-height: 0 !important; }
.fusion-tb-header .fusion-layout-column,
.fusion-tb-header .fusion-column-wrapper { margin-bottom: 0 !important; }
.fusion-tb-header .fusion-fullwidth { --awb-padding-top: 18px !important; --awb-padding-bottom: 18px !important; }
.fusion-tb-header .fusion-builder-row { align-items: center !important; }

/* Menue und Button in der Kopfzeile auf einer Linie */
.fusion-tb-header .fusion-layout-column:last-child .fusion-column-wrapper {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: flex-end !important; gap: 26px !important; }
.fusion-tb-header .fusion-layout-column:last-child .fusion-column-wrapper > * { margin-bottom: 0 !important; }

/* Avada setzt um den Inhalt herum eigenes Padding — unsere Sektionen bringen ihres mit */
#main { padding-top: 0 !important; padding-bottom: 0 !important; }

.fusion-tb-footer a { color: rgba(255, 255, 255, .72) !important; }
.fusion-tb-footer a:hover { color: var(--st-gold) !important; }

/* ==========================================================================
   Mobiles / Tablet-Menue — gilt sobald Avada collapse-enabled setzt
   (nicht an 900px koppeln: Tablets liegen darueber)
   ========================================================================== */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__m-collapse-icon,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-open,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-close,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__m-toggle .collapsed-nav-text { display: none !important; }

.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__m-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li { width: 100% !important; }
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li,
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li > a,
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__sub-ul,
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__sub-li,
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__sub-li > a { background: transparent !important; }
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li > a:hover { background: rgba(255, 255, 255, .07) !important; }
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li > a {
  height: auto !important; min-height: 0 !important; padding: 14px 20px !important;
  justify-content: flex-start !important; width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li:last-child > a { border-bottom: 0 !important; }
.fusion-tb-header .awb-menu.collapse-enabled.expanded .awb-menu__main-li > a .menu-text {
  color: #ffffff !important; font-size: .95rem !important; }

/* Header-Container mit .st-dark darf das Dropdown nicht abschneiden */
.fusion-tb-header .st-dark,
.fusion-tb-header .fusion-fullwidth,
.fusion-tb-header .fusion-sticky-container {
  overflow: visible !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Typografie skaliert fluid, damit die 66px-Ueberschrift das Handy nicht sprengt */
h1, .fusion-title h1, .st-dark h1 { font-size: clamp(2.05rem, 6.4vw, 4.125rem) !important;
  line-height: 1.05 !important; }
h2, .fusion-title h2 { font-size: clamp(1.7rem, 4.6vw, 2.875rem) !important; line-height: 1.1 !important; }
h3, .fusion-title h3 { font-size: clamp(1.18rem, 2.2vw, 1.625rem) !important; }

@media (max-width: 1024px) {
  main .fusion-fullwidth,
  .fusion-tb-footer .fusion-fullwidth { --awb-padding-left: 24px !important; --awb-padding-right: 24px !important; }
}

@media (max-width: 900px) {
  /* Avada steuert Spaltenbreiten ueber eigene Variablen — die setzen wir um,
     statt mit width-Overrides dagegen zu arbeiten. */
  main .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column {
    --awb-width-medium: 100% !important; --awb-col-width: 100% !important; }
  main .fusion-fullwidth.st-stats > .fusion-builder-row > .fusion-layout-column {
    --awb-width-medium: 50% !important; --awb-width-small: 50% !important; --awb-col-width: 50% !important;
    --awb-padding-top: 8px !important; --awb-padding-bottom: 8px !important;
    --awb-margin-bottom-small: 16px !important; --awb-margin-bottom-medium: 16px !important; }
  main .fusion-fullwidth.st-stats .fusion-column-wrapper { padding-top: 8px !important; padding-bottom: 8px !important; }
  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column {
    --awb-width-small: 50% !important; --awb-col-width: 50% !important; }

  main .fusion-fullwidth { --awb-padding-top: 62px !important; --awb-padding-bottom: 62px !important;
    --awb-padding-left: 24px !important; --awb-padding-right: 24px !important; }

  /* Kopfzeile bleibt eine Zeile: Logo links, Button und Burger rechts */
  .fusion-tb-header .fusion-builder-row { display: flex !important; flex-direction: row !important;
    align-items: center !important; flex-wrap: nowrap !important; }
  .fusion-tb-header .fusion-layout-column { width: auto !important; max-width: none !important;
    flex: 0 0 auto !important; margin: 0 !important; --awb-width-small: auto; --awb-width-medium: auto; }
  .fusion-tb-header .fusion-layout-column:last-child { margin-left: auto !important; }
  .fusion-tb-header .fusion-column-wrapper { display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 12px; padding: 0 !important; }
  .fusion-tb-header .fusion-button { width: auto !important; padding: 10px 16px !important;
    font-size: .78rem !important; }
  .fusion-tb-footer .fusion-button { width: auto !important; }
}

@media (max-width: 800px) {
  .st-kv th { width: 46%; }
  .st-stat { font-size: 1.45rem; }
  .st-lead { font-size: 1.02rem; max-width: none; }
  main .fusion-fullwidth { --awb-padding-left: 18px !important; --awb-padding-right: 18px !important; }
  .st-dark .fusion-form-form-wrapper { max-width: none; }
  .fusion-form-input { width: 100% !important; }
  main .fusion-button { width: 100%; text-align: center; justify-content: center; }
  .st-av { width: 44px; height: 44px; border-radius: 11px; font-size: 1rem; }
}

@media (max-width: 560px) {
  .st-eyebrow { font-size: .64rem; letter-spacing: .16em; margin-bottom: 12px; }
  .st-pill { font-size: .64rem; padding: 6px 11px; }
  .st-stat { font-size: 1.28rem; }
  .st-kv { font-size: .86rem; }
  .st-kv th, .st-kv td { display: block; width: auto; }
  .st-kv th { padding-top: 12px; }
  .st-tiny { font-size: .73rem; }
  main .fusion-fullwidth { --awb-padding-top: 52px !important; --awb-padding-bottom: 52px !important; }
}

/* overflow-x:hidden auf html clippt iOS Overlay-Menus (fixed/absolute). clip nicht. */
html { overflow-x: clip; overflow-y: auto; }
body { overflow-x: clip; }
img, svg, table, iframe, video, embed { max-width: 100%; height: auto; }

/* ==========================================================================
   QA-Runde: Kontrast und Lesbarkeit
   Alle Werte gegen WCAG AA geprueft (4.5:1 fuer Text unter 24px).
   ========================================================================== */

:root {
  --st-bronze: #7a6733;   /* war #96803f — 3.8:1 auf Papier, jetzt 5.2:1 */
  --st-mute:   #616b7a;   /* war #737d8c — 3.9:1 auf Papier, jetzt 5.4:1 */
}

/* Labels waren mit 11px zu klein */
.st-eyebrow { font-size: .75rem; }
.st-tag, .st-role { font-size: .75rem; }
.st-kv th { font-size: .75rem; }

/* Auf dunklem Grund traegt Champagner, nicht Bronze */
.st-dark .st-tag, .st-dark .st-role, .st-dark .st-step-n { color: var(--st-gold) !important; }
.st-dark .st-tag { background: rgba(201, 180, 137, .13); }

/* Champagner-Buttons brauchen Navy-Schrift — weiss ergab 2.0:1 */
.st-dark .fusion-button, .st-dark .fusion-button .fusion-button-text,
.st-dark .fusion-button.button-default .fusion-button-text,
.fusion-tb-header .fusion-button, .fusion-tb-header .fusion-button .fusion-button-text {
  color: var(--st-navy) !important; }
.st-dark .fusion-button, .fusion-tb-header .fusion-button {
  background: var(--st-gold) !important; border-color: var(--st-gold) !important; }
.st-dark .fusion-button:hover, .fusion-tb-header .fusion-button:hover {
  background: #d8c8a4 !important; border-color: #d8c8a4 !important; }

/* Formular-Meldungen: Markenfarben statt Default-Grün/Browser-Rot */
.st-pill { font-size: .75rem; }
.st-step-n { font-size: .75rem; }
.st-ftr-t { font-size: .75rem; }

/* Platzhalterseiten brauchen Luft nach oben, sonst klebt die H1 am Kopf */
.st-platzhalter { --awb-padding-top: 96px !important; --awb-padding-bottom: 96px !important; }
@media (max-width: 900px) { .st-platzhalter { --awb-padding-top: 62px !important; --awb-padding-bottom: 62px !important; } }

/* ==========================================================================
   CI-Fassung (Marken- und CI-Handbuch v1.0)
   Neue Bausteine: Foto-Platzhalter, Absenderblock, Risikohinweis.
   Ergaenzt Kapitel 06 um den fehlenden Slot "Warnung / Risiko".
   ========================================================================== */

:root {
  --st-risk: #9c3f2a;          /* Warnung / Risiko — 5.6:1 auf Papier */
  --st-risk-lo: #f2c3b5;       /* dieselbe Familie, aufgehellt fuer dunkle Flaechen */
}

/* Foto-Platzhalter — sichtbar als Platzhalter, nicht als Gestaltung */
.st-photo { display: grid; place-items: center; text-align: center;
  border: 1px dashed rgba(11, 37, 89, .32); border-radius: 14px;
  color: var(--st-mute); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(11,37,89,.035) 9px 18px); }
.st-photo--objekt { aspect-ratio: 3 / 2; }
.st-photo--person { aspect-ratio: 1 / 1; max-width: 200px; margin: 0 0 18px; }
.st-dark .st-photo { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .66);
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.05) 9px 18px); }

/* Absender — R9: die Marke hat ein Gesicht und einen Namen */
.st-absender { margin: 0 0 6px; font-size: .95rem; line-height: 1.45; }
.st-absender strong { font-weight: 600; }

/* Risikohinweis — R2 und R14: im Sichtfeld der Zahl, Teil des Designs */
.st-risiko { margin: 20px 0 0; padding: 14px 0 0 16px; font-size: .84rem; line-height: 1.6;
  border-left: 3px solid var(--st-risk); color: var(--st-soft); }
.st-risiko strong { color: var(--st-risk); font-weight: 600; }
.st-risiko a { color: var(--st-soft); text-decoration: underline; text-underline-offset: 3px; }
.st-dark .st-risiko { border-left-color: var(--st-risk-lo); color: rgba(255, 255, 255, .8) !important; }
.st-dark .st-risiko strong { color: var(--st-risk-lo) !important; }
.st-dark .st-risiko a { color: rgba(255, 255, 255, .8) !important; }
.st-risiko--fuss { max-width: 62ch; margin-inline: auto; }

/* Der eine Schritt: Formular mittig in der Abschluss-Sektion */
.st-dark .fusion-form-form-wrapper { margin-inline: auto; }

/* Karten der CI-Fassung — als Klasse, nicht ueber Spaltenattribute */
.st-card > .fusion-column-wrapper { padding: 28px !important; border: 1px solid rgba(11, 37, 89, .14);
  border-radius: 16px; }
.st-dark .st-card > .fusion-column-wrapper { border-color: rgba(255, 255, 255, .16);
  background: #12315f; }
.st-card--place > .fusion-column-wrapper { background: var(--st-paper-alt);
  border-color: rgba(11, 37, 89, .2); }

/* Avada gibt Spalten ohne gesetzte Farbe ein weisses Flaechen-Fallback —
   auf dunklen Sektionen erzeugt das weisse Raender neben den Karten. */
.st-dark .fusion-layout-column { background-color: transparent !important; }

/* ==========================================================================
   CI-Fassung v2 — mehr Tempo, Revolut-Anleihen
   Grosse Zahl, weicher Farbverlauf, gerundete Karten mit Anhebung.
   ========================================================================== */

/* Hero mit Farbverlauf statt flacher Flaeche */
.st-hero-x { position: relative; overflow: hidden; }
.st-hero-x::before {
  content: ""; position: absolute; inset: -25% -12% -10% -12%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 52% at 20% 16%, rgba(18, 58, 180, .58), transparent 68%),
    radial-gradient(42% 44% at 84% 26%, rgba(201, 180, 137, .20), transparent 70%),
    radial-gradient(72% 58% at 62% 104%, rgba(18, 58, 180, .34), transparent 70%); }
.st-hero-x > .fusion-builder-row { position: relative; z-index: 2; }
.st-hero-x::after { z-index: 1; }

/* Ueberschrift eine Stufe groesser und enger */
.st-hero-x h1, .st-hero-x .fusion-title h1 {
  font-size: clamp(2.5rem, 6.6vw, 5.2rem) !important; line-height: .98 !important;
  letter-spacing: -.045em !important; }
.st-hl { color: var(--st-gold); }

.st-pill--live::before { animation: st-puls 2.4s ease-in-out infinite; }
@keyframes st-puls { 0%, 100% { opacity: 1; transform: scale(1); }
                     50% { opacity: .45; transform: scale(.72); } }

/* Zahlenreihe */
.st-nums { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin: 34px 0 4px; }
.st-num { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -.05em;
  line-height: 1; margin: 0; color: var(--st-gold); font-variant-numeric: tabular-nums; }
.st-num-l { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; margin: 9px 0 0;
  color: rgba(255, 255, 255, .66) !important; }

.st-risiko--inline { font-size: .78rem; margin-top: 22px; max-width: 62ch; }
.st-center { text-align: center; margin-inline: auto; }
.st-quote { font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .72) !important;
  border-left: 2px solid var(--st-gold); padding-left: 13px; margin: 0 0 22px; }

/* Karten: groesserer Radius, Anhebung beim Ueberfahren */
.st-card > .fusion-column-wrapper { border-radius: 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.st-card:hover > .fusion-column-wrapper { transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(11, 37, 89, .12); border-color: rgba(11, 37, 89, .26); }
.st-dark .st-card:hover > .fusion-column-wrapper { box-shadow: 0 24px 52px rgba(0, 0, 0, .38);
  border-color: rgba(201, 180, 137, .45); }
.st-card--glow > .fusion-column-wrapper { border-color: rgba(201, 180, 137, .38) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34); }
.st-card--place > .fusion-column-wrapper { border-radius: 22px; }
.st-photo { border-radius: 18px; }

/* Formular im Hero: kompakter, damit die Karte nicht auseinanderfaellt */
.st-card--glow .fusion-form-form-wrapper { max-width: none; margin-top: 4px; }
.st-card--glow .fusion-button { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .st-nums { gap: 22px 34px; }
  .st-hero-x::before { inset: -10% -20% 0 -20%; }
}

/* Zweite Zeile der Ueberschrift traegt die Substanz — sie darf nicht so gross
   sein wie der Aufbruch darueber. */
.st-hero-x h1 .st-hl { display: block; font-size: .56em; line-height: 1.06;
  letter-spacing: -.032em; margin-top: .2em; }

/* Offene Werte als Platzhalter kennzeichnen, nicht als Schauzahl setzen */
.st-num--ph { font-size: 1.02rem !important; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 500; color: rgba(255, 255, 255, .55) !important; padding-top: .8em; }
.st-nums > div { min-width: 150px; }

/* Kleinstgroessen aus der QA-Runde nachziehen */
.st-num-l { font-size: .75rem; }
.st-photo { font-size: .75rem; }

/* ==========================================================================
   Gegenueberstellung Bisher / Mit STATELY
   ========================================================================== */
.st-vs > .fusion-column-wrapper { border-top: 1px solid rgba(11, 37, 89, .12);
  padding-top: 26px !important; padding-bottom: 6px !important; }
.st-vs-l { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--st-mute); margin: 0 0 10px; }
.st-vs-l--gut { color: var(--st-bronze); }
.st-vs-bisher, .st-vs-jetzt { position: relative; padding-left: 28px; margin: 0;
  line-height: 1.6; }
.st-vs-bisher { color: var(--st-soft); }
.st-vs-bisher::before { content: "\00d7"; position: absolute; left: 2px; top: -1px;
  font-size: 1.15em; line-height: 1.4; color: var(--st-mute); }
.st-vs-jetzt { font-weight: 600; color: var(--st-ink); }
.st-vs-jetzt::before { content: "\2192"; position: absolute; left: 0; top: 0;
  color: var(--st-bronze); font-weight: 400; }

@media (max-width: 900px) {
  .st-vs--gut > .fusion-column-wrapper { border-top: 0; padding-top: 12px !important; }
}

/* Zahlenreihe als festes Dreierraster — sonst bricht die dritte Zahl um */
.st-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.st-nums > div { min-width: 0; }
.st-num { font-size: clamp(1.7rem, 3.2vw, 2.7rem); white-space: nowrap; }
.st-num-l { letter-spacing: .12em; line-height: 1.45; }
@media (max-width: 700px) {
  .st-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-nums > div:last-child { grid-column: 1 / -1; }
}

/* Der Opener ist laenger als vorher — Spitze etwas zuruecknehmen,
   damit er auf drei Zeilen bleibt statt auf vier. */
.st-hero-x h1, .st-hero-x .fusion-title h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.35rem) !important; }
.st-hero-x h1 .st-hl { font-size: .58em; }

/* ==========================================================================
   Musterfamilie und Navy-Abstufungen
   Drei Derivate derselben Kurve (welle · dicht · weit), jeweils in Champagner
   und Navy. Muster werden bewusst gesetzt, nicht flaechendeckend.
   ========================================================================== */

:root {
  --st-navy-900: #061635;   /* tiefster Ton — Hero-Grund */
  --st-navy-700: #12315f;   /* mittlerer Ton — CTA, Karten */
  --st-navy-600: #17407a;   /* hellster Navy — Verlaeufe, Linien */

  --r-welle-gold: url("images/raster-welle-gold.svg");
  --r-dicht-gold: url("images/raster-dicht-gold.svg");
  --r-weit-gold:  url("images/raster-weit-gold.svg");
  --r-welle-navy: url("images/raster-welle-navy.svg");
  --r-dicht-navy: url("images/raster-dicht-navy.svg");
  --r-weit-navy:  url("images/raster-weit-navy.svg");
}

/* Kopfzeile bleibt immer musterfrei — Lesbarkeit geht vor */
.st-header::after, .fusion-tb-header .fusion-fullwidth::after { display: none !important; }

/* Sektionen, die das geerbte Muster nicht wollen */
.st-plain::after { display: none !important; }

/* Musterschicht */
.st-raster { position: relative; overflow: hidden; }
.st-raster > .fusion-builder-row { position: relative; z-index: 2; }
.st-raster::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-position: center; background-size: cover; background-repeat: no-repeat; }

.st-raster--welle::before { background-image: var(--r-welle-gold); opacity: .15; }
.st-raster--dicht::before { background-image: var(--r-dicht-gold); opacity: .11; }
.st-raster--weit::before  { background-image: var(--r-weit-gold);  opacity: .17; }
.st-raster--welle.st-raster--hell::before { background-image: var(--r-welle-navy); opacity: .07; }
.st-raster--dicht.st-raster--hell::before { background-image: var(--r-dicht-navy); opacity: .055; }
.st-raster--weit.st-raster--hell::before  { background-image: var(--r-weit-navy);  opacity: .08; }

/* Ausschnitte — das Muster taucht auf und verschwindet wieder */
.st-raster--rechts::before {
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 76%);
          mask-image: linear-gradient(100deg, transparent 34%, #000 76%); }
.st-raster--links::before {
  -webkit-mask-image: linear-gradient(260deg, transparent 34%, #000 76%);
          mask-image: linear-gradient(260deg, transparent 34%, #000 76%); }
.st-raster--band::before {
  inset: auto 0 0 0; height: 46%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
          mask-image: linear-gradient(180deg, transparent, #000 62%); }
.st-raster--ecke::before {
  -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000 12%, transparent 70%);
          mask-image: radial-gradient(70% 80% at 100% 0%, #000 12%, transparent 70%); }

/* ==========================================================================
   Hero — tiefer Grund, imposanter Verlauf
   ========================================================================== */
/* Der Verlauf liegt auf dem Element selbst — so bleiben beide
   Pseudo-Elemente fuer Muster und Alt-Regeln frei. */
.st-hero-x {
  background-color: var(--st-navy-900) !important;
  background-image:
    radial-gradient(74% 62% at 14% 4%,   rgba(23, 64, 122, .95), transparent 62%),
    radial-gradient(44% 42% at 90% 16%,  rgba(201, 180, 137, .20), transparent 66%),
    radial-gradient(98% 76% at 76% 114%, rgba(18, 58, 180, .55), transparent 64%),
    linear-gradient(162deg, rgba(6, 22, 53, 0) 34%, rgba(6, 22, 53, .90) 100%) !important;
  background-repeat: no-repeat !important; background-size: cover !important; }
.st-hero-x::before { z-index: 1; }
.st-hero-x > .fusion-builder-row { position: relative; z-index: 3; }

/* CTA in einem helleren Navy als der Hero — dadurch bekommt die Seite Tiefe */
.st-cta-x { background-color: var(--st-navy-700) !important; }

/* Karten im Hero auf dem tiefen Grund etwas anheben */
.st-hero-x .st-card--glow > .fusion-column-wrapper { background: rgba(23, 64, 122, .42) !important;
  backdrop-filter: blur(2px); }

/* Fusszeile: Muster nur noch als weicher Sockel, nicht flaechendeckend */
.st-footer { position: relative; overflow: hidden; }
.st-footer::after {
  background-image: var(--r-weit-gold) !important;
  inset: auto 0 0 0 !important; height: 58% !important; opacity: .09 !important;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 72%);
          mask-image: linear-gradient(180deg, transparent, #000 72%); }

/* ==========================================================================
   Launch: Monogramme, Foto, Rechtstexte, Glossar, Kontakt
   ========================================================================== */

/* Monogramm statt Porträt: Platte in Navy, Buchstabe ausgespart (Logo-Regel) */
.st-mono { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 0 20px;
  border-radius: 22px; background: var(--st-navy); color: var(--st-paper) !important;
  font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.st-mono--klein { width: 56px; height: 56px; margin: 0; border-radius: 15px; font-size: 1.45rem; flex: none; }
.st-dark .st-mono { background: #fff; color: var(--awb-color6, #0b2559) !important; }
.st-sender { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.st-sender .st-absender { margin: 0; }

/* Foto */
.st-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; display: block; }
.st-figure { margin-bottom: 12px !important; }

/* Rechtstexte und Wissensseiten */
.st-page .fusion-column-wrapper { max-width: 760px; }
.st-legal h2 { font-size: 1.22rem !important; line-height: 1.35; letter-spacing: -.015em; margin: 2.2em 0 .55em !important; }
.st-legal h2:first-child { margin-top: 1.2em !important; }
.st-legal p, .st-legal li { font-size: 1rem; line-height: 1.7; color: var(--st-soft); max-width: 68ch; }
.st-legal ul, .st-legal ol { padding-left: 1.2em; }
.st-legal li { margin: 0 0 .5em; }
.st-legal a, .st-glossar a, .st-legal-nav a { color: var(--st-blue); text-underline-offset: 3px; }
.st-kv--legal { margin-top: 8px; }
.st-kv--legal td { font-weight: 500; }
.st-legal-nav { margin-top: 48px !important; padding-top: 18px; border-top: 1px solid var(--st-line); }
.st-steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.st-steps li { position: relative; padding-left: 44px; }
.st-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .1em;
  width: 28px; height: 28px; border-radius: 8px; background: var(--st-navy); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 600; }

/* Glossar */
.st-glossar { margin: 28px 0 0; border-top: 1px solid var(--st-line); }
.st-glossar dt { font-weight: 600; font-size: 1.02rem; color: var(--st-ink); padding: 20px 0 4px; letter-spacing: -.01em; }
.st-glossar dd { margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--st-line);
  color: var(--st-soft); line-height: 1.65; max-width: 68ch; }

/* Kontakt und Wissens-Karten */
.st-kontakt-mail { margin-top: 14px !important; font-weight: 600; word-break: break-word; }
.st-kontakt-mail a { color: var(--st-blue); }
.st-more { margin-top: 14px !important; font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--st-blue); }
.st-more::after { content: " \2192"; }

/* ==========================================================================
   Startseite v4: "US-Immobilien. Vom Sofa aus."
   ========================================================================== */
.st-v4-hero h1, .st-v4-hero .fusion-title h1 {
  font-size: clamp(3rem, 8.4vw, 6.6rem) !important; line-height: .94 !important;
  letter-spacing: -.055em !important; margin-bottom: .1em; }
.st-hl2 { color: var(--st-gold); }
.st-v4-lead { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.45; font-weight: 500;
  color: #fff !important; max-width: 30ch; margin: 22px 0 10px; }
.st-v4-sub { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .72) !important;
  max-width: 44ch; margin: 0 0 26px; }
.st-v4-hero .fusion-form-form-wrapper { max-width: 460px; }
.st-v4-hero .fusion-button { width: 100%; justify-content: center; }

/* Foto mit schwebenden Etiketten */
.st-v4-fotospalte > .fusion-column-wrapper { justify-content: center !important; }
.st-v4-foto { position: relative; margin: 8px 0 34px; max-width: 520px; margin-inline: auto; }
.st-v4-foto img { display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover;
  border-radius: 26px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  outline: 1px solid rgba(201, 180, 137, .35); outline-offset: 10px; }
.st-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; background: #fff; color: var(--st-navy);
  font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28); animation: st-schweben 6s ease-in-out infinite; }
.st-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-gold);
  box-shadow: 0 0 0 4px rgba(201, 180, 137, .28); }
.st-chip--a { top: 26px; left: -22px; }
.st-chip--b { top: 38%; right: -20px; background: var(--st-gold); animation-delay: -3s; }
.st-v4-card { position: absolute; left: 22px; right: 22px; bottom: -28px; display: grid; gap: 4px;
  padding: 16px 18px; border-radius: 18px; background: rgba(11, 37, 89, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 180, 137, .4); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.st-v4-card-l { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-gold); }
.st-v4-card-t { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.st-v4-card-f { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px;
  color: rgba(255, 255, 255, .8); }
.st-v4-card-f b { font-weight: 500; }
@keyframes st-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Zahlenband */
.st-v4-strip { border-top: 0; }
.st-v4-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(201, 180, 137, .32); }
.st-v4-nums > div { padding: 26px 20px 0 0; }
.st-v4-nums > div + div { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .1); }
.st-v4-nums b { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1;
  letter-spacing: -.05em; color: var(--st-gold); font-variant-numeric: tabular-nums; }
.st-v4-nums span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4;
  color: rgba(255, 255, 255, .66); }

/* Zwoelf zu eins */
.st-v4-todo { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-v4-todo li { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--st-line); font-size: 14px; line-height: 1.3;
  color: var(--st-soft); }
.st-v4-todo li::before { content: ""; flex: 0 0 18px; height: 18px; border-radius: 50%;
  background: var(--st-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='%23c9b489' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.st-v4-todo li.st-v4-todo-du { grid-column: 1 / -1; display: block; padding: 22px 24px;
  background: var(--st-navy); border-color: var(--st-navy); color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.03em;
  box-shadow: 0 22px 48px rgba(11, 37, 89, .24); }
.st-v4-todo li.st-v4-todo-du::before { display: none; }
.st-v4-todo-du small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--st-gold); margin-bottom: 6px; }

/* Objekt: Fakten und Zeitleiste */
.st-v4-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 26px 0 30px;
  border-top: 1px solid var(--st-line); }
.st-v4-facts > div { padding: 16px 0; border-bottom: 1px solid var(--st-line); }
.st-v4-facts > div:nth-child(odd) { padding-right: 16px; }
.st-v4-facts dt { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--st-mute); }
.st-v4-facts dd { margin: 6px 0 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600;
  letter-spacing: -.03em; color: var(--st-navy); font-variant-numeric: tabular-nums; }
.st-v4-lauf-h { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--st-bronze);
  margin: 0 0 14px; }
.st-v4-lauf { list-style: none; margin: 0 0 26px; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.st-v4-lauf li { position: relative; padding-top: 22px; }
.st-v4-lauf li::before { content: ""; position: absolute; top: 5px; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2px solid rgba(11, 37, 89, .25); z-index: 1; }
.st-v4-lauf li::after { content: ""; position: absolute; top: 10px; left: 12px; right: -8px; height: 1px;
  background: rgba(11, 37, 89, .18); }
.st-v4-lauf li:last-child::after { display: none; }
.st-v4-lauf li.is-now::before { background: var(--st-gold); border-color: var(--st-gold);
  box-shadow: 0 0 0 5px rgba(201, 180, 137, .3); }
.st-v4-lauf b { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--st-navy); }
.st-v4-lauf span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--st-mute); }
.st-v4-lauf li.is-now span { color: var(--st-bronze); font-weight: 600; }
.st-v4-objektbild img { aspect-ratio: 4 / 4.4; object-fit: cover; box-shadow: 0 30px 70px rgba(11, 37, 89, .18); }

/* Drei Schritte: grosse Konturziffern */
.st-v4-n { font-size: clamp(4.5rem, 9vw, 7rem); font-weight: 600; line-height: .9; letter-spacing: -.06em;
  margin: 0 0 14px; color: transparent; -webkit-text-stroke: 1.5px var(--st-bronze); }
.st-v4-step:hover .st-v4-n { color: var(--st-gold); -webkit-text-stroke-color: var(--st-gold);
  transition: color .3s ease; }

/* Fragen */
.st-v4-faq details { border-bottom: 1px solid var(--st-line); }
.st-v4-faq details:first-child { border-top: 1px solid var(--st-line); }
.st-v4-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 20px 0; font-size: 1.1rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--st-navy); }
.st-v4-faq summary::-webkit-details-marker { display: none; }
.st-v4-faq summary::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--st-line); font-weight: 400;
  font-size: 20px; color: var(--st-bronze); transition: transform .25s ease; }
.st-v4-faq details[open] summary::after { transform: rotate(45deg); }
.st-v4-faq summary:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 4px; }
.st-v4-faq details p { margin: 0 0 22px; max-width: 62ch; color: var(--st-soft); }

@media (max-width: 1024px) {
  .st-v4-todo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .st-v4-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-v4-nums > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .st-v4-foto { margin-top: 36px; }
  .st-chip--a { left: 12px; top: 14px; }
  .st-chip--b { right: 12px; }
  .st-v4-card { left: 12px; right: 12px; }
  .st-v4-lauf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-v4-lauf li { padding: 0 0 16px 26px; }
  .st-v4-lauf li::before { top: 3px; }
  .st-v4-lauf li::after { top: 16px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
}
@media (max-width: 480px) {
  .st-v4-todo { grid-template-columns: minmax(0, 1fr); }
  .st-v4-todo li { padding: 11px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-chip { animation: none; }
}

/* v4 Feinschliff nach Sichtung */
.st-v4-hero h1, .st-v4-hero .fusion-title h1 {
  font-size: clamp(2.4rem, 5.4vw, 5.4rem) !important; hyphens: manual !important;
  -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
.st-v4-hero .fusion-form-form-wrapper { margin-inline: 0 !important; }
/* Avada 7.16+/Builder 3.16 setzt .fusion-tb-header auf transparent und
   der Sticky-Spacer ist oft ~10px höher als der fixed Header → weiße Lücke. */
.fusion-tb-header,
.fusion-tb-header .fusion-sticky-spacer {
  background-color: var(--st-navy) !important;
}

/* Sticky-Zustand: feste Navy (kein Background-Flash über weißer #team-Sektion).
   Nur wenn Avada die Sticky-Klasse setzt — nicht die Fullwidth dauerhaft überschreiben. */
.fusion-tb-header .fusion-sticky-container {
  --awb-sticky-background-color: #0b2559;
}
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition {
  background-color: #0b2559 !important;
}
.st-v4-hero .st-v4-nums { margin-top: clamp(40px, 6vw, 72px); }
.st-v4-steps .st-v4-n { font-size: clamp(5.5rem, 11vw, 8.5rem); -webkit-text-stroke: 2px var(--st-gold); }
.st-v4-steps .fusion-layout-column:last-child .st-v4-n { color: var(--st-gold); }
.st-v4-steps .st-v4-step p { color: rgba(255, 255, 255, .72) !important; }
.st-v4-hero .fusion-form .fusion-fullwidth { padding-left: 0 !important; padding-right: 0 !important;
  padding-top: 0 !important; margin-top: 0 !important; }
.st-v4-hero .fusion-form .fusion-builder-row { margin-left: 0 !important; margin-right: 0 !important;
  width: 100% !important; max-width: 100% !important; }
.st-v4-hero .fusion-form .fusion-layout-column { padding-left: 0 !important; padding-right: 0 !important; }
.st-v4-hero .fusion-form .fusion-column-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 800px) {
  .st-v4-hero h1, .st-v4-hero .fusion-title h1 { font-size: clamp(2.3rem, 11.2vw, 3.6rem) !important; }
  .st-v4-nums b { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}
@media (max-width: 480px) {
  .st-v4-todo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-v4-todo li { font-size: 13px; padding: 10px 11px; gap: 8px; }
}
@media (max-width: 340px) {
  .st-v4-todo { grid-template-columns: minmax(0, 1fr); }
}
.st-v4-steps p.st-v4-n { color: transparent !important; font-size: clamp(5.5rem, 11vw, 8.5rem) !important;
  line-height: .9 !important; -webkit-text-stroke: 2px var(--st-gold); }
.st-v4-steps .fusion-layout-column:last-child p.st-v4-n { color: var(--st-gold) !important; }

/* Buttons nach Typografie-Guide: SemiBold 600 */
.fusion-button, .fusion-button .fusion-button-text, .fusion-form-submit-field .fusion-button { font-weight: 600 !important; }

/* ---------- Doppel-Scrollbar weg (Avada setzt body{overflow-y:scroll}) ---------- */
html {
  overflow-x: clip;
  overflow-y: auto;
}
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ---------- Wartelisten-Form: Consent + Alerts im CI ---------- */
.st-dark .fusion-form-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}
.st-dark .fusion-form-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}
.st-dark .fusion-form-checkbox > label {
  position: relative;
  display: block;
  padding-left: 34px !important;
  cursor: pointer;
  color: rgba(245, 247, 250, .78) !important;
  line-height: 1.45;
  font-size: .82rem !important;
}
.st-dark .fusion-form-checkbox > label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid rgba(201, 180, 137, .85) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .06) !important;
  box-sizing: border-box;
}
.st-dark .fusion-form-checkbox input[type="checkbox"]:checked + label::before,
.st-dark .fusion-form-checkbox input[type="checkbox"]:checked ~ label::before {
  background: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
}
.st-dark .fusion-form-checkbox input[type="checkbox"]:checked + label::after,
.st-dark .fusion-form-checkbox input[type="checkbox"]:checked ~ label::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 4px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid var(--st-navy) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg);
}
.st-dark .fusion-form-consent-field .fusion-form-label-wrapper label,
.st-dark .fusion-form-consent-field .fusion-form-element-required {
  color: rgba(245, 247, 250, .9) !important;
}
.st-dark .fusion-form-consent-field.is-st-invalid .fusion-form-label-wrapper label,
.st-dark .fusion-form-email-field.is-st-invalid .fusion-form-label-wrapper label {
  color: #f0c9a8 !important;
}
.st-dark .fusion-form-field.is-st-invalid .fusion-form-input:not([type="checkbox"]) {
  border-color: #c9b489 !important;
  box-shadow: 0 0 0 1px rgba(201, 180, 137, .35);
}
.st-dark .fusion-form-checkbox.is-st-invalid > label::before {
  border-color: #e2b48a !important;
  box-shadow: 0 0 0 2px rgba(226, 180, 138, .25);
}
.st-form-hint {
  display: none;
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.4;
  color: #f5f0e6 !important;
  background: rgba(150, 128, 63, .22);
  border: 1px solid rgba(201, 180, 137, .45);
}
.st-form-hint.is-visible { display: block; }

/* Success / Error Alerts — Navy/Gold statt Default-Grün */
.st-dark .fusion-form-response,
.st-dark .fusion-alert {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}
.st-dark .fusion-form-response-success,
.st-dark .fusion-alert.alert-success {
  background: rgba(201, 180, 137, .14) !important;
  border: 1px solid rgba(201, 180, 137, .55) !important;
  color: #f5f0e6 !important;
}
.st-dark .fusion-form-response-success .fusion-alert-content,
.st-dark .fusion-form-response-success .fusion-alert-content-wrapper,
.st-dark .fusion-alert.alert-success .fusion-alert-content,
.st-dark .fusion-alert.alert-success .fusion-alert-content-wrapper,
.st-dark .fusion-alert.alert-success {
  color: #f5f0e6 !important;
}
.st-dark .fusion-form-response-error,
.st-dark .fusion-alert.alert-danger,
.st-dark .fusion-alert.alert-error {
  background: rgba(156, 63, 42, .18) !important;
  border: 1px solid rgba(192, 110, 85, .55) !important;
  color: #f6d7ce !important;
}
.st-dark .fusion-form-response-error .fusion-alert-content,
.st-dark .fusion-form-response-error .fusion-alert-content-wrapper,
.st-dark .fusion-alert.alert-danger .fusion-alert-content,
.st-dark .fusion-alert.alert-danger {
  color: #f6d7ce !important;
}
.st-dark .fusion-alert .close,
.st-dark .fusion-form-response .close {
  color: rgba(245, 247, 250, .7) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* Admin-only Fusion-Hinweise in Success-Boxen ausblenden (Frontend-Look) */
.st-dark .fusion-form-response-success .fusion-form-admin-notice,
.st-dark .fusion-alert.alert-success .fusion-form-admin-notice {
  display: none !important;
}

/* STATELY:END */

/* STATELY Phase2: hamburger without Font Awesome */
.awb-menu__m-collapse-icon-close.fa-bars,
.awb-menu__m-collapse-icon-open.fa-times,
.awb-menu__m-collapse-icon-close.fas,
.awb-menu__m-collapse-icon-open.fas {
  font-family: inherit !important;
  font-weight: 600 !important;
  font-style: normal !important;
  speak: never;
}
.awb-menu__m-collapse-icon-close.fa-bars::before,
.awb-menu__m-collapse-icon-close_no-text.fa-bars::before {
  content: '\2630';
  font-family: inherit !important;
}
.awb-menu__m-collapse-icon-open.fa-times::before,
.awb-menu__m-collapse-icon-open_no-text.fa-times::before {
  content: '\2715';
  font-family: inherit !important;
}

/* BLOCK:kopfzeile:START */
/* Kopfzeile: Anmelden als zweiter Rang, nur gerahmt */
.fusion-tb-header .fusion-button.st-btn-ghost,
.st-dark .fusion-button.st-btn-ghost {
  background: transparent !important; border: 1.5px solid rgba(201, 180, 137, .75) !important; }
.fusion-tb-header .fusion-button.st-btn-ghost, .fusion-tb-header .fusion-button.st-btn-ghost .fusion-button-text,
.st-dark .fusion-button.st-btn-ghost .fusion-button-text { color: #fff !important; }
.fusion-tb-header .fusion-button.st-btn-ghost:hover, .st-dark .fusion-button.st-btn-ghost:hover {
  background: rgba(201, 180, 137, .14) !important; border-color: var(--st-gold) !important; }
.fusion-tb-header .fusion-button.st-btn-ghost:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 3px; }
@media (max-width: 420px) {
  .fusion-tb-header .fusion-button { padding: 9px 12px !important; }
  .fusion-tb-header .fusion-column-wrapper { gap: 8px; }
}
/* BLOCK:kopfzeile:END */