/* ============================================================
   Beeond Landing Page — Divi 5, Mischform
   Struktur und Farben stellst du in Divi ein.
   Diese Datei liefert nur:
     A) fliessende Masse, die Divis Zahlenfelder nicht annehmen
     B) Farb- und Masswerte für die zwei Code-Module
     C) Fokus und reduzierte Bewegung
   Ins Child-Theme legen und per wp_enqueue_style laden.
   Klassennamen im Modul unter Advanced → CSS-Klassen, ohne Punkt.
   Werte aus dem Beeond Design System. Skala auf Landing v4 gehoben, Stand 08.09.2026.
   ============================================================ */

:root{
  /* Farben — für die Code-Module. Normale Module: dieselben
     Hex-Werte in die Divi-Farbfelder, siehe Einstellungsblatt. */
  --bo-gold:#DCA64B;
  --bo-gold-text:#A6680F;
  --bo-gold-fg:#3A2E1A;
  --bo-ink:#211C15;
  --bo-ink-fg:#F7F4ED;
  --bo-page:#F2EBDA;
  --bo-card:#FFFFFF;
  --bo-tint:#F7F4ED;
  --bo-muted:#EDE7DA;
  --bo-text-2:#5B5346;
  --bo-text-3:#938A7B;
  --bo-line:rgba(33,28,21,.08);
  --bo-line-input:rgba(33,28,21,.14);
  --bo-line-dark:rgba(255,255,255,.12);
  --bo-ok:#5E9E4E;
  --bo-warn:#E8C63D;
  --bo-critical:#D2503A;
  --bo-danger:#C05330;

  /* Fliessende Masse */
  --bo-wrap:1240px;
  --bo-gutter:clamp(20px, 5vw, 48px);
  --bo-sec:clamp(64px, 9vw, 128px);          /* Abstand oben/unten jeder Hauptsektion */
  --bo-wachs:#F5E9CD;                         /* dritter Flächenton (Imkerjahr, Kontakt) */
  --bo-schraeg:clamp(12px, 1.6vw, 28px);      /* Höhe der Schrägschnitte */
  --bo-radius:4px;
  --bo-elev-1:0 1px 2px rgba(33,28,21,.03);
  --bo-elev-2:0 1px 2px rgba(33,28,21,.04), 0 8px 22px rgba(33,28,21,.04);
  --bo-ease:cubic-bezier(.4, 0, .2, 1);
}

/* ---------- A) Fliessende Masse ---------- *
   In clamp() müssen Plus und Minus von Leerzeichen umgeben sein.
   Ohne Leerzeichen verwirft der Browser die Regel stillschweigend. */

/* Schriftgrössen.
   Doppelte Klasse plus html: das schlägt Divis Modul-Regeln
   (.et_pb_text_0 h1) auch dann, wenn Divi in den Responsive-
   Regeln selbst !important setzt und sein Seiten-CSS nach
   diesem Stylesheet lädt.

   Du musst Divis Grössenfelder damit NICHT leer räumen —
   ein Wert dort bleibt wirkungslos. Sauberer ist es trotzdem:
   Maus über die Feldbezeichnung, der Kreispfeil rechts setzt
   das Feld auf den Standard zurück. */
html .bo-h1.bo-h1,html .bo-h1.bo-h1 h1{font-size:clamp(2.375rem, 1.4rem + 3.8vw, 4.25rem) !important}
html .bo-h2.bo-h2,html .bo-h2.bo-h2 h2{font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem) !important}
html .bo-h2-gross.bo-h2-gross,html .bo-h2-gross.bo-h2-gross h2{font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem) !important} /* v4: gleich wie bo-h2, Klasse bleibt für alte Layouts */
html .bo-aussage.bo-aussage{font-size:clamp(1.5rem, 1.05rem + 1.7vw, 2.25rem) !important}
html .bo-h3.bo-h3,html .bo-h3.bo-h3 h3{font-size:clamp(1.25rem, 1.05rem + .8vw, 1.625rem) !important}
html .bo-lead-hero.bo-lead-hero{font-size:clamp(1.0625rem, .95rem + .55vw, 1.3125rem) !important}
html .bo-lead.bo-lead{font-size:clamp(1rem, .95rem + .35vw, 1.125rem) !important}
html .bo-preis.bo-preis{font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) !important;white-space:nowrap}
html .bo-zitat-gross.bo-zitat-gross{font-size:clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem) !important}
html .bo-zahl.bo-zahl{font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem) !important}
html .bo-faq-frage.bo-faq-frage h5,html .bo-faq-frage.bo-faq-frage .et_pb_toggle_title{font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem) !important}

/* Innenabstände der Sections — gleiche Spezifitätsstufe,
   damit Divis Padding-Felder sie nicht überstimmen. */
html .bo-sec.bo-sec,html .bo-sec-gross.bo-sec-gross{padding-top:var(--bo-sec) !important;padding-bottom:var(--bo-sec) !important}
html .bo-band.bo-band{padding-top:clamp(40px, 5.5vw, 72px) !important;padding-bottom:clamp(40px, 5.5vw, 72px) !important}
html .bo-sec-unten.bo-sec-unten{padding-top:0 !important;padding-bottom:var(--bo-sec) !important}
html .bo-sec-oben.bo-sec-oben{padding-top:clamp(40px, 5vw, 64px) !important;padding-bottom:0 !important}
html .bo-seitenrand.bo-seitenrand{padding-left:var(--bo-gutter) !important;padding-right:var(--bo-gutter) !important}

/* Spaltenabstände */
html .bo-gap-wide.bo-gap-wide{gap:clamp(40px, 6vw, 96px) !important}
html .bo-gap-mid.bo-gap-mid{gap:clamp(32px, 5vw, 80px) !important}
html .bo-gap-narrow.bo-gap-narrow{gap:clamp(28px, 4vw, 56px) !important}
html .bo-gap-karten.bo-gap-karten{gap:clamp(14px, 1.6vw, 20px) !important}
html .bo-gap-kacheln.bo-gap-kacheln{gap:clamp(20px, 2.5vw, 32px) !important}

/* Inhaltsbreite, falls du sie nicht in Divis Row-Feld setzt */
.bo-wrap{max-width:var(--bo-wrap) !important;}

/* Bildhöhen. Auf das Image-Modul; das Bild selbst füllt. */
.bo-bild-stand,.bo-bild-breit,.bo-bild-klein,.bo-bild-shot{overflow:hidden;border-radius:var(--bo-radius);}
.bo-bild-stand img,.bo-bild-breit img,.bo-bild-klein img,.bo-bild-shot img{width:100%;height:100%;object-fit:cover;display:block;}
/* v4: Seitenverhältnis statt Höhe — das Bild bleibt in jeder Breite ganz */
.bo-bild-stand{aspect-ratio:21/9;max-height:560px;height:auto;}
.bo-bild-breit{aspect-ratio:21/8;max-height:360px;height:auto;}
.bo-bild-klein{aspect-ratio:16/7;height:auto;}
.bo-bild-shot{width:clamp(240px, 28vw, 320px);aspect-ratio:390/844;height:auto;border-radius:36px;margin:0 auto;}

/* Zeilenlängen. Divi hat kein ch-Feld. */
.bo-mw-30{max-width:30ch;}
.bo-mw-36{max-width:36ch;}
.bo-mw-46{max-width:46ch;}
.bo-mw-52{max-width:52ch;}
.bo-mw-56{max-width:56ch;}
.bo-mw-72{max-width:72ch;}
.bo-balance{text-wrap:balance;}
.bo-pretty{text-wrap:pretty;}
.bo-nowrap{white-space:nowrap;}

/* Rubrik mit durchlaufender Haarlinie (Umstieg, Vereine) */
.bo-rubrik-linie{display:flex;align-items:center;gap:14px;}
.bo-rubrik-linie::after{content:"";flex:1;height:1px;background:var(--bo-line);}
.bo-rubrik-linie.bo-auf-dunkel::after{background:rgba(255,255,255,.18);}

/* Wabenmuster als Overlay (Hero, Download).
   In Divi: Section → Background → zusätzlich diese Klasse. */
.bo-wabe{position:relative;}
.bo-wabe::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  mask-image:linear-gradient(180deg,#000 30%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23211C15' stroke-width='1.5'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='%23211C15' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 96px;
}
.bo-wabe-gold::before{
  opacity:.18;mask-image:linear-gradient(90deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23DCA64B' stroke-width='1.5'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='%23DCA64B' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- C) Grundlagen ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--bo-gold);outline-offset:3px;border-radius:2px;
}
.bo-skip{position:absolute;left:-9999px;top:0;z-index:9999;}
.bo-skip:focus{left:12px;top:12px;padding:12px 18px;background:var(--bo-ink);color:var(--bo-ink-fg);border-radius:var(--bo-radius);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ============================================================
   FLUENT FORMS
   Nötig, weil fluentform/load_default_public auf false steht:
   das Plugin liefert kein eigenes CSS mehr, der Styler im
   Plugin hat keine Wirkung. Alles Sichtbare steht hier.
   ============================================================ */

.fluentform .ff-el-group{margin:0 0 14px}
.fluentform .ff-el-group:last-of-type{margin-bottom:0}

/* Beschriftungen */
.fluentform .ff-el-input--label label{
  display:block;margin:0 0 7px;font-size:14px;font-weight:600;
  line-height:1.4;color:var(--bo-ink)}
.fluentform .ff-el-input--label.ff-el-is-required label::after{
  content:" *";color:var(--bo-danger)}
.fluentform .ff-el-help-message{
  margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--bo-text-3)}

/* Felder */
.fluentform .ff-el-form-control{
  width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;
  border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);
  background:var(--bo-card);color:var(--bo-ink);
  font:400 16px/1.35 inherit;
  transition:border-color .2s var(--bo-ease),box-shadow .2s var(--bo-ease)}
.fluentform textarea.ff-el-form-control{min-height:120px;resize:vertical}
.fluentform .ff-el-form-control::placeholder{color:var(--bo-text-3)}
.fluentform .ff-el-form-control:focus{
  outline:0;border-color:var(--bo-gold);
  box-shadow:0 0 0 3px rgba(220,166,75,.28)}

/* Radio als Chip-Reihe (Ausgangslage im Umstiegs-Formular) */
.fluentform .ff-el-form-check-inline,
.fluentform .ff_list_inline{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.fluentform .ff-el-form-check{margin:0}
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"].bo-as-chip{
  position:absolute;opacity:0;pointer-events:none}
.fluentform .ff-el-form-check input[type="radio"] + label{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 14px;margin:0;
  border:1px solid var(--bo-line);border-radius:var(--bo-radius);
  background:var(--bo-card);color:var(--bo-text-2);
  font:600 14px/1.2 inherit;white-space:nowrap;cursor:pointer;
  transition:background .2s var(--bo-ease),color .2s var(--bo-ease),border-color .2s var(--bo-ease)}
.fluentform .ff-el-form-check input[type="radio"] + label:hover{border-color:var(--bo-gold)}
.fluentform .ff-el-form-check input[type="radio"]:checked + label{
  background:var(--bo-ink);border-color:var(--bo-ink);color:var(--bo-ink-fg)}
.fluentform .ff-el-form-check input[type="radio"]:focus-visible + label{
  outline:3px solid var(--bo-gold);outline-offset:3px}

/* Einwilligungs-Checkbox */
.fluentform .ff-el-group.bo-consent .ff-el-form-check{
  display:flex;align-items:flex-start;gap:10px}
.fluentform .ff-el-group.bo-consent input[type="checkbox"]{
  width:20px;height:20px;margin:2px 0 0;flex:none;
  accent-color:var(--bo-gold);cursor:pointer}
.fluentform .ff-el-group.bo-consent label{
  margin:0;font-size:14px;font-weight:400;line-height:1.45;
  color:var(--bo-text-2);cursor:pointer}

/* Absende-Button */
.fluentform .ff-btn-submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;padding:0 22px;border:0;
  border-radius:var(--bo-radius);
  background:var(--bo-ink);color:var(--bo-ink-fg);
  font:700 16px/1 inherit;cursor:pointer;
  transition:opacity .2s var(--bo-ease)}
