/* Aingel Variante 13 – „Der Dirigent“: der Opener der Startseite (Hero bis zur ersten Sektion)
   Das Modell wurde live in Blender über das Blender-MCP gebaut (modelle/dirigent-mcp.py), Licht: Poly Haven.
   Hero und der Abschnitt „Eure Plattform“ bilden einen dunklen Raum (.raum), in beiden Modi dunkel. Nichts klebt: die
   Seite scrollt normal, die 3D-Leinwand läuft mit (js/dirigent.js), js/hero.js steuert Flug, Leitungen, Rahmen und
   Freigabe. Tokens, Schriften, Knöpfe, Kopfleiste und Sternenhimmel kommen aus css/basis.css.
   Farbe ist Highlight: Weiß/Silber trägt, Eisblau ist die Leitfarbe, Orange gehört dem Menschen; die vier Agenten
   tragen ihre Rollenfarbe – im Raster jede Kachel nur die ihres Agenten. */

/* =========================================================
   DER DUNKLE RAUM – Hero und „Eure Plattform“ (nichts klebt)
   ========================================================= */
.raum { position: relative; z-index: 2; background: var(--grund); color: var(--text); overflow: clip; }
/* Nebenelemente: ein minimaler Sternenhimmel – er weicht der Maus gegenläufig aus */
.umfeld {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: opacity 1.2s var(--kurve) .3s, transform .9s var(--kurve);
}

/* Die 3D-Leinwand liegt im Raum und läuft mit der Seite: js/dirigent.js setzt je Bild Höhe und Lage (sie deckt immer
   den sichtbaren Bildschirm ab). Über Text und Block, damit die Agenten in die Module fliegen. */
