/* ============================================================
   KONDITIONEN 2026
   ------------------------------------------------------------
   Alle Farben, Abstände, Radien und Zeiten kommen aus tokens.css.
   Kein einziger neuer Farbwert — die beiden Gold-Token der
   Greenfee-Seite werden hier nicht gebraucht.

   Klassenpräfix durchgehend bt-*: seite.css belegt die generischen
   Namen, gf-* gehört der Greenfee-Seite.

   Bewegung: nur transform und opacity, nie top/width/box-shadow.
   Zustandswechsel unter 400 ms, Reveals bis 800 ms. Höchstens drei
   bewegte Elemente gleichzeitig im Sichtfeld.
   ============================================================ */

.bt-kap{padding-top:var(--luft);padding-bottom:calc(var(--luft)*.55)}
.bt-nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bt-num{text-align:right}
/* Ein verstecktes Feld ist versteckt — auch wenn seine Klasse einen
   eigenen display-Wert setzt. Ohne diese Zeile stünde die Kinderfrage
   im Erwachsenen-Modus mitten im Satz. */
.bt-kap [hidden],.bt-rechner [hidden],.bt-summe[hidden]{display:none !important}
.bt-strich,.bt-anfrage{color:var(--muted)}
.bt-anfrage{font-size:14px}
.bt-link{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen)}
.bt-link:hover{color:var(--tanne)}

/* ---------- Seitenkopf ----------
   Die Bühne endet spätestens bei 62 svh, damit der Schnittpunkt
   darunter angeschnitten sichtbar bleibt. */
.bt-hero{min-height:auto;height:auto;max-height:none}
/* Das Luftbild ist durchweg hell. Überschrift, Kicker und Lead brauchen
   deshalb einen kräftigeren Schleier als auf der Startseite: senkrecht für
   die Tiefe, waagrecht damit die linke Textspalte trägt. */
.bt-hero::after{background:
  linear-gradient(180deg,rgba(6,26,17,.52) 0%,rgba(6,26,17,.34) 30%,rgba(6,26,17,.6) 66%,rgba(6,26,17,.94) 100%),
  linear-gradient(100deg,rgba(6,26,17,.62) 0%,rgba(6,26,17,.3) 54%,rgba(6,26,17,.06) 82%)}
.bt-hero .hero-inhalt{padding-top:104px;padding-bottom:26px;min-height:min(62svh,620px);display:flex;flex-direction:column;justify-content:flex-end}
.bt-hero-unten{grid-template-columns:minmax(0,1fr)}

.bt-leiste{position:relative;z-index:3;background:var(--pine);padding:0 var(--inset)}
.bt-leiste ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;list-style:none;padding:0;margin:0;background:var(--hairline-dunkel)}
.bt-leiste li{background:var(--pine)}
.bt-leiste a,.bt-leiste span{display:flex;flex-direction:column;gap:6px;padding:26px 20px;color:var(--weiss);transition:background var(--t-schnell)}
.bt-leiste a:hover{background:var(--tanne)}
.bt-leiste b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:.92;letter-spacing:-.035em;color:var(--lime)}
.bt-leiste b i{font-style:normal;font-size:.45em;letter-spacing:0}
.bt-leiste em{font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:15px;line-height:1.35;color:rgba(255,255,255,.82)}

/* ============================================================
   C02 — DER SCHNITTPUNKT
   ============================================================ */
.bt-schnitt{position:relative;isolation:isolate}
/* Der Farbumschlag läuft über eine Blende, nicht über einen Farbwechsel
   im Layout — sonst müsste der Browser neu rechnen statt nur zu mischen. */
.bt-schnitt-blende{position:absolute;inset:0;background:var(--pine);opacity:0;pointer-events:none;z-index:-1;transition:opacity var(--t-lang) var(--ease)}
.bt-schnitt.bt-dunkel .bt-schnitt-blende{opacity:1}
.bt-schnitt-inhalt{position:relative;z-index:1;transition:color var(--t-lang) var(--ease)}

.bt-schnitt.bt-dunkel .kapitel-marke{border-top-color:var(--hairline-dunkel)}
.bt-schnitt.bt-dunkel .kapitel-marke .nr{color:var(--lime)}
.bt-schnitt.bt-dunkel .kapitel-marke .was{color:rgba(255,255,255,.72)}
.bt-schnitt.bt-dunkel .kapitel-kopf h2{color:var(--weiss)}
.bt-schnitt.bt-dunkel .kapitel-kopf .lead{color:rgba(255,255,255,.86)}

.bt-wisch{display:none}

.bt-buehne{display:flex;flex-direction:column;gap:0}
.bt-stufe{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:52px;align-items:start;padding:calc(var(--luft-s)) 0}
.bt-stufe-bild{position:sticky;top:14vh;margin:0}
.bt-diagramm{width:100%;height:auto;display:block;overflow:visible}

/* ---------- Das Band: das Diagramm fürs Handy ----------
   Auf einem 390er Display steht das Diagramm in 298 × 160 px — zwei Achsen,
   vierzig Treppenstufen und eine Füllfläche darin sind kein kleines Bild
   mehr, sondern ein unlesbares. Die Aussage braucht aber nur eine Achse:
   ab welcher Runde es kippt. Das Band zeigt genau die — eine Strecke von
   null bis zur letzten Runde, der Ball auf dem Kipppunkt, rechts davon
   dieselbe grüne Fläche, die im Diagramm „was du behältst" heißt.
   Am Rechner bleibt es ausgeblendet; dort trägt das Diagramm. */