.fluentform .ff-btn-submit:hover{opacity:.9}
.fluentform .ff-btn-submit:disabled{opacity:.5;cursor:not-allowed}

/* Fehler */
.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--bo-danger)}
.fluentform .error,.fluentform .text-danger,
.fluentform .ff-el-is-error .error-text{
  margin:6px 0 0;font-size:14px;font-weight:600;
  line-height:1.45;color:var(--bo-danger)}

/* Bestätigung — an derselben Stelle wie das Formular */
.fluentform .ff-message-success,.ff_submit_success{
  padding:16px 18px;border-radius:var(--bo-radius);
  background:rgba(94,158,78,.15);color:var(--bo-ok);
  font-size:15px;font-weight:600;line-height:1.5}

/* Auf dunklem Grund (Beta-Karte im Download-Abschnitt).
   Klasse bo-form-dunkel auf den Wrapper der Column setzen. */
.bo-form-dunkel .fluentform .ff-el-input--label label{color:var(--bo-ink-fg)}
.bo-form-dunkel .fluentform .ff-el-form-control{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:var(--bo-ink-fg)}
.bo-form-dunkel .fluentform .ff-el-form-control::placeholder{color:rgba(247,244,237,.5)}
.bo-form-dunkel .fluentform .ff-btn-submit{
  background:var(--bo-gold);color:var(--bo-gold-fg)}
.bo-form-dunkel .fluentform .ff-el-group.bo-consent label{color:rgba(247,244,237,.75)}
.bo-form-dunkel .fluentform .error,
.bo-form-dunkel .fluentform .text-danger{color:var(--bo-warn)}
.bo-form-dunkel .fluentform .ff-el-help-message{color:rgba(247,244,237,.6)}

/* ============================================================
   BADGES
   Beschriftung, nicht klickbar: keine Mindesthöhe, 12px.
   Breite immer auto — bei fixer Breite bricht die englische
   Fassung gegen die deutsche.
   ============================================================ */
.bo-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bo-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:2px;
  font-size:12px;font-weight:700;line-height:1.35;white-space:nowrap}
.bo-badge--ok{background:rgba(94,158,78,.15);color:var(--bo-ok)}
.bo-badge--warn{background:rgba(232,198,61,.2);color:#8A6D0B}
.bo-badge--critical{background:rgba(210,80,58,.15);color:var(--bo-critical)}
.bo-badge--muted{background:var(--bo-muted);color:var(--bo-text-2)}
.bo-badge--gold{background:var(--bo-gold);color:var(--bo-gold-fg)}
.bo-badge--outline{border:1px solid var(--bo-line);color:var(--bo-text-3)}
/* auf dunklem Grund */
.bo-badge--hell{background:rgba(255,255,255,.1);color:var(--bo-ink-fg)}

/* ============================================================
   BAUSTEINE FÜR TEXT-MODULE
   Alles Mehrteilige, das ein Divi-Modul nicht über Felder kann.
   Reihenfolge wie im Einstellungsblatt.
   ============================================================ */

/* --- Haarlinien-Listen (Fakten, Umstieg, Vereine, Einblick, Preise) --- */
.bo-zeilen{display:flex;flex-direction:column}
.bo-zeile{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--bo-line)}
.bo-zeilen>.bo-zeile:last-child{border-bottom:1px solid var(--bo-line)}
.bo-zeile__t{font-size:15px;font-weight:700;color:var(--bo-ink)}
.bo-zeile__d{font-size:15px;line-height:1.5;color:var(--bo-text-2);text-align:right}
/* gestapelt: Begriff über Erklärung (Umstieg, Vereine, Einblick) */
.bo-zeilen--stack .bo-zeile{grid-template-columns:auto 1fr;align-items:start}
.bo-zeilen--stack .bo-zeile__d{text-align:left;grid-column:2}
.bo-zeile__nr{font-size:15px;font-weight:700;color:var(--bo-gold-text);font-variant-numeric:tabular-nums}
/* dunkler Grund */
.bo-zeilen--dunkel .bo-zeile{padding:14px 0;border-top-color:var(--bo-line-dark)}
.bo-zeilen--dunkel>.bo-zeile:last-child{border-bottom-color:var(--bo-line-dark)}
.bo-zeilen--dunkel .bo-zeile__t{color:var(--bo-ink-fg)}
.bo-zeilen--dunkel .bo-zeile__d{color:var(--bo-ink-fg);opacity:.72}

/* --- Nummernquadrat (Ablauf) --- */
.bo-nr{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--bo-radius);
  background:var(--bo-gold);color:var(--bo-gold-fg);font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums}

/* --- Vertrauenspunkte (Hero) --- */
.bo-trust{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:14px;line-height:1.5;color:var(--bo-text-3)}
.bo-trust>span{display:flex;align-items:center;gap:16px}
.bo-trust>span+span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.5;flex:none}

/* --- Goldener Textlink --- */
.bo-link{display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;color:var(--bo-gold-text);text-decoration:none}
.bo-link:hover{color:var(--bo-gold-text);text-decoration:underline;text-underline-offset:3px}
.bo-link--hell{color:var(--bo-ink-fg);opacity:.8}
.bo-link--hell:hover{color:var(--bo-ink-fg);opacity:1}

/* --- Mikrofon-Kreis (Funktions-Karte Sprache) --- */
.bo-mic{display:grid;place-items:center;width:56px;height:56px;border-radius:9999px;
  background:rgba(220,166,75,.15);color:var(--bo-gold-text);flex:none}
.bo-mic svg{width:24px;height:24px}

/* --- Statische Wellenform (Funktions-Karte Sprache) --- */
.bo-wave{display:flex;align-items:flex-end;gap:3px;height:52px}
.bo-wave i{flex:1;background:var(--bo-gold);border-radius:2px;display:block}

/* --- Balkendiagramm (Funktions-Karte Varroa) --- */
.bo-chart{display:flex;align-items:flex-end;gap:4px;height:64px}
.bo-chart i{flex:1;background:var(--bo-gold);border-radius:2px;display:block}
.bo-chart i.hoch{background:var(--bo-critical)}
.bo-chart i.ok{background:var(--bo-ok)}
.bo-chart i.warn{background:var(--bo-warn)}

/* --- Protokoll-Zeilen (Funktions-Karte Protokoll) --- */
.bo-proto{display:flex;flex-direction:column;gap:8px}
.bo-proto>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--bo-line);border-radius:var(--bo-radius);
  font-size:15px;color:var(--bo-ink)}

/* --- Königinnen-Jahresfarben (Funktions-Karte Völker) --- */
.bo-queen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bo-queen i{width:18px;height:18px;border-radius:9999px;display:block;flex:none;
  box-shadow:inset 0 0 0 1px rgba(33,28,21,.18)}
