/* ── AKIBON.STUDIO ────────────────────────────────────────────────────────────────────────
   Ty 12.09.2026, nach der ersten Fassung: „Bei uns ist alles viel zu schwarz... Viel zu
   anstrengend für die Augen." Und mit unicorn-factory.net als Vorbild: „wie clean er seine
   Farben benutzt".

   Was dort wirklich passiert, habe ich nachgemessen statt geraten: die Seite wechselt
   staendig zwischen weiss (#ffffff), fast-weiss (#f6f8fc, #edf2f7) und tiefem Marineblau.
   Nicht die Helligkeit macht sie angenehm, sondern der RHYTHMUS — kein Abschnitt sieht aus
   wie der davor.

   Also hier dasselbe Prinzip in Akibons Farben:
     · Grund ist kein reines Schwarz mehr, sondern ein sehr dunkles Indigo (#0a0812).
       Reines Schwarz mit reinem Weiss darauf ist der haerteste Kontrast, den ein Bildschirm
       hergibt — genau das, was in den Augen brennt.
     · Text ist gebrochenes Weiss (#ece9f5), nicht #ffffff.
     · Drei dunkle Stufen im Wechsel, plus ZWEI HELLE Abschnitte (Premium-Paket und Pakete).
       Die hellen sind die Stellen, an denen Geld verdient wird — dort soll das Auge hin.
   Keine Bibliothek, keine Baukasten-Klassen. Eine Datei, die man liest. */

:root{
  /* ── DIE FARBEN, NEU GESETZT AM 04.10.2026 ────────────────────────────────────────
     Ty: „Mir gefällt das komplette Farbdesign hier nicht. Dieses Lila und dann ganz
     schlimm dieser graue Text."

     Zwei verschiedene Probleme, beide gemessen:

     1. ALLES HATTE EINEN LILA-STICH, auch das, was neutral aussehen sollte. Der
        Hintergrund war #0a0812 (mehr Blau als Gruen), die Flaechen #171324, und selbst der
        „graue" Text #a9a3c0 ist in Wahrheit ein blasses Violett. Darum wirkte die Seite
        flau: es gab kein Neutral, gegen das das Gold haette leuchten koennen.
        Jetzt sind die Stufen echt neutral (#08090c aufwaerts), und Farbe kommt nur noch
        dort vor, wo sie etwas bedeutet.

     2. DER DUNKLE TEXT WAR WIRKLICH ZU DUNKEL. --tx3 kam auf #0a0812 auf 4,07:1 — unter
        den 4,5:1, die kleiner Text braucht. Jetzt 7,12:1. --tx2 steigt von 8,22 auf
        12,33:1 und verliert den Violettstich.

     3. STATT LILA EIN BLAU. Ty hat als Vorbild carvinci.com genannt — dort traegt ein
        klares Blau die Bedienelemente, Gruen die Preise, Bernstein die Abzeichen. Genau
        diese Rollenverteilung gilt jetzt auch hier: GOLD ist die Marke und der Kaufknopf,
        BLAU ist Verweis und Hinweis, GRUEN bestaetigt.
        Die alten Namen --lila/--lila2 bleiben als Verweis bestehen, damit kein Dutzend
        Regeln angefasst werden muss, die nichts mit dieser Entscheidung zu tun haben. */
  /* dunkle Stufen — neutral, kein Farbstich */
  --bg:#08090c; --bg2:#0d0f13; --bg3:#12151b;
  --sur:#1519204d; --sur-voll:#151920; --sur2:#1c212a;
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.14); --bd3:rgba(255,255,255,.22);
  --tx:#f3f5f8; --tx2:#c6ccd6; --tx3:#949ba8;
  /* helle Abschnitte */
  --hell:#f5f6f8; --hell2:#e8eaee; --hell-tx:#12141a; --hell-tx2:#4b5565; --hell-bd:rgba(18,20,26,.11);
  /* ── DIE AKZENTE KOMMEN AUS DEM LOGO, NICHT AUS MEINEM KOPF ───────────────────────
     Ty 07.10.2026: „Du solltest nicht die Brandfarben von unserem Logo entfernen. Unser
     Logo hat die richtigen farben." Zu Recht — ich hatte das Lila gegen ein Blau
     getauscht und damit die halbe Marke mit entsorgt.

     NACHGEMESSEN im Logo (public/logo-mark.png, 512x512, haeufigste Farben):
       Violett  #401060 · #502070 · #401070   → Farbton 276°, Saettigung 71 %
       Gold     #f0b040 · #e0a040 · #e0a030   → deckt sich mit --gold #e0a83c

     WARUM DAS LILA VORHER TROTZDEM STOERTE: es war gar nicht die Logofarbe. Benutzt wurde
     #8b5cf6 — ein blasses Lavendel, 60 % heller als das Logo-Violett und viel weniger
     gesaettigt. Daneben lagen Hintergruende und „grauer" Text mit demselben Stich. Das
     Ergebnis sah ausgewaschen aus, nicht markant.

     Jetzt also: das ECHTE Logo-Violett, nur so weit aufgehellt, dass man es lesen kann
     (#401060 kommt auf dunklem Grund auf 1,39:1 — unlesbar). Derselbe Farbton, dieselbe
     Saettigung, nur heller: 5,85:1 auf dunkel, 6,89:1 auf hell.
     Die Grundstufen bleiben neutral — DAS war der Teil der Beschwerde, der stimmte. */
  --gold:#e0a83c; --gold-hell:#f2c268; --gruen:#4ade80;
  --logo-lila:#401060;                      /* unveraendert aus dem Logo, fuer Flaechen */
  --akz:#b56ae6; --akz2:#c58df0;            /* lesbar auf dunkel */
  --akztx:#b56ae6;                          /* auf hell dunkler, siehe body/licht unten */
  --lila:var(--akz); --lila2:var(--akz2);   /* Altnamen zeigen wieder aufs Violett */
  --goldtx:#e0a83c;   /* Gold zum LESEN — auf Hell dunkler, siehe body.hellmodus */
  --schrift:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --rand:clamp(20px,5vw,64px);
  --weich:cubic-bezier(.22,1,.36,1);
  /* Fuer Hoehen und Groessen. --weich schiesst los und kriecht aus; bei einer Hoehe
     sieht das hektisch aus, weil die halbe Strecke in den ersten Millisekunden weg ist. */
  --ruhig:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--schrift);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.mitte{max-width:1180px;margin:0 auto;padding:0 var(--rand)}