.bt-bm{display:none}
.bt-bm-kopf{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.bt-bm-kopf .t-zahl{font-size:clamp(54px,16vw,76px);line-height:.86;color:var(--gruen)}
.bt-bm-kopf em{font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:15px;
  line-height:1.35;color:var(--text);max-width:14ch}
.bt-bm-schiene{position:relative;height:14px;border-radius:999px;background:var(--linie-karte)}
/* Alles rechts vom Kipppunkt ist das, was man behält. */
.bt-bm-behalt{position:absolute;top:0;bottom:0;left:var(--kipp);right:0;border-radius:0 999px 999px 0;
  background:var(--gruen)}
/* Der Ball sitzt auf der Marke — dasselbe Motiv wie im Diagramm und auf
   dem Rundenregler, nur ohne Fallweg. */
.bt-bm-ball{position:absolute;top:50%;left:var(--kipp);width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:var(--weiss);box-shadow:0 0 0 2px var(--gruen),0 6px 14px -6px rgba(6,26,17,.7)}
.bt-bm-skala,.bt-bm-legende{display:flex;justify-content:space-between;gap:16px;margin:10px 0 0}
.bt-bm-skala{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bt-bm-legende{margin-top:14px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;
  line-height:1.4;color:var(--sekundaer)}
.bt-bm-lg-vor,.bt-bm-lg-nach{position:relative;padding-top:14px;max-width:16ch}
.bt-bm-lg-nach{text-align:right}
/* Die zwei Legenden tragen die Farbe ihrer Bandhälfte als Strich über sich,
   damit man sie ohne Textvergleich zuordnet. */
.bt-bm-lg-vor::before,.bt-bm-lg-nach::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--linie-karte);border-radius:2px}
.bt-bm-lg-nach::before{background:var(--gruen)}
.bt-schnitt.bt-dunkel .bt-bm-kopf .t-zahl{color:var(--lime)}
.bt-schnitt.bt-dunkel .bt-bm-kopf em{color:rgba(255,255,255,.86)}
.bt-schnitt.bt-dunkel .bt-bm-schiene{background:rgba(255,255,255,.16)}
.bt-schnitt.bt-dunkel .bt-bm-behalt{background:var(--lime)}
.bt-schnitt.bt-dunkel .bt-bm-ball{box-shadow:0 0 0 2px var(--lime),0 6px 14px -6px rgba(0,0,0,.8)}
.bt-schnitt.bt-dunkel .bt-bm-skala{color:rgba(255,255,255,.66)}
.bt-schnitt.bt-dunkel .bt-bm-legende{color:rgba(255,255,255,.8)}
.bt-schnitt.bt-dunkel .bt-bm-lg-vor::before{background:rgba(255,255,255,.5)}
.bt-schnitt.bt-dunkel .bt-bm-lg-nach::before{background:var(--lime)}

