/*
 * stil.css — öffentliche Netzanmeldungs-Seite der DOM BAU GmbH.
 *
 * Gestaltungsentscheidungen, damit spätere Änderungen nicht raten müssen:
 *
 * FARBE  Dunkelblau trägt, Gold ist der einzige laute Ton und kommt genau dreimal vor:
 *        Haupt-Knopf, Dach-Balken im Kopfbereich, Fokusring. Wer eine vierte Stelle
 *        vergoldet, nimmt den drei anderen ihre Wirkung.
 * SCHRIFT Überschriften in einer schmalen Grotesk (`DB Display`, zugeschnittene DejaVu Sans
 *        Condensed Bold, 11 kB). Fliesstext in der Systemschrift — schnell und auf jedem
 *        Gerät vertraut. Zahlen und Marken in Monospace mit `tabular-nums`, damit
 *        Ziffern untereinander stehen.
 * RASTER Eine Spalte, 1180 px, grosszügige Luft. Kein Kartenteppich: die Seite ist ein
 *        Text, kein Schaufenster.
 * DACH   Das Zeichen der Firma, gross gezeichnet, EINMAL — über der Überschrift. Es ist
 *        die Handschrift der Seite; alles andere bleibt still.
 *
 * Kein Dunkelmodus: eine öffentliche Seite mit Umschalter oben rechts ist eine Bedienung,
 * die niemand sucht (Briefing Abschnitt 5).
 */

@font-face {
  font-family: 'DB Display';
  src: url('schrift/db-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #0b3d5c;
  --tinte-tief: #072a40;
  --gold: #f2a63b;
  --papier: #ffffff;
  --band: #f5f4f1;
  --linie: #e4e2dd;
  --grau: #5b6770;
  --text: #111820;

  --spalte: 1180px;
  --luft: clamp(3.5rem, 9vw, 7rem);

  --display: 'DB Display', 'DejaVu Sans Condensed', 'Liberation Sans Narrow', 'Arial Narrow', system-ui, sans-serif;
  --brot: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--brot);
  -webkit-font-smoothing: antialiased;
}

.rahmen { width: min(100% - 2.5rem, var(--spalte)); margin-inline: auto; }

/* ── Typografie ───────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.15rem, 4.5vw, 3.35rem); line-height: 1.02; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); line-height: 1.08; }
h3 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.005em; }

.marke {
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
  display: block;
}
.marke::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  background: var(--gold);
  margin-top: 0.7rem;
}

.lead { font-size: clamp(1.075rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--grau); max-width: 46ch; }
p { margin: 0 0 1rem; }
a { color: inherit; }

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 1.25rem; height: 4.5rem; }
.kopf-logo { display: flex; align-items: center; }
.kopf-logo img { height: 2.1rem; width: auto; display: block; }
.kopf-nav { display: none; margin-left: auto; gap: 1.6rem; }
.kopf-nav a {
  font-size: 0.9375rem; text-decoration: none; color: var(--grau);
  padding-block: 0.35rem; border-bottom: 2px solid transparent;
}
.kopf-nav a:hover { color: var(--tinte); border-bottom-color: var(--gold); }
.kopf-aktion { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.kopf-nav + .kopf-aktion { margin-left: 1.6rem; }
@media (min-width: 62rem) { .kopf-nav { display: flex; } }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */

/*
 * 🔴 MUSS vor `.knopf` stehen und die Anzeige zurueckziehen. `.knopf { display: inline-flex }`
 * ist spezifischer als die Browser-Regel `[hidden] { display: none }` — ohne diese Zeile
 * blieb der Absende-Knopf auf JEDEM Schritt sichtbar, obwohl das Skript ihn korrekt auf
 * `hidden` gesetzt hatte. Im Abzug vom 26.08.2026 standen „Weiter" und „Anfrage verbindlich
 * absenden" nebeneinander.
 */
