/* design.css – AtonActive fix-19 (+ fix-20: Abschnitt «So funktioniert's» der Startseite): helles Design (Seitenhintergrund dunkler als die hellen Kästen), Video über dem Hero,
   Ausblenden leerer Elemente (Inhalte-Editor) und alle Farben/Abstände als CSS-Variablen für den Tab «Design».
   Wird nach draft.css/style.css, nav.css (und faq.css) geladen. Die Werte der Variablen stehen in theme.css
   (wird vom Tab «Design» neu geschrieben); die Standardwerte hier gelten, falls theme.css fehlt. */
:root {
  --aa-bg: #ecdfd1; --aa-box: #f7f1ea; --aa-card: #fffcf8; --aa-accent: #f26520; --aa-accent-soft: #fde6db;
  --aa-text: #241812; --aa-heading: #241812; --aa-muted: #5f554e; --aa-link: #8a3a17;
  --aa-ticker: #8d6248; --aa-header: #111111; --aa-footer: #111111; --aa-sticky: #3a2c26;
  --aa-gap: 22px; --aa-radius: 22px; --aa-pad-y: 36px; --aa-pad-x: 28px; --aa-img-pad: 20px;
  /* bisherige Variablen von draft.css / style.css auf die neuen umlenken */
  --ink: var(--aa-text); --muted: var(--aa-muted); --orange: var(--aa-accent); --blue: var(--aa-link);
  --paper: var(--aa-bg); --white: var(--aa-card);
}
body { background: var(--aa-bg); color: var(--aa-text); }

/* Kopf, Laufband, Fuss, Kaufleiste: wie bisher, Farben über Variablen */
.ticker { background: var(--aa-ticker); }
.site-header, .site-header .drop .menu { background: var(--aa-header); }
@media (max-width: 768px) { .site-header .links { background: var(--aa-header); } }
.site-footer { background: var(--aa-footer); }
.site-header a[aria-current="page"], .site-header .drop .menu a[aria-current="page"], .site-footer a:hover, .site-footer .foot-withdraw a:hover { color: var(--aa-accent); }
.sticky { background: var(--aa-sticky); }