/* Die Zeichnung. Farben ausschließlich aus tokens.css. */
.bt-dia-raster line{stroke:var(--hairline);stroke-width:1}
.bt-dia-raster .bt-dia-hilfe{stroke-dasharray:3 5}
.bt-dia-tick,.bt-dia-achse,.bt-dia-wert{font-family:'Space Grotesk',sans-serif;font-weight:600;fill:var(--muted)}
.bt-dia-tick{font-size:12px}
.bt-dia-achse{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.bt-dia-wert{font-size:12.5px;fill:var(--gruen)}
.bt-dia-treppe{fill:none;stroke:var(--tinte);stroke-width:2.2;stroke-linejoin:round}
.bt-dia-linie{fill:none;stroke:var(--gruen);stroke-width:3;stroke-linecap:round}
/* Die Fläche wird FREIGELEGT, nicht gedehnt: eine Maske wächst vom
   Kreuzungspunkt nach rechts, die Fläche selbst behält dabei jederzeit ihre
   wahre Form. (Vorher wuchs die Fläche selbst per scaleX — dabei wurde das
   Dreieck beim Hereinfahren gestaucht, und genau das sah billig aus.) */
.bt-dia-spar{fill:var(--lime);opacity:.34}
.bt-dia-spar-maske{transform-box:view-box;transform:scaleX(0);transition:transform var(--t-lang) var(--ease)}
.bt-dia-kipp line{stroke:var(--gruen);stroke-width:1.4;stroke-dasharray:2 4}
.bt-dia-kipp circle{fill:var(--weiss);stroke:var(--gruen);stroke-width:2.2;opacity:0;transform:scale(.4);transform-origin:center;transition:opacity var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
.bt-dia-kipp .bt-dia-delle{fill:var(--tinte);opacity:.2;stroke:none}
/* Sobald das Skript den echten Ball eingesetzt hat, verschwindet der
   gezeichnete Ersatz darunter — ohne Skript bleibt er stehen. */
.bt-dia-kipp.bt-dia-echt circle,
.bt-dia-kipp.bt-dia-echt .bt-dia-delle{display:none}
.bt-dia-ball{opacity:0;transform:scale(.4);transform-origin:center;transition:opacity var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
.bt-stufe-an .bt-dia-ball{opacity:1;transform:scale(1);transition-delay:.7s}
.bt-dia-kipp.bt-punkt-weg .bt-dia-ball{opacity:0;transition:opacity var(--t-schnell) var(--ease)}

.bt-schnitt.bt-dunkel .bt-dia-raster line{stroke:var(--hairline-dunkel)}
.bt-schnitt.bt-dunkel .bt-dia-tick,
.bt-schnitt.bt-dunkel .bt-dia-achse{fill:rgba(255,255,255,.68)}
.bt-schnitt.bt-dunkel .bt-dia-wert{fill:var(--lime)}
.bt-schnitt.bt-dunkel .bt-dia-treppe{stroke:var(--weiss)}
.bt-schnitt.bt-dunkel .bt-dia-linie{stroke:var(--lime)}
.bt-schnitt.bt-dunkel .bt-dia-kipp line{stroke:var(--lime)}
.bt-schnitt.bt-dunkel .bt-dia-kipp circle{fill:var(--weiss);stroke:var(--lime)}

/* Aufbau: mit Skript liegen die Linien zunächst versteckt und zeichnen sich,
   sobald die Stufe im Bild ist. Ohne Skript stehen sie sofort fertig da. */
.bt-js .bt-stufe .bt-dia-treppe,
.bt-js .bt-stufe .bt-dia-linie{transition:stroke-dashoffset 1.1s var(--ease)}
.bt-js .bt-stufe.bt-stufe-an .bt-dia-treppe,
.bt-js .bt-stufe.bt-stufe-an .bt-dia-linie{stroke-dashoffset:0 !important}
.bt-stufe-an .bt-dia-spar-maske{transform:scaleX(1);transition-delay:.5s}
.bt-stufe-an .bt-dia-kipp circle{opacity:1;transform:scale(1);transition-delay:.7s}

/* Die große Zahl IST der Kipppunkt — sie stand bis zum 19.08.2026 oben rechts
   in der Ecke, also genau dort, wo die Treppe ankommt: Die Ziffern lagen auf
   den Stufen und hingen über den rechten Rand. Jetzt hängen sie an der
   Kreuzung selbst, rechtsbündig über dem Ball. Dieses Feld ist immer frei:
   Oberhalb der Beitragslinie verläuft die Treppe grundsätzlich rechts vom
   Kipppunkt, links davon ist nichts.
   Die Hülle bekommt das Seitenverhältnis des SVG (640×380) — dann treffen die
   Prozentwerte aus dem Template dieselben Punkte wie die Zeichnung, ohne dass
   irgendwo eine Pixelhöhe doppelt gepflegt wird. */
.bt-dia-zahl{position:absolute;top:0;left:0;right:0;aspect-ratio:640/380;margin:0;pointer-events:none}
.bt-dia-zahl span{position:absolute;left:var(--kipp,92%);top:var(--kipphoch,14%);
  font-size:clamp(40px,4.6vw,78px);line-height:.84;color:var(--gruen);opacity:0;
  transform:translate(-100%,calc(-100% + 10px));
  transition:opacity var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
.bt-stufe-an .bt-dia-zahl span{opacity:.92;transform:translate(-100%,-100%);transition-delay:.8s}
.bt-schnitt.bt-dunkel .bt-dia-zahl span{color:var(--lime)}
.bt-stufe-bild figcaption,.bt-dia-legende{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--sekundaer)}
.bt-schnitt.bt-dunkel .bt-dia-legende{color:rgba(255,255,255,.78)}
.bt-lg{display:inline-flex;align-items:center;gap:8px}
.bt-lg::before{content:"";width:22px;height:3px;border-radius:var(--r-pill);background:currentColor}
.bt-lg-treppe::before{background:var(--tinte)}
.bt-lg-linie::before{background:var(--gruen)}
.bt-lg-spar::before{background:var(--lime);height:12px;border-radius:2px}
.bt-schnitt.bt-dunkel .bt-lg-treppe::before{background:var(--weiss)}
.bt-schnitt.bt-dunkel .bt-lg-linie::before{background:var(--lime)}

.bt-stufe-text{padding-top:8px;min-height:62vh}
.bt-stufe-nr{margin:0 0 10px}
.bt-stufe-nr span{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gruen)}
.bt-schnitt.bt-dunkel .bt-stufe-nr span{color:var(--lime)}
.bt-stufe-text h3{color:var(--tinte);margin:0 0 20px}
.bt-schnitt.bt-dunkel .bt-stufe-text h3{color:var(--weiss)}
.bt-stufe-fakten{display:grid;gap:14px;margin:0 0 22px;padding:20px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.bt-schnitt.bt-dunkel .bt-stufe-fakten{border-color:var(--hairline-dunkel)}
.bt-stufe-fakten div{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.bt-stufe-fakten dt{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--sekundaer)}
.bt-stufe-fakten dd{margin:0;font-size:19px;color:var(--tinte)}
.bt-stufe-fakten dd em{font-style:normal;font-size:13px;color:var(--muted);font-family:'Hanken Grotesk',sans-serif}
.bt-schnitt.bt-dunkel .bt-stufe-fakten dt{color:rgba(255,255,255,.76)}
.bt-schnitt.bt-dunkel .bt-stufe-fakten dd{color:var(--weiss)}
.bt-schnitt.bt-dunkel .bt-stufe-fakten dd em{color:rgba(255,255,255,.7)}
.bt-stufe-satz,.bt-stufe-klartext,.bt-stufe-spar{font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.6;color:var(--text)}
.bt-stufe-klartext{border-left:3px solid var(--gruen);padding-left:16px}
.bt-stufe-spar{margin-top:16px;color:var(--tinte);font-weight:600}
.bt-schnitt.bt-dunkel .bt-stufe-satz,
.bt-schnitt.bt-dunkel .bt-stufe-klartext{color:rgba(255,255,255,.88)}
.bt-schnitt.bt-dunkel .bt-stufe-spar{color:var(--lime)}

/* ---------- C03 Das Übergabe-Band ---------- */
.bt-band{background:var(--pine);color:var(--weiss);padding:calc(var(--luft)*.72) var(--inset)}
.bt-band ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;list-style:none;padding:0;margin:0}
.bt-band li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center}
.bt-band .bt-zeichen{grid-row:span 2;color:var(--lime)}
.bt-band b{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,2vw,26px)}
.bt-band span{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.bt-band-schluss{margin:calc(var(--luft-s)) 0 0;color:var(--lime);max-width:22ch}

/* ============================================================
   C04 — DAS SCHARNIER
   Die Achse sinkt an den oberen Rand des Rechners und wird zum Regler.
   Ohne Skript und bei reduzierter Bewegung steht hier schlicht nichts.
   ============================================================ */
/* Der Griff liegt fest im Fenster und wird per transform an seinen Platz
   gefahren — nur so kann er über zwei Sektionen hinweg dasselbe Element
   bleiben. Er sieht aus wie der Kreuzungspunkt im Diagramm und wie der
   Reglergriff, weil er beides ist. */
/* ---------- Der Golfball ----------
   Es ist derselbe Ball wie in der Jahresszene der Einsteigerprogramme:
   gezeichnet von assets/golfball.js, einer Quelle für beide Seiten.

   Der fallende Ball ist eine Leinwand — nur so kann er sich beim Fallen
   wirklich drehen. Der Griff des Reglers bekommt dieselbe Zeichnung als
   Bild (--bt-ball, vom Skript gesetzt); ohne Skript bleibt der einfache
   Ersatz aus Verläufen darunter stehen, damit der Regler nie ohne Griff
   dasteht.

   Das Muster wird dreimal einzeln gesetzt. Zusammengefasst ginge es NICHT:
   Steht ein Pseudoelement in der Liste, das der Browser nicht kennt
   (::-moz-range-thumb in Chrome), verwirft er die ganze Regel. */
.bt-rechner-kap{
  --bt-ball:
    radial-gradient(circle at 33% 30%, rgba(20,35,27,.20) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 62% 27%, rgba(20,35,27,.20) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 25% 58%, rgba(20,35,27,.18) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 52% 55%, rgba(20,35,27,.18) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 76% 60%, rgba(20,35,27,.16) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 40% 80%, rgba(20,35,27,.14) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 68% 84%, rgba(20,35,27,.12) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92) 0 22%, transparent 62%),
    var(--weiss)}
.bt-griff{position:fixed;left:0;top:0;z-index:3;display:block;
  width:36px;height:36px;margin:-18px 0 0 -18px;
  opacity:0;pointer-events:none;will-change:transform,opacity}
/* Solange der Griff unterwegs ist, gibt es den Punkt im Diagramm nicht
   doppelt — sonst wären es zwei Objekte statt einem. */
.bt-dia-kipp.bt-punkt-weg circle{opacity:0;transition:opacity var(--t-schnell) var(--ease)}
html:not(.bt-js) .bt-griff{display:none}
/* Und aus demselben Grund hat der Regler in dieser Zeit keinen Ball: Der
   fallende IST seiner. Er kommt zurück, sobald der Ball wieder oben liegt.
   Auch hier zwei getrennte Regeln — siehe oben. */
html.bt-ball-unterwegs .bt-regler-schiene::-webkit-slider-thumb{background:none;box-shadow:none}
html.bt-ball-unterwegs .bt-regler-schiene::-moz-range-thumb{background:none;box-shadow:none}

/* ============================================================
   C05 — DER RECHNER
   ============================================================ */
.bt-ohne-js{background:var(--mint);border-left:3px solid var(--gruen);padding:18px 20px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--text)}
/* Der Rechner erscheint erst, wenn er auch rechnet — also nachdem das
   Skript die Beitragsstruktur gelesen hat. Solange steht der Hinweis da,
   der zur vollständigen Tabelle führt. Ein Formular, das nichts ausrechnet,
   wäre schlimmer als keines. */
