/* ==========================================================================
   DIE LEGENDE ZUR AUFBAUZEICHNUNG

   In jeder Aufbauzeichnung des Herstellers stehen graue Kreise mit A, B, C
   und D auf den Bauteilen. Ohne Legende sind sie stumm: Man sieht, DASS drei
   Teile bezeichnet sind, erfaehrt aber nicht, welches Teil welches ist. Bis
   zum 1. September 2026 stand auf der Seite genau das — die Zeichnung mit
   ihren Kreisen und kein Wort dazu.

   Der Text stammt aus dem bestehenden Auftritt (stanek-werbung.de, je eine
   Seite pro Ausfuehrung) und ist gegen die Zeichnungen geprueft: Jeder
   Buchstabe, der in einer Zeichnung vorkommt, hat einen Eintrag, und keiner
   steht in der Liste, den die Zeichnung nicht zeigt.

   DAS ZEICHEN IST EIN KREIS, KEINE AUFZAEHLUNG. Ein schlichtes "A)" waere
   eine Nummerierung wie jede andere; der Leser muesste selbst darauf kommen,
   dass es sich auf die Zeichnung daneben bezieht. Der Kreis nimmt die Form
   auf, die in der Zeichnung steht, und stellt die Verbindung ohne einen Satz
   Erklaerung her.

   NICHT als ol mit list-style, sondern mit eigenem Zeichen: Die Buchstaben
   sind keine Reihenfolge, sondern Namen. Bei EGOLIGHT 6 traegt die Zeichnung
   dreimal dasselbe A — eine Nummerierung wuerde daraus A, B, C machen und
   damit die Zeichnung verfaelschen.
   ========================================================================== */

/* --- Die Profile einer Gruppe ------------------------------------------- */
.profile {
  margin-top: 34px;
  border-top: 1px solid #24242a;
}

/* =============================================================================
   ENTWURFSSTAND — alles ab hier gehoert zum klickbaren Dummy.

   Die Seite dient derzeit der Gestaltung: Wege, die es noch nicht gibt
   (Projektseiten, Kontaktformular, Karriere), sind angelegt und bedienbar,
   ihre Inhalte aber ausdruecklich Platzhalter. Die Kennzeichnung folgt dem
   Konzept, das Fehlendes ebenfalls in eckige Klammern gesetzt hat.

   Vor dem Livegang zu entfernen: Abschnitt 15 (Kennzeichnung). Alles andere
   bleibt und wird nur mit echten Inhalten gefuellt.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   15. Kennzeichnung des Entwurfsstands
   -------------------------------------------------------------------------- */

/* Platzhaltertext im Fliesstext — bewusst sichtbar anders als echter Inhalt,
   damit beim Durchsehen niemand einen Beispielsatz fuer eine Aussage haelt. */
.ph {
  color: #6f6f78;
}

/* -----------------------------------------------------------------------------
   18. Formular (simuliert)
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 40px;
  max-width: 760px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #75756e;
  margin-bottom: 10px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #26262b;
  border-bottom-color: #3a3a42;
  padding: 13px 14px;
  transition: border-color 0.3s, background 0.3s;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--glow);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* Rueckmeldung nach dem simulierten Absenden. */
.form__result {
  margin-top: 40px;
  max-width: 760px;
  border: 1px solid #3a3a42;
  border-left: 2px solid var(--glow);
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.02);
}

.form__result h2 {
  font-size: 22px;
  margin-top: 0;
}

.form__result p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 12px;
}

/* Die Liste der übertragenen Unterlagen im Ergebnis (seit dem 22. Oktober
   2026): Jede Datei bekommt nach dem Absenden nacheinander ihren Haken, das
   Skript setzt dafür ist-da (js/anfrage.js, ftpUebertragen). */
.uebertragung {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

/* Bis 11.11.2026 stand hier eine Regel ".form__result div" aus der früheren
   Zusammenfassung (Zeilen nebeneinander, ohne Polster links und rechts). Sie
   traf diesen Kasten und drückte die Dateinamen an den rechten Rand. Die
   Klassenkette sticht ".ablauf-hell .form__result p" (mittig, schmal). */
.form__result .uebertragung .uebertragung__titel {
  max-width: none;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--mut);
}

.uebertragung__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uebertragung__zeile {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 15px;
  color: var(--txt);
  overflow-wrap: anywhere;
  opacity: 0.45;
  transition: opacity 0.4s;
}

.uebertragung__zeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--mut);
  border-radius: 50%;
  transition: border-color 0.3s, background 0.3s;
}

.uebertragung__zeile.ist-da {
  opacity: 1;
}

.uebertragung__zeile.ist-da::before {
  border-color: var(--glow);
  background: var(--glow);
  box-shadow: 0 0 10px rgba(255, 227, 176, 0.5);
}

@media (max-width: 700px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   20. Project Builder

   Neun Schritte, einer pro Ansicht. Die Leitregel aus dem Konzept lautet:
   einfach bleiben, niemanden durch technische Fragen abschrecken. Deshalb
   sind die ersten beiden Schritte reine Auswahl — geklickt, nicht getippt —
   und alles, was nicht zwingend gebraucht wird, laesst sich ueberspringen.
   -------------------------------------------------------------------------- */

.builder {
  padding: 0 var(--pad);
  margin-top: 46px;
  max-width: 780px;
}

.builder__kopf {
  border-bottom: 1px solid #24242a;
  padding-bottom: 18px;
}

.builder__stand {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
}

.builder__stand b {
  color: var(--glow);
  font-weight: normal;
}

/* Der Balken ist die einzige Stelle, die verraet, wie lang es noch dauert.
   Ohne ihn bricht bei einem neunstufigen Formular jeder Zweite ab. */
.builder__balken {
  height: 2px;
  background: #24242a;
  margin-top: 12px;
}

.builder__balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--glow);
  box-shadow: 0 0 12px rgba(255, 200, 140, 0.5);
  transition: width 0.4s;
}

.builder__schritt {
  border: 0;
  padding: 34px 0 0;
  margin: 0;
}

.builder__schritt[hidden] {
  display: none;
}

.builder__frage {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  color: #fff;
  padding: 0;
}

.builder__hinweis {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 12px;
  max-width: 560px;
}

.builder__navi {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid #24242a;
}

/* Der Rueckweg darf nicht so laut sein wie der Weg nach vorn. */
.button--leise {
  color: #83837c;
  border-color: #2c2c33;
}

.button--leise:hover {
  background: none;
  border-color: #46463e;
  color: var(--txt);
  box-shadow: none;
}

