/* ==========================================================
   PBI PAVILLION BAU — Designsystem.

   Bildidee: der Lageplan. Duenne Tuschelinien auf Papier,
   Maßketten, Schraffuren, Flurstuecknummern. Das ist das
   Material, mit dem diese Firma jedes Projekt beginnt — und
   damit die Herkunft jeder Farbe und jedes Rasters hier.

   Das Magenta ist kein Modeton: In deutschen Flurkarten werden
   Planungsflaechen magenta eingetragen. Es markiert, was noch
   nicht gebaut ist. Deshalb steht es hier nur auf Maßlinien,
   Fokusrahmen und dem, was als Naechstes zu tun ist.
   ========================================================== */

:root {
  /* Farbe — aus dem Logo entnommen, nicht daneben erfunden.
     #2c3e40 ist das P, #778a8c das B, #d9cdbe das I.

     Geprueft (WCGA AA, 4.5:1 fuer Fliesstext):
       graphit auf papier      10.0
       beton auf papier         5.0
       beton-hell auf graphit   5.3
       magenta auf papier       4.6
       magenta auf graphit      2.2  <- deshalb dort NUR Linien,
                                        niemals Text. Fuer Text auf
                                        dunklem Grund steht sand
                                        bereit (7.2) oder
                                        magenta-hell (4.6). */
  --papier: #f4f2ed;
  --papier-tief: #e7e1d6;
  --graphit: #2c3e40;
  --graphit-hell: #41585a;
  --beton: #5b6b6d;
  --beton-hell: #a9b5b6;
  --raster: #d7d0c5;
  --sand: #d9cdbe;
  --magenta: #d6006e;
  --magenta-matt: #b00059;
  --magenta-hell: #ff77b0;

  /* Schrift */
  --display: 'Archivo', system-ui, sans-serif;
  --text: 'Plex Sans', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;

  /* Maß */
  --bahn: 74rem;
  --luft: clamp(1.25rem, 5vw, 2.5rem);
  --sprung: clamp(4rem, 10vw, 8rem);

  /* Bewegung */
  --weich: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Die Kopfleiste steht fest oben (min-height 5.5rem). Ohne diesen
   Abstand landet jedes Sprungziel darunter: Der Leser klickt auf
   „Schlüsselfertigbau", kommt an – und sieht mitten in den Text,
   weil die Ueberschrift hinter der Leiste liegt. */
[id] { scroll-margin-top: 7rem; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--graphit);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; }

/* Auf Beruehrungsgeraeten wartet der Browser sonst rund 300 ms ab,
   ob ein Doppeltippen zum Zoomen folgt. Das Zoomen selbst bleibt
   erlaubt – nur die Wartezeit auf den einzelnen Tipp faellt weg.

   Die Standardmarkierung beim Tippen ist ein blaugrauer Kasten. Auf
   Papierton wirkt der wie ein Fehler, deshalb hier ein blasses
   Magenta – dieselbe Farbe, die auch der Fokusrahmen fuehrt. */
a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(214, 0, 110, 0.12);
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--graphit);
  color: var(--papier);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.bahn {
  width: min(100% - 2 * var(--luft), var(--bahn));
  margin-inline: auto;
}

.schmal { max-width: 46rem; }

/* ---------- Typografie ---------- */

.titel-xl, .titel-lg, .titel-md {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.titel-xl { font-size: clamp(2.4rem, 1.25rem + 4.2vw, 4rem); }
.titel-lg { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.2rem); line-height: 1.08; }
.titel-md { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem); line-height: 1.2; }

/* Die Braue ist eine Beschriftung wie am Rand einer Zeichnung:
   klein, gesperrt, mit einem Strich davor. */
.brauen {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beton);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brauen::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--magenta);
  flex: none;
}

.anriss {
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--graphit);
  max-width: 46ch;
  text-wrap: pretty;
}

.note {
  font-size: 0.925rem;
  color: var(--beton);
}

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--weich), background 0.3s var(--weich);
}
.kopf[data-eng] {
  border-bottom-color: var(--raster);
  background: color-mix(in srgb, var(--papier) 96%, transparent);
}

