/* Digital Factory Flow — Stylesheet
   Grundlage: Richtungsvertrag "Die Werkstatt als Ort" (.impeccable/surfaces/code-index-html.md)
   Papier als Flaeche, Stahl fuer dunkle Baender, Blau nur fuer die Handlung,
   Signalgelb nur fuer Bodenmarkierung und Messpunkt. Keine Rundungen, keine Schatten,
   keine Verlaeufe. Archivo fuer Text, IBM Plex Mono fuer Kennzeichnungen. */

/* ---------- Schriften ---------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Werte ---------- */

:root {
  color-scheme: light;

  /* Farbe */
  --blau: #003ed8;
  --blau-tief: #002fa6;
  --blau-hell: #4e7bff; /* nur Flaeche und Zeichen, nie Textfarbe */
  --signal: #f5a800;
  --papier: #eff0ec;
  --blatt: #f9faf7;
  --linie: #d9d9d2;
  --tinte: #26292c;
  --tinte-weich: #4f5457;
  --stahl: #23272b;
  --stahl-hell: #34393e;
  --stahl-linie: #4b5257;
  --auf-dunkel: #f2f3f0;
  --auf-dunkel-weich: #b9bfc2;
  --auf-blau: #ffffff;
  --fehler: #b3261e;

  /* Schrift */
  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Consolas", monospace;

  --t-h1: clamp(2.05rem, 1.2rem + 3vw, 3.5rem);
  --t-h2: clamp(1.55rem, 1.05rem + 1.9vw, 2.5rem);
  --t-h3: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  --t-text: clamp(1rem, 0.96rem + 0.16vw, 1.075rem);
  --t-klein: 0.9rem;
  --t-mono: 0.7rem;
  --t-spruch: clamp(1.6rem, 1rem + 2.6vw, 3.1rem);

  /* Raum */
  --inhalt: 1220px;
  --rand: clamp(1rem, 4vw, 3.5rem);
  --band-luft: clamp(3.5rem, 7.5vw, 7rem);
  --spalte: clamp(1.5rem, 3.5vw, 3rem);

  /* Bewegung */
  --tempo: 260ms;
  --kurve: cubic-bezier(0.2, 0, 0, 1);

  /* Regler (Phase 6) */
  --einstieg-luft: clamp(1.5rem, 3.5vw, 2.6rem);
  --einstieg-schrift: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  --einstieg-blatt: 26rem;
  --posten-luft: clamp(1.6rem, 3vw, 2.4rem);
  --markierung-hoehe: 8px;
}

/* ---------- Grundlage ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-text);
  font-weight: 400;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

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

figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

.band--stahl :focus-visible,
.fuss :focus-visible {
  outline-color: var(--signal);
}

.springen {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blatt);
  color: var(--tinte);
  padding: 0.75rem 1rem;
  z-index: 100;
}

.springen:focus {
  left: var(--rand);
  top: 0.5rem;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Bauhilfen ---------- */

