/* UNTERSEITEN (Leistungsseiten und die Pflichtseiten Kontakt, Impressum, AGB, Datenschutz),
   Entscheidung 2026-09-25: dunkel wie die Startseite, gleicher Kopf,
   Fuß und Schrift, ohne Rundgang. Kopf, Siegel, Laufband, Fuß und mobile Leiste sind Kopien aus
   der Startseite konzept-e-rundgang.html (deren Stil steht seit 2026-10-03 in startseite.css?v=5127b64d23; die
   früher hier genannten Zeilennummern galten für den Inline-Block und sind entfallen); die
   Startseite bleibt unberührt.
   Abweichung: Das Siegel ist hier kleiner (Startseite 295 px), sonst nähme der klebende Kopf auf einer
   Textseite ein Drittel des Bildschirms. Verboten bleiben die Merkmale aus Baubefehl-Schritt-5
   (keine gesperrten Versal-Labels, kein Kennzahlenband, keine nummerierte 01–04-Reihe, kein Akzentton).
   Bilder mit Kennzeichen (Flotte) liegen nur hinter dem Bauplatz-Passwort, vor Go-Live neu entscheiden. */

:root {
  --kopf-hoehe: 172px;
  --rand: clamp(16px, 3.4vw, 48px);
}
section[id] { scroll-margin-top: var(--kopf-hoehe); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-1); color: var(--paper-0); padding: var(--sp-3) var(--sp-5); font-weight: 600; text-decoration: none; }
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* KOPF — Kopie der Startseite, Siegel 150 statt 295 px. */
.kopf {
  position: sticky; top: 0; z-index: 30;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-inline: var(--rand);
  background: var(--paper-0);
  border-bottom: 1px solid var(--line-1);
}
.siegel { position: relative; display: block; flex: none; height: 150px; aspect-ratio: 525.73 / 340; color: var(--ink-1); }
.siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.siegel .hof { stroke: var(--paper-0); stroke-width: 9px; paint-order: stroke; stroke-linejoin: round; }
.siegel:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.kopf-wege { display: flex; gap: var(--sp-3); }
.kopf .btn { padding: var(--sp-3) var(--sp-5); font-size: 1.05rem; }

