/* Innotec House – finales Design (Fassung 17; frühere Fassungen in archiv/fassungen-1-bis-17/). Fassung 17 (aus 16): Netzplan neu (zwei Reihen, größere Symbole, lesbare Beschriftung ohne Strich), Netzplan und grünes Glasfeld als ein Paar mittig zwischen Wortmarke und Kundenband (das Glas liegt 40 px auf der leeren Ecke des Plans und steht 40 px über), Glas als Material in beiden Modi (hell: klares Grün mit dunkler Schrift, dunkel: Rauchglas mit weißer Schrift), ohne Fußzeile, erscheint erst nach der Zeichnung. Beschreibung von 16: Logos wieder als Originaldateien (nur Da Gianni als sorgfältige SVG), das kleine Logo hat exakt die
   Proportionen der großen Wortmarke (kein Größensprung beim Ankommen), die Abschluss-Animation gleitet langsamer. Beschreibung von 15: Übergang 4→5 in Reihenfolge – erst fliegen die Referenzen spiralförmig weg, dann dreht sich die
   Heimlichtreu-Kachel, wird schnell grün, steht als Kontaktkachel, und erst dann blenden die übrigen Kontaktelemente ein. Logos als SVG. Beschreibung von 14: Leistungskacheln gleich hell, Textlogos im Kundenband in Textfarbe, Einstieg etwas tiefer und weniger
   Überlappung, Übergang 4→5: alles weicht nach außen, die Heimlichtreu-Kachel dreht sich im Uhrzeigersinn, wird grün und geht in die Kontaktkachel über. Beschreibung von 13: Wortmarke im hellen Modus schwarz, Logos einfarbig ohne Kacheln (Referenzen auf einheitlich weißen Kacheln),
   Glasfeld heller und durchsichtiger, Karte mit Grün, Sprung aus der Kopfzeile als wachsendes Feld, weiche Ecken am Ende des Laptop-Zooms,
   Übergang 4→5: die Heimlichtreu-Kachel klappt nach vorn um und wird zur grünen Kontaktkachel. Beschreibung von 12: Netzplan statt Haus (zeichnet sich beim Laden, danach erscheint das Glasfeld), kein Raster, keine Spiegel-,
   Senkrecht- und Formelemente mehr, nur leichte Körnung; Kontakt mit Formular statt Visitenkarte; Übergang 4→5 als grüne Welle. Beschreibung von 11: ohne Sprechblasen und Laufzeilen, Kapazität als dauerhaftes grünes Glas, Dach sitzt auf dem H,
   Laptop-Zoom mit runden Ecken, neuer Übergang 4→5 als Keil, Test der Designsprache (Körnung, gespiegelte Titel, senkrechter Text, Formen). Beschreibung von 10: Linien der Symbole füllen sich erst ganz zuletzt, die Buchstaben der Wortmarke fliegen beim Laden vom unteren
   Bildschirmrand hoch, die Sprechblasen sind dunkelgrünes Glas, die Referenzkachel kippt um ihre Unterkante und fällt gerade. Beschreibung von 9: Sprechblasen als grünes Glas, Laptop-Zoom ohne Unschärfe, LAN-Port und aufrechte Festplatte, längerer Fall der
   Referenzkachel mit Wind, bei dem das ganze Feld hochfährt und die Kontaktszene in der letzten Drehung einblendet. Beschreibung von 8: Start-Elemente fallen beim Laden von oben, Startszene fliegt seitlich hinaus und hellt auf, Logo wechselt
   unterwegs die Farbe; die Referenzkachel kippt, fällt mit der Kamera und trägt schon die Kontaktszene. Beschreibung von 7: fünf feste Bildschirme (Szenen). Übergänge: die zweite Karte schiebt sich über die erste, die nur ausblendet;
   die Wortmarke wandert ins Logo und wechselt dabei die Farbe; Zoom in den Laptop-Bildschirm; Explosion zu den Seiten, Referenzen rutschen
   einzeln hoch; die mittlere Referenzkachel löst sich, kippt nach vorn, taumelt langsam und wird zur ganzen Kontaktszene. Dunkel/hell im Wechsel, Kontakt grün. Lade-Animation mit mittiger Wortmarke. Akzent aus config.js (akzent).
   Die Übergänge steuert effekte-5.js über --ein (0..1, Szene kommt) und --aus (0..1, Szene geht) an jeder Szene. */

:root {
  --bg: #1c1c1c; --bg2: #262626; --text: #f2f2f0; --muted: rgba(242, 242, 240, .62); --line: #f2f2f0; --border: rgba(242, 242, 240, .16);
  --papier: #ffffff; --papier-text: #111111; --grau: #a9a9a6; --card: #262626; --card-hover: #303030; --accent: #f2f2f0; --accent2: #f2f2f0; --ok: #f2f2f0; --warn: #f2f2f0;
  --tile-dunkel: #111111; --tile-hell: #ffffff; --max: 1360px; --radius: 0;
  --gruen: #1f9f1b; --raster: rgba(242, 242, 240, .028); --schatten: 0 30px 80px rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --rand: clamp(1rem, 2vw, 1.6rem);
}
:root[data-theme="light"] { --bg: #e9e9e6; --bg2: #f4f4f2; --text: #111; --muted: rgba(17, 17, 17, .62); --line: #111; --border: rgba(17, 17, 17, .16); --grau: #111; --card: #f4f4f2; --card-hover: #fff; --accent: #111; --accent2: #111; --tile-dunkel: #111; --tile-hell: #fff; --raster: rgba(17, 17, 17, .05); --schatten: 0 24px 60px rgba(0, 0, 0, .16); }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.intro body, html.intro-mitte body { overflow: hidden; }   /* ohne Szenen bis der Einstieg steht (sonst springt Zone A mitten im Auftritt) */
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0 0 .6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
h1 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); max-width: 24ch; }
h2 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); font-weight: 800; letter-spacing: -.05em; text-transform: uppercase; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
.gross { font-size: clamp(.95rem, 1.15vw, 1.05rem); color: var(--muted); max-width: 38ch; }
.untertitel { color: var(--muted); max-width: 48ch; margin-bottom: 1.4rem; }
.ueberzeile { font-size: .7rem; letter-spacing: .02em; color: var(--muted); }
.hinweis { color: var(--muted); font-size: .88rem; margin-top: 1rem; max-width: 64ch; }
.bg { display: none; }

/* Kopfzeile */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem; padding: .7rem var(--rand); font-size: .78rem; mix-blend-mode: difference; color: #fff; }
html.intro .kopf, html:not(.geladen) .kopf { opacity: 0; } .kopf { transition: opacity .6s ease; }
/* Startseite beim Laden: bis die Effekte übernommen haben (Szenen oder Film) oder die Seite fertig ist, bleibt alles unter dem Einstieg
   unsichtbar – sonst blitzt beim Neuladen kurz die rohe Seite (Leistungen) auf, bevor der Einstieg beginnt. Scheitern die Effekte, setzt
   app.js „geladen“ und alles erscheint. Ohne JavaScript greift die noscript-Regel im <head>. Unterseiten haben kein #top. (19.10.2026) */
