/* =========================================================
   GUIDO KOCH — grafik-koch.de · Layout nach InDesign-Vorlage
   „261030_GK_Webseite_01.pdf“ (1440 px breit)

   Maßsystem: Alle Werte stehen in Layout-Pixeln der Vorlage und werden
   mit --u multipliziert. Bei 1440 px Fensterbreite ist --u = 1px, die
   Seite entspricht dann 1:1 dem PDF. Schmaler oder breiter skaliert alles
   proportional (max. 1,25×). Unter 900 px greift ein eigenes Mobil-Layout.
   ========================================================= */

/* ---------- SCHRIFTEN (selbst gehostet, DSGVO) ---------- */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/fraunces.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/hanken-grotesk.woff2") format("woff2"); }

:root{
  color-scheme:dark;
  /* Farben aus der Vorlage (CMYK → sRGB gemessen) */
  --bg:#11100D;          /* Seitengrund */
  --teal:#3997A2;        /* Hero, Leistungen, Footer, Projekttitel */
  --red:#E03D2A;         /* „Schreib mir.“, Band, Kontakt-Hover */
  --white:#FFFFFF;
  --black:#050606;       /* „Schreib mir.“ oben */
  --ink:#11100D;         /* Text auf Weiß */
  --teal-l1:#D1F0EB;     /* helle Töne aus den Icons */
  --line:rgba(255,255,255,.9);

  --f-display:"Fraunces", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;

  --u:min(1.25px, calc(100vw / 1440));   /* 1 Layout-Pixel */
  --r:calc(5 * var(--u));                /* Eckenradius der Karten & Buttons */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{ background:var(--bg); color:var(--white); font-family:var(--f-body); font-weight:300; overflow-x:hidden;
  /* WONK steht in dieser Fraunces-Datei standardmäßig auf 1 → seitenweit auf 0 */
  font-variation-settings:"SOFT" 0, "WONK" 0; }
main, .ftr{ max-width:calc(1440 * var(--u)); margin-inline:auto; position:relative; }
main{ overflow-x:clip; }
html, body{ overflow-x:hidden; }
@supports (overflow:clip){ html, body{ overflow-x:clip; } }
::selection{ background:var(--teal); color:var(--white); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong, b{ font-weight:650; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:12px; top:-60px; z-index:3000; background:var(--white); color:var(--ink); padding:10px 16px; border-radius:4px; }
.skip:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.nowrap{ white-space:nowrap; }

.card{ border-radius:var(--r); }
.eyebrow{ display:block; font-family:var(--f-body); font-weight:500; font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u));
  letter-spacing:.075em; text-transform:uppercase; }
.tlink{ color:var(--teal); font-weight:650; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--ease); }
.tlink:hover{ background-size:100% 1px; }

/* Filmkorn – derzeit aus (Schalter „grain“ in js/main.js); nur aktiv, wenn <html> die Klasse .grain hat */
.grain body::after{ content:""; position:fixed; inset:0; z-index:2500; pointer-events:none; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.logo-svg{ display:block; fill:currentColor; overflow:visible; }

/* ---------- BUTTONS ----------
   Alle Buttons: Text rollt beim Hover nach oben durch.
   Kontakt-Buttons (.btn-contact) färben sich beim Hover in Orange/Rot. */
.btn{ display:inline-flex; align-items:center; gap:calc(10 * var(--u)); height:calc(41.4 * var(--u)); padding:0 calc(16.2 * var(--u));
  border-radius:var(--r); font-family:var(--f-body); font-size:calc(15 * var(--u)); font-weight:550; letter-spacing:0; white-space:nowrap;
  border:1px solid transparent; transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.roll{ display:inline-block; position:relative; overflow:hidden; line-height:1.3; vertical-align:middle; }
.roll::after{ content:attr(data-text); position:absolute; left:0; top:100%; white-space:nowrap; }
.roll, .roll::after{ transition:transform .55s var(--ease); }
/* Text bleibt beim Hover stehen (kein Durchrollen) */
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover{ background:var(--ink); color:var(--white); }
/* Menü-Button: beim Hover und im geöffneten Zustand negativ */
.btn-menu.btn-white:hover, .menu-open .btn-menu.btn-white{ background:var(--ink); color:var(--white); }
.btn-black{ background:var(--black); color:var(--white); }
.btn-outline{ border-color:var(--white); color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--ink); }
.btn-red{ background:var(--red); color:var(--white); }
.btn-red:hover{ background:var(--white); color:var(--ink); }
/* Kontakt-Buttons → Orange, sofern sie nicht schon orange sind */
.btn-contact:not(.btn-red):hover, .btn-contact:not(.btn-red):focus-visible{ background:var(--red); border-color:var(--red); color:var(--white); }

/* ---------- PRELOADER ---------- */
.preloader{ position:fixed; inset:0; z-index:2000; background:var(--bg); display:flex; align-items:flex-end; padding:calc(40 * var(--u)) max(16px, calc(59 * var(--u))); }
.no-preloader .preloader, .rm .preloader, .no-js .preloader{ display:none; }
.pl-inner{ width:100%; }
.pl-logo{ width:min(520px,70vw); color:var(--white); margin-bottom:clamp(28px,6vh,70px); }
.pl-logo path{ fill-opacity:0; stroke:var(--teal); stroke-width:1; }
.pl-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.pl-tag{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.6); }
.pl-count{ font-family:var(--f-display); font-weight:340; font-size:clamp(4rem,14vw,13rem); line-height:.8; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pl-bar{ height:1px; background:rgba(255,255,255,.18); margin-top:18px; }
.pl-bar span{ display:block; height:100%; width:0; background:var(--teal); }

/* ---------- CURSOR ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:2400; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--white); pointer-events:none; mix-blend-mode:difference; display:flex; align-items:center; justify-content:center;
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s, opacity .3s; opacity:0; }
.cursor.on{ opacity:1; }
.cursor.is-link{ width:44px; height:44px; margin:-22px 0 0 -22px; }
.cursor.is-label{ width:96px; height:96px; margin:-48px 0 0 -48px; background:var(--teal); mix-blend-mode:normal; }
.cursor-label{ font-size:13px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--white); opacity:0; transition:opacity .25s; white-space:nowrap; }
.cursor.is-label .cursor-label{ opacity:1; }
/* Stimmen: großer Kreis mit zwei Pfeilen (aus der Vorlage) */
.cursor-arrows{ position:absolute; inset:0; opacity:0; transform:scale(.4); transition:opacity .3s, transform .45s var(--ease); }
.cursor-arrows svg{ width:100%; height:100%; display:block; }
.cursor.is-arrows{ width:72px; height:72px; margin:-36px 0 0 -36px; background:transparent; mix-blend-mode:normal; }
.cursor.is-arrows .cursor-arrows{ opacity:1; transform:none; }
.cursor.is-arrows.pressing .cursor-arrows{ transform:scale(.88); }
@media (hover:hover) and (pointer:fine){ .has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor]{ cursor:none; } }