.kopf__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-height: 5.5rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

/* Das Logo traegt den Firmennamen bereits als Bild. Ein zweiter,
   gesetzter Name daneben waere dieselbe Angabe zweimal — und beim
   Vorlesen doppelt. Die Breite ist so gewaehlt, dass die Zeile
   „Pavillon Bau- und Immobilien GmbH" noch lesbar bleibt. */
/* Zeichen und Name stehen nebeneinander, nicht uebereinander wie in
   der Sperrmarke: Nur so bleibt der Name auf Kopfleistenhoehe
   lesbar. Das Zeichen traegt die Marke, der Text die Auskunft. */
.marke__zeichen {
  display: block;
  height: clamp(2.1rem, 4.4vw, 2.6rem);
  width: auto;
  flex: none;
}

.marke__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.1vw, 0.84rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--graphit);
  /* Der Schriftzug im Logo sitzt am Fuss des Zeichens, nicht in
     seiner Mitte. Diese Kante wird hier nachgebildet. */
  align-self: flex-end;
  padding-bottom: 0.1rem;
  max-width: 9.5em;
}

/* Auf dunklem Grund wird dasselbe Bild weiss gezogen. brightness(0)
   macht jede Farbe schwarz, invert(1) daraus weiss — dabei bleibt
   die Transparenz erhalten, anders als bei einem Hintergrundtrick. */
/* Fussleiste: dieselbe Aufteilung wie im Kopf. Das Zeichen wird auf
   Weiss gezogen — brightness(0) macht jede Farbe schwarz, invert(1)
   daraus weiss, und die Transparenz bleibt dabei erhalten. */
/* Elementqualifiziert notiert, weil weiter unten `.fuss p` steht.
   Ohne das `p` hier verliert die Klasse gegen jene Regel — und man
   greift zu !important, was den naechsten Konflikt nur vertagt. */
.fuss p.fuss__marke-in {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
}

.fuss__zeichen {
  height: 2.4rem;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.fuss__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--papier);
  max-width: 9.5em;
  padding-bottom: 0.1rem;
}

.nav { display: none; gap: 1.75rem; }

.nav a {
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
  color: var(--graphit);
}
/* Der Unterstrich faehrt aus, statt zu erscheinen — eine Linie, die
   gezogen wird. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--weich);
}
.nav a:hover::after,
.nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--magenta); }

.kopf__tel { display: none; text-decoration: none; text-align: right; }
.kopf__tel-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--beton);
}
.kopf__tel-nr {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
}
.kopf__tel:hover .kopf__tel-nr { color: var(--magenta); }

.burger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--raster);
  /* Der Knopf ist auf dem Telefon die gesamte Navigation. 34 Pixel
     hoch war er zu knapp fuer einen Daumen. */
  padding: 0.75rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphit);
  cursor: pointer;
  transition: transform 0.14s var(--weich);
}
.burger:active { transform: scale(0.97); }

.burger__balken {
  width: 1rem; height: 1px;
  background: currentColor;
  position: relative;
}
.burger__balken::before,
.burger__balken::after {
  content: '';
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform 0.25s var(--weich);
}
.burger__balken::before { top: -4px; }
.burger__balken::after { top: 4px; }
.burger[aria-expanded='true'] .burger__balken { background: transparent; }
.burger[aria-expanded='true'] .burger__balken::before { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__balken::after { transform: translateY(-4px) rotate(-45deg); }

.menue { border-top: 1px solid var(--raster); background: var(--papier); }
.menue__in { display: flex; flex-direction: column; padding-block: 1rem 1.5rem; }
.menue a {
  padding: 0.85rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--raster);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
}
/* Wie oben elementqualifiziert: `.menue a` steht darueber. */
.menue a.menue__tel { font-family: var(--mono); color: var(--magenta-matt); border-bottom: 0; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--graphit);
  cursor: pointer;
  /* Die Bewegung laeuft schneller als der Farbwechsel. Ein Druck
     soll sofort quittiert werden; die Farbe darf nachziehen. */
  transition: background 0.25s var(--weich), border-color 0.25s var(--weich),
              color 0.25s var(--weich), transform 0.14s var(--weich);
}
.knopf--voll { background: var(--graphit); color: var(--papier); }
.knopf--linie { background: none; color: var(--graphit); }

