/*
 * Gartenpflege-Abo Kalkulator
 * Alles unter .gbk gekapselt, damit nichts ins Theme ausbricht.
 * Farben, Radius und Titelschrift kommen als CSS-Variablen aus den
 * Einstellungen (siehe class-gbk-shortcode.php).
 * Keine externen Schriften, keine externen Ressourcen.
 */

.gbk {
  --gbk-gruen: #54A033;
  --gbk-gruen-text: #3f7a25;
  --gbk-tiefgruen: #193831;
  --gbk-gold: #c8a44a;
  --gbk-hell: #eef5ea;
  --gbk-grau: #f9fafa;
  --gbk-text: inherit;
  /* Etwas dunkler als reines Grau: erreicht 4,5:1 auch auf den hellgrünen
     Kästen (#eef5ea), nicht nur auf Weiß. */
  --gbk-leise: #636e69;
  --gbk-linie: #dfe5e0;
  --gbk-weiss: #fff;
  --gbk-r: 4px;
  --gbk-font-titel: inherit;
  /* Voreingestellt volle Breite: Die Breite bestimmt der Container der
     Seite. Unter Einstellungen lässt sich eine Obergrenze setzen. */
  --gbk-max: 100%;
  /* Höhe eines mitlaufenden Kopfbereichs der Seite. Wird aus den
     Einstellungen gesetzt oder vom Skript nachgemessen. */
  --gbk-kopf: 0px;

  /* Farben für alles, was ohne eigene Fläche direkt auf dem Hintergrund der
     Seite steht: Überschriften, Einleitungen, Fortschritt, schlichte
     Schaltflächen. Auf dunklem Grund werden sie weiter unten hell gesetzt.
     Was in einem Kasten steht, bleibt davon unberührt. */
  --gbk-aussen-titel: var(--gbk-gruen);
  --gbk-aussen: var(--gbk-leise);
  --gbk-aussen-stark: var(--gbk-gruen-text);
  --gbk-spur: rgba(0, 0, 0, .07);
  --gbk-fokus: var(--gbk-gruen-text);

  box-sizing: border-box;
  width: 100%;
  max-width: var(--gbk-max);
  margin: 0 auto;
  line-height: 1.55;
}
.gbk *, .gbk *::before, .gbk *::after { box-sizing: border-box; }
.gbk h1, .gbk h2, .gbk h3 { font-family: var(--gbk-font-titel); }
.gbk p { margin: 0 0 1em; }
.gbk ul { margin: 0; padding: 0; list-style: none; }
.gbk button { font: inherit; cursor: pointer; }
/* Das Theme kann display auf Elementen setzen, die wir per hidden ausblenden. */
.gbk [hidden] { display: none !important; }

/* ----------------------------------------------------------------------
   Schutz vor Theme-Vorgaben

   Viele Themes gestalten pauschal jedes button- und a-Element. Auf
   gartenbau-sommer.de färbt die reset.css des Themes zum Beispiel jede
   Schaltfläche pink (#cc3366) – Rahmen und Schrift dauerhaft, beim
   Überfahren zusätzlich die Fläche. Das schlug bis hierher durch.

   Die Auswahl steht in :where(). Das trägt keine Spezifität bei, deshalb
   bleiben alle eigenen Klassenregeln weiter unten stärker und
   überschreiben diesen Block wie gewohnt. Er darf nur hier oben stehen.
   ---------------------------------------------------------------------- */
.gbk :where(button, [type="button"], [type="submit"], [type="reset"]) {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  width: auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
}
.gbk :where(button, [type="button"], [type="submit"], [type="reset"]):hover,
.gbk :where(button, [type="button"], [type="submit"], [type="reset"]):focus,
.gbk :where(button, [type="button"], [type="submit"], [type="reset"]):active {
  background: none;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.gbk :where(a) { background: none; color: inherit; text-decoration: none; }
.gbk :where(a):hover, .gbk :where(a):focus, .gbk :where(a):active { color: inherit; text-decoration: none; }

/* Links im Fließtext sollen sichtbar bleiben – in unseren Farben. */
.gbk-dsgvo a, .gbk-mini a, .gbk-fehlertext a, .gbk-serverfehler a { color: var(--gbk-gruen-text); text-decoration: underline; text-underline-offset: 2px; }
.gbk-dsgvo a:hover, .gbk-mini a:hover, .gbk-fehlertext a:hover, .gbk-serverfehler a:hover { color: var(--gbk-tiefgruen); }
.gbk img { max-width: 100%; height: auto; }

/* ---------- Fortschritt ---------- */
.gbk-fortschritt { margin-bottom: 30px; }
.gbk-balken { height: 6px; width: 100%; background: var(--gbk-spur); border-radius: var(--gbk-r); overflow: hidden; }
.gbk-balken i { display: block; height: 100%; width: 0; background: var(--gbk-gruen); transition: width .4s cubic-bezier(.22,.61,.36,1); }
.gbk-schrittzahl { margin-top: 7px; font-size: .8rem; color: var(--gbk-aussen); text-align: right; }

.gbk-schritt { animation: gbk-rein .28s ease-out; }
@keyframes gbk-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gbk-schritt { animation: none; }
  .gbk-balken i { transition: none; }
}