.huelle {
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.band {
  padding-block: var(--band-luft);
  position: relative;
}

.band--papier {
  background: var(--papier);
}

.band--blatt {
  background: var(--blatt);
}

.band--stahl {
  background: var(--stahl);
  color: var(--auf-dunkel);
}

.band--stahl h2,
.band--stahl h3 {
  color: #fff;
}

.band--stahl a {
  color: #fff;
}

/* Das Formblatt liegt als helles Blatt auf dem dunklen Band und bringt seine
   eigenen Textfarben mit. */
.formblatt,
.formblatt h2,
.formblatt h3,
.formblatt a {
  color: var(--tinte);
}

.formblatt a.verweis {
  color: var(--blau);
}

.h2 {
  font-size: var(--t-h2);
  max-width: 24ch;
}

.h2--breit {
  max-width: 34ch;
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fliesstext {
  max-width: 62ch;
}

.fliesstext + .fliesstext {
  margin-top: 1.1em;
}

.leise {
  color: var(--tinte-weich);
}

.band--stahl .leise {
  color: var(--auf-dunkel-weich);
}

/* Kennzeichnung: Beschriftungen wie aufgemalt oder gestempelt */
.kennzeichnung {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

.band--stahl .kennzeichnung {
  color: var(--auf-dunkel-weich);
}

/* Die gelbe Bodenmarkierung als beschriftetes Band, wie sie im Betrieb aussieht:
   gelbe Flaeche mit aufgemalten Bereichsnamen, dunkle Schrift darauf. */
.markierung-band {
  background: var(--signal);
  color: #191c1f;
  /* Der Bandtext steht auf derselben Kante wie der Inhalt, nicht am Rand der
     gelben Flaeche: die Flaeche bleibt voll breit, die Schrift rueckt ein. */
  padding-inline: max(var(--rand), calc((100% - var(--inhalt)) / 2 + var(--rand)));
  padding-block: 0.4rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.markierung-band__text {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Auf Handybreite bricht die Kette vor einem Bereichsnamen um; der Trennungspunkt
   bleibt beim vorherigen Namen (geschuetzte Leerzeichen im Markup). */
@media (max-width: 640px) {
  .markierung-band {
    gap: 0.6rem;
  }

  .markierung-band__text {
    letter-spacing: 0.08em;
  }
}

.markierung-band::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #191c1f;
  opacity: 0.35;
}

/* Messpunkt (Beweiszeile) */
.messpunkt {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

.messpunkt::before {
  content: "";
  width: 2px;
  height: 1.6em;
  background: var(--signal);
  flex: none;
}

.band--stahl .messpunkt {
  color: var(--auf-dunkel-weich);
}

/* ---------- Knoepfe und Verweise ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  background: var(--blau);
  color: var(--auf-blau);
  border: 1px solid var(--blau);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.knopf:hover {
  background: var(--blau-tief);
  border-color: var(--blau-tief);
}

.knopf--klein {
  padding: 0.6rem 0.95rem;
  font-size: var(--t-klein);
}

/* Fliesstext-Verweis mit Markierung beim Ueberfahren */
.verweis {
  color: var(--blau);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--tempo) var(--kurve);
}

.verweis:hover {
  border-bottom-color: var(--signal);
}

.band--stahl .verweis {
  color: #fff;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.kopf__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.4rem;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.015em;
  flex: none;
}

.marke img {
  width: auto;
  height: 1.85rem;
}

.marke span {
  font-size: 1.02rem;
}

.kopf__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

.kopf__nav a {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--tempo) var(--kurve);
}

.kopf__nav a:hover {
  border-bottom-color: var(--signal);
}

.kopf__nav a[aria-current="true"] {
  border-bottom-color: var(--signal);
}

.kopf__tat {
  flex: none;
}

.kopf__nav-tat {
  display: none;
  justify-content: center;
}

.kopf__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--linie);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.kopf__burger span {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: var(--tinte);
}

.kopf__burger span + span {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .kopf__burger {
    display: block;
  }

  .kopf__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: 0.5rem var(--rand) 1.2rem;
  }

  .kopf--offen .kopf__nav {
    display: flex;
  }

  .kopf__nav a {
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--linie);
  }

  .kopf__nav a:not(.knopf):hover,
  .kopf__nav a:not(.knopf)[aria-current="true"] {
    border-bottom-color: var(--linie);
    color: var(--blau);
  }

  .kopf__tat {
    display: none;
  }

  .kopf__nav-tat {
    display: flex;
    margin-top: 1rem;
  }
}

/* ---------- Einstieg ---------- */

.einstieg {
  position: relative;
  background: var(--papier);
  display: flex;
  flex-direction: column-reverse;
}

.einstieg__bild {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.einstieg__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 42%;
}

.einstieg__lage {
  position: relative;
  z-index: 2;
  padding-top: var(--einstieg-luft);
}

