/*
 * Der Stil des Konfigurators (AP-04.9, erweitert in AP-04.10).
 *
 * ## Die Linie
 *
 * Der Konfigurator sitzt in der Website des Betriebs — vier Stil-Varianten, freie
 * Markenfarbe, Design-Hoheit bei uns (D-41, D-46). Daraus zwei Regeln, die den
 * ganzen Aufbau bestimmen:
 *
 * 1. **Geerbt wird nur die Schrift.** `font-family` und `font-size` kommen vom
 *    Theme, damit der Konfigurator nicht wie ein Fremdkoerper wirkt. `color` und
 *    `background-color` werden auf **jedem** eigenen Element ausdruecklich
 *    gesetzt. Wuerden sie geerbt, waere kein Kontrast zusicherbar: Die
 *    Markenfarbe eines Betriebs kann alles sein, und D-41 Punkt 6 ist eine
 *    Zusage, keine Absicht.
 * 2. **Alle Farben stehen als Marken in einem Block.** Ein Test liest diesen
 *    Block, rechnet die Kontrastverhaeltnisse aus und schlaegt zu, wenn ein Paar
 *    unter WCAG AA faellt. Eine Farbaenderung ohne Nachrechnen ist damit nicht
 *    moeglich.
 *
 * Kein Shadow DOM. Es waere die einzige echte Abschirmung gegen fremdes CSS, hat
 * aber bei Sprachausgaben mehr Sonderfaelle als das gewoehnliche DOM — und
 * Barrierefreiheit ist in diesem Paket die Hauptsache, nicht die Kosmetik. Die
 * Abschirmung uebernehmen stattdessen das Praefix `gw-` und das ausdrueckliche
 * Setzen jeder Eigenschaft. Zeigt sich in AP-04.7 eine echte Kollision, bleibt
 * Shadow DOM der Rueckfall.
 *
 * Keine Animation, kein Uebergang, keine Schrift von aussen, kein Bild (D-41
 * Punkte 3 und 4). Der Betrieb laedt die Datei ueber das Plugin ein (AP-04.7).
 *
 * ## Die Akzentfarbe
 *
 * `--gw-akzent` ist die einzige Marke, die der Gastgeber sinnvoll ueberschreiben
 * kann. `--gw-akzent-schrift` und `--gw-akzent-tief` setzt dann **der Client**
 * aus der Leuchtdichte (`kontrast.js`) — nicht das Stylesheet, weil CSS keine
 * Kontrastrechnung kennt.
 */

.gw-konf {
  /* --- Farben: geprueft in client/tests/kontrast.test.js --- */
  --gw-grund: #ffffff;
  --gw-flaeche: #f2f5f7;
  --gw-schrift: #1d2125;
  --gw-gedimmt: #55606a;
  --gw-rand: #6b757e;
  --gw-akzent: #0a5ba8;
  --gw-akzent-tief: #084783;
  --gw-akzent-schrift: #ffffff;
  --gw-fehler: #b3261e;
  --gw-fehler-grund: #fdf2f1;
  --gw-hinweis-grund: #fff6e0;
  --gw-betont-grund: #eaf2fb;
  --gw-fokus: #0a5ba8;

  /* --- Masse --- */
  --gw-radius: 6px;
  --gw-abstand: 1rem;
  --gw-griff: 2.75rem; /* 44 px Mindestgroesse fuer alles Antippbare */

  color: var(--gw-schrift);
  background-color: var(--gw-grund);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  padding: calc(var(--gw-abstand) * 1.5);
  max-width: 44rem;
}

.gw-konf *,
.gw-konf *::before,
.gw-konf *::after {
  box-sizing: border-box;
}

/* Ein sichtbarer Fokus ist die Grundlinie, nicht die Ausnahme (D-41 Punkt 6).
   `:focus-visible` zuerst, danach der Rueckfall fuer Browser, die es nicht
   kennen — auf der Website eines Handwerksbetriebs sitzen auch aeltere. */
.gw-konf :focus-visible {
  outline: 3px solid var(--gw-fokus);
  outline-offset: 2px;
}

@supports not selector(:focus-visible) {
  .gw-konf :focus {
    outline: 3px solid var(--gw-fokus);
    outline-offset: 2px;
  }
}