/* Farbe reagiert auf jedem Geraet, Bewegung nur dort, wo es einen
   Zeiger gibt. Auf dem Telefon loest eine Beruehrung sonst den
   Hover aus und der Knopf bleibt angehoben stehen. */
.knopf--voll:hover { background: var(--magenta); border-color: var(--magenta); }
.knopf--linie:hover { border-color: var(--magenta); color: var(--magenta); }

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { transform: translateY(-2px); }
}

/* Der Knopf gibt beim Druck nach. Das ist die einzige Rueckmeldung,
   die kommt, bevor irgendetwas laedt – und sie kommt auf jedem
   Geraet, auch ohne Zeiger. */
.knopf:active { transform: scale(0.97); }

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: var(--sprung); }
.abschnitt--papier { background: var(--papier-tief); }
.abschnitt--dunkel { background: var(--graphit); color: var(--papier); }
.abschnitt--dunkel .brauen { color: var(--beton-hell); }
.abschnitt--dunkel .anriss { color: var(--papier); }

.kopfzeile { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.kopfzeile .anriss { margin-top: 1.25rem; }

.haupt {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--raster);
}
.haupt .anriss { margin-top: 1.5rem; }

.fliess h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
}
.fliess h2:first-child { margin-top: 0; }
.fliess p { margin: 0 0 1rem; }
.fliess a { color: var(--magenta-matt); }

/* ---------- Held ---------- */

/* Die Hoehe des Helds ist kein Gestaltungsspielraum: Der Knopf
   „Projekt besprechen" muss auf einem 1280x720-Bildschirm ohne
   Scrollen sichtbar sein. Danach richten sich Polsterung und
   Schriftgrad. */
.held {
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

.held__in {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.held__text .anriss { margin: 1.5rem 0 0; }

.titel-xl span { display: block; }

.held__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 2rem 0 0;
}

.held__plan { position: relative; }

.held__planbild {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--beton);
  margin: 0.75rem 0 0;
  text-align: right;
}

/* Der Herkunftshinweis steht eine Stufe leiser als die
   Bildunterschrift – er gehoert dazu, aber er ist nicht die
   Aussage. Lesbar bleibt er trotzdem: beton auf papier ist 5,0. */
.held__hinweis {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--beton);
}

/* ---------- Der Lageplan ---------- */

.plan { display: block; width: 100%; height: auto; overflow: visible; }

.plan__grid line {
  stroke: var(--raster);
  stroke-width: 1;
}

.plan__hatch { stroke: var(--beton-hell); stroke-width: 1; }

.plan__grenze {
  fill: none;
  stroke: var(--graphit);
  stroke-width: 1.5;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.plan__bau { fill: url(#hatch); opacity: 0; }

.plan__bau-linie {
  fill: none;
  stroke: var(--graphit);
  stroke-width: 2;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.plan__weg {
  fill: none;
  stroke: var(--beton);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
}

.plan__mass line { stroke: var(--magenta); stroke-width: 1; }
.plan__mass text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--magenta);
  letter-spacing: 0.04em;
}
.plan__mass { opacity: 0; }

.plan__label text {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--beton);
  letter-spacing: 0.12em;
}
.plan__label { opacity: 0; }

.plan__nord line, .plan__nord path { stroke: var(--graphit); fill: var(--graphit); stroke-width: 1; }
.plan__nord text { font-family: var(--mono); font-size: 10px; fill: var(--graphit); }
.plan__nord { opacity: 0; }

/* Die Zeichnung entsteht in der Reihenfolge, in der sie auch auf
   Papier entstehen wuerde: erst die Grenze, dann das Gebaeude, dann
   die Maße und die Beschriftung. */
.js .plan__grenze { animation: ziehen 1.4s var(--weich) 0.2s forwards; }
.js .plan__bau-linie { animation: ziehen 1s var(--weich) 1.2s forwards; }
.js .plan__bau { animation: auftauchen 0.8s var(--weich) 1.9s forwards; }
.js .plan__weg { animation: auftauchen 0.6s var(--weich) 2.2s forwards; }
.js .plan__mass { animation: auftauchen 0.7s var(--weich) 2.3s forwards; }
.js .plan__label { animation: auftauchen 0.7s var(--weich) 2.5s forwards; }
.js .plan__nord { animation: auftauchen 0.7s var(--weich) 0.8s forwards; }

@keyframes ziehen { to { stroke-dashoffset: 0; } }
@keyframes auftauchen { to { opacity: 1; } }

/* ---------- Leistungsliste ---------- */

.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--raster); }