/* ---------- GK-BUTTON oben links (Spiegelbild der Header-Buttons, gleiche Höhe) ---------- */
.gk-top{ position:fixed; z-index:1500; top:calc(39.7 * var(--u)); left:max(16px, calc(50vw - 720 * var(--u) + 69 * var(--u)));
  width:calc(41.4 * var(--u)); height:calc(41.4 * var(--u)); border-radius:50%; background:var(--black); color:var(--white);
  box-shadow:inset 0 0 0 1px transparent;
  opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s, background .3s, color .3s, box-shadow .3s; }
.gk-top.is-on{ opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s, background .3s, color .3s, box-shadow .3s; }
/* Zeichen „gk“ (SVG aus Illustrator, als Fläche gefüllt) – Farbe folgt currentColor */
.gk-glyph{ position:absolute; inset:0; width:100%; height:100%; fill:currentColor; fill-rule:evenodd; }
.gk-top:hover, .gk-top:focus-visible{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
/* Über dunklen Flächen: weißer Kreis, beim Hover Türkis */
.gk-top[data-tone="dark"]{ background:var(--white); color:var(--ink); }
.gk-top[data-tone="dark"]:hover, .gk-top[data-tone="dark"]:focus-visible{ background:var(--teal); color:var(--white); box-shadow:none; }
.rm .gk-top, .rm .gk-top.is-on{ transition:none; }

/* ---------- HEADER: feste Buttons oben rechts ---------- */
.hdr{ position:fixed; z-index:1500; top:calc(39.7 * var(--u)); right:max(16px, calc(50vw - 720 * var(--u) + 69 * var(--u)));
  display:flex; gap:calc(15 * var(--u)); }
.btn-menu{ padding-left:calc(15.7 * var(--u)); padding-right:calc(15 * var(--u)); gap:calc(10.7 * var(--u)); }
/* Drei versetzte Linien – beim Hover verschieben sie sich gegeneinander */
.menu-lines{ position:relative; display:block; width:calc(19 * var(--u)); height:calc(10 * var(--u)); }
.menu-lines i{ position:absolute; left:0; height:1.6px; background:currentColor; border-radius:1px;
  transition:transform .5s var(--ease), width .5s var(--ease), left .5s var(--ease), top .5s var(--ease), opacity .3s; }
.menu-lines i:nth-child(1){ top:0; left:calc(7 * var(--u)); width:calc(12 * var(--u)); }
.menu-lines i:nth-child(2){ top:calc(4.2 * var(--u)); width:calc(19 * var(--u)); }
.menu-lines i:nth-child(3){ top:calc(8.6 * var(--u)); width:calc(12 * var(--u)); }
.btn-menu:hover .menu-lines i:nth-child(1){ left:0; }
.btn-menu:hover .menu-lines i:nth-child(2){ transform:scaleX(.55); transform-origin:100% 50%; }
.btn-menu:hover .menu-lines i:nth-child(3){ left:calc(7 * var(--u)); }
.menu-open .menu-lines i:nth-child(1){ left:0; width:calc(19 * var(--u)); top:calc(4.2 * var(--u)); transform:rotate(45deg); }
.menu-open .menu-lines i:nth-child(2){ opacity:0; }
.menu-open .menu-lines i:nth-child(3){ left:0; width:calc(19 * var(--u)); top:calc(4.2 * var(--u)); transform:rotate(-45deg); }
/* Über dunklen Flächen wird „Schreib mir.“ orange, damit es sichtbar bleibt */
.hdr[data-tone="dark"] .btn-black{ background:var(--red); }
/* Orange Buttons auf Schwarz → beim Hover weiß */
.hdr[data-tone="dark"] .btn-black:hover, .hdr[data-tone="dark"] .btn-black:focus-visible{ background:var(--white); border-color:var(--white); color:var(--ink); }
.hdr[data-tone="light"] .btn-menu{ background:var(--ink); color:var(--white); }
.hdr[data-tone="light"] .btn-menu:hover, .menu-open .hdr[data-tone="light"] .btn-menu{ background:var(--white); color:var(--ink); border-color:var(--ink); }

/* ---------- DROP-DOWN-MENÜ ---------- */
.dd{ position:absolute; left:0; right:0; top:calc(100% + 10 * var(--u));   /* so breit wie „Schreib mir.“ + „Menü“ */ background:var(--white); color:var(--ink);
  border-radius:var(--r); box-shadow:0 30px 60px -20px rgba(0,0,0,.45); padding:calc(18 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  visibility:hidden; clip-path:inset(0 0 100% 0 round 5px); }
.dd.open{ visibility:visible; }
.dd-nav{ display:flex; flex-direction:column; }
.dd-nav a{ display:flex; align-items:baseline; gap:calc(14 * var(--u)); padding:calc(6 * var(--u)) 0; overflow:hidden;
  font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0; font-size:calc(34 * var(--u)); line-height:1.1; letter-spacing:-.015em; }
.dd-num{ font-family:var(--f-body); font-size:calc(12 * var(--u)); font-weight:500; letter-spacing:.08em; color:rgba(17,16,13,.5); min-width:2.2em; }
.dd-txt{ display:inline-block; transition:color .3s; }
.dd-nav a:hover .dd-txt, .dd-nav a:focus-visible .dd-txt{ color:var(--teal); }
.dd-foot{ display:flex; flex-direction:column; gap:calc(4 * var(--u)); margin-top:calc(16 * var(--u)); padding-top:calc(14 * var(--u)); border-top:.5px solid rgba(17,16,13,.25);
  font-size:calc(15 * var(--u)); font-weight:500; letter-spacing:.02em; }
.dd-foot a:hover{ color:var(--teal); }

/* =========================================================
   SEKTIONEN – Werte = Positionen aus der Vorlage (1440 breit)
   ========================================================= */

/* ---------- HERO (Karte 25–1415 × 25–830) ---------- */
.hero{ padding:calc(25 * var(--u)) calc(25 * var(--u)) 0; }
.hero-card{ position:relative; height:calc(805 * var(--u)); background:var(--teal); overflow:hidden; isolation:isolate; }
.hero-logo{ position:absolute; left:calc(28.3 * var(--u)); top:calc(24 * var(--u)); width:calc(386 * var(--u)); color:var(--white); z-index:2; }
.hero-title{ position:absolute; left:calc(32 * var(--u)); top:calc(294.5 * var(--u)); z-index:2;
  font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 99,"SOFT" 0,"WONK" 0; font-size:calc(122 * var(--u)); line-height:calc(128.8 * var(--u)); letter-spacing:-.022em; white-space:nowrap; }
.ln{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em; }
.ln > span{ display:inline-block; }
.rot{ position:relative; display:inline-block; vertical-align:top; white-space:nowrap; }
.rot .ch{ display:inline-block; }
.hero-actions{ position:absolute; right:calc(44.5 * var(--u)); top:calc(619 * var(--u)); display:flex; gap:calc(15.5 * var(--u)); z-index:3; }
.hero-bar{ position:absolute; left:calc(34 * var(--u)); right:calc(34 * var(--u)); top:calc(718 * var(--u)); border-top:1px solid var(--white);
  padding-top:calc(16.8 * var(--u)); text-align:center; font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u)); font-weight:500; letter-spacing:.078em; text-transform:uppercase; z-index:2; }