.builder__ueber {
  font: inherit;
  font-size: 13px;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
  background: none;
  border: 0;
  border-bottom: 1px solid #2c2c33;
  padding: 0 0 3px;
  cursor: pointer;
  margin-left: auto;
}

.builder__ueber:hover {
  color: var(--txt);
  border-bottom-color: #46463e;
}

/* Fehlermeldung statt Browserblase: die steht sonst am falschen Feld und
   verschwindet, sobald man sie lesen will. */
.builder__fehler {
  font-size: 13px;
  color: #ff9d7a;
  margin-top: 18px;
}

.builder__fehler[hidden] {
  display: none;
}

.uebersicht dd.ist-leer {
  color: #5c5c58;
}

@media (max-width: 900px) {
  .builder {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }
}

@media (max-width: 620px) {

  .builder__ueber {
    margin-left: 0;
  }
}

/* -----------------------------------------------------------------------------
   25. Anfrage leicht gemacht

   Der Ablauf benutzt die Formsprache des Project Builders (.builder__*,
   .wahl__*, .field) — es ist aus Sicht des Besuchers derselbe Vorgang, und
   zwei verschiedene Formularoptiken auf einer Website wirken wie zwei
   verschiedene Firmen. Hier steht nur, was dort nicht vorkommt.
   -------------------------------------------------------------------------- */

/* Der Hinweis auf einen gefundenen Stand. Steht ueber dem ersten Schritt und
   sagt offen, dass etwas wiederhergestellt wurde — stillschweigend
   ausgefuellte Felder wirken unheimlich. */
.anfrage__fortsetzen {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--glow);
  background: var(--bg-alt);
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
}

.anfrage__fortsetzen[hidden] {
  display: none;
}

/* Das Preisversprechen im Ablauf. Es benutzt die Optik des Zusagenkastens
   vom Terminweg (.buchen__zusage) — dieselbe Zusage soll auch gleich
   aussehen. Hier nur die Einpassung: Es steht zwischen Fortschrittsbalken
   und erster Frage und braucht nach unten mehr Luft als nach oben, damit es
   sich nicht an die Frage klebt. */
.anfrage__zusage {
  margin-top: 22px;
  margin-bottom: 30px;
  text-align: left;
}

.anfrage__zusage-titel {
  display: block;
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 200;
  line-height: 1.15;
  color: var(--glow);
}

.anfrage__kachel {
  height: 190px;
  /* .project bringt min-width: 280px mit — sinnvoll in der Galerie, hier
     nicht: das Raster steht in einer 780 px schmalen Spalte, und drei
     Kacheln zu je 280 px passen dort nicht nebeneinander. Ohne das
     schoeben sie sich uebereinander. */
  min-width: 0;
}

/* Auf diesen Kacheln liegt kein Link — sie fuehren bewusst nirgendwohin.
   Wer mitten in einer Anfrage steht, soll nicht mit einem Fehlklick auf
   einer Projektseite landen und den Faden verlieren. */
.anfrage__kachel .project__title {
  font-size: 17px;
}

/* Oben rechts statt unten rechts. Diese Kacheln sind schmal — rund 215 px
   im dreispaltigen Raster —, und dort unten stossen Beschriftung und Knopf
   aufeinander. Oben ist die Flaeche frei. */
.anfrage__kachel .auswahl__weg {
  top: 12px;
  right: 12px;
  bottom: auto;
  padding: 7px 11px;
  font-size: 8px;
}

/* --- Schritt 8: der Terminwunsch ------------------------------------------ */

/* Abgesetzt vom Rest, weil hier spaeter ein Buchungssystem einsetzt. Der
   Block ist die Naht: er wird als Ganzes ersetzt, nicht umgebaut. */
.anfrage__termin {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.anfrage__termin[hidden] {
  display: none;
}

/* Der Kalender steht seit dem 13. Oktober 2026 mittig in der Spalte (Wunsch
   der Auftraggeberin), nicht mehr am linken Rand. */
.anfrage__termin .termin__kalender {
  margin-left: auto;
  margin-right: auto;
}

.anfrage__termin .termin__legende {
  justify-content: center;
}

.anfrage__termin .anfrage__terminhinweis {
  margin-left: auto;
  margin-right: auto;
}

.anfrage__terminkopf {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--glow);
}

.anfrage__terminhinweis {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #75756e;
  max-width: 520px;
}

/* --- Was bisher zusammenkam ----------------------------------------------- */

/* Steht unter dem Formular, ab Schritt 2. Wer acht Schritte durchlaeuft,
   will sehen koennen, was er schon gesagt hat, ohne zurueckzublaettern —
   und beim letzten Schritt ist es die Kontrolle vor dem Absenden. */
/* Die Anfrage liegt im Browser des Besuchers — es sind seine Daten, und er
   muss sie loswerden koennen. Der Knopf steht darum sichtbar da und nicht
   im Kleingedruckten. Leise gestaltet: er ist ein Ausweg, kein Angebot. */
.anfrage__loeschen {
  margin-top: 22px;
}

@media (max-width: 620px) {

  .anfrage__kachel {
    height: 210px;
  }
}


/* =============================================================================
   29. Referenzen — Galerie und Grossansicht

   DREI KACHELN NEBENEINANDER, NICHT VIER. Bis zum 2. September 2026 standen
   hier vier Kacheln von 260 px Hoehe. Das war auf Menge gerechnet: viele
   kleine Bilder, die zusammen „viel gebaut" sagen. Die Auftraggeberin hat
   das umgedreht — die Bilder sollen gross und hochwertig wirken, drei
   nebeneinander statt einer kleinteiligen Wand. Eine Kachel ist damit rund
   anderthalbmal so breit.

   FESTES SEITENVERHAELTNIS STATT FESTER HOEHE. Mit `height: 260px` wurde
   jedes Bild auf einen schmalen Streifen beschnitten, und je breiter der
   Bildschirm, desto mehr fiel oben und unten weg. `aspect-ratio: 4 / 3`
   waechst dagegen mit der Spalte mit: der Ausschnitt bleibt derselbe, das
   Bild wird nur groesser. Die Vorlagen sind bis zu 1600 px breit und tragen
   diese Groesse ohne sichtbaren Verlust.

   Die Kacheln fuehren nirgendwohin: zu diesen Anlagen gibt es keine eigene
   Seite. Ein Klick oeffnet das Bild gross. Deshalb liegt ueber der Kachel
   ein Knopf und kein Verweis — ein <a> ohne Ziel waere gelogen, und die
   Tastaturbedienung bekaeme ein Element, das sich nicht wie ein Link verhaelt.
   ========================================================================== */

