/*
 * ZUMSANDE TERMINSYSTEM — Stile des Vorgangs
 * Teil des Plugins, nicht des Themes.
 *
 * Hier steht ausschliesslich, was zum Formular und zur Eingangsbestaetigung
 * gehoert: das Register mit den vier Schritten, die Bereichswahl, die
 * Terminliste, die Felder, der Abschluss und der Beleg. Alles, was die
 * Marke ausmacht - Schrift, Kopf- und Fussbereich, Rechtsseiten - steht im
 * Theme.
 *
 * JEDE Farbe, jedes Mass und jede Kurve wird als var(--token, RUECKFALL)
 * geschrieben. Mit dem Zumsande-Theme gewinnen dessen Werte; ohne das Theme
 * greifen die Rueckfallwerte, und das Formular sieht immer noch ordentlich
 * aus statt unformatiert. Der Rueckfall ist derselbe Wert, den das Theme
 * setzt - es gibt also keine zweite Palette, nur eine zweite Quelle
 * derselben.
 *
 * Kein Framework, keine Zuruecksetzung, keine !important-Regel: das Plugin
 * gestaltet nur seine eigenen Bausteine und fasst nichts an, was ihm nicht
 * gehoert.
 */

/* Nur fuer Screenreader. Wird von den Zeitangaben gebraucht ("14:00" allein
   sagt nicht, an welchem Tag) und muss deshalb auch ohne das Theme da sein. */