.bo-queen .gelb{background:#E0A63C}
.bo-queen .rot{background:#C0532F}
.bo-queen .gruen{background:#4E7A34}
.bo-queen .blau{background:#3F79C0}
.bo-queen .weiss{background:#EFE9DC}
.bo-queen span{font-size:13px;color:var(--bo-text-3);margin-left:6px}

/* --- Vergleichslisten (Papier gegen Beeond) --- */
.bo-cmp{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.bo-cmp li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
  font-size:16px;line-height:1.5}
.bo-cmp svg{width:18px;height:18px;margin-top:3px}
.bo-cmp--minus{color:var(--bo-text-3)}
.bo-cmp--plus{color:var(--bo-ink-fg)}
.bo-cmp--plus svg{color:var(--bo-gold)}

/* --- Store-Kacheln (Download) --- */
.bo-stores{display:flex;gap:12px;flex-wrap:wrap}
.bo-store{display:inline-flex;align-items:center;gap:12px;min-height:52px;width:auto;
  padding:12px 20px;border-radius:var(--bo-radius);text-decoration:none;
  background:var(--bo-ink-fg);color:var(--bo-ink);
  transition:opacity .2s var(--bo-ease)}
.bo-store:hover{opacity:.9;color:var(--bo-ink)}
.bo-store svg,.bo-store img{width:22px;height:22px;flex:none}
.bo-store b{display:block;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}
.bo-store small{display:block;font-size:11px;line-height:1.3;opacity:.65;white-space:nowrap}
.bo-store--outline{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--bo-ink-fg)}
.bo-store--outline:hover{color:var(--bo-ink-fg);border-color:rgba(255,255,255,.5);opacity:1}

/* --- QR-Zeile (Download) --- */
.bo-qr{display:flex;align-items:center;gap:14px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--bo-line-dark)}
.bo-qr img{width:84px;height:84px;border-radius:var(--bo-radius);background:#fff;padding:6px;flex:none}
.bo-qr p{margin:0;font-size:13px;line-height:1.5;color:var(--bo-ink-fg);opacity:.7}

/* --- Sticky-Balken (Inhalt) --- */
.bo-sticky{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bo-sticky p{margin:0;font-size:15px;line-height:1.4;color:var(--bo-ink-fg)}
.bo-sticky div{display:flex;align-items:center;gap:16px}

/* --- Raster-Spannweiten (Funktionen) --- */
.bo-span-2{grid-column:span 2}
.bo-span-3{grid-column:span 3}
.bo-span-4{grid-column:span 4}
@media (max-width:1024px){
  .bo-span-2,.bo-span-3{grid-column:span 1}
  .bo-span-4{grid-column:span 2}
}
@media (max-width:760px){.bo-span-4{grid-column:span 1}}

/* --- Footer-Linkspalten --- */
.bo-footer-links{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.bo-footer-links a{font-size:15px;color:var(--bo-text-2);text-decoration:none}
.bo-footer-links a:hover{color:var(--bo-gold-text);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   WPML-SPRACHUMSCHALTER
   Ohne .et-menu-Vorsatz, damit es in jedem Divi-Menü greift:
   Theme-Header (#top-menu), Divi-5-Menü-Modul
   (.et_pb_menu__menu) und Off-Canvas (.et_mobile_menu).
   Stabile WPML-Klassen:
     li.menu-item-language           Sprach-Eintrag im WP-Menü
     li.wpml-ls-item-de / -en / …    je Sprache
     li.menu-item-language-current   aktive Sprache
   WICHTIG — Grund, warum vorher «Deutsch» stehen blieb:
   im WP-Menü setzt WPML auf den Link der AKTIVEN Sprache kein
   hreflang. Die Kurzform hing an a[hreflang] und griff nie.
   Jetzt kommt sie aus der Sprachklasse, hreflang ist nur Reserve.
   ============================================================ */
li.menu-item-language{margin-left:6px}
li.menu-item-language:first-of-type{margin-left:18px}

li.menu-item-language > a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:40px;padding:6px 10px !important;
  border:1px solid transparent;border-radius:var(--bo-radius);
  background:transparent;color:var(--bo-text-2) !important;
  font-weight:600;line-height:1;text-decoration:none;
  opacity:1 !important;
  transition:background .2s var(--bo-ease),color .2s var(--bo-ease),border-color .2s var(--bo-ease)}
li.menu-item-language > a::after{display:none !important}
li.menu-item-language > a:hover{
  border-color:var(--bo-gold);color:var(--bo-ink) !important;opacity:1 !important}

/* Aktive Sprache = gefüllter Chip */
li.menu-item-language-current > a,
li.menu-item-language.current-lang > a,
li.wpml-ls-current-language > a{
  background:var(--bo-ink);border-color:var(--bo-ink);
  color:var(--bo-ink-fg) !important}

/* Flaggen weg (zusätzlich zur WPML-Einstellung) */
li.menu-item-language img.wpml-ls-flag,
li.menu-item-language .wpml-ls-flag{display:none !important}

/* --- Kurzform DE / EN statt «Deutsch» / «English» ---
   Volltext bleibt im DOM (Screenreader, SEO), wird nur auf
   Schriftgrösse 0 gesetzt. ::before bringt das Kürzel.
   Willst du keine CSS-Krücke: WPML ▸ Sprachen ▸ Sprachen
   bearbeiten → Namen direkt auf DE / EN setzen und diesen
   Block hier löschen. */
li.menu-item-language > a{font-size:0 !important}
li.menu-item-language > a::before{
  content:attr(hreflang);
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
li.menu-item-language.wpml-ls-item-de > a::before{content:"DE"}
li.menu-item-language.wpml-ls-item-en > a::before{content:"EN"}
li.menu-item-language.wpml-ls-item-fr > a::before{content:"FR"}
li.menu-item-language.wpml-ls-item-it > a::before{content:"IT"}

/* Im Off-Canvas-Menü volle Zeile und ausgeschriebener Name —
   eine Chip-Reihe ist dort zu gedrängt */
.et_mobile_menu li.menu-item-language{margin:0}
.et_mobile_menu li.menu-item-language > a{
  justify-content:flex-start;min-height:44px;border:0;border-radius:0;
  padding:10px 5% !important;font-size:15px !important}
.et_mobile_menu li.menu-item-language-current > a{
  background:transparent;color:var(--bo-gold-text) !important}
.et_mobile_menu li.menu-item-language > a::before{content:none !important}

/* Umschalter als Widget oder Shortcode (Footer, Sticky-Balken) */
.wpml-ls-legacy-list-horizontal{padding:0;border:0}
.wpml-ls-legacy-list-horizontal .wpml-ls-item{margin:0 6px 0 0}
.wpml-ls-legacy-list-horizontal a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:40px;padding:6px 10px;
  border:1px solid var(--bo-line);border-radius:var(--bo-radius);
  background:var(--bo-card);color:var(--bo-text-2);
  font-size:14px;font-weight:600;text-decoration:none}
.wpml-ls-legacy-list-horizontal .wpml-ls-current-language a{
  background:var(--bo-ink);border-color:var(--bo-ink);color:var(--bo-ink-fg)}

/* Solange nur EINE Sprache veröffentlicht ist, gehört der
   Umschalter weg. Entweder in WPML ▸ Umschalter-Optionen
   ausblenden — oder hier die Kommentarzeichen entfernen:
   li.menu-item-language,.wpml-ls-legacy-list-horizontal{display:none !important}
*/

/* ============================================================
   V3-ERGÄNZUNGEN
   Der Hero-Wechsler (divi/1-screenshot-wechsler.html) bringt
   seine Styles selbst mit. Hier nur die neuen Bausteine für
   Text-Module.
   ============================================================ */

/* --- Sprach-Karte: Text links, Mikro und Welle rechts --- */
.bo-feat-voice{display:grid;grid-template-columns:1fr 230px;gap:28px;align-items:center}
@media (max-width:760px){.bo-feat-voice{grid-template-columns:1fr}}
.bo-mic-gross{display:grid;place-items:center;width:104px;height:104px;margin:0 auto;
  border-radius:9999px;background:var(--bo-gold);color:var(--bo-gold-fg);
  box-shadow:0 0 0 12px rgba(220,166,75,.18)}
.bo-mic-gross svg{width:40px;height:40px}

/* --- Merkmal-Pillen (Sprach-Karte) --- */
.bo-pills{display:flex;gap:8px;flex-wrap:wrap}
.bo-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:2px;flex:none;
  background:var(--bo-muted);color:var(--bo-text-2);
  font-size:13px;font-weight:600;white-space:nowrap}

/* --- Monatsbeschriftung unter dem Balkendiagramm --- */
.bo-monate{display:flex;justify-content:space-between;margin-top:8px;
  font-size:12px;color:var(--bo-text-3)}

/* --- Kennzahl mit Delta (Ernte-Karte) --- */
.bo-stat{display:flex;align-items:baseline;gap:8px}
.bo-stat b{font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2rem);font-weight:700;
  letter-spacing:-.03em;color:var(--bo-ink);white-space:nowrap}
.bo-stat span{font-size:15px;font-weight:600;color:var(--bo-ok)}

/* --- Beta-Zitat-Karte (statisch, ersetzt die Laufschrift) --- */
.bo-zitat{display:flex;flex-direction:column;gap:16px;height:100%}
.bo-zitat p{margin:0;font-size:16px;line-height:1.5;color:var(--bo-ink)}
.bo-zitat footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.bo-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;
  background:var(--bo-muted);color:var(--bo-text-2);
  font-size:14px;font-weight:700;flex:none}
.bo-zitat footer b{display:block;font-size:15px;font-weight:600;color:var(--bo-ink)}
.bo-zitat footer small{display:block;font-size:13px;color:var(--bo-text-3)}

/* ============================================================
   PREISE — die drei Plan-Karten (Abschnitt 13)
   Die Karte IST die Divi-Column (Preset «karte»).
   .bo-plan auf die Column, der Rest im Text-Modul der Karte.
   ============================================================ */
.bo-plan{position:relative;display:flex;flex-direction:column;height:100%}
.bo-plan-badge{position:absolute;top:-11px;left:30px}
.bo-plan-kopf{font-size:18px;font-weight:700;line-height:1.25;color:var(--bo-ink)}
.bo-plan-sub{margin-top:4px;font-size:15px;line-height:1.45;color:var(--bo-text-2)}
.bo-preis-zeile{display:flex;align-items:baseline;gap:6px;margin:18px 0}
.bo-preis-zeile .bo-preis{font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--bo-ink)}
.bo-preis-sub{font-size:15px;color:var(--bo-text-3)}
.bo-plan-liste{display:flex;flex-direction:column;gap:10px}
.bo-plan-liste>span{font-size:15px;line-height:1.45;color:var(--bo-ink)}
/* Button unten ausrichten, auch wenn die Karten unterschiedlich viel Text haben.
   Doppelte Klasse plus html: schlägt Divis Modul-Margin. */
html .bo-plan-cta.bo-plan-cta{margin-top:auto;padding-top:22px}
html .bo-plan-cta.bo-plan-cta .et_pb_button{width:100%;text-align:center;min-height:48px}
/* MwSt-Hinweis unter der Row */
.bo-preis-fuss{font-size:13px;line-height:1.5;color:var(--bo-text-3)}

/* Ankersprünge unter dem sticky Header (Header ~88px, Handy ~72px).
   Greift auf jede Section mit CSS ID: #funktionen, #preise, #faq … */
.et_pb_section[id],.et-l section[id],section[id]{scroll-margin-top:96px}
@media (max-width:760px){.et_pb_section[id],.et-l section[id],section[id]{scroll-margin-top:80px}}


/* ============================================================
   V2-ERGÄNZUNGEN — Beeond Landing v2
   Einblick-Tabs, Hero-Demo als Video, Völker-Rechner (Preise).
   Nur nötig, wenn du v2 statt v3 baust.
   ============================================================ */

/* Hero-Demo: Bildschirmaufnahme im Handy-Rahmen (Video-Modul mit Klasse bo-bild-shot) */
.bo-bild-shot video,.bo-bild-shot .et_pb_video_box,.bo-bild-shot .mejs-container{width:100% !important;height:100% !important;object-fit:cover;display:block}
.bo-demo-hinweis{margin:20px 0 0;text-align:center;font-size:13px;font-weight:600;color:var(--bo-text-3)}

/* Einblick: Screenshot links, Text rechts — Inhalt eines Divi-Tabs */
.bo-shot-grid{display:grid;grid-template-columns:clamp(240px, 32vw, 320px) 1fr;gap:clamp(28px, 4vw, 48px);align-items:center;padding-top:28px}
.bo-shot-grid .bo-bild-shot{background:var(--bo-card);box-shadow:var(--bo-elev-2)}
.bo-shot-grid h3{margin:0 0 16px}
.bo-shot-grid p{margin:0 0 16px;font-size:clamp(1rem, .97rem + .2vw, 1.0625rem);line-height:1.6;color:var(--bo-text-2);max-width:50ch}
.bo-punkte{display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--bo-ink)}
.bo-punkte span::before{content:"· "}
@media (max-width:1024px){.bo-shot-grid{grid-template-columns:1fr;gap:28px}}

/* Völker-Rechner über den Preiskarten (Code-Modul divi/3-voelker-rechner.html) */
.bo-rechner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0 26px;margin-bottom:28px;
  border-top:1px solid var(--bo-line);border-bottom:1px solid var(--bo-line)}
.bo-rechner label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--bo-ink)}
.bo-stepper{display:inline-flex;align-items:stretch;height:48px;border:1px solid var(--bo-line-input);
  border-radius:var(--bo-radius);background:var(--bo-card);overflow:hidden}
.bo-stepper button{width:48px;border:0;background:transparent;font:inherit;font-size:20px;line-height:1;color:var(--bo-ink);cursor:pointer}
.bo-stepper button:hover{background:var(--bo-tint)}
.bo-stepper input{width:72px;border:0;border-left:1px solid var(--bo-line);border-right:1px solid var(--bo-line);
  text-align:center;font:inherit;font-size:16px;font-weight:600;color:var(--bo-ink);background:transparent;-moz-appearance:textfield}
.bo-stepper input::-webkit-inner-spin-button,.bo-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bo-stepper input:focus{outline:none;background:var(--bo-tint)}
.bo-rechner p{margin:0;font-size:17px;line-height:1.5;font-weight:500;color:var(--bo-ink);max-width:44ch}
/* Die empfohlene Karte wandert mit der Eingabe. Badge nur auf der empfohlenen Karte. */
.bo-plan .bo-plan-badge{display:none}
.bo-plan.is-empfohlen .bo-plan-badge{display:inline-flex}
html .et_pb_column.bo-plan.is-empfohlen{border:2px solid var(--bo-gold) !important;padding:29px !important;box-shadow:var(--bo-elev-2) !important}


/* ============================================================
   REALISIERUNGS-ERGÄNZUNGEN (zentrales Dokument, Stand 07.09.2026)
   Fluide Bausteine, die in Divi-Feldern nicht möglich sind.
   ============================================================ */
:root{
  --bo-karte-pad:clamp(20px, 2.6vw, 30px);   /* Innenabstand Karten */
  --bo-kopf-abstand:clamp(24px, 3.5vw, 32px); /* Sektionskopf → Inhalt */
  --bo-block-abstand:clamp(16px, 2.2vw, 24px);
}
/* Karten-Innenabstand fluid — statt Design ▸ Spacing ▸ Padding im Preset «karte» */
html .bo-karte-pad.bo-karte-pad{padding:var(--bo-karte-pad) !important}
html .bo-karte-pad-klein.bo-karte-pad-klein{padding:clamp(18px, 2.2vw, 26px) !important}
/* Abstände unter Sektionsköpfen und zwischen Blöcken */
html .bo-kopf.bo-kopf{margin-bottom:var(--bo-kopf-abstand) !important}
html .bo-block.bo-block{margin-bottom:var(--bo-block-abstand) !important}
/* Rubrik als Klasse (für HTML-Module; das Preset «rubrik» ist das Divi-Pendant) */
.bo-rubrik{display:block;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--bo-gold-text)}
.bo-rubrik--hell{color:var(--bo-gold)}
/* Datenschutz-Kacheln: goldene Oberkante */
.bo-spalte-oben{border-top:3px solid var(--bo-gold);padding-top:16px}
/* Preise: empfohlene Karte mit fluidem Padding minus 1px (2px-Kante statt 1px) */
html .et_pb_column.bo-plan.is-empfohlen{padding:calc(var(--bo-karte-pad) - 1px) !important}
/* Kontaktseite: Formularkarte */
.bo-kontakt-karte .fluentform .ff-el-group{margin-bottom:16px}
/* Hero-Video pausiert bei reduzierter Bewegung (JS-frei: nur Poster sichtbar) */
@media (prefers-reduced-motion:reduce){.bo-bild-shot video{display:none}}


/* ============================================================
   V4-ERGÄNZUNGEN — Beeond Landing v4 (Stand 08.09.2026)
   Fluide Raster, Foto-Ebenen, Körnung, Schrägschnitte, Icons,
   Imkerjahr, Kontakt-Sektion. Alles, was Divi-Felder nicht können.
   ============================================================ */

/* --- Fluide Raster: Spaltenzahl ergibt sich aus der Breite ---
   Auf die ROW (Display Grid in Divi, Template-Feld leer lassen).
   Zahl = Mindestbreite einer Spalte. min(100%, …) verhindert
   Überlauf auf sehr schmalen Geräten. Gap über bo-gap-*. */