.liste__zeile { border-bottom: 1px solid var(--raster); }

.liste__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  text-decoration: none;
  position: relative;
}
/* Beim Zeigen faehrt eine Maßlinie von links ein — dasselbe Zeichen
   wie im Lageplan.

   Bewegt wird ausschliesslich ueber transform. Waeren hier stattdessen
   padding-left und width animiert, muesste der Browser fuer jedes
   einzelne Bild die Zeile neu umbrechen — bei langen Titeln sichtbar
   als Zittern. transform laeuft an diesem Schritt vorbei. */
.liste__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.25rem;
  height: 1px;
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--weich);
}
/* Der Text rueckt nach, damit Platz fuer die Maßlinie entsteht.
   Der Pfeil bleibt stehen: Er markiert die rechte Kante. */
.liste__titel, .liste__kurz {
  transition: transform 0.28s var(--weich);
}

/* Nur mit Zeiger. Auf dem Telefon gibt es kein Zeigen, sondern nur
   Tippen – dort bliebe die Zeile nach der Beruehrung verschoben
   stehen, bis man woanders hintippt. */
@media (hover: hover) and (pointer: fine) {
  .liste__link:hover::before { transform: scaleX(1); }
  .liste__link:hover .liste__titel,
  .liste__link:hover .liste__kurz { transform: translateX(3.25rem); }
}

.liste__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  grid-column: 1;
}
.liste__kurz {
  grid-column: 1;
  color: var(--beton);
  font-size: 0.975rem;
  max-width: 44ch;
}
.liste__pfeil {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.35rem;
  color: var(--beton-hell);
  transition: transform 0.28s var(--weich), color 0.28s var(--weich);
}
.liste__link:hover .liste__pfeil { color: var(--magenta); }
@media (hover: hover) and (pointer: fine) {
  .liste__link:hover .liste__pfeil { transform: translateX(6px); }
}

/* ---------- Phasen ---------- */

.phasen {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* Die senkrechte Achse ist eine Maßlinie: Sie waechst mit, waehrend
   man liest. */
.phasen__achse {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--graphit-hell);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--weich);
}
.phasen[data-gezeichnet] .phasen__achse { transform: scaleY(1); }

.phase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  position: relative;
}

/* Die Nummer sitzt auf der Achse wie die Beschriftung auf einer
   Maßlinie: gedreht, und sie unterbricht die Linie genau an ihrer
   Stelle — nicht auf ganzer Zeilenhoehe. Deshalb align-self. */
.phase__nr {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sand);
  background: var(--graphit);
  padding: 0.45rem 0;
  width: 1.1rem;
  text-align: center;
  position: relative;
  z-index: 1;
  align-self: start;
  letter-spacing: -0.02em;
  writing-mode: vertical-rl;
}

.phase__dauer {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beton-hell);
  margin: 0 0 0.5rem;
}

.phase__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.85rem;
}

.phase__text p:last-child { margin: 0; max-width: 52ch; color: var(--beton-hell); }

.phasen--gross .phase__text p:last-child { font-size: 1.1rem; }

/* ---------- Über / Fakten ---------- */

.ueber { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.ueber__text p { margin: 1.25rem 0 0; max-width: 58ch; }
.ueber__text .titel-md { margin-top: 2.5rem; }
/* Elementqualifiziert wegen `.ueber__text p` eine Zeile darueber. */
.ueber__text p.ueber__aktion { margin-top: 2rem; }

.fakten {
  margin: 0;
  border-top: 1px solid var(--raster);
  align-self: start;
}
.fakten > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--raster);
}
.fakten dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beton);
}
/* Ziffern gleich breit setzen. Untereinander stehende Jahreszahlen
   und Nummern flattern sonst, weil die 1 schmaler laeuft als die 8. */