.einstieg__lage .huelle {
  padding-inline: var(--rand);
}

.einstieg__blatt {
  background: var(--blatt);
  border: 1px solid var(--linie);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 40rem;
}

.einstieg h1 {
  font-size: var(--t-h1);
  max-width: 24ch;
}

/* Wer spricht: Name und Ort als Stempel ueber der Ueberschrift */
.einstieg__name {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: 0.9rem;
}

.einstieg__unter {
  margin-top: 1.15rem;
  font-size: var(--einstieg-schrift);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--tinte);
}

.einstieg__taten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.einstieg__zweit {
  color: var(--tinte);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 0.15rem;
}

.einstieg__zweit:hover {
  color: var(--blau);
}

.einstieg__beweis {
  margin-top: clamp(1.3rem, 3vw, 1.8rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}

@media (min-width: 1000px) {
  .einstieg {
    display: block;
  }

  .einstieg__bild {
    width: 100%;
  }

  .einstieg__bild img {
    aspect-ratio: 16 / 9;
    object-position: 50% 40%;
  }

  .einstieg__lage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding: 0;
  }

  .einstieg__lage .huelle {
    width: 100%;
    padding-top: var(--einstieg-luft);
  }

  .einstieg__blatt {
    max-width: var(--einstieg-blatt);
    padding: clamp(1.4rem, 1.8vw, 1.9rem);
    background: rgba(249, 250, 247, 0.92);
  }

  .einstieg h1 {
    /* Etwas kleiner als die allgemeine H1, damit die Ueberschrift in vier
       Zeilen steht und das Textblatt die Halle weniger verdeckt. */
    font-size: clamp(1.8rem, 0.95rem + 1.55vw, 2.45rem);
  }

  .einstieg__unter {
    font-size: clamp(1.12rem, 0.95rem + 0.55vw, 1.42rem);
    line-height: 1.5;
  }
}

/* ---------- Problem ---------- */

.problem__raster {
  display: grid;
  gap: var(--spalte);
}

@media (min-width: 900px) {
  .problem__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }
}

.problem__tiefe {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--stahl-linie);
  display: grid;
  gap: 0.8rem var(--spalte);
}

@media (min-width: 900px) {
  .problem__tiefe {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }
}

/* ---------- Leistungen ---------- */

.posten {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--tinte);
}

.posten__zeile {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: var(--posten-luft);
  border-bottom: 1px solid var(--linie);
  align-items: start;
}

.posten__nr {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  padding-top: 0.5rem;
  color: var(--tinte-weich);
}

.posten__text p {
  margin-top: 0.7rem;
  max-width: 58ch;
}

.posten__begriffe {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tinte-weich);
}

/* Der Belegsatz: die Zeichnungen stehen als eigener Satz unter der Stückliste,
   gleiche Breite, gleiche Kante, drei nebeneinander. */
.belege {
  display: grid;
  gap: var(--spalte);
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

@media (min-width: 860px) {
  .belege {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.belege .beleg {
  margin: 0;
}

/* Belegbild: Bild und Unterschrift bilden ein Blatt mit sichtbarem Rahmen */
.beleg {
  position: relative;
  background: var(--blatt);
  border: 1px solid var(--tinte);
  padding: clamp(0.45rem, 1.2vw, 0.8rem);
}

.beleg img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.beleg figcaption {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--tinte-weich);
}

.beleg__nr {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte);
}

.beleg figcaption b {
  font-weight: 600;
  color: var(--tinte);
}

.beleg--weit {
  max-width: none;
}

/* ---------- Ablauf ---------- */

.ablauf {
  border-block: 1px solid var(--linie);
}

.strecke {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-left: 3.4rem;
}

.strecke__linie {
  position: absolute;
  left: 1.1rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: var(--markierung-hoehe);
  background: color-mix(in srgb, var(--signal) 28%, var(--blatt));
}

.strecke__linie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform-origin: top;
  transform: scaleY(var(--fortschritt, 1));
}

