/* ═══ ratgeber.css · Ratgeber-Hub, -Artikel und AirTag-Vergleich in der Tara-Schale ═══
   Bewusst leicht (Entscheidung Nico, 02.10.2026): Markup, Überschriften-Hierarchie, Anker (#schritt-N), Schema und Daten der
   Artikel bleiben unverändert – die Seiten sind SEO-/GEO-Einstiege. Diese Datei übersetzt nur die bisherigen Bausteine
   (section, container, rg-…) in Tokens und Schrift der Startseite (lädt nach home.css). Keine Story-Animationen: body.rg-page
   trägt nicht die Klasse .page, home.js baut hier nur Nav, Finder-Bar, Footer und das CTA-Band. */


/* ═══ Grundraster ═══ Fixe Nav (+ Finder-Bar ab 768 px) liegt über dem Inhalt */
.rg-page main{ padding-top:calc(var(--nav-h) + var(--finder-h)); }
.rg-page .container{ width:var(--content); margin-inline:auto; }
.rg-page .section{ padding-block:clamp(48px, 7vw, 88px); }
.rg-page .section-alt{ background:var(--surface-2); }
.rg-page .section-title{ margin:0 0 18px; color:var(--ink); text-wrap:balance;
  font:850 var(--fs-h2-sm)/1.08 var(--font-display); letter-spacing:-.02em; }
.rg-page strong{ color:var(--ink); }


/* ═══ Artikel-Kopf ═══ */
.rg-prose{ max-width:760px; margin:0 auto; }
.rg-bc{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 22px; font-size:var(--fs-small); line-height:1.4; color:var(--muted); }
.rg-bc a{ color:var(--muted); text-decoration:none; border-radius:4px; transition:color var(--t-hover) var(--ease-out); }
.rg-bc a:hover{ color:var(--gold-text); text-decoration:underline; text-underline-offset:3px; }
.rg-bc span{ color:var(--ink); font-weight:650; }
.rg-prose h1{ margin:0 0 22px; color:var(--ink); text-wrap:balance;
  font:900 clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem)/1.06 var(--font-display); font-stretch:var(--wide); letter-spacing:-.03em; }
.rg-prose h1:is(:lang(en), :lang(hu), :lang(es)){ letter-spacing:-.02em; }
/* Hervorhebung wie „Gefunden.“ der Startseite: Gold-Fläche, beim Umbruch je Zeile geschlossen */
.rg-page .lp-hl{ padding:0 .16em; border-radius:.14em; background:var(--gold); color:var(--on-gold);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.rg-prose p{ margin:0 0 18px; font-size:var(--fs-long); line-height:1.78; color:var(--body); text-wrap:pretty; }
.rg-prose p.rg-lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--ink); }


/* ═══ Schritte ═══ Nummer in der Gold-Wabe; der letzte Schritt (Vorbeugen mit Bee-ID) auf der Honig-Kachel */
.rg-steps{ counter-reset:rg; display:grid; gap:14px; margin:28px 0 0; }
.rg-step{ position:relative; padding:24px 24px 24px 84px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--nav-h) + var(--finder-h) + 24px); }
.rg-step::before{ counter-increment:rg; content:counter(rg); position:absolute; left:22px; top:20px; display:grid; place-items:center;
  width:42px; aspect-ratio:.866/1; clip-path:var(--hex); background:var(--gold); color:var(--on-gold);
  font:900 1.125rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
.rg-step h2{ margin:0 0 8px; color:var(--ink); text-wrap:balance;
  font:850 var(--fs-h3)/1.22 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; }
.rg-prose .rg-step p{ margin:0; font-size:var(--fs-body); line-height:1.72; color:var(--body); }
.rg-step:target{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow-sm); }
.rg-step.bee{ border-color:var(--gold); background:var(--tile-honey); }
.rg-step.bee::before{ background:var(--on-gold); color:var(--gold-hi); }   /* --on-gold ist modusfest dunkel */
@media (max-width:480px){
  .rg-step{ padding:66px 20px 22px; }
  .rg-step::before{ left:20px; top:18px; width:38px; }
}