.fakten dd { margin: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.orte {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.orte li {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--raster);
  background: var(--papier);
  color: var(--beton);
}

/* ---------- Leistungsseite ---------- */

.leistung { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--raster); }
.leistung--wechsel { background: var(--papier-tief); }

.leistung__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.leistung__text p { margin: 1.25rem 0 0; max-width: 56ch; }

.haken { list-style: none; margin: 0; padding: 0; }
.haken li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-bottom: 1px solid var(--raster);
  font-size: 0.975rem;
}
.haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 1.1rem;
  height: 1px;
  background: var(--magenta);
}

/* ---------- Quittung ----------

   Die Rückmeldung nach dem Absenden. In der statischen Fassung ist
   das eine eigene Seite; im WordPress-Theme steht sie über dem
   Formular, weil WordPress nach dem Absenden zurückleitet.

   Der Fehlerfall ist magenta gerahmt, nicht rot geflutet: Eine
   fehlende Angabe ist kein Alarm, sie ist der nächste Schritt —
   und genau dafür steht das Magenta hier überall. */

/* Der Status steht als Kopfleiste oben, nicht als dicker Balken
   links. Der linke Balken ist an fast jeder maschinell erzeugten
   Oberflaeche zu sehen; die Kopfleiste ist dagegen das, was auf einer
   Zeichnung ohnehin oben steht — der Schriftkopf. */
.quittung {
  border: 1px solid var(--raster);
  border-top: 2px solid var(--beton);
  background: var(--papier);
  padding: 1.35rem 1.5rem;
  margin: 0 0 2rem;
}
.quittung:focus { outline: none; }
.quittung p { margin: 0.6rem 0 0; }
.quittung .brauen { margin-bottom: 0.6rem; }
.quittung .titel-md { margin: 0; }
.quittung .haken { margin-top: 1rem; }
.quittung .note { color: var(--beton); }

.quittung--gut { border-top-color: var(--graphit); }
.quittung--schlecht { border-top-color: var(--magenta); }

/* ---------- Zusagen ----------

   Nicht nummeriert: Die drei stehen nebeneinander, keine kommt
   vor der anderen. Getrennt werden sie von einer Linie, wie die
   Spalten eines Planformulars. */

.zusagen {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--raster);
}

.zusage { padding-top: 1.75rem; }
.zusage p { margin: 0.75rem 0 0; color: var(--beton); max-width: 40ch; }

.zusage__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ---------- Bilder ----------

   Die Fotos zeigen fremde Gebaeude. Sie stehen deshalb bewusst
   nicht randlos und heldenhaft da, sondern in einem Rahmen mit
   Beschriftung — wie ein Referenzbild in einer Mappe, nicht wie
   ein Beleg fuer eigene Arbeit. */

.foto { display: block; }
.foto img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--papier-tief);
}

.bildstelle { margin: 0; }

.bildstelle__text {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beton);
  margin: 0.75rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.bildstelle__text::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--raster);
  flex: none;
}

.leistung__bild { align-self: start; }
.ueber__bild { margin: 2.5rem 0 0; }

/* Bildband: ein Streifen ueber die volle Breite. Der Verlauf ist
   Bedingung fuer die Lesbarkeit — weisser Text auf einem Foto
   ohne Abdunklung ist auf hellen Stellen unlesbar. */

.bildband {
  position: relative;
  background: var(--graphit);
  overflow: hidden;
}
.bildband__bild { display: block; position: relative; }
.bildband__bild img {
  width: 100%;
  height: clamp(15rem, 42vw, 26rem);
  object-fit: cover;
  object-position: center 42%;
}
/* Auf schmalen Schirmen steht der Satz UNTER dem Bild, nicht
   darauf: Bei 390 px belegte die Ueberlagerung drei Viertel des
   Streifens — vom Motiv blieb ein Rest, und der Text stand im
   Gedraenge. Ab 46em ist Platz fuer beides uebereinander. */