.buehne { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 4; pointer-events: none; visibility: hidden; }
.mit-3d .buehne { visibility: visible; }
.buehne__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity .6s var(--kurve); }
.mit-3d .buehne__leinwand { opacity: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; min-height: 100svh; }
.hero__raster {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, min(540px, 42vw)); align-content: center;
  padding-block: calc(var(--kopf-h) + 32px) 88px;
}
.hero__titel { font-size: var(--h1); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin-bottom: 26px; }
.hero__titel span { display: block; }
.hero__mensch { color: var(--mensch); }
.hero__lead { color: var(--text-leise); max-width: 44ch; margin-bottom: 30px; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__hinweis { margin-top: 16px; }

/* Der Platz des Dirigenten: rechts, groß – der Haupt-Agent ist etwa die halbe Bildschirmhöhe hoch (--ausdehnung:
   so viele Modell-Einheiten fasst die Seite des Ankers; der Haupt-Agent ist 1 Einheit hoch) */
.anker { position: absolute; display: block; pointer-events: none; }
.hero__motiv {
  --seite: min(96svh, 58vw, 960px);
  position: absolute; top: 50%; right: calc(var(--seite) * -.05); width: var(--seite); height: var(--seite);
  translate: 0 -48%; pointer-events: none;
}
.anker--ruhe { inset: 0; --ausdehnung: 1.9; }
.anker--mitte {
  --seite: min(76svh, 46vw, 780px); --ausdehnung: 2.1;
  width: var(--seite); height: var(--seite);
  left: calc(50% - var(--seite) / 2); top: calc(47% - var(--seite) / 2);
}
/* Das Standbild aus Blender: ohne 3D (kein WebGL, „Daten sparen“) und ohne JavaScript – nie über der Animation */
.buehne__bild { width: 100%; height: 100%; object-fit: contain; transition: opacity .5s var(--kurve); }
.js .buehne__bild { opacity: 0; }
.js.ohne-3d .buehne__bild { opacity: 1; }

.hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; margin: 0;
  display: grid; justify-items: center; gap: 10px;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise);
  transition: opacity .4s var(--kurve);
}
.kopf.ist-gescrollt ~ main .hero__scroll { opacity: 0; }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(#A3A3A3, transparent); transform-origin: top; animation: tropfen 2.4s var(--kurve) infinite; }
@keyframes tropfen { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero__pause {
  position: absolute; z-index: 5; right: var(--rand); bottom: 22px;
  min-height: 36px; padding: 8px 14px; border-radius: var(--r-pille); border: 1px solid var(--linie); background: rgb(7 8 11 / .6);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--text-leise); cursor: pointer;
  transition: opacity .4s var(--kurve), color .2s var(--kurve), border-color .2s var(--kurve);
}
.hero__pause:hover { color: var(--text); border-color: var(--code); }
/* Gescrollt: der Knopf gehört zur Ruhe im Hero – er verschwindet wie der Hinweis „Scrollen“, statt über dem fliegenden
   Dirigenten oder halb unter der Kopfleiste zu liegen; oben ist er wieder da */
.kopf.ist-gescrollt ~ main .hero__pause { opacity: 0; visibility: hidden; transition: opacity .3s var(--kurve), visibility 0s .3s; }
.no-js .hero__pause, .ohne-3d .hero__pause { display: none; }

/* Ladescreen: der Dirigent entsteht in der Bildmitte; je Agent, der sich löst, leuchtet ein Punkt in seiner Farbe */
.lader {
  position: absolute; z-index: 5; left: 50%; bottom: 9svh; translate: -50% 0;
  display: grid; justify-items: center; gap: 14px; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--kurve);
}
.lader__punkte { display: flex; gap: 10px; }
.lader__punkte i { width: 6px; height: 6px; border-radius: 50%; background: #ECECEC; opacity: .16; transition: opacity .35s var(--kurve), background-color .35s var(--kurve); }
.lader__punkte i.ist-an { opacity: 1; background: var(--glas, var(--code)); }
.lader__name { font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise); }
.ist-laden { overflow: hidden; }
.ist-laden .lader { opacity: 1; }
.ist-laden .kopf { opacity: 0; transform: translateY(-12px); }
.ist-laden .lade-teil { opacity: 0; transform: translate3d(0, 22px, 0); }
.ist-laden .umfeld { opacity: 0; }
.lade-teil { transition: opacity .7s var(--kurve), transform .8s var(--kurve); }
.hero__titel .lade-teil:nth-child(2) { transition-delay: .07s; }
.hero__titel .lade-teil:nth-child(3) { transition-delay: .14s; }
.hero__lead.lade-teil { transition-delay: .21s; }
.hero__aktionen.lade-teil { transition-delay: .28s; }
.hero__hinweis.lade-teil, .hero__scroll.lade-teil, .hero__pause.lade-teil { transition-delay: .35s; }

/* Niedrige Querformate: kompakter */
@media (min-width: 861px) and (max-height: 640px) {
  .hero__raster { padding-block: calc(var(--kopf-h) + 6px) 24px; }
  .hero__titel { font-size: clamp(1.9rem, 4.2vw, 2.6rem); margin-bottom: 12px; }
  .hero__lead { font-size: 15px; line-height: 1.45; margin-bottom: 12px; }
  .hero__hinweis, .hero__scroll { display: none; }
  .hero .dach { margin-bottom: 8px; }
  .hero .knopf { min-height: 42px; padding: 9px 18px; }
}

/* Telefon und schmale Tablets: das Objekt im ersten Bild ganz sichtbar, der Text darunter – nie darauf.
   Owner 13.10. abends: die Animation „bisschen weiter nach unten, sodass mehr Platz ist, dass man sieht, wie die
   Agenten nach oben fliegen beim Scrollen“ – über dem Objekt bleibt Luft (--motiv-luft), das Objekt ist etwas kleiner. */