/* Bildspur hinter der Headline */
.trail{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.trail img{ position:absolute; left:0; top:0; max-width:none; width:calc(220 * var(--u)); aspect-ratio:374/482; object-fit:cover;   /* gleiches Format wie die Kacheln */ border-radius:var(--r);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45); will-change:transform,opacity; }

/* ---------- STATEMENT (Seite 830–1800) ---------- */
.statement{ position:relative; height:calc(970 * var(--u)); }
.stm-bg{ position:absolute; left:0; right:0; top:calc(100 * var(--u)); height:calc(820 * var(--u)); pointer-events:none; overflow:hidden; }
.stm-svg{ width:100%; height:100%; display:block; }
.stm-content{ position:absolute; left:0; right:0; top:calc(169.6 * var(--u)); text-align:center; }
.stm-big{ font-family:var(--f-display); font-weight:480; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(69.5 * var(--u)); line-height:calc(73.4 * var(--u)); letter-spacing:-.024em; perspective:1000px; }
.stm-big .hi, .stm-body .hi{ color:var(--teal); }
.stm-body{ font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); }
.stm-body:nth-of-type(2){ margin-top:calc(77 * var(--u)); }
.stm-body:nth-of-type(3){ margin-top:calc(58.3 * var(--u)); }
.stm-big .w{ opacity:.18; }
.no-scrub .stm-big .w{ opacity:1; }
.stm-big .sl{ display:block; }

/* ---------- ARBEITEN (Seite ab 1800) ---------- */
.works{ position:relative; overflow-x:clip; }   /* seitlich einfahrende Überschrift darf nicht überstehen */
.ribbon{ position:absolute; left:0; top:calc(165 * var(--u)); width:calc(1200 * var(--u)); height:calc(3344 * var(--u)); z-index:0; pointer-events:none; overflow:visible; }
.ribbon-line{ opacity:.5; }
.aus-bandweg .ribbon{ display:none !important; }   /* Testhilfe: ?aus=bandweg */
.works-head{ position:relative; height:calc(397 * var(--u)); z-index:2; }
.works-eyebrow{ position:absolute; left:calc(170 * var(--u)); top:calc(66.5 * var(--u)); z-index:2; }
.mega{ font-family:var(--f-display); font-weight:340; font-variation-settings:"opsz" 126,"SOFT" 0,"WONK" 0; font-size:calc(211.6 * var(--u)); line-height:calc(172.1 * var(--u)); letter-spacing:-.022em; white-space:nowrap; }
.mega-a, .mega-b{ position:absolute; display:block; will-change:transform; }
.mega-a{ left:calc(38 * var(--u)); top:calc(62.4 * var(--u)); letter-spacing:-.036em; }
.mega-b{ left:calc(783.9 * var(--u)); top:calc(234.5 * var(--u)); color:var(--teal); letter-spacing:-.031em; }