.strecke__pfeil {
  position: absolute;
  left: 1.1rem;
  bottom: -0.2rem;
  width: 0;
  height: 0;
  border-left: calc(var(--markierung-hoehe) / 2) solid transparent;
  border-right: calc(var(--markierung-hoehe) / 2) solid transparent;
  border-top: 0.85rem solid var(--signal);
}

.station {
  position: relative;
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

.station:last-child {
  padding-bottom: 0;
}

.station__marke {
  position: absolute;
  left: -3.4rem;
  top: 0.15rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--signal);
  color: #191c1f;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.station p {
  margin-top: 0.55rem;
  max-width: 56ch;
}

/* Verweis unter einem Abschnittstext: auf Handybreite braucht er Luft zur
   Unterzeile, auf Desktop wird er an das Ende der Spalte gesetzt. */
.weiter {
  margin-top: 1.3rem;
}

@media (min-width: 900px) {
  .strecke__raster {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--spalte);
    align-items: stretch;
  }

  .strecke__raster > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .strecke__raster > div .weiter {
    margin-top: auto;
    padding-top: 2rem;
  }
}

/* ---------- Ueber mich ---------- */

.ueber__raster {
  display: grid;
  gap: var(--spalte);
}

@media (min-width: 900px) {
  .ueber__raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

.ueber__zusatz {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

.werdegang {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: grid;
  border-top: 0;
}

.werdegang li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  column-gap: 1rem;
  padding-block: 0.9rem;
  align-items: center;
}

.werdegang__name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  align-self: center;
}

.werdegang__linie {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 2px;
  align-self: stretch;
  background: var(--linie);
}

@media (min-width: 860px) {
  .werdegang {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
  }

  .werdegang li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.9rem;
    padding: 0 1.4rem 0 0;
    align-items: start;
  }

  .werdegang__name {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    min-height: 2.6em;
  }

  .werdegang__linie {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    width: auto;
    height: 2px;
    align-self: center;
    position: relative;
    background: var(--tinte);
  }

  .werdegang__linie::before {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 2px;
    height: 12px;
    background: var(--tinte);
  }

  .werdegang li:first-child .werdegang__linie::after {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: -0.32rem;
    width: 0;
    height: 0;
    border-top: 0.36rem solid transparent;
    border-bottom: 0.36rem solid transparent;
    border-right: 0.7rem solid var(--tinte);
  }

  .werdegang li:last-child .werdegang__linie {
    background: linear-gradient(90deg, var(--tinte) 0%, var(--tinte) 100%);
  }

  .werdegang li:last-child .werdegang__linie::before {
    left: auto;
    right: 0;
    background: var(--signal);
    height: 11px;
    top: -5px;
  }

  .werdegang li:last-child .werdegang__linie::after {
    content: "";
    position: absolute;
    right: -0.9rem;
    top: -0.32rem;
    width: 0;
    height: 0;
    border-top: 0.36rem solid transparent;
    border-bottom: 0.36rem solid transparent;
    border-left: 0.7rem solid var(--tinte);
  }
}

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

.fragen__liste {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--tinte);
}

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  display: grid;
  grid-template-columns: 2.6rem 1fr 1.6rem;
  gap: 1rem;
  align-items: baseline;
  padding-block: clamp(1rem, 2.2vw, 1.4rem);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  justify-self: end;
  align-self: center;
  background:
    linear-gradient(var(--blau), var(--blau)) center / 100% 2px no-repeat,
    linear-gradient(var(--blau), var(--blau)) center / 2px 100% no-repeat;
  transition: transform var(--tempo) var(--kurve);
}

.frage[open] summary::after {
  transform: rotate(45deg);
}

.frage__nr {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--tinte-weich);
}

.frage__antwort {
  padding: 0 0 clamp(1.2rem, 2.5vw, 1.7rem) 3.6rem;
  max-width: 74ch;
  color: var(--tinte-weich);
}