.bt-rechner{display:none}
html.bt-rechner-an .bt-ohne-js{display:none}
html.bt-rechner-an .bt-rechner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}

.bt-eingaenge{grid-column:1/-1;display:flex;gap:8px;border-bottom:1px solid var(--hairline);padding-bottom:0}
.bt-eingang{background:none;border:0;border-bottom:2px solid transparent;padding:12px 4px 14px;margin-right:22px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t-schnell),border-color var(--t-schnell)}
.bt-eingang[aria-selected="true"]{color:var(--tinte);border-bottom-color:var(--gruen)}
.bt-eingang:hover{color:var(--tinte)}

/* ---------- Die Steuerzeile: ein Satz, in dem man wählt ---------- */
.bt-satz{border:0;padding:0;margin:0}
/* Der Satz ist eine Schlagzeile, in der man wählt. Satzzeichen rücken um
   genau den Wortabstand zurück — sonst stünde nach einem Umbruch „35 bis 64
   , spiele“ da. */
.bt-satz-zeile{--bt-wort:.28em;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--bt-wort);margin:0 0 16px;
  font-size:clamp(19px,1.75vw,26px);line-height:1.35;color:var(--tinte);text-transform:none;letter-spacing:-.02em}
.bt-satz-punkt{margin-left:calc(var(--bt-wort) * -1)}
.bt-wahl{position:relative;display:inline-flex}
.bt-wahl select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid var(--gruen);
  border-radius:0;padding:0 18px 2px 2px;cursor:pointer;color:var(--gruen);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:inherit;line-height:inherit;letter-spacing:inherit;
  text-transform:none;transition:color var(--t-schnell),border-color var(--t-schnell)}
.bt-wahl::after{content:"";position:absolute;right:4px;bottom:.42em;width:7px;height:7px;border-right:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(45deg);pointer-events:none}
.bt-wahl select:hover{color:var(--tanne);border-bottom-color:var(--tanne)}
.bt-wahl select:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

/* ---------- Der Regler: das Ziel des Scharniers ---------- */
/* Die Zahl im Satz zeigt auf den Griff darüber — gleiche Ortsmarkierung
   wie die Auswahlfelder, aber ohne zweites Bedienelement. */
.bt-wahl-zahl::after{display:none}
.bt-satz-runden{background:none;border:0;border-bottom:2px solid var(--gruen);border-radius:0;padding:0 2px 2px;cursor:pointer;
  color:var(--gruen);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.bt-satz-runden:hover{color:var(--tanne);border-bottom-color:var(--tanne)}
.bt-satz-runden:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

.bt-regler{border:0;padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--hairline)}
.bt-regler legend{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:0}
.bt-regler-zeile{display:flex;align-items:center;gap:22px;margin-top:14px}
.bt-regler-wert{font-size:clamp(34px,4vw,54px);line-height:1;color:var(--tinte);min-width:2.4ch;text-align:right}
.bt-regler-schiene{flex:1;-webkit-appearance:none;appearance:none;background:none;height:28px;cursor:pointer}
.bt-regler-schiene::-webkit-slider-runnable-track{height:2px;background:var(--gruen)}
.bt-regler-schiene::-moz-range-track{height:2px;background:var(--gruen)}
.bt-regler-schiene::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-13px;border-radius:var(--r-pill);background:var(--bt-ball);background-size:cover;box-shadow:var(--schatten-plakette);border:0;cursor:grab}
.bt-regler-schiene::-moz-range-thumb{width:28px;height:28px;border-radius:var(--r-pill);background:var(--bt-ball);background-size:cover;box-shadow:var(--schatten-plakette);border:0;cursor:grab}
.bt-regler-schiene:focus-visible{outline:3px solid var(--gruen);outline-offset:4px}
.bt-regler-hilfe,.bt-feld-hilfe{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--muted);margin:8px 0 0}

/* ---------- Ankreuzfelder ---------- */
.bt-extras{border:0;padding:26px 0 0;margin:22px 0 0;border-top:1px solid var(--hairline)}
.bt-extras legend{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:0}
.bt-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:16px}
.bt-check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);cursor:pointer;transition:border-color var(--t-schnell),background var(--t-schnell)}
.bt-check:hover{border-color:var(--gruen)}
.bt-check input{position:absolute;opacity:0;width:1px;height:1px}
.bt-check-kasten{flex:0 0 auto;width:20px;height:20px;margin-top:2px;border:2px solid var(--muted);border-radius:3px;position:relative;transition:border-color var(--t-schnell),background var(--t-schnell)}
.bt-check-kasten::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--weiss);border-width:0 2.5px 2.5px 0;transform:rotate(42deg) scale(.4);opacity:0;transition:opacity var(--t-schnell),transform var(--t-schnell)}
.bt-check input:checked+.bt-check-kasten{background:var(--gruen);border-color:var(--gruen)}
.bt-check input:checked+.bt-check-kasten::after{opacity:1;transform:rotate(42deg) scale(1)}
.bt-check input:focus-visible+.bt-check-kasten{outline:3px solid var(--gruen);outline-offset:3px}
.bt-check-text{display:flex;flex-direction:column;gap:2px;font-family:'Hanken Grotesk',sans-serif}
.bt-check-text b{font-size:15.5px;font-weight:600;color:var(--tinte)}
.bt-check-text i{font-style:normal;font-size:14px;color:var(--sekundaer)}
.bt-check-text i span{color:var(--muted)}

/* ---------- Die Ergebniskarte ----------
   Zwei Lagen (siehe block_btrechner.php): Der Kern klebt, das Beiwerk wandert
   darunter durch. Die Karte selbst ist nur noch der Rahmen und trägt keine
   eigene Fläche mehr — Farbe und Polster liegen bei den beiden Lagen, damit
   sie zusammen weiterhin wie eine Karte aussehen.
   Der Klebepunkt liegt bei 138px statt 96px: Dort schwebt die Schnellansicht
   (.schnell, fest bei top:96px bzw. 84px), die sonst in der oberen Ecke läge.
   Das Höchstmaß ist der Notnagel für sehr flache Fenster — dann bekommt der
   Kern einen eigenen Rollbalken, statt aus dem Bild zu wachsen. */
.bt-erg{position:sticky;top:138px;background:var(--tanne);color:var(--weiss);padding:32px 30px 26px;border-radius:var(--r-flaeche);
  max-height:calc(100svh - 150px);overflow:auto;overscroll-behavior:contain}
/* Das Nachlese-Feld liegt unter BEIDEN Spalten. Es bleibt dunkel — so liest
   es sich als Fortsetzung der Karte und nicht als fremder Abschnitt. */
