/* ============================================================
   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. Zusammengesetzt: Kern + Blöcke 10–14, Stand 11.09.2026 (v6.3).
   ============================================================ */

:root{
  /* Farben — für die Code-Module. Normale Module: dieselben
     Hex-Werte in die Divi-Farbfelder, siehe Einstellungsblatt. */
  --bo-gold:#DCA64B;
  --bo-gold-text:#965D0C;
  --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:#706859;
  --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:#8F5A00}
.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.
   ============================================================ */
/* Runde 8 (14.09.2026): Divis Menü-Regeln
   (.et_pb_menu .et_pb_menu__menu>nav>ul>li>a) und unsere
   .bo-menu-linie-Unterstreichung sind spezifischer als
   li.menu-item-language>a — die Chips kamen nie an. Deshalb
   jetzt jede Chip-Eigenschaft mit !important und zusätzlich
   die Sprachklasse li.wpml-ls-item als zweiter Anker. Der Name
   steckt in <span class="wpml-ls-native">, deshalb wird der
   Span mit ausgeblendet. */
/* Der Chip ist höher als eine Menüzeile. Als inline-flex sitzt er
   sonst auf der Textgrundlinie und schiebt die ganze Menüzeile
   nach unten — deshalb vertical-align:middle am Link und
   align-items:center am li. */
li.menu-item-language,li.wpml-ls-item{
  margin-left:6px !important;
  display:inline-flex !important;align-items:center !important;
  vertical-align:middle !important}
li.menu-item-language:first-of-type,li.wpml-ls-item:first-of-type{margin-left:18px !important}

li.menu-item-language > a,
li.wpml-ls-item > a,
.bo-menu-linie nav>ul>li.menu-item-language>a{
  position:relative !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  box-sizing:border-box !important;vertical-align:middle !important;
  min-width:44px !important;min-height:36px !important;height:auto !important;
  padding:0 10px !important;margin:0 !important;
  border:1px solid transparent !important;border-radius:var(--bo-radius) !important;
  background:transparent !important;color:var(--bo-text-2) !important;
  font-weight:600 !important;line-height:1 !important;text-decoration:none !important;
  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,
li.wpml-ls-item > a::after,
.bo-menu-linie nav>ul>li.menu-item-language>a::after{display:none !important;content:none !important}
li.menu-item-language > a:hover,
li.wpml-ls-item > a:hover{
  border-color:var(--bo-gold) !important;color:var(--bo-ink) !important;opacity:1 !important}

/* Aktive Sprache = gefüllter Chip.
   WPML setzt die Klasse; aria-current="page" ist die Reserve. */
li.menu-item-language-current > a,
li.menu-item-language.current-lang > a,
li.wpml-ls-current-language > a,
li.menu-item-language > a[aria-current="page"],
li.wpml-ls-item > a[aria-current="page"],
li.menu-item-language > a[aria-current="page"]:hover,
li.wpml-ls-item > a[aria-current="page"]:hover{
  background:var(--bo-ink) !important;border-color:var(--bo-ink) !important;
  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,
li.wpml-ls-item .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 — am Link UND am Span
   .wpml-ls-native, in dem WPML den Namen ausgibt. ::before
   am Link 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,
li.wpml-ls-item > a,
li.menu-item-language > a .wpml-ls-native,
li.menu-item-language > a .wpml-ls-display,
li.wpml-ls-item > a .wpml-ls-native,
li.wpml-ls-item > a .wpml-ls-display{font-size:0 !important;letter-spacing:0 !important}
li.menu-item-language > a::before,
li.wpml-ls-item > a::before{
  content:attr(hreflang);
  display:inline-block !important;
  font-size:14px !important;font-weight:600 !important;line-height:1 !important;
  text-transform:uppercase !important;letter-spacing:.02em !important}
li.wpml-ls-item-de > a::before{content:"DE" !important}
li.wpml-ls-item-en > a::before{content:"EN" !important}
li.wpml-ls-item-fr > a::before{content:"FR" !important}
li.wpml-ls-item-it > a::before{content:"IT" !important}
/* Reserve, falls die Sprachklasse fehlt: lang-Attribut des Spans */
li.menu-item-language > a:has(.wpml-ls-native[lang="de"])::before{content:"DE" !important}
li.menu-item-language > a:has(.wpml-ls-native[lang="en"])::before{content:"EN" !important}

/* Im Off-Canvas-Menü volle Zeile und ausgeschriebener Name —
   eine Chip-Reihe ist dort zu gedrängt */
.et_mobile_menu li.menu-item-language,
.et_mobile_menu li.wpml-ls-item{margin:0 !important}
.et_mobile_menu li.menu-item-language > a,
.et_mobile_menu li.wpml-ls-item > a{
  display:flex !important;justify-content:flex-start !important;min-height:44px !important;
  border:0 !important;border-radius:0 !important;background:transparent !important;
  padding:10px 5% !important;font-size:15px !important;line-height:1.3 !important}
.et_mobile_menu li.menu-item-language > a .wpml-ls-native,
.et_mobile_menu li.wpml-ls-item > a .wpml-ls-native{font-size:15px !important}
.et_mobile_menu li.menu-item-language-current > a,
.et_mobile_menu li.wpml-ls-current-language > a,
.et_mobile_menu li.wpml-ls-item > a[aria-current="page"]{
  background:transparent !important;color:var(--bo-gold-text) !important}
.et_mobile_menu li.menu-item-language > a::before,
.et_mobile_menu li.wpml-ls-item > a::before{content:none !important;display: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='%23965D0C' 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}
}


/* ============================================================
   Beeond — Runde 5 (v6.3): Kopf blendet beim Scrollen aus, Fuss
   ohne Punkte + Copyright-Leiste, Funktionen-Abstand, Kacheln als
   ein Raster, Preise ohne Leistungslisten, Vereine-Knopf innen,
   offizielle Store-Badges, Sticky-CTA auf allen Breiten, WPML.
   ------------------------------------------------------------
   Ans ENDE von css/beeond-divi.css kopieren, NACH Block 13.
   ============================================================ */

/* ---------- 1) Kopf: verschwindet beim Runterscrollen, kommt beim
   Hochscrollen zurück (Klasse bo-kopf-weg am <body>, gesetzt vom JS).
   Die Regel «transform:none» aus Block 13 bleibt für Divis Sticky-
   Transition bestehen; diese hier ist spezifischer und gewinnt. */
html .et-l--header .et_pb_section{transition:transform .32s var(--bo-ease),box-shadow .32s var(--bo-ease);will-change:transform}
html body.bo-kopf-weg .et-l--header .et_pb_section{transform:translateY(-100%) !important}
html body.bo-kopf-weg .et-l--header .et_pb_section:focus-within{transform:none !important}
/* Klebender Kopf bekommt eine Haarlinie, sobald die Seite darunter liegt */
html body.bo-gescrollt .et-l--header .et_pb_section{box-shadow:0 1px 0 var(--bo-line)}
/* Solange das Menü offen ist, bleibt der Kopf stehen (das Overlay liegt sowieso darüber) */
html body.bo-menu-offen .et-l--header .et_pb_section{transform:none !important}
@media (prefers-reduced-motion:reduce){html .et-l--header .et_pb_section{transition:none}}
/* Ankersprünge: der Kopf ist beim Sprung meist weg — kleiner Versatz reicht */
html{scroll-padding-top:24px}
.et_pb_section[id],.et-l section[id],section[id]{scroll-margin-top:24px}

/* ---------- 2) Fuss: Punkte weg, auch wenn Divi sie am <li> oder per
   ::marker setzt; zusätzlich über die Klasse bo-fuss an der Sektion,
   falls der Theme-Builder-Wrapper .et-l--footer einmal anders heisst. */
html .et-l--footer ul,html .et-l--footer li,html .et-l--footer .et_pb_text ul,html .et-l--footer .et_pb_text_inner ul,
html .bo-fuss ul,html .bo-fuss li,html .bo-fuss .et_pb_text ul,html .bo-fuss .et_pb_text_inner ul,
ul.bo-footer-links,ul.bo-footer-links li{list-style:none !important;list-style-type:none !important;padding-left:0 !important;margin-left:0 !important}
html .et-l--footer li::marker,html .bo-fuss li::marker,ul.bo-footer-links li::marker{content:none !important;display:none !important}
html .et-l--footer .et_pb_text_inner ul,html .bo-fuss .et_pb_text_inner ul{line-height:inherit !important}
/* Copyright-Leiste: eigene, zweite Row im Fuss — steht damit auf jeder
   Breite zuunterst (Kapitel 13). */
html .et-l--footer .bo-footer-leiste,html .bo-fuss .bo-footer-leiste{
  margin-top:clamp(28px, 3.5vw, 44px) !important;padding-top:18px !important;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex !important;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
html .et-l--footer .bo-footer-leiste .et_pb_column,html .bo-fuss .bo-footer-leiste .et_pb_column{width:auto !important;flex:0 1 auto !important}
html .et-l--footer .bo-footer-leiste p,html .bo-fuss .bo-footer-leiste p{margin:0 !important;font-size:13px;color:rgba(247,244,237,.55)}
@media (max-width:980px){
  html .et-l--footer .bo-footer-leiste,html .bo-fuss .bo-footer-leiste{display:flex !important;grid-template-columns:none !important;justify-content:flex-start}
}

/* ---------- 3) Funktionen: Luft nach dem Fakten-Band --------------
   Statt bo-sec-unten (oben 0) an der Funktionen-Sektion: */
html .bo-sec-nach-band.bo-sec-nach-band{padding-top:clamp(48px, 6vw, 88px) !important;padding-bottom:var(--bo-sec) !important}

/* ---------- 4) Kacheln: EIN Code-Modul, sechs Kacheln, eigenes Raster
   (ersetzt die Sechs-Column-Row — divi/7-kacheln.html) */
.bo-kacheln{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));gap:clamp(14px, 1.6vw, 20px);align-items:stretch;
  margin-top:clamp(32px, 4vw, 56px)}
.bo-kacheln .bo-kachel{display:flex;flex-direction:column;gap:10px;min-width:0;transition:box-shadow .32s var(--bo-ease),border-color .32s var(--bo-ease),transform .32s var(--bo-ease)}
.bo-kacheln .bo-kachel:hover{box-shadow:var(--bo-elev-2);border-color:var(--bo-gold);transform:translateY(-3px)}
.bo-kacheln .bo-kachel h3{margin:0;font-size:17px;font-weight:700;color:var(--bo-ink)}
.bo-kacheln .bo-kachel p{margin:0;font-size:14.5px;line-height:1.5;color:var(--bo-text-2)}
/* Falls du bei der Sechs-Column-Row bleibst: Columns dehnen, Karte füllt */
html .bo-auto-220.bo-auto-220>.et_pb_column{display:flex;flex-direction:column}
html .bo-auto-220.bo-auto-220>.et_pb_column>.et_pb_module,html .bo-auto-220.bo-auto-220 .et_pb_code_inner{flex:1 1 auto;display:flex;flex-direction:column}
html .bo-auto-220.bo-auto-220 .bo-kachel{flex:1 1 auto}

/* ---------- 5) Preise: alle Abos mit vollem Funktionsumfang ----------
   Karten zeigen nur noch Völker-Limit, Preis, Knopf. Die Leistungen
   stehen EINMAL unter den Karten («In jedem Abo enthalten»). */
.bo-plan-limit-gross{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px;padding:14px 0;border-top:1px solid var(--bo-line);border-bottom:1px solid var(--bo-line)}
.bo-plan-limit-gross b{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--bo-ink);font-variant-numeric:tabular-nums}
.bo-plan-limit-gross span{font-size:14px;color:var(--bo-text-2)}
.bo-plan-alles{font-size:14px;line-height:1.45;color:var(--bo-text-2)}
.bo-plan-alles b{color:var(--bo-ink);font-weight:600}
.bo-inklusive{margin-top:clamp(24px, 3vw, 40px);padding:clamp(20px, 2.4vw, 28px) 0 0;border-top:1px solid var(--bo-line);
  display:grid;grid-template-columns:minmax(0, 220px) minmax(0, 1fr);gap:clamp(16px, 3vw, 48px);align-items:start}
.bo-inklusive>div:first-child{display:flex;flex-direction:column;gap:6px}
.bo-inklusive h3{margin:0;font-size:18px;font-weight:700;color:var(--bo-ink)}
.bo-inklusive>div:first-child p{margin:0;font-size:14.5px;line-height:1.5;color:var(--bo-text-2)}
.bo-inklusive ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));gap:10px 24px}
.bo-inklusive li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45;color:var(--bo-ink)}
.bo-inklusive li::before{content:"";width:18px;height:18px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965D0C' 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}
@media (max-width:760px){.bo-inklusive{grid-template-columns:1fr}}

/* ---------- 6) Vereine-Band: Knopf und Fussnote IM Code-Modul --------
   (divi/14-vereine.html). Ein Divi-Knopf-Modul kann nicht in den
   Container — es wird immer unter dem Code-Modul gerendert. */
.bo-vereine{grid-template-columns:minmax(0, 1fr) auto}
.bo-vereine>div:first-child{display:flex;flex-direction:column;gap:8px;min-width:0}
.bo-vereine .bo-vereine-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:var(--bo-radius);
  background:var(--bo-gold);color:var(--bo-gold-fg);font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;justify-self:end;align-self:center;
  transition:opacity .2s var(--bo-ease)}
.bo-vereine .bo-vereine-cta:hover{opacity:.9;color:var(--bo-gold-fg)}
@media (max-width:760px){.bo-vereine{grid-template-columns:1fr}.bo-vereine .bo-vereine-cta{justify-self:stretch;width:100%}}
/* Fussnote über die volle Row-Breite — auch wenn Divi der Row oder dem
   Modul eine Breite mitgibt */
html .bo-preis-fuss.bo-preis-fuss{display:block;width:100% !important;max-width:none !important;margin:20px 0 0 !important;text-align:left}
html .et_pb_row.bo-preis-fuss-row,html .et_pb_row.bo-preis-fuss-row>.et_pb_column{width:100% !important;max-width:var(--bo-wrap) !important;display:block !important}

/* ---------- 7) Download: offizielle Store-Badges --------------------
   Apple: Badge nie unter 40 px hoch, nicht umfärben, Freiraum ¼ der
   Badge-Höhe. Google: die Datei enthält ihren Freiraum bereits — deshalb
   höher gesetzt und mit negativem Aussenabstand, damit die sichtbaren
   Badges gleich hoch wirken. */
