/* ==========================================================================
   PULSWERK · Anfrage mit Richtwert-Rechner (nur hier gebraucht) · Gestaltung „Schnitt“
   Der Wizard ist EIN Formular in Schritten (seiten/laserreinigung-anfrage/index.html, js/rechner.js).
   Ohne JavaScript stehen alle Schritte untereinander. Mit JavaScript setzt rechner.js
   form.wizard--aktiv: ein Schritt ist sichtbar, darüber Fortschritt als Beschriftung
   und Balken. Keine Schrittnummern (Jimmy 06.10.2026).
   Alle Farben aus dem Kontext (--c-…), Bausteine aus pulswerk.css (Abschnitt 28: Formular).
   ========================================================================== */

/* „So gelingen die Fotos“ unter dem Formular: Liste ab mittlerer Breite zweispaltig, damit der Kasten flach bleibt */
@media (min-width: 700px) {
  .randkasten--fotos .liste { columns: 2; column-gap: 28px; }
  .randkasten--fotos .liste li { break-inside: avoid; }
}

/* Ausgeblendete Teile: Bausteine mit display: grid/flex brauchen die Regel ausdrücklich */
.wizard [hidden] { display: none !important; }


/* Kopf knapp halten: Der erste Schritt (Kacheln) soll am Desktop ohne Scrollen sichtbar sein */
.abschnitt--anfrage { padding-top: clamp(28px, 3.5vw, 48px); }
.abschnitt--anfrage .abschnitt__kopf { margin-bottom: clamp(22px, 2.5vw, 34px); }
.abschnitt--anfrage .titel { font-size: clamp(32px, 2vw + 18px, 54px); }


/* --------------------------------------------------------------------------
   Schritte
   -------------------------------------------------------------------------- */
.schritt { display: grid; gap: 20px; min-width: 0; }
.schritt > .feld { grid-column: auto; }   /* .feld aus pulswerk.css spannt sonst zwei Spalten und erzwingt ein zweites Raster */
/* Ohne Wizard (kein JS): Schritte untereinander, mit Haarlinie getrennt */
.wizard:not(.wizard--aktiv) .schritt + .schritt { padding-top: 28px; border-top: 1px solid var(--c-linie-stark); }
.schritt__titel {
  font-size: clamp(24px, .9vw + 18px, 32px);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.schritt__titel:focus { outline: none; }                  /* Fokus setzt rechner.js beim Schrittwechsel */
.schritt__titel:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 4px; }
.schritt__hinweis { max-width: 60ch; margin: -6px 0 0; color: var(--c-gedaempft); font-size: 16px; line-height: 1.55; }

/* Zurück/Weiter: nur im Wizard. Ohne JS gibt es nur den Absendeknopf. */
.schritt__nav { display: none; }
[data-zurueck] { display: none; }
.wizard--aktiv .schritt__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 6px;
}
.wizard--aktiv .schritt__nav [data-weiter] { margin-left: auto; }
.wizard--aktiv [data-zurueck] { display: inline-flex; }
@media (max-width: 479px) {
  .wizard--aktiv .schritt__nav .knopf { flex: 1 1 100%; }
}

/* Zurücksetzen (nur im Wizard) */
.wizard__zuruecksetzen { display: none; margin: 0; }
.wizard--aktiv .wizard__zuruecksetzen { display: block; }
.textknopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-gedaempft);
  font: 400 14px/1.5 var(--schrift-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.textknopf:hover { color: var(--c-text); }


/* --------------------------------------------------------------------------
   Fortschritt: Beschriftung, Balken und Liste der Schritte (ohne Nummern)
   -------------------------------------------------------------------------- */
.fortschritt { display: grid; gap: 12px; }
.fortschritt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.fortschritt__stand { margin: 0; font: 600 17px/1.3 var(--schrift-text); color: var(--c-text); }
.fortschritt__naechster { margin: 0; font: 500 13px/1.4 var(--schrift-mono); letter-spacing: .01em; color: var(--c-gedaempft); }
.fortschritt__balken { position: relative; height: 4px; overflow: hidden; background: var(--c-linie-stark); }
.fortschritt__fuellung {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--c-marke);
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.fortschritt__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fortschritt__punkt {
  position: relative;
  min-width: 0;
  padding-left: 14px;
  font: 500 12.5px/1.5 var(--schrift-mono);
  letter-spacing: .01em;
  color: var(--c-gedaempft);
}
.fortschritt__punkt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  background: var(--c-linie-stark);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.fortschritt__punkt.ist-fertig::before,
.fortschritt__punkt.ist-aktiv::before { background: var(--c-marke); }
.fortschritt__punkt.ist-aktiv { color: var(--c-text); }
.fortschritt__punkt button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: text-decoration-color var(--uebergang);
}
.fortschritt__punkt button:hover { text-decoration-color: currentColor; }
/* Breit: die Schrittleiste genügt, „Aktueller Schritt / Danach“ bleibt nur für Screenreader.
   Schmal: oben „Aktueller Schritt / Danach“, darunter nur die schon gewählten Punkte (zum Ändern). */