/* ── Abschnitts-Rhythmus ─────────────────────────────────────────────────────────────── */
section{padding:clamp(66px,9vw,116px) 0;position:relative}
.stufe1{background:var(--bg)}
.stufe2{background:var(--bg2)}
.stufe3{background:var(--bg3)}
.licht{background:var(--hell);color:var(--hell-tx);--hell-karte:#fff}
.licht p{color:var(--hell-tx2)}
.licht .marke{color:#7a1fc4}
.licht .karte{background:var(--hell-karte);border-color:var(--hell-bd);
  box-shadow:0 1px 2px rgba(20,16,32,.05)}
.licht .karte:hover{border-color:rgba(124,58,237,.35)}
.licht .etikett{color:var(--hell-tx2);border-color:var(--hell-bd)}
.licht h2,.licht h3{color:var(--hell-tx)}

/* ── Typografie ──────────────────────────────────────────────────────────────────────── */
.marke{font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--goldtx);margin:0 0 14px}
h1{font-size:clamp(36px,6.2vw,68px);line-height:1.05;letter-spacing:-2px;font-weight:800;margin:0 0 22px}
h2{font-size:clamp(27px,3.8vw,44px);line-height:1.14;letter-spacing:-1.1px;font-weight:800;margin:0 0 16px}
h3{font-size:17.5px;font-weight:800;margin:0 0 8px;letter-spacing:-.3px}
p{color:var(--tx2);margin:0 0 16px;font-size:15.5px}
.gross{font-size:17px;max-width:64ch}
.gold{color:var(--gold)}
.verlauf{background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hell) 28%,var(--lila2) 72%,var(--lila) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Kopfzeile ───────────────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:70;background:rgba(8,9,12,.80);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.kopf{display:flex;align-items:center;gap:0;height:70px;--knopfluft:12px}
/* Logo und Magic Button duerfen NICHT schrumpfen. Ty 12.09.2026: „Und das darf auf keinen
   Fall sein" — das Logo war auf „AKIBO" abgeschnitten und der Knopf lag darueber.
   Ursache: beide sind Flex-Elemente und schrumpfen im Zweifel unter ihren Inhalt; der Text
   laeuft dann heraus und das naechste Element schiebt sich darueber. Ein Kopf ist die eine
   Stelle, an der nichts „im Zweifel" passieren darf. */
/* ── DAS LOGO IST DAS ORIGINAL ───────────────────────────────────────────────────────────
   Ty 13.09.2026: „Das Logo ist nicht echt, du hast irgendwas weirdes gemacht."

   Stimmt. Davor stand hier der Schriftzug in der Hausschrift NACHGEBAUT, mit dem Zeichen
   an der Stelle des O. Andere Schrift, andere Strichstaerke, andere Abstaende — eine
   Nachahmung, kein Logo. Jetzt kommt das Wort als Bild direkt aus der Logodatei;
   freigestellt wird es von scripts/logo_kopf.py.

   Zwei Dateien, weil der Magic Button auf Tageslicht schalten kann: weisse Buchstaben
   waeren dort unsichtbar. Der Ring bleibt in beiden farbig — er ist das Erkennungszeichen.
   Graustufen und maximaler Kontrast brauchen nichts Eigenes: der Graustufen-Modus legt
   einen Filter ueber die ganze Kopfzeile, und der nimmt das Bild mit.

   STUDIO steht daneben statt darunter. Ty: „macht es mehr sinn studio rechts daneben
   stehen zu haben anstatt drunter." Im Kopf ist Hoehe knapp und Breite reichlich — eine
   zweite Zeile verschenkt genau das Falsche. */
.logo{--logo:26px;display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-wort{height:var(--logo);width:auto;display:block}
.logo-wort.hell{display:none}
body.hellmodus .logo-wort.dunkel{display:none}
body.hellmodus .logo-wort.hell{display:block}
/* Die Sperrung stammt aus dem Logo, dort steht STUDIO ebenfalls weit auseinander. Das
   letzte Zeichen bekommt seinen Abstand mit — ohne den Ausgleich rechts saehe das Wort
   nach rechts verrutscht aus. */
.logo i{font-style:normal;white-space:nowrap;font-size:calc(var(--logo) * .38);
  font-weight:700;letter-spacing:.34em;color:var(--goldtx);margin-right:-.34em}

/* ── DIE ANORDNUNG IM KOPF ───────────────────────────────────────────────────────────────
   Ty 13.09.2026: „Dann alles von about us zu magic button soll zentriert im header stehen."

   Zentriert heisst hier WIRKLICH zentriert — auf die Mitte der Seite, nicht auf die Mitte
   des uebrigen Platzes. Beides sieht nur gleich aus, solange links und rechts zufaellig
   gleich breit sind; das Logo ist 120 Pixel breit, die rechte Gruppe auf Deutsch 240, und
   „zentriert im Restplatz" waere sichtbar zu weit rechts.

   Deshalb bekommen die beiden Aussengruppen flex:1: sie teilen sich den Platz links und
   rechts der Mitte zu gleichen Teilen, und die Navigation dazwischen sitzt genau auf der
   Mitte — unabhaengig davon, wie breit die beiden Seiten sind. Die Navigation loest dafuer
   ihre Box auf (display:contents); sie waere sonst eine dritte Gruppe, die selbst wieder
   ausgerichtet werden muesste.

   Kein min-width:0 auf der linken Gruppe. Genau das hat das Logo frueher schon einmal auf
   „AKIBO" abgeschnitten (Ty: „Und das darf auf keinen Fall sein"): Flex-Elemente duerfen
   sonst unter ihren Inhalt schrumpfen. */
.kopf nav{display:contents}
/* GLEICHE LUECKEN, NICHT MATHEMATISCHE MITTE. Ty 13.09.2026: „der abstand soll so verteilt
   sein, dass über uns und das logo den gleichen abstand haben wie magic button und sprache."

   Vorher hatten beide Aussengruppen flex:1 und teilten sich den Platz zu gleichen Teilen —
   damit sass die Navigation exakt auf der Seitenmitte. Das ist aber nur dann auch gleich
   AUSSEHEND, wenn links und rechts gleich breit sind, und das sind sie nicht: das Logo ist
   207 Pixel breit, die rechte Gruppe auf Deutsch 261. Die Differenz von 54 landete komplett
   in der linken Luecke, und genau die hat Ty gesehen.

   space-between verteilt stattdessen den uebrigen Platz auf die ZWISCHENRAEUME, und bei
   drei Elementen sind das genau zwei gleich grosse. Die Navigation steht damit ein paar
   Pixel rechts der Seitenmitte — und sieht dadurch mittig aus. */
.kopf{justify-content:space-between}
.kopflinks{display:flex;align-items:center}
.navlinks{display:flex;align-items:center;flex-shrink:0}
/* SICHTBAR gleiche Luecken, nicht nur rechnerisch. space-between macht die Luecken
   zwischen den KAESTEN gleich — links laeuft die Luecke aber bis zum Buchstaben „Ü", rechts
   liegt der Innenabstand des Magic Buttons noch mit drin. Gemessen an den echten
   Textkanten: 33 links gegen 45 rechts, und die Differenz war auf den Pixel genau dieser
   Innenabstand. Also wird er hier wieder abgezogen. Danach: 39 zu 39, und die Aussenraender
   bleiben bei 64. */
.kopfaktionen{display:flex;align-items:center;gap:10px;
  margin-left:calc(-1 * var(--knopfluft))}
/* Im aufgeklappten Menue steht alles untereinander — dort waere der Ausgleich eine
   Einrueckung nach links. */
.kopf nav.auf .kopfaktionen{margin-left:0}
.kopf nav a{padding:9px var(--knopfluft);border-radius:9px;font-size:13.5px;font-weight:700;color:var(--tx2);
  text-decoration:none;transition:color .15s,background .15s}
.kopf nav a:hover{color:var(--tx);background:var(--sur2)}
/* ── DER MAGIC BUTTON ────────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Das Magic ding statdessen im Header... als zufalls button der die website
   immer anders umgestalltet, am besten in presets die nacheinander abfolgen. Nenn Es Magic
   Button und mach den sehr Present."

   Vorher waren es acht Einzelschalter in einer Klappe unten rechts. Acht Schalter sind ein
   Werkzeug fuer jemanden, der weiss, was er sucht — ein Knopf ist eine Einladung. Und darum
   geht es an dieser Stelle: der Besucher soll in zwei Sekunden merken, dass die Seite mehr
   kann als dazustehen.

   Er sitzt AUSSERHALB der Navigation, damit er am Handy nicht im eingeklappten Menue
   verschwindet — dort waere er genau das Gegenteil von „present". */
/* Ty 13.09.2026: „Mach es lieber direkt neben FAQ und gleiches design, ohne emoji, nur mit
   dem unterschied, dass er ab und an sparkled und leuchtet."

   Vorher war es eine lila Kachel mit einem Funkel-Emoji — laut genug, um neben dem gelben
   Knopf um dieselbe Aufmerksamkeit zu streiten, obwohl sie um verschiedene Dinge bitten:
   der eine um einen Termin, der andere nur ums Ausprobieren. Jetzt sieht er aus wie ein
   Navigationspunkt und faellt nur durch das Leuchten auf. Ein Knopf, der gleich aussieht,
   aber gelegentlich aufleuchtet, wird angeschaut, ohne dass er etwas wegnimmt. */
.magic{position:relative;flex-shrink:0;cursor:pointer;border:0;background:transparent;
  font-family:inherit;padding:9px var(--knopfluft);border-radius:9px;font-size:13.5px;
  font-weight:700;color:var(--tx2);transition:color .15s,background .15s,text-shadow .4s}
.magic:hover{color:var(--tx);background:var(--sur2)}
.magic:active{transform:scale(.97)}
/* Neun Sekunden Ruhe, dann anderthalb Sekunden Leuchten — die beiden Hausfarben, weil ein
   weisses Leuchten nach Fehler aussieht und nicht nach Einladung. Wer „Animationen aus"
   waehlt, bekommt auch das nicht. */
@keyframes magicglanz{
  0%,84%,100%{color:var(--tx2);text-shadow:none}
  89%{color:var(--tx);text-shadow:0 0 9px rgba(167,139,250,.9),0 0 20px rgba(224,168,60,.42)}
  94%{color:var(--tx);text-shadow:0 0 5px rgba(167,139,250,.45)}
}
.magic{animation:magicglanz 9s ease-in-out 4s infinite}
.magic:hover{animation:none}
body.ruhig .magic{animation:none}
@media(prefers-reduced-motion:reduce){ .magic{animation:none} }

/* ── ZURUECK NACH OBEN ───────────────────────────────────────────────────────────────────
   Er erscheint nicht, weil man weit unten ist, sondern weil man ZURUECK will — und das
   zeigt sich daran, dass jemand nach oben scrollt. Ein Knopf, der die ganze Zeit in der
   Ecke klebt, ist Moebliierung; dieser ist eine Antwort. */
.hochknopf{position:fixed;right:20px;bottom:20px;z-index:90;width:48px;height:48px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--bd2);background:rgba(20,16,32,.82);color:var(--tx2);
  backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .4s var(--weich),transform .4s var(--weich),visibility 0s linear .4s,
             color .2s,border-color .2s}
.hochknopf.da{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .4s var(--weich),transform .4s var(--weich),visibility 0s,
             color .2s,border-color .2s}
.hochknopf:hover{color:var(--gold);border-color:var(--gold)}
body.hellmodus .hochknopf{background:rgba(255,255,255,.86);color:var(--tx2)}

.menu{display:none;margin-left:auto;background:none;border:1px solid var(--bd2);border-radius:10px;
  color:var(--tx);padding:9px 12px;font-size:16px;cursor:pointer;line-height:1}
/* DER KOPF DARF NICHT PLATZEN. Ty 12.09.2026: „Hab magic button zu oft gedrückt, jetzt
   ist die seite irgendwie im arsch." Es war der Kopf: „Mehr Luft" zieht die Seitenraender
   von 64 auf 84 Pixel, dem Kopf fehlten damit 40 Pixel, und Magic Button und
   Gespraechs-Knopf brachen in drei Zeilen um.
   Zwei Riegel: der Kopf macht die groesseren Raender nicht mit — er ist eine Leiste, kein
   Textabschnitt —, und seine Knoepfe brechen grundsaetzlich nicht um. Dazu klappt das
   Menue 120 Pixel frueher ein, damit zwischen „passt gerade noch" und „passt nicht mehr"
   Luft bleibt. */
body.luft header .mitte{--rand:clamp(20px,5vw,64px)}
.magic,.kopf .knopf,.kopf nav a{white-space:nowrap}
/* ── EINGEKLAPPT ─────────────────────────────────────────────────────────────────────────
   display:none schlaegt display:contents — die Navigation ist damit wieder eine Box, und
   Sprache und Erstgespraech fallen mit ihr ins Klappmenue, statt in der schmalen Leiste
   stehen zu bleiben. Auf 375 Pixeln waeren sie dort 371 Pixel breit, also 28 zu viel.
   Die Abstaende aus der Kopfanordnung muessen dabei weg: in einer Spalte waeren sie
   Einrueckungen. */
.kopf.eng nav{display:none}
/* Im Klappmenue stehen beide Gruppen untereinander statt nebeneinander. Ohne das waere
   die Navigation eine Zeile und der Rest daneben — in einer 375 Pixel breiten Spalte. */
.kopf nav.auf .navlinks,.kopf nav.auf .kopfaktionen{flex:none;display:flex;
  flex-direction:column;align-items:stretch;gap:2px;justify-content:flex-start}
.kopf nav.auf .magic{text-align:left}
.kopf.eng nav.auf{display:flex;position:absolute;top:70px;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:2px;background:var(--bg2);
  border-bottom:1px solid var(--bd);padding:10px;z-index:80}
.kopf.eng .menu{display:block}
@media(max-width:1100px){
  .kopf nav{display:none} .menu{display:block}
  .kopf nav.auf{display:flex;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;background:var(--bg2);
    border-bottom:1px solid var(--bd);padding:10px;z-index:80}
}

/* ── Knoepfe ─────────────────────────────────────────────────────────────────────────── */
.ctakurz{display:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:13px;font-size:14.5px;font-weight:800;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .18s var(--weich),background .15s,border-color .15s,box-shadow .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf.voll{background:var(--gold);color:#14100a;box-shadow:0 6px 22px rgba(224,168,60,.22)}
.knopf.voll:hover{background:var(--gold-hell);box-shadow:0 10px 30px rgba(224,168,60,.3)}
.knopf.lila{background:var(--lila);color:#fff;box-shadow:0 6px 22px rgba(130,60,200,.26)}
.knopf.lila:hover{background:var(--lila2)}
.knopf.leer{background:transparent;border-color:var(--bd3);color:var(--tx)}
.knopf.leer:hover{border-color:var(--gold);color:var(--gold)}
.licht .knopf.leer{border-color:var(--hell-bd);color:var(--hell-tx)}
.licht .knopf.leer:hover{border-color:#7a1fc4;color:#7a1fc4}
.knopf.klein{padding:11px 18px;font-size:13px;border-radius:11px}

/* ── Karten ──────────────────────────────────────────────────────────────────────────── */
.raster{display:grid;gap:14px}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
/* ── DAS LAUFBAND ────────────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Pack das da nicht so trocken untereinander, mach dass es animiert
   slideshow mässig nebeneinander kommt. ... Im allgemeinen soll immer alles lange genug
   still stehen, dass man Zeit zum lesen hat."

   Der letzte Satz bestimmt die Bauart. Ein Band, das ununterbrochen zieht, kann man nicht
   lesen — also zieht es NICHT ununterbrochen: eine halbe Sekunde gleiten, dann siebeneinhalb
   Sekunden stehen. Wie lange noch, sieht man am Punkt unten, der sich fuellt; faehrt man
   mit der Maus darueber, bleibt er sichtbar stehen. Das ist die Rueckmeldung dafuer, dass
   „Maus drauf haelt an" wirklich passiert ist.

   Darunter liegt ein ECHTER Scrollbereich, kein verschobenes Band. Deshalb funktionieren
   Trackpad-Wisch, Wischen am Handy und die Tastatur von sich aus — und zwar auch ohne
   JavaScript. */
.lauf{margin-top:34px;position:relative}
.laufband{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:3px 2px 5px;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.laufband::-webkit-scrollbar{display:none}
/* ── LANGSAM SCHIEBEN DARF NICHT ZAEH SEIN ────────────────────────────────────────────
   Ty 19.09.2026: „dieser part laggt bisschen, wenn man mit zwei fingern auf touchpad
   ganz ganz langsam nur scrollen will horizontal."

   `mandatory` heisst woertlich: der Bereich MUSS immer auf einem Schnapp-Punkt stehen.
   Waehrend einer langsamen Geste zieht der Browser deshalb dauernd zum naechsten Punkt
   zurueck, waehrend der Finger in die Gegenrichtung schiebt. Bei einem schnellen Wisch
   gewinnt der Schwung und man merkt nichts; beim vorsichtigen Schieben kaempfen beide
   gegeneinander, und das fuehlt sich an wie Ruckeln.

   `proximity` schnappt nur, wenn man ohnehin nah an einem Punkt loslaesst — dazwischen
   folgt die Reihe dem Finger eins zu eins.

   Getrennt nach Eingabegeraet, weil die Antwort nicht ueberall dieselbe ist: am Handy
   will man Karte fuer Karte, und dort gibt es das Problem gar nicht (eine Wischgeste hat
   immer Schwung). `pointer:coarse` ist der Finger, `pointer:fine` Maus und Trackpad. */
@media (pointer:fine){ .laufband{scroll-snap-type:x proximity} }
.laufband:focus{outline:none}
.laufband:focus-visible{outline:2px solid var(--lila2);outline-offset:5px;border-radius:20px}
.laufkarte{flex:0 0 clamp(252px,30%,346px);scroll-snap-align:start;
  display:flex;flex-direction:column}
.laufkarte p{margin:0}
/* Der Anker ist das, was in einer halben Sekunde ankommt — deshalb die Groesse einer
   Ueberschrift, nicht die eines Fliesstexts. Darunter klein und in Gold, WORAUF er sich
   bezieht; erst danach der Satz. Drei Ebenen statt einer Wand. */
.laufanker{font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.7px;
  line-height:1.15;color:var(--tx);
  /* Platz fuer zwei Zeilen, auch wenn nur eine dasteht: sonst rutschen bei der einen
     laengeren Karte („Technik ja, Anzeigen nein") Beschriftung und Text nach unten, und
     die Reihe steht wieder krumm. Gilt in beiden Sprachen, ohne dass jemand nachzaehlen
     muss, wie lang eine Uebersetzung geworden ist. */
  min-height:2.3em}
.laufmarke{font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--goldtx);margin:8px 0 14px}
.laufkarte > p:last-child{font-size:14px;line-height:1.68;color:var(--tx2)}
@media(max-width:640px){ .laufkarte{flex-basis:82%} }
/* Die Kante nach RECHTS weich, damit man sieht, dass da noch mehr liegt — und weg, sobald
   nichts mehr kommt, weil ein Schleier sonst etwas behauptet, was nicht stimmt.
   Nach links bewusst KEINER: durch das Schnappen beginnt die erste sichtbare Karte genau
   an der Kante, ein Schleier dort liegt also ueber lesbarem Text und macht ihn blass —
   gemessen betraf das den ersten Buchstaben jeder Zeile. Rechts ist die Karte ohnehin
   angeschnitten; da verdeckt er nichts, was man haette lesen koennen. */
.lauf::after{content:'';position:absolute;top:0;bottom:58px;right:-2px;width:46px;
  pointer-events:none;z-index:2;opacity:1;transition:opacity .3s;
  background:linear-gradient(to left,var(--bg2),transparent)}
.lauf.amEnde::after{opacity:0}
.laufleiste{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap}
.laufpfeil{width:36px;height:36px;padding:0;border-radius:99px;border:1px solid var(--bd2);
  background:var(--sur-voll);color:var(--tx2);font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;
  transition:border-color .2s,color .2s,transform .2s var(--weich)}
.laufpfeil:hover{border-color:var(--gold);color:var(--tx);transform:translateY(-1px)}
.laufpfeil[disabled]{opacity:.3;cursor:default;transform:none;border-color:var(--bd)}
.laufpunkte{display:flex;gap:6px;margin-left:6px}
.laufpunkte [hidden]{display:none}
.laufpunkt{width:22px;height:8px;padding:0;border:none;border-radius:99px;cursor:pointer;
  background:var(--bd2);overflow:hidden;transition:width .35s var(--weich),background .3s}
.laufpunkt i{display:block;height:100%;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;border-radius:99px}
.laufpunkt[aria-current="true"]{width:52px;background:var(--bd2)}
.laufhinweis{font-size:11.5px;color:var(--tx3);margin-left:auto;letter-spacing:.2px}
@media(max-width:560px){ .laufhinweis{display:none} }
/* Wer „Bewegung reduzieren" eingestellt hat, bekommt eine Reihe zum Selberschieben —
   das Band zieht dann gar nicht von allein (siehe seite.js). */

.karte{background:var(--sur-voll);border:1px solid var(--bd);border-radius:16px;padding:22px;
  transition:border-color .2s,transform .2s var(--weich)}
.karte:hover{border-color:var(--bd2);transform:translateY(-2px)}
.nr{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--goldtx);
  letter-spacing:1px;display:block;margin-bottom:12px}
.etikett{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--tx3);border:1px solid var(--bd2);
  border-radius:99px;padding:4px 10px;margin:0 5px 5px 0}

/* ── Sanftes Einblenden beim Scrollen ────────────────────────────────────────────────── */
.auf-los{opacity:0;transform:translateY(18px);transition:opacity .6s var(--weich),transform .6s var(--weich)}
.auf-los.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .auf-los{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }
body.ruhig .auf-los{opacity:1;transform:none;transition:none}

/* ── Hero ────────────────────────────────────────────────────────────────────────────── */
/* AKIBON BRAND GRADIENT BUILDER V1: brand presets for selected words only. */
.akb-gradient{display:inline;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.akb-gradient-gold-lilac{background-image:linear-gradient(95deg,#e5aa3f 2%,#e8b18d 37%,#b46fe4 100%)}
.akb-gradient-lilac-gold{background-image:linear-gradient(95deg,#a46add 0%,#d29bbd 46%,#e8b13d 100%)}
.akb-gradient-sunset{background-image:linear-gradient(95deg,#e8a73c 0%,#e6a58d 39%,#bc78e6 100%)}
.akb-gradient-orchid{background-image:linear-gradient(95deg,#a970df 0%,#d790bd 47%,#e7ae42 100%)}
.akb-gradient-soft{background-image:linear-gradient(95deg,#e6c790 0%,#d9badc 56%,#bea0dd 100%)}
.akb-brand-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;border-top:1px solid #4b4152;margin-top:9px;padding-top:9px;color:#dfd6e8}
.akb-brand-label{flex-basis:100%;font-weight:760;font-size:12px;color:#e4bd75}
.akb-brand-hint{flex-basis:100%;font:11px/1.4 system-ui,sans-serif;color:#bcb0c6;margin:0}
.akb-brand-select{min-width:155px;max-width:260px;flex:1;border:1px solid #62576a;border-radius:7px;background:#13111b;color:#f5edf8;padding:8px;font:12px system-ui,sans-serif}
.akb-brand-swatch{font:800 24px system-ui,sans-serif;padding:2px 8px;min-width:48px;text-align:center}
.akb-brand-controls .akbuild-btn{font-size:11px;padding:8px 11px;min-height:33px}
@media(max-width:700px){.akb-brand-select{max-width:none;flex:1 0 60%}.akb-brand-controls .akbuild-btn{flex:1 1 auto}}

.hero{padding:clamp(66px,10vw,128px) 0 clamp(56px,8vw,100px);overflow:hidden}
.hero::before{content:'';position:absolute;inset:-40% 0 auto 0;height:120%;pointer-events:none;
  background:radial-gradient(ellipse 58% 48% at 22% 18%,rgba(130,60,200,.20) 0%,transparent 62%),
             radial-gradient(ellipse 48% 42% at 82% 8%,rgba(224,168,60,.13) 0%,transparent 60%)}
.hero .mitte{position:relative}
.sterne{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--bd2);
  background:var(--sur-voll);border-radius:99px;padding:8px 15px;font-size:12.5px;
  font-weight:700;color:var(--tx2);margin:0 0 24px}
/* ── CODE-REGEN ──────────────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Die Herosection ist so trocken und langweilig und undynamisch... Ich will
   rechts so ein code von oben nach unten so wie Matrix."

   Die Mechanik von Matrix, nicht seine Farbe. Neongruen waere auf einer matten, dunklen
   Seite ein Fremdkoerper — hier faellt der Code in unserem Grau, mit einzelnen goldenen
   Zeichen. Er steht HINTER dem Text und ist bewusst leise: er soll Bewegung geben, nicht
   um Aufmerksamkeit kaempfen.

   Kein Canvas, kein JavaScript. Jede Spalte ist ein Text, der per transform nach oben
   laeuft; ihr Inhalt steht zweimal darin, deshalb ist der Sprung am Ende unsichtbar. Das
   laeuft auf der Grafikkarte und kann nicht ruckeln. */
.heroraster{position:relative}
.herotext{position:relative;z-index:2}
/* ── DIE UNSICHTBARE WAND ────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Hier ist eine unsichtbare Wand die den matrix text abschneidet, wenn man
   mit der maus da seinen spass hat und weiter nach rechts geht."

   Zwei Fehler an derselben Kante. Erstens sass sie an der falschen Stelle: `right:0` ist
   die rechte Kante von `.mitte`, also 1180 px breit und zentriert — auf einem breiten
   Schirm blieb rechts davon ein Streifen Seite, in dem kein Regen fiel. Genau dort stand
   die Wand, mitten im Bild statt am Bildschirmrand. Zweitens war sie HART: `overflow:hidden`
   schneidet mitten durch einen Buchstaben, und eine ausgelenkte Spalte wurde zu „akibo".

   Jetzt reicht der Regen bis an den Bildschirmrand, und die Kante blendet weich aus (siehe
   ::after). Was sich bewegt, verschwindet dann, statt abgeschnitten zu werden.

   DIE RECHNUNG: `.mitte` traegt `max-width:1180px` und ist zentriert, also bleibt auf
   breiten Schirmen links und rechts je `(100vw - 1180px) / 2` frei — genau so weit muss
   der Regen hinaus. Auf schmalen Schirmen ist `.mitte` so breit wie das Fenster, dort ist
   der Wert negativ und `max(0px, …)` macht daraus null. Gemessen: 2200 px -> Regenkante
   bei 2193 (der Rest ist der Rollbalken), 1000 px -> Kante genau am Rand, und bei keiner
   Breite entsteht ein waagerechter Rollbalken. */
.regen{position:absolute;top:calc(clamp(66px,10vw,128px) * -1);bottom:-40px;
  right:calc(-1 * max(0px, (100vw - 1180px) / 2));
  width:min(46%,560px);display:flex;gap:clamp(9px,1.1vw,17px);justify-content:flex-end;
  overflow:hidden;pointer-events:none;z-index:0;user-select:none;
  font-family:var(--mono);font-size:14px;line-height:1.6;
  /* Oben und unten ausblenden, damit die Spalten nicht abgeschnitten wirken, sondern
     aus dem Nichts kommen und wieder darin verschwinden. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 62%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 62%,transparent 96%)}
/* Nach links weich auslaufen, damit der Regen nicht an einer Kante beginnt und dem Text
   in die Quere kommt. Zwei Masken auf einem Element gehen nicht — also uebernimmt diese
   Schicht die waagerechte Blende. */
.regen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0,
              var(--regenschleier,rgba(10,8,18,.42)) 24%,
              transparent 56%,transparent 88%,var(--bg) 100%)}
/* Die mittlere Stufe war fest dunkel verdrahtet — im hellen Preset lag dadurch ein grauer
   Schleier ueber dem Regen. Alles, was mit dem Hintergrund zu tun hat, gehoert an eine
   Variable, sonst ueberlebt es den ersten Themenwechsel nicht. */
body.hellmodus{--regenschleier:rgba(244,242,249,.58)}
/* ZWEI EBENEN, ZWEI AUFGABEN — und das ist hier keine Stilfrage:
   die Spalte traegt die Maus-Auslenkung, das <i> darin faellt.
   Beides auf demselben Element ginge nicht: wer per JavaScript transform setzt,
   ueberschreibt die laufende Keyframe-Animation, und der Regen bliebe stehen, sobald
   jemand mit der Maus hinfaehrt. */
.spalte{flex:0 0 auto;white-space:pre;color:rgba(236,233,245,.30);
  transform:translate3d(var(--schub,0px),var(--heb,0px),0);
  will-change:transform}
.spalte i{display:block;font-style:normal;
  animation:fallen var(--dauer,20s) linear var(--verzug,0s) infinite;
  will-change:transform}
.spalte b{font-weight:400;color:rgba(224,168,60,.68);text-shadow:0 0 12px rgba(224,168,60,.35)}
/* Im hellen Preset war der Regen hell auf hell — also unsichtbar, und das Ausblenden nach
   links blieb als grauer Schleier stehen. Farben drehen statt Helligkeit. */
body.hellmodus .spalte{color:rgba(22,18,31,calc(.24 + var(--nah,0) * .30))}
body.hellmodus .spalte b{color:rgba(150,102,16,.72);text-shadow:none}
/* Dort, wo die Maus steht, wird es eine Spur heller — als haette man die Stelle
   angehoben und ins Licht gehalten. --nah kommt aus seite.js und liegt zwischen 0 und 1. */
.spalte{color:rgba(236,233,245,calc(.30 + var(--nah,0) * .34))}
/* -50%, weil der Inhalt doppelt drinsteht: nach der halben Strecke sieht es genauso aus
   wie am Anfang, und der Ruecksprung faellt nicht auf. */
@keyframes fallen{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
body.ruhig .spalte i{animation:none}
@media(prefers-reduced-motion:reduce){ .spalte i{animation:none} }
/* Am Handy hat der Text die ganze Breite — dort waere der Regen entweder hinter der
   Schrift (unlesbar) oder daneben (kein Platz). Also weg. */
@media(max-width:900px){ .regen{display:none} }

.knopfreihe{display:flex;gap:11px;flex-wrap:wrap;margin:30px 0 26px}
.zahlen{display:flex;gap:14px 44px;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:26px;margin-top:34px}
.zahlen div b{display:block;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-1px}
.zahlen div span{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--tx3);text-transform:uppercase}

/* ── Team ────────────────────────────────────────────────────────────────────────────── */
/* Ty 12.09.2026: „Mach meinen Text und seinen gleich lang, und mach dass die stichworte
   auf gleicher Höhe sind."
   Die Texte sind jetzt gleich lang (das war die eigentliche Ursache) — aber sich darauf zu
   verlassen, hiesse, dass jede spaetere Textaenderung die Ausrichtung wieder zerlegt.
   Deshalb zusaetzlich verankert: die Karte streckt sich im Raster ohnehin auf gleiche
   Hoehe, die Spalte daneben zieht mit, und die Stichwortzeile haengt mit margin-top:auto
   am unteren Rand. Damit stehen sie auf gleicher Hoehe, egal wie der Text spaeter faellt. */
/* Die Bildspalte ist FEST, nicht `auto`. Mit `auto` bemisst sie sich am Inhalt, und ein
   Bild, das sich seinerseits an der Spalte bemessen soll (34 %), dreht sich dabei im
   Kreis: beim ersten Versuch wuchs das Portraet auf die volle Texthoehe und der Text
   stand als 40 Pixel breiter Streifen daneben. Feste Spanne, fertig. */
/* ── DIE ZWEI, OHNE KASTEN ───────────────────────────────────────────────────────────
   Ty 08.10.2026: „Ich mag es nicht wie diese Boxen da sind. Da muss es eine spannendere
   Loesung geben."

   Der Kasten war Verwaltung: Rahmen, Flaeche und 22 px Polsterung je Seite, nur um zu
   sagen, wo eine Person aufhoert. Das sieht man auch ohne. Weg damit — und die gewonnene
   Breite geht ans Foto, das jetzt bis zu 320 statt 264 Pixel bekommt.

   Zusammengehalten wird der Abschnitt nicht mehr von zwei Rechtecken, sondern von der
   Ausrichtung: gleiche Bildbreite, Oberkanten auf einer Linie, Namen auf einer Linie. Der
   Abstand zwischen den beiden waechst mit dem Fenster, damit sie nicht zusammenkleben,
   wenn der Rahmen fehlt. */
.teamreihe{column-gap:clamp(34px,5.5vw,76px);row-gap:46px}
.person{display:grid;grid-template-columns:clamp(210px,44%,320px) 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:'bild kopf' 'bild text';column-gap:clamp(18px,2vw,26px)}
.person h3{font-size:clamp(21px,2.3vw,26px);letter-spacing:-.5px;margin:0 0 7px}
.personkopf{grid-area:kopf;min-width:0}
/* Der persoenliche Account, klein unter der Rolle. Ty 17.09.2026 fragte, ob er in den
   Fuss soll — dort eher nicht (zwischen Impressum und Datenschutz sieht ein privates
   Profil aus wie ein Versehen). Hier schon: dieser Abschnitt behauptet, dass die beiden,
   die bauen, auch die beiden sind, mit denen man redet. Ein Profil, das man nachschauen
   kann, ist der Beleg dafuer. */
.personig{display:inline-flex;align-items:center;gap:6px;margin:0 0 9px;
  font-size:12.5px;font-weight:700;color:var(--tx2);text-decoration:none;
  letter-spacing:.2px;transition:color .15s}
.personig svg{width:14px;height:14px;flex-shrink:0;opacity:.85}
.personig:hover{color:var(--goldtx)}
.person .rolle + .personig{margin-top:-4px}
.personrest{grid-area:text;min-width:0;display:flex;flex-direction:column}
.personrest > p{margin:0}
/* ── DAS BILD GROSS, LINKS VOM TEXT (04.10.2026) ──────────────────────────────────────
   Ty: „gibt es keinen Grund für diese kleinen Bilder... Mach die Bilder groß Links vom
   Text." Er hat recht: 78 Pixel sind Briefmarkenformat. Der ganze Abschnitt behauptet
   „die beiden, die bauen, sind die beiden, mit denen Sie reden" — dann muss man sie auch
   sehen koennen.
   Die Breite waechst mit der Karte (clamp), damit es auf dem Laptop nicht die Haelfte
   frisst und auf einem breiten Schirm nicht verloren wirkt. Das Hochformat 4:5 ist das
   Format, in dem Portraets ohnehin aufgenommen werden — so wird nichts beschnitten, was
   wichtig ist. */
/* ── DAS BILD IST SO HOCH WIE DER TEXT ────────────────────────────────────────────────
   Ty 08.10.2026: „Hatte ich dir nicht gesagt die Bilder sollen nicht klein oben links
   sondern links neben dem Text sein in der grösse vom text..."

   Beim ersten Anlauf stand `aspect-ratio:4/5` mit `align-self:start`: das Bild nahm seine
   eigene, feste Hoehe (rund 250 px) und blieb oben haengen, waehrend der Text daneben auf
   450 px wuchs. Es SAH aus wie vorher, nur etwas groesser — genau der Punkt, den er schon
   einmal gemeldet hatte.

   Jetzt treibt der TEXT die Hoehe und das Bild folgt: `stretch` + `height:100%`. Der
   erste Versuch damit ist seinerzeit explodiert, weil die Bildspalte auf `auto` stand und
   sich Bild und Spalte gegenseitig bemessen haben. Die Spalte ist inzwischen fest
   (clamp), damit ist der Kreis gebrochen. `min-height:0` ist Pflicht: ein Rasterkind hat
   sonst `min-height:auto` und waechst ueber die Zeile hinaus. */
/* ── DAS FOTO, SONST NICHTS ───────────────────────────────────────────────────────────
   Ty 08.10.2026: „mach was cleanes. nicht irgendwelche code erstellten graphiken um unser
   profilbild herum."

   Hier standen nacheinander: ein Schacht mit `cover` (schnitt ins Gesicht), ein
   freigestelltes Portraet (schnitt den Hintergrund weg) und zuletzt Sonne und Mond mit
   Strahlen, Sichel und Sternen. Alle drei haben versucht zu loesen, dass die zwei Fotos
   verschiedene Formate haben — seins 1:1 und hell, Tys 4:5 und dunkel.

   DAS IST KEIN PROBLEM, DAS GELOEST WERDEN MUSS. Jedes Foto behaelt sein Verhaeltnis,
   beide haben dieselbe Breite. `height:auto` heisst: nie gestreckt. Kein `object-fit:cover`
   heisst: nie beschnitten. `align-self:start` setzt die Oberkante des Bildes auf die
   Oberkante des Namens daneben. */
.person img,.person .monogramm{grid-area:bild;align-self:start;display:block;
  width:100%;height:auto;border-radius:14px;border:1px solid var(--bd2)}
.person .monogramm{aspect-ratio:1;display:grid;place-items:center;
  font-size:30px;font-weight:800;color:var(--gold);
  background:linear-gradient(150deg,rgba(224,168,60,.14),rgba(130,60,200,.14))}
.rolle{font-size:12px;font-weight:800;color:var(--lila2);letter-spacing:.4px;margin:0 0 9px}

/* ── DIE CALLER ──────────────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „die sollen sogar einen eigenen Ehrenplatz auf der Seite haben!!!"
   Deshalb NICHT die kleine Zeilen-Karte der Gruender, sondern hohe Portraetkarten: das
   Gesicht zuerst, gross, dann der Charakter. Wer hier steht, ruft wirklich an. */
.callerreihe{align-items:stretch}
.caller{display:flex;flex-direction:column;text-align:center;align-items:center;padding-top:30px}
.caller img,.caller .monogramm{width:104px;height:104px;border-radius:50%;
  border:1px solid var(--bd2);margin:0 0 16px;
  background:linear-gradient(150deg,rgba(224,168,60,.16),rgba(130,60,200,.16));
  box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 6px rgba(130,60,200,.08)}
/* Die Portraets sind quadratisch zugeschnitten — cover und contain waeren hier dasselbe,
   aber cover ist das ehrlichere Versprechen, falls einmal ein anderes Seitenverhaeltnis
   hereinkommt: lieber die Ecken beschnitten als ein Bild mit Luecken im Kreis. */
.caller img{object-fit:cover;object-position:center}
/* Ein Monogramm statt einer grauen Silhouette: eine Silhouette sieht aus wie ein Fehler,
   ein Monogramm wie eine Entscheidung. */
.caller .monogramm{display:grid;place-items:center;font-size:38px;font-weight:800;
  letter-spacing:-1px;color:var(--gold);
  background:linear-gradient(150deg,rgba(224,168,60,.16),rgba(130,60,200,.16))}
.caller h3{margin:0 0 2px;font-size:19px;letter-spacing:-.4px}
.caller .rolle{margin:0 0 12px}
.caller .wesen{margin:0;font-size:14.5px;line-height:1.65}
.caller .zuege{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:auto;padding-top:16px}

/* ── STEINE, DIE VOR TIM SCHWEBEN ────────────────────────────────────────────────────────
   Ty 12.09.2026: „animier extrasteine vor ihm die so hovern, als würde er sie mit der Macht
   bewegen. Die gehen auch ausserhalb seines kastens, macht die website sehr dynamisch."

   Drei Dinge, die man dabei leicht übersieht:
     · die Karte darf nicht abschneiden und braucht einen eigenen Bezugsrahmen, sonst
       rechnen die Steine gegen die ganze Seite
     · sie dürfen nichts überdecken, was man anklickt — pointer-events:none, ausnahmslos
     · sie dürfen nicht vom Bildschirmrand halbiert werden. Genau das ist mir beim ersten
       Versuch passiert: die Abstände hingen an PROZENT eines breiten Kastens, und je
       schmaler das Fenster, desto weiter griffen sie hinaus. Jetzt zählt --aus, ein fester
       Weg ab der Kartenkante — und der ist immer kleiner als der Seitenrand.

   Zwei Ebenen: was VOR ihm schwebt (.vorn) liegt über dem Bild, der Rest dahinter. Das ist
   der ganze Trick — ein Stein, der die Schulter überlappt, sieht nach abgeschalteter
   Schwerkraft aus. Ein Stein daneben sieht nach Dekoration aus. */
/* JEDER BEKOMMT ETWAS EIGENES ──────────────────────────────────────────────────────────
   Ty 12.09.2026: „diese animation um Tim,... mach sowas für jeden. Jeder was eigenes
   spezeilles. Also nicht unbedingt animation wie da."
   Also keine drei Varianten derselben Idee, sondern drei verschiedene Ideen — und jede
   sagt etwas ueber den Menschen, statt nur zu wackeln:
     Boris  Signalringe, die vom Portraet nach aussen laufen — der Energiebringer, der
            anruft und bei dem es sofort warm wird
     Felix  ein feiner gestrichelter Ring mit einem umlaufenden Punkt — ein Messgeraet,
            sachlich und auf den Punkt
     Tim    Steine, die vor ihm schweben — der Entspannte, den nichts aus der Ruhe bringt
   Gemeinsam haben sie nur die Regeln: nichts davon faengt Klicks ab, nichts erzeugt einen
   Querbalken, und „Animationen aus" haelt alles an. */
.caller.magie{position:relative;overflow:visible;isolation:isolate;--aus:18px}
/* Alles, was um das Portraet kreist, sitzt GENAU auf ihm. Der Abstand nach oben ist
   NICHT 22+30: .caller setzt padding-top:30px und ueberschreibt damit das 22px-Polster
   der Karte, statt es zu ergaenzen. Gerechnet hatte ich 52 — gemessen waren es 30, und
   die Ringe lagen 22px zu tief. Bei einem Kreis sieht man das sofort. */
.umPortraet{position:absolute;top:30px;left:50%;width:104px;height:104px;margin-left:-52px;
  pointer-events:none;z-index:0}
.steine{position:absolute;inset:0;pointer-events:none;z-index:0}
.caller.magie img,.caller.magie .monogramm{position:relative;z-index:1}

.stein{position:absolute;pointer-events:none;
  width:calc(var(--gr,24px) * var(--skala,1));
  height:calc(var(--gr,24px) * var(--skala,1) * var(--flach,.84));
  border-radius:var(--form,52% 48% 44% 56% / 50% 56% 44% 50%);
  background:
    radial-gradient(ellipse 46% 38% at 33% 25%,rgba(255,255,255,.34) 0%,transparent 62%),
    radial-gradient(ellipse 85% 70% at 74% 84%,rgba(0,0,0,.42) 0%,transparent 58%),
    radial-gradient(ellipse 30% 26% at 62% 44%,rgba(255,255,255,.07) 0%,transparent 70%),
    linear-gradient(155deg,#a6a498 0%,#7b7a6f 44%,#4b4a44 100%);
  box-shadow:0 9px 20px rgba(0,0,0,.55),
             inset 0 -3px 7px rgba(0,0,0,.42),
             inset 0 2px 4px rgba(255,255,255,.10);
  filter:saturate(.75);
  animation:schweben var(--dauer,7s) ease-in-out var(--verzug,0s) infinite}
.stein.vorn{z-index:3}

/* Jeder Stein hat eigene Form, Größe und Bahn. Sechsmal dieselbe Rundung und dieselbe
   Bewegung liest das Auge als Muster, nicht als Steine. */
.s1{top:calc(var(--aus) * -1.5);left:calc(var(--aus) * -.9);--gr:34px;--flach:.78;--dreh:-12deg;
    --x:13px;--y:-21px;--dauer:8.5s;--verzug:0s;  --form:56% 44% 48% 52% / 52% 58% 42% 48%}
.s2{top:17%;right:calc(var(--aus) * -1.2);      --gr:23px;--flach:.88;--dreh:18deg;
    --x:-10px;--y:-16px;--dauer:7s;--verzug:1.2s;--form:44% 56% 60% 40% / 46% 44% 56% 54%}
.s3{top:47%;left:calc(var(--aus) * -.75);       --gr:17px;--flach:.82;--dreh:6deg;
    --x:9px;--y:-12px;--dauer:6.2s;--verzug:.5s; --form:62% 38% 42% 58% / 58% 50% 50% 42%}
.s4{bottom:calc(var(--aus) * -.9);right:calc(var(--aus) * -.6);--gr:29px;--flach:.74;--dreh:-22deg;
    --x:-12px;--y:-19px;--dauer:9.4s;--verzug:2.1s;--form:48% 52% 38% 62% / 60% 42% 58% 40%}
.s5{top:7%;left:57%;                            --gr:13px;--flach:.9;--dreh:30deg;
    --x:7px;--y:-10px;--dauer:5.6s;--verzug:1.8s;--form:50% 50% 56% 44% / 44% 56% 44% 56%}
.s6{top:72%;left:9%;                            --gr:20px;--flach:.8;--dreh:-30deg;
    --x:11px;--y:-14px;--dauer:7.8s;--verzug:.9s;--form:58% 42% 52% 48% / 50% 46% 54% 50%}

@keyframes schweben{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--dreh,0deg))}
  25%    {transform:translate3d(calc(var(--x,8px) * .6),var(--y,-14px),0) rotate(calc(var(--dreh,0deg) + 7deg))}
  50%    {transform:translate3d(var(--x,8px),calc(var(--y,-14px) * .35),0) rotate(calc(var(--dreh,0deg) - 5deg))}
  75%    {transform:translate3d(calc(var(--x,8px) * .25),calc(var(--y,-14px) * .7),0) rotate(calc(var(--dreh,0deg) + 3deg))}
}
/* „Ganz ruhig" im Magic Button und die Systemeinstellung halten sie an — sie
   verschwinden aber nicht, sonst fehlte plötzlich das halbe Bild. */
body.ruhig .stein{animation:none}
@media(prefers-reduced-motion:reduce){ .stein{animation:none} }
/* Am Handy ist der Seitenrand am schmalsten: weniger Ausschlag, kleinere Steine. */
@media(max-width:700px){ .caller.magie{--aus:9px} .steine{--skala:.74} }

/* ── BORIS · SIGNALRINGE ─────────────────────────────────────────────────────────────────
   Drei Ringe laufen nacheinander nach aussen und verblassen — wie ein Anruf, der
   durchgeht. Sie bleiben innerhalb der Karte: das Groesste ist gut das Doppelte des
   Portraets, und bis zum Kartenrand ist mehr Platz als das. */
.wellen i{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(224,168,60,.55);
  animation:welle 3.6s cubic-bezier(.25,.6,.3,1) infinite}
.wellen i:nth-child(2){animation-delay:1.2s}
.wellen i:nth-child(3){animation-delay:2.4s}
@keyframes welle{
  0%  {transform:scale(1);   opacity:.6}
  70% {opacity:.12}
  100%{transform:scale(2.05);opacity:0}
}

/* ── FELIX · MESSRING ────────────────────────────────────────────────────────────────────
   Ein gestrichelter Ring dreht sich langsam, ein Punkt laeuft darauf herum. Kein
   Aufblitzen, kein Ausschlag — es ist einfach genau. Genau wie er am Telefon. */
/* .bahn und nicht .ring: `.ring` war damals im Prozess-Abschnitt schon belegt (der
   Handy-Bildschirm, seit dem 09.10.2026 weg), schlug hier voll durch, und um Felix lag ein
   dicker goldener Bogen. Der Name bleibt trotzdem .bahn — eine Klasse ist auf einer Seite
   global, auch wenn sie verschachtelt geschrieben ist, und der naechste `.ring` kommt
   bestimmt. */
.zirkel .bahn{position:absolute;inset:-11px;border-radius:50%;
  border:1px dashed rgba(130,60,200,.45);animation:dreh 22s linear infinite}
.zirkel .bahn.aussen{inset:-21px;border-style:solid;border-color:rgba(236,233,245,.10);
  animation-duration:34s;animation-direction:reverse}
/* Der Punkt sitzt oben auf einer mitdrehenden Scheibe — so laeuft er exakt auf der
   Kreisbahn, ohne dass irgendwo ein Radius ausgerechnet werden muss. */
.zirkel .laeufer{position:absolute;inset:-21px;animation:dreh 9s linear infinite}
.zirkel .laeufer::after{content:'';position:absolute;top:-3px;left:50%;margin-left:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--lila2);
  box-shadow:0 0 10px 2px rgba(130,60,200,.55)}
@keyframes dreh{to{transform:rotate(360deg)}}

body.ruhig .wellen i,body.ruhig .zirkel .bahn,body.ruhig .zirkel .laeufer{animation:none}
@media(prefers-reduced-motion:reduce){
  .wellen i,.zirkel .bahn,.zirkel .laeufer{animation:none}
}

/* ══ PROZESS — EIN LICHT, DAS MITWANDERT ════════════════════════════════════════════════
   Ty 09.10.2026: „Das gefällt mir vom DESIGN und vom fade animation nicht. es springt
   hektisch anstatt zu gleiten beim scrollen. Überleg dir ein geileres Design Viel viel
   mehr premium und einzigartig."

   DAS SPRINGEN WAR NICHT DIE DAUER, SONDERN DIE BAUART. Vorher gab es genau EINEN
   aktiven Schritt: `aria-current` sprang von einem zum naechsten, und ein Uebergang von
   .55s hat diesen Sprung nur verwischt. Eine Auswahl, die nur „der" oder „nicht der"
   kennt, KANN nicht gleiten — und weil der aktive Schritt ein grosser gefuellter Kasten
   war, blinkte beim Scrollen eine Flaeche von 1050 Pixeln Breite an und aus.

   Jetzt gibt es keine Auswahl mehr, sondern eine NAEHE: jeder Schritt bekommt bei jedem
   Bild einen Wert `--n` zwischen 0 und 1, je nachdem, wie weit seine Mitte vom Leseband
   entfernt ist. Die Bereiche der Nachbarn ueberlappen sich, also blendet immer einer
   herein, waehrend der andere hinausblendet. Es gibt keinen Moment, in dem etwas
   umschaltet — der Wert haengt am Finger, nicht an einer Uhr. Deshalb stehen hier auch
   KEINE Uebergaenge mehr: ein Uebergang wuerde dem Scrollen hinterherlaufen.

   UND DAS DESIGN: kein Kasten mehr. Stattdessen eine durchgehende Schiene am linken Rand,
   auf der ein Licht von Flieder nach Gold mitwandert — stetig, auch zwischen zwei
   Schritten, weil seine Position der gewichtete Schwerpunkt aller Naehen ist. Dazu grosse
   Mono-Ziffern, die aus dem Dunkeln auftauchen (dieselbe Geisterziffer wie bei den
   Paketen), und ein weicher Schein hinter der Zeile statt einer Kante. Null Radien, null
   Rahmen: der Abschnitt besteht aus Licht, nicht aus Kaesten.

   EISERNE REGEL HIER: `--n` darf NUR Farbe, Deckkraft und Schein steuern. Nichts, was die
   Geometrie anfasst — kein Polster, keine Schriftgroesse, keine Spaltenbreite. Genau daran
   ist die Vorfassung gescheitert („der text bekommt random zeilenbruch"). */
.prozess{position:relative;display:grid;gap:0;margin-top:40px}

/* ── DIE SCHIENE ─────────────────────────────────────────────────────────────────────── */
/* Ein Haar, kein Balken. Sie steht genau unter der Mitte der Punktspalte: 16 Pixel
   Polster des Schrittes plus die halbe 30er Spalte. */
.schiene{position:absolute;left:31px;top:26px;bottom:26px;width:1px;
  background:linear-gradient(180deg,transparent,var(--bd2) 7%,var(--bd2) 93%,transparent);
  pointer-events:none}
/* Das Licht ist ein Stueck Schiene, das leuchtet. `top` rechnet in Prozent der Schiene —
   deshalb braucht es keine einzige Zahl aus dem Skript ausser dem Weg selbst. */
.schienenlicht{--weg:0;position:absolute;left:-1px;width:3px;height:190px;
  top:calc((100% - 190px) * var(--weg));border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--lila) 22%,var(--gold) 78%,transparent);
  box-shadow:0 0 18px rgba(130,60,200,.5),0 0 34px rgba(224,168,60,.22)}
body.ruhig .schienenlicht{box-shadow:none}

/* ── DER EINZELNE SCHRITT ────────────────────────────────────────────────────────────── */
/* `--n:1` ist der Grundzustand: ohne Skript steht alles hell und vollstaendig lesbar da.
   Das Skript zieht die fernen Schritte erst herunter. */
.schritt{--n:1;position:relative;isolation:isolate;
  display:grid;grid-template-columns:30px 1fr;gap:16px;padding:16px 18px 16px 16px;
  align-content:center;width:100%}
/* Der Schein ist breit und weich und faengt links an, wo die Schiene steht — er sieht aus
   wie Licht, das von der Schiene in die Zeile faellt, und nicht wie eine Markierung. */
/* DER SCHEIN BRAUCHT EINE MASKE, SONST IST ER EIN KASTEN. Erster Versuch: ein
   radialer Verlauf mit senkrechtem Radius 130 % der Kastenhoehe — der wird oben und
   unten ABGESCHNITTEN, und die zwei Schnittkanten sieht man als Rechteck. Jede
   Farbe in einem Kasten endet irgendwo an dessen Kante; die einzige verlaessliche
   Art, das zu verstecken, ist, den Kasten selbst ausblenden zu lassen. Waagerecht
   macht das der Verlauf, senkrecht die Maske. */
.schritt::before{content:'';position:absolute;z-index:-1;inset:-26px -40px;
  /* Links bei Null anfangen, nicht beim Vollwert: sonst steht am linken Kastenrand
     eine senkrechte Kante, und man sieht den Kasten doch wieder. */
  background:linear-gradient(90deg,transparent,rgba(130,60,200,.21) 7%,
             rgba(130,60,200,.07) 32%,transparent 56%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent);
  opacity:var(--n)}

.schrittpunkt{align-self:start;justify-self:center;margin-top:20px;
  width:7px;height:7px;border-radius:50%;z-index:2;
  background:color-mix(in srgb,var(--bd3),var(--gold) calc(var(--n) * 100%));
  box-shadow:0 0 calc(var(--n) * 14px) rgba(224,168,60,.75),
             0 0 0 calc(var(--n) * 5px) rgba(224,168,60,.10)}

/* DIE ZIFFER IST DAS SCHMUCKSTUECK. Gross, einstellig breit, und sie taucht aus dem
   Dunkeln auf — `tabular-nums`, damit sie bei keinem Wert um einen Pixel wandert. */
.schritt .zahl{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:2px;line-height:1;
  color:color-mix(in srgb,var(--tx3),var(--gold) calc(var(--n) * 100%));
  opacity:calc(.42 + .58 * var(--n))}
.schritt h3{margin:7px 0 0;color:var(--tx);opacity:calc(.42 + .58 * var(--n))}
.schritt p{margin:7px 0 0;font-size:14.5px;color:var(--tx2);
  opacity:calc(.38 + .62 * var(--n))}

/* ── HELL IST NICHT DUNKEL MIT ANDEREN FARBEN ────────────────────────────────────────
   Auf Schwarz ist ein Text mit 38 % Deckkraft ein dunkles Grau und noch zu lesen. Auf
   Weiss ist er fast verschwunden — gemessen im Hellmodus und im „Tageslicht" des Magic
   Buttons: Ziffer und Fliesstext der fernen Schritte waren praktisch unsichtbar.
   Gleiches Gefaelle, hoeherer Boden. Und der Schein wird Flieder statt Violett, weil er
   sonst auf Weiss wie ein Schatten wirkt. */
body.hellmodus .schritt .zahl,.licht .schritt .zahl{opacity:calc(.30 + .70 * var(--n))}
body.hellmodus .schritt h3,.licht .schritt h3{opacity:calc(.56 + .44 * var(--n))}
body.hellmodus .schritt p,.licht .schritt p{opacity:calc(.54 + .46 * var(--n))}
body.hellmodus .schritt::before,.licht .schritt::before{
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.14) 7%,
             rgba(124,58,237,.05) 32%,transparent 56%)}
body.hellmodus .schiene,.licht .schiene{
  background:linear-gradient(180deg,transparent,rgba(29,24,48,.18) 7%,
             rgba(29,24,48,.18) 93%,transparent)}

@media(min-width:940px){
  /* Auch hier: der Boden der grossen Ziffer liegt hoeher, das Gefaelle bleibt. */
  body.hellmodus .schritt .zahl,.licht .schritt .zahl{opacity:calc(.16 + .84 * var(--n))}
}

@media(min-width:940px){
  /* VOLLE BREITE HEISST NICHT VOLLE ZEILENLAENGE. Ty 09.10.2026: „lass diese Teile die
     volle breite einnehmen." Die Titelspalte ist eine FESTE Breite, kein Bruchteil: jeder
     Schritt ist sein eigenes Gitter, und mit `fr` standen die Texte gemessen zwischen 688
     und 969 Pixeln breit untereinander. */
  .schritt{grid-template-columns:30px clamp(64px,6vw,96px) clamp(170px,19vw,264px) minmax(0,1fr);
    column-gap:26px;padding:30px 22px 30px 16px;align-items:start}
  .schritt > p{margin:0}
  .schritt h3{margin:0}
  .schrittpunkt{margin-top:11px}
  /* Hier wird die Ziffer gross. Unter 940px bliebe dafuer keine eigene Spalte. */
  .schritt .zahl{font-size:clamp(30px,3.1vw,44px);letter-spacing:0;font-weight:300;
    line-height:.86;margin-top:-4px;opacity:calc(.14 + .86 * var(--n))}
}

/* ══ AM HANDY: EINE LISTE, SONST NICHTS ══════════════════════════════════════════════════
   Ty 12.09.2026: „Dieser Part gefällt mir immernoch nicht beim Handy... Wir wollen doch
   immer simplistic bleiben." Unter 940px gibt es keine Schiene, kein Licht und keine
   Naehe: alle Schritte stehen gleich gut lesbar da, getrennt durch eine Linie. Das Skript
   rechnet dort gar nicht mit — `--n` bleibt auf 1, und die drei Zeilen hier nehmen dem
   Wert auch noch den Rest seiner Wirkung ab. */
@media(max-width:939px){
  .schiene{display:none}
  .schritt{padding:16px 0;border-top:1px solid var(--bd);border-radius:0}
  .schritt:first-child{border-top:none;padding-top:0}
  .schritt::before{display:none}
  .schritt .zahl,.schritt h3,.schritt p{opacity:1}
  .schritt .zahl{color:var(--lila2)}
  .schrittpunkt{display:none}
  .schritt{grid-template-columns:1fr;gap:0}
  .schritt p{font-size:15px}
}

/* ── Referenzen: Vorschau scrollt beim Ruberfahren ───────────────────────────────────── */
.projekte{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.projekt{border:1px solid var(--bd);border-radius:18px;overflow:hidden;background:var(--sur-voll);
  transition:border-color .25s,transform .25s var(--weich),box-shadow .25s}
.projekt:hover{border-color:rgba(130,60,200,.45);transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(0,0,0,.45)}
.fenster{height:236px;overflow:hidden;position:relative;background:#0b0912;
  border-bottom:1px solid var(--bd)}
.fenster .lauf{transition:transform 2.4s var(--weich)}
.projekt:hover .fenster .lauf{transform:translateY(calc(-100% + 236px))}
.fenster::after{content:'';position:absolute;inset:auto 0 0 0;height:56px;pointer-events:none;
  background:linear-gradient(to top,rgba(11,9,18,.9),transparent);transition:opacity .3s}
.projekt:hover .fenster::after{opacity:0}
.projekt .rumpf{padding:22px}
.licht .projekt{background:var(--hell-karte);border-color:var(--hell-bd)}

/* ── DIE VORLAGE ALS PROJEKT-KACHEL ────────────────────────────────────────────────
   Ty 08.10.2026: „Pack das template da rein wo gerade ATLAS Fitness Club ist. mit der
   gleichen animation."
   Die Bewegung kommt UNVERAENDERT von `.projekt:hover .fenster .lauf` oben — hier wird
   nur das Bild passend gemacht. `.lauf` traegt global `margin-top:34px` (das braucht der
   Karussell-Streifen weiter unten); im Fenster wuerde das den Schuss um 34 px nach unten
   schieben, und die Kachel faenge mit einem dunklen Balken an. */
.vorlagekachel{display:block;text-decoration:none;color:inherit}
.vorlagekachel .fenster .lauf{margin-top:0;display:block;width:100%;height:auto}
.vorlagekachel .vorlmehr{display:block}
.vorlagekachel:hover .vorlmehr{text-decoration:underline}
.vorlagekachel:focus-visible{outline:2px solid var(--akz2);outline-offset:3px}

/* ── Code-Fenster ────────────────────────────────────────────────────────────────────── */
.codefenster{border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:#0b0813}
/* Ty 12.09.2026: „Das terminal darf gerne bisschhen hovern flowen, sich leicht bewegen
   (sehr leicht)." Also wirklich sehr leicht: zehn Pixel und ein Drittelgrad ueber neun
   Sekunden. Alles darueber wird zum Wackeln, und ein wackelndes Codefenster sieht nach
   Spielzeug aus, nicht nach Werkstatt.
   Die Bewegung startet erst NACH dem Einblenden (.da plus Verzoegerung): eine Animation
   schlaegt jeden Uebergang, und ohne die Verzoegerung waere das Hereingleiten weg. */
.codefenster.da{animation:fensterschweben 9s ease-in-out .7s infinite}
@keyframes fensterschweben{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-10px,0) rotate(-.35deg)}
}
body.ruhig .codefenster.da{animation:none}
@media(prefers-reduced-motion:reduce){ .codefenster.da{animation:none} }
.codeleiste{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--bd);
  background:var(--sur2)}
.codeleiste i{width:10px;height:10px;border-radius:50%;display:block}
.codeleiste span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx3)}
pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:#cfc8e6}
pre .k{color:#c084fc}pre .s{color:#86efac}pre .c{color:#5e5878}pre .f{color:var(--gold)}

/* ── Haken-Listen ────────────────────────────────────────────────────────────────────── */
.haken{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.haken li{display:flex;gap:11px;font-size:15px;color:var(--tx2);align-items:flex-start}
.haken li::before{content:'✓';color:var(--gruen);font-weight:800;flex-shrink:0}
.licht .haken li{color:var(--hell-tx2)}
.licht .haken li::before{color:#16a34a}

/* ── Pakete ──────────────────────────────────────────────────────────────────────────── */
.pakete{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch}
/* AM TOKEN, NICHT FEST VERDRAHTET. Ty 13.09.2026: „In der film version der seite ist
   dieser bereich nicht leserlich. Farbe zu hell auf hell."
   Hier stand ein hartes #fff — als einzige Karte der Seite hing sie nicht am Farbtoken.
   Der Kinofilm tauscht die Textfarben ins Warme und Helle und setzt die Karten im
   `licht`-Abschnitt auf Dunkel; diese eine blieb weiss, und helle Schrift auf Weiss ist
   nichts. Gemessen: Ueberschrift und Preis 1,15:1, Fliesstext 1,97:1 — lesbar beginnt
   bei 4,5:1. Der Rueckfall bleibt Weiss, falls je eine Paketkarte ausserhalb eines
   `licht`-Abschnitts steht. */
.paket{background:var(--hell-karte,#fff);border:1px solid var(--hell-bd);border-radius:18px;padding:26px;
  position:relative;display:flex;flex-direction:column}
/* Die Liste nimmt den Ueberschuss auf, damit der Fuss unten klebt — nicht der Knopf selbst,
   sonst rutscht die Zeile unter ihm mit weg. */
.paket .haken{margin-bottom:auto}
.pakettext{font-size:14px}
/* ── UNTER DEM PREIS: DIE STEUERLAGE UND DER UMRECHNER ──────────────────────────────────
   Beides steht UNTER dem Preis, nicht daneben: Zeilen neben einem Preis streiten mit ihm um
   den Blick. Die Steuerzeile ist die Antwort auf die erste Frage jedes Betriebs („kommt da
   noch was obendrauf?") und darf deshalb lesbar sein — aber leiser als die Zahl. */
/* ── DIE GELD-ZURUECK-GARANTIE ────────────────────────────────────────────────────────
   Ty 17.09.2026: „UHHH Mach auch eine 100% Geld zurück Garantie für den einmalpreis."
   Sie soll das Risiko wegnehmen, also muss man sie im Vorbeisehen erfassen: ein Siegel,
   eine fette Zeile, ein Satz. Die Bedingungen darunter sind bewusst lesbar gross (12 px,
   nicht 9) — kleingedruckte Grenzen nehmen keinem Menschen die Angst, sie machen sie
   groesser. Gruen wie die Aktionszeile, weil beides dasselbe sagt: hier gewinnen Sie was. */
/* ── DIE GARANTIE ALS ANSAGE ─────────────────────────────────────────────────────────
   Ty 08.10.2026: „Das auch enorm haesslich... denk dir was eigenes geiles kreatives aus"

   Hier stand ein weisser Kasten mit gruenem Rand und einem gezeichneten 100%-Abzeichen —
   gebaut fuer einen hellen Abschnitt, stehengeblieben, als die Pakete dunkel wurden. Die
   Zusage selbst war 13,5 px gross.

   Das ist unser staerkstes Argument. Die meisten verstecken so etwas im Kleingedruckten,
   also sagen wir es in Ueberschriftengroesse: die Zahl gruen, der Rest hell, daneben
   nichts. Kein Kasten, kein Siegel, kein Rahmen — die GROESSE ist die Gestaltung. */
.garantie{display:block;margin-top:clamp(34px,4vw,54px);padding:clamp(26px,3vw,36px) 0 0;
  border:0;border-top:1px solid var(--bd);background:none}
.garantiesiegel{display:none}
/* Zwei Klassen, nicht eine: `.licht p` faerbt sonst jede Zeile im hellen Abschnitt
   grau — auch diese, und dann ist die Garantie nur noch ein Absatz. */
.garantie .garantietitel{margin:0 0 18px;font-weight:800;color:var(--tx);
  font-size:clamp(31px,4.6vw,56px);line-height:1.03;letter-spacing:-1.5px}
.garzahl{font-style:normal;color:var(--gruen)}
.garantiesatz{margin:0;max-width:58ch;font-size:clamp(15.5px,1.4vw,18px);
  line-height:1.62;color:var(--tx2)}
.garantieklein{margin:18px 0 0;max-width:74ch;font-size:12.5px;line-height:1.6;
  color:var(--tx3);opacity:1}
.licht .garantiesatz{color:var(--hell-tx2)}
.licht .garantieklein{color:var(--hell-tx2)}
/* Auf Weiss zwei Korrekturen, beide gemessen statt geraten:
   1. Hier stand `body.hellmodus .garantietitel{color:#15803d}` — aus der Zeit, als der
      Titel eine 15-px-Beschriftung war. Jetzt ist er die Ueberschrift und gehoert in die
      Textfarbe; gruen bleibt nur die Zahl, sonst schreit die ganze Zeile.
   2. --gruen ist #4ade80 und fuer Dunkel gemacht; auf Weiss sind das 1,8:1 und damit
      unlesbar. Deshalb derselbe dunklere Ton, den die Seite sonst im Hellmodus nimmt. */
body.hellmodus .garzahl{color:#15803d}
/* ── „WEITERE FRAGEN" ────────────────────────────────────────────────────────────────
   Ty 18.09.2026: „make a load more button I guess, instead of showing them all at once."
   Der Knopf sieht aus wie eine Zeile der Liste und nicht wie ein Aufruf zum Handeln —
   er soll die Liste abschliessen, nicht mit dem Erstgespraech konkurrieren. */
.faqmehr{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:6px;padding:16px 18px;border:none;border-top:1px solid var(--bd);
  background:none;color:var(--tx2);font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;transition:color .15s}
.faqmehr:hover{color:var(--goldtx)}
.faqmehr::after{content:"↓";font-size:13px;opacity:.7;transition:transform .35s var(--weich)}
.faqmehr[data-offen]::after{transform:rotate(180deg)}
/* ── AUF- UND ZUKLAPPEN, NICHT AUF- UND ZUSCHNEIDEN ──────────────────────────────────
   Ty 18.09.2026: „Dieser Knopf soll kein hardcut sein, ich will eine cleane Animation."
   Eine Hoehe von `auto` laesst sich nicht animieren — deshalb der Umweg ueber eine
   Rasterzeile: 1fr ist „so hoch wie der Inhalt", 0fr ist null, und DAZWISCHEN kann der
   Browser rechnen. Kein gemessener Pixelwert, der beim naechsten Text nicht mehr stimmt.
   Offen ist der Grundzustand: ohne Javascript stehen alle Fragen da (sie sind das Beste,
   was diese Seite fuer eine Suchmaschine hat). Erst das Skript setzt `data-zu`. */
.faqrest{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .52s var(--ruhig),opacity .52s var(--ruhig)}
/* Kein `min-height:0` hier. Das nimmt einem Rasterfeld sein automatisches Mindestmass —
   und genau daran haengt der Trick: `1fr` ist nur deshalb „so hoch wie der Inhalt", weil
   das Feld mindestens so gross wird wie das, was darin steht. Mit `min-height:0` darf es
   auf null schrumpfen, und dann bleibt die Liste beim Aufklappen zu. Gebraucht wird es
   hier nicht (das ist eine Flexbox-Gewohnheit), also weg damit. */
.faqrest > div{overflow:hidden}
.faqrest[data-zu]{grid-template-rows:0fr;opacity:0}
@media(prefers-reduced-motion:reduce){ .faqrest{transition:none} }

/* ── DAS BAND UNTER DEN PAKETEN ───────────────────────────────────────────────────────
   Ty 17.09.2026: „Bau das stark ein, ohne dass es den main fokus von Akibon Studio
   wegzieht. Wir sind mainly Website ersteller lol."
   „Stark, aber nicht vorne" ist eine Frage der Lautstaerke, nicht der Groesse: kein
   Gold, keine Preise in Grossschrift, kein Rahmen, der mit den Paketkarten konkurriert.
   Die Karten sind breit und ruhig — man sieht sie, wenn man mit den Paketen fertig ist,
   und uebersieht sie, wenn man es nicht ist. */
/* ── DIE ZUSATZ-ANGEBOTE ALS VERZEICHNIS ─────────────────────────────────────────────
   Auch das waren weisse Karten auf schwarzem Grund. Statt Kaesten jetzt ein Verzeichnis:
   je ein feiner Strich darueber, Marke klein in Flieder, Zeile gross, ein Satz, ein Pfeil.
   Dieselbe Haltung wie beim Team — was zusammengehoert, zeigt die Ausrichtung, nicht ein
   Rechteck. Und leise bleibt es trotzdem: Ty 17.09.2026 „Bau das stark ein, ohne dass es
   den main fokus von Akibon Studio wegzieht." */
.dazu{margin-top:clamp(44px,5vw,72px);padding-top:0;border-top:0}
.dazutitel{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--tx3)}
.dazureihe{display:grid;gap:0}
/* Drei Karten in zwei Spalten lassen eine allein in der zweiten Reihe stehen — das sieht
   aus wie ein Nachtrag. Also entweder alle drei nebeneinander oder alle untereinander. */
@media(min-width:820px){ .dazureihe{grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,5vw,72px)} }
.dazukarte{display:block;padding:22px 0 26px;border:0;border-top:1px solid var(--bd);
  border-radius:0;background:none;text-decoration:none;
  transition:border-color .25s var(--weich)}
.dazukarte:hover{border-top-color:var(--akz)}
.dazumarke{display:block;margin-bottom:9px;font-size:11px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--akztx)}
.dazuzeile{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:800;
  letter-spacing:-.3px;color:var(--tx);line-height:1.3;transition:color .2s}
.dazukarte:hover .dazuzeile{color:var(--akz2)}
.dazusatz{display:block;margin-top:9px;max-width:46ch;font-size:14.5px;
  line-height:1.6;color:var(--tx2)}
.dazumehr{display:inline-block;margin-top:14px;font-size:13px;font-weight:800;
  color:var(--akztx);transition:transform .2s var(--weich)}
.dazukarte:hover .dazumehr{transform:translateX(5px)}
.dazusagt{margin:26px 0 0;font-size:13px;line-height:1.6;color:var(--tx3);opacity:1}
.preissteuer{font-size:12px;font-weight:700;color:var(--hell-tx2);opacity:.85;
  margin:2px 0 8px;letter-spacing:.1px;line-height:1.5}
/* Der Steuerhinweis stand bei 1,96:1 — praktisch unsichtbar. Er gehoert zu den Angaben,
   die ein Kunde VOR dem Kauf lesen koennen muss. */
.kassefeld .preissteuer,.bestellkasten .preissteuer,.upsell .preissteuer{color:var(--tx2);opacity:1}
body.hellmodus .preissteuer{color:#6b6384}

/* Der Umrechner ist ein ANGEBOT, keine Ansage: zugeklappt ist er ein kleiner Knopf, den ein
   Kunde aus dem Euroraum gar nicht erst sieht (das Skript nimmt ihn dort weg) und ein Kunde
   aus Tokio in einer Sekunde findet. */
.umrechner{margin:0 0 12px}
.umrechnknopf{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--bd2);border-radius:99px;background:transparent;
  color:var(--tx3);font:inherit;font-size:12px;font-weight:800;letter-spacing:.2px;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.umrechnknopf::before{content:"⇄";font-size:12px;line-height:1;opacity:.9}
.umrechnknopf:hover{border-color:var(--gold);color:var(--goldtx)}
.umrechnknopf.offen{border-color:var(--gold);color:var(--goldtx);
  background:rgba(224,168,60,.08)}
.umrechnfeld{margin-top:9px;padding:10px 12px;border:1px solid var(--bd2);border-radius:13px;
  background:var(--sur2)}
.umrechnzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.umrechnwahl{flex:1 1 150px;min-width:0;max-width:100%;padding:7px 9px;border-radius:9px;
  border:1px solid var(--bd2);background:var(--sur-voll);color:var(--tx2);
  font:inherit;font-size:12.5px;font-weight:700}
.umrechnwert{flex-shrink:0;font-size:19px;font-weight:800;letter-spacing:-.3px;
  color:var(--goldtx);font-variant-numeric:tabular-nums}
.umrechnfuss{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--tx3)}
/* In der Handy-Kurzfassung steht der Preis rechts neben dem Paketnamen — dort richtet sich
   auch der Umrechner nach rechts aus, sonst haengt er unter dem Namen statt unter der Zahl. */
.umrechner.knapp{margin:4px 0 0;text-align:right}
.umrechner.knapp .umrechnfeld{text-align:left}
.umrechner.knapp .umrechnwert{font-size:16px}
.paket .waehlen{margin-top:24px}
/* Der zweite Rahmenpixel kommt als Schatten, nicht als Rand: ein 2px-Rand macht den
   Inhaltskasten um einen Pixel kleiner als beim Nachbarn — und genau um diesen einen Pixel
   lagen die beiden Knoepfe noch daneben. Aussehen gleich, Kasten gleich. */
/* GOLD GEHOERT DEM PREMIUM-PAKET.
   Ty 12.09.2026: „Warum ist basic gold und premium lila? switch das."
   Er hat recht, und es stand rueckwaerts: Gold ist im Logo, im Kopfknopf und im ganzen
   Auftritt die Farbe von Akibon — und ausgerechnet die teuerste Zeile der Seite trug die
   Ausweichfarbe. Auf dem weissen Paketkasten braucht das Band einen dunklen Ton: reines
   Gold auf Weiss ist nicht lesbar (gemessen 1,8:1), dunkles Gold mit weisser Schrift
   dagegen schon. Die Umrandung darf das helle Gold behalten — eine Linie muss man nicht
   lesen, nur sehen. */
.paket.hervor{border:1px solid var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 18px 48px rgba(224,168,60,.22)}
.paket .band{position:absolute;top:-13px;left:26px;background:#8a5a00;color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:1.3px;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.preis{font-size:30px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px;color:var(--hell-tx)}
.preis small{font-size:13px;font-weight:700;color:var(--hell-tx2)}

/* ── VSL ─────────────────────────────────────────────────────────────────────────────── */
/* Ein Player sieht aus wie ein Player: Schirm oben, Bedienleiste unten. Die vorige Fassung
   war eine leere Flaeche mit einem Kreis darin — ein Platzhalter, der aussah wie ein Fehler.
   Nichts hier ist anklickbar: es laeuft noch kein Film, und ein Knopf, der nichts tut, ist
   schlimmer als kein Knopf. */
.vsl{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--bd2);
  background:var(--sur-voll);box-shadow:0 30px 70px rgba(0,0,0,.45)}
/* Der Schirm ist jetzt ein Knopf — er muss die Knopf-Grundstile loswerden, sonst bringt
   der Browser Rahmen, Innenabstand und eine eigene Schriftgroesse mit. */
.vsl-schirm{appearance:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;width:100%;
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%,rgba(124,58,237,.30) 0%,transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% -20%,rgba(224,168,60,.16) 0%,transparent 60%),
    linear-gradient(150deg,#1a1430 0%,#0a0812 100%)}
.vsl-band{position:absolute;top:13px;right:13px;z-index:2;font-size:10px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  background:rgba(10,8,18,.55);border:1px solid rgba(224,168,60,.45);border-radius:99px;padding:5px 12px}
.vsl-spielen{position:relative;width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);display:grid;place-items:center}
/* Das Dreieck ist gezeichnet, kein ▶ aus der Schrift — dessen Groesse und Ausrichtung
   springen je nach Geraet, und mittig sitzt es fast nirgends. */
.vsl-spielen::after{content:'';width:0;height:0;margin-left:5px;
  border-left:19px solid var(--gold);border-top:12px solid transparent;border-bottom:12px solid transparent}
.vsl-spielen::before{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(224,168,60,.5);animation:vslpuls 2.8s var(--weich) infinite}
@keyframes vslpuls{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.vsl-glanz{position:absolute;top:-84%;left:-88%;width:40%;height:270%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 68%,transparent 100%);
  transform:rotate(14deg) translateX(0);will-change:transform,opacity;
  animation:vslglanz 6.8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes vslglanz{
  0%,58%{transform:rotate(14deg) translateX(0);opacity:0}
  64%{opacity:.95}
  85%{transform:rotate(14deg) translateX(520%);opacity:.95}
  92%{transform:rotate(14deg) translateX(610%);opacity:0}
  100%{transform:rotate(14deg) translateX(610%);opacity:0}
}
.vsl-fuss{padding:15px 18px 18px;border-top:1px solid var(--bd)}
.vsl-leiste{height:3px;border-radius:99px;background:var(--bd2);overflow:hidden}
.vsl-leiste i{display:block;height:100%;width:4%;border-radius:99px;background:var(--gold)}
.vsl-zeit{display:flex;align-items:baseline;gap:10px;margin-top:9px;
  font-family:var(--mono);font-size:11px;color:var(--tx3)}
.vsl-zeit b{flex:1;text-align:center;font-family:inherit;font-size:14.5px;font-weight:800;
  letter-spacing:-.3px;color:var(--tx);font-family:'Plus Jakarta Sans',sans-serif}
.vsl-text{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.6}
/* Das Deckbild fuellt den Schirm; das Hochformat des Reels wird mittig beschnitten statt
   verzerrt. Beim Daraufzeigen zieht es ganz leicht an — das ist der einzige Hinweis, dass
   hier wirklich etwas passiert, wenn man drueckt. */
.vsl-schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 28%;transition:transform .5s var(--weich),filter .3s}
.vsl-schirm:hover img{transform:scale(1.035);filter:brightness(1.06)}
.vsl-schirm:hover .vsl-spielen{transform:scale(1.07)}
.vsl-spielen{transition:transform .25s var(--weich)}
.vsl-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:12px}
.vsl-ig{font-size:13px;font-weight:800;color:var(--goldtx);text-decoration:none}
.vsl-ig:hover{text-decoration:underline}
.vsl-schutz{font-size:11.5px;color:var(--tx3)}
/* Nach dem Klick steht hier Instagrams eigener Rahmen. Er bringt seine eigene Hoehe mit,
   deshalb faellt das 16:9 weg — sonst waere ein Hochformat-Reel oben und unten abgeschnitten. */
.vsl-laeuft{display:block;width:100%;height:auto;background:#000;border:0;padding:0}
@media(prefers-reduced-motion:reduce){
  .vsl-schirm img,.vsl-spielen{transition:none}
  .vsl-schirm:hover img{transform:none}
}
.vsl-kapitel{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.vsl-kapitel span{font-size:11px;font-weight:700;color:var(--tx3);
  border:1px solid var(--bd);border-radius:99px;padding:4px 10px}
.licht .vsl-fuss{border-top-color:rgba(255,255,255,.10)}
.vsl-schirm.vsl-mit-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Das Video bleibt der Abspiel-/Pause-Knopf; sein sichtbares Symbol entfaellt. */
.vsl-schirm .vsl-spielen{display:none}
.vsl-schirm.spielt .vsl-spielen,.vsl-schirm.vsl-mit-video .vsl-glanz{opacity:0;pointer-events:none}
.vsl-schirm .vsl-spielen::before{box-shadow:0 0 40px rgba(224,168,60,.45);animation:vsl-aura 2.4s ease-in-out infinite}
@keyframes vsl-aura{0%,100%{box-shadow:0 0 24px rgba(224,168,60,.3)}50%{box-shadow:0 0 52px rgba(224,168,60,.65)}}
@media(prefers-reduced-motion:reduce){.vsl-schirm .vsl-spielen::before{animation:none}}
/* ── DER SPIELER IST DUNKEL, DER ABSCHNITT UM IHN HERUM NICHT ────────────────────────────
   Ty 12.09.2026 zum VSL-Kasten: „Das ist viel zu unleserlich."
   Gemessen war es schlimmer als es aussah: der Absatz stand bei 1,96:1 Kontrast, die
   Kapitel und Zeiten bei 3,72:1 — verlangt sind 4,5:1.

   Die Ursache ist dieselbe Falle wie beim Hellmodus: der Kasten liegt im hellen Abschnitt
   (.licht), also griff dessen Regel `.licht p{color:var(--hell-tx2)}` auch hier — eine
   Farbe, die fuer WEISSEN Grund gemacht ist. Der Spieler ist aber dunkel geblieben. Ein
   dunkelgrauer Text auf fast schwarzem Grund ist danach rechnerisch noch da und praktisch
   unsichtbar. Und weil `.licht p` spezifischer ist als `.vsl-text`, konnte die eigene
   Farbe des Kastens gar nicht gewinnen.

   Deshalb stehen die Farben hier mit derselben Spezifitaet noch einmal — sie haengen jetzt
   am Kasten, nicht am Abschnitt, und gelten in jeder Umgebung. Nachgerechnet auf dem
   echten Grund rgb(23,19,36): Absatz 9,1:1, Kapitel und Zeiten 6,7:1. */
.vsl-text,.licht .vsl-text{color:#b9b4cc}
.vsl-zeit,.licht .vsl-zeit,
.vsl-kapitel span,.licht .vsl-kapitel span{color:#9f99b8}
.vsl-kapitel span,.licht .vsl-kapitel span{border-color:rgba(255,255,255,.14)}

/* ── DIE HANDY-FASSUNG ───────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Extrem minimalistisch. Nur unser VSL. Dann kann man weiter klicken. Man
   sieht unser Angebot. Mehr nicht. Auf Handy will ich nicht scrollen lassen."

   Ueber 760px existiert das hier nicht — display:none, kein Platz, kein Einfluss. Darunter
   legt es sich als eigene Ebene ueber die Seite und sperrt das Scrollen des Dokuments.
   Nicht die lange Seite wird ausgeblendet, sondern die kurze daruebergelegt: der Text
   bleibt im Dokument, wo Google ihn findet, und ein Fingertipp bringt ihn zurueck.

   Gerechnet wird mit dvh, nicht vh: auf dem iPhone ist vh die Hoehe OHNE die Adressleiste,
   und genau die schiebt beim ersten Scrollversuch alles um 60-80 Pixel. Bei einer Seite,
   die gar nicht scrollen soll, faellt das als abgeschnittener Knopf auf. */
.kurz{display:none}
@media(max-width:760px){
  body.kurzmodus{overflow:hidden;height:100dvh}
  body.kurzmodus > header,body.kurzmodus > main,body.kurzmodus > footer,
  body.kurzmodus .hochknopf{display:none}
  .kurz{display:none;flex-direction:column;position:fixed;inset:0;z-index:100;
    background:var(--bg);
    padding:calc(12px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom));
    overflow:hidden}
  body.kurzmodus .kurz{display:flex}
  body.langmodus .kurz{display:none}

  .kurzkopf{display:flex;align-items:center;gap:11px;flex-shrink:0;padding-bottom:8px}
  .kurzkopf .logo{flex:1;min-width:0}
  .kurzsprache{font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--tx3);
    text-decoration:none;border:1px solid var(--bd2);border-radius:99px;padding:6px 12px}

  /* Die Buehne ist ein Fenster, die Blaetter liegen nebeneinander dahinter und werden
     geschoben. Kein Ein- und Ausblenden: beim Schieben sieht man, WOHIN man geht, und
     findet den Weg zurueck von allein. */
  .kurzbuehne{position:relative;flex:1;min-height:0;overflow:hidden}
  .kurzblatt{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:center;gap:13px;
    transition:transform .42s var(--weich),opacity .3s var(--weich)}
  /* Jedes Blatt kennt seine Nummer (--nr), die Buehne den aktuellen Stand (--blatt).
     Vorher stand hier je Blatt eine eigene Regel und im Skript `n === 1` — damit waren
     genau zwei Blaetter moeglich, und das dritte (die Vorlage) haette nichts getan. */
  .kurzblatt{transform:translateX(calc((var(--nr,0) - var(--blatt,0)) * 104%));opacity:0}
  .kurzblatt.aktiv{transform:translateX(0);opacity:1}
  /* Was gerade nicht dran ist, faengt auch keine Finger ab. */
  .kurzblatt{pointer-events:none}
  .kurzblatt.aktiv{pointer-events:auto}
  /* Das Blatt bekommt beim Wechsel den Fokus, damit eine Sprachausgabe den Wechsel
     ueberhaupt bemerkt — nichts wird ja neu geladen. Sichtbar soll das aber nicht sein:
     wer tippt oder wischt, hat sonst einen blauen Rahmen um die halbe Karte.
     `:focus-visible` bleibt, damit es mit der Tastatur weiterhin erkennbar ist. */
  .kurzblatt:focus{outline:none}
  .kurzblatt:focus-visible{outline:2px solid var(--akz2);outline-offset:-4px;border-radius:14px}

  /* Das Vorlagen-Blatt: ein Schuss der laufenden Seite, gross genug zum Erkennen. */
  .kurzvorl{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--bd2);
    background:var(--bg3);text-decoration:none;flex:1;min-height:0;position:relative}
  .kurzvorl img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .kurzvorl .kurzvorlband{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;
    background:linear-gradient(to top,rgba(8,9,12,.94) 40%,rgba(8,9,12,0));
    font-size:13px;font-weight:800;color:var(--tx)}

  /* ── DAS REEL AUF DEM HANDY: HOCHKANT, OHNE ZU SCROLLEN ──────────────────────────
     Ty 08.10.2026: „für die Handy Version mach querformat reel keinen sinn... mach
     hochformat. aber irgendwie trotzdem so dass man nicht scrollen muss auf dieser
     seite um alles zu sehen."

     Hier stand `aspect-ratio:16/10` — quer, obwohl das Reel 1080x1920 ist. Einfach auf
     9/16 umzustellen loest es NICHT: bei voller Breite waere das Video hoeher als der
     Bildschirm, und genau dann muesste man scrollen.
     Der Griff ist, die Form an der HOEHE aufzuhaengen statt an der Breite: das Video
     nimmt den Platz, der nach Vorspann, Zeile und Knopf uebrig ist, und seine Breite
     ergibt sich daraus. Dadurch passt es auf jedem Geraet auf einen Schirm — auf einem
     hohen Telefon wird es groesser, auf einem kurzen kleiner, nie ueber die Kante. */
  .kurzvsl{margin:0;flex:1;min-height:0;display:flex;justify-content:center;
    align-items:stretch;background:none;border:none;box-shadow:none;overflow:visible}
  .kurzvsl .vsl-schirm{aspect-ratio:9/16;height:100%;width:auto;max-width:100%;
    border-radius:18px;overflow:hidden;border:1px solid rgba(224,168,60,.30);
    box-shadow:0 0 70px -14px rgba(224,168,60,.34),0 18px 46px rgba(0,0,0,.5)}
  .kurzvorspann{margin:0;font-size:11px;font-weight:800;letter-spacing:1.8px;
    text-transform:uppercase;color:var(--goldtx)}
  .kurzzeile{margin:0;font-size:clamp(21px,6.2vw,27px);font-weight:800;letter-spacing:-.6px;
    line-height:1.25}
  .kurzknopf{width:100%;text-align:center;font-size:15.5px;padding:16px}

  /* ── KEIN TARIFVERGLEICH ────────────────────────────────────────────────────────────
     Ty 12.09.2026: „es ist das design. Es sieht aus wie so eine billige Handy tarif Seite,
     aber wir liefer premium Websiten."

     Die genaueste Kritik des Tages, und ich war vorher in die falsche Richtung gelaufen:
     ich hatte den Karten Punktelisten gegeben und damit die Handytarif-Seite noch
     verstaerkt. Genau das ist ihre Bauart — zwei umrandete Kaesten, je ein grosser Preis,
     eine Hakenliste, ein vollflaechiger Knopf, und auf einem klebt „BELIEBT".

     Teuer sieht anders aus. Teuer ist ZURUECKHALTUNG: keine Kaesten, keine Banderole, keine
     Aufzaehlungspunkte. Nur Typografie und Platz. Name links, Preis rechts, ein Satz
     darunter, ein Haarstrich dazwischen — und genau EIN gefuellter Knopf auf dem ganzen
     Blatt. Der andere Weg ist eine Textzeile mit Pfeil; sie ist gleich gut erreichbar
     (48 px hoch), draengt sich aber nicht auf.

     Der Platz, der dabei entsteht, ist kein Leerraum, den man fuellen muesste. Er ist das
     eigentliche Signal. */
  .kurzweg{padding:2px 2px 0}
  .kurzweg + .kurzweg{margin-top:22px;padding-top:24px;border-top:1px solid var(--bd)}
  .kurzzeile{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .kurzname{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
  .kurzpreis{flex-shrink:0;font-size:17px;font-weight:800;letter-spacing:-.3px;
    color:var(--goldtx);white-space:nowrap}
  .kurzpreis s{font-size:13px;font-weight:600;color:var(--tx3);margin-right:7px;
    text-decoration-thickness:1px}
  .kurzsatz{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--tx2)}
  /* Der leise Weg: eine Zeile, kein Kasten — aber mit voller Fingerhoehe. */
  /* Ty 12.09.2026: „Das basic paket soll auch einen normalen button behalten."
     Ich hatte daraus eine Textzeile mit Pfeil gemacht, um EINEN Knopf herausstechen zu
     lassen. Das war meine Ordnung, nicht seine — und sie kostet: das Basis-Paket ist das
     einzige, das man direkt kaufen kann, und ausgerechnet dessen Weg sah aus wie ein
     Nebensatz. Beide sind jetzt Knoepfe. Der Unterschied steckt in der Farbe, nicht in der
     Form: Kontur fuer Basis, Flaeche fuer das Gespraech. Das ordnet, ohne einen von beiden
     zu verstecken. */
  .kurzhaupt{width:100%;text-align:center;padding:14px;font-size:14.5px;margin-top:15px}
  /* In der Handy-Kurzfassung traegt das Basis-Paket jetzt den lila Rand und das
     Premium-Paket den vollen goldenen Knopf — dieselbe Ordnung wie am Rechner. */
  .kurzhaupt.randlila{background:none;border:1px solid rgba(130,60,200,.55);
    color:var(--lila2)}
  .kurzhaupt.randlila:hover{border-color:var(--lila);color:#fff}
  .kurzhaupt.rand{background:none;border:1px solid rgba(224,168,60,.55);
    color:var(--goldtx);box-shadow:none}
  .kurzhaupt.rand:hover{border-color:var(--gold);color:var(--gold)}
  .kurzretour{background:none;border:none;color:var(--tx3);font-size:13.5px;font-weight:700;
    font-family:inherit;padding:8px 2px;cursor:pointer;align-self:center}

  .kurzfuss{flex-shrink:0;text-align:center;padding-top:10px;font-size:11.5px;
    color:var(--tx3);display:flex;flex-direction:column;align-items:center;gap:5px}
  .kurzalles{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:800;
    color:var(--tx2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px}
  .kurzrecht{display:flex;gap:16px;margin-top:2px}
  .kurzrecht a{color:var(--tx3);text-decoration:none;font-size:11px}

  /* Sehr flache Geraete (Landscape, kleine Androiden): lieber etwas kleiner als
     abgeschnitten. Nichts darf unter die Kante rutschen, sonst scrollt man doch. */
  @media(max-height:680px){
    .kurzblatt{gap:9px}
    .kurzzeile{font-size:19px}
    .kurzweg + .kurzweg{margin-top:16px;padding-top:18px}
    .kurzname,.kurzpreis{font-size:15.5px}
  }
  @media(prefers-reduced-motion:reduce){ .kurzblatt{transition:none} }
}

/* Mobile Beispielseiten: eine grosse Vorschau, dann das Gespraech. Die Studien
   haben dieselbe Buehne wie die echte Vorlage, aber eine klare eigene Kennzeichnung. */
@media(max-width:760px){
  .kurzbeispiele{gap:8px}
  .kurzbeispielkarussell{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
  .kurzbeispielfenster{flex:1;min-height:0;touch-action:pan-y;user-select:none}
  .kurzbeispiel{display:none;height:100%;min-height:0}
  .kurzbeispiel.ist-aktiv{display:block}
  .kurzbeispiel[hidden]{display:none!important}
  .kurzbeispielinhalt{height:100%;min-height:0;display:flex;flex-direction:column;gap:9px}
  .kurzbeispielkopf{flex-shrink:0}
  .kurzbeispieltitel{display:block;margin:0;font-size:clamp(22px,6.2vw,27px);line-height:1.15}
  .kurzbeispielart{margin:5px 0 0;font-size:11.5px;line-height:1.3;font-weight:600;color:var(--tx3)}
  .kurzbeispielbild{margin:0;flex:1;min-height:0;isolation:isolate}
  .kurzbeispielbild img{pointer-events:none}
  .kurzbeispieltext{margin:0;flex-shrink:0;font-size:13px;line-height:1.45;user-select:text}
  .kurzbeispielsteuerung{display:flex;align-items:center;justify-content:center;gap:16px;flex-shrink:0;min-height:44px}
  .kurzbeispielpfeil{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
    border:1px solid var(--bd2);border-radius:50%;background:none;color:var(--tx2);cursor:pointer}
  .kurzbeispielpfeil svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .kurzbeispielpfeil:hover{color:var(--gold-hell);border-color:var(--gold)}
  .kurzbeispielpfeil:disabled{opacity:.3;cursor:default}
  .kurzbeispielmitte{display:flex;flex-direction:column;align-items:center;min-width:132px}
  .kurzbeispielpunkte{display:flex;align-items:center;justify-content:center;height:44px;margin-bottom:-9px}
  .kurzbeispielpunkte button{display:grid;place-items:center;width:44px;height:44px;border:0;
    background:none;padding:0;cursor:pointer;color:var(--tx3)}
  .kurzbeispielpunkte button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bd3)}
  .kurzbeispielpunkte button[aria-current="true"]::before,
  .kurzbeispielpunkte button.ist-aktiv::before{width:18px;border-radius:5px;background:var(--gold)}
  .kurzbeispielstand{font-size:10.5px;line-height:1.25;font-weight:600;color:var(--tx3);font-variant-numeric:tabular-nums}
  .kurzbeispielzurueck{min-height:44px;padding:8px 12px;margin:-4px 0;font-size:12.5px}
  .kurzbeispielpfeil:focus-visible,.kurzbeispielpunkte button:focus-visible,
  .kurzbeispielbild:focus-visible,.kurzbeispielzurueck:focus-visible,
  .kurzkontaktmail:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
  .kurzkontakt{gap:16px}
  .kurzkontakttitel{display:block;font-size:clamp(28px,8vw,38px);line-height:1.12;max-width:330px}
  .kurzkontakttext{margin:0;max-width:340px;font-size:14px;line-height:1.6}
  .kurzkontaktbuchen{margin-top:10px}
  .kurzkontaktmail{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;
    padding:8px 14px;text-align:center;color:var(--tx);text-decoration:none;border:1px solid var(--bd2);border-radius:12px}
  .kurzkontaktmail span{font-size:11.5px;font-weight:600;color:var(--tx3)}
  .kurzkontaktmail b{font-size:15px;font-weight:700}
  .kurzkontaktmail:hover{border-color:var(--gold);color:var(--gold-hell)}
  @media(max-width:350px){
    .kurzkopf .logo{--logo:21px;gap:7px}
  }
  @media(max-height:720px){
    .kurzbeispiele,.kurzkontakt{padding-block:8px}
  }
  @media(max-height:680px){
    .kurzbeispiele{gap:5px}
    .kurzbeispielkarussell{gap:5px}
    .kurzbeispielinhalt{gap:7px}
    .kurzbeispieltitel{font-size:21px}
    .kurzbeispielart{margin-top:3px;font-size:11px}
    .kurzbeispieltext{font-size:11.5px;line-height:1.4}
    .kurzkontakt{gap:12px}
    .kurzkontakttitel{font-size:28px}
    .kurzkontakttext{font-size:13px;line-height:1.5}
  }
  @media(max-height:600px){
    .kurzbeispielbild img[src*="/beispiele/"]{object-fit:contain;object-position:center}
  }
  @media(max-height:480px){
    .kurzbeispiele,.kurzkontakt{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
    .kurzbeispielkarussell{flex:none;height:340px}
    .kurzbeispiele>button,.kurzkontakt>*{flex-shrink:0}
  }
}

/* ── DIE KASSE ───────────────────────────────────────────────────────────────────────────
   Das Bezahlfeld selbst gehoert Stripe und liegt in einem eigenen Rahmen — wir koennen es
   nicht von aussen gestalten, sondern nur ueber die Farben, die das Skript hineingibt. Was
   HIER steht, ist der Rahmen darum: Ladezustand, Abstaende, und alles, was nach dem Kauf
   kommt. */
.kassefeld{min-height:190px;margin-top:18px}
.kasselader{display:grid;place-items:center;height:190px;color:var(--tx3);font-size:13.5px}
.dankehaken{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:800;color:var(--gruen);margin:0 0 14px;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35)}
.dankekasten{margin-top:20px;padding:16px 17px;border-radius:15px;
  background:var(--sur2);border:1px solid var(--bd)}
.dankemarke{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--goldtx)}
/* Der Upsell steht optisch NACH der Bestaetigung, nicht neben ihr: eigener Kasten, eigene
   Farbe, klar getrennt durch einen Abstand. Er soll ein Angebot sein, kein Nachschlag zur
   Rechnung. */
.aufkasten{margin-top:22px;padding:17px;border-radius:15px;
  background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.34)}
.aufpreis{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--lila2)}
.aufkasten h4{margin:2px 0 6px;font-size:15.5px;font-weight:800}
.aufkasten p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--tx2)}
.aufkasten .kurzretour{display:block;background:none;border:none;color:var(--tx3);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:10px 2px}
.aufkasten .kurzretour:hover{color:var(--tx2)}
.aufdrin{margin:0;font-size:14px;font-weight:700;color:var(--gruen)}

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────── */
details{border-top:1px solid var(--bd)}
details:last-of-type{border-bottom:1px solid var(--bd)}
summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-size:15.5px;font-weight:700;color:var(--tx)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:-18px;top:15px;font-size:21px;
  color:var(--tx3);font-weight:400;transition:transform .25s var(--weich)}
details[open] summary::after{transform:rotate(45deg);color:var(--gold)}
details p{padding:0 0 20px;margin:0;max-width:80ch}

/* ══ EIN AUSKLAPPER IST NICHT VON SELBST ANIMIERT ══════════════════════════════════════
   Ty 18.09.2026: „die animation wenn man eine neue frage öffnet und die alte sich
   schließt ist extrem ruckelig und alles andere als clean. Merk dir das mal im code,
   weil den fehler machst du enorm oft, dass etwas nicht clean animiert."

   ── DER FEHLER, DEN ICH HIER WIEDERHOLT MACHE ──────────────────────────────────────
   Ich baue etwas, das FUNKTIONIERT, und halte das fuer fertig. Aber alles, was auf
   dieser Seite auf- oder zugeht, wird gesehen, nicht gelesen — und ein Zustandswechsel
   ohne Zwischenbilder ist fuer das Auge ein Ruck, egal wie richtig der Endzustand ist.
   Dieselbe Sorte Fehler in Folge: das Raumschiff sprang beim Andocken, die Fragenliste
   schnitt hart auf, hier klappt <details> ohne Uebergang.
   MERKSATZ: Sobald sich eine HOEHE oder eine SICHTBARKEIT aendert, gehoert ein Uebergang
   dazu — und zwar bevor ich sage, es sei fertig. „Es steht am richtigen Platz" ist die
   halbe Arbeit; „es kommt dort sichtbar an" ist die andere.

   ── WARUM ES HIER NICHT VON ALLEIN GING ────────────────────────────────────────────
   <details> zeigt und versteckt seinen Inhalt schlagartig; es gibt keine Hoehe, die man
   animieren koennte, weil der Inhalt im geschlossenen Zustand gar nicht erst gerechnet
   wird. Seit es ::details-content gibt, ist genau dieser Kasten ansprechbar — und mit
   `interpolate-size: allow-keywords` darf sogar auf `auto` hin animiert werden, also auf
   „so hoch wie der Text ist". Kein gemessener Pixelwert, der beim naechsten Text nicht
   mehr stimmt, und kein Javascript.
   `transition-behavior: allow-discrete` ist der Teil, der oft fehlt: ohne ihn springt
   die Sichtbarkeit sofort um und der Inhalt ist schon weg, bevor die Hoehe losgelaufen
   ist. Browser ohne ::details-content (Firefox, Stand heute) verhalten sich wie bisher —
   schlagartig, aber nicht kaputt. */
/* Die Animation haengt an ZWEI Faehigkeiten: dem Kasten (::details-content) und dem
   Animieren auf `auto` (interpolate-size). Fehlt die zweite, waere `block-size:0` eine
   Hoehe, die nie wieder aufgeht — die Antwort waere unsichtbar. Deshalb steht die ganze
   Sache in einem @supports: kann es der Browser nicht, klappt er eben schlagartig auf
   wie eh und je. Lieber ohne Animation als ohne Text. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  :root{ interpolate-size: allow-keywords }
  #faq details::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .5s var(--ruhig),opacity .5s var(--ruhig),
               content-visibility .5s allow-discrete;
    transition-behavior:allow-discrete}
  #faq details[open]::details-content{block-size:auto;opacity:1}
  @media(prefers-reduced-motion:reduce){ #faq details::details-content{transition:none} }
  /* Wird beim heimlichen Aufraeumen kurz gesetzt: dort darf nichts animieren, weil die
     Hoehe augenblicklich stimmen muss — sonst misst der Scroll-Ausgleich eine Hoehe, die
     noch unterwegs ist. Und gesehen wird es ohnehin nicht. */
  #faq.sofort details::details-content{transition:none}
}
/* Das Pluszeichen dreht sich mit derselben Ruhe wie der Kasten aufgeht. */
#faq summary::after{transition:transform .5s var(--ruhig),color .3s}

/* ── Formular ────────────────────────────────────────────────────────────────────────── */
.formular{display:grid;gap:13px}
@media(min-width:720px){ .formular{grid-template-columns:1fr 1fr} .formular .voll{grid-column:1/-1} }
label{display:block;font-size:12px;font-weight:700;color:var(--tx3);margin:0 0 6px}
input,select,textarea{width:100%;background:var(--sur2);border:1px solid var(--bd2);
  border-radius:12px;padding:13px 14px;color:var(--tx);font-size:15px;font-family:inherit;outline:none;
  transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:128px;resize:vertical}
.pflichtstern{color:#f0787f}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--tx3);line-height:1.55}
.zustimmung input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--gold)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Fuss ────────────────────────────────────────────────────────────────────────────── */
/* Ty 12.09.2026: „unser footer soll bisschen cleaner sein... maybe zentriert."
   Vorher stand alles in einer Reihe links: Firmenzeile, Rechtslinks, Mail, Instagram,
   Sprache — fuenf verschiedene Sorten Sache nebeneinander, alle gleich laut. Jetzt zwei
   Ebenen: oben mittig die Links, darunter leiser die Firmenzeile. Damit hat der Fuss eine
   Ordnung statt einer Aufzaehlung, und auf schmalen Geraeten bricht er sauber um. */
/* ── DER FUSS ────────────────────────────────────────────────────────────────────────
   Ty 17.09.2026, mit einem Bild vom Rechner: „Ich find den Akibon Footer immernoch nicht
   ordentlich. Mach den gerne bisschen groesser."

   Die Ordnung gab es laengst — aber nur am Telefon. Hier stand bis eben
   `.fusstitel,.fusskopf{display:none}` und `.fussgruppe{display:contents}`: die
   Ueberschriften ausgeblendet, die Spalten aufgeloest, uebrig eine mittige Reihe aus
   sechs gleich lauten Links. Genau die Aufzaehlung, die er beim ersten Mal schon nicht
   wollte, nur eine Bildschirmgroesse weiter.

   Jetzt ueberall dasselbe: links das Logo und ein Satz, daneben drei beschriftete
   Spalten, darunter durch eine Linie getrennt die Firmenzeile. Und mehr Luft — ein Fuss
   darf der ruhigste Teil der Seite sein, aber nicht der gedraengteste. */
footer{border-top:1px solid var(--bd);padding:clamp(46px,6vw,70px) 0 34px;
  color:var(--tx3);font-size:13px;background:var(--bg)}
/* Die Spaltenzahl kommt aus dem Generator (--fussspalten), nicht aus einer festen 4:
   sonst haelt das Raster den Platz einer Spalte frei, die es gar nicht mehr gibt. */
.fussreihe{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(var(--fussspalten,4),minmax(0,1fr));
  gap:40px 22px;align-items:start;text-align:left}
.fusskopf{display:flex;flex-direction:column;gap:11px;min-width:0}
.fusslogo{--logo:24px}
.fusssatz{font-size:13px;line-height:1.6;color:var(--tx3);max-width:32ch}
.fusstitel{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--tx3);opacity:.65}
.fussunten{grid-column:1 / -1;margin-top:-6px;padding-top:20px;border-top:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.fussmarke{font-size:12px;opacity:.6;letter-spacing:.2px}
/* Am Rechner bleibt es EINE mittige Reihe: `display:contents` loest die Gruppen auf, die
   Ueberschriften sind aus. Am Telefon werden aus denselben Gruppen zwei Spalten mit je
   einer Ueberschrift — ohne zweite Fassung des Markups, die auseinanderlaufen koennte. */
.fusslinks{display:contents}
/* ── DER FUSS DER VORLAGEN-SEITE ────────────────────────────────────────────────────
   Ty 08.10.2026: „Footer ist hier komisch..." — und zwar klebten dort
   „ImpressumAGB & WiderrufDatenschutz" ohne jeden Abstand aneinander.
   URSACHE: die Vorlagen-Seite benutzt dieselbe Klasse `fusslinks` wie die Startseite,
   und dort bedeutet sie `display:contents` — die Gruppen sollen dort zu Rasterkindern
   werden. Auf der Vorlagen-Seite gibt es aber kein Raster, also verschwand der Behaelter
   und mit ihm jeder Abstand. Ein Klassenname, zwei Bedeutungen.
   Diese Regel steht BEWUSST danach und holt den Behaelter nur dort zurueck. */
.fuss{border-top:1px solid var(--bd);margin-top:clamp(40px,6vw,80px);
  padding:clamp(26px,3vw,38px) 0}
.fuss .fussinhalt{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 26px}
.fuss .fusszeile{margin:0;font-size:13px;color:var(--tx3)}
.fuss .fusslinks{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss .fusslinks a{font-size:13px;color:var(--tx2);text-decoration:none}
.fuss .fusslinks a:hover{color:var(--tx)}
.fussgruppe{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.fussgruppe a{font-size:13.5px;line-height:1.3;color:var(--tx2);overflow-wrap:anywhere}
.fussgruppe a:hover{color:var(--tx)}
footer a{color:var(--tx3);text-decoration:none}
footer a:hover{color:var(--tx2)}
.fusslogin{appearance:none;border:0;background:transparent;color:var(--tx3);font:inherit;
  text-align:left;padding:0;cursor:pointer;line-height:1.3}
.fussunten .fusslogin{text-align:right;font-size:12px}
.fusslogin:hover{color:var(--tx2)}
@keyframes managerfade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes managerglow{0%,100%{box-shadow:0 0 18px rgba(224,168,60,.25)}50%{box-shadow:0 0 32px rgba(224,168,60,.5),0 0 55px rgba(224,168,60,.12)}}
.managergrund{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.62);
  display:grid;place-items:center;padding:22px}
.managerbox{width:min(380px,100%);position:relative;border:1px solid var(--bd2);
  border-radius:28px;background:var(--sur);box-shadow:0 48px 96px rgba(0,0,0,.55);
  padding:36px 32px 32px;color:var(--tx);animation:managerfade .38s cubic-bezier(.22,1,.36,1) both}
.managerzu{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:999px;
  border:1px solid var(--bd);background:rgba(255,255,255,.05);color:var(--tx3);cursor:pointer;
  font:inherit;font-size:18px;line-height:1;display:grid;place-items:center}
.managerzu:hover{color:var(--tx);background:var(--sur2)}
.managerzeichen{width:48px;height:48px;border-radius:14px;background:rgba(224,168,60,.08);
  border:1px solid rgba(224,168,60,.18);display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:18px;animation:managerglow 3s ease-in-out infinite}
.managertitel{font-size:28px;font-weight:800;letter-spacing:-.8px;line-height:1.1;margin-bottom:6px;color:var(--tx)}
.managertitel span{color:var(--goldtx)}
.manageruntertitel{font-size:13px;color:var(--tx3);margin:4px 0 22px;line-height:1.45}
.managerinhalt{display:flex;flex-direction:column;gap:10px}
.managerfeld{display:block}
.managerfeld input{width:100%;box-sizing:border-box;border:1px solid var(--bd2);border-radius:14px;
  background:var(--sur2);color:var(--tx);font:inherit;font-size:15px;font-weight:500;
  padding:14px 18px;outline:0}
.managerfeld input:focus{border-color:var(--gold);box-shadow:0 0 0 1px rgba(224,168,60,.18)}
.managerhaupt{width:100%;background:var(--gold);color:#000;font-weight:800;font-size:15px;
  padding:15px;border-radius:14px;border:0;cursor:pointer;font-family:inherit;letter-spacing:-.3px;
  box-shadow:0 4px 24px rgba(224,168,60,.22);margin-top:4px}
.managerhaupt:disabled{opacity:.7;cursor:wait}
.managercontrol{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--sur2);
  border:1px solid var(--bd2);border-radius:16px;cursor:pointer;color:var(--tx);margin-bottom:6px}
.managercontrol input{width:20px;height:20px;accent-color:var(--gold);flex:0 0 auto}
.managercontrol b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px}
.managercontrol small{display:block;font-size:12px;color:var(--tx3);line-height:1.45;margin-top:3px}
.managerlogout{border:0;background:transparent;color:var(--tx3);font:inherit;cursor:pointer;
  align-self:flex-start;padding:0;margin-top:2px;font-size:13px}
.managerlogout:hover{color:var(--tx2)}
.managerstatus{min-height:18px;color:var(--re);font-weight:700;font-size:12px;margin-top:2px;transition:opacity .2s}
.managerstatus.gut{color:var(--goldtx)}
[hidden]{display:none!important}

/* ── Zustaende, die der Magic Button setzt ───────────────────────────────────────────── */

/* ── Umschaltbare Zustaende, die die Tafel setzt ─────────────────────────────────────── */
/* Ty 13.09.2026: „Wenn man ihn oft drückt, kommt man irgendwann auf eine kaputte Version
   unserer seite."

   Das war kein Zufall und kein Zuviel-Klicken: die Vorlage „Grosszuegig" hiess `gross` und
   wurde an den <body> gehaengt. `gross` gibt es aber schon als INHALTSKLASSE, fuer die
   grossen Absaetze — und die bringt max-width:64ch mit. Damit erbte die ganze Seite eine
   Maximalbreite von 884 Pixeln und stand links in einem schmalen Streifen, mit schwarzer
   Flaeche daneben. Gemessen: <body> 1205 -> 884 Pixel, allein durch den Klassennamen.

   Die Vorlage heisst jetzt `weit`. Damit dieselbe Falle nicht beim naechsten Namen wieder
   zuschnappt, prueft website_bauen.py beim Bauen, dass keine Vorlagenklasse gleichzeitig
   als Inhaltsklasse im CSS steht. */
/* ── ZWEI VORLAGEN, DIE ETWAS ZEIGEN ─────────────────────────────────────────────────────
   Ty 13.09.2026: „mach großzügig und maximaler kontrast raus aus magix button. Statdessen
   überleg dir was geileres. Sachen mit wow effekt... sowas wie... SOWAS Können die? muss
   man sich denken."

   Die beiden alten waren Schrauben: eine drehte die Schriftgroesse hoch, die andere den
   Kontrast. Niemand denkt sich dabei etwas. Diese hier verwandeln die ganze Seite — und
   jede sagt nebenbei, was wir machen.

   Moeglich ist das, weil die Seite komplett an Farbtoken haengt: eine Vorlage tauscht die
   Token und legt EINE Ebene darueber. Nichts wird umgebaut, nichts kann verrutschen. */

/* KINOFILM — Vignette, Korn, warme Farbkorrektur, leichtes Flimmern.
   Die andere Haelfte unseres Angebots: wir bauen nicht nur die Seite, wir drehen den Film.
   Das Lila wandert dabei mit ins Warme — eine Farbkorrektur zieht ein BILD, nicht einzelne
   Elemente; bliebe ein Ton kalt, saehe es nach Versehen aus statt nach Absicht. */
body.kino{
  --bg:#0c0907; --bg2:#130f0a; --bg3:#1a1410;
  --sur:#1a1410cc; --sur-voll:#1a1410; --sur2:#241c14;
  --bd:rgba(246,236,220,.09); --bd2:rgba(246,236,220,.17); --bd3:rgba(246,236,220,.26);
  --tx:#f7eee0; --tx2:#c8b69f; --tx3:#96836d;
  --hell:#1a1410; --hell2:#241c14; --hell-tx:#f7eee0; --hell-tx2:#c8b69f;
  --hell-bd:rgba(246,236,220,.13);
  --gold:#e8a13c; --gold-hell:#f4c078; --goldtx:#f0b45c;
  --lila:#c8763c; --lila2:#e09a5e; --gruen:#bcc76e;
}
body.kino .licht{--hell-karte:#241c14}
body.kino .licht .marke{color:#f0b45c}
body.kino::after{
  content:'';position:fixed;inset:0;z-index:300;pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 44%,transparent 40%,rgba(0,0,0,.58) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.26'/%3E%3C/svg%3E");
  animation:kinoflimmern 3.4s steps(2,end) infinite;
}
/* Kein sanftes Pulsieren, sondern zwei Stufen — Projektorlicht schwankt, es atmet nicht. */
@keyframes kinoflimmern{0%,100%{opacity:.88}50%{opacity:.97}}
body.ruhig.kino::after,body.scrollt.kino::after{animation:none}
@media(prefers-reduced-motion:reduce){ body.kino::after{animation:none} }
body.luft{--rand:clamp(26px,7vw,84px)}
body.luft p{line-height:1.95}
body.grau > header,body.grau > main,body.grau > footer{filter:grayscale(1)}
/* ══ DER HELLE MODUS ═══════════════════════════════════════════════════════════════════
   Ty 12.09.2026: „Ich will dass es eine schöne whitemode Seite ist, die nicht im Auge weh
   tut."

   Drei Dinge tun im Auge weh, und alle drei waren hier drin:

   1. DER SPRUNG. Die hellen Baender schlugen im hellen Modus auf fast Schwarz um — aus der
      Ueberlegung heraus, dass ein helles Band auf heller Seite kein Band mehr ist. Stimmt,
      aber die Loesung war zu grob: dreimal pro Seite von Weiss auf Schwarz und zurueck ist
      genau die Art Wechsel, bei der sich die Pupille jedes Mal neu einstellen muss. Jetzt
      sind die Baender eine Spur TIEFER statt umgekehrt — der Rhythmus bleibt, der Schlag
      faellt weg.
   2. REINES WEISS UND REINES SCHWARZ. Beides gibt es hier nicht: der Grund ist ein leicht
      lila gebrochenes Weiss, die Schrift ein sehr dunkles Violett. Auf einem hellen Schirm
      ist der Unterschied zwischen 21:1 und 13:1 nicht Lesbarkeit, sondern Blendung.
   3. GOLD ALS SCHRIFT. #e0a83c auf hellem Grund kommt auf 1,9:1 — das ist keine Farbe mehr,
      das ist ein Gefuehl. Als Flaeche bleibt Gold gold, geschrieben wird es dunkler.

   Was ABSICHTLICH dunkel bleibt: Handy, Codefenster, die Bildschirm-Attrappen und der
   eingebettete Kalender. Das sind Geraete und Programme, keine Seitenbereiche — ein
   Telefon mit weissem Gehaeuse waere ein anderes Telefon. */
body.hellmodus{
  --bg:#f6f4fa; --bg2:#ffffff; --bg3:#eeebf6; --sur-voll:#ffffff; --sur2:#f3f1f9;
  --tx:#1d1830; --tx2:#514a68; --tx3:#6b6382;   /* war #837b99 — 3,7:1 ist zu wenig */
  --bd:rgba(29,24,48,.09); --bd2:rgba(29,24,48,.15); --bd3:rgba(29,24,48,.24);
  --goldtx:#9a6b12;
  --regenschleier:rgba(246,244,250,.58);
}
body.hellmodus header{background:rgba(255,255,255,.86);border-bottom-color:rgba(29,24,48,.10)}

/* Das Band bleibt hell, nur eine Spur tiefer — und die Karten darin weiss, damit sie sich
   trotzdem abheben. */
body.hellmodus .licht{background:#eae6f5;color:var(--tx);
  --hell-tx:#1d1830;--hell-tx2:#514a68;--hell-bd:rgba(29,24,48,.12);--hell-karte:#ffffff}
body.hellmodus .licht .marke{color:#6d28d9}
body.hellmodus .paket{background:#ffffff;border-color:rgba(29,24,48,.12);
  box-shadow:0 2px 4px rgba(29,24,48,.04)}
body.hellmodus .paket.hervor{border-color:rgba(224,168,60,.75);
  box-shadow:0 0 0 1px rgba(224,168,60,.75),0 18px 44px rgba(224,168,60,.16)}
body.hellmodus .preis{color:#1d1830}
body.hellmodus .preis small,body.hellmodus .preis s{color:#6b6384}

/* Der Farbverlauf in der Ueberschrift: auf Weiss verschwindet die goldene Haelfte.
   Dieselbe Idee, nur in Toenen, die auf hellem Grund noch Farbe sind. */
body.hellmodus .verlauf{background:linear-gradient(92deg,#9a6b12 0%,#7a1fc4 62%,#6d28d9 100%);
  -webkit-background-clip:text;background-clip:text}

/* Schatten auf Hell sind grau, nicht schwarz — schwarze Schatten auf Weiss sehen aus wie
   Schmutz auf dem Bildschirm. */
body.hellmodus .codefenster{box-shadow:0 20px 50px rgba(29,24,48,.12)}
body.hellmodus .vsl{box-shadow:0 20px 50px rgba(29,24,48,.12)}
body.hellmodus .buchrahmen{border-color:rgba(29,24,48,.14);
  box-shadow:0 0 0 1px rgba(154,107,18,.10),0 0 70px -18px rgba(154,107,18,.28),
             0 22px 54px rgba(29,24,48,.14)}
body.hellmodus .buchkopf{background:#f3f1f9;color:var(--tx2);border-bottom-color:rgba(29,24,48,.10)}
/* Der Schein ueber dem Hero ist auf Dunkel Stimmung und auf Weiss ein Fleck. */
body.hellmodus .hero::before{opacity:.45}
body.hellmodus .sterne{background:#ffffff;border-color:rgba(29,24,48,.13)}
body.hellmodus footer{border-top-color:rgba(29,24,48,.10)}
/* Das Gruen der Aktionszeile ist auf Weiss zu blass. Dieselbe Farbe, eine Stufe tiefer. */
body.hellmodus .aktion{color:#15803d}
body.hellmodus .haken li::before{color:#15803d}

/* Der Aktionspreis. Ein durchgestrichener Preis daneben ist nur dann in Ordnung, wenn er
   auch wirklich gilt — deshalb steht darunter, WARUM er gerade guenstiger ist. */
.preis s{color:var(--hell-tx2);font-weight:700;opacity:.55;font-size:21px;margin-right:2px}
.aktion{font-size:12px;font-weight:700;color:#16a34a;margin:0 0 12px;line-height:1.45}
/* Die Aktionszeile des Premium-Pakets war golden — meine Entscheidung, wegen des Kontrasts
   auf Weiss (5,93:1 statt 3,30:1 in Gruen). Ty 17.09.2026: „This part should have the same
   color as … this green one."
   Seine Entscheidung, und sie hat ein gutes Argument: zwei Zeilen an derselben Stelle zweier
   nebeneinanderstehender Karten sagen dasselbe („darum ist es gerade guenstiger/mehr drin")
   — in zwei Farben liest man sie als zwei verschiedene Sorten Hinweis. Der Kontrast wird
   dabei nicht schlechter als der der gruenen Zeile daneben, die genau so schon dasteht.
   Die Klasse bleibt: sie ist der Haken, an dem eine kuenftige Sonderfarbe haengen wuerde. */
body.hellmodus .preis s{color:#a9a3c0}

/* ── DER VORHANG BEIM ÖFFNEN ──────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Die Aktuelle akibon.studio site hat btw so eine geile cleane Animation
   beim öffnen... bitte genauso beibehalten."
   Die Keyframes sind die des Originals, aus dessen Stylesheet ausgelesen: ein Vorhang, der
   sich hebt und dabei unten rund wird (ak-veil), das Zeichen darin (ak-veil-mark),
   Buchstaben, die von oben hereinfallen (ak-letter), ein Punkt, der von rechts oben
   angeflogen kommt (ak-dot), und eine Linie, die aufzieht (ak-rule).
   Die ZEITEN standen nicht im Stylesheet — die sind nachgebaut.
   Bewusst reines CSS mit `forwards`: faellt JavaScript aus, hebt sich der Vorhang trotzdem,
   und niemand steht vor einer schwarzen Flaeche. */
.vorhang{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;
  align-items:center;justify-content:center;pointer-events:none;
  animation:ak-veil 1.9s cubic-bezier(.76,0,.24,1) forwards}
.vorhang-inhalt{text-align:center;animation:ak-veil-mark 1.9s cubic-bezier(.76,0,.24,1) forwards}
.v-zeichen{width:62px;height:62px;margin:0 auto 18px;
  animation:ak-dot .9s cubic-bezier(.22,1,.36,1) .05s both}
.v-wort{display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:clamp(26px,5vw,42px);font-weight:800;letter-spacing:4px}
.v-wort span{display:inline-block;animation:ak-letter .72s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.18s + var(--n) * .055s)}
.v-punkt{width:9px;height:9px;border-radius:50%;background:var(--gold);display:block;
  margin-left:3px;animation:ak-dot .8s cubic-bezier(.22,1,.36,1) .5s both}
.v-linie{height:2px;width:min(220px,46vw);margin:16px auto 0;transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--lila));
  animation:ak-rule .6s cubic-bezier(.22,1,.36,1) .62s both}
@keyframes ak-veil{0%,54%{border-radius:0;transform:translateY(0)}
  to{border-radius:0 0 46% 46%/0 0 16% 16%;transform:translateY(-101%)}}
@keyframes ak-veil-mark{0%,50%{opacity:1;transform:none}64%,to{opacity:0;transform:translateY(-22px) scale(.97)}}
@keyframes ak-letter{0%{opacity:0;transform:translateY(-58px) rotate(-9deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes ak-dot{0%{opacity:0;transform:translate(34px,-44px) scale(.2)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes ak-rule{0%{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Der Inhalt kommt gestaffelt nach, sobald der Vorhang oben ist. */
.pop{opacity:0;animation:pop-in .62s cubic-bezier(.22,1,.36,1) calc(1.05s + var(--anim-delay,0s)) both}
@keyframes pop-in{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .vorhang,.vorhang-inhalt,.v-zeichen,.v-wort span,.v-punkt,.v-linie{animation:none!important}
  .vorhang{display:none}
  .pop{opacity:1;animation:none}
}
body.ruhig .vorhang{display:none}
body.ruhig .pop{opacity:1;animation:none}
/* ── „GANZ RUHIG" HEISST GANZ RUHIG ──────────────────────────────────────────────────────
   Ty 13.09.2026: „bei ganz ruhig sollte sich keine animation mehr bewegen... auch nicht
   die matrix beim drüber gehen."

   Bis hierher stand ueber die ganze Datei verteilt fuer jede Animation eine eigene
   Ausnahme — und genau daran ist es gescheitert: die beiden Animationen am VSL-Knopf
   standen in der Scroll-Pause-Liste, aber niemand hatte sie hier nachgetragen. Eine Liste,
   die man pflegen muss, ist irgendwann unvollstaendig. Eine Regel ist es nie.

   Die Ausnahmen darueber bleiben trotzdem stehen, und zwar aus einem Grund: `.pop` und
   `.auf-los` starten unsichtbar und werden erst durch ihre Bewegung sichtbar. Wer hier nur
   die Bewegung abschaltet, ohne dort die Sichtbarkeit zu setzen, hat eine sehr ruhige und
   sehr leere Seite. */
body.ruhig,body.ruhig *,body.ruhig *::before,body.ruhig *::after{animation:none!important}

/* ── Sprachumschalter, Paket-Gate, Upsell ───────────────────────────────────────────────── */
/* Im Kopf nur noch das Kuerzel — „Deutsch" war dort ein zweiter breiter Kasten neben dem
   Erstgespraech-Knopf und hat mit ihm um Aufmerksamkeit gestritten. Der volle Name steht
   weiterhin in der Kurzansicht und in der Fusszeile, wo Platz ist, und hier im title. */
/* ── DER SPRACHSCHALTER ──────────────────────────────────────────────────────────────
   Ty 08.10.2026: „Diese schalter ansicht finde ich perfekt bitte rsetze es über all."
   Dieselben Masse wie auf den Unterseiten (recht.css .sprache), damit es wirklich ein
   Bedienelement ist und nicht zwei, die sich aehneln. Hier stand vorher ein einzelner
   Knopf mit der ANDEREN Sprache — der sagt nicht, wo man gerade ist. */
.sprachschalter{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.025);
  border:1px solid var(--bd2);border-radius:99px;padding:5px 7px;flex-shrink:0}
.sprachschalter > span,.sprachschalter > a{position:relative;width:40px;height:34px;display:grid;place-items:center;
  font-size:12.5px!important;font-weight:800;letter-spacing:.4px;padding:0!important;border-radius:99px;
  color:var(--tx3);text-decoration:none;line-height:1!important;background:transparent!important;
  box-shadow:none!important;transform:none!important}
.sprachschalter > span[aria-current]{color:var(--tx)}
.sprachschalter > span[aria-current]::after{content:'';position:absolute;left:50%;bottom:4px;width:4px;height:4px;
  border-radius:50%;background:var(--gold);transform:translateX(-50%)}
.sprachschalter > a:hover{color:var(--tx)}
.sprachlink{border:1px solid var(--bd2);border-radius:9px}
.kopf .sprachlink{font-size:12.5px;letter-spacing:.5px;padding:8px 11px}
/* In der Leiste das Kuerzel, im aufgeklappten Menue das Wort — dort ist die Zeile so breit
   wie der Bildschirm, und ein einzelnes „DE" darin sieht nach abgeschnitten aus. Beides
   steht im HTML, weil CSS keinen Text austauscht; vorgelesen wird ohnehin das aria-label. */
.kopf .sprachlang{display:none}
.kopf nav.auf .sprachkurz{display:inline}
.kopf nav.auf .sprachlang{display:none}
.kopf nav.auf .sprachwahl{align-self:flex-start}
/* Die Fusszeile beider Karten reserviert dieselbe Hoehe — sonst haengt der Knopf an der
   Zeilenzahl des Textes darunter. Genau daran lagen die beiden Knoepfe 21 Pixel
   auseinander, obwohl die Karten schon gleich hoch waren: die eine Zeile brach um, die
   andere nicht. Und ob ein Satz umbricht, haengt an Sprache, Fenster und Schriftgroesse —
   also an nichts, worauf man bauen kann. */
.lieferung{margin:11px 0 0;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--hell-tx2);min-height:42px;line-height:1.6}
.lieferung::before{content:'✓ ';color:var(--gruen)}
/* Der Rahmen sieht aus wie ein Fenster der Seite, nicht wie ein fremder Kasten: gleicher
   Radius, gleiche Kante, eine kleine Kopfzeile darueber. Die Hoehe meldet die eingebettete
   Seite selbst (postMessage) — ein fest verdrahteter Wert waere in einer der beiden
   Sprachen immer falsch. */
.kontakt-oben{display:grid;gap:10px 44px;align-items:start;margin:30px 0 26px}
@media(min-width:760px){ .kontakt-oben{grid-template-columns:1fr auto;align-items:end} }
.kontakt-oben .haken{margin:0}
/* ── GALAXIE HINTER DEM KALENDER ─────────────────────────────────────────────────────────
   Ty 12.09.2026: „nicht nur glow aber auch so galaxy ambiente im hintergrund mit sternen
   und so."

   Drei Schichten, die zusammen Tiefe machen: ein Nebel aus weichen Farbflecken, ein feines
   Sternenfeld weit hinten und ein groeberes davor. Die beiden Felder ziehen unterschiedlich
   schnell in verschiedene Richtungen — dieselbe Bewegung, mit der ein Autofenster den
   Unterschied zwischen Zaun und Horizont zeigt. Ohne sie waeren es zwei Tapeten
   uebereinander.

   Bewegt wird per transform, nicht per background-position: transform laeuft auf der
   Grafikkarte, background-position zwingt bei jedem Bild ein Neuzeichnen der ganzen
   Flaeche. Die Schichten sind groesser als der Abschnitt, damit beim Ziehen nirgends eine
   Kante auftaucht. */
.sternenhimmel{position:relative;overflow:hidden}
.sternenhimmel > .mitte{position:relative;z-index:1}
/* ── KEINE KANTE, SONDERN EIN UEBERGANG ──────────────────────────────────────────────────
   Ty 12.09.2026: „Die transition in den galaxy abschnitt soll hier bitte mit fade sein,
   weil sonst kommt das zu random."
   Er hat recht, und es waren ZWEI Kanten, nicht eine: die Flaechenfarbe sprang von --bg auf
   --bg2, und der Sternenhimmel begann auf dem Pixel genau. Beides wird jetzt weich —
   die Farbe ueber einen Verlauf, die Galaxie ueber eine Maske, die sie oben einblendet und
   unten zum Fuss hin wieder ausblendet. Damit waechst der Himmel aus dem Abschnitt davor
   heraus, statt wie ein aufgeklebtes Bild anzufangen. */
.sternenhimmel{background:linear-gradient(to bottom,
  var(--bg) 0, var(--bg2) 220px, var(--bg2) calc(100% - 160px), var(--bg) 100%)}
.galaxie{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,1) 230px, rgba(0,0,0,1) calc(100% - 150px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,1) 230px, rgba(0,0,0,1) calc(100% - 150px), rgba(0,0,0,0) 100%)}
.nebel,.sternfeld{position:absolute;display:block}
.nebel{inset:-25%;
  background:
    radial-gradient(ellipse 42% 34% at 20% 16%,rgba(124,58,237,.26) 0%,transparent 62%),
    radial-gradient(ellipse 38% 30% at 80% 26%,rgba(224,168,60,.15) 0%,transparent 60%),
    radial-gradient(ellipse 56% 42% at 62% 92%,rgba(58,42,126,.30) 0%,transparent 66%)}
.sternfeld{inset:-30%;background-repeat:repeat;will-change:transform}
.sternfeld.fern{opacity:.55;animation:treiben 210s linear infinite}
.sternfeld.nah{opacity:.9;
  animation:treiben 130s linear infinite reverse,flimmern 8s ease-in-out infinite}
@keyframes treiben{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--akibon-star-dx,-7%),var(--akibon-star-dy,5%),0)}}
/* Ein leises Atmen der vorderen Schicht — echtes Funkeln je Stern waere eine Animation pro
   Stern, und davon gibt es 46. */
@keyframes flimmern{0%,100%{opacity:.9}50%{opacity:.62}}
/* ── DIE NEUN, DIE SICH BEWEGEN ──────────────────────────────────────────────────────────
   Ty 12.09.2026: „Nah... lass doch paar dynamisch."
   Teuer war nie die Bewegung, sondern die Flaeche darunter: zwei Ebenen von anderthalb
   Bildschirmen, dauerhaft befoerdert, die vordere mit animierter Deckkraft unter einer
   Maske. Neun Punkte von drei Pixeln kosten davon nichts — zusammen weniger Flaeche als
   ein Buchstabe. Die grossen Felder machen die Dichte, diese hier machen das Leben.
   Nur opacity und transform, nichts was ein neues Layout ausloest. */
.lebstern{position:absolute;display:block;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.5);
  animation:pulsstern var(--d,5s) ease-in-out var(--v,0s) infinite}
.lebstern.gold{background:var(--gold);box-shadow:0 0 7px 1px rgba(224,168,60,.55)}
@keyframes pulsstern{
  0%,100%{opacity:.16;transform:scale(.65)}
  50%    {opacity:1;transform:scale(1.25)}
}
body.ruhig .lebstern{animation:none}
@media(prefers-reduced-motion:reduce){ .lebstern{animation:none} }
body.ruhig .sternfeld{animation:none}
@media(prefers-reduced-motion:reduce){ .sternfeld{animation:none} }
/* Auf einer hellen Seite ist ein Sternenhimmel kein Ambiente, sondern Schmutz. */
body.hellmodus .galaxie{display:none}

.buchrahmen{position:relative;border:1px solid rgba(224,168,60,.34);border-radius:20px;
  overflow:hidden;background:var(--sur-voll);
  /* Drei Schatten uebereinander: ein haarfeiner goldener Rand, ein weiter weicher Schein
     darum, und darunter der normale Tiefenschatten.
     Ein eigener Kasten mit Farbverlauf waere die naheliegende Loesung gewesen — aber der
     Rahmen traegt overflow:hidden fuer die abgerundeten Ecken des Fensters, und das
     schneidet jedes Kind ab, auch eines, das nach aussen ragen soll. Schatten schneidet
     overflow nicht ab; deshalb machen sie hier die Arbeit. */
  box-shadow:0 0 0 1px rgba(224,168,60,.12),
             0 0 90px -10px rgba(224,168,60,.38),
             0 0 160px -40px rgba(224,168,60,.30),
             0 30px 70px rgba(0,0,0,.45)}
.buchkopf{display:flex;align-items:center;gap:9px;padding:13px 17px;font-size:13px;
  font-weight:800;color:var(--tx2);background:var(--sur2);
  border-bottom:1px solid rgba(224,168,60,.18)}
.punktchen{width:8px;height:8px;border-radius:50%;background:var(--gruen);flex-shrink:0;
  box-shadow:0 0 0 4px rgba(74,222,128,.16)}
/* Die Hoehe setzt der Kalender selbst per Nachricht; 620 ist nur der Wert fuer die
   Millisekunden davor. min-height verhindert, dass der Rahmen waehrend des Ladens auf
   Ladekreis-Groesse zusammenklappt — das ist Sache des Stylesheets, nicht einer
   Zahlengrenze im Skript, die sonst echte Meldungen mit wegwirft. */
.buchrahmen iframe{display:block;width:100%;border:0;height:620px;min-height:380px;
  background:var(--bg)}
/* Inhaltswachstum muss sofort Platz bekommen. Eine Hoehenanimation schneidet die letzte
   Kalenderreihe bis zum Animationsende ab und verschiebt die Fusszeile beim Scrollen. */

/* ── WAS AM TELEFON DAS SCROLLEN KOSTET ──────────────────────────────────────────────────
   Ty 12.09.2026: „Der Part ist immernoch extreeeeem laggy beim scrollen. Ich will null
   laggs."

   Beim ersten Anlauf hatte ich die Hoehenmeldung des Rahmens gedrosselt. Das war richtig,
   aber es war nicht die Hauptsache. In diesem einen Abschnitt stehen drei der teuersten
   Dinge, die eine Seite auf einem Telefon tun kann, uebereinander:

   1. ZWEI STERNFELDER mit `will-change:transform` und Dauer-Animation. `will-change`
      befoerdert beide auf eigene Compositor-Ebenen und HAELT sie dort — jede ist
      anderthalb Bildschirme gross. Die Bewegung selbst sind 7 % in 210 Sekunden: niemand
      sieht sie, jeder bezahlt sie. Die vordere Schicht flimmert zusaetzlich alle acht
      Sekunden die Deckkraft durch, und eine animierte Deckkraft auf einer Ebene unter
      einer Maske heisst: neu zusammensetzen, Bild fuer Bild.
   2. DIE MASKE der Galaxie. Sie bleibt — sie ist der weiche Uebergang, den Ty extra
      bestellt hat. Aber eine Maske ueber einer STEHENDEN Ebene wird einmal gerechnet,
      ueber einer laufenden bei jedem Bild.
   3. VIER SCHATTEN am Buchungsrahmen, zwei davon mit 90 und 160 Pixeln Weichzeichnung,
      auf einem Kasten, der ueber tausend Pixel hoch ist. Grossflaechige weiche Schatten
      sind auf Handy-GPUs mit das Teuerste ueberhaupt, und sie werden neu gezeichnet,
      waehrend der Kasten ins Bild faehrt.

   Die Sterne bleiben sichtbar, der Uebergang bleibt weich, der Rahmen behaelt seinen
   goldenen Rand. Nur die Bewegung und die Weichzeichnung fallen weg — auf 375 Pixel sieht
   man von einem 160-Pixel-Schein ohnehin fast nichts, vom Ruckeln aber alles. */
@media(max-width:760px){
  /* BEIDE Klassen ausschreiben. `.sternfeld.nah` ist spezifischer als `.sternfeld`, und
     ein @media erhoeht die Spezifitaet NICHT — gemessen lief die Animation nach dem ersten
     Anlauf munter weiter („treiben, flimmern"), obwohl die Regel dastand. Dieselbe Falle
     wie damals beim Fuss-Menue. */
  .sternfeld,.sternfeld.fern,.sternfeld.nah{animation:none;will-change:auto}
  .buchrahmen{box-shadow:0 0 0 1px rgba(224,168,60,.14),0 14px 34px rgba(0,0,0,.42)}
  /* Der Rahmen faerbt nur sich selbst — der Browser muss beim Scrollen nicht pruefen, ob
     etwas darin in den Rest der Seite hineinzeichnet. */
  .buchrahmen{contain:paint}
}

/* ── DER FUSS AM TELEFON ─────────────────────────────────────────────────────────────────
   Ty 12.09.2026: „Footer auf Handy ist Ass. Mach den ruhig bisschen tiefer gehende, damit
   du da Ordnung rein bringen kannst."

   Er hatte sechs gleich laute Links in zwei mittigen Reihen — eine Aufzaehlung, keine
   Ordnung, und „Terms & withdrawal" neben „Privacy" ohne jeden Hinweis, dass das eine
   Sorte ist. Ordnung braucht Ueberschriften, unter die etwas gehoert, und Platz, damit
   man sie sieht. Also: ein Kopf mit Namen und Satz, darunter zwei beschriftete Spalten,
   darunter durch eine Linie getrennt die Firmenzeile. Alles linksbuendig — mittig
   ausgerichtete Listen haben keine Kante, an der das Auge entlanglaufen kann. */
@media(max-width:860px){
  footer{padding:40px 0 calc(30px + env(safe-area-inset-bottom))}
  /* Zwei Spalten statt vier — und der Kopf nimmt die ganze Breite, sonst steht der Satz
     in einer 9-Zeichen-Saeule. */
  .fussreihe{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fusskopf{grid-column:1 / -1;gap:9px}
  .fussunten{grid-column:1 / -1;margin-top:0}
  .fusssatz{font-size:12.5px}
}

/* Solange der Finger zieht, steht die Deko still — siehe Modul 13 in seite.js.
   `animation-play-state` friert ein, statt zurueckzusetzen: kein Sprung beim Weiterlaufen. */
@media(max-width:760px){
  body.scrollt .magic,
  body.scrollt .vsl-glanz,
  body.scrollt .vsl-spielen,
  body.scrollt .stein,
  body.scrollt .codefenster.da,
  body.scrollt .lauf,
  body.scrollt .lebstern,
  body.scrollt .sternfeld{animation-play-state:paused}
}
.buchlink{display:block;padding:12px 17px;font-size:12px;color:var(--tx3);
  text-decoration:none;border-top:1px solid var(--bd);text-align:center}
/* Hat der Rahmen nach zwei Versuchen nicht geantwortet, ist dieser Link nicht mehr
   die Fussnote, sondern der Weg. Dann darf er auch so aussehen. */
.buchrahmen.nichtgeladen .buchlink{color:var(--goldtx);font-weight:800;font-size:13px;
  background:rgba(224,168,60,.10);border-top-color:rgba(224,168,60,.35)}
.buchlink:hover{color:var(--gold)}

.pakete.zwei{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:840px;margin-left:auto;margin-right:auto}
/* ACHTUNG, DIE REIHENFOLGE IST HIER ALLES.
   `display:flex` aus einer Autoren-Regel schlaegt das HTML-Attribut `hidden` — das setzt sein
   `display:none` naemlich nur in der Browser-Grundeinstellung, und die verliert gegen jede
   eigene Regel. Ergebnis: das Fenster lag bei JEDEM Aufruf der Startseite offen, obwohl im
   HTML `hidden` stand und `element.hidden` brav `true` meldete.
   Genau so ist es Ty passiert — er hat die Seite ueber seinen Instagram-Link geoeffnet und
   stand sofort vor dem Upsell. Mein Test hat es nicht gefunden, weil ich das ATTRIBUT
   abgefragt habe („hidden: true") statt dessen, was man SIEHT. Deshalb steht die Regel jetzt
   ueber dem display und mit !important — und die Pruefung unten misst den berechneten Wert. */
.upsell-grund[hidden]{display:none!important}
.upsell-grund{position:fixed;inset:0;z-index:120;background:rgba(6,4,12,.78);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;
  animation:hoch .3s var(--weich)}
.upsell{position:relative;width:min(420px,100%);max-height:88dvh;overflow:hidden;
  background:var(--sur-voll);border:1px solid var(--bd2);border-radius:20px;
  display:flex;flex-direction:column}
.upsell.breit{width:min(540px,100%)}
/* AM RECHNER BREITER — und die Breite ist gemessen, nicht geschaetzt.
   Ty 03.10.2026: „Auf dem Pc kann das ruhig breiter sein ... weil gerade ist viel unnoetig
   gequetscht." Live nachgemessen bei 1440 px Fenster: Stripes Bezahlfeld springt bei genau
   710 px Kastenbreite (= 652 px Feldbreite) in sein breites Raster — Kartennummer, Ablauf
   und Pruefziffer stehen dann NEBENEINANDER statt untereinander. Das spart 94 px Hoehe
   (Inhalt 1117 → 1024 px) und ist der ganze Unterschied zwischen „gequetscht" und nicht.
   Darunter aendert sich nichts: 540, 600 und 700 px ergeben alle dieselben 1117 px.
   Deshalb 720 und nicht 680 — 680 haette gar nichts gebracht. Breiter lohnt nicht: 800 px
   bringen keinen einzigen Pixel mehr.
   Unter 860 px Fenster bleibt es bei 540: dort IST kein Platz, und auf dem Telefon
   deckt ohnehin die 100 % ab. */
@media(min-width:860px){
  .upsell.breit{width:min(720px,100%)}
  .upsell.breit .upsell-roll{padding:30px 34px}
}
.upsell-roll{overflow-y:auto;padding:28px;overscroll-behavior:contain}
/* GEMESSEN STATT GESCHAETZT (Ty 02.10.2026: „viel davon ist extrem unleserlich farblich
   ... mach heller"). Auf dem Kastenhintergrund #171324 kam --tx3 auf 3,72:1 — unter den
   4,5:1, die kleiner Text braucht. --tx2 liegt bei 7,5:1 und bleibt trotzdem sichtbar
   zweitrangig gegenueber dem Weiss. */
.upsell .danach{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--tx2);
  border-top:1px solid var(--bd);padding-top:14px}
/* Beschriftungen ueber den Feldern — dieselbe Messung, derselbe Grund. */
.upsell label{color:var(--tx2)}
/* Die vier Beschriftungen im ersten Schritt — vorher trugen zwei davon ihre Stile inline,
   und die neuen haetten sie wiederholen muessen. Eine Klasse, eine Wahrheit. */
.kasselabel{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.kasselabel.oben{margin-top:14px}
/* E-Mail und Telefon nebeneinander, aber erst wenn der Kasten breit genug ist (dieselbe
   Schwelle wie .upsell.breit). Darunter untereinander — zwei halbe Felder auf einem Telefon
   waeren schmaler als die Platzhalter darin. */
.kassepaar{margin-top:14px;display:grid;gap:12px}
.kassepaar .kasselabel,.kassepaar label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.kassepaar input{width:100%}
@media(min-width:860px){ .kassepaar{grid-template-columns:1fr 1fr;gap:14px} }
.upsell h3{font-size:21px;letter-spacing:-.6px;margin-bottom:2px}
.upsell .haken li{color:var(--tx2)}
.upsell-zu{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--tx3);
  font-size:17px;cursor:pointer;line-height:1;padding:4px}
.upsell-zu:hover{color:var(--tx)}


/* ── DIE GANZE SEITE AUF DEM TELEFON ─────────────────────────────────────────────────────
   Ty 12.09.2026: „Full size Handy Ansicht ist extrem haesslich. Nichts ist schoen alligned
   und uebersichtlich. Wenn du schon sagst es ist fast schon ein muss auch die ganze Seite
   bei Handy anzeigbar zu machen, dann halte dich da trotzdem so simplistic wie moeglich
   und so Clean wie moeglich."

   Es war keine einzelne kaputte Stelle. Gemessen auf 375 px brachte jeder Abschnitt seine
   eigene Ordnung mit: Gruenderkarten mit Bild links und einer 190-px-Textspalte daneben,
   Caller-Karten mittig statt links, der Prozess 46 px eingerueckt waehrend alles andere bei
   20 px beginnt, Fliesstext mal 15,5 mal 14,5 mal 14 px, Karten mal 22 mal 26 px gepolstert.
   Am Rechner traegt die Breite diese Unterschiede. Auf einer Handbreit sieht man nur noch
   Kanten, die nicht uebereinander liegen — genau das, was Ty „nicht alligned" nennt.

   Diese Schicht macht daraus EINE Ordnung: eine linke Kante, eine Textgroesse, ein
   Kartenmuster fuer Menschen, und Deko, die auf einem Telefon nichts mehr erklaert, bleibt
   aus. Sie gilt nur hier — am Rechner bleibt alles, wie es ist. */
@media(max-width:760px){
  /* Ty: „Haesslich und unnoetig auf Handy." Vier Kennzahlen, die auf dem Telefon in zwei
     krumme Spalten fallen und zwischen Kopf und Angebot nichts entscheiden. */
  .zahlen{display:none}

  /* Ein Kartenmuster fuer Menschen: Bild und Name in einer Zeile, Text darunter ueber die
     volle Breite. Vorher lief der Text in einer 190-px-Spalte neben dem Bild — sieben
     Woerter pro Zeile, jede anders lang. */
  /* Auf dem Telefon bleibt das Bild oben und gross ueber der ganzen Breite — daneben
     waere der Textstreifen keine 180 Pixel breit. */
  .person{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:'bild' 'kopf' 'text';row-gap:15px;align-items:start}
  /* Auf dem Telefon steht das Bild ueber dem Text, nicht daneben — begrenzt, damit ein
     Portraet nicht den halben Bildschirm fuellt. Beschnitten wird auch hier nichts. */
  .person img,.person .monogramm{max-width:300px;border-radius:15px}
  .person .rolle{margin-bottom:0}
  .person .etiketten{padding-top:13px}

  /* Die Caller standen als Einzige mittig. Ein Portraet in Briefmarkengroesse mit dem Namen
     daneben reiht sich in dieselbe linke Kante ein wie die Gruender. */
  .caller{text-align:left;align-items:stretch;padding-top:22px}
  .caller img,.caller .monogramm{width:58px;height:58px;margin:0 0 12px;box-shadow:none}
  .caller .monogramm{font-size:22px}
  .caller .zuege{justify-content:flex-start}
  .caller .wesen{font-size:15px}
  /* Die schwebenden Steine gehoeren absichtlich ueber den Kartenrand hinaus. Auf 375 px
     liegen sie stattdessen im Text und sehen aus wie graue Flecken. Der Wellenring war auf
     das grosse, mittige Portraet gerechnet und stand jetzt als leerer Kreis daneben. */
  .steine,.umPortraet{display:none}

  /* Eine Textgroesse im Fliesstext, ein Polster in jeder Karte. */
  .pakettext{font-size:15px}
  .karte{padding:20px}
  .paket{padding:20px}
  .paket .band{left:20px}
  /* Die laengste Codezeile war 41 Zeichen breit und lief rechts aus dem Bild. Kleiner
     gesetzt passt sie hinein, statt scheinbar abgeschnitten zu sein. */
  pre{font-size:11px;padding:16px 14px;line-height:1.8}
  /* Gleicher Abstand ueber und unter JEDEM Abschnitt — vorher rechnete clamp() sich je
     nach Bildschirmbreite etwas anderes aus. */
  section{padding:58px 0}
}


/* ── „IHRE IDEE" ────────────────────────────────────────────────────────────────────────
   Stichworte, keine Karten. Karten haetten hier eine Ordnung behauptet, die es nicht gibt:
   „Shop" und „Dinge, die es so noch nicht gibt" sind nicht dieselbe Sorte Sache, und acht
   gleich grosse Kaesten haetten genau das behauptet. Als Reihe von Etiketten liest man sie
   in drei Sekunden quer — und darum geht es: die Liste soll nicht vollstaendig wirken,
   sondern zeigen, wie weit das Feld ist. */
/* ── DAS LAUFENDE BAND ───────────────────────────────────────────────────────────────
   Ty 09.10.2026: „kannst du nicht machen dass das so eine animierte dauerschleife Linie
   wird horizontal wo die sachen stehen, anstatt so ein kategorie block?"

   Eine Aufzaehlung, die steht, liest man einmal und haelt sie fuer vollstaendig. Eine,
   die laeuft, liest man beilaeufig und versteht „und so weiter" — genau die Aussage des
   Abschnitts.

   Die Eintraege stehen zweimal im Band; bei -50 % sieht es aus wie bei 0 %, der Sprung
   zurueck ist unsichtbar. Abstand ueber margin-right statt gap, SONST STIMMEN DIE 50 %
   NICHT: `gap` setzt zwischen die beiden Haelften einen weiteren Abstand, und das Band
   ruckelt bei jedem Durchlauf einmal.
   Die Raender laufen weich aus, damit nichts an der Kante aufpoppt. */
.wunschband{position:relative;margin:26px 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
.wunschzug{display:flex;width:max-content;list-style:none;padding:0;margin:0;
  animation:wunschlauf 38s linear infinite}
.wunschzug li{flex:0 0 auto;margin-right:9px;padding:8px 15px;
  border:1px solid var(--bd2);border-radius:99px;background:var(--sur2);
  font-size:13.5px;font-weight:700;color:var(--tx2);letter-spacing:.1px;white-space:nowrap}
@keyframes wunschlauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Wer mit der Maus draufgeht, will lesen — dann haelt es an. */
.wunschband:hover .wunschzug{animation-play-state:paused}
body.ruhig .wunschzug{animation:none}
@media(prefers-reduced-motion:reduce){ .wunschzug{animation:none} }

/* ── DER EINE, DER ETWAS VERSPRICHT ──────────────────────────────────────────────────
   Ty: „Nur der darf extra und der soll durch diesen Magic Button beworben werden."
   Er zaehlt nichts auf, also laeuft er auch nicht mit. Er steht still, in Gold, und ist
   als Einziger zu druecken — der Beweis liegt im Druck, nicht im Text daneben. */
.wunschmagiezeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 0}
.wunschmagie{display:inline-block;text-decoration:none;padding:9px 17px;border:1px solid rgba(224,168,60,.5);border-radius:99px;
  background:rgba(224,168,60,.07);color:var(--goldtx);font-size:13.5px;font-weight:800;
  letter-spacing:.1px;cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s,transform .2s var(--weich)}
.wunschmagie:hover{background:rgba(224,168,60,.16);border-color:var(--gold);
  transform:translateY(-1px)}
.wunschmagie:active{transform:translateY(0)}
.wunschmagie:focus-visible{outline:2px solid var(--akz2);outline-offset:3px}
.wunschmagiehinweis{font-size:12.5px;color:var(--tx3)}
.wunschpaar{display:grid;gap:18px;margin-top:30px;max-width:900px}
@media(min-width:860px){ .wunschpaar{grid-template-columns:1fr 1fr;gap:30px} }
/* Ty 17.09.2026: „mach den button bisschen höher. da ist doch Platz, dass er aligned mit
   der orangen Box tiefsten Stelle ist." Die Spalte ist so hoch wie die Zeile, also so hoch
   wie der Kasten daneben; `margin-top:auto` legt den Knopf auf ihren Boden. Unter 860 px
   steht ohnehin alles untereinander — dort waere das Ausrichten sinnlos, und der Knopf
   folgt einfach dem Text. */
.wunschlinks{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(min-width:860px){ .wunschlinks > .knopf{margin-top:auto} }
.wunschvage,.wunschbeweis{margin:0;font-size:14.5px;line-height:1.7;color:var(--tx2)}
/* Der Beweis steht in einem eigenen Kasten mit goldener Kante: er ist die einzige Stelle
   des Abschnitts, an der der Leser etwas TUN soll — nach oben greifen und draufdruecken. */
.wunschbeweis{padding:15px 17px;border-radius:15px;border:1px solid rgba(224,168,60,.3);
  background:rgba(224,168,60,.05)}
/* Ty 09.10.2026: „Und auf Handy brauchen wir das nicht. Weg mit dem kasten."
   Der Kasten verweist auf den Magic Button oben im Menue — und genau das Menue gibt es
   auf dem Handy jetzt nicht mehr. Ein Beweis, auf den man nicht drucken kann, ist keiner. */
@media(max-width:760px){ .wunschbeweis{display:none} }
.wunschbeweis b{color:var(--goldtx)}
body.hellmodus .wunschzug li{background:#fff;border-color:rgba(29,24,48,.12);color:#3c3557}
body.hellmodus .wunschbeweis{background:rgba(224,168,60,.10);border-color:rgba(224,168,60,.4)}


/* ── DIE SPUR ZUM MAGIC BUTTON ──────────────────────────────────────────────────────────
   Eine feste Flaeche ueber der ganzen Seite, aber UNTER der Kopfzeile (z-index 70): die
   Spur endet damit sichtbar knapp unter dem Rand und zeigt von dort hinauf. Wuerde sie
   darueber liegen, liefe sie ueber die Navigation hinweg — und eine Linie quer durch das
   Menue sieht nach Fehler aus, nicht nach Hinweis.
   pointer-events bleibt aus: die Spur ist ein Hinweis, kein Gegenstand. */
/* UEBER der Kopfzeile (die liegt auf 70), nicht darunter: nur so kann die Spitze den Knopf
   wirklich beruehren. Darunter endete sie am unteren Rand der Leiste, und zwischen Spitze
   und Knopf blieb eine Luecke — Ty 17.09.2026: „zeigt der pfeil nicht genau auf den magic
   button". Klicks faengt sie keine ab (pointer-events:none), die Navigation bleibt also
   vollstaendig bedienbar. */
.magicspur{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none;
  opacity:0;transition:opacity .5s var(--weich)}
.magicspur.da{opacity:1}
/* ── DIE STARTRAMPE ────────────────────────────────────────────────────────────────────
   Ty 17.09.2026, mit einem Bild eines Raketenstartplatzes: „Bau hier einen schöneren Ort wo
   er startet... so mässig an die rechte seite der Box soll eine Raketen start gestell
   stabil ding sein. Und dann mach dass der pfeil daraus startet."
   Sie steht leiser da als die Spur selbst — ein Geruest ist der Hintergrund, nicht die
   Handlung. Deshalb duenner und halb so kraeftig; sonst faellt der Blick auf das Gestell
   statt auf den Weg, den es zeigt. */
.magicspur-rampe{stroke:var(--gold);stroke-width:1.6;opacity:.45;
  stroke-linecap:round;stroke-linejoin:round}
/* Die Startrampe sitzt am Kasten statt in der fixierten Flugbahn: native
   Scrollbewegung ohne einen Frame Verzoegerung durch requestAnimationFrame. */
.wunschbeweis{position:relative}
.magicspur-rampentraeger{position:absolute;right:0;top:0;width:1px;height:1px;
  overflow:visible;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .5s var(--weich)}
.magicspur-rampentraeger.da{opacity:1}
@media(max-width:939px){.magicspur-rampentraeger{display:none}}
@media(prefers-reduced-motion:reduce){.magicspur-rampentraeger{transition:none}}
body.hellmodus .magicspur-rampe{stroke:#b07d17}

.magicspur-linie{stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  /* Ein durchgezogener goldener Strich quer ueber den Bildschirm waere ein Balken. Leicht
     gestrichelt und halb durchsichtig wird daraus eine Spur — Ty: „dezent". */
  opacity:.5;filter:drop-shadow(0 0 6px rgba(224,168,60,.45))}
/* Die Spitze ist eine FLAECHE, kein Strich — zwei duenne Linien in Linienstaerke sehen
   aus wie ein Knick, nicht wie ein Pfeil. */
/* Das Schiff ist von Anfang an da — es faehrt die Spur ab, statt am Ende einzublenden
   (Ty: „immer sichtbar von sekunde 1"). Die ganze Flaeche blendet ohnehin gemeinsam ein. */
.magicspur-spitze{fill:var(--gold);stroke:none;
  filter:drop-shadow(0 0 6px rgba(224,168,60,.45))}
body.hellmodus .magicspur-spitze{fill:#b07d17}
body.hellmodus .magicspur-linie,body.hellmodus .magicspur-spitze{stroke:#b07d17}
/* Sie haengt am <body> und nicht mehr in <main> (siehe website_bauen.py) — sonst macht
   der Graufilter auf <main> sie zu einem Kind des Dokuments statt des Fensters, und sie
   scrollt mit. Grau muss sie in dieser Vorlage trotzdem werden, sonst leuchtet als
   einziges Ding auf einer schwarzweissen Seite eine goldene Linie. */
body.grau .magicspur{filter:grayscale(1)}
@media(max-width:939px){ .magicspur{display:none} }
@media(prefers-reduced-motion:reduce){ .magicspur{transition:none} }

/* ── UND OBEN MELDET SICH DER KNOPF ────────────────────────────────────────────────────
   Ty 17.09.2026: „Irgendwie ist hier dieser effect den der hat nicht richtig zentriert und
   so... Und ich will dass der effect ähnlich ist vom feeling, wie dieses sternen design
   hier unten."

   Der erste Anlauf war ein pulsender KASTEN hinter dem Wort plus zwei Funken in den Ecken.
   Beides war falsch. Der Kasten sass am Knopfrechteck, die Funken an dessen Ecken — also
   sichtbar „an etwas geheftet" statt um das Wort herum; genau das meint „nicht zentriert".
   Und ein pulsendes Rechteck fuehlt sich an wie eine Benachrichtigung, nicht wie Magie.

   Das Sternenfeld unten im Kontaktabschnitt macht es anders und besser: kleine Punkte in
   unterschiedlicher Helligkeit, die ruhig glimmen, auf einem weichen Schein. Genau das
   steht jetzt hier — nur klein und um ein Wort herum statt um einen Abschnitt.

   ZENTRIERT IST ES DURCH BAUART, nicht durch Nachmessen: der Traeger der Sterne ist ein
   winziger Punkt auf 50% / 50%, und die Sterne sind seine Schlagschatten. Wo der Knopf
   steht und wie breit er ist (deutsch ist er breiter als englisch), spielt damit keine
   Rolle mehr. */
@keyframes magiclockt{
  0%,100%{color:var(--tx);text-shadow:0 0 8px rgba(167,139,250,.45),0 0 18px rgba(224,168,60,.22)}
  50%{color:#fff;text-shadow:0 0 12px rgba(167,139,250,.85),0 0 26px rgba(224,168,60,.55)}
}
/* Die Sterne glimmen, sie blinken nicht: unter einer halben Sekunde wirkt es nervoes, und
   das Vorbild unten atmet langsam. */
@keyframes magicglimmen{ 0%,100%{opacity:.4} 50%{opacity:1} }
/* DIE VERSCHIEBUNG MUSS IN JEDEM SCHRITT MITSTEHEN.
   Ty 17.09.2026: „wieso ist die aura vom button nicht auf dem button, sondern rechts unten
   neben dem button" — genau hier stand der Fehler. Der Schein wird mit
   `left:50%; top:50%; transform:translate(-50%,-50%)` zentriert; sobald aber eine Animation
   `transform` anfasst, ERSETZT sie den Wert vollstaendig. Waehrend sie lief, war die
   Zentrierung also weg, und der Kasten hing mit seiner linken oberen Ecke in der Mitte des
   Knopfes — sichtbar nach rechts unten versetzt, genau wie auf seinem Bildschirmfoto. */
@keyframes magicnebel{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}
}
.magic.lockt{animation:magiclockt 2.6s ease-in-out infinite}
/* Der Traeger sitzt in der Mitte; die Sterne sind Schlagschatten mit Abstand. Zwei
   Groessen und drei Farben — gleich grosse, gleich helle Punkte sehen aus wie ein Raster,
   nicht wie ein Himmel. */
.magic.lockt::before{content:'';position:absolute;left:50%;top:50%;width:2px;height:2px;
  margin:-1px 0 0 -1px;border-radius:50%;background:rgba(255,255,255,.9);
  pointer-events:none;
  box-shadow:
    -66px -13px 0 rgba(255,255,255,.85), 62px -15px 0 rgba(224,168,60,.9),
    -47px 15px 0 rgba(255,255,255,.5),   50px 17px 0 rgba(167,139,250,.85),
    -74px 5px 0 rgba(224,168,60,.5),     72px 3px 0 rgba(255,255,255,.55),
    -24px -21px 0 rgba(255,255,255,.4),  28px 20px 0 rgba(255,255,255,.45),
    -8px 22px 0 rgba(224,168,60,.4),     14px -22px 0 rgba(167,139,250,.5);
  animation:magicglimmen 2.6s ease-in-out infinite}
/* Der Schein dahinter — rund, weich, ohne Kante. Deshalb ein Farbverlauf und kein Kasten:
   eine sichtbare Kante war der halbe Grund, warum der erste Anlauf „nicht zentriert"
   aussah. */
.magic.lockt::after{content:'';position:absolute;left:50%;top:50%;width:150%;height:260%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(224,168,60,.22),rgba(130,60,200,.13) 55%,
    rgba(130,60,200,0) 75%);
  animation:magicnebel 3.4s ease-in-out infinite}
body.ruhig .magic.lockt,body.ruhig .magic.lockt::before,body.ruhig .magic.lockt::after{animation:none}
body.ruhig .magic.lockt{color:var(--tx);text-shadow:0 0 10px rgba(224,168,60,.5)}
@media(prefers-reduced-motion:reduce){
  .magic.lockt,.magic.lockt::before,.magic.lockt::after{animation:none}
  .magic.lockt{color:var(--tx);text-shadow:0 0 10px rgba(224,168,60,.5)}
}


/* ── DER UMRECHNER AUF DEM HELLEN ABSCHNITT ─────────────────────────────────────────────
   Ty 17.09.2026: „die Farbgestaltung des Umrechners ist im normalen Modus furchtbar. Nur in
   allen anderen Magic-Button-Varianten stimmt sie."

   Er hat genau die Stelle getroffen, und der Grund ist ein Denkfehler von mir: die Pakete
   stehen in einem HELLEN Abschnitt (.licht) auf einer dunklen Seite. Der Umrechner nimmt
   aber die normalen Farbwerte — var(--sur2), var(--bd2), var(--tx3) —, und die sind fuer
   dunklen Grund gemacht. Ergebnis: ein schwarzer Kasten auf einer weissen Karte, und die
   Kurszeile grau auf grau, also unlesbar.
   In der Variante „Tageslicht" faellt es nicht auf, weil dort die Farbwerte der GANZEN Seite
   hell sind — deshalb sah es ueberall richtig aus, nur im Normalzustand nicht.

   Deshalb greift das hier ausdruecklich NUR ausserhalb des hellen Modus: dort ist es
   bereits richtig, und eine Regel mit hoeherer Spezifitaet wuerde genau das kaputtmachen,
   was Ty als „perfekt" bezeichnet hat. */
/* ── UND NUR DORT, WO DER HELLE ABSCHNITT AUCH HELL IST ────────────────────────────────
   Ty 17.09.2026: „Remember when I told u that everywhere else on magic buttons variations
   the currency converter looks perfect? Well... not anymore."

   Mein Fehler, und ein lehrreicher: ich habe `hellmodus` ausgenommen und geglaubt, damit
   sei „alles ausser dem Normalzustand" erledigt. „Kinofilm" macht aber dasselbe von der
   anderen Seite — es faerbt die Seite warm UND definiert die hellen Farbwerte um:
   --hell wird #1a1410, --hell-tx wird #f7eee0. Der „helle" Abschnitt ist dort also DUNKEL
   mit heller Schrift. Meine Regel hat ihm ein weisses Feld verpasst und die Schrift aus
   genau diesem Farbwert geholt: weisser Kasten, fast weisse Schrift. Unlesbar.

   Ausgenommen wird deshalb jede Vorlage, die an den --hell-Werten dreht. Was die Karte
   traegt, holt das Feld ab jetzt zusaetzlich aus --hell-karte statt aus einem festen Weiss —
   dann folgt es der Vorlage von selbst, falls spaeter eine dazukommt. */
body:not(.hellmodus):not(.kino) .licht .umrechnknopf{border-color:var(--hell-bd);color:var(--hell-tx2)}
body:not(.hellmodus):not(.kino) .licht .umrechnknopf:hover,
body:not(.hellmodus):not(.kino) .licht .umrechnknopf.offen{border-color:rgba(176,125,23,.55);color:#8a5a00;
  background:rgba(224,168,60,.14)}
/* Kein reines Weiss fuer das Feld: die Karte darunter IST weiss, ein weisser Kasten darauf
   waere kein Kasten. Ein Hauch der Seitenfarbe genuegt, damit man die Kante sieht. */
body:not(.hellmodus):not(.kino) .licht .umrechnfeld{background:rgba(20,16,32,.045);
  border-color:var(--hell-bd)}
body:not(.hellmodus):not(.kino) .licht .umrechnwahl{background:var(--hell-karte,#fff);
  border-color:var(--hell-bd);color:var(--hell-tx)}
body:not(.hellmodus):not(.kino) .licht .umrechnwert{color:#8a5a00}
body:not(.hellmodus):not(.kino) .licht .umrechnfuss{color:var(--hell-tx2)}

/* ══ VORLAGEN ══════════════════════════════════════════════════════════════════════════
   Ty 04.10.2026: „Dieser Bereich soll für die Templates sein. Mach es anklickbar. und
   jedes Template hat seine eigene Unterseite wo alles erklärt wird was es so gut macht."

   DIE GANZE KARTE IST DER LINK. Nicht das Bild, nicht die Ueberschrift, nicht ein Knoepfchen
   unten rechts — wer eine Karte anschaut, zielt irgendwohin darauf, und jedes Mal danebenzu-
   treffen ist das, was sich kaputt anfuehlt. */
.vorlagen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.vorlage{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--sur-voll);border:1px solid var(--bd2);border-radius:20px;overflow:hidden;
  transition:transform .35s var(--weich),border-color .25s,box-shadow .35s var(--weich)}
.vorlage:hover{transform:translateY(-4px);border-color:var(--bd3);
  box-shadow:0 22px 50px rgba(0,0,0,.45)}
.vorlbild{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg3)}
.vorlbild img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  transition:transform .5s var(--weich)}
.vorlage:hover .vorlbild img{transform:scale(1.04)}
.vorlrumpf{display:flex;flex-direction:column;gap:7px;padding:20px 21px 22px}
.vorlname{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--tx)}
.vorlkurz{font-size:14px;line-height:1.6;color:var(--tx2)}
.vorlmehr{margin-top:6px;font-size:13px;font-weight:800;color:var(--goldtx)}
.vorlage:hover .vorlmehr{text-decoration:underline}

/* Die Konzeptstudien stehen jetzt UNTER den Vorlagen und eine Stufe leiser — sie sind
   Handwerksproben, keine Kunden. Steht die Unterscheidung nicht im Layout, behauptet die
   Seite etwas, das nicht stimmt. */
.studienh{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.6px;margin:0 0 4px}
.studien{opacity:.92}

/* ── DIE VORLAGEN-SEITE ──────────────────────────────────────────────────────────────── */
.vorlseite .kopf{position:sticky;top:0}
.zurueck{display:inline-block;margin-bottom:18px;font-size:13px;font-weight:700;
  color:var(--tx2);text-decoration:none}
.zurueck:hover{color:var(--goldtx)}
.vorlfuer{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--tx2);max-width:60ch}
.vorlfuer b{color:var(--tx)}
.vorlknoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* ── BEWERTUNGEN ────────────────────────────────────────────────────────────────────
   Ty 09.10.2026: „soll geil designed sein premium... keine unnötig vielen rounded cornes"

   Deshalb steht hier KEIN einziges border-radius. Was den Abschnitt gliedert, sind eine
   Haarlinie und ein senkrechter Goldstrich — und die Schriftgroesse. Ein Zitat in
   Ueberschriftengroesse ist selbstbewusst; dasselbe Zitat in einer abgerundeten Karte
   sieht aus wie ein Bauteil aus einem Baukasten.

   Die Zahl steht gross und ist anklickbar: wer 5,0 behauptet, muss den Beleg danebenlegen. */
.bewkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;
  padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--bd)}
.bewnote{display:inline-flex;align-items:baseline;gap:11px;text-decoration:none;
  margin-left:auto}
.bewzahl{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-1.3px;
  color:var(--tx);line-height:1}
.bewsterne{color:var(--gold);letter-spacing:2.5px;font-size:14px;white-space:nowrap}
.bewwo{font-size:13px;font-weight:700;color:var(--tx3)}
.bewnote:hover .bewwo{color:var(--tx2)}

/* Zitat und Beleg nebeneinander — ab 900 px, darunter untereinander. Das Zitat bekommt
   mehr Platz: es ist die Aussage, der Film ist der Beweis. */
.bewpaar{display:grid;gap:clamp(26px,3.5vw,54px);align-items:start;
  margin-top:clamp(30px,4vw,54px)}
@media(min-width:900px){ .bewpaar{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.bewgross{margin:0;padding-left:clamp(18px,2.4vw,32px);border-left:2px solid var(--gold)}
.bewfilm{margin:0}
/* Keine Rundung, kein Rahmen — eine Haarlinie genuegt, damit das Weiss des Videos nicht
   ohne Kante im Dunkeln endet. */
.bewfilm video{display:block;width:100%;height:auto;border:1px solid var(--bd2)}
.bewfilm figcaption{margin-top:10px;font-size:12.5px;color:var(--tx3)}
/* Der Ruf direkt unter dem Ausschnitt. Eckig, wie alles hier — und als einziges
   gefuelltes Element im Abschnitt hat er die Aufmerksamkeit ganz fuer sich. */
.bewlust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 0}
.bewlust > span{font-size:15px;font-weight:800;color:var(--tx)}
.bewlustknopf{display:inline-block;padding:11px 20px;background:var(--gold);color:#121014;
  font-size:14px;font-weight:800;text-decoration:none;line-height:1.1;
  transition:background .18s,transform .18s var(--weich)}
.bewlustknopf:hover{background:var(--gold-hell);transform:translateY(-1px)}
.bewlustknopf:focus-visible{outline:2px solid var(--akz2);outline-offset:3px}
.bewkern{margin:0;max-width:16ch;font-size:clamp(26px,3.7vw,48px);line-height:1.1;
  letter-spacing:-1.3px;font-weight:800;color:var(--tx)}
.bewtext{margin:clamp(18px,2vw,26px) 0 0;max-width:62ch;
  font-size:clamp(15px,1.3vw,17.5px);line-height:1.68;color:var(--tx2)}
/* Fett UND heller, nicht in Gold: sieben goldene Stellen in einem Absatz waeren ein
   Textmarker-Unfall, und hervorgehoben ist nur, was sich vom Rest abhebt. Das Gold traegt
   die grosse Zeile darueber — zweimal dieselbe Farbe im selben Block nimmt beiden die
   Wirkung. */
.bewhoch{font-weight:700;color:var(--tx)}
.bewwer{margin-top:clamp(18px,2vw,26px);display:flex;align-items:center;gap:14px}
/* Quadratisch, nicht rund: im ganzen Abschnitt gibt es keine Rundung, und ein eckiges
   Portraet neben einem eckigen Zitatstrich sieht redaktionell aus statt nach Profilbild
   in einem Forum. */
.bewbild{width:56px;height:56px;flex-shrink:0;object-fit:cover;display:block;
  border:1px solid var(--bd2)}
.bewwerzeile{display:flex;flex-direction:column;gap:3px;min-width:0}
/* Die Zeile fuehrt zum Google-Eintrag. Kein Knopf und keine Unterstreichung im Ruhezustand
   — sie soll wie eine Bildunterschrift aussehen und sich erst beim Darueberfahren als Weg
   zu erkennen geben. */
.bewwerlink{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.bewwerlink:hover .bewname{color:var(--goldtx)}
.bewwerlink:hover .bewbild{border-color:var(--gold)}
.bewbild{transition:border-color .2s}
.bewwerlink:focus-visible{outline:2px solid var(--akz2);outline-offset:4px}
.bewname{font-size:15.5px;font-weight:800;color:var(--tx);letter-spacing:-.1px}
.bewrolle{font-size:13px;color:var(--tx3)}

/* Ab der zweiten Bewertung: eine Reihe darunter, getrennt durch Haarlinien statt Karten. */
.bewklein{margin:clamp(26px,3vw,40px) 0 0;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--bd)}
.bewklein blockquote{margin:10px 0 0;max-width:58ch;font-size:15px;line-height:1.66;color:var(--tx2)}
.bewklein figcaption{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}

.bewweg{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(26px,3vw,40px)}
/* Links statt Knoepfe: ein Knopf verspricht eine Handlung auf DIESER Seite, hier geht es
   nach draussen. Und ein Knopf braechte die Rundung zurueck, die hier nicht hingehoert. */
.bewweg a{font-size:14px;font-weight:800;color:var(--goldtx);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .2s}
.bewweg a:hover{border-bottom-color:currentColor}
@media(max-width:560px){
  .bewnote{margin-left:0;width:100%}
  .bewkern{max-width:none}
}

/* ── DIE GALERIE: ZWEI ZONEN STATT EINER ────────────────────────────────────────────
   Ty 08.10.2026: „Screenshot 3 anordnung ist extrem weird" und „Und Handy version hat
   nicht mal Handyform".
   Beides war derselbe Fehler: VIER Bilder in einem auto-fit-Raster, von denen eines
   hochkant ist. Drei passten nebeneinander, das vierte stand allein darunter wie ein
   Nachtrag — und weil alle dieselbe Regel teilten, wurde das Handy-Bild mit
   `max-height:420px` und `cover` quer beschnitten statt hochkant gezeigt.
   Jetzt: die drei breiten in einer eigenen Reihe, das Handy unten in seiner echten Form. */
/* ── DIE KASSE AUF DEM TELEFON: ZWEI SCHRITTE ───────────────────────────────────────
   Ty 08.10.2026: „Du überforderst Leute sonst."
   Auf dem Rechner bleibt alles untereinander — dort ist ein zusaetzlicher Klick
   schlechter als ein laengeres Formular. Die Trennung haengt deshalb an der
   Medienabfrage und nicht am Markup: wer das Geraet dreht, bekommt sofort die
   passende Fassung, ohne dass etwas neu geladen wird. */
#kasse-teil-weiter,.kassezurueck{display:none}
.kassezurueck{background:none;border:none;padding:0 0 12px;cursor:pointer;
  color:var(--tx3);font-size:13px;font-weight:700;font-family:inherit}
.kassezurueck:hover{color:var(--tx)}
@media(max-width:680px){
  #kasse-wer:not(.teil2) .kasseteil2{display:none}
  #kasse-wer:not(.teil2) #kasse-teil-weiter{display:block}
  #kasse-wer.teil2 .kasseteil1{display:none}
  #kasse-wer.teil2 .kassezurueck{display:block}
}
.vorlschuesse{display:grid;gap:18px;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vorlschuss{margin:0}
.vorlschuss img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center top;
  display:block;border-radius:16px;border:1px solid var(--bd2)}

/* ── DAS HANDY UND DER QR-CODE ──────────────────────────────────────────────────────
   Ty: „Da sollte auch neben der Handy ansicht ein qr code sein... Mit notice was der QR
   Code macht." Deshalb stehen sie nebeneinander: das Bild zeigt, wie es aussieht, der
   Code bringt es auf das Geraet in der Hand. */
.vorlhandy{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(20px,4vw,48px);
  margin-top:clamp(28px,4vw,46px)}
.vorlhandybild{margin:0;flex:0 0 auto;width:clamp(210px,24vw,268px)}
.vorlhandybild img{width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid var(--bd2)}
.vorlhandybild figcaption{margin-top:9px;font-size:12.5px;color:var(--tx3)}
.vorlqr{flex:1 1 230px;max-width:34ch;padding-top:6px}
/* Schwarz auf Weiss, mit Rand: so liest es jede Kamera. Ein heller Code auf dunklem
   Grund saehe ruhiger aus und waere schlechter lesbar — das ist kein Gestaltungsobjekt. */
.vorlqr img{width:150px;height:150px;display:block;background:#fff;
  padding:10px;border-radius:14px}
.vorlqrtitel{margin:14px 0 5px;font-size:15px;font-weight:800;color:var(--tx)}
.vorlqrtext{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx2)}
.vorlschuss figcaption{margin-top:9px;font-size:12.5px;color:var(--tx3)}
.vorlpunkte{display:grid;gap:18px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vorlpunkt{background:var(--sur-voll);border:1px solid var(--bd);border-radius:16px;padding:21px}
.vorlpunkt h3{margin:0 0 7px}
.vorlpunkt p{margin:0;font-size:14px;line-height:1.65;color:var(--tx2)}
/* Hosting ist eine Entscheidung, keine Zutat — also ein eigener Kasten mit eigenem Knopf. */
.vorlhost{margin-top:38px;background:var(--sur2);border:1px solid var(--bd2);
  border-radius:18px;padding:26px}
.vorlhost h3{margin:0 0 8px;font-size:19px}
.vorlhost p{margin:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--tx2);max-width:70ch}
@media(max-width:760px){
  .vorlschuesse,.vorlpunkte{grid-template-columns:1fr}
  .vorlknoepfe .knopf{width:100%;justify-content:center}
}

.vorlpreise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:790px;
  gap:0 32px;margin:32px 0 24px;padding:24px 0 0;border-top:1px solid var(--bd2)}
.vorlpreis+.vorlpreis{border-left:1px solid var(--bd2);padding-left:32px}
.vorlpreiswert{margin:0;font-size:clamp(38px,4.2vw,54px);font-weight:800;letter-spacing:-1.6px;
  line-height:1.1;color:var(--tx);font-variant-numeric:tabular-nums}
.vorlpreiswert span{font-size:.6em;font-weight:700;color:var(--gold);letter-spacing:-.5px}
.vorlpreisart{margin:9px 0 10px;font-size:15px;font-weight:700;line-height:1.45;color:var(--tx2)}
.vorlpreishinweis{grid-column:1/-1;margin:10px 0 0;font-size:13.5px;line-height:1.65;color:var(--tx2)}
.vorlpreise .umrechnknopf{color:var(--tx2)}
@media(max-width:560px){
  .vorlpreise{grid-template-columns:1fr;gap:18px;margin-top:26px;padding-top:20px}
  .vorlpreis+.vorlpreis{border-left:0;border-top:1px solid var(--bd2);padding:20px 0 0}
  .vorlpreisart{font-size:13px}
  .vorlpreise .umrechnwert{font-size:17px}
  .vorlpreise .umrechnfeld{padding:9px 8px}
}

/* Die CMS-Demo bleibt eine grosse Ansicht des wirklichen Interfaces. Rot zeigt die
   Bedienwege, Gold bleibt die Marke; die Bilder werden nicht als weitere Karten verkleinert. */
.vorlCMS-ansage{position:relative;flex:1 1 280px;align-self:stretch;min-width:0;min-height:310px;
  padding:clamp(20px,4vw,54px) 0 0 12px;--cms-rot:#ff5353}
.vorlCMS-ansage h2{margin:0;max-width:11ch;font-size:clamp(34px,3.9vw,52px);
  line-height:1.08;letter-spacing:-1.8px;color:var(--tx)}
.vorlCMS-ansage p{margin:16px 0 0;max-width:27ch;font-size:15px;line-height:1.6;color:var(--tx2)}
.vorlCMS-hinweisPfeil{position:absolute;left:0;top:clamp(150px,14vw,188px);width:100%;
  height:calc(100% - 120px);overflow:visible;pointer-events:none}
.vorlCMS-hinweisPfeil path{fill:none;stroke:var(--cms-rot);stroke-width:5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vorlCMS{padding:0;margin-top:clamp(52px,7vw,88px);--cms-rot:#ff5353}
.vorlCMS-bild{margin:0}
.vorlCMS-bild+.vorlCMS-bild{margin-top:clamp(42px,6vw,72px)}
.vorlCMS-bildkopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:16px}
.vorlCMS-bildkopf h3{margin:0;font-size:clamp(21px,2.3vw,28px);line-height:1.2;letter-spacing:-.7px;color:var(--tx)}
.vorlCMS-bildkopf span{flex-shrink:0;font-size:12px;line-height:1.5;color:var(--tx3)}
.vorlCMS-leinwand{position:relative;isolation:isolate}
.vorlCMS-schirm{position:relative}
.vorlCMS-vergroessern{display:block;border-radius:15px;overflow:hidden;border:1px solid var(--bd2);
  background:var(--bg2);text-decoration:none}
.vorlCMS-vergroessern img{display:block;width:100%;height:auto;object-fit:contain}
.vorlCMS-vergroessern:focus-visible{outline:2px solid var(--gold-hell);outline-offset:5px}
.vorlCMS-pfeile{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vorlCMS-pfeile path{fill:none;stroke:var(--cms-rot);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 3px #000)}
.vorlCMS-anmerkungen{margin:0;padding:0;list-style:none}
.vorlCMS-anmerkungen:empty{display:none}
.vorlCMS-speicherHinweis{margin:18px 0 0;font-size:13.5px;line-height:1.65;color:var(--tx2)}
.vorlCMS-anmerkung{position:absolute;left:var(--x);top:var(--y);z-index:2;
  max-width:var(--breite,25ch);font-size:clamp(13px,1.35vw,17px);font-weight:800;line-height:1.35;
  color:var(--cms-rot);text-shadow:0 1px 5px #000,0 0 16px #000;pointer-events:none}
@media(max-width:960px){
  .vorlCMS-ansage{flex-basis:240px;padding-left:0;min-height:290px}
  .vorlCMS-ansage h2{font-size:36px;letter-spacing:-1.2px}
  .vorlCMS-ansage p{font-size:14px}
}
@media(max-width:760px){
  .vorlCMS-ansage{flex-basis:100%;min-height:260px;max-width:480px;padding-top:16px}
  .vorlCMS-ansage h2{max-width:none;font-size:clamp(32px,8vw,42px)}
  .vorlCMS-ansage p{max-width:32ch;margin-top:10px}
  .vorlCMS-hinweisPfeil{top:100px;left:8%;width:86%;height:200px}
  .vorlCMS{margin-top:38px}
  .vorlCMS-bildkopf{display:block;margin-bottom:12px}
  .vorlCMS-bildkopf h3{font-size:22px}
  .vorlCMS-bildkopf span{display:block;margin-top:6px}
  .vorlCMS-vergroessern{border-radius:10px}
  .vorlCMS-anmerkungen{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .vorlCMS-anmerkung{position:static;max-width:none;font-size:13px;line-height:1.5;text-shadow:none;
    display:flex;align-items:baseline;gap:9px}
  .vorlCMS-anmerkung::before{content:"";flex:0 0 16px;height:2px;background:var(--cms-rot);transform:translateY(-4px)}
}

/* ══ DIE PAKETE, NEU ═══════════════════════════════════════════════════════════════════
   Vier statt zwei, und jedes mit einem eigenen Absatz (Ty 04.10.2026). Zwei Spalten statt
   vier: vier Spalten nebeneinander machen aus jedem Absatz eine schmale Saeule, und genau
   der Absatz ist hier die Hauptsache. */
.paketliste{display:grid;gap:20px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.paketneu{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hell-bd);
  border-radius:20px;padding:26px 26px 28px}
.paketneu.hervor{border-color:rgba(224,168,60,.55);box-shadow:0 14px 44px rgba(224,168,60,.14)}
.paketneu h3{font-size:22px;letter-spacing:-.5px;margin:0 0 4px;color:var(--hell-tx)}
.paketzeile{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--goldtx)}
.paketabsatz{margin:0 0 18px;font-size:14.5px;line-height:1.72;color:var(--hell-tx2)}
.paketabsatz b{color:var(--hell-tx)}
.paketdrin{margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--hell-tx2)}
.paketneu .haken{margin:0 0 22px}
.paketneu .haken li{color:var(--hell-tx2);font-size:14px}
/* Der Knopf sitzt unten buendig, egal wie lang der Absatz darueber ist — sonst tanzen die
   vier Karten auf unterschiedlichen Hoehen. */
.paketneu .knopf{margin-top:auto;width:100%;justify-content:center}
.preishinweis{margin:24px 0 0;font-size:14.5px;line-height:1.7;color:var(--hell-tx2);
  max-width:72ch}
@media(max-width:760px){ .paketliste{grid-template-columns:1fr} }

/* Die Abkuerzung in die Kasse — bewusst ein Textlink, kein zweiter Knopf. Zwei gleich
   laute Knoepfe auf einer Karte heisst, dass der Leser erst entscheiden muss, welcher der
   richtige ist, bevor er irgendetwas entscheidet. */
.paketdirekt{margin:12px 0 0;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--hell-tx2);text-align:center;
  width:100%;transition:color .15s}
.paketdirekt:hover{color:var(--goldtx);text-decoration:underline}

/* ══ DIE KASSE NACH CARVINCIS VORBILD ══════════════════════════════════════════════════
   Ty 04.10.2026: „Lass dich enorm inspirieren von Carvincis design... Vorallem hier beim
   checkout." Gemessen auf carvinci.com/cart: neutraler dunkler Grund (#121212), Text fast
   weiss, Betraege gruen, Streichpreis daneben, ein eigener umrandeter Kasten fuer die
   Bestaetigung, ein Schloss am Kaufknopf.
   Unsere Grundstufen sind seit heute ebenfalls neutral — das passt also zusammen, ohne
   dass die Seite ihre eigene Handschrift verliert: das Gold bleibt die Marke. */
.kassepos{background:var(--sur2);border:1px solid var(--bd2);border-radius:14px;
  padding:16px 17px;margin-bottom:14px}
.kassepostitel{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kassepostitel strong{font-size:15.5px;font-weight:800;color:var(--tx)}
.kassepospreis{font-size:16px;font-weight:800;color:var(--gruen);white-space:nowrap}
.kassepospreis s{color:var(--tx3);font-weight:600;font-size:13px;margin-right:5px}
.kassedrin{margin:13px 0 7px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--tx3)}
.kassedrinliste{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.kassedrinliste li{position:relative;padding-left:18px;font-size:13px;color:var(--tx2);line-height:1.5}
.kassedrinliste li::before{content:'✓';position:absolute;left:0;color:var(--gruen);font-weight:800}

.kassesumme{border:1px solid var(--bd2);border-radius:14px;padding:15px 17px;margin-bottom:16px}
.kasseuebertitel{margin:0 0 11px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--tx3)}
.kassezeile{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  font-size:13.5px;color:var(--tx2)}
.kassezeile span:last-child{color:var(--tx);font-weight:700;text-align:right}
.kasseleicht{color:var(--tx3)!important;font-weight:600!important}
.kassegruen{color:var(--gruen)!important}
/* Die Gesamtzeile ist die einzige, die laut sein darf — sie ist der Grund, warum der
   Kasten ueberhaupt da ist. */
.kassezeile.gesamt{margin-top:7px;padding-top:12px;border-top:1px solid var(--bd2);
  font-size:15px;font-weight:800;color:var(--tx)}
.kassezeile.gesamt span:last-child{font-size:20px;color:var(--gruen)}

.kassehaken{border:1px solid var(--bd2);border-radius:14px;padding:15px 17px;margin:16px 0 0}
.kassehaken label{display:flex;gap:10px;align-items:flex-start;margin-top:9px;cursor:pointer;
  font-size:12.5px;line-height:1.55;color:var(--tx2)}
.kassehaken label:first-of-type{margin-top:0}
.kassehaken input{margin:1px 0 0;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold)}
.kassehaken a{color:var(--goldtx)}
.kassezahlknopf{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.kassezahlknopf svg{flex-shrink:0;opacity:.85}
.kassesicher{margin:10px 0 0;text-align:center;font-size:12px;color:var(--tx3)}

/* Der Demo-Knopf verschwindet, bevor der Kopf eng wird — gemessen bei 1100 px faengt er an
   zu draengen. Im ausgeklappten Menue steht „Vorlagen" ohnehin. */
@media(max-width:1100px){ .nurbreit{display:none} }

/* Die erste Vorlage als Schaufenster: Bild links, Text rechts, ueber die volle Breite.
   Mit nur einer Vorlage war die normale Rasterkarte 1180 px breit und 870 px hoch — fast
   nur Bild, ohne einen Grund zu klicken. */
.vorlage.gross{grid-column:1/-1;flex-direction:row;align-items:stretch}
.vorlage.gross .vorlbild{flex:0 0 56%;aspect-ratio:auto;min-height:340px}
.vorlage.gross .vorlrumpf{flex:1;justify-content:center;padding:30px 32px;gap:9px}
.vorlage.gross .vorlname{font-size:27px;letter-spacing:-.7px}
.vorlage.gross .vorlkurz{font-size:15.5px}
@media(max-width:860px){
  .vorlage.gross{flex-direction:column}
  .vorlage.gross .vorlbild{flex:none;aspect-ratio:16/10;min-height:0}
  .vorlage.gross .vorlrumpf{padding:20px 21px 22px}
  .vorlage.gross .vorlname{font-size:21px}
}

/* Auf hellen Flaechen braucht dasselbe Violett eine dunklere Stufe, sonst sinkt es unter
   die 4,5:1 fuer kleinen Text — genau wie beim Gold (--goldtx). */
.licht,body.hellmodus{--akztx:#7a1fc4}

/* ── DER REEL STEHT HOCHKANT ──────────────────────────────────────────────────────────
   Ty 07.10.2026: „Die kleine ansicht macht keinen sinn... Die hochformat ansicht ist gut."
   Das Deckbild war in ein 16:9-Fenster geschnitten, der geladene Reel kam danach hochkant
   — zwei verschiedene Formate hintereinander, und das erste war das falsche. Es ist ein
   Reel; dann soll der Platzhalter auch wie einer aussehen.
   Mit Deckel auf der Hoehe, sonst waere der Kasten bei 500 px Breite 890 px hoch und
   schoebe den ganzen Abschnitt auseinander. */
/* ── KEINE BALKEN NEBEN DEM VIDEO ────────────────────────────────────────────────────
   Ty 08.10.2026: „siehst du diese 2 schwarzen raender links rechts?? Ich will das nicht.
   ich will es wie beim Vorschaubild"

   GEMESSEN: der Kasten war 418x640, also Verhaeltnis 0,653 — das Video ist 1080x1920,
   also 0,563. Schuld war `max-height:640px` NEBEN `aspect-ratio:9/16`: das Deckelmass
   gewinnt, das Verhaeltnis ist damit hin, und `object-fit:contain` legt links und rechts
   je 29 px Schwarz dazu. Das Vorschaubild hatte die Balken nie, weil es `cover` traegt.

   Statt die Hoehe zu deckeln wird jetzt die BREITE aus der Fensterhoehe gerechnet. Damit
   bleibt der Kasten immer exakt 9:16 — kein Balken, nichts beschnitten, und der Abschnitt
   wird trotzdem nie hoeher als 72 % des Fensters (dafuer war der Deckel urspruenglich da). */
.vsl{max-width:min(420px,calc(72vh * 9 / 16));margin-inline:auto}

/* ══ DER WINK AM REEL ═══════════════════════════════════════════════════════════════════
   Ty 09.10.2026: „rechts ein geschwungener pfeil von hand geschrieben von mitte bis oben
   rechts, mit von hand geschrieben click to watch. Mit von Hand mein ich einfach den stil."

   Warum er ueberhaupt noetig ist: am 07.10. ist das Abspiel-Symbol aus dem Bild
   verschwunden, und seitdem sieht das Deckbild aus wie ein Bild. Der Wink sagt, dass es
   ein Knopf ist — ohne das Bild wieder zuzustellen, weil er DANEBEN steht.

   Die Buehne ist nur ein Bezugspunkt: `position:relative` auf etwas, das genau so breit
   ist wie der Spieler. Der Wink haengt daran und wandert deshalb bei jeder Fensterbreite
   mit ihm mit, statt an einer ausgerechneten Stelle zu kleben. */
.vslbuehne{position:relative;max-width:min(420px,calc(72vh * 9 / 16));margin-inline:auto}
.vslbuehne .vsl{max-width:none}
/* GEMESSEN UND KORRIGIERT: in der ersten Fassung stand die Schrift absolut positioniert
   mit `width:150%` neben dem Pfeil — und schob die Seite seitlich hinaus, 65 Pixel bei
   1440 und 158 bei 1200. Jetzt ist der Wink EIN Kasten mit fester Breite, und alles darin
   richtet sich danach: die Schrift kann nicht breiter werden als er, sie bricht um. */
/* Ty 09.10.2026: „Auch will ich rot nicht gelb." Ein eigener Wert, kein --gold: der Wink
   ist eine Anmerkung AUF der Seite, nicht Teil ihrer Palette. Auf Hell etwas tiefer, auf
   Dunkel etwas heller — dasselbe Rot wirkt sonst einmal grell und einmal matt. */
.vslwink{--wink:#ff5347;position:absolute;left:100%;top:3%;width:clamp(124px,12vw,168px);
  margin-left:clamp(2px,.7vw,12px);pointer-events:none;color:var(--wink);
  text-align:center}
body.hellmodus .vslwink,.licht .vslwink{--wink:#df3327}
/* Mittig ueber dem Linienanfang. Die Drehung dreht um die MITTE, sonst waendert der Text
   beim Drehen zur Seite und stimmt mit dem Linienanfang nicht mehr ueberein. */
.vslwinktext{display:block;margin:0 0 2px;
  font-family:'Architects Daughter',ui-rounded,'Segoe Print',cursive;font-weight:400;
  font-size:clamp(18px,1.45vw,24px);line-height:1.12;
  /* Leicht schief. Eine Handschrift, die exakt waagerecht steht, sieht gesetzt aus. */
  transform:rotate(-4deg);transform-origin:center center}
.vslpfeil{display:block;width:100%;height:auto;overflow:visible}
.vslpfeilhoch{display:none}
/* SOBALD ES LAEUFT, HAT ER SEINE ARBEIT GETAN. „click to watch" neben einem laufenden
   Video ist eine Aufforderung zu etwas, das der Besucher gerade schon tut. `:has()` statt
   einer Klasse aus dem Skript: der Zustand steht bereits am Spieler, und zwei Stellen,
   die dasselbe wissen muessen, laufen frueher oder spaeter auseinander. */
.vslbuehne{transition:none}
.vslwink{transition:opacity .45s var(--weich)}
.vslbuehne:has(.vsl-schirm.spielt) .vslwink{opacity:0}
.vslpfeil path{fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── SIE ZEICHNET SICH SELBST ───────────────────────────────────────────────────────────
   Ein fertiger Strich, der nur eingeblendet wird, ist ein Bild. Gezogen zu werden ist der
   halbe Witz an einer Handschrift — also laeuft die Linie, und erst danach kommt die
   Schrift dazu. `pathLength` braucht es dafuer nicht: 420 ist laenger als beide Pfade,
   und zu viel Versatz schadet nicht.
   Der Takt haengt an `.auf-los`/`.da`, dem Beobachter, der auf dieser Seite ohnehin jeden
   Abschnitt einblendet — kein zweiter Mechanismus fuer dieselbe Sache. */
.vslwink.auf-los{opacity:1;transform:none}
.vslwink .vslpfeilzug{stroke-dasharray:420;stroke-dashoffset:420;
  transition:stroke-dashoffset 1.1s cubic-bezier(.33,1,.68,1) .15s}
.vslwink .vslpfeilspitze{stroke-dasharray:70;stroke-dashoffset:70;
  transition:stroke-dashoffset .3s ease-out .95s}
.vslwinktext{opacity:0;transition:opacity .5s var(--weich) .5s}
.vslwink.da .vslpfeilzug,.vslwink.da .vslpfeilspitze{stroke-dashoffset:0}
.vslwink.da .vslwinktext{opacity:1}
/* Wer keine Bewegung will, bekommt sie fertig hingeschrieben statt gar nicht. */
body.ruhig .vslwink .vslpfeilzug,body.ruhig .vslwink .vslpfeilspitze{stroke-dashoffset:0}
body.ruhig .vslwinktext{opacity:1}
@media(prefers-reduced-motion:reduce){
  .vslwink .vslpfeilzug,.vslwink .vslpfeilspitze{stroke-dashoffset:0;transition:none}
  .vslwinktext{opacity:1;transition:none}
}

/* ── ENG UND AUF DEM HANDY ──────────────────────────────────────────────────────────────
   Rechts neben dem Spieler ist dann kein Platz mehr — dort stuende der Wink im Nichts oder
   waere abgeschnitten. Also rutscht er UNTER den Spieler und der Bogen zeigt nach oben. */
@media(max-width:1279px){
  .vslwink{left:auto;right:8%;top:auto;bottom:-78px;width:150px;margin-left:0;
    display:flex;align-items:center;gap:10px}
  /* Der Spieler steht jetzt DARUEBER, also der Bogen, der nach oben zeigt. */
  .vslpfeilbreit{display:none}
  .vslpfeilhoch{display:block;width:52px;flex:0 0 auto}
  .vslwinktext{margin:0;transform:rotate(-5deg);font-size:21px}
}
/* Gemessen bei 390 und 360: der GEDREHTE Pfeil malt breiter als sein Kasten — 387 statt
   356 — und schob die Seite um 1 bis 2 Pixel hinaus. Eine Drehung aendert das Layout
   nicht, wohl aber das Bild. Also auf schmalen Fenstern etwas weiter hinein. */
@media(max-width:560px){
  /* 13 Prozent und nicht 9: der gedrehte Pfeil malt ueber seinen Kasten hinaus, gemessen
     waren es zuletzt noch 5 Pixel Querscrollen bei 390. */
  .vslwink{right:13%;width:136px}
  .vslpfeilhoch{width:46px}

}

.vsl .vsl-schirm{aspect-ratio:9/16}
.vsl .vsl-schirm img{object-position:center center}
.vsl-fuss{display:none}
.vsl .vsl-laeuft{aspect-ratio:9/16;object-fit:cover}
@media(max-width:760px){ .vsl{max-width:none} }

/* ══ AUF DEM HANDY KEIN KLAPPMENUE ══════════════════════════════════════════════════════
   Ty 09.10.2026: „Hamburger menu soll auf handy auch weg."
   Der Termin-Knopf bleibt — er ist der Grund, warum der Kopf ueberhaupt da ist. Weg sind
   die Menuepunkte und der Magic Button, und damit auch das Aufklappen: wer nichts
   aufklappen kann, braucht kein ☰. Die Abschnitte erreicht man auf dem Handy ueber die
   Kurzfassung und das Scrollen. */
@media(max-width:760px){
  .kopf .menu{display:none}
  .kopf nav,.kopf.eng nav,.kopf nav.auf,.kopf.eng nav.auf{display:flex;position:static;
    flex-direction:row;align-items:center;margin-left:auto;gap:10px;
    background:none;border:none;padding:0}
  .kopf nav .navlinks{display:none}
  .kopf nav .kopfaktionen,.kopf nav.auf .kopfaktionen{display:flex;flex-direction:row;
    align-items:center;margin-left:0}
  .ctalang{display:none}
  .ctakurz{display:inline}
  .kopf .kopfaktionen .knopf{padding:11px 16px;font-size:13.5px}
}

/* ══ PAKETE: DUNKEL, MIT EINER GEISTERZAHL ALS ANKER ═══════════════════════════════════
   Ty 08.10.2026: „Das sieht schlimm aus alles hier. Denk besser nach bevor du baust. Es
   darf niemals so viel white mode sein das tut in den augen weh. Und das design und die
   kreativität ist nicht vorhanden"

   GEMESSEN, bevor ich etwas angefasst habe: von 11.311 px Seitenhoehe waren 2.818 px hell
   — und 1.944 davon allein die Paket-Zone. Der helle Streifen war als KURZER Kontrast
   gedacht (ein Block, eine Bildschirmhoehe); durch den Umbau auf einen Abschnitt je Paket
   ist er auf das Vierfache gewachsen. Nicht die Farbe war falsch, die Menge war es.
   Jetzt traegt nur noch der VSL-Abschnitt Hell (874 px), der Rest ist dunkel wie die
   uebrige Seite.

   UND GEGEN DIE LEERE: im linken Feld standen drei Zeilen Text in einer halben
   Bildschirmbreite. Dort steht jetzt die Paketnummer als grosse Geisterziffer im
   Markenverlauf — ein Anker fuers Auge, der nichts behauptet und nichts dazuerfindet.
   Die Zahl ist Dekoration, deshalb aria-hidden; die lesbare Nummer steht daneben. */
.paketreihe{position:relative;padding-block:clamp(52px,6vw,86px);overflow:hidden}
/* Eine haarfeine Linie im Markenverlauf trennt die Pakete, ohne einen Kasten zu bauen. */
.paketreihe::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--akz) 62%,transparent)}
/* Das bevorzugte Paket bekommt einen weichen Schein statt eines Rahmens — ein Rahmen
   waere wieder eine Karte, und Karten waren das Problem. */
.paketreihe.hervor::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 48% 70% at 18% 50%,rgba(130,60,200,.16),transparent 70%),
             radial-gradient(ellipse 42% 60% at 82% 40%,rgba(224,168,60,.09),transparent 70%)}
.paketgitter{position:relative;z-index:1;display:grid;gap:clamp(26px,4vw,64px);
  align-items:center;grid-template-columns:minmax(230px,0.85fr) minmax(0,1.15fr)}
.paketname{position:relative}
.paketgeist{position:absolute;left:-6px;top:50%;transform:translateY(-54%);z-index:-1;
  font-family:var(--mono);font-size:clamp(130px,15vw,210px);font-weight:700;line-height:.8;
  letter-spacing:-8px;pointer-events:none;user-select:none;
  background:linear-gradient(140deg,var(--gold) 0%,var(--akz) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.13}
.paketnr{display:block;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:1.6px;color:var(--goldtx);margin-bottom:10px}
.paketname h3{font-size:clamp(30px,3.8vw,46px);letter-spacing:-1.2px;margin:0 0 9px;
  color:var(--tx)}
.paketzeile{margin:0;font-size:15.5px;font-weight:700;line-height:1.5;color:var(--akz2)}
.paketabsatz{margin:0 0 20px;font-size:16px;line-height:1.72;color:var(--tx2);max-width:60ch}
.paketabsatz b{color:var(--tx)}
.paketinhalt .haken{margin:0 0 26px}
.paketinhalt .haken li{color:var(--tx2);font-size:14.5px}
.paketweg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.paketweg .knopf{flex:0 0 auto}
.paketdirekt{margin:0;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--tx3);transition:color .15s}
.paketdirekt:hover{color:var(--goldtx);text-decoration:underline}
.preishinweis{margin:0 0 30px;font-size:15px;line-height:1.7;color:var(--tx2);max-width:70ch}
@media(max-width:860px){
  .paketgitter{grid-template-columns:1fr;gap:18px}
  .paketgeist{font-size:120px;top:0;transform:none;opacity:.1}
  .paketweg .knopf{width:100%;justify-content:center}
}
#pakete{padding-bottom:clamp(20px,2vw,32px)}


/* Ty 09.10.2026: sketch arrow retry */
.vslbuehne{overflow:visible}

.vslwink{
  --wink:#f04b3d;
  position:absolute;
  left:100%;
  top:16px;
  width:150px;
  margin-left:34px;
  pointer-events:none;
  color:var(--wink);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  text-align:center;
}

.vslwinktext{
  display:block;
  margin:0 0 -2px;
  padding:0;
  min-height:0;
  background:none;
  color:var(--wink);
  font-family:'Architects Daughter',ui-rounded,'Segoe Print',cursive;
  font-weight:400;
  font-size:clamp(22px,1.75vw,30px);
  line-height:1.02;
  letter-spacing:0;
  white-space:nowrap;
  transform:rotate(-4deg);
  transform-origin:center center;
  box-shadow:none;
}

.vslpfeilbreit{
  display:block;
  width:146px;
}

.vslpfeilhoch{
  display:none;
}

.vslpfeil path{
  fill:none;
  stroke:currentColor;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.vslwink .vslpfeilzug{
  stroke-dasharray:520;
  stroke-dashoffset:520;
}

.vslwink .vslpfeilspitze{
  stroke-dasharray:110;
  stroke-dashoffset:110;
}

@media (max-width:1279px){
  .vslwink{
    left:auto;
    right:6px;
    top:-46px;
    width:124px;
    margin-left:0;
  }

  .vslwinktext{
    font-size:20px;
    margin:0 0 -1px;
  }

  .vslpfeilbreit{
    width:118px;
  }
}

@media (max-width:760px){
  .vslwink{display:none}
}


/* VSL arrow narrow-screen safety */
@media(max-width:1279px){.vslwink{display:none}}

/* Akibon: handwritten bold and video pause fade */
.vslwinktext {
  -webkit-text-stroke: .8px currentColor;
  text-shadow: .2px 0 currentColor;
}

/* Akibon mobile video controls */
.vsl-mobilebar{display:none}
@media(max-width:760px){
.vsl-schirm .vsl-mobilebar{
display:flex;position:absolute;inset:auto 0 0;z-index:3;
align-items:center;gap:11px;min-height:61px;
padding:22px 12px 12px;
background:linear-gradient(transparent,rgba(0,0,0,.9));
color:white;pointer-events:none}
.vsl-mobile-toggle{width:21px;flex:none;display:grid;place-items:center}
.vsl-mobile-toggle:before{content:'▶';font:20px/1 system-ui}
.vsl-schirm.spielt .vsl-mobile-toggle:before{content:'Ⅱ';font-size:21px}
.vsl-mobile-track{flex:1;height:4px;border-radius:8px;background:#ffffff80;overflow:hidden}
.vsl-mobile-track i{display:block;width:0;height:100%;background:white;border-radius:8px}
.vsl-mobile-clock{font:600 11px/1 system-ui;white-space:nowrap;font-variant-numeric:tabular-nums}
}

/* AKIBON TEMPLATE SECTION CMS CONTROL 2026-10-09 */
.managerbox{width:min(450px,100%);max-height:min(90vh,820px);overflow-y:auto}
.manager-section-heading{margin:0 0 8px}
.manager-section-heading strong{display:block;font-size:15px;letter-spacing:-.2px}
.manager-section-heading p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--tx3)}
.manager-switch-row{position:relative;gap:12px;padding:17px 16px;margin:0;transition:border-color .18s,background .18s}
.manager-switch-row:has(input:checked){border-color:rgba(224,168,60,.45);background:rgba(224,168,60,.065)}
.manager-switch-row:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.manager-switch-row input{position:absolute;opacity:0;width:1px;height:1px;inset:auto}
.managercontroltext{flex:1;min-width:0}
.managercontroltext b{line-height:1.3}
.managerrowstate{display:inline-block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--goldtx)}
.managerswitch{position:relative;flex:0 0 46px;width:46px;height:26px;border-radius:100px;background:var(--bd3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:background .18s}
.managerswitch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.26);transition:transform .18s}
.manager-switch-row input:checked ~ .managerswitch{background:var(--gold)}
.manager-switch-row input:checked ~ .managerswitch:after{transform:translateX(20px);background:#14100a}
.manager-child-row{margin-left:20px;padding:14px 16px}
.manager-child-row:before{content:"";position:absolute;left:-14px;top:-8px;bottom:50%;width:10px;border-left:1px solid var(--bd3);border-bottom:1px solid var(--bd3);border-bottom-left-radius:9px}
.manager-child-row.is-disabled{opacity:.52;cursor:not-allowed;pointer-events:none}
.manager-child-row.is-disabled .managerrowstate{color:var(--tx3)}
.manager-dependency-note{color:var(--tx3);font-size:11px;line-height:1.45;padding:0 2px 4px}
@media(max-width:480px){.managerbox{padding:28px 20px 22px}.managergrund{padding:12px}.manager-child-row{margin-left:14px}}

/* AKIBON EXTRA SERVICES TOGGLE 2026-10-09 */
[data-site-extras]:not([data-extras-ready]),
[data-site-extras-footer]:not([data-extras-ready]),
[data-site-extras-faq]:not([data-extras-ready]){visibility:hidden}

/* AKIBON: Hero-Weltkugel-Badge ausgeblendet */
.hero .herotext > .sterne { display: none !important; }


/* AKIBON MOBILE FAQ PLUS SPACING */
@media (max-width:760px) {
  #faq summary {
    padding-right:64px;
  }
  #faq summary::after {
    right:30px;
  }
}

/* Akibon: Honstein mobile name layout */
@media(max-width:760px){
  .bewname .bewpunkt{display:none}
  .bewname .bewfirma{display:block;white-space:nowrap}
}

/* AKIBON VSL MOBILE TOUCH GUARD */
@media (max-width:760px) {
  .vsl-schirm, .vsl-schirm * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .vsl-schirm {
    touch-action: manipulation;
  }
  .vsl-schirm video,
  .vsl-schirm img {
    pointer-events: none;
  }
  .vsl-schirm:focus:not(:focus-visible) {
    outline: none;
  }
}

/* AKIBON CODE OCEAN SHORE V1 — dunkles Codemeer erstarrt auf heller Section. */
main > .hero.akibon-code-ocean-hero {
  min-height: max(650px, calc(100svh - 72px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
main > .hero.akibon-code-ocean-hero > .mitte { width: 100%; }
section#premium.akibon-code-ocean-shore {
  padding-top: calc(clamp(66px, 9vw, 116px) + 114px);
  isolation: isolate;
}
section#premium.akibon-code-ocean-shore > .mitte {
  position: relative;
  z-index: 2;
}
.akibon-code-ocean-tide {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(185px, 19vw, 252px);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.akibon-code-ocean-tide svg {
  display: block;
  width: 100%;
  height: 100%;
}
.akibon-ocean-body { fill: var(--bg, #08090c); }
.akibon-ocean-halo {
  fill: none;
  stroke: #8c4bb8;
  stroke-width: 13;
  stroke-opacity: .22;
  filter: blur(6px);
}
.akibon-ocean-edge {
  fill: none;
  stroke: url(#akibon-ocean-edge-v1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.akibon-ocean-glyphs text {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-weight: 500;
}
/* Im Licht-Theme kein dunkles Alien-Oel ueber einer hellen Hero. */
body.hellmodus .akibon-code-ocean-tide { display:none; }
body.hellmodus section#premium.akibon-code-ocean-shore {padding-top:clamp(66px,9vw,116px);}
@media (max-width: 700px) {
  main > .hero.akibon-code-ocean-hero {min-height:max(630px, calc(100svh - 66px));}
  section#premium.akibon-code-ocean-shore {padding-top:171px;}
  .akibon-code-ocean-tide {height:190px;}
  body.hellmodus section#premium.akibon-code-ocean-shore {padding-top:58px;}
}
@media (prefers-reduced-motion: reduce) {
  .akibon-ocean-halo {filter:none;stroke-opacity:.1;}
}

/* AKIBON OCEAN SMOOTH V5 — weichere, feinere Flüssigkeitskante. */
.akibon-ocean-halo{stroke-width:8;stroke-opacity:.15;filter:blur(7px)}
.akibon-ocean-edge{stroke-width:1.3;stroke-opacity:.85;stroke-linejoin:round;stroke-linecap:round}

/* AKIBON SMART BUILDER V7: cursor edits appear in the actual page, never in a duplicate preview. */
.akb-inline-v7{display:inline;white-space:pre-wrap;overflow-wrap:anywhere;outline:2px solid #e7b148;outline-offset:4px;border-radius:2px;caret-color:#e7b148;min-width:1ch;cursor:text;touch-action:manipulation;color:#f6f5fa!important;-webkit-text-fill-color:#f6f5fa!important;background-image:none!important}
.licht .akb-inline-v7{color:#17141d!important;-webkit-text-fill-color:#17141d!important}
.akb-inline-v7:focus{background:rgba(224,168,60,.035)}
/* Mobile rendering budget: preserve the static code-ocean shape, avoid costly blurred SVG filters. */
@media(max-width:760px){
  .akibon-ocean-halo{filter:none;stroke-opacity:.095;stroke-width:7}
  .hero .regen{display:none}
}

/* AKIBON V8: edit every genuine text fragment, including the red video annotation. */
body.akbuild-mode .vslwink,body.akbuild-mode .vslwinktext{pointer-events:auto!important}
body.akbuild-mode .vslwinktext[data-akbuild-owner]{cursor:text}
body.akbuild-mode .vslwink .akb-inline-v7{color:var(--wink)!important;-webkit-text-fill-color:var(--wink)!important}
/* Hero divider stops precisely above the right edge of the last value, not at the grid edge. */
.hero .zahlen{position:relative;border-top:0}
.hero .zahlen::before{content:"";position:absolute;left:0;top:0;width:min(100%,var(--akb-rule-end,100%));border-top:1px solid var(--bd);pointer-events:none}
/* Fade the spaceship trail as it reaches Tyrone's portrait; do not dim the portrait itself. */
@media(min-width:940px){
 .magicspur.akb-near-portrait{-webkit-mask-image:var(--akb-portrait-mask);mask-image:var(--akb-portrait-mask)}
}

/* AKIBON V16: true complete footer wordmark; no header or animation changes. */
/* Display the untouched original artwork, cropped to its actual brand artwork.
   The original social-preview image is already shipped in the Studio bundle. */
.fusskopf .fusslogo-voll {
  position:relative;
  display:block;
  width:min(100%,340px);
  aspect-ratio:1200/380;
  overflow:hidden;
  text-decoration:none;
  flex-shrink:0;
}
.fusskopf .fusslogo-voll img {
  position:absolute;
  left:50%;top:50%;
  width:115%;height:auto;
  max-width:none;
  display:block;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
/* The original image has a black canvas; preserve its legibility in Daylight. */
body.hellmodus .fusskopf .fusslogo-voll {
  background:#08070b;
  border-radius:5px;
}
body.hellmodus .fusskopf .fusslogo-voll img {mix-blend-mode:normal}


/* AKIBON V17: purple trailing glow + aligned full-logo footer. */
/* Original values (--n), path, gold line and movement remain unchanged.
   A separate low-opacity layer fades OUT over 0.8s as the next step lights up.
   It extends 30px beyond the existing halo at both ends, with transparent edges.
   Original Magic theme and desktop only. */
@media (min-width:940px) and (prefers-reduced-motion:no-preference) {
  body:not(.hellmodus):not(.kino):not(.grau):not(.ruhig)
    .prozess .schritt::after {
    content:'';position:absolute;z-index:-1;
    inset:-56px -40px;pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,
      rgba(130,60,200,.125) 7%,rgba(130,60,200,.065) 32%,transparent 57%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
    opacity:var(--n,1);
    transition:opacity 800ms cubic-bezier(.18,.45,.35,1);
  }
}
/* Footer: the complete branded logo already includes a tagline.
   Links form one consistently top-aligned unit, rather than four scattered
   independent grid children. The header and all other components are untouched. */
footer .fussreihe {
  grid-template-columns:minmax(280px,1.1fr) minmax(0,1.55fr);
  column-gap:clamp(36px,5vw,80px);
  row-gap:42px;
  align-items:start;
}
footer .fusskopf {grid-column:1;align-self:start;gap:0}
footer .fusskopf .fusslogo-voll {width:min(100%,390px)}
footer .fusssatz {display:none}
footer .fusslinks {
  grid-column:2;display:grid;
  grid-template-columns:repeat(var(--fussspalten,3),minmax(0,1fr));
  column-gap:clamp(16px,2.7vw,38px);
  align-items:start;padding-top:8px;
}
/* Most studio pages only show Rechtliches + Kontakt. The optional third
   group must not reserve a phantom blank column before it becomes visible. */
footer .fusslinks:has(> [data-site-extras-footer]:not([data-extras-ready])) {
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,64px);
}
footer .fusslinks > [data-site-extras-footer]:not([data-extras-ready]) {
  display:none; /* hidden optional services must not reserve a blank row */
}
footer .fussgruppe {gap:13px}
footer .fusstitel {opacity:.72;letter-spacing:1.25px}
footer .fussunten {grid-column:1/-1;margin-top:0}
@media(max-width:860px) {
  footer .fussreihe {grid-template-columns:minmax(0,1fr);row-gap:28px}
  footer .fusskopf {grid-column:1}
  footer .fusslinks {grid-column:1;padding-top:0;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  footer .fusslinks:has(> [data-site-extras-footer]:not([data-extras-ready])) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  footer .fussunten {grid-column:1}
}
@media(max-width:540px) {
  footer .fusslinks {grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .fusslinks .fussgruppe:nth-child(3) {grid-column:1/-1}
  footer .fusskopf .fusslogo-voll {width:min(100%,360px)}
}


/* AKIBON V18: extended glow only for outgoing first/last step.
   The V17 purple shape, hue, halo overlap and timing stay exactly as before.
   --aura-n is separate from --n: text, step labels and gold rail are untouched. */
@media (min-width:940px) and (prefers-reduced-motion:no-preference) {
  body:not(.hellmodus):not(.kino):not(.grau):not(.ruhig)
    .prozess > .schritt:nth-child(2)::before,
  body:not(.hellmodus):not(.kino):not(.grau):not(.ruhig)
    .prozess > .schritt:last-child::before,
  body:not(.hellmodus):not(.kino):not(.grau):not(.ruhig)
    .prozess > .schritt:nth-child(2)::after,
  body:not(.hellmodus):not(.kino):not(.grau):not(.ruhig)
    .prozess > .schritt:last-child::after {
    opacity:var(--aura-n,var(--n));
  }
}