.bo-stores{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.bo-store-badge{display:inline-flex;align-items:center;line-height:0;border-radius:6px;transition:opacity .2s var(--bo-ease)}
.bo-store-badge:hover{opacity:.88}
.bo-store-badge img{display:block;width:auto;height:var(--bo-badge-h, 44px)}
.bo-store-badge--google img{height:calc(var(--bo-badge-h, 44px) * 1.36);margin:calc(var(--bo-badge-h, 44px) * -.18) calc(var(--bo-badge-h, 44px) * -.16)}
.bo-store--outline{min-height:var(--bo-badge-h, 44px);padding:0 16px}
@media (max-width:520px){.bo-stores{flex-direction:column;align-items:stretch}.bo-store-badge{justify-content:center}.bo-store--outline{justify-content:center}}

/* ---------- 8) Sticky-CTA auf ALLEN Breiten -------------------------
   Ersetzt Block 13, Abschnitt 4. Erscheint nach dem Hero, weg im
   Download-Abschnitt, im Footer und bei offenem Menü. Auf dem Desktop
   ergänzt sie den ausblendenden Kopf: ist der Kopf weg, ist der Knopf da. */
html .bo-sticky-sec{display:block !important;padding:0 !important;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}
html body.bo-menu-offen .bo-sticky-sec{transform:translateY(120%) !important}
html .bo-sticky-sec .et_pb_row{width:100% !important;max-width:var(--bo-wrap) !important;margin:0 auto !important;
  padding:8px var(--bo-gutter) !important;
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;gap:16px !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:15px !important;line-height:1.3 !important;color:var(--bo-ink-fg) !important}
html .bo-sticky-sec .et_pb_button{margin:0 !important;white-space:nowrap;min-height:44px;padding:11px 20px !important;font-size:15px !important}
body.bo-hat-sticky{padding-bottom:64px}
@media (min-width:761px){html .bo-sticky-sec .et_pb_row{padding:10px var(--bo-gutter) !important}body.bo-hat-sticky{padding-bottom:72px}}
@media (max-width:760px){html .bo-sticky-sec p{font-size:14px !important;max-width:18ch}}

/* ---------- 8b) Sticky-CTA dezent (Runde 6, Befund Desktop) ----------
   Ursache der Höhe: Divi-Standardwerte, die Abschnitt 8 nicht abdeckte —
   4 % Sektions-Innenabstand (Export ohne Wert), 30 px Aussenabstand am
   Modul-Wrapper des Knopfs (.et_pb_button_module_wrapper), Mindesthöhen
   an Row und Column. Hier wird alles auf 0 gezogen und die Leiste auf
   eine schlanke Zeile gebracht: Desktop ~50 px, Handy ~60 px. */
html .bo-sticky-sec.bo-sticky-sec{padding-top:0 !important;padding-bottom:0 !important;min-height:0 !important;
  background:rgba(33,28,21,.92) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html .bo-sticky-sec .et_pb_row,html .bo-sticky-sec .et_pb_column{min-height:0 !important;height:auto !important}
html .bo-sticky-sec .et_pb_module,html .bo-sticky-sec .et_pb_button_module_wrapper,html .bo-sticky-sec .et_pb_text_inner{
  margin:0 !important;padding:0 !important;min-height:0 !important}
html .bo-sticky-sec .et_pb_column{display:flex !important;align-items:center !important}
html .bo-sticky-sec .et_pb_row{gap:16px !important;column-gap:16px !important;padding:7px var(--bo-gutter) !important}
html .bo-sticky-sec .et_pb_text,html .bo-sticky-sec p{font-size:14px !important;line-height:1.3 !important;opacity:.85}
html .bo-sticky-sec .et_pb_button{min-height:36px !important;height:36px !important;padding:0 16px !important;
  display:inline-flex !important;align-items:center !important;font-size:14px !important;line-height:1 !important}
html .bo-sticky-sec .et_pb_button:after{display:none !important}
body.bo-hat-sticky{padding-bottom:52px !important}
@media (max-width:760px){
  html .bo-sticky-sec .et_pb_row{padding:8px var(--bo-gutter) !important}
  html .bo-sticky-sec .et_pb_button{min-height:44px !important;height:44px !important;padding:0 18px !important}
  body.bo-hat-sticky{padding-bottom:62px !important}
}

/* ---------- 9) WPML: Sprachwahl im Handy-Overlay als Chip-Reihe -----
   Die WPML-Einträge (li.menu-item-language) werden vom JS nicht als
   grosse Zeilen kopiert, sondern hier unten als Chips gesetzt. */
html .bo-menu-ov-lang{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 4px;flex:0 0 auto}
html .bo-menu-ov-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:0 14px;
  border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);background:transparent;color:var(--bo-text-2);
  font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
html .bo-menu-ov-lang a.is-on{background:var(--bo-ink);border-color:var(--bo-ink);color:var(--bo-ink-fg)}
/* Sprachumschalter im Desktop-Menü: WPML-Dropdown-Variante aus Block V4.1
   bleibt gültig; Flaggen und Divis Dropdown-Pfeil aus */
.bo-menu-linie li.menu-item-language img,.bo-menu-linie li.menu-item-language .wpml-ls-flag{display:none !important}


/* ============================================================
   Beeond — Runde 6, Teil 2 (v6.4), Stand 13.09.2026
   1) EINE Inhaltsbreite für die ganze Seite (Kopf, Inhalt, Fuss)
   2) Preis-Steuerung (Umschalter, Slider, Skala) über die volle Breite
   3) «Anzahl Völker» im Umstieg-Formular im gleichen Stil
   ------------------------------------------------------------
   Quelle: divi/16-breite-slider-preise.css
   Ans ENDE von css/beeond-divi.css, NACH Block 9.
   ============================================================ */

/* Eine Bahn: 1240 px Inhalt + Seitenrand links und rechts */
:root{--bo-bahn:calc(var(--bo-wrap) + 2 * var(--bo-gutter))}

/* ---------- 1) Zentrierung: jede Row läuft in derselben Bahn ----------
   Ursache des schiefen Eindrucks: ein Teil der Rows steht in Divi auf
   «Breite 100 %», ein anderer auf Divis Standard (1080 px), der Kopf auf
   einer dritten Breite. Deshalb springt die linke Kante von Abschnitt zu
   Abschnitt. Diese Regel setzt für ALLE Rows dieselbe Breite und
   zentriert sie — Divis Breitenfelder in den Rows kannst du danach
   ignorieren. Doppelte Klasse, damit Divis eigene !important-Regeln
   (.et_pb_row_7{width:100%!important}) nicht dazwischenfunken. */
html body .et_pb_row.et_pb_row{
  width:100% !important;max-width:var(--bo-bahn) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--bo-gutter) !important;padding-right:var(--bo-gutter) !important;
}
/* Verschachtelte Rows stehen schon in der Bahn — kein zweiter Rand */
html body .et_pb_row_inner.et_pb_row_inner{
  width:100% !important;max-width:none !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:0 !important;padding-right:0 !important;
}
/* Der Seitenrand steckt jetzt in der Row, nicht mehr in der Section —
   sonst zählt er doppelt */
html body .bo-seitenrand.bo-seitenrand{padding-left:0 !important;padding-right:0 !important}
/* Ausnahme: Row soll randlos über die ganze Breite (Klasse an der Row) */
html body .et_pb_row.bo-randlos{max-width:none !important;padding-left:0 !important;padding-right:0 !important}
html body .et_pb_row > .et_pb_column{min-width:0}
/* Sticky-Leiste behält ihre schlanke Zeile, läuft aber in derselben Bahn */
html body .bo-sticky-sec .et_pb_row.et_pb_row{padding-top:7px !important;padding-bottom:7px !important}
@media (max-width:760px){
  html body .bo-sticky-sec .et_pb_row.et_pb_row{padding-top:8px !important;padding-bottom:8px !important}
}

/* ---------- 2) Preis-Steuerung über die volle Breite ----------
   Ursache auf dem Handy: der Umschalter ist ein inline-flex und der
   Spar-Hinweis steht auf text-align:right — beide erben die rechte
   Ausrichtung aus der Desktop-Kopfzeile. Neben dem randlos laufenden
   Slider wirkt der Block dadurch schmal und schief. Ab hier: alle drei
   Teile auf 100 % und auf dieselbe linke Kante. */
html body #preise .et_pb_code.et_pb_module,
html body #preise .et_pb_code .et_pb_code_inner{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
html body .bo-preis-steuer{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
html body .bo-preis-steuer > div{min-width:0}
html body .bo-slider{display:block;width:100% !important;max-width:none !important;box-sizing:border-box;padding:0;border:0}
html body .bo-slider-skala{width:100%}
@media (max-width:900px){
  html body .bo-preis-steuer{grid-template-columns:1fr !important;gap:18px;align-items:start}
  html body .bo-segment{display:flex !important;width:100%;margin:0}
  html body .bo-segment button{flex:1 1 0;min-width:0;padding:0 8px}
  html body .bo-spar-hinweis{text-align:left !important;white-space:normal;margin:10px 0 0}
  html body .bo-slider-kopf{gap:10px}
  html body .bo-empfehlung{max-width:none}
  /* Kopfzeile der Preise: auf dem Handy linksbündig wie der Rest des
     Blocks. Willst du sie mittig, diese vier Zeilen löschen. */
  html body #preise .bo-preis-kopf .et_pb_text,
  html body #preise .bo-preis-kopf h2,
  html body #preise .bo-preis-kopf p{text-align:left !important}
}

/* ---------- 3) «Anzahl Völker» im Umstieg-Formular ----------
   Der Fluent-Forms-Regler kommt unformatiert und in Browserbreite.
   Gleiche Optik wie der Preis-Slider, volle Feldbreite. */
html body .fluentform input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;
  width:100% !important;max-width:none !important;height:44px;
  background:transparent;border:0;padding:0;margin:0;cursor:pointer}
html body .fluentform input[type=range]:focus{outline:none}
html body .fluentform input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--bo-muted)}
html body .fluentform input[type=range]::-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)}
html body .fluentform input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--bo-muted)}
html body .fluentform input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--bo-gold)}
html body .fluentform input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--bo-ink);border:3px solid var(--bo-card)}
html body .fluentform input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(220,166,75,.5)}
html body .fluentform .ff-el-range-value,
html body .fluentform .ff_el_range_value{display:block;margin-top:2px;text-align:left;
  font-size:15px;font-weight:700;color:var(--bo-ink);font-variant-numeric:tabular-nums}


/* ============================================================
   Beeond — Runde 7 (v7.0), Stand 13.09.2026
   Grundlage: dein Web-Feedback + Export Startseite-3.json
   1) Breite: Divis eigene Row-Regeln gewinnen mit ID-Selektor
   2) Hero: ein Gerät, Inhalt füllt den Rahmen
   3) Funktionen: Gerät läuft wirklich mit (Höhe der Kette)
   4) Kacheln: sechs Code-Module nebeneinander
   5) Vergleich: einladende Gegenüberstellung (divi/17-vergleich.html)
   6) Umstieg: Abstand zur Vergleichs-Section
   7) Fluent Forms: Regler und Auswahlfeld
   ------------------------------------------------------------
   Quelle: divi/17-runde7.css — ans ENDE von css/beeond-divi.css
   ============================================================ */

/* ---------- 1) EINE Bahn — jetzt mit genug Gewicht ----------
   Warum die Regel aus Block 16 nichts tat: Divi schreibt die Breite
   der Rows selbst, gescoped über einen ID-Selektor (#page-container
   bzw. #et-boc). Ein ID-Selektor schlägt jede Klassen-Regel, auch mit
   !important. Deshalb steht die ID jetzt auch in unserer Regel — und
   zusätzlich eine strukturelle Variante (direkte Kinder der Sections),
   die auch greift, wenn Divi 5 die Klasse .et_pb_row umbenennt. */
html body #page-container .et_pb_row.et_pb_row,
html body #et-boc .et_pb_row.et_pb_row,
html body #main-content .et_pb_row.et_pb_row{
  width:100% !important;max-width:var(--bo-bahn) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--bo-gutter) !important;padding-right:var(--bo-gutter) !important;
  box-sizing:border-box !important;
}
html body #page-container [class*="bo-sec"]:not(.bo-sticky-sec) > *:not(.bo-randlos),
html body #page-container .bo-band > *:not(.bo-randlos),
html body #page-container .bo-zitat-streifen > *:not(.bo-randlos),
html body [class*="bo-sec"]:not(.bo-sticky-sec) > *:not(.bo-randlos),
html body .bo-band > *:not(.bo-randlos),
html body .bo-zitat-streifen > *:not(.bo-randlos){
  width:100% !important;max-width:var(--bo-bahn) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--bo-gutter) !important;padding-right:var(--bo-gutter) !important;
  box-sizing:border-box !important;
}
/* Verschachtelte Rows: kein zweiter Rand */
html body #page-container .et_pb_row_inner.et_pb_row_inner{
  max-width:none !important;padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important}
/* Randlose Row (Bildband, Farbfläche) */
html body #page-container .et_pb_row.bo-randlos,html body .bo-randlos{
  max-width:none !important;padding-left:0 !important;padding-right:0 !important}
/* Raster füllen ihre Row, egal wie viele Kinder darin stehen.
   Ohne das schrumpft ein Raster mit einem einzigen Kind (Preis-Slider)
   auf die Mindestbreite der Spalte — genau der schmale Block im Screenshot. */
html body [class*="bo-auto-"]{width:100% !important;justify-items:stretch !important;justify-content:stretch !important}
html body [class*="bo-auto-"] > *{min-width:0;max-width:none !important}
/* Preis-Slider und FAQ ausdrücklich über die ganze Bahn */
html body #preise .bo-preis-steuer,html body #preise .bo-slider,
html body #faq .bo-faq-frage,html body #faq .et_pb_toggle{width:100% !important;max-width:none !important}

/* ---------- 2) Hero: ein Gerät, Inhalt füllt den Rahmen ----------
   Im Export steht in der rechten Hero-Spalte genau EIN Modul (das Code-
   Modul mit der Sprachdemo) — es gibt also kein zweites Gerät. Was wie
   zwei Geräte aussieht, ist der Rahmen im iPhone-Verhältnis 1179:2556:
   der Inhalt füllt nur die obere Hälfte, darunter liegt die Trennlinie
   und die leere Feldfläche. Der Rahmen wird flacher, der Inhalt füllt. */
html body .bo-demo .bo-phone--gross{
  width:min(100%, clamp(280px, 30vw, 340px));
  aspect-ratio:1179/2280;max-height:min(74vh, 660px)}
html body .bo-demo .bo-demo-screen{justify-content:flex-start;gap:.62em}
html body .bo-demo .bo-demo-text{min-height:3.4em}
html body .bo-demo .bo-demo-felder{min-height:0;flex:1 1 auto;justify-content:flex-start}
html body .bo-demo .bo-demo-linie{opacity:.55}
html body .bo-demo .bo-demo-fuss{margin-top:auto}

/* ---------- 3) Funktionen: das Gerät läuft mit ----------
   Ursache: position:sticky bewegt sich nur innerhalb des ELTERN-Kastens.
   Elternteil ist hier das Code-Modul, und das ist nur so hoch wie das
   Gerät selbst — Weg = 0, das Gerät bleibt liegen. Die Kette Spalte →
   Modul → Code-Inneres muss auf die volle Spaltenhöhe gezogen werden.
   Strukturell formuliert, damit es unabhängig von Divis Klassennamen hält. */
html body .bo-fn-grid > *:first-child{
  display:flex !important;flex-direction:column !important;align-items:stretch !important;
  align-self:stretch !important;height:auto !important}
html body .bo-fn-grid > *:first-child > *{flex:1 1 auto;min-height:0;margin:0 !important}
html body .bo-fn-grid > *:first-child > * > *{height:100%}
html body .bo-fn-device{position:sticky !important;top:96px !important;height:auto !important;align-self:start !important}
/* Sticky stirbt an jedem Vorfahren mit overflow ≠ visible */
html body #funktionen,
html body #funktionen > *,
html body #funktionen .bo-fn-grid,
html body #funktionen .bo-fn-grid > *,
html body #funktionen .bo-fn-grid > * > *{overflow:visible !important;clip-path:none !important}
/* overflow-x:hidden an html/body macht aus dem Dokument einen eigenen
   Scroll-Kasten und tötet sticky. overflow-x:clip schneidet gleich ab,
   ohne Scroll-Kasten. */
@media (max-width:760px){html,body{overflow-x:clip}}
/* Jeder Text-Block braucht Höhe, sonst liegen zwei gleichzeitig in der
   Bildmitte und der Bildwechsel springt. */
@media (min-width:901px){
  html body .bo-fn-block{min-height:min(78vh, 620px);display:flex;flex-direction:column;justify-content:center}
  html body .bo-fn-block.is-on{opacity:1}
  html body .bo-fn-block:not(.is-on){opacity:.42;transition:opacity .32s var(--bo-ease)}
}

/* ---------- 4) Kacheln nebeneinander ----------
   Im Export sind es sechs einzelne Code-Module in EINER Spalte
   (.bo-kacheln). Module sind Blöcke — deshalb stapeln sie. Die Spalte
   wird zum Raster, die Modul-Hüllen werden die Raster-Felder. */
html body .bo-kacheln{
  display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap:clamp(14px, 1.6vw, 20px) !important;align-items:stretch !important;
  width:auto !important;max-width:none !important;margin-top:clamp(32px, 4vw, 56px) !important}
html body .bo-kacheln > *{margin:0 !important;display:flex;flex-direction:column;min-width:0}
html body .bo-kacheln > * > *,html body .bo-kacheln .bo-kachel{flex:1 1 auto}
@media (max-width:640px){html body .bo-kacheln{grid-template-columns:1fr !important}}

/* ---------- 5) Vergleich: eine einladende Gegenüberstellung ----------
   Markup: divi/17-vergleich.html — EIN Code-Modul in einer einspaltigen
   Row. Die beiden Spalten-Klassen bo-karte-pad kommen weg. */
.bo-vs{background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius);overflow:hidden}
.bo-vs-kopf{display:grid;grid-template-columns:1fr 44px 1fr;gap:0}
.bo-vs-kopf > div:first-child{grid-column:1/3;align-items:flex-end;text-align:right}
.bo-vs-kopf > div:last-child{grid-column:3}
.bo-vs-kopf > div{padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,32px);display:flex;flex-direction:column;gap:6px}
.bo-vs-kopf > div:first-child{background:var(--bo-muted)}
.bo-vs-kopf > div:last-child{background:var(--bo-ink);color:var(--bo-ink-fg)}
.bo-vs-kopf .r{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bo-text-3)}
.bo-vs-kopf > div:last-child .r{color:var(--bo-gold)}
.bo-vs-kopf b{font-size:clamp(17px,1.1vw + .7rem,21px);font-weight:800;letter-spacing:-.01em;color:var(--bo-ink)}
.bo-vs-kopf > div:last-child b{color:var(--bo-ink-fg)}
.bo-vs-zeile{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;border-top:1px solid var(--bo-line)}
.bo-vs-zeile > p{margin:0;padding:clamp(14px,1.5vw,20px) clamp(18px,2.2vw,32px);font-size:15px;line-height:1.5;
  display:flex;align-items:center}
.bo-vs-zeile > p.alt{color:var(--bo-text-3);background:var(--bo-muted);text-align:right;justify-content:flex-end}
.bo-vs-zeile > p.neu{color:var(--bo-ink);font-weight:600}
.bo-vs-pfeil{display:flex;align-items:center;justify-content:center;align-self:stretch;background:var(--bo-muted);
  color:var(--bo-gold);font-size:15px;line-height:1}
.bo-vs-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,32px);border-top:1px solid var(--bo-line);
  background:var(--bo-tint);font-size:14.5px;line-height:1.5;color:var(--bo-text-2)}