.frage:hover summary {
  color: var(--blau);
}

/* ---------- Blog ---------- */

.blog__raster {
  display: grid;
  gap: var(--spalte);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

@media (min-width: 800px) {
  .blog__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.blog__liste {
  border-top: 1px solid var(--tinte);
}

.blog__liste li {
  border-bottom: 1px solid var(--linie);
}

.blog__liste a {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.05rem;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--tempo) var(--kurve);
}

.blog__liste a:hover {
  color: var(--blau);
}

.blog__liste time {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

/* Der Beitragstitel ist der Klickpunkt, nicht die Metazeile: Leseschrift,
   normale Schreibung, Groesse einer Zwischenueberschrift. */
.blog__liste span {
  font-family: var(--schrift);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
  line-height: 1.3;
}

/* Anriss unter dem Titel: Textzeile des Beitrags, nicht fett, gedeckte Farbe */
.blog__anriss {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-klein);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tinte-weich);
  max-width: 62ch;
}

/* ---------- Anfrage ---------- */

.anfrage__raster {
  display: grid;
  gap: var(--spalte);
}

@media (min-width: 960px) {
  .anfrage__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.anfrage__intro p {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--auf-dunkel-weich);
}

.kontakt {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  border-top: 1px solid var(--stahl-linie);
}

.kontakt > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--stahl-linie);
  align-items: baseline;
}

.kontakt dt {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auf-dunkel-weich);
}

.kontakt dd {
  margin: 0;
}

/* Was nach der Anfrage passiert: fuellt die ruhige Flaeche neben dem Formular
   und nimmt die Hemmschwelle vor dem Absenden. */
.danach {
  list-style: none;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.danach li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
}

.danach__nr {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--signal);
}

.danach p {
  margin: 0;
  max-width: 40ch;
  color: var(--auf-dunkel-weich);
}

.danach b {
  color: #fff;
  font-weight: 600;
}

/* Umschalter zwischen Terminkalender und Formular */
.anfrage__wahl {
  min-width: 0;
}

.umschalter {
  display: flex;
  border-bottom: 1px solid var(--stahl-linie);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.umschalter__knopf {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin: 0 1.4rem -1px 0;
  padding: 0.6rem 0.1rem;
  font: inherit;
  font-weight: 500;
  color: var(--auf-dunkel-weich);
  cursor: pointer;
  transition: color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.umschalter__knopf:hover {
  color: #fff;
}

.umschalter__knopf.ist-aktiv {
  color: #fff;
  border-bottom-color: var(--signal);
}

.ist-aus {
  display: none !important;
}

/* Der Termin-Knopf oeffnet den cal.com-Kalender als Overlay: die Seite bleibt
   kompakt, der Kalender laedt erst beim Klick (eigene Domain, kein Dritter). */
.kalender__text {
  margin: 0;
  max-width: 46ch;
  color: var(--auf-dunkel-weich);
}

.kalender__tat {
  margin: 1.2rem 0 0;
}

/* Honigtoepfchen gegen Formularroboter: ausserhalb des Bildes, nicht fokussierbar.
   Wird derzeit nicht eingesetzt, weil das Formular über n8n läuft; bleibt für den Fall,
   dass der eigene Dienst (dienst/anfrage/) übernimmt. */
.formblatt__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formblatt {
  background: var(--blatt);
  border: 1px solid var(--linie);
  color: var(--tinte);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.formblatt__feld {
  margin-bottom: 1.15rem;
}

.formblatt__reihe {
  display: grid;
  gap: 1.15rem;
  /* Die Selects stehen auf einer Linie, auch wenn eine Beschriftung zweizeilig wird. */
  align-items: end;
}

@media (min-width: 620px) {
  .formblatt__reihe {
    grid-template-columns: 1fr 1fr;
  }
}

.formblatt label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: 0.45rem;
}

.formblatt input,
.formblatt select,
.formblatt textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid var(--tinte);
  border-radius: 0;
  font-size: 1rem;
}

.formblatt textarea {
  min-height: 7rem;
  resize: vertical;
}

.formblatt select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%),
    linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.8rem) 1.15rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.formblatt input:focus-visible,
