/* seiten.css: seiten-spezifische Regeln, oben auf marken-kit.css, basis.css und
   bausteine.css. Nur Tokens. Regeln nach Seitenabschnitt gruppiert, damit spaetere
   Aufgaben (Referenzen, Anfrage, Status) hier anschliessen koennen, ohne umzusortieren. */

/* --- Kopfzeile --- */
.kopfzeile {
  border-bottom: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
}
.kopfzeile__reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--mk-abstand-4);
  row-gap: var(--mk-abstand-3);
  padding-block: var(--mk-abstand-3);
}
.kopfzeile__wortmarke {
  font-family: var(--mk-schrift-titel);
  font-size: var(--mk-groesse-l);
  font-weight: var(--mk-gewicht-fett);
  color: var(--mk-farbe-text);
  text-decoration: none;
}
.kopfzeile__menue {
  /* faellt auf eine eigene, volle Zeile unter Wortmarke und Knopf, solange schmal */
  order: 3;
  width: 100%;
}
.kopfzeile__menue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-abstand-4);
}
.kopfzeile__menue a {
  color: var(--mk-farbe-text-gedaempft);
  text-decoration: none;
  font-size: var(--mk-groesse-s);
}
.kopfzeile__menue a:hover { color: var(--mk-farbe-primaer); }

/* --- Hero --- */
.hero {
  background: var(--mk-farbe-flaeche-tief);   /* flach, kein Verlauf */
  color: var(--mk-farbe-auf-primaer);
  padding-block: var(--mk-abstand-8);
}
.hero h1 { max-width: 20ch; }
.hero__text { color: var(--mk-farbe-auf-primaer); opacity: 0.85; }

/* --- Kachel-Fuehrung ---
   Nutzt .kachel-raster und .kachel unveraendert aus bausteine.css. Die Kacheln sind
   hier Links (kein .kachel__eingabe), keine zusaetzliche Regel noetig. */

/* --- Beweis-Raster --- */
.beweis-raster__mehr {
  margin-top: var(--mk-abstand-5);
  text-align: center;
}

/* --- Vertrauensband ---
   .marke-band selbst kommt unveraendert aus bausteine.css. Die Flaeche bekommt hier
   nur einen gedaempften Hintergrund, damit sie sich vom Beweis-Raster davor und der FAQ
   danach absetzt. */
.vertrauensband {
  background: var(--mk-farbe-flaeche-gedaempft);
}

/* --- FAQ --- */
.faq__liste {
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-3);
}
.faq__eintrag {
  padding: var(--mk-abstand-4);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
  border-radius: var(--mk-radius-m);
  background: var(--mk-farbe-flaeche);
}
.faq__eintrag summary {
  cursor: pointer;
  font-family: var(--mk-schrift-titel);
  font-weight: var(--mk-gewicht-mittel);
  font-size: var(--mk-groesse-m);
}
.faq__eintrag summary::marker { color: var(--mk-farbe-primaer); }
.faq__eintrag p {
  margin: var(--mk-abstand-3) 0 0;
  max-width: none;
  color: var(--mk-farbe-text-gedaempft);
}

/* --- Fusszeile --- */
.fusszeile {
  border-top: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
}
.fusszeile__reihe {
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-4);
  padding-block: var(--mk-abstand-6);
}
.fusszeile__name {
  margin: 0;
  font-weight: var(--mk-gewicht-mittel);
  color: var(--mk-farbe-text);
}
.fusszeile__adresse {
  margin: 0;
  font-size: var(--mk-groesse-xs);
  color: var(--mk-farbe-text-gedaempft);
}
.fusszeile__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-abstand-4);
}
.fusszeile__links a {
  color: var(--mk-farbe-text-gedaempft);
  text-decoration: none;
  font-size: var(--mk-groesse-s);
}
.fusszeile__links a:hover { color: var(--mk-farbe-primaer); }

/* --- Referenzen: Filterkacheln ---
   .kachel-raster und .kachel kommen unveraendert aus bausteine.css. Weil eine Link-Kachel
   keinen :checked-Zustand tragen kann, markiert das Inline-Skript auf referenzen.html die
   aktive Kachel stattdessen ueber diese Klasse, mit denselben Farben wie der
   :has(.kachel__eingabe:checked)-Zustand in bausteine.css. */
.kachel--aktiv {
  border-color: var(--mk-farbe-primaer);
  box-shadow: inset 0 0 0 var(--mk-fokus-staerke) var(--mk-farbe-primaer);
}