/* Ueberschriften und der Meldungsblock bekommen den Fokus per `tabindex="-1"`,
   damit eine Sprachausgabe den Schrittwechsel ansagt (`FOKUS.SCHRITT` in
   `zeichnen.js`). Der Ring dazu haengt an `:focus-visible` und nicht an `:focus`:
   Der Browser entscheidet dann nach der Eingabeart — nach einer Tastatureingabe
   sichtbar, nach einem Mausklick nicht. Mit `:focus` sah ein Mausbenutzer
   dauerhaft einen Rahmen um eine Ueberschrift, den er nie angefordert hat
   (Befund aus der Handpruefung in AP-04.7).

   Der grosszuegigere Versatz bleibt: Diese Elemente sind volle Textzeilen, kein
   Knopf, und ein enger Ring an einer Ueberschrift liest sich wie ein Rahmen.

   Der Rueckfall unten behaelt `:focus`: Wo `:focus-visible` fehlt, ist ein Ring
   zu viel besser als keiner. */
.gw-konf [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--gw-fokus);
  outline-offset: 4px;
}

@supports not selector(:focus-visible) {
  .gw-konf [tabindex="-1"]:focus {
    outline: 3px solid var(--gw-fokus);
    outline-offset: 4px;
  }
}

/* ------------------------------------------------------------------ Kopf */

.gw-kopf {
  margin: 0 0 var(--gw-abstand);
}

.gw-name {
  color: var(--gw-schrift);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
}

.gw-fortschritt {
  color: var(--gw-gedimmt);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

.gw-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: var(--gw-abstand) 0 0;
  padding: 0;
}

.gw-schritt {
  color: var(--gw-gedimmt);
  font-size: 0.875rem;
}

.gw-schritt-marke,
.gw-schritt-knopf {
  /* Mindesthoehe und senkrechte Ausrichtung an **beiden**: Erledigte Schritte
     sind Knoepfe und brauchen die 44 px Antippgroesse, der laufende und die
     kommenden sind Marken. Stand die Mindesthoehe nur am Knopf, war ein
     erledigter Schritt sichtbar hoeher als der laufende daneben — Befund aus der
     Handpruefung in AP-04.7. Verschieden hohe Kaestchen einer Reihe lesen sich
     als verschiedene Bedeutung, und die steckt hier schon in Farbe und
     Schriftschnitt. `inline-flex` statt `inline-block`, damit der Text in der
     hoeheren Marke mittig sitzt und nicht oben klebt. */
  display: inline-flex;
  align-items: center;
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-grund);
  color: var(--gw-gedimmt);
  padding: 0.375rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
}

.gw-schritt-knopf {
  cursor: pointer;
}

.gw-schritt--laufend .gw-schritt-marke {
  border-color: var(--gw-akzent);
  background-color: var(--gw-betont-grund);
  color: var(--gw-schrift);
  font-weight: 600;
}

/* -------------------------------------------------------------- Meldungen */

.gw-meldungen {
  border: 1px solid var(--gw-fehler);
  border-left-width: 4px;
  border-radius: var(--gw-radius);
  background-color: var(--gw-fehler-grund);
  color: var(--gw-schrift);
  padding: var(--gw-abstand);
  margin: 0 0 var(--gw-abstand);
}

.gw-meldungen-titel {
  color: var(--gw-schrift);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.gw-meldungen-liste {
  margin: 0;
  padding-left: 1.25rem;
}

.gw-meldungen-liste li {
  margin: 0.25rem 0;
}

.gw-meldungen-liste a {
  color: var(--gw-fehler);
  text-decoration: underline;
}

/* ----------------------------------------------------------------- Schritt */

.gw-titel {
  color: var(--gw-schrift);
  font-size: 1.1875rem;
  font-weight: 600;
  /* 0.625rem und nicht 0.25rem: Diese Ueberschrift bekommt beim Schrittwechsel
     den Fokus, und der Ring braucht 7 px — 3 px Breite plus 4 px Versatz. Bei
     4 px Abstand ueberlappte er zwangslaeufig, was darunter steht (Befund aus
     der Handpruefung in AP-04.7). */
  margin: 0 0 0.625rem;
}

.gw-schritt-hinweis {
  color: var(--gw-gedimmt);
  margin: 0 0 var(--gw-abstand);
}

/* ------------------------------------------------------------------ Felder */

.gw-feld {
  border: 0;
  margin: 0 0 calc(var(--gw-abstand) * 1.25);
  padding: 0;
}

.gw-beschriftung,
.gw-legende {
  display: block;
  color: var(--gw-schrift);
  font-weight: 600;
  margin: 0 0 0.25rem;
  padding: 0;
}

.gw-kennzeichen {
  color: var(--gw-gedimmt);
  font-size: 0.8125rem;
  font-weight: 400;
}

.gw-hilfe {
  display: block;
  color: var(--gw-gedimmt);
  font-size: 0.875rem;
  margin: 0 0 0.375rem;
}

.gw-fehlertext {
  display: block;
  color: var(--gw-fehler);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.375rem 0 0;
}

.gw-fehlertext:empty {
  display: none;
}

.gw-eingabe,
.gw-liste {
  display: block;
  width: 100%;
  max-width: 14rem;
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-grund);
  color: var(--gw-schrift);
  font: inherit;
  padding: 0.5rem 0.625rem;
}

