/* ============================================================
   NEXUP STUDIO , V3
   Bahn: Instrumententafel und Optik-Labor. Ein geschliffener, von innen
   beleuchteter Koerper aus Glas und Metall auf dunkler Werkbank.
   Nicht flach, nicht redaktionell: Material, Tiefe, Licht.

   Farbstrategie: committed dark. Das Blau ist LICHT, keine Farbflaeche.
   Schrift: Montserrat allein, in echten Gewichtssprüngen. Das gehoert zur
   Identitaet und bleibt.
   ============================================================ */

@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* ---- Material ---- */
  --grund:      #070a10;
  --grund-2:    #0a0f17;
  --grund-3:    #0e141e;
  --tinte:      #eef3f9;
  --tinte-2:    rgba(238,243,249,.68);
  /* .44 ergab auf dem Grund 4,01:1 und verfehlte damit die 4,5:1, die Text
     unter 24px braucht. .52 bringt 5,13:1 und laesst den Abstand zu
     --tinte-2 (.68) als Stufe trotzdem stehen. */
  --tinte-3:    rgba(238,243,249,.52);
  --blau:       #3d77bb;
  --blau-hell:  #7fb2ee;
  --blau-tief:  #24518a;
  --linie:      rgba(255,255,255,.10);
  --linie-2:    rgba(255,255,255,.20);

  /* ---- Schrift ---- */
  --schrift: "Montserrat", system-ui, -apple-system, sans-serif;
  /* Die Ueberschrift soll so breit sein wie der Fensterstapel darunter, nicht
     breiter. Bei 6,8vw ragte sie 160px darueber hinaus. */
  /* Der untere Anschlag galt bis 564px Bildschirmbreite und war dort mit
     34,4px zu zurueckhaltend fuer die einzige Zeile ueber der Falz. Jetzt
     38,4px, das greift bis 630px. DER DESKTOP IST DAVON NICHT BETROFFEN:
     dort liegt 6,1vw laengst darueber (bei 1024 sind es 62px), der Anschlag
     kommt gar nicht zum Tragen. --fs-display steht ausserdem nur an h1. */
  --fs-display: clamp(2.4rem, 6.1vw, 5.4rem);
  --fs-h2:      clamp(1.75rem, 3.6vw, 3.1rem);
  /* Die beiden Kartenueberschriften standen bei 37,6 und 36,8 Pixel. Ein
     Unterschied, den niemand als Stufe liest, sondern als Versehen. Sie
     teilen sich jetzt eine Marke. */
  /* Der Zuruf ist die eine Stelle, an der die Seite den Leser mitten im
     Lesen direkt anspricht: der Aufruf unter den Angebotskarten. Er ist die
     groesste Ueberschrift nach der Titelzeile und soll das auch sein.
     Staffel: 86 / 75 / 50 / 37. */
  --fs-zuruf:   clamp(2.35rem, 5.3vw, 4.7rem);
  --fs-karte:   clamp(1.5rem, 2.6vw, 2.35rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.02rem, 1.2vw, 1.16rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .6875rem;
  /* Vorher -.035 und -.028: bei diesen Graden liefen die Buchstaben
     ineinander und die Ueberschriften wirkten gequetscht. Lockerer gesetzt,
     die Groesse bleibt unangetastet. */
  /* Drei Stufen Laufweite, gebunden an die Groesse: je groesser, desto
     enger. Vorher gab es fuenf Werte, und die Kontakt-Ueberschrift lief mit
     -.032em enger als die Titelzeile mit -.02em, also genau andersherum.
     Ab 52px --ls-display, darunter --ls-h2, unter 30px --ls-h3. */
  --ls-display: -.02em;
  --ls-h2:      -.012em;
  --ls-h3:      -.01em;
  --ls-micro:   .16em;
  /* Drei Stufen Zeilenhoehe fuer Ueberschriften. Vorher acht Werte zwischen
     1,02 und 1,20; .weg h3 stand bei 1,04 und waere beim Umbruch mit sich
     selbst zusammengelaufen. */
  --lh-display: 1.03;
  --lh-karte:   1.12;
  --lh-klein:   1.2;

  /* ---- Mass ---- */
  /* Der eine Abstand, der die Seite zusammenhaelt: Leiste zu Slogan,
     Knoepfe zu Fensterstapel, Karte zu Aufruf, Aufruf zu Vergleich.
     Alle vier lesen diesen Wert. */
  --luft: clamp(64px, 7.5vw, 100px);
  /* So breit wie das vordere Fenster im Auftakt (56 Prozent der Leiste).
     Die 420px sind der Boden, damit Text auf mittleren Bildschirmen nicht
     in einer Rinne steht. */
  --schmal: min(100%, max(420px, calc((min(var(--wrap), 100vw) - 2 * var(--pad)) * .56)));
  /* Dritte Breite, nur fuer die Bahn im Ablauf. --schmal waere dort zu eng:
     bei 56 Prozent bleiben fuer vier Spalten gemessen 155px uebrig, bei 80
     Prozent sind es 235px. Die durchgehende Breite bricht trotzdem sichtbar,
     die Bahn ist bei 1440 rund 265px schmaler als die Leiste. */
  --mittel: min(100%, max(560px, calc((min(var(--wrap), 100vw) - 2 * var(--pad)) * .8)));
  --wrap: 1500px;
  --pad:  clamp(20px, 4vw, 64px);
  /* Die Leiste schwebt, ihre Unterkante ist Polster plus Kastenhoehe. Der
     Wert stand vorher als nackte 57 in .auftakt; jetzt liest ihn auch die
     Sprungmarke, und es gibt nur noch eine Stelle, an der er sich aendert. */
  /* ---- Die Abstandsleiter ----
     Sieben Stufen, Verhaeltnis rund 1,3. JEDER senkrechte Abstand auf der
     Seite kommt von hier, damit die Seite ein Raster hat und keine Sammlung
     von Einzelwerten.
     Sie haengen an der BREITE, nicht an der Hoehe. Vorher waren 21 Abstaende
     an vh gebunden, waehrend --luft an vw haengt: bei gleicher Breite und
     anderer Fensterhoehe aenderten sich 20 von 28 gemessenen Abstaenden,
     der Abschnittsabstand aber nicht. Der innere Rhythmus driftete damit
     gegen den aeusseren. Wer hier etwas ergaenzt, nimmt eine Stufe, keinen
     neuen Wert. Werte bei 1440: 12 / 17 / 22 / 28 / 36 / 47 / 61. */
  --raum-1: clamp(10px, .85vw, 15px);
  --raum-2: clamp(13px, 1.2vw,  20px);
  --raum-3: clamp(16px, 1.5vw,  26px);
  --raum-4: clamp(21px, 1.95vw, 34px);
  --raum-5: clamp(27px, 2.5vw,  44px);
  --raum-6: clamp(34px, 3.25vw, 56px);
  --raum-7: clamp(44px, 4.25vw, 74px);

  --leiste-polster: clamp(10px, 1.4vw, 18px);
  --leiste-kasten: 57px;
  --leiste-hoehe: calc(var(--leiste-polster) + var(--leiste-kasten));
  /* Wie weit die Ueberschrift eines Abschnitts nach dem Sprung unter der
     Leiste steht. */
  --anker-luft: clamp(24px, 2.6vw, 40px);
  --r-gross: 24px;
  --r-mittel: 16px;
  --r-klein: 10px;
  --r-pille: 999px;

  /* ---- Bewegung ---- */
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.22,.61,.36,1);
  --d-druck: 110ms;
  --d-schnell: 220ms;
  --d-mittel: 340ms;
  --d-lang: 520ms;

  /* ---- Ebenen ---- */
  --z-mesh: 0; --z-inhalt: 1; --z-korn: 60; --z-leiste: 80; --z-blatt: 90;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:var(--schrift);font-size:var(--fs-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--lh-display);text-wrap:balance}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blau-hell);outline-offset:3px;border-radius:4px}
::selection{background:var(--blau);color:#fff}
section{position:relative}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   HINTERGRUND: Mesh ganz hinten, darueber Licht, darueber Korn
   ============================================================ */
.mesh{position:fixed;inset:0;z-index:var(--z-mesh);width:100%;height:100%;pointer-events:none;opacity:.9}
.inhalt{position:relative;z-index:var(--z-inhalt)}

/* Korn: liegt fest ueber allem, macht aus flachem Schwarz ein Material.
   Nur auf einem festen Element, nie auf scrollenden Flaechen. */
.korn{
  position:fixed;inset:0;z-index:var(--z-korn);pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Lichtquellen: grosse weiche Halos, die dem Blau Volumen geben */
/* Lichthoefe: die Abschnitte, die sie tragen, muessen beschneiden, sonst
   ragen sie aus dem Dokument (gemessen: 288 px Overflow). */
.glut{position:absolute;border-radius:50%;pointer-events:none}
/* Frueher beschnitt jeder Abschnitt seine eigenen Lichthoefe. Weil die Hoefe
   groesser sind als die Abschnitte, endete ihr Licht an jeder Abschnittskante
   hart: sichtbare Naehte quer durch die Seite. Beschnitten wird jetzt eine
   Ebene hoeher und nur waagerecht. overflow-x:clip ist der einzige Wert, der
   das erlaubt, ohne dass die senkrechte Achse zum Scrollbereich wird. So
   laeuft das Licht ueber die Grenzen durch und der Grund wirkt durchgehend. */
.inhalt{overflow-x:clip}
.glut--a{width:min(78vw,900px);aspect-ratio:1;top:-18%;right:-12%;
  background:radial-gradient(circle,rgba(61,119,187,.30),rgba(61,119,187,.08) 42%,transparent 68%)}
.glut--e{width:min(120vw,1500px);height:min(70vh,620px);border-radius:50%;
  top:-34%;left:50%;translate:-50% 0;
  background:radial-gradient(ellipse at center,rgba(61,119,187,.22),rgba(36,81,138,.09) 46%,transparent 72%)}
/* Frueher sass dieser Hof an der Unterkante des Auftakts. Weil der Abschnitt
   beschneidet, endete sein Licht dort hart: genau die sichtbare Naht zum Band.
   Er haengt jetzt oben und bleibt mit seiner ganzen Hoehe im Abschnitt. */
.glut--b{width:min(52vw,560px);aspect-ratio:1;top:20%;left:-16%;
  background:radial-gradient(circle,rgba(36,81,138,.28),transparent 66%)}
/* Glas braucht etwas zu brechen. Ohne Licht dahinter wird jede Scheibe auf
   dunklem Grund nur eine dunkle Karte. */
.glut--c{width:min(70vw,820px);aspect-ratio:1;top:22%;left:-16%;
  background:radial-gradient(circle,rgba(61,119,187,.22),transparent 64%)}
.glut--d{width:min(66vw,760px);aspect-ratio:1;top:26%;right:-14%;
  background:radial-gradient(circle,rgba(61,119,187,.20),transparent 64%)}

/* ---- Lichthoefe auf schmalen Bildschirmen --------------------------------
   Gemessen und nebeneinandergelegt: auf dem Handy war der hellste Punkt 79,
   auf dem Desktop 68, und die Hoefe lasen sich als ERKENNBARE KUGELN mit
   sichtbarem Rand statt als Licht.

   Der Grund liegt nicht in der Helligkeit, sondern in der Groesse. Die
   Verlaeufe haben feste Prozentstufen: in einem 203px kleinen Hof wird
   derselbe Verlauf auf 203px zusammengedrueckt und faellt hart ab, in einem
   560px grossen laeuft er weich aus. Der zweite Grund sind die Prozentwerte
   der Position: sie beziehen sich auf den Abschnitt, und der ist auf dem
   Handy viel hoeher, 20 Prozent von oben landen dort also viel tiefer.

   Die Hoefe werden deshalb schmal GROESSER und weiter aus dem Bild
   geschoben. Man sieht dann ihre weiche Flanke statt ihres Kerns, genau wie
   auf dem Desktop. Groesser klingt verkehrt, ist aber der Weg zu weniger
   sichtbarem Rand.

   Die Grenze ist 760px, dieselbe wie fuer die Maschenweite des Netzes in
   js/werk.js. Beides beschreibt denselben Bruch zwischen schmal und breit
   und soll nicht auseinanderlaufen. */
@media(max-width:760px){
  /* NUR weiter aus dem Bild, NICHT groesser. Der erste Versuch machte sie
     zugleich groesser und schob sie hinaus; netto war dann MEHR vom Kern zu
     sehen statt weniger. Die Groesse bleibt, nur der Versatz waechst.

     Die Werte sind gerechnet, nicht geschaetzt: gesucht war der Versatz, bei
     dem auf 390px derselbe ANTEIL des Hofes im Bild liegt wie auf 1440px.
     Sichtbar war vorher a 66 statt 51 Prozent, b 36 statt 23, c 54 statt 41,
     d 52 statt 39. Auf einem schmalen Bildschirm nimmt derselbe Hof eben
     einen groesseren Teil des Bildes ein, und dadurch sieht man seinen Kern
     statt seiner Flanke. */
  .glut--a{right:-28%}
  .glut--b{left:-29%}
  .glut--c{left:-29%}
  .glut--d{right:-27%}
  /* glut--e bleibt unangetastet: nachgerechnet nimmt er auf beiden Groessen
     rund 70 Prozent der Bildschirmhoehe ein (591 von 844, 620 von 900). Er
     war nie das Problem. */
}

/* ============================================================
   GLAS , das Material, das die Seite traegt
   Kein dekoratives Blur: die Scheibe hat eine Lichtkante oben, einen
   Verlaufsrand und einen Schatten, der sie ueber den Grund hebt.
   ============================================================ */
.glas{
  position:relative;isolation:isolate;
  background:
    linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)),
    rgba(12,18,27,.58);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-radius:var(--r-gross);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 6px rgba(0,0,0,.36),
    0 44px 90px -54px rgba(0,0,0,.95);
}
.glas::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(152deg, rgba(255,255,255,.42), rgba(255,255,255,.05) 44%, rgba(127,178,238,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;z-index:2;
}
/* Zeigerlicht: die Scheibe faengt das Licht dort, wo der Zeiger steht. */
.glas--licht::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(127,178,238,.16), transparent 70%);
  opacity:0;transition:opacity var(--d-mittel) var(--ease);
}
@media(hover:hover){.glas--licht:hover::after{opacity:1}}

