/* ============================================================
   cd_kontakt — Anfrageformular
   ============================================================
   Sechs Bauformen einer Bahn:

     --kompakt        einspaltig, alles im Formularblock
     --seitenspalte   Kontaktdaten links, Formular rechts
     --schritte       eine Saeule mit Schrittleiste
     --notfall        wie seitenspalte, roter Signalstreifen
     --modal          <dialog>, kein Platz im Seitenfluss
     --karte          dunkle Bahn, Formular als weisse Karte

   Grundflaeche, Knoepfe, Chips und Formularfelder kommen aus
   komponenten.css (.cd-knopf, .cd-chip, .cd-feld, .cd-auf-dunkel).
   Hier steht nur, was das Formular ausmacht.

   Regeln dieser Datei:
   - Farben, Abstaende und Radien ausschliesslich als Token.
   - Kein !important.
   - Im Raster minmax(0, 1fr) statt 1fr — 1fr ist
     minmax(auto, 1fr) und eine lange E-Mail-Adresse sprengt
     damit die Spalte.
   ============================================================ */

/* ------------------------------------------------------------
   Raster
   ------------------------------------------------------------
   Der Entwurf steht auf .78fr zu 1.22fr: die Kontaktspalte ist
   schmaler als das Formular, weil sie kurze Zeilen traegt.
   ------------------------------------------------------------ */
.cd-kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--cd-a8);
  align-items: start;
}

/* Einspaltig gibt es keine zweite Spalte — dann traegt das
   Formular allein und bekommt eine Lesebreite statt der vollen
   Bahn. */
.cd-kontakt--kompakt .cd-kontakt__raster {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 46rem;
}

.cd-kontakt__saeule {
  max-inline-size: 55rem;
}

.cd-kontakt__spalte,
.cd-kontakt__panel {
  min-inline-size: 0;
}

/* ------------------------------------------------------------
   Kopf
   ------------------------------------------------------------ */
.cd-kontakt__kopf {
  margin-block-end: var(--cd-a6);
}

.cd-kontakt__titel {
  margin-block-start: var(--cd-a3);
}

.cd-kontakt__unterzeile {
  margin-block-start: var(--cd-a3);
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
}

.cd-kontakt__beitext {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}

.cd-kontakt__beitext ul {
  display: grid;
  gap: 2px;
  margin-block-start: var(--cd-a5);
  padding: 0;
  list-style: none;
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
}

.cd-kontakt__beitext li {
  display: flex;
  gap: var(--cd-a3);
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
  font-size: var(--cd-gr-text);
}

/* Der Pfeil steht als Zeichen im Stylesheet und nicht im Markup:
   im Markup landete er im vorgelesenen Text. */
.cd-kontakt__beitext li::before {
  content: "\2192";
  flex: 0 0 auto;
  font-family: var(--cd-schrift-mono);
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Kontaktspalte
   ------------------------------------------------------------ */
.cd-kontakt__daten {
  margin-block-start: var(--cd-a6);
}

.cd-kontakt__telefon {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h3);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: var(--cd-zeile-eng);
  color: var(--cd-tinte);
}
.cd-kontakt__telefon:hover { color: var(--cd-rot); }
.cd-kontakt__telefon .cd-symbol { color: var(--cd-rot); }

.cd-kontakt__telefon--gross {
  margin-block-start: var(--cd-a6);
  font-size: var(--cd-gr-h2);
}

.cd-kontakt__zeiten {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  margin-block-start: var(--cd-a3);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

/* Erreichbarkeitspunkt. Der Kern bleibt stehen, nur der Ring
   pulst — faellt die Bewegung weg, ist der Punkt trotzdem da. */
.cd-kontakt__punkt {
  position: relative;
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 8px;
  color: var(--cd-rot);
}
.cd-kontakt__punkt::before,
.cd-kontakt__punkt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
}
/* Zwei Durchlaeufe (4,8 s) statt endlos, wie der baugleiche Puls
   im Hero — unter der Fuenf-Sekunden-Grenze von WCAG 2.2.2. */
.cd-kontakt__punkt::after { animation: cdKontaktPuls 2.4s ease-out 2; }

.cd-kontakt__wege {
  display: grid;
  gap: 1px;
  margin-block-start: var(--cd-a6);
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
}

.cd-kontakt__weg {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
  color: var(--cd-dunkel);
}
.cd-kontakt__weg:hover {
  background: var(--cd-flaeche-1);
  color: var(--cd-rot);
}
.cd-kontakt__weg .cd-symbol { color: var(--cd-rot); }

.cd-kontakt__anschrift {
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-kontakt__spaltentitel {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cd-text-3);
  margin-block-end: var(--cd-a3);
}

.cd-kontakt__anschrift p {
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-dunkel);
}

/* Die Illustration hat keine Eigenmasse — eine SVG ohne width und
   height misst im Flex- oder Rasterkontext 0 x 0. Die Groesse
   kommt deshalb hier und nicht aus dem Markup. */
