/* =====================================================================
   Schriften, selbst ausgeliefert.
   Vorher hing daran eine Kette ueber zwei fremde Hosts: erst
   fonts.googleapis.com fuer dieses CSS, dann fonts.gstatic.com fuer
   die Dateien — und die Adressen der Dateien kannte der Browser erst,
   wenn das CSS da war. Jetzt steht beides hier, kommt ueber dieselbe
   HTTP/2-Verbindung wie alles andere und traegt expires max.
   Die Bloecke sind woertlich die von Google, nur die Adressen zeigen
   hierher: identische Dateien, identische Deskriptoren.
   ===================================================================== */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/reenie-beanie-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Hintergrund, Vignette und Foto richten sich nach dem Viewport.
   Die Typo ist ein starrer Block: alle Abstände in em der Headline-
   Größe. Werte gemessen aus dem Storyboard (1920x1080).
   ===================================================================== */
:root{
  --red:#EE1C23;      /* Akzent, entspricht dem Weißpunkt des Duotons */
  --bg:#D2181F;       /* Hintergrund, bewusst dunkler als der Akzent */
  --dark:#3C0003;
  --f: clamp(17px, min(8.577vw, 26vh), 460px);
  /* Die drei Portraits stehen genau einmal in der Datei */
  /* Weiche Kanten: seitlich und unten ausblenden, damit der
     Beschnitt des Originalfotos nicht als harte Linie steht */
  --fadeX: linear-gradient(to right,
     rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.55) 9%,
     rgba(0,0,0,.88) 15%, #000 22%, #000 78%, rgba(0,0,0,.88) 85%,
     rgba(0,0,0,.55) 91%, rgba(0,0,0,.18) 96%, rgba(0,0,0,0) 100%);
  --fadeY: linear-gradient(to bottom,
     #000 0%, #000 54%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.74) 79%,
     rgba(0,0,0,.44) 89%, rgba(0,0,0,.16) 96%, rgba(0,0,0,0) 100%);
  --imgA:url(/assets/portrait-1.webp);
  --imgB:url(/assets/portrait-2.webp);
  --imgC:url(/assets/portrait-3.webp);
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* Der Wurzelhintergrund ist die einzige Fläche, die in der Überscroll-Zone
   in jedem Browser gemalt wird. Der Ton liegt zwischen Hero-Kopf
   (rgb 171,18,24) und Fuß von Sektion 2 (rgb 117,10,13); die Körnung
   kommt als gekacheltes Bild aus dem Skript dazu. */