@media (max-width: 860px) {
  .hero { --motiv-seite: clamp(230px, min(86vw, 39svh), 440px); --motiv-luft: clamp(24px, 9svh, 88px); }
  .hero__raster {
    align-content: start; grid-template-columns: minmax(0, 1fr);
    padding-block: calc(var(--kopf-h) + 4px) 28px;
  }
  .hero__motiv {
    --seite: var(--motiv-seite);
    position: relative; top: auto; right: auto; translate: none; margin: var(--motiv-luft) auto 6px;
  }
  .anker--ruhe { --ausdehnung: 1.95; }
  .anker--mitte { --seite: min(90vw, 46svh); --ausdehnung: 2.1; top: calc(40% - var(--seite) / 2); }
  .hero__titel { font-size: clamp(2.1rem, 9.4vw, 2.9rem); margin-bottom: 12px; }
  .hero__lead { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .hero__aktionen .knopf--sekundaer { display: none; }
  .hero__hinweis { margin-top: 8px; }
  .hero .dach { margin-bottom: 10px; }
  .hero__scroll { display: none; }
  /* Am Telefon: nur ein kleines Symbol rechts unten an der Bühne */
  .hero__pause { top: calc(var(--kopf-h) + 4px + var(--motiv-luft) + var(--motiv-seite) - 38px); bottom: auto; right: 14px; width: 32px; min-height: 32px; padding: 0; font-size: 0; display: grid; place-items: center; }
  .hero__pause::before { content: ''; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
  .hero__pause[aria-pressed='true']::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }
  .lader { bottom: 10svh; }
}
@media (max-width: 860px) and (max-height: 740px) {
  .hero__titel { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .hero__lead { font-size: 15px; line-height: 1.45; margin-bottom: 12px; }
  .hero__hinweis { display: none; }
  .hero .dach { margin-bottom: 8px; }
}

/* =========================================================
   DER ERSTE ABSCHNITT – der Dirigent an der Spitze, Leitungen, vier Module, Freigabe
   ========================================================= */
.plattform-abschnitt { position: relative; z-index: 2; padding: clamp(64px, 12svh, 140px) 0 clamp(72px, 10vw, 120px); }
.bau { position: relative; display: grid; }

/* Kopf: Text in der Mitte, darunter der Platz des Dirigenten – er steht vor seinem Orchester */
.bau__kopf { display: grid; justify-items: center; text-align: center; }
.bau__text { order: -1; display: grid; justify-items: center; max-width: 660px; }
.bau__kopf .dach { margin-bottom: 14px; }
.bau__titel { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; margin-bottom: 14px; text-wrap: balance; }
.bau__lead { color: var(--text-leise); max-width: 52ch; }
.dock { --dock: clamp(150px, 15vw, 196px); position: relative; display: block; width: var(--dock); height: var(--dock); margin-top: 18px; }
.anker--bau { inset: 0; --ausdehnung: 1.55; }
/* Hier beginnt die Leitung: unter der Spitze des Dirigenten */
.dock__mund { position: absolute; left: 50%; bottom: 6%; width: 1px; height: 1px; }

/* Stand der Plattform: unter dem Block, links – außerhalb aller Flugwege (Leitungen oben, Du rechts) */
.plattform__stand {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  font: 500 13px/1.2 var(--mono); letter-spacing: .04em; color: var(--text-leise);
}
.plattform__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--geruest); transition: background-color .4s var(--kurve); }
[data-stand='laeuft'] .plattform__punkt { background: var(--code); }
[data-stand='frei'] .plattform__punkt { background: var(--glas-pruefung); }
.plattform__name { color: var(--text); }
.plattform__status::before { content: '·'; margin-right: 10px; color: var(--geruest); }

/* Der Block: Module als Gerüst (gestrichelt) – ein Agent zieht den Rahmen in seiner Farbe auf, dann ist es fest.
   Bento: Anbindungen groß (2×2), Anfragen breit (2×1), Oberfläche und Qualität klein; die Fuge in der Mitte bleibt frei –
   durch sie läuft die Leitung zur unteren Reihe. Der Text steht in jedem Modul gleich (Titel, Satz, drei Punkte,
   unten links); nur der Platz des Agenten wechselt die Stelle: A unten rechts neben dem Text (so steht er
   mit dem Text im Bild, auch wenn das hohe Modul oben schon weggescrollt ist), B rechts mittig, C oben mittig,
   D oben rechts. Owner 13.10. abends: „die Agenten müssen nicht in einer farbigen Box sein und nur der highlighted
   Block soll einen farbigen Border haben und die Tags können weg (sodass es bisschen cleaner aussieht)“ – die Module
   stehen fest in neutralem Rand, der Agent schwebt frei in seinem Platz, nur die Freigabe-Zeile trägt Farbe (Orange).
   Die Rollenfarbe zeigt sich nur noch im Agenten selbst, an den Häkchen und im Strich, den er aufzieht. */