/* Vier Highlight-Kacheln, versetzt wie im Layout (Positionen pro Platz) */
.cases{ position:relative; height:calc(1767.8 * var(--u)); z-index:1; }
.case{ position:absolute; display:block; width:calc(374.1 * var(--u)); }
.case:nth-child(1){ left:calc(177.9 * var(--u)); top:0; }
.case:nth-child(2){ left:calc(835.9 * var(--u)); top:calc(277 * var(--u)); }
.case:nth-child(3){ left:calc(177.9 * var(--u)); top:calc(845 * var(--u)); }
.case:nth-child(4){ left:calc(835.9 * var(--u)); top:calc(1086 * var(--u)); }
.case-fig{ position:relative; height:calc(481.7 * var(--u)); border-radius:var(--r); overflow:hidden; background:var(--teal); }
/* Bild füllt die Kachel exakt (kein Überstand mehr für Parallax) – im Format 374:482 wird nichts beschnitten */
.case-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Hover-Bild 2 px größer als die Kachel: an Bruchteil-Pixel-Kanten (Skalierung, Parallax) blitzt sonst das Kachelbild als Haarlinie durch */
.case-fig .img-b{ inset:auto; left:-2px; top:-2px; width:calc(100% + 4px); height:calc(100% + 4px); max-width:none; clip-path:circle(0% at var(--cx,50%) var(--cy,50%)); transition:clip-path .8s var(--ease); }
.case:hover .case-fig .img-b, .case:focus-visible .case-fig .img-b{ clip-path:circle(150% at var(--cx,50%) var(--cy,50%)); }
.case-fig video{ position:absolute; display:block; object-fit:cover; }
.case-fig .hv-vid{ opacity:0; transition:clip-path .8s var(--ease), opacity .3s; }
.case-fig .hv-vid.is-playing{ opacity:1; }
.case-fig.vid-auto .img-b{ clip-path:none; }   /* Handy: Hover-Video liegt offen über dem Kachelbild */
.case-fig .img-a{ transition:opacity 0s linear 0s; }
.case:hover .case-fig .img-a, .case:focus-visible .case-fig .img-a{ opacity:0; transition:opacity .2s linear .45s; }   /* Kachelbild verschwindet hinter dem geöffneten Hover-Bild – nichts kann mehr durchblitzen */
.case-tag{ position:absolute; top:calc(502.7 * var(--u)); font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u)); font-weight:500; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.case-title{ position:absolute; top:calc(521.8 * var(--u)); font-family:var(--f-display); font-weight:480; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(51 * var(--u)); line-height:calc(56 * var(--u)); letter-spacing:-.029em; color:var(--teal); white-space:nowrap; transition:color .35s; }
.case:hover .case-title{ color:var(--white); }
/* individuelle Versätze von Kategorie und Titel (aus dem Layout) */
.case:nth-child(1) .case-tag{ left:calc(234 * var(--u)); }   .case:nth-child(1) .case-title{ left:calc(36.1 * var(--u)); }
.case:nth-child(2) .case-tag{ left:calc(123.3 * var(--u)); } .case:nth-child(2) .case-title{ left:calc(94.1 * var(--u)); }
.case:nth-child(3) .case-tag{ left:calc(37.8 * var(--u)); }  .case:nth-child(3) .case-title{ left:calc(99.7 * var(--u)); }
.case:nth-child(4) .case-tag{ left:calc(224.2 * var(--u)); } .case:nth-child(4) .case-title{ left:calc(44 * var(--u)); }

/* „Was sonst noch?“ */
.more{ position:relative; z-index:1; padding:0 calc(59 * var(--u)); }
.more .eyebrow{ height:calc(35.2 * var(--u)); }
.more-list{ list-style:none; }
.more-list{ position:relative; }
/* Linien: 1 px hoch, auf ein Viertel gestaucht = halb so dick wie bisher (0,25 px) */
.more-list::before, .more-row::before, .more-row::after{ content:""; position:absolute; left:0; width:100%; height:1px; transform-origin:0 50%; }
.more-list::before{ top:0; background:var(--white); transform:scaleY(.25); }
.more-row{ position:relative; display:block; width:100%; text-align:left; padding:calc(18.4 * var(--u)) 0 calc(21.35 * var(--u)); }
.more-row::before{ bottom:0; background:var(--white); transform:scaleY(.25); }
/* Hover: dieselbe Linie färbt sich langsam von links nach rechts türkis – gleiche Stärke */
/* Hover: eine deutlich dickere türkise Linie läuft langsam von links nach rechts über die feine Linie */
.more-row::after{ bottom:-1.5px; height:3px; z-index:2; background:var(--teal); transform:scaleX(0); transition:transform 1.6s cubic-bezier(.35,.05,.2,1); }
.more-row:hover::after, .more-row:focus-visible::after{ transform:scaleX(1); }
.more-t{ display:block; font-family:var(--f-display); font-weight:480; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(51 * var(--u)); line-height:calc(56 * var(--u)); letter-spacing:-.025em; color:var(--teal); transition:color .35s; }
.more-row:hover .more-t, .more-row:focus-visible .more-t{ color:var(--white); }
.more-preview{ position:fixed; left:0; top:0; z-index:900; width:calc(320 * var(--u)); aspect-ratio:4/3; pointer-events:none; opacity:0; transform:scale(.6); }
.mp-inner{ position:relative; width:100%; height:100%; border-radius:var(--r); overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }
.mp-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- ÜBER MICH (weiße Karte 4992–6116) ---------- */
.about{ position:relative; z-index:3; margin:calc(130 * var(--u)) calc(25 * var(--u)) 0; background:var(--white); color:var(--ink); padding-bottom:calc(54.6 * var(--u)); }
.about-eyebrow{ position:absolute; left:calc(34 * var(--u)); top:calc(36.3 * var(--u)); }
.about-top{ position:relative; height:calc(672 * var(--u)); }
.about-portrait{ position:absolute; left:calc(34 * var(--u)); top:calc(75 * var(--u)); width:calc(478 * var(--u)); height:calc(597 * var(--u)); border-radius:var(--r); overflow:hidden; background:var(--teal); }
.about-portrait img, .about-portrait video{ display:block; width:100%; height:100%; object-fit:cover; }
.about-ich{ position:absolute; left:calc(542 * var(--u)); top:calc(48.4 * var(--u)); font-family:var(--f-display); font-weight:340; font-variation-settings:"opsz" 126,"SOFT" 0,"WONK" 0; font-size:calc(211.6 * var(--u)); line-height:calc(200 * var(--u)); letter-spacing:-.03em; }
.about-big{ position:absolute; right:calc(27.5 * var(--u)); top:calc(241.4 * var(--u)); text-align:right; font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(50 * var(--u)); line-height:calc(55 * var(--u)); letter-spacing:-.021em; }
.about-body{ margin-top:calc(91.4 * var(--u)); text-align:center; font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); }
.about-body p + p{ margin-top:calc(31 * var(--u)); }

