/* Ergänzung für /anfrage, /danke, /404 und die Rechtsseiten (Bauer C, 02.10.2026). Nur Farbvariablen der Schale,
   keine eigenen Werte. Die Klassen fehlen in stil.css (eingefroren); der Dirigent entscheidet, ob sie in die Schale
   wandern. Eingehängt über <!--css:seite-anfrage.css--> im Kopf des Teils (zusammenbauen.mjs). Liste: anfrage__raster, anfrage__formular, anfrage__seite,
   anfrage__ablauf (mit Stufenmarke .karte__nr), zeichen mit zeichen__linie, zeichen__flaeche, zeichen__dunkel, zeichen__glanz, zeichen__akzent, zeichen__akzent-linie, recht__raster,
   recht__inhalt; seit Abnahme Runde 1 auch anfrage__kopf, anfrage__titel, anfrage__kopfraster, anfrage__zeichen,
   anfrage__leiste, anfrage__kontakt, karte__leiste, zeichen--formular. */

/* /anfrage, Seitenkopf kompakt (Abnahme Runde 1): Riesenzeile kleiner, Text links, kleines Fenster mit Auge rechts,
   damit das Formular im ersten Bildschirm beginnt und links keine leere Fläche bleibt */
.anfrage__titel { font-size: clamp(44px, 7.4vw, 112px); }
.anfrage__kopf { padding-bottom: clamp(24px, 3vw, 40px); }
.anfrage__kopfraster { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: center; margin-top: clamp(14px, 1.6vw, 24px); }
.anfrage__kopfraster .antwort { max-width: 44em; }
.anfrage__zeichen { justify-self: end; width: min(100%, 360px); margin-top: calc(-1 * clamp(40px, 5vw, 80px)); }
/* Formular als Fenster: Koralle-Leiste mit Auge oben (Form der Schale, D-443) */
.anfrage__formular > .anfrage__leiste { margin: calc(-1 * clamp(22px, 3vw, 44px)) calc(-1 * clamp(22px, 3vw, 44px)) 0; border-radius: 17px 17px 0 0; }
.anfrage__kontakt { display: grid; gap: 10px; }
/* Fehlerzustand (Entscheidung Dirigent 03.10.2026, Schritt 16e): nicht Kobalt, damit Fehler nicht wie Links oder
   Knöpfe aussehen, sondern Schwarz mit Warnzeichen. Der Text steht in Schwarz (16,1 : 1 auf Silber tief), davor ein
   schwarzes Dreieck mit weißem Ausrufezeichen; das Feld bekommt einen 3 px dicken schwarzen Rahmen. Überschreibt nur
   für diese Seiten die Regel aus stil.css (eingefroren). */
.feld__fehler { color: var(--sekundaer); }
.feld__fehler::before { content: "!"; width: 22px; height: 20px; padding-top: 5px; border-radius: 0; background: var(--sekundaer);
  color: var(--dominant); font: 700 12px/1 var(--schrift-text); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.feld__eingabe[aria-invalid="true"] { border-color: var(--sekundaer); box-shadow: 0 0 0 1.5px var(--sekundaer); }
.formular__reihe { align-items: start; }

/* /anfrage: Formular links, Ablauf D-119 senkrecht rechts */
.anfrage__raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px clamp(32px, 5vw, 88px); align-items: start; }
/* Formular als Karte; der harte Versatzschatten in Koralle kommt aus der Schale (abschluss-ort, abschluss__schatten, D-443) */
.anfrage__formular { position: relative; display: grid; gap: 22px; align-content: start; padding: clamp(22px, 3vw, 44px);
  border-radius: 20px; background: var(--dominant-tief); border: 2.5px solid var(--sekundaer); }
.anfrage__seite { display: grid; gap: 18px; align-content: start; }
.anfrage__ablauf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
/* senkrechte Linie hinter den Karten, Koralle als Linie (L-015) */
.anfrage__ablauf:not(.raster)::before { content: ""; position: absolute; left: calc(clamp(20px, 2.2vw, 30px) + 29px); top: 24px; bottom: 24px;
  width: 6px; border-radius: 3px; background: var(--akzent); }