.plattform { position: relative; margin-top: 64px; }
.plattform__module {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(330px, auto);
  grid-template-areas: "a a b b" "a a c d";
}
.modul--a { grid-area: a; } .modul--b { grid-area: b; } .modul--c { grid-area: c; } .modul--d { grid-area: d; }
.modul, .freigabe-zeile {
  position: relative; border-radius: var(--r-l); border: 1px dashed var(--geruest);
  transition: border-color .5s var(--kurve), background-color .5s var(--kurve);
}
.modul { display: grid; gap: 18px; padding: 26px; }
/* Der Platz des Agenten: ohne Kasten – nur der Raum, in dem er frei schwebt (js/dirigent.js: 0,86 × die Seite) */
.modul__platz { grid-area: platz; width: 88px; height: 88px; display: grid; place-items: center; }
.modul__platz svg { width: 46px; height: 46px; fill: color-mix(in srgb, var(--glas) 30%, transparent); stroke: var(--glas); stroke-width: 1.4; overflow: visible; }
.modul__text { grid-area: text; display: grid; gap: 10px; align-content: end; justify-items: start; }
/* Titel groß (Owner 13.10. abends: „die Überschriften noch größer“) – in allen Modulen gleich */
.modul h3 { font-size: clamp(1.75rem, 2.7vw, 2.35rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; margin-bottom: 2px; }
.modul p { font-size: var(--text-normal); line-height: 1.5; color: var(--text-leise); max-width: 42ch; }
.modul__liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.modul__liste li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.modul__liste li::before {
  content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 5px;
  border-left: 1.8px solid var(--glas); border-bottom: 1.8px solid var(--glas); transform: translateY(-60%) rotate(-45deg);
}
/* A – groß: oben die Programme, die angebunden werden; unten der Text und rechts daneben der Platz (größer) */
.modul--a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; grid-template-areas: "chips chips" "text platz"; padding: 30px; }
.modul--a .modul__platz { width: 108px; height: 108px; align-self: end; }
.modul--a .modul__platz svg { width: 56px; height: 56px; }
.modul__anschluesse { grid-area: chips; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 8px; }
.modul__anschluesse li { font: 400 12.5px/1 var(--mono); color: var(--text-leise); padding: 9px 12px; border-radius: var(--r-pille); border: 1px solid var(--linie); background: var(--grund); }
.modul__anschluesse li:first-child { border-color: color-mix(in srgb, var(--glas) 40%, var(--linie)); color: var(--text); }
/* B – breit: Text links, Platz rechts mittig */
.modul--b { grid-template-columns: 1fr auto; grid-template-areas: "text platz"; }
.modul--b .modul__platz { align-self: center; }
/* C – klein: Platz oben in der Mitte (dort kommt die Leitung an), darunter der Text */
.modul--c { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "platz" "text"; }
.modul--c .modul__platz { justify-self: center; }
/* D – klein: Platz oben rechts, darunter der Text */
.modul--d { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "platz" "text"; }
.modul--d .modul__platz { justify-self: end; }