/* ---------- ÜBERGANG „Klingt nach guter Zusammenarbeit?“ ---------- */
.bridge{ text-align:center; padding:calc(98.8 * var(--u)) 0 calc(114.6 * var(--u)); }
.bridge-q{ font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(50 * var(--u)); line-height:calc(56 * var(--u)); letter-spacing:-.021em; margin-bottom:calc(22.2 * var(--u)); }
/* zweiter Übergang zwischen Arbeiten und Über mich: übernimmt den Abstand, den sonst „Über mich“ nach oben hat */
.bridge-works{ position:relative; z-index:2; padding:calc(150 * var(--u)) 0 calc(130 * var(--u)); }
.bridge-works + .about{ margin-top:0; }

/* ---------- LEISTUNGEN (Karte 6449–7254) ---------- */
.services{ position:relative; margin:0 calc(25 * var(--u)); padding-bottom:calc(80 * var(--u)); background:var(--teal); }
.srv-head{ position:relative; display:block; height:calc(315 * var(--u)); font-weight:inherit; }
.srv-eyebrow{ position:absolute; right:calc(313.7 * var(--u)); top:calc(66.8 * var(--u)); }
.srv-mega{ position:absolute; left:0; right:0; top:calc(54.5 * var(--u)); text-align:center; font-family:var(--f-display); font-weight:340; font-variation-settings:"opsz" 126,"SOFT" 0,"WONK" 0; font-size:calc(211.6 * var(--u)); line-height:calc(200 * var(--u)); letter-spacing:-.031em; }
.srv-stack{ position:relative; margin-left:calc(165 * var(--u)); width:calc(1060 * var(--u)); }
.srv-stack.is-stacked{ height:calc(410 * var(--u)); }
.srv-stack.is-stacked .srv-card{ position:absolute; inset:0; margin:0; }
.srv-card + .srv-card{ margin-top:calc(24 * var(--u)); }
.srv-card{ position:relative; height:calc(410 * var(--u)); background:var(--bg); border-radius:var(--r); color:var(--white); transform-origin:50% 0; box-shadow:0 -30px 60px -40px rgba(0,0,0,.5); }
.srv-txt{ position:absolute; left:calc(50 * var(--u)); top:calc(42.9 * var(--u)); bottom:calc(50.6 * var(--u)); width:calc(560 * var(--u)); display:flex; flex-direction:column; align-items:flex-start; }
.srv-txt h3{ font-family:var(--f-display); font-weight:480; font-variation-settings:"opsz" 81,"SOFT" 0,"WONK" 0; font-size:calc(69.5 * var(--u)); line-height:calc(74 * var(--u)); letter-spacing:-.024em; margin-bottom:auto; }
.srv-txt p{ font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); margin:calc(18 * var(--u)) 0 calc(23.2 * var(--u)); }
.srv-icon{ position:absolute; left:calc(var(--ix) * var(--u)); top:calc(var(--iy) * var(--u)); width:calc(var(--iw) * var(--u)); }
.srv-icon .icon-svg{ display:block; width:100%; height:auto; overflow:visible; }
.srv-card:nth-child(1) .srv-icon{ --ix:670; --iy:88;  --iw:330; }
.srv-card:nth-child(2) .srv-icon{ --ix:630; --iy:72;  --iw:372; }
.srv-card:nth-child(3) .srv-icon{ --ix:630; --iy:75;  --iw:372; }
.srv-card:nth-child(4) .srv-icon{ --ix:630; --iy:60;  --iw:372; }

/* ---------- STIMMEN ---------- */
.testi{ position:relative; padding:calc(149.8 * var(--u)) 0 calc(51.5 * var(--u)); }
.testi-eyebrow{ margin-left:calc(25 * var(--u)); }
.testi-viewport{ position:relative; margin-top:calc(52.2 * var(--u)); padding-top:calc(19 * var(--u)); overflow:hidden; touch-action:pan-y; outline-offset:-2px; }
.testi-track{ display:flex; gap:calc(30 * var(--u)); padding-left:calc(25 * var(--u)); will-change:transform; user-select:none; -webkit-user-select:none; }
.tcard{ position:relative; flex:0 0 calc(680 * var(--u)); height:calc(367 * var(--u)); background:var(--white); color:var(--ink); border-radius:var(--r); }
.tquote{ position:absolute; left:calc(19 * var(--u)); top:calc(-19 * var(--u)); width:calc(69.7 * var(--u)); height:calc(51.6 * var(--u)); fill:var(--teal); }
.ttext{ position:absolute; left:calc(35 * var(--u)); top:calc(52.8 * var(--u)); width:calc(600 * var(--u)); font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); }
.tavatar{ position:absolute; left:calc(29.9 * var(--u)); top:calc(227 * var(--u)); width:calc(117.6 * var(--u)); height:calc(117.6 * var(--u)); border-radius:50%; overflow:hidden; background:var(--bg); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:calc(34 * var(--u)); }
.tavatar img{ width:100%; height:100%; object-fit:cover; }
.tname{ position:absolute; left:calc(159 * var(--u)); top:calc(254.4 * var(--u)); font-size:calc(25 * var(--u)); line-height:calc(30 * var(--u)); font-weight:700; }
.trole{ position:absolute; left:calc(159 * var(--u)); top:calc(290.1 * var(--u)); right:calc(20 * var(--u)); font-size:calc(20 * var(--u)); line-height:calc(24 * var(--u)); }
/* Fortschritt: ein Balken pro Stimme, der aktive ist dick und füllt sich während der Lesezeit */
.testi-progress{ display:flex; gap:calc(10.8 * var(--u)); margin:calc(39 * var(--u)) calc(25 * var(--u)) 0; height:calc(9.5 * var(--u)); align-items:center; }
.tp-seg{ position:relative; flex:1; height:2px; background:var(--teal); border-radius:9px; transition:height .45s var(--ease); cursor:pointer; padding:0; }
.tp-seg::before{ content:""; position:absolute; inset:-10px 0; }
.tp-seg.on{ height:calc(9.5 * var(--u)); background:rgba(57,151,162,.45); }
.tp-seg i{ position:absolute; inset:0; border-radius:inherit; background:var(--teal); transform-origin:0 50%; transform:scaleX(0); }
.tp-seg.on i{ transform:scaleX(1); }