.gw-liste {
  max-width: 20rem;
}

.gw-zahlzeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gw-einheit {
  color: var(--gw-gedimmt);
}

.gw-feld--ungueltig .gw-eingabe,
.gw-feld--ungueltig .gw-liste {
  border-color: var(--gw-fehler);
  border-width: 2px;
}

/* --------------------------------------------------------------- Optionen */

.gw-optionen {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}

.gw-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-grund);
  color: var(--gw-schrift);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.gw-option--gewaehlt {
  border-color: var(--gw-akzent);
  border-width: 2px;
  background-color: var(--gw-betont-grund);
}

.gw-option input {
  /* Das Kaestchen bleibt das echte Formularelement — kein Nachbau mit
     `appearance: none`. Ein nachgebautes Kaestchen verliert die Bedienung durch
     Sprachausgaben und die Darstellung im Kontrastmodus des Betriebssystems. */
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--gw-akzent);
}

/* ---------------------------------------------------------------- Knoepfe */

.gw-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: calc(var(--gw-abstand) * 1.5) 0 0;
}

.gw-knopf {
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-flaeche);
  color: var(--gw-schrift);
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1.125rem;
  cursor: pointer;
}

.gw-knopf--haupt {
  border-color: var(--gw-akzent);
  background-color: var(--gw-akzent);
  color: var(--gw-akzent-schrift);
}

.gw-knopf--haupt:hover,
.gw-knopf--haupt:active {
  border-color: var(--gw-akzent-tief);
  background-color: var(--gw-akzent-tief);
}

.gw-knopf[disabled] {
  cursor: default;
  /* Gesperrt wird nur waehrend der Rechnung. Der Zustand muss trotzdem lesbar
     bleiben — ausgegraute Schrift unter 4,5:1 waere hier ein Fehler und kein
     Hinweis. */
  opacity: 1;
  border-color: var(--gw-rand);
  background-color: var(--gw-flaeche);
  color: var(--gw-gedimmt);
}

/* --------------------------------------------------------------- Ergebnis */

.gw-ergebnis-titel,
.gw-stoerung-titel {
  color: var(--gw-schrift);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 var(--gw-abstand);
}

.gw-rahmen {
  border: 1px solid var(--gw-akzent);
  border-radius: var(--gw-radius);
  background-color: var(--gw-betont-grund);
  color: var(--gw-schrift);
  padding: var(--gw-abstand);
  margin: 0 0 0.75rem;
}

.gw-betrag {
  color: var(--gw-schrift);
  font-size: 1.75rem;
  font-weight: 700;
  /* Der Rahmen ist die Aussage aus D-06. Er darf nicht am Zeilenende zwischen
     Zahl und Waehrungszeichen auseinanderfallen — das geschuetzte Leerzeichen
     kommt aus `geld.js`, hier steht die Absicherung fuer den Rest. */
  line-height: 1.3;
}

.gw-art {
  display: block;
  color: var(--gw-gedimmt);
  font-size: 0.9375rem;
}

/* Die Nettozeile unter dem Bruttobetrag (D-145). Kleiner und gedimmt: Brutto ist
   die Zahl, die der Endkunde zahlt, netto die, mit der der Betrieb kalkuliert.
   `color` und `background-color` stehen ausdruecklich hier und werden nicht
   geerbt — dieselbe Regel wie fuer jedes andere eigene Element (D-108). */