/* ============================================================
   LEISTE
   ============================================================ */
/* Die Leiste schwebt als eigener Glaskasten, im selben Material wie die
   Browserfenster im Auftakt. Der Rahmen liegt auf .leiste, die Scheibe auf
   .leiste-kasten: sonst haette der Kasten keinen Rand zum Bildschirm. */
.leiste{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-leiste);
  padding:var(--leiste-polster) var(--pad);
  pointer-events:none;
}
.leiste-kasten{
  pointer-events:auto;
  /* Genau so breit wie der Inhaltsrahmen: .wrap ist hoechstens --wrap breit
     und traegt innen --pad Polster. Ohne den Abzug waere die Leiste auf
     grossen Bildschirmen 128px breiter als die Karten darunter. */
  max-width:calc(var(--wrap) - 2 * var(--pad));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:7px 7px 7px clamp(16px,1.6vw,24px);
  border-radius:var(--r-pille);
  transition:box-shadow var(--d-lang) var(--ease), background-color var(--d-lang) var(--ease);
}
/* Beim Scrollen wird die Scheibe dichter, nicht groesser. */
.leiste.fest .leiste-kasten{
  background:
    linear-gradient(158deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 46%, rgba(255,255,255,.05)),
    rgba(9,14,22,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 8px rgba(0,0,0,.42),
    0 30px 60px -40px rgba(0,0,0,.95);
}
.marke{display:inline-flex;align-items:center;flex:none}
.marke img{height:clamp(15px,1.5vw,19px);width:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;padding:9px 14px;border-radius:var(--r-pille);font-size:var(--fs-sm);
  font-weight:500;color:rgba(238,243,249,.80);
  transition:color var(--d-schnell) var(--ease),background-color var(--d-schnell) var(--ease)}
.nav a:hover{color:var(--tinte);background:rgba(255,255,255,.07)}
.nav a.hier{color:var(--tinte);background:rgba(61,119,187,.2);box-shadow:inset 0 0 0 1px rgba(127,178,238,.3)}
.leiste-rechts{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:1000px){.nav{display:none}}

/* Knopf */
/* Ohne Pfeilsymbol steht die Schrift allein, die Polsterung ist deshalb
   auf beiden Seiten gleich. */
.tat{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;cursor:pointer;
  padding:14px 26px;border:0;border-radius:var(--r-pille);
  font-size:var(--fs-sm);font-weight:600;line-height:1;
  /* Der helle Rand stand auf #4d87cc und gab weisser Schrift nur 3,71:1.
     #3a72b4 gibt 4,99:1 und haelt das auch bei der Aufhellung im Hover. */
  background:linear-gradient(150deg,#3a72b4,#26527f);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 26px -14px rgba(61,119,187,.9);
  transition:transform var(--d-mittel) var(--ease), box-shadow var(--d-mittel) var(--ease), filter var(--d-schnell) var(--ease);
}
@media(hover:hover){.tat:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -16px rgba(61,119,187,.95)}}
.tat:active{transform:scale(.97);transition-duration:var(--d-druck)}
.tat--gross{padding:17px 34px;font-size:1rem}
.tat--voll{width:100%}
.tat--still{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie-2)}
@media(hover:hover){.tat--still:hover{background:rgba(255,255,255,.06);filter:none}}

/* Mobiles Blatt */
.klapp{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:var(--r-pille);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--linie-2);cursor:pointer}
@media(max-width:1000px){.klapp{display:flex}}
.blatt{position:fixed;left:12px;right:12px;bottom:12px;z-index:var(--z-blatt);
  padding:22px;display:flex;flex-direction:column;gap:4px;
  max-height:calc(100svh - 96px);overflow:auto;overscroll-behavior:contain;
  transform:translateY(calc(100% + 24px));transition:transform var(--d-lang) var(--ease)}
.blatt.auf{transform:none}
/* Das hidden-Attribut allein reicht hier nicht: sein display:none kommt aus
   dem Browser-Stylesheet und verliert gegen das display:flex eine Zeile
   darueber. Das Blatt lag deshalb immer im Baum, am Rechner sassen sechs
   unsichtbare Doppel-Links in der Tab-Reihenfolge.
   visibility statt display, weil display:none das Auffahren um seine erste
   Bildfolge bringen wuerde: das Blatt wird sichtbar geschaltet und faehrt
   erst im naechsten Bild hoch. */
.blatt[hidden]{visibility:hidden;pointer-events:none}
.blatt a{padding:13px 4px;font-size:1.28rem;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--linie)}
.blatt a:last-of-type{border-bottom:0}
.blatt .tat{margin-top:var(--raum-1)}
@media(max-height:520px){.blatt{padding:14px 18px}.blatt a{font-size:1.05rem;padding:9px 4px}}
/* Im Querformat ist der Inhalt hoeher als der Kasten: gemessen 326px in 294px
   bei 844x390. Ohne flex:none verteilt der Kasten den Fehlbetrag auf seine
   Kinder und staucht sie unter ihre eigene Groesse; der Knopf unten schrumpfte
   dabei auf 35px und lag damit unter dem Mindestmass fuers Antippen.
   Der Kasten kann scrollen (overflow:auto eine Regel weiter oben), also darf
   gescrollt statt gestaucht werden. */
.blatt > *{flex:none}

/* ============================================================
   AUFTAKT
   ============================================================ */
/* Der Inhalt beginnt oben, nicht mittig. Sonst schiebt die volle Bildhoehe
   den Fensterstapel komplett unter die Kante, und der Auftakt zeigt beim
   Aufschlagen nur Text. */
.auftakt{position:relative;min-height:100svh;display:grid;align-content:start;
  /* Oben: Leistenhoehe plus der gemeinsame Abstand.
     Unten --luft/2, also genau das Polster eines Abschnitts. Damit ist der
     Abstand vom Fensterstapel zur ersten Ueberschrift dieselben 100px wie
     zwischen allen anderen Abschnitten. Mit vollem --luft waren es 150px und
     der Auftakt fiel sichtbar aus dem Rhythmus. */
  padding-block:calc(var(--leiste-hoehe) + var(--luft)) calc(var(--luft) / 2);
  text-align:center}
/* Weder Schein noch Vignette. Beide lagen in .auftakt, und weil der Abschnitt
   beschneidet, endeten sie hart an seiner Unterkante: genau die sichtbare
   Naht zwischen Auftakt und Band. Der Grund laeuft jetzt durch, das Licht
   kommt allein aus dem Mesh und den beiden Lichthoefen. */
/* .auftakt ist ein Raster, und .wrap traegt margin-inline:auto. Beides
   zusammen nimmt dem Kind das Dehnen: der Rahmen war deshalb immer nur so
   breit wie sein breitestes Kind, also wie die Ueberschrift. Der Stapel
   konnte dadurch nie breiter werden als der Slogan, egal was in seiner
   Regel stand. width:100% stellt das ab. */
.auftakt > .wrap{position:relative;z-index:1;width:100%}
.auftakt-text{position:relative;z-index:2;max-width:none}
h1{font-size:var(--fs-display);letter-spacing:var(--ls-display);font-weight:700;
  max-width:none;margin-inline:auto;line-height:var(--lh-display);text-wrap:pretty}
/* Zwei feste Zeilen: der Umbruch zwischen den Saetzen ist der Witz des
   Slogans und darf nicht vom Zufall der Breite abhaengen. Innerhalb einer
   Zeile bricht schmal weiterhin normal um. */
h1 .zeile{display:block}
/* Ein Akzentwort je Ueberschrift. Die Regel hing frueher an .kopf und griff
   damit weder im Aufruf noch in der Mensch-Karte noch im Kontakt: dort
   fehlte das blaue Wort, obwohl das <em> im Text stand. */
h1 em,h2 em{font-style:normal;color:var(--blau-hell)}
.auftakt-sub{margin:var(--raum-2) auto 0;max-width:52ch;color:var(--tinte-2);font-size:var(--fs-lead)}
.auftakt-tat{margin-top:var(--raum-5);display:flex;flex-wrap:wrap;gap:var(--raum-1);
  align-items:center;justify-content:center}

/* ---- Die Szene ----------------------------------------------------------
   Der Schliffkoerper steht gross und mittig hinter dem Stapel und leuchtet
   die Fenster aus. Seine untere Haelfte verdeckt das mittlere Fenster: er ist
   Lichtquelle, kein zweites Logo. */
/* Die Luecke zwischen Knöpfen und Stapel ist der Raum, in dem der Körper
   steht. Sie muss groesser sein als der Teil, der von ihm herausschaut,
   sonst haengt er hinter den Knöpfen. */