html .bo-auto-180.bo-auto-180{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important}
html .bo-auto-210.bo-auto-210{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important}
html .bo-auto-220.bo-auto-220{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important}
html .bo-auto-280.bo-auto-280{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important}
html .bo-auto-260.bo-auto-260{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important}
html .bo-auto-300.bo-auto-300{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important}
html .bo-auto-340.bo-auto-340{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important}
html .bo-auto-320.bo-auto-320{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important}
/* Divi setzt Columns eine Breite — im Raster muss sie weg */
html [class*="bo-auto-"]>.et_pb_column{width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
.bo-voll{grid-column:1/-1}                 /* Karte über alle Spalten (Sprach-Karte) */
.bo-mitte-y{align-items:center}            /* Zeilen vertikal zentrieren (Hero, Einblick, Download) */

/* --- Körnung über der ganzen Seite (dezent, 5.5 %) ---
   Einmal auf <body> über functions.php: add_filter('body_class', …) → bo-koernung. */
body.bo-koernung::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
@media print{body.bo-koernung::before{display:none}}

/* --- Schrägschnitte (Fakten-Band unten, Vereine oben) ---
   Der Schnitt zeigt den Seitenhintergrund; die Section bekommt
   den Schnitt als Padding dazu, damit kein Text angeschnitten wird. */
html .bo-schraeg-unten.bo-schraeg-unten{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--bo-schraeg)));
  padding-bottom:calc(clamp(40px, 5.5vw, 72px) + var(--bo-schraeg)) !important}
html .bo-schraeg-oben.bo-schraeg-oben{
  clip-path:polygon(0 var(--bo-schraeg), 100% 0, 100% 100%, 0 100%);
  padding-top:calc(var(--bo-sec) + var(--bo-schraeg)) !important}

/* --- Flächentöne --- */
.bo-wachs{background-color:var(--bo-wachs) !important}

/* --- Hero: Foto hinter dem Text, Schleier links, Muster oben ---
   Section: Background Image (Center, Cover) + Klassen bo-hero bo-wabe.
   ::after legt den Schleier über das Foto, das Wabenmuster (::before) darüber. */
.bo-hero{position:relative;isolation:isolate}
.bo-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#F2EBDA 0%,#F2EBDA 40%,rgba(242,235,218,.86) 62%,rgba(242,235,218,.7) 100%),
             linear-gradient(180deg,rgba(242,235,218,0) 55%,#F2EBDA 100%)}
.bo-hero>*{position:relative;z-index:1}
.bo-hero.bo-wabe::before{z-index:0}

/* --- Zitat-Streifen: Foto, dunkler Verlauf, grosser Satz --- */
.bo-zitat-streifen{position:relative;isolation:isolate;color:var(--bo-ink-fg)}
.bo-zitat-streifen::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(33,28,21,.94) 0%,rgba(33,28,21,.78) 50%,rgba(33,28,21,.4) 100%)}
.bo-zitat-text{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;color:var(--bo-ink-fg)}
.bo-zitat-fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px}
.bo-zitat-fuss::before{content:"";width:44px;height:3px;background:var(--bo-gold);flex:none}
.bo-zitat-fuss p{margin:0;font-size:clamp(.9375rem, .9rem + .25vw, 1.0625rem);line-height:1.5;opacity:.8;color:var(--bo-ink-fg)}

/* --- Goldene Regel 3px (Fakten-Band, Ablauf-Linie) --- */
.bo-regel{height:3px;background:var(--bo-gold);border:0}
.bo-regel--kurz{width:44px;margin-bottom:22px}

/* --- Ablauf: grosse Ziffer statt Nummernquadrat --- */
.bo-schritt-kopf{display:flex;align-items:center;gap:12px}
.bo-nr-gross{font-size:clamp(2rem, 1.5rem + 1.6vw, 2.75rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--bo-gold-text);font-variant-numeric:tabular-nums}
.bo-schritt-kopf h3{margin:0;font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem);font-weight:700;color:var(--bo-ink)}

/* --- Icon-Quadrat vor Kartentiteln (Funktionen) --- */
.bo-karten-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bo-karten-kopf h3{margin:0;font-size:18px;font-weight:700;color:var(--bo-ink)}
.bo-icon-quadrat{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:var(--bo-radius);
  background:var(--bo-gold);color:var(--bo-gold-fg)}
.bo-icon-quadrat svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bo-icon-quadrat--dunkel{background:rgba(255,255,255,.1);color:var(--bo-gold)}
.bo-karten-kopf--hell h3{color:var(--bo-ink-fg)}
/* Karten flach (v4): Schatten weg, Hover hebt 3px und färbt die Kante gold */
html .bo-karte-flach.bo-karte-flach{box-shadow:none !important}
html .bo-karte-flach.bo-karte-flach:hover{box-shadow:var(--bo-elev-2) !important;border-color:var(--bo-gold) !important;transform:translateY(-3px)}
.bo-karte-fuss{margin-top:auto}

/* --- Imkerjahr: fünf Phasen --- */
.bo-phase{display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--bo-gold);padding-top:16px;height:100%}
.bo-phase .bo-rubrik{color:var(--bo-text-3)}
.bo-phase h3{margin:0;font-size:18px;font-weight:700;color:var(--bo-ink)}
.bo-phase p{margin:0;font-size:15px;line-height:1.55;color:var(--bo-text-2)}
.bo-phase .bo-phase-beeond{margin-top:auto;padding-top:10px;border-top:1px solid var(--bo-line);font-size:14px;line-height:1.5;color:var(--bo-ink)}
.bo-legende{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--bo-text-2);white-space:nowrap}
.bo-legende i{width:10px;height:10px;border-radius:2px;background:var(--bo-gold);display:block}

/* --- Kontakt-Sektion: Zeilen links, Formularkarte rechts --- */
.bo-kontakt-zeilen{display:flex;flex-direction:column;border-top:1px solid var(--bo-line);margin-top:8px}
.bo-kontakt-zeilen>div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--bo-line);font-size:15px}
.bo-kontakt-zeilen b{font-weight:600;color:var(--bo-ink)}
.bo-kontakt-zeilen span{color:var(--bo-text-2)}
/* Karte bleibt beim Scrollen stehen (Umstieg-Formular) */
.bo-klebt{position:sticky;top:96px}
@media (max-width:1024px){.bo-klebt{position:static}}
/* Zwei Felder nebeneinander im Fluent-Form (Name / E-Mail):
   Container Class bo-halb an beiden Feldern */
.fluentform .ff-el-group.bo-halb{display:inline-block;width:calc(50% - 7px);vertical-align:top}
.fluentform .ff-el-group.bo-halb+.bo-halb{margin-left:14px}
@media (max-width:520px){.fluentform .ff-el-group.bo-halb{display:block;width:100%}.fluentform .ff-el-group.bo-halb+.bo-halb{margin-left:0}}

/* --- Menü: goldene Unterstreichung beim Hover (Klasse am Menü-Modul) --- */
.bo-menu-linie nav>ul>li>a{position:relative;padding-bottom:6px !important}
.bo-menu-linie nav>ul>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--bo-gold);
  transition:right .32s var(--bo-ease)}
.bo-menu-linie nav>ul>li:hover>a::after,.bo-menu-linie nav>ul>li.current-menu-item>a::after{right:0}

/* --- Kennzahlen-Zeile (Section deaktiviert, für später) --- */
.bo-kennzahl{display:flex;flex-direction:column;gap:4px}
.bo-kennzahl b{font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--bo-ink);font-variant-numeric:tabular-nums}
.bo-kennzahl span{font-size:14px;color:var(--bo-text-2)}

/* --- Hero Variante B: Foto mit «Erkannt»-Karte --- */
.bo-hero-foto{position:relative}
.bo-hero-foto .bo-bild-hoch{aspect-ratio:4/5;max-height:clamp(420px, 52vw, 680px);border-radius:var(--bo-radius);overflow:hidden;box-shadow:var(--bo-elev-2)}
.bo-hero-foto .bo-bild-hoch img{width:100%;height:100%;object-fit:cover;display:block}
.bo-erkannt{position:absolute;left:clamp(-28px, -2vw, -16px);bottom:clamp(20px, 4vw, 48px);width:min(78%, 300px);
  background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius);padding:16px 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:10px}
.bo-erkannt p{margin:0;font-size:15px;line-height:1.4;font-weight:500;color:var(--bo-ink)}
.bo-erkannt dl{display:flex;flex-direction:column;gap:6px;margin:0;padding-top:10px;border-top:1px solid var(--bo-line);font-size:14px}
.bo-erkannt dl div{display:flex;justify-content:space-between;gap:12px}
.bo-erkannt dt{color:var(--bo-text-2)}
.bo-erkannt dd{margin:0;font-weight:600;color:var(--bo-ink)}
.bo-erkannt dd.ok{color:var(--bo-ok)}


/* --- V4.1 (08.09.2026): Sprach-Dropdown, Fakten-Kacheln, Preis-Echo --- */
/* Sprachumschalter im Header als Dropdown: WPML-Menüpunkte liegen als
   Unterpunkte unter einem Elternpunkt mit Klasse bo-lang (Kapitel 9, 34) */
.bo-menu-linie nav>ul>li.bo-lang>a{border:1px solid var(--bo-line);border-radius:var(--bo-radius);background:var(--bo-card);
  padding:0 10px 0 12px !important;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.bo-menu-linie nav>ul>li.bo-lang>a::after{display:none}
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu{right:0;left:auto;min-width:180px;padding:4px;border:1px solid var(--bo-line);
  border-radius:var(--bo-radius);box-shadow:var(--bo-elev-2);background:var(--bo-card)}
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu li a{display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center;
  padding:0 12px !important;border-radius:2px;font-size:14px;font-weight:500;color:var(--bo-ink)}
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu li.current-lang a,
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu li a:hover{background:var(--bo-tint);font-weight:600}
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu li.bo-lang-folgt a{color:var(--bo-text-3)}
.bo-menu-linie nav>ul>li.bo-lang>ul.sub-menu li a small{font-size:12px;color:var(--bo-text-2)}
/* Fakten-Band v4.1: drei Kacheln mit Gold-Regel oben, kein Aussage-Satz */
.bo-fakt{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:3px solid var(--bo-gold);color:var(--bo-ink-fg)}
.bo-fakt b{font-size:17px;font-weight:600}
.bo-fakt span{font-size:15px;opacity:.7}
/* Preis-Echo: Jahrespreis/pro Volk unter der Monatszahl */
.bo-preis-jahr{display:block;font-size:14px;color:var(--bo-text-2);margin-top:-6px}


/* ============================================================
   V5-ERGÄNZUNGEN — Beeond Landing v5 (Stand 10.09.2026)
   Handy-Rahmen, Tabs mit Screenshots, Parallax-Streifen,
   Vollbild-Menü, Scroll-Spy, Preis-Slider, Sticky nur Handy.
   JS dazu: js/beeond-v5.js (wird von functions.php geladen).
   ============================================================ */

/* --- Handy-Rahmen (Hero-Demo, Funktionen-Tabs) ---
   Reines CSS, kein Bild. Auf ein Image-Modul (Klasse bo-phone) oder
   als Wrapper im Code-Modul. Breite über Klasse bo-phone--klein / --gross. */
.bo-phone{position:relative;aspect-ratio:1179/2556;background:#14110D;border-radius:46px;padding:11px;box-sizing:border-box;margin:0 auto;
  box-shadow:0 30px 60px -20px rgba(33,28,21,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.bo-phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:32%;height:24px;background:#14110D;border-radius:14px;z-index:3}
.bo-phone>div,.bo-phone>span,.bo-phone>.et_pb_image_wrap{position:relative;display:block;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--bo-page);z-index:2}
.bo-phone img{width:100%;height:100%;object-fit:cover;display:block}
.bo-phone--klein{width:min(100%, clamp(240px, 26vw, 300px))}
.bo-phone--gross{width:min(100%, clamp(280px, 30vw, 340px))}
/* Divi-Image-Modul in den Rahmen zwingen */
html .et_pb_image.bo-phone{width:min(100%, clamp(240px, 26vw, 300px)) !important;max-width:none !important}

/* --- Parallax-Streifen (Standfoto, Zitat, Umstieg-Bild, Download-Bild) ---
   Klasse bo-parallax auf das Image-Modul (oder die Section beim Zitat).
   Das Bild ist 124 % hoch und wird per JS um max. ±9 % verschoben. */
.bo-parallax{position:relative;overflow:hidden;border-radius:var(--bo-radius)}
.bo-parallax img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform;max-width:none}
.bo-parallax.et_pb_image{display:block}
.bo-parallax .et_pb_image_wrap{position:static;display:block;height:100%}
.bo-parallax--stand{aspect-ratio:21/9;max-height:560px;height:auto;box-shadow:var(--bo-elev-1)}
.bo-parallax--klein{aspect-ratio:16/7;height:auto}
.bo-parallax--hoch{aspect-ratio:4/5;max-height:520px;height:auto;width:min(100%, 420px);margin:0 auto}
/* Zitat-Streifen als Section: Bild liegt hinter dem Verlauf */
.bo-zitat-streifen.bo-parallax{border-radius:0}
.bo-zitat-streifen.bo-parallax>img{z-index:-2}
.bo-zitat-streifen.bo-parallax::after{z-index:-1}
@media (prefers-reduced-motion:reduce){.bo-parallax img{transform:none !important;top:0;height:100%}}

/* --- Scroll-Reveal per JS (statt Divi-Animation, damit nichts doppelt läuft) ---
   Klasse bo-reveal auf Row oder Modul. JS setzt .in beim Erscheinen. */
.bo-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--bo-ease),transform .75s var(--bo-ease)}
.bo-reveal.in{opacity:1;transform:none}
.bo-reveal--2{transition-delay:.1s}.bo-reveal--3{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){.bo-reveal{opacity:1;transform:none;transition:none}}
/* Bis das JS läuft, bleibt alles sichtbar — kein Blitz auf leere Seite */
html:not(.bo-js) .bo-reveal{opacity:1;transform:none}