.gw-netto {
  display: block;
  color: var(--gw-gedimmt);
  font-size: 0.9375rem;
}

/* Der Steuerhinweis steht **ausserhalb** des Rahmenkastens, unter allen Rahmen:
   Er gilt fuer jede Abrechnungsart gleichzeitig, und einmal je Kasten wiederholt
   waere er Rauschen. Bewusst kein `:empty { display: none }` wie beim
   Disclaimer — dieser Absatz darf gar nicht leer sein, und wenn er es waere,
   soll die Luecke auffallen statt verschwinden. */
.gw-steuer {
  color: var(--gw-gedimmt);
  background-color: var(--gw-grund);
  margin: 0 0 var(--gw-abstand);
  font-size: 0.875rem;
}

.gw-disclaimer {
  color: var(--gw-schrift);
  background-color: var(--gw-flaeche);
  border-radius: var(--gw-radius);
  padding: 0.625rem 0.75rem;
  margin: var(--gw-abstand) 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Ein Absatz ohne Text darf keinen Kasten hinterlassen. Doppelt gesichert: Der
   DOM-Bau setzt zusaetzlich `hidden`, aber ein `[hidden] { display: block }` im
   Theme des Betriebs wuerde das aushebeln. */
.gw-disclaimer:empty {
  display: none;
}

.gw-hinweise {
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-hinweis-grund);
  color: var(--gw-schrift);
  padding: var(--gw-abstand);
  margin: var(--gw-abstand) 0 0;
}

.gw-hinweise-titel {
  color: var(--gw-schrift);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.gw-hinweise-liste {
  margin: 0;
  padding-left: 1.25rem;
}

/* --------------------------------------------------------------- Stoerung */

.gw-stoerung-text,
.gw-wartetext {
  color: var(--gw-schrift);
  margin: 0 0 0.75rem;
}

.gw-anfrage {
  display: inline-block;
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-akzent);
  border-radius: var(--gw-radius);
  background-color: var(--gw-akzent);
  color: var(--gw-akzent-schrift);
  font-weight: 600;
  padding: 0.625rem 1.125rem;
  text-decoration: none;
  margin: 0.25rem 0 0;
}

.gw-anfrage:hover,
.gw-anfrage:active {
  border-color: var(--gw-akzent-tief);
  background-color: var(--gw-akzent-tief);
  color: var(--gw-akzent-schrift);
  text-decoration: underline;
}

/* Der Umriss statt der Fuellung — im Stoerungsband ueber dem Kontaktformular.
   Sonst stehen dort zwei gefuellte Hauptknoepfe mit verschiedenen Zielen, und der
   auffaelligere ist der schlechtere: Er fuehrt aus dem ausgefuellten Formular
   heraus. Auf der Pruefseite sofort aufgefallen. */
.gw-anfrage--leise {
  border-color: var(--gw-akzent);
  background-color: var(--gw-fehler-grund);
  color: var(--gw-akzent);
  text-decoration: underline;
}

.gw-anfrage--leise:hover,
.gw-anfrage--leise:active {
  border-color: var(--gw-akzent-tief);
  background-color: var(--gw-fehler-grund);
  color: var(--gw-akzent-tief);
}

/* ----------------------------------------------------- Kontaktformular (04.10) */

.gw-kontaktblock {
  margin: 0;
}

/* Die Kontaktfelder duerfen breiter sein als die Zahlenfelder des Fragebogens:
   Eine E-Mail-Adresse in 14 rem ist nicht lesbar, und ein Feld, in dem der
   Anfang wegscrollt, wird falsch abgeschickt. */
.gw-felder--kontakt .gw-eingabe {
  max-width: 26rem;
}

/* Eine Postleitzahl in 26 rem laedt dazu ein, die ganze Anschrift hineinzutippen.
   Die Feldbreite ist die deutlichste Auskunft darueber, was erwartet wird — noch
   vor der Beschriftung. */
.gw-felder--kontakt .gw-eingabe[name="plz"] {
  max-width: 8rem;
}

.gw-felder--kontakt .gw-eingabe[name="telefon"] {
  max-width: 16rem;
}