/* Derselbe Abstand wie zwischen Leiste und Slogan. */
.szene{position:relative;margin-top:var(--luft)}
.szene-hinweis{margin-top:var(--raum-3)}
/* ---- Der Fensterstapel ---------------------------------------------------
   Alle drei Fenster sind gleich gross gebaut und liegen uebereinander. Welches
   vorn steht, entscheidet allein die Verwandlung an data-pos. Nur so kann die
   Belegung im Kreis weiterwandern, ohne dass etwas umgebaut wird.

   Die Zahlen kommen aus der Vorlage: der Aufbau ist 76 Prozent der Seite, das
   vordere Fenster 56 Prozent davon, die beiden anderen je 29 Prozent. Also
   sind die hinteren auf 29/56 = 0,518 verkleinert und ihre Mitte liegt bei
   14,5 statt 50 Prozent des Aufbaus, das sind -63,4 Prozent der eigenen
   Breite. */
.stapel{position:relative;z-index:2;
  width:100%;margin-inline:auto;
  /* 0,56 Breite mal 800/1200 Seitenverhaeltnis = 0,3733 Hoehe. Ohne diese
     Angabe haette der Aufbau keine Hoehe, weil alle Kinder schweben. */
  aspect-ratio:1200/448}

.fenster{margin:0;position:absolute;left:50%;top:0;width:56%;
  aspect-ratio:1200/800;display:flex;flex-direction:column;
  transform-origin:center top;
  border-radius:var(--r-mittel);overflow:hidden;
  background:
    linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)),
    rgba(12,18,27,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 26px -18px rgba(0,0,0,.8);
  transition:transform 1s var(--ease), filter 1s var(--ease), box-shadow 1s var(--ease)}

/* Die beiden Verschiebungen stehen VOR scale(), sie wirken deshalb in der
   unverkleinerten Groesse: die Prozentwerte beziehen sich auf die volle
   Fensterbreite, der Versatz nach unten sind echte Bildschirmpixel. */
.fenster[data-pos="mitte"]{transform:translateX(-50%);z-index:3}
.fenster[data-pos="links"]{transform:translateX(-97.32%) translateY(var(--tiefe)) scale(.839);z-index:2}
.fenster[data-pos="rechts"]{transform:translateX(-2.68%) translateY(var(--tiefe)) scale(.839);z-index:2}
.fenster[data-pos="links"],.fenster[data-pos="rechts"]{filter:brightness(.62) saturate(.82)}
/* Genau mittig zum vorderen Fenster waeren 3 Prozent der Aufbaubreite (bei
   1440 rund 40px). Etwas darunter, damit man noch sieht, dass sie dahinter
   stehen. */
.szene{--tiefe:clamp(16px,2.6vw,44px)}

/* Das Fenster, das von links nach rechts wandert, zieht hinter dem vorderen
   durch. Ohne das liefe es sichtbar quer ueber die Szene. */
.fenster.durch{z-index:1}
/* Die drei Fenster fuehren auf die echten Seiten. Ohne das sind sie Bilder,
   die man fuer Attrappen halten kann. Aufgehellt wird nur das vordere, die
   hinteren tragen schon ihre Daempfung. */
@media(hover:hover){
  .fenster[data-pos="mitte"]:hover{filter:brightness(1.03);
    box-shadow:
      inset 0 0 0 1px rgba(127,178,238,.34),
      inset 0 1px 0 rgba(159,197,246,.26),
      0 14px 32px -18px rgba(0,0,0,.85),
      0 0 54px -22px rgba(61,119,187,.5)}
}
.fenster:focus-visible{outline:2px solid var(--blau-hell);outline-offset:4px}

/* Die Ampelpunkte standen frueher beim Arbeit-Abschnitt. Sie gehoeren zum
   Auftakt, der Abschnitt ist weg. */
.punkte{display:inline-flex;gap:6px}
.punkte i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.punkte i:nth-child(1){background:#ff5f57}.punkte i:nth-child(2){background:#febc2e}.punkte i:nth-child(3){background:#28c840}
.fenster-leiste{flex:none;display:flex;align-items:center;gap:12px;
  padding:9px clamp(10px,1vw,14px);border-bottom:1px solid rgba(255,255,255,.075)}
.fenster-bild{flex:1;min-height:0;overflow:hidden}
.fenster-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fenster-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-xs);color:var(--tinte-3);text-align:left}
.fenster-live{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--tinte-2)}
.fenster-live s{width:6px;height:6px;border-radius:50%;background:#4ade80;text-decoration:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.16)}
/* Die Leiste der hinteren Fenster wird mitverkleinert und waere sonst zu
   klein zum Lesen. Die Adresse faellt dort weg, die Punkte reichen. */
.fenster[data-pos="links"] .fenster-url,
.fenster[data-pos="rechts"] .fenster-url,
.fenster[data-pos="links"] .fenster-live,
.fenster[data-pos="rechts"] .fenster-live{opacity:0;transition:opacity var(--d-schnell) var(--ease)}

/* Enger: vorderes Fenster 66 Prozent, hintere je 27. Also 27/66 = 0,409,
   Mitte des hinteren bei 13,5 statt 50 Prozent, das sind -55,3 Prozent der
   eigenen Breite. Hoehe: 0,66 mal 800/1200 = 0,44. */
@media(max-width:900px){
  .stapel{aspect-ratio:1200/528}
  .fenster{width:66%}
  .fenster[data-pos="links"]{transform:translateX(-92.42%) translateY(var(--tiefe)) scale(.667)}
  .fenster[data-pos="rechts"]{transform:translateX(-7.58%) translateY(var(--tiefe)) scale(.667)}
  .szene{--tiefe:clamp(20px,6.4vw,62px)}
}

/* ---- Handy: der Stapel wird eine wischbare Reihe -------------------------
   Der Stapel funktioniert auf dem Handy nicht. Gemessen bei 390px: das ganze
   Gebilde war 350 x 154 Pixel, die Fensterleiste frass 40 Prozent der Hoehe,
   die Adresse war abgeschnitten ("glanzwerk-war...") und die beiden hinteren
   Fenster waren praktisch unsichtbar. Die drei live laufenden Kundenseiten
   sind der einzige Beweis der Seite und waren dort drei Briefmarken.

   Statt zu stapeln liegen die Fenster jetzt nebeneinander in einer waagerecht
   wischbaren Reihe mit Einrastpunkt. Jedes ist 86 Prozent breit, das naechste
   schaut also am Rand herein und zeigt ohne Erklaerung, dass es weitergeht.

   Die Reihe laeuft aus der Bahn heraus bis an beide Bildschirmkanten
   (negativer Aussenabstand plus gleich grosses Innenpolster). Ohne das
   endete sie am Bahnrand und das angeschnittene Fenster saehe aus wie ein
   Fehler statt wie eine Einladung.

   scroll-padding-inline haelt den Einrastpunkt am selben Rand, sonst rastet
   das erste Fenster in die Bildschirmmitte und die Reihe wirkt verrutscht.

   Die Verwandlungen an data-pos werden mit !important abgeraeumt: das Skript
   dreht die Belegung weiter, sie darf hier aber nichts mehr bewirken. */
@media(max-width:700px){
  /* .auftakt ist ein Raster, .wrap darin ein Rasterfeld und hat damit
     min-width:auto, also mindestens die Groesse seines Inhalts. Die Reihe
     zog das Feld auf und der Auftakt wurde breiter als der Bildschirm:
     gemessen 1027px bei 390px Bildschirm, obwohl der Ueberlauf am Koerper
     abgeschnitten wurde und man davon nichts sah.
     Beides braucht min-width:0, das Feld und die Reihe darin. */
  .auftakt > .wrap{min-width:0}
  .szene{min-width:0}
  .stapel{
    aspect-ratio:auto;
    /* width:auto hebt das width:100% der Grundregel auf. Mit fester Breite
       verschieben die negativen Raender die Reihe nur nach links, statt sie
       zu verbreitern: gemessen lief sie dann 47px rechts aus dem Auftakt
       heraus, unsichtbar nur deshalb, weil der Koerper den Ueberlauf
       abschneidet. */
    width:auto;
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);
    /* Platz fuer die Lichtkante der Fenster, sonst schneidet der
       Ueberlauf sie oben und unten ab. */
    padding-block:3px;
    scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain;
  }
  .stapel::-webkit-scrollbar{display:none}
  .fenster{
    position:static;left:auto;top:auto;
    transform:none !important;filter:none !important;
    /* KEIN Prozentwert. Der bezoege sich auf die Breite der Reihe, die
       selbst erst aus dem Inhalt entsteht - ein Zirkelschluss, den der
       Browser aufloest, indem er die natuerliche Bildbreite nimmt. Gemessen
       kam dabei ein 633px breites Fenster in einem 390px-Bildschirm heraus.
       vw ist immer eindeutig. 82vw laesst 18vw fuer das naechste Fenster,
       das am Rand hereinschaut. */
    flex:0 0 82vw;max-width:420px;width:auto;
    /* MITTIG, nicht am linken Rand. Mit "start" rastet die linke Kante am
       Rand ein, das Fenster sass dadurch gemessen 12 bis 19px zu weit links
       und die Luecke war nur rechts. Mit "center" ist links und rechts
       gleich viel zu sehen, und dass es in beide Richtungen weitergeht,
       zeigt sich von selbst. Erstes und letztes Fenster stossen weiterhin
       an ihr Ende, das ist richtig so. */
    scroll-snap-align:center;
    /* Etwas hoeher als das Original 1200/800: die Fensterleiste kostet
       Hoehe, ohne sie waere vom Inhalt zu wenig zu sehen. */
    aspect-ratio:1200/900;
  }
  /* Adresse und Live-Punkt gehoeren jetzt an JEDES Fenster, es steht keins
     mehr im Hintergrund. */
  .fenster[data-pos="links"] .fenster-url,
  .fenster[data-pos="rechts"] .fenster-url,
  .fenster[data-pos="links"] .fenster-live,
  .fenster[data-pos="rechts"] .fenster-live{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .fenster{transition:none}
}



/* ============================================================
   ABSCHNITTS-KOPF
   Eine Haarlinie ueber die Breite, kein Etikett ueber jedem Abschnitt.
   ============================================================ */
/* Je Abschnitt die Haelfte, in Summe zwischen zwei Abschnitten also genau
   --luft: derselbe Abstand wie zwischen Leiste und Slogan, Knoepfen und
   Fensterstapel, letzter Karte und Aufruf. Auftakt und Aufruf haben eigene
   Werte, sie sollen sich absetzen. */
/* Sprungmarke: ohne sie landet ein Klick im Menue hinter der schwebenden
   Leiste, und weil jeder Abschnitt sein eigenes oberes Polster hat, jedes Mal
   woanders. Gerechnet wird rueckwaerts: die Ueberschrift soll --anker-luft
   unter der Leiste stehen, also zieht die Marke das Polster wieder ab.
   Wer das Polster eines Abschnitts aendert, aendert die Marke mit. */
.abschnitt{padding-block:calc(var(--luft) / 2);
  scroll-margin-top:calc(var(--leiste-hoehe) + var(--anker-luft) - var(--luft) / 2)}
.kopf{max-width:64ch;margin-bottom:var(--raum-6)}
.kopf h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);max-width:none}
.kopf p{margin-top:var(--raum-2);color:var(--tinte-2);font-size:var(--fs-lead);max-width:56ch}
.bruch{display:none}
@media(min-width:900px){.bruch{display:inline}}
/* Zeilenausgleich fuer alle Ueberschriften auf schmalen Bildschirmen.
   Ohne ihn brechen sie nach dem Fuellprinzip: die erste Zeile wird randvoll,
   die letzte traegt ein einzelnes Wort. Gemessen war die Titelzeile
   "Creating What's / Next." und der Zuruf "Lassen Sie uns / sprechen. Wann /
   passt es Ihnen?". Der Ausgleich verteilt die Woerter gleichmaessig auf die
   Zeilen.
   Warum nicht einfach kleiner setzen: damit jede Zeile ungebrochen passt,
   muesste die Titelzeile von 34 auf 21 bis 26px, je nach Bildschirm. Das
   nimmt der Ueberschrift ihre Wucht, und die ist auf dem Handy das Einzige,
   was ueber der Falz steht.
   Breit bleibt es aus: dort stehen die Zeilen ohnehin, wie sie sollen, und
   der Ausgleich wuerde die abgestimmten Umbrueche verschieben. */