/* --- Header: Scroll-Spy (aktiver Menüpunkt) + Handy-Vollbildmenü --- */
.bo-menu-linie nav>ul>li.bo-aktiv>a{color:var(--bo-gold-text) !important}
.bo-menu-linie nav>ul>li.bo-aktiv>a::after{right:0}
/* Divi-Off-Canvas zum Vollbild machen (Klasse bo-menu-voll am Menü-Modul) */
html .bo-menu-voll .et_mobile_menu{position:fixed !important;inset:0 !important;top:0 !important;width:100vw;height:100dvh;padding:calc(var(--bo-gutter) + 64px) var(--bo-gutter) var(--bo-gutter) !important;
  border:0 !important;background:var(--bo-page) !important;box-shadow:none !important;overflow:auto;z-index:99999;flex-direction:column} /* display: siehe Block 13 (bo-menu-offen) */
html .bo-menu-voll .et_mobile_menu>li>a{padding:18px 0 !important;border-bottom:1px solid var(--bo-line);font-size:clamp(1.5rem, 5vw, 1.875rem) !important;font-weight:700;letter-spacing:-.02em;color:var(--bo-ink) !important}
html .bo-menu-voll .et_mobile_menu>li.bo-aktiv>a{color:var(--bo-gold-text) !important}
html .bo-menu-voll .et_mobile_menu>li.bo-menu-cta{margin-top:auto;padding-top:32px;border:0}
html .bo-menu-voll .et_mobile_menu>li.bo-menu-cta>a{display:flex;justify-content:center;min-height:56px;border:0;border-radius:var(--bo-radius);background:var(--bo-ink);color:var(--bo-ink-fg) !important;font-size:17px !important}
html .bo-menu-voll .mobile_menu_bar{z-index:100000;position:relative}
/* Sticky-CTA nur auf dem Handy, mit Klasse .in vom JS */
html .bo-sticky-sec{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(120%);transition:transform .4s var(--bo-ease)}
html .bo-sticky-sec.in{transform:none}
@media (min-width:761px){html .bo-sticky-sec{display:none !important}}
@media (max-width:760px){body.bo-hat-sticky{padding-bottom:72px}}

/* --- Funktionen: Divi-Tabs-Modul als Umschalter ---
   Klasse bo-tabs am Tabs-Modul. Divi bringt Rahmen und Farben mit,
   die hier zurückgebaut werden. */
html .bo-tabs.et_pb_tabs{border:0 !important;background:transparent !important}
html .bo-tabs .et_pb_tabs_controls{display:inline-flex;gap:4px;padding:4px;background:var(--bo-muted) !important;border-radius:var(--bo-radius);border:0 !important;overflow-x:auto;max-width:100%}
html .bo-tabs .et_pb_tabs_controls::after{display:none}
html .bo-tabs .et_pb_tabs_controls li{border:0 !important;background:transparent !important;flex:none}
html .bo-tabs .et_pb_tabs_controls li a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px !important;border-radius:2px;
  font-size:15px !important;font-weight:600 !important;color:var(--bo-text-2) !important;white-space:nowrap;line-height:1 !important}
html .bo-tabs .et_pb_tabs_controls li.et_pb_tab_active a{background:var(--bo-card);color:var(--bo-ink) !important;box-shadow:var(--bo-elev-1)}
html .bo-tabs .et_pb_all_tabs{background:transparent !important;border:0 !important;padding:clamp(24px, 3vw, 36px) 0 0 !important}
html .bo-tabs .et_pb_tab{padding:0 !important;animation:bo-fade .4s var(--bo-ease) both}
.bo-tab-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));gap:clamp(28px, 4vw, 56px);align-items:center}
.bo-tab-grid h3{margin:0 0 16px;font-size:clamp(1.25rem, 1.1rem + .8vw, 1.625rem);font-weight:700;letter-spacing:-.02em;color:var(--bo-ink)}
.bo-tab-grid p{margin:0 0 16px;font-size:clamp(1rem, .97rem + .2vw, 1.0625rem);line-height:1.6;color:var(--bo-text-2);max-width:50ch}
.bo-haken{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;font-size:16px;color:var(--bo-ink)}
.bo-haken li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.bo-haken li::before{content:"";width:18px;height:18px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6680F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes bo-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Kompakte Funktions-Kacheln unter den Tabs */
.bo-kachel-kopf{display:flex;flex-direction:column;gap:10px}
.bo-kachel-kopf h3{margin:0;font-size:17px;font-weight:700;color:var(--bo-ink)}
.bo-kachel-kopf p{margin:0;font-size:14.5px;line-height:1.5;color:var(--bo-text-2)}

/* --- Hero-Sprachdemo (Code-Modul divi/4-hero-sprachdemo.html) --- */
.bo-demo{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.bo-demo-screen{display:flex;flex-direction:column;height:100%;padding:60px 16px 22px;box-sizing:border-box;gap:12px}
.bo-demo-kopf{display:flex;align-items:center;justify-content:space-between}
.bo-demo-kopf b{font-size:19px;font-weight:700;color:var(--bo-ink)}
.bo-demo-zeit{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--bo-text-3)}
.bo-demo.is-rec .bo-demo-zeit{color:var(--bo-critical)}
.bo-demo-zeit i{width:8px;height:8px;border-radius:9999px;background:var(--bo-critical);display:none}
.bo-demo.is-rec .bo-demo-zeit i{display:block;animation:bo-pulse 2.4s ease-out infinite}
.bo-demo-wave{display:flex;align-items:flex-end;gap:3px;height:44px;padding:0 2px}
.bo-demo-wave i{flex:1;height:100%;transform-origin:bottom;background:var(--bo-gold);border-radius:2px;display:block;transform:scaleY(.14);opacity:.55}
.bo-demo.is-rec .bo-demo-wave i{opacity:1;animation:bo-wave 1.1s ease-in-out infinite}
.bo-demo-text{margin:0;font-size:16px;line-height:1.4;font-weight:500;color:var(--bo-ink);min-height:68px;display:flex;flex-wrap:wrap;gap:0 .3em;align-content:flex-start}
.bo-demo-text span{animation:bo-fade .26s var(--bo-ease) both}
.bo-demo-caret{width:2px;height:1em;background:var(--bo-gold);display:none;align-self:center}
.bo-demo.is-rec .bo-demo-caret{display:inline-block;animation:bo-caret 1s steps(1) infinite}
.bo-demo-linie{height:1px;background:var(--bo-line)}
.bo-demo-felder{display:flex;flex-direction:column;gap:7px;min-height:212px}
.bo-demo-felder div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius);padding:10px 12px;
  animation:bo-fly .46s cubic-bezier(.2,.8,.2,1) both}
.bo-demo-felder span{font-size:13.5px;color:var(--bo-text-2)}
.bo-demo-felder b{font-size:13.5px;font-weight:600;text-align:right;color:var(--bo-ink)}
.bo-demo-felder b.ok{color:var(--bo-ok)}
.bo-demo-fuss{margin-top:auto;display:flex;align-items:center;gap:10px}
.bo-demo-fuss>div{height:46px;border-radius:var(--bo-radius);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}
.bo-demo-fuss>div:first-child{flex:1;border:1px solid var(--bo-line-input);color:var(--bo-ink)}
.bo-demo-fuss>div:last-child{flex:1.4;background:var(--bo-ink);color:var(--bo-ink-fg)}
.bo-demo-fuss svg{display:none;color:var(--bo-ok)}
.bo-demo.is-saved .bo-demo-fuss svg{display:block;animation:bo-fade .3s var(--bo-ease) both}
.bo-demo-chips{display:flex;flex-direction:column;gap:10px;align-items:center}
.bo-demo-chips small{font-size:13px;font-weight:600;color:var(--bo-text-3)}
.bo-demo-chips div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bo-chip{padding:9px 14px;min-height:44px;white-space:nowrap;border-radius:2px;font:600 14px/1.2 inherit;cursor:pointer;
  background:var(--bo-card);color:var(--bo-text-2);border:1px solid var(--bo-line);transition:background .2s,color .2s,border-color .2s}
.bo-chip:hover{border-color:var(--bo-gold)}
.bo-chip.is-on{background:var(--bo-ink);color:var(--bo-ink-fg);border-color:var(--bo-ink)}
@keyframes bo-wave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes bo-pulse{0%{box-shadow:0 0 0 0 rgba(220,166,75,.55)}70%{box-shadow:0 0 0 22px rgba(220,166,75,0)}100%{box-shadow:0 0 0 0 rgba(220,166,75,0)}}
@keyframes bo-caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes bo-fly{from{opacity:0;transform:translateY(-34px) scale(.94)}60%{opacity:1}to{opacity:1;transform:none}}
.bo-hero-glow{position:absolute;right:-10%;top:-20%;width:min(60vw, 760px);aspect-ratio:1;border-radius:9999px;pointer-events:none;
  background:radial-gradient(circle, rgba(220,166,75,.22), rgba(220,166,75,0) 65%)}

/* --- Preise v5: Slider + Monatlich/Jährlich (Code-Modul divi/5-preis-slider.html) --- */
.bo-preis-steuer{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));gap:clamp(20px, 3vw, 48px);align-items:center;
  padding:clamp(20px, 2.5vw, 28px) 0;border-top:1px solid var(--bo-line);border-bottom:1px solid var(--bo-line);margin-bottom:clamp(24px, 3vw, 36px)}
.bo-preis-steuer label{display:block;font-size:14px;font-weight:600;color:var(--bo-ink)}
.bo-slider-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.bo-slider-kopf output{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);font-weight:700;letter-spacing:-.03em;color:var(--bo-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bo-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
.bo-slider:focus{outline:none}
.bo-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg, var(--bo-gold) var(--bo-pct, 8%), var(--bo-muted) var(--bo-pct, 8%))}
.bo-slider::-moz-range-track{height:6px;border-radius:3px;background:var(--bo-muted)}
.bo-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--bo-gold)}
.bo-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:9999px;background:var(--bo-ink);border:3px solid var(--bo-card);box-shadow:0 1px 4px rgba(33,28,21,.3)}
.bo-slider::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--bo-ink);border:3px solid var(--bo-card);box-shadow:0 1px 4px rgba(33,28,21,.3)}
.bo-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(220,166,75,.5)}
.bo-slider-skala{display:flex;justify-content:space-between;font-size:12px;color:var(--bo-text-3)}
.bo-empfehlung{margin:0;font-size:17px;line-height:1.5;font-weight:500;color:var(--bo-ink);max-width:44ch}
.bo-segment{display:inline-flex;gap:4px;padding:4px;background:var(--bo-muted);border-radius:var(--bo-radius)}
.bo-segment button{min-height:40px;padding:0 16px;border:0;border-radius:2px;background:transparent;font:600 15px/1 inherit;color:var(--bo-text-2);cursor:pointer;transition:background .2s,color .2s}
.bo-segment button.is-on{background:var(--bo-card);color:var(--bo-ink);box-shadow:var(--bo-elev-1)}
.bo-preis-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* Vier Karten: Raster ab 240px, Badge nur auf der empfohlenen */
.bo-plan .bo-plan-limit{font-weight:600}
.bo-plan-echo{display:block;font-size:13.5px;color:var(--bo-text-2);margin-top:6px;min-height:20px}
html .et_pb_column.bo-plan.is-empfohlen{border:2px solid var(--bo-gold) !important;box-shadow:var(--bo-elev-2) !important}