.bo-vs-fuss b{color:var(--bo-ink)}
.bo-vs-fuss a{font-weight:700;color:var(--bo-gold-text, #965D0C);text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:760px){
  .bo-vs-kopf{grid-template-columns:1fr}
  .bo-vs-kopf > div:first-child{grid-column:1;align-items:flex-start;text-align:left}
  .bo-vs-kopf > div:last-child{grid-column:1}
  .bo-vs-zeile > p.alt{text-align:left;justify-content:flex-start}
  .bo-vs-zeile{grid-template-columns:1fr;border-top:0}
  .bo-vs-zeile > p{padding:12px clamp(16px,4vw,20px)}
  .bo-vs-zeile > p.alt{border-top:1px solid var(--bo-line)}
  .bo-vs-pfeil{align-self:auto;justify-content:flex-start;padding:0 clamp(16px,4vw,20px);background:var(--bo-muted);
    transform:rotate(90deg);transform-origin:left center;height:14px}
}

/* ---------- 6) Umstieg: Abstand zur Vergleichs-Section ----------
   Im Export trägt #vergleich die Klasse bo-sec-oben (unten 0) und
   #umstieg die Klasse bo-sec-unten (oben 0) — zusammen null Abstand.
   Saubere Lösung: beide Sections auf bo-sec stellen (Anleitung).
   Bis dahin greift dieses Netz. */
html body #vergleich.bo-sec-oben{padding-bottom:clamp(40px,5vw,64px) !important}
html body #umstieg.bo-sec-unten{padding-top:var(--bo-sec) !important}

/* ---------- 7) Fluent Forms: Regler und Auswahlfeld ----------
   Der Regler kommt in mehreren Hüllen; deshalb alle Varianten. */
html body .fluentform input[type=range],
html body .fluentform .ff-el-form-control[type=range],
html body .fluentform .ff_el_range input[type=range]{
  -webkit-appearance:none !important;appearance:none !important;display:block !important;
  width:100% !important;max-width:none !important;height:44px !important;min-height:0 !important;
  background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;
  box-shadow:none !important;cursor:pointer}
html body .fluentform input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--bo-muted)}
html body .fluentform input[type=range]::-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)}
html body .fluentform input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--bo-muted)}
html body .fluentform input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--bo-gold)}
html body .fluentform input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--bo-ink);border:3px solid var(--bo-card)}
html body .fluentform .ff-el-range-value,html body .fluentform .ff_el_range_value,
html body .fluentform .ff-el-input--content output{display:inline-block;margin-top:2px;
  font-size:15px;font-weight:700;color:var(--bo-ink);font-variant-numeric:tabular-nums}
/* Auswahlfeld: gleiche Höhe wie die Textfelder, eigener Pfeil */
html body .fluentform select.ff-el-form-control,
html body .fluentform .ff-el-form-control select,
html body .fluentform select{
  -webkit-appearance:none !important;appearance:none !important;
  width:100% !important;box-sizing:border-box;height:50px !important;min-height:50px !important;
  padding:12px 42px 12px 14px !important;line-height:1.35 !important;
  border:1px solid var(--bo-line-input) !important;border-radius:var(--bo-radius) !important;
  background-color:var(--bo-card) !important;color:var(--bo-ink) !important;font:400 16px/1.35 inherit !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23211C15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 16px center !important}
html body .fluentform select.ff-el-form-control:focus{outline:0;border-color:var(--bo-gold) !important;
  box-shadow:0 0 0 3px rgba(220,166,75,.28) !important}
html body .fluentform select[multiple]{height:auto !important;min-height:120px !important;background-image:none !important}
/* Auswahl als Radio-Liste (falls das Feld kein Dropdown ist) */
html body .fluentform .ff-el-form-check{display:flex;align-items:center;gap:10px;min-height:44px}
html body .fluentform .ff-el-form-check-label{font-size:15px;color:var(--bo-ink)}

/* ---------- 8) Preise: Schalterzeile (Abrechnung + Währung) ----------
   Markup: divi/18-preis-slider-waehrung.html */
.bo-preis-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 18px}
.bo-segment--klein button{font-size:14px;padding:0 14px}
html body .bo-preis-schalter .bo-spar-hinweis{margin:0;text-align:left !important;white-space:normal}
@media (max-width:900px){
  html body .bo-preis-schalter{display:grid !important;grid-template-columns:1fr;gap:10px}
  html body .bo-preis-schalter .bo-segment{display:flex !important;width:100%;margin:0}
  html body .bo-preis-schalter .bo-segment button{flex:1 1 0;min-width:0;padding:0 8px}
}

/* ---------- 9) Raster mit genug Gewicht (Runde 7, Nachtrag) ----------
   Prüfung auf der Live-Seite: alle Rows stehen korrekt auf 1336 px und
   derselben linken Kante — die Breite ist also in Ordnung. Schmal wirkt
   der Inhalt eine Ebene tiefer: Divi rendert die Rows als «et_block_row»
   und schreibt display/Breite der SPALTEN mit einem ID-Selektor. Unsere
   Raster-Regeln (Klassen) verlieren dagegen. Hier dieselben Regeln mit ID. */
html body #page-container .bo-auto-180.bo-auto-180,
html body #page-container .bo-auto-210.bo-auto-210,
html body #page-container .bo-auto-220.bo-auto-220,
html body #page-container .bo-auto-260.bo-auto-260,
html body #page-container .bo-auto-280.bo-auto-280,
html body #page-container .bo-auto-300.bo-auto-300,
html body #page-container .bo-auto-320.bo-auto-320,
html body #page-container .bo-auto-340.bo-auto-340,
html body #et-boc .bo-auto-180.bo-auto-180,
html body #et-boc .bo-auto-210.bo-auto-210,
html body #et-boc .bo-auto-220.bo-auto-220,
html body #et-boc .bo-auto-260.bo-auto-260,
html body #et-boc .bo-auto-280.bo-auto-280,
html body #et-boc .bo-auto-300.bo-auto-300,
html body #et-boc .bo-auto-320.bo-auto-320,
html body #et-boc .bo-auto-340.bo-auto-340,
html body #main-content .bo-auto-180.bo-auto-180,
html body #main-content .bo-auto-210.bo-auto-210,
html body #main-content .bo-auto-220.bo-auto-220,
html body #main-content .bo-auto-260.bo-auto-260,
html body #main-content .bo-auto-280.bo-auto-280,
html body #main-content .bo-auto-300.bo-auto-300,
html body #main-content .bo-auto-320.bo-auto-320,
html body #main-content .bo-auto-340.bo-auto-340{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--bo-spalte, 300px)), 1fr)) !important;
  align-items:stretch !important;width:100% !important;max-width:var(--bo-bahn) !important;
  justify-items:stretch !important}
html body #page-container .bo-auto-180.bo-auto-180{--bo-spalte:180px}
html body #page-container .bo-auto-210.bo-auto-210{--bo-spalte:210px}
html body #page-container .bo-auto-220.bo-auto-220{--bo-spalte:220px}
html body #page-container .bo-auto-260.bo-auto-260{--bo-spalte:260px}
html body #page-container .bo-auto-280.bo-auto-280{--bo-spalte:280px}
html body #page-container .bo-auto-300.bo-auto-300{--bo-spalte:300px}
html body #page-container .bo-auto-320.bo-auto-320{--bo-spalte:320px}
html body #page-container .bo-auto-340.bo-auto-340{--bo-spalte:340px}
html body #et-boc .bo-auto-180.bo-auto-180{--bo-spalte:180px}
html body #et-boc .bo-auto-210.bo-auto-210{--bo-spalte:210px}
html body #et-boc .bo-auto-220.bo-auto-220{--bo-spalte:220px}
html body #et-boc .bo-auto-260.bo-auto-260{--bo-spalte:260px}
html body #et-boc .bo-auto-280.bo-auto-280{--bo-spalte:280px}
html body #et-boc .bo-auto-300.bo-auto-300{--bo-spalte:300px}
html body #et-boc .bo-auto-320.bo-auto-320{--bo-spalte:320px}
html body #et-boc .bo-auto-340.bo-auto-340{--bo-spalte:340px}
html body #main-content .bo-auto-180.bo-auto-180{--bo-spalte:180px}
html body #main-content .bo-auto-210.bo-auto-210{--bo-spalte:210px}
html body #main-content .bo-auto-220.bo-auto-220{--bo-spalte:220px}
html body #main-content .bo-auto-260.bo-auto-260{--bo-spalte:260px}
html body #main-content .bo-auto-280.bo-auto-280{--bo-spalte:280px}
html body #main-content .bo-auto-300.bo-auto-300{--bo-spalte:300px}
html body #main-content .bo-auto-320.bo-auto-320{--bo-spalte:320px}
html body #main-content .bo-auto-340.bo-auto-340{--bo-spalte:340px}
html body #page-container [class*="bo-auto-"] > *,
html body #et-boc [class*="bo-auto-"] > *,
html body #main-content [class*="bo-auto-"] > *{
  width:auto !important;max-width:none !important;margin:0 !important;min-width:0;float:none !important}
html body #page-container .bo-fn-grid.bo-fn-grid,
html body #et-boc .bo-fn-grid.bo-fn-grid,
html body #main-content .bo-fn-grid.bo-fn-grid{
  display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:clamp(28px, 5vw, 80px) !important;align-items:stretch !important}
html body #page-container .bo-kacheln.bo-kacheln,
html body #et-boc .bo-kacheln.bo-kacheln,
html body #main-content .bo-kacheln.bo-kacheln{
  display:grid !important;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap:clamp(14px, 1.6vw, 20px) !important;align-items:stretch !important;width:auto !important}
@media (max-width:900px){
  html body #page-container .bo-fn-grid.bo-fn-grid,
html body #et-boc .bo-fn-grid.bo-fn-grid,
html body #main-content .bo-fn-grid.bo-fn-grid{grid-template-columns:1fr !important}
}
@media (max-width:760px){
  html body #page-container .bo-auto-180.bo-auto-180,
  html body #page-container .bo-auto-210.bo-auto-210,
  html body #page-container .bo-auto-220.bo-auto-220,
  html body #page-container .bo-auto-260.bo-auto-260,
  html body #page-container .bo-auto-280.bo-auto-280,
  html body #page-container .bo-auto-300.bo-auto-300,
  html body #page-container .bo-auto-320.bo-auto-320,
  html body #page-container .bo-auto-340.bo-auto-340,
  html body #et-boc .bo-auto-180.bo-auto-180,
  html body #et-boc .bo-auto-210.bo-auto-210,
  html body #et-boc .bo-auto-220.bo-auto-220,
  html body #et-boc .bo-auto-260.bo-auto-260,
  html body #et-boc .bo-auto-280.bo-auto-280,
  html body #et-boc .bo-auto-300.bo-auto-300,
  html body #et-boc .bo-auto-320.bo-auto-320,
  html body #et-boc .bo-auto-340.bo-auto-340,
  html body #main-content .bo-auto-180.bo-auto-180,
  html body #main-content .bo-auto-210.bo-auto-210,
  html body #main-content .bo-auto-220.bo-auto-220,
  html body #main-content .bo-auto-260.bo-auto-260,
  html body #main-content .bo-auto-280.bo-auto-280,
  html body #main-content .bo-auto-300.bo-auto-300,
  html body #main-content .bo-auto-320.bo-auto-320,
  html body #main-content .bo-auto-340.bo-auto-340{grid-template-columns:1fr !important}
}
@media (max-width:640px){
  html body #page-container .bo-kacheln.bo-kacheln,
html body #et-boc .bo-kacheln.bo-kacheln,
html body #main-content .bo-kacheln.bo-kacheln{grid-template-columns:1fr !important}
}

/* ---------- 10) Fluent Forms: der ECHTE Regler (Runde 7, Nachtrag 2) ----------
   Befund aus dem Live-HTML: Fluent Forms versteckt das <input type=range>
   (1×1 px, opacity 0) und baut ein eigenes Widget aus
   .ff_slider_wrapper > .rangeslider > .rangeslider__fill + .rangeslider__handle
   sowie .ff_range_value. Meine Regeln auf input[type=range] konnten daher
   nichts bewirken. Hier die Optik des Preis-Sliders auf das Widget. */
html body .fluentform .ff_slider_wrapper{position:relative;padding:2px 0 0}
html body .fluentform .rangeslider{
  position:relative;height:6px;border-radius:3px;background:var(--bo-muted);
  margin:18px 0 6px;cursor:pointer;box-shadow:none;border:0}
html body .fluentform .rangeslider__fill{
  position:absolute;top:0;left:0;height:6px;border-radius:3px;background:var(--bo-gold)}
html body .fluentform .rangeslider__handle{
  position:absolute;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:9999px;
  background:var(--bo-ink);border:3px solid var(--bo-card);
  box-shadow:0 1px 4px rgba(33,28,21,.3);cursor:grab;outline:none}
html body .fluentform .rangeslider__handle:active{cursor:grabbing}
html body .fluentform .rangeslider__handle::after{display:none}
html body .fluentform .ff_range_value{
  display:inline-block;margin:0;font-size:15px;font-weight:700;color:var(--bo-ink);
  font-variant-numeric:tabular-nums;text-align:left}
/* Die Fussnote wird vom Preis-Skript per textContent gefüllt — deshalb muss
   data-preis-fuss AM <p> stehen, nicht an einem <span> darum herum.
   Netz, falls die alte Schachtelung stehen bleibt: */
html body span[data-preis-fuss]{display:block;font-size:13px;line-height:1.55;color:var(--bo-text-3)}
/* Preis-Steuerung immer linksbündig, auch wenn am Code-Modul in Divi
   «Textausrichtung rechts» eingestellt ist */
html body #preise .et_pb_code.et_pb_text_align_right,
html body #preise .bo-preis-schalter,
html body #preise .bo-preis-steuer{text-align:left !important}


/* ============================================================
   Beeond — Block 18: Rechtsseiten (Impressum, Datenschutz, AGB)
   Quelle: divi/18-rechtsseiten.css — ans ENDE von css/beeond-divi.css
   Nutzt dieselben Töne, Schriften und Abstände wie die Startseite.
   Aufbau je Seite: Section .bo-sec.bo-seitenrand
                      Row .bo-recht-grid  (links Inhalt, rechts Verzeichnis)
   ============================================================ */

/* Kopf der Seite */
.bo-recht-kopf{display:flex;flex-direction:column;gap:10px;margin:0 0 clamp(28px,3.5vw,48px)}
.bo-recht-kopf h1{margin:0;font-size:clamp(2rem,1.2rem + 2.4vw,3rem);font-weight:800;letter-spacing:-.02em;color:var(--bo-ink)}
.bo-recht-stand{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--bo-text-3)}
.bo-recht-stand b{color:var(--bo-ink);font-weight:700}

/* Zweispaltig: Text links, klebendes Verzeichnis rechts */
html body .bo-recht-grid{display:grid !important;grid-template-columns:minmax(0,1fr) 260px !important;
  gap:clamp(32px,4vw,72px) !important;align-items:start !important}
html body #page-container .bo-recht-grid{display:grid !important;grid-template-columns:minmax(0,1fr) 260px !important}
html body .bo-recht-grid > *{width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
@media (max-width:900px){
  html body .bo-recht-grid,html body #page-container .bo-recht-grid{grid-template-columns:1fr !important}
}

/* Inhaltsverzeichnis */
.bo-recht-toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:10px;
  padding:18px 18px 20px;background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius)}
.bo-recht-toc b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bo-text-3)}
.bo-recht-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;counter-reset:toc}
.bo-recht-toc li{counter-increment:toc;font-size:14px;line-height:1.4}
.bo-recht-toc a{display:flex;gap:8px;color:var(--bo-text-2);text-decoration:none}
.bo-recht-toc a::before{content:counter(toc) ".";color:var(--bo-text-3);font-variant-numeric:tabular-nums}
.bo-recht-toc a:hover,.bo-recht-toc a.is-on{color:var(--bo-ink)}
.bo-recht-toc a.is-on{font-weight:700}
@media (max-width:900px){.bo-recht-toc{position:static;top:auto}}

/* Textkörper */
.bo-recht{max-width:72ch}
.bo-recht h2{margin:clamp(38px,4vw,56px) 0 14px;padding-top:14px;border-top:2px solid var(--bo-gold);
  font-size:clamp(1.25rem,1rem + .8vw,1.625rem);font-weight:800;letter-spacing:-.015em;color:var(--bo-ink);
  scroll-margin-top:110px}