/* In der LINKEN Spalte, unter den Angaben — nie unter der Karte, die daneben
   klebt. Einspaltig, weil hier nur die halbe Rasterbreite zur Verfügung steht
   (665 px; die Zahlweisen-Tabelle hatte in der Karte nur 602 px). */
.bt-erg-mehr{grid-column:1;background:var(--tanne);color:var(--weiss);padding:26px 30px 30px;margin-top:20px}
.bt-erg-mehr > :last-child{margin-bottom:0}
.bt-erg-marke{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.bt-erg-punkt{width:8px;height:8px;border-radius:var(--r-pill);background:var(--lime)}
.bt-erg-tarif{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
.bt-erg-tarif .t-titel{color:var(--weiss)}
.bt-erg-wechsel{display:flex;align-items:baseline;gap:8px}
.bt-erg-wechsel label{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.bt-erg-wechsel select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--hairline-dunkel);color:var(--lime);
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;padding:2px 2px 3px;cursor:pointer;max-width:220px}
.bt-erg-wechsel select:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.bt-erg-preis{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
.bt-erg-preis .t-zahl{font-size:clamp(46px,6vw,78px);line-height:1;color:var(--lime)}
.bt-erg-preis em{font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:rgba(255,255,255,.86)}
.bt-erg-gesamt{margin:0 0 20px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:rgba(255,255,255,.8);min-height:1.4em}

.bt-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hairline-dunkel);list-style:none;padding:0;margin:0 0 20px}
.bt-drei li{background:var(--tanne);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.bt-drei-mitte{background:var(--pine) !important}
.bt-drei b{font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--weiss)}
.bt-drei-mitte b{color:var(--lime)}
.bt-drei em{font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:13px;line-height:1.35;color:rgba(255,255,255,.78)}

.bt-gegen{margin:0 0 18px;padding:16px 18px;background:var(--pine);font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.55;color:var(--weiss)}
.bt-gegen-gut{border-left:3px solid var(--lime)}
.bt-gegen-knapp,.bt-gegen-klartext{border-left:3px solid rgba(255,255,255,.5)}
.bt-gegen a{color:var(--lime);text-decoration:underline}

.bt-hinweise{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.bt-hinweise li{position:relative;padding-left:18px;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84)}
/* Das Aufzählungszeichen war ein waagrechter Strich. In einer Karte voller
   Beträge, Rechenweg und Aufpreisspalte liest sich das als Minuszeichen —
   die Zeilen wirkten wie Stornoposten einer Rechnung, obwohl sie bloß
   Hinweise sind. Ein Punkt kann man mit keinem Rechenzeichen verwechseln. */
.bt-hinweise li::before{content:"";position:absolute;left:1px;top:.5em;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}
.bt-hinweise .bt-hinweis-zustand{color:var(--weiss);font-weight:600}
.bt-hinweise .bt-hinweis-zustand::before{background:var(--lime);width:6px;height:6px;top:.46em}

.bt-ab{margin:0 0 18px;padding:18px;border:1px solid var(--hairline-dunkel)}
.bt-ab-text{margin:0 0 14px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.bt-ab-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bt-ab-karte{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;background:var(--pine);border:1px solid transparent;color:var(--weiss);cursor:pointer;transition:border-color var(--t-schnell),transform var(--t-schnell)}
.bt-ab-karte:hover{border-color:var(--lime);transform:translateY(-2px)}
.bt-ab-karte b{font-family:'Space Grotesk',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:-.01em}
.bt-ab-karte span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--lime)}
.bt-ab-karte em{font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:rgba(255,255,255,.76)}
.bt-ab-empfohlen{border-color:var(--lime)}
.bt-ab-marke{position:absolute;top:-1px;right:-1px;font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--lime);color:var(--pine);padding:4px 8px}

.bt-weg,.bt-leiter{border-top:1px solid var(--hairline-dunkel);margin:0}
.bt-weg summary,.bt-leiter summary{padding:14px 0;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.bt-weg summary:hover,.bt-leiter summary:hover{color:var(--lime)}
.bt-weg summary:focus-visible,.bt-leiter summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.bt-weg ol{list-style:none;padding:0 0 16px;margin:0;display:grid;gap:8px;counter-reset:bt-weg}
.bt-weg li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;color:rgba(255,255,255,.84)}
.bt-weg li b{font-weight:600;color:var(--weiss)}
.bt-weg li i{font-style:normal;font-variant-numeric:tabular-nums}
.bt-leiter-tabelle{width:100%;border-collapse:collapse;margin-bottom:16px}
.bt-leiter-tabelle caption{text-align:left;font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:rgba(255,255,255,.72);padding-bottom:10px}
.bt-leiter-tabelle th,.bt-leiter-tabelle td{padding:8px 6px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:rgba(255,255,255,.84);border-bottom:1px solid var(--hairline-dunkel);text-align:left}
.bt-leiter-tabelle thead th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.bt-leiter-tabelle .bt-num{text-align:right}
.bt-leiter-aktiv th,.bt-leiter-aktiv td{color:var(--weiss);font-weight:600}

.bt-erg-anrechnung{margin:16px 0 0;padding:14px 16px;background:var(--pine);border-left:3px solid var(--lime);font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.bt-erg-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;align-items:center}
.bt-erg-knoepfe .btn-outline{background:none;border-color:rgba(255,255,255,.5);color:var(--weiss)}
.bt-erg-knoepfe .btn-outline:hover{background:rgba(255,255,255,.14);color:var(--weiss)}
.bt-teilen{background:none;border:0;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);padding:10px 4px}
.bt-teilen:hover{color:var(--weiss)}
.bt-erg-fuss{margin:16px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}

/* ---------- Der geführte Dialog ---------- */
.bt-dialog-kopf h3{color:var(--tinte);margin:0 0 8px}
.bt-dialog-kopf p{margin:0 0 20px;max-width:46ch}
.bt-dialog-fortschritt{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bt-dialog-schiene{flex:1;height:2px;background:var(--linie-karte);overflow:hidden}
.bt-dialog-schiene i{display:block;height:100%;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mittel) var(--ease)}
.bt-dialog-schritt{color:var(--muted)}
.bt-dialog-karte{border:1px solid var(--linie-karte);padding:24px}
.bt-dialog-karte h4{color:var(--tinte);margin:0 0 18px}
.bt-dialog-optionen{display:grid;gap:8px}
.bt-dialog-option{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:16px 18px;background:var(--weiss);border:1px solid var(--linie-karte);cursor:pointer;transition:border-color var(--t-schnell),transform var(--t-schnell)}
.bt-dialog-option:hover{border-color:var(--gruen);transform:translateX(3px)}
.bt-dialog-option:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
.bt-dialog-option b{font-family:'Hanken Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--tinte)}
.bt-dialog-option span{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--sekundaer)}
.bt-dialog-empfohlen{border-color:var(--gruen);background:var(--mint)}
.bt-dialog-zurueck{margin:18px 0 0}
.bt-dialog-zurueck button{background:none;border:0;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.bt-dialog-zurueck button:hover{color:var(--gruen)}
.bt-dialog-luecke{font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--text)}
.bt-dialog-start{margin:0}