/* .karte setzt in bausteine.css "display: flex" als Autor-Regel. Das browsereigene
   "[hidden] { display: none }" kommt aus dem User-Agent-Stylesheet und wird von JEDER
   Autor-Regel auf dasselbe Element verdraengt, unabhaengig von Spezifitaet oder
   Reihenfolge (Autor-Herkunft schlaegt User-Agent-Herkunft immer). Ohne diese Regel
   wuerde das Filter-Skript auf referenzen.html das hidden-Attribut zwar setzen, die
   Karte bliebe aber sichtbar. */
.karte[hidden] {
  display: none;
}

/* --- Referenzen: Leerzustand- und Null-Treffer-Hinweis ---
   .hinweis kommt unveraendert aus bausteine.css. Hier traegt er zusaetzlich eine
   Ueberschrift (referenzen.html bei einem Filter ohne Treffer, referenzen-leer.html im
   echten Leerzustand), die etwas kompakter ausfaellt als ein normaler Abschnittstitel. */
.hinweis h2 {
  font-size: var(--mk-groesse-l);
  margin-bottom: var(--mk-abstand-3);
}

/* --- Referenzprojekt-Detail: Kopf ---
   Rueckweg zur Liste, gedaempft wie die uebrigen sekundaeren Links im Projekt. */
.referenz-kopf__zurueck {
  margin: 0 0 var(--mk-abstand-4);
  font-size: var(--mk-groesse-s);
}
.referenz-kopf__zurueck a {
  color: var(--mk-farbe-text-gedaempft);
  text-decoration: none;
}
.referenz-kopf__zurueck a:hover { color: var(--mk-farbe-primaer); }

/* --- Referenzprojekt-Detail: Eckdaten ---
   Definitionsliste, mobil einspaltig gestapelt, damit sie bei 360px nicht in unlesbare
   Spalten zerfaellt. Ab 48rem zweispaltig, siehe Media-Query am Dateiende. */
.eckdaten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-abstand-4);
  margin: var(--mk-abstand-5) 0 0;
  padding: var(--mk-abstand-5);
  background: var(--mk-farbe-flaeche-gedaempft);
  border-radius: var(--mk-radius-m);
}
.eckdaten__eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-1);
}
.eckdaten dt {
  font-size: var(--mk-groesse-xs);
  font-weight: var(--mk-gewicht-mittel);
  color: var(--mk-farbe-text-gedaempft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eckdaten dd {
  margin: 0;
  font-size: var(--mk-groesse-m);
  color: var(--mk-farbe-text);
}

/* --- Referenzprojekt-Detail: Erzaehlung ---
   Ausgangslage, Umsetzung und Ergebnis liegen in einem gemeinsamen Abschnitt, damit die
   Fallstudie als ein zusammenhaengender Text liest statt als drei einzelne Boeden mit
   grossem Leerraum dazwischen. Nur die erste Ueberschrift steht direkt unter dem
   Abschnitts-Padding, die folgenden bekommen zusaetzlichen Abstand nach oben. */
.referenz-erzaehlung h2:not(:first-child) {
  margin-top: var(--mk-abstand-6);
}

/* --- Referenzprojekt-Detail: Bildstrecke ---
   Vier .platzhalter aus bausteine.css, mobil einspaltig, siehe Media-Query am Dateiende.
   figure traegt in der UA-Stylesheet einen Standardabstand, den wir hier auf null setzen. */
.bildstrecke {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-abstand-4);
}
.bildstrecke figure { margin: 0; }
.bildstrecke figcaption {
  margin-top: var(--mk-abstand-2);
  text-align: center;
  font-size: var(--mk-groesse-xs);
  color: var(--mk-farbe-text-gedaempft);
}

/* --- Referenzprojekt-Detail: Abschluss ---
   Gedaempfter Hintergrund wie das Vertrauensband, damit der Abschluss-Knopf sich vom
   Fliesstext davor absetzt und ohne weiteres Scrollen nach dem Lesen erreichbar bleibt. */
.referenz-abschluss {
  background: var(--mk-farbe-flaeche-gedaempft);
}
.referenz-abschluss__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mk-abstand-4);
  text-align: center;
}
.referenz-abschluss__inhalt p {
  margin: 0;
  text-align: center;
  max-width: var(--mk-breite-text);
}