.bo-recht h2:first-child{margin-top:0}
.bo-recht h3{margin:26px 0 8px;font-size:1.0625rem;font-weight:700;color:var(--bo-ink);scroll-margin-top:110px}
.bo-recht p{margin:0 0 12px;font-size:1rem;line-height:1.7;color:var(--bo-text-2);text-wrap:pretty}
.bo-recht p strong,.bo-recht li strong{color:var(--bo-ink);font-weight:700}
.bo-recht a{color:var(--bo-gold-text, #965D0C);text-decoration:none;border-bottom:1px solid rgba(150,93,12,.35)}
.bo-recht a:hover{color:var(--bo-ink);border-bottom-color:currentColor}
.bo-recht ul{margin:0 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.bo-recht ul li{position:relative;padding-left:18px;font-size:1rem;line-height:1.65;color:var(--bo-text-2)}
.bo-recht ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--bo-gold)}

/* Nummerierte Ziffern für die AGB: 1. / 1.1 / 1.1.1 */
.bo-agb{counter-reset:z;list-style:none;margin:0;padding:0}
.bo-agb > li{counter-increment:z;margin:0 0 clamp(26px,3vw,38px)}
.bo-agb > li > h2{display:flex;gap:12px}
.bo-agb > li > h2::before{content:counter(z) ".";color:var(--bo-gold-text, #965D0C);font-variant-numeric:tabular-nums}
.bo-agb ol{counter-reset:u;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bo-agb ol > li{counter-increment:u;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;
  font-size:1rem;line-height:1.7;color:var(--bo-text-2)}
.bo-agb ol > li::before{content:counter(z) "." counter(u);color:var(--bo-text-3);font-variant-numeric:tabular-nums;font-size:.94em}

/* Tabelle (Auftragsverarbeiter, Aufbewahrungsfristen) */
.bo-recht-tab{display:grid;gap:0;margin:6px 0 18px;border-top:1px solid var(--bo-line);font-size:14.5px}
.bo-recht-tab > span{padding:10px 12px 10px 0;border-bottom:1px solid var(--bo-line);line-height:1.5;color:var(--bo-text-2)}
.bo-recht-tab > span.th{font-weight:700;color:var(--bo-ink);font-size:13px}
.bo-recht-tab--3{grid-template-columns:1.1fr 1fr 1.2fr}
.bo-recht-tab--2{grid-template-columns:1fr 1.6fr}
@media (max-width:640px){
  .bo-recht-tab--3,.bo-recht-tab--2{grid-template-columns:1fr}
  .bo-recht-tab > span.th{display:none}
  .bo-recht-tab > span{border-bottom:0;padding:2px 0}
  .bo-recht-tab > span:nth-child(3n+1){padding-top:14px;border-top:1px solid var(--bo-line);font-weight:700;color:var(--bo-ink)}
}

/* Anschriftenblock im Impressum */
.bo-recht-adresse{margin:0 0 18px;padding:16px 18px;background:var(--bo-muted);border-radius:var(--bo-radius);
  font-size:1rem;line-height:1.65;color:var(--bo-ink);font-style:normal}
.bo-recht-adresse b{display:block;font-weight:800;margin-bottom:4px}

/* Hinweiskasten (z. B. «Beta», «keine Rechtsberatung») */
.bo-recht-hinweis{margin:0 0 18px;padding:14px 16px;background:var(--bo-tint);
  border-left:3px solid var(--bo-gold);font-size:14.5px;line-height:1.6;color:var(--bo-text-2)}

/* Nach oben */
.bo-recht-oben{display:inline-flex;align-items:center;gap:7px;margin-top:36px;font-size:14px;font-weight:700;
  color:var(--bo-text-3);text-decoration:none;border:0}
.bo-recht-oben:hover{color:var(--bo-ink)}

@media print{
  .bo-recht-toc,.bo-recht-toc-spalte,.bo-sticky-sec,.et-l--header,.et-l--footer{display:none !important}
  .bo-recht{max-width:none}
  .bo-recht h2{break-after:avoid}
  .bo-recht p,.bo-recht li{break-inside:avoid}
}


/* ---------- Block 18b: Divis eigenes Inhaltsverzeichnis im Beeond-Look ----------
   Du nutzt auf den Rechtsseiten das Divi-Modul «Inhaltsverzeichnis» statt des
   eigenen Code-Moduls. Damit es wie der Rest der Seite aussieht, bekommt die
   RECHTE Spalte die Klasse bo-recht-toc-spalte — die Regeln greifen dann
   strukturell (Modul, Listen, Links) und sind unabhängig von Divis internen
   Klassennamen. Sticky schaltest du im Modul selbst ein (Erweitert ▸ Fixiert). */
html body .bo-recht-toc-spalte > .et_pb_module{
  padding:18px 18px 20px !important;margin:0 !important;
  background:var(--bo-card) !important;border:1px solid var(--bo-line) !important;
  border-radius:var(--bo-radius) !important}
html body .bo-recht-toc-spalte h1,html body .bo-recht-toc-spalte h2,
html body .bo-recht-toc-spalte h3,html body .bo-recht-toc-spalte h4,
html body .bo-recht-toc-spalte h5,html body .bo-recht-toc-spalte h6{
  margin:0 0 12px !important;padding:0 !important;border:0 !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:.09em !important;
  text-transform:uppercase !important;color:var(--bo-text-3) !important}
html body .bo-recht-toc-spalte ul,html body .bo-recht-toc-spalte ol{
  list-style:none !important;margin:0 !important;padding:0 !important;
  display:flex;flex-direction:column;gap:7px;counter-reset:toc}
html body .bo-recht-toc-spalte li{
  counter-increment:toc;margin:0 !important;padding:0 !important;
  font-size:14px;line-height:1.4;list-style:none !important}
html body .bo-recht-toc-spalte li::before{content:none !important}
html body .bo-recht-toc-spalte a{
  display:flex;gap:8px;color:var(--bo-text-2) !important;text-decoration:none !important;border:0 !important}
html body .bo-recht-toc-spalte a::before{
  content:counter(toc) ".";color:var(--bo-text-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
html body .bo-recht-toc-spalte a:hover{color:var(--bo-ink) !important}
html body .bo-recht-toc-spalte [class*="active"] > a,
html body .bo-recht-toc-spalte a[class*="active"]{color:var(--bo-ink) !important;font-weight:700}
/* Verschachtelte Ebene (H3) etwas eingezogen und ohne Nummer */
html body .bo-recht-toc-spalte li ul,html body .bo-recht-toc-spalte li ol{
  margin:7px 0 0 !important;padding-left:16px !important;gap:6px;counter-reset:none}
html body .bo-recht-toc-spalte li li a::before{content:"–";color:var(--bo-gold)}
@media (max-width:900px){
  html body .bo-recht-toc-spalte > .et_pb_module,
  html body #page-container .bo-recht-toc-spalte > .et_pb_module,
  html body #et-boc .bo-recht-toc-spalte > .et_pb_module{position:static !important;top:auto !important}
}

/* ---------- 11) Preis-Slider: Skala sitzt auf den Marken (Runde 7, Nachtrag 3) ----------
   Der Regler arbeitet jetzt abschnittsweise (1–5 · 5–25 · 25–50 · 50–100,
   je 25 % der Schiene). Damit die fünf Zahlen genau über den Abschnitts-
   grenzen stehen und nicht bloss gleichmässig verteilt sind: */
html body #preise .bo-slider-skala{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  padding:0 12px !important;width:100% !important;box-sizing:border-box}
html body #preise .bo-slider-skala > span{
  grid-row:1;justify-self:start;transform:translateX(-50%);white-space:nowrap}
html body #preise .bo-slider-skala > span:last-child{
  grid-column:4;justify-self:end;transform:translateX(50%)}


/* ============================================================
   Beeond — Block 19: Blog (Runde 8)
   Quelle: divi/23-blog.css — ans ENDE von css/beeond-divi.css
   Gewählt: Startseiten-Variante 1c (schmale Leiste).
   Die Auszeichnung kommt aus Divis Blog-Modul; deshalb wird
   strukturell auf <article> und Divis Standardklassen gezielt,
   zusätzlich mit ID-Selektor (Divi schreibt Breiten ID-gescoped).
   ============================================================ */

/* ---------- 1) Startseite: schmale Blog-Leiste ---------- */
html body .bo-blog-leiste,html body #page-container .bo-blog-leiste{
  display:grid !important;grid-template-columns:300px minmax(0,1fr) !important;
  gap:clamp(28px,4vw,56px) !important;align-items:start !important}
html body .bo-blog-leiste > *{width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
@media (max-width:900px){
  html body .bo-blog-leiste,html body #page-container .bo-blog-leiste{grid-template-columns:1fr !important}
}

/* Divi-Blog-Modul als Liste: Datum und Rubrik links, Titel und Teaser rechts */
html body .bo-blog-liste .et_pb_post,
html body .bo-blog-liste article{
  display:grid !important;grid-template-columns:112px minmax(0,1fr) !important;
  gap:6px 20px !important;align-items:start !important;
  margin:0 !important;padding:18px 0 !important;background:none !important;
  border:0 !important;border-top:1px solid var(--bo-line) !important;border-radius:0 !important}
html body .bo-blog-liste article:last-child{border-bottom:1px solid var(--bo-line) !important}
html body .bo-blog-liste .entry-featured-image-url,
html body .bo-blog-liste .et_pb_image_container,
html body .bo-blog-liste .post-meta .author,
html body .bo-blog-liste .et_pb_blog_grid .et_pb_image_container{display:none !important}
html body .bo-blog-liste .post-meta{
  grid-column:1;grid-row:1 / span 2;margin:0 !important;padding:0 !important;
  display:flex;flex-direction:column;gap:3px;
  font-size:13px !important;line-height:1.35 !important;font-weight:700 !important;
  color:var(--bo-text-3) !important;font-variant-numeric:tabular-nums}
html body .bo-blog-liste .post-meta a{color:var(--bo-gold-text, #965D0C) !important;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
html body .bo-blog-liste .post-meta .published{display:block}
html body .bo-blog-liste .entry-title{
  grid-column:2;grid-row:1;margin:0 !important;padding:0 !important;
  font-size:18px !important;line-height:1.35 !important;font-weight:700 !important;color:var(--bo-ink) !important}
html body .bo-blog-liste .entry-title a{color:inherit !important;text-decoration:none}
html body .bo-blog-liste .entry-title a:hover{color:var(--bo-gold-text, #965D0C) !important}
html body .bo-blog-liste .post-content,
html body .bo-blog-liste .post-content p{
  grid-column:2;grid-row:2;margin:0 !important;font-size:14px !important;line-height:1.55 !important;
  color:var(--bo-text-2) !important}
html body .bo-blog-liste .more-link,
html body .bo-blog-liste .post-content .more-link{display:none !important}
@media (max-width:640px){
  html body .bo-blog-liste article{grid-template-columns:1fr !important;gap:6px !important}
  html body .bo-blog-liste .post-meta{grid-column:1;grid-row:1;flex-direction:row;flex-wrap:wrap;gap:10px}
  html body .bo-blog-liste .entry-title{grid-column:1;grid-row:2}
  html body .bo-blog-liste .post-content{grid-column:1;grid-row:3}
}

/* ---------- 2) Blog-Übersicht: Karten ---------- */
html body .bo-blog-karten .et_pb_ajax_pagination_container{
  display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important;
  gap:clamp(14px,1.6vw,20px) !important;align-items:stretch !important}
html body .bo-blog-karten article{
  display:flex !important;flex-direction:column !important;gap:0 !important;
  margin:0 !important;padding:0 !important;overflow:hidden !important;
  background:var(--bo-card) !important;border:1px solid var(--bo-line) !important;
  border-radius:var(--bo-radius) !important;
  transition:box-shadow .32s var(--bo-ease),border-color .32s var(--bo-ease),transform .32s var(--bo-ease)}
html body .bo-blog-karten article:hover{box-shadow:var(--bo-elev-2) !important;border-color:var(--bo-gold) !important;transform:translateY(-3px)}
html body .bo-blog-karten .entry-featured-image-url{margin:0 !important;display:block !important;aspect-ratio:16/10;overflow:hidden}
html body .bo-blog-karten .entry-featured-image-url img{width:100%;height:100%;object-fit:cover;display:block}
html body .bo-blog-karten .entry-title{
  margin:0 !important;padding:0 20px !important;font-size:18px !important;line-height:1.3 !important;
  font-weight:700 !important;color:var(--bo-ink) !important;order:2}
html body .bo-blog-karten .entry-title a{color:inherit !important;text-decoration:none}
html body .bo-blog-karten .post-meta{
  margin:0 !important;padding:20px 20px 8px !important;order:1;
  font-size:13px !important;color:var(--bo-text-3) !important}
html body .bo-blog-karten .post-meta a{color:var(--bo-gold-text, #965D0C) !important;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
html body .bo-blog-karten .post-content{margin:0 !important;padding:9px 20px 20px !important;order:3;
  font-size:14.5px !important;line-height:1.55 !important;color:var(--bo-text-2) !important}

/* Kategorie-Leiste (einfache Links auf die Kategorie-Archive) */
.bo-blog-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.bo-blog-chips a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;
  background:var(--bo-card);border:1px solid var(--bo-line-input);color:var(--bo-text-2);
  font-size:14px;font-weight:600;text-decoration:none}
.bo-blog-chips a:hover{border-color:var(--bo-gold);color:var(--bo-ink)}
.bo-blog-chips a.is-on{background:var(--bo-ink);border-color:var(--bo-ink);color:var(--bo-ink-fg)}
.bo-blog-zahl{margin-left:auto;font-size:13.5px;color:var(--bo-text-3)}

/* ---------- 3) Artikel ---------- */
/* Textkörper nutzt .bo-recht aus Block 18 — hier nur das Drumherum. */
.bo-artikel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 20px;
  padding:14px 0;border-top:1px solid var(--bo-line);border-bottom:1px solid var(--bo-line)}
.bo-artikel-meta .init{width:38px;height:38px;border-radius:9999px;background:var(--bo-muted);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--bo-text-2)}
.bo-artikel-meta > span:not(.init){display:flex;flex-direction:column}
.bo-artikel-meta b{font-size:14.5px;color:var(--bo-ink)}
.bo-artikel-meta small{font-size:13px;color:var(--bo-text-3)}
.bo-artikel-ki{margin-left:auto;font-size:12px;font-weight:700;color:var(--bo-gold-text, #965D0C);
  background:var(--bo-card);border:1px solid var(--bo-line);border-radius:3px;padding:6px 10px;white-space:nowrap}
.bo-artikel-kasten{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:18px 20px;
  background:var(--bo-tint);border-left:3px solid var(--bo-gold)}
.bo-artikel-kasten b{font-size:14.5px;color:var(--bo-ink)}
.bo-artikel-kasten p{margin:0;font-size:15px;line-height:1.6;color:var(--bo-text-2)}
.bo-artikel-quellen{display:flex;flex-direction:column;gap:10px;margin:24px 0 0;padding:20px;
  background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius)}
.bo-artikel-quellen b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bo-text-3)}
.bo-artikel-quellen p{margin:0;font-size:14.5px;line-height:1.6;color:var(--bo-text-2)}
.bo-artikel-quellen small{font-size:13px;line-height:1.55;color:var(--bo-text-3)}
.bo-artikel-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin:24px 0 0;padding:24px 28px;background:var(--bo-ink);border-radius:var(--bo-radius)}
.bo-artikel-cta b{font-size:18px;font-weight:800;color:var(--bo-ink-fg);max-width:40ch}
.bo-artikel-cta a{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:var(--bo-radius);
  background:var(--bo-gold);color:var(--bo-ink);font-size:15px;font-weight:700;text-decoration:none;border:0}
.bo-artikel-verwandt{display:flex;flex-direction:column;gap:12px}
.bo-artikel-verwandt b.r{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bo-text-3)}
.bo-artikel-verwandt a{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;
  border-bottom:1px solid var(--bo-line);text-decoration:none;border-left:0}
.bo-artikel-verwandt a b{font-size:15px;line-height:1.35;color:var(--bo-ink)}
.bo-artikel-verwandt a small{font-size:13px;color:var(--bo-text-3)}
@media print{.bo-artikel-cta,.bo-artikel-verwandt,.bo-artikel-ki{display:none !important}}

/* ============================================================
   Beeond — Block 20: Blog-Vorlagen (Archiv + Einzelbeitrag)
   Quelle: divi/24-blog-vorlagen.css — ans ENDE von css/beeond-divi.css
   Ergänzt Block 19 (23-blog.css) um alles, was erst in den
   Theme-Builder-Vorlagen auftaucht: Archivkopf, Seitenblätterung,
   Leerzustand, Titel-Modul, Beitragsbild, verwandte Beiträge.
   ============================================================ */

/* ---------- 1) Archivkopf ---------- */
/* Divis Titel-Modul im Archiv (zeigt «Kategorie: Recht») bekommt
   dasselbe Kleid wie eine H1 auf der Startseite. */
html body .bo-archiv-kopf .et_pb_title_container h1,
html body .bo-archiv-kopf h1{
  margin:0 0 10px !important;
  font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem) !important;line-height:1.08 !important;
  font-weight:800 !important;letter-spacing:-.02em !important;color:var(--bo-ink) !important}
html body .bo-archiv-kopf .et_pb_title_meta_container{display:none !important}
.bo-archiv-lead{margin:0;max-width:62ch;font-size:clamp(1rem,.95rem + .35vw,1.125rem);
  line-height:1.6;color:var(--bo-text-2)}

/* ---------- 2) Seitenblätterung (Divi-Blog-Modul) ---------- */
html body .bo-blog-karten .pagination{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:16px !important;margin:28px 0 0 !important;padding:18px 0 0 !important;
  border-top:1px solid var(--bo-line) !important}
html body .bo-blog-karten .pagination .alignleft,
html body .bo-blog-karten .pagination .alignright{float:none !important;margin:0 !important}
html body .bo-blog-karten .pagination a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);
  background:var(--bo-card);color:var(--bo-text-2);
  font-size:14.5px;font-weight:600;text-decoration:none}
html body .bo-blog-karten .pagination a:hover{border-color:var(--bo-gold);color:var(--bo-ink)}

/* ---------- 3) Leerzustand ---------- */
html body .bo-blog-karten .et_pb_no_results{
  grid-column:1 / -1 !important;margin:0 !important;padding:28px 24px !important;
  background:var(--bo-tint) !important;border-left:3px solid var(--bo-gold) !important;
  border-radius:0 !important}
html body .bo-blog-karten .et_pb_no_results h2{margin:0 0 6px !important;font-size:18px !important;
  font-weight:700 !important;color:var(--bo-ink) !important}
html body .bo-blog-karten .et_pb_no_results p{margin:0 !important;font-size:15px !important;
  line-height:1.6 !important;color:var(--bo-text-2) !important}

/* ---------- 4) Einzelbeitrag: Titel-Modul ---------- */
html body .bo-artikel-kopf .et_pb_title_container h1,
html body .bo-artikel-kopf h1{
  margin:0 !important;max-width:26ch;
  font-size:clamp(1.875rem,1.25rem + 2.4vw,3rem) !important;line-height:1.1 !important;
  font-weight:800 !important;letter-spacing:-.02em !important;color:var(--bo-ink) !important}
html body .bo-artikel-kopf .et_pb_title_meta_container,
html body .bo-artikel-kopf .et_pb_title_featured_container{display:none !important}

/* Beitragsbild im Artikel (Bild-Modul, dynamisch) */
html body .bo-artikel-bild{margin:0 0 24px !important}
html body .bo-artikel-bild img{width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--bo-radius)}
html body .bo-artikel-bild .wp-caption-text,
html body .bo-artikel-bild figcaption{margin:8px 0 0 !important;padding:0 !important;
  font-size:12.5px !important;line-height:1.5 !important;color:var(--bo-text-3) !important;
  font-style:normal !important;text-align:left !important}