@media(max-width:900px){
  h1,.kopf h2,.anruf h2,.kontakt h2,.mensch-text h2{text-wrap:balance}
}

/* ---- Aufruf unter den Angebotskarten --------------------------------------
   Bewusst groesser als die Abschnittsueberschriften: er soll aus dem
   Abschnitt herausstechen, nicht sich einreihen. */
/* Der Aufruf steht zwischen zwei Abschnitten und braucht mehr Luft als eine
   normale Abschnittsgrenze, sonst liest er sich als Anhaengsel der Karten
   darueber statt als eigener Zuruf. Ein Viertel mehr: 125px davor und, mit
   dem unteren Polster des Leistungsabschnitts zusammen, auch 125px danach. */
.anruf{position:relative;margin-top:calc(var(--luft) * 1.25);padding-block:0;text-align:center}
/* Der Leistungsabschnitt endet mit dem Aufruf, sein unteres Polster faellt
   deshalb weg, und der Vergleich rueckt naeher heran. Sonst standen drei
   Polster hintereinander. */
/* Nicht 0: die 25px hier plus das volle --luft von #warum ergeben die 125px
   unter dem Aufruf. Ueber ein margin-bottom am Aufruf selbst waere es
   dasselbe Ergebnis, aber es haenge dann am Zusammenfallen von Aussenraendern
   und waere schwerer zu lesen. */
#leistungen{padding-bottom:calc(var(--luft) * .25)}
/* Schmal steht der Aufruf zwischen zwei gestapelten Kartenreihen und ging
   darin unter: gemessen nur 80px Luft davor und danach, auf dem Desktop sind
   es 125px. Die Faktoren sind deshalb auf dem Handy hoeher, damit derselbe
   Freiraum entsteht: 1,9 mal --luft davor, und 0,9 plus das volle --luft von
   #warum ergibt denselben Wert danach. Gemessen rund 122px auf beiden
   Seiten, also so frei wie auf dem Desktop. */
@media(max-width:900px){
  .anruf{margin-top:calc(var(--luft) * 1.9)}
  #leistungen{padding-bottom:calc(var(--luft) * .9)}
}
/* Doppeltes Polster oben, also zieht die Sprungmarke doppelt ab. */
#warum{padding-top:var(--luft);
  scroll-margin-top:calc(var(--leiste-hoehe) + var(--anker-luft) - var(--luft))}

.anruf-schein{position:absolute;left:50%;bottom:-46%;translate:-50% 0;
  width:min(150vw,1700px);height:min(64vh,620px);pointer-events:none;z-index:0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(61,119,187,.34),rgba(61,119,187,.12) 44%,transparent 70%);
  filter:blur(26px)}
.anruf h2{position:relative;z-index:1;
  font-size:var(--fs-zuruf);letter-spacing:var(--ls-display);
  line-height:var(--lh-display);max-width:23ch;margin-inline:auto}
.anruf p{position:relative;z-index:1;margin:var(--raum-2) auto 0;
  max-width:52ch;color:var(--tinte-2);font-size:var(--fs-lead)}
.anruf .tat{position:relative;z-index:1;margin-top:var(--raum-5)}



/* ---- Kopf-Varianten -----------------------------------------------------
   Sechs gleiche Anschlaege hintereinander lesen sich als Vorlage, und die
   rechte Haelfte neben jedem Kopf liegt dabei brach. Drei Typen statt einem:
   breit (Text wandert nach rechts), gespalten (harte Asymmetrie) und
   Marke (Legende links, wie an einer Instrumententafel).
   Alle greifen erst ab 900px, darunter bleibt der einspaltige Stapel. */
@media(min-width:900px){
  /* Mitte: fuer Abschnitte, die wie der Auftakt mittig aufgebaut sind. */
  .kopf--mitte{max-width:none;margin-inline:auto;text-align:center}
  /* Bei 20ch stand der Satz in kurzen, gestauchten Zeilen. Der Kopf soll so
     breit laufen wie die Karten darunter. */
  .kopf--mitte h2{max-width:none;margin-inline:auto}
  /* So breit wie die Unterzeile im Auftakt. Der Umbruch vor „und Sie" steht
     fest im Text, weil natuerlicher Umbruch ihn nicht zuverlaessig dorthin
     legt. Schmal faellt der feste Umbruch weg. */
  .kopf--mitte p{max-width:52ch;margin-inline:auto}

  /* Marke: schmale Legende links, Ueberschrift eingerueckt. */
  /* Die Legende ist eine Randnotiz, keine eigene Spalte: sie muss nah genug
     an der Ueberschrift stehen, um dazuzugehoeren. */
  .kopf--marke{max-width:none;display:grid;
    grid-template-columns:clamp(104px,10vw,152px) minmax(0,1fr);
    column-gap:clamp(20px,2.2vw,34px);align-items:start}
  .kopf--marke .kopf-legende{padding-top:.5em}
  .kopf--marke h2{max-width:none}
}
/* Unter 900px greift der Block darueber nicht. Ohne diese Zeilen faellt der
   mittige Kopf auf .kopf h2{max-width:19ch} zurueck und stand in fuenf sehr
   kurzen Zeilen. */
@media(max-width:899px){.kopf--mitte{text-align:center;margin-inline:auto;max-width:none}
  .kopf--mitte h2,.kopf--mitte p{margin-inline:auto;max-width:none}}
.kopf-legende{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--tinte-3);font-weight:600;line-height:1.5}
.kopf-legende b{display:block;color:var(--blau-hell);font-weight:700}
@media(max-width:899px){.kopf-legende{margin-bottom:var(--raum-1)}}

/* Das Laufband mit den sechs Bereichen ist raus, seine Regeln damit auch.
   Grund war nicht die Optik allein: es nannte sechs Bereiche, und die
   Ueberschrift eine Zeile darunter nennt drei. Der alte Stand liegt im Git
   unter 9495dcf. */

/* ============================================================
   ANGEBOTE , drei grosse Karten, Text links, Schaubild rechts
   Aufbau nach Leons Vorlage. Jede Karte traegt einen Bereich, und die
   Schaubilder sind gezeichnet, nicht fotografiert: Linien, Knoten, Licht.
   Damit stehen sie in derselben Sprache wie das Mesh und streiten nicht
   mit den echten Aufnahmen im Auftakt.
   ============================================================ */
.angebote{display:flex;flex-direction:column;gap:clamp(30px,4.4vw,70px)}
.angebot{position:relative;overflow:hidden;
  padding:clamp(28px,3.4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.4vw,60px);align-items:center}
.angebot-text{position:relative;z-index:1;max-width:46ch}
.angebot h3{font-size:var(--fs-karte);letter-spacing:var(--ls-h2);
  line-height:var(--lh-karte);font-weight:600;max-width:20ch}
.angebot-lead{margin-top:var(--raum-2);font-size:var(--fs-lead);
  font-weight:600;color:var(--tinte);line-height:1.5}
.angebot-lead em{font-style:normal;color:var(--blau-hell)}
.angebot-text > p:last-of-type{margin-top:var(--raum-1);color:var(--tinte-2);font-size:var(--fs-sm)}
.angebot .tat{margin-top:var(--raum-4)}
/* Schlagwoerter: damit ohne Nachdenken klar ist, wo Hosting hingehoert und
   wo der Seitenbau. Das war der eigentliche Zweck der Aufteilung. */
.schlagwoerter{margin-top:var(--raum-3);padding-top:var(--raum-2);
  border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:7px}
.schlagwoerter li{font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinte-2);padding:6px 11px;border-radius:var(--r-pille);
  box-shadow:inset 0 0 0 1px var(--linie)}

/* Die Bühne fuer das Schaubild. Ein fester Rahmen, damit die drei Karten
   gleich hoch wirken, obwohl die Schaubilder verschieden sind. */
/* width:100% ist Pflicht. Mit align-self:stretch waere die Hoehe fest, und
   aspect-ratio wuerde daraus die BREITE ableiten: die Tafel war dadurch 110px
   breiter als ihre Rasterspalte. Erst die Breite, dann die Hoehe. */
.schau{position:relative;z-index:1;width:100%;min-width:0;aspect-ratio:1/.72;
  display:grid;place-items:stretch;isolation:isolate;align-self:center;min-height:320px}
.schau::before{content:"";position:absolute;inset:6% 4%;border-radius:var(--r-gross);
  background:radial-gradient(60% 60% at 50% 45%,rgba(61,119,187,.20),transparent 70%);
  filter:blur(24px)}
.schau > svg{position:relative;width:100%;height:100%;overflow:visible}

/* ---- Die drei Tafeln ---------------------------------------------------
   Erster Versuch waren abstrakte Schaubilder: Platten, Knoten, Ringe. Leon
   konnte daran nicht ablesen, worum es geht, und damit war der Zweck verfehlt.
   Jetzt zeigt jede Tafel die Sache selbst, im Aussehen einer Instrumententafel:
   Kopfzeile mit Beschriftung, darunter der Inhalt. Nichts Abstraktes mehr. */
.tafel{position:relative;width:100%;height:100%;min-width:0;display:flex;flex-direction:column;
  border-radius:var(--r-mittel);overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.014) 52%,rgba(127,178,238,.03)),
             rgba(9,14,22,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.16)}
.tafel-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px clamp(12px,1.2vw,18px);border-bottom:1px solid rgba(255,255,255,.075);
  font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  font-weight:600;color:var(--tinte-3)}
.tafel-kopf b{color:var(--blau-hell);font-weight:700}
.tafel-leib{flex:1;min-height:0;min-width:0;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(10px,1.4vw,18px)}

/* ---- Tafel 1: dieselbe Seite auf drei Breiten ----
   Drei Geraete nebeneinander, in jedem derselbe Aufbau, nur umgebrochen.
   Darunter die Markenzeile. Man sieht sofort: eine Website, ueberall. */
/* Die drei Geraete leuchten nacheinander kurz auf, von links nach rechts.
   Das ist die Aussage der Tafel als Bewegung: dieselbe Seite, ein Geraet nach
   dem anderen. Ein durchlaufender Glanz lag frueher darueber und war zu viel,
   und das Leuchten ist bewusst weiss: eine zweite Farbe braucht das Bild
   nicht. */
.geraete{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.66fr) minmax(0,.4fr);gap:clamp(8px,.9vw,14px);
  align-items:end;flex:1;min-height:0}