.bildband__in {
  position: relative;
  padding-block: 1.5rem 1.75rem;
}
@media (min-width: 46em) {
  .bildband__in {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding-block: clamp(1.5rem, 4vw, 2.75rem);
  }

  /* Der Verlauf ist kein Effekt, sondern die Bedingung dafuer, dass
     der Text auf jedem Motiv lesbar bleibt. */
  .bildband__bild::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(20, 30, 31, 0.92) 0%,
      rgba(20, 30, 31, 0.72) 34%,
      rgba(20, 30, 31, 0.14) 70%,
      rgba(20, 30, 31, 0) 100%);
  }
}

.brauen--hell { color: var(--sand); }

.bildband__satz {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--papier);
  max-width: 30ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Fragen ---------- */

.fragen { border-top: 1px solid var(--raster); }

.frage { border-bottom: 1px solid var(--raster); }
.frage summary {
  padding: 1.15rem 2.5rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  position: relative;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 1.65rem;
  width: 0.7rem;
  height: 1px;
  background: var(--graphit);
  box-shadow: 0 0 0 0 transparent;
}
.frage summary::before {
  content: '';
  position: absolute;
  right: 0.73rem;
  top: 1.3rem;
  width: 1px;
  height: 0.7rem;
  background: var(--graphit);
  transition: transform 0.25s var(--weich);
}
.frage[open] summary::before { transform: scaleY(0); }
.frage[open] summary { color: var(--magenta); }
.frage[open] summary::after, .frage[open] summary::before { background: var(--magenta); }
.frage p { margin: 0 0 1.3rem; max-width: 60ch; color: var(--beton); }

/* ---------- Kontakt ---------- */

.anfrage { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.anfrage__text .anriss { margin: 1.5rem 0 2rem; }
.anfrage__text .titel-md { margin-top: 2.5rem; }
.anfrage__text .titel-md:first-child { margin-top: 0; }
.anfrage__text p { max-width: 50ch; }

.kontaktdaten { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--raster); }
.kontaktdaten li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--raster);
}
.kontaktdaten span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beton);
  padding-top: 0.2rem;
}
.kontaktdaten a { color: var(--magenta-matt); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Formular ---------- */

.form { display: grid; gap: 1.1rem; }
.form__reihe { display: grid; gap: 1.1rem; }

.feld { margin: 0; display: grid; gap: 0.4rem; }
.feld label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beton);
}
.feld abbr { color: var(--magenta); text-decoration: none; }

.feld input, .feld select, .feld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--graphit);
  background: var(--papier);
  border: 1px solid var(--raster);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--weich);
}
.abschnitt--papier .feld input,
.abschnitt--papier .feld select,
.abschnitt--papier .feld textarea { background: var(--papier); }

.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--beton-hell); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--magenta);
  outline: 1px solid var(--magenta);
  outline-offset: -2px;
}
.feld textarea { resize: vertical; }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: var(--magenta); }
.feld .feld__fehler {
  font-family: var(--text);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--magenta-matt);
}

.feld--haken {
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-top: 0.5rem;
}
/* 1,05rem sind 17 Pixel – zu klein zum Treffen. WCAG 2.2 verlangt
   24 Pixel (2.5.8). Das Kaestchen bleibt optisch zurueckhaltend,
   bekommt aber ueber padding eine Trefferflaeche, die zaehlt. */
.feld--haken input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--magenta);
  flex: none;
}
/* Die Beschriftung ist mit for verknuepft und damit selbst
   anklickbar – sie ist die eigentliche, grosse Trefferflaeche. */
.feld--haken label { padding-block: 0.35rem; }
.feld--haken label {
  font-family: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--graphit);
  line-height: 1.5;
}
.feld--haken a { color: var(--magenta-matt); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein Feld, das sie
   ausfuellen. display:none wuerde von manchen uebersprungen. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0.75rem 0 0; }
.form__hinweis { font-size: 0.9rem; color: var(--beton); }
.form__hinweis[data-art='fehler'] { color: var(--magenta-matt); }
.form__hinweis[data-art='gut'] { color: var(--graphit); }
.form__fussnote { margin: 0; font-size: 0.9rem; color: var(--beton); }
.form__fussnote a { color: var(--magenta-matt); }