/* ---------- Die Zusammenfassung am unteren Rand ----------
   Eigener Name: .bt-pille gehört den Umschaltern der Matrix. */
/* ---------- Die Kurzfassung am unteren Rand ----------
   Sie erscheint auf jeder Breite, sobald der Beitrag in der Karte aus dem Bild
   ist, und tritt am Seitenfuß wieder ab. Gesteuert wird das im Skript
   (.bt-summe-an); ohne Skript bleibt sie über [hidden] unsichtbar.
   z-index 106: über der Schnellansicht, die auf schmalen Geräten denselben
   Rand belegt und deshalb so lange weicht. */
.bt-summe{position:fixed;left:0;right:0;bottom:0;z-index:106;display:flex;align-items:center;justify-content:space-between;
  gap:14px 26px;padding:12px var(--inset) calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,48,31,.96);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.16);box-shadow:0 -14px 36px -24px rgba(4,18,12,.9);
  color:var(--weiss);font-family:'Hanken Grotesk',sans-serif;font-size:14px;
  transform:translateY(105%);transition:transform var(--t-mittel) var(--ease)}
.bt-summe.bt-summe-an{transform:translateY(0)}
.bt-summe-text{display:flex;align-items:baseline;gap:12px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-summe b{color:var(--lime);font-size:19px;font-variant-numeric:tabular-nums}
.bt-summe-tasten{display:flex;align-items:center;gap:16px;flex:none}
.bt-summe-aendern{border:0;background:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);border-bottom:1px solid rgba(255,255,255,.35);
  padding:0 0 2px;transition:color var(--t-schnell),border-color var(--t-schnell)}
.bt-summe-aendern:hover{color:var(--lime);border-color:var(--lime)}
.bt-summe .btn{padding:11px 20px;font-size:12px}
/* Solange die Kurzfassung steht, weicht die Schnellansicht — zwei Leisten
   übereinander wären auf einem Telefon die halbe Bedienfläche. */
/* Die Schnellansicht bleibt stehen — s. gleiche Entscheidung auf der
   Greenfee-Seite (03.09.2026). */

/* ============================================================
   C06 — DIE MATRIX
   ============================================================ */
.bt-matrix-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.bt-pillen{position:relative;display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border:1px solid var(--linie-karte);border-radius:var(--r-pill)}
/* Die gleitende Pille bewegt und dehnt sich ausschließlich per transform —
   width zu animieren würde bei jedem Bild ein Layout erzwingen. Grundbreite
   100 px, skaliert wird mit scaleX. */
.bt-pille-glas{position:absolute;left:0;top:0;width:100px;background:var(--tanne);border-radius:var(--r-pill);opacity:0;transform-origin:left top;transition:transform var(--t-mittel) var(--ease),opacity var(--t-schnell);pointer-events:none}
.bt-pillen label{position:relative;z-index:1;cursor:pointer;padding:9px 17px;border-radius:var(--r-pill);
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nav);transition:color var(--t-schnell)}
.bt-pillen input{position:absolute;opacity:0;width:1px;height:1px}
.bt-pillen input:checked+span{color:var(--weiss)}
.bt-pillen label:has(input:focus-visible){outline:3px solid var(--gruen);outline-offset:2px}
.bt-matrix-gueltig{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--muted);margin:0}

.bt-tafel{overflow-x:auto}
.bt-tabelle{width:100%;border-collapse:collapse}
.bt-tabelle caption{text-align:left;font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--sekundaer);padding-bottom:14px}
.bt-tabelle th,.bt-tabelle td{padding:14px 12px;border-bottom:1px solid var(--linie-karte);text-align:left;vertical-align:baseline}
.bt-tabelle thead th{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--hairline)}
.bt-tabelle tbody th{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--tinte)}
.bt-tabelle td{font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--text)}
.bt-tabelle .bt-num{text-align:right;white-space:nowrap}
.bt-zeile-name{display:block}
.bt-zeile-zusatz{display:inline-block;margin-top:3px;margin-right:6px;font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.bt-zeile-hinweis{display:block;margin-top:4px;font-weight:400;font-size:14px;color:var(--sekundaer)}
.bt-spalte-aktiv{background:var(--mint)}
th.bt-spalte-aktiv{color:var(--tanne)}
.bt-kipp-zelle .t-zahl{font-size:19px;color:var(--tinte)}
.bt-kipp-einheit{display:block;font-size:12px;color:var(--muted)}
.bt-kein-kipp{font-size:14px;color:var(--muted);font-style:italic}
.bt-sort{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hairline)}
.bt-sort:hover{color:var(--gruen)}
.bt-sort[aria-pressed="true"]{color:var(--gruen)}

/* Spaltenweiser Aufbau — nur mit Skript, nur einmal. */
html.bt-js [data-bt-tabelle] td,html.bt-js [data-bt-tabelle] tbody th{opacity:0;transform:translate3d(0,8px,0)}
html.bt-js [data-bt-tabelle].bt-tabelle-an td,
html.bt-js [data-bt-tabelle].bt-tabelle-an tbody th{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.bt-js .bt-tabelle-an tbody th{transition-delay:0s}
html.bt-js .bt-tabelle-an td:nth-child(2){transition-delay:.06s}
html.bt-js .bt-tabelle-an td:nth-child(3){transition-delay:.12s}
html.bt-js .bt-tabelle-an td:nth-child(4){transition-delay:.18s}
html.bt-js .bt-tabelle-an td:nth-child(5){transition-delay:.24s}
html.bt-js .bt-tabelle-an td:nth-child(6){transition-delay:.3s}

.bt-matrix-fuss{margin-top:20px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.6;color:var(--sekundaer);max-width:78ch}
.bt-matrix-fuss a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.bt-regeln{margin-top:var(--luft-s)}
.bt-regeln h3{color:var(--tinte);margin:0 0 22px}
.bt-regeln-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.bt-regel h4{font-family:'Hanken Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--tinte);margin:0 0 4px}
.bt-regel-spielrecht{margin:0 0 10px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.bt-regel ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.bt-regel li{position:relative;padding-left:16px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.5;color:var(--text)}
.bt-regel li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--gruen)}
.bt-fussnoten{list-style:none;padding:22px 0 0;margin:var(--luft-s) 0 0;border-top:1px solid var(--hairline);display:grid;gap:8px}
.bt-fussnoten li{position:relative;padding-left:18px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.55;color:var(--sekundaer)}
.bt-fussnoten li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--muted)}
.bt-preise-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:26px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--muted)}