/* ============================================================
   V6-ERGÄNZUNGEN — Beeond Landing v6 (Stand 10.09.2026)
   Geräte-Rahmen Tablet + Laptop, Hero-Komposition, Funktionen mit
   Scroll-Screen und Geräte-Umschalter, Zahlen-Counter, FAQ-Suche,
   Vereine-Band. JS: js/beeond-v6.js (ersetzt beeond-v5.js).
   ============================================================ */

/* --- Handy-Rahmen: Masse in Prozent, damit er in jeder Breite stimmt (ersetzt v5-Werte) --- */
.bo-phone{border-radius:14.5%/6.7%;padding:3.4%}
.bo-phone::before{top:6.5%;height:2.9%;border-radius:999px}
.bo-phone>div,.bo-phone>span,.bo-phone>.et_pb_image_wrap{border-radius:11.5%/5.3%;container-type:inline-size}
/* Demo-Schrift skaliert mit der Rahmenbreite (Container-Query-Einheit) */
.bo-demo-screen{font-size:clamp(10px, 5.1cqw, 16px);padding:3.6em 1em 1.3em;gap:.7em}
.bo-demo-kopf b{font-size:1.2em}.bo-demo-zeit{font-size:.82em}.bo-demo-wave{height:2.6em}
.bo-demo-text{font-size:1em;min-height:4.2em}.bo-demo-rubrik{display:block;font-size:.68em;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--bo-text-3)}
.bo-demo-felder{gap:.45em;min-height:13em}.bo-demo-felder div{padding:.62em .75em}.bo-demo-felder span,.bo-demo-felder b{font-size:.85em}
.bo-demo-fuss>div{height:2.9em;font-size:.88em}