/* --- Anfrage: Fortschrittsanzeige ---
   .fortschritt__spur und ihr ::after-Balken sind woertlich aus dem Auftrag uebernommen,
   damit anfrage.js die Breite ueber die Eigenschaft --anteil setzen kann. Bei
   prefers-reduced-motion steht --mk-dauer-mittel in marken-kit.css bereits auf 0ms, der
   Balken springt dann statt zu gleiten, ohne eigene Media-Query hier. */
.fortschritt {
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-2);
  margin-bottom: var(--mk-abstand-6);
}
.fortschritt span[data-fortschritt] {
  font-size: var(--mk-groesse-s);
  font-weight: var(--mk-gewicht-mittel);
  color: var(--mk-farbe-text-gedaempft);
}
.fortschritt__spur { height: 6px; border-radius: var(--mk-radius-s);
                     background: var(--mk-farbe-linie); overflow: hidden; }
.fortschritt__spur::after {
  content: ""; display: block; height: 100%; width: var(--anteil, 20%);
  background: var(--mk-farbe-primaer);
  transition: width var(--mk-dauer-mittel) var(--mk-kurve);
}

/* --- Anfrage: Schritte ---
   Jeder Schritt ist ein <section data-schritt>, das anfrage.js per hidden-Attribut ein-
   und ausblendet. Bewusst KEIN display auf [data-schritt] selbst, damit das Autor/UA-
   Problem aus dem Kommentar bei .karte[hidden] weiter oben hier gar nicht erst entsteht:
   ohne eigene display-Regel gewinnt das native "[hidden] { display:none }" ungestoert. */
.anfrage-schritt__intro {
  color: var(--mk-farbe-text-gedaempft);
}
.anfrage-schritt .feld,
.anfrage-schritt .foto-upload {
  max-width: var(--mk-breite-text);
}
.anfrage-schritt__aktionen {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--mk-abstand-3);
  margin-top: var(--mk-abstand-6);
}
.anfrage-schritt__aktionen .knopf { width: 100%; }
.anfrage-schritt__aktionen--einzeln { flex-direction: row; justify-content: flex-end; }

/* --- Anfrage: Kachel-Gruppe im Fehlerzustand ---
   .feld__hilfe steht hier als letztes Kind IM <fieldset class="kachel-raster">, damit die
   vorhandene Regel ".feld--fehler .feld__hilfe" aus bausteine.css (ein Nachfahren-Selektor)
   greift, sobald anfrage.js die Klasse feld--fehler auf das fieldset setzt. Als eigenes
   Grid-Kind braucht der Hinweistext nur die volle Zeilenbreite statt einer Rasterspalte. */
.kachel-raster__hilfe { grid-column: 1 / -1; }

/* --- Anfrage: Foto-Upload in drei Zustaenden ---
   Es gibt kein Backend, nichts wird wirklich hochgeladen. Die drei Zustaende (leer, mit
   ausgewaehlten Dateien, eine fehlgeschlagene Datei) sind rein clientseitig vorgefuehrt,
   siehe das Inline-Skript am Ende von anfrage.html. Der Weiter-Knopf wird an keiner Stelle
   ueber den Uploadstatus gesperrt: gueltig() in anfrage.js prueft ausschliesslich
   [required]-Felder, und das Datei-Feld traegt kein required. */
.foto-upload {
  margin-bottom: var(--mk-abstand-5);
}
.foto-upload__hinweis {
  font-size: var(--mk-groesse-s);
  color: var(--mk-farbe-text-gedaempft);
  margin: var(--mk-abstand-2) 0 var(--mk-abstand-3);
}
.foto-upload__liste {
  list-style: none;
  margin: 0 0 var(--mk-abstand-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-2);
}
.foto-upload__eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mk-abstand-3);
  padding: var(--mk-abstand-3);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
  border-radius: var(--mk-radius-s);
  background: var(--mk-farbe-flaeche);
}
/* Dieselbe Autor/UA-Falle wie bei .karte[hidden] weiter oben: .foto-upload__liste und
   .foto-upload__eintrag setzen "display: flex" als Autor-Regel, das native
   "[hidden] { display: none }" aus dem User-Agent-Stylesheet wird davon IMMER verdraengt,
   unabhaengig von Reihenfolge oder Spezifitaet. Ohne die beiden Regeln haette anfrage.js
   das hidden-Attribut zwar korrekt gesetzt, die Liste und die Demo-Fehlerzeile waeren aber
   trotzdem sichtbar geblieben. */