/* Akzentfarbe */
.btn { background: var(--aa-accent); }
.btn.dark { background: #111; }
.stars, .rv-req { color: var(--aa-accent); }
.legal input, .rv-consent input, .pform .pchk input { accent-color: var(--aa-accent); }
.adv-ico { background: var(--aa-accent-soft); color: var(--aa-accent); }
.more-toggle:hover, .review-more-btn:hover, .legal a:hover, .gw-link:hover span, .buy-rating:hover span, a.u:hover { color: var(--aa-accent); }
.more-toggle:focus-visible, .review-more-btn:focus-visible, .rvform input:focus-visible, .rvform textarea:focus-visible, .rv-row input:focus-visible + label, #buy .partner-field input:focus-visible { outline-color: var(--aa-accent); }
.kicker, .eyebrow, .more-toggle, .review-more-btn { color: var(--aa-link); }
a.u { color: var(--aa-link); }

/* Überschriften und Texte auf hellem Grund */
main h1, main h2, main h3, .legal-text h2, .legal-text h3, .aff h2, .wrap > h2, .steps h2 { color: var(--aa-heading); }
.hero p, .lead, .page > .lead, .page > p.lead, .page > :where(.sb-blk) > .lead, .page > :where(.sb-blk) > p.lead, .muted, .ship, #buy .price-note, .review-note, .review-head time, .buy-rating, .rvform label small, .rvform .rv-note, .rvform .rv-consent-more { color: var(--aa-muted); }
.rating-sum, .legal, .rv-box, .rvform input[type="text"], .rvform input[type="email"], .rvform textarea { color: var(--aa-text); }
.card, .step, .quote, .tile, .review, .rv-box { background: var(--aa-card); color: var(--aa-text); }
.adv .adv-card p, .review-tr p { color: var(--aa-text); opacity: .86; }
.legal-text, .aff .aff-lead, .aff-list, .aff-list b, .legal-text strong { color: var(--aa-text); }
.legal-text .legal-meta, .gw-figure figcaption, .wform .wnote, .page .muted { color: var(--aa-muted); }
.legal-text a, .page .muted a, .pform .pchk a, .aff-box a, .faq-a a.u { color: var(--aa-link); }
.legal-text a:hover, .page .muted a:hover, .pform .pchk a:hover, .faq-a a.u:hover { color: var(--aa-accent); }
.wform .req { color: var(--aa-link); }
.aff code { background: rgba(60, 35, 20, .08); }
.legal-text li::marker, .aff-list li::marker { color: var(--aa-accent); }
.aff-steps li::before { background: var(--aa-accent); }

/* ---------- Helle Kästen ---------- */
main.home { padding-bottom: var(--aa-gap); }
main.home > [data-section], main.home > [data-sid], main > .sec-page[data-section], main.sec-page[data-section] {
  background: var(--sec-bg, var(--aa-box));
  color: var(--aa-text);
  border-radius: var(--sec-radius, var(--aa-radius));
  padding: var(--sec-pt, var(--aa-pad-y)) var(--sec-px, var(--aa-pad-x)) var(--sec-pb, var(--aa-pad-y));
  margin: var(--sec-gap, var(--aa-gap)) auto 0;
  width: min(1120px, calc(100% - 32px));
  text-align: var(--sec-align);
  border: 0;
}
/* Unterseiten: Inhalt in einem hellen Kasten (Rechtstexte, Kontakt, Partner, Bestellung, Widerruf) */
main > .sec-page[data-section] { max-width: 860px; margin-bottom: 40px; }
main.sec-page[data-section] { margin-bottom: 40px; }
main.sec-page > .hero, main.sec-page > :where(.sb-blk) > .hero { background: transparent; padding: 0 0 8px; margin: 0; border-radius: 0; width: auto; }
.page h1 { margin-top: 6px; }
@media (max-width: 600px) {
  main.home > [data-section], main.home > [data-sid], main > .sec-page[data-section], main.sec-page[data-section] {
    padding-left: min(var(--sec-px, var(--aa-pad-x)), 20px); padding-right: min(var(--sec-px, var(--aa-pad-x)), 20px);
    padding-top: min(var(--sec-pt, var(--aa-pad-y)), 30px); padding-bottom: min(var(--sec-pb, var(--aa-pad-y)), 30px);
  }
}
/* FAQ: Fragen-Kasten folgt den Variablen (eigene Standard-Abstände) */
body.faq-page { background: var(--aa-bg); color: var(--aa-text); }
.faq-page .kicker { color: var(--aa-link); }
.faq-page h1, .faq-page h2 { color: var(--aa-heading); }
.faq-box[data-section] { background: var(--sec-bg, var(--aa-box)); color: var(--aa-text); border-radius: var(--sec-radius, 16px); padding: var(--sec-pt, 6px) var(--sec-px, 28px) var(--sec-pb, 6px); margin-top: var(--sec-gap, 0); text-align: var(--sec-align); }
.faq-a p { color: var(--aa-text); }
.faq-page .faq-contact { background: var(--aa-box); }
.faq-ico::before, .faq-ico::after { background: var(--aa-accent); }
.faq-js .faq-q button[aria-expanded="true"] .faq-ico { background: var(--aa-accent); border-color: var(--aa-accent); }
@media (hover: hover) { .faq-q button:hover { color: var(--aa-link); } }
@media (max-width: 768px) { .faq-box[data-section] { padding: var(--sec-pt, 2px) min(var(--sec-px, 18px), 18px) var(--sec-pb, 2px); text-align: left; } }

/* ---------- Bilder in hellen Kästen: Abstand zum Rand (Punkt 5) ---------- */
.stage { background: var(--aa-bg); }
#buy .stage { padding: var(--aa-img-pad); }
.stage img { inset: var(--aa-img-pad); width: calc(100% - 2 * var(--aa-img-pad)); height: calc(100% - 2 * var(--aa-img-pad)); }
.stage video:where([data-edit-img]) { inset: var(--aa-img-pad); width: calc(100% - 2 * var(--aa-img-pad)); height: calc(100% - 2 * var(--aa-img-pad)); }
.step { padding: calc(var(--aa-img-pad) * .8); }
.step > img { border-radius: 10px; margin: 0 0 12px; width: 100%; }
.step > video:where([data-edit-img]) { border-radius: 10px; margin: 0 0 12px; width: 100%; }
main.home > .hero .hero-img, main.sec-page > .hero > img, main.sec-page > :where(.sb-blk) > .hero > img { border-radius: 16px; }
main.sec-page > .hero > video:where([data-edit-img]), main.sec-page > :where(.sb-blk) > .hero > video:where([data-edit-img]) { border-radius: 16px; }

/* ---------- Video über dem Hero (Punkt 3) ---------- */
main.home > [data-section="video"] { padding: var(--sec-pt, 0) var(--sec-px, 0) var(--sec-pb, 0); overflow: hidden; background: var(--sec-bg, #1a1614); }
main.home > [data-section="video"]:has(> .vidframe[hidden]) { display: none; }
.vidframe { position: relative; line-height: 0; }
.vidframe video { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #1a1614; margin: 0 auto; }
.vid-sound, .vid-play, .vid-pause {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  font: 600 14px/1 Sora, sans-serif; color: #241812; background: rgba(255, 252, 248, .94);
  border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 12px rgba(30, 15, 5, .3);
}
.vid-sound { right: 14px; bottom: 14px; min-height: 44px; padding: 0 16px 0 12px; }
.vid-sound svg { display: block; flex: none; }
.vid-sound .ico-on, .vid-sound[aria-pressed="true"] .ico-off { display: none; }
.vid-sound[aria-pressed="true"] .ico-on { display: block; }
.vid-play { left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 56px; padding: 0 22px 0 16px; font-size: 16px; }
.vid-play[hidden], .vid-sound[hidden] { display: none; }
.vid-sound:hover, .vid-play:hover { background: #fff; }
.vid-sound:focus-visible, .vid-play:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }
.vidframe:not(.js-on) .vid-sound { display: none; }   /* ohne JavaScript: normale Video-Steuerung */
.vid-pause { left: 14px; bottom: 14px; width: 44px; height: 44px; justify-content: center; padding: 0; }
.vid-pause svg { display: block; }
.vid-pause .ico-play, .vid-pause.is-paused .ico-pause { display: none; }
.vid-pause.is-paused .ico-play { display: block; }
.vid-pause:hover { background: #fff; }
.vid-pause:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .vid-sound { right: 8px; bottom: 8px; min-height: 40px; padding: 0 12px 0 10px; font-size: 13px; }
  .vid-pause { left: 8px; bottom: 8px; width: 40px; height: 40px; }
}

/* ---------- Einstieg (Hero-Text) unter dem Video (Punkt 4) ---------- */
main.home > .hero { align-items: center; }
main.home > .hero:not(:has(> .hero-img:not([hidden]))) { grid-template-columns: 1fr; }
main.home > .hero:not(:has([data-edit]:not([hidden]), [data-edit-list]:not([hidden]), [data-edit-img]:not([hidden]))) { display: none; }
@media (max-width: 860px) { main.home > .hero .hero-img { display: none; } main.home > .hero { gap: 0; } }

/* ---------- Leer gespeicherte bzw. entfernte Elemente (Inhalte-Editor) ohne Lücke ausblenden ---------- */
[data-edit][hidden], [data-edit-html][hidden], [data-edit-block][hidden], [data-edit-list][hidden], [data-edit-img][hidden],
[data-edit-video][hidden], [data-edit-ticker][hidden] { display: none !important; }
.how-more:not(:has(> :not([hidden]))), .step:not(:has(> :not([hidden]))), .aff-steps li:not(:has(> :not([hidden]))),
.adv .adv-card:not(:has(> b:not([hidden]), > p:not([hidden]))), .faq-item:has(.faq-q [data-edit][hidden]),
.faq-contact:not(:has(> :not([hidden]))), .sticky:not(:has(.btn:not([hidden]))) { display: none !important; }
#buy .stage:not(:has(img:not([hidden]))) { display: none; }
#buy.product:not(:has(#slides img:not([hidden]))) { grid-template-columns: 1fr; }
.stage:not(:has(img:not([hidden]) ~ img:not([hidden]))) .slide-btn { display: none; }
.slide-btn[hidden] { display: none !important; }

/* ---------- fix-20: Startseite «So funktioniert's» – Überschrift, Einleitungstext ohne Kasten, Button ----------
   Die drei Schritt-Karten sind entfernt; Text und Button stehen zentriert im hellen Kasten.
   Textausrichtung aus dem Tab «Design» (Darstellung des Abschnitts) hat Vorrang, Standard ist zentriert. */
main.home > [data-section="how"] > .wrap { padding: clamp(10px, 2.4vw, 26px) 0; }
main.home > [data-section="how"] > .wrap > h2 { text-align: var(--sec-align, center); margin: 0 0 16px; text-wrap: balance; }
main.home > [data-section="how"] .how-intro {
  max-width: 640px; margin: 0 auto; text-align: var(--sec-align, center); text-wrap: pretty;
  font-size: clamp(1.1rem, 1.04rem + .25vw, 1.2rem); line-height: 1.6; color: var(--aa-text);
}
main.home > [data-section="how"] .how-more { margin: 26px 0 0; text-align: var(--sec-align, center); }
@media (max-width: 600px) {
  main.home > [data-section="how"] > .wrap > h2 { margin-bottom: 12px; }
  main.home > [data-section="how"] .how-more { margin-top: 22px; }
}

/* ====================================================================
   fix-21
   ==================================================================== */
/* 1) «So funktioniert's»: Bild im Einstieg deutlich höher, ganzes Produkt sichtbar (nicht zugeschnitten) */
main.sec-page[data-section="p-how"] > .hero > img[data-edit-img], main.sec-page[data-section="p-how"] > :where(.sb-blk) > .hero > img[data-edit-img] {
  width: 100%; height: clamp(420px, 38vw, 520px); object-fit: contain; object-position: center;
}
main.sec-page[data-section="p-how"] > .hero > video:where([data-edit-img])[data-edit-img], main.sec-page[data-section="p-how"] > :where(.sb-blk) > .hero > video:where([data-edit-img])[data-edit-img] {
  width: 100%; height: clamp(420px, 38vw, 520px); object-fit: contain; object-position: center;
}
@media (max-width: 860px) {
  main.sec-page[data-section="p-how"] > .hero > img[data-edit-img], main.sec-page[data-section="p-how"] > :where(.sb-blk) > .hero > img[data-edit-img] { height: min(86vw, 380px); }
main.sec-page[data-section="p-how"] > .hero > video:where([data-edit-img])[data-edit-img], main.sec-page[data-section="p-how"] > :where(.sb-blk) > .hero > video:where([data-edit-img])[data-edit-img] { height: min(86vw, 380px); }
}

/* 2) Bildrahmen pro Bild (Inhalte-Editor): Klein / Mittel / Gross / Original, Einpassen / Ausfüllen.
      Ohne Auswahl bleibt das bisherige Aussehen. !important, weil einzelne Bilder Höhen im style-Attribut haben. */
img[data-frame] { width: 100%; max-width: 100%; object-fit: contain !important; aspect-ratio: auto !important; }
video:where([data-edit-img])[data-frame] { width: 100%; max-width: 100%; object-fit: contain !important; aspect-ratio: auto !important; }
img[data-frame="s"] { height: 200px !important; }
video:where([data-edit-img])[data-frame="s"] { height: 200px !important; }
img[data-frame="m"] { height: 320px !important; }
video:where([data-edit-img])[data-frame="m"] { height: 320px !important; }
img[data-frame="l"] { height: 480px !important; max-height: none !important; }
video:where([data-edit-img])[data-frame="l"] { height: 480px !important; max-height: none !important; }
img[data-frame="o"] { height: auto !important; max-height: none !important; }
video:where([data-edit-img])[data-frame="o"] { height: auto !important; max-height: none !important; }
img[data-fit="contain"] { object-fit: contain !important; }
video:where([data-edit-img])[data-fit="contain"] { object-fit: contain !important; }
img[data-fit="cover"] { object-fit: cover !important; }
video:where([data-edit-img])[data-fit="cover"] { object-fit: cover !important; }
@media (max-width: 600px) {
  img[data-frame="s"] { height: 160px !important; }
video:where([data-edit-img])[data-frame="s"] { height: 160px !important; }
  img[data-frame="m"] { height: 240px !important; }
video:where([data-edit-img])[data-frame="m"] { height: 240px !important; }
  img[data-frame="l"] { height: 340px !important; }
video:where([data-edit-img])[data-frame="l"] { height: 340px !important; }
}
@media (max-width: 860px) { main.home > .hero .hero-img[data-frame] { display: block; } }

/* 3) Textausrichtung pro Feld (Inhalte-Editor) – hat Vorrang vor der Ausrichtung des Abschnitts (Tab «Design») */
.ta-left { text-align: left !important; }
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }
a.btn.ta-left, a.btn.ta-center, a.btn.ta-right { display: flex; width: fit-content; max-width: 100%; }
a.btn.ta-left { margin-left: 0; margin-right: auto; }
a.btn.ta-center { margin-left: auto; margin-right: auto; }
a.btn.ta-right { margin-left: auto; margin-right: 0; }
.faq-q button > .ta-left, .faq-q button > .ta-center, .faq-q button > .ta-right { flex: 1 1 auto; }
span.ta-left, span.ta-center, span.ta-right, b.ta-left, b.ta-center, b.ta-right { display: block; }

/* 4) Wiederholbare Einträge (Karten, Schritte, Fragen): ausgeblendeter letzter Eintrag */
[data-edit-item][hidden] { display: none !important; }

/* ====================================================================
   fix-22: Abschnitte (Seiten-Baukasten im Tab «Inhalte»)
   - Jeder Abschnitt hat data-sid (feste ID) – Haken für fix-23 (Farben/Abstände pro Abschnitt bzw. Kasten mit data-bid).
   - Bestehende Inhalte der Unterseiten sind in <div class="sb-blk"> gruppiert; diese Hülle ist unsichtbar (display: contents),
     das Aussehen bleibt unverändert.
   - Neue Abschnitte (<section class="sb …">) übernehmen das Aussehen der Website.
   ==================================================================== */
.sb-blk { display: contents; }
[data-sid][hidden] { display: none !important; }

/* Unterseiten: neue Abschnitte stehen im hellen Kasten der Seite (kein eigener Kasten) */
[data-sb-area]:not(.home) > section.sb {
  width: auto; max-width: none; margin: 34px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit;
}
/* FAQ-Seite: kein Seiten-Kasten -> neue Abschnitte bekommen einen eigenen hellen Kasten */
body.faq-page [data-sb-area] > section.sb {
  background: var(--aa-box); color: var(--aa-text); border-radius: 16px; padding: 24px 28px; margin: 22px 0 0;
}
@media (max-width: 600px) {
  [data-sb-area]:not(.home) > section.sb { margin-top: 28px; }
  body.faq-page [data-sb-area] > section.sb { padding: 20px 18px; }
}

/* gemeinsame Bausteine */
.sb h2 { margin: 0 0 12px; text-wrap: balance; }
.sb .sb-body > :first-child { margin-top: 0; }
.sb .sb-body > :last-child { margin-bottom: 0; }
.sb .sb-body p { margin: 0 0 .8em; }
.sb .sb-body ul, .sb .sb-body ol { margin: 0 0 .8em; padding-left: 22px; }
.sb .sb-body a, .sb-grid a, .sb-ticks a { color: var(--aa-link); }
.sb img { max-width: 100%; }
.sb video:where([data-edit-img]) { max-width: 100%; }

/* 2) Text + Bild (Bild links oder rechts; Handy: Bild oben) */
.sb-ti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sb-textimg[data-var="r"] .sb-media { order: 2; }
.sb-media img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sb-media video:where([data-edit-img]) { display: block; width: 100%; height: auto; border-radius: 16px; }
.sb-ti .sb-txt > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .sb-ti { grid-template-columns: 1fr; gap: 16px; }
  .sb-textimg[data-var="r"] .sb-media { order: 0; }
}

/* 3) Bild gross (+ Bildunterschrift) */
.sb-fig { margin: 0; }
.sb-fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sb-fig video:where([data-edit-img]) { display: block; width: 100%; height: auto; border-radius: 16px; }
.sb-fig figcaption { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--aa-muted); text-align: center; }

/* 4) Karten */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 6px; }
.sb-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; margin: 0; }
.sb-card > * { margin: 0; }
.sb-card img { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 12px; }
.sb-card video:where([data-edit-img]) { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 12px; }
.sb-card b { font-size: 17px; line-height: 1.3; }
.sb-card p { font-size: 15px; line-height: 1.5; }
.sb-card:not(:has(> :not([hidden]))) { display: none !important; }