/* ═══ Zusatzabschnitt im Artikel (z. B. Briefkasten-Hinweis in „Schlüssel gefunden“) ═══ */
.rg-postbox{ scroll-margin-top:calc(var(--nav-h) + var(--finder-h) + 24px); }
.rg-postbox + .rg-note{ margin-top:32px; }
.rg-inline-link{ color:var(--gold-text); font-weight:700; text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t-hover) var(--ease-out); }
@media (hover:hover){ .rg-inline-link:hover{ color:var(--ink); } }


/* ═══ Hinweis, Kosten ═══ */
.rg-note{ max-width:760px; margin:24px auto 0; padding:18px 22px; border-left:3px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--surface); box-shadow:var(--shadow-sm); font-size:var(--fs-card); line-height:1.72; color:var(--body); text-wrap:pretty; }
.section-alt .rg-note{ background:var(--surface); }


/* ═══ FAQ ═══ Optik der Startseiten-FAQ (Linien, „+“-Kreis), Markup unverändert */
.rg-faq{ max-width:760px; margin:26px auto 0; border-bottom:1px solid var(--border); interpolate-size:allow-keywords; }
.rg-faq details{ border-top:1px solid var(--border); }
.rg-faq details::details-content{ block-size:0; overflow:hidden;
  transition:block-size var(--t-screen) var(--ease-out), content-visibility var(--t-screen) allow-discrete; }
.rg-faq details[open]::details-content{ block-size:auto; }
.rg-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:18px 6px;
  list-style:none; cursor:pointer; color:var(--ink); text-wrap:balance; -webkit-tap-highlight-color:transparent;
  font:850 var(--fs-h3)/1.25 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; }