/* ---------- KONTAKT ---------- */
.contact{ position:relative; padding:calc(49.8 * var(--u)) 0 calc(130 * var(--u)); min-height:calc(913 * var(--u)); overflow:hidden; }
.contact-eyebrow{ margin-left:calc(85.3 * var(--u)); }
.contact-title{ position:relative; z-index:2; margin:calc(7 * var(--u)) 0 0 calc(74 * var(--u)); font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 99,"SOFT" 0,"WONK" 0; font-size:calc(122 * var(--u)); line-height:calc(128.8 * var(--u)); letter-spacing:-.022em; white-space:nowrap; }
.contact-row{ position:relative; z-index:2; margin-top:calc(65.8 * var(--u)); padding-left:calc(85.3 * var(--u)); }
.contact-text{ font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); }
.contact-text p + p{ margin-top:calc(31 * var(--u)); }
.contact-text .contact-cta{ margin-top:calc(46 * var(--u)); }
.kaboom-trail{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.kaboom-trail img{ position:absolute; left:0; top:0; width:calc(200 * var(--u)); max-width:none; height:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.45)); will-change:transform,opacity; }
/* Vorschau-Karte in Hero und Kontakt: steht halbtransparent in der freien Fläche und schwebt leicht –
   zeigt, dass hier etwas passiert. Verschwindet, sobald die Spur mit der Maus ausgelöst wird.
   Position: left/top in js/main.js (ghost: { x, y }), Schalter „ghost“ oben in main.js. */
.trail .trail-ghost, .kaboom-trail .trail-ghost{ opacity:0; box-shadow:none; filter:none; transform:rotate(-3deg); transition:opacity 2.2s ease-in-out; }
/* Ablauf: langsam einblenden – kurz bevor sie ganz da ist, erstes Ruckeln (ca. 0,6 s, vor allem seitliches Hin und Her, kaum Drehung) –
   1,5 s Pause – insgesamt zweimal – dann blendet die Karte wieder aus (per JS beim Ende der Animation). */
.trail-ghost.is-in{ opacity:.3 !important; animation:ghostNudge 2.1s ease-in-out 1.8s 2; }
.trail-ghost.is-out{ opacity:0 !important; transition-duration:.5s; }
.trail-ghost.is-out.is-slow{ transition-duration:1.4s; }
@keyframes ghostNudge{
  0%        { transform:rotate(-3deg); }
  4%        { transform:translate(calc(26 * var(--u)), calc(-2 * var(--u))) rotate(-1.5deg); }
  9%        { transform:translate(calc(-30 * var(--u)), calc(1 * var(--u))) rotate(-4.5deg); }
  14%       { transform:translate(calc(22 * var(--u)), calc(-2 * var(--u))) rotate(-2deg); }
  19%       { transform:translate(calc(-14 * var(--u)), 0) rotate(-4deg); }
  24%       { transform:translate(calc(5 * var(--u)), 0) rotate(-3deg); }
  29%, 100% { transform:rotate(-3deg); }
}

/* ---------- FOOTER (Karte 8873–9429) ---------- */
.ftr{ padding:0 calc(25 * var(--u)) calc(25 * var(--u)); }
.ftr-card{ position:relative; height:calc(385 * var(--u)); background:var(--teal); }
.ftr-cols{ position:absolute; left:0; right:0; top:calc(57.5 * var(--u)); }
.ftr-col{ position:absolute; top:0; display:flex; flex-direction:column; align-items:flex-start; }
.ftr-col:nth-child(1){ left:calc(60.3 * var(--u)); } .ftr-col:nth-child(2){ left:calc(513 * var(--u)); } .ftr-col:nth-child(3){ left:calc(1075 * var(--u)); }
.ftr-col .eyebrow{ margin-bottom:calc(28.5 * var(--u)); letter-spacing:.069em; }
.ftr-col a{ font-size:calc(22 * var(--u)); line-height:calc(50 * var(--u)); background:linear-gradient(currentColor,currentColor) 0 78%/0 1px no-repeat; transition:background-size .45s var(--ease); }
.ftr-col a:hover{ background-size:100% 1px; }
.ftr-up{ text-transform:uppercase; font-weight:500; letter-spacing:.069em; }
.ftr-track{ font-weight:500; letter-spacing:.075em; }
.ftr-light{ font-weight:300; letter-spacing:.01em; }
.ftr-bottom{ display:flex; justify-content:space-between; gap:16px; margin-top:calc(30 * var(--u)); padding-top:calc(13 * var(--u)); border-top:.5px solid var(--white);
  font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u)); letter-spacing:.02em; }
.ftr-bottom a:hover{ color:var(--teal); }

