/* Die Auftragsseite. Erbt Farben, Schriften und Rasterabstände von site.css;
   hier steht nur, was ein Formular zusätzlich braucht.

   Der Materialblock ist sichtbar abgesetzt, damit er als überspringbar gelesen
   wird. Ohne diese Trennung wirkt das Formular lang, und dann füllt es niemand
   aus. Kein farbiger Rand links, wie im Haus üblich: die Absetzung passiert
   über Fläche und Abstand.

   Die Farben kommen aus den Tokens von site.css und nicht als Literale: eine
   Anfrageseite, die anders eingefärbt ist als die Seite davor, wirkt wie ein
   fremdes Formular, das jemand danebengestellt hat. */

/* Die einzige Farbe, die site.css nicht kennt, weil der Onepager kein Formular
   hat. Gedämpft und nicht grell: die Seite verkauft Ruhe. */
:root { --warnung: #a0342a; }

/* Derselbe Takt wie die Bänder des Onepagers. Ohne ihn klebt die Überschrift
   unter der Kopfzeile, und die Seite beginnt, statt anzufangen. */
.auftrag { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }

/* Die Dankesseite ist kürzer als ein Bildschirm. Ohne das endet der dunkle
   Fuß mitten im Bild und darunter steht ein heller Streifen, der aussieht,
   als fehle etwas. Nur hier, der Onepager ist immer lang genug. */
body:has(.auftrag) { min-block-size: 100vh; display: flex; flex-direction: column; }
body:has(.auftrag) .auftrag { flex: 1; }
.auftrag .spalte-schmal { max-width: 42rem; }

/* `min-inline-size: 0` ist hier keine Kür. Der Browser gibt jedem `fieldset`
   von sich aus `min-inline-size: min-content` mit, und das steht in keiner
   Stilvorlage: der Kasten weigert sich dann, schmaler zu werden als sein
   breitester Inhalt, statt ihn umbrechen zu lassen. Bei 320 Pixeln Fenster
   stand `.material` deshalb 333 und `.absenden-block` 353 Pixel breit in einer
   280 Pixel schmalen Spalte, und die ganze Seite ließ sich seitlich schieben.

   Kein anderer Elementtyp verhält sich so, und genau deshalb sucht man den
   Fehler zuerst bei den Kindern: die messen sich völlig unauffällig. */
.auftrag fieldset { border: 0; margin: 0 0 2.5rem; padding: 0; min-inline-size: 0; }
.auftrag legend {
  font-weight: 600;
  font-size: 1.125rem;
  padding: 0;
  margin-bottom: 1rem;
}

.auftrag .material {
  background: var(--paper-2);
  border-radius: 0.75rem;
  padding: 1.75rem;
}

.feld { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1.25rem; }
.feld label, .feld-label { font-weight: 500; }
.feld small { color: var(--ink-soft); line-height: 1.45; }
.feld input, .feld select, .feld textarea {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--paper);
  color: inherit;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.feld textarea { resize: vertical; min-height: 6rem; }

/* `minmax(0, 1fr)` statt `1fr`, und zwar in beiden Fassungen. Ein blankes
   `1fr` heißt `minmax(auto, 1fr)`, und dieses `auto` ist die Mindestbreite des
   Inhalts. Der Inhalt ist hier ein Eingabefeld, und ein Eingabefeld bringt
   seine eigene Breite aus dem `size`-Attribut mit, gemessen 221 Pixel, ganz
   unabhängig davon, wie viel darin steht. Die Spalte wuchs damit auf 277 Pixel
   und schob die Materialbox aus dem Fenster.

   Dieselbe Ursache wie beim Raster des Wizards, siehe CLAUDE.md: eine
   Rasterspalte ohne ausdrückliche Null wächst mit ihrem breitesten Inhalt. */
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
@media (max-width: 34rem) { .feld-paar { grid-template-columns: minmax(0, 1fr); } }

.farbe-paar { display: flex; gap: 0.5rem; align-items: stretch; }
.farbe-paar input[type="color"] {
  inline-size: 3rem;
  padding: 0.2rem;
  cursor: pointer;
}
/* `min-inline-size: 0` hebt die automatische Mindestgröße des Flex-Elements
   auf. Ohne sie fordert das Textfeld seine 221 Pixel auch dann, wenn daneben
   schon 3 rem Farbwähler und ein Abstand stehen: das Paar verlangte 277 Pixel,
   und mehr als 224 gibt eine 320 Pixel breite Seite nicht her. */
.farbe-paar input[type="text"] { flex: 1; min-inline-size: 0; }

/* `flex-wrap: wrap`, weil der Satz nicht ein Flex-Element ist, sondern fünf:
   das Kästchen, „Ich habe die", der Verweis, „zur Kenntnis genommen." und das
   Sternchen. Ohne Umbruch bleiben alle fünf nebeneinander, und die Zeile
   verlangte 353 Pixel. Oberhalb von 544 Pixeln passt sie ohnehin in eine
   Zeile, dort ändert die Angabe deshalb nichts.

   Sie ist trotzdem nur das Netz und nicht die Lösung, siehe den Haltepunkt
   weiter unten: umgebrochen wirkt der Abstand von 0,6 rem als Zeilenabstand,
   und aus einem Satz werden drei weit auseinanderstehende Zeilen. */
.feld-haken label { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-weight: 400; }
.feld-haken input { margin: 0; }

.feld-fehler input, .feld-fehler textarea { border-color: var(--warnung); }
.fehler { color: var(--warnung); font-weight: 500; }
.fehler-kasten {
  background: color-mix(in srgb, var(--warnung) 8%, transparent);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
}

/* Für Menschen unsichtbar, für einen Bot ein gewöhnliches Feld. Nicht
   display:none: manche Bots überspringen genau das. */
.honigtopf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hinweis {
  background: var(--paper-2);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.absenden { margin-top: 1.5rem; }

/* Die zweite Stufe neben `.knopf-voll`: sichtbar ein Knopf, aber ohne Fläche,
   damit er den Hauptweg nicht überredet. Eckig wie alles Übrige, die Seite
   führt scharfe Geometrie. */
.knopf-rand {
  /* Nicht `--rule`: das ist die Farbe für Trennlinien und mit 16 Prozent
     Deckkraft als Kontur eines Knopfes nicht zu sehen. */
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background: var(--paper);
  color: inherit;
}
.knopf-rand:hover { border-color: var(--ink); background: var(--paper-2); }
.knopf-rand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Gestaltungsblock. Die Karten sind die eigentliche Fuehrung durch das
   Formular: erst wenn man sieht, was "Flaeche unten" von "Verlauf unten"
   unterscheidet, ist die Frage beantwortbar. */
.auftrag .frage { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.75rem; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }

/* Zentriert, weil die Skizze das Erste ist, was gelesen wird: linksbündiger
   Text daneben zieht das Auge aus der Mitte und lässt die Karten unruhig
   wirken, sobald ein Titel umbricht. */
.karte {
  display: grid;
  align-content: start;
  padding: 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--paper);
  text-align: center;
}
/* Radio, Bild und Beschriftung sind Geschwister statt verschachtelt: nur so
   kann in der Overlay-Karte an der Stelle der Skizze eine Ablage stehen, denn
   ein Label darf kein zweites enthalten. Klickbar sind beide Labels. */
.karte-radio { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.karte-bild { display: block; cursor: pointer; }
.karte-wahl { display: grid; gap: 0.35rem; cursor: pointer; margin-top: 0.35rem; }
.karte .skizze { margin-inline: auto; display: block; block-size: 6.5rem; inline-size: auto; }
.karte:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.karte:hover { border-color: var(--ink); }
/* Die Auswahl liegt im Rahmen und im Hintergrund, nicht in einem farbigen
   Balken an der Seite: farbige Akzentraender links sind im Haus nicht
   vorgesehen. */
.karte:has(input:checked) {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.karte:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.karte input { position: absolute; opacity: 0; pointer-events: none; }
/* Enger als der Fliesstext: ein zweizeiliger Titel wie "Foto, Name, Funktion,
   Termin" faellt mit dem Standardabstand auseinander und liest sich als zwei
   Angaben statt als eine. */
.karte-titel { font-weight: 600; line-height: 1.2; }
.karte-text { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.4; }

.skizze { inline-size: 100%; block-size: auto; max-block-size: 6.5rem; color: inherit; }
.skizze rect, .skizze circle, .skizze path { fill: currentColor; stroke: none; }
.skizze-rahmen { fill: none !important; stroke: currentColor !important; stroke-width: 2; opacity: 0.35; }
.skizze-gestrichelt {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  opacity: 0.6;
}
.skizze-flaeche { opacity: 0.8; }
.skizze-text { opacity: 0.85; }
.skizze-schwach { opacity: 0.45; }
/* Die Andeutung des Fotos. Blass, weil sie den Untergrund zeigt und nicht die
   Gestaltung: was daraufliegt, ist die Aussage der Skizze. */
.skizze-foto { opacity: 0.28; }
.skizze-frage { fill: currentColor; font-size: 42px; font-weight: 600; opacity: 0.4; }

/* Ein Praesentationsattribut `fill="url(...)"` verliert gegen jede CSS-Regel,
   und die generische Fuellung oben traefe sonst auch die Verlaufsflaeche: dort
   staende dann ein harter Block statt eines Verlaufs. */
.skizze .skizze-verlaufflaeche { fill: url("#skizze-verlauf"); }

/* Logo und Beschriftung liegen **auf** der Abdunklung und sind hell. Genau das
   ist der Zweck des Verlaufs: helle Schrift soll auf jedem Foto lesbar sein.
   Dunkel gefuellt verschwaenden sie in der Flaeche, und die Skizze zeigte das
   Gegenteil dessen, was gebaut wird. */
.skizze .skizze-hell { fill: var(--paper); }
.skizze .skizze-hell-schwach { fill: var(--paper); opacity: 0.75; }

/* ------------------------------------------------------------- Ablageflächen

   Gestrichelt, weil das die eingeführte Form für "hier kann etwas hinein" ist.
   Ein geschlossener Rahmen sieht aus wie ein Feld, in das man tippt, und ein
   nacktes `input[type=file]` sieht in jedem Browser anders aus. */

.ablage-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ablage {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  min-block-size: 5.5rem;
  padding: 1rem;
  border: 1.5px dashed var(--rule);
  border-radius: 0.6rem;
  background: var(--paper);
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.ablage:hover { border-color: var(--ink); color: inherit; }
.ablage b { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Der Fokusring gehört sichtbar an die Fläche: das Eingabefeld selbst ist für
   das Auge nicht da, für die Tastatur aber der Weg hierher. */
.ablage-input:focus-visible + .ablage { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Während eine Datei über der Fläche schwebt. Ohne diese Rückmeldung weiß
   niemand, ob er losslassen darf. */
.ablage-aktiv {
  border-color: var(--ink);
  border-style: solid;
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
  color: inherit;
}

/* Liegt eine Datei, tritt der Aufforderungstext zurück und der Name nach vorn. */
.ablage-belegt { border-style: solid; border-color: var(--ink); color: inherit; }
.ablage-belegt .ablage-text { font-size: 0.8125rem; opacity: 0.7; }
.ablage-datei { font-weight: 600; overflow-wrap: anywhere; }

/* Die Ablage der Overlay-Karte tritt **an die Stelle der Skizze**, sobald die
   Karte gewählt ist. Gleiche Höhe wie diese, deshalb bleibt die Kachel so hoch
   wie ihre Nachbarn: eine Reihe, in der eine Karte ausbricht, sieht kaputt aus.

   Ungewählt gibt es sie nicht. Sonst stünde in drei von vier Karten eine
   Frage, die nur zu einer gehört. */
.ablage-bild {
  display: none;
  block-size: 6.5rem;
  min-block-size: 0;
  padding: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.karte-mit-ablage:has(.karte-radio:checked) .ablage-bild { display: grid; }
.karte-mit-ablage:has(.karte-radio:checked) .karte-bild { display: none; }

.formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
/* Skizze links, Beschriftung rechts: die Kacheln sind schmal, und zwei
   untereinander stehende Zeilen neben einem Rechteck lesen sich schneller als
   ein Bild über dem Text. */
.format {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  cursor: pointer;
}
.format-skizze {
  grid-row: span 2;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  color: var(--ink-soft);
}
/* Umriss statt Fläche: gefüllt sähen die Rechtecke aus wie Knöpfe, und das
   Verhältnis ist die Aussage, nicht das Gewicht. */
.format-skizze rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* Gewählt wird das Rechteck gefüllt: dieselbe Information zweimal, einmal am
   Rahmen der Kachel und einmal im Bild. */
.format:has(input:checked) .format-skizze { color: var(--ink); }
.format:has(input:checked) .format-skizze rect { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.format:has(input:checked) {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.format input { position: absolute; opacity: 0; pointer-events: none; }
.format-titel { font-weight: 500; }
.format-wofuer { font-size: 0.8125rem; color: var(--ink-soft); }
.format-gesperrt { opacity: 0.45; cursor: not-allowed; }

.formate-hinweis { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 0.75rem; }

/* Die Paketwahl. Zwei Karten mit Preis und Umfang, nicht zwei nackte Knoepfe:
   die Entscheidung bestimmt alles darunter und braucht deshalb ihre Gruende
   daneben. */
.paket-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.paket-karte {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  cursor: pointer;
}
.paket-karte:has(input:checked) {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.paket-karte input { position: absolute; opacity: 0; pointer-events: none; }
.paket-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

/* `.paket-name` traegt auf dem Onepager den Messingakzent. Hier nicht: das
   Formular soll eine Farbe fuehren, und der Akzent ist auf der Preisliste
   sparsam gesetzt, waehrend er in zwei Karten nebeneinander laut wird. */
.paket-karte .paket-name {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

/* Ohne `nowrap` faellt das Euro-Zeichen bei "ab 1.490 €" in die naechste
   Zeile, sobald die Karte schmal wird. Ein Preis, der auf zwei Zeilen steht,
   liest sich wie zwei Angaben. */
.paket-preis { font-weight: 600; white-space: nowrap; }
.paket-zusatz { font-size: 0.8125rem; color: var(--ink-soft); }
.paket-punkte { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; line-height: 1.5; }

/* Gesperrt, nicht verborgen: ein Feld, das verschwindet, sieht aus wie ein
   Fehler, ein gesperrtes beantwortet die Frage nach dem Aufpreis. */
.paket-gesperrt { opacity: 0.4; cursor: not-allowed; }

.zusammenfassung {
  background: var(--paper-2);
  border-radius: 0.6rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.zusammenfassung h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.zusammenfassung dl { display: grid; gap: 0.4rem; margin: 0; }
.zusammenfassung dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem; }
.zusammenfassung dt { color: var(--ink-soft); }
.zusammenfassung dd { margin: 0; }
.zusammenfassung-fuss { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }

.absenden { display: grid; gap: 0.6rem; justify-items: start; }
.absenden small { color: var(--ink-soft); line-height: 1.5; max-width: 34rem; }

@media (max-width: 34rem) {
  .zusammenfassung dl div { grid-template-columns: 1fr; gap: 0; }
  .zusammenfassung dt { font-size: 0.8125rem; }

  /* Sobald der Satz umbricht, ist ein Flex-Kasten das falsche Werkzeug: die
     0,6 rem stehen dann auch zwischen den Zeilen, und „Ich habe die" /
     „Datenschutzerklärung" / „zur Kenntnis genommen." lesen sich wie drei
     Angaben statt wie ein Satz. Als Blockkasten fließt der Text wie
     gewöhnlicher Fließtext, und das Kästchen sitzt inline davor. */
  .feld-haken label { display: block; }
  .feld-haken input { margin-inline-end: 0.6rem; }
}

/* Die zweite Stufe, für die schmalsten Geräte. Von 320 Pixeln Fenster bleiben
   nach den Rändern der Spalte 280 übrig, und davon nahm allein die Polsterung
   der Materialbox 56 und die der Zusammenfassung 48. Das Formular passte damit
   zwar, aber das Farbfeld stand auf 168 Pixeln und die Werte der
   Zusammenfassung brachen mitten im Wort um.

   24rem sind 384 Pixel und liegen unter jedem gängigen Telefon im Hochformat
   (360 und 390), oberhalb der Grenze ändert sich also nichts. */
@media (max-width: 24rem) {
  .auftrag .material { padding: 1.25rem; }
  .zusammenfassung { padding: 1rem 1.1rem; }
}