.marken-band {
  display: flex; overflow: hidden; min-width: 0; opacity: 0.78;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marken { flex: none; display: flex; align-items: center; gap: var(--sp-6); margin: 0; padding: 0 var(--sp-6) 0 0; list-style: none; }
.marken li { flex: none; }
.marken img { display: block; width: auto; height: var(--h, 26px); }
.marken .m-xpel { --h: 22px; }
.marken .m-3m { --h: 26px; }
.marken .m-avery { --h: 30px; }
.marken .m-orafol { --h: 30px; }
.marken .m-brux { --h: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .marken { animation: marken-laufen 28s linear infinite; }
  @keyframes marken-laufen { from { translate: 0 0; } to { translate: -100% 0; } }
}
@media (hover: hover) { .marken-band:hover .marken { animation-play-state: paused; } }
.kopf .marken-band { flex: 1 1 auto; }
@media (max-width: 1279px) { .kopf .marken-band { display: none; } }

/* PFAD — normale Schreibweise, bewusst kein gesperrtes Versal-Label (Abgrenzungsmerkmal 1). */
.pfad { margin: 0; padding: var(--sp-5) var(--rand) 0; font-size: 0.95rem; color: var(--ink-3); }
.pfad ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pfad li + li::before { content: "/"; margin-right: var(--sp-2); }
.pfad a { color: var(--ink-2); text-underline-offset: 3px; }

/* TITELBLOCK — Überschrift und Einstieg links, Bild darunter über die volle Breite. */
.titel { padding: var(--sp-6) var(--rand) var(--sp-6); display: grid; gap: var(--sp-5); justify-items: start; max-width: 1500px; margin: 0 auto; }
h1 {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: 1.08; text-transform: uppercase;
}
.einstieg { margin: 0; max-width: 46rem; font-size: clamp(1.14rem, 1.5vw, 1.32rem); font-weight: 500; color: var(--ink-2); }
.titel-wege { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.titelbild { position: relative; margin: 0; background: #151516; }
.titelbild img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.titelbild-quadrat img { aspect-ratio: 16 / 9; object-position: 50% 55%; }   /* quadratische Vorlage, sonst bliebe bei 21:9 nur ein Streifen */
/* Showroom-Titel (werkzeug/showroom): Film spielt einmal, danach bleibt das letzte Bild stehen.
   Das Standbild liegt darunter und trägt alt, LCP und den Fall ohne Film. Bild und Film sind 4:3
   und werden überall ganz gezeigt, damit der Lichttunnel mit allen Leisten zu sehen ist (Marco
   2026-10-09: „Ganzer Tunnel"). Auf breiten Fenstern wäre das volle Breite zu hoch, deshalb ist die
   Höhe auf 75 % des Fensters begrenzt und das Bild steht mittig auf Schwarz. Die Bildränder sind
   nicht schwarz (rechts im Mittel 41 von 255, gemessen an cupra-1600), darum laufen beide Seiten
   per Maske weich in Schwarz aus, nur auf den äußersten 3 % links und 2,5 % rechts: Die äußeren Leisten
   stehen bei 7 % und 96 % der Breite und blieben sonst abgedunkelt (Marco 2026-10-09). Film und Standbild teilen Breite und Maske, bleiben also
   deckungsgleich. Kein Blitz: Der erste Filmframe ist reines Schwarz, also ist auch der Grund
   schwarz, und das Standbild ist schon beim ersten Malen ausgeblendet, sobald der Film laufen darf. */
.titelbild-showroom { --tb-b: 100%; background: #000; }
.titelbild-showroom img { display: block; width: var(--tb-b); margin-inline: auto; aspect-ratio: 4 / 3; transition: opacity .4s; }
.titelfilm { position: absolute; top: 0; left: calc((100% - var(--tb-b)) / 2); width: var(--tb-b); height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
@media (min-width: 761px) and (min-aspect-ratio: 1 / 1) {
  .titelbild-showroom { --tb-b: min(100%, 75vh * 4 / 3); --tb-b: min(100%, 75svh * 4 / 3); }
  .titelbild-showroom img, .titelfilm {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97.5%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97.5%, transparent);
  }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .titelbild-showroom:not(.ohne-film) img { opacity: 0; }
  .titelbild-showroom:not(.ohne-film) .titelfilm { opacity: 1; }
}
.beispiel {
  position: absolute; right: var(--rand); top: var(--sp-3); z-index: 3;
  font-size: 0.82rem; color: var(--paper-0);
  background: var(--ink-1); padding: var(--sp-1) var(--sp-3);
}

/* ABSCHNITT — Überschrift links, Text rechts. Jede Seite wechselt zwischen diesem Raster, der Liste
   mit harten Linien und der Tabelle, damit sich kein Raster über die ganze Seite wiederholt. */
.abschnitt { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-5) var(--sp-7); align-items: start; }
.abschnitt h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.08; text-transform: uppercase;
}
.abschnitt .text > p { margin: 0 0 var(--sp-4); max-width: 60ch; color: var(--ink-2); font-size: 1.1rem; }
.abschnitt .text > p:last-child { margin-bottom: 0; }
.abschnitt .text a { color: var(--ink-1); font-weight: 600; text-underline-offset: 3px; }

/* LISTE mit harten Linien, Badge-Sprache wie bei den Häufigen Fragen der Startseite. Keine Nummern. */
.linien { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--line-2); max-width: 46rem; }
.linien li {
  border-top: 2px solid var(--line-2); padding: var(--sp-4) 0;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; text-transform: uppercase;
}

/* TABELLE (Tönungsfolien). Auf dem Handy seitlich wischbar statt gequetscht. */
.tabelle-rahmen { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.werte { border-collapse: collapse; width: 100%; min-width: 34rem; font-variant-numeric: tabular-nums; }
.werte caption { text-align: left; color: var(--ink-3); font-size: 0.95rem; padding-bottom: var(--sp-3); }
.werte th, .werte td { text-align: left; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--line-1); }
.werte thead th { font-weight: 600; color: var(--ink-2); font-size: 0.95rem; border-bottom: 2px solid var(--line-2); }
.werte tbody th { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.werte td { font-size: 1.1rem; }

/* HINWEIS: ein Satz, der abgrenzt (Kleinaufträge). Rahmen statt Farbe. */
.abgrenzung { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border: 2px solid var(--line-2); max-width: 46rem; color: var(--ink-1); font-weight: 500; }

/* LÜCKE: Stelle, die Matthias vor der Freigabe prüft. Gleiche Form wie .luecke auf der Startseite. */
.luecke { display: inline-block; margin-top: var(--sp-2); padding: 2px var(--sp-2); border: 2px dashed var(--pruefstelle); color: var(--ink-3); font-size: 0.92rem; font-weight: 500; }

/* FOTOREIHE „Folie abziehen“ direkt in der Seite (auf der Startseite im Dialog). Gleiche Klassen und
   Werte wie dort (.fk, .fk-folie, .fk-lasche, .fk-kante, --abz), damit beide Stellen gleich aussehen. */
.fotos { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; }
.fotos h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.08; text-transform: uppercase;
}
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .foto-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } }
.foto-raster li[hidden] { display: none; }
.fk { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: var(--paper-1);
  cursor: pointer; -webkit-tap-highlight-color: transparent; --abz: 0.05; }