.cd-kontakt__illu {
  display: block;
  inline-size: 100%;
  max-inline-size: 28rem;
  block-size: auto;
  margin-block-start: var(--cd-a7);
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Formularblock
   ------------------------------------------------------------ */
.cd-kontakt__panel {
  padding: var(--cd-a7) var(--cd-a6);
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie-2);
}

/* In der Saeule sitzt kein Kasten um das Formular — die
   Schrittleiste gliedert bereits. */
.cd-kontakt--schritte .cd-kontakt__panel {
  padding: 0;
  background: none;
  border: 0;
}

.cd-kontakt__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cd-a4);
}

.cd-kontakt__feld--breit {
  margin-block-start: var(--cd-a4);
}

.cd-kontakt__textfeld {
  min-block-size: 8rem;
  line-height: var(--cd-zeile-text);
  resize: vertical;
}

/* Das Eingabefeld traegt den Fokusring nicht selbst — der Ring
   kommt aus basis.css und wuerde hier auf dem hellen Kasten
   verschwinden. Ein zusaetzlicher Saum macht ihn sichtbar. */
.cd-kontakt__panel .cd-feld__eingabe:focus-visible {
  border-color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Chips
   ------------------------------------------------------------
   Echte Kontrollkaestchen und Auswahlknoepfe. Das Eingabefeld
   liegt geklippt hinter dem sichtbaren Chip — es bleibt
   fokussierbar und wird mit abgesendet, ist aber nicht zu sehen.
   Den Fokusring zeigt der Chip.
   ------------------------------------------------------------ */
.cd-kontakt__gruppe {
  margin-block-start: var(--cd-a5);
  padding: 0;
  border: 0;
}

.cd-kontakt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a3);
}

.cd-kontakt__chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.cd-kontakt__chipfeld {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cd-kontakt__chiptext {
  background: var(--cd-weiss);
  transition: background var(--cd-zeit) ease,
              border-color var(--cd-zeit) ease,
              color var(--cd-zeit) ease;

  /* WCAG 2.5.8 — auf Fingergeraeten 44 px, sonst 24 px. */
  min-block-size: var(--cd-zielgroesse, 24px);
}

.cd-kontakt__chip:hover .cd-kontakt__chiptext {
  border-color: var(--cd-dunkel);
  color: var(--cd-dunkel);
}

/* Der gewaehlte Zustand traegt nicht allein ueber die Farbe: der
   Chip fuellt sich UND der Rahmen wechselt. Vorgelesen wird er
   ohnehin ueber das Kontrollkaestchen. */
.cd-kontakt__chipfeld:checked + .cd-kontakt__chiptext {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}

.cd-kontakt__chipfeld:focus-visible + .cd-kontakt__chiptext {
  outline: 3px solid var(--cd-rot);
  outline-offset: 2px;
}

/* Budgetstufen laufen in der Monospace-Schrift — Zahlen stehen
   dort auf gleicher Breite und die Reihe flimmert nicht. */
.cd-kontakt__gruppe [name="budget"] + .cd-kontakt__chiptext {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
}

/* ------------------------------------------------------------
   Einwilligung
   ------------------------------------------------------------ */
.cd-kontakt__zustimmung {
  margin-block-start: var(--cd-a5);
}

/* Die Zielflaeche des Kaestchens kommt aus dem Label und nicht
   aus dem Kaestchen selbst: 18 px waeren zu klein (WCAG 2.5.8),
   ein 44 px grosses Kaestchen saehe falsch aus. */
.cd-kontakt__haken-label {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-a3);
  padding-block: var(--cd-a2);
  cursor: pointer;
  font-size: var(--cd-gr-klein);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}

.cd-kontakt__haken-feld {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  min-inline-size: 18px;
  min-block-size: 18px;
  margin-block-start: 3px;
  accent-color: var(--cd-rot);
}

/* Der Verweis steht jetzt IM Satz der Einwilligung und nicht mehr
   als eigene Zeile darunter. Aussenabstaende und eigene
   Schriftgroesse stammen aus der alten Lage — im Fliesstext
   riessen sie die Zeile auseinander. Er erbt Groesse und Farbe vom
   Satz und ist allein durch die Unterstreichung erkennbar. */
.cd-kontakt__datenschutzlink {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ------------------------------------------------------------
   Fuss
   ------------------------------------------------------------ */
.cd-kontakt__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a5);
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-kontakt__senden {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 700;
  padding: var(--cd-a4) var(--cd-a6);
}

.cd-kontakt__antwortzeit {
  font-size: var(--cd-gr-klein);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-3);
}

/* ------------------------------------------------------------
   Kundenportal: Anfrage absetzen
   ------------------------------------------------------------
   Das Portalformular steht direkt unter einem eigenen Seitenkopf.
   Drei ruhige Gruppen machen den Weg bis zum Versand sichtbar,
   ohne daraus einen mehrstufigen Assistenten zu machen. Die Klasse
   wird nur fuer den Anker "anfrage-formular" ausgegeben; andere
   Kontaktformulare behalten ihre jeweilige Bauform unveraendert.
   ------------------------------------------------------------ */