/* ---------- 5) Verwandte Beiträge (Blog-Modul in der rechten Spalte) ---------- */
html body .bo-blog-verwandt article{
  display:flex !important;flex-direction:column !important;gap:4px !important;
  margin:0 !important;padding:0 0 14px !important;background:none !important;
  border:0 !important;border-bottom:1px solid var(--bo-line) !important;border-radius:0 !important}
html body .bo-blog-verwandt article:last-child{border-bottom:0 !important;padding-bottom:0 !important}
html body .bo-blog-verwandt .entry-featured-image-url,
html body .bo-blog-verwandt .post-content,
html body .bo-blog-verwandt .more-link,
html body .bo-blog-verwandt .et_pb_image_container{display:none !important}
html body .bo-blog-verwandt .entry-title{margin:0 !important;padding:0 !important;
  font-size:15px !important;line-height:1.35 !important;font-weight:700 !important;color:var(--bo-ink) !important}
html body .bo-blog-verwandt .entry-title a{color:inherit !important;text-decoration:none}
html body .bo-blog-verwandt .entry-title a:hover{color:var(--bo-gold-text) !important}
html body .bo-blog-verwandt .post-meta{margin:0 !important;padding:0 !important;
  font-size:13px !important;color:var(--bo-text-3) !important}
html body .bo-blog-verwandt .post-meta a{color:var(--bo-text-3) !important;text-decoration:none}

/* Der Kasten drumherum: gleiche Hülle wie das Verzeichnis (Block 18) */
html body .bo-artikel-spalte > .et_pb_module{
  padding:18px !important;margin:0 0 16px !important;
  background:var(--bo-card) !important;border:1px solid var(--bo-line) !important;
  border-radius:var(--bo-radius) !important}
html body .bo-artikel-spalte > .et_pb_module:last-child{margin-bottom:0 !important}

/* ---------- 6) Druck ---------- */
@media print{
  html body .bo-blog-karten .pagination,
  html body .bo-artikel-spalte,
  html body .bo-artikel-bild{display:none !important}
}


/* ==========================================================================
   Beeond v9 — Block 15. Ans ENDE von child-theme/css/beeond-divi.css anhängen.
   Danach: Divi ▸ Theme-Optionen ▸ Builder ▸ Erweitert ▸ Static CSS leeren + Cache leeren.
   ========================================================================== */

/* 15.1 Logo (SVG über Safe SVG hochgeladen) */
.et-l--header .et_pb_image img,
.et-l--footer .bo-logo img{height:30px;width:auto}
@media (max-width:640px){.et-l--header .et_pb_image img{height:28px}}

/* 15.2 Kopf: Schatten ab 8 px Scroll (Klasse setzt 27-v9.js) */
.et-l--header{transition:box-shadow .3s ease}
.et-l--header.bo-scrolled{box-shadow:0 12px 32px -22px rgba(33,28,21,.5)}

/* 15.3 Menü-Umbruch erst bei 1100 px (Desktop-Menü hat sechs Einträge + Sprache + Knopf) */
@media (max-width:1100px){
  .et-l--header .bo-menu-desktop,.et-l--header .bo-lang,.et-l--header .bo-head-cta{display:none!important}
  .et-l--header .bo-burger{display:inline-flex!important}
}