.rg-faq summary::-webkit-details-marker{ display:none; }
.rg-faq summary::marker{ content:""; }
.rg-faq summary:focus-visible{ outline-offset:-3px; border-radius:var(--r-sm); }
.rg-faq summary::after{ content:""; flex:none; width:32px; height:32px; border:1.5px solid var(--border-strong); border-radius:50%;
  background:linear-gradient(var(--gold-text), var(--gold-text)) 50% 50% / 12px 2px no-repeat,
             linear-gradient(var(--gold-text), var(--gold-text)) 50% 50% / 2px 12px no-repeat;
  transition:transform .25s var(--ease-out), background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.rg-faq details[open] summary::after{ transform:rotate(45deg); background-color:rgba(255,196,0,.16); border-color:var(--gold); }
@media (hover:hover){
  .rg-faq summary:hover::after{ background-color:rgba(255,196,0,.16); border-color:var(--gold-text); }
}
.rg-faq .rg-faq-a{ max-width:62ch; padding:0 6px 20px; font-size:var(--fs-body); line-height:1.72; color:var(--body); }


/* ═══ Weiterlesen ═══ Karten mit Pfeil-Wabe (wie die Ratgeber-Links der Startseite) */
.rg-related{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; max-width:760px; margin:0 auto; }
@media (min-width:700px){ .rg-related{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.rg-related a{ position:relative; display:block; height:100%; padding:20px 66px 20px 22px; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.rg-related a::after{ position:absolute; right:20px; top:50%; display:grid; place-items:center; width:28px; height:32px; margin-top:-16px;
  clip-path:var(--hex); background:var(--gold-text); color:var(--surface); font:800 14px/1 var(--font-display);
  content:"→"; content:"→" / ""; transition:transform var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .rg-related a:hover{ border-color:var(--gold-text); box-shadow:var(--shadow-sm); }
  .rg-related a:hover::after{ transform:translateX(3px); }
}
.rg-related a:active{ transform:scale(.98); }
.rg-related a:focus-visible{ outline-offset:3px; }
.rg-r-k{ font:800 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.rg-r-t{ margin-top:6px; font:850 1.0625rem/1.3 var(--font-display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }


/* ═══ Hub ═══ */
.rg-hub-head{ max-width:760px; text-align:center; }
.rg-hub-head .eyebrow{ justify-content:center; }
.rg-hub-h1{ margin:0 0 18px; color:var(--ink); text-wrap:balance;
  font:900 clamp(2.375rem, 1.2rem + 4vw, 4.25rem)/1.02 var(--font-display); font-stretch:var(--wide); letter-spacing:-.035em; }
.rg-hub-h1:is(:lang(en), :lang(hu), :lang(es)){ letter-spacing:-.02em; }
.rg-hub-intro{ max-width:46ch; margin:0 auto; font-size:var(--fs-lead); line-height:1.6; color:var(--body); text-wrap:pretty; }

.rg-hub-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; max-width:960px; margin:8px auto 0; }
@media (min-width:761px){ .rg-hub-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.rg-hub-card{ display:flex; flex-direction:column; padding:26px 26px 22px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-card); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
.rg-hub-k{ align-self:flex-start; margin-bottom:14px; padding:5px 12px; border:1px solid rgba(201,160,0,.35); border-radius:var(--r-pill);
  background:rgba(255,196,0,.12); font:800 11.5px/1.25 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-text); }
.rg-hub-t{ margin:0 0 10px; color:var(--ink); text-wrap:balance;
  font:850 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; }
.rg-hub-d{ flex:1; margin:0 0 18px; font-size:var(--fs-card); line-height:1.65; color:var(--body); }
.rg-hub-m{ font-size:var(--fs-small); font-weight:700; color:var(--muted); }
.rg-hub-arrow{ display:inline-block; margin-top:14px; font:800 var(--fs-small)/1.2 var(--font-body); color:var(--gold-text);
  transition:translate var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .rg-hub-card:hover{ translate:0 -4px; border-color:var(--gold); box-shadow:var(--shadow-md); }
  .rg-hub-card:hover .rg-hub-arrow{ translate:4px 0; }
}
.rg-hub-card:active{ transform:scale(.99); }
.rg-hub-card:focus-visible{ outline-offset:4px; }


/* ═══ § AirTag · Vergleichsseite (landing/airtag-alternative, body.aa-page) ═══
   Gleiche Haltung wie der Ratgeber: Markup und Texte wie bisher, nur die Bauteile in Tara-Tokens. */
.aa-page .text-center{ text-align:center; }
.aa-page .lp-hero{ position:relative; isolation:isolate; overflow-x:clip; padding:clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); }
.aa-page .lp-hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 60% at 86% 10%, rgba(255,196,0,.26), transparent 70%); }
.aa-page .lp-hero h1{ margin:0 0 22px; color:var(--ink); text-wrap:balance;
  font:900 clamp(2.5rem, 1.2rem + 4.4vw, 4.75rem)/1.02 var(--font-display); font-stretch:var(--wide); letter-spacing:-.035em; }
.aa-page .lp-hero-sub{ max-width:58ch; margin:0 0 30px; font-size:var(--fs-lead); line-height:1.6; color:var(--body); text-wrap:pretty; }
.aa-page .lp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.aa-page .lp-hero-price{ margin-top:14px; font-size:var(--fs-small); line-height:1.45; color:var(--muted); }
.aa-page .lp-trust-row{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.aa-page .lp-trust-row span{ display:inline-flex; align-items:center; gap:8px; font:700 var(--fs-small)/1.3 var(--font-body); color:var(--ink); }
.aa-page .lp-trust-row span::before{ content:""; flex:none; width:22px; aspect-ratio:.866/1; clip-path:var(--hex); background-color:var(--tile-honey);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat; }
.aa-page .section-label{ margin:0 0 14px; font:800 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.aa-page .lp-body{ margin:0 0 16px; font-size:var(--fs-long); line-height:1.75; color:var(--body); text-wrap:pretty; }
.aa-page .lp-body:last-child{ margin-bottom:0; }

/* Kurzantwort auf der Honig-Kachel */
.aa-short{ max-width:820px; margin:0 auto; padding:clamp(28px, 4vw, 44px); border:2px solid var(--gold); border-radius:var(--r-xl);
  background:var(--tile-honey); box-shadow:var(--shadow-lg); }

/* Vergleichstabelle in der Karte, Bee-ID-Spalte als Honig-Säule (wie auf der Schlüssel-Seite) */
.aa-page .lp-compare{ max-width:980px; margin:28px auto 0; overflow-x:auto; padding:8px 14px; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); -webkit-overflow-scrolling:touch; }
.aa-page .compare-table{ width:100%; min-width:620px; border-collapse:separate; border-spacing:0; font-size:var(--fs-card); line-height:1.35; }
.aa-page .compare-table th, .aa-page .compare-table td{ padding:15px 12px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--border); }
.aa-page .compare-table thead th{ font:800 var(--fs-small)/1.3 var(--font-body); color:var(--muted); vertical-align:bottom; }
.aa-page .compare-table thead small{ font-weight:650; }
.aa-page .compare-table tbody td:first-child{ text-align:left; font-weight:700; color:var(--ink); }
.aa-page .compare-table tr:last-child > *{ border-bottom:0; }
.aa-page .compare-table .bee-col{ background:var(--tile-honey); }
.aa-page .compare-table thead .bee-col{ border-radius:var(--r-md) var(--r-md) 0 0; font:850 1rem/1.2 var(--font-display); color:var(--ink); }
.aa-page .compare-table tr:last-child .bee-col{ border-radius:0 0 var(--r-md) var(--r-md); }
.aa-page .compare-table .bi-icon{ display:inline-block; vertical-align:middle; stroke-width:2.75; }   /* Reset macht SVGs zu Blöcken */
.aa-page .compare-table .check{ color:var(--gold-text); }
.aa-page .compare-table .cross{ color:var(--muted-2); }
.aa-price{ font:850 1rem/1.2 var(--font-display); color:var(--ink); }
.aa-price-sub{ display:inline-block; margin-top:4px; font:600 12px/1.3 var(--font-body); color:var(--body); }
.aa-note{ max-width:760px; margin:18px auto 0; font-size:var(--fs-small); line-height:1.65; font-style:italic; color:var(--muted); text-wrap:pretty; }
.aa-note--plain{ font-style:normal; color:var(--body); }

/* Wann was? Tracker-Karte neutral, Bee-ID-Karte auf Honig */
.aa-when{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; max-width:980px; margin:28px auto 0; }
@media (min-width:761px){ .aa-when{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.aa-card{ padding:clamp(24px, 3vw, 34px); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.aa-card.bee{ border:2px solid var(--gold); background:var(--tile-honey); box-shadow:var(--shadow-lg); }
.aa-card .aa-tag{ font:800 var(--fs-eyebrow)/1.3 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }
.aa-card h3{ margin:10px 0 12px; font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.aa-card ul{ margin:0; padding-left:20px; }
.aa-card li{ margin:6px 0; font-size:var(--fs-card); line-height:1.7; color:var(--body); }
.aa-card li::marker{ color:var(--gold-text); }


/* ═══ § Schlüsselfundservice + Schlüsselfundmarke (landing/schluesselfundservice, landing/schluesselfundmarke, body.sf-page) ═══
   SXO 03.10.2026: Bausteine der AirTag-Seite plus drei eigene – der Schlüssel-Weg (früher / seit 2025 / Bee-ID) als
   Spurenbild, der Anhänger-Check als Definitionsliste und das B2B-Anfrageformular in Tara-Tokens. */
.sf-stamp{ margin:18px 0 0; font-size:var(--fs-small); color:var(--muted); }
/* Lange Komposita („Schlüsselfundservice“) sprengen sonst auf 375 px die Zeile → deutsche Silbentrennung, etwas kleinere Untergrenze */
.sf-page :is(h1, h2, h3){ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
.sf-page .lp-hero h1{ font-size:clamp(2.125rem, 1rem + 4.4vw, 4.75rem); }
.sf-page .rg-step h3{ margin:0 0 8px; color:var(--ink); text-wrap:balance;
  font:850 var(--fs-h3)/1.22 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; }
:is(.sf-page, .aa-page) :is(.rg-note, .aa-note, .lp-body) a{ color:var(--gold-text); font-weight:700; text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t-hover) var(--ease-out); }
@media (hover:hover){ :is(.sf-page, .aa-page) :is(.rg-note, .aa-note, .lp-body) a:hover{ color:var(--ink); } }
.sf-page .compare-table .sf-cell-text{ font:700 var(--fs-small)/1.3 var(--font-body); color:var(--body); }

/* Der Schlüssel-Weg: drei Spuren. Neutral (bis 2024), gestrichelt mit Abbruch (seit 2025), Honig (Bee-ID). */
.sf-lanes{ display:grid; gap:16px; max-width:1060px; margin:30px auto 0; }
.sf-lane{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; padding:22px; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.sf-lane-k{ font:800 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sf-lane h3{ margin:6px 0 0; color:var(--ink); text-wrap:balance;
  font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; }
.sf-path{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.sf-path li{ position:relative; display:flex; align-items:center; gap:14px; font-size:var(--fs-card); line-height:1.45; color:var(--body); }
.sf-ico{ flex:none; display:grid; place-items:center; width:44px; aspect-ratio:.866/1; clip-path:var(--hex);
  background:var(--tile-wax); color:var(--ink); }
.sf-ico .bi-icon{ width:20px; height:20px; }
/* Verbinder: mobil senkrecht links an den Waben, ab 880 px waagerecht zwischen den Waben */
.sf-path li + li::before{ content:""; position:absolute; left:21px; top:-14px; height:14px; width:0; border-left:2px solid var(--border-strong); }
@media (min-width:880px){
  .sf-lane{ grid-template-columns:210px minmax(0, 1fr); align-items:center; gap:24px; padding:26px 28px; }
  .sf-path{ grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:0; }
  .sf-path li{ flex-direction:column; text-align:center; gap:10px; padding:0 10px; }
  .sf-path li + li::before{ left:calc(-50% + 30px); right:calc(50% + 30px); top:25px; width:auto; height:0; border-left:0; border-top:2px solid var(--border-strong); }
}
.sf-lane--broken{ border-style:dashed; border-color:var(--border-strong); background:transparent; box-shadow:none; }
.sf-lane--broken .is-cut .sf-ico{ background:var(--ink); color:var(--surface); }
.sf-lane--broken .is-cut span:last-child{ font-weight:750; color:var(--ink); }
.sf-lane--broken .is-off{ color:var(--muted); }
.sf-lane--broken .is-off .sf-ico{ background:var(--border-soft); color:var(--muted); }
.sf-lane--broken .is-off::before{ border-style:dashed !important; }
.sf-lane--bee{ border:2px solid var(--gold); background:var(--tile-honey); box-shadow:var(--shadow-lg); }
.sf-lane--bee .sf-lane-k{ color:var(--gold-text); }
.sf-lane--bee .sf-ico{ background:var(--gold); color:var(--on-gold); }
.sf-lane--bee li{ color:var(--ink); }
.sf-lane--bee li + li::before{ border-color:var(--gold-text); }

/* Anhänger-Check: Zeilen mit Haarlinie, Status als Chip */
.sf-check{ max-width:820px; margin:26px auto 0; border-bottom:1px solid var(--border); }
.sf-check-row{ display:grid; gap:8px; padding:22px 4px; border-top:1px solid var(--border); }
@media (min-width:760px){ .sf-check-row{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:28px; } }
.sf-check dt{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:var(--ink);
  font:850 var(--fs-h3)/1.25 var(--font-display); letter-spacing:-.02em; text-wrap:balance; }
.sf-check dd{ margin:0; font-size:var(--fs-body); line-height:1.72; color:var(--body); text-wrap:pretty; }
.sf-chip{ padding:5px 12px; border:1px solid rgba(201,160,0,.35); border-radius:var(--r-pill); background:rgba(255,196,0,.12);
  font:800 11.5px/1.25 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-text); }
.sf-chip--stop{ border-color:var(--ink); background:var(--ink); color:var(--surface); }

/* B2B-Brücke als Nachtfläche – der einzige dunkle Block der Seite, deshalb gut zu finden */
.sf-teaser{ display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; align-items:center; max-width:1060px; margin:0 auto;
  padding:clamp(24px, 4.4vw, 52px); border:1px solid var(--border); border-radius:var(--r-xl); background:var(--night); color:var(--on-night);
  box-shadow:var(--shadow-lg); }
.sf-teaser .btn{ white-space:normal; text-align:center; }
@media (min-width:900px){ .sf-teaser{ grid-template-columns:minmax(0, 1fr) auto; gap:40px; } }
.sf-teaser-k{ margin:0 0 10px; font:800 var(--fs-eyebrow)/1.3 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.sf-teaser-h{ margin:0 0 12px; color:var(--on-night); text-wrap:balance;
  font:900 var(--fs-h2-sm)/1.06 var(--font-display); font-stretch:var(--wide); letter-spacing:-.025em; }
.sf-teaser-p{ max-width:56ch; margin:0; font-size:var(--fs-long); line-height:1.7; color:var(--on-night-muted); text-wrap:pretty; }
@media (hover:hover){ .sf-teaser .btn:hover .arr{ transform:translateX(4px); } }

/* B2B-Hero: Text links, Beispielfotos rechts. Wechsel Unternehmen/Sportverein ohne JavaScript: die Radios stehen vor
   Bühne, Umschalter und Bildunterschrift (Geschwister-Selektoren). Das jeweils andere Foto ist auch für Screenreader weg. */
.sf-hero-grid{ display:grid; gap:36px; align-items:center; }
/* Neben dem Foto ist die Textspalte schmal: „Schlüsselfundmarken“ (Keyword der H1) soll trotzdem ungetrennt in eine Zeile passen */
.sf-b2b .lp-hero-text{ container-type:inline-size; }
.sf-b2b .lp-hero h1{ font-size:clamp(2.125rem, .6rem + 3.3vw, 3.5rem); font-size:clamp(1.875rem, 9.6cqi, 3.5rem); }   /* ≈ 10 em Wortbreite */
.sf-b2b .lp-hero h1 .lp-hl{ -webkit-hyphens:manual; hyphens:manual; white-space:nowrap; }
@media (min-width:1120px){ .sf-hero-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); gap:52px; } }
.sf-shot{ position:relative; justify-self:center; width:100%; max-width:640px; margin:0; }
.sf-shot-r{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.sf-shot-stage{ position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--tile-wax); box-shadow:var(--shadow-lg); }
.sf-shot-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden;
  transition:opacity var(--t-screen) var(--ease-out), visibility 0s linear var(--t-screen); }
#sf-shot-firma:checked ~ .sf-shot-stage .sf-shot-img--firma,
#sf-shot-verein:checked ~ .sf-shot-stage .sf-shot-img--verein{ opacity:1; visibility:visible;
  transition:opacity var(--t-screen) var(--ease-out), visibility 0s; }
.sf-shot-tabs{ display:flex; gap:4px; width:max-content; max-width:100%; margin:16px auto 0; padding:4px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow-sm); }
.sf-shot-tabs label{ display:inline-flex; align-items:center; min-height:40px; padding:8px 18px; border-radius:var(--r-pill);
  font:750 var(--fs-small)/1 var(--font-body); color:var(--body); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
@media (hover:hover){ .sf-shot-tabs label:hover{ background:rgba(255,196,0,.16); color:var(--ink); } }
.sf-shot-tabs label:active{ transform:scale(.97); }
#sf-shot-firma:checked ~ .sf-shot-tabs label[for="sf-shot-firma"],
#sf-shot-verein:checked ~ .sf-shot-tabs label[for="sf-shot-verein"]{ background:var(--gold); color:var(--on-gold); }
#sf-shot-firma:focus-visible ~ .sf-shot-tabs label[for="sf-shot-firma"],
#sf-shot-verein:focus-visible ~ .sf-shot-tabs label[for="sf-shot-verein"]{ outline:2.5px solid var(--focus); outline-offset:2px; }
.sf-shot-cap{ max-width:52ch; margin:10px auto 0; text-align:center; font-size:var(--fs-small); line-height:1.5; color:var(--muted); text-wrap:balance; }
.sf-shot-cap > span{ display:none; }
#sf-shot-firma:checked ~ .sf-shot-cap .sf-shot-cap-firma,
#sf-shot-verein:checked ~ .sf-shot-cap .sf-shot-cap-verein{ display:block; }
.sf-shot-cap .sf-shot-tip{ display:block; margin-top:4px; font-weight:750; color:var(--gold-text); }
@media (max-width:767px){ .sf-shot-cap .sf-shot-tip{ display:none; } }   /* den eigenen Bildschirm scannt man nicht */

/* Einsatz: Kopf links, Branchenliste rechts (Haarlinien statt Kartenraster) */
.sf-split{ display:grid; gap:28px; max-width:1060px; margin:0 auto; }
@media (min-width:900px){ .sf-split{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:start; } }
.sf-sectors{ margin:0; padding:0; list-style:none; border-bottom:1px solid var(--border); }
.sf-sectors li{ display:flex; align-items:center; gap:16px; padding:16px 4px; border-top:1px solid var(--border); }
.sf-sectors strong{ display:block; font:850 1.0625rem/1.3 var(--font-display); letter-spacing:-.01em; }
.sf-sector-use{ display:block; margin-top:2px; font-size:var(--fs-card); line-height:1.5; color:var(--body); }
.sf-sectors .sf-ico{ background:var(--tile-honey); color:var(--gold-text); }

.sf-compare-2 .compare-table{ min-width:480px; }

/* Anfrageformular */
.sf-form{ position:relative; max-width:720px; margin:0 auto; padding:clamp(22px, 4vw, 40px); border:1px solid var(--border);
  border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-card); }
.sf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sf-form-row{ display:grid; gap:0 18px; }
@media (min-width:640px){ .sf-form-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.sf-field{ display:grid; gap:7px; margin-bottom:18px; }
.sf-field label{ font:750 var(--fs-small)/1.3 var(--font-body); color:var(--ink); }
.sf-field :is(input, select, textarea){ width:100%; min-height:48px; padding:12px 14px; border:1.5px solid var(--field-border);
  border-radius:var(--r-md); background:var(--surface); color:var(--ink); font-size:16px; line-height:1.4;
  transition:border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out); }
.sf-field textarea{ min-height:132px; resize:vertical; }
.sf-field ::placeholder{ color:var(--muted); opacity:1; }
.sf-field :is(input, select, textarea):focus{ outline:none; border-color:var(--ink); box-shadow:var(--halo); }
.sf-field :is(input, select, textarea):focus-visible{ outline:none; }
.sf-field input:-webkit-autofill{ -webkit-box-shadow:0 0 0 40px var(--surface) inset; -webkit-text-fill-color:var(--ink); }
.sf-form .btn-block{ margin-top:6px; }
.sf-form-note{ margin:14px 0 0; text-align:center; font-size:12.5px; line-height:1.55; color:var(--muted); }
.sf-form-note a{ color:inherit; }
.sf-form-err{ margin:0 0 20px; padding:14px 18px; border-left:3px solid #c62828; border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(198,40,40,.08); font-size:var(--fs-card); line-height:1.6; color:var(--ink); }
.sf-form-err p{ margin:0 0 4px; font-weight:750; }
.sf-form-err ul{ margin:0; padding-left:18px; }
.sf-form-ok{ display:flex; align-items:center; gap:10px; margin:0; font:750 var(--fs-long)/1.5 var(--font-body); color:var(--ok-text); }


/* ═══ Reduced Motion · Forced Colors · Print ═══ */
@media (prefers-reduced-motion: reduce){
  .rg-faq details::details-content{ transition:none; }
  .rg-faq summary::after, .rg-related a, .rg-related a::after, .rg-hub-card, .rg-hub-arrow{ transition:none; }
  .sf-shot-img, .sf-shot-tabs label, .sf-field :is(input, select, textarea){ transition:none; }
}
@media (forced-colors: active){
  .rg-step::before, .rg-page .lp-hl{ forced-color-adjust:none; background:CanvasText; color:Canvas; }
  .rg-related a::after{ forced-color-adjust:none; background:LinkText; color:Canvas; }
  .aa-page .compare-table .bee-col{ forced-color-adjust:none; background:Canvas; outline:2px solid Highlight; outline-offset:-2px; }
  .sf-ico{ forced-color-adjust:none; background:Canvas; color:CanvasText; outline:1px solid CanvasText; }
  .sf-lane--bee, .sf-teaser{ outline:2px solid Highlight; }
  #sf-shot-firma:checked ~ .sf-shot-tabs label[for="sf-shot-firma"],
  #sf-shot-verein:checked ~ .sf-shot-tabs label[for="sf-shot-verein"]{ forced-color-adjust:none; background:Highlight; color:HighlightText; }
}
@media print{
  .rg-page main{ padding-top:0; }
  .rg-step, .rg-note, .rg-related a, .rg-hub-card, .aa-short, .aa-card, .aa-page .lp-compare{ box-shadow:none; }
  .sf-lane, .sf-teaser, .sf-form{ box-shadow:none; }
  .sf-teaser, .sf-teaser-h, .sf-teaser-p{ background:none; color:inherit; }
  .aa-page .lp-compare{ overflow:visible; }
  .rg-faq details::details-content{ block-size:auto; }
}