.gw-eingabe--mehrzeilig {
  max-width: 100%;
  min-height: 7rem;
  /* Nur senkrecht: Waagerechtes Ziehen sprengt in einer fremden Seite das
     Layout des Betriebs, und das ist nicht unsere Flaeche. */
  resize: vertical;
}

/* Der Honigtopf (D-54, D-113).

   **Nicht `display: none` und nicht `hidden`.** Beides ueberspringen viele
   Automaten, und dann faengt der Topf nichts — er waere ein Feld, das niemand
   ausfuellt, also wertlos. Stattdessen abseits geschoben. Vom Auge nicht zu
   sehen, mit der Tastatur nicht zu erreichen (`tabindex="-1"` im DOM-Bau) und
   fuer Sprachausgaben nicht vorhanden (`aria-hidden`).

   Bewusst **anders** als `.gw-nur-vorlesen`: Das dort ist fuer Sprachausgaben da
   und soll gelesen werden. Hier soll gar nichts gelesen werden. */
.gw-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gw-datenschutz {
  color: var(--gw-gedimmt);
  background-color: var(--gw-grund);
  font-size: 0.875rem;
  margin: 0 0 var(--gw-abstand);
}

.gw-datenschutz-verweis {
  color: var(--gw-akzent);
  background-color: var(--gw-grund);
  text-decoration: underline;
}

/* Das Stoerungsband **ueber** dem Formular, nicht anstelle des Formulars: Die
   Nachricht des Endkunden bleibt stehen. Dieselbe Palette wie der Meldungsblock,
   weil es dieselbe Sorte Auskunft ist — etwas ging nicht. */
.gw-stoerungsband {
  border: 1px solid var(--gw-fehler);
  border-left-width: 4px;
  border-radius: var(--gw-radius);
  background-color: var(--gw-fehler-grund);
  color: var(--gw-schrift);
  padding: var(--gw-abstand);
  margin: 0 0 var(--gw-abstand);
}

.gw-stoerungsband .gw-stoerung-titel {
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
}

.gw-stoerungsband .gw-stoerung-text,
.gw-stoerungsband .gw-wartetext {
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------- Bestaetigung (04.10) */

.gw-bestaetigung-titel {
  color: var(--gw-schrift);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

/* Unter der Bestaetigung ist „Ihre Preiseinschaetzung" eine Ebene tiefer (der
   DOM-Bau macht daraus ein `h4`) — und muss auch so aussehen. Bei gleicher Groesse
   standen zwei gleichrangige Ueberschriften uebereinander, und der Blick fand
   nicht, was der Hauptsatz ist. Auf der Pruefseite gesehen. */
.gw-bestaetigung-titel ~ .gw-ergebnis-titel {
  font-size: 1.125rem;
}

.gw-bestaetigung-text {
  color: var(--gw-schrift);
  background-color: var(--gw-grund);
  margin: 0 0 var(--gw-abstand);
}

/* Der Rahmen hat sich zwischen Anzeige und Absenden geaendert. Kein Fehlerbild —
   es ist eine Auskunft, und der genannte Wert ist der richtige. */
.gw-abweichung {
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-hinweis-grund);
  color: var(--gw-schrift);
  padding: 0.625rem 0.75rem;
  margin: 0 0 var(--gw-abstand);
  font-size: 0.9375rem;
}

/* Der Weg zum eigenen Dokument. Als Knopf mit Umriss statt als Textverweis: Er
   steht neben „Direkt anfragen\" und braucht dieselbe Griffgroesse. */
.gw-pdf {
  display: inline-block;
  min-height: var(--gw-griff);
  border: 1px solid var(--gw-rand);
  border-radius: var(--gw-radius);
  background-color: var(--gw-grund);
  color: var(--gw-akzent);
  font-weight: 600;
  padding: 0.625rem 1.125rem;
  text-decoration: underline;
  margin: var(--gw-abstand) 0 0;
}

.gw-pdf:hover,
.gw-pdf:active {
  border-color: var(--gw-akzent);
  background-color: var(--gw-flaeche);
  color: var(--gw-akzent);
}

/* ----------------------------------------------------------------- Dienlich */

.gw-laedt {
  color: var(--gw-gedimmt);
  margin: 0;
}

/* Fuer Sprachausgaben da, fuer das Auge nicht. Nicht `display: none` — das
   nehmen Sprachausgaben ebenfalls heraus. */
.gw-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}