/* 5) Liste / Vorteile */
.sb-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sb-ticks li { position: relative; padding-left: 32px; margin: 0; line-height: 1.5; }
.sb-ticks li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--aa-accent);
}
.sb-ticks li::after {
  content: ""; position: absolute; left: 7px; top: calc(.15em + 4px); width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* 6) Video */
.sb-video .vidframe { border-radius: 16px; overflow: hidden; background: #1a1614; }
.sb-video .vidframe video { max-height: 75vh; }
.sb-video h2 + .vidframe, .sb-video .vidframe + p { margin-top: 12px; }

/* 7) Button / Call-to-Action */
.sb-cta { text-align: center; }
.sb-cta .sb-in { max-width: 680px; margin: 0 auto; }
.sb-cta .sb-btn { margin: 20px 0 0; }
.sb-cta .btn { min-height: 48px; padding: 12px 22px; text-decoration: none; }

/* 8) FAQ in einem Abschnitt (gleiches Aufklapp-Verhalten wie die FAQ-Seite) */
.sb-faq .faq-box { margin-top: 6px; max-width: none; background: var(--aa-card); }

/* 9) Trennlinie / Abstand */
.sb-spacer { min-height: 1px; }
.sb-spacer .sb-gap { display: block; height: 32px; }
.sb-spacer[data-var^="s"] .sb-gap { height: 12px; }
.sb-spacer[data-var^="l"] .sb-gap { height: 72px; }
.sb-spacer[data-var$="line"] .sb-gap { background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; color: rgba(60, 35, 20, .22); }
main.home > section.sb-spacer { background: transparent; padding: 0; }
[data-sb-area]:not(.home) > section.sb-spacer, body.faq-page [data-sb-area] > section.sb-spacer { margin-top: 10px; background: none; padding: 0; }

/* ====================================================================
   fix-23: Videos in Bild-Plätzen, neue Elemente in Abschnitten
   (Farben/Abstände pro Abschnitt bzw. Kasten stehen in sections.css – automatisch erzeugt im Tab «Inhalte»)
   ==================================================================== */
video[data-sv] { display: block; max-width: 100%; }
:where(video[data-sv]) { height: auto; object-fit: cover; }   /* wie ein Bild: Höhe aus dem Seitenverhältnis (width/height), Rahmen-Regeln haben Vorrang */
.sv-host { position: relative; }
.sv-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(20, 14, 10, .74); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.sv-play:hover { background: rgba(20, 14, 10, .9); }
.sv-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(20, 14, 10, .6); }
.sv-play[hidden] { display: none; }
.sv-play svg { margin-left: 3px; }