.geraet{border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.geraet--breit{aspect-ratio:16/10}
.geraet--mittel{aspect-ratio:3/4}
.geraet--schmal{aspect-ratio:1/1.95}
/* Jedes Geraet leuchtet auf, wenn der Strahl darueber ist. Die Verzoegerungen
   sind auf die 5,4 Sekunden des Strahls abgestimmt. */
.geraet{animation:geraetleuchten 5.4s var(--ease) infinite}
.geraet--breit{animation-delay:.5s}
.geraet--mittel{animation-delay:1.35s}
.geraet--schmal{animation-delay:2.05s}
@keyframes geraetleuchten{
  0%,10%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  16%{box-shadow:inset 0 0 0 1px rgba(127,178,238,.42), 0 0 24px -10px rgba(127,178,238,.34)}
  30%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
.geraet-leiste{height:12px;display:flex;align-items:center;gap:3px;padding-inline:6px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.geraet-leiste i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.geraet-seite{padding:7px;display:flex;flex-direction:column;gap:5px;height:calc(100% - 12px)}
.geraet-held{flex:1.5;border-radius:4px;
  background:linear-gradient(150deg,rgba(127,178,238,.34),rgba(61,119,187,.12));
  animation:heldleuchten 5.4s var(--ease) infinite}
.geraet--breit .geraet-held{animation-delay:.5s}
.geraet--mittel .geraet-held{animation-delay:1.35s}
.geraet--schmal .geraet-held{animation-delay:2.05s}
@keyframes heldleuchten{0%,10%{filter:none}16%{filter:brightness(1.26)}30%,100%{filter:none}}
.geraet-reihe{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.geraet--schmal .geraet-reihe{grid-template-columns:1fr}
.geraet--mittel .geraet-reihe{grid-template-columns:1fr 1fr}
.geraet-reihe span{border-radius:3px;background:rgba(255,255,255,.10)}
.geraet-fuss{flex:none;height:4px;border-radius:2px;background:rgba(255,255,255,.07)}

.marken-zeile{flex:none;display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  padding-top:clamp(10px,1.2vw,16px);border-top:1px solid rgba(255,255,255,.075)}
.marken-zeile svg{width:18px;height:18px;flex:none}
.marken-zeile svg polygon{fill:rgba(255,255,255,.5)}
.marken-zeile svg polygon:first-child{fill:var(--blau-hell)}
.farbtupfer{display:flex;gap:5px}
.farbtupfer i{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  animation:tupferheben 5.4s var(--ease) infinite}
.farbtupfer i:nth-child(1){animation-delay:.5s}
.farbtupfer i:nth-child(2){animation-delay:1.35s}
.farbtupfer i:nth-child(3){animation-delay:2.05s}
@keyframes tupferheben{0%,10%{transform:none}18%{transform:translateY(-4px)}34%,100%{transform:none}}
.marken-zeile .schriftprobe{margin-left:auto;font-size:.9rem;font-weight:700;letter-spacing:-.03em;
  color:rgba(238,243,249,.6)}

/* ---- Tafel 2: von Hand gegen automatisch ----
   Links vier gleiche Handgriffe, rechts einer. Der Unterschied ist der Punkt. */
/* Zwei Zeilen: oben die Beschriftungen, unten die Reihen. Sonst sitzen die
   Beschriftungen auf verschiedenen Hoehen, weil die Spalten verschieden hoch
   sind. minmax(0,1fr) statt 1fr, sonst drueckt der Inhalt die Tafel breiter
   als die Karte. */
.gegenueber{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:clamp(10px,1.2vw,18px);row-gap:10px;
  align-items:start;align-content:center;flex:1;min-height:0}
.spalte-titel{grid-row:1;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--tinte-3);margin:0}
.griffe--ziel{grid-column:3}
.griffe{grid-row:2;display:flex;flex-direction:column;gap:9px}
.griff{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.griff s{flex:none;width:11px;height:11px;border-radius:50%;text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.griff b{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);font-size:0}
.griff--fertig{background:linear-gradient(150deg,rgba(127,178,238,.2),rgba(61,119,187,.08));
  box-shadow:inset 0 0 0 1px rgba(127,178,238,.4)}
.griff--fertig s{box-shadow:inset 0 0 0 1.5px var(--blau-hell);background:rgba(127,178,238,.35)}
.griff--fertig b{background:rgba(127,178,238,.62)}
.pfeil{grid-column:2;grid-row:1/3;align-self:center;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(61,119,187,.2);box-shadow:inset 0 0 0 1px rgba(127,178,238,.4);
  animation:pfeilpuls 2.6s var(--ease) infinite}
.pfeil svg{width:15px;height:15px;color:var(--blau-hell)}
@keyframes pfeilpuls{0%,100%{box-shadow:inset 0 0 0 1px rgba(127,178,238,.4), 0 0 0 0 rgba(127,178,238,.28)}
  55%{box-shadow:inset 0 0 0 1px rgba(127,178,238,.6), 0 0 0 12px rgba(127,178,238,0)}}

/* ---- Tafel 3: erreichbar und sichtbar ----
   Ein Balken je Tag, alle gruen, darunter eine steigende Linie. */
.streifen{display:flex;gap:3px;align-items:flex-end;height:34px}
.streifen i{flex:1;border-radius:2px;background:rgba(74,222,128,.55);height:100%}
.streifen i:nth-child(7n){background:rgba(74,222,128,.8)}
.streifen-fuss{display:flex;justify-content:space-between;font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);margin-top:8px}
.kurve{position:relative;flex:1;min-height:0}
.kurve svg{width:100%;height:100%;display:block;overflow:visible}
.kurve-bahn{fill:none;stroke:var(--blau-hell);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:kurvezeichnen 3.4s var(--ease) infinite}
.kurve-flaeche{fill:url(#kurveVerlauf);opacity:.55}
.kurve-spitze{fill:var(--blau-hell);animation:spitzeblinken 3.4s var(--ease) infinite}
@keyframes kurvezeichnen{0%{stroke-dashoffset:260}55%,100%{stroke-dashoffset:0}}
@keyframes spitzeblinken{0%,45%{opacity:0}60%,100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .pfeil,.kurve-bahn,.kurve-spitze,.geraet,.geraet-held,.farbtupfer i{animation:none}
  .kurve-bahn{stroke-dashoffset:0}
  .kurve-spitze{opacity:1}
}

@media(max-width:900px){
  .angebot{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .angebot-text{max-width:none}
  .angebot h3{max-width:20ch}
  /* KEIN order:-1 mehr. Die Tafel stand vor dem Text, man sah also erst ein
     abstraktes Diagramm und erfuhr danach, worum es geht. Auf Desktop steht
     der Text links und wird zuerst gelesen; auf Mobil gilt jetzt dasselbe. */
  .schau{aspect-ratio:1/.62;max-width:460px;margin-inline:auto;width:100%}
}


/* ============================================================
   WARUM , eine beleuchtete Platte zwischen zwei ruhigen Spalten
   ============================================================ */
/* ---- Die drei Wege ---------------------------------------------------
   Frueher drei Spalten mit Trennlinien und einer hervorgehobenen Mitte.
   Jetzt drei gleich gebaute Karten nebeneinander, nach Leons Vorlage: Zeichen
   oben, Titel, Zusage, Liste, und nur die Mitte traegt den Knopf. Die
   Aussenspalten sind Vergleich, nicht Angebot: dort waere ein Knopf falsch. */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--raum-4);align-items:stretch}
.weg{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px)}
.weg-zeichen{display:grid;place-items:center;width:clamp(44px,4vw,54px);aspect-ratio:1;
  border-radius:var(--r-mittel);margin-bottom:var(--raum-3);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--linie);
  color:var(--tinte-2)}
.weg-zeichen svg{width:52%;height:auto}
.weg-zeichen--wir{background:linear-gradient(150deg,rgba(127,178,238,.22),rgba(61,119,187,.08));
  box-shadow:inset 0 0 0 1px rgba(127,178,238,.42), 0 0 26px -10px rgba(61,119,187,.7)}
.weg-zeichen--wir svg polygon{fill:rgba(255,255,255,.62)}
.weg-zeichen--wir svg polygon:first-child{fill:var(--blau-hell)}
.weg-art{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--tinte-3)}
/* 1,04 aus der Grundregel waere hier gefaehrlich: bricht der Titel um,
   laufen die Zeilen ineinander. */
.weg h3{margin:var(--raum-1) 0 var(--raum-1);font-size:var(--fs-h3);
  letter-spacing:var(--ls-h3);line-height:var(--lh-klein);font-weight:600}
.weg-sub{color:var(--tinte-2);font-size:var(--fs-sm);padding-bottom:var(--raum-3);
  border-bottom:1px solid var(--linie);margin-bottom:var(--raum-3)}
.weg ul{display:flex;flex-direction:column;gap:var(--raum-1)}
.weg li{position:relative;padding-left:20px;font-size:var(--fs-sm);line-height:1.5;color:var(--tinte-3)}
.weg li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;
  background:currentColor;opacity:.6}

/* Die Mitte traegt eigenes Licht, sonst waeren drei gleiche Karten drei
   gleichwertige Angebote. */
.weg--wir{background:
  linear-gradient(158deg,rgba(127,178,238,.13),rgba(61,119,187,.05) 50%,rgba(255,255,255,.035)),
  rgba(13,21,34,.62);
  box-shadow:inset 0 0 0 1px rgba(127,178,238,.3),
             inset 0 1px 0 rgba(255,255,255,.22),
             0 30px 70px -40px rgba(0,0,0,.95),
             0 0 70px -34px rgba(61,119,187,.75)}
.weg--wir .weg-art{color:var(--blau-hell)}
.weg--wir li{color:var(--tinte)}
.weg--wir li::before{width:9px;height:10px;top:.5em;background:var(--blau-hell);opacity:1;
  clip-path:polygon(0 0,100% 50%,0 100%)}
/* margin-top:auto haelt den Knopf am unteren Rand, damit die Karte trotz
   gleicher Hoehe unten sauber schliesst. */