.foto-upload__liste[hidden],
.foto-upload__eintrag[hidden] {
  display: none;
}
.foto-upload__eintrag--fehler {
  border-color: var(--mk-farbe-fehler);
  background: var(--mk-farbe-flaeche-gedaempft);
}
.foto-upload__eintrag--fehler .knopf { margin-left: auto; }
.foto-upload__name { font-weight: var(--mk-gewicht-mittel); }
.foto-upload__status { font-size: var(--mk-groesse-xs); color: var(--mk-farbe-text-gedaempft); }
.foto-upload__status--fehler { color: var(--mk-farbe-fehler); }
.foto-upload__eingabe {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

/* --- Status: Kopf mit dem grossen Satz ---
   Ein Satz, kein Diagramm: der Kundentext der aktuellen Stufe steht als normales h1, das
   die Groesse bereits aus basis.css bekommt. Hier nur der kleine Meta-Text darunter
   (Vorgangsnummer, Zustaendigkeit). */
.status-kopf__meta {
  margin: 0;
  font-size: var(--mk-groesse-s);
  color: var(--mk-farbe-text-gedaempft);
}

/* --- Status: Haupt- und Foerderleiste ---
   Zwei eigene <ol class="stufenleiste">, jede mit eigener Ueberschrift, damit sie weder
   optisch noch strukturell als eine einzige Leiste lesbar sind. Die Foerderung laeuft
   zeitlich quer zur Montage (Design-Doc Abschnitt 4), deshalb eine eigene, kleinere Leiste
   statt eines siebten Eintrags in der Hauptleiste. */
.status-verlauf__spur + .status-verlauf__spur {
  margin-top: var(--mk-abstand-7);
}
.status-verlauf__spur h2 {
  font-size: var(--mk-groesse-l);
}
.stufenleiste--foerder {
  font-size: var(--mk-groesse-s);
}
.stufenleiste--foerder .stufe {
  grid-template-columns: 1rem 1fr;
  padding-block: var(--mk-abstand-2);
}
.stufenleiste--foerder .stufe__punkt {
  width: 1rem;
  height: 1rem;
}

/* --- Status: Termine ---
   .hinweis kommt unveraendert aus bausteine.css, hier nur der Abstand, falls mehrere
   Termine gleichzeitig anstehen. */
.status-termine .hinweis + .hinweis {
  margin-top: var(--mk-abstand-3);
}

/* --- Status: Dokumente ---
   Nur freigegebene Dokumente werden angezeigt (Sichtbarkeitsflagge im Datenmodell). Kein
   Download-Link: der Prototyp hat kein Backend, ein "#"-Link wuerde eine Funktion
   vortaeuschen, die nicht existiert. */
.status-dokumente__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-2);
}
.status-dokumente__eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mk-abstand-2);
  padding: var(--mk-abstand-3) var(--mk-abstand-4);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
  border-radius: var(--mk-radius-s);
  background: var(--mk-farbe-flaeche);
}
.status-dokumente__name {
  font-weight: var(--mk-gewicht-mittel);
}
.status-dokumente__datum {
  font-size: var(--mk-groesse-xs);
  color: var(--mk-farbe-text-gedaempft);
}

/* --- Status: Abschluss vor der Fusszeile ---
   Eigener Satz plus Telefonnummer, zusaetzlich zur unveraendert uebernommenen .fusszeile
   darunter (Kopf- und Fusszeile bleiben zeichengenau wie auf den anderen Seiten). Gleiches
   Muster wie .referenz-abschluss. */
.status-abschluss {
  background: var(--mk-farbe-flaeche-gedaempft);
}
.status-abschluss__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mk-abstand-4);
  text-align: center;
}
.status-abschluss__inhalt p {
  margin: 0;
}

/* --- Status: Peak-End-Animation ---
   Nur bei frischem Absenden (?neu=1, Aufgabe 6) baut sich die Hauptleiste einmalig auf.
   status.html setzt die Klasse stufenleiste--neu ausschliesslich per Inline-Skript und nur
   auf die erste .stufenleiste im Dokument (die Hauptleiste), damit die Foerderleiste beim
   Wiederkommen nicht ein zweites Mal Bewegung ins Bild bringt. Der reduced-motion-Riegel
   dazu steht bewusst NICHT hier, sondern am Dateiende bei den uebrigen @media-Regeln
   (Kaskaden-Regel Build-Methodik), siehe dort. */