html{background-color:#900E13}
body{margin:0;overflow-x:clip;background:transparent;color:#fff;
  font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* Solange der Ladescreen steht, bleibt die Seite gesperrt */
body.is-loading{overflow:hidden;height:100%}

/* =====================================================================
   Überscroll-Grund. Liegt fixiert hinter allen Sektionen und wird nur
   dort sichtbar, wo die Seite beim Federn über ihr Ende hinausläuft.
   Fixierte Ebenen bleiben dabei am Viewport, füllen die Lücke also aus.
   Oben trägt sie den Ton des Hero-Kopfs, unten den des Fußes von
   Sektion 2 — beim Federn nach oben sieht man ihre Oberkante, beim
   Federn nach unten ihre Unterkante.
   ===================================================================== */
.bleed{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg);isolation:isolate;overflow:hidden}

/* Oben: der Tonwert, den die Hero-Vignette an ihrer Oberkante hat —
   ausgerechnet aus .vig2, inklusive der Abdunklung zu den Ecken hin.
   Entscheidend ist, dass dieser Streifen vertikal konstant bleibt: Die
   Naht wandert mit der Zugweite, ein senkrechter Verlauf würde also nur
   bei genau einer Auslenkung passen. Erst weit unterhalb, wo im Zweifel
   nie etwas sichtbar wird, blendet er aus. */
.bleed__top{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;
  background:linear-gradient(to right,
    rgba(60,0,3,.612)   0%, rgba(60,0,3,.565)  8%, rgba(60,0,3,.524) 16%,
    rgba(60,0,3,.485)  25%, rgba(60,0,3,.454) 35%, rgba(60,0,3,.435) 50%,
    rgba(60,0,3,.454)  65%, rgba(60,0,3,.485) 75%, rgba(60,0,3,.524) 84%,
    rgba(60,0,3,.565)  92%, rgba(60,0,3,.612) 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 50%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 50%)}

/* Unten dieselbe Logik: konstanter Ton, mit dem Sektion 2 ausläuft */
.bleed__bottom{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;
  background:rgba(60,0,3,.25);
  -webkit-mask-image:linear-gradient(to bottom, transparent 50%, #000 66%);
          mask-image:linear-gradient(to bottom, transparent 50%, #000 66%)}

#grainB{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  mix-blend-mode:overlay;opacity:.16}

/* Der Hero füllt genau einen Viewport, danach geht es weiter */
.hero{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}

/* ---- Untergrund ---- */
.bg{position:absolute;inset:0;z-index:0;background:var(--bg)}
.vig{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:
    /* enger Kontaktschatten direkt unter der Figur */
    radial-gradient(ellipse 27% 22% at 50% 100%, rgba(60,0,3,.86), transparent 74%),
    /* breiter, weicher Schatten drumherum */
    radial-gradient(ellipse 53% 57% at 50% 104%, rgba(60,0,3,.64), rgba(60,0,3,.24) 58%, transparent 82%)}
/* Roter Dunst über der Figur: unten löst sie sich in den Hintergrund auf */
.haze{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom, transparent 36%, rgba(210,24,31,.28) 66%,
             rgba(190,20,27,.56) 87%, rgba(168,16,24,.74) 100%)}
.vig2{position:absolute;inset:0;z-index:7;pointer-events:none;mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 74% 70% at 50% 50%, transparent 30%, rgba(60,0,3,.22) 60%, rgba(60,0,3,.54) 100%),
    linear-gradient(to bottom, rgba(60,0,3,.18), transparent 15%, transparent 81%, rgba(60,0,3,.24))}

/* ---- Fotoebenen ---- */
/* Zentrierung über automatische Ränder statt über transform: GSAP darf
   x frei animieren, ohne dass sich beide Versätze addieren */
.ph{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;
  height:87%;                                   /* Storyboard: Oberkante 13% */
  width:min(90vw, calc(87svh * .688));          /* Seitenverhältnis der Freisteller */
  pointer-events:none}
.ph--back{z-index:2}
.ph--front{z-index:5;will-change:opacity;background-image:var(--imgA)}
.ph, .sl, .gh{background-repeat:no-repeat;background-position:bottom center;background-size:contain}
/* Maske auf den Containern, dadurch werden auch die Glitch-Scheiben
   und das Geisterbild sauber an den Rändern ausgeblendet */
.ph, .gh{
  -webkit-mask-image:var(--fadeX),var(--fadeY);
          mask-image:var(--fadeX),var(--fadeY);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
/* Scheiben für den Glitch: zusammen ergeben sie das ganze Bild */
.sl{position:absolute;inset:0;will-change:transform,clip-path}
/* Geisterbild für den Farbversatz, nur während des Glitch sichtbar */
.gh{position:absolute;inset:0;z-index:3;opacity:0;mix-blend-mode:screen;will-change:transform,opacity}

/* ---- Typo ---- */
.txLayer{position:absolute;inset:0;z-index:4;pointer-events:none}
/* Über dem vorderen Foto (z-index 5), damit der Fließtext nie verdeckt wird */
.txLayer--body{z-index:6}
/* Oberkante des Typoblocks. Der Schriftzug und der Fließtext richten sich
   daran aus, beide folgen also automatisch mit. */
.tx{position:absolute;left:50%;top:19.3%;transform:translateX(-50%);font-size:var(--f);width:0}

/* Kein transform in der CSS: die Zentrierung setzt GSAP über xPercent,
   sonst liest GSAP den berechneten Pixelwert aus und addiert beides */
.head{position:absolute;left:0;top:-.0415em;font-size:1em;margin:0;
  font-family:'Archivo',sans-serif;font-variation-settings:"wdth" 125,"wght" 900;
  font-weight:900;text-transform:uppercase;line-height:.787;letter-spacing:0;
  white-space:nowrap;text-align:center;color:#fff;will-change:transform}
/* Desktop: die Spans sind reine Haken fürs Mobil-Layout und bleiben
   inline, die echten <br> erzeugen den Umbruch wie im Storyboard */
.head .ln{display:inline}
.head .hm{display:none}
.head .l3{display:block;transform:translateX(1.822em)}

.hand{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hand text{font-family:'Reenie Beanie',cursive;fill:#fff}

/* top war ursprünglich 3.30em. Eine Zeile misst .128em * 1.4163 = .1813em,
   der Block sitzt also genau zwei Zeilen höher. */
.bodyPos{position:absolute;left:-5.101em;top:2.937em}
/* Alle Fließtexte hängen an var(--f) und schrumpfen damit mit der
   Fensterbreite. Unterhalb eines kleinen Laptops landeten sie dadurch
   bei acht bis elf Pixeln. max() zieht einen harten Boden ein: ab
   1280 px gewinnt weiterhin die gerechnete Größe, darunter der Boden. */
.body{font-size:max(min(14px,3.4vh),.128em);line-height:1.4163;white-space:nowrap;color:#fff;margin:0}
.body b{font-weight:700;font-variation-settings:"wght" 700}

/* ---- Kopfzeile: Logo links, CTA rechts, beide auf der Flucht
       der Textblöcke. Der Balken ist genau so breit wie der
       Fließtextblock, von -5,101em bis +5,101em um die Mitte. ---- */
.topbar{position:absolute;z-index:8;
  top:clamp(16px,3.2vh,44px);
  left:50%; transform:translateX(-5.101em);
  font-size:var(--f); width:10.202em;
  display:flex;align-items:center;justify-content:space-between;gap:1em}

.mark{font-family:'Archivo',sans-serif;font-variation-settings:"wdth" 125,"wght" 900;
  font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:1;
  font-size:max(20px, calc(var(--f) * .205));
  color:transparent;
  -webkit-text-stroke-width:max(1.2px, calc(var(--f) * .0105));
  -webkit-text-stroke-color:rgba(255,255,255,.92);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color .45s cubic-bezier(.4,0,.2,1), -webkit-text-stroke-color .45s}
.mark:hover{color:#fff;-webkit-text-stroke-color:#fff}
@supports not (-webkit-text-stroke-width: 1px){
  .mark{color:#fff;paint-order:stroke fill;
        stroke:rgba(255,255,255,.92);stroke-width:1.6px}
}

.cta{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase;letter-spacing:.13em;text-decoration:none;
  font-size:max(10.5px, calc(var(--f) * .066));
  color:#fff;border:1.4px solid rgba(255,255,255,.85);border-radius:999px;
  padding:.95em 1.7em;line-height:1;
  transition:background .4s cubic-bezier(.4,0,.2,1), color .4s, border-color .4s}
/* Die Kurzfassung der Beschriftung greift erst im Mobil-Layout */
.cta .sm{display:none}
.cta:hover{background:#fff;color:var(--red);border-color:#fff}
/* Geöffneter Zustand sieht aus wie Hover, bleibt aber stehen */
.cta.is-open{background:#fff;color:var(--red);border-color:#fff}
.cta.is-open .lbl--open{display:none}
.cta .lbl--close{display:none}
.cta.is-open .lbl--close{display:inline}

/* ---- Kontaktdaten, klappen unter dem CTA auf ---- */
.ctaWrap{position:relative;display:inline-flex}
.contact{position:absolute;top:calc(100% + .85em);right:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:.45em;
  font-size:max(11px, calc(var(--f) * .062));
  pointer-events:none}
.contact.is-open{pointer-events:auto}
.contact a{display:block;opacity:0;text-decoration:none;color:#fff;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-variation-settings:"wdth" 108,"wght" 700;
  font-size:1em;letter-spacing:.07em;line-height:1;
  padding:.42em .05em;border-bottom:1.4px solid rgba(255,255,255,.38);
  transition:border-color .35s cubic-bezier(.4,0,.2,1)}
.contact a:hover{border-color:#fff}

/* ---- Scrollanweisung am unteren Bildrand ----
   Der Pfeil steht über der Zeile, nicht daneben. Die flankierenden
   Linien sitzen deshalb an der Textzeile statt am ganzen Block. */
.soon{position:absolute;left:50%;bottom:clamp(28px,5.4vh,72px);
  transform:translateX(-50%);z-index:8;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:.6em;
  font-size:max(9.5px, calc(var(--f) * .044))}
.soon__tx{display:flex;align-items:center;gap:1.1em;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 108,"wght" 700;font-weight:700;
  text-transform:uppercase;letter-spacing:.36em;text-indent:.36em;
  color:rgba(255,255,255,.78);white-space:nowrap;line-height:1}
.soon__tx::before,.soon__tx::after{content:"";display:block;
  width:3.2em;height:1.2px;flex:none;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.55))}
.soon__tx::after{background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.55))}
/* Der Pfeil wippt leicht — ohne Bewegung liest sich der Hinweis
   wie eine Beschriftung, nicht wie eine Aufforderung */
.soon__pfeil{width:1.5em;height:auto;flex:none;
  animation:soonWippt 2.1s ease-in-out infinite}
.soon__pfeil path{fill:none;stroke:rgba(255,255,255,.78);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes soonWippt{
  0%,100%{transform:translateY(-14%)}
  50%    {transform:translateY(16%)}
}
@media (prefers-reduced-motion: reduce){
  .soon__pfeil{animation:none}
}

@media (max-width:820px){
  /* Logo und Button rücken näher an die Bildschirmkanten */
  .topbar{left:clamp(8px,2.2vw,16px);right:clamp(8px,2.2vw,16px);
          width:auto;transform:none}
  .cta{padding:.85em 1.2em;letter-spacing:.09em}
  /* Ab hier steht nur noch die gekürzte Beschriftung im Button */
  .cta .lg{display:none}
  .cta .sm{display:inline}
  .soon__tx::before,.soon__tx::after{width:1.8em}
}

/* =====================================================================
   Mobil: eigenes Raster. Die Headline bricht in sechs Zeilen um,
   „TOLLE" wandert als fünfte Zeile in den Fluss, der Fließtext steht
   zentriert darunter. Die em-Vermessung des Desktops gilt hier nicht.
   ===================================================================== */
@media (max-width:640px){
  :root{ --f: clamp(30px, 13.2vw, 74px) }

  /* Startwert vor der Messung, die endgültige Höhe setzt placeBody() */
  .tx{left:0;right:0;top:11%;transform:none;width:100%;
      display:flex;flex-direction:column;align-items:center;
      padding:0 clamp(16px,5vw,28px)}

  .head{position:static;transform:none;left:auto;top:auto;
        font-size:1em;line-height:.9;text-align:center;width:100%;
        font-variation-settings:"wdth" 112,"wght" 900;
        white-space:normal}
  /* Die Desktop-Umbrüche entfallen, jedes Wortpaar bekommt eine eigene Zeile */
  .head .brD{display:none}
  .head .ln{display:block}
  .head .l3{display:block;transform:none}
  /* „TOLLE" sitzt mobil im Textfluss, nicht mehr als freies SVG */
  .head .hm{display:block;font-family:'Reenie Beanie',cursive;
            font-variation-settings:normal;font-weight:400;
            text-transform:uppercase;font-size:1.42em;line-height:.72;
            margin:.06em 0 .02em}
  .hand{display:none}

  .bodyPos{position:static;left:auto;top:auto;
           margin-top:.55em;width:100%;max-width:30em}
  .body{font-size:max(min(14px,3.4vh),.2em);line-height:1.5;text-align:center;
        white-space:normal;margin:0 auto}
  /* Die Desktop-Umbrüche entfallen. display:none funktioniert hier,
     weil im Quelltext hinter jedem <br> ein Zeilenumbruch steht, der
     als Wortabstand erhalten bleibt. */
  .body br{display:none}

  /* Das Portrait rückt nach unten, damit die Typo frei steht */
  .ph{height:74%;width:min(94vw, calc(74svh * .688))}

  .soon{bottom:clamp(12px,2vh,22px)}
  .contact{font-size:max(12px, calc(var(--f) * .19))}
  /* Die mitlaufenden Schriftzüge fallen mobil etwas größer aus */
  .drop{font-size:calc(var(--f) * .42)}
}

/* ---- Schriftzüge, die dem Zeiger folgen und herunterfallen ---- */
.drops{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.drop{position:absolute;left:0;top:0;
  font-family:'Reenie Beanie',cursive;color:#fff;
  font-size:calc(var(--f) * .27);line-height:1;white-space:nowrap;
  opacity:0;will-change:transform,opacity}

/* =====================================================================
   Laufband. Eigenständiges Zwischenelement zwischen Hero und dem
   nächsten Block, gehört zu keinem von beiden.
   ===================================================================== */
.ticker{position:relative;width:100%;overflow:hidden;isolation:isolate;
  height:clamp(58px, 8.4vw, 148px);
  background:#141414;
  /* Oben und unten bündig: eine rote Linie an einer roten Fläche
     läse sich als Spalt. Die -1px fangen gebrochene Höhen ab. */
  margin-top:-1px}
.ticker__track{position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;white-space:nowrap;
  will-change:transform;
  animation:tickerRun 42s linear infinite}
.ticker__set{display:flex;align-items:center;flex:none;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  text-transform:uppercase;color:#fff;line-height:1;
  font-size:clamp(34px, 5.3vw, 94px);letter-spacing:-.005em}
.ticker__set b{font-weight:inherit;padding:0 .28em}
/* Die Sterne sitzen etwas höher und schmaler als die Wortmarken */
.ticker__set i{font-style:normal;font-size:.82em;opacity:.92;
  transform:translateY(-.06em);display:inline-block}
@keyframes tickerRun{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Auf fast schwarzem Grund bewirkt overlay so gut wie nichts,
   screen hellt die dunklen Flächen dagegen sichtbar auf */
#grainT{position:absolute;inset:0;z-index:3;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:screen;opacity:.085}

@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
}

/* =====================================================================
   Nächster Block. Noch ohne Inhalt, aber farblich schon an den Hero
   angebunden: Vignette plus zwei langsam gegeneinander driftende
   Wolkenebenen, damit die Fläche nicht als heller Block wegkippt.
   ===================================================================== */
/* =====================================================================
   Sektion 2 — Taschenmesser. Die Sektion wird durch den Scroll-Track
   hoch; der Hintergrund darf nicht mitwachsen, sonst zieht die Vignette
   über die dreifache Höhe. Er hängt deshalb in einer klebenden Hülle
   ohne Eigenhöhe, deren Inhalt genau einen Viewport füllt.
   overflow:clip statt hidden, weil hidden einen Scroll-Container
   aufmacht und damit position:sticky im Inneren aushebeln würde.
   ===================================================================== */
/* Gemeinsame Hülle um Sektion 2 und 3. Der Hintergrund gehört ihr, nicht
   den einzelnen Sektionen — nur so gibt es an der Naht nichts zu sehen.
   Zwei getrennte klebende Ebenen können dort gar nicht zusammenpassen:
   solange Sektion 2 im Bild ist, klebt ihre Ebene oben am Viewport,
   während die von Sektion 3 noch an ihrer Flussposition mitscrollt. */
.rot{position:relative;width:100%;
  background:var(--bg);overflow:clip;isolation:isolate;
  /* schließt bündig an das Laufband an */
  margin-top:-1px}
.rot__bg{position:sticky;top:0;height:0;z-index:0;pointer-events:none}
.rot__bgInner{position:absolute;top:0;left:0;width:100%;height:100svh;
  overflow:hidden;isolation:isolate}
/* Korn über allem, über beide Sektionen hinweg durchgehend */
#grainR,#grainR2{position:sticky;top:0;z-index:5;display:block;
  width:100%;height:100svh;margin-bottom:-100svh;
  pointer-events:none;mix-blend-mode:overlay;opacity:.16}

.next{position:relative;width:100%;background:transparent}

/* Flacher Grundton */
.rot__tone{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:multiply;background:rgba(60,0,3,.23)}

/* Vignette nur seitlich: der große senkrechte Radius sorgt dafür, dass
   Ober- und Unterkante gar nicht erst abgedunkelt werden. */
.rot__vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:multiply;
  background:radial-gradient(ellipse 62% 170% at 50% 50%,
    transparent 64%, rgba(60,0,3,.08) 84%, rgba(60,0,3,.17) 100%)}

/* Wolken. Der Überstand verhindert, dass die Ränder beim Driften auflaufen */
.rot__clouds{position:absolute;inset:-24%;z-index:3;pointer-events:none;
  mix-blend-mode:multiply;will-change:transform}
.rot__clouds--a{opacity:.5;
  background:
    radial-gradient(52% 44% at 20% 26%, rgba(60,0,3,.40), transparent 72%),
    radial-gradient(46% 38% at 72% 16%, rgba(60,0,3,.30), transparent 74%),
    radial-gradient(58% 46% at 56% 74%, rgba(60,0,3,.36), transparent 72%);
  animation:cloudA 54s ease-in-out infinite alternate}
.rot__clouds--b{opacity:.38;
  background:
    radial-gradient(60% 48% at 78% 58%, rgba(60,0,3,.34), transparent 74%),
    radial-gradient(48% 40% at 30% 82%, rgba(60,0,3,.28), transparent 76%),
    radial-gradient(42% 42% at 46% 12%, rgba(60,0,3,.26), transparent 74%);
  animation:cloudB 78s ease-in-out infinite alternate}

/* Eine helle Ebene hält die Fläche in Bewegung, sonst wirkt sie nur dunkler */
.rot__clouds--c{opacity:.26;mix-blend-mode:screen;
  background:
    radial-gradient(56% 44% at 62% 40%, rgba(238,28,35,.42), transparent 74%),
    radial-gradient(46% 38% at 18% 62%, rgba(238,28,35,.30), transparent 76%);
  animation:cloudC 96s ease-in-out infinite alternate}

@keyframes cloudA{
  from{transform:translate3d(-3%,-2%,0) scale(1.04)}
  to  {transform:translate3d( 4%, 3%,0) scale(1.14)}
}
@keyframes cloudB{
  from{transform:translate3d( 4%, 2%,0) scale(1.12)}
  to  {transform:translate3d(-4%,-3%,0) scale(1.02)}
}
@keyframes cloudC{
  from{transform:translate3d( 2%,-3%,0) scale(1.10)}
  to  {transform:translate3d(-3%, 4%,0) scale(1.20)}
}
@media (prefers-reduced-motion: reduce){
  .rot__clouds{animation:none}
}

/* ---------------------------------------------------------------------
   Taschenmesser-Inhalt. Hintergrund, Körnung und Vignette bringt die
   Sektion schon mit, hier steht nur noch Bühne und Kartenspalte.
   --------------------------------------------------------------------- */
.tm-track{position:relative;z-index:2;height:240vh}
.tm-sticky{position:sticky;top:0;height:100svh;z-index:2}
.tm-grid{position:relative;min-height:100%;max-width:1440px;margin:0 auto;
  /* Polster oben zum Laufband, unten deutlich mehr Luft als vorher */
  padding:clamp(44px,7.5vh,110px) clamp(20px,4vw,72px) clamp(26px,5vh,76px);
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,64px);align-items:center}
.tm-stage{position:relative;height:min(74vh,780px)}
.tm-stage canvas{display:block;width:100%;height:100%}
/* Weiche Abschattung unter dem Objekt, ersetzt den Studioboden */
.tm-stage::after{content:"";position:absolute;left:50%;bottom:6%;
  translate:-50% 0;width:62%;height:9%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side, rgba(60,0,3,.5), transparent 72%);
  filter:blur(6px)}

/* Kopf über der Liste. Alle Größen hängen an Breite UND Höhe: auf einem
   breiten, flachen Fenster wäre die Liste sonst unten abgeschnitten. */
.tm-kopf{margin-bottom:clamp(12px,min(2.1vw,2.8vh),32px)}
.tm-titel{font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(26px,min(3.7vw,5.6vh),60px);line-height:.9;
  letter-spacing:-.022em;text-transform:uppercase;margin:0;color:#fff}
/* Das verbindende Wort der Seite, handschriftlich. line-height:0 auf dem
   Inline-Block verhindert, dass die größere Schrift die Zeile aufreißt. */
.tm-titel .hm{font-family:'Reenie Beanie',cursive;
  font-variation-settings:normal;font-weight:400;
  font-size:1.46em;line-height:0;letter-spacing:.012em;
  display:inline-block;transform:translateY(.05em);margin-right:.07em}

/* Liste statt Kacheln: keine Rahmen, keine Rundungen. Die Hierarchie
   macht die Typo, getrennt wird über Haarlinien — dieselbe Sprache
   wie im Hero, wo auch nichts in Containern sitzt. */
.tm-cards{display:flex;flex-direction:column;justify-content:center;min-height:0}
.tm-card{position:relative;text-align:left;width:100%;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(15px,1.7vw,32px);align-items:baseline;
  padding:clamp(7px,min(.95vw,1.25vh),15px) 0 clamp(7px,min(.95vw,1.25vh),15px) clamp(13px,1.35vw,21px);
  border:0;border-top:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;
  -webkit-appearance:none;appearance:none;
  font-family:'Instrument Sans',system-ui,sans-serif;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1),
             border-color .38s}
.tm-card:last-child{border-bottom:1px solid rgba(255,255,255,.22)}

/* Markierung links. Weiß statt Signalrot — auf der roten Fläche
   hätte das Rot der Marke praktisch keinen Kontrast. */
.tm-card::before{content:"";position:absolute;left:0;
  top:clamp(9px,.95vw,15px);bottom:clamp(9px,.95vw,15px);width:2px;
  background:#fff;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s cubic-bezier(.2,.8,.3,1)}

/* Einblenden, sobald der Fächer läuft — gestaffelt */
.tm-cards.is-ready .tm-card{opacity:1;transform:translateY(0)}
.tm-cards.is-ready .tm-card:nth-child(1){transition-delay:.02s}
.tm-cards.is-ready .tm-card:nth-child(2){transition-delay:.07s}
.tm-cards.is-ready .tm-card:nth-child(3){transition-delay:.12s}
.tm-cards.is-ready .tm-card:nth-child(4){transition-delay:.17s}
.tm-cards.is-ready .tm-card:nth-child(5){transition-delay:.22s}
.tm-cards.is-ready .tm-card:nth-child(6){transition-delay:.27s}
.tm-cards.is-ready .tm-card:nth-child(7){transition-delay:.32s}

/* Nur der Inhalt rückt nach, die Markierung bleibt an der Kante stehen */
.tm-card>*{transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.tm-cards.is-ready .tm-card:hover>*,
.tm-cards.is-ready .tm-card.is-on>*,
.tm-cards.is-ready .tm-card:focus-visible>*{transform:translateX(10px)}
.tm-cards.is-ready .tm-card:hover::before,
.tm-cards.is-ready .tm-card.is-on::before,
.tm-cards.is-ready .tm-card:focus-visible::before{transform:scaleX(1)}
.tm-cards.is-ready .tm-card:hover,
.tm-cards.is-ready .tm-card.is-on,
.tm-cards.is-ready .tm-card:focus-visible{
  border-top-color:rgba(255,255,255,.5);transition-delay:0s;outline:none}

.tm-nr{font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 112,"wght" 900;font-weight:900;
  font-size:clamp(18px,min(2.35vw,3.7vh),38px);line-height:1;letter-spacing:-.02em;
  color:rgba(255,255,255,.38);font-variant-numeric:tabular-nums;
  transition:color .38s, transform .38s cubic-bezier(.2,.8,.3,1)}
.tm-card.is-on .tm-nr,.tm-card:hover .tm-nr,
.tm-card:focus-visible .tm-nr{color:#fff}
.tm-card h3{font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 118,"wght" 900;font-weight:900;
  font-size:clamp(16px,min(1.95vw,3vh),32px);letter-spacing:-.012em;
  text-transform:uppercase;line-height:1;
  margin:0 0 4px;color:#fff}
/* Der Text steht nicht mehr in der Zeile. Aufgeklappt hätte er alles
   darunter weggeschoben — die Liste wäre unter dem Zeiger gewandert.
   Er liegt jetzt in einer Fläche unter der Liste mit fest reservierter
   Höhe, dadurch bewegt sich beim Wechseln überhaupt nichts mehr. */
.tm-card p{display:none}

/* Der Textblock schwebt links neben dem Messer. Absolut gesetzt zum
   Raster, damit er weder Liste noch Bühne verschiebt — die Liste bleibt
   dadurch beim Hovern vollkommen ruhig. Die Breite hält ihn links vom
   Fächer, auch wenn der voll aufgeklappt ist. */
.tm-info{position:absolute;left:0;top:8%;z-index:3;
  width:min(30%, 30ch);margin:0;pointer-events:none;
  padding-left:clamp(10px,.9vw,18px);
  border-left:1.6px solid rgba(255,255,255,.38);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:max(min(14px,3.4vh), calc(var(--f) * .108));line-height:1.42;
  color:rgba(255,255,255,.92)}
.tm-info p{margin:0;
  opacity:0;transform:translateY(6px);
  transition:opacity .32s ease, transform .38s cubic-bezier(.2,.8,.3,1)}
.tm-info.is-da p{opacity:1;transform:translateY(0)}

/* Sieben Zeilen in dieser Größe brauchen Höhe. Ab 880px Fensterhöhe
   greifen schmalere Polster — bei 1440x800 wäre es sonst übergelaufen. */
/* Eigene Kompaktregel entfällt: alle Größen sind über min() bereits
   an die Fensterhöhe gebunden und schrumpfen von selbst mit. */
@media (max-width:900px){
  .tm-track{height:200vh}
  /* Die Werkzeugspitzen reichen weit nach unten aus der Bühne heraus —
     ohne kräftigen Abstand klebt das Messer in der Liste */
  .tm-grid{grid-template-columns:1fr;grid-template-rows:auto auto;
    gap:clamp(30px,6vh,74px);padding-block:4vh 5vh;align-content:center}
  .tm-stage{height:34vh}
  .tm-card{padding-block:10px}
  .tm-kopf{margin-bottom:14px}
  /* Mobil schwebt nichts: dort steht der Text wieder im Fluss unter
     der Liste, sonst läge er auf dem Messer */
  .tm-info{position:static;width:auto;max-width:38ch;
    margin-top:clamp(14px,2vh,26px);
    padding:clamp(10px,1.4vh,18px) 0 0;
    border-left:0;border-top:1px solid rgba(255,255,255,.22);
    min-height:calc(4 * 1.42em);
    font-size:max(min(14px,3.4vh), calc(var(--f) * .2))}
}
@media (prefers-reduced-motion: reduce){
  .tm-card{transition:none}
}

/* =====================================================================
   Sektion 3 — Video. Der Rahmen wächst beim Scrollen auf 75% des Bildes.
   Aufbau wie Sektion 2: klebender Hintergrund ohne Eigenhöhe, Korn als
   oberste Ebene, dazwischen ein Track, der den Fortschritt liefert.
   ===================================================================== */
.vid{position:relative;width:100%;background:transparent}

.vid__track{position:relative;z-index:2;height:230vh}
.vid__sticky{position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vh,50px);
  padding:clamp(52px,9vh,130px) clamp(20px,4vw,72px) clamp(20px,3vh,44px)}

/* Kopfzeile: erste beiden Zeilen schwarz, die Pointe weiß */
.vid__titel{margin:0;text-align:center;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(26px,min(3.9vw,6vh),68px);line-height:.84;
  letter-spacing:-.028em;text-transform:uppercase}
.vid__titel .dunkel{color:#0B0B0B}
.vid__titel .hell{color:#fff}

/* Bühne. Der Rahmen selbst behält seine Endgröße und wird skaliert —
   das läuft auf der Grafikkarte und bleibt beim Wachsen scharf. */
.vid__stage{position:relative;display:flex;align-items:center;
  justify-content:center;width:100%;flex:0 1 auto}
.vid__frame{position:relative;display:block;padding:0;border:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  /* 75% der Breite, aber über die Höhe gedeckelt: sonst schiebt der
     Rahmen die Überschrift bei flachen Fenstern aus dem Bild */
  width:min(75vw, 118vh);aspect-ratio:16/9;
  border-radius:clamp(10px,1.4vw,26px);
  background:#0B0B0B center/cover no-repeat;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(30,0,2,.75);
  transform:scale(.42);transform-origin:50% 50%;
  will-change:transform}
.vid__noise{position:absolute;inset:0;width:100%;height:100%;
  display:block;opacity:0;transition:opacity .18s;pointer-events:none}
.vid__frame.is-noise .vid__noise{opacity:1}

/* Liegt ein Standbild im Rahmen, braucht es eine Abdunklung — sonst
   verschwindet der Abspielknopf in einem hellen Frame. */
.vid__frame.hat-poster::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,0,1,.26), rgba(8,0,1,.5))}

/* Abspielknopf */
.vid__play{z-index:2;position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(44px,5.2vw,96px);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  display:grid;place-items:center;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.3,1),
             background .3s, border-color .3s}
.vid__play::before{content:"";width:26%;aspect-ratio:1;
  translate:12% 0;
  background:#fff;
  clip-path:polygon(0 0, 100% 50%, 0 100%)}
.vid__frame:hover .vid__play{background:rgba(255,255,255,.14);
  transform:scale(1.08);border-color:#fff}
.vid__frame.is-noise .vid__play,.vid__frame.is-soon .vid__play{
  opacity:0;transform:scale(.8)}

/* Hinweis nach dem Klick */
.vid__soon{position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 112,"wght" 900;font-weight:900;
  font-size:clamp(13px,1.5vw,28px);letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  opacity:0;transform:scale(.94);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
.vid__frame.is-soon .vid__soon{opacity:1;transform:scale(1)}

/* Handschriftlicher Hinweis mit Pfeil. Er sitzt links neben dem Rahmen
   und wandert mit dessen Kante nach außen, während der Rahmen wächst —
   sonst läge er am Ende darunter. Die Position setzt das Skript. */
.vid__hint{position:absolute;right:62%;top:50%;
  translate:0 -50%;display:flex;align-items:center;
  gap:clamp(8px,1vw,18px);pointer-events:none;
  color:#fff}
.vid__hintTx{font-family:'Reenie Beanie',cursive;font-weight:400;
  font-size:clamp(19px,1.9vw,33px);line-height:.82;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.vid__arrow{width:clamp(30px,3.7vw,72px);height:auto;flex:none;overflow:visible}
.vid__arrow path{fill:none;stroke:#fff;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .vid__track{height:200vh}
  /* Gestapelt statt nebeneinander — sonst schöbe der Hinweis als
     Flex-Nachbar den Rahmen aus der Mitte */
  .vid__stage{flex-direction:column;gap:clamp(6px,1.4vh,16px)}
  .vid__frame{width:min(88vw, 128vh)}
  .vid__hint{position:static;translate:none;right:auto;
    order:-1;justify-content:center}
  .vid__hintTx{text-align:center}
  .vid__arrow{transform:rotate(90deg)}
}
@media (prefers-reduced-motion: reduce){
  .vid__frame{transition:none}
}

/* =====================================================================
   Sektion 4 — About. Wortmarke über die volle Breite, darunter ein
   Polaroid, das sich zum Mauszeiger neigt, unten rechts der Text.
   ===================================================================== */
.abt{position:relative;width:100%;min-height:100svh;
  /* deutlicher Abstand zur Videosektion darüber */
  /* unten ebenfalls kräftig, sonst stößt das Polaroid an die
     nächste Sektion */
  padding:clamp(110px,19vh,300px) 0 clamp(70px,11vh,180px)}

/* Die Größe setzt das Skript. Gemessen wird das Inline-Element darin:
   ein Blockelement liefert über scrollWidth die Breite seiner Box,
   nicht die des Textes. */
.abt__wort{margin:0;width:100%;text-align:center;white-space:nowrap;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:14vw;line-height:.74;letter-spacing:-.028em;
  text-transform:uppercase;color:#fff}
.abt__wort span{display:inline-block}

/* Polaroid mittig, Text rechts — beide auf derselben Grundlinie.
   Die Seitenspalten sind über minmax(0,1fr) gleich breit, sonst
   würde der Text die Mitte verschieben. */
.abt__unten{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end;gap:clamp(14px,2.2vw,44px);
  padding:0 clamp(20px,4vw,72px);
  /* zieht das Polaroid in die Wortmarke hinein */
  margin-top:clamp(-190px,-9vw,-50px)}
.abt__polaWrap{grid-column:2;display:flex;justify-content:center;
  perspective:1000px}
.abt__pola{position:relative;margin:0;
  width:min(46vw,54vh);
  background:linear-gradient(160deg,#FFFFFF 0%,#FAF8F5 46%,#EFEBE6 100%);
  /* Anteilig statt in Pixeln: Prozentwerte beziehen sich auf die eigene
     Breite, das Passepartout bleibt damit auf jedem Gerät gleich breit
     im Verhältnis zum Bild. */
  padding:5.2% 5.2% 19.5%;
  border-radius:2px;
  box-shadow:0 42px 90px -34px rgba(28,0,2,.7);
  transform:rotateZ(-1.6deg);
  transform-style:preserve-3d;will-change:transform}

/* Rückseite, um die Papierstärke nach hinten versetzt. Beim Neigen wird
   der Versatz als Kante sichtbar — ohne sie bliebe das Polaroid eine
   Fläche ohne Dicke. */
.abt__pola::after{content:"";position:absolute;inset:0;
  border-radius:2px;
  background:linear-gradient(160deg,#E6E1DB,#C6C0B9);
  transform:translateZ(-7px)}

/* Glanz auf dem Papier. Der Lichtfleck wandert gegen die Neigung, als
   stünde die Lampe fest im Raum — das verkauft die Drehung. */
.abt__pola::before{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;border-radius:2px;mix-blend-mode:screen;
  background:radial-gradient(130% 95% at var(--gx,50%) var(--gy,14%),
    rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 34%,
    rgba(255,255,255,0) 62%)}

/* height:auto ist hier Pflicht, nicht Kosmetik: das <img> trägt width-
   und height-Attribute, damit vor dem Laden Platz reserviert ist. Die
   wirken als Presentational Hint und setzen height:1050px — ohne das
   auto bliebe die Höhe starr stehen und aspect-ratio käme gar nicht
   erst zum Zug. */
.abt__pola img{display:block;position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:8/7;
  object-fit:cover;background:#DAD9D7;
  box-shadow:0 1px 4px rgba(20,0,2,.22)}

.abt__text{grid-column:3;justify-self:end;align-self:end;
  /* rückt vom rechten Rand weg nach innen */
  margin:0 clamp(10px,5vw,120px) 0 0;
  max-width:34ch;
  font-family:'Instrument Sans',system-ui,sans-serif;
  /* Exakt die Größe des Hero-Fließtexts: dort .128em auf var(--f) */
  font-size:max(14px, calc(var(--f) * .128));line-height:1.4163;
  color:rgba(255,255,255,.94)}

@media (max-width:900px){
  .abt{padding-top:clamp(44px,8vh,110px);padding-bottom:clamp(30px,6vh,64px)}
  .abt__unten{grid-template-columns:1fr;margin-top:clamp(-70px,-6vw,-24px);
    justify-items:center}
  .abt__polaWrap{grid-column:1}
  .abt__pola{width:min(74vw,46vh)}
  .abt__text{grid-column:1;justify-self:center;
    margin:clamp(20px,4vh,44px) 0 0;max-width:38ch;
    /* wie der Hero-Fließtext auf Mobil: .2em auf var(--f) */
    font-size:max(14px, calc(var(--f) * .2));line-height:1.5;text-align:center}
}

/* =====================================================================
   Sektion 5 — Stimmen. Karten liegen wie ausgelegte Spielkarten:
   gefächert, die mittlere obenauf. Beim Zeigen kommt eine nach vorn.
   ===================================================================== */
.stm{position:relative;width:100%;min-height:100svh;
  padding:clamp(70px,12vh,190px) clamp(20px,4vw,72px) clamp(40px,7vh,110px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,5vh,80px)}
.stm__titel{margin:0;text-align:center;max-width:22ch;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(26px,min(4.4vw,6.6vh),72px);line-height:.88;
  letter-spacing:-.026em;text-transform:uppercase;color:#fff}
.stm__titel .hm{font-family:'Reenie Beanie',cursive;
  font-variation-settings:normal;font-weight:400;
  font-size:1.46em;line-height:0;letter-spacing:.012em;
  display:inline-block;transform:translateY(.05em);margin:0 .05em}

.stm__fach{position:relative;width:100%;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px}
.stm__karte{position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  width:min(25vw,40vh);aspect-ratio:1/1.13;
  background:linear-gradient(160deg,#FFFFFF,#F4F1ED);
  border-radius:clamp(10px,1.1vw,20px);
  padding:clamp(13px,1.5vw,26px) clamp(12px,1.3vw,22px) clamp(11px,1.2vw,20px);
  display:flex;flex-direction:column;justify-content:space-between;
  text-align:center;color:#111;
  box-shadow:0 30px 60px -26px rgba(28,0,2,.6);
  /* Der Versatz kommt jetzt aus dem Skript, gedreht wird um die Mitte */
  transform-origin:50% 50%;
  transition:box-shadow .45s cubic-bezier(.2,.8,.3,1);
  will-change:transform}
.stm__zitat{margin:0;flex:1 1 auto;display:flex;align-items:center;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 112,"wght" 900;font-weight:900;
  font-size:clamp(13px,min(1.35vw,2.1vh),22px);line-height:1.14;
  letter-spacing:-.01em;text-transform:uppercase}
.stm__wer{margin:0}
.stm__name{display:block;font-family:'Reenie Beanie',cursive;
  font-size:clamp(17px,min(1.6vw,2.5vh),26px);line-height:1;
  text-transform:uppercase;letter-spacing:.04em}
.stm__rolle{display:block;margin-top:.35em;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(8.5px,min(.66vw,1.05vh),11px);
  letter-spacing:.13em;text-transform:uppercase;color:rgba(0,0,0,.55)}

/* Die vorderste Karte hebt sich ab */
.stm__karte.is-vorn{z-index:9;box-shadow:0 46px 90px -30px rgba(28,0,2,.72)}

/* Punkte nur auf schmalen Schirmen — dort wird gewischt */
.stm__punkte{display:none;gap:9px;justify-content:center}
.stm__punkt{width:8px;height:8px;padding:0;border-radius:50%;
  border:1.2px solid rgba(255,255,255,.55);background:transparent;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .3s, border-color .3s, transform .3s}
.stm__punkt.is-an{background:#fff;border-color:#fff;transform:scale(1.15)}

@media (max-width:900px){
  .stm{padding:clamp(50px,9vh,120px) clamp(16px,4vw,32px) clamp(30px,6vh,70px);
    gap:clamp(20px,4vh,48px)}
  /* Nebeneinander wäre auf schmalen Schirmen unlesbar — hier wird
     wieder gestapelt und stattdessen gewischt */
  .stm__karte{width:min(56vw,32vh)}
  /* pan-y lässt die Seite senkrecht scrollen, waagerecht werten wir aus */
  .stm__fach{touch-action:pan-y}
  .stm__punkte{display:flex}
}

/* =====================================================================
   Sektion 6 — Projekte. Dunkel, damit sie sich vom roten Block absetzt.
   Zwei Bänder laufen gegenläufig; beim Zeigen hält das Band an.
   ===================================================================== */
.wrk{position:relative;width:100%;background:#17171B;
  overflow:clip;isolation:isolate;margin-top:-1px;
  padding:clamp(60px,10vh,150px) 0 clamp(60px,10vh,150px)}
/* Dieselbe Idee auf der dunklen Fläche, nur kühler und schwächer —
   auf Schwarz trägt schon wenig Aufhellung weit */
.wrk__streif{position:absolute;inset:-30%;z-index:1;pointer-events:none;
  mix-blend-mode:screen;will-change:transform}
.wrk__streif--a{opacity:.20;
  background:linear-gradient(100deg,
    transparent 28%, rgba(120,60,58,.34) 44%, rgba(176,96,88,.5) 51%,
    rgba(120,60,58,.34) 58%, transparent 72%);
  animation:streifA 41s ease-in-out infinite alternate}
.wrk__streif--b{opacity:.12;
  background:linear-gradient(84deg,
    transparent 32%, rgba(96,52,52,.3) 46%, rgba(140,80,76,.42) 51%,
    rgba(96,52,52,.3) 57%, transparent 70%);
  animation:streifB 62s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){
  .wrk__streif{animation:none}
}
#grainW{position:absolute;inset:0;z-index:4;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:screen;opacity:.085}
.wrk__kopf{position:relative;z-index:2;text-align:center;
  padding:0 clamp(20px,4vw,72px);margin-bottom:clamp(34px,6vh,90px)}
.wrk__titel{margin:0;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(28px,min(4.6vw,7vh),76px);line-height:.9;
  letter-spacing:-.026em;text-transform:uppercase;color:#fff}
.wrk__titel .hm{font-family:'Reenie Beanie',cursive;
  font-variation-settings:normal;font-weight:400;
  font-size:1.46em;line-height:0;letter-spacing:.012em;
  display:inline-block;transform:translateY(.05em);margin:0 .05em}
.wrk__intro{margin:clamp(14px,2vh,26px) auto 0;max-width:62ch;
  font-family:'Instrument Sans',system-ui,sans-serif;
  /* dieselbe Größe wie der Hero-Fließtext: dort .128em auf var(--f) */
  font-size:max(14px, calc(var(--f) * .128));line-height:1.55;
  color:rgba(255,255,255,.72)}

.wrk__band{position:relative;z-index:2;overflow:hidden;
  margin-bottom:clamp(14px,2.2vh,30px)}
.wrk__band:last-of-type{margin-bottom:0}
.wrk__lauf{display:flex;width:max-content;
  animation:wrkLauf 64s linear infinite}
.wrk__band--zurueck .wrk__lauf{animation-direction:reverse}
.wrk__band:hover .wrk__lauf{animation-play-state:paused}
.wrk__satz{display:flex;flex:none;gap:clamp(12px,1.4vw,26px);
  padding-right:clamp(12px,1.4vw,26px)}
@keyframes wrkLauf{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

.wrk__karte{position:relative;flex:none;
  width:clamp(220px,26vw,420px);aspect-ratio:16/10;
  border-radius:clamp(10px,1vw,18px);overflow:hidden;
  border:0;padding:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;
  background:#1A0A0B;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.wrk__karte:hover{transform:translateY(-6px)}
/* Fläche aus überlagerten Radialverläufen — vertritt das spätere Bild */
.wrk__karte::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(38% 54% at 22% 30%, rgba(214,26,32,.85), transparent 66%),
    radial-gradient(44% 48% at 74% 26%, rgba(150,14,18,.9), transparent 68%),
    radial-gradient(52% 60% at 42% 82%, rgba(238,28,35,.6), transparent 70%),
    radial-gradient(36% 44% at 88% 74%, rgba(96,8,11,.95), transparent 72%),
    linear-gradient(150deg,#2A0709,#120304)}
/* Sobald ein Bild hinterlegt ist, tritt die Ersatzfläche zurück */
.wrk__karte{background-size:cover;background-position:center}
.wrk__karte.hat-bild::before{opacity:.28}
.wrk__karte:nth-child(2)::before{transform:scale(1.3) rotate(28deg)}
.wrk__karte:nth-child(3)::before{transform:scale(1.5) rotate(-42deg)}
.wrk__karte:nth-child(4)::before{transform:scale(1.25) rotate(74deg)}
.wrk__karte:nth-child(5)::before{transform:scale(1.4) rotate(-15deg)}
.wrk__pille{position:relative;z-index:2;
  margin-bottom:clamp(12px,1.4vw,24px);
  padding:.72em 1.35em;border-radius:999px;
  border:1.3px solid rgba(255,255,255,.85);
  background:rgba(10,4,5,.28);backdrop-filter:blur(4px);
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;font-weight:800;
  font-size:clamp(9px,.72vw,12px);letter-spacing:.16em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:background .35s, color .35s}
.wrk__karte:hover .wrk__pille{background:#fff;color:#111}

@media (max-width:900px){
  /* Bei 26vw blieben die Karten auf dem Mindestwert stehen und die
     Beschriftung lief seitlich heraus */
  .wrk__karte{width:clamp(240px,72vw,420px)}
  .wrk__pille{white-space:normal;text-align:center;
    max-width:86%;line-height:1.3;letter-spacing:.12em;
    padding:.7em 1.1em}
  .wrk__intro{font-size:max(14px, calc(var(--f) * .2))}
}
@media (prefers-reduced-motion: reduce){
  .wrk__lauf{animation:none}
}

/* =====================================================================
   Sektion 7 — Kontakt. Statt einer Box zwei Zeilen, die sich beim
   Zeigen füllen: die Kontaktdaten sind hier das Gestaltungselement.
   ===================================================================== */
.kon{position:relative;width:100%;min-height:100svh;
  padding:clamp(70px,12vh,180px) clamp(20px,4vw,72px) clamp(30px,5vh,70px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(36px,6vh,90px)}
.kon__titel{margin:0;max-width:18ch;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(32px,min(6.2vw,9.2vh),112px);line-height:.86;
  letter-spacing:-.028em;text-transform:uppercase;color:#fff}
.kon__titel .hm{font-family:'Reenie Beanie',cursive;
  font-variation-settings:normal;font-weight:400;
  font-size:1.46em;line-height:0;letter-spacing:.012em;
  display:inline-block;transform:translateY(.05em);margin:0 .05em}

/* Statt zweier gleichrangiger Zeilen: die Adresse ist das Element.
   Sie ist der eigentliche Handlungsaufruf, alles andere ordnet sich unter. */
.kon__aktion{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(10px,1.6vh,22px)}
.kon__kritzel{display:flex;align-items:center;gap:.55em;
  font-family:'Reenie Beanie',cursive;font-weight:400;
  font-size:clamp(19px,min(2vw,3vh),34px);line-height:1;
  text-transform:uppercase;letter-spacing:.03em;
  color:rgba(255,255,255,.9);margin-left:clamp(4px,1vw,22px)}
.kon__kritzel svg{width:clamp(26px,3vw,54px);height:auto;
  transform:rotate(8deg)}
.kon__kritzel path{fill:none;stroke:#fff;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}

.kon__mail{position:relative;display:inline-block;text-decoration:none;
  color:#fff;padding:.06em .1em .1em;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 118,"wght" 900;font-weight:900;
  font-size:clamp(21px,min(4.4vw,6.4vh),82px);line-height:1;
  letter-spacing:-.028em;white-space:nowrap}
/* Der Strich zieht sich beim Zeigen unter der Adresse durch */
.kon__mail::after{content:"";position:absolute;left:0;right:0;
  bottom:-.02em;height:.075em;background:#fff;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.kon__mail:hover::after,.kon__mail:focus-visible::after{transform:scaleX(1)}
.kon__mail:focus-visible{outline:none}

.kon__tel{display:inline-block;text-decoration:none;
  margin-left:clamp(4px,1vw,22px);
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 112,"wght" 800;font-weight:800;
  font-size:clamp(14px,min(1.5vw,2.3vh),27px);line-height:1;
  letter-spacing:.02em;color:rgba(255,255,255,.72);
  border-bottom:1.4px solid rgba(255,255,255,.34);
  padding-bottom:.18em;transition:color .35s, border-color .35s}
.kon__tel:hover,.kon__tel:focus-visible{color:#fff;border-color:#fff;outline:none}

.kon__fuss{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:flex-start;gap:clamp(10px,2vw,30px);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(10px,.78vw,13px);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.kon__fuss b{font-weight:500;color:rgba(255,255,255,.92)}
.kon__impLink{border:0;background:none;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;font:inherit;
  letter-spacing:inherit;text-transform:inherit;
  color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.34);
  padding-bottom:.2em;transition:color .3s, border-color .3s}
.kon__impLink:hover,.kon__impLink:focus-visible{
  color:#fff;border-color:#fff;outline:none}
/* Derselbe Stil auch als Verweis auf den jeweils anderen Bereich */
a.kon__impLink{display:inline-block;text-decoration:none}

@media (max-width:900px){
  .kon{padding-top:clamp(50px,9vh,120px)}
  /* Die Adresse ist zu lang für schmale Schirme — hier darf sie brechen */
  .kon__mail{white-space:normal;font-size:clamp(21px,7.4vw,38px);
    line-height:1.06;letter-spacing:-.02em}
  .kon__mail::after{display:none}
  .kon__mail{border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:.08em}
}

/* =====================================================================
   Fester Knopf rechts unten — öffnet WhatsApp direkt.
   Liegt über allem außer dem Ladescreen und ist währenddessen aus.
   ===================================================================== */
.fab{position:fixed;right:clamp(14px,2.2vw,34px);bottom:clamp(14px,2.2vw,34px);
  z-index:40;display:flex;align-items:center;gap:0;
  height:clamp(48px,4.4vw,64px);padding:0 clamp(11px,1vw,15px);
  border-radius:999px;background:#fff;color:#111;
  text-decoration:none;overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(20,0,2,.6);
  transition:gap .38s cubic-bezier(.2,.8,.3,1),
             padding .38s cubic-bezier(.2,.8,.3,1),
             transform .3s cubic-bezier(.2,.8,.3,1)}
.fab svg{width:clamp(24px,2.2vw,31px);height:auto;flex:none}
.fab svg path{fill:none;stroke:#111;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* Die Beschriftung fährt beim Zeigen heraus statt einfach aufzutauchen */
.fab__tx{max-width:0;opacity:0;white-space:nowrap;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;font-weight:800;
  font-size:clamp(10px,.78vw,13px);letter-spacing:.14em;text-transform:uppercase;
  transition:max-width .38s cubic-bezier(.2,.8,.3,1), opacity .3s}
.fab:hover,.fab:focus-visible{gap:.7em;padding-right:clamp(16px,1.5vw,22px);
  transform:translateY(-2px);outline:none}
.fab:hover .fab__tx,.fab:focus-visible .fab__tx{max-width:11em;opacity:1}
body.is-loading .fab{opacity:0;pointer-events:none}

/* =====================================================================
   Impressum als Auflage
   ===================================================================== */
.imp{position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.imp.is-auf{display:flex}
.imp__grund{position:absolute;inset:0;background:rgba(12,0,1,.72);
  backdrop-filter:blur(6px)}
.imp__blatt{position:relative;z-index:1;width:min(560px,100%);
  max-height:86vh;overflow:auto;
  background:#fff;color:#111;border-radius:clamp(10px,1vw,18px);
  padding:clamp(22px,3vw,44px);
  box-shadow:0 40px 90px -30px rgba(20,0,2,.7)}
.imp__blatt h3{margin:0 0 .7em;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 118,"wght" 900;font-weight:900;
  font-size:clamp(19px,2vw,30px);line-height:1;
  letter-spacing:-.015em;text-transform:uppercase}
.imp__blatt p{margin:0 0 .9em;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(13px,1vw,15px);line-height:1.55;color:#333}
.imp__blatt p:last-child{margin-bottom:0}
.imp__blatt a{color:#111;text-decoration:underline;text-underline-offset:2px}
.imp__blatt b{font-weight:600}
.imp__zu{position:absolute;top:clamp(10px,1.2vw,18px);right:clamp(10px,1.2vw,18px);
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.07);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  display:grid;place-items:center;transition:background .3s}
.imp__zu:hover{background:rgba(0,0,0,.14)}
.imp__zu svg{width:14px;height:14px}
.imp__zu path{stroke:#111;stroke-width:2.4;stroke-linecap:round}

/* Medium in der Kachel. Liegt über der Ersatzfläche, die Beschriftung
   darüber. Videos laufen hier stumm im Loop. */
.wrk__medium{position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;
  /* Die Datei kommt erst, wenn die Kachel ins Bild läuft. Bis dahin
     steht die farbige Ersatzfläche allein — ein schwarzes Rechteck
     wäre schlechter als gar kein Bild. */
  opacity:0;transition:opacity .5s ease}
.wrk__karte.hat-medium .wrk__medium{opacity:1}
.wrk__karte.hat-medium::before{opacity:.22}
@media (prefers-reduced-motion: reduce){
  .wrk__medium{transition:none}
}

/* =====================================================================
   Vergrößerung. Bild oder Video in groß, Videos hier mit Ton.
   ===================================================================== */
.lb{position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,3vw,44px)}
.lb.is-auf{display:flex}
.lb__grund{position:absolute;inset:0;background:rgba(10,0,1,.86);
  backdrop-filter:blur(8px)}
.lb__rahmen{position:relative;z-index:1;
  width:min(1240px,100%);display:flex;flex-direction:column;
  gap:clamp(10px,1.4vh,20px);align-items:center}
.lb__medium{display:block;max-width:100%;max-height:76vh;
  width:auto;height:auto;object-fit:contain;
  border-radius:clamp(6px,.8vw,14px);background:#0B0B0D;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lb__fuss{display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  flex-wrap:wrap;justify-content:center}
.lb__titel{margin:0;color:#fff;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 112,"wght" 800;font-weight:800;
  font-size:clamp(11px,1vw,15px);letter-spacing:.16em;text-transform:uppercase}
.lb__link{color:#fff;text-decoration:none;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(11px,.86vw,13px);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1.3px solid rgba(255,255,255,.5);padding-bottom:.2em;
  transition:border-color .3s}
.lb__link:hover{border-color:#fff}
.lb__zu{position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);
  z-index:2;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  display:grid;place-items:center;transition:background .3s}
.lb__zu:hover{background:rgba(255,255,255,.28)}
.lb__zu svg{width:15px;height:15px}
.lb__zu path{stroke:#fff;stroke-width:2.4;stroke-linecap:round}

/* Lichtstreifen. Zwei weiche Bänder wandern gegenläufig und
   unterschiedlich schnell über die Fläche — dadurch wiederholt sich
   das Muster nie sichtbar. screen hellt auf, statt Farbe zu ändern. */
.rot__streif{position:absolute;inset:-35%;z-index:3;pointer-events:none;
  mix-blend-mode:screen;will-change:transform}
.rot__streif--a{opacity:.15;
  background:linear-gradient(102deg,
    transparent 26%, rgba(255,138,124,.34) 42%, rgba(255,186,168,.52) 50%,
    rgba(255,138,124,.34) 58%, transparent 74%);
  animation:streifA 34s ease-in-out infinite alternate}
.rot__streif--b{opacity:.09;
  background:linear-gradient(88deg,
    transparent 30%, rgba(255,160,142,.3) 44%, rgba(255,204,186,.44) 51%,
    rgba(255,160,142,.3) 58%, transparent 72%);
  animation:streifB 53s ease-in-out infinite alternate}
@keyframes streifA{
  from{transform:translate3d(-40%,-6%,0) rotate(-1deg)}
  to  {transform:translate3d( 40%, 6%,0) rotate(1.5deg)}
}
@keyframes streifB{
  from{transform:translate3d( 36%, 5%,0) rotate(1deg)}
  to  {transform:translate3d(-36%,-5%,0) rotate(-1.5deg)}
}
@media (prefers-reduced-motion: reduce){
  .rot__streif{animation:none}
}

/* ---- Lebendes Filmkorn ---- */
#grain{position:absolute;inset:0;z-index:9;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:overlay;opacity:.16}

/* =====================================================================
   Ladescreen. Liegt über allem, bringt Vignette und Korn selbst mit
   und übergibt nach dem Ausblenden an den Hero.
   ===================================================================== */
.load{position:fixed;inset:0;z-index:50;background:var(--bg);
  overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center}
/* Dieselben Verläufe wie .vig2 im Hero, dazu ein flacher Grundton.
   Der Ladescreen war vorher deutlich heller als die Seite dahinter —
   an den Rändern lag er bei Helligkeit 59 gegenüber 49 im Hero.
   Der Grundton steht als Verlauf da: eine nackte Farbe wäre in der
   Kurzschreibweise nur am Ende erlaubt und würde die Regel sonst kippen. */
.loadVig{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:
    linear-gradient(rgba(60,0,3,.10), rgba(60,0,3,.10)),
    radial-gradient(ellipse 74% 70% at 50% 50%, transparent 30%, rgba(60,0,3,.22) 60%, rgba(60,0,3,.54) 100%),
    linear-gradient(to bottom, rgba(60,0,3,.18), transparent 15%, transparent 81%, rgba(60,0,3,.24))}
#grainL{position:absolute;inset:0;z-index:4;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:overlay;opacity:.16}

.load__mitte{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,2.4vh,34px);padding:0 clamp(16px,4vw,48px)}

/* Die Wortmarke füllt sich von links, während geladen wird. Die Kontur
   steht von Anfang an — man sieht also, wohin es geht, und der
   Fortschritt ist das Bild selbst statt eines Balkens daneben. */
.load__wort{position:relative;display:inline-block;white-space:nowrap;
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;
  font-size:clamp(30px,min(11vw,16vh),172px);line-height:1;
  letter-spacing:-.012em;text-transform:uppercase}
.load__kontur{display:block;color:transparent;
  -webkit-text-stroke:clamp(1.2px,.16vw,3px) rgba(255,255,255,.72);
  paint-order:stroke fill}
.load__voll{position:absolute;left:0;top:0;display:block;
  width:0;overflow:hidden;color:#fff;
  -webkit-text-stroke:0}

.load__zahl{font-family:'Reenie Beanie',cursive;font-weight:400;
  font-size:clamp(20px,min(2.4vw,3.6vh),42px);line-height:1;
  letter-spacing:.06em;color:rgba(255,255,255,.86)}
/* Das verbindende Wort auch hier handschriftlich */
.load__schritt .hs{font-family:'Reenie Beanie',cursive;font-weight:400;
  font-size:1.75em;line-height:0;letter-spacing:.02em;
  text-transform:none;display:inline-block;transform:translateY(.09em)}
.load__schritt{font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:500;font-size:clamp(9px,.72vw,12px);
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);min-height:1.2em}