.formblatt select:focus-visible,
.formblatt textarea:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 1px;
}

.formblatt [aria-invalid="true"] {
  border-color: var(--fehler);
  border-width: 2px;
}

.feld-hinweis {
  margin-top: 0.4rem;
  font-size: var(--t-klein);
  color: var(--tinte-weich);
}

.feld-fehler {
  margin-top: 0.4rem;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--fehler);
}

.formblatt__fuss {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.9rem;
}

.formblatt__datenschutz {
  font-size: var(--t-klein);
  color: var(--tinte-weich);
}

.formblatt__zustaende {
  margin-top: 1rem;
}

.formblatt__danke {
  border: 1px solid var(--blau);
  border-left-width: 6px;
  padding: 1rem 1.2rem;
  background: var(--papier);
  color: var(--tinte);
  font-weight: 600;
}

.formblatt__verweis {
  margin-top: 0.6rem;
  font-size: var(--t-klein);
  color: var(--tinte-weich);
}

/* ---------- Fuss ---------- */

.fuss {
  background: var(--stahl);
  color: var(--auf-dunkel);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 0;
}

.fuss__raster {
  display: grid;
  gap: var(--spalte);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 800px) {
  .fuss__raster {
    /* Die Linkliste bekommt die breitere Spalte: die Leistungsnamen sind lange
       Woerter und liefen sonst in die Nachbarspalte. */
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
}

.fuss__marke img {
  height: 2rem;
  width: auto;
}

.fuss__adresse {
  margin-top: 1rem;
  color: var(--auf-dunkel-weich);
  max-width: 34ch;
}

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.6rem 2rem;
}

.fuss__spalten h3 {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--auf-dunkel-weich);
  margin-bottom: 0.8rem;
}

.fuss__spalten ul {
  display: grid;
  gap: 0.5rem;
}

.fuss__spalten a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fuss__spalten a:hover {
  border-bottom-color: var(--signal);
}

.fuss__spruch {
  font-size: var(--t-spruch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--stahl-linie);
  padding-top: clamp(1.6rem, 3.5vw, 2.6rem);
  /* Volle Breite, damit die Trennlinie auf derselben Kante endet wie die
     Linie darunter; der Satz selbst bleibt eine Zeile. */
  text-wrap: balance;
}

.fuss__klein {
  border-top: 1px solid var(--stahl-linie);
  padding-block: 1.2rem;
  font-size: var(--t-klein);
  color: var(--auf-dunkel-weich);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
}

.fuss__marke-unten {
  height: var(--markierung-hoehe);
  background: var(--signal);
}

/* ---------- Erklaerende Seiten (Impressum, Datenschutz, Blog) ---------- */

.blatt-seite {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.blatt-seite__inner {
  max-width: 76ch;
}

.blatt-seite h1 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
}

.blatt-seite h2 {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  font-size: var(--t-h3);
  font-weight: 700;
}

.blatt-seite p,
.blatt-seite ul,
.blatt-seite ol {
  margin-top: 1rem;
  color: var(--tinte);
}

.blatt-seite ul {
  list-style: none;
  border-top: 1px solid var(--linie);
}

.blatt-seite ul li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--linie);
}

.blatt-seite img {
  margin-top: 1.6rem;
  border: 1px solid var(--linie);
}

.beitrag__kopf {
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
}

.beitrag__kopf .kennzeichnung {
  margin-bottom: 0.7rem;
}

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

.einblenden {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
}

.einblenden--da {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .einblenden {
    opacity: 1;
    transform: none;
  }

  .strecke__linie::after {
    transform: none;
  }
}

@media print {
  .kopf,
  .strecke__pfeil {
    display: none;
  }
}