.cd-bahn.cd-kontakt--portal {
  padding-block-end: var(--cd-a8);
}

.cd-kontakt--portal .cd-kontakt__raster {
  max-inline-size: 58rem;
}

/* Der Portalkopf wird vor den allgemeinen Bahnregeln importiert.
   Dieser Anschluss braucht deshalb das kombinierte Merkmal, damit
   seine kompakte Fuge auch gegen den spaeteren Bahnabstand traegt. */
.cd-bahn.cd-portalkopfbahn:has(+ .cd-kontakt--portal) {
  padding-block-end: var(--cd-a7);
}

/* Auf dem Desktop gehoert der reservierte Platz der Menueschiene
   zur Bahnspalte. Eine feste Formular-Lesebreite wuerde davon noch
   einmal 340 px abziehen. Die volle Portalspalte richtet Karte und
   Seitenkopf stattdessen exakt aneinander aus. */
@media (min-width: 1101px) {
  .cd-kontakt--portal .cd-kontakt__raster {
    max-inline-size: var(--cd-inhalt);
  }
}

.cd-kontakt--portal .cd-kontakt__panel {
  /* Anfang der Schrittzaehlung. Am Panel und nicht am <form>:
     die Dankemeldung liegt daneben, und ein zweiter Aufruf des
     Formulars soll wieder bei 01 beginnen. */
  counter-reset: cd-schritt;
  padding: 0;
  overflow: hidden;
  background: var(--cd-weiss);
  border-color: var(--cd-linie);
  border-radius: var(--cd-r-gross);
  box-shadow: var(--cd-schatten-karte);
}

/* Der nur vorgelesene Elementtitel braucht keinen sichtbaren
   Aussenabstand. Das h2 bleibt fuer aria-labelledby erhalten. */
.cd-kontakt--portal .cd-kontakt__kopf {
  margin-block-end: 0;
}

.cd-kontakt--portal .cd-kontakt__formulargruppe {
  min-inline-size: 0;
  margin: 0;
  padding: var(--cd-a6);
  border: 0;
  /* Zaehlt die Abschnitte fuer die Schrittzahl im Kopf. */
  counter-increment: cd-schritt;
}

/* HIER LAG EIN FEHLER — der Trennstrich stand am <fieldset>:

     .cd-kontakt__formulargruppe + .cd-kontakt__formulargruppe {
       border-block-start: 1px solid var(--cd-linie-2);
     }

   Eine gerenderte <legend> sitzt NICHT im Polster ihres fieldsets,
   sondern auf dessen oberer Rahmenkante — und der Rahmen wird durch
   ihre Mitte gemalt, mit einer Luecke dort, wo die Legende steht.
   Gemessen am 26.08.2026 bei 1440 px: Der Strich lief zwischen
   Ueberschrift und Hinweiszeile hindurch und war links und rechts
   der Schrift als zwei kurze Reste sichtbar. Aus demselben Grund
   stand die erste Ueberschrift nur 1 px unter der Kartenkante,
   waehrend seitlich 32 px Polster lagen: padding-block-start des
   fieldsets erreicht die Legende nicht.

   Der Strich gehoert deshalb AN DIE LEGENDE. Ihre negativen
   Seitenabstaende ziehen ihn wieder ueber die volle Kartenbreite,
   das Polster holt die Schrift zurueck in die Flucht. */
.cd-kontakt--portal .cd-kontakt__gruppentitel {
  display: grid;
  gap: var(--cd-a1);
  inline-size: calc(100% + var(--cd-a6) * 2);
  margin: 0 calc(var(--cd-a6) * -1);
  padding: var(--cd-a6);
  padding-block-end: var(--cd-a2);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h4);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: var(--cd-zeile-eng);
  color: var(--cd-tinte);
}

.cd-kontakt--portal .cd-kontakt__formulargruppe + .cd-kontakt__formulargruppe .cd-kontakt__gruppentitel {
  border-block-start: 1px solid var(--cd-linie-2);
}

/* Die Schrittzahl. Sie macht aus drei Kaesten einen Weg, ohne das
   Formular in einen mehrstufigen Assistenten zu verwandeln.

   Der leere Ersatztext nach dem Schraegstrich haelt die Zahl aus
   dem zugaenglichen Namen der Gruppe: vorgelesen heisst der
   Abschnitt weiterhin "Kontaktdaten" und nicht "01 Kontaktdaten".
   Wo ein Browser den Ersatztext nicht kennt, wird die Zahl
   mitgelesen — richtig bleibt es auch dann. */
.cd-kontakt--portal .cd-kontakt__gruppentitel::before {
  content: counter(cd-schritt, decimal-leading-zero) / "";
  margin-block-end: var(--cd-a2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--cd-rot);
}

.cd-kontakt--portal .cd-kontakt__gruppenhinweis {
  font-family: var(--cd-schrift-text);
  font-size: var(--cd-gr-klein);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-3);
}

.cd-kontakt--portal .cd-kontakt__reihe {
  gap: var(--cd-a5);
}