@media (min-width: 700px) {
  .fortschritt__kopf {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fortschritt { gap: 14px; }
  .fortschritt__liste { order: 2; }
}
@media (max-width: 699px) {
  .fortschritt__punkt:not(.hat-wahl) { display: none; }
  .fortschritt__liste:not(:has(.hat-wahl)) { display: none; }
}


/* --------------------------------------------------------------------------
   Richtung: Kacheln je Leistungsbereich (erster Schritt, wie die Kategorien im Shop)
   Das Radio liegt unsichtbar über der ganzen Kachel, ein Klick oder Tipp wählt und führt
   weiter (rechner.js). Gewählt: gelber Rahmen und gelbe Ecke.
   -------------------------------------------------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.kachel {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--anthrazit);
  cursor: pointer;
}
.kachel input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.kachel__bild { position: absolute; inset: 0; }
.kachel__bild .bild { height: 100%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* Name auf dem Foto, unten auf dunklem Verlauf: in beiden Farbmodi hell auf dunkel */
.kachel__name {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  padding: 26px 11px 9px;
  background: linear-gradient(180deg, transparent, rgb(12 16 20 / .55) 38%, rgb(12 16 20 / .88));
  font: 600 15px/1.25 var(--schrift-text);
  color: #fff;
  hyphens: auto;
  overflow-wrap: break-word;
}
.kachel__zusatz {
  display: block;
  hyphens: manual;
  margin-top: 3px;
  font: 500 12px/1.35 var(--schrift-mono);
  letter-spacing: .01em;
  color: rgb(255 255 255 / .75);
}
/* Rahmen über dem Foto: dünn grau, gewählt gelb mit gelber Ecke */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1.5px solid rgb(255 255 255 / .14);
  pointer-events: none;
  transition: border-color var(--uebergang);
}
.kachel:hover::before { border-color: rgb(255 255 255 / .45); }
.kachel:hover .kachel__bild .bild { transform: scale(1.05); }
.kachel:has(input:checked)::before { border: 3px solid var(--c-marke); }
.kachel:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.kachel:has(input:focus-visible) { outline: 3px solid var(--c-fokus); outline-offset: 2px; }
/* „Noch unklar“: statt Foto eine schraffierte Fläche */
.kachel--ohne-bild .kachel__bild {
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgb(255 255 255 / .07) 9px 10px), var(--anthrazit);
}
.kachel--ohne-bild .kachel__name { background: none; }
@media (min-width: 600px) {
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .kachel__name { padding: 22px 9px 8px; font-size: 14px; }
  .kachel__zusatz { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kachel__bild .bild { transition: none; }
  .kachel:hover .kachel__bild .bild { transform: none; }
}

/* Im Wizard steht der Bereich schon in der Fortschrittsleiste: Gruppentitel nur für Screenreader */
.wizard--aktiv [data-verschmutzung] .wahl-gruppe__titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Auswahl in Gruppen (Verschmutzung je Leistungsbereich, Untergrund)
   -------------------------------------------------------------------------- */
.wahl-gruppen { display: grid; gap: 22px; }
.wahl-gruppe {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wahl-gruppe__titel { display: block; margin: 0; padding: 0; }
.wahl-gruppe__titel > span {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font: 500 13px/1.35 var(--schrift-mono);
  letter-spacing: .02em;
  color: var(--c-gedaempft);
}
.wahl-gruppe__titel > span::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--c-marke);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Kacheln als Liste: volle Breite, zwei Spalten, sobald Platz ist */
.wahl--liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 8px;
}
.wahl--liste .wahl__option { min-width: 0; }
.wahl--liste .wahl__option span {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  line-height: 1.35;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}
.wahl--liste .wahl__option:hover span { border-color: var(--c-gedaempft); }
.wahl--liste .wahl__option input:checked + span { border-color: var(--c-marke); }


/* --------------------------------------------------------------------------
   Maße: Länge × Breite, Einheit im Feld
   -------------------------------------------------------------------------- */