[hidden] { display: none !important; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  font: 600 1rem/1 var(--brot);
  border-radius: 3px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.knopf-haupt { background: var(--gold); color: var(--tinte-tief); }
.knopf-haupt:hover { background: #e2942a; }
/*
 * Gold ist der lauteste Ton der Seite und darf deshalb NICHT zweimal nebeneinander stehen.
 * Auf Weiss trägt ihn genau ein Knopf: der Haupt-Aufruf in der Bühne. Die beiden
 * Zielgruppen-Knöpfe sind gleichrangig zueinander — zwei goldene Flächen nebeneinander
 * hätten sich gegenseitig entwertet und dem Haupt-Aufruf seine Sonderstellung genommen.
 */
.knopf-tinte { background: var(--tinte); color: #fff; }
.knopf-tinte:hover { background: var(--tinte-tief); }
.knopf-rand { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf-rand:hover { background: var(--tinte); color: #fff; }
.knopf-still {
  border-color: var(--linie); color: var(--tinte); background: transparent;
  min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem;
}
.knopf-still:hover { border-color: var(--tinte); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Bühne ────────────────────────────────────────────────────────────────── */

.buehne { padding-block: clamp(2rem, 4.5vw, 3.5rem) var(--luft); }

/*
 * Das Dach spannt die volle Spalte, die Überschrift steht darunter — der Satz „unter einem
 * Dach" ist die ganze Idee der Seite. Am Telefon ergibt sich das von selbst; am Rechner nur,
 * wenn die Zeichnung wirklich so breit ist wie der Textblock. Eine schmalere Zeichnung
 * daneben hätte den Bezug zerrissen und rechts ein Loch gelassen.
 */
.dach { display: block; width: 100%; height: auto; margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.dach .schraege { stroke: var(--tinte); stroke-width: 12; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.dach .modul { fill: var(--tinte); }
.dach .balken { fill: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .dach .schraege { stroke-dasharray: 640; stroke-dashoffset: 640; animation: dach-zeichnen 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
  .dach .modul, .dach .balken { opacity: 0; animation: modul-auf 0.5s ease 0.85s forwards; }
  .dach .modul:nth-of-type(3) { animation-delay: 0.95s; }
  .dach .modul:nth-of-type(4) { animation-delay: 1.05s; }
  .dach .balken { animation-delay: 1.2s; }
  @keyframes dach-zeichnen { to { stroke-dashoffset: 0; } }
  @keyframes modul-auf { to { opacity: 1; } }
}

.buehne-satz { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .buehne-satz { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
}
.buehne-haupt h1 { margin-bottom: 1.15rem; }
.buehne-haupt .lead { margin-bottom: 1.9rem; max-width: 44ch; }
.buehne-aktion { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.buehne-neben { border-top: 2px solid var(--tinte); padding-top: 1.1rem; }
.buehne-neben p { margin: 0.95rem 0 0; font-size: 0.9375rem; color: var(--grau); }
.buehne-neben strong { color: var(--text); font-weight: 600; }

/* ── Abschnitte ───────────────────────────────────────────────────────────── */

.abschnitt { padding-block: var(--luft); border-top: 1px solid var(--linie); }
.abschnitt-band { background: var(--band); border-top: 1px solid var(--linie); }
.abschnitt-kopf { max-width: 54ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt-kopf h2 { margin-block: 0.9rem 0.85rem; }

/* Zielgruppen */
.wege { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .wege { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.weg {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.abschnitt-band .weg { border-color: #dcd9d3; }
.weg h3 { margin-bottom: 0.6rem; }
.weg > p { color: var(--grau); font-size: 0.9688rem; }
.weg ul { list-style: none; margin: 0.5rem 0 1.75rem; padding: 0; }
.weg li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; font-size: 0.9688rem; }
.weg li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.6rem; height: 2px; background: var(--tinte); opacity: 0.45;
}
.weg .knopf { margin-top: auto; align-self: flex-start; }

/* Leistungen */
.leistungen { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.leistung { padding: 1.6rem 0; border-bottom: 1px solid var(--linie); display: grid; gap: 0.4rem; }
@media (min-width: 48rem) {
  .leistung { grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: baseline; }
}
.leistung h3 { color: var(--tinte); }
.leistung p { margin: 0; color: var(--grau); max-width: 62ch; }

/* Ablauf — echte Reihenfolge, darum nummeriert */
.ablauf { display: grid; gap: 0; counter-reset: schritt; }
@media (min-width: 56rem) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.schritt { padding: 1.5rem 0; border-top: 2px solid var(--tinte); }
.schritt + .schritt { margin-top: 0; }
@media (max-width: 55.99rem) { .schritt + .schritt { border-top-width: 1px; border-top-color: var(--linie); } }
.schritt-nr {
  font: 700 0.8125rem/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em; color: var(--tinte); opacity: 0.55; display: block; margin-bottom: 0.85rem;
}
.schritt h3 { margin-bottom: 0.45rem; }
.schritt p { margin: 0; font-size: 0.9375rem; color: var(--grau); }

/* Vertrauen */
.vertrauen { display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .vertrauen { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }
.vertrauen h3 { margin-bottom: 0.4rem; }
.vertrauen p { margin: 0; color: var(--grau); font-size: 0.9688rem; }

/* FAQ */
.faq { max-width: 60rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-of-type { border-top: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-size: 1.125rem; letter-spacing: -0.005em; color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.35rem; top: 1.55rem;
  width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq details p { margin: 0 0 1.25rem; color: var(--grau); max-width: 64ch; }

/* Abschluss-Aufruf */
.aufruf { background: var(--tinte); color: #fff; }
.aufruf .rahmen { padding-block: var(--luft); }
.aufruf h2 { color: #fff; max-width: 20ch; margin-bottom: 1rem; }
.aufruf p { color: rgba(255, 255, 255, 0.72); max-width: 52ch; margin-bottom: 1.75rem; }
.aufruf .marke { color: rgba(255, 255, 255, 0.6); }

/* ── Fusszeile ────────────────────────────────────────────────────────────── */

.fuss { background: var(--tinte-tief); color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; }
.fuss .rahmen { padding-block: 3.5rem 2.5rem; }
.fuss-gitter { display: grid; gap: 2.25rem; }
@media (min-width: 48rem) { .fuss-gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.fuss img { height: 2rem; width: auto; margin-bottom: 1rem; }
.fuss h4 { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 0.9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.5rem; }
.fuss a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fuss-strich { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 2.75rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); }
.fuss-strich a { color: rgba(255, 255, 255, 0.7); }

.platzhalter {
  display: inline-block; font: 700 0.6875rem/1 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--gold); color: var(--tinte-tief);
  padding: 0.2rem 0.4rem; border-radius: 2px; vertical-align: 0.1em;
}

.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ Anfrageformular ═══════════════════════════════════════════════════════════
 *
 * Ein Schritt je Bildschirm, Fortschritt oben, Zwischenstand im Browser gespeichert.
 * Die Felder sind absichtlich gross (48 px Mindesthöhe): das Formular wird zu einem guten
 * Teil auf der Baustelle am Telefon ausgefüllt, mit Handschuhen und in der Sonne.
 */

.formular-seite { padding-block: clamp(2rem, 5vw, 3.5rem) var(--luft); }

.fortschritt { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fortschritt-zeile { display: flex; gap: 0.35rem; margin-bottom: 0.85rem; }
.fortschritt-teil { flex: 1; height: 4px; background: var(--linie); border-radius: 2px; }
.fortschritt-teil.erledigt { background: var(--tinte); }
.fortschritt-teil.jetzt { background: var(--gold); }
.fortschritt-text { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); font-variant-numeric: tabular-nums; }

.schritt-seite { display: none; }
.schritt-seite.aktiv { display: block; }
.schritt-seite h2 { margin-bottom: 0.6rem; }
.schritt-seite > .lead { margin-bottom: 2rem; }

.feld { margin-bottom: 1.35rem; }
.feld-paar { display: grid; gap: 1.35rem; }
@media (min-width: 40rem) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
  .feld-paar.schmal-breit { grid-template-columns: 8rem 1fr; }
}
.feld label, .feld-legende {
  display: block; font: 600 0.9375rem/1.4 var(--brot); color: var(--text); margin-bottom: 0.45rem;
}
.feld .hinweis { font-size: 0.875rem; color: var(--grau); margin: 0 0 0.55rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="number"], .feld input[type="date"], .feld select, .feld textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  font: 400 1rem/1.4 var(--brot); color: var(--text);
  background: var(--papier); border: 1.5px solid var(--linie); border-radius: 3px;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #c9c5bd; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--tinte); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"], .feld select[aria-invalid="true"] { border-color: #b3261e; }
.feld-fehler { display: none; margin: 0.4rem 0 0; font-size: 0.875rem; color: #b3261e; }
.feld-fehler.sichtbar { display: block; }

fieldset { border: 0; padding: 0; margin: 0 0 1.35rem; }

.wahl { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .wahl.zweispaltig { grid-template-columns: 1fr 1fr; } }
.wahl label {
  display: flex; align-items: flex-start; gap: 0.7rem; margin: 0;
  padding: 0.85rem 1rem; border: 1.5px solid var(--linie); border-radius: 3px;
  cursor: pointer; font-weight: 400; min-height: 3rem;
}
.wahl label:hover { border-color: #c9c5bd; }
.wahl input { margin: 0.15rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--tinte); flex: none; }
.wahl label:has(input:checked) { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.wahl .wahl-titel { display: block; font-weight: 600; }
.wahl .wahl-sub { display: block; font-size: 0.875rem; color: var(--grau); margin-top: 0.15rem; }

.ablage {
  border: 1.5px dashed var(--linie); border-radius: 3px; padding: 1.5rem 1rem; text-align: center;
}
.ablage p { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--grau); }
.dateiliste { list-style: none; margin: 1rem 0 0; padding: 0; }
.dateiliste li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie); border-radius: 3px; margin-bottom: 0.45rem; font-size: 0.9375rem;
}
.dateiliste .groesse { margin-left: auto; font: 400 0.8125rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--grau); }
.dateiliste button { border: 0; background: none; color: #b3261e; cursor: pointer; font-size: 0.875rem; padding: 0.35rem; }

.zustimmung { margin-bottom: 1rem; }
.zustimmung label { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; font-size: 0.9375rem; }
.zustimmung input { margin: 0.2rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--tinte); flex: none; }

.formular-fuss { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.formular-fuss .weiter-rechts { margin-left: auto; }

.meldung { padding: 0.9rem 1rem; border-radius: 3px; font-size: 0.9375rem; margin-bottom: 1.25rem; display: none; }
.meldung.sichtbar { display: block; }
.meldung-fehler { background: #fdecea; color: #7f1d17; border: 1px solid #f3c6c1; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fertig { text-align: left; max-width: 42rem; }
.fertig .nummer {
  display: inline-block; font: 700 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; color: var(--tinte); background: var(--band);
  padding: 0.7rem 1rem; border-radius: 3px; margin: 0.5rem 0 1.5rem;
}

/* ── Menü am Telefon ──────────────────────────────────────────────────────────
 * Briefing Abschnitt 2 und Abnahmekriterium „Login korrekt platziert": mobil gehören
 * Logo, Menü-Icon und Login in den Kopf. Ohne Skript gebaut — die Startseite lädt
 * sonst keines, und ein Menü darf nicht davon abhängen, dass ein Skript ankommt.
 */
.menue { position: relative; }
@media (min-width: 62rem) { .menue { display: none; } }
.menue > summary {
  list-style: none; cursor: pointer;
  width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--linie); border-radius: 3px;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block; width: 1.15rem; height: 2px; background: var(--tinte); border-radius: 1px;
}
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
.menue-striche::before { top: -0.4rem; }
.menue-striche::after { top: 0.4rem; }
.menue[open] > summary { border-color: var(--tinte); }
.menue-liste {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 60;
  min-width: 14rem; display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie);
  box-shadow: 0 12px 32px rgba(11, 61, 92, 0.14);
}
.menue-liste a {
  padding: 0.85rem 1.1rem; text-decoration: none; color: var(--tinte);
  border-bottom: 1px solid var(--linie); font-size: 0.9688rem; min-height: 3rem;
  display: flex; align-items: center;
}
.menue-liste a:last-child { border-bottom: 0; font-weight: 600; }
.menue-liste a:hover { background: var(--band); }