.cd-kontakt--portal .cd-kontakt__feld--breit,
.cd-kontakt--portal .cd-kontakt__gruppe:first-of-type {
  margin-block-start: 0;
}

.cd-kontakt--portal .cd-feld {
  gap: var(--cd-a2);
}

.cd-kontakt--portal .cd-feld__label {
  color: var(--cd-tinte);
}

.cd-kontakt--portal .cd-feld__eingabe,
.cd-kontakt--portal .cd-rechnung__feld {
  min-block-size: 50px;
  background: var(--cd-flaeche-1);
  border-color: var(--cd-linie-3);
  transition: background var(--cd-zeit) ease,
              border-color var(--cd-zeit) ease,
              box-shadow var(--cd-zeit) ease;
}

.cd-kontakt--portal .cd-feld__eingabe:hover,
.cd-kontakt--portal .cd-rechnung__feld:hover {
  border-color: var(--cd-text-3);
}

.cd-kontakt--portal .cd-feld__eingabe:focus-visible,
.cd-kontakt--portal .cd-rechnung__feld:focus-visible {
  background: var(--cd-weiss);
  border-color: var(--cd-rot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-rot) 14%, transparent);
}

.cd-kontakt--portal .cd-kontakt__textfeld {
  min-block-size: 11rem;
}

.cd-kontakt--portal .cd-kontakt__zustimmung {
  margin-block-start: 0;
  padding: var(--cd-a5);
  background: var(--cd-flaeche-1);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-karte);
}

/* Die Einwilligung ist die einzige Pflichtangabe ohne Sternchen —
   der schmale rote Anschlag sagt, dass hier noch etwas fehlt.
   Er wechselt auf ein ruhiges Gruen, sobald der Haken sitzt. */
.cd-kontakt--portal .cd-kontakt__zustimmung {
  position: relative;
  overflow: hidden;
}
.cd-kontakt--portal .cd-kontakt__zustimmung::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--cd-rot);
  transition: background var(--cd-zeit) ease;
}
.cd-kontakt--portal .cd-kontakt__zustimmung:has(.cd-kontakt__haken-feld:checked)::before {
  background: var(--cd-text-schwach);
}

/* Die Rechenaufgabe stand zweispaltig: Frage links, Feld ganz
   rechts an der Kartenkante. Zwischen beiden lagen bei 1440 px rund
   240 px Leere, und nichts sagte, dass die Zahl in DIESES Feld
   gehoert. Sie steht jetzt wie jedes andere Feld im Formular:
   Beschriftung, darunter die Eingabe, darunter der Hinweis. */
.cd-kontakt--portal .cd-rechnung {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--cd-a2);
  max-inline-size: none;
  margin-block-start: var(--cd-a5);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-kontakt--portal .cd-rechnung__label {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--cd-gr-text);
}

.cd-kontakt--portal .cd-rechnung__feld {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  /* Ein Zahlenfeld darf so breit sein wie seine Antwort. */
  inline-size: 7rem;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}

.cd-kontakt--portal .cd-rechnung__hinweis {
  grid-column: 1;
  grid-row: 3;
  margin-block-start: var(--cd-a1);
}

.cd-kontakt--portal .cd-kontakt__fuss {
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-block-start: 0;
  padding: var(--cd-a5) var(--cd-a6);
  background: var(--cd-flaeche-2);
  border-block-start-color: var(--cd-linie);
}

.cd-kontakt--portal .cd-kontakt__senden {
  min-inline-size: 14rem;
  justify-content: center;
}

/* ------------------------------------------------------------
   Dankemeldung
   ------------------------------------------------------------
   [hidden] wird hier ausdruecklich durchgesetzt. Ein display-Wert
   auf derselben Klasse haette sonst gewonnen — das Attribut
   verliert gegen jede Klassenregel mit display.
   ------------------------------------------------------------ */
.cd-kontakt__danke {
  text-align: center;
  padding-block: var(--cd-a6);
}
.cd-kontakt__danke[hidden] { display: none; }

.cd-kontakt__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 54px;
  block-size: 54px;
  margin-inline: auto;
  margin-block-end: var(--cd-a5);
  border-radius: 50%;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-size: var(--cd-gr-h3);
}

.cd-kontakt__danketitel {
  font-size: var(--cd-gr-h3);
}

.cd-kontakt__danketext {
  margin-block-start: var(--cd-a3);
  margin-inline: auto;
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}

.cd-kontakt__danke .cd-knopf {
  margin-block-start: var(--cd-a6);
}

/* ------------------------------------------------------------
   Bauform: Notfall
   ------------------------------------------------------------
   Ein roter Streifen ueber der Bahn. Er ist Schmuck und kein
   Traeger: dass es um eine Stoerung geht, steht im Kicker und in
   der Ueberschrift.
   ------------------------------------------------------------ */
.cd-kontakt--notfall {
  border-block-start: 4px solid var(--cd-rot);
}