.masse__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.masse__zeile > * { min-width: 0; }
.masse__zeile > .feld { grid-column: auto; }   /* .feld aus pulswerk.css spannt sonst zwei Spalten */
.masse__mal {
  padding-top: calc(1.35em + 8px + 14px);   /* auf Höhe der Eingabefelder (Label + Abstand + halbe Feldhöhe) */
  font: 500 20px/1 var(--schrift-mono);
  color: var(--c-gedaempft);
}
.einheit { position: relative; }
.einheit .feld__eingabe { padding-right: 52px; }
.einheit__text {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 14px/1 var(--schrift-mono);
  color: var(--c-gedaempft);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Fotos: Galerie (Zone aus pulswerk.css) und Kamera (nur auf Geräten ohne Maus sichtbar)
   -------------------------------------------------------------------------- */
.upload__kamera { position: relative; display: flex; }
.upload__kamera-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}
.upload__kamera .knopf { cursor: pointer; }
.upload__kamera-eingabe:focus-visible + .knopf { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
/* Entfernen-Knopf der Foto-Vorschau: Trefferfläche 44 × 44 px (Touch), sichtbar bleibt das 30-px-Quadrat an derselben Stelle.
   Der durchsichtige Rahmen zählt zur Fläche, der Hintergrund füllt nur den Innenkasten. */
.wizard .upload__entfernen {
  top: 3px;
  right: 3px;
  width: 44px;
  height: 44px;
  border: 7px solid transparent;
  background-clip: padding-box;
}
@media (hover: hover) and (pointer: fine) {
  .upload__kamera { display: none; }   /* am Schreibtisch öffnet die Zone den Dateidialog, eine Kamera gibt es dort selten */
}


/* --------------------------------------------------------------------------
   Richtwert: Zahlen in IBM Plex Mono, Fläche mit gelber Kante
   -------------------------------------------------------------------------- */
.ergebnis {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 30px);
  border-left: 4px solid var(--c-marke);
  background: var(--c-feld);
}
.ergebnis__zahl {
  margin: 0;
  font: 500 clamp(26px, 1.6vw + 16px, 40px)/1.15 var(--schrift-mono);
  letter-spacing: -.02em;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.ergebnis__zahl small {
  display: block;
  margin-top: 8px;
  font: 400 15px/1.5 var(--schrift-text);
  letter-spacing: 0;
  color: var(--c-gedaempft);
}
.ergebnis__text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--c-text); }
.ergebnis__text strong { font-weight: 600; }
.ergebnis__hinweis { margin: 0; color: var(--c-gedaempft); font-size: 15px; line-height: 1.5; }
.ergebnis__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px 20px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-linie);
}
.ergebnis__daten > div { min-width: 0; }
.ergebnis__daten dt { font: 500 12.5px/1.5 var(--schrift-mono); letter-spacing: .01em; color: var(--c-gedaempft); }
.ergebnis__daten dd { margin: 0; font-size: 16px; line-height: 1.45; }
.ergebnis__preis { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--c-linie); }
.ergebnis__preis-zahl {
  margin: 0;
  font: 500 clamp(22px, 1vw + 16px, 30px)/1.2 var(--schrift-mono);
  letter-spacing: -.015em;
  color: var(--c-text);
}
.ergebnis__preis-titel { margin: 0; font: 600 15px/1.4 var(--schrift-text); color: var(--c-text); }


/* --------------------------------------------------------------------------
   Schrittfolge „So geht es weiter“ ohne Nummern (Baustein .ablauf, Abschnitt 17)
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .ablauf--ohne-nr .ablauf__schritt { grid-template-columns: minmax(0, 1fr); padding: 22px 0; border-top: 1px solid var(--c-linie); }
  .ablauf--ohne-nr .ablauf__schritt > * { grid-column: 1; }
  .ablauf--ohne-nr .ablauf__schritt::before { display: none; }
  .ablauf--ohne-nr .ablauf__schritt:last-child { padding-bottom: 0; }
}


/* --------------------------------------------------------------------------
   Dankeseite (/laserreinigung-anfrage/danke/): Hinweis, Zusammenfassung, Knöpfe untereinander
   -------------------------------------------------------------------------- */
.danke { display: grid; gap: 24px; align-content: start; }
.danke__meldung:empty { display: none; }
.danke__angaben .ergebnis__daten { padding-top: 0; border-top: 0; }


/* --------------------------------------------------------------------------
   Kostenrechner auf /laserreinigung-kosten-ablauf/ (js/kostenrechner.js): Formular links, Ergebnis rechts, darunter der Knopf
   -------------------------------------------------------------------------- */
[data-kostenrechner][hidden], [data-kr-ohne-js][hidden] { display: none !important; }
.kostenrechner .formular { gap: 18px; }
.kostenrechner__ergebnis { display: grid; gap: 14px; align-content: start; }
.kostenrechner__ergebnis .ergebnis { min-height: 120px; }


/* --------------------------------------------------------------------------
   Wegweiser durch die Leistungsbereiche (unter den Fragen): Titel als Link, ein Satz darunter
   -------------------------------------------------------------------------- */
.wegweiser {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wegweiser__eintrag { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--c-linie); min-width: 0; }
.wegweiser__titel { margin: 0; font: 600 18px/1.3 var(--schrift-text); }
.wegweiser__titel a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-marke); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.wegweiser__titel a:hover { text-decoration-thickness: 3px; }
.wegweiser__text { margin: 0; color: var(--c-gedaempft); font-size: 16px; line-height: 1.5; }