/* Die Freigabe-Zeile ist der hervorgehobene Block: als einziger mit farbigem Rand (Orange, der Mensch) */
.freigabe-zeile { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px 20px 26px; }
.freigabe-zeile__text { display: grid; gap: 4px; }
.freigabe-zeile h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.freigabe-zeile p { font-size: var(--text-normal); line-height: 1.45; color: var(--text-leise); }
.freigabe-zeile__knopf {
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 18px; border-radius: var(--r-pille);
  font: 500 15px/1.2 var(--schrift); color: #FFF4EC;
  background: rgb(255 138 61 / .14); border: 1px solid rgb(255 138 61 / .6);
  transition: background-color .35s var(--kurve), border-color .35s var(--kurve), transform .18s var(--kurve);
}
.freigabe-zeile__knopf::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mensch); transition: all .3s var(--kurve); }
/* Gedrückt: der Mensch hat freigegeben – ein Häkchen in Orange */
.freigabe-zeile__knopf.ist-gedrueckt, .no-js .freigabe-zeile__knopf { background: rgb(255 138 61 / .24); }
.freigabe-zeile__knopf.ist-gedrueckt::before, .no-js .freigabe-zeile__knopf::before { width: 10px; height: 5px; border-radius: 0; background: transparent; border-left: 2px solid var(--mensch); border-bottom: 2px solid var(--mensch); transform: translateY(-2px) rotate(-45deg); }
.freigabe-zeile__knopf.ist-druck { transform: scale(.94); }

.bau__schluss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: clamp(32px, 4vw, 48px); }
.schluss__satz { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }

/* Die Leitungen und Rahmen (js/hero.js zeichnet sie aus dem Layout): der Plan gestrichelt, darüber der Strom in der
   Farbe des Agenten (--rolle am Pfad), genau bis zur Spitze des Agenten, der ihn gerade zieht */
.leitungen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.leitungen path { fill: none; vector-effect: non-scaling-stroke; }
/* Owner 13.10. abends: „die Agenten-Linien können verblassen, nachdem die Agenten die Bahn geflogen sind“ – ist ein
   Agent in seinem Modul (.ist-ruhig, js/hero.js), blenden seine Leitung und ihr Plan langsam ganz aus */