/* ============================================================
   C07 — WAS DER BEITRAG ENTHÄLT
   ============================================================ */
.bt-waage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px}
.bt-waage-titel{color:var(--gruen);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.bt-waage-grenzen .bt-waage-titel{color:var(--tinte)}
.bt-punkte{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.bt-punkte li{display:grid;gap:5px}
.bt-punkte b{font-family:'Hanken Grotesk',sans-serif;font-size:17px;font-weight:700;color:var(--tinte)}
.bt-punkte span{font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;line-height:1.6;color:var(--text)}
.bt-waage-grenzen li{padding-left:18px;border-left:2px solid var(--hairline)}
.bt-mehr{margin-top:var(--luft-s)}

/* ============================================================
   C08 — MIETLEISTUNGEN
   ============================================================ */
.bt-zeile-waehlbar th::after{content:"im Rechner";display:inline-block;margin-left:8px;font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);vertical-align:middle}
.bt-miete-hinweis{margin-top:20px}

/* ============================================================
   C09 — DIE ANRECHNUNG
   ============================================================ */
.bt-anrechnung{background:var(--pine);color:var(--weiss);padding:var(--luft) var(--inset)}
.bt-anrechnung-innen{max-width:960px}
.bt-marke-dunkel{border-top-color:var(--hairline-dunkel)}
.bt-marke-dunkel .nr{color:var(--lime)}
.bt-marke-dunkel .was{color:rgba(255,255,255,.72)}
.bt-anrechnung h2{color:var(--weiss);margin:28px 0 34px}
.bt-zitat{margin:0 0 28px;padding-left:26px;border-left:3px solid var(--lime)}
.bt-zitat blockquote{margin:0}
.bt-zitat p{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:clamp(19px,2.1vw,26px);line-height:1.5;color:var(--weiss)}
.bt-zitat figcaption{margin-top:12px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.bt-anrechnung-text{font-family:'Hanken Grotesk',sans-serif;font-size:17px;line-height:1.65;color:rgba(255,255,255,.88);max-width:60ch}
.bt-anrechnung-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============================================================
   C10 — DER RING
   Die Monate stehen außen am Kreis, an ihrer Stelle im Jahr; Zahl und
   Einheit sitzen als Paar in der Mitte. Ein Kalender liest sich rund.
   ============================================================ */
.bt-ring-buehne{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;align-items:center}
.bt-ring-kreis{position:relative;width:100%;max-width:330px;aspect-ratio:1;margin:0 auto}
.bt-ring-bild{position:absolute;left:12%;top:12%;width:76%;height:76%;display:block}
.bt-ring-spur{stroke:var(--linie-karte);stroke-width:13}
.bt-ring-fuellung{stroke:var(--gruen);stroke-width:13;stroke-linecap:butt;transform-origin:110px 110px;transform:rotate(-90deg)}
/* Die Drehung setzt das Skript je Eintrittsmonat neu — dort beginnt der
   Ring zu laufen. Ohne Skript bleibt es bei der Grundstellung (Januar oben)
   und der Ring steht ohnehin schon voll da. */
.bt-ring-teiler line{stroke:var(--weiss);stroke-width:3}
.bt-ring-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:46px;letter-spacing:-.04em;fill:var(--tinte);font-variant-numeric:tabular-nums}
.bt-ring-einheit{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;fill:var(--muted)}

.bt-ring-monate{position:absolute;inset:0;pointer-events:none}
.bt-ring-monat{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  min-width:44px;padding:6px 2px;border:0;background:none;border-radius:var(--r-pill);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color var(--t-schnell),background var(--t-schnell)}
.bt-ring-monat:hover{color:var(--gruen)}
.bt-ring-monat[aria-pressed="true"]{color:var(--weiss);background:var(--tanne)}
.bt-ring-monat:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}

.bt-ring-satz{color:var(--tinte);margin:0 0 18px;max-width:20ch}
.bt-ring-ergebnis{max-width:48ch;margin:0}
.bt-ring-hinweis{margin:14px 0 0;max-width:48ch}

/* Der Ring ist ein kurzes Kapitel — er braucht unten keinen vollen
   Sektionsabstand, darunter beginnt sofort das nächste mit eigenem. */
.bt-ring-kap{padding-top:calc(var(--luft)*.72);padding-bottom:0}

/* ============================================================
   C11 — HÄUFIGE FRAGEN
   ============================================================ */
.bt-faq{border-top:1px solid var(--hairline)}
.bt-faq-eintrag{border-bottom:1px solid var(--hairline)}
.bt-faq-eintrag summary{cursor:pointer;padding:22px 40px 22px 0;position:relative;list-style:none;
  font-family:'Hanken Grotesk',sans-serif;font-size:18px;font-weight:600;color:var(--tinte)}
.bt-faq-eintrag summary::-webkit-details-marker{display:none}
.bt-faq-eintrag summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:translateY(-70%) rotate(45deg);transition:transform var(--t-schnell) var(--ease)}
.bt-faq-eintrag[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.bt-faq-eintrag summary:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
.bt-faq-eintrag p{margin:0 0 24px;padding-right:40px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.65;color:var(--text);max-width:78ch}

/* ============================================================
   C12 — ABSCHLUSS
   ============================================================ */
.bt-cta{background:var(--tanne);color:var(--weiss);padding:var(--luft) var(--inset)}
.bt-cta-innen{max-width:900px}
.bt-cta h2{color:var(--weiss);margin:0 0 22px}
.bt-cta-text{font-family:'Hanken Grotesk',sans-serif;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88);max-width:56ch}
.bt-cta-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bt-cta-mehr{margin:24px 0 0}
.bt-cta-mehr a{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.bt-cta-mehr a:hover{color:var(--weiss)}
.bt-cta-kontakt{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline-dunkel);
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:rgba(255,255,255,.82)}
.bt-cta-kontakt a{color:var(--lime)}
.bt-cta-kontakt a:hover{color:var(--weiss)}

/* ============================================================
   BREITEN
   ============================================================ */
@media (max-width:1100px){
  html.bt-rechner-an .bt-rechner{grid-template-columns:minmax(0,1fr)}
  /* Sobald der Rechner einspaltig steht, ist die Ergebniskarte keine
     klebende Spalte mehr, sondern ein Abschnitt der Seite — dann darf sie
     auch keinen eigenen Scrollbereich mehr haben. Das `position:static`
     allein reichte nicht: max-height und overflow blieben stehen, und am
     Handy scrollte man in der Karte, während daneben die Seite scrollte.
     Zwei Scrollflächen übereinander trifft niemand mit dem Daumen. */
  .bt-erg{position:static;max-height:none;overflow:visible;overscroll-behavior:auto}
  .bt-stufe{grid-template-columns:minmax(0,1fr);gap:26px}
  .bt-stufe-bild{position:static}
  .bt-stufe-text{min-height:0}
}
@media (max-width:880px){
  .bt-leiste ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-band ul{grid-template-columns:minmax(0,1fr);gap:22px}
  .bt-waage{grid-template-columns:minmax(0,1fr);gap:38px}
  .bt-ring-buehne{grid-template-columns:minmax(0,1fr);gap:32px}
  .bt-ring-kreis{max-width:320px}
}