/* Stufenmarke wie die Zeitleiste der Startseite: Kobalt-Quadrat 64 px mit Ziffer in Weiß (Kontrast 5,30 : 1) */
.anfrage__ablauf .karte__nr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px;
  background: var(--akzent); color: var(--dominant); font-size: 28px; }

/* Zeichen in Fenstern (Haken auf /danke, geschlossenes Auge auf /404): Farben nur über die Rollen */
.zeichen { width: 52%; height: auto; overflow: visible; }
.zeichen__linie { fill: none; stroke: var(--sekundaer); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.zeichen__flaeche { fill: var(--dominant-hell); stroke: var(--sekundaer); stroke-width: 3.5; stroke-linejoin: round; }
.zeichen__dunkel { fill: var(--sekundaer); }
.zeichen__glanz { fill: var(--dominant-hell); }
.zeichen__akzent { fill: var(--akzent); }
/* Skizze des Formulars im kleinen Fenster (Karte „Projekt anfragen“ auf /404): füllt das Fenster im Format 16 : 10 */
.zeichen--formular { display: block; width: 100%; aspect-ratio: 16 / 10; }
.zeichen--formular .zeichen__flaeche { stroke-width: 1.5; }
.zeichen__akzent-linie { fill: none; stroke: var(--akzent); stroke-width: 4; stroke-linecap: round; }

/* Ablauf „So geht es weiter“ als schwarze Kontrastkarte (PLAN.md 15.5 und 16.1, Schritt 16e): die eine schwarze Karte
   der Seite, Radius 24 px wie Kacheln (D-311). Schritte als Karten Schwarz Karte mit Etikett „Schritt 01“ bis „04“,
   Fensterleiste und Kante in Kobalt, Text Weiß (16,84 : 1). */
.anfrage__raster > .anfrage__seite { padding: clamp(22px, 2.6vw, 36px); border-radius: 24px; background: var(--sekundaer); color: var(--dominant); }
.anfrage__seite .karte { background: var(--sekundaer-karte); border-color: var(--sekundaer-linie); color: var(--dominant); }
.anfrage__seite .karte__text { color: var(--leise-hell); }
.anfrage__ablauf .karte__titel .schritt__etikett { margin-bottom: 6px; }
.anfrage__seite .anfrage__ablauf::before { left: 40px; width: 4px; }
.anfrage__seite .oberzeile { margin-bottom: 0; }
/* Akzent am Desktop ins Ziel 7 bis 9 % (messen.mjs 6,1 %, PLAN.md 16.1 Stellschrauben): Leisten der Schrittkarten 56 px,
   Versatzschatten des Formulars 36 px, Kobalt-Kante 8 px unten an der schwarzen Karte (wie an den Karten der Schale) */
.anfrage__raster > .anfrage__seite { box-shadow: inset 0 -8px 0 var(--akzent); padding-bottom: calc(clamp(22px, 2.6vw, 36px) + 8px); }
@media (min-width: 768px) {
  .anfrage__seite .anfrage__ablauf > .karte--kante { padding-top: calc(clamp(20px, 2.2vw, 30px) + 56px); }
  .anfrage__seite .anfrage__ablauf .karte__leiste { height: 56px; }
}
@media (min-width: 1024px) {
  .anfrage__raster > .abschluss-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
}
/* Handy: Karte knapper gesetzt, sonst liegt Schwarz bei 390 px über 30 % (messen.mjs 34,1 %, Grenze 60-30-5-5):
   weniger Innenrand, engere Abstände, Leisten bleiben (Akzent) */
@media (max-width: 767px) {
  .anfrage__raster > .anfrage__seite { padding: 18px 14px 22px; gap: 10px; }
  .anfrage__seite .anfrage__ablauf { gap: 8px; }
  .anfrage__seite .anfrage__ablauf > .karte--kante { gap: 6px; padding: calc(40px + 12px) 16px calc(12px + 8px); }
  .anfrage__seite .anfrage__ablauf .karte__leiste { height: 40px; }
  .anfrage__seite .karte__titel { font-size: 19px; }
  .anfrage__seite .karte__text { font-size: 16px; line-height: 1.45; }
  .anfrage__seite .anfrage__ablauf::before { left: 36px; }
}
/* „E-Mail“ im Kartentitel nicht am Bindestrich trennen (Schritt 16e) */
.ohne-umbruch { white-space: nowrap; }

/* großes Markenfenster im Seitenkopf: Platz für den Versatzschatten (28 px, ab 1023 px abwärts 8 px aus stil.css) */
.seitenkopf__bild > .fenster-ort:not(.fenster-ort--klein) { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }

/* Rechtsseiten: Text links, Inhaltsliste rechts als Karte */
.recht__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px clamp(32px, 5vw, 88px); align-items: start; }
/* Die Inhaltsliste steht im DOM vor den Abschnitten (Lesereihenfolge, am Handy oben); am Desktop rechts, klebend */
.recht__inhalt { position: sticky; top: calc(var(--kopf-hoehe) + 24px); grid-column: 2; grid-row: 1; }
.recht__raster > .fliesstext { grid-column: 1; grid-row: 1; }
.recht__inhalt ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 16px; }
.recht__inhalt a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .anfrage__raster, .recht__raster { grid-template-columns: minmax(0, 1fr); }
  .recht__inhalt { position: static; }
  .recht__inhalt, .recht__raster > .fliesstext { grid-column: auto; grid-row: auto; }
  .seitenkopf__bild > .fenster-ort:not(.fenster-ort--klein) { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  .anfrage__raster > .abschluss-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  .anfrage__kopfraster { grid-template-columns: minmax(0, 1fr); }
  .anfrage__zeichen { display: none; }
}