/* ------------------------------------------------------------
   Bauform: Formularkarte auf dunklem Grund
   ------------------------------------------------------------
   Die Bahn traegt .cd-auf-dunkel. Der weisse Formularkasten muss
   die Kontrastumkehr wieder zuruecknehmen — mit hoeherer
   Spezifitaet statt mit !important.
   ------------------------------------------------------------ */
.cd-kontakt--karte {
  border-block-start: 4px solid var(--cd-rot);
}

.cd-kontakt--karte .cd-kontakt__raster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cd-kontakt--karte .cd-kontakt__panel {
  background: var(--cd-weiss);
  border: 0;
  border-block-start: 4px solid var(--cd-rot);
  color: var(--cd-tinte);
  box-shadow: var(--cd-schatten-mega);
}

.cd-kontakt--karte .cd-kontakt__panel h1,
.cd-kontakt--karte .cd-kontakt__panel h2,
.cd-kontakt--karte .cd-kontakt__panel h3,
.cd-kontakt--karte .cd-kontakt__panel h4 {
  color: var(--cd-tinte);
}

.cd-kontakt--karte .cd-kontakt__panel a {
  color: var(--cd-rot);
}

.cd-kontakt--karte .cd-kontakt__panel .cd-kicker {
  color: var(--cd-rot);
}

/* Der umrandete Knopf steht in der Dankemeldung — also INNERHALB
   der weissen Karte. Die Regel fuer dunklen Grund setzt ihn auf
   Weiss (komponenten.css:69); hier waere er damit weiss auf weiss
   und der Besucher haette nach dem Absenden keinen Weg zurueck. */
.cd-kontakt--karte .cd-kontakt__panel .cd-knopf--linie {
  border-color: var(--cd-linie-2);
  color: var(--cd-tinte);
}
.cd-kontakt--karte .cd-kontakt__panel .cd-knopf--linie:hover {
  border-color: var(--cd-rot);
  color: var(--cd-rot);
}

/* Die linke Spalte steht direkt auf dem dunklen Grund. Alles,
   was dort in Tintenfarbe gesetzt ist, muss umgestellt werden —
   sonst steht Anthrazit auf Anthrazit (WCAG 1.4.3).

   Rot bleibt dabei nicht Rot: --cd-rot traegt auf Anthrazit den
   Kontrast nicht. Dafuer gibt es --cd-rot-auf-dunkel. */
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext {
  color: var(--cd-text-auf-dunkel);
}