.fk img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
@property --abz { syntax: "<number>"; inherits: true; initial-value: 0; }
.fk-folie, .fk-kante, .fk-lasche { position: absolute; inset: 0; pointer-events: none; }
.fk-folie { clip-path: polygon(calc(var(--abz) * 200%) 0, 300% 0, 300% 300%, 0 300%, 0 calc(var(--abz) * 200%)); }
.fk-folie img { filter: grayscale(1) contrast(0.75) brightness(1.15) blur(1.2px); transform: scale(1.02); }
.fk-folie::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(236, 238, 240, 0.42), rgba(236, 238, 240, 0.2) 45%, rgba(236, 238, 240, 0.36)); }
.fk-lasche { --m: calc(var(--abz) * 100% + min(var(--abz) * 100%, 18%));
  clip-path: polygon(calc(var(--abz) * 200%) 0, var(--m) var(--m), 0 calc(var(--abz) * 200%));
  background: linear-gradient(135deg, rgba(252, 253, 254, 0.97) calc(var(--abz) * 100%), rgba(214, 218, 222, 0.94) calc(var(--abz) * 100% + 6%),
    rgba(150, 155, 160, 0.92) var(--m)); }
.fk-kante { background: linear-gradient(135deg,
  transparent calc(var(--abz) * 100% - 5%),
  rgba(0, 0, 0, 0.38) calc(var(--abz) * 100% - 0.6%),
  rgba(255, 255, 255, 0.95) calc(var(--abz) * 100%),
  transparent calc(var(--abz) * 100% + 1.2%)); }
.fk.zieht-ab { animation: folie-abziehen 1.25s cubic-bezier(0.55, 0.08, 0.3, 1) forwards; }
@keyframes folie-abziehen { to { --abz: 1.2; } }
.fk.frei :is(.fk-folie, .fk-kante, .fk-lasche) { display: none; }
@media (prefers-reduced-motion: reduce) { .fk-folie, .fk-kante, .fk-lasche { display: none; } }
.fk:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
.mehr-fotos { margin-top: var(--sp-5); }
.btn[hidden] { display: none; }

/* GROSSANSICHT im Dialog, Kopie der Startseite. */
.gross { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--paper-0) 96%, transparent); color: var(--ink-1); overflow: hidden; }
.gross[open] { display: grid; grid-template-rows: auto 1fr auto; }
.gross::backdrop { background: var(--paper-0); }
.gross-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--rand); }
.zaehlung { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gross-buehne { position: relative; min-height: 0; overflow: hidden; display: grid; padding: 0 var(--rand); touch-action: pan-y; }
.gross-buehne img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gross-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--rand) var(--sp-5); }
.gross-fuss p { margin: 0; color: var(--ink-2); text-align: center; flex: 1; }
.gross-zu { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--ink-1); border: 2px solid var(--ink-1); cursor: pointer; font-size: 1.6rem; line-height: 1; }
.blaettern { flex: none; width: 56px; height: 56px; background: transparent; color: var(--ink-1); border: 2px solid var(--line-2); cursor: pointer; font-size: 1.5rem; }
.gross-zu:focus-visible, .blaettern:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }
@media (hover: hover) { .blaettern:hover, .gross-zu:hover { background: var(--ink-1); color: var(--paper-0); } }