.lupe__zu,
.lupe__link {
  font: inherit;
  font-size: 13px;
  color: var(--mut);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.lupe__zu:hover,
.lupe__link:hover {
  color: var(--txt);
  border-color: #34343a;
}

@media (prefers-reduced-motion: reduce) {
  /* Steht gleich auch in basis.css, projekte.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .lupe__zu,
  .lupe__link,
  .lupe__blaettern {
    transition: none;
  }
}


/* =============================================================================
   35. Projektraum erstellen — Registrierung, Auswahlkarten, Kalender

   Der Anfrageablauf endet nicht mehr mit einem abgeschickten Formular,
   sondern mit einem eigenen Projektraum. Daraus folgen drei Bausteine, die
   es vorher nicht gab.
   ========================================================================== */

/* --- Die Unterlagen als eigener Schritt (seit dem 15. Oktober 2026) --------
   Die sechs Punkte stehen jetzt direkt im Ablauf, nicht mehr im Fenster
   #unterlagen. Die Punkte selbst (.posten, .punkt, .ablage, .auswahl) sind
   unverändert, hier nur die Einpassung in den Schritt. */
.unterlagen {
  margin-top: 8px;
}

.builder__hinweis--mittig {
  margin-left: auto;
  margin-right: auto;
}

/* --- Die Projektübersicht vor dem Zugang ------------------------------------
   Erster Bildschirm der Projektanfrage: links die Liste dessen, was gefallen
   hat, rechts das gewählte Bild in groß. Breiter als der Ablauf danach, weil
   hier ein Bild wirken soll und kein Feld ausgefüllt wird. */
.vorab {
  max-width: 1040px;
  margin: 0 auto;
  padding: 110px var(--pad-sm) 0;
}

.vorab[hidden] {
  display: none;
}

.vorab > .eyebrow,
.vorab__titel {
  text-align: center;
}

.vorab__titel {
  font-size: clamp(24px, 3vw, 32px);
  margin: 6px 0 0;
  color: #fff;
}

.vorab__titel:focus,
.reg__titel:focus {
  outline: none;
}

.vorab__spalten {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 36px;
}

/* Ohne Auswahl gibt es rechts nichts zu zeigen. Dann steht die linke Spalte
   allein in der Mitte. */
.vorab__spalten.ist-leer {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  text-align: center;
}

.vorab__zahl {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--glow);
}

.vorab__liste {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 392px;
  overflow-y: auto;
}

.vorab__liste:empty {
  display: none;
}

.vorab__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vorab__wahl {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.vorab__wahl:hover {
  border-color: #46463e;
}

.vorab__wahl[aria-pressed="true"] {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.08);
}

.vorab__wahl img {
  flex: 0 0 auto;
  width: 68px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}

.vorab__text {
  min-width: 0;
}

.vorab__name,
.vorab__art {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vorab__name {
  font-size: 14px;
  color: #fff;
}

.vorab__art {
  margin-top: 2px;
  font-size: 12px;
  color: var(--mut);
}

.vorab__weg {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  font: inherit;
  font-size: 19px;
  line-height: 1;
  color: var(--mut);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.vorab__weg:hover {
  color: var(--glow);
  border-color: var(--glow);
}

.vorab__wahl:focus-visible,
.vorab__weg:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

.vorab__mehr {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
}

.vorab__mehr + .button {
  display: inline-block;
  margin-top: 12px;
}

.vorab__gross {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
}

.vorab__gross[hidden] {
  display: none;
}

.vorab__gross img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vorab__gross.ist-ganz img {
  object-fit: contain;
}

.vorab__gross figcaption {
  padding: 14px 18px 16px;
  font-size: 13px;
  color: var(--mut);
}

.vorab__gross figcaption strong {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
}

.vorab__fuss {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.vorab__hinweis {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mut);
}

.vorab__fuss .button {
  margin-top: 20px;
}

@media (max-width: 760px) {
  .vorab__spalten {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Oben links liegt auf dem Telefon der Knopf "Zurück". */
  .vorab {
    padding-top: 136px;
  }

  /* Auf dem Telefon zuerst das Bild, darunter die Liste. */
  .vorab__gross {
    order: -1;
  }

  .vorab__liste {
    max-height: none;
  }
}

/* --- Die sechs Punkte im Fenster "Deine Unterlagen" -------------------------
   Seit dem 13. Oktober 2026 (Wunsch der Auftraggeberin): Statt sieben
   gleichförmiger Felder untereinander eine nummerierte Liste. Links die
   Ziffer, rechts Überschrift und das, was man für den Punkt braucht. Dateien
   bekommen eine gestrichelte Ablage, Entscheidungen eine Auswahl aus runden
   Knöpfen. Das Fenster ist dafür etwas breiter. */

.posten {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.punkt {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid #2c2c32;
}

.punkt:last-child {
  padding-bottom: 0;
}

.punkt__nr {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5a5340;
  border-radius: 50%;
  font-size: 14px;
  color: var(--glow);
}

/* Ohne min-width: 0 drückt ein langer Dateiname die Spalte auf. */
.punkt__inhalt {
  min-width: 0;
}

.punkt__titel {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  padding-top: 6px;
  color: #fff;
}

.punkt__kurz {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mut);
}

/* Zwischenfrage innerhalb eines Punkts, etwa bei der Baugenehmigung
   (19. Oktober 2026). Sieht aus wie die Beschriftung eines Feldes. */
.punkt__unter {
  margin: 16px 0 0;
  font-size: 13px;
  color: #d8d8d2;
}

.punkt__unter + .auswahl {
  margin-top: 9px;
}

.punkt__felder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.punkt .field,
.punkt__felder,
.punkt .ablage,
.punkt .auswahl {
  margin-top: 14px;
}

.punkt__felder .field {
  margin-top: 0;
}

/* Feld mit fester Einheit rechts im Feld (seit dem 22. Oktober 2026, Breite
   und Höhe in Zentimetern im Schritt Fast geschafft!, Punkt 3). */
.field--einheit {
  position: relative;
}

.field--einheit input {
  padding-right: 48px;
}

.field__einheit {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: 14px;
  color: var(--mut);
  pointer-events: none;
}

/* Punkt 5 zeilenweise (19. Oktober 2026): vorne die Stückzahl, schmal,
   dahinter die Ausführung, rechts das X zum Entfernen. Auf dem Telefon
   bleibt die Zeile nebeneinander, die Stückzahl braucht nur wenig Platz. */
.posten {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.posten__zeile {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: end;
}

.posten .field {
  margin-top: 0;
}

.posten__weg {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  padding: 0;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--mut);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.posten__weg:hover,
.posten__weg:focus-visible {
  color: var(--glow);
  border-color: var(--glow);
  outline: none;
}

.posten__weg[hidden] {
  display: block;
  visibility: hidden;
}

/* Die aufklappende Liste im Feld Ausführung (seit dem 22. Oktober 2026,
   Wunsch der Auftraggeberin): Beim Klick ins Feld erscheinen darunter alle
   Ausführungen in drei Gruppen, das Skript (js/anfrage.js, unterlagenAnschliessen)
   füllt sie aus den Aufklappern darunter. */
.posten__art {
  position: relative;
}

/* Seit dem 19. Oktober 2026 eine gestrichelte Fläche über die ganze Breite
   statt eines unterstrichenen Wortes (Wunsch der Auftraggeberin): Sie soll
   sich von den drei Aufklappern darunter klar unterscheiden und sieht aus
   wie der Platz für eine weitere Zeile. */
.posten__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 22px;
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--glow);
  background: rgba(255, 227, 176, 0.04);
  border: 1px dashed rgba(255, 227, 176, 0.45);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.posten__plus:hover,
.posten__plus:focus-visible {
  background: rgba(255, 227, 176, 0.1);
  border-color: var(--glow);
  border-style: solid;
  outline: none;
}

@media (max-width: 560px) {
  .posten__zeile {
    grid-template-columns: 84px minmax(0, 1fr) 36px;
    gap: 8px;
  }
}

.lichtvorschau__gemerkt {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--glow);
}

.lichtvorschau__gemerkt[hidden] {
  display: none;
}

/* Die Ablage. Das echte Feld liegt unsichtbar über der ganzen Fläche: So
   reicht ein Klick irgendwohin, und hineingezogene Dateien nimmt der Browser
   von selbst an. */
.ablage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 18px;
  border: 1px dashed #4a4a52;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.ablage:hover,
.ablage.ist-gefuellt {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.06);
}

.ablage:focus-within {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

.ablage__feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ablage__zeichen {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4a4a52;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 200;
  color: var(--glow);
}

.ablage__wort {
  font-size: 14.5px;
  color: var(--txt);
}

.ablage__klein {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a8a82;
  overflow-wrap: anywhere;
}

.ablage.ist-gefuellt .ablage__klein {
  color: var(--glow);
}

/* Die Auswahl: runde Knöpfe nebeneinander. Der Radioknopf bleibt im Markup,
   sonst gehen Pfeiltasten und Vorlesefunktion verloren, er ist nur
   unsichtbar. */
.auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auswahl__opt {
  position: relative;
  cursor: pointer;
}

.auswahl__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.auswahl__opt > span {
  display: block;
  padding: 11px 18px;
  border: 1px solid #4a4a52;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 14.5px;
  color: var(--txt);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.auswahl__opt:hover > span {
  border-color: #6a6a72;
  background: rgba(255, 255, 255, 0.08);
}

.auswahl__opt input:checked + span {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.12);
  color: var(--glow);
}

.auswahl__opt input:focus-visible + span {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

/* --- Die Profile zum Aufklappen (Punkt 5, seit dem 15. Oktober 2026) -------
   Ein <details> ohne Skript. Die Auswahl darunter sind dieselben runden
   Knöpfe wie bei Montage oder Lieferung, nur mit Name und kurzer Erklärung
   und darum als Kacheln statt als Pillen. */
.profile {
  margin-top: 14px;
  border-top: 0; /* die ältere Regel .profile weiter oben zieht sonst eine Linie */
}

.profile summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  font-size: 13.5px;
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile summary::-webkit-details-marker {
  display: none;
}

/* In Punkt 5 von "Fast geschafft!" weiß statt in der Lichtfarbe
   (19. Oktober 2026, Wunsch der Auftraggeberin). */
.punkt .profile summary {
  color: #fff;
}

.profile summary::before {
  content: "+ ";
}

.profile[open] summary::before {
  content: "− ";
}

/* Drei Aufklapper untereinander, einer je Lösungsseite (seit dem 15. Oktober
   2026 einzeln: Leuchtbuchstaben, Leuchtkästen, Pylone). */
.profile + .profile {
  margin-top: 8px;
}

.punkt .profile .auswahl {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.auswahl--profile .auswahl__opt > span {
  height: 100%;
  padding: 11px 14px;
  border-radius: 10px;
}

.auswahl--profile strong {
  display: block;
  font-weight: 400;
  color: #fff;
}

.auswahl--profile small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mut);
}

.auswahl--profile .auswahl__opt input:checked + span strong {
  color: var(--glow);
}

/* Die beiden Skizzen je Variante, Ansicht und Aufbau, wie auf der Seite
   Leuchtbuchstaben. Die Zeichnungen dürfen nicht beschnitten werden, deshalb
   gegen die globale Bildregel: feste Fläche, Bild darin eingepasst. */
.profil__bilder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.profil__bild {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  align-items: center;
  justify-content: center;
  height: 118px;
  padding: 10px 10px 22px;
  box-sizing: border-box;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.profil__bild img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

/* Die Pylonschnitte sind reine Umrisse, dunkler Strich auf durchsichtigem
   Grund. Wie auf der Pylone-Seite (.karte__feld--umriss) werden sie
   umgekehrt, damit weiße Linien daraus werden. */
.profil__bild--umriss img {
  filter: invert(1) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.profil__wort {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 520px) {

  .punkt {
    grid-template-columns: 28px 1fr;
    gap: 12px;
  }

  .punkt__nr {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .punkt__titel {
    font-size: 16px;
    padding-top: 4px;
  }

  .punkt__felder {
    grid-template-columns: 1fr;
  }
}

/* --- Auswahlkarten ---------------------------------------------------------
   Der Auftrag verlangt, dass mehrere Loesungen gleichzeitig waehlbar sind
   UND dass sofort erkennbar bleibt, was gewaehlt ist. Die bisherige Fassung
   markierte nur mit einer feinen Linie — bei fuenf gewaehlten Karten musste
   man suchen. Jetzt tragen gewaehlte Karten drei Zeichen zugleich: Haken,
   heller Rahmen, aufgehellter Grund.
   -------------------------------------------------------------------------- */

.wahl--karten {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Bleibt am Ende eine Karte allein übrig, nimmt sie die ganze Zeile ein,
   statt links neben einer Lücke zu stehen. */
.wahl.wahl--karten > :last-child:nth-child(odd),
.wahl.wahl--schmal > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Die Zelle um Karte und "Ansehen" hat keinen eigenen Grund mehr, sonst
   schaut er an den runden Ecken hervor. Der Knopf rückt in die Mitte. */
.wahl.wahl--schmal .wahl__zelle {
  background: none;
}

.wahl.wahl--ansehen .wahl__zelle > .wahl__opt {
  padding-bottom: 60px;
}

.wahl.wahl--schmal .wahl__ansehen {
  left: 50%;
  transform: translateX(-50%);
}

/* --- Beleuchtung: der freiwillige Teil ------------------------------------- */

.wahl__unter {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.wahl__unterkopf {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
  margin-bottom: 10px;
}

/* "freiwillig" steht direkt am Titel und nicht im Kleingedruckten — es ist
   die Auskunft, die den Schritt kurz macht. */
.wahl__unterkopf span {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  letter-spacing: 0.18em;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #6c6c66) */
}

/* --- Lichtwirkung ansehen --------------------------------------------------
   Der Knopf "Ansehen" liegt in einer eigenen Zelle über der Karte, nicht in
   ihr: Ein Knopf innerhalb des Labels würde beim Klick die Karte auswählen,
   und wer nur nachsehen will, hätte sich damit schon entschieden. Die Zelle
   ist der Kasten, das Label füllt ihn ganz aus, der Knopf liegt darüber.
   -------------------------------------------------------------------------- */

.wahl__zelle {
  position: relative;
  display: flex;
  background: var(--bg);
}

/* Das Label trägt weiterhin Grund, Hover und Haken. Unten bleibt Platz für
   den Knopf, damit er nicht auf dem Text sitzt. */
.wahl__zelle > .wahl__opt {
  flex: 1 1 auto;
}

/* Platz für den Knopf entsteht erst, wenn es ihn gibt: Die Klasse setzt das
   Skript. Ohne Skript bleibt der Knopf ausgeblendet, und die Karte hätte
   sonst einen leeren Streifen unter dem Text. */
.wahl--ansehen .wahl__zelle > .wahl__opt {
  padding-bottom: 54px;
}

.wahl__ansehen {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8f88;
  cursor: pointer;
  transition: color 0.2s;
}

/* Das Dreieck wird gezeichnet und nicht gesetzt: ein Zeichen aus der Schrift
   sitzt je nach Schriftart anders hoch. */
.wahl__ansehen::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}

.wahl__ansehen:hover,
.wahl__ansehen:focus-visible {
  color: var(--glow);
}

.wahl__ansehen[aria-expanded="true"] {
  color: var(--glow);
}

.wahl__ansehen[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Die Vorschau selbst. Sie steht unter den Karten, im selben Schritt, und
   schiebt nur den Rest des Formulars nach unten. */
.lichtvorschau {
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 22px 24px 20px;
  animation: lichtvorschauAuf 0.28s ease;
}

.lichtvorschau[hidden] {
  display: none;
}

@keyframes lichtvorschauAuf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Seit dem 19. Oktober 2026 ohne Foto: oben der Text, darunter die
   passenden Ausführungen zum Aufklappen. Die Spalten von vorher sind weg. */
.lichtvorschau__blatt {
  margin: 0;
  display: block;
}

.lichtvorschau .profile .auswahl {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.lichtvorschau__blatt[hidden] {
  display: none;
}

.lichtvorschau__blatt img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

.lichtvorschau__blatt figcaption,
.lichtvorschau__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
}

.lichtvorschau__blatt figcaption strong,
.lichtvorschau__text strong {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--txt);
  margin-bottom: 8px;
}

.lichtvorschau__zu {
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8f88;
  cursor: pointer;
  transition: color 0.2s;
}

.lichtvorschau__zu:hover,
.lichtvorschau__zu:focus-visible {
  color: var(--glow);
}

/* Nebeneinander braucht Breite. Darunter steht das Bild über dem Text, sonst
   bleibt von beidem zu wenig übrig. */
@media (max-width: 760px) {
  .lichtvorschau {
    padding: 18px 18px 16px;
  }

  .lichtvorschau__blatt {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lichtvorschau {
    animation: none;
  }

  .wahl__ansehen::after {
    transition: none;
  }
}

/* --- Formular, gestapelt --------------------------------------------------- */

/* Kontaktdaten stehen untereinander, nicht zweispaltig: vier kurze Felder in
   zwei Spalten lesen sich als Tabelle, untereinander als Liste — und eine
   Liste arbeitet man schneller ab. */
.form--gestapelt {
  grid-template-columns: 1fr;
  max-width: 480px;
}

/* --- Kalender (Platzhalter) -------------------------------------------------
   HIER SETZT DER ECHTE KALENDER EIN. Dieser Block wird durch die
   Buchungsansicht des Anbieters ersetzt; alles ringsum bleibt stehen. Die
   Flaeche ist so bemessen, dass ein ueblicher Monatskalender hineinpasst,
   damit sich das Layout beim Einbau nicht verschiebt.
   -------------------------------------------------------------------------- */

.termin__kalender {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 20px;
  max-width: 380px;
}

.termin__monat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--txt);
  margin-bottom: 16px;
}

.termin__pfeile span {
  margin-left: 12px;
  color: #6c6c66;
}

.termin__wochentage,
.termin__tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.termin__wochentage span {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5f5f58;
  padding-bottom: 8px;
}

.termin__tage span {
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--mut);
  border: 1px solid transparent;
  border-radius: 2px;
}

/* Wochenenden gedaempft, freie Termine hervorgehoben — nur so viel, dass die
   Flaeche wie ein Kalender liest und nicht wie ein Zahlenraster. */
.termin__tage .aus {
  color: #47474f;
}

.termin__tage .frei {
  color: var(--glow);
  border-color: rgba(255, 227, 176, 0.35);
}

.termin__legende {
  margin-top: 16px;
  font-size: 11.5px;
  color: #6c6c66;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.termin__legende .frei {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 227, 176, 0.5);
  border-radius: 2px;
}

@media (max-width: 700px) {

  .termin__kalender {
    max-width: none;
  }
}

/* =============================================================================
   36. Fotos zur Stoerungsmeldung — Flaeche, Vorschau, Liste

   Der wichtigste Baustein von service-melden.html. Ein Bild der dunklen
   Anlage beantwortet Fragen, die im Formular gar nicht gestellt werden.

   Die Flaeche ist gross und gestrichelt: Sie soll aussehen, als koenne man
   etwas hineinlegen. Ein blosser Knopf "Datei auswaehlen" wird auf dem
   Telefon uebersehen, und am Rechner zieht niemand darauf.
   ========================================================================== */

.upload {
  margin-top: 18px;
}

/* Das echte Feld ist unsichtbar, aber NICHT display:none — sonst laesst es
   sich nicht mehr per Tastatur erreichen. Es liegt unter der Flaeche, die
   als <label> damit verbunden ist. */
.upload__feld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload__flaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 24px;
  border: 1px dashed #3a3a42;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.012);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.upload__flaeche:hover,
.upload.ist-bereit .upload__flaeche {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.06);
}

/* Der Fokusrahmen gehoert an die Flaeche, nicht an das versteckte Feld —
   sichtbar ist die Flaeche. */
.upload__feld:focus-visible + .upload__flaeche {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

.upload__zeichen {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 200;
  color: var(--glow);
}

.upload__wort {
  font-size: 14px;
  color: var(--txt);
}

.upload__klein {
  font-size: 12px;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #6c6c66) */
}

/* --- Die gewaehlten Bilder -------------------------------------------------- */

.upload__liste {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.upload__bild {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
}

.upload__bild img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.upload__name {
  display: block;
  padding: 9px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mut);
  word-break: break-word;
}

.upload__weg {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--txt);
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.upload__weg:hover {
  color: var(--bg);
  background: var(--glow);
  border-color: var(--glow);
}

.upload__hinweis {
  margin-top: 12px;
  font-size: 12.5px;
  color: #ff9a8a;
}

.upload__hinweis[hidden] {
  display: none;
}

/* =============================================================================
   38. Fuenfzehn Minuten — der dreiseitige Terminweg

   Gehoert zu termin.html, termin-kontakt.html und termin-buchen.html. Der
   Weg beginnt im Menue unter "Projektanfrage → Beratungstermin
   vereinbaren" und an der dritten Karte am Ende von full-service.html.

   WARUM EIGENE FELDER (.feld-hell) UND NICHT .field AUS ABSCHNITT 18:
   Ausdrueckliche Vorgabe — die Eingabefelder dieses Weges sollen heller und
   freundlicher sein als die uebrigen Formulare der Website. Der Unterschied
   ist absichtlich und besteht aus drei Dingen:

     1. Heller Grund. .field steht auf rgba(255,255,255,0.03) und
        verschwindet fast im Seitenhintergrund; hier sind es 0.07 mit einem
        helleren Rahmen. Das Feld sieht aus wie etwas, in das man schreibt.
     2. Lesbare Beschriftung. .field beschriftet in 9 px Grossbuchstaben mit
        0.3em Sperrung — praezise, aber unwirsch. Hier steht ein normaler
        Satz in normaler Groesse.
     3. Runde Ecken und mehr Luft. Der Rest der Website ist kantig; an dieser
        einen Stelle ist das gewollt gebrochen.

   Die uebrigen Formulare bleiben unveraendert. Wer diesen Stil dort auch
   haben will, aendert nicht .field, sondern vergibt .feld-hell zusaetzlich —
   sonst kippt das Erscheinungsbild der ganzen Website mit einer Regel.

   MITTIG: Der ganze Weg steht in einer schmalen Spalte in der Seitenmitte.
   Wer einen Termin bucht, soll nichts anderes sehen — dieselbe Ueberlegung
   wie beim Anmeldekasten (.reg__kasten, Abschnitt 35).

   NICHT ZENTRIERT IST DER TEXT IN DEN FELDERN SELBST: Beschriftungen und
   Ueberschriften stehen mittig, die Eingabe steht links. Eine mittig
   laufende E-Mail-Adresse springt bei jedem Zeichen um eine halbe Breite —
   das liest sich beim Tippen wie ein Fehler.
   ========================================================================== */

/* --- Die Zusage ------------------------------------------------------------
   Der Preisschaetzungs-Satz. Er steht auf allen drei Seiten, damit er in
   keinem Schritt aus dem Blick geraet — auf Schritt 1 ausfuehrlich, danach
   in der schmalen Fassung.
   -------------------------------------------------------------------------- */

/* Steht gleich auch in formulare.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.buchen__zusage {
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 227, 176, 0.3);
  background: rgba(255, 227, 176, 0.055);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt);
}

/* Steht gleich auch in formulare.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.buchen__zusage--schmal {
  padding: 14px 18px;
  font-size: 13.5px;
}

/* =============================================================================
   39. Gefuehrte Ablaeufe in der hellen Fassung

   Gilt fuer anfrage.html (Projektraum erstellen) und service-melden.html
   (Wartung oder Service anfragen). Beide tragen dafuer die Klasse
   `ablauf-hell` am <body>.

   WAS SIE MACHT: Sie bringt die beiden aelteren Ablaeufe auf dieselbe
   Gestaltung wie den Terminweg (Abschnitt 38) — schmale Spalte in der
   Seitenmitte, hellere und freundlichere Eingabefelder. Ausdrueckliche
   Vorgabe der Auftraggeberin.

   WARUM UEBER EINE KOERPERKLASSE UND NICHT DURCH UMBAU DES MARKUPS:
   Die beiden Seiten haben zusammen ueber siebzig Felder, Karten und
   Zwischenueberschriften. Jedes einzeln umzuhaengen waere ein Eingriff in
   Markup, das ein Skript bedient (js/anfrage.js, Abschnitte 17-19 und 24-25) —
   und jeder Handgriff daran eine Gelegenheit, den Ablauf zu zerbrechen. Die
   Klasse aendert nur das Aussehen und laesst jedes Attribut, jede id und
   jeden Haken unberuehrt.

   WAS ABSICHTLICH NICHT ZENTRIERT WIRD: der Text in den Feldern und in den
   Auswahlkarten. Eine mittig laufende E-Mail-Adresse springt beim Tippen bei
   jedem Zeichen; eine mittig gesetzte Kartenbeschreibung liest sich als
   Gedicht. Zentriert sind Ueberschriften, Fragen und Beschriftungen.
   ========================================================================== */

/* --- Die Spalte ------------------------------------------------------------
   Breiter als der Terminweg (520 px): Hier stehen Auswahlkarten nebeneinander,
   und .wahl--karten braucht ab 230 px je Karte. Unter 620 px fiele jede Karte
   in eine eigene Zeile, und aus vier Bauarten wuerde eine lange Liste.
   -------------------------------------------------------------------------- */

.ablauf-hell .builder {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-sm);
  padding-right: var(--pad-sm);
}

.ablauf-hell .builder__kopf,
.ablauf-hell .builder__hinweis,
.ablauf-hell .builder__fehler,
.ablauf-hell .anfrage__terminkopf,
.ablauf-hell .anfrage__terminhinweis,
.ablauf-hell .reg__satz,
.ablauf-hell .reg__klein,
.ablauf-hell .anfrage__fortsetzen {
  text-align: center;
}

/* <legend> nimmt seine Breite sonst vom Text und stuende dann links. */
.ablauf-hell .builder__frage {
  display: block;
  width: 100%;
  text-align: center;
}

/* Über der Frage steht nichts außer der
   Fortschrittsanzeige. Etwas Luft dazwischen, damit die Frage nicht am
   Balken klebt (Wunsch der Auftraggeberin, 13. Oktober 2026). Seit dem
   15. Oktober 2026 auf beiden Seiten: Der Kasten "15-Minuten-Erstgespräch"
   steht bei der Projektanfrage nur noch auf dem Terminschritt, davor ist
   die Frage dort genauso nah am Balken wie bei Wartung und Service. Als Außen-
   abstand, weil der Innenabstand eines <fieldset> erst unter der <legend>
   wirkt. */
.ablauf-hell .builder__schritt {
  margin-top: 32px;
}

.ablauf-hell .builder__navi {
  justify-content: center;
}

/* --- Die Felder ------------------------------------------------------------
   Dieselben drei Aenderungen wie bei .feld-hell in Abschnitt 38: hellerer
   Grund, lesbare Beschriftung statt 9-px-Grossbuchstaben, runde Ecken und
   mehr Luft. Hier als Ueberschreibung von .field, weil das Markup bleibt.
   -------------------------------------------------------------------------- */

.ablauf-hell .form,
.ablauf-hell .form--gestapelt {
  grid-template-columns: 1fr;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

/* LINKSBUENDIG, NICHT ZENTRIERT. Bis zum 1. September 2026 standen "Name",
   "E-Mail" und die uebrigen Beschriftungen mittig ueber ihren Feldern. Die
   Auftraggeberin hat sie nach links geholt, und das ist auch sachlich
   richtig: Das Feld darunter beginnt links, der eingetippte Text beginnt
   links, und das Auge sucht die naechste Zeile immer an derselben Kante.
   Eine zentrierte Beschriftung ueber einem linksbuendigen Feld setzt fuer
   jedes Feld eine neue Kante — bei vier Feldern untereinander wird daraus
   eine Zickzacklinie.

   Die Frage, der Hinweis und die Fehlermeldung bleiben mittig: Die gehoeren
   zum ganzen Schritt und nicht zu einem einzelnen Feld. */
.ablauf-hell .field label {
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: #d8d8d2;
  margin-bottom: 9px;
  text-align: left;
}

.ablauf-hell .field input,
.ablauf-hell .field select,
.ablauf-hell .field textarea {
  font-size: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #4a4a52;
  border-radius: 10px;
  padding: 15px 18px;
}

.ablauf-hell .field input::placeholder,
.ablauf-hell .field textarea::placeholder {
  color: #82827b;
}

.ablauf-hell .field input:hover,
.ablauf-hell .field select:hover,
.ablauf-hell .field textarea:hover {
  background: rgba(255, 255, 255, 0.09);
}

.ablauf-hell .field input:focus,
.ablauf-hell .field select:focus,
.ablauf-hell .field textarea:focus {
  border-color: var(--glow);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(255, 227, 176, 0.16);
}

/* --- Auswahlkarten ----------------------------------------------------------
   Die Karten bleiben, wie sie sind — sie sind bereits hell genug und tragen
   ihren eigenen Zustand (.is-gewaehlt). Nur die Ecken werden rund, damit sie
   neben den Feldern nicht wie ein Fremdkoerper stehen.
   -------------------------------------------------------------------------- */

.ablauf-hell .wahl__opt {
  border-radius: 10px;
}

.ablauf-hell .wahl__haken {
  border-radius: 50%;
}

/* --- Die Seite nach dem Abschicken ------------------------------------------
   Seit dem 13. Oktober 2026 (Wunsch der Auftraggeberin): Der Kasten klebte
   oben an der Leiste und sah mit seinem linken Strich nach Fehlermeldung aus.
   Jetzt steht er mit Luft nach oben mittig, rund wie die Auswahlkarten, und
   der Text läuft mittig. Die Liste der Angaben bleibt linksbündig lesbar.
   -------------------------------------------------------------------------- */

.ablauf-hell .form__result {
  margin: clamp(70px, 13vh, 140px) auto 0;
  max-width: 620px;
  padding: 48px 40px 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
  text-align: center;
}

.ablauf-hell .form__result h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  color: #fff;
}

.ablauf-hell .form__result p {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
  font-size: 15.5px;
}

.ablauf-hell .form__result strong {
  font-weight: 400;
  color: var(--glow);
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .ablauf-hell .form__result {
    padding: 36px 22px 26px;
  }
}

/* --- Der Anmeldekasten ------------------------------------------------------
   .reg steht ohnehin mittig. Nur seine Knoepfe und Felder ziehen mit.
   -------------------------------------------------------------------------- */

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

.ablauf-hell .button {
  border-radius: 10px;
  padding: 16px 30px;
}

/* Die Ablagefläche für Fotos auf service-melden.html zieht mit: runde Ecken
   und ein hellerer Grund, damit sie zwischen den hellen Feldern nicht wie ein
   ausgegrauter Rest wirkt. Der gestrichelte Rahmen bleibt — er ist das
   Zeichen dafür, dass man hier etwas hineinziehen kann. */
.ablauf-hell .upload__flaeche {
  border-radius: 10px;
  border-color: #4a4a52;
  background: rgba(255, 255, 255, 0.045);
}

.ablauf-hell .upload__flaeche:hover {
  background: rgba(255, 255, 255, 0.07);
}


/* =============================================================================
   45. Projektraum: visuelle Angleichung an die übrige Website (15.10.2026)

   Dieselbe Formsprache wie die Stufenkette auf full-service.html und die
   Listen im Portalgerüst: Nummern im Kreis, dünne Linien, kleine
   Versal-Beschriftungen, Überschriften in der leichten Schrift. Kästen und
   Rahmen fallen weg, Farbe bleibt dem Stand vorbehalten.
   ========================================================================== */

/* Satz zum Preis direkt unter dem Kasten "Jetzt Erstgespräch vereinbaren",
   seit 19.10.2026 dort statt unter der Frage des Terminschritts. */
.anfrage__zusage-satz {
  max-width: none;
  margin: -16px 0 30px;
  font-size: 15.5px;
  text-align: center;
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */

/* Formularfelder: Der Rand war auf dem dunklen Grund kaum zu sehen, man
   wusste nicht, wo man hineintippen soll. */
.field input,
.field select,
.field textarea {
  border-color: #70707a;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--glow);
}

/* Dasselbe für die runden Felder der Anfragewege und Terminseiten. */
/* Steht gleich auch in formulare.css, termin.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.ablauf-hell .field input,
.ablauf-hell .field select,
.ablauf-hell .field textarea,
.feld-hell input {
  border-color: #70707a;
}

/* Ungültiges Feld nach dem Prüfen: Rand in einem warmen Rot, dazu die
   Meldung als Text. Die Farbe allein reicht nicht, deshalb steht immer
   auch ein Satz dabei. */
/* Steht gleich auch in formulare.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.field input[aria-invalid="true"]:not(:focus),
.field textarea[aria-invalid="true"]:not(:focus),
.feld-hell.ist-leer input:not(:focus) {
  border-color: #c0705c;
}

.field label {
  color: var(--mut-klein);
}

@media (max-width: 900px) {

  .profile summary {
    padding: 12px 0;
  }
}

/* --- Kleine Beschriftungen am Handy: mindestens 11 Pixel ------------------
   Am Computer bleiben sie bei 9 Pixeln, wie gestaltet. Auf dem kleinen
   Bildschirm waren sie zu klein zum Lesen. Ausgenommen sind die Wochentage
   im Kalender: Sie stehen in sieben schmalen Spalten. */
@media (max-width: 560px) {
  /* Steht gleich auch in basis.css, blog.css, loesungen.css, projekte.css, ratgeber.css, termin.css, unternehmen.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .hero__scrollcue,
  .facts__label,
  .story__number,
  .project__link,
  .contact__label,
  .schritte b,
  .karte dt,
  .filter__name,
  .stelle .stelle__marke,
  .stelle__zwischen,
  .strip figcaption,
  .field label,
  .themen__nr,
  .faq__gruppe,
  .builder__stand,
  .uebernehmen__marke,
  .stimme__marke,
  .auswahl__weg,
  .anfrage__kachel .auswahl__weg,
  .anfrage__terminkopf,
  .stufenliste__nr,
  .pt__block,
  .liste th,
  .marke h3,
  .lichtprobe figcaption,
  .posten__gruppe,
  .stand__marke,
  .punkte__wer,
  .kette__stand,
  .marke__da,
  .buchen__zusage-marke,
  .karte__feldwort,
  .beitrag__thema,
  .faq__thema small,
  .probleme span,
  .leistungen__nr {
    font-size: 11px;
  }
}

/* =============================================================================
   ANFRAGE, PUNKT 5: GEFÜHRTER WÄHLER (seit dem 26. Oktober 2026)
   Wunsch von Jürgen Stanek: Ein Klick ins Feld Ausführung öffnet darunter
   den Wähler, zuerst die Variante, dann die Ausführung mit Bild. Stückzahl
   und Ausführung stehen als Beschriftung nur über der ersten Zeile.
   ========================================================================== */
.posten__zeile + .posten__zeile label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.posten__art input[readonly] {
  cursor: pointer;
  caret-color: transparent;
}

.posten__zeile.ist-am-waehlen .posten__art input {
  border-color: var(--glow);
}

.waehler {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 227, 176, 0.35);
  border-radius: 12px;
  background: rgba(255, 227, 176, 0.04);
}

.waehler[hidden] {
  display: none;
}

.waehler__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.waehler__frage {
  flex: 1;
  margin: 0;
  font-size: 15px;
  color: var(--txt);
  outline: none;
}

.waehler__zurueck,
.waehler__zu {
  padding: 0;
  font: inherit;
  color: var(--glow);
  background: none;
  border: 0;
  cursor: pointer;
}

.waehler__zurueck {
  font-size: 13.5px;
}

.waehler__zurueck[hidden] {
  display: none;
}

.waehler__zu {
  width: 36px;
  height: 36px;
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--mut);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.waehler__zu:hover,
.waehler__zu:focus-visible {
  color: var(--glow);
  border-color: var(--glow);
}

.waehler__varianten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.waehler__varianten[hidden] {
  display: none;
}

.waehler__variante {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  font: inherit;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.waehler__variante img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.waehler__variante strong {
  font-size: 14px;
  font-weight: 500;
}

.waehler__variante:hover,
.waehler__variante:focus-visible {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.08);
  outline: none;
}

/* Im Wähler zeigt nur die gewählte Variante ihre Kacheln, ohne Aufklapp-Zeile. */
.waehler .profile {
  margin-top: 4px;
}

.waehler .profile[hidden] {
  display: none;
}

.waehler .profile summary {
  display: none;
}

.posten__plus[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .waehler {
    padding: 12px;
  }

  .waehler__varianten {
    gap: 8px;
  }

  .waehler__variante {
    padding: 10px 6px;
  }

  .waehler__variante strong {
    font-size: 12.5px;
  }
}

/* Mehrere Dateien mit Vorschau (seit dem 26. Oktober 2026): das X sitzt
   oben rechts direkt am Bild (Wunsch von Jürgen Stanek). */
.ablage__vorschau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ablage__vorschau[hidden] {
  display: none;
}

.ablage__stueck {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.ablage__stueck img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ablage__stueck--datei {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.ablage__dateiname {
  font-size: 12px;
  line-height: 1.35;
  color: var(--txt);
  text-align: center;
  overflow-wrap: anywhere;
}

.ablage__weg {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: rgba(10, 10, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
}

.ablage__weg:hover,
.ablage__weg:focus-visible {
  color: #0a0a0b;
  background: var(--glow);
  border-color: var(--glow);
  outline: none;
}

.waehler__variante strong {
  hyphens: manual;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Kopf des Wählers: Frage und X in einer Zeile, "Andere Variante" darunter. */
.waehler__kopf {
  flex-wrap: wrap;
}

.waehler__zu {
  order: 1;
}

.waehler__zurueck {
  order: 2;
  flex-basis: 100%;
  text-align: left;
}

.ablage__vorschau {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  margin-bottom: 14px;
}

/* Punkt 2: Hinweis und Ablage für den Querschnitt unter den beiden Feldern. */
.punkt__felder + .punkt__kurz {
  margin-top: 16px;
}

.punkt__kurz + .ablage {
  margin-top: 10px;
}