/* ---------- Band ---------- */

.band {
  background: var(--graphit);
  color: var(--papier);
  padding-block: clamp(3rem, 7vw, 4.5rem);
}
.band__in { display: grid; gap: 2rem; align-items: center; }
.band .anriss { color: var(--beton-hell); margin-top: 1rem; }
.band__aktion { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; }
.band .knopf--voll { background: var(--papier); color: var(--graphit); border-color: var(--papier); }
.band .knopf--voll:hover { background: var(--magenta); border-color: var(--magenta); color: var(--papier); }
.band .knopf--linie { color: var(--papier); border-color: var(--beton); }
.band .knopf--linie:hover { border-color: var(--magenta-hell); color: var(--magenta-hell); }

/* ---------- Fuß ---------- */

.fuss {
  background: var(--graphit);
  color: var(--beton-hell);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid var(--graphit-hell);
}
.fuss__in { display: grid; gap: 2.5rem; }
.fuss a { color: var(--papier); text-decoration: none; }
.fuss a:hover { color: var(--magenta-hell); }
.fuss p { margin: 0 0 0.9rem; }

/* Elementqualifiziert wegen `.fuss p` eine Zeile darueber. */
.fuss p.fuss__satz {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--papier);
  max-width: 26ch;
  margin-top: 1rem;
}

.fuss__titel {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--beton);
  margin: 0 0 1rem;
}

/* Der Abstand wandert von der Luecke in den Link hinein. Optisch
   steht die Liste danach fast gleich, aber jede Zeile ist selbst
   anfassbar statt nur ihre 20 Pixel hohe Schrift. */
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.fuss__liste a { font-size: 0.95rem; display: block; padding-block: 0.55rem; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--graphit-hell);
  font-size: 0.82rem;
}
.fuss__unten p { margin: 0; }
.fuss__reg { font-family: var(--mono); }

/* ---------- Einblenden beim Scrollen ---------- */

.js [data-auf] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
  transition-delay: var(--verzug, 0ms);
}
.js [data-auf][data-sichtbar] { opacity: 1; transform: none; }

/* ---------- Breiten ---------- */

@media (min-width: 46em) {
  .form__reihe { grid-template-columns: 1fr 1fr; }
  .fuss__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .band__in { grid-template-columns: 1fr auto; }
  .zusagen { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .zusage + .zusage { border-left: 1px solid var(--raster); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
}

@media (min-width: 60em) {
  .nav { display: flex; }
  .kopf__tel { display: block; }
  .burger { display: none; }
  .menue { display: none !important; }

  .held__in { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .ueber { grid-template-columns: 1.35fr 0.65fr; }
  .anfrage { grid-template-columns: 0.85fr 1.15fr; }
  .leistung__in { grid-template-columns: 1.05fr 0.95fr; }

  /* Jede zweite Leistung spiegelt sich: Bild links, Text rechts.
     Das haelt die Seite in Bewegung, ohne dass sich die
     Lesereihenfolge im Quelltext aendert. */
  .leistung--wechsel .leistung__in { grid-template-columns: 0.95fr 1.05fr; }
  .leistung--wechsel .leistung__text { grid-column: 2; grid-row: 1; }
  .leistung--wechsel .leistung__bild { grid-column: 1; grid-row: 1; }
  .phase { grid-template-columns: auto 1fr; }
}

/* ---------- Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }

  /* Wichtig: Wer keine Bewegung will, soll nicht weniger sehen. Die
     Zeichnung steht dann sofort fertig da, statt sich zu zeichnen. */
  .plan__grenze, .plan__bau-linie { stroke-dashoffset: 0 !important; }
  .plan__bau, .plan__weg, .plan__mass, .plan__label, .plan__nord { opacity: 1 !important; }
  .phasen__achse { transform: scaleY(1) !important; }
  .js [data-auf] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Druck ---------- */

@media print {
  .kopf, .menue, .band, .form, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt--dunkel, .fuss { background: #fff !important; color: #000 !important; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  a[href^='#']::after, a[href^='/']::after { content: ''; }
}