.stufenleiste--neu .stufe {
  animation: stufe-ein var(--mk-dauer-mittel) var(--mk-kurve) backwards;
}
.stufenleiste--neu .stufe:nth-child(1) { animation-delay: 0ms; }
.stufenleiste--neu .stufe:nth-child(2) { animation-delay: 60ms; }
.stufenleiste--neu .stufe:nth-child(3) { animation-delay: 120ms; }
.stufenleiste--neu .stufe:nth-child(4) { animation-delay: 180ms; }
.stufenleiste--neu .stufe:nth-child(5) { animation-delay: 240ms; }
.stufenleiste--neu .stufe:nth-child(6) { animation-delay: 300ms; }
@keyframes stufe-ein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Leistungen: die vier Bereiche ---
   Ein gemeinsamer Abschnitt mit vier .leistung-Bloecken (h2, Fliesstext, Abschluss-Knopf),
   nach demselben Erzaehl-Muster wie .referenz-erzaehlung. Statt eigener Ueberschriften pro
   Abschnitt traegt jeder Block einen Trennstrich zum vorigen, damit die vier Bereiche als
   eine zusammenhaengende Liste lesen statt als vier isolierte Boeden. */
.leistung + .leistung {
  margin-top: var(--mk-abstand-7);
  padding-top: var(--mk-abstand-7);
  border-top: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
}

/* --- Betrieb: Meisterqualifikation, Einzugsgebiet, Team ---
   Gleiches Prinzip wie .referenz-erzaehlung: ein Abschnitt, mehrere h2, nur die erste
   Ueberschrift steht direkt unter dem Abschnitts-Padding. */
.betrieb-inhalt h2:not(:first-child) {
  margin-top: var(--mk-abstand-6);
}

/* --- Kontakt: Impressum und Datenschutz ---
   Gedaempfter Hintergrund setzt die beiden Rechtsabschnitte sichtbar von den echten
   Kontaktdaten darueber ab, zusaetzlich zum textlichen Mustertext-Hinweis in jedem
   Abschnitt (.hinweis--fehler aus bausteine.css, unveraendert). */
.kontakt-rechtliches {
  background: var(--mk-farbe-flaeche-gedaempft);
}

/* Media-Queries stehen am DATEIENDE (Kaskaden-Regel Build-Methodik), dieselben
   Breakpoints wie basis.css und bausteine.css. */
@media (min-width: 48rem) {
  .kopfzeile__menue { order: 0; width: auto; }
  .fusszeile__reihe {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .eckdaten { grid-template-columns: repeat(2, 1fr); }
  .bildstrecke { grid-template-columns: repeat(2, 1fr); }
  /* Haupt- und Foerderleiste nebeneinander statt untereinander: die zwei Spalten machen
     die Trennung zusaetzlich zu den zwei Ueberschriften sichtbar. */
  .status-verlauf__gitter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mk-abstand-6);
    align-items: start;
  }
  .status-verlauf__spur + .status-verlauf__spur { margin-top: 0; }
  .anfrage-schritt__aktionen { flex-direction: row; justify-content: space-between; align-items: center; }
  .anfrage-schritt__aktionen .knopf { width: auto; }
  /* .anfrage-schritt__aktionen--einzeln braucht hier keine eigene Regel: sie setzt
     justify-content: flex-end schon in der Basis-Regel weiter oben, ohne eigene
     Media-Query, das gilt unveraendert auch bei dieser Breite weiter. */
}
@media (min-width: 64rem) {
  /* Fuenf Filterkacheln (Alle plus vier Bereiche) passen bei dieser Breite in eine
     Reihe, statt wie der generische .kachel-raster bei vier Spalten umzubrechen. */
  .kachel-raster--filter { grid-template-columns: repeat(5, 1fr); }
  .bildstrecke { grid-template-columns: repeat(4, 1fr); }
}

/* --- Status: reduced motion schaltet die Aufbau-Animation vollstaendig ab ---
   Nicht nur die Dauer auf 0ms setzen (das erledigt marken-kit.css bereits fuer
   --mk-dauer-mittel), sondern "animation: none": mit backwards-Fill-Mode wuerde selbst eine
   0ms-Animation waehrend ihres animation-delay (bis zu 300ms) den from-Zustand
   (opacity: 0) zeigen, bevor sie ans Ende springt. Erst das vollstaendige Entfernen der
   Animation stellt sicher, dass jede Stufe sofort im Endzustand (Deckkraft 1, keine
   Verschiebung) steht statt kurz leer aufzublitzen oder leer zu bleiben. */
@media (prefers-reduced-motion: reduce) {
  .stufenleiste--neu .stufe { animation: none; }
}