.weg--wir .tat{margin-top:auto;padding-top:14px;padding-bottom:14px}
.weg--wir ul{margin-bottom:var(--raum-4)}
.fahne{position:absolute;z-index:4;top:0;left:50%;transform:translate(-50%,-50%);
  padding:6px 14px;border-radius:var(--r-pille);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;
  background:linear-gradient(150deg,#3a72b4,#26527f),var(--grund);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 22px -12px rgba(61,119,187,.9)}
@media(max-width:1000px){
  .wege{grid-template-columns:1fr;gap:var(--raum-4)}
  .weg--wir{order:-1}
}



/* ============================================================
   MENSCH , eine Karte, Bild links, Text rechts
   Nach Leons Vorlage. Bewusst ohne Abschnittskopf: die Karte traegt alles.
   Das Zeichen steht hinter dem Foto, nicht daneben, damit die Marke die
   Person traegt und nicht mit ihr um Platz streitet.
   ============================================================ */
/* --mensch-luft steht als eigener Wert da, weil die Bildspalte ihn wieder
   abziehen muss: nur dann reicht sie ueber die volle Kartenhoehe und das
   Zeichen laesst sich exakt auf die Kartenmitte legen. */
/* Die Spalten sind bewusst KEINE Bruchteile mehr. Mit .78fr und 1.22fr
   fuellten sie die Karte immer ganz aus, und weil der Text seine eigene
   Hoechstbreite hatte, sammelte sich der Rest als Leere rechts: gemessen
   15px links vom Bild, 111px in der Mitte, 145px rechts vom Text.
   Jetzt haben beide Spalten feste Hoechstwerte und justify-content:center
   setzt den ganzen Block mittig in die Karte. Links und rechts steht danach
   derselbe Rand. Wer daran dreht, muss die Hoechstbreiten im Text
   (h2, p) auf none lassen, sonst kehrt die Leere rechts zurueck. */
.mensch{position:relative;overflow:hidden;isolation:isolate;
  --mensch-luft:clamp(28px,3.2vw,50px);
  display:grid;
  /* Die Bildspalte ist genau so breit wie das Foto. Waere sie breiter, saesse
     das Foto mittig darin und rueckte um die halbe Differenz nach innen: bei
     432er Spalte und 400er Foto waren das 16px, aus 62px aussen wurden 78. */
  grid-template-columns:minmax(0,clamp(240px,27.8vw,400px)) minmax(0,clamp(300px,38vw,548px));
  justify-content:center;
  /* Der Zwischenraum ist die einzige Stellschraube fuer "weiter aussen":
     die Spalten sind gedeckelt, der Block ist mittig, also schieben sich
     Bild und Text mit jedem Pixel Zwischenraum nach aussen. Bei 1440 stehen
     damit 62px aussen und 154px in der Mitte, Zwischenstufen waren 88/95 und
     davor 15/111/145. Wird das Foto schmaler, muss dieser Wert mit, sonst
     wandern beide wieder nach innen. */
  gap:clamp(30px,10.7vw,155px);align-items:center;
  padding:var(--mensch-luft) clamp(24px,2.6vw,44px) 0}
/* Der Schein sitzt in der Ecke wie in der Vorlage, nur blau statt gelb. */
.mensch-schein{position:absolute;left:-14%;top:-42%;width:min(70%,620px);aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(93,151,220,.42),rgba(61,119,187,.14) 44%,transparent 70%);
  filter:blur(28px)}

/* stretch plus der negative Rand: die Spalte beginnt an der Oberkante der
   Karte statt unter dem Polster und endet an der Unterkante. Nur so ist
   top:50% wirklich die Mitte der Karte und nicht die Mitte des Inhalts.
   Das Foto bleibt davon unberuehrt, es haengt weiter unten an der Kante. */
/* Das Polster oben ist der Grund, warum das Foto nicht mehr an der Oberkante
   klebt. Weil die Spalte die Kartenhoehe traegt, wird die Karte um genau
   diesen Wert hoeher, waehrend das Foto durch place-items:end unten an der
   Kante bleibt. Ohne das Polster ist die Karte immer exakt so hoch wie das
   Foto, und ein kleineres Foto macht nur eine kleinere Karte. */
.mensch-bild{position:relative;z-index:1;align-self:stretch;
  --bild-luft:clamp(28px,4.6vw,72px);
  margin-top:calc(-1 * var(--mensch-luft));padding-top:var(--bild-luft);
  display:grid;place-items:end center;min-height:0}
/* Das Zeichen liegt hinter der Person, mittig zur Karte. Vorher sass es
   unten und war vom Kartenrand angeschnitten: davon blieb ein grauer Fleck
   neben der Schulter uebrig statt eines erkennbaren Zeichens. */
/* Der Prozentwert haengt an der Bildspalte und wird bei jeder Aenderung
   nachgezogen: 441 -> 108 %, 432 -> 110 %, 400 -> 118 %. So bleibt das
   Zeichen bei 1440 immer genau die 472px, die Leon abgenommen hat. */
.mensch-zeichen{position:absolute;left:52%;top:50%;translate:-50% -50%;
  width:min(118%,472px);max-width:none;height:auto;z-index:0;pointer-events:none}
/* Mittig statt unten angeschnitten heisst: das Zeichen ist auf einmal ganz
   zu sehen und traegt viel mehr Flaeche als vorher. Bei .10 und .46 wurde
   daraus ein Pfeil, der mit dem Portrait um die Karte streitet. Es soll
   hinter der Person stehen, nicht neben ihr. */
.mensch-zeichen polygon{fill:rgba(255,255,255,.055)}
.mensch-zeichen polygon:first-child{fill:rgba(127,178,238,.26)}
/* Ueber die Bildbreite haengt die ganze Kartenhoehe: die Karte ist exakt so
   hoch wie das Foto. 460px machten daraus einen Turm, 410px war zu flach.
   432px sind der Stand, den Leon abgenommen hat. */
.mensch-bild img{position:relative;z-index:1;
  width:min(100%,400px);height:auto;display:block;
  /* Der Freisteller endet hart an der Unterkante. Ein kurzer Auslauf setzt
     ihn auf die Karte, statt ihn abzuschneiden. */
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);
  mask-image:linear-gradient(180deg,#000 88%,transparent)}

.mensch-text{position:relative;z-index:1;min-width:0;padding-bottom:var(--raum-6)}
/* Keine eigenen Hoechstbreiten mehr: die Textspalte ist die Grenze. Sonst
   entsteht innerhalb der Spalte wieder tote Flaeche und der Block steht
   trotz justify-content:center optisch links. */
.mensch-text h2{font-size:var(--fs-karte);letter-spacing:var(--ls-h2);
  line-height:var(--lh-karte);font-weight:600;max-width:none}
.mensch-text p{margin-top:var(--raum-2);max-width:none;
  color:var(--tinte-2);font-size:var(--fs-sm)}
/* Der Merksatz stand vorher als dritte und vierte Zeile in der Ueberschrift
   und riss sie mitten im Satz auseinander. Als eigene Zeile ist er eine
   Stufe fuer sich: heller als der Fliesstext, kleiner als die Ueberschrift. */
.mensch-text .mensch-satz{margin-top:var(--raum-1);
  color:var(--tinte);font-size:var(--fs-lead);font-weight:600;
  letter-spacing:-.01em;max-width:none}
/* Die Signatur schliesst den Block ab, wie eine Unterschrift unter einem
   Brief. Sie steht ueber einer Haarlinie, damit sie nicht als dritter Absatz
   gelesen wird. */
/* Mit .mensch-signatur allein (0,1,0) hat .mensch-text p (0,1,1) gewonnen
   und Farbe wie Abstand ueberschrieben. Die Spalte davor gehoert dazu.
   Ohne Haarlinie: sie war die vierte waagerechte Kante in einer Karte, die
   ohnehin schon Rahmen, Lichtkante und Knopf traegt. Der groessere Abstand
   setzt die Zeile jetzt ab. */
.mensch-text .mensch-signatur{display:flex;align-items:center;gap:11px;
  margin-top:var(--raum-5);max-width:none;
  color:var(--tinte);font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em}
.mensch-signatur svg{width:20px;height:20px;flex:none;color:var(--blau-hell)}
.mensch-text .tat{margin-top:var(--raum-4)}

/* minmax(0,1fr) statt 1fr: 1fr traegt min-width:auto, und bei 320px hat der
   Text die Karte dadurch um 12px gesprengt. Zum vierten Mal dieselbe Falle
   in diesem Projekt. */
@media(max-width:860px){
  .mensch{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,28px);
    padding:clamp(26px,4vw,36px) clamp(24px,4vw,34px) 0}
  /* Schmal steht das Bild oben und traegt die Hoehe selbst. Der Ausgleich
     fuer das Polster faellt damit weg, sonst rutscht die Spalte nach oben
     aus der Karte heraus. */
  /* Schmal steht das Foto ohnehin oben in der Karte, ein zweites Polster
     ueber dem des Kartenrands waere dort nur ein Loch. */
  .mensch-bild{order:-1;justify-items:center;align-self:auto;
    margin-top:0;padding-top:0}
  .mensch-bild img{width:min(74%,320px)}
  .mensch-zeichen{width:min(86%,300px);left:50%;top:50%;translate:-50% -50%}
  /* Linksbuendig wie auf Desktop. Zentriert waren es 8 Zeilen bei 390px und
     11 bei 320px; ueber drei Zeilen muss das Auge bei jeder Zeile den Anfang
     neu suchen. Das war der Punkt, an dem die Mobilfassung unfertig wirkte. */
  .mensch-text{padding-bottom:clamp(30px,5vw,40px);text-align:left}
  .mensch-text h2,.mensch-text p{max-width:none}
  .mensch-signatur{justify-content:center}
}
/* Der Knopf traegt white-space:nowrap und passte bei 320px nicht mehr in die
   Karte. In der schmalsten Stufe nimmt er die volle Breite und darf umbrechen. */
@media(max-width:430px){
  .mensch-text .tat{width:100%;padding-inline:18px;white-space:normal;text-align:center}
}

/* ============================================================
   ABLAUF , vier Schritte auf einer Bahn
   Der einzige Abschnitt ohne Glas, und das ist der Zweck: zwischen der
   Mensch-Karte und dem Kontaktformular staenden sonst vier Scheiben in
   Folge und das Material waere Tapete. Material kommt hier aus Licht.

   Der Aufbau haengt an einer Idee: .bahn traegt ein Polster oben, und die
   Linie liegt genau auf dessen Unterkante. Damit beginnt jedes .takt exakt
   auf der Bahn, und Nummer wie Knoten koennen sich mit bottom:100% und
   top:0 daran haengen, ohne dass irgendwo eine Zahl doppelt gepflegt wird.
   ============================================================ */
.bahn{
  position:relative;
  /* Der Kreis sitzt mittig AUF der Bahn. Der Kopfraum ist deshalb genau
     seine halbe Hoehe, mehr braucht es nicht und weniger schneidet ihn an. */
  --kreis:clamp(42px,3.6vw,52px);
  --bahn-kopf:calc(var(--kreis) / 2);
  width:var(--mittel);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px);
  padding-top:var(--bahn-kopf);
}
/* Die Linie laeuft an beiden Enden ins Nichts, damit sie nicht abgeschnitten
   wirkt. Rechts wird sie schwaecher statt zu enden: der vierte Schritt heisst
   Betrieb und Ausbau, er hoert nicht auf. */
.bahn::before{
  content:"";position:absolute;left:0;right:0;top:var(--bahn-kopf);height:1px;
  background:linear-gradient(90deg,
    transparent,rgba(127,178,238,.58) 4%,
    rgba(127,178,238,.46) 38%,rgba(127,178,238,.28) 72%,
    rgba(127,178,238,.10) 93%,transparent);
}
.takt{position:relative;min-width:0;
  padding-top:calc(var(--kreis) / 2 + var(--raum-4))}
/* Der Kreis ist zugleich Nummer und Knoten, gebaut wie der Pfeilkreis in der
   zweiten Angebotskarte. Er sitzt mit seiner linken Kante auf der Textkante,
   nicht mittig darauf: sonst haengt die erste Spalte einen halben Kreis
   links aus der Bahn heraus.
   Der Grund unter der Toenung ist deckend, sonst liefe die Haarlinie
   sichtbar durch die Zahl. */
.takt-nr{position:absolute;left:0;top:0;translate:0 -50%;
  display:grid;place-items:center;
  width:var(--kreis);height:var(--kreis);border-radius:50%;
  background:linear-gradient(rgba(61,119,187,.20),rgba(61,119,187,.08)),rgba(9,13,20,.94);
  box-shadow:inset 0 0 0 1px rgba(127,178,238,.28),0 0 14px 0 rgba(127,178,238,.11);
  font-size:clamp(.95rem,1.15vw,1.12rem);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:var(--blau-hell);
  animation:taktpuls 3.4s var(--ease) infinite;
  animation-delay:calc(var(--i,0) * 420ms)}