/* neue Elemente (+ Element hinzufügen) */
.sb-x-img { display: block; width: 100%; height: auto; border-radius: 16px; margin: 16px 0; }
.sb-x-vid { margin: 16px 0; border-radius: 16px; overflow: hidden; background: #1a1614; }
.sb-x-vid video { display: block; width: 100%; height: auto; max-height: 75vh; }
h2[data-edit*="-x"], h3[data-edit*="-x"] { margin: 18px 0 8px; }
p[data-edit-html*="-x"] { margin: 0 0 .8em; }
.sb-btn { margin: 16px 0 0; }
.sb-btn .btn { text-decoration: none; }
.sb-ticks[data-edit-list*="-x"] { margin: 12px 0; }
.sb-btn:not(:has(> :not([hidden]))), .sb-media:not(:has(> :not([hidden]))), .sb-txt:not(:has(> :not([hidden]))) { display: none; }
.sb-ti > :only-child, .sb-ti:has(> :not(:has(> :not([hidden])))) > :has(> :not([hidden])) { grid-column: 1 / -1; }
.sb-card > .sb-btn, .step > .sb-btn { margin-top: 4px; }

/* ===== fix-24: leere Kästen und Bereiche nicht anzeigen ===== */
/* vom Editor automatisch ausgeblendet (alle Felder leer) bzw. Listen-Bereich ohne Einträge */
[data-autohide][hidden], [data-edit-items][hidden], [data-edit-item][hidden] { display: none !important; }
/* Rückfall im Browser: Listen-Bereich ohne sichtbaren Eintrag (z. B. leerer heller Kasten) */
[data-edit-items]:not(:has([data-edit-item]:not([hidden]))) { display: none !important; }
/* Rückfall: Kasten-Eintrag, dessen Inhalte alle ausgeblendet sind */
[data-edit-item]:not([data-edit]):not([data-edit-html]):not([data-edit-block]):not([data-edit-list]):has(> *):not(:has(> :not([hidden]))) { display: none !important; }
/* nur noch ein sichtbarer Teil im zweispaltigen Detail-Bereich -> ganze Breite */
.product:not(#buy):not(:has(> :not([hidden]) ~ :not([hidden]))) { grid-template-columns: 1fr; }

/* ====================================================================
   fix-26: Unterseiten – jeder Abschnitt ist ein eigener heller Kasten (wie auf der Startseite)
   - Der Seiten-Bereich (data-sb-area, bisher EIN grosser heller Kasten) ist jetzt nur noch eine unsichtbare Hülle
     (Breite wie bisher); jeder Abschnitt darin (data-sid: Seitenkopf, bisherige Inhalte, neue Vorlagen) ist ein Kasten.
   - Farben/Abstände aus dem Tab «Design»: Kasten-Farbe, Eckenradius, Innenabstände, «Abstand zwischen den Kästen»;
     die Einstellungen der Seite («So funktioniert's», «Kontakt» …) gelten für jeden ihrer Kästen.
   - «Gestaltung» pro Abschnitt (sections.css, :root [data-sid=…], Spezifität 0,5,0) hat weiterhin Vorrang – darum stehen
     die Hüllen-Selektoren hier in :where() (Spezifität der Kasten-Regel 0,4,0 bzw. 0,4,2).
   - Trennlinie/Abstand: kein eigener Kasten, nur zusätzlicher Abstand zwischen den Kästen (Linie unsichtbar).
   - Karten/Schritte innerhalb eines Abschnitts bleiben innere Karten.
   ==================================================================== */
main.sec-page[data-section][data-sb-area], main > .sec-page[data-section][data-sb-area] {
  background: none; padding: 0; border-radius: 0; border: 0; margin-top: 0; margin-bottom: 40px;
}
:where(main.sec-page, main > .sec-page)[data-section][data-sb-area] > [data-sid]:not(.sb-spacer),
body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb:not(.sb-spacer) {
  display: block; box-sizing: border-box; width: auto; max-width: none; min-width: 0;
  background: var(--sec-bg, var(--aa-box)); color: var(--aa-text);
  border: 0; border-radius: var(--sec-radius, var(--aa-radius));
  padding: var(--sec-pt, var(--aa-pad-y)) var(--sec-px, var(--aa-pad-x)) var(--sec-pb, var(--aa-pad-y));
  margin: var(--sec-gap, var(--aa-gap)) 0 0;
  text-align: var(--sec-align);
}
@media (max-width: 600px) {
  :where(main.sec-page, main > .sec-page)[data-section][data-sb-area] > [data-sid]:not(.sb-spacer),
  body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb:not(.sb-spacer) {
    padding-left: min(var(--sec-px, var(--aa-pad-x)), 20px); padding-right: min(var(--sec-px, var(--aa-pad-x)), 20px);
    padding-top: min(var(--sec-pt, var(--aa-pad-y)), 30px); padding-bottom: min(var(--sec-pb, var(--aa-pad-y)), 30px);
  }
}
/* erster/letzter Inhalt im Kasten ohne zusätzlichen Aussenabstand */
:is(main.sec-page[data-section][data-sb-area] > [data-sid], main > .sec-page[data-section][data-sb-area] > [data-sid], body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb) > :first-child,
:is(main.sec-page[data-section][data-sb-area] > [data-sid], main > .sec-page[data-section][data-sb-area] > [data-sid], body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb) > [hidden]:first-child + *,
:is(main.sec-page[data-section][data-sb-area] > [data-sid], main > .sec-page[data-section][data-sb-area] > [data-sid], body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb) > [hidden]:first-child + [hidden] + * { margin-top: 0; }
:is(main.sec-page[data-section][data-sb-area] > [data-sid], main > .sec-page[data-section][data-sb-area] > [data-sid], body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb) > :last-child { margin-bottom: 0; }
main.sec-page[data-section][data-sb-area] > [data-sid] > .hero:last-child { padding-bottom: 0; }
/* Trennlinie / Abstand: nur Abstand zwischen den Kästen */
:where(main.sec-page, main > .sec-page)[data-section][data-sb-area] > section.sb-spacer, :where(body.faq-page main)[data-sb-area] > section.sb-spacer {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
:is(main.sec-page[data-section][data-sb-area], main > .sec-page[data-section][data-sb-area], body.faq-page main[data-sb-area]) > .sb-spacer .sb-gap { background: none; }
/* FAQ-Seite: Seitenkopf als Kasten, Fragen- und Kontakt-Kasten mit dem Abstand aus dem Tab «Design» */
body.faq-page main.page[data-sb-area] { padding-top: 0; }
body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"], body.faq-page main[data-sb-area] > section.sb:not(.sb-spacer) { max-width: 860px; }
body.faq-page main[data-sb-area] > [data-sid][data-sb-lock="head"] h1 { margin-bottom: 0; }
body.faq-page main[data-sb-area] > .sb-blk > .faq-box[data-section] { margin-top: var(--sec-gap, var(--aa-gap)); }
body.faq-page main[data-sb-area] > .sb-blk > .faq-contact { margin-top: var(--aa-gap); }

/* ===== fix-28: Kaufleiste unten immer im Vordergrund =====
   Über Video-Knöpfen («Ton an», Pause/Play), Video-Abschnitten, Slider-Pfeilen und Karten (z-index 2–3).
   Kopfbereich mit Menü (z-index 50), Untermenüs (60) und Laufband (51) bleiben darüber; Dialoge liegen ohnehin ganz oben. */
.sticky { z-index: 40; }
.sticky[hidden] { display: none !important; }   /* im Tab «Inhalte» ausgeblendet */