/* ------------------------------------------------------------------
   Startseite mit echtem 3D. Farben, Schriften und Fußbereich kommen
   unverändert aus /grund.css. Das Werkstück zeichnet 3d.js auf eine
   feste Leinwand hinter dem Inhalt; dieses Blatt sorgt dafür, dass der
   Text darüber trägt.

   Ruhezustand ist der fertige Zustand: ohne Skript, ohne WebGL oder mit
   reduzierter Bewegung stehen die Zeichnungen statisch neben dem Text.
   Erst `html.gl` (setzt 3d.js, sobald die Leinwand läuft) blendet sie
   aus und streckt die Etappen zu Scrollwegen.
   ------------------------------------------------------------------ */

:root { --weich: cubic-bezier(.2, .8, .2, 1); }

html { scroll-behavior: smooth; }
body { display: block; overflow-x: clip; }
::selection { background: var(--akzent); color: var(--auf-akzent); }

/* ---------- Leinwand ----------
   Hinter allem (z-index -1 malt über dem Seitengrund, unter dem Inhalt).
   100lvh statt 100svh: sonst ändert sich die Höhe auf dem Telefon mit
   jeder ein- und ausfahrenden Adressleiste, und die Leinwand müsste
   jedes Mal neu angelegt werden. */
.szene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.szene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--weich); }
.szene.an canvas { opacity: 1; }

/* Maßzahlen und Schichtzähler hängen am Modell, sind aber echte Schrift
   statt Pixel - so bleiben sie scharf und in der Mono der Seite. */
.etikett {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--akzent);
  background: var(--grund);
  padding: .1rem .35rem;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
}

/* Das Merkmal unter dem Zeiger: etwas abgesetzt, damit es den Punkt
   nicht verdeckt, auf den gezeigt wird. */
.etikett.merkmal { margin: -1.6rem 0 0 1.2rem; border: 1px solid var(--akzent); transition: opacity .2s; }
html.greifbar { cursor: grab; }
html.zieht, html.zieht * { cursor: grabbing !important; user-select: none; }

/* Quelltext der Software-Etappe: jede Zeile hängt an ihrer Schicht. */
.quelltext { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.codezeile {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: clamp(9px, .78vw, 12px);
  line-height: 1;
  white-space: pre;
  color: var(--tinte-weich);
  will-change: transform;
}
.codezeile i { font-style: normal; color: var(--tinte-fein); opacity: .6; margin-right: 1.4em; }
.codezeile.hervor span { color: var(--akzent); }

/* Das Angebot in einem Satz, unter dem Leitsatz. */
.angebot {
  font-family: var(--grotesk);
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 44ch;
  margin: 1.1rem 0 0;
}

.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  height: 1px;
  background: var(--akzent);
  transform-origin: left;
  transform: scaleX(var(--s, 0));
  z-index: 60;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 var(--rand);
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  border-bottom: 1px solid var(--linie);
}
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinte);
  text-decoration: none;
  font-family: var(--grotesk);
  font-weight: 650;
  letter-spacing: -.02em;
}
.logo img { height: 32px; width: auto; display: block; }
.kopf-links { display: flex; gap: 1.5rem; margin-left: auto; font-family: var(--grotesk); font-size: .9rem; }
.kopf-links a { color: var(--tinte-weich); text-decoration: none; }
.kopf-links a:hover { color: var(--akzent); }
.kopf-knopf { padding: .55rem 1rem; }

/* ---------- Bühne ---------- */
.buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 7rem var(--rand) clamp(1.25rem, 3vw, 2.25rem);
}
.buehne-text { align-self: center; }

.pos {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.pos::after { content: ""; height: 1px; width: 3rem; background: var(--akzent); opacity: .6; }

.riesig {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(3.4rem, 10.5vw, 11.5rem);
  line-height: .86;
  letter-spacing: -.055em;
  margin: 0;
}
/* Vor- und Nachname stehen immer auf eigener Zeile und brechen nie um.
   Die Maske schneidet den Auftritt ab; ihr Innenabstand hält Ober- und
   Unterlängen und den rechten Rand des letzten Buchstabens frei, der
   negative Rand gibt den Platz wieder zurück. */
.riesig .maske {
  display: block;
  width: max-content;
  white-space: nowrap;
  overflow: hidden;
  padding: .12em .12em .1em 0;
  margin: -.12em -.12em -.1em 0;
}
.riesig .maske > span { display: block; }

.buehne .mass { max-width: 34rem; margin: clamp(2rem, 3.5vw, 3rem) 0 clamp(1.2rem, 2.2vw, 1.8rem); }

.leitsatz {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--tinte-weich);
  margin: 0;
}
.leitsatz b { font-weight: 700; color: var(--tinte); }
.leitsatz > span { display: block; }
.balken {
  display: inline-block;
  width: .08em;
  height: .85em;
  margin-left: .06em;
  vertical-align: -.08em;
  background: var(--akzent);
}
/* Toleranz hochgestellt statt frei positioniert: so kann sie nie in die
   Zeile darüber ragen. */
.toleranz {
  font-family: var(--mono);
  font-style: normal;
  font-size: .38em;
  letter-spacing: .06em;
  vertical-align: 1.4em;
  margin-left: .3em;
  color: var(--akzent);
}

.buehne-fuss {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }
.weg.haupt svg { transition: transform .25s var(--weich); }
.weg.haupt:hover svg:not(.pfeil) { transform: translateX(4px); }

.rollen {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-fein);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.rollen i { width: 1px; height: 3rem; background: var(--linie); position: relative; overflow: hidden; }
.rollen i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent);
  transform: translateY(-100%);
  animation: tropfen 1.8s var(--weich) infinite;
}
@keyframes tropfen { to { transform: translateY(100%); } }

/* ---------- Etappen ---------- */
.etappe-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin: 0 var(--rand);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--linie);
}

/* Mit Leinwand: der Scrollweg treibt das Werkstück, der Text bleibt
   solange stehen. Die rechte Spalte bleibt leer - dort steht es. */
html.gl .etappe { height: 250vh; }
html.gl .etappe-buehne { position: sticky; top: 0; height: 100svh; padding: 0; }
html.gl .etappe-bild { display: none; }

.nr {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--tinte);
}
.gross {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 0 0 1.2rem;
  hyphens: manual;
}
.satz {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--tinte-weich);
  max-width: 36ch;
  margin: 0 0 1.6rem;
}
/* Typische Aufträge je Leistung: eine Zeile, durch Messingpunkte getrennt. */
.typisch {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--tinte-weich);
  max-width: 44ch;
}
.typisch li:not(:last-child)::after { content: "·"; color: var(--akzent); margin: 0 .7em; }

/* Der Knopf je Leistung ist ein echter Knopf, kein Randvermerk: er ist
   der nächste Schritt für jemanden, der bis hierher gelesen hat. */
.anfragen span { transition: transform .3s var(--weich); }
.anfragen:hover span { transform: translateX(5px); }

/* ---------- Zeichnungen (Rückfall ohne Leinwand) ---------- */
.etappe-bild {
  position: relative;
  color: var(--tinte);
  aspect-ratio: 6 / 5;
  width: 100%;
  max-height: 70svh;
  display: grid;
  place-items: center;
}
.etappe-bild > svg { width: 100%; height: 100%; }
.messing { fill: var(--akzent); }
.masszahl {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--tinte-fein);
}
.masszahl span { color: var(--akzent); font-size: 1.6em; }

.fenster { width: min(100%, 34rem); border: 1px solid var(--linie); background: var(--flaeche); }
.fenster-kopf {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--tinte-fein);
}
.fenster-kopf i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--linie); }
.fenster-kopf span { margin-left: auto; }
.fenster svg { display: block; width: 100%; height: auto; padding: 1rem; }
.cursor { fill: var(--akzent); }
.status {
  border-top: 1px solid var(--linie);
  padding: .55rem .8rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-fein);
}
.status .ok { color: var(--akzent); }
.bild-cad .kanten { opacity: .7; }
.bild-cad .verdeckt { opacity: .3; }
.bild-cad .punkte { opacity: .6; }
.schichten rect { opacity: .5; }
.schichten .messing { opacity: 1; }

/* ---------- Schluss / Kontakt ---------- */
.schluss {
  margin: 0 var(--rand);
  padding: clamp(5rem, 14vw, 11rem) 0 2rem;
  border-top: 1px solid var(--linie);
  min-height: 90svh;
}
.schluss-titel { margin: 0 0 1.6rem; }
.schluss .hinweis { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--tinte-weich); margin: 0 0 2.2rem; max-width: 46ch; }
/* Rechts steht auf breiten Schirmen das fertige Teil - die Spalte hält Platz. */
@media (min-width: 52rem) { .schluss > * { max-width: min(52rem, 58%); } }

/* Ablauf in drei Schritten: nimmt die Frage "und dann?" vorweg. */
.ablauf {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie);
}
.ablauf li {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding: 1rem 1.2rem 0 0;
}
.ablauf li + li { border-left: 1px solid var(--linie); padding-left: 1.2rem; }
.ablauf b { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; color: var(--akzent); }
.ablauf strong { font-family: var(--grotesk); font-size: 1.05rem; color: var(--tinte); letter-spacing: -.01em; }
.ablauf span { font-size: .9rem; line-height: 1.5; color: var(--tinte-weich); }
@media (max-width: 40rem) {
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li + li { border-left: none; border-top: 1px solid var(--linie); padding-left: 0; }
  .ablauf li { padding-bottom: 1rem; }
}

.direkt { margin: 1.4rem 0 0; font-size: .95rem; color: var(--tinte-weich); }

/* Formular - übernommen von der bisherigen Startseite */
.huelle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--weich);
}
.huelle[data-offen="true"] { grid-template-rows: 1fr; }
.huelle > .innen { overflow: hidden; }

.kontakt {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  padding: 1.6rem;
  margin: 2rem 0 0;
  max-width: 52rem;
}
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-fein);
}
input, textarea {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--linie);
  padding: .6rem .7rem;
  width: 100%;
  transition: border-color .14s, box-shadow .2s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-hg);
}
/* Hoch genug, dass eine Vorlage ganz zu sehen ist, ohne zu scrollen. */
textarea { min-height: 13rem; resize: vertical; line-height: 1.55; }
#kontakt { scroll-margin-top: 1.5rem; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einwilligung {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hg);
  padding: .9rem 1rem;
  margin: 1rem 0 0;
}
.einwilligung p { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.55; color: var(--tinte-weich); }
.einwilligung strong { color: var(--tinte); }
#einwilligungKnopf {
  font-family: var(--grotesk);
  font-size: .8rem;
  font-weight: 580;
  padding: .45rem .8rem;
  background: var(--tinte);
  color: var(--grund);
  border: none;
  cursor: pointer;
}
#einwilligungKnopf:hover { background: var(--akzent); color: var(--auf-akzent); }
#einwilligungKnopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
#turnstileFeld { margin-top: 1rem; }
.sendezeile { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.2rem; }
.senden {
  font-family: var(--grotesk);
  font-size: .9rem;
  font-weight: 600;
  padding: .62rem 1.2rem;
  background: var(--tinte);
  color: var(--grund);
  border: 1px solid var(--tinte);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.senden:hover:not(:disabled) { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.senden:disabled { opacity: .4; cursor: not-allowed; }
.sendehinweis { margin: 0; font-size: .8rem; color: var(--tinte-fein); flex: 1 1 16rem; min-width: 0; }
.sendehinweis[data-frei="true"] { color: var(--akzent); }
.meldung { margin: 1rem 0 0; font-size: .88rem; }
.meldung[data-art="ok"]     { color: var(--akzent); }
.meldung[data-art="fehler"] { color: var(--warn); }

/* ---------- Auftritt ----------
   Reines CSS, kein Skript nötig: endet sichtbar, auch wenn 3d.js nie läuft. */
@media (prefers-reduced-motion: no-preference) {
  .riesig .maske > span { animation: aufsteigen 1.1s var(--weich) .1s backwards; }
  .riesig .maske + .maske > span { animation-delay: .22s; }
  @keyframes aufsteigen { from { transform: translateY(120%); } }

  .buehne .mass { animation: ziehen 1s var(--weich) .6s backwards; transform-origin: left; }
  @keyframes ziehen { from { transform: scaleX(0); } }

  .leitsatz, .angebot, .buehne-fuss, .buehne .pos { animation: auf .9s var(--weich) .75s backwards; }
  .buehne .pos { animation-delay: 0s; }
  @keyframes auf { from { opacity: 0; transform: translateY(.8rem); } }

  .balken { animation: blinken 1s steps(1) 2s infinite; }
  @keyframes blinken { 50% { opacity: 0; } }
}

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

/* ---------- Schmal ----------
   Das Werkstück rückt in die obere Hälfte, der Text der Etappe unten -
   beide überlagern sich nicht. Ein Verlauf aus der Grundfarbe fängt
   ab, falls das Teil doch einmal hineinragt. */
@media (max-width: 52rem) {
  .etappe-buehne { grid-template-columns: 1fr; gap: 1.5rem; }
  .etappe-bild { order: -1; aspect-ratio: auto; height: 42svh; }
  .gross { font-size: clamp(2rem, 9vw, 3rem); margin-bottom: .8rem; }
  .satz { margin-bottom: 1rem; }

  html.gl .etappe { height: 220vh; }
  html.gl .etappe-buehne { align-content: end; }
  html.gl .etappe-text {
    margin: 0 calc(var(--rand) * -1);
    padding: 3rem var(--rand) 2.5rem;
    background: linear-gradient(to top, var(--grund) 75%, transparent);
  }
  html.gl .buehne-text { align-self: start; padding-top: 1rem; } /* Platz für das Teil darunter */
  .buehne .pos::after { display: none; } /* sonst bricht die Zeile mitten in "3D-Druck" */
}
@media (max-width: 40rem) {
  .reihe { grid-template-columns: 1fr; }
  .rollen { display: none; }
  .kopf-links { display: none; }
  .kopf-knopf { margin-left: auto; }
}

/* Der Schalter bleibt für seite.js im Dokument, sichtbar ist er nicht mehr:
   .weg setzt display und schlägt sonst das hidden-Attribut. */
#formularSchalter[hidden] { display: none; }

/* ---------- Themenkacheln im Formular ----------
   Die Radioknöpfe bleiben echte Eingabefelder (Tastatur: Pfeiltasten,
   Vorleser: Gruppe mit Legende), nur unsichtbar über der Kachel. */
.themen {
  border: 0;
  margin: .7rem 0 0;
  padding: 0;
  display: grid;
  /* Zwei mal zwei, vier nebeneinander nur, wenn das Formular selbst breit
     genug ist (Containerabfrage unten) - nie drei plus eine übrig. */
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.themen legend {
  padding: 0;
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-fein);
}
.themen label { position: relative; display: block; cursor: pointer; }
.themen input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.themen span {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: .7rem .8rem .75rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  font-family: var(--grotesk);
  font-size: .9rem;
  font-weight: 560;
  line-height: 1.25;
  color: var(--tinte-weich);
  hyphens: manual;
  transition: border-color .15s, background .15s, color .15s;
}
.themen b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--tinte-fein);
  transition: color .15s;
}
.themen label:hover span { border-color: var(--tinte-fein); color: var(--tinte); }
.themen input:checked + span {
  border-color: var(--akzent);
  background: var(--akzent-hg);
  color: var(--tinte);
  box-shadow: inset 0 -2px 0 var(--akzent);
}
.themen input:checked + span b { color: var(--akzent); }
.themen input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kontakt { container-type: inline-size; }
@container (min-width: 40rem) { .themen { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 22rem) { .themen span { font-size: .84rem; padding-inline: .65rem; } }

/* ---------- Häufige Fragen ----------
   Jede Frage eine Zeile, die Antwort auf Klick. Plus wird beim Öffnen zu
   Minus: Striche statt Drehung, die man bei + nicht sähe. */
.fragen {
  margin: 0 var(--rand);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linie);
}
@media (min-width: 52rem) { .fragen > * { max-width: min(52rem, 58%); } }
.fragen .gross { margin-bottom: 1.6rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-of-type { border-top: 1px solid var(--linie); }
.frage summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
}
.frage summary::-webkit-details-marker { display: none; }
.frage h3 {
  margin: 0;
  font-family: var(--grotesk);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.frage summary::after {
  content: "";
  flex: none;
  width: .85rem;
  height: .85rem;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 1.5px 100% no-repeat;
  transition: background-size .25s var(--weich);
}
.frage[open] summary::after { background-size: 100% 1.5px, 1.5px 0; }
.frage summary:hover h3 { color: var(--akzent); }
.frage summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.frage p { margin: 0 0 1.2rem; max-width: 60ch; color: var(--tinte-weich); line-height: 1.6; }

/* ---------- Kettenmaß unter "Mikas Services" ----------
    Maßlinie mit Endmarken, jeder Abschnitt trägt seinen
   Vorsatz. Auf dem Telefon senkrecht, sonst passen drei nicht in eine Zeile. */
.kette {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.2vw, 1.8rem);
  padding: 0;
  display: flex;
  max-width: 44rem;
  border-top: 1px solid var(--akzent);
  position: relative;
}
.kette li { flex: auto; position: relative; }
/* Endmarke je Abschnitt: kurzer Schrägstrich wie in der Zeichnung. */
.kette li::before, .kette li:last-child::after {
  content: ""; position: absolute; top: -.45rem; left: -1px;
  width: 1px; height: .9rem; background: var(--akzent); transform: rotate(40deg);
}
.kette li:last-child::after { left: auto; right: 0; }
.kette a {
  display: block;
  padding: .7rem .8rem 0;
  text-align: center;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  letter-spacing: -.015em;
  color: var(--tinte-weich);
  text-decoration: none;
  transition: color .2s;
}
.kette a::after { content: "Services"; color: var(--tinte-fein); font-weight: 400; opacity: 0; transition: opacity .2s; }
.kette a:hover, .kette a:focus-visible { color: var(--akzent); }
.kette a:hover::after, .kette a:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .kette { animation: ziehen 1s var(--weich) .6s backwards; transform-origin: left; }
  .kette li { animation: auf .7s var(--weich) backwards; }
  .kette li:nth-child(1) { animation-delay: 1.1s; }
  .kette li:nth-child(2) { animation-delay: 1.25s; }
  .kette li:nth-child(3) { animation-delay: 1.4s; }
}
@media (max-width: 40rem) {
  .kette { flex-direction: column; border-top: 0; border-left: 1px solid var(--akzent); max-width: none; }
  .kette li::before, .kette li:last-child::after { display: none; }
  .kette { margin-block: 1.1rem .9rem; }
  .kette a { text-align: left; padding: .12rem 0 .12rem .9rem; font-size: .95rem; }
  .kette a::after { opacity: 1; }
}
/* Auf den Leistungsseiten: der eigene Abschnitt in Messing, die Maßlinie
   darüber verstärkt. */
.kette-marke { position: absolute; top: -2px; left: 0; right: 0; height: 3px; background: var(--akzent); }
.kette a[aria-current] { color: var(--akzent); }
@media (max-width: 40rem) {
  .kette-marke { top: 0; bottom: 0; left: -2px; right: auto; width: 3px; height: auto; }
}
/* Nach einem Seitenwechsel steht die Kette schon (uebergang.js). */
.ueber .kette, .ueber .kette li { animation: none; }

/* Mikas Services mit Maßkette braucht mehr Höhe als der Name - etwas
   kleiner, damit die Knöpfe auf einem 800 Pixel hohen Schirm sichtbar bleiben. */
.buehne .riesig { font-size: clamp(3rem, 9vw, 10rem); }
.kette { max-width: 36rem; }

/* Zweiter Weg je Leistung: zur Unterseite, leiser als der Anfrageknopf. */
.leistung-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.mehr {
  font-family: var(--grotesk);
  font-size: .9rem;
  font-weight: 560;
  color: var(--tinte-weich);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .15rem;
  transition: color .2s, border-color .2s;
}
.mehr:hover { color: var(--akzent); border-color: var(--akzent); }
.mehr span { display: inline-block; transition: transform .25s var(--weich); }
.mehr:hover span { transform: translateX(4px); }

/* ---------- Leistungsseiten (bau/unterseiten.py) ----------
   Kein WebGL: die Zeichnung der Leistung von der Startseite, die sich beim
   Laden aufbaut. Text in einer Spalte, Abschnitte durch Haarlinien getrennt. */
/* Kopf wie die Bühne der Startseite: ein Bildschirm hoch, großer Titel,
   darunter die Maßkette mit dem eigenen Abschnitt markiert. */
.u-kopf {
  margin: 0 var(--rand);
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 7rem 0 clamp(2rem, 4vw, 3rem);
}
.pfad { gap: .6rem; }
.pfad a { color: var(--tinte-fein); text-decoration: none; transition: color .2s; }
.pfad a:hover { color: var(--akzent); }
.u-kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.u-kopf .riesig { font-size: clamp(2.8rem, 6.6vw, 7.5rem); }
.u-einstieg { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--tinte-weich); max-width: 40ch; margin: 0 0 2rem; }
.u-kopf .etappe-bild { max-height: 60svh; }

.u-inhalt { margin: 0 var(--rand); }
.u-abschnitt {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding: clamp(2.2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--linie);
}
.u-abschnitt h2 {
  margin: 0;
  font-family: var(--grotesk);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.u-abschnitt > :not(h2) { grid-column: 2; }
.u-abschnitt p { margin: 0 0 1rem; max-width: 62ch; font-size: 1.05rem; line-height: 1.65; color: var(--tinte-weich); }
.u-abschnitt .ablauf { margin: 0; }



.u-hinweis { margin: 0 0 1rem; padding: 1rem 0 0; border-top: 1px solid var(--linie); color: var(--tinte-weich); }
.u-hinweis a, .u-weiter a { color: var(--akzent); }

.unterseite .fragen > * { max-width: none; }
.unterseite .fragen .frage, .unterseite .fragen .gross, .unterseite .fragen .pos { max-width: 52rem; }

.u-aufruf {
  margin: 0 var(--rand);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linie);
}
.u-aufruf .gross { margin-bottom: 1rem; }
.u-aufruf > p:first-of-type { max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--tinte-weich); margin: 0 0 1.8rem; }
.u-weiter { margin: 2rem 0 0; color: var(--tinte-weich); }

/* Die Zeichnung baut sich beim Laden auf - nur mit erwünschter Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .unterseite .etappe-bild { animation: auf .9s var(--weich) .2s backwards; }
  .unterseite .bild-code rect:not(.cursor), .unterseite .schichten rect {
    transform-box: fill-box; transform-origin: left center;
    animation: zeile .5s var(--weich) backwards;
  }
  .unterseite .bild-code rect:nth-of-type(n) { animation-delay: calc(.5s + var(--n, 0) * 90ms); }
  @keyframes zeile { from { transform: scaleX(0); } }
  .unterseite .bild-cad .kanten path { stroke-dasharray: 600; animation: strich 1.6s var(--weich) .5s backwards; }
  @keyframes strich { from { stroke-dashoffset: 600; } }
  .unterseite .schichten rect { transform-origin: center; }
  .unterseite .schichten rect:nth-child(1) { animation-delay: .5s; }
  .unterseite .schichten rect:nth-child(2) { animation-delay: .62s; }
  .unterseite .schichten rect:nth-child(3) { animation-delay: .74s; }
  .unterseite .schichten rect:nth-child(4) { animation-delay: .86s; }
  .unterseite .cursor { animation: blinken 1s steps(1) infinite; }
  @keyframes blinken { 50% { opacity: 0; } }
}

@media (max-width: 52rem) {
  .u-kopf-raster { grid-template-columns: 1fr; }
  .u-kopf .etappe-bild { order: -1; max-height: 34svh; }
  .u-abschnitt { grid-template-columns: 1fr; }
  .u-abschnitt > :not(h2) { grid-column: 1; }
}
/* Auf dem Telefon bestimmt die Zeichnung ihre Höhe selbst - im festen
   Seitenverhältnis ragte das Codefenster in die Überschrift. */
@media (max-width: 52rem) {
  .u-kopf .etappe-bild { aspect-ratio: auto; max-height: none; }
  .u-kopf .etappe-bild > svg { max-height: 30svh; }
  .u-kopf .fenster svg { max-height: 22svh; }
}

/* Leistungsseiten mit 3D: die Leinwand füllt den Kopf, der Text liegt darüber.
   Der Kasten der Zeichnung bleibt stehen (unsichtbar) - an ihm richtet sich
   das Teil aus. */
.unterseite .u-kopf { position: relative; }
.unterseite .u-kopf > :not(.szene) { position: relative; z-index: 1; }
.unterseite .szene { position: absolute; inset: 0; width: auto; height: auto; z-index: 0; transition: opacity .2s linear; }
html.gl .unterseite .u-kopf .etappe-bild { display: grid; visibility: hidden; }

/* ---------- Ein Raster für Listen, Schritte und Tabelle ----------
   Auf den Leistungsseiten sahen die drei verschieden aus (gerahmt, offen,
   mit eigener Kopfzeile). Jetzt gleich: ein Rahmen, feine Linien zwischen
   den Zellen, gleiche Innenabstände, Überschrift in der Grotesk, Text in der
   Serif, und die Marke davor (Quadrat, Schrittnummer, Zeilenname) immer in
   Messing an derselben Stelle. */
.u-liste, .u-abschnitt .ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.u-liste li, .u-abschnitt .ablauf li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: .6rem;
  row-gap: .35rem;
  align-content: start;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--grund);
  border: 0;
}
/* Marke: Quadrat in der Liste, Nummer bei den Schritten. */
.u-liste li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: var(--akzent);
  align-self: center;
}
.u-abschnitt .ablauf b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--akzent);
}
.u-liste b, .u-abschnitt .ablauf strong {
  font-family: var(--grotesk);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.u-liste span, .u-abschnitt .ablauf span {
  grid-column: 1 / -1;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--tinte-weich);
}

.u-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); }
.u-tabelle { width: 100%; border-collapse: collapse; min-width: 30rem; }
.u-tabelle th, .u-tabelle td {
  padding: 1.1rem 1.2rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.u-tabelle th + th, .u-tabelle th + td, .u-tabelle td + td { border-left: 1px solid var(--linie); }
.u-tabelle tbody tr:last-child > * { border-bottom: 0; } /* nur der Rumpf - sonst verliert die Kopfzeile ihre Linie */
.u-tabelle thead th {
  font-family: var(--grotesk);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.u-tabelle tbody th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
  white-space: nowrap;
}
.u-tabelle td { font-size: .93rem; line-height: 1.55; color: var(--tinte-weich); }

@media (max-width: 40rem) {
  .u-liste, .u-abschnitt .ablauf { grid-template-columns: 1fr; }
}

/* ---------- Seitenwechsel ----------
   Die neue Seite baut sich von unten nach oben über der alten auf, wie eine
   Schicht im Drucker. Kopfzeile und Maßkette bleiben stehen, die Marke
   gleitet zum neuen Abschnitt. Ohne View Transitions ein normaler Wechsel. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.kopf { view-transition-name: kopf; }
.kette { view-transition-name: kette; }
.kette-marke { view-transition-name: kette-marke; }

::view-transition-group(*) { animation-duration: .75s; animation-timing-function: var(--weich); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: .75s var(--weich) both zuruecktreten; }
::view-transition-new(root) { animation: .75s var(--weich) both aufbauen; }
@keyframes zuruecktreten { to { opacity: .35; transform: translateY(-4svh); } }
@keyframes aufbauen { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Nachbildung für Browser ohne seitenübergreifende View Transitions
   (uebergang.js): dieselbe Aufbaulinie, als Schnitt über jedem Teil der
   Seite, gerechnet in Fensterkoordinaten (--oben = Oberkante im Fenster). */
@property --wisch { syntax: "<length>"; inherits: true; initial-value: 0px; }
.wisch-warten body > * { visibility: hidden; }
.wisch-warten .kopf, .wisch-warten .kette { visibility: visible; }
.wisch { animation: wischen .75s var(--weich) both; }
@keyframes wischen { from { --wisch: 100vh; } to { --wisch: 0px; } }
.wisch .wisch-teil { clip-path: inset(max(0px, calc(var(--wisch) - var(--oben, 0px))) 0 0 0); }

/* ---------- Preisschätzung im Formular (schaetzung.js) ----------
   Nur beim Thema 3D-Druck sichtbar, aufgeklappt erst mit dem Haken. Die
   Wahlkacheln sind dieselben wie beim Thema. */
.schaetzung { display: none; margin-top: .7rem; }
#kontaktformular:has(#thema input[value="druck"]:checked) .schaetzung { display: block; }

.schalter-zeile { position: relative; display: block; cursor: pointer; }
.schalter-zeile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.schalter-zeile span {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .15rem .75rem;
  align-items: center;
  padding: .75rem .8rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  font-size: .88rem;
  color: var(--tinte-weich);
  transition: border-color .15s, background .15s;
}
/* Kästchen: angehakt gefüllt, mit einem Rand in Grundfarbe - kein Häkchenbild nötig. */
.schalter-zeile span::before {
  content: "";
  grid-row: 1 / 3;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--tinte-fein);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.schalter-zeile b { font-family: var(--grotesk); font-weight: 600; font-size: .95rem; color: var(--tinte); }
.schalter-zeile:hover span { border-color: var(--tinte-fein); }
.schalter-zeile input:checked + span { border-color: var(--akzent); background: var(--akzent-hg); }
.schalter-zeile input:checked + span::before { border-color: var(--akzent); background: var(--akzent); box-shadow: inset 0 0 0 3px var(--grund); }
.schalter-zeile input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

.schaetzung-inhalt { display: none; gap: .8rem; padding-top: .8rem; }
.schaetzung:has(#schaetzungAn:checked) .schaetzung-inhalt { display: grid; }

.datei { position: relative; display: block; cursor: pointer; }
.datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.datei span {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1rem;
  border: 1px dashed var(--tinte-fein);
  background: var(--grund);
  text-align: center;
  font-size: .85rem;
  color: var(--tinte-fein);
  transition: border-color .15s;
}
.datei b { font-family: var(--grotesk); font-weight: 600; font-size: .95rem; color: var(--tinte); word-break: break-all; }
.datei:hover span, .datei input:focus-visible + span { border-color: var(--akzent); }
.schaetzung[data-stand="bereit"] .datei span { border-style: solid; border-color: var(--akzent); }
.schaetzung[data-stand="liest"] .datei b::after { content: " wird gelesen …"; font-weight: 400; color: var(--tinte-fein); }

.modell-daten { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; font-size: .9rem; }
.modell-daten dt { align-self: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-fein); }
.modell-daten dd { margin: 0; color: var(--tinte); font-variant-numeric: tabular-nums; }
.modell-daten .warnung { grid-column: 1 / -1; color: var(--warn); }

.schaetzung-auswahl { display: grid; gap: .8rem; }
.themen.wahl { margin: 0; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
.schaetzung:has(input[value="sla"]:checked) .nur-fdm,
.schaetzung:not(:has(input[value="sla"]:checked)) .nur-sla { display: none; }
.stueckzahl input { font-family: var(--grotesk); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Nebeneinander strecken sich alle drei auf dieselbe Höhe - die Stückzahl
   füllt sie, statt als niedrigeres Feld unten zu sitzen. */
@container (min-width: 36rem) {
  .schaetzung-auswahl { grid-template-columns: 1fr 1.6fr 8.5rem; }
}

/* Stückzahl mit eigenen Knöpfen statt der Pfeile des Browsers, die in jedem
   anders aussehen. Plus und Minus als Striche wie bei den Fragen. */
.zaehler {
  flex: 1;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
  min-height: 3.3rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  transition: border-color .15s, box-shadow .2s;
}
.zaehler:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hg); }
.zaehler input {
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.zaehler input:focus { box-shadow: none; }
.zaehler input::-webkit-inner-spin-button, .zaehler input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler-knopf {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinte-weich);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.zaehler-knopf:first-child { border-right: 1px solid var(--linie); }
.zaehler-knopf:last-child { border-left: 1px solid var(--linie); }
.zaehler-knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .75rem;
  height: .75rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.zaehler-knopf[data-schritt="1"]::before {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.zaehler-knopf:hover:not(:disabled) { color: var(--akzent); background: var(--akzent-hg); }
.zaehler-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.zaehler-knopf:disabled { color: var(--linie); cursor: default; }

.preis { display: none; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.schaetzung[data-stand="bereit"] .preis { display: grid; }
.preis p { margin: 0; }
.preis-zeile { display: grid; gap: .15rem; }
.preis-zeile span { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-fein); }
.preis-zeile strong {
  font-family: var(--grotesk);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  transition: opacity .2s;
}
.preis-zeile + .preis-zeile strong { color: var(--akzent); }
.preis[data-stand="rechnet"] strong { opacity: .4; }
.preis[data-stand="rechnet"] strong:empty::before { content: "…"; }
.preis-detail, .preis-hinweis, .preis-klein { grid-column: 1 / -1; }
.preis-detail { font-size: .86rem; color: var(--tinte-weich); }
.preis-hinweis { display: none; font-size: .9rem; color: var(--tinte); }
.preis[data-stand="gross"] .nur-gross, .preis[data-stand="fehler"] .nur-fehler { display: block; }
.preis[data-stand="gross"] :is(.preis-zeile, .preis-detail),
.preis[data-stand="fehler"] :is(.preis-zeile, .preis-detail) { display: none; }
.preis .preis-klein { margin-top: .3rem; font-size: .75rem; line-height: 1.5; color: var(--tinte-fein); }
.klein-schalter { display: flex; align-items: center; gap: .5rem; width: max-content; font-size: .85rem; color: var(--tinte-weich); cursor: pointer; }
.klein-schalter[hidden] { display: none; }
.klein-schalter input { width: auto; margin: 0; padding: 0; accent-color: var(--akzent); cursor: pointer; }