/* Kleiner als --fs-h3, und zwar wegen der schmaleren Bahn: bei 1325px Breite
   hatte jede Spalte 307px und alle vier Titel standen einzeilig, bei 1060px
   sind es 241px und "Konzept und Design" brauchte in --fs-h3 rund 250px.
   Es ist ein Kennwort, keine Abschnittsueberschrift; in dieser Groesse steht
   es bei 1440 wieder einzeilig.

   KEINE Mindesthoehe. Sie stand hier gegen ein Ausfransen, das es in dieser
   Groesse gar nicht mehr gibt: gemessen ueber 1200 bis 3440 steht jeder
   Titel einzeilig, der breiteste braucht 215px in einer Spalte von 201 bis
   249px. Die reservierte zweite Zeile riss dafuer ein Loch von 25px unter
   jeden Titel; der sichtbare Abstand zum Text betrug 40px statt der
   angesetzten 17, waehrend dieselbe Beziehung sonst ueberall bei 15 bis 18
   liegt. Nur die Bahn las sich dadurch anders als der Rest der Seite.
   Bedingung: die vier Titel bleiben kurz genug fuer eine Zeile. Wer einen
   laengeren setzt, misst nach. */
/* Dasselbe Blinken wie am Pfeilkreis in der zweiten Angebotskarte, nur
   ruhiger und laenger. Der Versatz laeuft ueber dasselbe --i, das schon die
   Einblendung staffelt: die vier Kreise pulsen nacheinander, das liest sich
   wie ein Signal, das die Bahn entlanglaeuft, statt wie ein Blinklicht. */
@keyframes taktpuls{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(127,178,238,.28),
          0 0 14px 0 rgba(127,178,238,.11),0 0 0 0 rgba(127,178,238,.16)}
  55%{box-shadow:inset 0 0 0 1px rgba(127,178,238,.46),
      0 0 16px 0 rgba(127,178,238,.17),0 0 0 11px rgba(127,178,238,0)}
}
.takt h3{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:var(--lh-klein);
  letter-spacing:var(--ls-h3)}
.takt p{margin-top:var(--raum-1);color:var(--tinte-2);font-size:var(--fs-sm)}

/* Vier Spalten in einer schon schmaleren Bahn brauchen Platz: bei 1000px
   blieben gemessen 168px je Spalte, bei 1200px sind es 201px. Darunter kippt
   die Bahn in die Senkrechte, dieselbe Linie und dieselben Kreise, nur
   gedreht. Senkrecht liest es sich ohnehin besser als in Streifen. */
@media(max-width:1199px){
  .bahn{--kreis:44px;--bahn-rand:calc(var(--kreis) + clamp(14px,4vw,20px));
    width:auto;grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px);
    padding-top:0;padding-left:var(--bahn-rand)}
  .bahn::before{left:calc(var(--kreis) / 2);right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,
      transparent,rgba(127,178,238,.50) 6%,
      rgba(127,178,238,.30) 74%,rgba(127,178,238,.10) 92%,transparent)}
  .takt{padding-top:0}
  /* .7em ist die halbe Zeilenhoehe der Ueberschrift daneben: der Kreis sitzt
     damit auf ihrer Mitte und nicht auf ihrer Oberkante. */
  .takt-nr{left:calc(-1 * var(--bahn-rand));top:.7em;translate:0 -50%}
}

/* ============================================================
   FRAGEN
   ============================================================ */
.fragen{width:var(--schmal);margin-inline:auto;display:flex;flex-direction:column;gap:var(--raum-2)}
/* Ohne Licht dahinter ist jede Scheibe nur ein dunkler Balken. Die Fragen
   hatten vorher keinen Lichthof, deshalb lasen sie sich flach. */
.frage{position:relative;border-radius:var(--r-mittel);overflow:hidden;
  transition:transform var(--d-mittel) var(--ease)}
/* Die offene Frage bekommt eine Schnittkante links und einen Lichthof.
   Beides ueber box-shadow, nicht ueber ein Pseudoelement: ::before traegt
   schon den Verlaufsrand und ::after das Zeigerlicht von .glas--licht. */
.frage{transition:box-shadow var(--d-mittel) var(--ease)}
.frage[open]{
  box-shadow:
    inset 3px 0 0 var(--blau-hell),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 6px rgba(0,0,0,.36),
    0 44px 90px -54px rgba(0,0,0,.95),
    0 0 60px -10px rgba(61,119,187,.55);
}
.frage[open] summary{color:var(--tinte)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:var(--raum-3) clamp(20px,2.4vw,28px);cursor:pointer;list-style:none;
  font-size:clamp(1rem,1.3vw,1.14rem);font-weight:600;letter-spacing:var(--ls-h3)}
.frage summary::-webkit-details-marker{display:none}
.frage summary i{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--linie-2);
  transition:transform var(--d-mittel) var(--ease),background-color var(--d-mittel) var(--ease)}
.frage summary i::before,.frage summary i::after{content:"";position:absolute;inset:50% 6px auto 6px;
  height:1.5px;background:var(--tinte);transform:translateY(-50%);border-radius:2px}
.frage summary i::after{transform:translateY(-50%) rotate(90deg);transition:transform var(--d-mittel) var(--ease)}
.frage[open] summary i{background:rgba(61,119,187,.34)}
.frage[open] summary i::after{transform:translateY(-50%) rotate(0)}
.frage p{padding:0 clamp(20px,2.4vw,28px) var(--raum-3);color:var(--tinte-2);
  font-size:var(--fs-sm);max-width:76ch}
@media(hover:hover){.frage summary:hover{color:var(--blau-hell)}}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,80px);align-items:start}
/* Vorher eigene Groesse (54px) und -.032em. Damit war sie die dritte
   h2-Groesse auf der Seite, nur zehn Prozent von der Abschnittsgroesse
   entfernt, und lief enger als die Titelzeile. Zehn Prozent liest niemand
   als Stufe. Sie ist jetzt eine Abschnittsueberschrift; die eine bewusste
   Ausnahme nach oben bleibt der Aufruf. */
/* Ganz normale Abschnittsueberschrift. Sie war zwischenzeitlich groesser
   gesetzt, das war ein Missverstaendnis: gemeint war der Aufruf in der Mitte,
   nicht der Kontakt. Hier gilt das Mass wie ueberall. */
.kontakt h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
.kontakt-lead{margin-top:var(--raum-2);color:var(--tinte-2);max-width:42ch;font-size:var(--fs-lead)}
/* Die drei Stichpunkte, die hier standen, sind raus: zwei davon sagten zum
   vierten Mal, was der Aufruf, der Ablauf und die Mensch-Karte schon sagen.
   Die 24 Stunden waren die einzige neue Angabe und stehen jetzt im Vorspann.
   Der groessere Abstand faengt die fehlende Hoehe auf. */
/* Ohne Trennstrich. Der Abstand allein setzt die drei Wege vom Vorspann ab;
   eine Haarlinie waere hier dieselbe zusaetzliche Kante, die schon aus der
   Mensch-Karte geflogen ist. */
.direkt{margin-top:var(--raum-6);display:flex;flex-direction:column;gap:var(--raum-1)}
.direkt a{display:flex;align-items:center;gap:14px;padding:4px 0;font-size:clamp(1rem,1.3vw,1.16rem);font-weight:600;letter-spacing:-.02em}
.direkt a s{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:var(--r-klein);
  text-decoration:none;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--linie);
  color:var(--blau-hell);transition:background-color var(--d-schnell) var(--ease)}
.direkt a s svg{width:17px;height:17px}
.direkt a:hover s{background:rgba(61,119,187,.26)}
.direkt em{display:block;font-style:normal;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--tinte-3);font-weight:500;margin-bottom:2px}

.form{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:16px}
/* Die Spam-Falle. Nicht display:none, darauf sind Bots eingestellt; sie liegt
   ausserhalb der Sicht, ohne die Seite zu verbreitern. */
/* .falle allein (0,1,0) verliert gegen .form input (0,1,1): die Falle stand
   dadurch als ganz normales Eingabefeld sichtbar im Formular. Der Selektor
   muss die Regel darunter ueberbieten. */
.form input.falle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:none;
  pointer-events:none}
.form-hinweis a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie-2);color:var(--tinte-2)}
@media(hover:hover){.form-hinweis a:hover{color:var(--tinte)}}
.feldpaar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.feld-zeile{display:flex;flex-direction:column;gap:8px}
.feld-zeile label{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--tinte-3);font-weight:600}
.form input,.form select,.form textarea{min-width:0;
  font-family:var(--schrift);font-size:max(16px,var(--fs-sm));color:var(--tinte);
  background:rgba(255,255,255,.045);border:0;box-shadow:inset 0 0 0 1px var(--linie-2);
  border-radius:var(--r-klein);padding:13px 15px;
  transition:box-shadow var(--d-schnell) var(--ease),background-color var(--d-schnell) var(--ease)}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  box-shadow:inset 0 0 0 1px var(--blau-hell), 0 0 0 3px rgba(61,119,187,.22);background:rgba(255,255,255,.07)}
.form input::placeholder,.form textarea::placeholder{color:rgba(238,243,249,.32)}
.form select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%237fb2ee' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
/* Die leise Stufe: eine Fussnote, die lesbar bleibt, sich aber nicht
   vordraengt. .tinte-3 liegt bei 5,13:1 gegen den Grund und damit ueber der
   Schwelle; tiefer geht es nicht. Zweimal benutzt, unter dem Fensterstapel
   und unter dem Formular, deshalb eine gemeinsame Klasse statt zweier
   Regeln, die auseinanderlaufen koennen. */
.leise{font-size:var(--fs-xs);color:var(--tinte-3)}
@media(max-width:900px){
  .kontakt-raster{grid-template-columns:1fr;gap:32px}

  /* --- Formular VOR die drei Knoepfe ---------------------------------------
     Auf dem Handy steht erst die Ueberschrift, dann das Formular, dann die
     drei direkten Wege. Wer schreiben will, muss nicht daran vorbeiscrollen.

     display:contents loest den Textblock auf, seine drei Kinder werden damit
     selbst Rasterfelder und lassen sich einzeln sortieren. Anders ginge es
     nicht: .direkt steckt IM Textblock, das Formular ist dessen Nachbar, und
     order kann nur Geschwister umsortieren.

     Der Preis: ein Element ohne Kasten kann keine Deckkraft tragen, die drei
     Kinder erscheinen auf dem Handy also ohne das Aufsteigen. Sie sind dafuer
     sofort da. Das Formular steigt weiter auf.

     Die Regel haengt am eigenen Namen .kontakt-text und NICHT an .steigt:
     das Formular traegt .steigt ebenfalls, display:contents haette es
     zerlegt. */
  .kontakt-text{display:contents}
  .kontakt-raster .form{order:2}
  .kontakt-raster .direkt{order:3}

  /* Der Zeilenabstand des Rasters muss WEG und wird durch eigene Raender
     ersetzt. Grund: seit .kontakt-text aufgeloest ist, sind Ueberschrift,
     Vorspann, Formular und Knoepfe alle Rasterfelder, und der Rasterabstand
     legt sich zwischen JEDES Paar. Zwischen Ueberschrift und Vorspann kam er
     damit zu deren eigenen 13px dazu: gemessen 45px, waehrend alle anderen
     Abschnitte 13px haben. Mit eigenen Raendern laesst sich jedes Paar
     einzeln setzen. */
  .kontakt-raster{row-gap:0}
  .kontakt-raster .form{margin-top:32px}
  .kontakt-raster .direkt{margin-top:32px}

  /* Alle anderen Abschnittsueberschriften stehen schmal mittig (.kopf--mitte).
     Diese hier gehoert zu keinem .kopf, sie stand deshalb als einzige links.
     Auf dem Desktop ist links richtig, dort liegt sie in der linken Spalte
     neben dem Formular; schmal steht alles untereinander und sie fiel aus
     der Reihe. */
  #kontakt h2,.kontakt-lead{text-align:center}
  .kontakt-lead{margin-inline:auto}
  /* Der Block der drei Wege wird als GANZES mittig gestellt, die Zeilen
     darin bleiben linksbuendig. Nicht align-items:center: das wuerde jede
     Zeile einzeln zentrieren, und weil sie verschieden breit sind, staenden
     die drei Zeichen dann nicht mehr untereinander.
     max-content macht den Block so breit wie seine breiteste Zeile,
     margin-inline:auto stellt ihn mittig, max-width haelt ihn schmal genug. */
  .direkt{width:max-content;max-width:100%;margin-inline:auto}
}