/* Nach Abnahme Runde 1: Abstand zwischen Fensterschatten und Datenzeile im Kopf von /anfrage; die Ablaufkarten auf
   /anfrage und /danke tragen oben eine Fensterleiste in Koralle als eigenes Element mit Auge (Form der Schale: Fensterleisten sind Akzent laut PLAN.md
   Abschnitt 4, L-015 gilt, die Leiste ist schmal). So kommt der Akzent auf 7 bis 9 % (/anfrage) bzw. über 5 % (/danke). */
.anfrage__kopfraster { margin-bottom: clamp(20px, 2.4vw, 36px); }
.anfrage__ablauf > .karte--kante { overflow: hidden; padding-top: calc(clamp(20px, 2.2vw, 30px) + 46px); }
.anfrage__ablauf .karte__leiste { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; padding: 0 14px;
  background: var(--akzent); border-bottom: 2px solid var(--sekundaer); }
.anfrage__ablauf .karte__leiste .fenster__auge { width: 32px; height: 20px; }
/* /404: Bild in den Wegekarten mit Versatzschatten 14 px wie die Fenster der Schale (D-443), Akzent am Desktop über 5 % */
.anfrage__ablauf .karte__fenster { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }

/* Abnahme Runde 4 (04.10.2026): /danke und /404 wie /anfrage, Knopf und Versatzschatten mit Luft über der Datenzeile */
.seitenkopf > .seitenkopf__raster:has(+ .datenzeile) { margin-bottom: clamp(20px, 2.4vw, 36px); }

/* Abnahme Runde 5 (L-046): Mit den schmaleren Versatzschatten fiel Kobalt auf /danke am Desktop auf 4,8 %. Die Leisten der
   drei Schrittkarten (Raster unter „Die nächsten Schritte“) stehen ab 1024 px 60 px hoch (auf /anfrage 56 px), keine Fläche (L-015). */
@media (min-width: 1024px) {
  .raster.anfrage__ablauf > .karte--kante { padding-top: calc(clamp(20px, 2.2vw, 30px) + 60px); }
  .raster.anfrage__ablauf .karte__leiste { height: 60px; }
}