/* Unter 560 px: kein klebendes Diagramm. Die Tarifstufen werden zu
   vollflächigen Karten, die man durchwischt — waagrecht scrollt dabei
   nur dieser Streifen, nie die Seite. */
@media (max-width:560px){
  .bt-wisch{display:block;margin:0 0 12px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .bt-schnitt.bt-dunkel .bt-wisch{color:rgba(255,255,255,.7)}
  .bt-buehne{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:calc(var(--inset)*-1);padding-inline:var(--inset);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bt-buehne::-webkit-scrollbar{display:none}
  .bt-stufe{flex:0 0 86%;scroll-snap-align:center;display:block;padding:0 0 var(--luft-s)}
  .bt-stufe-bild{position:static}
  /* Das Diagramm tritt ab, das Band übernimmt — samt der großen Zahl, die
     am Kreuzungspunkt hing, und der Diagramm-Legende: Beides trägt das
     Band selbst. Wo es keinen Kipppunkt gibt, gibt es auch kein Band;
     dort steht wie bisher der Klartext in der Textspalte. */
  .bt-stufe-bild .bt-diagramm,
  .bt-stufe-bild .bt-dia-zahl,
  .bt-stufe-bild .bt-dia-legende{display:none}
  .bt-bm{display:block}
  /* Mit dem Elternselektor, sonst gewinnt `.bt-stufe-fakten div{display:flex}`
     die Spezifität und die Zeile stand trotzdem da (gemessen). */
  .bt-stufe-fakten .bt-fakt-kipp{display:none}

  /* Die Matrix bricht in Zeilenblöcke — die Seite scrollt niemals waagrecht. */
  .bt-tafel{overflow-x:visible}
  .bt-tabelle,.bt-tabelle thead,.bt-tabelle tbody,.bt-tabelle tr,.bt-tabelle th,.bt-tabelle td{display:block;width:auto}
  .bt-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .bt-tabelle tr{padding:16px 0;border-bottom:1px solid var(--linie-karte)}
  .bt-tabelle th,.bt-tabelle td{border:0;padding:4px 0}
  .bt-tabelle td{display:flex;justify-content:space-between;gap:16px;text-align:right}
  .bt-tabelle td::before{content:attr(data-label);font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}
  .bt-spalte-aktiv{background:none}
  .bt-tabelle td.bt-spalte-aktiv{font-weight:700;color:var(--tinte)}
  .bt-kipp-einheit{display:inline}

  .bt-drei{grid-template-columns:minmax(0,1fr)}
  .bt-ab-reihe{grid-template-columns:minmax(0,1fr)}
  .bt-satz-zeile{font-size:clamp(18px,4.8vw,22px)}
  .bt-erg{padding:24px 20px}
  /* Unter 560px reicht die Breite nicht für Zahl, „Ändern“ und Knopf. Der
     Knopf bleibt, „Ändern“ geht — zur Karte führt hier ohnehin ein Wisch. */
  .bt-summe-aendern{display:none}
  .bt-summe b{font-size:16px}
  .bt-erg-mehr{padding:20px;margin-top:1px}

  /* Schmal: volle Breite statt Pille — der Knopf braucht Platz. */
  html.bt-rechner-an .bt-summe{left:0;right:0;bottom:0;border-radius:0;padding:10px var(--inset) calc(10px + env(safe-area-inset-bottom))}
  .bt-summe-text{gap:2px;flex-direction:column;align-items:flex-start}
  .bt-summe .btn{padding:10px 16px;font-size:11px}
  .bt-summe-aendern{font-size:10px}
  /* Der Betrag darf nie umbrechen — „1.590,00 € im“ mit abgeschnittenem
     „Jahr“ ist schlimmer als eine schmalere Schrift. */
  .bt-summe b{white-space:nowrap;font-size:17px}
}

/* ============================================================
   D4 — REDUZIERTE BEWEGUNG
   Diagrammaufbau, Scharnier, Odometer, Reveals und Ring aus; alle
   Inhalte stehen sofort im Endzustand.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bt-schnitt-blende{transition:none}
  html.bt-js .bt-stufe .bt-dia-treppe,
  html.bt-js .bt-stufe .bt-dia-linie{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none}
  .bt-dia-spar-maske{transform:none;transition:none}
  .bt-dia-kipp circle{opacity:1;transform:none;transition:none}
  /* Die Verschiebung an die Kreuzung ist kein Effekt, sondern die Position —
     sie muss auch hier stehen bleiben. */
  .bt-dia-zahl span{opacity:.92;transform:translate(-100%,-100%);transition:none}
  .bt-griff{display:none}
  .bt-pille-glas,.bt-dialog-schiene i,.bt-ring-fuellung{transition:none}
  .bt-summe{transition:none}
  html.bt-js [data-bt-tabelle] td,html.bt-js [data-bt-tabelle] tbody th{opacity:1;transform:none;transition:none}
  .bt-check,.bt-dialog-option,.bt-ab-karte,.bt-leiste a{transition:none}
  .bt-dialog-option:hover,.bt-ab-karte:hover{transform:none}
}

/* ---------- Angebots-Band der Eintrittsaktion ----------
   Zwischen Bühne und Fluss; Inhalt aus dem jtkalender-Block der
   Aktionsseite (templates/_jt_band.php). Verschwindet nach dem
   Aktionsende von selbst — diese Regeln bleiben trotzdem hier, das
   Band kommt bei der nächsten Aktion wieder. */
.bt-aktionsband{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;background:var(--pine);color:#fff;padding:15px var(--inset);text-decoration:none;border-top:1px solid var(--hairline-dunkel)}
.bt-aktionsband-marke{font-family:var(--anzeige);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);white-space:nowrap}
.bt-aktionsband-text{font-family:var(--lauf);font-weight:300;font-size:15px;line-height:1.5;color:rgba(255,255,255,.85)}
.bt-aktionsband-mehr{font-family:var(--anzeige);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-left:auto;white-space:nowrap}
.bt-aktionsband-mehr span{display:inline-block;transition:transform var(--t-schnell) ease-out}
.bt-aktionsband:hover .bt-aktionsband-mehr span,.bt-aktionsband:focus-visible .bt-aktionsband-mehr span{transform:translateX(4px)}
.bt-aktionsband:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
@media (max-width:560px){.bt-aktionsband-mehr{margin-left:0}}