/* --- Tablet --- */
.bo-tablet{position:relative;aspect-ratio:4/3;background:#14110D;border-radius:5%/6.5%;padding:2.6%;box-sizing:border-box;margin:0 auto;
  box-shadow:0 30px 60px -20px rgba(33,28,21,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.bo-tablet--hoch{aspect-ratio:3/4;border-radius:6.5%/5%}
.bo-tablet>div{position:relative;width:100%;height:100%;border-radius:3%/4%;overflow:hidden;background:var(--bo-page)}
.bo-tablet img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Laptop mit Browser-Fenster --- */
.bo-laptop{position:relative;aspect-ratio:16/10.6;margin:0 auto}
.bo-laptop>.lid{position:absolute;left:5%;right:5%;top:0;bottom:6.5%;background:#14110D;border-radius:2.2%/3.4% 3.4% 0 0;padding:1.8% 1.8% 2.2%;box-sizing:border-box;
  box-shadow:0 30px 60px -20px rgba(33,28,21,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.bo-laptop>.lid::before{content:"";position:absolute;top:.8%;left:50%;width:.6%;aspect-ratio:1;border-radius:50%;background:#2A251D;transform:translateX(-50%)}
.bo-laptop>.lid>div{width:100%;height:100%;border-radius:1%/1.6%;overflow:hidden;background:var(--bo-page);position:relative}
.bo-laptop>.base{position:absolute;left:0;right:0;bottom:0;height:6.5%;background:linear-gradient(180deg,#3A342B,#1E1A15 40%,#14110D);border-radius:0 0 10px 10px / 0 0 40% 40%;box-shadow:0 20px 40px -18px rgba(33,28,21,.5)}
.bo-laptop>.base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:28%;transform:translateX(-50%);background:#0D0B08;border-radius:0 0 8px 8px}
.bo-browser{position:absolute;inset:0;display:flex;flex-direction:column;container-type:inline-size}
.bo-browser>.bar{height:9%;min-height:22px;background:#E9E2D1;border-bottom:1px solid var(--bo-line);display:flex;align-items:center;gap:2.4%;padding:0 3%}
.bo-browser>.bar i{width:1.6%;min-width:6px;aspect-ratio:1;border-radius:50%;background:#C9C0AA;display:block}
.bo-browser>.bar span{flex:1;height:52%;max-height:22px;border-radius:999px;background:var(--bo-tint);font-size:min(1.9cqw, 12px);color:var(--bo-text-3);display:flex;align-items:center;padding:0 2%;font-weight:500}
.bo-browser>.body{flex:1;position:relative}
.bo-browser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

/* --- Hero-Komposition: Laptop hinten, Tablet links, Handy rechts vorn --- */
.bo-compose{position:relative;width:100%;aspect-ratio:1/.92}
.bo-compose-lap{position:absolute;left:0;top:0;width:78%;z-index:1}
.bo-compose-tab{position:absolute;left:0;bottom:0;width:30%;z-index:2}
.bo-compose-pho{position:absolute;right:0;bottom:0;width:42%;z-index:3}
@media (max-width:1100px){.bo-compose{aspect-ratio:auto;display:flex;justify-content:center}.bo-compose-lap,.bo-compose-tab{display:none}.bo-compose-pho{position:static;width:min(100%, 320px)}}

/* --- Platzhalter in Rahmen, bis Screenshots da sind --- */
.bo-fn-leer{position:absolute;inset:0;display:grid;place-items:center;padding:8%;text-align:center;font-size:clamp(11px, 2.6cqw, 14px);font-weight:600;color:var(--bo-text-3);
  background:repeating-linear-gradient(135deg, var(--bo-tint) 0 12px, var(--bo-page) 12px 24px)}

/* --- Funktionen: klebendes Gerät links, Blöcke rechts --- */
.bo-fn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 5vw, 80px);align-items:stretch}
html .bo-fn-grid>.et_pb_column{width:auto !important;margin:0 !important;min-width:0}
.bo-fn-device{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:20px;padding:8px 0 24px}
.bo-fn-frames{position:relative;width:100%;display:flex;justify-content:center}
.bo-fn-frames [data-dev-frame]{display:none;width:100%}
.bo-fn-frames [data-dev-frame].is-on{display:block;animation:bo-fade .4s var(--bo-ease) both}
.bo-fn-frames .bo-phone{width:min(100%, clamp(220px, 24vw, 300px))}
.bo-fn-frames .bo-tablet{width:min(100%, 560px)}
.bo-fn-frames .bo-laptop{width:min(100%, 600px)}
.bo-fn-shot{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--bo-ease);pointer-events:none}
.bo-fn-shot.is-on{opacity:1;pointer-events:auto}
.bo-phone .bo-fn-shot{width:100%;height:100%;object-fit:cover}
.bo-fn-block{min-height:min(72vh, 640px);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 0;border-bottom:1px solid var(--bo-line);
  opacity:.38;transition:opacity .5s var(--bo-ease)}
.bo-fn-block.is-on,html:not(.bo-js) .bo-fn-block{opacity:1}
.bo-fn-block:last-child{border-bottom:0}
.bo-fn-block .bo-nr-gross{display:block}
.bo-fn-block h3{margin:0;font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem);font-weight:700;letter-spacing:-.02em;color:var(--bo-ink)}
.bo-fn-block p{margin:0;font-size:clamp(1rem, .97rem + .2vw, 1.0625rem);line-height:1.6;color:var(--bo-text-2);max-width:50ch}
@media (max-width:900px){.bo-fn-grid{grid-template-columns:1fr}.bo-fn-device{position:relative;top:0}.bo-fn-block{min-height:0;padding:32px 0}}
/* Umschalter (Handy / Tablet / Web) — auch für Monatlich/Jährlich */
.bo-seg{display:inline-flex;gap:4px;padding:4px;background:var(--bo-muted);border-radius:var(--bo-radius)}
.bo-seg button{min-height:40px;padding:0 14px;border:0;border-radius:2px;background:transparent;font:600 14px/1 inherit;color:var(--bo-text-2);cursor:pointer;transition:background .2s,color .2s}
.bo-seg button.is-on{background:var(--bo-card);color:var(--bo-ink);box-shadow:var(--bo-elev-1)}

/* --- Fakten-Band mit Zahlen-Counter --- */
.bo-fakt-zahl{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:3px solid var(--bo-gold);color:var(--bo-ink-fg)}
.bo-fakt-zahl b{font-size:clamp(2rem, 1.4rem + 2vw, 3rem);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bo-fakt-zahl strong{font-size:16px;font-weight:600;margin-top:6px}
.bo-fakt-zahl span{font-size:14.5px;opacity:.7}

/* --- Zitat als Figure --- */
.bo-zitat-fig{margin:0;display:flex;flex-direction:column;gap:22px;max-width:64ch}
.bo-zitat-fig blockquote{margin:0;font-size:clamp(1.5rem, 1.05rem + 2.2vw, 2.75rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;text-wrap:balance;color:var(--bo-ink-fg)}
.bo-zitat-fig figcaption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:4px;color:var(--bo-ink-fg);font-size:clamp(.9375rem, .9rem + .25vw, 1.0625rem)}
.bo-zitat-fig figcaption::before{content:"";width:44px;height:3px;background:var(--bo-gold);flex:none}
.bo-zitat-fig figcaption b{font-weight:600}.bo-zitat-fig figcaption span{opacity:.75}

/* --- Preise: Spar-Hinweis, Vereine-Band --- */
.bo-spar-hinweis{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--bo-ok);white-space:nowrap;text-align:right}
.bo-vereine{margin-top:clamp(14px, 1.6vw, 20px);background:var(--bo-ink);color:var(--bo-ink-fg);border-radius:var(--bo-radius);padding:clamp(22px, 2.6vw, 32px);
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:clamp(20px, 3vw, 40px);align-items:center}
.bo-vereine h3{margin:0;font-size:clamp(1.25rem, 1.1rem + .8vw, 1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--bo-ink-fg)}
.bo-vereine p{margin:0;font-size:15px;line-height:1.55;opacity:.8;max-width:56ch}
.bo-vereine .bo-vereine-cta{justify-self:end}

/* --- FAQ: Suchfeld + Divi-Toggles --- */
.bo-faq-kopf{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1024px){.bo-faq-kopf{position:static}}
.bo-faq-suche input{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);
  background:var(--bo-card);color:var(--bo-ink);font:400 16px/1.35 inherit;max-width:420px}
.bo-faq-suche input:focus{outline:0;border-color:var(--bo-gold);box-shadow:0 0 0 3px rgba(220,166,75,.28)}
.bo-faq-zahl{font-size:14px;color:var(--bo-text-2)}
.bo-faq-leer{display:none;padding:28px 0;font-size:16px;color:var(--bo-text-2)}
html .bo-faq-frage.et_pb_toggle{padding:20px 0 !important;border:0 !important;border-bottom:1px solid var(--bo-line) !important;background:transparent !important}
html .bo-faq-frage .et_pb_toggle_title{padding-right:36px;font-weight:600;color:var(--bo-ink)}
html .bo-faq-frage .et_pb_toggle_title::before{color:var(--bo-gold-text);right:6px;transition:transform .32s var(--bo-ease)}
html .bo-faq-frage.et_pb_toggle_open .et_pb_toggle_title::before{transform:rotate(180deg)}
html .bo-faq-frage .et_pb_toggle_content{padding-top:14px;font-size:16px;line-height:1.6;color:var(--bo-text-2);max-width:72ch}


/* --- V6.1 (10.09.2026): Geräte-Rahmen realistischer — Titan-Kante, Tasten, Glanz, Statusleiste;
       Hero wieder nur mit Handy. Gilt zusätzlich zu den Regeln oben (überschreibt). --- */
.bo-phone{background:#0B0908;border-radius:15%/6.9%;padding:2.7%;
  box-shadow:0 0 0 1.5px #57514A,0 0 0 2.5px #23201B,0 50px 90px -34px rgba(33,28,21,.6),0 18px 30px -20px rgba(33,28,21,.4)}
.bo-phone::before{top:5.6%;width:30%;height:2.7%;background:#0B0908;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);z-index:4}
.bo-phone::after{content:"";position:absolute;right:-1.4%;top:23%;width:1.4%;height:8.5%;background:linear-gradient(90deg,#3A352F,#57514A);border-radius:0 2px 2px 0}
.bo-keys{position:absolute;left:-1.4%;top:15%;width:1.4%;height:2.4%;background:linear-gradient(90deg,#57514A,#3A352F);border-radius:2px 0 0 2px}
.bo-keys::before,.bo-keys::after{content:"";position:absolute;left:0;width:100%;height:190%;background:inherit;border-radius:inherit}
.bo-keys::before{top:200%}.bo-keys::after{top:430%}
.bo-phone>div,.bo-phone>span:not(.bo-keys),.bo-phone>.et_pb_image_wrap{border-radius:12.6%/5.8%}
.bo-phone>div::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(112deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 46%)}
.bo-phone>div::before{content:"";position:absolute;bottom:1.6%;left:50%;width:34%;height:.65%;transform:translateX(-50%);background:rgba(33,28,21,.5);border-radius:999px;z-index:5}
.bo-sb{position:absolute;left:0;right:0;top:.55em;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 .9em;height:2.2em;
  font-size:clamp(9px, 4.4cqw, 14px);font-weight:600;color:var(--bo-ink)}
.bo-sb>span{display:flex;align-items:center;gap:.35em}.bo-sb small{font-size:.85em}.bo-sb svg{display:block}
.bo-demo-screen{padding:4.4em 1em 1.6em}
.bo-tablet{background:#0B0908;padding:2.2%;box-shadow:0 0 0 1.5px #57514A,0 0 0 2.5px #23201B,0 50px 90px -34px rgba(33,28,21,.6)}
.bo-tablet::before{content:"";position:absolute;top:1%;left:50%;width:.9%;aspect-ratio:1;border-radius:50%;background:#1D1A16;transform:translateX(-50%);box-shadow:inset 0 0 0 1px #2E2A25}
.bo-tablet>div{border-radius:2.4%/3.2%}
.bo-tablet>div::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(112deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 46%)}
.bo-laptop>.lid{left:6%;right:6%;bottom:7%;background:#0B0908;padding:1.6% 1.6% 2.4%;box-shadow:0 0 0 1.5px #57514A,0 0 0 2.5px #23201B,0 50px 90px -34px rgba(33,28,21,.6)}
.bo-laptop>.lid::before{background:#1D1A16;box-shadow:inset 0 0 0 1px #2E2A25}
.bo-laptop>.lid>div::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(112deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 46%)}
.bo-laptop>.base{height:7%;background:linear-gradient(180deg,#5A544C 0,#2B2620 18%,#1A1611 70%,#0B0908);border-radius:2px 2px 10px 10px / 2px 2px 40% 40%}
.bo-laptop>.base::after{content:"";position:absolute;left:8%;right:8%;bottom:16%;height:1px;background:rgba(255,255,255,.08)}
/* Hero: Komposition entfällt — Handy zentriert */
.bo-compose{aspect-ratio:auto;display:flex;justify-content:center}
.bo-compose-lap,.bo-compose-tab{display:none}
/* FAQ: Kontakt-Karte statt Textlink */
.bo-faq-kontakt{margin-top:14px;padding:20px 22px;background:var(--bo-card);border:1px solid var(--bo-line);border-top:3px solid var(--bo-gold);border-radius:var(--bo-radius);
  display:flex;flex-direction:column;gap:12px;max-width:420px;box-sizing:border-box}
.bo-faq-kontakt b{font-size:17px;font-weight:700;color:var(--bo-ink)}
.bo-faq-kontakt p{margin:0;font-size:15px;line-height:1.5;color:var(--bo-text-2)}

/* Echte Geräterahmen-PNGs statt CSS-Rahmen (Kapitel 16): nur Bühne, kein Rahmen */
.bo-fn-frame{position:relative;width:100%;background:transparent;box-shadow:none;padding:0}
.bo-fn-frame--phone{width:min(100%, clamp(220px, 24vw, 300px));aspect-ratio:1340/2720}
.bo-fn-frame--tablet{width:min(100%, 560px);aspect-ratio:4/3}
.bo-fn-frame--web{width:min(100%, 600px);aspect-ratio:16/10.6}
.bo-fn-frame .bo-fn-shot{object-fit:contain}


/* ============================================================
   Beeond — Korrekturen nach dem zweiten Live-Abgleich
   ------------------------------------------------------------
   Ans ENDE von css/beeond-divi.css kopieren.
   WICHTIG: den Hero-Block aus dem letzten Bericht
   (.bo-phone{aspect-ratio:9/19.5; max-height:…; width:auto})
   VORHER löschen — er ist die Ursache des zerlegten Handys.
   ============================================================ */

/* --- 1) Hero-Handy: Rahmen behält sein Format, der Inhalt
   passt sich an (statt den Rahmen zu strecken) ------------- */
.bo-demo .bo-phone{
  width:min(100%, clamp(260px, 26vw, 320px));
  height:auto;
  max-height:none;
  aspect-ratio:1179/2556;
}
.bo-demo .bo-phone > div{height:100%;min-height:0;overflow:hidden}
.bo-demo .bo-demo-screen{height:100%;min-height:0;overflow:hidden}
.bo-demo .bo-demo-text{min-height:3.2em}
.bo-demo .bo-demo-felder{flex:1 1 auto;min-height:0;overflow:hidden}
.bo-demo .bo-demo-fuss{margin-top:auto}

/* Hero-Spalten oben ausrichten statt auf Gerätehöhe strecken */
#top .et_pb_row{align-items:flex-start}
#top .et_pb_column{justify-content:flex-start}

/* --- 2) Sticky-CTA auch auf Desktop ----------------------- */
/* Ersetzt die alte Regel
   @media (min-width:761px){html .bo-sticky-sec{display:none !important}} */
html .bo-sticky-sec{display:block !important}
@media (min-width:761px){
  html .bo-sticky-sec .bo-sticky{max-width:var(--bo-wrap);margin:0 auto}
}

/* --- 3) Funktionen: Gerät läuft mit ----------------------- */
/* position:sticky wirkt nur, wenn KEIN Vorfahr overflow gesetzt hat. */
.bo-fn-grid,
.bo-fn-grid .et_pb_column{overflow:visible !important}
.bo-fn-device{position:sticky;top:96px;align-self:start}

/* --- 4) Kachel-Raster: drei nebeneinander ----------------- */
html .bo-auto-220.bo-auto-220{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  align-items:stretch !important;
}
html .bo-auto-220.bo-auto-220 > .et_pb_column{width:auto !important;margin:0 !important}

/* Kartenoptik der Kacheln (kommt sonst aus den Column-Einstellungen
   und geht beim Umbau auf Code-Module verloren) */
.bo-kachel{
  background:var(--bo-card);
  border:1px solid var(--bo-line);
  border-radius:var(--bo-radius);
  padding:clamp(18px, 2vw, 24px);
  height:100%;box-sizing:border-box;
}
.bo-kachel--dunkel{background:var(--bo-ink);border-color:transparent}
.bo-kachel--dunkel h3{color:var(--bo-ink-fg)}
.bo-kachel--dunkel p{color:rgba(247,244,237,.78)}

/* --- 5) Preiskarten gleich hoch, Knöpfe auf einer Linie --- */
html .et_pb_column.bo-plan{
  display:flex !important;flex-direction:column !important;
  height:100% !important;position:relative !important;
  padding-top:calc(var(--bo-karte-pad) + 6px) !important;
}
html .et_pb_column.bo-plan .bo-plan-cta{margin-top:auto !important}
.bo-plan .bo-plan-badge{top:-12px;left:var(--bo-karte-pad)}

/* --- 6) Footer: Telefonnummer und Einzug ------------------ */
.et-l--footer ul,.et-l--footer ol{list-style:none;margin:0;padding:0}
.et-l--footer li{padding:3px 0}
.et-l--footer a{text-decoration:none}


/* ============================================================
   Beeond — Handy und Tablet (Runde 3)
   ------------------------------------------------------------
   Ans ENDE von css/beeond-divi.css kopieren, nach dem
   Fluent-Forms-Block.

   Behebt: zu hoher Kopfbereich ohne Menü, überdimensionierte
   Sticky-Leiste, umbrechender Footer, mitlaufendes Gerät.
   ============================================================ */

/* ---------- 1) Kopfbereich: kompakt, mit Menüknopf ---------- */
@media (max-width:980px){

  /* Sektion und Row des Theme-Builder-Headers flach machen */
  .et-l--header .et_pb_section{padding:0 !important}
  .et-l--header .et_pb_row{
    width:100% !important;max-width:none !important;
    padding:8px var(--bo-gutter) !important;margin:0 !important;
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:center !important;justify-content:space-between !important;
    gap:12px !important;min-height:60px;
  }
  .et-l--header .et_pb_column{
    width:auto !important;margin:0 !important;padding:0 !important;
    flex:0 0 auto !important;
  }
  .et-l--header .et_pb_column:first-child{flex:1 1 auto !important}

  /* Logo auf Handy-Grösse */
  .et-l--header .et_pb_image,
  .et-l--header .et_pb_image .et_pb_image_wrap{margin:0 !important;line-height:0}
  .et-l--header .et_pb_image img{height:24px !important;width:auto !important}

  /* Waagrechtes Menü aus, Menüknopf an */
  .et-l--header .et_pb_menu__menu,
  .et-l--header .et-menu-nav > ul.et-menu{display:none !important}
  .et-l--header .et_mobile_nav_menu,
  .et-l--header .et_pb_menu__wrap .et_mobile_nav_menu{
    display:flex !important;align-items:center;justify-content:flex-end;
    min-width:44px;min-height:44px;margin:0 !important;
  }
  .et-l--header .mobile_menu_bar{padding:0 !important}
  .et-l--header .mobile_menu_bar:before{
    color:var(--bo-ink) !important;font-size:30px !important;line-height:44px !important;
  }

  /* Der Kopf-Knopf ist auf dem Handy doppelt — er steht im Menü.
     Wenn du ihn behalten willst: diese Regel löschen. */
  .et-l--header .et_pb_button_module_wrapper,
  .et-l--header .et_pb_button{display:none !important}

  /* Sprachumschalter im Kopf ausblenden — er steht im Menü */
  .et-l--header li.menu-item-language{display:none !important}
}

/* Ankersprünge: Abstand = Kopfhöhe + Luft */
@media (max-width:980px){
  .et_pb_section[id],.et-l section[id],section[id]{scroll-margin-top:72px}
}

/* ---------- 2) Sticky-Leiste: eine schlanke Zeile ---------- */
@media (max-width:980px){
  html .bo-sticky-sec .et_pb_row{
    width:100% !important;max-width:none !important;
    padding:8px var(--bo-gutter) !important;margin:0 !important;
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:center !important;justify-content:space-between !important;gap:12px !important;
  }
  html .bo-sticky-sec .et_pb_section{padding:0 !important}
  html .bo-sticky-sec .et_pb_column{
    width:auto !important;margin:0 !important;padding:0 !important;flex:0 1 auto !important;
  }
  html .bo-sticky-sec .et_pb_text,
  html .bo-sticky-sec p{
    margin:0 !important;text-align:left !important;
    font-size:14px !important;line-height:1.25 !important;max-width:18ch;
  }
  html .bo-sticky-sec .et_pb_button{
    margin:0 !important;white-space:nowrap;
    min-height:44px;padding:11px 18px !important;font-size:15px !important;
  }
  body.bo-hat-sticky{padding-bottom:64px}
}

/* ---------- 3) Footer: stapeln statt Wörter zerreissen ----- */
@media (max-width:980px){
  .et-l--footer .et_pb_row{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:30px 20px !important;width:100% !important;
    padding-left:var(--bo-gutter) !important;padding-right:var(--bo-gutter) !important;
  }
  .et-l--footer .et_pb_column{width:auto !important;margin:0 !important;min-width:0}
}
@media (max-width:520px){
  .et-l--footer .et_pb_row{grid-template-columns:1fr !important;gap:26px !important}
}
/* Nie mitten im Wort trennen, nie zentriert */
.et-l--footer,.et-l--footer *{
  overflow-wrap:normal !important;word-break:normal !important;hyphens:none !important;
}
.et-l--footer .et_pb_text,
.et-l--footer .bo-footer-links,
.et-l--footer h4,.et-l--footer p,.et-l--footer li{text-align:left !important}
.et-l--footer .bo-footer-links a{display:inline-block;padding:4px 0;min-height:0}

/* ---------- 4) Gerät läuft mit --------------------------- */
/* Desktop: sticky braucht überall sichtbaren Überlauf */
.bo-fn-grid,
.bo-fn-grid > .et_pb_column,
#funktionen,
#funktionen .et_pb_row{overflow:visible !important}
.bo-fn-grid > .et_pb_column:first-child{align-self:start !important}
.bo-fn-device{position:sticky !important;top:96px !important}

/* Handy und Tablet: kompaktes Gerät, klebt unter dem Kopf */
@media (max-width:900px){
  .bo-fn-grid{display:block !important}
  .bo-fn-device{
    position:sticky !important;top:64px !important;z-index:5;
    background:var(--bo-page);
    padding:10px 0 14px !important;margin-bottom:6px;
  }
  .bo-fn-device .bo-phone{width:min(52vw, 200px) !important}
  .bo-fn-device .bo-seg{transform:scale(.92);transform-origin:center}
  .bo-fn-block{padding:26px 0 !important;min-height:0 !important}
}

/* ---------- 5) Hero auf dem Handy ------------------------ */
@media (max-width:760px){
  /* Knöpfe auf volle Breite, gleich gross */
  #top .et_pb_button_module_wrapper,
  #top .et_pb_button{width:100% !important;text-align:center !important;justify-content:center}
  #top .et_pb_button{min-height:52px;display:flex !important;align-items:center}

  /* Trust-Zeile untereinander, ohne Trennpunkt am Zeilenanfang */
  .bo-trust{flex-direction:column;align-items:flex-start;gap:8px}
  .bo-trust>span+span::before{display:none}

  /* Demo-Chips umbrechen sauber */
  .bo-demo-chips div{gap:8px}
}

/* ---------- 6) Allgemein auf dem Handy ------------------- */
@media (max-width:760px){
  /* Kein waagrechtes Scrollen */
  html,body{overflow-x:hidden}
  /* Alle Raster einspaltig, wenn Divi nicht umbricht */
  html .bo-auto-180,html .bo-auto-210,html .bo-auto-220,
  html .bo-auto-260,html .bo-auto-280,html .bo-auto-300,html .bo-auto-340{
    grid-template-columns:1fr !important;
  }
  /* Divi-Rows, die auf nowrap stehen, umbrechen lassen */
  .et-l .et_pb_row{flex-wrap:wrap !important}
  .et-l .et_pb_row > .et_pb_column{min-width:0}
}


/* ============================================================
   Beeond — Kopf, Fuss, Handy-Menü, Sticky (Runde 4, v6.2)
   ------------------------------------------------------------
   Ans ENDE von css/beeond-divi.css kopieren, NACH 12-mobile.css.
   Jede Regel hier gewinnt gegen frühere Blöcke.

   Behebt: zu hoher Kopf und Fuss auf dem Desktop (Divi-Standard-
   abstände), Handy-Menü das sofort wieder zuklappt (iOS),
   blaue Footer-Links, Sticky-Leiste als Band auf dem Desktop.
   ============================================================ */

/* ---------- 1) Kopf: flach auf ALLEN Breiten ------------------
   Divi gibt jeder Sektion 4 % Innenabstand oben/unten, jeder Row
   2 % und jedem Modul 30 px Aussenabstand unten. Im Kopf sind das
   zusammen ~200 px bei 1440 px. Hier auf null. */
html .et-l--header .et_pb_section{padding:0 !important;margin:0 !important;background:var(--bo-page)}
html .et-l--header .et_pb_row{
  width:100% !important;max-width:var(--bo-wrap) !important;margin:0 auto !important;
  padding:10px var(--bo-gutter) !important;min-height:72px;
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  align-items:center !important;justify-content:space-between !important;gap:16px !important}
html .et-l--header .et_pb_column{
  width:auto !important;flex:0 0 auto !important;margin:0 !important;padding:0 !important;
  display:flex !important;flex-direction:row !important;align-items:center !important;gap:20px}
html .et-l--header .et_pb_column:first-child{flex:1 1 auto !important}
html .et-l--header .et_pb_module{margin:0 !important}
html .et-l--header .et_pb_image_wrap{display:block;line-height:0}
html .et-l--header .et_pb_image img{height:30px !important;width:auto !important}
html .et-l--header .et_pb_menu__wrap,html .et-l--header .et_pb_menu__menu,
html .et-l--header .et_pb_menu nav>ul{padding:0 !important;margin:0 !important;align-items:center}
html .et-l--header .et_pb_menu nav>ul>li{margin:0 0 0 28px !important;padding:0 !important}
html .et-l--header .et_pb_button_module_wrapper{margin:0 0 0 8px !important}
/* Desktop: der CTA-Eintrag im Menü ist doppelt (Knopf daneben) */
@media (min-width:981px){html .et-l--header .et_pb_menu__menu li.bo-menu-cta{display:none !important}}
/* Divi-Sticky darf den Kopf nicht transformieren — sonst klebt das
   Vollbild-Menü im 72-px-Kopf fest */
html .et-l--header .et_pb_sticky,html .et-l--header .et_pb_section{transform:none !important}
/* Ankersprünge landen unter dem Kopf */
html{scroll-padding-top:88px}
@media (max-width:980px){html{scroll-padding-top:72px}}

/* ---------- 2) Fuss: ein Band, keine Divi-Luft ---------------- */
html .et-l--footer .et_pb_section{
  padding:clamp(40px, 5vw, 64px) var(--bo-gutter) clamp(28px, 3vw, 40px) !important;margin:0 !important;
  background:var(--bo-ink);color:var(--bo-ink-fg);border-top:1px solid rgba(255,255,255,.12)}
html .et-l--footer .et_pb_row{width:100% !important;max-width:var(--bo-wrap) !important;padding:0 !important;margin:0 auto !important}
html .et-l--footer .et_pb_column{margin-bottom:0 !important}
html .et-l--footer .et_pb_module{margin:0 0 14px !important}
html .et-l--footer .et_pb_module:last-child{margin-bottom:0 !important}
html .et-l--footer .et_pb_image img{height:26px !important;width:auto !important}
/* Text hell, Links hell — nicht Divis Standardblau und nicht text-2 (zu dunkel auf ink) */
html .et-l--footer,html .et-l--footer p,html .et-l--footer li,html .et-l--footer .et_pb_text{color:rgba(247,244,237,.72)}
html .et-l--footer a,html .et-l--footer .bo-footer-links a{color:rgba(247,244,237,.86) !important;text-decoration:none;font-size:15px}
html .et-l--footer a:hover,html .et-l--footer .bo-footer-links a:hover{color:var(--bo-gold) !important;text-decoration:underline;text-underline-offset:3px}
html .et-l--footer .bo-rubrik{color:var(--bo-gold);display:block;margin-bottom:12px}
html .et-l--footer .bo-footer-klein{font-size:13px;color:rgba(247,244,237,.55)}
/* Listen: eine Spalte, keine Punkte — auch wenn die Klasse fehlt */
html .et-l--footer ul{list-style:none !important;margin:0 !important;padding:0 !important;
  column-count:1 !important;-moz-column-count:1 !important;-webkit-column-count:1 !important}
html .et-l--footer li{padding:0;margin:0}
html .et-l--footer .bo-footer-links{gap:8px}
html .et-l--footer .bo-footer-links a{display:inline-block;padding:4px 0;min-height:0}

/* ---------- 3) Handy-Menü: an/aus über Klasse, nicht über jQuery
   Divi blendet das Menü mit slideToggle ein und aus. Das frühere
   «display:flex !important» machte diese Animation kaputt: Divi
   hielt das Menü für offen, klappte es zu, und die CSS zog es sofort
   wieder auf. Jetzt: die Klasse bo-menu-offen am <body> entscheidet,
   gesetzt von beeond-v6.js (Abschnitt 5). Ohne JS greift Divis
   eigene Klasse .opened als Ersatz. */
/* 3a) Divis eigenes Handy-Menü bleibt IMMER versteckt. Ohne JS greift
   Divis Klasse .opened als Notfall (dann ohne Vollbild). */
html.bo-js .bo-menu-voll .et_mobile_menu{display:none !important}
html:not(.bo-js) .bo-menu-voll .et_mobile_menu{position:absolute !important;inset:auto 0 auto 0 !important;top:100% !important;height:auto;z-index:9999}
/* 3b) Menüknopf: 44 px Ziel */
html .bo-menu-voll .mobile_menu_bar,html .bo-menu-voll .et_pb_menu__icon{
  display:flex !important;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0 !important;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none}
html .bo-menu-voll .mobile_menu_bar:before{color:var(--bo-ink) !important;font-size:30px !important;line-height:1 !important}
/* 3c) Unser Overlay — vom JS direkt an <body> gehängt, damit kein
   Divi-Stapelkontext (sticky, transform, z-index) es abdecken kann */
html .bo-menu-ov{position:fixed;inset:0;z-index:2147483000;display:none;flex-direction:column;
  background:var(--bo-page);color:var(--bo-ink);padding:0 var(--bo-gutter) max(var(--bo-gutter), env(safe-area-inset-bottom));
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html body.bo-menu-offen .bo-menu-ov{display:flex}
html.bo-menu-offen,html.bo-menu-offen body{overflow:hidden !important;height:100%}
html .bo-menu-ov-kopf{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:8px 0;flex:0 0 auto}
html .bo-menu-ov-logo{display:flex;align-items:center;line-height:0;color:var(--bo-ink);font-weight:700;text-decoration:none}
html .bo-menu-ov-logo img{height:24px;width:auto;display:block}
html .bo-menu-ov-x{width:44px;height:44px;margin-right:-8px;border:0;background:transparent;color:var(--bo-ink);
  font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:var(--bo-radius)}
html .bo-menu-ov-x:focus-visible{outline:2px solid var(--bo-gold);outline-offset:2px}
html .bo-menu-ov-liste{display:flex;flex-direction:column;flex:1 1 auto;padding-top:16px}
html .bo-menu-ov-liste a{display:block;padding:18px 0;border-bottom:1px solid var(--bo-line);
  font-size:clamp(1.5rem, 5vw, 1.875rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  color:var(--bo-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
html .bo-menu-ov-liste a:active{color:var(--bo-gold-text)}
html .bo-menu-ov-liste a.bo-menu-ov-cta{margin-top:auto;display:flex;justify-content:center;align-items:center;min-height:56px;
  border:0;border-radius:var(--bo-radius);background:var(--bo-ink);color:var(--bo-ink-fg);font-size:17px;font-weight:600;letter-spacing:0}
html .bo-menu-ov-liste a.bo-menu-ov-cta:active{background:var(--bo-gold);color:var(--bo-ink)}
@media (min-width:981px){html .bo-menu-ov{display:none !important}}

/* ---------- 4) Sticky-Leiste: nur Handy, erst nach dem Hero ------
   Ersetzt Abschnitt 2 aus 11-korrekturen-runde2.css.
   Desktop hat den Knopf im Kopf — zwei Dauer-CTAs konkurrieren. */
@media (min-width:761px){html .bo-sticky-sec{display:none !important}}
@media (max-width:760px){
  html .bo-sticky-sec{display:block !important;padding:0 !important}
  html .bo-sticky-sec .et_pb_row{padding:8px var(--bo-gutter) !important}
  body.bo-hat-sticky{padding-bottom:64px}
  /* Leiste weg, sobald das Menü offen ist */
  body.bo-menu-offen .bo-sticky-sec{transform:translateY(120%) !important}
}