html:not(.geladen):not(.film):not(.szenen) :is(#top > section:not(.held), .fuss) { visibility: hidden; }
/* Zeichen klein unten links (Gegenstück zur großen Szenennummer unten rechts); nur auf großen Bildschirmen */
.randzeichen { position: fixed; left: var(--rand); bottom: 1rem; z-index: 30; display: none; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .6s ease; line-height: 0; }
.randzeichen svg { display: block; height: 1.6rem; width: calc(1.6rem * 1478.74 / 1244.55); }
html.szenen .randzeichen, html.unterseite .randzeichen { display: block; }
@media (max-width: 999px), (max-height: 659px) { html.unterseite .randzeichen { display: none; } }
html.geladen .randzeichen { opacity: 1; }
/* Über grünen Flächen (Kontaktkachel, Glasfeld, grün werdende Kachel) schwarz statt der rosa Differenz-Mischung – effekte.js setzt .auf-gruen */
.kopf.auf-gruen, .randzeichen.auf-gruen { mix-blend-mode: normal; color: #111; }
/* Startseite: erst mit dem Kopfzeilen-Logo (nach dem Übergang 1→2) – im Einstieg steht unten links das Kundenband */
html.szenen.geladen .randzeichen { opacity: var(--marke, 0); pointer-events: none; } html.szenen[style*="--marke: 1"] .randzeichen { pointer-events: auto; }
html.intro .kennung, html.intro .fk { opacity: 0 !important; }
.marke { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.zeichen, .marke .zeichen { display: none; }
.marke .wort { font-weight: 800; letter-spacing: -.06em; font-size: .95rem; line-height: .9; padding: .5em 0 .14em; text-transform: uppercase; opacity: var(--marke, 0); }
html:not(.szenen) .marke .wort { opacity: 1; }
.marke .wort i { font-style: normal; display: inline-block; vertical-align: top; }
.navi { display: flex; gap: 1.5rem; margin-left: auto; }
.navi a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.schalter { display: flex; gap: .4rem; }
.knopf-klein { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 .5rem; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: .7rem; cursor: pointer; }
.knopf-klein svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .navi { display: none; } }

/* Szenen: als normale Seite untereinander; im Szenenmodus feste Bildschirme, die effekte-5.js über --ein/--aus steuert */
main { max-width: none; margin: 0; padding: 0; position: relative; }
.szene { --ein: 1; --aus: 0; position: relative; background: var(--bg); color: var(--text); overflow: hidden; }
.szene::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(55% 45% at 18% 28%, rgba(255, 255, 255, .11), transparent 70%), radial-gradient(45% 55% at 82% 72%, rgba(255, 255, 255, .09), transparent 70%), radial-gradient(35% 35% at 62% 18%, rgba(255, 255, 255, .06), transparent 70%);
  }
.szene.b::before { background: radial-gradient(55% 45% at 22% 30%, rgba(0, 0, 0, .09), transparent 70%), radial-gradient(45% 55% at 80% 72%, rgba(0, 0, 0, .07), transparent 70%); }
.szene::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.szene-1::after { opacity: .09; }
.szene > * { position: relative; z-index: 1; }
.form-dreieck { display: none; position: absolute; left: 50%; top: 0; width: 70vw; height: 92vh; transform: translateX(-50%); background: var(--text); opacity: .045; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; z-index: 0; }
.form-halbkreis { display: none; position: absolute; right: -22vh; top: 50%; width: 44vh; height: 44vh; border-radius: 50%; background: var(--text); opacity: .06; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.spiegel { display: none; height: .5em; overflow: hidden; font-size: inherit; font-weight: 800; letter-spacing: -.05em; line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 28%, transparent); transform: scaleY(-1); transform-origin: top; margin-top: .08em; pointer-events: none; white-space: nowrap; }
.senkrecht { display: none; position: absolute; right: .9rem; top: 50%; transform: rotate(90deg) translate(-50%, 0); transform-origin: right top; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted); white-space: nowrap; z-index: 2; pointer-events: none; }
.szene.a { --logo: brightness(0) invert(1); --bg-andere: #e9e9e6; --bg: #1c1c1c; --text: #f2f2f0; --muted: rgba(242, 242, 240, .62); --line: #f2f2f0; --border: rgba(242, 242, 240, .16); --grau: #a9a9a6; --raster: rgba(242, 242, 240, .028); --schatten: 0 30px 80px rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05); }
.szene.b { --logo: brightness(0); --bg-andere: #1c1c1c; --bg: #e9e9e6; --text: #111; --muted: rgba(17, 17, 17, .62); --line: #111; --border: rgba(17, 17, 17, .16); --grau: #c9c9c5; --raster: rgba(17, 17, 17, .05); --schatten: 0 24px 60px rgba(0, 0, 0, .16); }
:root[data-theme="light"] .szene.a { --logo: brightness(0); --bg-andere: #1c1c1c; --bg: #e9e9e6; --text: #111; --muted: rgba(17, 17, 17, .62); --line: #111; --border: rgba(17, 17, 17, .16); --grau: #c9c9c5; --raster: rgba(17, 17, 17, .05); --schatten: 0 24px 60px rgba(0, 0, 0, .16); }
:root[data-theme="light"] .szene.b { --logo: brightness(0) invert(1); --bg-andere: #e9e9e6; --bg: #1c1c1c; --text: #f2f2f0; --muted: rgba(242, 242, 240, .62); --line: #f2f2f0; --border: rgba(242, 242, 240, .16); --grau: #a9a9a6; --raster: rgba(242, 242, 240, .028); --schatten: 0 30px 80px rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05); }
/* Grünglas (Kapazitätskarte, Fassung 17): dieselbe Tönung in beiden Szenenarten. Helle Szene: klares Glas, dunkle Schrift.
   Dunkle Szene: Rauchglas – der Hintergrund wird hinter der Scheibe gedämpft, weiße Schrift (dunkle Schrift hätte hier nur 2,7 : 1). */
.szene.a, :root[data-theme="light"] .szene.b { --glas-o: .60; --glas-u: .72; --glas-filter: blur(6px) brightness(.38); --glas-schrift: #fff; --glas-marke: rgba(255, 255, 255, .84); --glas-glanz: .06; --glas-kante-o: rgba(255, 255, 255, .34); --glas-kante-u: rgba(0, 0, 0, .35); --glas-schatten: 0 22px 54px -18px rgba(70, 200, 70, .26), 0 0 0 1px rgba(255, 255, 255, .05); }
.szene.b, :root[data-theme="light"] .szene.a { --glas-o: .54; --glas-u: .64; --glas-filter: blur(6px); --glas-schrift: #072a0b; --glas-marke: rgba(7, 42, 11, .76); --glas-glanz: .14; --glas-kante-o: rgba(255, 255, 255, .6); --glas-kante-u: rgba(8, 70, 12, .28); --glas-schatten: 0 18px 36px -14px rgba(16, 110, 20, .42), 0 3px 8px -3px rgba(0, 0, 0, .1); }
.kontakt-kachel { --text: #fff; --muted: rgba(255, 255, 255, .78); --line: #fff; --border: rgba(255, 255, 255, .45); background: var(--gruen); color: #fff; padding: clamp(1.4rem, 2.6vw, 2.4rem); box-shadow: var(--schatten); }
.kontakt-kachel h2::after { background: var(--border); }
.kontakt-kachel .knopf.primaer { background: #fff; color: #111; border-color: #fff; }
.szene-1 { z-index: 1; } .szene-2 { z-index: 2; } .szene-3 { z-index: 3; } .szene-4 { z-index: 4; } .szene-5 { z-index: 5; }
.abschnitt, .logos { max-width: var(--max); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); position: relative; z-index: 1; }
.abschnitt { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.szene .abschnitt + .abschnitt { padding-top: 0; }
html.szenen .szene { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 4.6rem 0 1rem; visibility: hidden; will-change: transform; }
html.szenen .szene > * { min-width: 0; }
html.szenen .szene.an { visibility: visible; }
html.szenen .szene.schiebt { transform: translateY(calc((1 - var(--ein)) * 100vh)); box-shadow: 0 -30px 90px rgba(0, 0, 0, .45); }
html.szenen .szene.mischt { background-color: color-mix(in srgb, var(--bg) calc(var(--ein) * 100%), transparent); }
html.szenen .szene.schiebt.halb { background-color: color-mix(in srgb, var(--bg) calc((.8 + .2 * var(--ein)) * 100%), transparent); }
html.szenen .szene.blendet { opacity: var(--ein); }
html.szenen .szene-4 .flieg { --a: clamp(0, calc((var(--aus, 0) - var(--i, 0) * .05) / .26), 1); opacity: calc(var(--e) * (1 - var(--a))); }
html.szenen .szene-4 .referenz.sturz { opacity: var(--e); transform-origin: 50% 50%; }
html.szenen .szene.keil { box-shadow: none; }
.flut-svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; opacity: var(--flut, 0); }
.flut-svg path { fill: var(--gruen); }
.flut-svg .kante { fill: none; stroke: color-mix(in srgb, var(--gruen) 55%, #fff); stroke-width: 3; }
html.szenen .szene-1 .schleier { position: absolute; inset: 0; background: var(--bg-andere); opacity: calc(var(--aus) * .92); pointer-events: none; z-index: 2; }
html.szenen .szene-2 > #leistungen { will-change: auto; }
html.szenen .szene.klappt > .abschnitt { transform: scale(calc(.88 + .12 * var(--ein))); transform-origin: 50% 45%; }
html.szenen .szene > .abschnitt, html.szenen .szene > .logos { width: 100%; padding-top: .8rem; padding-bottom: .8rem; }
html.szenen .szene > .held { padding-top: 0; }
html.szenen .s-start { align-content: space-between; }
.kennung { position: absolute; top: 3.2rem; right: var(--rand); display: flex; gap: .4rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; color: var(--muted); z-index: 3; opacity: calc(var(--ein) * (1 - var(--aus))); }
.riesennr { position: absolute; right: -.08em; bottom: -.22em; font-size: 24vh; font-weight: 800; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 22%, transparent); pointer-events: none; z-index: 0; transform: translateY(calc((1 - var(--ein)) * 30vh + var(--aus) * -30vh)); opacity: calc(1 - var(--aus)); }
.laufzeile { display: none; position: absolute; left: 0; right: 0; font-size: 10vw; font-weight: 800; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 34%, transparent); pointer-events: none; z-index: 0; opacity: calc(var(--ein) * (1 - var(--aus))); }
.laufzeile.unten { bottom: -.3em; } .laufzeile.oben { top: 2.6rem; }
.laufzeile span { display: inline-block; margin-left: -20vw; transform: translateX(calc((1 - var(--ein)) * 14vw + var(--aus) * -14vw)); }
/* Elemente, die hereinfliegen (--fx/--fy) und hinausfliegen (--wx/--wy/--wr), gestaffelt nach --i */
.flieg { --e: clamp(0, calc((var(--ein, 1) - var(--i, 0) * .06) / (1 - var(--i, 0) * .06)), 1); --a: clamp(0, calc((var(--aus, 0) - var(--i, 0) * .04) / (1 - var(--i, 0) * .04)), 1);
  opacity: calc(var(--e) * (1 - var(--a))); transform: translate(calc(var(--fx, 0px) * (1 - var(--e)) + var(--wx, 0px) * var(--a)), calc(var(--fy, 50px) * (1 - var(--e)) + var(--wy, 0px) * var(--a))) rotate(calc(var(--wr, 0deg) * var(--a))); }
html.ohne-scroll-effekte .flieg { opacity: 1; transform: none; }
h2 .vorhang { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
h2 .vorhang > span { display: inline-block; transform: translateY(calc((1 - var(--e, 1)) * 105%)); }
.abschnitt h2::after { content: ""; display: block; height: 1px; margin-top: .6rem; background: var(--border); transform: scaleX(var(--e, 1)); transform-origin: left; }
.abschnitt h2 .spiegel { opacity: calc(var(--e, 1) * .9); }

/* Einstieg: Wortmarke oben, darunter links Text, rechts Karten; leises Zeichenpapier-Raster */
.held { position: relative; padding: 3.2rem var(--rand) 1.2rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 3rem; row-gap: 3.5vh; align-items: center; max-width: var(--max); width: 100%; margin: 0 auto;
  background-image: none; }
.fk { position: absolute; font-weight: 300; font-size: 1.3rem; line-height: 1; color: var(--muted); opacity: 0; transition: opacity 1s ease 1.4s; }
.fk1 { left: .4rem; top: 2.4rem; } .fk2 { right: .4rem; bottom: .4rem; }
html.geladen .fk { opacity: .5; }
.riesenwort { grid-column: 1 / -1; grid-row: 1; align-self: start; margin: 0 0 1rem; overflow: hidden; }
.riesenwort.platz { visibility: hidden; }
#wortlayer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 29; pointer-events: none; overflow: visible; }
#wortlayer .riesenwort { position: absolute; margin: 0; left: var(--lx, 0px); top: var(--ly, 0px); width: var(--lw, 100vw); transform: translateY(calc(var(--dy, 0px) * var(--intro, 0))); }
html.geladen #wortlayer .riesenwort, html.intro #wortlayer .riesenwort { overflow: visible; }
html.intro-buchstaben #wortlayer .riesenwort { transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
#wortlayer .riesenwort span { transform-origin: 0 0; color: color-mix(in srgb, #fff calc(var(--morph, 0) * 100%), var(--grau)); }
/* Während der Wanderung ins Logo wird die Wortmarke wie die Kopfzeile mit dem Untergrund verrechnet: hell auf dunkel, dunkel auf hell – die Farbe kippt dort, wo die nächste Karte unter ihr ankommt */
html.morph #wortlayer { mix-blend-mode: difference; }
html:not(.szenen) #wortlayer { display: none; }
html:not(.szenen) .riesenwort.platz { visibility: visible; }
:root[data-theme="light"]:not(.szenen) .held .riesenwort span { color: #111; }   /* ohne Szenen (Handy) wie am Desktop: Wortmarke hell schwarz */
.riesenwort span { display: block; font-size: 11.5vw; font-weight: 800; letter-spacing: -.06em; line-height: .9; padding: .5em 0 .14em; text-transform: uppercase; color: var(--grau); white-space: nowrap; }
.riesenwort i { display: inline-block; vertical-align: top; font-style: normal; transform: translateY(100vh); transition: transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 55ms); }
html.intro-buchstaben .riesenwort i, html.geladen .riesenwort i { transform: none; }
/* Start ohne Szenen: Wortmarke zuerst in der Bildschirmmitte, dann nach oben an ihren Platz (wie #wortlayer am Desktop) */
html.intro-mitte .held .riesenwort.platz { overflow: visible; position: relative; z-index: 6; }
html.intro-mitte .held .riesenwort.platz span { translate: 0 var(--dy-start, 0px); }
html.intro-mitte.geladen .held .riesenwort.platz span { translate: 0 0; transition: translate .9s cubic-bezier(.65, 0, .25, 1); }
.dach-buchstabe { position: relative; }
/* Das Dach auf dem H (svg.dach-neu) setzt logo-geometrie.js mit Lage und Größe in em ein */
.dach-neu { display: block; }
.held-text { --a: clamp(0, calc(var(--aus) / .6), 1); grid-column: 1; grid-row: 2; align-self: center; transform: translateX(calc(-70vw * var(--a))); opacity: calc(1 - var(--a)); }
.held h1 { max-width: 20ch; opacity: 0; translate: 0 -70vh; transition: opacity .5s ease .1s, translate .95s cubic-bezier(.3, .7, .2, 1) .1s; }
.held .gross { opacity: 0; translate: 0 -70vh; transition: opacity .5s ease .2s, translate .95s cubic-bezier(.3, .7, .2, 1) .2s; }
.held .knoepfe { margin-top: .6rem; opacity: 0; translate: 0 -70vh; transition: opacity .5s ease .3s, translate .95s cubic-bezier(.3, .7, .2, 1) .3s; }
html.geladen .held h1, html.geladen .held .gross, html.geladen .held .knoepfe { opacity: 1; translate: 0 0; }
.held .status { display: none; }
.buehne { grid-column: 2; grid-row: 2; align-self: center; position: relative; padding-bottom: 7.5rem; }
.karte-c { background: var(--papier); color: var(--papier-text); padding: 1rem 1.2rem 1.2rem; font-size: .8rem; box-shadow: var(--schatten); opacity: 0; transition: opacity .5s ease, translate .95s cubic-bezier(.3, .7, .2, 1); translate: 0 -80vh; }
html.geladen .karte-c { opacity: 1; translate: 0 0; }
.karte-c .kopfzeile { display: flex; gap: 1.6rem; font-size: .68rem; color: #777; margin-bottom: .9rem; font-family: var(--mono); }
.karte-c .fusszeile { display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; color: #777; margin-top: .9rem; }
.k-plan { --a: clamp(0, calc(var(--aus) / .6), 1); position: relative; width: min(470px, 92%); transition-delay: 0s; transform: translateX(calc(60vw * var(--a))); }
html.geladen .k-plan { opacity: calc(1 - var(--a)); }
.k-plan .zeichnung { position: relative; width: 100%; margin: 0; }
.k-plan .plan { --schritt: .06s; display: block; width: 100%; max-width: 30rem; stroke-width: 1; }
.k-plan .fusszeile { flex-direction: column; align-items: flex-start; gap: .25rem; }
/* Der Netzplan zeichnet sich Element für Element (Reihenfolge = --n), Beschriftungen blenden nach, zum Schluss die gestrichelte Sicherung */
.k-plan .plan path, .k-plan .plan circle, .k-plan .plan rect, .k-plan .plan ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.3, .6, .3, 1); transition-delay: calc(.9s + var(--n, 0) * var(--schritt)); }
.k-plan .plan .voll { fill: #111; stroke: none; stroke-dasharray: none; opacity: 0; transition: opacity .3s ease; transition-delay: calc(1.1s + var(--n, 0) * var(--schritt)); }
.k-plan .plan text { stroke: none; fill: #555; font-family: var(--mono); font-size: 8.2px; font-weight: 400; letter-spacing: 0; text-anchor: middle; opacity: 0; transition: opacity .4s ease; transition-delay: calc(1.2s + var(--n, 0) * var(--schritt)); }
.k-plan .plan .hilf { stroke: #999; stroke-width: .8; stroke-dasharray: 2.2 1.8; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease; transition-delay: calc(1.2s + var(--n, 0) * var(--schritt)); }
html.geladen .k-plan .plan path, html.geladen .k-plan .plan circle, html.geladen .k-plan .plan rect, html.geladen .k-plan .plan ellipse { stroke-dashoffset: 0; }
html.geladen .k-plan .plan .voll, html.geladen .k-plan .plan text, html.geladen .k-plan .plan .hilf { opacity: 1; }
.k-kapa { --a: clamp(0, calc((var(--aus) - .08) / .6), 1); position: absolute; right: 0; top: 74%; width: min(320px, 70%); z-index: 2; padding: 1rem 1.2rem 1.1rem;
  color: var(--glas-schrift, #072a0b);
  background: linear-gradient(165deg, rgb(255 255 255 / var(--glas-glanz, .14)), rgb(255 255 255 / 0) 24%), linear-gradient(180deg, rgb(40 180 36 / var(--glas-o, .54)), rgb(30 165 30 / var(--glas-u, .64)));
  -webkit-backdrop-filter: var(--glas-filter, blur(6px)); backdrop-filter: var(--glas-filter, blur(6px));
  box-shadow: inset 0 1px 0 var(--glas-kante-o, rgba(255, 255, 255, .6)), inset 1px 0 0 rgba(255, 255, 255, .14), inset 0 -1px 0 var(--glas-kante-u, rgba(8, 70, 12, .28)), inset -1px 0 0 rgba(0, 0, 0, .06), var(--glas-schatten, 0 18px 36px -14px rgba(16, 110, 20, .42));
  translate: none; transition: none; transform: translate(calc(75vw * var(--a)), calc(12vh * var(--a))); }
/* Auftritt erst nach der Zeichnung (--kapa-start setzt effekte-17.js); Animation statt Übergang, damit die Deckkraft beim Scrollen sofort folgt
   (bis 16 hing hier ein Übergang mit 3,7 s Verzögerung, der beim Ausblenden in 1→2 jedes Bild neu startete) */
/* Der Auftritt animiert einen eigenen Faktor, der mit dem Scroll-Ausblenden multipliziert wird – so blendet das Glas nie ein, während es schon hinausfliegt */
@property --kapa-sicht { syntax: '<number>'; inherits: false; initial-value: 1; }
html.geladen .k-kapa { opacity: calc(var(--kapa-sicht, 1) * (1 - var(--a))); animation: kapa-ein .9s cubic-bezier(.22, .61, .36, 1) var(--kapa-start, 3.9s) backwards; }
@keyframes kapa-ein { from { --kapa-sicht: 0; translate: 0 10px; } 60% { --kapa-sicht: 1; } to { --kapa-sicht: 1; translate: 0 0; } }
.k-kapa .kopfzeile { color: var(--glas-marke, rgba(7, 42, 11, .76)); }
.k-kapa .fusszeile { display: none; }
.k-kapa .kapa { margin: 0; font-size: 1rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; }
.karte-c.k-plan { box-shadow: var(--schatten), 0 0 0 1px rgba(17, 17, 17, .07); }
/* Sprechblasen am Haus: kräftiges, leicht durchscheinendes Grün mit weißer Schrift */
.marker { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 2; }
.marker .punkt { position: absolute; left: 7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #1f8a24; border: 2px solid #fff; box-shadow: 0 0 0 0 color-mix(in srgb, var(--gruen) 70%, transparent); opacity: 0; transition: opacity .4s ease; }
html.geladen .marker .punkt { opacity: 1; animation: puls 2.6s ease-out infinite; animation-delay: calc(3.2s + var(--i, 0) * .4s); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gruen) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.marker .blase { position: absolute; left: 16px; bottom: 16px; min-width: 9.5rem; padding: .45rem .7rem .5rem .6rem; background-color: rgba(12, 82, 20, .84); background-image: linear-gradient(160deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%); mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; transform-origin: left bottom; transform: scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.2, .9, .3, 1.15), opacity .3s ease; pointer-events: none; }
.marker .blase::after { content: ""; position: absolute; left: 0; bottom: -9px; border-style: solid; border-width: 9px 9px 0 0; border-color: rgba(12, 82, 20, .84) transparent transparent transparent; }
.marker.links .blase { left: auto; right: 16px; transform-origin: right bottom; }
.marker.links .blase::after { left: auto; right: 0; border-width: 9px 0 0 9px; border-color: rgba(12, 82, 20, .84) transparent transparent transparent; }
.marker.offen .blase, .marker:hover .blase { transform: none; opacity: 1; }
.marker .tag { display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .05em; opacity: .8; margin-bottom: .15rem; }
.marker b { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-transform: uppercase; }
.marker small { display: block; font-size: .64rem; margin-top: .2rem; opacity: .9; white-space: nowrap; }
.marker i { display: none; }
/* Fassung 17: Netzplan + Glasfeld als ein Paar, mittig zwischen Wortmarke und Kundenband. Das Glasfeld liegt 40 px auf der leeren
   rechten unteren Ecke des Plans (rechts neben der Fußzeile) und steht 40 px rechts über – die Papierecke scheint durchs Glas.
   Der Text steht auf derselben Unterkante wie der Plan. */
html.szenen .s-start { grid-template-rows: 1fr auto; }
html.szenen .s-start .fk2 { display: none; }
@media not all and (max-width: 860px) {   /* = (width > 860px); diese Schreibweise verstehen auch Safari bis 16.3 (iOS 15/16) */
  .held { grid-template-rows: auto minmax(2vh, 1fr) auto auto minmax(1vh, 1fr); row-gap: 0; }
  .held-text { grid-row: 3; align-self: end; }
  .buehne { display: contents; }
  .k-plan { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; width: min(470px, calc(100% - 2.5rem)); margin-right: 2.5rem; padding-bottom: calc(2.5rem + .9rem); }
  .k-kapa { position: relative; inset: auto; grid-column: 2; grid-row: 4; align-self: start; justify-self: end; width: min(320px, 64%); margin-top: -2.5rem; }
}
@media (max-width: 860px) { .held { grid-template-columns: 1fr; } .buehne { grid-column: 1; grid-row: 3; margin-top: 1.5rem; padding-bottom: 0; display: grid; gap: 1rem; } .karte-c { position: static !important; width: auto !important; transform: none !important; } }

/* Logos */
.logo-kachel, .logo-flaeche { display: flex; align-items: center; justify-content: center; }
[data-kachel="dunkel"] { --tile: var(--tile-dunkel); --tile-text: #fff; }
[data-kachel="hell"] { --tile: var(--tile-hell); --tile-text: #111; }
.logo-kachel { width: 190px; height: 70px; padding: .4rem 1.2rem; background: transparent; }
.logo-kachel img { filter: var(--logo, none); opacity: .92; }
.logo-kachel .text { color: var(--text); }
.logo-kachel img, .logo-flaeche img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-kachel .text { color: var(--text); font-weight: 500; letter-spacing: -.01em; text-align: center; font-size: 1.05rem; }
.logo-flaeche .text { color: #111; font-weight: 500; letter-spacing: -.01em; text-align: center; font-size: 1.05rem; }
.logos { --a: clamp(0, calc((var(--aus) - .12) / .6), 1); padding-top: 1.2rem; padding-bottom: 1.6rem; width: 100%; opacity: 0; translate: 0 -50vh; transition: opacity .5s ease .3s, translate .95s cubic-bezier(.3, .7, .2, 1) .3s; transform: translateX(calc(-70vw * var(--a))); }
html.geladen .logos { opacity: calc(1 - var(--a)); translate: 0 0; }
.band { position: relative; overflow: hidden; margin-top: .7rem; }
.band-innen { display: flex; gap: .5rem; padding-right: .5rem; width: max-content; animation: lauf 60s linear infinite; }
.band:hover .band-innen { animation-play-state: paused; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* Leistungen: weiße Kacheln, gleich groß; beim Verlassen wächst der Laptop und gibt den Blick auf die nächste Szene frei */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; counter-reset: k; }
.karte { counter-increment: k; background: var(--papier); color: var(--papier-text); padding: .9rem 1rem 1.2rem; display: grid; grid-template-rows: auto auto auto 1fr; box-shadow: var(--schatten); }
.karte::before { content: "1." counter(k); font-size: .66rem; color: #777; margin-bottom: .4rem; font-family: var(--mono); }
.karte.notiz { counter-increment: none; background: transparent; border: 1px solid var(--border); color: var(--muted); grid-template-rows: auto 1fr; box-shadow: none; }
.karte.notiz::before { content: "–"; color: var(--muted); }
/* Zählung und Strich sind Zierde: Screenreader lesen sie nicht vor (Schreibweise „Inhalt / Ersatztext“; ältere Browser ignorieren
   die Zeile und behalten die darüber – sichtbar ändert sich nichts) */
.karte::before { content: "1." counter(k) / ""; } .karte.notiz::before { content: "–" / ""; }
.karte.notiz p { margin: 0; font-size: .88rem; align-self: end; }
.hinweis { display: none; }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(5, 1fr); } .karte.notiz { display: none; } .hinweis { display: block; } }
@media (max-width: 700px) { .karten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .karten { grid-template-columns: 1fr; } }
.karte .icon { display: grid; place-items: center; width: 100%; aspect-ratio: 1.5; margin-bottom: .3rem; }
.iso { width: 58%; height: auto; fill: none; stroke: #111; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.iso path, .iso circle, .iso ellipse, .iso rect { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--e, 1) - .72) / .28, 1)); }
.iso .hilf { stroke: #999; stroke-width: .9; stroke-dasharray: .02 .02; stroke-dashoffset: 0; opacity: clamp(0, (var(--e, 1) - .8) / .2, 1); }
.iso .voll { fill: #111; stroke: none; stroke-dasharray: none; opacity: clamp(0, (var(--e, 1) - .8) / .2, 1); }
.karte h3 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.5rem); letter-spacing: -.03em; align-self: end; }
.karte p { color: #666; margin: .5rem 0 0; font-size: .85rem; }
html.szenen .szene-2 .karte.laptop { position: relative; z-index: 3; opacity: 1; transform: none; background-color: color-mix(in srgb, var(--papier) calc((1 - var(--a)) * 100%), transparent); }
html.szenen .szene-2.geht .karte.laptop { box-shadow: none; }
html.szenen .szene-2 .karte.laptop > :not(.icon), html.szenen .szene-2 .karte.laptop::before { opacity: calc(1 - var(--a) * 2.5); }
html.szenen .szene-2 .karte.laptop .iso .schirm { fill: rgb(28 28 28 / calc(var(--schirm, 0) * 100%)); transition: none; }
/* Gestrichelte Linie im Laptop-Bildschirm (Wunsch 19.10.2026): hängt nur noch an der Abdunklung des Bildschirms – sie verschwindet, bevor dessen
   Grau ihre Farbe erreicht, und bleibt dann weg; rückwärts kommt sie erst wieder, wenn der Bildschirm hell genug ist. Ihre Farbe bleibt. */
:is(html.szenen, html.film) .szene-2 .karte.laptop .iso .hilf { opacity: calc(clamp(0, (var(--e, 1) - .8) / .2, 1) * clamp(0, 1 - var(--schirm, 0) * 3, 1)); transition: none; }

/* Ablauf + Warum */
.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 700px) { .schritte { grid-template-columns: 1fr; } }
.schritte li { counter-increment: s; background: var(--papier); color: var(--papier-text); padding: .9rem 1rem 1.1rem; box-shadow: var(--schatten); }
.schritte li::before { content: "2." counter(s); font-size: .66rem; color: #777; display: block; margin-bottom: .8rem; font-family: var(--mono); }
.schritte li::before { content: "2." counter(s) / ""; }
.schritte h3 { font-size: 1.05rem; }
.schritte p { color: #666; margin: 0; font-size: .85rem; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; } }
.gruende { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--border); }
.grund { padding: .9rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; }
.grund h3 { margin: 0; font-size: 1rem; }
.grund p { margin: 0; color: var(--muted); font-size: .88rem; }
.gebiet h3 { font-size: 1rem; }
.gebiet p { color: var(--muted); font-size: .88rem; }
.karte-wrap { --e: clamp(0, calc((var(--ein, 1) - .35) / .6), 1); --a: var(--aus, 0); position: relative; border-radius: 50%; aspect-ratio: 1; background: var(--papier); color: var(--papier-text); padding: 7%; margin: .3rem auto 0; max-width: min(440px, 44vh); overflow: hidden; will-change: transform; box-shadow: var(--schatten);
  transform: translateX(calc((1 - var(--e)) * 70vw + var(--a) * 90vw)) rotate(calc((1 - var(--e)) * 540deg + var(--a) * 540deg)); }
html.ohne-scroll-effekte .karte-wrap { transform: none; }
.karte-svg { display: block; width: 100%; height: auto; }
.karte-svg .ring { fill: color-mix(in srgb, var(--gruen) 20%, transparent); stroke: var(--gruen); stroke-width: .5; }
.karte-svg .ring2 { fill: none; stroke: #ddd; stroke-width: .4; }
.karte-svg .berlin { fill: rgba(0, 0, 0, .06); stroke: #111; stroke-width: .35; stroke-linejoin: round; }
.karte-svg .ort { fill: #111; }
.karte-svg .ort-zentrum { fill: var(--gruen); }
.karte-svg text { font-size: 3px; fill: #666; font-family: inherit; }
.karte-svg text.zentrum, .karte-svg text.gross { fill: #111; font-weight: 500; }
.legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; font-size: .72rem; color: var(--muted); margin-top: .6rem; }
.leg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.leg-ort::before { background: var(--gruen); }
.leg-fern::before { background: transparent; border: 1.5px dashed var(--muted); }

/* Referenzen */
.referenzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; perspective: 1800px; }
.referenz.sturz { position: relative; z-index: 6; opacity: var(--e); overflow: hidden; }
.referenz.sturz .gruenlage { position: absolute; inset: 0; background: var(--gruen); opacity: var(--gruen-an, 0); pointer-events: none; }
.referenz.sturz .vorderseite { position: relative; }
.referenz.sturz.ohne-logo .vorderseite { background: #1c1c1c; }
.referenz.sturz.ohne-logo .vorderseite > * { visibility: hidden; }
.referenz.sturz .klon { opacity: var(--klon, 0); }
.referenz.sturz .rueckseite { position: absolute; inset: 0; background: var(--gruen); transform: rotateX(180deg); backface-visibility: hidden; overflow: hidden; }
html.szenen .szene.klon { position: absolute; inset: auto; left: 0; top: 0; width: 100vw; height: 100vh; visibility: visible; transform-origin: 0 0; opacity: 1; }
@media (max-width: 600px) { .referenzen { grid-template-columns: 1fr; } }
.referenz { display: block; background: #fff; color: #111; box-shadow: var(--schatten); }
.referenz .logo-flaeche img { filter: brightness(0); }
.referenz .logo-flaeche .text { color: #111; }
.referenz .logo-flaeche { height: clamp(84px, 13vh, 140px); padding: 1.2rem 1.6rem; }
.referenz .beschriftung { padding: .5rem .9rem; background: var(--papier); color: #111; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .72rem; }
.referenz .ort, .referenz .branche { color: #777; white-space: nowrap; }

/* Kontakt: grüne Szene mit Visitenkarte, Fußzeile integriert */
.kontakt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } }
.kapazitaet { display: inline-block; border: 1px solid var(--border); padding: .45rem .8rem; font-size: .8rem; margin: -.6rem 0 1.4rem; }
.kapazitaet:empty { display: none; }
.direkt { display: grid; gap: .5rem; margin-top: 1rem; }
.direkt-link { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.9rem); letter-spacing: -.035em; }
.direkt-link svg { width: 20px; height: 20px; }
.adresse { color: var(--muted); white-space: pre-line; margin-top: .7rem; font-size: .9rem; }
.form { display: grid; gap: .8rem; background: var(--papier); color: #111; padding: 1.3rem; margin-top: 0; box-shadow: var(--schatten); }
.form label { display: grid; gap: .3rem; font-size: .7rem; color: #777; }
.form input, .form textarea { font: inherit; padding: .7rem .2rem; border: 0; border-bottom: 1px solid #111; background: transparent; color: #111; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-width: 2px; }
.form textarea { min-height: 90px; resize: vertical; }
.form .zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 520px) { .form .zweispaltig { grid-template-columns: 1fr; } }
.form .klein { font-size: .78rem; color: #777; margin: 0; }
.form .knopf.primaer { background: #111; color: #fff; border-color: #111; }
.form-ohne { display: none; }
.visitenkarte { display: none; --q: clamp(0, calc((var(--ein, 1) - .3) / .6), 1); container-type: inline-size; aspect-ratio: 1.586; width: 100%; max-width: min(520px, 48vh * 1.586); margin-left: auto; background: #fff; color: #111; padding: 6cqw 6.5cqw; display: grid; grid-template-rows: auto 1fr; gap: 3cqw; box-shadow: var(--schatten);
  transform: perspective(1400px) rotateY(calc((1 - var(--q)) * -80deg)) translateX(calc((1 - var(--q)) * 18%)); transform-origin: left center; opacity: var(--q); will-change: transform; }
html.ohne-scroll-effekte .visitenkarte { transform: none; opacity: 1; }
.vk-wort { font-size: 7.3cqw; font-weight: 800; letter-spacing: -.055em; line-height: 1; padding-top: .5em; text-transform: uppercase; white-space: nowrap; }
.vk-wort i { font-style: normal; display: inline-block; vertical-align: top; }
.vk-unten { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4cqw; align-items: end; }
.vk-unten .haus { width: 100%; stroke-width: 1.2; }
.visitenkarte .iso path { stroke-dashoffset: calc(1 - var(--q)); }
.visitenkarte .iso .hilf { opacity: var(--q); stroke-dashoffset: 0; }
.vk-text { display: grid; gap: .15em; font-size: 3cqw; line-height: 1.3; text-align: right; }
.vk-text b { font-size: 1.4em; font-weight: 600; margin-bottom: .2em; }
.vk-text .vk-abstand { margin-top: .6em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.knopf { display: inline-flex; align-items: center; padding: .75rem 1.2rem; border: 1px solid var(--line); background: transparent; font-size: .8rem; cursor: pointer; color: inherit; font-family: inherit; transition: background .2s ease, color .2s ease; }
.knopf:hover { background: var(--line); color: var(--bg); }
.knopf.primaer { background: var(--papier); color: #111; border-color: var(--papier); }

/* Fuß: in Szene 5 integriert */
.fuss { max-width: var(--max); margin: 0 auto; padding: 2.4rem var(--rand) 2rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .76rem; position: relative; z-index: 1; width: 100%; }
html.szenen .szene-5 .fuss { margin-top: 1.6rem; padding: 1rem var(--rand) 0; }
html.szenen .szene-5 .kontakt { align-items: stretch; }
.fuss .wort { color: var(--text); font-weight: 500; }
.fuss p { margin: .3rem 0 0; }
.fuss nav { display: flex; gap: 1.4rem; }
.fuss nav a { text-decoration: underline; text-underline-offset: 3px; }

.rechts { max-width: 760px; margin: 0 auto; padding: 6rem var(--rand) 4rem; }
.rechts h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: none; }
.rechts dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; }
.rechts dt { color: var(--muted); }
.rechts dd { margin: 0; }
.rechts .zurueck { display: inline-block; margin-top: 2rem; }
.rechts .querverweis { margin-top: 1.4rem; font-size: .85rem; }   /* Impressum ↔ Datenschutz: von jeder Rechtsseite direkt zur anderen */
.rechts .querverweis a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .rechts dl { grid-template-columns: 1fr; } .rechts dt { margin-top: .6rem; } }

.design-leiste { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; gap: .3rem; align-items: center; padding: .35rem .5rem .35rem .8rem; border-radius: 999px; background: #111; color: #fff; font-size: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); border: 1px solid #444; }
.design-leiste button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: .3rem .6rem; background: #333; color: #fff; cursor: pointer; }
.design-leiste button.aktiv { background: #fff; color: #111; }

/* nach dem Sprung über Kopfzeile oder Knöpfe: Inhalte der Zielszene blenden kurz gestaffelt ein (effekte.js sprung) */
@keyframes einblenden { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.szene.einblenden :is(.abschnitt, .held) > *, .szene.einblenden > :is(.logos, .fuss) { animation: einblenden .7s cubic-bezier(.2, .7, .2, 1) both; }
.szene.einblenden :is(.abschnitt, .held) > :nth-child(2) { animation-delay: .07s; } .szene.einblenden :is(.abschnitt, .held) > :nth-child(3) { animation-delay: .14s; }
.szene.einblenden :is(.abschnitt, .held) > :nth-child(n+4), .szene.einblenden > :is(.logos, .fuss) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .szene.einblenden * { animation: none !important; } }
.sprungfeld { position: fixed; z-index: 35; pointer-events: none; transition: top .55s cubic-bezier(.65, 0, .25, 1), left .55s cubic-bezier(.65, 0, .25, 1), width .55s cubic-bezier(.65, 0, .25, 1), height .55s cubic-bezier(.65, 0, .25, 1), opacity .4s ease; }
.lauflinie { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: #fff; mix-blend-mode: difference; transform: scaleX(0); transform-origin: left; z-index: 40; pointer-events: none; }
.erscheint { opacity: 1; }
/* ============ Handy im Hochformat (bis 700 px Breite) – normale Seite ohne Szenen-Steuerung ============
   Jeder Abschnitt ist eine Karte, die beim Scrollen über die vorige gleitet (position: sticky, --klebe setzt effekte.js so, dass auch
   hohe Abschnitte erst festhalten, wenn ihr unteres Ende erreicht ist). Kopfzeile als ruhiger Balken in der Farbe des Abschnitts darunter. */
@media (max-width: 700px) {
  html:not(.szenen) .szene { position: sticky; top: var(--klebe, 0px); box-shadow: 0 -22px 48px rgba(0, 0, 0, .32); }
  html:not(.szenen) .szene-1 { box-shadow: none; }
  .kopf { gap: .6rem; padding: .6rem 1rem; }
  .kopf .schalter { margin-left: auto; }
  html.handy .kopf { mix-blend-mode: normal; background: var(--kopf-bg, #1c1c1c); color: var(--kopf-fg, #f2f2f0); transition: background-color .3s ease, color .3s ease; }
  html.handy .marke .wort { opacity: var(--marke-handy, 0); transition: opacity .35s ease; }
  html.handy .lauflinie { display: none; }
  .kennung { display: none; }
  .riesennr, .fk { display: none; }                       /* Kontur-Ziffern und Passkreuze laufen hier quer durch Text */
  /* Schatten für gestapelte Karten: reicht nicht über die Oberkante, sonst graue Schlieren in den Fugen */
  .szene.b, :root[data-theme="light"] .szene.a { --schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 24px -14px rgba(0, 0, 0, .28); }
  .szene.a, :root[data-theme="light"] .szene.b { --schatten: 0 0 0 1px rgba(255, 255, 255, .05), 0 14px 28px -16px rgba(255, 255, 255, .12); }
  .abschnitt { padding-top: 4.2rem; padding-bottom: 3.2rem; }
  /* Einstieg */
  .held { padding-top: 3.6rem; row-gap: 1.6rem; }
  .riesenwort { margin-bottom: 0; }
  .held .gross { font-size: 1rem; }
  .buehne { margin-top: .4rem !important; gap: 0 !important; }
  .k-plan { padding-bottom: 3.1rem !important; }
  .buehne .karte-c.k-plan { width: calc(100% - 1.5rem) !important; }   /* das Glas steht rechts über, wie am Desktop */
  .k-kapa { width: 80% !important; margin: -2.1rem 0 0 auto !important; position: relative !important; inset: auto !important; z-index: 2; padding: .85rem 1rem .95rem; }
  .k-kapa .kapa { font-size: .95rem; }
  .logos { padding-top: 1.6rem; padding-bottom: 2rem; }
  /* Kundenband läuft auch hier als Band durch (kleinere Kacheln, gleiches Tempo in Pixeln wie am Desktop) */
  .band { margin-left: calc(-1 * var(--rand, 1rem)); margin-right: calc(-1 * var(--rand, 1rem)); }
  .band-innen { gap: .35rem; padding-right: .35rem; animation-duration: 42s; }
  .logo-kachel { width: 128px; height: 50px; padding: .35rem .7rem; }
  .logo-kachel .text { font-size: .8rem; line-height: 1.15; }
  /* Leistungen: Symbol links, Text rechts */
  .karten { grid-template-columns: 1fr !important; gap: .55rem; }
  .karte { grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; row-gap: .1rem; padding: .85rem 1rem 1rem; align-items: start; }
  .karte::before { grid-column: 1 / -1; margin-bottom: .25rem; }
  .karte .icon { grid-column: 1; grid-row: 2 / span 2; width: 3.4rem; aspect-ratio: 1; margin: .1rem 0 0; }
  .karte .icon .iso { width: 100%; stroke-width: 3.6; }      /* klein gezeichnet: Linie wie am Desktop etwa 1 px */
  .karte .icon .iso .hilf { display: none; }
  .karte h3 { grid-column: 2; grid-row: 2; align-self: start; font-size: 1.05rem; }
  .karte p { grid-column: 2; grid-row: 3; margin-top: .25rem; font-size: .84rem; }
  .karte.notiz { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .karte.notiz p { grid-column: 1; grid-row: 2; }
  /* Gründe untereinander */
  .grund { grid-template-columns: 1fr; gap: .3rem; }
  #warum .gruende { border-top: 0; }                         /* sonst Doppellinie unter der Überschrift */
  .karte-wrap { max-width: 320px; }
  /* Referenzen in zwei Spalten, Name und Branche untereinander */
  .referenzen { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .referenz .logo-flaeche { height: 84px; padding: .8rem .9rem; }
  .referenz .beschriftung { flex-direction: column; align-items: flex-start; gap: .05rem; padding: .45rem .7rem .55rem; font-size: .7rem; }
  .referenz .beschriftung strong { font-size: .74rem; }
  .referenz:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .225rem); }
  /* Kontakt */
  .kontakt { gap: 1rem; }
  .kontakt-kachel { --muted: rgba(255, 255, 255, .92); }   /* kleiner Text auf Grün braucht mehr Kontrast */
  .fuss { padding-bottom: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .band-innen { animation: none; } .marker .blase { opacity: 1; transform: none; } .marker .punkt { animation: none; } .riesenwort i, .held h1, .held .gross, .held .knoepfe, .karte-c, .logos { opacity: 1; transform: none; translate: none; transition: none; } html.geladen .k-kapa { animation: none; } }

/* ============ Handy-Film: dieselben Übergänge wie am Desktop, überall wo die Szenen nicht auf einen Bildschirm passen ============
   (Handy hoch und quer, Tablet hochkant, Foldable, kleine Fenster; effekte.js entscheidet je nach Platz) 
   Jede Szene steckt in div.halt (effekte.js setzt top, height, margin-top). .halt klebt unten, die Szene darin oben; Szenen 3–5
   überlappen die vorige um eine Bildschirmhöhe. Die Choreografie sind die Desktop-Regeln (--ein/--aus), hier mit Hochformat-Vektoren (--h-*). */
.halt { display: contents; }
@media all {
  html.film { overflow-anchor: none; }
  html.film .kopf { mix-blend-mode: normal; background: var(--kopf-bg, #1c1c1c); color: var(--kopf-fg, #f2f2f0); }   /* Kopfzeile als Balken in der Farbe des Abschnitts darunter */
  html.film .lauflinie, html.film .randzeichen, html.film .kennung { display: none; }
  html.film body { overflow-x: clip; }                   /* sonst wird body beim Schwung-Stopp (html overflow: hidden) zum Scroller – alle Halte springen */
  html.film.film-stopp { overflow: hidden; }
  html.film .halt { display: block; position: sticky; }
  html.film .halt-1 { z-index: 1; } html.film .halt-2 { z-index: 2; } html.film .halt-3 { z-index: 3; } html.film .halt-4 { z-index: 4; } html.film .halt-5 { z-index: 5; }
  /* Der Kasten einer Szene reicht weit über die Szene hinaus (Haltestrecke): leer darf er nichts abfangen – sonst liegt der Kasten von
     Szene 5 über den Referenzen, und Antippen/Klicken der Referenz-Links kommt nie an. Die Szenen selbst bleiben bedienbar. */
  html.film .halt { pointer-events: none; } html.film .halt > .szene { pointer-events: auto; }
  /* Schürze: füllt den Streifen bis lvh in der Szenenfarbe, wenn die Leisten einklappen */
  html.film .halt > .szene { position: sticky; top: 0; min-height: var(--film-lvh, 100lvh); box-shadow: 0 var(--film-schuerze, 0px) 0 0 var(--bg); }
  html.film .halt > .szene-2 { box-shadow: 0 -22px 48px rgba(0, 0, 0, .32), 0 var(--film-schuerze, 0px) 0 0 var(--bg); }
  html.film .kopf { transition: opacity .6s ease; }       /* Farbe folgt dem Zustand ohne Verzögerung */
  html.film:not(.film-marke) .kopf { background: transparent; }
  html.film .marke .wort { opacity: 0; transition: none; }
  html.film.film-marke .marke .wort { opacity: 1; }
  /* 1→2: Wortmarke klappt ins Logo (wie ein großer iOS-Titel), Einstieg geht */
  html.film .held .riesenwort.platz { overflow: visible; }   /* der Kasten darf die einklappende Wortmarke nicht abschneiden */
  /* 1→2: fliegende Kopie der Wortmarke (effekte.js wortFlug) – feste Ebene über der Kopfzeile, landet deckungsgleich auf dem Logo */
  .wortflug { display: none; position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; transform-origin: 0 0; will-change: transform; }
  .wortflug.an { display: block; }
  .wortflug .riesenwort { margin: 0; overflow: visible; }
  html.film .held .riesenwort.platz span { transform-origin: 0 0; color: color-mix(in srgb, var(--wort-nach) calc(var(--morph, 0) * 100%), var(--wort-von)); }
  html.film .szene-1 { --wort-von: var(--grau); --wort-nach: var(--text); }
  :root[data-theme="light"].film .szene-1 { --wort-von: #111; --wort-nach: #111; }
  html.film .szene-1 .schleier { position: absolute; inset: 0; background: var(--bg-andere); opacity: calc(var(--aus) * .92); pointer-events: none; z-index: 2; }
  html.film .szene-1 .karte-c.k-plan { transform: translateX(calc(60vw * var(--a))) !important; }        /* hebt transform: none !important (≤ 860 px) auf */
  html.film .szene-1 .karte-c.k-kapa { transform: translate(calc(75vw * var(--a)), calc(12vh * var(--a))) !important; }
  html.film .flieg { transform: translate(calc(var(--h-fx, var(--fx, 0px)) * (1 - var(--e)) + var(--h-wx, var(--wx, 0px)) * var(--a)), calc(var(--h-fy, var(--fy, 50px)) * (1 - var(--e)) + var(--h-wy, var(--wy, 0px)) * var(--a))) rotate(calc(var(--h-wr, var(--wr, 0deg)) * var(--a))); }
  /* 2→3: Zoom in den Laptop-Bildschirm */
  html.film .szene-2 .karte.laptop { position: relative; z-index: 3; opacity: 1; transform: none; background-color: color-mix(in srgb, var(--papier) calc(max(0, 1 - var(--a) * 3) * 100%), transparent); }
  html.film .szene-2.geht .karte.laptop { box-shadow: none; }
  html.film .szene-2 .karte.laptop > :not(.icon), html.film .szene-2 .karte.laptop::before { opacity: calc(1 - var(--a) * 2.5); }
  html.film .szene-2 .karte.laptop .iso { stroke: color-mix(in srgb, var(--text) calc(min(1, var(--a) * 3) * 100%), #111); }
  html.film .szene-2 .karte.laptop .iso .schirm { fill: color-mix(in srgb, var(--film-schirm, #1c1c1c) calc(var(--schirm, 0) * 100%), transparent); }
  html.film .szene-3 > .abschnitt { transform: scale(calc(.88 + .12 * var(--ein))); transform-origin: 50% calc(var(--film-svh, 100svh) / 2); }
  /* 3→4: Grund als eigene Ebene (Deckkraft statt color-mix pro Bild) */
  html.film .szene-4 { background-color: transparent; }
  html.film .szene-4 > .film-grund { position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: var(--ein); pointer-events: none; }
  html.film .szene-4::before { opacity: var(--ein); }
  html.film .szene-4::after { opacity: calc(.13 * var(--ein)); }
  html.film .szene-4 .flieg { --e: clamp(0, calc((var(--ein, 1) - var(--h-i, var(--i, 0)) * .06) / (1 - var(--h-i, var(--i, 0)) * .06)), 1); --a: clamp(0, calc((var(--aus, 0) - var(--h-j, 0) * .05) / .26), 1); opacity: calc(var(--e) * (1 - var(--a))); }
  html.film .szene-4 .referenz.sturz { opacity: var(--e); transform-origin: 50% 50%; }
  /* 4→5 */
  html.film .szene-5 { opacity: var(--ein); }
  /* Ebenen nur in Zonennähe (film-nah); Szene 2 nie: der Zoom muss scharf bleiben (wie am Desktop) */
  html.film .szene-1.film-nah :is(.held-text, .k-plan, .logos, .schleier) { will-change: transform, opacity; }
  html.film .szene-3.film-nah > .abschnitt, html.film .szene-3.film-nah .flieg, html.film .szene-4.film-nah .flieg, html.film .szene-5.film-nah .flieg { will-change: transform, opacity; }
  html.film .szene-4.film-nah > .film-grund, html.film .szene-4.film-nah::before, html.film .szene-4.film-nah::after, html.film .szene-4.film-nah .gruenlage { will-change: opacity; }
}

/* ============ Kompakte Szenen: Laptops und Tablets quer mit mittlerer Höhe (ab 1000 px Breite, 680–899 px Höhe) ============
   Dieselben fünf Szenen wie am großen Bildschirm, nur in der Höhe dichter gesetzt, damit jede Szene in Ruhe vollständig zwischen Kopfzeile
   und unterem Rand steht (szenenPruefen() in effekte.js entscheidet danach zwischen Szenen und Handy-Film). Alles gleitet mit der Höhe:
   --kf läuft von 0 px (760 px Höhe) bis 140 px (900 px: genau die freigegebene Desktop-Fassung), jeder Wert ist kompakt + Anteil × --kf;
   --kt (0 px bei 760, bis 80 px bei 680) zieht darunter noch etwas enger. Ab 900 px Höhe greift der Block nicht. Nur unter html.szenen –
   der Handy-Film bleibt unberührt. */
@media (min-width: 1000px) and (min-height: 680px) and (max-height: 899px) {
  html.szenen { --kf: clamp(0px, calc(100vh - 760px), 140px); --kt: clamp(0px, calc(760px - 100vh), 80px); }
  html.szenen .szene { padding-top: calc(3.25rem + .1543 * var(--kf)); }                                    /* 52 → 73,6 px */
  /* Szenen 2–5: unten mehr Luft, damit nichts an das kleine Zeichen unten links stößt (Ablauf 32 → 16 px, sonst 48 → 16 px) */
  html.szenen .szene:not(.szene-1) { padding-bottom: calc(3rem - .2286 * var(--kf)); }
  html.szenen .szene.szene-3 { padding-bottom: calc(2rem - .1143 * var(--kf)); }
  /* große Überschriften wie am freigegebenen Bildschirm etwa 8,6 % der Höhe (greift nur, wo die Breite sie größer machen würde) */
  html.szenen .szene h2 { font-size: clamp(2.2rem, min(5.4vw, 8.6vh), 4.8rem); }
  /* Einstieg: Wortmarke höchstens etwa 31 % der Höhe (greift nur bei breiten, flachen Fenstern), Abstände enger, Netzplan kleiner */
  html.szenen .held .riesenwort.platz { max-width: calc(163vh - .9 * var(--kt)); margin-bottom: calc(.25rem + .0857 * var(--kf)); justify-self: center; }   /* nach der Höhe begrenzt: mittig (Wunsch 19.10.) */
  html.szenen .held { grid-template-rows: auto minmax(calc(4px + .1 * var(--kf)), 1fr) auto auto minmax(calc(.0643 * var(--kf)), 1fr); padding-bottom: calc(.4rem + .0914 * var(--kf)); }
  html.szenen .held h1 { font-size: clamp(1.6rem, min(2.8vw, 5.2vh), 2.5rem); }
  html.szenen .held .gross { margin-bottom: calc(1rem - .08 * var(--kt)); }
  html.szenen .held .k-plan { width: min(calc(390px + .5714 * var(--kf) - .5 * var(--kt)), calc(100% - 2.5rem)); }
  html.szenen .held .k-kapa { padding: calc(.8rem + .0229 * var(--kf)) 1.2rem calc(.85rem + .0286 * var(--kf)); }
  html.szenen .held .k-kapa .kopfzeile { margin-bottom: calc(.55rem + .04 * var(--kf)); }
  /* Kundenband näher heran, Kacheln etwas kleiner */
  html.szenen .szene > .logos { padding-top: calc(.3rem + .0571 * var(--kf)); }
  html.szenen .logos .ueberzeile { margin-bottom: calc(.4rem + .0686 * var(--kf)); }
  html.szenen .logos .band { margin-top: calc(.3rem + .0457 * var(--kf)); }
  html.szenen .logos .logo-kachel { width: calc(152px + .2714 * var(--kf) - .2 * var(--kt)); height: calc(56px + .1 * var(--kf) - .08 * var(--kt)); }
  /* Ablauf + Warum: Abschnitte, Schrittkarten und Gründe dichter, Karte des Einsatzgebiets kleiner */
  html.szenen .szene-3 > .abschnitt { padding-top: calc(.4rem + .0457 * var(--kf)); padding-bottom: calc(.4rem + .0457 * var(--kf)); }
  html.szenen .szene-3 .schritte li { padding-top: calc(.7rem + .0229 * var(--kf)); padding-bottom: calc(.9rem + .0229 * var(--kf)); }
  html.szenen .szene-3 .schritte li::before { margin-bottom: calc(.5rem + .0343 * var(--kf)); }
  html.szenen .szene-3 .gruende { margin-top: calc(.6rem + .0457 * var(--kf)); }
  html.szenen .szene-3 .grund { padding-top: calc(.5rem + .0457 * var(--kf)); padding-bottom: calc(.5rem + .0457 * var(--kf)); }
  html.szenen .szene-3 .karte-wrap { max-width: min(440px, calc(31vh + .8357 * var(--kf))); }
  /* Kontakt: Kachel und Fußzeile dichter */
  html.szenen .szene-5 .kontakt-kachel { padding: min(clamp(1.4rem, 2.6vw, 2.4rem), calc(1.6rem + .0914 * var(--kf))); }
  html.szenen .szene-5 .fuss { margin-top: calc(.8rem + .0914 * var(--kf)); }
}

/* ============ Tablet hochkant mit Szenen (iPad Pro 12,9" 1024 × 1366 und hochkant gestellte Bildschirme ab 1000 px Breite) ============
   Die Szenen sind fürs Querformat gebaut; im Hochformat blieb oben und unten je ein Drittel leer. Etwas größer, Leistungen in drei Spalten. */
@media (min-width: 1000px) and (max-aspect-ratio: 4/5) {
  html.szenen { font-size: 118%; }
  html.szenen .karten { grid-template-columns: repeat(3, 1fr); }
  html.szenen .karte.notiz { display: grid; }
  html.szenen #leistungen .hinweis { display: none; }
  html.szenen .k-plan { width: min(555px, calc(100% - 2.5rem)); }
  html.szenen .k-kapa { width: min(378px, 64%); }
  html.szenen .logo-kachel { width: 224px; height: 83px; }
  html.szenen .karte-wrap { max-width: min(520px, 44vh); }
  html.szenen .referenz .logo-flaeche { height: clamp(99px, 13vh, 165px); }
}

/* ============ Film auf mittleren Breiten (701–1400 px): Tablet hoch, Foldable, quadratisch, flache Fenster, Laptops ohne Szenen ============
   Der Film wurde fürs Handy (eine Spalte) gebaut; hier ist das Raster mehrspaltig. Alles unter html.film (nur die Kopfzeilen-Regel 701–720 px
   gilt auch auf Unterseiten) – Handy (≤ 700 px), Handy quer (Höhe ≤ 500 px, eigener Block) und Szenen bleiben unberührt. Dazu in effekte.js (filmMessen): eigene Haltestrecke für das
   Einklappen der Wortmarke (FILM_A_BREIT). */
@media (min-width: 701px) and (max-width: 1400px) and (min-height: 501px) {
  /* Szenen: Inhalt mittig wie die Szenen am Desktop (sonst klebt er oben und unten bleibt ein leerer Streifen), Abstand zur Kopfzeile */
  html.film .halt > .szene { display: flex; flex-direction: column; justify-content: center; }
  html.film .halt > .szene > .abschnitt, html.film .halt > .szene > .held, html.film .halt > .szene > .logos, html.film .halt > .szene > .fuss { width: 100%; flex: none; }
  html.film .halt > .szene.s-start { justify-content: space-between; }                    /* Wortmarke oben, Kundenband unten */
  html.film .szene-2 > .abschnitt, html.film .szene-3 > #arbeit, html.film .szene-4 > .abschnitt, html.film .szene-5 > .abschnitt { padding-top: 5rem; }   /* Überschrift nicht unter der Kopfzeile */
  html.film .szene-2 > .abschnitt, html.film .szene-4 > .abschnitt { padding-bottom: 1.5rem; }   /* Szene passt in die Höhe, Überschrift bleibt in den Haltestrecken frei */
  html.film .karte.notiz { background: var(--bg); }   /* große Kontur-Ziffer nicht durch den Hinweistext */
}
/* Einstieg 701–860 px hochkant: eine Spalte; Netzplan rechts mit Glasfeld, das 40 px auf seiner Ecke liegt und 40 px übersteht (wie am Desktop) */
@media (min-width: 701px) and (max-width: 860px) and (max-aspect-ratio: 9/10) and (min-height: 501px) {
  html.film .held .buehne { justify-items: end; gap: 0; margin-top: 2.2rem; }
  html.film .held .karte-c.k-plan { width: min(470px, calc(100% - 2.5rem)) !important; margin-right: 2.5rem; padding-bottom: calc(2.5rem + .9rem); }
  html.film .held .karte-c.k-kapa { position: relative !important; inset: auto; width: min(320px, 64%) !important; margin-top: -2.5rem; }
}
/* Einstieg 701–860 px quer und quadratisch: zwei Spalten wie am Desktop (Text links, Netzplan mit Glasfeld rechts) */
@media (min-width: 701px) and (max-width: 860px) and (min-aspect-ratio: 9/10) and (min-height: 501px) {
  html.film .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(2vh, 1fr) auto auto minmax(1vh, 1fr); column-gap: 2rem; row-gap: 0; }
  html.film .held-text { grid-row: 3; align-self: end; }
  html.film .held .buehne { display: contents; }
  html.film .held .karte-c.k-plan { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; width: calc(100% - 2.5rem) !important; max-width: 470px; margin-right: 2.5rem; padding-bottom: calc(2.5rem + .9rem); }
  html.film .held .karte-c.k-kapa { position: relative !important; inset: auto; grid-column: 2; grid-row: 4; align-self: start; justify-self: end; width: min(320px, 76%) !important; margin-top: -2.5rem; }
}
/* 701–720 px: Navigation ist ausgeblendet (≤ 720 px) – Sprache und Hell/Dunkel trotzdem rechts (wie auf dem Handy), nicht neben dem Logo */
@media (min-width: 701px) and (max-width: 720px) { .kopf .schalter { margin-left: auto; } }

/* ============ Handy quer (Höhe bis 500 px, Querformat) – Handy-Film auf flachem Bildschirm ============
   iPhone SE 667×375 bis Pro Max 932×430: wenig Höhe, viel Breite. Aufbau wie am Desktop im Kleinen (zweispaltig), Wortmarke nach der
   Höhe begrenzt, flache Kopfzeile, kompakte Karten – damit der erste Bildschirm vollständig ist und die Laptop-Karte zu Beginn des
   Zooms im Bild steht. Gilt für alle Breiten dieser Klasse gleich: hebt die Regeln für ≤ 860 px und ≤ 700 px (iPhone SE quer) auf,
   wo sie dazwischenfunken. Nur unter html.film; Desktop und Hochformat bleiben unberührt. */
@media (orientation: landscape) and (max-height: 500px) {
  html.film .kopf { gap: 1.2rem; padding: .4rem var(--rand); }                       /* Kopfzeile ≈ 39 px statt 48 px */
  html.film .riesennr, html.film .fk { display: none; }                               /* Kontur-Ziffern und Passkreuze liefen durch Text */
  html.film .abschnitt { padding-top: 3.1rem; padding-bottom: 1.4rem; }
  html.film .szene h2 { font-size: clamp(2rem, min(5.4vw, 11.5svh), 3.3rem); }
  html.film .untertitel { margin-bottom: 1rem; }
  /* Einstieg: der erste Bildschirm ist genau eine Höhe (svh) – oben die Wortmarke (Breite ≤ 155 svh, also knapp ein Drittel der Höhe),
     unten links Text und Knöpfe, rechts der Netzplan, beide 1 rem über dem Rand. Das Glasfeld steht darunter (Reihe 3, feste 9 rem),
     rechts versetzt wie am Desktop – im ersten Bild hätte es nur angeschnitten Platz. */
  html.film .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(auto, 1fr) 9rem; min-height: calc(100svh + 9.4rem); column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: 0; padding: 2.6rem var(--rand) .4rem; }
  html.film .held .riesenwort.platz { width: min(100%, 155svh); margin: 0 auto .7rem; justify-self: center; }   /* nach der Höhe begrenzt: mittig (Wunsch 19.10.) */
  html.film .held-text { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 1rem; }
  html.film .held h1 { font-size: clamp(1.2rem, 6.4svh, 1.65rem); max-width: 24ch; margin-bottom: .5rem; }
  html.film .held .gross { font-size: .9rem; max-width: 44ch; margin-bottom: .6rem; }
  html.film .held .knoepfe { margin-top: 0; }
  html.film .held .knopf { padding: .65rem 1.05rem; }
  html.film .buehne { display: contents; }
  html.film .szene-1 .karte-c.k-plan { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; position: relative !important; width: min(380px, 84svh, calc(100% - 2rem)) !important; margin: 0 2rem 1rem 0; padding: .8rem 1rem 1rem !important; }
  html.film .szene-1 .karte-c.k-kapa { grid-column: 2; grid-row: 3; align-self: start; justify-self: end; position: relative !important; inset: auto !important; width: min(300px, 70%) !important; margin: .9rem 0 0 0 !important; padding: .75rem .95rem .85rem; }
  html.film .k-kapa .kapa { font-size: .9rem; }
  html.film .karte-c .kopfzeile { margin-bottom: .6rem; }
  html.film .logos { padding-top: .6rem; padding-bottom: 1.4rem; }
  html.film .band { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
  html.film .band-innen { gap: .4rem; padding-right: .4rem; animation-duration: 48s; }
  html.film .logo-kachel { width: 150px; height: 56px; padding: .35rem .9rem; }
  /* Leistungen: drei Spalten in zwei Reihen, die Laptop-Karte (1.2) oben in der Mitte. Symbol klein oben rechts neben Nummer und
     Titel, der Beschreibungstext bekommt die ganze Kartenbreite – so bleiben die Karten flach und die Laptop-Karte steht zu Beginn des Zooms im Bild */
  html.film .karten { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem; }
  html.film .karte { grid-template-columns: minmax(0, 1fr) 2.3rem; grid-template-rows: auto auto 1fr; column-gap: .6rem; row-gap: 0; padding: .6rem .85rem .75rem; align-items: start; }
  html.film .karte::before { grid-column: 1; grid-row: 1; margin: 0; }
  html.film .karte .icon { grid-column: 2; grid-row: 1 / span 2; width: 2.3rem; aspect-ratio: 1; margin: 0; }
  html.film .karte .icon .iso { width: 100%; stroke-width: 4; }                     /* klein gezeichnet: Linie wie am Desktop etwa 1 px */
  html.film .karte .icon .iso .hilf { display: none; }
  html.film .karte h3 { grid-column: 1; grid-row: 2; align-self: start; margin-top: .35rem; font-size: 1rem; }
  html.film .karte p { grid-column: 1 / -1; grid-row: 3; margin-top: .3rem; font-size: .8rem; line-height: 1.35; }
  html.film .karte.notiz { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  html.film .karte.notiz p { grid-column: 1; grid-row: 2; }
  html.film #leistungen .hinweis { display: none; }                                  /* steht als sechste Karte da (ab 1000 px Breite sonst doppelt) */
  /* Ablauf in drei Spalten, Warum zweispaltig (Gründe links, Gebiet mit Karte rechts) */
  html.film .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.film .schritte li { padding: .75rem .9rem .9rem; }
  html.film .schritte li::before { margin-bottom: .5rem; }
  html.film .zwei { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  html.film .grund { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: .7rem 0; }
  html.film #warum .gruende { border-top: 0; }                                        /* sonst Doppellinie unter der Überschrift */
  html.film .karte-wrap { max-width: min(300px, 74svh); }
  /* Referenzen: 3 × 3 wie am Desktop, flachere Logoflächen */
  html.film .referenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  html.film .referenz:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  html.film .referenz .logo-flaeche { height: clamp(60px, 17svh, 80px); padding: .6rem 1rem; }
  html.film .referenz .beschriftung { flex-direction: row; align-items: baseline; gap: .6rem; padding: .4rem .7rem .45rem; font-size: .7rem; }
  /* Kontakt: grüne Kachel links, Formular rechts, Fußzeile darunter */
  html.film .kontakt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }   /* Kachel breiter: weniger Zeilen, flacher */
  html.film .kontakt-kachel { padding: 1.1rem 1.3rem 1.2rem; --muted: rgba(255, 255, 255, .92); }   /* kleiner Text auf Grün braucht mehr Kontrast */
  html.film .kontakt .untertitel { font-size: .9rem; margin-bottom: .9rem; }
  html.film .kapazitaet { font-size: .74rem; margin: -.3rem 0 .9rem; }
  html.film .direkt { gap: .35rem; margin-top: .6rem; }
  html.film .direkt-link { font-size: 1.1rem; }
  html.film .adresse { font-size: .82rem; line-height: 1.3; margin-top: .5rem; }
  html.film .form { gap: .55rem; padding: 1rem 1.1rem; }
  html.film .form .zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
  html.film .form input, html.film .form textarea { min-width: 0; width: 100%; padding: .5rem .2rem; }   /* Felder schrumpfen mit der Spalte (sonst ragt das Formular bei 640 px hinaus) */
  html.film .form textarea { min-height: 64px; }
  html.film .fuss { padding: 1.2rem var(--rand) 1.4rem; }
  /* bis 800 px Breite: Name und Branche der Referenzen untereinander, sonst brechen „Historische Bauelemente“ und „Restaurant und Unterkunft“ um */
  @media (max-width: 800px) { html.film .referenz .beschriftung { flex-direction: column; align-items: flex-start; gap: .05rem; } }
  /* iPhone SE quer (≤ 720 px breit): Leistungskarten etwas enger */
  @media (max-width: 720px) {
    html.film .karte { padding: .6rem .75rem .7rem; }
    html.film .karte h3 { font-size: .92rem; }
    html.film .karte p { font-size: .76rem; }
  }
  /* sehr kleine Handys quer (unter 600 px breit, z. B. 568 × 320): Einstieg und Kontakt einspaltig wie im Hochformat */
  @media (max-width: 599px) {
    html.film .held { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; min-height: 0; }
    html.film .held-text { grid-column: 1; grid-row: 2; margin-bottom: 1.4rem; }
    html.film .szene-1 .karte-c.k-plan { grid-column: 1; grid-row: 3; justify-self: start; margin: 0; padding-bottom: 2.6rem !important; width: calc(100% - 2rem) !important; }
    html.film .szene-1 .karte-c.k-kapa { grid-column: 1; grid-row: 4; margin: -1.8rem 0 0 0 !important; width: min(300px, 75%) !important; }
    html.film .kontakt { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ============ Große und sehr breite Bildschirme (ab 1921 px Breite; Nacht 19.10.2026) ============
   Bis 1920 px Breite bleibt alles, wie es ist (freigegeben). Darüber wächst die ganze Komposition mit: die Grundschrift (rem) im Verhältnis
   zu 1920 × 1080, die knappere Seite entscheidet (2560 × 1440: × 1,33, 4K: × 2; 21:9 und 32:9 mit 1080 px Höhe: × 1), so passt jede Szene
   weiter in die Höhe. Die festen Pixelmaße des Entwurfs stehen hier in rem (1 rem = 16 px bis 1920 × 1080 – dieselben Werte), Haarlinien
   bleiben 1 px. Die Bühne (--max) hat 17/24 der Breite wie bei 1920 × 1080, höchstens das 1,5-Fache der Höhe (Verhältnis von 1440 × 900):
   21:9 und 32:9 werden dadurch breiter gesetzt, aber nie so breit, dass Wortmarke und Zeilen aus dem Maß laufen. */
@media (min-width: 1921px) {
  html { font-size: max(100%, min(100vw / 120, 100vh / 67.5)); }
  :root { --max: max(85rem, min(100vw * 17 / 24, 150vh)); }
  .knopf-klein { min-width: 2rem; height: 1.625rem; } .knopf-klein svg { width: .8125rem; height: .8125rem; }
  .navi a, .fuss nav a { text-underline-offset: .1875rem; }
  .lauflinie { height: .125rem; }
  .k-plan { width: min(29.375rem, calc(100% - 2.5rem)); }                    /* 470 px */
  .k-kapa { width: min(20rem, 64%); }                                         /* 320 px */
  .logo-kachel { width: 11.875rem; height: 4.375rem; }                        /* 190 × 70 px */
  .karte-wrap { max-width: min(27.5rem, 44vh); }                              /* 440 px */
  .leg::before { width: .625rem; height: .625rem; }
  .referenz .logo-flaeche { height: clamp(5.25rem, 13vh, 8.75rem); }          /* 84 … 140 px */
  .direkt-link svg { width: 1.25rem; height: 1.25rem; }
  .form textarea { min-height: 5.625rem; }
  .rechts { max-width: 47.5rem; }                                             /* Impressum, Datenschutz: 760 px */
  /* Schatten und Glas wachsen mit (sonst wirken sie auf 4K halb so weich) */
  :root { --schatten: 0 1.875rem 5rem rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05); }
  :root[data-theme="light"] { --schatten: 0 1.5rem 3.75rem rgba(0, 0, 0, .16); }
  .szene.a { --schatten: 0 1.875rem 5rem rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05); }
  .szene.b { --schatten: 0 1.5rem 3.75rem rgba(0, 0, 0, .16); }
  :root[data-theme="light"] .szene.a { --schatten: 0 1.5rem 3.75rem rgba(0, 0, 0, .16); }
  :root[data-theme="light"] .szene.b { --schatten: 0 1.875rem 5rem rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .05); }
  .szene.a, :root[data-theme="light"] .szene.b { --glas-filter: blur(.375rem) brightness(.38); --glas-schatten: 0 1.375rem 3.375rem -1.125rem rgba(70, 200, 70, .26), 0 0 0 1px rgba(255, 255, 255, .05); }
  .szene.b, :root[data-theme="light"] .szene.a { --glas-filter: blur(.375rem); --glas-schatten: 0 1.125rem 2.25rem -.875rem rgba(16, 110, 20, .42), 0 .1875rem .5rem -.1875rem rgba(0, 0, 0, .1); }
  html.szenen .szene.schiebt { box-shadow: 0 -1.875rem 5.625rem rgba(0, 0, 0, .45); }
}

/* ============ Nachträge aus der Gesamtprüfung (Nacht 19.10.2026) ============ */
/* Startseite ohne Szenen und ohne Film („Bewegung reduzieren“, jede Breite): Kopfzeile als Balken in der Farbe des Abschnitts darunter
   (effekte.js kopfFarbe) statt Differenz-Mischung – über Grün ergab die Mischung in Safari Lila */
html:not(.szenen):not(.film):not(.unterseite) .kopf { mix-blend-mode: normal; background: var(--kopf-bg, #1c1c1c); color: var(--kopf-fg, #f2f2f0); }
/* Referenzen 701–860 px: Name und Branche untereinander (sonst bricht „Historische Bauelemente“ allein um und die Reihe wird ungleich hoch) */
@media (min-width: 701px) and (max-width: 860px) { html.film .referenz .beschriftung { flex-direction: column; align-items: flex-start; gap: .05rem; } }
/* Film: Netzplan, Glasfeld und Kundenband folgen dem Finger ohne Nachlauf (ihre Übergänge gelten nur für den Auftritt beim Laden) */
html.film:not(.intro-mitte) .held .karte-c, html.film:not(.intro-mitte) .szene-1 > .logos { transition: none; }

/* ============ Leistung im Szenenmodus (iPad und Tablets quer, gilt überall unter html.szenen; 19.10.2026) ============
   Bisher wurde in jedem Übergang fast jede Szene pro Bild als Ganzes neu gemalt: Hintergrund per color-mix (Szene 2 und 4), fliegende Elemente
   ohne eigene Ebene, und unter allem die Körnung mit Überlagerungsmischung – auf dem iPad (doppelte Pixeldichte, Safari malt Ebenen auf der CPU)
   je Szene ≈ 3,9 Mio. Pixel pro Bild. Jetzt: was sich bewegt, ist für die Dauer seines Auftritts eine eigene Ebene (nur Verschieben und Deckkraft,
   das erledigt der Grafikchip ohne neu zu malen), der Grund von Szene 2 und 4 wird nur noch überblendet. Aussehen unverändert.
   Nur unter html.szenen – der Handy-Film bleibt, wie er ist. Dazu in effekte.js: div.szenengrund (+ div.szenendunst in Szene 4) in jeder Szene,
   Klasse .kommt an der eintretenden Szene. */

/* 1. Grund als eigenes Element: Farbe, Lichtflecken und Körnung wie bisher (::before/::after der Szene), jetzt in div.szenengrund – einer
      abgeschlossenen Gruppe. Die Körnung mischt sich wie bisher nur mit Farbe und Lichtflecken; die Inhalte darüber dürfen eigene Ebenen sein,
      ohne dass die Mischung über Ebenengrenzen hinweg gerechnet werden müsste (teuer, in Safari unsicher). Einziger Unterschied: die große
      Kontur-Ziffer (.riesennr) liegt jetzt über statt unter der Körnung – ihre 1-px-Linie ist um wenige Tonwerte ruhiger. */
.szenengrund, .szenendunst { display: none; }
html.szenen .szene, html.szenen .szene.mischt, html.szenen .szene.schiebt.halb, html.film-flaeche .szene { background-color: transparent; }
html:is(.szenen, .film-flaeche) .szene::before, html:is(.szenen, .film-flaeche) .szene::after { content: none; }
html.szenen .szene > :is(.szenengrund, .szenendunst) { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html:is(.szenen, .film-flaeche) .szene > .szenengrund { background: var(--bg); }
html:is(.szenen, .film-flaeche) :is(.szenengrund, .szenendunst)::before, html:is(.szenen, .film-flaeche) :is(.szenengrund, .szenendunst)::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
html:is(.szenen, .film-flaeche) :is(.szenengrund, .szenendunst)::before { background: radial-gradient(55% 45% at 18% 28%, rgba(255, 255, 255, .11), transparent 70%), radial-gradient(45% 55% at 82% 72%, rgba(255, 255, 255, .09), transparent 70%), radial-gradient(35% 35% at 62% 18%, rgba(255, 255, 255, .06), transparent 70%); }
html:is(.szenen, .film-flaeche) .szene.b > :is(.szenengrund, .szenendunst)::before { background: radial-gradient(55% 45% at 22% 30%, rgba(0, 0, 0, .09), transparent 70%), radial-gradient(45% 55% at 80% 72%, rgba(0, 0, 0, .07), transparent 70%); }
html:is(.szenen, .film-flaeche) :is(.szenengrund, .szenendunst)::after { opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html:is(.szenen, .film-flaeche) .szene-1 > .szenengrund::after { opacity: .09; }
/* 2. Szene 2 (80 → 100 % deckend) und Szene 4 (0 → 100 %): statt die Hintergrundfarbe pro Bild neu zu mischen, wird der Grund überblendet;
      solange die Szene eintritt, ist er eine eigene Ebene. Szene 4: bisher lagen Lichtflecken und Körnung schon ab dem ersten Bild voll über
      Szene 3 (heller Schleier), während nur die Farbe einblendete. Diesen Schleier zeichnet jetzt .szenendunst (Lichtflecken + Körnung ohne
      Farbe, wie bisher), er blendet aus, während der Grund einblendet. Abweichung zur Farbmischung unterwegs im Mittel ≤ 3, höchstens 10 Tonwerte
      (Körnung mitten in der Blende etwas schwächer), in Ruhe keine. */
html.szenen .szene.schiebt.halb > .szenengrund { opacity: calc(.8 + .2 * var(--ein)); }
html.szenen .szene.mischt > .szenengrund { opacity: var(--ein); }
html.szenen .szene.mischt > .szenendunst { opacity: calc(1 - var(--ein)); }
html.szenen .szene.kommt:is(.halb, .mischt) > :is(.szenengrund, .szenendunst) { will-change: opacity; }
/* 3. Eigene Ebenen für alles, was fliegt oder blendet – nur in sichtbaren Szenen (.an: höchstens zwei zugleich, schont den Grafikspeicher) und
      nur, solange sie gehen oder kommen: Chrome legt solche Ebenen auf ganze Pixel, in Ruhe stünde Text sonst um Bruchteile eines Pixels versetzt.
      Ausnahmen: Szene 2 beim Zoom in den Laptop (.geht) und Szene 3 beim Aufklappen (.kommt) – dort wird skaliert, eine eingefrorene Ebene würde
      unscharf (wie bisher bewusst: „der Zoom muss scharf bleiben“). Die Sturzkachel wächst in 4→5 auf die Größe der Kontaktkachel: dort nur
      Deckkraft-Ebene, damit sie bei jeder Größe scharf neu gerastert wird (beim Hereinfliegen in 3→4 wird sie nur verschoben). */
/*    Nur auf Touch-Geräten (Gesamtprüfung 19.10.): am Desktop mit Maus und Trackpad lief es schon vorher flüssig, und das Anlegen der Ebenen
      ließ dort die Schrift bei Beginn und Landung eines Übergangs um Bruchteile eines Pixels nachrucken – der Desktop bleibt wie freigegeben.
      Touch (iPad): die Ebenen bleiben auch in Ruhe stehen – sonst müsste beim ersten Bild jedes Übergangs (und bei jedem Hin und Her des Fingers
      über den Anfang) alles auf einmal neu gemalt werden. Preis: ruhende Ebenen liegen auf ganzen Gerätepixeln (Text und Kanten um bis zu 1 CSS-Pixel
      versetzt, nicht zu sehen, weil sie in Ruhe stehen bleiben); dafür mehr Grafikspeicher (Spitze ≈ 150 MB mitten in 1→2). Szene 5 ausgenommen:
      sie geht nicht weiter, ihre ruhenden Ebenen kosteten nur Speicher. */
@media (pointer: coarse) {
  html.szenen .szene.an:is(.geht, .kommt):not(.klappt.kommt):not(.szene-2.geht) :is(.flieg:not(.sturz), .riesennr, .kennung, .schleier, .held-text, .k-plan, .logos),
  html.szenen .szene.an.kommt .referenz.sturz { will-change: transform, opacity; }
  html.szenen .szene.an.geht .referenz.sturz, html.szenen .szene.an.geht .referenz.sturz .gruenlage { will-change: opacity; }
  html.szenen .szene.an:not(.szene-5):not(.klappt.kommt):not(.szene-2.geht) :is(.flieg:not(.sturz), .riesennr, .kennung, .schleier, .held-text, .k-plan, .logos) { will-change: transform, opacity; }
  html.szenen .szene.an.szene-4:not(.kommt) .referenz.sturz, html.szenen .szene.an.szene-4:not(.kommt) .referenz.sturz .gruenlage { will-change: opacity; }
}
/* 4. Schatten der hereinschiebenden Szene 2 nur, solange sie kommt: in Ruhe liegt er ganz außerhalb des Bildschirms (die Szene füllt ihn aus),
      vergrößert aber ihre Ebene um gut die Hälfte – und die wird beim Zoom 2→3 in jedem Bild neu gerastert. */
html.szenen .szene.schiebt:not(.kommt) { box-shadow: none; }

/* ============ Leistung im Film auf Tablets (iPad Safari ruckelte; 19.10.2026) – Aussehen unverändert ============
   Gemessen in Chrome (820 × 1180 @2, CPU ×4, Touch-Wischen), für WebKit abgeleitet. Ziel: in den Zonen nur noch Ebenen bewegen
   (transform, opacity), keine großen Flächen pro Bild neu malen.
   1. Übergang 1→2: Überschrift, Untertitel und Karten von Szene 2 fliegen als eigene Ebenen herein. Vorher wurde Szene 2 dabei in jedem
      Bild vollflächig neu gemalt (Chrome: ganze Szene ≈ 6 Kacheln pro Bild) – mit Verläufen, Körnung und Kartenschatten. Nur solange
      Szene 2 in Zonennähe ist (film-nah endet mit 1→2): im Laptop-Zoom 2→3 bleibt sie wie bisher ohne Ebene und damit scharf. */
html.film .szene-2.film-nah .flieg { will-change: transform, opacity; }
/*    Laptop-Zoom 2→3: der dunkle Schatten von Szene 2 liegt dann oberhalb des Bildschirms (Szene 2 unten bündig) und ist unsichtbar, vergrößert
      aber die Ebene, die im Zoom in jedem Bild neu gerastert wird – ohne ihn halbiert sich der Aufwand (Gesamtprüfung 19.10.). Die Schürze bleibt. */
html.film .halt > .szene-2.geht { box-shadow: 0 var(--film-schuerze, 0px) 0 0 var(--bg); }
/* 4. Film ab 701 px (iPad hochkant, Foldable, kleine Fenster): Grund, Lichtflecken und Körnung wie im Szenenmodus in div.szenengrund unter dem
      Inhalt (Klasse film-flaeche, effekte.js). Erst so können die großen Kontur-Ziffern als eigene Ebene fliegen, ohne dass die Körnung über
      Ebenengrenzen gemischt wird – sie wurden vorher in jedem Bild neu gemalt (größter Rest in 1→2, 3→4, 4→5). Ziffer liegt über statt unter der
      Körnung (wie im Szenenmodus, nicht zu sehen). Szene 4 blendet ihren Grund wie bisher mit --ein ein. Handy (bis 700 px): unverändert. */
html.film-flaeche .szene > .szenengrund { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.film-flaeche .szene-4 > .film-grund { display: none; }
html.film-flaeche .szene-4 > .szenengrund { opacity: var(--ein); }
html.film-flaeche .szene-4.film-nah > .szenengrund { will-change: opacity; }
html.film-flaeche .szene.film-nah > .riesennr { will-change: transform, opacity; }
/* 2. Kopfzeile: die Mischfarbe zwischen zwei Szenen war color-mix() als Hintergrund – neu gemalt in jedem Bild der Zonen 1→2, 3→4, 4→5.
      Jetzt: Grundfarbe (--kopf-bg) plus eine eigene Ebene in der kommenden Farbe (--kopf-bg2), die nur ihre Deckkraft (--kopf-mix)
      ändert. Ergibt dieselbe Farbe (Mischung in sRGB), effekte.js (filmKopf) setzt die drei Werte. */
html.film .kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kopf-bg2, transparent); opacity: var(--kopf-mix, 0); will-change: opacity; pointer-events: none; }
html.film:not(.film-marke) .kopf::before { display: none; }   /* über dem Einstieg ist die Kopfzeile durchsichtig */
/* 3. Körnung: effekte.js (koernungAlsBild) zeichnet das SVG-Rauschen einmal als Bitmap in Geräteauflösung und setzt es mit einer
      eigenen festen Regel als Hintergrund von .szene::after (Klasse koernung-bild). WebKit rechnet das SVG mit feTurbulence sonst bei
      jedem Neumalen einer Szene neu (je Kachel) – im Laptop-Zoom, beim Einklappen der Wortmarke und unter den wandernden Kontur-Ziffern
      also in jedem Bild. Hier nur die Kachelgröße: 220 px wie das SVG (das Bitmap hat 220 × Gerätepixel). */
html.film.koernung-bild .szene::after { background-size: 220px 220px; }

/* Kontaktformular: Rückmeldung nach dem Senden (kontakt.php). Das Formular selbst bleibt unverändert; die Meldung erscheint nur bei
   Bedarf unter dem Knopf, falsche Felder bekommen eine rote Linie, der Knopf ist während des Sendens gedämpft. */
.form .form-meldung { margin: 0; padding: .1rem 0 .1rem .7rem; border-left: 3px solid #111; font-size: .8rem; line-height: 1.4; color: #111; }
.form .form-meldung.ok { border-left-color: var(--gruen); }
.form .form-meldung.fehler { border-left-color: #c0261f; }
.form .form-meldung a { color: inherit; }
.form .klein a { text-decoration: underline; text-underline-offset: 2px; }   /* Link zur Datenschutzerklärung im Hinweis unter dem Formular */
.form [aria-invalid="true"] { border-bottom-color: #c0261f; }
.form .knopf.primaer:disabled { opacity: .6; cursor: progress; }
.sr-nur { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ============ Ältere Browser ohne color-mix() (Safari bis 16.1 = iOS 15/16.0–16.1, Chrome/Samsung Internet bis 110; Auslieferung 19.10.2026) ============
   Ohne diesen Block werden dort alle Werte mit color-mix() ungültig: der Ring „vor Ort“ auf der Karte wird eine schwarze Scheibe, die
   Laptop-Karte (1.2) verliert ihren weißen Grund (im hellen Design dunkle Schrift auf dunklem Grund) und ihr Symbol, die Kontur-Ziffern
   verschwinden. Hier dieselben Farben ohne Mischfunktion (Deckkraft statt Mischung). Neuere Browser lesen diesen Block nicht – dort bleibt
   alles unverändert. */
@supports not (color: color-mix(in srgb, red calc(50%), blue)) {
  .karte-svg .ring { fill: var(--gruen); fill-opacity: .2; }
  .riesennr { -webkit-text-stroke: 1px var(--text); opacity: calc(.22 * (1 - var(--aus))); }
  #wortlayer .riesenwort span { color: var(--grau); }
  html.film .held .riesenwort.platz span { color: var(--wort-von); }
  /* Laptop-Karte: weißer Grund als eigene Fläche, die über die Deckkraft ausblendet (wie die Mischung mit transparent) */
  html.szenen .szene-2 .karte.laptop, html.film .szene-2 .karte.laptop { background-color: transparent; }
  html.szenen .szene-2 .karte.laptop::after, html.film .szene-2 .karte.laptop::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--papier); pointer-events: none; }
  html.szenen .szene-2 .karte.laptop::after { opacity: calc(1 - var(--a)); }
  html.film .szene-2 .karte.laptop::after { opacity: max(0, 1 - var(--a) * 3); }
  html.film .szene-2 .karte.laptop .iso { stroke: #111; }
  html.szenen .szene-2 .karte.laptop .iso .schirm { fill: #1c1c1c; fill-opacity: var(--schirm, 0); }
  html.film .szene-2 .karte.laptop .iso .schirm { fill: var(--film-schirm, #1c1c1c); fill-opacity: var(--schirm, 0); }
}

/* ============ Notbetrieb: ohne JavaScript oder wenn config.js/app.js scheitern ============
   index.html, impressum.html und datenschutz.html tragen am Ende ein <noscript id="ohne-js"> mit Kontakt bzw. Impressum/Datenschutz als
   festem Text. Ohne JavaScript zeigt der Browser es selbst (die leeren Bereiche blendet eine kleine Regel im <head> aus); scheitert
   config.js (z. B. Tippfehler) oder der Aufbau, setzt app.js dasselbe ein und die Klasse html.notfall. Im Normalbetrieb greift nichts davon. */
html.notfall .sprunglink, html.notfall main, html.notfall .kopf, html.notfall .fuss, html.notfall #wortlayer, html.notfall .randzeichen, html.notfall .lauflinie { display: none !important; }
.ohne-js .ohne-js-marke { font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; margin-bottom: 2.5rem; }
.ohne-js h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 2.6rem; }
.ohne-js .untertitel { max-width: 48ch; }
.ohne-js a { text-decoration: underline; text-underline-offset: 3px; }
.ohne-js .ohne-js-links { display: flex; gap: 1.4rem; margin-top: 2.6rem; }
/* Ohne Effekte (effekte.js fehlt oder scheitert, sehr alte Browser): ruhige einfache Seite statt halb aufgebauter Szenen.
   app.js setzt html.ohne-effekte nur in diesem Fall. Die einfachen Symbole aus app.js (bis effekte.js sie durch die Zeichnungen ersetzt,
   auf langsamen Verbindungen einige Sekunden lang sichtbar) bekommen eine feste Größe – ohne sie füllten sie die ganze Karte. */
html.ohne-effekte .held { grid-template-columns: minmax(0, 1fr); padding-top: 6rem; }
.karte .icon > svg:not(.iso) { width: 2.6rem; height: 2.6rem; }
html.ohne-effekte { --logo: brightness(0) invert(1); }
html.ohne-effekte[data-theme="light"] { --logo: brightness(0); }
/* Barrierefreiheit (19.10.2026): nur für Tastatur und Screenreader – am Erscheinungsbild ändert sich nichts.
   Sprungmarke „Zum Inhalt springen“ erscheint erst, wenn sie mit der Tab-Taste angesteuert wird. */
.sprunglink { position: fixed; left: var(--rand); top: .5rem; z-index: 60; padding: .55rem .9rem; background: var(--text); color: var(--bg); font-size: .78rem; font-weight: 500; transform: translateY(calc(-100% - 1rem)); }
.sprunglink:focus { transform: none; }
/* Abschnitte, die nach einem Sprung (Navigation, Sprungmarke) den Fokus bekommen: kein Rahmen um den ganzen Abschnitt */
[data-fokusziel]:focus { outline: none; }