/* WEITER: die anderen Leistungen und der Weg zur Anfrage. */
.weiter { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.weiter h2 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.08; text-transform: uppercase;
}
.weiter p { margin: 0 0 var(--sp-5); color: var(--ink-2); font-size: 1.1rem; max-width: 46ch; }
.andere { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--line-2); }
.andere li { border-top: 2px solid var(--line-2); }
.andere a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.05; text-transform: uppercase;
  text-decoration: none; transition: translate 0.3s var(--ease-out);
}
.andere a::after { content: "→"; flex: none; }
@media (hover: hover) { .andere a:hover { translate: 8px 0; } }
.andere a:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }

/* KONTAKT: Anfrageblock als Kopie der Startseite (dort .anfrage bis .anruf, Zeilen 236–305 und die
   Handy-Regeln), ohne die Effekte aus Abschnitt 9. Die Logik liegt in anfrage.js?v=c0c7330a59. */
.anfrage { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.anfrage h2 {
  margin: 0 0 var(--sp-4); grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.08; text-transform: uppercase;
}
@media (min-width: 1101px) {
  .anfrage h2 { grid-column: 1; grid-row: 1; }
  .anfrage-form { grid-column: 1; grid-row: 2; }
  .anruf { grid-column: 2; grid-row: 1 / span 2; }
}
.anfrage-form { display: grid; gap: var(--sp-5); }
.anfrage fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.anfrage legend { padding: 0; margin-bottom: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.kacheln { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.kachel { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; flex: 1 1 auto; min-height: 56px; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--line-1); cursor: pointer; font-weight: 600; font-size: 0.96rem; line-height: 1.2; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel:hover { border-color: var(--ink-2); }
.kachel:has(input:checked) { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.kachel:has(input:focus-visible) { outline: 3px solid var(--ink-1); outline-offset: 3px; }
/* Passen die fünf Kacheln nicht in eine Reihe (Formular unter 760 px, z. B. Tablet hochkant oder Laptop 1280 px): drei oben, zwei unten statt „Flotte“ allein über die volle Breite. Das Handy behält zwei pro Reihe. */
.anfrage-form { container: anfrage / inline-size; }
@container anfrage (min-width: 556px) and (max-width: 759px) {
  .kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kachel { grid-column: span 2; }
  .kachel:nth-child(n+4) { grid-column: span 3; }
}
/* Handy: zwei pro Reihe, die fünfte Kachel gleich breit und mittig statt über die volle Breite. */
@container anfrage (max-width: 555px) {
  .kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kachel { grid-column: span 2; }
  .kachel:nth-child(5) { grid-column: 2 / span 2; }
}
.spezialisierung { margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: 0.92rem; max-width: 60ch; }
.feldgruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.feld { display: grid; gap: var(--sp-2); }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: 0.98rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; color: var(--ink-1);
  background: var(--paper-1); border: 1px solid var(--line-1); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-3);
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 1px; border-color: var(--ink-1); }
.feld .zusatz { color: var(--ink-3); font-size: 0.92rem; font-weight: 400; }
.feld ::placeholder { color: var(--ink-3); opacity: 1; }
.feldgruppe[data-fuer] { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Fotos bei der Fahrzeugfolierung (anfrage.js?v=c0c7330a59 verkleinert und schickt sie). .feld setzt display:grid und
   höbe hidden sonst auf; ohne Skript bleibt das Feld so verborgen. */
.feld.anfrage-fotos[hidden], .foto-liste[hidden] { display: none; }
/* Hinweis bei Komplettfolierung (anfrage.js?v=c0c7330a59), volle Breite unter Fahrzeug und Umfang. */
.komplett-hinweis { grid-column: 1 / -1; margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 0.92rem; }
.komplett-hinweis strong { color: var(--ink-1); }
.feld .feld-titel { font-weight: 600; font-size: 0.98rem; }
.feld .feld-hinweis { margin: 0; color: var(--ink-3); font-size: 0.92rem; max-width: 60ch; }
.foto-datei { display: none; }
.foto-liste { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.foto-liste li { position: relative; }
.foto-liste canvas { display: block; width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--line-1); border-radius: var(--r); }
.foto-weg { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid var(--paper-0); border-radius: 50%; background: var(--ink-1); color: var(--paper-0); font: 700 1.25rem/1 system-ui, sans-serif; cursor: pointer; }
.foto-weg:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; }
.foto-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.foto-knopf { padding: var(--sp-3) var(--sp-4); font-size: 1rem; }
.foto-knopf:disabled, .foto-knopf:disabled:hover { opacity: 0.45; cursor: default; background: transparent; color: var(--ink-1); }
.foto-meldung { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.foto-meldung:empty { display: none; }
@media (max-width: 760px) {
  .foto-liste canvas { width: 68px; height: 68px; }   /* vier nebeneinander ab 360 px Breite (320 px Inhalt) */
}
.stufe-2, .nur-fuer { display: none; }
.anfrage-form:has(input[name="leistung"]:checked) .stufe-2 { display: grid; gap: var(--sp-5); }
.anfrage-form:has(#l-folierung:checked) [data-fuer="folierung"],
.anfrage-form:has(#l-toenung:checked) [data-fuer="toenung"],
.anfrage-form:has(#l-gebaeude:checked) [data-fuer="gebaeude"],
.anfrage-form:has(#l-flotte:checked) [data-fuer="flotte"] { display: grid; }
.lackschutz-hinweis { display: none; gap: var(--sp-4); justify-items: start; padding: var(--sp-5); border: 2px solid var(--ink-1); }
.lackschutz-hinweis p { margin: 0; font-size: 1.05rem; max-width: 60ch; }
.lackschutz-hinweis .btn { white-space: normal; max-width: 100%; }
.anfrage-form:has(#l-lackschutz:checked) .stufe-2 { display: none; }
.anfrage-form:has(#l-lackschutz:checked) .lackschutz-hinweis { display: grid; }
@supports not selector(:has(*)) {
  .stufe-2, .nur-fuer, .lackschutz-hinweis { display: grid; gap: var(--sp-5); }
  .stufe-2[hidden], .lackschutz-hinweis[hidden] { display: none; }
}
.absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.meldung { margin: 0; color: var(--ink-2); }
.anruf { border: 2px solid var(--line-2); padding: var(--sp-5); display: grid; gap: var(--sp-3); justify-items: start; }
.anruf h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.anruf p { margin: 0; color: var(--ink-2); }
.anruf p a { white-space: nowrap; }
.anruf .nummer { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; text-decoration: none; color: var(--ink-1); white-space: nowrap; }
.anruf .nummer:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }

/* ANSCHRIFT UND ZEITEN auf der Kontaktseite: Zeiten als Tabelle, Route nur als Link, keine eingebettete
   Karte (Briefing 2026-09-25, kein Google-Aufruf beim Seitenbesuch). */
.anschrift { font-style: normal; font-size: 1.1rem; color: var(--ink-2); margin: 0 0 var(--sp-5); line-height: 1.55; }
.zeiten { border-collapse: collapse; margin: 0 0 var(--sp-5); font-size: 1.1rem; }
.zeiten th, .zeiten td { text-align: left; padding: var(--sp-2) var(--sp-5) var(--sp-2) 0; border-bottom: 1px solid var(--line-1); vertical-align: top; }
.zeiten th { font-weight: 600; color: var(--ink-1); }
.zeiten td { color: var(--ink-2); }

/* RECHTSTEXTE (Impressum, AGB, Datenschutz): lange Lesetexte. Links ein klebendes Inhaltsverzeichnis,
   rechts der Text in Lesebreite. Überschriften kleiner als auf den Leistungsseiten, sonst stünden bei
   14 Paragrafen 14 Plakate untereinander. */
.recht { border-top: 1px solid var(--line-1); padding: var(--sp-8) var(--rand); max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.recht.einspaltig { grid-template-columns: minmax(0, 1fr); }   /* Impressum: zu kurz für ein Inhaltsverzeichnis */
.recht-inhalt { position: sticky; top: calc(var(--kopf-hoehe) + var(--sp-5));
  max-height: calc(100vh - var(--kopf-hoehe) - 2 * var(--sp-5)); overflow-y: auto; }   /* 14 Paragrafen passen auf niedrigen Bildschirmen sonst nicht */
.recht-inhalt h2 { margin: 0 0 var(--sp-3); font-size: 0.95rem; font-weight: 600; color: var(--ink-3); }
.recht-inhalt ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-1); }
.recht-inhalt li { border-bottom: 1px solid var(--line-1); }
.recht-inhalt a { display: block; padding: var(--sp-2) 0; color: var(--ink-2); text-decoration: none; font-size: 0.98rem; }
.recht-inhalt a:hover { color: var(--ink-1); }
.recht-inhalt a:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; }
.recht-text { max-width: 68ch; min-width: 0; }
.recht-text section { scroll-margin-top: calc(var(--kopf-hoehe) + var(--sp-4)); }
.recht-text section + section { margin-top: var(--sp-7); }
.recht-text h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; text-transform: uppercase;
}
.recht-text h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 1.1rem; font-weight: 600; color: var(--ink-1); }
.recht-text p, .recht-text li { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.recht-text p { margin: 0 0 var(--sp-3); }
.recht-text ol, .recht-text ul { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.recht-text li + li { margin-top: var(--sp-2); }
.recht-text a { color: var(--ink-1); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.recht-text address { font-style: normal; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; margin: 0 0 var(--sp-3); }
.recht-text strong { color: var(--ink-1); }
.recht-text .luecke { display: block; width: fit-content; max-width: 100%; margin: var(--sp-2) 0 var(--sp-3); }
.stand { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: 0.95rem; }
/* Hinweis ganz oben auf jeder Rechtsseite, solange Matthias nicht freigegeben hat. */
.entwurf { max-width: 1500px; margin: 0 auto; padding: 0 var(--rand) var(--sp-6); }
.entwurf .luecke { margin: 0; font-size: 0.98rem; max-width: 68ch; }

@media (max-width: 1100px) {
  .anfrage { grid-template-columns: 1fr; }
  .anfrage h2 { order: -2; }
  .anruf { order: -1; }
  .recht { grid-template-columns: minmax(0, 1fr); }
  .recht-inhalt { position: static; }
}
@media (max-width: 760px) {
  .anfrage, .recht { padding-block: var(--sp-7); }
  .kachel { flex: 1 1 40%; min-height: 52px; padding: var(--sp-3); }
  .feldgruppe { grid-template-columns: 1fr; }
  .lackschutz-hinweis { padding: var(--sp-4); }
  .lackschutz-hinweis .btn { padding-inline: var(--sp-4); }
}

/* WEICHES EINBLENDEN, wie auf der Startseite: nur CSS-Zeitleiste. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .einblenden { animation: einblenden linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes einblenden { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

/* FUSS: Kopie der Startseite. */
.fuss { background: var(--paper-1); border-top: 1px solid var(--line-1); padding: var(--sp-5) var(--rand); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6); font-size: 0.95rem; color: var(--ink-2); }
.fuss a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-1); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.fuss a:hover { color: var(--ink-1); text-decoration-color: var(--ink-1); }
.fuss .prototyp { margin-left: auto; color: var(--ink-3); }
.ganz { white-space: nowrap; }

/* MACHER-ZEILE „Wild Banana AI“ (Marco 2026-10-10, Fußleiste, Variante A „Leisten schalten ein“).
   Gold als eigenes Token, bewusst nicht --pruefstelle. Dunkel: Name in Gold. Hell: auf schmalem
   schwarzem Schild, weil Gold auf paper-1 nur 1,2:1 hätte. Die Buchstaben (Spans aus dem
   Skript) schalten nacheinander ein wie die Leisten im Lichttunnel: einmal beim Hereinkommen,
   wieder beim Darüberfahren oder Fokus, keine Dauerschleife. Ohne Skript: einfach Gold.
   Derselbe Block steht in startseite.css?v=5127b64d23. */
.fuss { --wbai-gold: #ffe600; }   /* Marco 2026-10-10, Fußleiste */
.fuss a.wbai {
  color: var(--wbai-gold); font-weight: 600; text-decoration: none; white-space: nowrap;
  display: inline-block; background: #0d0d0e; padding: 1px 7px 2px; border-radius: 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fuss a.wbai { background: none; padding: 0; } }
:root[data-theme="dark"] .fuss a.wbai { background: none; padding: 0; }
.fuss a.wbai:hover { color: var(--wbai-gold); }
.fuss a.wbai:focus-visible { outline: 2px solid var(--wbai-gold); outline-offset: 3px; }
.fuss a.wbai .bs { display: inline-block; white-space: pre; text-shadow: 0 0 6px rgba(255, 230, 0, 0.25); }
.fuss a.wbai.los .bs { animation: wbai-einschalten 0.5s ease-out both; }
@keyframes wbai-einschalten {
  0% { color: #4a4636; text-shadow: none; }
  45% { color: #fff8c4; text-shadow: 0 0 10px rgba(255, 230, 0, 0.9); }
  100% { color: var(--wbai-gold); text-shadow: 0 0 6px rgba(255, 230, 0, 0.25); }
}
@media (prefers-reduced-motion: reduce) { .fuss a.wbai.los .bs { animation: none; } }

.leiste-mobil { display: none; }

@media (max-width: 1100px) {
  /* minmax(0, …) statt 1fr: sonst weitet die Tabelle (min-width 34rem) die Spalte über den Bildschirm,
     und Tabellenüberschrift und Prüfhinweis wurden rechts abgeschnitten (gemessen 375 px). */
  .abschnitt, .weiter { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --kopf-hoehe: 112px; }
  .siegel { height: 96px; }
  .kopf-wege { display: none; }
  .kopf { justify-content: center; }
  .titel-wege { display: none; }            /* auf dem Handy trägt die feste Leiste unten beide Wege */
  .titelbild img { aspect-ratio: 4 / 3; }
  .abschnitt, .fotos, .weiter { padding-block: var(--sp-7); }
  .leiste-mobil {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: var(--paper-0); border-top: 1px solid var(--line-1);
  }
  .leiste-mobil .btn { justify-content: center; padding: var(--sp-3); font-size: 1.02rem; }
  body { padding-bottom: 72px; }
  .fuss .prototyp { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .andere a { transition: none; }
  .andere a:hover { translate: none; }
}

/* Lockfeld gegen Formular-Bots auf der Kontaktseite (bis 2026-10-03 als style= im HTML;
   die Bauplatz-CSP sperrt Inline-Stile). */
.falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Gesicht im Anrufkasten (Marco 2026-10-21): echtes Foto, freigestellt auf Werkstattgrau. */
/* Luft zum Hover-Strich unter der Überschrift (Marco 2026-10-21: „klebt zu sehr“); 5 px Einzug = Ring
   2 px + Abstand 3 px, damit der Ring mit der Überschrift auf einer Kante steht. */
.anruf .person { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-3) var(--sp-1); padding-left: 5px; }
.anruf .person img { width: 96px; height: 96px; border-radius: 50%; flex: none; outline: 2px solid var(--line-2); outline-offset: 3px; }
.anruf .person p { color: var(--ink-2); line-height: 1.35; }
.anruf .person strong { color: var(--ink-1); font-weight: 600; }
/* Schwarz-weiß, farbig beim Drüberfahren (Matze 2026-10-21). Ganzer Kasten statt nur das kleine Foto,
   damit es nicht hakelt. Am Handy ohne Maus färbt es sich ein, während der Kasten zur Bildschirmmitte
   rollt; Browser ohne animation-timeline zeigen es dort schwarz-weiß. */
.anruf .person img { filter: grayscale(1); transition: filter .6s ease; }
@media (hover: hover) { .anruf:hover .person img, .anruf:focus-within .person img { filter: none; } }
@media (hover: none) {
  @supports (animation-timeline: view()) {
    .anruf .person img { transition: none; animation: anruf-farbe linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
  }
}
@keyframes anruf-farbe { from { filter: grayscale(1); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .anruf .person img { transition: none; } }

/* KURZE FENSTER (Handy quer, 390 px hoch; Prüfung Handy/Tablet 2026-10-21): Der klebende Kopf nahm mit 172 px
   fast die Hälfte des Bildschirms. Hier gilt der kleine Kopf. */
@media (max-height: 520px) {
  :root { --kopf-hoehe: 72px; }
  .siegel { height: 58px; }
  .kopf .btn { padding: var(--sp-2) var(--sp-4); font-size: 0.95rem; }
}
/* Folientabelle unter 480 px: vier Spalten passen ohne Wischen, wenn die Schrift etwas kleiner ist. Vorher lief
   die Tabellenüberschrift (caption) mit der 34-rem-Tabelle rechts aus dem Bild (gemessen bei 390 px). */
@media (max-width: 480px) {
  .werte { min-width: 0; }
  .werte th, .werte td { padding-right: var(--sp-2); }
  .werte thead th { font-size: 0.82rem; }
  .werte tbody th { font-size: 1.05rem; }
  .werte td { font-size: 1rem; white-space: nowrap; width: 1%; }   /* Zahlen schmal, der Name bekommt den Rest */
}