/* =============================================================================
   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.
   ============================================================================= */

/* Auswahlkacheln. Der Radioknopf bleibt im Markup — sonst verliert man
   Pfeiltastenbedienung und Vorlesefunktion —, ist aber unsichtbar. */
.wahl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 28px;
}

.wahl__opt {
  position: relative;
  display: block;
  background: var(--bg);
  padding: 22px 24px 24px;
  cursor: pointer;
  transition: background 0.25s;
}

.wahl__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wahl__opt:hover {
  background: var(--bg-alt);
}

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

.wahl__opt.is-gewaehlt {
  background: var(--bg-alt);
  box-shadow: inset 2px 0 0 var(--glow);
}

.wahl__name {
  display: block;
  font-size: 17px;
  color: var(--txt);
}

.wahl__opt.is-gewaehlt .wahl__name {
  color: #fff;
}

.wahl__kurz {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: #83837c;
  margin-top: 7px;
}

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


/* =============================================================================
   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.
   ========================================================================== */

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

/* Platz fuer den Haken oben rechts, damit er nicht im Text steht. */
.wahl--karten .wahl__opt,
.wahl--schmal .wahl__opt {
  padding-right: 46px;
}

.wahl__haken {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1px solid #3a3a42;
  border-radius: 50%;
  transition: border-color 0.2s, background 0.2s;
}

/* Der Haken selbst wird gezeichnet, nicht als Zeichen gesetzt: ein Haken aus
   der Schrift sitzt je nach Schriftart anders und ist mal zu gross. */
.wahl__haken::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #0a0a0b;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.wahl__opt.is-gewaehlt .wahl__haken {
  border-color: var(--glow);
  background: var(--glow);
}

.wahl__opt.is-gewaehlt .wahl__haken::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Der aufgehellte Grund ist der Teil, den man aus den Augenwinkeln sieht. */
.wahl__opt.is-gewaehlt {
  background: rgba(255, 227, 176, 0.07);
}

/* --- Auswahlkarten als einzelne Karten -------------------------------------
   Seit dem 13. Oktober 2026 (Wunsch der Auftraggeberin). Vorher standen die
   Karten als Raster mit Haarlinien in einem gemeinsamen Rahmen, das wirkte
   gequetscht. Jetzt steht jede Karte für sich, mit Abstand, rundem Rahmen und
   mittigem Text, so wie die beiden Karten im Schritt "Wie möchtest du
   weitermachen?" (.weiche__opt). Der Haken oben rechts bleibt.
   -------------------------------------------------------------------------- */

.wahl.wahl--karten,
.wahl.wahl--schmal {
  gap: 16px;
  background: none;
  border: 0;
}

.wahl.wahl--karten .wahl__opt,
.wahl.wahl--schmal .wahl__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 38px 24px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
  transition: border-color 0.25s, background 0.25s;
}

.wahl.wahl--karten .wahl__opt:hover,
.wahl.wahl--schmal .wahl__opt:hover {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.07);
}

.wahl.wahl--karten .wahl__opt:focus-within,
.wahl.wahl--schmal .wahl__opt:focus-within {
  outline: 0;
  border-color: var(--glow);
}

.wahl.wahl--karten .wahl__opt.is-gewaehlt,
.wahl.wahl--schmal .wahl__opt.is-gewaehlt {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.07);
  box-shadow: none;
}

.wahl.wahl--karten .wahl__name,
.wahl.wahl--schmal .wahl__name {
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 200;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: #fff;
}

.wahl.wahl--karten .wahl__kurz,
.wahl.wahl--schmal .wahl__kurz {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--mut);
}

/* --- Das Sternchen an Pflichtfeldern ---------------------------------------
   Auf Weisung der Auftraggeberin (2. September 2026) tragen ALLE Pflichtfelder
   der Website ein Sternchen hinter der Beschriftung, und freiwillige Felder
   tragen KEINE Kennzeichnung -- kein "freiwillig", kein "optional". Wer ein
   Formular ueberfliegt, sucht dann nur nach EINEM Zeichen statt nach zweien.

   Es steht in einem eigenen Element und nicht als Zeichen im Text, damit es
   sich faerben laesst und damit aria-hidden es vom Vorlesen ausnimmt: Das
   required am Feld sagt dasselbe schon, und "Telefon Stern" waere doppelt.

   Die Farbe ist der Lichtton der Seite und nicht Rot. Ein Sternchen ist ein
   Hinweis, keine Fehlermeldung. */
.pflicht {
  color: var(--glow);
  margin-left: 3px;
  font-weight: 400;
  /* Die Beschriftungen im dunklen Formular stehen gesperrt (letter-spacing).
     Ohne diese Zeile schoebe die Sperrung das Sternchen weit vom Wort weg --
     es sieht dann aus, als gehoerte es zum naechsten Feld. */
  letter-spacing: normal;
}

/* =============================================================================
   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 anfrage.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 anfrage.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;
}


/* =============================================================================
   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.
   ========================================================================== */

/* Dasselbe für die runden Felder der Anfragewege und Terminseiten. */
/* Steht gleich auch in anfrage.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;
}

/* Steht gleich auch in termin.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.ablauf-hell .field input:focus,
.ablauf-hell .field select:focus,
.ablauf-hell .field textarea:focus,
.feld-hell input:focus {
  border-color: var(--glow);
}

/* 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 anfrage.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;
}

.wahl__haken {
  border-color: #64646c;
}

/* =============================================================================
   Einwilligung vor dem Absenden (seit Auftrag 040)

   Die Einwilligung ist die einzige gewollte Änderung am Aussehen der
   Formulare (Baustein resources/views/partials/consent.blade.php).
   ========================================================================== */

.einwilligung {
  margin: 18px 0 0;
  text-align: left;
}

.einwilligung__wahl {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mut);
  cursor: pointer;
}

.einwilligung__wahl input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--glow);
  cursor: pointer;
}

.einwilligung__wahl a {
  color: inherit;
  text-decoration: underline;
}

.einwilligung__wahl input[aria-invalid="true"] {
  outline: 2px solid #c0705c;
  outline-offset: 2px;
}

/* Doppelte Klasse, damit allgemeinere Regeln für Absätze die Zeile nicht
   grau färben. */
.einwilligung .einwilligung__fehler {
  margin: 8px 0 0 28px;
  font-size: 13px;
  line-height: 1.5;
  color: #e0947f;
}

.einwilligung__fehler[hidden],
.einwilligung[hidden] {
  display: none;
}