.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext ul {
  background: var(--cd-dunkel-3);
  border-color: var(--cd-dunkel-3);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext li {
  background: var(--cd-dunkel);
  color: var(--cd-text-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext li::before {
  color: var(--cd-rot-auf-dunkel);
}

.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon {
  color: var(--cd-weiss);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon:hover {
  color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon .cd-symbol,
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__punkt {
  color: var(--cd-rot-auf-dunkel);
}

.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__zeiten,
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__spaltentitel {
  color: var(--cd-text-auf-dunkel-2);
}

.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__wege {
  background: var(--cd-dunkel-3);
  border-color: var(--cd-dunkel-3);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg {
  background: var(--cd-dunkel);
  color: var(--cd-weiss);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg:hover {
  background: var(--cd-dunkel-2);
  color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg .cd-symbol {
  color: var(--cd-rot-auf-dunkel);
}

.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__anschrift {
  border-block-start-color: var(--cd-linie-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__anschrift p {
  color: var(--cd-text-auf-dunkel);
}

/* ------------------------------------------------------------
   Bauform: drei Schritte
   ------------------------------------------------------------
   Ohne Skript stehen alle drei Abschnitte untereinander und das
   Formular ist vollstaendig ausfuellbar. Die Leiste ist dann eine
   Gliederung und kein Schalter — deshalb bekommt sie auch keinen
   Zeigerfinger.
   ------------------------------------------------------------ */
.cd-kontakt__schrittleiste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cd-a1);
  margin-block-end: var(--cd-a7);
}

.cd-kontakt__marke {
  padding-block-start: var(--cd-a3);
  border-block-start: 3px solid var(--cd-linie);
}

.cd-kontakt__marke:first-child {
  border-block-start-color: var(--cd-rot);
}

.cd-kontakt__markentitel {
  display: block;
  margin-block-start: var(--cd-a1);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--cd-tinte);
}

.cd-kontakt__schritt {
  margin: 0;
  padding: 0;
  border: 0;
}
.cd-kontakt__schritt + .cd-kontakt__schritt {
  margin-block-start: var(--cd-a7);
}

/* ------------------------------------------------------------
   Bauform: Modalbox
   ------------------------------------------------------------
   <dialog> wird bewusst NICHT mit einem pauschalen Reset
   erschlagen: Fokusfalle, Esc und der inerte Hintergrund haengen
   an den Voreinstellungen des Elements.
   ------------------------------------------------------------ */
.cd-kontakt--modal {
  inline-size: min(100% - var(--cd-a7), 42rem);
  max-block-size: 88dvh;
  padding: 0;
  background: var(--cd-weiss);
  color: var(--cd-tinte);
  border: 0;
  box-shadow: var(--cd-schatten-mega);
}

.cd-kontakt--modal::backdrop {
  background: color-mix(in srgb, var(--cd-tinte) 72%, transparent);
}

.cd-kontakt__dialogkopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cd-a5);
  padding: var(--cd-a5) var(--cd-a6);
  background: var(--cd-tinte);
  color: var(--cd-weiss);
}

.cd-kontakt__dialogkopf .cd-kicker { color: var(--cd-text-auf-dunkel); }
.cd-kontakt__dialogkopf .cd-kontakt__titel {
  margin-block-start: var(--cd-a2);
  color: var(--cd-weiss);
  font-size: var(--cd-gr-h3);
}

.cd-kontakt__dialogschliessen { margin: 0; }

.cd-kontakt__schliessen {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--cd-zielgroesse, 24px);
  block-size: var(--cd-zielgroesse, 24px);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--cd-r-feld);
  color: var(--cd-text-auf-dunkel);
  font-size: var(--cd-gr-h3);
  line-height: 1;
  cursor: pointer;
}
.cd-kontakt__schliessen:hover { color: var(--cd-weiss); }
.cd-kontakt__schliessen:focus-visible { outline-color: var(--cd-weiss); }

.cd-kontakt__dialoginhalt {
  padding: var(--cd-a6);
  overflow-y: auto;
}

/* ------------------------------------------------------------
   Bewegung
   ------------------------------------------------------------ */
@keyframes cdKontaktPuls {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* WCAG 2.3.3 — Zierbewegung faellt weg, der Punkt bleibt. */
@media (prefers-reduced-motion: reduce) {
  .cd-kontakt__punkt::after { animation: none; opacity: .35; }
  .cd-kontakt__chiptext { transition: none; }
}

/* ------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------
   Unter 1000 px stehen Kontaktspalte und Formular untereinander.
   Der Umbruch der Feldreihe kommt frueher: zwei Eingabefelder
   nebeneinander werden vorher unbrauchbar schmal.
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .cd-kontakt__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a7);
  }
  .cd-kontakt--karte .cd-kontakt__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .cd-kontakt__reihe {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-kontakt__panel {
    padding: var(--cd-a5) var(--cd-a4);
  }
  .cd-kontakt__schrittleiste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a3);
  }
  .cd-kontakt__telefon { font-size: var(--cd-gr-h4); }
  .cd-kontakt__telefon--gross { font-size: var(--cd-gr-h3); }
  .cd-kontakt__fuss {
    align-items: stretch;
    gap: var(--cd-a4);
  }
  .cd-kontakt__senden { justify-content: center; }

  .cd-bahn.cd-kontakt--portal {
    padding-block-end: var(--cd-a7);
  }
  .cd-kontakt--portal .cd-kontakt__panel {
    border-radius: var(--cd-r-karte);
  }
  .cd-kontakt--portal .cd-kontakt__formulargruppe {
    padding: var(--cd-a5) var(--cd-a4);
  }
  /* Die Legende traegt ihr eigenes Polster (siehe oben) — es muss
     hier auf denselben schmaleren Wert wie das fieldset. */
  .cd-kontakt--portal .cd-kontakt__gruppentitel {
    inline-size: calc(100% + var(--cd-a4) * 2);
    margin-inline: calc(var(--cd-a4) * -1);
    padding: var(--cd-a5) var(--cd-a4) var(--cd-a2);
  }
  .cd-kontakt--portal .cd-rechnung {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-kontakt--portal .cd-rechnung__feld,
  .cd-kontakt--portal .cd-rechnung__hinweis {
    grid-column: 1;
  }
  .cd-kontakt--portal .cd-rechnung__feld {
    grid-row: auto;
  }
  .cd-kontakt--portal .cd-kontakt__fuss {
    flex-direction: column;
    padding: var(--cd-a4);
  }
  .cd-kontakt--portal .cd-kontakt__senden {
    inline-size: 100%;
    min-inline-size: 0;
  }
}


/* ------------------------------------------------------------
   Meldung ueber dem Formular
   ------------------------------------------------------------
   Sie erscheint nur, wenn der Server etwas zu beanstanden hat oder
   die Verbindung weg war. Zwei Merkmale, nicht nur Farbe (1.4.1):
   die Farbe UND ein kraeftiger Anschlag an der Startkante.
   ------------------------------------------------------------ */
.cd-kontakt__meldung {
  margin: 0 0 var(--cd-a5);
  padding: 12px 16px;
  border-inline-start: 4px solid currentColor;
  border-radius: var(--cd-r-feld);
  font-size: var(--cd-gr-klein);
  line-height: 1.5;
}

.cd-kontakt__meldung--schlecht {
  color: var(--cd-rot-tief);
  background: color-mix(in srgb, var(--cd-rot) 7%, transparent);
}

.cd-kontakt__meldung--gut {
  color: var(--cd-tinte);
  background: var(--cd-flaeche-2);
}

/* Auf dunklem Grund traegt --cd-rot-tief nicht. */
.cd-auf-dunkel .cd-kontakt__meldung--schlecht {
  color: var(--cd-rot-auf-dunkel);
  background: color-mix(in srgb, var(--cd-rot-auf-dunkel) 14%, transparent);
}
.cd-auf-dunkel .cd-kontakt__meldung--gut {
  color: var(--cd-text-auf-dunkel);
  background: var(--cd-dunkel-2);
}

/* Der Dankebereich bekommt vom Skript tabindex="-1", damit der
   Fokus hineinwandern kann. Ein Fokusring um einen ganzen Block
   sieht nach Fehler aus - hier reicht der Umstand, dass der Bereich
   gerade erschienen und angesagt worden ist. */
.cd-kontakt__danke:focus { outline: none; }
.cd-kontakt__danke:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Helle Insel in einer farbigen Bahn — fuer JEDE Bauform
   ------------------------------------------------------------
   Seit die Grundfarbe an jedem Element einstellbar ist, kann jede
   Bauform auf dunklem oder rotem Grund stehen. Der Formularkasten
   behaelt dabei seinen hellen Grund, die Kontrastumkehr der Bahn
   gilt aber weiter fuer alles darin. Gemessen auf einer dunklen
   Bahn in der Bauform „seitenspalte":

     Beschriftung      1,8:1
     Eingabetext       1,9:1
     Datenschutzlink   1,1:1   (weiss auf fast weiss)
     Pflichtstern      1,8:1

   Bisher gab es die Ruecknahme NUR fuer die Bauform --karte, weil
   das die einzige war, die je auf dunklem Grund stand.

   Ausgenommen bleibt --schritte: dort ist der Kasten durchsichtig
   (background: none), die Umkehr der Bahn ist dann richtig.

   Eine Insel setzt den GANZEN Satz zurueck und nicht nur die zwei
   Zeilen, die gerade auffallen — sonst faellt die naechste
   Nebenrolle in dieselbe Grube.
   ------------------------------------------------------------ */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel {
  color: var(--cd-tinte);
}

.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel :is(h1, h2, h3, h4) {
  color: var(--cd-tinte);
}

/* Verweise im Kasten sind wieder rot — die Bahnregel setzt sie auf
   Weiss, und weisse Schrift auf hellem Kasten ist der schlimmste
   der gemessenen Werte. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel a {
  color: var(--cd-rot);
}

/* Rollen, die NICHT an color haengen, brauchen im Kasten eine
   eigene Zeile — sie laufen ueber eigene Tokens. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kicker {
  color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-nummer {
  color: var(--cd-text-3);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__haken-label span,
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__antwortzeit,
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__unterzeile {
  color: var(--cd-text-2);
}

/* Der umrandete Knopf steht in der Dankemeldung, also INNERHALB des
   Kastens. Die Regel fuer dunklen Grund macht ihn weiss — hier
   waere er weiss auf hell und der Besucher haette nach dem
   Absenden keinen Weg zurueck. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-knopf--linie {
  border-color: var(--cd-linie-2);
  color: var(--cd-tinte);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-knopf--linie:hover {
  border-color: var(--cd-rot);
  color: var(--cd-rot);
}

/* Der Tastaturfokus muss auch im Kasten sichtbar bleiben: die
   Bahnregel stellt ihn auf Weiss. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Zustimmung auf farbigem Grund OHNE hellen Kasten
   ------------------------------------------------------------
   Die Bauform --schritte traegt keinen Formularkasten; das Formular
   steht direkt auf der Bahn. Die Ruecknahme oben greift dort
   bewusst nicht — dafuer muessen hier die beiden Stellen nach, die
   ihre Farbe FEST gesetzt haben und deshalb nicht mit der Bahn
   umschlagen. Gemessen auf dunkler Bahn:

     Text neben dem Haken   2,4:1   (--cd-text-2 ist ein Ton fuer
                                     hellen Grund)
     Kaestchen              1,4:1

   Das Kaestchen zeichnet der Browser selbst. accent-color faerbt
   nur den ANGEHAKTEN Zustand — der leere Kasten hat auf Anthrazit
   keine sichtbare Kante mehr. Ein heller Rahmen ersetzt sie; nach
   WCAG 1.4.11 braucht die Grenze eines Bedienelements 3:1.
   ------------------------------------------------------------ */
.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) .cd-kontakt__haken-label {
  color: var(--cd-text-auf-dunkel);
}

.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) .cd-kontakt__haken-feld {
  accent-color: var(--cd-rot-auf-dunkel);
  outline: 1px solid var(--cd-text-auf-dunkel);
  outline-offset: 0;
}

/* Der Pflichthinweis und die Antwortzeit haengen ebenfalls an
   festen Toenen. */
.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) :is(.cd-kontakt__antwortzeit, .cd-kontakt__unterzeile) {
  color: var(--cd-text-auf-dunkel-2);
}

/* ------------------------------------------------------------
   Nachtrag zur hellen Insel: die Rechenaufgabe
   ------------------------------------------------------------
   Gemeldet als „Sicherheitsfrage ist weiss geschrieben" auf
   /leistungen/typo3-extension-entwicklung — und genau das war es:
   weisse Schrift auf dem weissen Formularkasten, Kontrast 1:1.

   komponenten.css setzt `.cd-auf-dunkel .cd-rechnung__label` auf
   Weiss. Das ist fuer eine Bahn ohne Kasten richtig, im hellen
   Kasten aber falsch — und die Regel hat mit zwei Klassen mehr
   Gewicht als die Vererbung, die der Kasten anbietet. Deshalb
   braucht sie hier eine eigene Zeile.

   Das ist dieselbe Lehre wie beim ersten Durchgang: Eine Insel
   setzt den GANZEN Satz zurueck. Beim ersten Mal waren es
   Ueberschriften, Verweise, Kicker und Nummer — die Rechenaufgabe
   wurde uebersehen, weil sie auf der gemessenen Seite nicht als
   erste Beschriftung auftauchte.
   ------------------------------------------------------------ */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-rechnung__label {
  color: var(--cd-tinte);
}

.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-rechnung__hinweis {
  color: var(--cd-text-2);
}

/* Marken im Kasten: die Bahnregel dreht sie fuer dunklen Grund um. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-abzeichen--dunkel {
  background: var(--cd-dunkel);
  color: var(--cd-weiss);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-abzeichen--linie {
  color: var(--cd-rot);
}

/* Im hellen Formularkasten bleibt die Fehlermeldung im kraeftigen
   Rot — die Aufhellung fuer dunklen Grund waere hier zu blass. */
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-feld__fehler {
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Weisser Formularkasten auf getoenter Bahn
   ------------------------------------------------------------
   Gemessen auf /leistungen/webseite-erstellen-lassen: Die Bahn
   steht auf „getönt" (#F2F5F7) — und der Kasten trug denselben
   Ton. Verhältnis 1,00:1. Er war nicht schwach abgesetzt, er war
   gar nicht da.

   Weiss allein loest das nicht: gegen #F2F5F7 sind es 1,09:1,
   gegen den Kopfton 1,17:1. Zwei sehr helle Flaechen nebeneinander
   trennt keine Farbe — das muss die Kante tun. Deshalb zusaetzlich
   der Schatten, mit dem auch die Bauform --karte arbeitet.

   Bewusst an den beiden HELLEN Gruenden festgemacht und nicht
   allgemein: Auf dunklem und rotem Grund hebt sich der getoente
   Kasten von selbst ab, dort waere Weiss zu hart.
   ------------------------------------------------------------ */
.cd-kontakt:is(.cd-auf-getoent, .cd-auf-kopfton) .cd-kontakt__panel {
  background: var(--cd-weiss);
  border-color: var(--cd-linie-3);
  box-shadow: var(--cd-schatten-karte);
}


/* ================================================================
   FLAECHE HINTER DEM FORMULAR
   ================================================================
   Eingefuehrt am 07.09.2026. Anlass war
   /kontakt/kostenloser-website-check: Dort stand das Formular ohne
   jede Flaeche auf Weiss. Nachgemessen am ausgelieferten Stand —
   Grund transparent, kein Rahmen, kein Radius, kein Schatten; 834
   Pixel Formular in einer 1106 Pixel hohen Bahn, ohne dass etwas es
   zusammenhaelt.

   GETRENNT VON DER BAUFORM, weil beides unabhaengig ist: Die
   Bauform ordnet den Aufbau (einspaltig, Kontaktspalte, drei
   Schritte), die Flaeche sagt nur, worauf das Formular steht. Die
   Grundregel traegt Innenabstand und Rundung, die drei Fassungen
   darunter nur noch Grund und Kante.

   NUR HELLE FASSUNGEN: Eine dunkle muesste Beschriftungen, Felder,
   Fehlermeldungen und Links mit umstellen. Dafuer gibt es bereits
   die Bauform "Formularkarte auf dunklem Grund"
   (.cd-kontakt--karte). Wer hier eine helle Flaeche auf eine dunkle
   Bahn legt, sieht das sofort — deshalb keine Sperre im Stylesheet,
   sondern der Hinweis im Backend-Feld.

   Der Innenabstand waechst mit der Breite mit. Am Handy waeren 44
   Pixel auf jeder Seite ein Drittel der Zeile; unten steht deshalb
   24 als Untergrenze.                                              */

.cd-kontakt--flaeche .cd-kontakt__formular {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--cd-r-karte);
}

.cd-kontakt--flaeche-hell .cd-kontakt__formular {
  background: var(--cd-flaeche-1);
}

/* Weiss auf Weiss traegt nur mit Kante und Schatten — sonst waere
   die Fassung auf einer weissen Bahn wirkungslos.                  */
.cd-kontakt--flaeche-weiss .cd-kontakt__formular {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-3);
  box-shadow: var(--cd-schatten-karte);
}

.cd-kontakt--flaeche-umrandet .cd-kontakt__formular {
  border: 1px solid var(--cd-linie-3);
}