@media(max-width:520px){.feldpaar{grid-template-columns:1fr}}

/* ============================================================
   FUSS
   ============================================================ */
/* ============================================================
   FUSSBEREICH , aus V1 uebernommen
   Die mittlere Spalte mit Telefon, E-Mail und Sitz ist bewusst weg: dieselben
   Angaben stehen direkt darueber im Kontakt. Zweimal dasselbe auf einem
   Bildschirm liest sich als Fuellmaterial.
   ============================================================ */
.fuss{position:relative;margin-top:calc(var(--luft) / 2);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 60%),rgba(10,16,25,.5);
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%)}
/* Die Lichtkante oben und der Hof darunter kommen aus V1. Sie setzen den
   Fussbereich ab, ohne eine harte Trennlinie zu ziehen. */
.fuss::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(61,119,187,.55) 55%,rgba(255,255,255,.1) 75%,transparent)}
/* min(130px,100%) statt fest 130px. Auf den Rechtsseiten ist der Fussbereich
   nur 87px hoch, der Hof ragte dort 42px unter ihm heraus und machte das
   Dokument laenger als die Seite: unter dem Fussbereich stand ein Streifen
   Hintergrund. Auf der Startseite fiel es nie auf, dort ist der Fussbereich
   hoch genug. Mit 100 % als Deckel kann das in keinem Fussbereich mehr
   passieren, und weil der Verlauf bei 70 % seiner eigenen Hoehe durchsichtig
   ist, laeuft er weiter sauber aus statt abgeschnitten zu werden. */
.fuss::after{content:"";position:absolute;left:50%;top:-1px;translate:-50% 0;
  width:60%;height:min(130px,100%);pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,rgba(61,119,187,.16),transparent 70%)}
.fuss-raster{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;
  gap:clamp(28px,4vw,64px);padding-top:var(--raum-7);padding-bottom:var(--raum-5)}
/* Wortmarke und Satz darunter tragen dieselbe Breite. Vorher waren es 224px
   gegen 338px, und die Marke sass sichtbar zu kurz ueber ihrem eigenen Text. */
.fuss-marke{--fuss-marke-breite:clamp(196px,19.5vw,280px)}
.fuss-zeichen{width:var(--fuss-marke-breite);height:auto}
.fuss-marke p{margin-top:var(--raum-2);max-width:var(--fuss-marke-breite);
  color:var(--tinte-2);font-size:var(--fs-sm)}
/* Die Hoechstbreite bindet den Satz an die Breite der Wortmarke darueber.
   Auf dem Desktop ist das richtig, dort sind es 280px und drei Zeilen.
   Auf dem Handy klemmt clamp() bei 196px, waehrend die Spalte 350px breit
   ist: der Satz lief dort ueber FUENF Zeilen in einer schmalen Saeule und
   wirkte dadurch klotzig. Schmal darf er die ganze Spalte nutzen. */
@media(max-width:900px){
  .fuss-marke p{max-width:none;font-size:var(--fs-xs)}
}
.fuss-kanaele{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--raum-3)}
.kanal{display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 13px;border-radius:var(--r-pille);
  font-size:var(--fs-sm);font-weight:500;color:var(--tinte-2);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--linie-2);
  transition:color var(--d-schnell) var(--ease), background-color var(--d-schnell) var(--ease),
             box-shadow var(--d-schnell) var(--ease)}
.kanal svg{color:var(--blau-hell);transition:transform var(--d-mittel) var(--ease)}
@media(hover:hover){
  .kanal:hover{color:var(--tinte);background:rgba(61,119,187,.16);
    box-shadow:inset 0 0 0 1px rgba(127,178,238,.45)}
  .kanal:hover svg{transform:scale(1.1)}
}
.fuss-spalte{display:flex;flex-direction:column;gap:var(--raum-1)}
.fuss-kopf{font-size:var(--fs-xs);font-weight:600;color:var(--tinte);margin-bottom:4px}
.fuss-spalte a{font-size:var(--fs-sm);color:var(--tinte-2);padding-block:3px;
  transition:color var(--d-schnell) var(--ease)}
@media(hover:hover){.fuss-spalte a:hover{color:var(--tinte)}}
.fuss-boden{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:var(--raum-3);padding-bottom:var(--raum-4);border-top:1px solid var(--linie);
  font-size:var(--fs-xs);color:var(--tinte-3)}
/* Auf den Rechtsseiten steht nur die Bodenzeile. Dort waere die Trennlinie
   eine zweite Kante direkt unter der Lichtkante von .fuss::before. */
.fuss--klein .fuss-boden{border-top:0;padding-top:var(--raum-5)}
.fuss-boden a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie-2)}
@media(hover:hover){.fuss-boden a:hover{color:var(--tinte);text-decoration-color:var(--blau-hell)}}
@media(max-width:820px){
  .fuss-raster{grid-template-columns:1fr;gap:30px}
  .fuss-boden{flex-direction:column;gap:6px}
}
@media(max-width:800px){.fuss-raster{grid-template-columns:1fr;gap:28px}}

/* ---- Fussbereich, sobald er einspaltig steht ------------------------------
   Die Grenze ist 800px, und die ist nicht geraten: genau dort schaltet
   .fuss-raster von drei Spalten auf eine (Regel weiter oben). Solange drei
   Spalten nebeneinander stehen, waere Zentrieren falsch.

   Warum ueberhaupt: die ganze Mobilfassung steht inzwischen mittig, alle
   sechs Abschnittsueberschriften, die Vorspaenne, der Aufruf und der
   Kontaktbereich. Ein linksbuendiger Fussbereich war damit der letzte
   Ausreisser.

   EINGESTANDENER NACHTEIL: die Linklisten verlieren ihre gemeinsame linke
   Kante, und Navigation ueberfliegt sich zentriert schlechter. Bei fuenf
   kurzen Woertern ist das vertretbar, bei einer laengeren Liste waere es das
   nicht. Wer hier Punkte ergaenzt, denkt daran.

   Das Zeichen steht auf 250px statt 196: bei 196 wirkte es klein und verloren
   ueber seinem eigenen Text. Der Satz darunter laeuft dadurch dreizeilig und
   sitzt ausgewogen unter der breiteren Marke. */
@media(max-width:800px){
  .fuss-raster{text-align:center}
  .fuss-marke{--fuss-marke-breite:250px}
  .fuss-zeichen{margin-inline:auto}
  .fuss-marke p{margin-inline:auto;max-width:34ch}
  .fuss-kanaele{justify-content:center}
  .fuss-spalte{align-items:center}
  .fuss-boden{justify-content:center;text-align:center}
}

/* ============================================================
   ENTHUELLUNG
   Der Beobachter setzt nur eine Klasse, die Blende laeuft hier. Inhalt kann
   nicht unsichtbar bleiben, wenn eine Animation haengt.
   ============================================================ */
.js .steigt{opacity:0;transform:translateY(18px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.js .steigt.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .steigt{opacity:1;transform:none}
  .takt-nr{animation:none}
  .rahmen-innen,.werk:nth-child(even) .rahmen-innen{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .glas{background:var(--grund-3);-webkit-backdrop-filter:none;backdrop-filter:none}
  .leiste.fest{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--grund-2)}
  .korn{display:none}
}
@media(prefers-contrast:more){
  :root{--tinte-2:rgba(238,243,249,.88);--tinte-3:rgba(238,243,249,.74);
    --linie:rgba(255,255,255,.3);--linie-2:rgba(255,255,255,.46)}
  .korn{display:none}
}

/* ============================================================
   LEISTE AUF SCHMALEN SCHIRMEN
   Der Handlungsknopf hat den Menuepunkt aus der Leiste gedraengt. Auf kleinen
   Geraeten traegt das Blatt den Knopf, die Leiste braucht ihn nicht doppelt.
   ============================================================ */
@media(max-width:640px){
  .leiste-rechts > .tat{display:none}
  .marke{font-size:.86rem;gap:9px}
  .marke svg{width:18px;height:18px}
}


/* ============================================================
   TIPPZIELE
   Nur fuer Zeigegeraete ohne Feinsteuerung, also Finger. Apple und die
   Barrierefreiheitsrichtlinien nennen 44px als Mindestmass; mit der Maus
   genuegen deutlich kleinere Flaechen.

   WARUM NUR HIER UND NICHT ALLGEMEIN: die Knoepfe lagen bei 43px, einen
   Pixel darunter. Setzt man das Polster allgemein hoch, waechst die
   Kopfleiste um 2px - auch auf dem Desktop, wo die Leiste abgenommen ist
   und alle Sprungziele daran haengen. Gemessen sprangen sie von 37/38 auf
   35/36. Deshalb steht die Erhoehung hier und nicht oben bei den Bauteilen.
   ============================================================ */
/* Zwei Bedingungen mit ODER: pointer:coarse trifft echte Finger auch auf
   breiten Geraeten, die Breite trifft alles Schmale auch dann, wenn ein
   iPad mit Stift sich als "fein" meldet. Und nur die Breite laesst sich in
   der Emulation nachpruefen, coarse nicht. */
@media(pointer:coarse),(max-width:900px){
  /* 43px -> 45px. Die Karte im Vergleich setzt ihr eigenes Polster
     (.weg--wir .tat, zwei Klassen und damit staerker), deshalb steht sie
     hier ausdruecklich daneben. Ohne sie blieb genau dieser eine Knopf bei
     43px zurueck.
     min-height als Netz darunter: im Klappmenue gewinnt .blatt a gegen .tat
     (eine Klasse UND ein Element), und im Querformat zieht die Regel fuer
     niedrige Fenster das Polster auf 9px. Der Knopf lag damit bei 35px.
     Ein Mindestmass greift unabhaengig davon, welches Polster gewinnt. */
  .tat,.weg--wir .tat{padding-block:15px}
  .tat{min-height:44px}
  /* 43px -> 47px */
  .kanal{padding-block:11px}
  /* Die Wortmarke war als Tippziel nur so hoch wie ihr Bild: 15px. Die
     Flaeche waechst nach oben und unten, das Bild bleibt an seinem Platz. */
  .marke{min-height:44px}
  /* Fussbereich: 31px -> 47px. Der negative Aussenabstand darf HOECHSTENS
     6px betragen. Bei 8px waren die Flaechen zwar optisch deckungsgleich
     mit vorher, ueberlappten sich aber um 4px, und dann gehoert der untere
     Rand eines Links schon zum naechsten. Bei 6px stossen sie genau
     aneinander. */
  .fuss-spalte a{padding-block:11px;margin-block:-6px}
}