/* ---------- PROJEKT-DETAIL ---------- */
.pd{ position:fixed; inset:0; z-index:1800; visibility:hidden; }
.pd.open{ visibility:visible; }
.pd-backdrop{ position:absolute; inset:0; background:rgba(5,5,3,.75); opacity:0; transition:opacity .5s; }
.pd.open .pd-backdrop{ opacity:1; }
.pd-panel{ position:absolute; left:max(10px, calc(25 * var(--u))); right:max(10px, calc(25 * var(--u))); bottom:0; top:clamp(40px,8vh,80px); background:var(--bg);
  border-radius:var(--r) var(--r) 0 0; overflow-y:auto; overscroll-behavior:contain; transform:translateY(105%); transition:transform .8s var(--ease-io);
  display:grid; grid-template-columns:minmax(280px,34%) 1fr; border:1px solid rgba(255,255,255,.1); border-bottom:0; }
.pd.open .pd-panel{ transform:none; }
.pd-close{ position:sticky; top:16px; grid-column:1/-1; grid-row:1; justify-self:end; margin:16px 16px 0 0; z-index:3; width:46px; height:46px; border-radius:50%; background:var(--white); color:var(--ink); font-size:1rem; transition:background-color .3s, color .3s; }
.pd-close:hover{ background:var(--red); color:var(--white); }
.pd-text{ grid-row:1/3; grid-column:1; padding:clamp(30px,4vw,60px); align-self:start; position:sticky; top:0; }
.pd-tag{ font-size:14px; }
.pd-title{ font-family:var(--f-display); font-weight:440; font-size:clamp(2.2rem,4.4vw,4.4rem); line-height:1; letter-spacing:-.015em; color:var(--teal); margin:.3em 0 .5em; }
.pd-desc{ color:rgba(255,255,255,.8); font-size:1.12rem; line-height:1.6; max-width:40ch; }
.pd-media{ grid-column:2; grid-row:2; padding:0 clamp(16px,2vw,30px) clamp(16px,2vw,30px); display:flex; flex-direction:column; gap:16px; }
.pd-media img, .pd-media video{ width:100%; border-radius:var(--r); background:#1d1b16; }

/* =========================================================
   MOBIL (unter 900 px): eigenes, fließendes Layout
   ========================================================= */
br.d{ display:inline; }
@media (max-width:900px){
  :root{ --m:clamp(16px, 4.6vw, 32px); }
  br.d{ display:none; }
  .hdr{ top:14px; right:14px; gap:8px; }
  .gk-top{ top:14px; left:14px; width:40px; height:40px; }
  .btn{ height:40px; padding:0 14px; font-size:14px; gap:8px; border-radius:5px; }
  .menu-lines{ width:19px; height:10px; }
  .dd{ padding:14px 20px 16px; top:calc(100% + 8px); }
  .dd-nav a{ font-size:28px; gap:12px; padding:5px 0; }
  .dd-num{ font-size:11px; }
  .dd-foot{ font-size:14px; gap:4px; margin-top:12px; padding-top:12px; }
  .menu-lines i:nth-child(1){ left:7px; width:12px; } .menu-lines i:nth-child(2){ top:4.2px; width:19px; } .menu-lines i:nth-child(3){ top:8.6px; width:12px; }
  .btn-menu:hover .menu-lines i:nth-child(3){ left:7px; }
  .card{ border-radius:5px; }
  .eyebrow{ font-size:12px; line-height:16px; }

  .hero{ padding:10px 10px 0; }
  .hero-card{ height:auto; min-height:calc(100svh - 10px); display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--m) 22px; }
  .hero-logo{ left:var(--m); top:18px; width:min(118px,30vw); }
  .hero-title{ position:relative; left:auto; top:auto; font-size:clamp(46px,13.2vw,96px); line-height:1.06; white-space:normal; margin:120px 0 28px; }
  .hero-actions{ position:relative; right:auto; top:auto; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
  .hero-bar{ position:relative; left:auto; right:auto; top:auto; font-size:12px; line-height:16px; padding-top:14px; }
  .trail{ display:none; }

  .statement{ height:auto; padding:90px var(--m) 70px; }
  .stm-bg{ top:40px; bottom:20px; height:auto; }
  .stm-content{ position:relative; top:auto; }
  .stm-big{ font-size:clamp(30px,8vw,52px); line-height:1.1; }
  .stm-body{ font-size:clamp(17px,4.4vw,22px); line-height:1.38; }
  .stm-body:nth-of-type(2){ margin-top:40px; } .stm-body:nth-of-type(3){ margin-top:26px; }

  .works{ padding:20px 0 0; }
  .ribbon{ display:none; }
  .works-head{ height:auto; padding:0 var(--m); }
  .works-eyebrow{ position:static; margin-bottom:10px; }
  .mega{ font-size:clamp(60px,19vw,140px); line-height:.9; }
  .mega-a, .mega-b{ position:static; }
  .mega-b{ text-align:right; }
  .cases{ height:auto; display:grid; grid-template-columns:1fr; gap:56px; padding:40px var(--m) 0; }
  .case, .case:nth-child(n){ position:relative; left:auto; top:auto; width:100%; }
  .case-fig{ height:auto; aspect-ratio:374/482; }
  .case-tag, .case-title, .case:nth-child(n) .case-tag, .case:nth-child(n) .case-title{ position:static; }
  .case-tag{ display:block; margin-top:16px; font-size:12px; line-height:16px; }
  .case-title{ display:block; font-size:clamp(32px,9vw,46px); line-height:1.1; }
  .more{ padding:70px var(--m) 0; }
  .more .eyebrow{ height:auto; margin-bottom:14px; }
  .more-row, .more-list li:last-child .more-row{ height:auto; padding:14px 0 16px; }
  .more-t{ font-size:clamp(28px,8vw,42px); line-height:1.1; }
  .more-preview{ display:none; }

  .about{ margin:70px 10px 0; padding:22px var(--m) 34px; }
  .about-eyebrow{ position:static; margin-bottom:18px; }
  .about-top{ height:auto; display:flex; flex-direction:column; gap:22px; }
  .about-portrait{ position:relative; left:auto; top:auto; width:100%; height:auto; aspect-ratio:478/597; max-width:440px; }
  .about-ich{ position:static; font-size:clamp(90px,26vw,160px); line-height:.9; }
  .about-big{ position:static; text-align:left; font-size:clamp(24px,6.6vw,38px); line-height:1.12; margin-top:-6px; }
  .about-body{ margin-top:34px; text-align:left; font-size:clamp(17px,4.4vw,22px); line-height:1.4; }
  .about-body p + p{ margin-top:18px; }

  .bridge{ padding:64px var(--m) 70px; }
  .bridge-q{ font-size:clamp(26px,7vw,40px); line-height:1.15; margin-bottom:20px; }
  .bridge-works{ padding:80px var(--m) 70px; }

  .services{ margin:0 10px; height:auto; padding:40px var(--m) 30px; }
  .srv-head{ height:auto; }
  .srv-eyebrow{ position:static; text-align:center; }
  .srv-mega{ position:static; font-size:clamp(60px,17.5vw,140px); line-height:1; margin:6px 0 26px; }
  .srv-stack{ margin-left:0; width:auto; display:grid; gap:14px; }
  .srv-card + .srv-card{ margin-top:0; }
  .srv-card{ height:auto; padding:26px 22px 26px; }
  .srv-txt{ position:static; width:auto; }
  .srv-txt h3{ font-size:clamp(30px,8.4vw,46px); line-height:1.05; margin-bottom:0; }
  .srv-txt p{ font-size:clamp(16px,4.2vw,20px); line-height:1.42; margin:14px 0 20px; }
  .srv-icon{ position:static; width:min(220px,60%); margin:0 0 18px; order:-1; }
  .srv-card{ display:flex; flex-direction:column; }

  .testi{ padding-top:70px; }
  .testi-eyebrow{ margin-left:var(--m); }
  .testi-viewport{ margin-top:22px; padding-top:16px; }
  .testi-track{ gap:12px; padding-left:var(--m); }
  .tcard{ flex-basis:min(84vw,520px); height:auto; min-height:320px; padding:44px 22px 24px; display:flex; flex-direction:column; }
  .tquote{ left:16px; top:-16px; width:50px; height:37px; }
  .ttext, .tname, .trole, .tavatar{ position:static; width:auto; }
  .ttext{ font-size:clamp(16px,4.3vw,19px); line-height:1.42; flex:1; }
  .tperson{ display:grid; grid-template-columns:64px 1fr; column-gap:14px; align-items:center; margin-top:20px; }
  .tavatar{ width:64px; height:64px; grid-row:1/3; font-size:20px; }
  .tname{ font-size:17px; line-height:1.2; align-self:end; }
  .trole{ font-size:14px; line-height:1.3; align-self:start; }
  .testi-progress{ margin:26px var(--m) 0; gap:8px; height:8px; }
  .tp-seg.on{ height:6px; }

  .contact{ height:auto; padding:80px var(--m) 60px; }
  .contact-eyebrow{ margin-left:0; }
  .contact-title{ margin:8px 0 0; font-size:clamp(40px,11.5vw,90px); line-height:1.04; white-space:normal; }
  .contact-row{ margin-top:34px; padding-left:0; display:flex; flex-direction:column; }
  .contact-text{ font-size:clamp(17px,4.4vw,22px); line-height:1.4; }
  .contact-text p + p{ margin-top:16px; }
  .contact-text .contact-cta{ margin-top:28px; }
  .kaboom-trail{ display:none; }

  .ftr{ padding:0 10px 22px; }
  .ftr-card{ height:auto; padding:34px var(--m) 30px; }
      .ftr-cols{ position:static; display:grid; grid-template-columns:1fr; gap:26px; margin-top:0; }   /* untereinander, volle Breite */
  .ftr-col:nth-child(1){ display:none; }   /* Navigation mobil weg – der Menü-Button scrollt immer mit */
  .ftr-col{ position:static; }
  .ftr-col .eyebrow{ margin-bottom:8px; }
  .ftr-col a{ font-size:17px; line-height:36px; }
  .ftr-bottom{ flex-direction:column; font-size:13px; line-height:18px; margin-top:20px; }

  .pd-panel{ grid-template-columns:1fr; top:24px; }
  .pd-text{ position:relative; grid-row:2; padding-top:0; }
  .pd-media{ grid-column:1; grid-row:3; }
}
@media (max-width:420px){ .hero-actions .btn{ flex:1 1 auto; justify-content:center; } }

/* ---------- REDUZIERTE BEWEGUNG ----------
   Über die Klasse .rm (im <head> gesetzt). */
.rm *, .rm *::before, .rm *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
.rm .trail, .rm .kaboom-trail, .rm .cursor, .rm .more-preview{ display:none; }
.rm .stm-big .w{ opacity:1; }

.about-big .bl{ display:block; }

/* geöffnetes Menü: Kreuz bleibt auch beim Hover sauber */
.menu-open .btn-menu .menu-lines i:nth-child(1), .menu-open .btn-menu:hover .menu-lines i:nth-child(1){ left:0; width:calc(19 * var(--u)); top:calc(4.2 * var(--u)); transform:rotate(45deg); transform-origin:50% 50%; }
.menu-open .btn-menu .menu-lines i:nth-child(3), .menu-open .btn-menu:hover .menu-lines i:nth-child(3){ left:0; width:calc(19 * var(--u)); top:calc(4.2 * var(--u)); transform:rotate(-45deg); transform-origin:50% 50%; }
.menu-open .btn-menu .menu-lines i:nth-child(2){ opacity:0; }
@media (max-width:900px){
  .menu-open .btn-menu .menu-lines i:nth-child(1), .menu-open .btn-menu:hover .menu-lines i:nth-child(1),
  .menu-open .btn-menu .menu-lines i:nth-child(3), .menu-open .btn-menu:hover .menu-lines i:nth-child(3){ width:19px; top:4.2px; }
}