.leitung__plan { stroke: var(--geruest); stroke-width: 1; stroke-dasharray: 3 5; transition: opacity 1.4s var(--kurve) .3s; }
.leitung__strom { stroke: var(--strich, var(--code)); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; opacity: .9; transition: opacity 1.4s var(--kurve) .3s; }
.leitung__plan.ist-ruhig, .leitung__strom.ist-ruhig { opacity: 0; }
.rahmen__strom { stroke: var(--strich, var(--code)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; transition: opacity .9s var(--kurve) .15s; }
.rahmen__strom.ist-ruhig { opacity: 0; }
.no-js .leitungen { display: none; }

/* ---------- Gesteuert (mit JavaScript): Gerüst → Agent zieht den Rahmen → fest ---------- */
.js .modul__text > *, .js .modul__anschluesse,
.js .freigabe-zeile__text, .js .freigabe-zeile__knopf { opacity: 0; transition: opacity .5s var(--kurve); }
.js .modul__platz svg { opacity: 0; transform: scale(.5); transition: opacity .4s var(--kurve), transform .5s var(--kurve); }
.js .modul.ist-fest .modul__anschluesse { opacity: 1; transition-delay: .15s; }
/* Alle vier laufen: die Freigabe-Zeile wartet auf euch */
.js .freigabe-zeile.ist-da { border-color: rgb(255 138 61 / .45); }
.js .freigabe-zeile.ist-da .freigabe-zeile__text, .js .freigabe-zeile.ist-da .freigabe-zeile__knopf { opacity: 1; }
/* Fest: der Rahmen steht neutral, der Inhalt ist da – Farbe trägt nur die Freigabe-Zeile */
.modul.ist-fest, .no-js .modul { border-style: solid; border-color: var(--linie); background: var(--flaeche); }
.freigabe-zeile.ist-fest, .no-js .freigabe-zeile { border-style: solid; background: var(--flaeche); border-color: rgb(255 138 61 / .5); }
.js .modul.ist-fest .modul__text > * { opacity: 1; }
.js .modul.ist-fest .modul__text > :nth-child(2) { transition-delay: .05s; }
.js .modul.ist-fest .modul__text > :nth-child(3) { transition-delay: .1s; }
.js .modul.ist-fest .modul__text > :nth-child(4) { transition-delay: .18s; }
/* Ohne 3D und ohne JavaScript: der Cursor erscheint als Zeichnung im Platz */
.ohne-3d .modul.ist-fest .modul__platz svg, .no-js .modul__platz svg { opacity: 1; transform: none; }
.js .bau__schluss { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .55s var(--kurve), transform .65s var(--kurve); }
.js .bau__schluss.ist-da { opacity: 1; transform: none; }

/* Tablet: zwei Spalten – Anbindungen hoch links, Anfragen und Oberfläche rechts, Qualität unten breit
   (die Fuge in der Mitte bleibt frei für die Leitung) */
@media (max-width: 1060px) and (min-width: 861px) {
  .plattform__module { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "a c" "d d"; }
  .modul--d { grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "text platz"; }
  .modul--d .modul__platz { align-self: center; }
}
/* Niedrige Fenster am Rechner: knapper */
@media (min-width: 861px) and (max-height: 760px) {
  .plattform__module { grid-auto-rows: minmax(300px, auto); }
  .modul { gap: 14px; padding: 20px 22px 22px; }
  .modul__platz { width: 76px; height: 76px; }
  .modul--a .modul__platz { width: 92px; height: 92px; }
  .dock { --dock: clamp(130px, 13vw, 170px); }
}

/* Telefon: der Dirigent links neben der Überschrift, die Leitung läuft links hinab, die Module als Zeilen daneben */
@media (max-width: 860px) {
  .bau__kopf { grid-template-columns: 88px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; text-align: left; }
  .bau__text { order: 0; justify-items: start; }
  .bau__kopf .dach { margin-bottom: 8px; font-size: 12px; }
  .bau__titel { font-size: clamp(1.5rem, 6.6vw, 2rem); margin-bottom: 6px; }
  .bau__lead { font-size: 15px; line-height: 1.45; }
  .dock { --dock: 88px; margin-top: 0; align-self: start; }
  .anker--bau { --ausdehnung: 1.45; }
  .dock__mund { bottom: 4%; }
  .plattform__stand { padding-left: 52px; font-size: 12px; margin-top: 14px; }
  /* Am Telefon: die Module untereinander, Platz und Text nebeneinander */
  .plattform { padding-left: 52px; margin-top: 44px; }
  .plattform__module { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; grid-auto-rows: auto; gap: 12px; }
  .modul, .modul--a, .modul--b, .modul--c, .modul--d {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "text platz"; gap: 12px; padding: 18px 16px 18px 18px; border-radius: 20px;
  }
  .modul--a { grid-template-rows: auto auto; grid-template-areas: "text platz" "chips chips"; }
  .modul__platz, .modul--a .modul__platz { width: 60px; height: 60px; align-self: start; justify-self: end; }
  .modul__platz svg, .modul--a .modul__platz svg { width: 32px; height: 32px; }
  .modul h3 { font-size: clamp(1.5rem, 6.6vw, 1.75rem); }
  .modul p { font-size: 15px; line-height: 1.45; }
  .modul__liste li { font-size: 14px; }
  .modul__anschluesse { gap: 6px; }
  .modul__anschluesse li { font-size: 11.5px; padding: 7px 10px; }
  /* Der Knopf rechts: links daneben setzt sich Du nach dem Klick (js/dirigent.js), innerhalb der Zeile */
  .freigabe-zeile { margin-top: 12px; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px 14px 18px; border-radius: 20px; }
  .freigabe-zeile h3 { font-size: clamp(1.5rem, 6.6vw, 1.75rem); }
  .freigabe-zeile__knopf { justify-self: end; min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .freigabe-zeile__text p { display: none; }
  .bau__schluss { justify-content: flex-start; gap: 14px; padding-left: 52px; }
  .schluss__satz { font-size: 1.2rem; }
}

/* ---------- Weniger Bewegung: ruhiger, nicht aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .umfeld { transform: none !important; }
  .hero__scroll i { animation-duration: 4.8s; }
  .ist-laden .lade-teil { transform: translate3d(0, 8px, 0); }
  .ist-laden .kopf { transform: none; }
  .js .bau__schluss { transform: translate3d(0, 6px, 0); }
  .js .bau__schluss.ist-da { transform: none; }
}
@media print { .buehne, .lader, .hero__pause, .leitungen { display: none; } }