.nur-sr{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   REGISTER

   Das Traggeruest der Seite: eine durchgehende senkrechte Linie links, an
   der die vier Schritte als nummerierte Registereintraege haengen.

   Die Linie ist bewusst EINE Linie und nicht vier abgesetzte Karten. Eine
   Karte behauptet "hier faengt etwas Neues an" - eine Linie behauptet
   "das ist ein Vorgang, und du bist an dieser Stelle". Das ist der
   Unterschied zwischen einem Formular und einer Aufnahme.
   ================================================================== */
/* Die Breite der Registerspalte setzt das Formular selbst - sie ist Teil
   des Bauteils, nicht der Seite. Ohne das Theme gilt derselbe Wert. */
.register{
  --rail: clamp(34px, 9vw, 92px);
  position: relative;
  max-width: var(--maxw-spalte, 780px);
  padding-bottom: clamp(40px, 8vw, 72px);
}

.schritt{
  position: relative;
  padding-left: var(--rail);
  padding-top: clamp(26px, 5vw, 38px);
  padding-bottom: clamp(26px, 5vw, 38px);
}

/* Die Registerlinie. Liegt am linken Rand der Inhaltsspalte, laeuft durch
   alle Schritte und endet am letzten. */
.schritt::before{
  content: "";
  position: absolute;
  left: calc(var(--rail) / 2 - 0.5px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--linie, rgba(23,27,21,0.13));
}
.schritt:first-of-type::before{ top: 14px; }
.schritt:last-of-type::before{ bottom: auto; height: 40px; }

/* Die Nummer sitzt auf der Linie. Sie ist kein Ornament: sie sagt, wo man
   im Vorgang steht, und sie ist der einzige Ort, an dem der Zustand eines
   Schritts sichtbar wird. */
.schritt-nr{
  position: absolute;
  left: 0; top: clamp(26px, 5vw, 38px);
  width: var(--rail);
  display: flex; align-items: center; justify-content: center;
}
.schritt-nr span{
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--papier, #FBFAF7);
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
  color: var(--tinte-3, rgba(23,27,21,0.62));
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              color var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.schritt[data-zustand="aktiv"] .schritt-nr span{
  background: var(--gruen-tief, #0B4F38); border-color: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6);
}
.schritt[data-zustand="erledigt"] .schritt-nr span{
  background: var(--gruen-nebel, #EAF4EE); border-color: var(--gruen, #0C8F5C); color: var(--gruen-tief, #0B4F38);
}

.schritt-kopf{ display: flex; flex-direction: column; gap: 6px; }
.schritt h2{
  font-size: clamp(23px, 5.6vw, 31px);
  letter-spacing: -0.028em;
}
.schritt-hilfe{
  font-size: 15px; line-height: 1.55; color: var(--tinte-3, rgba(23,27,21,0.62)); max-width: 46ch;
}

.schritt-koerper{ margin-top: clamp(20px, 4vw, 28px); }

/* Der eingetragene Wert. Erscheint, sobald ein Schritt erledigt ist, und
   ersetzt seinen Koerper - der Aufnahmebogen fuellt sich sichtbar.
   Ohne JavaScript existiert dieser Zustand nicht; dann stehen alle
   Schritte offen nebeneinander, was ebenfalls vollstaendig bedienbar ist. */
.schritt-eintrag{
  display: none;
  margin-top: 14px;
  align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--linie, rgba(23,27,21,0.13));
  padding-top: 14px;
}
.schritt-eintrag-wert{
  font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; letter-spacing: -0.02em;
  color: var(--gruen-tief, #0B4F38);
}
.schritt-aendern{
  margin-left: auto;
  background: none; border: 0; padding: 4px 0;
  color: var(--tinte-3, rgba(23,27,21,0.62)); font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
  transition: color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.schritt-aendern:hover{ color: var(--gruen-tief, #0B4F38); }

/* Zusammenklappen. grid-template-rows von 0fr auf 1fr laesst sich als
   einziges CSS-Verfahren ohne feste Hoehe animieren - kein gemessenes
   max-height, das bei laengerem Inhalt abschneidet. */
.js .schritt[data-zustand="erledigt"] .schritt-koerper{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mittel, 340ms) var(--setzen, cubic-bezier(0.33, 0, 0.12, 1)), opacity var(--t-schnell, 160ms) linear;
  opacity: 0; margin-top: 0;
}
.js .schritt[data-zustand="erledigt"] .schritt-koerper > *{ overflow: hidden; min-height: 0; }
.js .schritt[data-zustand="erledigt"] .schritt-eintrag{ display: flex; }

.js .schritt[data-zustand="wartend"] .schritt-koerper{
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows var(--t-mittel, 340ms) var(--setzen, cubic-bezier(0.33, 0, 0.12, 1)), opacity var(--t-schnell, 160ms) linear;
}
.js .schritt[data-zustand="wartend"] .schritt-koerper > *{ overflow: hidden; min-height: 0; }
/* Wartende Schritte treten zurueck - aber ueber FARBE, nicht ueber
   opacity. Eine halbdurchsichtige Ueberschrift auf hellem Grund faellt
   unter jeden Kontrastwert, den man vertreten kann; gemessen lag sie bei
   2.86:1, der Hilfetext bei 1.82:1. --tinte-3 ist geprueft und bleibt
   lesbar - der Schritt tritt jetzt ueber Groesse und Ton zurueck, nicht
   ueber Unsichtbarkeit. */
.js .schritt[data-zustand="wartend"] h2{
  font-size: clamp(19px, 4.6vw, 23px);
  color: var(--tinte-3, rgba(23,27,21,0.62));
  transition: color var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), font-size var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}

/* =====================================================================
   BEREICHSWAHL

   Zwei Zeilen, beide gleichzeitig waehlbar. Kein drittes Feld "Beides":
   das waere eine Auswahl, die es fachlich nicht gibt, und sie wuerde die
   Frage stellen, was passiert, wenn man alle drei anklickt.

   Bewusst KEINE weissen Karten nebeneinander. Karten sind der Reflex bei
   jeder Auswahl und lassen jede Seite gleich aussehen; hier waeren sie
   ausserdem falsch, weil sie zwei Dinge nebeneinanderstellen, die
   nacheinander abgehakt werden. Zwei Zeilen unter einer Haarlinie sind
   das, was ein Aufnahmebogen an dieser Stelle tut - und die gewaehlte
   Zeile tritt sichtbar einen Schritt vor.
   ================================================================== */
.bereiche{
  border: 0; margin: 0; padding: 0;
  border-top: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
}
.bereiche legend{ padding: 0; }

.bereich{
  position: relative;
  display: block;
  border-bottom: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
  padding: 20px 54px 20px 18px;
  cursor: pointer;
  transition: background var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              padding-left var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Der Balken links. Er ist der eigentliche Zustandsanzeiger: er waechst
   aus der Mitte heraus auf die volle Zeilenhoehe. */
.bereich::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gruen, #0C8F5C);
  transform: scaleY(0); transform-origin: center;
  transition: transform var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.bereich:hover{ background: rgba(23,27,21,0.03); }

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

.bereich-name{
  display: block;
  font-size: clamp(20px, 5.2vw, 25px); font-weight: 700; letter-spacing: -0.026em;
  line-height: 1.15;
  transition: color var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.bereich-zusatz{
  display: block; margin-top: 5px;
  font-size: 15px; line-height: 1.5; color: var(--tinte-3, rgba(23,27,21,0.62));
}

/* Das Haken-Feld. Rechts, gross genug zum Treffen, und es ist neben dem
   Balken das einzige Element, das seinen Zustand farbig fuehrt. */
.bereich-haken{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26)); border-radius: var(--radius-sm, 3px);
  background: var(--weiss, #FFFFFF);
  transition: background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.bereich-haken::after{
  content: "";
  position: absolute; left: 9px; top: 5px;
  width: 6px; height: 12px;
  border: solid var(--gruen-ink, #F4FAF6); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4); opacity: 0;
  transition: transform var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--t-schnell, 160ms) linear;
}
.bereich input:checked ~ .bereich-haken{ background: var(--gruen-tief, #0B4F38); border-color: var(--gruen-tief, #0B4F38); }
.bereich input:checked ~ .bereich-haken::after{ transform: rotate(45deg) scale(1); opacity: 1; }

.bereich:has(input:checked){ background: var(--gruen-nebel, #EAF4EE); padding-left: 26px; }
.bereich:has(input:checked)::before{ transform: scaleY(1); }
.bereich:has(input:checked) .bereich-name{ color: var(--gruen-tief, #0B4F38); }

.bereich input:focus-visible ~ .bereich-haken{ outline: 2px solid var(--gruen-tief, #0B4F38); outline-offset: 3px; }

/* =====================================================================
   WUNSCHTERMINE

   Kein Kalendergitter. Es gibt hier keine 42 Kaesten, von denen 36 leer
   sind - es gibt die Tage, an denen Sabine Zeit hat, und darunter die
   Uhrzeiten. Genau so, wie man es am Telefon sagen wuerde.
   ================================================================== */
.termin-hinweis{
  border-left: 2px solid var(--gruen, #0C8F5C);
  padding: 2px 0 2px 16px;
  margin-bottom: 26px;
  font-size: 15px; line-height: 1.55; color: var(--tinte-2, rgba(23,27,21,0.80));
  max-width: 48ch;
}
.termin-hinweis strong{ color: var(--tinte, #171B15); }

.tage{ display: flex; flex-direction: column; gap: 4px; }

.tag{
  border: 0; margin: 0; padding: 0 0 22px;
  border-bottom: 1px solid var(--linie, rgba(23,27,21,0.13));
}
.tag:last-child{ border-bottom: 0; padding-bottom: 0; }

.tag legend{
  padding: 22px 0 14px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tag-wochentag{
  font-size: clamp(17px, 4.4vw, 20px); font-weight: 700; letter-spacing: -0.02em;
}
.tag-datum{
  font-size: 15px; color: var(--tinte-3, rgba(23,27,21,0.62)); font-variant-numeric: tabular-nums;
}

.zeiten{ display: flex; flex-wrap: wrap; gap: 10px; }

.zeit{ position: relative; display: block; }
.zeit input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.zeit span{
  display: flex; align-items: center; justify-content: center;
  min-width: 96px; min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26)); border-radius: var(--radius, 4px);
  background: var(--weiss, #FFFFFF);
  font-size: 18px; font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              transform var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.zeit span:hover{ border-color: var(--gruen, #0C8F5C); }
.zeit input:checked + span{
  background: var(--gruen-tief, #0B4F38); border-color: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6);
}
.zeit input:focus-visible + span{ outline: 2px solid var(--gruen-tief, #0B4F38); outline-offset: 3px; }
.zeit input:active + span{ transform: translateY(1px); }

/* Ist eine Zeit gewaehlt, treten die uebrigen zurueck. Das ist die
   Bedeutung der Bewegung an dieser Stelle: die gewaehlte Zeit wird zum
   Fokuspunkt, nicht irgendeine Animation. */
/* Zuruecktreten ueber Ton und Kontur, nicht ueber opacity: eine auf 0.42
   heruntergezogene Beschriftung faellt unter jeden vertretbaren
   Kontrastwert (gemessen), und eine Uhrzeit, die man nicht mehr lesen
   kann, kann man auch nicht mehr auswaehlen. */
.js .tage[data-gewaehlt="ja"] .zeit input:not(:checked) + span{
  color: var(--tinte-3, rgba(23,27,21,0.62));
  border-color: var(--linie, rgba(23,27,21,0.13));
  background: transparent;
}
.js .tage[data-gewaehlt="ja"] .zeit input:not(:checked) + span:hover{
  color: var(--tinte, #171B15); border-color: var(--gruen, #0C8F5C); background: var(--weiss, #FFFFFF);
}

/* ---------------------------------------------------------------------
   WEITERE TERMINE

   <details>, nicht JavaScript: das Aufklappen funktioniert dadurch auch
   ohne Skript, und die Termine dahinter bleiben Teil desselben Formulars -
   ein aufgeklappter Bereich ist keine zweite Seite.

   Der Marker wird ersetzt, weil das Standarddreieck in jedem Browser
   anders aussieht und in keinem zur Seite passt.
   ------------------------------------------------------------------ */
/* Kein eigener Oberstrich: der letzte Tagesblock darueber bringt seinen
   Unterstrich schon mit, zwei Linien uebereinander waeren ein Fehler. */
.mehr-tage{ border-top: 0; }
.mehr-tage > summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 0;
  font-size: 16px; font-weight: 700; color: var(--gruen-tief, #0B4F38);
  letter-spacing: -0.01em;
}
.mehr-tage > summary::-webkit-details-marker{ display: none; }
.mehr-tage > summary::before{
  content: "+";
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--gruen-tief, #0B4F38); border-radius: 50%;
  font-size: 17px; line-height: 1;
  transition: background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.mehr-tage[open] > summary::before{ content: "\2212"; background: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6); }
.mehr-tage > summary:hover::before{ background: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6); }
.mehr-tage-zahl{ font-weight: 400; font-size: 14px; color: var(--tinte-3, rgba(23,27,21,0.62)); font-variant-numeric: tabular-nums; }
.mehr-tage-inhalt > .tag:last-child{ border-bottom: 0; padding-bottom: 0; }

/* Keine Termine freigegeben. Kein kaputtes leeres Raster, sondern ein
   klarer Zustand mit einem echten Weg nach vorn. */
.leer{
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26)); border-radius: var(--radius, 4px);
  background: var(--papier-2, #F2EFE7);
  padding: 26px 24px;
}
.leer h3{ font-size: clamp(19px, 4.8vw, 22px); }
.leer p{ margin-top: 10px; color: var(--tinte-2, rgba(23,27,21,0.80)); max-width: 46ch; }
.leer-kontakt{ margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.leer-kontakt a{ font-weight: 700; color: var(--gruen-tief, #0B4F38); }

/* =====================================================================
   FELDER
   ================================================================== */
.felder{ display: grid; gap: 18px; }
@media (min-width: 620px){
  .felder{ grid-template-columns: 1fr 1fr; }
  .feld--voll{ grid-column: 1 / -1; }
}

.feld{ display: flex; flex-direction: column; gap: 7px; }
.feld label{
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--tinte-2, rgba(23,27,21,0.80));
}
.feld-optional{ text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinte-3, rgba(23,27,21,0.62)); }

.feld input,
.feld textarea{
  font: inherit;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
  border-radius: var(--radius, 4px);
  background: var(--weiss, #FFFFFF);
  color: var(--tinte, #171B15);
  transition: border-color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.feld textarea{ min-height: 132px; resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover{ border-color: var(--linie-stark, rgba(23,27,21,0.26)); }
.feld input:focus, .feld textarea:focus{ border-color: var(--gruen-tief, #0B4F38); outline: none; }
.feld input:focus-visible, .feld textarea:focus-visible{ outline: 2px solid var(--gruen-tief, #0B4F38); outline-offset: 2px; }

.feld-zaehler{ font-size: 13px; color: var(--tinte-3, rgba(23,27,21,0.62)); align-self: flex-end; font-variant-numeric: tabular-nums; }

/* Fehler am Feld. Rot ist hier nie das einzige Signal: es gibt zusaetzlich
   Text, und der Text ist ueber aria-describedby mit dem Feld verbunden. */
.feld-fehler{
  font-size: 14px; color: var(--warn, #A33418); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.feld[data-fehler="ja"] input,
.feld[data-fehler="ja"] textarea{ border-color: var(--warn, #A33418); background: var(--warn-feld, #FBF0ED); }

/* Der Honeypot. Sichtbar nur fuer Maschinen: aus dem Blickfeld, aus der
   Tabreihenfolge, aria-hidden. Kein display:none - manche Bots ueberspringen
   genau das. */
.zm-hp{
  position: absolute !important; left: -9999px !important; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

/* =====================================================================
   FEHLERUEBERSICHT
   ================================================================== */
.fehlerliste{
  max-width: var(--maxw-spalte, 780px);
  border: 1px solid var(--warn, #A33418); border-left-width: 3px;
  background: var(--warn-feld, #FBF0ED);
  border-radius: var(--radius, 4px);
  padding: 20px 22px;
  margin-bottom: clamp(24px, 5vw, 34px);
}
.fehlerliste h2{ font-size: 19px; color: var(--warn, #A33418); }
.fehlerliste ul{ margin: 12px 0 0; padding-left: 20px; }
.fehlerliste li{ margin-bottom: 5px; }
.fehlerliste a{ color: var(--warn, #A33418); font-weight: 700; }

/* =====================================================================
   ABSCHLUSS
   ================================================================== */
.pruefung{
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26));
  border-radius: var(--radius, 4px);
  background: var(--papier-2, #F2EFE7);
  padding: 22px;
  margin-bottom: 26px;
}
.pruefung-titel{
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-3, rgba(23,27,21,0.62)); font-weight: 700; margin-bottom: 14px;
}
.pruefung-zeile{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 11px 0; border-top: 1px solid var(--linie, rgba(23,27,21,0.13));
}
.pruefung-zeile:first-of-type{ border-top: 0; padding-top: 0; }
.pruefung-label{ font-size: 14px; color: var(--tinte-3, rgba(23,27,21,0.62)); white-space: nowrap; }
.pruefung-wert{ font-weight: 700; text-align: right; letter-spacing: -0.015em; }
.pruefung-wert[data-leer="ja"]{ font-weight: 400; color: var(--tinte-3, rgba(23,27,21,0.62)); }

.datenschutz-haken{
  display: flex; gap: 13px; align-items: flex-start;
  margin-bottom: 22px;
  cursor: pointer;
}
/* Zuruecksetzen der Feldbeschriftung.
   .feld label setzt Versalien, Sperrung und Fettung - richtig fuer kurze
   Bezeichner wie "Vorname", falsch fuer einen ganzen Einwilligungssatz.
   Ein Text, den man nicht lesen mag, ist keine informierte Einwilligung.

   Der Selektor traegt bewusst BEIDE Teile: ".feld label" hat eine hoehere
   Spezifitaet (0,1,1) als ".datenschutz-haken" allein (0,1,0) - die
   Zuruecksetzung an der Klasse allein wurde deshalb ueberstimmt und die
   Einwilligung stand weiter in Versalien da. Genau so ist es beim ersten
   Durchgang der Bildschirmfotos aufgefallen. */
.feld label.datenschutz-haken{
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.datenschutz-haken input{
  flex: 0 0 auto;
  width: 24px; height: 24px; margin: 2px 0 0;
  accent-color: var(--gruen-tief, #0B4F38);
  cursor: pointer;
}
.datenschutz-haken span{ font-size: 15px; line-height: 1.55; color: var(--tinte-2, rgba(23,27,21,0.80)); }
.datenschutz-haken a{ color: var(--gruen-tief, #0B4F38); font-weight: 700; }

.absenden{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 62px;
  padding: 18px 28px;
  border: 0; border-radius: var(--radius, 4px);
  background: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6);
  font-size: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.absenden:hover{ background: #0a3f2d; }
.absenden:active{ transform: translateY(1px); }
.absenden[disabled]{ opacity: 0.55; cursor: progress; }

.absenden-fuss{
  margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--tinte-3, rgba(23,27,21,0.62));
  max-width: 46ch;
}

@media (min-width: 620px){
  .absenden{ width: auto; min-width: 320px; }
}

/* =====================================================================
   ANFRAGE EINGEGANGEN

   Kein Konfetti, kein Haken-Symbol, das sich einmal dreht. Der Zustand
   soll sich sicher anfuehlen, nicht gefeiert. Das Einzige, was sich
   bewegt, ist eine Linie, die einmal durchlaeuft - und die nur deshalb,
   weil sie sagt: hier ist etwas abgeschlossen.
   ================================================================== */
.eingegangen-etikett{
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gruen-tief, #0B4F38); font-weight: 700;
}
.eingegangen-linie{
  height: 2px; background: var(--gruen, #0C8F5C); margin: 18px 0 26px;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference){
  .eingegangen-linie{ animation: linie-laeuft var(--t-lang, 620ms) var(--setzen, cubic-bezier(0.33, 0, 0.12, 1)) both; }
  @keyframes linie-laeuft{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
}

.eingegangen-titel{ font-size: clamp(32px, 8.5vw, 54px); letter-spacing: -0.032em; line-height: 1.02; }
.eingegangen-lead{ margin-top: 20px; font-size: clamp(17px, 4.4vw, 19px); line-height: 1.6; color: var(--tinte-2, rgba(23,27,21,0.80)); max-width: 44ch; }

.beleg{
  margin-top: clamp(30px, 6vw, 42px);
  border: 1px solid var(--linie-stark, rgba(23,27,21,0.26)); border-radius: var(--radius, 4px);
  background: var(--weiss, #FFFFFF);
  padding: 24px 22px;
}
.beleg-zeile{ padding: 14px 0; border-top: 1px solid var(--linie, rgba(23,27,21,0.13)); }
.beleg-zeile:first-child{ border-top: 0; padding-top: 0; }
.beleg-label{ font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-3, rgba(23,27,21,0.62)); font-weight: 700; }
.beleg-wert{ margin-top: 5px; font-size: clamp(19px, 4.8vw, 23px); font-weight: 700; letter-spacing: -0.022em; color: var(--gruen-tief, #0B4F38); }
.beleg-wert--klein{ font-size: 17px; color: var(--tinte, #171B15); letter-spacing: 0.04em; }


/* =====================================================================
   WEITER

   Der Knopf zwischen den Schritten. Er ist bewusst kein zweiter
   Hauptknopf: gefuellt und gross ist nur "Erstgespräch anfragen" am Ende.
   Hier reicht eine klare Umrandung - sonst konkurrieren vier
   Absendeknoepfe um dieselbe Aufmerksamkeit.

   Ohne JavaScript verschwindet er: dann stehen alle Schritte offen und es
   gibt nichts, wohin er fuehren koennte.
   ================================================================== */
.weiter{
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 26px;
  min-height: 54px;
  padding: 14px 26px;
  border: 1px solid var(--gruen-tief, #0B4F38); border-radius: var(--radius, 4px);
  background: transparent; color: var(--gruen-tief, #0B4F38);
  font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              color var(--t-schnell, 160ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1)),
              transform var(--t-mittel, 340ms) var(--antwort, cubic-bezier(0.22, 1, 0.36, 1));
}
.weiter:hover{ background: var(--gruen-tief, #0B4F38); color: var(--gruen-ink, #F4FAF6); }
.weiter:active{ transform: translateY(1px); }
.weiter[disabled]{
  opacity: 0.42; cursor: not-allowed;
  border-color: var(--linie-stark, rgba(23,27,21,0.26)); color: var(--tinte-3, rgba(23,27,21,0.62));
  transform: translateY(4px);
}
.weiter[disabled]:hover{ background: transparent; color: var(--tinte-3, rgba(23,27,21,0.62)); }

:root:not(.js) .weiter{ display: none; }

/* =====================================================================
   OHNE JAVASCRIPT

   Alles, was nur mit Skript einen Sinn ergibt, verschwindet dann - statt
   leer, tot oder falsch dazustehen. Der Vorgang selbst bleibt vollstaendig
   bedienbar: Haken setzen, Termin waehlen, ausfuellen, absenden.
   ================================================================== */
:root:not(.js) .pruefung{ display: none; }
:root:not(.js) .feld-zaehler{ display: none; }
:root:not(.js) .schritt-eintrag{ display: none; }

/* =====================================================================
   SEHR SCHMAL (unter 360px)

   Gehoert zum Formular und deshalb hierher: die Registerspalte und die
   Zeitkacheln muessen auch auf einem alten iPhone SE passen.
   ================================================================== */
@media (max-width: 359px){
  .register{ --rail: 30px; }
  .zeit span{ min-width: 84px; padding: 0 12px; font-size: 17px; }
}

/* =====================================================================
   BEWEGUNG ABSCHALTEN

   Das Theme setzt diese Regel ebenfalls fuer die ganze Seite. Sie steht
   hier ein zweites Mal, weil das Plugin auch ohne das Theme laufen kann und
   "prefers-reduced-motion" keine Frage der Gestaltung ist, sondern eine
   Zusage an Menschen, denen Bewegung schadet.
   ================================================================== */
@media (prefers-reduced-motion: reduce){
  .register *, .eingegangen-linie{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}