.gbk-kopfblock { text-align: center; margin-bottom: 30px; }
.gbk-titel { font-size: clamp(1.5rem, 3.6vw, 1.9rem); font-weight: 700; color: var(--gbk-gruen); margin: 0; line-height: 1.25; }
/* Der Kopfblock steht frei auf der Seite – anders als die gleiche Überschrift
   innerhalb der Dankekarte, die auf Weiß sitzt. Deshalb nur hier umfärben. */
.gbk-kopfblock .gbk-titel { color: var(--gbk-aussen-titel); }
.gbk-kopfblock p { margin: 10px auto 0; color: var(--gbk-aussen); max-width: 58ch; }

/* ---------- Kopfbereich ---------- */
.gbk-titelbalken { background: var(--gbk-tiefgruen); color: #fff; padding: 20px clamp(24px, 4.5vw, 48px); border-radius: var(--gbk-r); margin: 14px 0 30px; }
.gbk-titelbalken h2 { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Schaltflächen ---------- */
.gbk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--gbk-r); padding: 15px 30px; font-size: 1.05rem; font-weight: 400; background: var(--gbk-gruen-text); color: #fff; text-decoration: none; transition: background .15s; }
.gbk-btn:hover, .gbk-btn:focus { background: var(--gbk-tiefgruen); color: #fff; }
.gbk-btn[disabled] { opacity: .5; cursor: not-allowed; }
.gbk-btn-schlicht { background: transparent; color: var(--gbk-aussen); padding: 15px 4px; }
.gbk-btn-schlicht:hover, .gbk-btn-schlicht:focus { background: transparent; color: var(--gbk-aussen-stark); }
.gbk :focus-visible { outline: 3px solid var(--gbk-fokus); outline-offset: 2px; }

/* ---------- Paketkarten ---------- */
.gbk-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 880px) { .gbk-pakete { grid-template-columns: 1fr; } }
.gbk-anker { position: relative; display: block; height: 0; overflow: hidden; }
.gbk-paket { position: relative; display: flex; flex-direction: column; text-align: left; height: 100%; background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 26px; transition: border-color .15s, background .15s; }
.gbk-paket:hover { border-color: var(--gbk-gruen); background: var(--gbk-weiss); color: inherit; }
.gbk-paket.gbk-beliebt { border-color: var(--gbk-gold); }
.gbk-paket.gbk-aktiv { border: 2px solid var(--gbk-gruen); padding: 25px; background: #fcfdfb; }
.gbk-fahne { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--gbk-gold); color: #2b2410; border-radius: var(--gbk-r); padding: 4px 13px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gbk-paket h3 { font-size: 1.2rem; font-weight: 700; color: var(--gbk-tiefgruen); margin: 0 0 10px; }
.gbk-abpreis { margin-bottom: 4px; }
.gbk-abpreis .gbk-ab, .gbk-abpreis .gbk-pm { font-size: .88rem; color: var(--gbk-leise); }
.gbk-abpreis .gbk-zahl { font-size: 1.9rem; font-weight: 700; color: var(--gbk-tiefgruen); font-family: var(--gbk-font-titel); }
.gbk-livepreis { font-size: .94rem; font-weight: 700; color: var(--gbk-gruen-text); margin-bottom: 14px; }
.gbk-vorspann { font-size: .9rem; font-weight: 700; color: var(--gbk-tiefgruen); margin: 2px 0 10px; min-height: 2.7em; }
.gbk-leistungen { display: grid; gap: 9px; font-size: .92rem; }
.gbk-leistungen li { display: flex; gap: 9px; align-items: flex-start; }
.gbk-hk { color: var(--gbk-gruen-text); font-weight: 700; flex: none; }
.gbk-idealfuer { margin: 0 0 14px; font-size: .86rem; font-style: italic; color: var(--gbk-leise); min-height: 2.6em; }
/* Fußblock: wird nach unten gedrückt, damit alle Karten auf einer Linie enden. */
.gbk-paket-fuss { margin-top: auto; padding-top: 18px; }
.gbk-bonuszeile { background: var(--gbk-hell); border-radius: var(--gbk-r); padding: 10px 13px; font-size: .82rem; font-weight: 700; color: var(--gbk-tiefgruen); }
.gbk-waehlen { margin-top: 14px; border-radius: var(--gbk-r); padding: 12px; text-align: center; font-size: .96rem; font-weight: 700; background: var(--gbk-hell); color: var(--gbk-gruen-text); }
.gbk-paket.gbk-aktiv .gbk-waehlen { background: var(--gbk-gruen-text); color: #fff; }

/* ---------- Gartenangaben ---------- */
.gbk-hinweisbox { display: flex; gap: 13px; align-items: flex-start; background: var(--gbk-hell); border-left: 4px solid var(--gbk-gruen); border-radius: var(--gbk-r); padding: 17px 20px; margin-bottom: 24px; font-size: .94rem; }
.gbk-hinweisbox .gbk-ico { font-size: 1.3rem; line-height: 1.2; flex: none; }
.gbk-hinweisbox p { margin: 0; }
/* Der Preisbalken bleibt beim Scrollen durch die Schieberegler oben stehen –
   bündig unter einem mitlaufenden Kopfbereich der Seite, sonst verschwände er
   dahinter. Ohne Abstand, damit er direkt am Kopfbereich hängt und kein
   Inhalt durch eine Lücke dazwischen wandert. Er klebt innerhalb des
   Schritts, endet also mit ihm. */
.gbk-richtpreis { position: sticky; top: var(--gbk-kopf, 0px); z-index: 5; margin-bottom: 24px; border-radius: var(--gbk-r); background: var(--gbk-tiefgruen); color: #fff; padding: 15px 22px; text-align: center; box-shadow: 0 8px 20px -12px rgba(25, 56, 49, .55); }
.gbk-richtpreis .gbk-lbl { font-size: .9rem; opacity: .85; }
.gbk-richtpreis .gbk-wert { font-size: 1.3rem; font-weight: 700; font-family: var(--gbk-font-titel); }
.gbk-richtpreis .gbk-brutto { font-size: .78rem; opacity: .72; }
.gbk-felder { display: grid; gap: 14px; }
.gbk-feld { background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 20px 22px; transition: opacity .2s; }
.gbk-feld.gbk-inaktiv { opacity: .55; background: var(--gbk-grau); }
.gbk-feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.gbk-feld-kopf label { font-weight: 700; color: var(--gbk-tiefgruen); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gbk-pille { border-radius: var(--gbk-r); background: var(--gbk-grau); border: 1px solid var(--gbk-linie); color: var(--gbk-leise); padding: 2px 8px; font-size: .72rem; font-weight: 400; white-space: nowrap; }
.gbk-hilfe { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--gbk-linie); background: var(--gbk-weiss); color: var(--gbk-leise); font-size: .8rem; line-height: 1; display: grid; place-items: center; padding: 0; }
.gbk-hilfe:hover { border-color: var(--gbk-gruen); color: var(--gbk-gruen-text); background: var(--gbk-weiss); }
.gbk-eingabe { display: flex; align-items: center; gap: 9px; }
.gbk-eingabe input[type="number"] { width: 96px; border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 10px 12px; text-align: right; font: inherit; font-weight: 700; color: var(--gbk-tiefgruen); background: #fff; -moz-appearance: textfield; }
.gbk-eingabe input[type="number"]::-webkit-outer-spin-button,
.gbk-eingabe input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gbk-eingabe .gbk-einheit { font-size: .88rem; color: var(--gbk-leise); min-width: 52px; }
.gbk-feld input[type="range"] { width: 100%; margin-top: 13px; accent-color: var(--gbk-gruen); height: 26px; }
.gbk-hilfetext { margin: 12px 0 0; font-size: .88rem; color: var(--gbk-leise); }
/* Was mit dieser Fläche im gewählten Paket geschieht. Drei Leistungen können
   an einem Regler hängen (Rasen: mähen, düngen, vertikutieren) – ohne diese
   Zeile bliebe offen, wofür die eingetragene Fläche eigentlich zählt. */
.gbk-tuns { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--gbk-linie); font-size: .84rem; color: var(--gbk-leise); }
.gbk-tuns-lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.gbk-tun { white-space: nowrap; }
.gbk-tun b { font-weight: 700; color: var(--gbk-gruen-text); }
.gbk-tuns-leer { font-style: italic; }
/* Erscheint nur, wenn ein Regler am Anschlag steht: Sonst könnte der Eindruck
   entstehen, größere Gärten würden gar nicht gepflegt. */
.gbk-maxhinweis { margin: 12px 0 0; padding: 10px 13px; border-radius: var(--gbk-r); background: var(--gbk-hell); border-left: 3px solid var(--gbk-gruen); font-size: .86rem; color: var(--gbk-tiefgruen); }
.gbk-grossehinweis { display: inline-block; margin-top: 7px; }
@media (max-width: 760px) {
  .gbk-hilfe { width: 30px; height: 30px; font-size: .9rem; }
  .gbk-feld input[type="range"] { height: 30px; }
}

/* ---------- Ergebnis ---------- */
.gbk-preisbox { background: var(--gbk-tiefgruen); color: #fff; border-radius: var(--gbk-r); padding: 34px 26px; text-align: center; }
.gbk-preisbox .gbk-paketname { font-size: .95rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.gbk-preisbox .gbk-gross { font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; line-height: 1.12; margin-top: 8px; font-family: var(--gbk-font-titel); }
.gbk-preisbox .gbk-mwst { font-size: .88rem; opacity: .75; }
.gbk-preisbox .gbk-fuss { max-width: 46ch; margin: 17px auto 0; font-size: .9rem; opacity: .88; }
.gbk-preisbox .gbk-fuss.gbk-mini { font-size: .82rem; opacity: .7; margin-top: 8px; }
.gbk-bonusbox { margin-top: 18px; border: 1px solid var(--gbk-gruen); background: var(--gbk-hell); border-radius: var(--gbk-r); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.gbk-bonusbox .gbk-ico { font-size: 1.5rem; line-height: 1.1; flex: none; }
.gbk-bonusbox .gbk-kopf { font-weight: 700; color: var(--gbk-tiefgruen); font-size: 1.02rem; }
.gbk-bonusbox p { margin: 6px 0 0; font-size: .93rem; }
.gbk-bonusbox p.gbk-mini { font-size: .8rem; color: var(--gbk-leise); margin-top: 6px; }
.gbk-klapp { margin-top: 18px; background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); overflow: hidden; }
.gbk-klapp > button:hover, .gbk-klapp > button:focus { background: transparent; color: var(--gbk-tiefgruen); }
.gbk-klapp > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: 0; padding: 18px 22px; text-align: left; font-weight: 700; color: var(--gbk-tiefgruen); }
.gbk-pfeil { transition: transform .2s; color: var(--gbk-gruen-text); }
.gbk-klapp.gbk-offen .gbk-pfeil { transform: rotate(180deg); }
.gbk-klapp-inhalt { border-top: 1px solid var(--gbk-linie); padding: 18px 22px 22px; }
.gbk-klapp-inhalt .gbk-ueber { font-size: .92rem; font-weight: 700; color: var(--gbk-gruen-text); margin: 0 0 12px; }
.gbk-posliste { display: grid; gap: 10px; font-size: .93rem; }
.gbk-posliste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gbk-posliste .gbk-links { display: flex; gap: 9px; }
.gbk-posliste .gbk-anzahl { white-space: nowrap; font-weight: 700; color: var(--gbk-tiefgruen); }
.gbk-klapp-inhalt .gbk-mini { margin: 14px 0 0; font-size: .82rem; color: var(--gbk-leise); }
.gbk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 700px) { .gbk-zwei { grid-template-columns: 1fr; } }
.gbk-kachel { background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 20px 22px; }
.gbk-kachel .gbk-kopf { font-weight: 700; color: var(--gbk-tiefgruen); margin-bottom: 12px; }
.gbk-wahl { display: flex; flex-wrap: wrap; gap: 9px; }
.gbk-wahl button { border: 1px solid var(--gbk-linie); background: var(--gbk-weiss); color: var(--gbk-leise); border-radius: var(--gbk-r); padding: 10px 16px; font-size: .9rem; font-weight: 400; transition: border-color .14s, background .14s, color .14s; }
.gbk-wahl button:hover { border-color: var(--gbk-gruen); background: var(--gbk-weiss); color: var(--gbk-leise); }
.gbk-wahl button.gbk-an { border-color: var(--gbk-gruen-text); background: var(--gbk-gruen-text); color: #fff; font-weight: 700; }
.gbk-sparhinweis { margin: 13px 0 0; font-size: .92rem; font-weight: 700; color: var(--gbk-gruen-text); }
.gbk-sparhinweis span { font-weight: 400; color: var(--gbk-leise); }
.gbk-ablauf { display: grid; gap: 10px; font-size: .93rem; }
.gbk-ablauf li { display: flex; gap: 10px; align-items: flex-start; }

/* ---------- Formular ---------- */
.gbk-formkarte { background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 26px; }
.gbk-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .gbk-raster { grid-template-columns: 1fr; } }
.gbk-voll { grid-column: 1 / -1; }
.gbk-formkarte label.gbk-lb { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 700; color: var(--gbk-tiefgruen); }
.gbk-formkarte input[type="text"], .gbk-formkarte input[type="tel"], .gbk-formkarte input[type="email"] { width: 100%; border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 12px 14px; font: inherit; background: #fff; }
.gbk-formkarte input:focus { outline: 0; border-color: var(--gbk-gruen); box-shadow: 0 0 0 3px rgba(84,160,51,.2); }
.gbk-formkarte input.gbk-fehler { border-color: #c0392b; background: #fdf4f3; }
.gbk-fehlertext { margin: 6px 0 0; font-size: .8rem; color: #c0392b; font-weight: 700; }
.gbk-dsgvo { margin-top: 22px; border: 1px solid var(--gbk-gruen); background: var(--gbk-hell); border-radius: var(--gbk-r); padding: 17px; }
.gbk-dsgvo.gbk-fehler { border-color: #c0392b; background: #fdf4f3; }
.gbk-dsgvo label { display: flex; gap: 13px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.gbk-dsgvo input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--gbk-gruen); }
.gbk-dsgvo a { color: var(--gbk-gruen-text); font-weight: 700; }
.gbk-serverfehler { margin-top: 16px; border: 1px solid #e6bdb8; background: #fdf4f3; border-radius: var(--gbk-r); padding: 14px 17px; font-size: .92rem; color: #a03028; }
.gbk-serverfehler a { color: inherit; font-weight: 700; }
/* Honigtopf: für Menschen unsichtbar, für Bots ein Köder. */
.gbk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Abschluss ---------- */
.gbk-danke { max-width: 580px; margin: 0 auto; text-align: center; background: var(--gbk-weiss); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: clamp(28px, 5vw, 48px); }
.gbk-haken { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--gbk-gruen-text); color: #fff; font-size: 1.9rem; display: grid; place-items: center; }
.gbk-danke h2 { margin: 20px 0 0; }
.gbk-danke > p { margin: 13px 0 0; color: var(--gbk-leise); }
.gbk-dankebox { margin-top: 24px; background: var(--gbk-hell); border-left: 4px solid var(--gbk-gruen); border-radius: var(--gbk-r); padding: 17px 19px; text-align: left; }
.gbk-dankebox .gbk-k { font-size: .92rem; font-weight: 700; color: var(--gbk-tiefgruen); }
.gbk-dankebox p { margin: 5px 0 0; font-size: .92rem; }
.gbk-dankebtn { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Navigation und Erläuterung ---------- */

.gbk-navzeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; }
.gbk-nachbar { margin-top: 32px; background: var(--gbk-grau); border: 1px solid var(--gbk-linie); border-radius: var(--gbk-r); padding: 26px; }
.gbk-nachbar h3 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; color: var(--gbk-gruen-text); }
.gbk-nachbar p { margin: 0 0 12px; font-size: .95rem; color: var(--gbk-leise); max-width: 70ch; }
.gbk-nachbar p:last-child { margin-bottom: 0; }
.gbk-pdf-hinweis { margin: 10px 0 0; font-size: .84rem; color: var(--gbk-leise); }

/* ----------------------------------------------------------------------
   Dunkler Hintergrund

   Sitzt der Kalkulator auf einer dunklen Fläche, muss alles ohne eigenen
   Kasten hell werden. Die Klasse setzt das Skript, nachdem es den
   tatsächlichen Hintergrund hinter dem Kalkulator ermittelt hat; in den
   Einstellungen lässt sie sich auch fest vorgeben.

   Weiße und hellgrüne Kästen bleiben unverändert – dort gilt weiter die
   dunkle Schrift, sonst wäre sie unlesbar.
   ---------------------------------------------------------------------- */
.gbk.gbk-dunkel {
  --gbk-aussen-titel: #fff;
  --gbk-aussen: rgba(255, 255, 255, .82);
  --gbk-aussen-stark: #fff;
  --gbk-spur: rgba(255, 255, 255, .22);
  --gbk-fokus: #fff;
}
/* Preisflächen haben denselben Farbton wie ein dunkelgrüner Seitenhintergrund
   und verschwänden sonst darin. Eine helle Kante hält sie sichtbar. */
.gbk-dunkel .gbk-richtpreis,
.gbk-dunkel .gbk-preisbox { border: 1px solid rgba(255, 255, 255, .2); }
.gbk-dunkel .gbk-richtpreis { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }