/* Startseiten-Entwurf N "Bühne" (Runde 6, auf Grundlage von I) – nur Hellmodus, keine externen Ressourcen */
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schriften/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --papier: #F4F1EA;
  --grau: #E3E0DA;
  --sand: #EFE9DF;
  --weiss: #FFFFFF;
  --kalk: #FAF8F4;      /* aus J: Kalkweiß */
  --kalk-sand: #EFEDE7; /* aus J: helles Grau-Weiß */
  --beton: #DEDCD6;     /* aus J: Betongrau */
  --stahl: #333F48;     /* aus J: Stahlblau-Grau (nur Fußband) */
  --gruen: #107058;
  --gruen-tief: #0F5F4B;
  --tinte: #1F2B26;
  --gedaempft: #4A5650;
  --linie: #BDB8AD;
  --text-2: #3F4A45;        /* Nebentext dunkel */
  --linie-dunkel: #6F6C65;  /* kräftige Listen- und Tabellenlinie */
  --linie-hell: #C9C5BC;    /* feine Rahmenlinie auf hellem Grund */
  --linie-karte: #B7B4AC;   /* Rahmen von Karten und Formular */
  --feld-rand: #77736A;     /* Rahmen der Formularfelder */
  --fehler: #A8321E;        /* Formular-Fehler (immer mit Text) */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --rand: 20px;
  --kopf-h: 96px;       /* wird vom Skript an die echte Kopfhöhe angepasst */
}
@media (min-width: 700px) { :root { --rand: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 460; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--gruen); }
ul, ol { padding: 0; list-style: none; }
a { color: var(--gruen); text-underline-offset: .18em; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--rand); }
.symbole { position: absolute; }
.sym { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 2px; }
.en-band :focus-visible { outline-color: var(--tinte); }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gruen); color: var(--weiss); padding: 12px 16px; border-radius: 4px; }
.sprung:focus { top: 8px; }
main:focus { outline: none; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid var(--gruen); transition: background .2s, color .2s; }
.knopf-voll { background: var(--gruen); color: var(--weiss); }
.knopf-voll:hover { background: var(--gruen-tief); }
.knopf-rand { color: var(--gruen); background: transparent; }
.knopf-rand:hover { background: var(--gruen); color: var(--weiss); }
.knopf-klein { min-height: 44px; padding: 8px 16px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Kopf + Maßband ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }   /* keine Übergänge an Höhe/Breite: die würden die ganze Seite bei jedem Bild neu umbrechen (Ruckeln) */
.logo { display: block; width: 160px; flex: none; }
.logo img { width: 100%; height: auto; display: block; }
.kopf.klein .logo { width: 132px; }   /* bleibt als Tippfläche über 44 px hoch */
.kopf.klein .kopf-innen { padding-block: 6px; }
@media (min-width: 900px) {
  .logo { width: 244px; }
  .kopf.klein .logo { width: 190px; }
  .kopf-innen { padding-block: 14px; }
}
.menue-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px; background: transparent; color: var(--tinte); border: 1.5px solid var(--linie); border-radius: 999px; font: 600 .9375rem var(--sans); cursor: pointer; }
.menue-knopf .sym-zu { display: none; }
.menue-liste { display: flex; gap: 4px; }
.menue-liste a { display: block; padding: 12px 14px; color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: 4px; }
.menue-liste a:hover { color: var(--gruen); }
.menue-fuss { display: none; }
.kopf-tel { display: none; }

@media (min-width: 900px) {
  .menue-knopf { display: none; }
  .menue { margin-left: auto; }
  .kopf-tel { display: inline-flex; }
}
@media (max-width: 899.98px) {
  .menue { display: none; }
  /* Das Menü liegt im Kopf: z-index 1, Logo und Schließen-Knopf darüber (2) – sonst verdeckt die Menüfläche den Knopf */
  html.menue-offen .menue {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 1; background: var(--papier); padding: calc(var(--kopf-h) + 24px) var(--rand) 32px; overflow-y: auto; overscroll-behavior: contain;
  }
  html.menue-offen .kopf { z-index: 70; }
  html.menue-offen .logo, html.menue-offen .menue-knopf { position: relative; z-index: 2; }
  html.menue-offen .band { visibility: hidden; }
  html.menue-offen .menue-knopf .sym-auf { display: none; }
  html.menue-offen .menue-knopf .sym-zu { display: block; }
  .menue-liste { flex-direction: column; gap: 0; }
  .menue-liste li { border-bottom: 1px solid var(--linie); }
  .menue-liste a { font: 460 2rem/1.1 var(--serif); padding: 20px 0; letter-spacing: -.02em; }
  .menue-fuss { display: grid; gap: 16px; margin-top: 32px; color: var(--gedaempft); }
  .menue-fuss p { margin: 0; }
}

/* Das Maßband: Ticks (mm/cm), Füllung = Scroll-Weg, Dreieck wie im Logo */
.band { border-top: 1px solid var(--linie); background: var(--sand); }
.band-innen { position: relative; height: 28px; --f: 0; contain: layout paint; }
.band-innen::before { /* Teilstriche */
  content: ""; position: absolute; inset: auto var(--rand) 0 var(--rand); height: 14px;
  background:
    repeating-linear-gradient(90deg, #6d746f 0 1px, transparent 1px 50px) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, #8a908b 0 1px, transparent 1px 10px) bottom / 100% 7px no-repeat;
}
.band-innen::after { /* gefüllter Teil */
  content: ""; position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 3px; background: var(--gruen);
  transform-origin: left; transform: scaleX(var(--f));
}
.band-ort { position: absolute; left: var(--rand); top: 3px; margin-left: -6px; padding: 0 6px 3px; background: var(--sand); font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); }   /* eigener Hintergrund: Schrift liegt nicht mehr auf den Teilstrichen */
.band-zeiger { position: absolute; bottom: 3px; left: calc(var(--rand) + (100% - 2 * var(--rand)) * var(--f)); width: 0; height: 0; margin-left: -6px; border-inline: 6px solid transparent; border-top: 9px solid var(--gruen); z-index: 1; }
@media (min-width: 900px) { .band-ort { font-size: .8125rem; } }

/* ---------- Maßkette (wiederverwendbar): ◄── Text ──► ---------- */
.mk { --mc: var(--gruen); display: flex; align-items: center; gap: 6px; color: var(--mc); font: 500 .75rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mk i { position: relative; width: 0; height: 0; flex: none; border-block: 5px solid transparent; border-right: 9px solid var(--mc); }
.mk i:last-child { border-right: 0; border-left: 9px solid var(--mc); }
.mk i::after { content: ""; position: absolute; top: -9px; left: -2px; width: 1.5px; height: 18px; background: var(--mc); }
.mk i:last-child::after { left: auto; right: -2px; }
.mk b { flex: 1; height: 1.5px; background: var(--mc); min-width: 8px; }
.mk span { white-space: nowrap; padding-inline: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-v { flex-direction: column; }
.mk-v i { transform: rotate(90deg); }
.mk-v b { width: 1.5px; height: auto; min-height: 8px; min-width: 0; }
.mk-v span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(64px, 9vw, 120px); }
.flaeche-grau { background: var(--grau); }
.flaeche-sand { background: var(--kalk-sand); }
.flaeche-kalk { background: var(--kalk); --pkt-grund: var(--kalk); }
.nummer { font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.nummer::after { content: ""; height: 1.5px; width: 56px; background: var(--gruen); }
.kopfzeile { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.kopfzeile h2, .ueber-kopf h2, .en-kopf h2, .kontakt-text h2 { font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem); }
.kopf-text { color: var(--gedaempft); max-width: 40em; }
@media (min-width: 1000px) {
  .kopfzeile { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .kopfzeile .nummer { grid-column: 1 / -1; margin-bottom: 0; }
  .kopfzeile h2 { grid-column: 1 / span 7; }
  .kopfzeile .kopf-text { grid-column: 9 / span 4; padding-bottom: 6px; }
}

/* ---------- 01 Start ---------- */
.hero { padding-top: 28px; padding-bottom: clamp(48px, 6vw, 80px); background: linear-gradient(var(--papier), var(--papier)); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }   /* Spalte darf nie breiter als der Bildschirm werden */
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 5.6vw, 5.25rem); font-weight: 440; letter-spacing: -.03em; line-height: 1.02; }
.einleitung { margin-top: 24px; font-size: 1.1875rem; color: var(--gedaempft); max-width: 34em; }
.hero .knopfreihe { margin-top: 28px; }
@media (min-width: 1000px) {
  .hero { padding-top: 48px; }
  .hero-raster { grid-template-columns: minmax(0, 1fr) 500px; gap: 56px; align-items: center; }
}

/* Foto mit Maßketten, Passkreuzen und Stempel */
.foto { width: min(100%, 440px); justify-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 6px; }
@media (min-width: 1000px) { .foto { width: 500px; justify-self: end; } }
.foto-mitte { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 10px; }
.foto-rahmen { position: relative; }
.foto-rahmen > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.mk-o { padding-right: 32px; }
@media (max-width: 420px) { .mk-o { padding-right: 32px; } .mk-o span { white-space: normal; text-align: center; line-height: 1.25; font-size: .6875rem; letter-spacing: .02em; } .mk-o b { min-width: 4px; } }
.eck { position: absolute; width: 18px; height: 18px; border: 0 solid var(--weiss); filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.eck-lo { left: 10px; top: 10px; border-width: 2px 0 0 2px; }
.eck-ro { right: 10px; top: 10px; border-width: 2px 2px 0 0; }
.eck-lu { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; }
.eck-ru { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
.stempel { position: absolute; left: -22px; bottom: -22px; width: 112px; height: 112px; filter: drop-shadow(0 4px 10px rgba(31,43,38,.22)); }
@media (min-width: 1000px) { .stempel { left: -48px; bottom: -28px; width: 132px; height: 132px; } }
.stempel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.st-scheibe { fill: var(--papier); }
.st-ring { fill: none; stroke: var(--gruen); stroke-width: .9; }
.st-text { font: 600 10.4px var(--sans); fill: var(--tinte); }
.st-dreieck { fill: var(--gruen); }
.st-dreh { transform-origin: 70px 70px; animation: drehen 42s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Kinetische Typografie: Wörter ziehen sich auf Maß zusammen und rasten ein.
   Nur über transform (nicht letter-spacing): so ändert sich kein Zeilenumbruch und der Text darunter springt nicht. */
html.bewegt .hero h1 .w { display: inline-block; transform-origin: left center; animation: rast .9s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes rast {
  0%   { opacity: 0; transform: translateX(-.3em) scaleX(1.14); }
  55%  { opacity: 1; }
  78%  { transform: translateX(.02em) scaleX(.985); }
  100% { opacity: 1; transform: none; }
}

/* Kennzahlen wie am Messschieber */
.schieber { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--linie); }
.sch { display: flex; flex-direction: column; gap: 6px; }
.sch-wert { font: 440 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sch dt { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); }
.sch-leiste { display: flex; align-items: center; margin: 8px 0 0; transform-origin: left; --mc: var(--gruen); }
.sch-leiste i { position: relative; width: 0; height: 0; flex: none; border-block: 5px solid transparent; border-right: 9px solid var(--mc); }
.sch-leiste i:last-child { border-right: 0; border-left: 9px solid var(--mc); }
.sch-leiste b { flex: 1; height: 1.5px; background: var(--mc); }
html.bewegt .sch-leiste { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .2s; }
html.bewegt .schieber.da .sch-leiste { transform: none; }
@media (min-width: 800px) { .schieber { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---------- 02 Leistungen: Bühne (Foto groß, Namen als Liste) ---------- */
.register { display: grid; gap: 8px; }
.reg-eintrag { background: var(--papier); border-radius: 4px; overflow: hidden; }
.reg-titel { font: inherit; letter-spacing: 0; }
.reg-knopf { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 68px; padding: 12px 16px; border: 0; background: transparent; color: var(--tinte); font: 460 1.4rem/1.15 var(--serif); letter-spacing: -.015em; text-align: left; cursor: pointer; transition: background-color .25s ease, color .25s ease, padding .3s ease; }
.reg-nr { flex: none; width: 2.2em; font: 500 .8125rem/1 var(--mono); letter-spacing: .06em; color: var(--gedaempft); transition: color .25s; }
.reg-name { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.reg-knopf::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.reg-knopf[aria-expanded="true"] { background: var(--gruen-tief); color: var(--papier); }
.reg-knopf[aria-expanded="true"] .reg-nr { color: #CFE8DF; }
.reg-knopf[aria-expanded="true"]::after { width: 11px; height: 11px; margin-right: 4px; background: none; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }   /* 06.11.2026: offen = Pfeil „weiter“ (2. Tipp öffnet die Seite) statt Minus */
.reg-knopf:hover { background: #E9F0EC; }
.reg-knopf[aria-expanded="true"]:hover { background: var(--gruen-tief); }
.reg-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: -3px; border-radius: 4px; }
.reg-knopf[aria-expanded="true"]:focus-visible { outline-color: var(--weiss); }

.reg-panel { padding: 14px 14px 22px; background: var(--papier); display: flex; flex-direction: column; gap: 14px; }
.reg-panel .mk { --mc: var(--gruen); }
.reg-bild { position: relative; margin: 0; }
.reg-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 2px; }
.reg-bild .eck { z-index: 1; }
.reg-bild-gruen { aspect-ratio: 4 / 3; background: var(--gruen-tief); color: var(--papier); border-radius: 2px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: clamp(20px, 6vw, 48px); }
.reg-bild-gruen p { font: 440 clamp(2rem, 1.2rem + 4vw, 3.5rem)/1.05 var(--serif); letter-spacing: -.02em; max-width: 9em; }
.reg-bild-gruen :focus-visible { outline-color: var(--weiss); }
.reg-text { display: grid; gap: 14px; padding-inline: 4px; }
.reg-kurz { font: 400 1.375rem/1.3 var(--serif); letter-spacing: -.01em; max-width: 26em; }
.reg-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; justify-self: start; }

/* Werkstoffe: eine gemeinsame Zeile für alle Gebiete */
.werkstoffe { display: grid; gap: 16px 40px; margin-top: 28px; padding-top: 22px; border-top: 1.5px solid var(--linie); }
.werkstoffe dt { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-tief); margin-bottom: 8px; }
.werkstoffe dd { margin: 0; color: var(--tinte); max-width: 34em; }
@media (min-width: 700px) { .werkstoffe { grid-template-columns: 1fr 1.4fr; } }

/* ohne Skript: alles untereinander sichtbar */
html:not(.js) .reg-knopf { cursor: default; }
html:not(.js) .reg-knopf::after { display: none; }

/* mit Skript am Handy: Akkordeon */
@media (max-width: 899.98px) {
  html.js .reg-eintrag:not(.aktiv) .reg-panel { display: none; }
}

/* mit Skript am PC: Bühne links (55 %, ab 1200 px 62,5 %), Liste rechts; das neue Foto gleitet weich über das alte (300 ms) */
@media (min-width: 900px) {
  html.js .register { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: repeat(6, minmax(72px, 1fr)); column-gap: clamp(28px, 3.2vw, 44px); row-gap: 0; }
  html.js .reg-eintrag { display: contents; }
  html.js .reg-titel { grid-column: 2; display: flex; }
  html.js .reg-eintrag:nth-child(1) .reg-titel { grid-row: 1; }
  html.js .reg-eintrag:nth-child(2) .reg-titel { grid-row: 2; }
  html.js .reg-eintrag:nth-child(3) .reg-titel { grid-row: 3; }
  html.js .reg-eintrag:nth-child(4) .reg-titel { grid-row: 4; }
  html.js .reg-eintrag:nth-child(5) .reg-titel { grid-row: 5; }
  html.js .reg-eintrag:nth-child(6) .reg-titel { grid-row: 6; }
  /* Schriftgröße wächst mit der Spalte, damit „Sonderkonstruktionen“ nie dreizeilig wird */
  html.js .reg-knopf { min-height: 0; height: 100%; padding: 10px 18px; gap: 14px; font-size: clamp(1.25rem, .2rem + 1.7vw, 1.9rem); border-bottom: 1.5px solid var(--linie); border-radius: 0; }
  html.js .reg-nr { width: 2.2em; }
  html.js .reg-knopf::after { width: 14px; height: 14px; background: none; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: 0; transform: translateX(-8px) rotate(45deg); transition: opacity .25s, transform .3s; }
  html.js .reg-knopf[aria-expanded="true"]::after { opacity: 1; background: none; transform: translateX(0) rotate(45deg); }
  html.js .reg-knopf:hover { background: rgba(255,255,255,.55); }
  html.js .reg-knopf[aria-expanded="true"] { border-radius: 4px; border-bottom-color: transparent; }
  html.js .reg-knopf[aria-expanded="true"]:hover { background: var(--gruen-tief); }
  /* alle acht Bühnen liegen übereinander; die aktive gleitet nach oben ein, die alte bleibt 300 ms darunter stehen */
  html.js .reg-panel { grid-column: 1; grid-row: 1 / -1; align-self: stretch; padding: 0; gap: 0; border-radius: 4px; overflow: hidden;
    opacity: 0; visibility: hidden; z-index: 0; transform: translateY(10px); transition: opacity 0s linear .3s, visibility 0s linear .3s, transform 0s linear .3s; }
  html.js .reg-eintrag.aktiv .reg-panel { opacity: 1; visibility: visible; z-index: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
  html.js .reg-panel .mk { padding: 14px 18px 12px; }
  html.js .reg-bild img, html.js .reg-bild-gruen { aspect-ratio: 6 / 5; border-radius: 0; }
  html.js .reg-text { padding: 20px 20px 26px; gap: 12px; }
  html.js .reg-kurz { font-size: clamp(1.375rem, .9rem + .7vw, 1.75rem); }
}
@media (min-width: 1200px) {
  html.js .register { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
}
@media (min-width: 900px) {
  html:not(.js) .register { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- Band „Für Industrie und Gewerbe“ (29.10.) – schmal, Betongrau wie EN 1090, verweist auf ../industrie/ ---------- */
.ind-band { background: var(--beton); border-block: 1px solid #C4C0B6; padding-block: 26px; }
.ind-band-innen { display: grid; gap: 18px; align-items: center; }
.ind-band .mk { --mc: var(--gruen-tief); width: min(100%, 260px); }
.ind-band-text { color: var(--text-2); max-width: 44em; line-height: 1.5; }
.ind-band-text strong { color: var(--tinte); font-weight: 600; }
.ind-band .knopf { justify-self: start; }
@media (min-width: 900px) {
  .ind-band-innen { grid-template-columns: 260px minmax(0, 1fr) auto; gap: 32px; }
  .ind-band .knopf { justify-self: end; }
}
/* Fünf Menüpunkte: zwischen 900 und 1100 px Logo, Menü und Telefon-Knopf enger, damit nichts umbricht */
.menue-liste a, .kopf-tel { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1099.98px) {
  .logo { width: 184px; }
  .kopf.klein .logo { width: 160px; }
  .menue-liste a { padding: 12px 8px; font-size: .9375rem; }
  .kopf-tel { padding: 8px 14px; font-size: .9375rem; }
}

/* 29.10. Menü Variante A: klein „LEISTUNGEN“ mit grünem Strich, darunter Baugewerbe · Industrie – immer sichtbar */
.menue-gruppe-titel { display: block; font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.menue-gruppe ul { display: flex; }
@media (min-width: 900px) {
  /* Über uns, EN 1090, Kontakt stehen unten auf einer Linie mit Baugewerbe · Industrie */
  .menue-liste { align-items: flex-end; }
  .menue-gruppe { display: flex; flex-direction: column; margin-right: 6px; }
  .menue-gruppe-titel { margin: 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid var(--gruen); }
  .menue-liste a { padding-block: 6px 4px; }
}
@media (max-width: 899.98px) {
  .menue-liste li.menue-gruppe { border-bottom: 0; }
  .menue-gruppe-titel { padding: 8px 0 4px; }
  .menue-gruppe ul { flex-direction: column; }
}

/* ---------- 03 Ablauf: ein Bild, das mitwächst ---------- */
/* 29.10. Gewählter Vorschlag 1 „Ein großes Bild, das mitwächst“: EINE isometrische Werkstattzeichnung (gleiche Achsen, Grautöne
   und 1-px-Kanten wie 05 EN 1090) – eine Balkonkante, auf der ein Stab-Geländer entsteht. PC: Bild links, klebt beim Scrollen
   mittig im freien Fensterbereich unter dem Kopf (seite.js setzt den Abstand „top“), die sechs Schritte rechts an der senkrechten
   Linie. Handy: Bild klebt oben unter dem Kopf, die Schritte laufen darunter durch.
   Der grüne Punkt bestimmt den Zustand: seite.js setzt data-schritt="1…6" am <figure>.
   1 Foto der Stelle (Sucher-Ecken) mit Handskizze, „?“ und „!“ · 2 Stelle mit groben Maßlinien („…“, keine Zahlen) und
   Pfostenmarken · 3 Angebotsblatt mit Positionen · 4 Aufmaß: erst die Maße „…“, dann zeichnet sich die Konstruktion als Linien ·
   5 Werkstatt: Feld liegt flach auf dem Schweißtisch (Lochraster), Rohstahl, Brenner heftet drei Punkte (warm NUR hier, 10 s,
   einmal), dann Zinkgrau · 6 Feld steht montiert auf der Kante, Anker gesetzt.
   Grundzustand aller Regeln = Schritt 6 (montiert, keine Bewegung) – so sieht es ohne JS und bei reduzierter Bewegung aus;
   die Zustände 1–5 gelten nur unter html.bewegt. Der Brenner nutzt Klassen (en-duese …) und Verläufe (#en-zyl, #en-schlauch) aus 05. */
.ablauf { display: grid; gap: 28px; }
.ab-szene { margin: 0; position: sticky; top: var(--kopf-h); z-index: 4; background: var(--kalk); padding: 4px 0 10px; border-bottom: 1px solid var(--linie); }
.ab-bild { display: block; width: 80%; height: auto; max-height: 36vh; margin-inline: auto; }
.ab-schritte { position: relative; }
.schritte { position: relative; padding-left: 52px; display: grid; gap: 0; }
.schritt { position: relative; padding: 0 0 38px; }
.schritt:last-child { padding-bottom: 0; }
.pkt { position: absolute; left: -52px; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gedaempft); background: var(--pkt-grund, var(--papier)); z-index: 2; transition: background-color .35s, border-color .35s; }
.schritt.fertig .pkt, html:not(.js) .pkt { background: var(--gruen); border-color: var(--gruen); }
.schritt-nr { display: block; font: 300 3.25rem/1 var(--serif); letter-spacing: -.03em; color: var(--gruen); margin-bottom: 10px; transition: color .35s; }
html.bewegt .schritt:not(.fertig) .schritt-nr { color: #8A857C; }   /* kommende Schritte: Nummer zurückgenommen (Großschrift, ≥ 3:1) */
.schritt h3 { font-size: 1.625rem; transition: color .35s; }
.schritt.aktiv h3 { color: var(--gruen-tief); }
.schritt p { margin-top: 8px; color: var(--gedaempft); max-width: 30em; }
.strecke { display: none; position: absolute; z-index: 1; background: var(--linie); border-radius: 2px; width: 3px; }
html.js .strecke { display: block; }
.fuell { position: absolute; left: 0; top: 0; width: 3px; background: var(--gruen); border-radius: 2px; }
.laeufer { position: absolute; z-index: 3; left: 1.5px; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 5px rgba(16,112,88,.22), 0 0 0 2px var(--pkt-grund, var(--papier)); }
@media (min-width: 700px) {
  .schritte { padding-left: 64px; }
  .pkt { left: -64px; }
}
@media (min-width: 1000px) {
  .ablauf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
  /* „top“ setzt seite.js so, dass das Bild mittig im Bereich unter dem Kopf steht; Anfang und Ende begrenzt die Spalte (sticky) */
  .ab-szene { top: calc(var(--kopf-h) + 24px); padding: 0; border: 0; background: transparent; }
  .ab-bild { width: 82%; max-height: calc(100vh - var(--kopf-h) - 48px); }
  .schritt { padding-bottom: 64px; }
}

/* Die Zeichnung – Farben wie die Bleche in 05 (Oberseite hell, Vorderseite mittel, Stirn dunkel), Kanten 1 px */
.ab-stelle rect, .ab-tisch rect, .ab-liegend rect { stroke: #57544D; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Stehendes Geländer OHNE non-scaling-stroke: Chrome ignoriert sonst pathLength (die Linie ließe sich nicht „einrollen“).
   Die Ebenen sind etwa 2,1-fach vergrößert, darum Strichstärke .5 (≈ 1 px; an den Stirnseiten etwas feiner). */
.ab-gelaender rect { stroke: #57544D; stroke-width: .5; stroke-linejoin: round; }
.ab-oben { fill: #EDEBE5; }
.ab-vorn { fill: #B4B1A9; }
.ab-stirn { fill: #8F8C84; }
.ab-schatten rect { fill: #D6D3CB; }
/* Schweißtisch: etwas dunkler als die Platte, Lochraster als dunkle Punkte */
.ab-t-oben { fill: #DCD9D2; }
.ab-t-vorn { fill: #A5A29A; }
.ab-t-stirn { fill: #827F78; }
.ab-loch circle { fill: #8A8780; opacity: .6; }
/* Geländer verzinkt (Grundzustand): mattes, kühles Zinkgrau */
.ab-g-oben { fill: #DADCDC; }
.ab-g-vorn, .ab-g-stab { fill: #B9BDC0; }
.ab-g-stirn { fill: #9EA3A7; }
.ab-bolzen circle { fill: #4A5056; }
/* Zeichnungstinte: Sucher-Ecken, Maßlinien, Hilfslinien, „…“ */
.ab-sucher path, .ab-mass, .ab-hilfs { fill: none; stroke: #3A433E; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ab-sucher path { stroke-width: 1.5; }
.ab-mass { stroke-width: 1.1; }
.ab-hilfs { stroke-width: .8; opacity: .8; }
.ab-pfeil path { fill: #3A433E; }
.ab-bild text { font: 500 24px var(--mono); fill: #3A433E; }   /* nur „…“ */
/* Handskizze und „?“ / „!“: Bleistiftgrau, leicht wacklig */
.ab-skizze path { fill: none; stroke: #6E6A62; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ab-zeichen path { stroke-width: 2.2; }
.ab-zeichen circle { fill: #6E6A62; }
/* Pfostenmarken auf der Platte: dezent Firmengrün */
.ab-marke path { fill: none; stroke: var(--gruen); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* Angebotsblatt */
.ab-blatt-schatten { fill: #D9D6CE; }
.ab-papier { fill: #FFFFFF; stroke: #BDB8AD; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ab-blatt path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ab-blatt-kopf { stroke: var(--gruen); stroke-width: 2.4; }
.ab-pos { stroke: #4A5650; stroke-width: 2; }
.ab-zeile { stroke: #C9C4BA; stroke-width: 2; }
.ab-strich { stroke: #8F8C84; stroke-width: 1; }
.ab-summe { stroke: #1F2B26; stroke-width: 2.4; }
/* Lichtbogen und Heftpunkte */
.ab-kern { fill: #FFF7E8; }
.ab-funke { fill: #FFC585; opacity: 0; }
.ab-schein { opacity: .3; }
.ab-kern, .ab-hof { transform-box: fill-box; transform-origin: center; }
.ab-punkt { fill: #A6ABAF; }

/* Grundzustand (ohne JS, reduzierte Bewegung, Schritt 6): montiert, Linien ganz, Flächen voll, Werkstatt weg, nichts Warmes */
.ab-sucher, .ab-skizze, .ab-ort, .ab-blatt, .ab-plan-masse, .ab-werkstatt, .ab-brenner, .ab-bogen, .ab-punkte { opacity: 0; }
.ab-gelaender rect { stroke-dasharray: 1 1; stroke-dashoffset: 0; }   /* pathLength="1": Linie „zeichnet sich“ über den Versatz */

/* Übergänge nur mit Bewegung */
html.bewegt .ab-stelle, html.bewegt .ab-sucher, html.bewegt .ab-skizze, html.bewegt .ab-ort, html.bewegt .ab-plan-masse,
html.bewegt .ab-schatten, html.bewegt .ab-bolzen, html.bewegt .ab-gelaender { transition: opacity .7s ease; }
html.bewegt .ab-werkstatt { transition: opacity .8s ease; }
html.bewegt .ab-blatt { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.bewegt .ab-gelaender rect { transition: stroke-dashoffset .9s ease, fill-opacity .9s ease; }
html.bewegt .ab-werkstueck { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }

/* 1 Anfrage: Foto der Stelle (Sucher-Ecken) mit Handskizze, „?“ und „!“, Platte blass */
html.bewegt .ab-szene[data-schritt="1"] .ab-stelle { opacity: .45; }
html.bewegt .ab-szene[data-schritt="1"] .ab-sucher, html.bewegt .ab-szene[data-schritt="1"] .ab-skizze { opacity: 1; }
/* 2 Termin vor Ort: Platte voll, grobe Maße („…“) und Pfostenmarken */
html.bewegt .ab-szene[data-schritt="2"] .ab-ort { opacity: 1; }
/* 3 Angebot: Blatt mit Positionen steht vor der Stelle */
html.bewegt .ab-szene[data-schritt="3"] .ab-stelle { opacity: .5; }
html.bewegt .ab-szene:not([data-schritt="3"]) .ab-blatt { transform: translateY(10px); }
html.bewegt .ab-szene[data-schritt="3"] .ab-blatt { opacity: 1; transform: none; }
/* 4 Planung: Aufmaß – zuerst die Maße, dann zeichnet sich die Konstruktion (nur Linien) in der Reihenfolge
   Pfosten, Platten, Handlauf, Untergurt, Stäbe von links nach rechts */
html.bewegt .ab-szene[data-schritt="4"] .ab-stelle { opacity: .5; }
html.bewegt .ab-szene[data-schritt="4"] .ab-plan-masse { opacity: 1; }
html.bewegt .ab-szene[data-schritt="4"] .ab-pfosten rect { transition-delay: .7s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-platten rect { transition-delay: .9s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-handlauf rect { transition-delay: 1.05s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-untergurt rect { transition-delay: 1.2s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect { transition-delay: 1.35s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(2) { transition-delay: 1.41s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(3) { transition-delay: 1.47s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(4) { transition-delay: 1.53s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(5) { transition-delay: 1.59s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(6) { transition-delay: 1.65s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(7) { transition-delay: 1.71s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(8) { transition-delay: 1.77s; }
html.bewegt .ab-szene[data-schritt="4"] .ab-staebe rect:nth-child(9) { transition-delay: 1.83s; }
/* Stehendes Geländer: bis Schritt 3 nicht da (Linie eingerollt, Flächen leer), 4 gezeichnet, 5 ausgeblendet (liegt in der Werkstatt),
   6 wieder da und gefüllt */
html.bewegt .ab-szene:is([data-schritt="1"], [data-schritt="2"], [data-schritt="3"]) .ab-gelaender rect { stroke-dashoffset: 1; fill-opacity: 0; }
html.bewegt .ab-szene:is([data-schritt="4"], [data-schritt="5"]) .ab-gelaender rect { fill-opacity: 0; }
html.bewegt .ab-szene[data-schritt="5"] .ab-gelaender { opacity: 0; }
html.bewegt .ab-szene:not([data-schritt="6"]) .ab-bolzen { opacity: 0; }
html.bewegt .ab-szene:not([data-schritt="6"]) .ab-schatten { opacity: 0; }
/* 5 Fertigung: Werkstatt (Platte weg, Schweißtisch mit liegendem Feld), Rohstahl, drei Heftpunkte mit Lichtbogen, dann Zink.
   Zeitplan (10 s = 100 %): 0–8 % Brenner schwebt · 8–14 % senkt sich · 14–22 % heftet 1 · 30–38 % heftet 2 · 48–56 % heftet 3 ·
   56–66 % hebt ab und verlässt das Bild · 74–90 % Rohstahl wird Zinkgrau. Beim Wechsel zu 6 setzt sich das Feld auf die Platte. */
html.bewegt .ab-szene[data-schritt="5"] .ab-stelle { opacity: 0; }
html.bewegt .ab-szene[data-schritt="5"] .ab-werkstatt { opacity: 1; }
html.bewegt .ab-szene[data-schritt="5"] .ab-werkstueck { transform: translateY(-12px); }
html.bewegt .ab-szene[data-schritt="5"] .ab-brenner { animation: ab-fahrt 10s cubic-bezier(.45, 0, .25, 1) forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-bogen { animation: ab-bogen 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-kern { animation: en-flackern .64s linear infinite; }
html.bewegt .ab-szene[data-schritt="5"] .ab-hof { animation: en-flackern .91s linear infinite reverse; }
html.bewegt .ab-szene[data-schritt="5"] .ab-funke-1 { animation: en-funke-1 1.15s ease-out infinite; }
html.bewegt .ab-szene[data-schritt="5"] .ab-funke-2 { animation: en-funke-2 1.15s ease-out .6s infinite; }
html.bewegt .ab-szene[data-schritt="5"] .ab-punkte { opacity: 1; }
html.bewegt .ab-szene[data-schritt="5"] .ab-punkt-1 { animation: ab-punkt-1 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-punkt-2 { animation: ab-punkt-2 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-punkt-3 { animation: ab-punkt-3 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-liegend .ab-g-oben { animation: ab-zink-oben 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-liegend .ab-g-vorn, html.bewegt .ab-szene[data-schritt="5"] .ab-liegend .ab-g-stab { animation: ab-zink-vorn 10s linear forwards; }
html.bewegt .ab-szene[data-schritt="5"] .ab-liegend .ab-g-stirn { animation: ab-zink-stirn 10s linear forwards; }

/* Brennerfahrt zu den drei Heftpunkten des liegenden Felds (Koordinaten aus dem Generator, s. Kommentar im SVG) */
@keyframes ab-fahrt {
  0% { transform: translate(140px, 210px); opacity: 0; }
  6% { opacity: 1; }
  8% { transform: translate(140px, 210px); }
  14%, 22% { transform: translate(140.2px, 270.1px); }
  26% { transform: translate(290px, 235px); }
  30%, 38% { transform: translate(443.2px, 292.7px); }
  43% { transform: translate(500px, 190px); }
  48%, 56% { transform: translate(556.5px, 176.4px); }
  60% { opacity: 1; }
  66%, 100% { transform: translate(720px, 20px); opacity: 0; }
}
@keyframes ab-bogen {
  0%, 14% { opacity: 0; }
  15.5%, 21% { opacity: 1; }
  22%, 30% { opacity: 0; }
  31.5%, 37% { opacity: 1; }
  38%, 48% { opacity: 0; }
  49.5%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
/* Heftpunkte: hell, dann rotglühend, dann Stahlgrau – zuletzt Zink wie das Feld */
@keyframes ab-punkt-1 { 0%, 20% { opacity: 0; fill: #FFE2B0; } 22% { opacity: 1; fill: #FFE2B0; } 28% { fill: #C9512C; } 40%, 74% { fill: #5A6066; } 90%, 100% { fill: #A6ABAF; } }
@keyframes ab-punkt-2 { 0%, 36% { opacity: 0; fill: #FFE2B0; } 38% { opacity: 1; fill: #FFE2B0; } 44% { fill: #C9512C; } 56%, 74% { fill: #5A6066; } 90%, 100% { fill: #A6ABAF; } }
@keyframes ab-punkt-3 { 0%, 54% { opacity: 0; fill: #FFE2B0; } 56% { opacity: 1; fill: #FFE2B0; } 62% { fill: #C9512C; } 72%, 74% { fill: #5A6066; } 90%, 100% { fill: #A6ABAF; } }
/* Rohstahl (blaugrau wie das Nahtmetall in 05) → verzinkt */
@keyframes ab-zink-oben { 0%, 74% { fill: #9AA0A6; } 90%, 100% { fill: #DADCDC; } }
@keyframes ab-zink-vorn { 0%, 74% { fill: #6E757B; } 90%, 100% { fill: #B9BDC0; } }
@keyframes ab-zink-stirn { 0%, 74% { fill: #555C62; } 90%, 100% { fill: #9EA3A7; } }

/* ---------- 04 Über uns ---------- */
.ueber-raster { display: grid; gap: 40px; }
.ueber-kopf p:not(.nummer) { margin-top: 22px; color: var(--gedaempft); max-width: 34em; }
.chronik { position: relative; padding-left: 36px; }
.chronik::before { /* senkrechtes Maßband */
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 14px;
  background:
    repeating-linear-gradient(180deg, #6d746f 0 1px, transparent 1px 40px) left / 14px 100% no-repeat,
    repeating-linear-gradient(180deg, #8a908b 0 1px, transparent 1px 8px) left / 7px 100% no-repeat;
  border-left: 2px solid var(--gruen);
}
.chronik li { position: relative; padding: 0 0 30px; display: grid; gap: 4px; }
.chronik li:last-child { padding-bottom: 0; }
.chronik li::before { content: ""; position: absolute; left: -36px; top: 14px; width: 24px; height: 0; border-top: 2px solid var(--gruen); }
.jahr { font: 460 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.1 var(--serif); letter-spacing: -.02em; color: var(--gruen); }
.chronik p { max-width: 34em; color: var(--tinte); }
@media (min-width: 900px) { .ueber-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; } .ueber-kopf { position: sticky; top: calc(var(--kopf-h) + 24px); align-self: start; } }
.ueber-raster { align-items: start; }

/* ---------- 05 EN 1090 ---------- */
/* 28.10. Animation 3 „Kehlnaht in Isometrie“, Optimierung 3 „Bühne & Licht“: Band in Betongrau, Tabelle ohne weiße Fläche (nur feine Linien).
   Rechts eine Werkstattzeichnung als große Bühne (auf dem PC bis an den rechten Bandrand): T-Stoß aus zwei Blechen,
   der MAG-Brenner senkt sich, der Bogen zündet weich, fährt die Kehle entlang (8,5 s), der Lichtschein wandert über beide Bleche,
   die Naht wächst mit Schuppen, glüht und kühlt über Anlauffarben zu Stahlgrau ab, der Brenner hebt ab. Gesamt 14 s, einmal
   durchlaufen, dann steht die fertige Naht. Startet, sobald der Abschnitt zu sehen ist (seite.js setzt .schweisst).
   Ohne JS oder bei reduzierter Bewegung: fertige Naht, Brenner abgesetzt. Alles ohne Filter – nur Verläufe, Clip-Fenster, transform/opacity. */
.en-band { background: #D7D4CC; color: var(--tinte); padding-block: clamp(64px, 9vw, 120px); border-block: 1px solid #C4C0B6; overflow: hidden; }
.en-band .nummer { color: var(--gruen-tief); }
.en-band .nummer::after { background: var(--gruen-tief); }
.en-band h2 { font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem); }
.en-band h2 em { color: var(--gruen-tief); }
.en-satz { margin-top: 20px; color: var(--text-2); max-width: 30em; }
.en-raster { display: grid; gap: 32px; }
.en-tafel { display: grid; gap: 22px; }
/* Tabelle: direkt auf dem Band, oben und unten eine kräftigere Linie, dazwischen feine Trennlinien */
.en-tabelle { margin: 0; border-top: 1.5px solid #6F6C65; border-bottom: 1.5px solid #6F6C65; }
.en-tabelle > div { display: grid; gap: 4px; padding: 14px 2px; border-top: 1px solid #B2AEA5; }
.en-tabelle > div:first-child { border-top: 0; }
.en-tabelle dt { font: 600 .875rem/1.4 var(--sans); color: #4A5650; }
.en-tabelle dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
.en-code { font: 500 1rem/1.4 var(--mono); letter-spacing: .01em; }
.en-knopf { justify-self: start; color: var(--tinte); border-color: var(--tinte); background: transparent; }
.en-knopf:hover { background: var(--tinte); color: var(--weiss); }
/* Zwei Spalten in der Tabelle nur, wenn die Werte nicht umbrechen müssen (zwischen 1000 und 1180 px ist die linke Spalte dafür zu schmal) */
@media (min-width: 560px) and (max-width: 999.98px), (min-width: 1180px) {
  .en-tabelle > div { grid-template-columns: 10.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 2px; }
}
@media (min-width: 1000px) {
  .en-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: auto auto; column-gap: clamp(28px, 3.5vw, 56px); row-gap: 40px; align-items: center; }
  .en-kopf { grid-column: 1; grid-row: 1; align-self: end; }
  .en-tafel { grid-column: 1; grid-row: 2; align-self: start; max-width: 600px; }
  /* Bühne: die Zeichnung läuft nach rechts über die Spalte hinaus bis an den Bildschirmrand; dort verlässt das Schlauchpaket das Bild.
     Das Band schneidet ab (overflow: hidden), darum kann nichts seitlich scrollen – auch nicht mit Bildlaufleiste. */
  .en-raster .en-szene { grid-column: 2; grid-row: 1 / 3; width: auto; max-width: none; justify-self: stretch; align-self: center;
              margin: 0 min(calc(-1 * var(--rand)), calc((1240px - 100vw) / 2 - var(--rand))) 0 0; }
}

/* Die Zeichnung */
.en-szene { margin: 0; width: 100%; justify-self: center; overflow: hidden; }
.en-bild { display: block; width: 100%; height: auto; }
/* Am Handy größer zeichnen und rechts (Schlauch) beschneiden, damit die Bleche nicht winzig werden */
@media (max-width: 599.98px) { .en-bild { width: 120%; max-width: none; margin-left: -2%; } }
.en-schatten { fill: #CAC7BF; }
.en-blech path { stroke: #57544D; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.en-oben { fill: #EDEBE5; }
.en-vorn { fill: #B4B1A9; }
.en-stirn { fill: #8F8C84; }
.en-naht-kalt { fill: #6A7076; stroke: none !important; }
.en-nahtkoerper { fill: url(#en-nahtmetall); }
.en-nahtschuppen { fill: url(#en-schuppen); }
.en-nahtkante { fill: none; stroke: #CDD2D6; stroke-width: 1; opacity: .7; }
.en-nahtfuss { fill: none; stroke: #5B5852; stroke-width: .9; opacity: .55; }
/* Schweißsymbol: Linien dunkel wie Zeichnungstinte, Pfeilspitze gefüllt, Dreiecke als Umriss, Schrift gut lesbar (≈ 13 px auf dem PC) */
.en-symbol path { fill: none; stroke: #2F3934; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.en-symbol .en-sym-spitze { fill: #2F3934; stroke-width: 1; }
.en-symbol .en-sym-naht { stroke-width: 1.6; }
.en-symbol text { font: 500 17px var(--mono); fill: #2F3934; }
/* Brenner */
.en-draht { fill: none; stroke: #A8AFB6; stroke-width: 1.6; stroke-linecap: round; }
.en-kontaktrohr { fill: #80888F; }
.en-duese { fill: url(#en-zyl); }
.en-duese-licht { fill: none; stroke: #FFFFFF; stroke-width: 3; opacity: .14; stroke-linecap: round; }
.en-duese-kante { fill: none; stroke: #1A2024; stroke-width: 1.3; }
.en-isolator { fill: #1F252A; }
.en-hals { fill: none; stroke: #2F383D; stroke-width: 17; stroke-linecap: round; }
.en-hals-licht { fill: none; stroke: #5E6871; stroke-width: 2.6; stroke-linecap: round; opacity: .8; }
.en-mutter { fill: #3A434B; }
.en-griff { fill: #2F383D; }
.en-griff-licht { fill: #46515A; }
.en-taster { fill: #80888F; }
.en-fuge { fill: none; stroke: #D7D4CC; stroke-width: 2.4; }
.en-schlauch { fill: none; stroke: url(#en-schlauch); stroke-width: 24; stroke-linecap: round; }
/* Lichtbogen und Lichtschein */
.en-kern { fill: #FFF7E8; }
.en-funke { fill: #FFC585; opacity: 0; }
.en-schein { opacity: .3; }
.en-licht { opacity: .9; }
.en-kern, .en-hof, .en-funke, .en-fenster { transform-box: fill-box; }
.en-kern, .en-hof { transform-origin: center; }
.en-fenster { transform-origin: left center; }

/* Ruhezustand (ohne JS, reduzierte Bewegung, oder fertig): Naht komplett, Brenner am Ende abgehoben, kein Lichtbogen, kein Schein */
.en-fenster { transform: scaleX(1); }
.en-brenner { transform: translate(482px, -24px); }
.en-bogen, .en-lichter, .en-gluehen, .en-anlauf { opacity: 0; }

/* Ausgangslage, solange der Abschnitt noch nicht im Bild war: Brenner schwebt über dem Nahtanfang */
html.bewegt .en-szene:not(.schweisst) .en-fenster { transform: scaleX(.02); }
html.bewegt .en-szene:not(.schweisst) .en-brenner { transform: translate(-3px, -30px); }

/* Der Durchgang (14 s) */
html.bewegt .en-szene.schweisst .en-fenster { animation: en-wachsen 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-brenner { animation: en-fahrt 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-lichter { animation: en-lichtfahrt 14s linear forwards, en-bogen 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-gluehen { animation: en-glut 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-anlauf { animation: en-anlauf 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-bogen { animation: en-bogen 14s linear forwards; }
html.bewegt .en-szene.schweisst .en-kern { animation: en-flackern .64s linear infinite; }
html.bewegt .en-szene.schweisst .en-hof { animation: en-flackern .91s linear infinite reverse; }
html.bewegt .en-szene.schweisst .en-schein { animation: en-atmen 1.7s ease-in-out infinite; }
html.bewegt .en-szene.schweisst .en-licht-steh { animation: en-atmen-licht 1.9s ease-in-out infinite; }
html.bewegt .en-szene.schweisst .en-licht-flach { animation: en-atmen-licht 2.3s ease-in-out .5s infinite; }
html.bewegt .en-szene.schweisst .en-funke-1 { animation: en-funke-1 1.15s ease-out infinite; }
html.bewegt .en-szene.schweisst .en-funke-2 { animation: en-funke-2 1.15s ease-out .6s infinite; }
html.bewegt .en-szene.schweisst .en-funke-3 { animation: en-funke-3 1.4s ease-out .3s infinite; }

/* Zeitplan (14 s = 100 %):
   0–4 % Ruhe · 4–11,5 % Brenner senkt sich (weich) · 11,5–15 % Bogen zündet, Schein geht auf · 15–75,7 % Fahrt (8,5 s, gleichmäßig)
   75,7–79,3 % Bogen erlischt · 79,3–86,5 % Brenner hebt ab · 75,7–88 % Glut erlischt · bis 100 % Anlauffarben verblassen zu Stahlgrau */
@keyframes en-fahrt {
  0%, 4% { transform: translate(-3px, -30px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  11.5%, 15% { transform: translate(0, 0); animation-timing-function: linear; }
  75.7%, 79.3% { transform: translate(476px, 0); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  86.5%, 100% { transform: translate(482px, -24px); }
}
@keyframes en-lichtfahrt {
  0%, 15% { transform: translate(0, 0); }
  75.7%, 100% { transform: translate(476px, 0); }
}
@keyframes en-wachsen {
  0%, 15% { transform: scaleX(.02); }
  75.7%, 100% { transform: scaleX(1); }
}
@keyframes en-glut {
  0%, 15% { transform: translate(0, 0); opacity: 0; }
  17% { opacity: 1; }
  75.7% { transform: translate(476px, 0); opacity: 1; }
  88%, 100% { transform: translate(476px, 0); opacity: 0; }
}
@keyframes en-anlauf {
  0%, 15% { transform: translate(0, 0); opacity: 0; }
  21% { opacity: 1; }
  75.7% { transform: translate(476px, 0); opacity: 1; }
  84% { transform: translate(476px, 0); opacity: 1; }
  100% { transform: translate(476px, 0); opacity: 0; }
}
@keyframes en-bogen {
  0%, 11.5% { opacity: 0; }
  15%, 75.7% { opacity: 1; }
  79.3%, 100% { opacity: 0; }
}
/* Flackern: weich, kleine Fläche, keine harten Sprünge */
@keyframes en-flackern {
  0% { opacity: .82; transform: scale(1); }
  27% { opacity: 1; transform: scale(1.14); }
  48% { opacity: .78; transform: scale(.93); }
  71% { opacity: .96; transform: scale(1.07); }
  100% { opacity: .82; transform: scale(1); }
}
@keyframes en-atmen { 0%, 100% { opacity: .24; } 50% { opacity: .36; } }
@keyframes en-atmen-licht { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes en-funke-1 { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(-26px, -34px); } }
@keyframes en-funke-2 { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translate(-34px, -12px); } }
@keyframes en-funke-3 { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .7; } 100% { opacity: 0; transform: translate(-14px, -42px); } }

@media (prefers-reduced-motion: reduce) {
  .en-szene .en-fenster, .en-szene .en-brenner, .en-szene .en-lichter, .en-szene .en-licht, .en-szene .en-gluehen, .en-szene .en-anlauf,
  .en-szene .en-bogen, .en-szene .en-kern, .en-szene .en-hof, .en-szene .en-schein, .en-szene .en-funke { animation: none !important; }
  .en-szene .en-fenster { transform: scaleX(1) !important; }
  .en-szene .en-brenner { transform: translate(482px, -24px) !important; }
  .en-szene .en-bogen, .en-szene .en-lichter, .en-szene .en-gluehen, .en-szene .en-anlauf { opacity: 0 !important; }
}

/* ---------- 06 Kontakt ---------- */
.kontakt { background: var(--papier); }
.kontakt-raster { display: grid; gap: 36px; }
.kontakt-text p:not(.nummer) { margin: 20px 0 28px; max-width: 30em; color: var(--gedaempft); }
.karte { background: var(--beton); border: 1.5px solid var(--linie-karte); border-radius: 4px; padding: 8px 20px 22px; }
.karte-zeile { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie-karte); }
.karte-zeile .sym { color: var(--gruen); margin-top: 2px; }
.karte address, .karte p { font-style: normal; margin: 0; }
.karte address span { color: var(--text-2); }
.karte p a { display: inline-block; padding-block: 8px; margin-block: -8px; }   /* Tippfläche der E-Mail-Adresse */
.route { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 48px; font-weight: 600; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; } }

/* ---------- Fuß + feste Leiste ---------- */
.fuss { background: var(--stahl); padding-block: 28px; font-size: .9375rem; color: #D9DEE0; }
.fuss-innen { display: grid; gap: 16px; }
.fuss-text { display: grid; gap: 6px; }
@media (max-width: 899.98px) { .fuss { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom)); } }   /* Platz für die feste Handy-Leiste */
.fuss strong { color: var(--weiss); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-inline: -12px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--weiss); font-weight: 600; text-underline-offset: .2em; }
.fuss-links a:hover { color: var(--kalk); }
.fuss :focus-visible { outline-color: var(--weiss); }
@media (min-width: 900px) { .fuss-innen { grid-template-columns: 1fr auto; align-items: center; gap: 40px; } .fuss-links { margin-inline: 0 -12px; } }

.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom)); background: rgba(244,241,234,.96); border-top: 1px solid var(--linie); }
.leiste a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; font: 600 1.0625rem var(--sans); text-decoration: none; }
.leiste-tel { background: var(--gruen); color: var(--weiss); }
.leiste-anfrage { background: transparent; color: var(--gruen); border: 1.5px solid var(--gruen); }
@media (min-width: 900px) { .leiste { display: none; } }
html.menue-offen .leiste { display: none; }   /* hinter dem offenen Menü ist die Seite gesperrt – die Leiste wäre nur sichtbar, nicht bedienbar */

/* ---------- Zeitungsartikel (Vorschau + Dialog) ---------- */
.zeitung { display: block; width: min(100%, 420px); margin-top: 36px; text-decoration: none; color: var(--tinte); }
.zt-seite { position: relative; display: block; padding: 16px 20px 20px; background: #FDFCFA; border: 1px solid var(--linie-hell); border-radius: 2px; box-shadow: 0 1px 0 #fff inset, 0 10px 24px -10px rgba(31,43,38,.35), 0 2px 4px rgba(31,43,38,.12); transform: rotate(-1.1deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; overflow: hidden; }
.zt-seite::after { /* Eselsohr */ content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(225deg, var(--kalk-sand) 50%, #D5D1C8 50%); box-shadow: -2px 2px 3px rgba(31,43,38,.15); }
.zeitung:hover .zt-seite { transform: rotate(0deg) translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 16px 30px -12px rgba(31,43,38,.4), 0 2px 4px rgba(31,43,38,.12); }
.zt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; margin-right: 22px; border-bottom: 3px double #6d746f; }
.zt-name { font: 700 1.125rem/1 var(--serif); letter-spacing: .02em; font-variant: small-caps; }
.zt-datum { font: 500 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--gedaempft); }
.zt-titel { display: block; margin-top: 14px; font: 640 clamp(1.5rem, 1.2rem + 1vw, 1.875rem)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.zt-unter { display: block; margin-top: 8px; font: 400 .9375rem/1.4 var(--sans); color: var(--text-2); }
.zt-autor { display: block; margin-top: 8px; font: 500 .75rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gedaempft); }
.zt-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.zt-spalten i { display: block; height: 44px; background: repeating-linear-gradient(180deg, #CFCBC2 0 2px, transparent 2px 7px); }
.zt-spalten i:nth-child(2) { background-position: 0 3px; }
.zt-los { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; font-weight: 600; color: var(--gruen); text-decoration: underline; text-underline-offset: .18em; }
.zeitung:focus-visible { outline-offset: 6px; }

.artikel { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 2px; background: #FDFCFA; color: var(--tinte); box-shadow: 0 30px 70px -20px rgba(31,43,38,.55); overflow: auto; overscroll-behavior: contain; }
.artikel::backdrop { background: rgba(31,43,38,.55); }
.art-seite { padding: 72px clamp(20px, 5vw, 48px) clamp(28px, 5vw, 48px); position: relative; }
.art-zu { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 1.5px solid var(--gruen); border-radius: 999px; background: transparent; color: var(--gruen); font: 600 1rem var(--sans); cursor: pointer; }
.art-zu:hover { background: var(--gruen); color: var(--weiss); }
.art-quelle { font: 700 1.25rem/1 var(--serif); font-variant: small-caps; letter-spacing: .02em; padding-bottom: 10px; border-bottom: 3px double #6d746f; }
.artikel h2 { margin-top: 20px; font: 640 clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem)/1.06 var(--serif); letter-spacing: -.02em; }
.art-unter { margin-top: 14px; font-size: 1.125rem; line-height: 1.45; color: var(--text-2); }
.art-autor { margin-top: 14px; font: 500 .8125rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gedaempft); }
.art-platz { margin-top: 28px; padding: 18px; border: 1.5px dashed #8a908b; border-radius: 2px; background: var(--kalk-sand); }
.art-hinweis { font-size: .9375rem; color: var(--text-2); }
.art-zeilen { display: grid; gap: 10px; margin-top: 16px; }
.art-zeilen i { display: block; height: 10px; border-radius: 2px; background: #CFCBC2; }
.art-zeilen i:nth-child(2) { width: 92%; }
.art-zeilen i:nth-child(3) { width: 58%; }
html.dialog-offen { overflow: hidden; }

/* ---------- Einblenden ---------- */
html.einblenden [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
html.einblenden [data-reveal="1"] { transition-delay: .12s; }
html.einblenden [data-reveal].da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 29.10. Handy: Platz unter der Fußzeile für die feste Leiste „Anrufen / Anfrage“ – sonst verdeckt sie das Seitenende */
@media (max-width: 899.98px) { body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } }

/* 29.10. Optimierung nach Prüfung */
.nw { white-space: nowrap; }
/* Kontrast: Grün auf Betongrau lag bei 4,4:1 – dunkleres Grün (5,6:1) */
.karte a, .ind-band .knopf-rand { color: var(--gruen-tief); }
/* Hero-Überschrift ragte bei 1000–1050 px ins Foto */
@media (min-width: 1000px) { .hero h1 { font-size: clamp(2.5rem, calc((100vw - 640px) / 5.9), 5.25rem); } }
/* Animationen anhalten, solange ihr Abschnitt nicht im Bild ist (spart Rechenleistung, Akku) */
.ruht, .ruht * { animation-play-state: paused !important; }

/* 29.10. Kleine Mono-Beschriftungen ca. 10 % größer (Lesbarkeit, Rückmeldung Testleser) */
.band-ort, .mk, .sch dt, .werkstoffe dt, .zt-datum, .zt-autor { font-size: .8125rem; }
.nummer, .reg-nr, .art-autor { font-size: .875rem; }
.menue-gruppe-titel { font-size: .75rem; }
@media (min-width: 900px) { .band-ort { font-size: .875rem; } }

/* ---------- 29.10. Kontaktformular (Startseite #kontakt und Industrie #anfrage) ----------
   Formular rechts als „Formblatt“, links Text + Karte; am Handy: Text, Formular, Karte untereinander.
   Felder: weiß auf Kalkweiß, Rand 3:1 und mehr, 48 px hoch, Schrift 16 px (kein Zoomen am iPhone). */
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "text form" "karte form"; gap: 40px 72px; align-items: start; }
  .kontakt-raster > .kontakt-text { grid-area: text; }
  .kontakt-raster > .karte { grid-area: karte; }
  .kontakt-raster > .formular { grid-area: form; }
}
.kontakt-text p.mail-alternative { margin: 16px 0 0; }
.kontakt-text .mail-alternative + .knopfreihe { margin-top: 12px; }

.formular { background: var(--kalk); border: 1.5px solid var(--linie-karte); border-radius: 4px; padding: 22px 18px 26px; display: grid; gap: 20px; }
@media (min-width: 560px) { .formular { padding: 28px 28px 32px; } }
@media (min-width: 1100px) { .formular { padding: 36px 40px 40px; } }
.formular h2, .formular h3 { font-size: 1.625rem; }
.formular-pflicht { margin-top: -14px; font-size: .9375rem; color: var(--gedaempft); }
.stern { color: var(--gruen-tief); font-weight: 600; }
.feld-reihe { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.feld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.formular label { font-weight: 600; font-size: .9375rem; line-height: 1.35; color: var(--tinte); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 400 1rem/1.4 var(--sans); color: var(--tinte);
  background: var(--weiss); border: 1.5px solid var(--feld-rand); border-radius: 4px; transition: border-color .15s, box-shadow .15s; }
.formular textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.formular select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("pfeil-unten.svg");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; }
.formular input:hover:not(:focus), .formular select:hover:not(:focus), .formular textarea:hover:not(:focus) { border-color: var(--tinte); }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen-tief); border-radius: 4px; }
.formular input:user-invalid, .formular select:user-invalid, .formular textarea:user-invalid,
.formular [aria-invalid="true"] { border-color: var(--fehler); background-color: var(--weiss); box-shadow: inset 4px 0 0 var(--fehler); }
.feld-hinweis { font-size: .9375rem; line-height: 1.45; color: var(--gedaempft); }
.feld-hinweis a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--gruen-tief); overflow-wrap: anywhere; }

/* Dateiauswahl: der Knopf der Auswahl sieht aus wie die übrigen Knöpfe */
.formular input.datei { width: 100%; padding: 8px; min-height: 60px; font: 400 .9375rem var(--sans); color: var(--tinte); background: var(--weiss); border: 1.5px dashed var(--feld-rand); border-radius: 4px; cursor: pointer; }
.formular input.datei::file-selector-button { min-height: 44px; margin-right: 14px; padding: 8px 18px; font: 600 1rem var(--sans); color: var(--gruen-tief); background: transparent; border: 1.5px solid var(--gruen); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.formular input.datei:hover::file-selector-button { background: var(--gruen); color: var(--weiss); }
.datei-liste { display: grid; gap: 4px; font: 400 .875rem/1.4 var(--mono); color: var(--tinte); overflow-wrap: anywhere; }
.datei-liste:empty { display: none; }
.datei-liste .summe { color: var(--gedaempft); }
.datei-liste .zu-gross { color: var(--fehler); font-weight: 500; }

/* Datenschutz-Kästchen: ganze Zeile ist Tippfläche */
.zustimmung { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 12px 14px; background: var(--kalk-sand); border: 1px solid var(--linie-hell); border-radius: 4px; }
.zustimmung input { width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--gruen); cursor: pointer; }
.zustimmung label { font-weight: 400; font-size: .9375rem; line-height: 1.5; padding-block: 10px; }
.zustimmung a { display: inline-block; padding-block: 8px; margin-block: -8px; color: var(--gruen-tief); font-weight: 600; }
.zustimmung input:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

.formular-fuss .knopf { width: 100%; font-size: 1.0625rem; cursor: pointer; }
@media (min-width: 560px) { .formular-fuss .knopf { width: auto; min-width: 14rem; } }

/* Spamschutz: Lockfeld für Roboter, für Menschen und Vorlesegeräte unsichtbar */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Hinweis nur im Entwurf (lokal) – seite.js blendet ihn beim Absenden ein */
.entwurf-hinweis { padding: 16px 18px; background: var(--sand); border: 1.5px solid var(--gruen); border-radius: 4px; display: grid; gap: 6px; }
.entwurf-hinweis[hidden] { display: none; }
.entwurf-hinweis p { margin: 0 !important; max-width: none !important; color: var(--tinte) !important; }
.entwurf-hinweis a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--gruen-tief); font-weight: 600; }

/* Dankeseite / Fehlerseite (danke.html, kontakt.php) */
.dank { padding-block: clamp(48px, 9vw, 112px); min-height: 60vh; }
.dank-innen { display: grid; gap: 20px; justify-items: start; }
.dank-innen > * { max-width: 40rem; }
.dank h1 { font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem); }
.dank p { color: var(--gedaempft); }
.dank ul { display: grid; gap: 8px; padding-left: 1.25em; list-style: disc; color: var(--tinte); }
.dank .knopfreihe { margin-top: 8px; }
@media (max-width: 480px) {
  .formular input.datei::file-selector-button { padding: 8px 14px; margin-right: 10px; font-size: .9375rem; }
}

/* 30.10. Prüfung Barrierefreiheit: eigene Fehlertexte im Formular, Statuszeile, Knopf „Animation anhalten“ */
.feld-fehler { margin: 0; color: var(--fehler); font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.zustimmung .feld-fehler { grid-column: 1 / -1; }
.sende-status { margin: 12px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--tinte); }
.sende-status:empty { margin: 0; }
.formular-fuss .knopf[aria-disabled="true"] { cursor: progress; opacity: .8; }
.en-szene, .ind-zeichnung { position: relative; }      /* .ab-szene ist schon „sticky“ und damit Bezugspunkt */
.ani-knopf { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px;
  font: 600 .875rem/1.2 var(--sans); color: var(--gruen-tief); background: rgba(250, 248, 244, .94); border: 1.5px solid var(--gruen); border-radius: 999px; cursor: pointer; }
.ani-knopf:hover { background: var(--gruen); color: var(--weiss); }
.ani-knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* 30.10. Ablauf-Animation (einspaltig, Handy/Tablet): Knopf „Animation anhalten“ unter der Zeichnung statt darauf; sichtbar klein, Tippfläche 44 px */
@media (max-width: 999px) {
  .ab-szene { padding-bottom: 44px; }
  .ab-szene .ani-knopf { right: 0; bottom: 8px; min-height: 28px; padding: 3px 12px; font-size: .8125rem; }
  .ab-szene .ani-knopf::after { content: ""; position: absolute; inset: -10px -4px; }
}