/* 15.4 Geräte-Umschalter im Hero (Code-Modul 25-hero-geraete.html) */
.bo-dev{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.bo-dev-seg{display:inline-flex;gap:2px;padding:3px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);max-width:100%;overflow-x:auto;scrollbar-width:none}
.bo-dev-seg button{min-height:42px;padding:0 16px;border:0;border-radius:4px;background:transparent;color:rgba(247,244,237,.8);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.bo-dev-seg button[aria-pressed="true"]{background:#F7F4ED;color:#211C15}
.bo-dev-cap{margin:0!important;padding:0!important;font-size:13.5px;color:rgba(247,244,237,.78);text-align:center;min-height:19px}
.bo-dev-stage{display:grid;width:100%;align-items:end;justify-items:center;margin-top:8px;margin-bottom:calc(-1 * clamp(40px,6vw,88px))}
.bo-dev-f{grid-area:1/1;position:relative;box-sizing:border-box;opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s}
.bo-dev-f.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .08s,transform .6s cubic-bezier(.2,.7,.2,1) .08s}
.bo-dev-f>div{position:relative;width:100%;height:100%;overflow:hidden;background:#F2EBDA}
.bo-dev-f img{width:100%;height:100%;object-fit:cover;display:block}
.bo-ios{width:clamp(220px,21vw,270px);aspect-ratio:1179/2556;background:#0b0908;border-radius:14%/6.5%;padding:2.6%;box-shadow:0 0 0 1.5px #57514a,0 40px 70px -30px rgba(0,0,0,.65)}
.bo-ios>div{border-radius:12%/5.5%}
.bo-ios::after{content:"";position:absolute;top:2.5%;left:50%;width:29%;height:2.9%;transform:translateX(-50%);background:#0b0908;border-radius:99px;z-index:3}
.bo-andr{width:clamp(220px,21vw,270px);aspect-ratio:1179/2556;background:#1c1c1e;border-radius:9%/4.2%;padding:2%;box-shadow:0 0 0 1.5px #48484a,0 40px 70px -30px rgba(0,0,0,.65)}
.bo-andr>div{border-radius:7.5%/3.5%}
.bo-andr::after{content:"";position:absolute;top:2.1%;left:50%;width:4.2%;aspect-ratio:1;transform:translateX(-50%);background:#050505;border-radius:50%;box-shadow:0 0 0 2px #1c1c1e;z-index:3}
.bo-tab{width:clamp(280px,28vw,380px);aspect-ratio:1640/2360;background:#0b0908;border-radius:5.5%/3.8%;padding:4.2%;box-shadow:0 0 0 1.5px #57514a,0 40px 70px -30px rgba(0,0,0,.65)}
.bo-tab>div{border-radius:1.6%/1.1%}
.bo-tab::after{content:"";position:absolute;top:1.5%;left:50%;width:1.6%;aspect-ratio:1;transform:translateX(-50%);background:#2b2621;border-radius:50%}
.bo-web{width:100%;max-width:580px;border-radius:10px;overflow:hidden;background:#2b2621;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 70px -30px rgba(0,0,0,.7)}
.bo-web .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px}
.bo-web .bar i{width:10px;height:10px;border-radius:50%;background:#57514a}
.bo-web .bar span{flex:1;margin:0 40px 0 14px;height:20px;border-radius:5px;background:rgba(255,255,255,.08);color:rgba(247,244,237,.72);font-size:11.5px;display:flex;align-items:center;justify-content:center}
.bo-web .scr{aspect-ratio:16/10;background:#F2EBDA;overflow:hidden}
.bo-dev-leer{display:flex;align-items:center;justify-content:center;height:100%;padding:12px;text-align:center;font-size:13px;color:#5B5346}
@media (max-width:900px){.bo-ios,.bo-andr{width:220px}.bo-tab{width:290px}}
@media (max-width:640px){.bo-ios,.bo-andr{width:190px}.bo-tab{width:250px}}

/* 15.5 Hero-Hintergrund zoomt beim Laden einmal ein (Sektion-Klasse bo-hero) */
.bo-hero .et_parallax_bg,.bo-hero > .et_pb_background_image{animation:boKenBurns 2.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes boKenBurns{from{transform:scale(1.06)}to{transform:none}}

/* 15.6 Blog auf der Startseite: EIN Blog-Modul, Layout Vollbreite, 4 Beiträge, Klasse bo-blog-mix */
.bo-blog-mix .et_pb_ajax_pagination_container{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-auto-rows:auto;gap:0 clamp(16px,2vw,28px)}
.bo-blog-mix .et_pb_post{margin:0!important;padding:0!important;color:#F7F4ED}
.bo-blog-mix .et_pb_post:nth-child(1){grid-row:1 / span 3;display:flex;flex-direction:column;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.bo-blog-mix .et_pb_post:nth-child(1) .entry-featured-image-url{position:relative;display:block;flex:1 1 auto;min-height:clamp(220px,26vw,340px);margin:0;overflow:hidden}
.bo-blog-mix .et_pb_post:nth-child(1) .entry-featured-image-url img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bo-blog-mix .et_pb_post:nth-child(1) .entry-title{font-size:clamp(1.375rem,1.05rem + 1.2vw,2rem)!important;line-height:1.15!important;padding:0 clamp(20px,2.6vw,32px)!important;margin-top:16px!important}
.bo-blog-mix .et_pb_post:nth-child(1) .post-meta,.bo-blog-mix .et_pb_post:nth-child(1) .post-content{padding:0 clamp(20px,2.6vw,32px)}
.bo-blog-mix .et_pb_post:nth-child(1) .post-content{padding-bottom:clamp(20px,2.6vw,32px)}
.bo-blog-mix .et_pb_post:nth-child(2){display:flex;flex-direction:column;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden;margin-bottom:clamp(16px,2vw,28px)!important}
.bo-blog-mix .et_pb_post:nth-child(2) .entry-featured-image-url{display:block;aspect-ratio:16/8;overflow:hidden;margin:0}
.bo-blog-mix .et_pb_post:nth-child(2) .entry-featured-image-url img{width:100%;height:100%;object-fit:cover}
.bo-blog-mix .et_pb_post:nth-child(2) .entry-title,.bo-blog-mix .et_pb_post:nth-child(2) .post-meta{padding:0 clamp(18px,2.2vw,24px)}
.bo-blog-mix .et_pb_post:nth-child(2) .entry-title{margin-top:14px!important;font-size:clamp(1.125rem,1rem + .45vw,1.3125rem)!important}
.bo-blog-mix .et_pb_post:nth-child(2) .post-content{padding:0 clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px)}
.bo-blog-mix .et_pb_post:nth-child(n+3){display:flex;flex-direction:column-reverse;gap:4px;padding:16px 0!important;border-bottom:1px solid rgba(255,255,255,.14)}
.bo-blog-mix .et_pb_post:nth-child(3){border-top:1px solid rgba(255,255,255,.14)}
.bo-blog-mix .et_pb_post:nth-child(n+3) .entry-featured-image-url,.bo-blog-mix .et_pb_post:nth-child(n+3) .post-content{display:none}
.bo-blog-mix .et_pb_post:nth-child(n+3) .entry-title{font-size:16.5px!important;line-height:1.35!important}
.bo-blog-mix .entry-title a{color:#F7F4ED!important}
.bo-blog-mix .post-meta,.bo-blog-mix .post-meta a{font-size:12.5px!important;font-weight:600;color:rgba(247,244,237,.72)!important}
.bo-blog-mix .post-content p{font-size:15px;line-height:1.55;color:rgba(247,244,237,.8)}
.bo-blog-mix .more-link{color:#DCA64B!important;font-weight:600}
.bo-blog-mix .et_pb_post:nth-child(-n+2){transition:border-color .25s}
.bo-blog-mix .et_pb_post:nth-child(-n+2):hover{border-color:#DCA64B}
.bo-blog-mix .entry-featured-image-url img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bo-blog-mix .et_pb_post:hover .entry-featured-image-url img{transform:scale(1.035)}
@media (max-width:900px){
  .bo-blog-mix .et_pb_ajax_pagination_container{grid-template-columns:1fr}
  .bo-blog-mix .et_pb_post:nth-child(1){grid-row:auto;margin-bottom:clamp(16px,2vw,28px)!important}
}

/* 15.7 Blog-Archiv /blog/ und Kategorien: EIN Blog-Modul «Beiträge der aktuellen Seite», Vollbreite, Klasse bo-blog-archiv */
.bo-blog-archiv .et_pb_ajax_pagination_container{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.bo-blog-archiv .et_pb_post{grid-column:span 2;margin:0!important;padding:0!important;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(33,28,21,.12);border-radius:4px;overflow:hidden;transition:border-color .25s}
.bo-blog-archiv .et_pb_post:hover{border-color:#DCA64B}
.bo-blog-archiv .entry-featured-image-url{display:block;aspect-ratio:16/10;overflow:hidden;margin:0;background:#E9DFC6}
.bo-blog-archiv .entry-featured-image-url img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bo-blog-archiv .et_pb_post:hover .entry-featured-image-url img{transform:scale(1.035)}
.bo-blog-archiv .entry-title{padding:18px 20px 0!important;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)!important;line-height:1.3!important}
.bo-blog-archiv .post-meta{padding:6px 20px 0;font-size:12.5px!important;font-weight:600}
.bo-blog-archiv .post-content{padding:8px 20px 20px;font-size:14.5px;line-height:1.5}
.bo-blog-archiv .pagination,.bo-blog-archiv .wp-pagenavi{grid-column:1 / -1}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1){grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;box-shadow:var(--elevation-1,0 1px 2px rgba(33,28,21,.08))}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .entry-featured-image-url{grid-row:1 / span 3;aspect-ratio:auto;min-height:clamp(240px,30vw,440px)}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .entry-title{align-self:end;padding:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0!important;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.375rem)!important;line-height:1.12!important}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .post-meta,body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .post-content{padding-left:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px)}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(2),body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(3){grid-column:span 3}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(2) .entry-featured-image-url,body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(3) .entry-featured-image-url{aspect-ratio:16/9}
@media (max-width:900px){
  .bo-blog-archiv .et_pb_ajax_pagination_container{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo-blog-archiv .et_pb_post,body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(2),body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(3){grid-column:span 1}
  body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1){grid-template-columns:1fr;grid-template-rows:auto}
  body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .entry-featured-image-url{grid-row:auto;min-height:240px}
}
@media (max-width:640px){
  .bo-blog-archiv .et_pb_ajax_pagination_container{grid-template-columns:1fr}
}

/* 15.8 Filterleiste Blog (Menü-Modul mit Kategorie-Menü, Klasse bo-blog-filter) */
.bo-blog-filter{position:sticky;top:68px;z-index:40;background:rgba(242,235,218,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bo-blog-filter ul{display:flex!important;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0!important}
.bo-blog-filter li{padding:0!important}
.bo-blog-filter li a{display:inline-flex!important;align-items:center;min-height:44px;padding:0 16px!important;border:1px solid rgba(33,28,21,.16);border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:#211C15!important;white-space:nowrap}
.bo-blog-filter li.current-menu-item a,.bo-blog-filter li.current-cat a{background:#211C15;border-color:#211C15;color:#F7F4ED!important}
@media (max-width:640px){.bo-blog-filter{position:static}}

/* 15.9 Responsive-Korrekturen Startseite */
@media (max-width:900px){
  .bo-umstieg-text{padding:clamp(40px,7vw,64px) clamp(20px,5vw,48px) clamp(64px,9vw,128px)!important}
  .bo-inklusive .et_pb_column{width:100%!important;margin-right:0!important}
}
@media (max-width:520px){.bo-umstieg .ff-t-container{flex-direction:column}}

/* 15.9b Preiskarten: 4 / 2×2 / 1 (Row mit vier Columns, Klasse bo-preiskarten) */
@media (max-width:1050px){.bo-preiskarten{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.bo-preiskarten>.et_pb_column{width:auto!important;margin:0!important}}
@media (max-width:560px){.bo-preiskarten{grid-template-columns:1fr}}

/* 15.11 Vergleich: Text-Modul (Reiter Text) mit <table>, Modul-Klasse bo-vergleich */
.bo-vergleich table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;border:0}
.bo-vergleich .et_pb_text_inner{border:1px solid rgba(33,28,21,.12);border-radius:4px;overflow:hidden;box-shadow:0 1px 2px rgba(33,28,21,.06)}
.bo-vergleich th{text-align:left;vertical-align:bottom;padding:clamp(22px,3vw,36px) clamp(20px,3vw,40px)!important;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:700;letter-spacing:-.02em;border:0}
.bo-vergleich th small{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.bo-vergleich th:first-child{background:#F7F4ED;color:#211C15}.bo-vergleich th:first-child small{color:#5B5346}
.bo-vergleich th:last-child{background:#211C15;color:#F7F4ED}.bo-vergleich th:last-child small{color:#DCA64B}
.bo-vergleich td{padding:18px clamp(20px,3vw,40px)!important;border:0;border-top:1px solid rgba(33,28,21,.08);font-size:16px;line-height:1.45;vertical-align:middle}
.bo-vergleich td:first-child{background:#F7F4ED;color:#5B5346}
.bo-vergleich td:first-child::after{content:"\2192";float:right;color:#965D0C;margin-left:12px}
.bo-vergleich td:last-child{background:#fff;color:#211C15;font-weight:600}
.bo-vergleich td:last-child::before{content:"\2713";color:#965D0C;font-weight:700;margin-right:10px}
.bo-vergleich p.bo-vergleich-fuss{margin:0;padding:18px clamp(20px,3vw,40px)!important;background:#F7F4ED;border-top:1px solid rgba(33,28,21,.08);font-size:15.5px;color:#5B5346}
@media (max-width:640px){.bo-vergleich th,.bo-vergleich td{padding:14px!important;font-size:14.5px}.bo-vergleich th{font-size:1.125rem}.bo-vergleich td:first-child::after{display:none}}

/* 15.12 Vertrauen: Porträt rund, Zitat-Karte auf ink, Logo-Leiste */
.bo-portraet img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.bo-zitat-karte{background:#211C15;color:#F7F4ED;border-radius:4px;padding:clamp(28px,4vw,56px)!important}
.bo-logos .et_pb_image img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.bo-logos .et_pb_image:hover img{filter:none;opacity:1}

/* 15.13 Download: Store der Besucher-Plattform zuerst (data-os setzt 27-v9.js) */
.bo-stores .et_pb_code_inner>div,.bo-stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
html[data-os="android"] .bo-stores .bo-store-play{order:-1}

/* 15.14 Sticky-CTA: ab Ende Hero (statt ab Fakten-Band), sonst wie 6.3 Kap. 24 */
@media (max-width:640px){.bo-sticky-cta .bo-sticky-sub{display:none}}

/* 15.10 Divi-Animationen: respektieren «Bewegung reduzieren» */
@media (prefers-reduced-motion:reduce){
  .et_animated,.et-waypoint{opacity:1!important;animation:none!important;transform:none!important}
  .bo-dev-f,.bo-hero .et_parallax_bg,.bo-hero > .et_pb_background_image{transition:none!important;animation:none!important}
}

/* 15.15 Handy im Querformat (Höhe ≤ 500 px) — Divi-Breakpoints sind breitenbasiert, die Höhe regelt nur diese CSS */
@media (orientation:landscape) and (max-height:500px){
  .et-l--header .et_pb_section,.et-l--header .et_pb_row{padding-top:4px!important;padding-bottom:4px!important;min-height:0!important}
  .bo-hero{min-height:0!important;padding-top:28px!important}
  .bo-ios,.bo-andr{width:150px}.bo-tab{width:200px}.bo-web{max-width:420px}
  .bo-sticky-cta{display:none!important}
  body{padding-bottom:0!important}
  .bo-blog-filter{position:static}
  .bo-menu-ov a{font-size:1.25rem!important;padding:10px 0!important}
}

/* 15.16 Bausteine Fassung 10 (Gesamtanleitung) */
.bo-sec-nach-hero{padding-top:clamp(80px,11vw,160px)!important}
.bo-linie-oben{border-top:1px solid rgba(33,28,21,.12);padding-top:clamp(28px,3vw,40px)!important;margin-top:clamp(40px,5vw,72px)!important}
.bo-mw-64{max-width:64ch;margin-left:auto!important;margin-right:auto!important}
.bo-zentriert,.bo-zentriert p,.bo-zentriert h2{text-align:center}
.bo-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.bo-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:4px;font-size:16px;font-weight:600;text-decoration:none!important;box-sizing:border-box;transition:background .2s,border-color .2s}
.bo-knopf--gold{background:#DCA64B;color:#3A2E1A!important}.bo-knopf--gold:hover{background:#E6B865}
.bo-knopf--hell{border:1px solid rgba(247,244,237,.45);color:#F7F4ED!important}.bo-knopf--hell:hover{border-color:#F7F4ED}
@media (max-width:640px){.bo-hero-cta{flex-direction:column}.bo-hero-cta .bo-knopf{width:100%}}
.bo-tabs{border:0!important;background:transparent!important}
.bo-tabs .et_pb_tabs_controls{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:transparent!important;border-bottom:1px solid rgba(33,28,21,.12)}
.bo-tabs .et_pb_tabs_controls li{background:transparent!important;border:0!important;border-bottom:3px solid transparent!important;margin:0!important;flex:none}
.bo-tabs .et_pb_tabs_controls li a{display:block;padding:14px 18px!important;font-size:15.5px;font-weight:600;color:#5B5346!important;white-space:nowrap}
.bo-tabs .et_pb_tabs_controls li.et_pb_tab_active{border-bottom-color:#DCA64B!important}
.bo-tabs .et_pb_tabs_controls li.et_pb_tab_active a{color:#211C15!important}
.bo-tabs .et_pb_all_tabs{background:transparent!important;padding:clamp(28px,4vw,56px) 0 0!important}
.bo-tab-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.bo-tab-panel .bo-ios{justify-self:center;width:min(100%,clamp(220px,24vw,290px));opacity:1;visibility:visible;transform:none}
.bo-tab-panel h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 14px}
/* Haken-Listen: siehe Block 17.1 (die Fassung von hier hat mit Block 11 kollidiert) */
@media (max-width:900px){.bo-tab-panel{grid-template-columns:1fr}.bo-tab-panel .bo-ios{width:220px}}
.bo-laender{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:6px 0 0;font-size:15px;line-height:1.5}
.bo-laender dt{font-weight:700;color:#211C15}.bo-laender dd{margin:0;color:#5B5346}
.bo-umstieg-text{padding:clamp(64px,9vw,128px) clamp(20px,5vw,48px) clamp(64px,9vw,128px) clamp(28px,5vw,80px)!important}
.bo-foto-spalte{background-size:cover!important;background-position:center!important;min-height:100%}
@media (max-width:900px){.bo-foto-spalte{min-height:0;aspect-ratio:16/8}}
.bo-schritte{list-style:none!important;margin:0!important;padding:0!important;counter-reset:bo-s;display:flex;flex-direction:column;gap:18px}
.bo-schritte li{list-style:none!important;counter-increment:bo-s;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.bo-schritte li::before{content:counter(bo-s);width:32px;height:32px;border-radius:50%;background:#DCA64B;color:#3A2E1A;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.bo-schritte b{display:block;font-size:16.5px;color:#211C15}
.bo-richtwerte{margin:0;display:flex;flex-direction:column}
.bo-richtwerte>div{display:grid;grid-template-columns:minmax(88px,150px) 1fr;gap:4px 20px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.bo-richtwerte dt{font-weight:700}.bo-richtwerte dd{margin:0}.bo-richtwerte dd b{color:#DCA64B}.bo-richtwerte dd span{display:block;font-size:14.5px;color:rgba(247,244,237,.78);margin-top:2px}
.bo-kopfzeile{display:flex!important;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bo-kopfzeile>.et_pb_column{width:auto!important;margin:0!important}
.bo-mehr{font-size:15px;font-weight:600;color:#211C15!important;border-bottom:2px solid #DCA64B;padding-bottom:2px}
.bo-band-ink .bo-mehr{color:#F7F4ED!important}

/* 15.17 Startseite aus Divi-Export (Fassung 10) */
.bo-split-7-5,.bo-split-5-7{display:grid!important;align-items:center}
.bo-split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bo-split-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bo-split-7-5>.et_pb_column,.bo-split-5-7>.et_pb_column{width:auto!important;margin:0!important}
.bo-umstieg .bo-split-5-7{align-items:stretch;column-gap:0!important}
@media (max-width:900px){.bo-split-7-5,.bo-split-5-7{grid-template-columns:1fr}}
.bo-band-ink,.bo-band-ink p,.bo-band-ink li,.bo-band-ink dd{color:rgba(247,244,237,.86)}
.bo-band-ink h2,.bo-band-ink h3,.bo-band-ink b,.bo-band-ink dt{color:#F7F4ED!important}
.bo-faq-kurz{border-top:1px solid rgba(33,28,21,.12);padding-top:16px}
.bo-faq-kurz h3{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);margin:0 0 8px;line-height:1.3;color:#211C15}
.bo-faq-kurz p{margin:0;font-size:15.5px;line-height:1.6}
.bo-zitat-karte .bo-zitat-rubrik{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#DCA64B}
.bo-zitat-karte blockquote{margin:16px 0 20px;padding:0;border:0;font-size:clamp(1.25rem,1rem + 1.2vw,1.875rem);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#F7F4ED}
.bo-zitat-karte figcaption{display:flex;align-items:center;gap:14px;font-size:15.5px;color:rgba(247,244,237,.78)}
.bo-zitat-karte figcaption::before{content:"";width:44px;height:3px;background:#DCA64B;flex:none}
.bo-zitat-karte figcaption b{color:#F7F4ED}
.bo-gruender{display:flex;flex-direction:column;gap:2px;font-size:14px;color:#5B5346;margin:6px 0 0}.bo-gruender b{font-size:16px;color:#211C15}
.bo-fn-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(33,28,21,.12)}
.bo-fn-tabs::-webkit-scrollbar{display:none}
.bo-fn-tabs button{min-height:48px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:transparent;font:inherit;font-size:15.5px;font-weight:600;color:#5B5346;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.bo-fn-tabs button:hover{color:#211C15}
.bo-fn-tabs button[aria-selected="true"]{color:#211C15;border-bottom-color:#DCA64B}
.bo-fn-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(28px,4vw,56px)}
.bo-fn-geraet{justify-self:center;width:min(100%,clamp(220px,24vw,290px))!important}
.bo-fn-geraet>div{position:relative;width:100%;height:100%;overflow:hidden;background:#F2EBDA}
.bo-fn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.bo-fn-img.is-on{opacity:1}
.bo-fn-text>section{display:none}.bo-fn-text>section.is-on{display:block;animation:boFnIn .45s ease}
@keyframes boFnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bo-fn-text h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;color:#211C15}
.bo-fn-text p{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6;color:#5B5346;margin:0 0 16px;max-width:54ch}
@media (max-width:900px){.bo-fn-panel{grid-template-columns:1fr}.bo-fn-geraet{width:220px!important}}
.bo-store{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:8px;background:#000;color:#fff!important;border:1px solid rgba(255,255,255,.3);box-sizing:border-box;text-decoration:none!important}
.bo-store small{display:block;font-size:10px;line-height:1.1}.bo-store strong{display:block;font-size:19px;font-weight:600;line-height:1.1;white-space:nowrap}
.bo-store--web{background:transparent;border-radius:4px}.bo-store--web strong{font-size:16px}
@media (prefers-reduced-motion:reduce){.bo-fn-img,.bo-fn-text>section{transition:none!important;animation:none!important}}

/* ============================================================
   Block 17 — Fassung 2 (3. Oktober 2026)
   17.1 Haken-Listen: eine einzige Definition (behebt die schmalen Listen)
   17.2 Grossbuchstaben nur noch über die Klasse bo-rubrik
   17.3 Divi-Hülle für Seiten aus einem Code-Modul
   17.4 Bausteine der neuen Seiten (Kündigen, FAQ, Varroa-Rechner, Vereine, Kontakt)
   Gehört ans ENDE von beeond-divi.css (in child-theme/css/beeond-divi.css
   bereits enthalten).
   ============================================================ */

/* 17.1 Haken-Listen
   Fehlerursache: Block 11 macht jedes li zu einem Raster (18 px | Rest),
   Block 15.16 nimmt den Haken mit position:absolute aus diesem Raster.
   Der Text rutschte dadurch in die 18-px-Spalte — wenige Buchstaben pro Zeile.
   Jetzt: kein Raster, der Haken sitzt im linken Innenabstand. */
html body ul.bo-haken{display:flex!important;flex-direction:column!important;gap:10px!important;list-style:none!important;margin:4px 0 0!important;padding:0!important;width:100%!important;max-width:none!important;column-count:1!important}
html body ul.bo-haken>li{display:block!important;position:relative!important;list-style:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0 0 10px 30px!important;border-bottom:1px solid rgba(33,28,21,.08);font-size:16px;line-height:1.5;color:#211C15;text-align:left}
html body ul.bo-haken>li:last-child{border-bottom:0;padding-bottom:0!important}
html body ul.bo-haken>li::marker{content:none}
html body ul.bo-haken>li::before{content:""!important;position:absolute!important;left:0;top:.2em;width:18px;height:18px;margin:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965D0C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/18px 18px no-repeat!important}
html body .bo-band-ink ul.bo-haken>li{color:rgba(247,244,237,.86);border-bottom-color:rgba(255,255,255,.14)}
html body .bo-band-ink ul.bo-haken>li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCA64B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E")!important}

/* 17.2 Grossbuchstaben nur per Klasse
   Grossbuchstaben gibt es nur in Rubriken (Klasse bo-rubrik, bo-zitat-rubrik).
   Setzt ein Divi-Preset «TT» auf Text-, Tab-, Knopf-, Toggle- oder Menü-Module,
   hebt diese Regel nur die Grossschreibung auf. Grösse, Farbe und Abstand des
   Presets bleiben — darum die Ursache trotzdem beheben (Anleitung Schritt 3). */
html body .et-l--body .et_pb_text:not([class*="rubrik"])>.et_pb_text_inner,
html body .et-l--body .et_pb_text_inner :is(h1,h2,h3,h4,h5,h6,p,li,a,blockquote,figcaption,dt,dd,td,th):not([class*="rubrik"]):not([class*="rubrik"] *),
html body .et-l--body :is(.et_pb_tabs_controls a,.et_pb_toggle_title,.et_pb_button,.et_pb_module_header,.et_pb_post .entry-title,.et_pb_post .entry-title a,.et_pb_post .more-link),
html body .et-l--header .et_pb_menu .et-menu>li:not([class*="wpml"])>a,
html body .et-l--header .et_pb_button{text-transform:none!important}

/* 17.3 Divi-Hülle für Seiten aus einem Code-Modul
   Sektion: Klasse bo-seite-roh · Row: Klasse bo-row-voll · darin Code-Module.
   Die Seiten-HTML bringt Hintergründe, Breite und Abstände selbst mit. */
html body .et_pb_section.bo-seite-roh{padding:0!important;background-color:transparent}
html body #page-container .et_pb_row.bo-row-voll,html body #et-boc .et-l .et_pb_row.bo-row-voll,html body .et_pb_row.bo-row-voll{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
html body .bo-row-voll>.et_pb_column{width:100%!important;margin:0!important;padding:0!important}
html body .bo-row-voll .et_pb_module{margin:0!important}

/* 17.4 Bausteine der neuen Seiten */
.bo-p{padding:clamp(56px,8vw,112px) 0;background:var(--bo-page);color:var(--bo-text-2)}
.bo-p--hell{background:var(--bo-tint)}
.bo-p--weiss{background:var(--bo-card)}
.bo-p--ink{background:var(--bo-ink)}
.bo-p--kopf{padding-top:clamp(32px,4vw,56px)}
.bo-p--knapp{padding-top:0}
.bo-p-wrap{max-width:var(--bo-wrap);margin:0 auto;padding:0 var(--bo-gutter);box-sizing:border-box}
.bo-p-wrap--schmal{max-width:calc(760px + 2 * var(--bo-gutter))}
.bo-p h1,.bo-p h2,.bo-p h3{padding:0;margin:0;color:var(--bo-ink);font-weight:800;text-wrap:balance}
.bo-p h1{font-size:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);line-height:1.04;letter-spacing:-.035em}
.bo-p h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.03em}
.bo-p h3{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.3;letter-spacing:-.01em;font-weight:700}
.bo-p p{margin:0;padding:0;font-size:clamp(1rem,.97rem + .2vw,1.0625rem);line-height:1.6;color:var(--bo-text-2);max-width:64ch;text-wrap:pretty}
.bo-p a{color:var(--bo-gold-text)}.bo-p a:hover{color:var(--bo-ink)}
.bo-p .bo-rubrik,.bo-p p.bo-rubrik{display:block;max-width:none;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--bo-gold-text)}
.bo-p--ink .bo-rubrik,.bo-p--ink p.bo-rubrik{color:var(--bo-gold)}
.bo-p .bo-lead{font-size:clamp(1.0625rem,1rem + .45vw,1.25rem);line-height:1.5}
.bo-p h2.bo-h-klein{font-size:1.25rem;letter-spacing:-.01em}
.bo-p .bo-klein{font-size:14px;line-height:1.5;color:var(--bo-text-3)}
.bo-p--ink h1,.bo-p--ink h2,.bo-p--ink h3,.bo-p--ink b{color:var(--bo-ink-fg)}
.bo-p--ink p,.bo-p--ink li{color:rgba(247,244,237,.86)}
.bo-p--ink a:not(.bo-knopf){color:var(--bo-gold)}
.bo-stapel{display:flex;flex-direction:column;gap:16px}
.bo-stapel--gross{gap:clamp(24px,3vw,40px)}
.bo-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,3.5vw,48px)}
.bo-kopf>div{display:flex;flex-direction:column;gap:12px}
.bo-brot{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--bo-text-3);margin:0 0 clamp(20px,3vw,32px)}
.bo-brot a{color:var(--bo-text-2)!important;text-decoration:none}.bo-brot a:hover{color:var(--bo-ink)!important;text-decoration:underline}
.bo-brot .rank-math-breadcrumb p{margin:0;font-size:14px;color:var(--bo-text-3)}
.bo-knopf--ink{background:var(--bo-ink);color:var(--bo-ink-fg)!important}.bo-knopf--ink:hover{background:#3A332A}
.bo-knopf--rand{border:1px solid var(--bo-line-input);color:var(--bo-ink)!important;background:transparent}.bo-knopf--rand:hover{border-color:var(--bo-ink)}
.bo-knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bo-knoepfe .bo-knopf{flex:none;white-space:nowrap}
@media (max-width:640px){.bo-knoepfe{flex-direction:column;align-items:stretch}.bo-knoepfe .bo-knopf{width:100%}}
.bo-raster{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.bo-raster--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bo-raster--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.bo-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.bo-split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bo-split--oben{align-items:start}
@media (max-width:900px){.bo-split,.bo-split--5-7{grid-template-columns:1fr}}
.bo-karte{background:var(--bo-card);border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);padding:var(--bo-karte-pad,24px);box-sizing:border-box}
.bo-hinweis{display:block;background:var(--bo-tint);border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);padding:16px 20px;font-size:15.5px;line-height:1.55;color:var(--bo-text-2)}
.bo-hinweis b{color:var(--bo-ink)}
.bo-oben-gold{border-top:3px solid var(--bo-gold);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.bo-oben-gold .bo-nr{font-size:14px;font-weight:700;color:var(--bo-gold-text);font-variant-numeric:tabular-nums}
.bo-oben-linie{border-top:1px solid var(--bo-line-input);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.bo-bild{display:block;width:100%;height:auto;border-radius:var(--bo-radius);object-fit:cover}
.bo-bild--45{aspect-ratio:4/5}
@media (max-width:900px){.bo-bild--45{aspect-ratio:16/9}}
.bo-geraet-mitte{display:flex;justify-content:center}
.bo-geraet-mitte .bo-dev-f{opacity:1;visibility:visible;transform:none}
.bo-schritte-quer{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,3vw,40px);counter-reset:bo-q}
.bo-schritte-quer>li{list-style:none!important;counter-increment:bo-q;display:flex;flex-direction:column;gap:10px;padding:0!important}
.bo-schritte-quer>li::before{content:counter(bo-q);width:40px;height:40px;border-radius:50%;background:var(--bo-gold);color:var(--bo-gold-fg);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.bo-zitat-klein{margin:0;padding:20px 0 0;border-top:1px solid var(--bo-line-input)}
.bo-zitat-klein blockquote{margin:0 0 10px;padding:0;border:0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);font-weight:600;line-height:1.4;color:var(--bo-ink)}
.bo-zitat-klein figcaption{font-size:14.5px;color:var(--bo-text-2)}
.bo-tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);background:var(--bo-card)}
.bo-tabelle table{width:100%;min-width:640px;border-collapse:collapse;margin:0;border:0;font-size:15px;line-height:1.45}
.bo-tabelle caption{position:absolute;left:-9999px}
.bo-tabelle th,.bo-tabelle td{padding:14px 16px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--bo-line)}
.bo-tabelle thead th{background:var(--bo-muted);font-size:13px;font-weight:700;color:var(--bo-ink)}
.bo-tabelle tbody th{font-weight:700;color:var(--bo-ink);white-space:nowrap}
.bo-tabelle td{color:var(--bo-text-2)}
.bo-tabelle tr:last-child th,.bo-tabelle tr:last-child td{border-bottom:0}
.bo-nummern{margin:0!important;padding:0 0 0 20px!important;display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.5;color:var(--bo-text-2)}
.bo-nummern li{padding-left:4px}
.bo-quellen{margin:0!important;padding:0 0 0 18px!important;font-size:14.5px;line-height:1.6;color:var(--bo-text-2)}
/* FAQ */
.bo-faq-seite{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,4vw,64px);align-items:start}
.bo-faq-nav{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px}
.bo-faq-nav a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--bo-line-input);font-size:15px;font-weight:600;color:var(--bo-text-2)!important;text-decoration:none}
.bo-faq-nav a:hover{color:var(--bo-ink)!important;border-left-color:var(--bo-gold)}
.bo-faq-gruppe{display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px}
.bo-faq-gruppe+.bo-faq-gruppe{margin-top:clamp(36px,4vw,56px)}
.bo-p .bo-faq-gruppe h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);letter-spacing:-.02em}
details.bo-faq{border-top:1px solid var(--bo-line-input)}
details.bo-faq:last-child{border-bottom:1px solid var(--bo-line-input)}
details.bo-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);font-weight:700;line-height:1.35;color:var(--bo-ink)}
details.bo-faq summary::-webkit-details-marker{display:none}
details.bo-faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:2px solid var(--bo-gold-text);border-bottom:2px solid var(--bo-gold-text);transform:rotate(45deg);transition:transform .25s var(--bo-ease)}
details.bo-faq[open] summary::after{transform:rotate(-135deg)}
details.bo-faq summary:hover{color:var(--bo-gold-text)}
details.bo-faq>p{padding:0 0 18px!important}
.bo-faq-suche{display:flex;flex-direction:column;gap:8px;max-width:420px;width:100%}
.bo-faq-suche label{font-size:14px;font-weight:600;color:var(--bo-ink)}
.bo-faq-suche input{min-height:48px;padding:0 14px;border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);background:var(--bo-card);font:inherit;font-size:16px;color:var(--bo-ink)}
.bo-faq-suche input:focus{outline:none;box-shadow:0 0 0 3px rgba(220,166,75,.45);border-color:var(--bo-gold)}
.bo-faq-leer{display:none}
@media (max-width:900px){
  .bo-faq-seite{grid-template-columns:1fr}
  .bo-faq-nav{position:static;flex-direction:row;overflow-x:auto;gap:8px;scrollbar-width:none;padding-bottom:4px}
  .bo-faq-nav a{border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);padding:10px 14px;white-space:nowrap;background:var(--bo-card);min-height:44px;box-sizing:border-box;display:flex;align-items:center}
}
/* Formulare auf Seiten (Fluent Forms im Code-Modul) */
.bo-formular{background:var(--bo-card);border:1px solid var(--bo-line-input);border-radius:var(--bo-radius);padding:clamp(20px,3vw,32px)}
/* Varroa-Rechner: [hidden] gilt wieder (.bo-vr-row{display:flex} hatte es überstimmt — Probe-Feld stand immer da) */
.bo-varroa [hidden]{display:none!important}

/* ============================================================
   Block 21 — Blog-Archiv, Korrektur (4. Oktober 2026)
   Quelle: divi/33-blog-archiv-korrektur.css — ans ENDE von css/beeond-divi.css
   Ursache: Divi 5 legt im Blog-Modul eine Hülle .et_pb_blog_posts
   zwischen .et_pb_ajax_pagination_container und die Beiträge. Das Raster
   aus 15.6/15.7 sass auf dem äusseren Element und hatte nur EIN Kind —
   «gross / halb / Drittel» konnte nie entstehen. display:contents löst
   die Hülle auf, die Beiträge werden wieder Zellen des Rasters.
   ============================================================ */
.bo-blog-archiv .et_pb_blog_posts,
.bo-blog-mix .et_pb_blog_posts{display:contents!important}

/* Meta über dem Titel, Rubrik vor dem Datum, Divis «|» ausgeblendet */
.bo-blog-archiv .et_pb_post .entry-featured-image-url{order:0}
.bo-blog-archiv .et_pb_post .post-meta{order:1;display:flex;flex-wrap:wrap;gap:4px 12px;margin:0!important;padding:18px 20px 0!important;font-size:0!important;line-height:1.4!important}
.bo-blog-archiv .et_pb_post .post-meta>span,
.bo-blog-archiv .et_pb_post .post-meta a{font-size:12.5px!important;font-weight:600;color:var(--bo-text-3)!important}
.bo-blog-archiv .et_pb_post .post-meta .entry-categories{order:-1}
.bo-blog-archiv .et_pb_post .post-meta .entry-categories a{color:var(--bo-gold-text,#965D0C)!important;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.bo-blog-archiv .et_pb_post .entry-title{order:2;margin:0!important;padding:8px 20px 0!important}
.bo-blog-archiv .et_pb_post .post-content{order:3}

/* Erster Beitrag: Bild links über die volle Höhe, Text rechts mittig */
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1){grid-template-rows:1fr auto auto 1fr}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .entry-featured-image-url{grid-column:1;grid-row:1 / -1}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .post-meta{grid-column:2;grid-row:2;padding:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0!important}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .entry-title{grid-column:2;grid-row:3;align-self:auto;padding:12px clamp(22px,3vw,44px) 0!important}
body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1) .post-content{grid-column:2;grid-row:4;align-self:start;padding:14px clamp(22px,3vw,44px) clamp(22px,3vw,44px)!important;font-size:clamp(1rem,.96rem + .2vw,1.0938rem)}
@media (max-width:900px){
  body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1){grid-template-rows:auto}
  body:not(.paged) .bo-blog-archiv .et_pb_post:nth-child(1)>*{grid-column:1!important;grid-row:auto!important}
}
/* Beitrag ohne Beitragsbild: eine Spalte statt leerer Bildhälfte */
body:not(.paged) .bo-blog-archiv .et_pb_post.et_pb_no_thumb:nth-child(1){grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
body:not(.paged) .bo-blog-archiv .et_pb_post.et_pb_no_thumb:nth-child(1)>*{grid-column:1!important;grid-row:auto!important}
body:not(.paged) .bo-blog-archiv .et_pb_post.et_pb_no_thumb:nth-child(1) .entry-title{max-width:28ch}

/* ============================================================
   Block 22 — Blog auf dem Handy (4. Oktober 2026)
   Quelle: divi/34-blog-handy.css — ans ENDE von css/beeond-divi.css
   ============================================================ */
/* 22.1 Filterleiste: Divi klappt jedes Menü-Modul unter 981 px zum Burger
   zusammen. Die Filterleiste bleibt auf jeder Breite eine waagrecht
   scrollbare Chip-Reihe — Divis Handy-Menü wird hier nie gezeigt. */
html body .bo-blog-filter .et_mobile_nav_menu,
html body .bo-blog-filter .mobile_nav,
html body .bo-blog-filter .et_mobile_menu,
html body .bo-blog-filter .et_pb_menu__icon{display:none!important}
html body .bo-blog-filter .et_pb_menu__wrap{display:flex!important;justify-content:flex-start!important;width:100%;min-width:0}
html body .bo-blog-filter .et_pb_menu__menu{display:block!important;width:100%;min-width:0}
html body .bo-blog-filter .et_pb_menu__menu>nav>ul{flex-wrap:nowrap!important;justify-content:flex-start!important;margin:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
html body .bo-blog-filter .et_pb_menu__menu>nav>ul::-webkit-scrollbar{display:none}
html body .bo-blog-filter .et_pb_menu__menu>nav>ul>li{flex:0 0 auto;scroll-snap-align:start}
html body .bo-blog-filter .et_pb_menu__menu>nav>ul>li>a{white-space:nowrap;font-size:14.5px!important;font-weight:600!important;color:var(--bo-ink)!important}
html body .bo-blog-filter .et_pb_menu__menu>nav>ul>li:is(.current-menu-item,.current-cat,.bo-aktiv)>a{background:var(--bo-ink)!important;border-color:var(--bo-ink)!important;color:var(--bo-ink-fg)!important}

/* 22.2 Archivkopf: Rubrik und H1 linksbündig wie die H1 (Divi zentriert
   Text-Module auf dem Handy über das Preset). Klasse bo-archiv-kopf
   an die erste Section der Blog-Vorlage. */
html body .bo-archiv-kopf .et_pb_text,
html body .bo-archiv-kopf .et_pb_text_inner,
html body .bo-archiv-kopf .et_pb_post_title,
html body .bo-archiv-kopf .entry-title{text-align:left!important}

/* 22.3 Dunkles Band: Divis Text-Preset färbt h2 mit !important in Tinte
   (Spezifität 0,2,1) — die Regel aus 15.17 (0,1,1) verlor. */
html body .bo-band-ink .et_pb_text_inner :is(h1,h2,h3,h4){color:#F7F4ED!important}

/* 22.4 Knopf im dunklen Band: gold mit Tinte, wie im Entwurf.
   #page-container schlägt Divis Modul-Regel (body #page-container .et_pb_section …). */
html body #page-container .bo-band-ink .et_pb_button{display:inline-flex!important;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px!important;border:0!important;border-radius:var(--bo-radius)!important;
  background:var(--bo-gold)!important;color:var(--bo-ink)!important;font-size:16px!important;font-weight:600!important;
  letter-spacing:0!important;line-height:1.2!important;text-decoration:none}
html body #page-container .bo-band-ink .et_pb_button:hover,
html body #page-container .bo-band-ink .et_pb_button:focus-visible{background:#F7F4ED!important;color:var(--bo-ink)!important}

/* ============================================================
   Block 23 — Blog-Archiv: Sektion «Grundlagen» (4. Oktober 2026)
   Quelle: divi/35-blog-grundlagen.css — ans ENDE von css/beeond-divi.css
   Code-Modul rechts in der Sektion Grundlagen, HTML <nav class="bo-grundlagen">
   ============================================================ */
.bo-grundlagen{display:flex;flex-direction:column;border-top:1px solid var(--bo-line)}
.bo-grundlagen a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--bo-line);color:var(--bo-ink)!important;text-decoration:none!important}
.bo-grundlagen b{display:block;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:700;line-height:1.3;transition:color .2s}
.bo-grundlagen small{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--bo-text-2)}
.bo-grundlagen em{font-style:normal;font-size:13px;font-weight:600;color:var(--bo-text-2);white-space:nowrap}
.bo-grundlagen a:hover b{color:var(--bo-gold-text)}

/* ============================================================
   Block 24 — Einzelbeitrag wie Mockup v9 (4. Oktober 2026)
   Quelle: divi/36-blog-beitrag.css — ans ENDE von css/beeond-divi.css
   Vorlage «Alle Beiträge»: Kopf · Bild · Row .bo-artikel-grid
   (Spalte 1 Text, Spalte 2 .bo-recht-toc-spalte.bo-artikel-toc) ·
   Weiterlesen (Blog-Modul .bo-blog-weiter) · App-Hinweis
   ============================================================ */

/* 24.1 Kopfbild 21:9 über die volle Inhaltsbreite */
html body .bo-artikel-bild img{aspect-ratio:21/9}

/* 24.2 Raster: Verzeichnis links 220 px, Text rechts 720 px, mittig.
   Im Builder bleibt der Text Spalte 1 — das CSS stellt das Verzeichnis
   nach links. Unter 900 px nur der Text, wie im Mockup. */
html body .bo-artikel-grid,
html body #page-container .bo-artikel-grid{display:grid !important;
  grid-template-columns:minmax(0,220px) minmax(0,720px) !important;justify-content:center !important;
  gap:clamp(32px,5vw,80px) !important;align-items:start !important}
html body .bo-artikel-grid > *{width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
html body .bo-artikel-grid > :first-child{grid-column:2;grid-row:1}
html body .bo-artikel-grid > :last-child{grid-column:1;grid-row:1}
@media (max-width:900px){
  html body .bo-artikel-grid,
  html body #page-container .bo-artikel-grid{grid-template-columns:minmax(0,1fr) !important}
  html body .bo-artikel-grid > :first-child{grid-column:1}
  html body .bo-artikel-grid > :last-child{display:none !important}
}

/* 24.3 Verzeichnis ohne Kasten: Linie links, aktueller Abschnitt gold */
html body .bo-artikel-toc > .et_pb_module{padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important}
html body .bo-artikel-toc ul,html body .bo-artikel-toc ol{gap:0 !important}
html body .bo-artikel-toc a::before{content:none !important}
html body .bo-artikel-toc li a{display:block !important;padding:7px 0 7px 14px !important;
  border-left:2px solid var(--bo-line) !important;font-size:14.5px;line-height:1.4;transition:color .2s,border-color .2s}
html body .bo-artikel-toc [class*="active"] > a,
html body .bo-artikel-toc a[class*="active"]{border-left-color:var(--bo-gold) !important;color:var(--bo-ink) !important;font-weight:600 !important}

/* 24.4 Autorbox am Ende des Textes (Shortcode [bo_autorbox]) */
.bo-autorbox{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;
  margin:44px 0 0;padding-top:24px;border-top:1px solid var(--bo-line)}
.bo-autorbox .init{width:56px;height:56px;border-radius:9999px;background:var(--bo-muted);display:flex;
  align-items:center;justify-content:center;font-size:17px;font-weight:800;color:var(--bo-text-2)}
.bo-autorbox > div{display:flex;flex-direction:column;gap:6px}
.bo-autorbox b{font-size:16px;font-weight:700;color:var(--bo-ink)}
.bo-autorbox p{margin:0;font-size:15px;line-height:1.55;color:var(--bo-text-2)}
.bo-autorbox a{font-size:14.5px;font-weight:600;color:var(--bo-gold-text)}

/* 24.5 Weiterlesen: drei gleiche Karten (Blog-Modul, Klasse bo-blog-weiter) */
.bo-blog-weiter .et_pb_blog_posts{display:contents !important}
.bo-blog-weiter .et_pb_ajax_pagination_container{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(16px,2vw,24px)}
.bo-blog-weiter .et_pb_post{display:flex;flex-direction:column;margin:0 !important;padding:0 !important;
  background:var(--bo-card);border:1px solid var(--bo-line);border-radius:var(--bo-radius);overflow:hidden;transition:border-color .25s}
.bo-blog-weiter .et_pb_post:hover{border-color:var(--bo-gold)}
.bo-blog-weiter .entry-featured-image-url{order:0;display:block;aspect-ratio:16/10;overflow:hidden;margin:0 !important;background:#E9DFC6}
.bo-blog-weiter .entry-featured-image-url img{width:100%;height:100%;object-fit:cover;display:block}
.bo-blog-weiter .post-meta{order:1;display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 !important;
  padding:18px 20px 0 !important;font-size:0 !important;line-height:1.4 !important}
.bo-blog-weiter .post-meta>span,
.bo-blog-weiter .post-meta a{font-size:12px !important;font-weight:600;color:var(--bo-text-3) !important}
.bo-blog-weiter .post-meta .entry-categories{order:-1}
.bo-blog-weiter .post-meta .entry-categories a{color:var(--bo-gold-text) !important;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.bo-blog-weiter .entry-title{order:2;margin:0 !important;padding:8px 20px 0 !important;
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem) !important;line-height:1.3 !important}
.bo-blog-weiter .entry-title a{color:var(--bo-ink) !important;text-decoration:none}
.bo-blog-weiter .post-content{order:3;padding:8px 20px 20px;font-size:14.5px;line-height:1.5;color:var(--bo-text-2)}
.bo-blog-weiter .more-link{display:none !important}

@media print{.bo-blog-weiter,.bo-artikel-toc,.bo-autorbox a,.bo-band-ink{display:none !important}}

/* ============================================================
   Block 25 — Startseite: dunkler Hero (4. Oktober 2026)
   Quelle: divi/37-startseite-hero.css — ans ENDE von css/beeond-divi.css
   Der helle Schleier .bo-hero::after stammt vom alten hellen Hero.
   Der Hero v9 ist dunkel (Hintergrundbild + Divi-Verlauf). Ohne diese
   Zeile legt sich ein beiger Schleier über das Foto, sobald die Klasse
   bo-hero an der Sektion wieder greift.
   ============================================================ */
html body .bo-hero::after{content:none !important}

/* ============================================================
   Block 26 — Startseite, Nachprüfung (4. Oktober 2026, Abend)
   Quelle: divi/38-startseite-runde2.css — ans ENDE von css/beeond-divi.css
   Ursache für 26.1 und 26.2: Divi 5 setzt Spaltenbreiten und Row-Abstände
   mit !important und höherer Spezifität als unsere Klassen-Regeln.
   Nur bo-auto-220 hatte schon eine Regel mit doppelter Klasse, darum
   füllten die vier Definition-Kacheln die Breite, Journal und FAQ nicht.
   ============================================================ */

/* 26.1 Raster-Rows: Spalten füllen ihre Zelle (Journal, FAQ, Vertrauen, Umstieg, Vereine, Preise) */
html body .et_pb_row:is([class*="bo-auto-"],.bo-split-5-7,.bo-split-7-5,.bo-preiskarten,.bo-kopfzeile) > .et_pb_column{
  width:auto !important;max-width:none !important;margin:0 !important;min-width:0}

/* 26.2 Definition: Abstand und Linie über den vier Kacheln */
html body .et_pb_row.bo-linie-oben.bo-linie-oben{margin-top:clamp(40px,5vw,72px) !important;
  padding-top:clamp(28px,3vw,40px) !important;border-top:1px solid rgba(33,28,21,.12) !important}

/* 26.3 Das Hero-Gerät ragt in die Definition: Platz oben (Klasse an der Definition-SEKTION) */
html body .bo-sec-nach-hero.bo-sec-nach-hero{padding-top:clamp(80px,11vw,160px) !important}

/* 26.4 Hero: Vertrauenszeile auf jeder Breite linksbündig */
html body .bo-hero .bo-trust,
html body .bo-hero .bo-trust .et_pb_text_inner,
html body .bo-hero .bo-trust p{align-self:flex-start !important;text-align:left !important;justify-content:flex-start !important}

/* 26.5 Preise: vier Karten nebeneinander, 2 × 2 bis 1050 px, eine unter 560 px */
html body .et_pb_row.bo-preiskarten.bo-preiskarten{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(16px,2vw,24px) !important;align-items:stretch !important;height:auto !important}
html body .et_pb_row.bo-preiskarten.bo-preiskarten > .et_pb_column{height:auto !important}
@media (max-width:1050px){html body .et_pb_row.bo-preiskarten.bo-preiskarten{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:560px){html body .et_pb_row.bo-preiskarten.bo-preiskarten{grid-template-columns:minmax(0,1fr) !important}}

/* 26.6 Funktionen-Tabs auf dem Handy: 2 × 2 Kacheln statt seitlich scrollen */
@media (max-width:640px){
  html body .bo-tabs .et_pb_tabs_controls{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;
    overflow:visible !important;padding:0 !important;margin:0 0 20px !important;background:transparent !important;border:0 !important;
    width:100% !important;max-width:none !important}
  html body .bo-tabs .et_pb_tabs_controls li{margin:0 !important;border:1px solid var(--bo-line) !important;
    border-radius:var(--bo-radius) !important;background:var(--bo-card) !important}
  html body .bo-tabs .et_pb_tabs_controls li a{display:flex !important;align-items:center;justify-content:center;min-height:48px;height:100%;
    padding:8px 10px !important;white-space:normal !important;text-align:center;font-size:14.5px !important;line-height:1.25 !important;
    box-shadow:none !important;background:transparent !important}
  html body .bo-tabs .et_pb_tabs_controls li.et_pb_tab_active{background:var(--bo-ink) !important;border-color:var(--bo-ink) !important}
  html body .bo-tabs .et_pb_tabs_controls li.et_pb_tab_active a{color:var(--bo-ink-fg) !important}
}

/* ============================================================
   Block 27 — Prüfung der Screenshots (5. Oktober 2026)
   Quelle: divi/39-pruefung-0510.css — ans ENDE von css/beeond-divi.css
   ============================================================ */

/* 27.1 Fliesstext in Hanken Grotesk, mit Ersatzschriften.
   Die Divi-Fliesstextschrift greift nicht; ohne Ersatz zeigt der Browser Times. */
html body{font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
html body :is(p,li,dd,dt,td,th,label,input,textarea,select,button,blockquote,figcaption,small,address,
  .et_pb_text_inner,.et_pb_post_content,.post-content,.post-meta,.et_pb_toggle_content,.rank-math-breadcrumb,.wpml-ls){
  font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important}

/* 27.2 Links im Fliesstext gold statt Divi-Blau (#2EA3F2) */
html body .et_pb_text_inner a:not([class]){color:var(--bo-gold-text);text-underline-offset:3px}
html body .et_pb_text_inner a:not([class]):hover{color:var(--bo-ink)}
html body .bo-band-ink .et_pb_text_inner a:not([class]){color:var(--bo-gold)}
html body .bo-band-ink .et_pb_text_inner a:not([class]):hover{color:var(--bo-ink-fg)}

/* 27.3 Raster-Rows: Divis unsichtbares Clearfix-Element entfernen.
   Im Raster belegt es eine eigene Spalte: FAQ und Journal bekamen je 1/3,
   der Preis-Regler 1/2 der Breite. */
html body .et_pb_row:is([class*="bo-auto-"],.bo-split-5-7,.bo-split-7-5,.bo-preiskarten,.bo-kopfzeile,.bo-artikel-grid)::before,
html body .et_pb_row:is([class*="bo-auto-"],.bo-split-5-7,.bo-split-7-5,.bo-preiskarten,.bo-kopfzeile,.bo-artikel-grid)::after{
  content:none !important;display:none !important}

/* 27.4 Menü auf der Startseite: Anker-Links nicht dauerhaft gold.
   WordPress markiert /#funktionen usw. als «aktuelle Seite». Gold nur per Scroll-Spy (bo-aktiv). */
html body.home .et-l--header li.current-menu-item:not(.bo-aktiv) > a[href*="#"]{color:var(--bo-ink) !important}
html body.home .et-l--header li.current-menu-item:not(.bo-aktiv):not(:hover) > a[href*="#"]::after{right:100% !important}

/* 27.5 Einzelbeitrag: Titel, Rubrik, Lead und Text wie Mockup */
html body.single-post #page-container :is(.bo-artikel-kopf,.et_pb_post_title) :is(h1,h2,.entry-title){
  margin:0 !important;max-width:26ch;font-size:clamp(2rem,1.3rem + 2.8vw,3.5rem) !important;line-height:1.06 !important;
  font-weight:700 !important;letter-spacing:-.035em !important;color:var(--bo-ink) !important;text-wrap:balance}
html body.single-post .et-l--body .bo-rubrik :is(p,a,.et_pb_text_inner){font-size:13.5px !important;font-weight:600 !important;
  letter-spacing:.06em !important;text-transform:uppercase;color:var(--bo-gold-text) !important;text-decoration:none}
html body.single-post #page-container .bo-lead :is(p,.et_pb_text_inner){font-size:clamp(1.125rem,1.03rem + .45vw,1.375rem) !important;
  line-height:1.55 !important;color:var(--bo-ink) !important;max-width:60ch}
html body.single-post #page-container .bo-artikel-grid .bo-recht{max-width:none !important}
html body.single-post #page-container .bo-artikel-grid .bo-recht :is(p,li){font-size:clamp(1.0625rem,1rem + .25vw,1.1563rem) !important;
  line-height:1.7 !important;color:var(--bo-ink) !important}
html body.single-post #page-container .bo-artikel-grid .bo-recht h2{margin:44px 0 14px !important;padding-top:0 !important;border-top:0 !important;
  font-size:clamp(1.375rem,1.15rem + .9vw,1.875rem) !important;font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.2 !important}
html body.single-post #page-container .bo-artikel-grid .bo-recht h2:first-child{margin-top:0 !important}

/* 27.6 Verzeichnis: die ganze Spalte bleibt per CSS stehen (Divi-«Fixiert» am Modul AUS).
   Divis Fixiert rechnet im Raster falsch und legt das Verzeichnis am Ende links ab. */
@media (min-width:901px){
  html body.single-post #page-container .bo-artikel-grid > :last-child{position:sticky !important;top:110px !important;align-self:start !important}
  html body.single-post :is(#page-container,#et-main-area,#main-content,.et-l--body,.et_builder_inner_content,.et_pb_section){
    overflow:visible !important;overflow-x:clip !important}
}

/* 27.7 «Weiterlesen» ausblenden, solange das Blog-Modul nichts findet */
html body .et_pb_section:has(.bo-blog-weiter .not-found-title){display:none !important}

/* 27.8 Footer: SVG-Logo mit fester Breite, Telefonnummer so gross wie die Zeile */
html body .et-l--footer .et_pb_image img[src$=".svg"]{width:112px !important;height:auto !important}
html body .et-l--footer .bo-footer-klein a{font-size:inherit !important}

/* ============================================================
   Block 28 — Livegang (5. Oktober 2026)
   Quelle: divi/40-livegang.css — ans ENDE von css/beeond-divi.css, NACH Block 27.
   Grundlage: Beeond UI nach der Kontrast-Runde (FINDINGS #369).
   Die Hex-Werte in den Blöcken 1–27 sind schon ersetzt
   (#A6680F → #965D0C, #938A7B → #706859). Dieser Block bringt die
   neuen Tokens, Bewegung, Fokus und die Handy-Feinheiten.
   ============================================================ */

/* 28.1 Tokens: neu aus dem Design-System */
:root{
  --bo-gold-text:#965D0C;          /* AA auf Seite (4,6 : 1) und Karte */
  --bo-text-3:#706859;             /* dritte Textstufe, jetzt AA */
  --bo-ok-text:#49752F;            /* Status als TEXT — die kräftigen Töne nur für Punkte und Balken */
  --bo-warn-text:#8F5A00;
  --bo-critical-text:#B22C1F;
  --bo-dormant-text:#6B6356;
  --bo-ring:#965D0C;
  --bo-focus:rgba(150,93,12,.35);
  --bo-dur-fast:.2s;--bo-dur-medium:.32s;--bo-dur-slow:.55s;
  --bo-ease-spring:cubic-bezier(.32,.72,0,1);
  --bo-elev-3:0 12px 30px rgba(0,0,0,.22);
}

/* 28.2 Status als Text: die -text-Geschwister (vorher 3,2 : 1) */
html body :is(.bo-spar-hinweis,.bo-stat span,.bo-erkannt dd.ok,.bo-demo-felder b.ok,.bo-badge--ok){color:var(--bo-ok-text)}
html body .fluentform :is(.ff-message-success,.ff_submit_success){color:var(--bo-ok-text)}
html body :is(.bo-badge--critical,.bo-demo.is-rec .bo-demo-zeit){color:var(--bo-critical-text)}
html body .bo-badge--warn{color:var(--bo-warn-text)}

/* 28.3 Fokus wie in der App: feste Linie + weicher Schein. Nur bei Tastatur. */
html body :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--bo-ring) !important;outline-offset:2px;box-shadow:0 0 0 5px var(--bo-focus)}
html body :is(.bo-band-ink,.bo-hero,.et-l--footer,.bo-sticky-sec,.bo-form-dunkel) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--bo-gold) !important;box-shadow:0 0 0 5px rgba(220,166,75,.3)}
html body :is(a,button,summary):focus:not(:focus-visible){outline:none}
::selection{background:rgba(220,166,75,.35);color:inherit}

/* 28.4 Einblenden beim Scrollen — sicher für Suchmaschinen und Screenshots.
   Grundzustand: alles sichtbar. Nur was beim Laden UNTER dem Bildschirm liegt,
   bekommt vom Skript bo-rv-warte und blendet ein, sobald es erscheint.
   Bots, «Bewegung reduzieren» und Drucken: nie versteckt. Ersetzt die
   alte bo-reveal-Regel (die Klasse bleibt gültig, am Builder nichts ändern). */
html body .bo-reveal{opacity:1;transform:none}
html.bo-rv-ok body .bo-rv-warte{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity var(--bo-dur-slow) var(--bo-ease) var(--bo-rv-d,0s),transform var(--bo-dur-slow) var(--bo-ease-spring) var(--bo-rv-d,0s)}
html.bo-rv-ok body .bo-rv-warte.bo-rv-da{opacity:1;transform:none}
@media print{html body .bo-rv-warte{opacity:1 !important;transform:none !important}}

/* 28.5 Divi-Modul-Animationen aus: sie blenden Inhalte bis zum Scrollen aus
   (leere Flächen in Screenshots und bei Bots). Die Bewegung macht 28.4. */
html body .et-l--body :is(.et_animated,[class*="et_pb_animation_"]){opacity:1 !important;animation:none !important;transform:none !important}

/* 28.6 Leichte Rückmeldung bei Zeiger und Tippen */
html body #page-container .et_pb_button{transition:background-color var(--bo-dur-fast) var(--bo-ease),color var(--bo-dur-fast) var(--bo-ease),
  border-color var(--bo-dur-fast) var(--bo-ease),transform var(--bo-dur-fast) var(--bo-ease) !important}
html body #page-container .et_pb_button:active{transform:scale(.98)}
@media (hover:hover){
  html body :is(.bo-blog-archiv,.bo-blog-weiter,.bo-blog-mix) .et_pb_post{
    transition:border-color var(--bo-dur-fast) var(--bo-ease),transform var(--bo-dur-medium) var(--bo-ease-spring),box-shadow var(--bo-dur-medium) var(--bo-ease)}
  html body :is(.bo-blog-archiv,.bo-blog-weiter,.bo-blog-mix) .et_pb_post:hover{transform:translateY(-3px);box-shadow:var(--bo-elev-2)}
  html body :is(.bo-blog-archiv,.bo-blog-weiter,.bo-blog-mix) .entry-featured-image-url img{transition:transform .7s var(--bo-ease-spring)}
  html body :is(.bo-blog-archiv,.bo-blog-weiter,.bo-blog-mix) .et_pb_post:hover .entry-featured-image-url img{transform:scale(1.035)}
}
html body .et_pb_text_inner a:not([class]){text-decoration-color:rgba(150,93,12,.35);transition:color var(--bo-dur-fast) var(--bo-ease),text-decoration-color var(--bo-dur-fast) var(--bo-ease)}
html body .et_pb_text_inner a:not([class]):hover{text-decoration-color:currentColor}

/* Reiter-Inhalt blendet beim Wechsel weich ein (Divi-Tabs, Klasse bo-tabs) */
@keyframes bo-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html body .bo-tabs .et_pb_all_tabs > .et_pb_active_content{animation:bo-ein var(--bo-dur-medium) var(--bo-ease) both}

/* FAQ-Seite: Antworten klappen weich auf (Chrome, Edge; Safari folgt — sonst wie bisher sofort) */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  html body details.bo-faq::details-content{block-size:0;overflow:hidden;
    transition:block-size var(--bo-dur-medium) var(--bo-ease),content-visibility var(--bo-dur-medium) allow-discrete}
  html body details.bo-faq[open]::details-content{block-size:auto}
}

/* 28.7 Handy */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body{overflow-x:clip;-webkit-tap-highlight-color:rgba(220,166,75,.18)}
@media (max-width:760px){
  /* Lange Wörter (Tierarzneimittelverordnung) trennen statt überlaufen */
  html body .et-l--body :is(h1,h2,h3,h4,p,li,dd,td,th){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
  /* iOS zoomt in Felder unter 16 px hinein */
  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px !important}
  /* Tippziele ≥ 44 px (Beeond UI) — Footer und Sprachwahl */
  html body .et-l--footer :is(.bo-footer-links a,li > a,.wpml-ls a){display:inline-flex !important;align-items:center;min-height:44px;padding-top:0 !important;padding-bottom:0 !important}
  html body .bo-menu-ov-lang a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* Sticky-Leiste: über dem Home-Balken des iPhone */
html body .bo-sticky-sec.bo-sticky-sec{padding-bottom:max(0px,env(safe-area-inset-bottom)) !important}

/* 28.8 Sprunglink «Zum Inhalt» (setzt functions.php) */
html body .bo-skip{position:absolute;left:12px;top:-200px;z-index:100000;padding:12px 18px;background:var(--bo-ink);color:var(--bo-ink-fg) !important;
  border-radius:var(--bo-radius);font-size:15px;font-weight:600;text-decoration:none;transition:top var(--bo-dur-fast) var(--bo-ease)}
html body .bo-skip:focus{top:12px;left:12px}

/* 28.9 Drucken: ohne Kopf, Sticky-Leiste und Menü */
@media print{html body :is(.et-l--header,.bo-sticky-sec,.bo-menu-ov,.bo-skip){display:none !important}}

/* 28.10 Gerätebilder im Format des iPhone 17 Pro (Beeond Mobile: 402 × 874 pt).
   Screenshots aus dem Simulator sind 1206 × 2622 px — ohne Beschnitt. */
html body :is(.bo-phone,.bo-ios,.bo-andr,.bo-demo .bo-phone){aspect-ratio:1206/2622}

/* 28.11 «Anmelden» im Kopf (Text-Modul, Klasse bo-kopf-login) — erst ab 1241 px, darunter steht es im Vollbild-Menü */
html body .et-l--header .bo-kopf-login a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:15px;font-weight:600;
  color:var(--bo-ink) !important;text-decoration:none;transition:color var(--bo-dur-fast) var(--bo-ease)}
html body .et-l--header .bo-kopf-login a:hover{color:var(--bo-gold-text) !important}
html body .et-l--header .bo-kopf-login p{margin:0;padding:0}
@media (max-width:1240px){html body .et-l--header .bo-kopf-login{display:none !important}}