/* Archivo steht ueber der Falz und ist vorgeladen. font-display:optional
   statt swap, weil der Wechsel von der Ersatzschrift Breiten aendert:
   der zentrierte Button war 235px mit Archivo und 221px ohne, die
   Eyebrow-Elemente sprangen bis zu 51px seitwaerts. Das kostete 0.113 CLS.
   Mit optional gibt es keinen Umschaltmoment mehr. Newsreader und VT323
   stehen unter der Falz und bleiben auf swap. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-400-normal-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-400-normal-lat.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-500-normal-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-500-normal-lat.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-600-normal-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: optional;
  src: url('../assets/fonts/Archivo-600-normal-lat.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/Newsreader-300-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/Newsreader-300-italic-lat.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Newsreader-400-normal-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Newsreader-400-normal-lat.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;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/VT323-400-normal-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;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/VT323-400-normal-lat.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;
}


/* =========================================================
   Gerhard Kürner — 2026
   Editorial Broadsheet, Blau statt Grün.
   Referenz: newformcap.com (Struktur, Rhythmus, Effekte)
   Stack: HTML / CSS / JS, GSAP + ScrollTrigger, WebGL-Disc
   ========================================================= */

:root{
  /* Papier-Canvas mit kühlem Blaustich statt Bone-Green */
  --paper:      #fafbff;
  --ink:        #10131a;   /* Press Black, blau temperiert */
  --ink-2:      #232733;   /* Slate */
  --gray:       #4d5871;   /* Newsprint Blaugrau */
  --sage:       #c6cede;   /* helle Schrift auf dunklen Flächen */
  --brand:      #004aad;   /* Markenblau aus dem KRNR-Logo, 506.ai und workafterai.org */
  --accent:     #0051ff;   /* Highlighter Blau, der einzige Farbton */
  --moss:       #8fa8d6;
  --echo:       #dde6f6;
  --line:       rgba(16,19,26,.14);
  --line-dark:  rgba(250,251,255,.16);

  --f-sans:  'Archivo', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-serif-i:'Newsreader', Georgia, serif;
  --f-pixel: 'VT323', monospace;
  --f-times: 'Times New Roman', Times, serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1400px;
  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-accent: 1px 8px 20px 0 rgba(9,47,140,.4);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ -webkit-text-size-adjust:100% }
/* Lenis uebernimmt das Scrollen */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.5;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden }

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--accent); color:#fff }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--accent); color:#fff; padding:.75rem 1.25rem; border-radius:6px;
  font-size:.875rem; transition:top .25s var(--ease);
}
.skip:focus{ top:1rem }
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:4px; border-radius:2px;
}

/* Serif immer mit optischer Display-Achse rendern */
.serif-i,.d-serif,.bm-serif,.era__year,.stat__num,.band__k,.loader__mark,.loader__count,
.menu__list a,.venn__circle span{ font-optical-sizing:auto }

/* Serif-Kursiv Akzent (Editorial-New-Rolle) */
.serif-i{ font-family:var(--f-serif-i); font-style:italic; font-weight:300; letter-spacing:-.01em }

/* Micro-Label: die 11px-Typo macht hier die Arbeit des UI-Chromes */
.micro{
  display:block;
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; line-height:1.1;
  color:var(--gray);
}

/* Times-Unterstreichungs-Link, bewusst altmodisch */
.tlink{
  font-family:var(--f-times); font-size:1rem;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .3s;
}
.tlink:hover{ color:var(--accent) }

/* ================= FIXED CHROME ================= */

.grain{
  position:fixed; inset:-150%; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)} 33%{transform:translate(3%,-5%)}
  50%{transform:translate(-2%,4%)} 66%{transform:translate(4%,2%)} 83%{transform:translate(-5%,1%)} 100%{transform:translate(0,0)}
}

.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:transparent;
}
.progress i{ display:block; height:100%; width:0%; background:var(--accent) }

.cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none; opacity:0;
}
.cursor__dot,.cursor__ring{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%); left:0; top:0;
}
.cursor__dot{ width:5px; height:5px; background:var(--ink) }
.cursor__ring{
  width:32px; height:32px; border:1px solid rgba(16,19,26,.4);
  transition:width .35s var(--ease), height .35s var(--ease), border-color .35s;
}
.cursor.is-hover .cursor__ring{ width:60px; height:60px; border-color:var(--accent) }
@media (hover:hover) and (pointer:fine){ .cursor{ opacity:1 } }

/* ================= LOADER ================= */

.loader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--paper);
}
.loader__inner{ width:min(88vw,680px) }
.loader__mark{
  font-family:var(--f-serif);
  font-size:clamp(3rem,10vw,7.5rem); line-height:.9; letter-spacing:-.04em;
}
.loader__mark span{ color:var(--accent) }
.loader__meta{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:1.5rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray);
}
.loader__count{ font-family:var(--f-serif); font-size:clamp(1.5rem,4vw,2.5rem); color:var(--ink); letter-spacing:-.02em }
.loader__bar{ margin-top:1rem; height:1px; background:var(--line) }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--accent) }
.loader__curtain{
  position:absolute; inset:0; background:var(--accent);
  transform:translateY(100%);
}
.loader.is-done{ pointer-events:none }

/* ================= NAV ================= */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2vw,1.6rem) var(--pad);
  transition:color .5s var(--ease);
}
/* KRNR-Wortmarke wie von Gerhard geliefert: Markenblau auf hell,
   Weiss auf dunkel — das sind genau seine beiden Logo-Varianten */
.nav__logo{ display:inline-flex; align-items:center }
.nav__logo-mark{
  font-weight:600; font-size:1.2rem; letter-spacing:.01em; line-height:1;
  color:var(--brand);
}
.nav.on-dark .nav__logo-mark{ color:var(--paper) }
.nav__toggle{
  display:flex; align-items:center; gap:.6rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.nav__toggle-label{ transition:opacity .3s, transform .3s var(--ease) }
.nav__toggle-label[data-state="close"]{ position:absolute; right:2.4rem; opacity:0; transform:translateY(6px) }
.nav.is-open .nav__toggle-label[data-state="open"]{ opacity:0; transform:translateY(-6px) }
.nav.is-open .nav__toggle-label[data-state="close"]{ opacity:1; transform:translateY(0) }
.nav__toggle-bars{ display:flex; gap:3px; align-items:flex-end; height:14px }
.nav__toggle-bars i{
  width:2px; background:var(--accent); display:block;
  transition:height .4s var(--ease), transform .4s var(--ease);
}
.nav__toggle-bars i:nth-child(1){ height:9px }
.nav__toggle-bars i:nth-child(2){ height:14px }
.nav__toggle-bars i:nth-child(3){ height:6px }
.nav.is-open .nav__toggle-bars i{ height:14px }
.nav.is-open .nav__toggle-bars i:nth-child(1){ transform:translateX(2.5px) rotate(45deg) }
.nav.is-open .nav__toggle-bars i:nth-child(2){ transform:scaleY(0) }
.nav.is-open .nav__toggle-bars i:nth-child(3){ transform:translateX(-2.5px) rotate(-45deg) }

/* über dunklen Sektionen wechselt die Nav auf hell */
.nav.on-dark{ color:var(--paper) }

/* ================= MENU OVERLAY ================= */

.menu{
  position:fixed; inset:0; z-index:75;
  background:var(--paper);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  display:grid; align-items:center;
  padding:6rem var(--pad) 3rem;
  overflow-y:auto;
}
.menu.is-open{ clip-path:inset(0 0 0 0) }
.menu__grid{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width:900px){ .menu__grid{ grid-template-columns:1.6fr .8fr; gap:4rem; align-items:end } }

.menu__list li{ border-top:1px solid var(--line) }
.menu__list li:last-child{ border-bottom:1px solid var(--line) }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  padding:clamp(.55rem,1.5vw,1rem) 0;
  font-family:var(--f-serif);
  font-size:clamp(1.9rem,6vw,4.6rem); letter-spacing:-.03em; line-height:1;
  color:var(--ink);
  transition:color .35s var(--ease), padding-left .5s var(--ease);
}
.menu__list a::before{
  content:attr(data-num);
  font-family:var(--f-sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; color:var(--accent);
  transform:translateY(-.5em);
}
.menu__list a:hover,.menu__list a:focus-visible{ color:var(--accent); padding-left:1.25rem }

.menu__mail{
  display:inline-block; font-family:var(--f-times); font-size:clamp(1.05rem,2vw,1.4rem);
  text-decoration:underline; text-underline-offset:4px;
  margin-bottom:2rem;
}
.menu__mail:hover{ color:var(--accent) }
.menu__social{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem .75rem }
.menu__social a{ font-family:var(--f-times); font-size:.95rem; text-decoration:underline; text-underline-offset:3px }
.menu__social a:hover{ color:var(--accent) }

/* ================= BUTTONS ================= */

.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--accent); color:#fff;
  padding:1.05rem 1.7rem; border-radius:6px;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  box-shadow:var(--shadow-accent);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.btn b{ font-weight:600; transition:transform .35s var(--ease) }
.btn:hover{ box-shadow:1px 12px 30px 0 rgba(9,47,140,.5) }
.btn:hover b{ transform:translateX(4px) }

/* Ghost auf dunkel */
.dark .btn--ghost{
  background:transparent; color:var(--paper);
  border:1px solid var(--paper); box-shadow:none; border-radius:10px;
}

/* ================= SECTION-GERÜST ================= */

.section{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,10vw,8.5rem) var(--pad);
}

.shead{
  display:flex; align-items:center; gap:1rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray); margin-bottom:clamp(2rem,5vw,3.5rem);
}
.shead__num{ color:var(--accent) }
.shead__rule{ flex:1; height:1px; background:var(--line) }

.h-big{
  font-size:clamp(1.9rem,4.6vw,3.6rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.02; text-wrap:balance;
}
.d-serif{
  font-family:var(--f-serif);
  font-size:clamp(3.2rem,9vw,8.5rem); font-weight:400;
  letter-spacing:-.04em; line-height:.9;
}
p{ color:var(--ink-2); max-width:62ch }

.reveal-words .rw{ display:inline-block; overflow:hidden; vertical-align:top }
.reveal-words .rw > i{ display:inline-block; font-style:inherit; will-change:transform }

/* Textmarker: zieht per GSAP ueber Schluesselwoerter, die Highlighter-Logik woertlich */
mark.hl{
  background-color:transparent; color:inherit;
  background-image:linear-gradient(rgba(0,81,255,.22), rgba(0,81,255,.22));
  background-repeat:no-repeat;
  background-size:0% 52%;
  background-position:0 82%;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ================= HERO ================= */

.hero{
  position:relative;
  min-height:100svh;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(6rem,13vh,8.5rem) var(--pad) clamp(3rem,7vw,5rem);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}

/* Zeitungskopf: scrollt mit dem Hero weg wie bei einer echten Ausgabe */
.masthead{
  position:absolute; top:clamp(3.4rem,7vh,4.6rem); left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.55rem;
  border-block:1px solid var(--line);
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray);
}
.masthead span:nth-child(2){ text-align:right }

/* rotierendes Siegel, verlinkt zur Keynote */
.badge{
  position:absolute; right:var(--pad); bottom:clamp(1.5rem,4vh,2.5rem);
  width:clamp(88px,9vw,124px); aspect-ratio:1;
  display:grid; place-items:center;
}
.badge svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 16s linear infinite;
}
.badge text{
  font-family:var(--f-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  fill:var(--gray);
}
.badge b{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:600;
  transition:transform .4s var(--ease);
}
.badge:hover b{ transform:translateY(4px) }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (max-width:900px){ .badge{ display:none } }

.hero__eyebrow{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem .8rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray); max-width:none;
  margin-bottom:clamp(1.75rem,4.5vh,3.25rem);
}
.hero__eyebrow i{ width:4px; height:4px; border-radius:50%; background:var(--accent) }

/* Typo-Wand nach dem Referenz-Prinzip: nowrap-Zeile + Bildzelle,
   das Bild dehnt sich per Flex ueber den Restraum der Zeile.
   So ist jede Zeile exakt randvoll, egal wie lang das Wort ist. */
/* Jede Zeile wird so skaliert, dass Text + Kachel die Breite exakt fuellen.
   Mit EINER Schriftgroesse fuer drei verschieden lange Zeilen schwimmt jedes
   Wort mit anderer Luft — der Satz bildet dann kein Rechteck.
   Rechnung: Breite = Schriftgroesse x k, wobei k die gemessene Breite pro 1px
   Schriftgroesse ist (Archivo 600, letter-spacing -.04em):
     "Die Brücke"    k = 4.608
     "zwischen KI"   k = 5.073
     "und Business." k = 6.048
   Textflaeche T = 100 - Kachel(22) - Abstand(2.2) = 75.8cqw, davon 75.5 als
   Sicherheitsabzug gegen Rundung. Schriftgroesse je Zeile = 75.5 / k.
   ACHTUNG: Wenn sich ein Wort, die Schrift oder die Kachelbreite aendert,
   muessen die k-Werte neu gemessen und die drei Groessen neu gerechnet werden. */
.hero__wall{
  container-type:inline-size;
  display:grid; row-gap:clamp(.5rem,1.4vw,1rem);
  margin-inline:auto; width:min(92vw,1120px);
  font-weight:600; letter-spacing:-.04em; line-height:1;
  /* RUECKFALLWERT, nicht entfernen: kennt ein Browser die cqw-Einheit nicht,
     sind die drei Zeilengroessen unten ungueltig und .hero__line erbt von
     hier. Ohne diesen Wert faellt die Riesen-Headline auf Fliesstextgroesse
     zusammen. Bewusst konservativ, damit auch die laengste Zeile passt. */
  font-size:clamp(2rem,7.5vw,8rem);
}
.hrow:nth-child(1) .hero__line{ font-size:16.38cqw }
.hrow:nth-child(2) .hero__line{ font-size:14.88cqw }
.hrow:nth-child(3) .hero__line{ font-size:12.48cqw }
/* Die Kachel steht direkt neben dem Wort, der Rest der Zeile bleibt frei.
   Mit space-between klaffte stattdessen ein Loch von 250px in der Mitte,
   weil die deutschen Zeilen kuerzer sind als der Container.
   Die Kachel ist ein kompakter Block (16:10), NICHT ein Streifen ueber die
   Restbreite: flache Schlitze zeigen von einem Portraet nichts Lesbares. */
.hrow{
  display:flex; align-items:center; justify-content:flex-start;
  gap:2.2cqw;
}
.hrow--rev{ flex-direction:row-reverse }
/* Der Text nimmt den Rest der Zeile ein und steht darin ZENTRIERT — genau wie
   in der Referenz (dort `text-align:center` in der Grid-Spalte). Dadurch ist
   jede Zeile exakt gleich breit und die Kacheln stehen bündig untereinander.
   Mit `flex:none` endeten die Zeilen bei 612/811/752px, also voellig ragged. */
.hero__line{
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:inherit; font-weight:inherit; line-height:inherit;
  /* Laufweite MUSS hier stehen, nicht geerbt werden: -.04em rechnet gegen die
     Schriftgroesse des jeweiligen Elements. Geerbt kaeme ein fester Pixelwert
     aus der Container-Groesse an und die Zeilen waeren unterschiedlich eng. */
  letter-spacing:-.04em;
  color:var(--ink); white-space:nowrap;
  overflow:hidden; padding-block:.02em;
}
.hero__line .w{ display:inline-block; will-change:transform }

.hero__img{
  position:relative; overflow:hidden; border-radius:0;
  /* 22% der ZEILENBREITE, nicht der Schriftgroesse: die ist jetzt pro Zeile
     verschieden, an em haengend waeren die Kacheln wieder unterschiedlich gross. */
  flex:none; width:22cqw; height:auto; aspect-ratio:16/10; align-self:center;
}

@media (max-width:600px){
  /* wie die Referenz auf Mobile: Zeile fuer Zeile gestapelt,
     die Bilder werden zu vollen Baendern zwischen den Woertern */
  .hrow, .hrow--rev{ flex-direction:column; align-items:stretch; gap:.55rem }
  /* gestapelt gibt es keine Kachel neben dem Wort, also fuellt jede Zeile
     die volle Breite: Groesse = 100 / k, wieder mit Sicherheitsabzug */
  .hero__line{ flex:none; text-align:center }
  .hrow:nth-child(1) .hero__line{ font-size:21.48cqw }
  .hrow:nth-child(2) .hero__line{ font-size:19.51cqw }
  .hrow:nth-child(3) .hero__line{ font-size:16.37cqw }
  /* 16:10 und nicht 2:1. Die Quellkacheln SIND 16:10; bei 2:1 schnitt
     object-fit:cover oben und unten je 10 Prozent weg und damit bei allen
     sechs Motiven den Scheitel ab. Kostet 43px Hoehe, die der Hero hat. */
  .hero__img{ flex:none; width:100%; height:auto; aspect-ratio:16/10; min-width:0 }
  /* Drei volle Kacheln machen den Hero 1030px hoch und schieben den Button
     unter die Falz. Auf dem Handy zaehlt der CTA mehr als die Bildfolge,
     deshalb bleibt nur EINE Kachel stehen — und zwar die LETZTE, sonst
     zerschneidet das Bild den Satz zwischen "Die Brücke" und "zwischen KI". */
  .hrow:not(:last-child) .hero__img{ display:none }

  /* line-height:1 laesst unter jeder Zeile Luft, die MIT der Schriftgroesse
     waechst. Die drei Zeilen sind aber verschieden gross (74 / 67 / 56px),
     also werden die optischen Abstaende ungleich: gemessen 29.9 / 26.8 /
     18.4px. Der Satz wird nach unten hin immer enger und die letzte Zeile
     klebt am Foto. Die Grid-Luecke wird darum genullt und pro Zeile einzeln
     ausgeglichen. Werte in cqw, damit sie mit der Schrift mitskalieren.
     Nachrechnen: Ziel minus Eigenluft der jeweiligen Zeile. */
  .hero__wall{ row-gap:0 }
  .hrow:nth-child(1){ margin-bottom:1.19cqw }
  .hrow:nth-child(2){ margin-bottom:2.09cqw }
  .hrow:nth-child(3){ gap:4.76cqw }

  /* Vier Eintraege in einer umbrechenden Flex-Zeile heisst: irgendwo haengt
     ein Trennpunkt am Zeilenende. Der mittlere Punkt wird deshalb zum
     vollbreiten Element ohne Hoehe und erzwingt den Umbruch genau dort,
     also sauber zwei plus zwei. */
  .hero__eyebrow i:nth-of-type(2){
    flex-basis:100%; height:0; background:none; margin:0;
  }
}

/* Doppelbild: das obere Motiv wird per Clip-Path-Wipe getauscht */
.himg{ position:absolute; inset:0 }
/* Die Kacheln sind ueberall flache Streifen. Deshalb liegen hier bewusst
   vorgeschnittene Querformat-Baender statt quadratischer Motive: ein Quadrat
   wuerde mittig beschnitten und schnitte den Kopf ab. */
.himg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) invert(.27) sepia(.07) saturate(10.67) hue-rotate(180deg) brightness(1.02) contrast(.83);
}
.himg__swap{ clip-path:polygon(0 0,100% 0,100% 0,0 0) }

.hero__foot{
  margin-top:clamp(2rem,5.5vh,3.75rem);
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}

/* ================= WELLEN-KANTEN ================= */

.wave{ display:block; line-height:0; background:var(--paper) }
.wave svg{ width:100%; height:clamp(36px,7vw,90px); display:block }
.wave svg path{ fill:var(--ink) }
.wave--flip svg{ transform:scaleY(-1) }

/* ================= DARK: KEYNOTE ================= */

.dark{
  position:relative; background:var(--ink); color:var(--paper);
}
.dark p{ color:var(--sage) }
.dark .micro{ color:var(--moss) }

.keynote{
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(4.5rem,9vw,7rem);
}
.keynote > *{ max-width:var(--maxw); margin-inline:auto }

.keynote__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.5vw,2rem);
  align-items:center;
}
.kfig{ border-radius:0; overflow:hidden }
.kfig img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) invert(.27) sepia(.07) saturate(10.67) hue-rotate(180deg) brightness(1.02) contrast(.83);
}
/* width:100% ist noetig, sonst schrumpft justify-self:center das Element auf
   Inhaltsgroesse — und der Inhalt ist width:100%. Ergebnis waere 0x0. */
.kfig--a{ grid-column:3/7; grid-row:1; aspect-ratio:3/4; width:100%; max-width:340px; justify-self:center }
.kfig--b{ grid-column:2/5; grid-row:2; aspect-ratio:4/5; max-width:320px; align-self:start }

/* Typewriter mit blauem Unterstrich-Cursor */
.type{
  grid-column:5/13; grid-row:2;
  font-size:clamp(1.8rem,4.4vw,3.9rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.08;
  min-height:2.2em; align-self:center;
  z-index:2;
}
.type__cursor{
  font-style:normal; color:var(--accent); font-weight:600;
  animation:blink 1s steps(2) infinite;
}
.type.is-done .type__cursor{ animation:blink 1s steps(2) infinite }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.keynote__intro{
  grid-column:8/13; grid-row:3;
  display:grid; gap:1.1rem; justify-items:start;
  padding-top:clamp(1.5rem,3vw,2.5rem);
}

/* nummerierte Themen-Karten, Hairline + Pfeil */
.topics{
  margin-top:clamp(3rem,7vw,5.5rem);
  display:grid; gap:.75rem;
}
.tcard{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem;
  border:1px solid var(--line-dark); border-radius:10px;
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.1rem,2.5vw,2rem);
  transition:border-color .4s, background .4s, transform .4s var(--ease);
}
.tcard:hover{ border-color:var(--accent); background:rgba(0,81,255,.08); transform:translateX(6px) }
.tcard__num{ font-size:.6875rem; font-weight:600; letter-spacing:.08em; color:var(--moss) }
.tcard__title{
  font-size:clamp(1.15rem,2.6vw,1.9rem); font-weight:500; letter-spacing:-.02em; color:var(--paper);
}
.tcard__arrow{ color:var(--accent); font-size:1.3rem; transition:transform .35s var(--ease) }
.tcard:hover .tcard__arrow{ transform:translateX(5px) }

/* Serif-Zahlen in Hairline-Karten */
.stats{
  margin-top:clamp(3rem,7vw,5.5rem);
  display:grid; gap:.75rem;
  grid-template-columns:repeat(5,1fr);
}
.stat{
  border:1px solid var(--line-dark); border-radius:14px;
  padding:clamp(1.2rem,2.4vw,2rem) clamp(.9rem,1.8vw,1.5rem);
  display:flex; flex-direction:column; gap:.8rem; align-items:center; text-align:center;
  transition:border-color .4s;
}
.stat:hover{ border-color:rgba(143,168,214,.5) }
.stat__num{
  font-family:var(--f-serif);
  font-size:clamp(1.7rem,3.4vw,2.9rem); letter-spacing:-.02em; line-height:1;
  color:var(--sage);
  font-variant-numeric:tabular-nums;
}
.stat__num i{ font-style:normal }
.stat__label{ font-size:.72rem; line-height:1.45; color:var(--moss); max-width:22ch }

/* ================= MARQUEE BAND (Serif + Pixel) ================= */

.band-marquee{
  padding:clamp(3rem,8vw,6.5rem) 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  display:grid; gap:clamp(.5rem,2vw,1.5rem);
}
.marquee{ overflow:hidden; width:100% }
.marquee__track{
  display:flex; align-items:center; gap:clamp(1.5rem,3.5vw,3.5rem);
  width:max-content; will-change:transform;
}
.bm-serif{
  font-family:var(--f-serif);
  font-size:clamp(3.4rem,11vw,11rem); letter-spacing:-.04em; line-height:.9;
  white-space:nowrap; color:var(--ink);
}
.bm-pixel{
  font-family:var(--f-pixel);
  font-size:clamp(3.6rem,11.5vw,11.5rem); line-height:.85;
  white-space:nowrap; color:var(--ink);
}
.bm-tile{
  height:clamp(3rem,8vw,7.5rem); width:auto; aspect-ratio:10/7; object-fit:cover;
  /* nach oben versetzt, sonst schneidet der 10:7-Ausschnitt aus dem
     quadratischen Motiv den Scheitel ab */
  object-position:50% 30%;
  border-radius:0; flex:none;
  filter:grayscale(1) invert(.27) sepia(.07) saturate(10.67) hue-rotate(180deg) brightness(1.02) contrast(.83);
}

/* ================= WORK AFTER AI ================= */

.wai__head{ display:grid; gap:1.1rem; margin-bottom:clamp(1.5rem,3vw,2.25rem) }
.wai__claim{
  font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.3; color:var(--gray);
  padding-left:1.25rem; border-left:2px solid var(--accent);
}
.wai__intro{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem) }

/* mobil zwei schmale Spalten statt einer breiten, dritte Karte spannt durch */
.formats{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
.formats .format:last-child{ grid-column:1/-1 }
@media (min-width:820px){
  .formats{ grid-template-columns:repeat(3,1fr) }
  .formats .format:last-child{ grid-column:auto }
}
.format{
  background:var(--paper); padding:clamp(1.25rem,2.4vw,1.9rem);
  display:grid; gap:.65rem; align-content:start;
  transition:background .4s;
}
.format:hover{ background:#fff }
.format__kicker{ color:var(--accent) }
.format__title{
  font-family:var(--f-serif); font-weight:400; font-optical-sizing:auto;
  font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:-.02em; line-height:1.1;
}
.format p{ font-size:.86rem; line-height:1.55; color:var(--gray) }

/* Ausgaben als Zeitungs-Inhaltsverzeichnis: Datum, Titel, Pfeil */
.issues{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line) }
.issues__label{ padding-top:1.1rem; margin-bottom:.25rem }
.issue{
  display:grid; grid-template-columns:8rem 1fr auto; gap:.35rem 1.25rem;
  align-items:baseline; padding:1.05rem 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.issue:hover{ padding-left:1rem }
.issue__date{
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray);
}
.issue__title{
  font-family:var(--f-serif); font-optical-sizing:auto;
  font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:-.02em; line-height:1.2;
}
.issue__arrow{ color:var(--accent); transition:transform .35s var(--ease) }
.issue:hover .issue__arrow{ transform:translateX(5px) }
.wai__cta{ margin-top:clamp(2rem,4vw,3rem) }

@media (max-width:620px){
  .issue{ grid-template-columns:1fr auto }
  .issue__date{ grid-column:1/-1 }
}

/* ================= ABOUT ================= */

/* die Bruecken-Karte: dunkle Buehne fuer die Punkt-Bruecke */
.bridge{
  position:relative;
  width:100%; aspect-ratio:16/7; min-height:300px;
  border-radius:0; overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% -10%, #1b2436 0%, transparent 55%),
    linear-gradient(180deg, #10141d 0%, var(--ink) 70%);
}
.bridge canvas{ position:absolute; inset:0; width:100%; height:100% }
.bridge__label{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--moss); letter-spacing:.2em;
}
.bridge__label--l{ left:clamp(1rem,3vw,2.5rem) }
.bridge__label--r{ right:clamp(1rem,3vw,2.5rem) }
.bridge{ margin-bottom:clamp(3rem,6vw,5rem) }

.about__grid{
  display:grid; gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:960px){ .about__grid{ grid-template-columns:1fr 1fr } }
.about__body > p:not(.about__pull){ margin-top:1.1rem }
.about__body .tlink{ display:inline-block; margin-top:1.75rem }

@media (prefers-reduced-motion:reduce){
  .bridge{ display:none }
}

.about__pull{
  font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.25; color:var(--ink);
  margin-bottom:1.25rem;
  padding-left:1.25rem; border-left:2px solid var(--accent);
}

/* ================= DER WEG ================= */

.weg{ position:relative; border-block:1px solid var(--line); background:var(--paper) }
.weg__pin{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.5rem,4vw,3rem); overflow:hidden;
  padding:clamp(4rem,9vw,6rem) 0;
  background:var(--paper);   /* gepinnt liegt der Track fixed ueber anderen Sektionen */
}
.weg__head{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-inline:var(--pad);
  max-width:var(--maxw); margin-inline:auto; width:100%;
}
.weg__head .shead{ margin-bottom:0; flex:1 }

.weg__track{
  display:flex; gap:clamp(1rem,2vw,1.75rem); padding-inline:var(--pad);
  width:max-content; will-change:transform;
}
.era{
  position:relative; flex:none;
  width:clamp(15rem,64vw,24rem);
  padding:clamp(1.25rem,2.4vw,2rem);
  border:1px solid var(--line); border-radius:14px; background:var(--paper);
  display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.era:hover{ border-color:var(--ink); transform:translateY(-6px) }
.era__year{
  font-family:var(--f-serif);
  font-size:clamp(2rem,4.5vw,3.2rem); letter-spacing:-.03em; line-height:.95;
  color:var(--ink);
}
.era__title{ font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:600; letter-spacing:-.02em; line-height:1.15 }
.era__text{ font-size:.86rem; line-height:1.55; color:var(--gray) }
.era--accent{ border-color:rgba(0,81,255,.45) }
.era--accent .era__year{ color:var(--accent) }
.era--end{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.era--end .era__year{ color:var(--paper); font-style:italic; font-family:var(--f-serif-i); font-weight:300 }
.era--end .era__text{ color:var(--sage) }
.era--end .btn{ margin-top:.5rem; align-self:flex-start }

/* ================= WARUM / VENN ================= */

/* Pin-Buehne: beim Scrollen zoomt es in den blauen Kern des Venn,
   das Blau flutet den Screen und zieht dann als Vorhang weg */
.warum{ position:relative; background:var(--paper) }
.warum__pin{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; align-items:center;
  background:var(--paper);
}
.warum__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4rem,9vw,6rem) var(--pad);
}
.warum__flood{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:var(--accent);
  clip-path:circle(0% at 50% 50%);
}

.warum__grid{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:960px){ .warum__grid{ grid-template-columns:1fr 1fr } }

.venn{
  position:relative;
  width:min(88vw,560px); aspect-ratio:1/0.92; margin-inline:auto;
}
.venn__circle{
  position:absolute; width:58%; aspect-ratio:1; border-radius:50%;
  background:var(--ink);
  display:grid; place-items:center; text-align:center;
  overflow:hidden;
}
.venn__circle span{
  font-family:var(--f-serif); font-size:clamp(1.15rem,2.6vw,1.9rem);
  letter-spacing:-.01em; color:var(--paper); z-index:2; padding:0 1.5rem; line-height:1.05;
}
/* Partikel-Streusel wie in der Referenz, rein CSS-getrieben, von JS gesetzt */
.venn__circle i{
  position:absolute; border-radius:50%; background:var(--accent);
  animation:drift 6s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate(0,0); opacity:.4 }
  to{ transform:translate(var(--dx,6px), var(--dy,-8px)); opacity:1 }
}
.venn__circle--a{ left:0; top:0; mix-blend-mode:multiply }
.venn__circle--b{ right:0; top:0; mix-blend-mode:multiply }
.venn__circle--c{ left:21%; bottom:0; mix-blend-mode:multiply }
.venn__core{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:clamp(24px,4vw,40px);
}
.venn__core path{ fill:var(--accent) }

.warum__text .h-big{ margin-bottom:1.25rem }
.warum__text .btn{ margin-top:1.75rem }

/* Logos, auf Papier einfach entsättigt */
.buehnen{ background:var(--paper) }
.logos{
  display:grid; gap:1.5rem;
}
.logos__label{ text-align:center }
.logos__row{ gap:clamp(2.5rem,5vw,4.5rem); align-items:center }
.logos__row img{
  height:clamp(1.5rem,3vw,2.3rem); width:auto; flex:none;
  filter:grayscale(1); opacity:.45;
  transition:opacity .4s, filter .4s;
}
.logos__row img:hover{ opacity:1; filter:none }
.marquee--rev .marquee__track{ flex-direction:row-reverse }

/* ================= KÜRNER'S 13 ================= */

.dreizehn{ position:relative; overflow:hidden }
.dreizehn__ghost{
  position:absolute; right:-.04em; top:50%; transform:translateY(-50%);
  font-family:var(--f-pixel);
  font-size:clamp(18rem,42vw,42rem); line-height:.75;
  color:var(--echo); pointer-events:none; user-select:none; z-index:0;
}
.dreizehn__grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .dreizehn__grid{ grid-template-columns:1.1fr .9fr } }
.dreizehn__sub{ font-size:clamp(1.25rem,2.4vw,1.8rem); color:var(--gray); margin:1.25rem 0 1rem }
.dreizehn__copy .btn{ margin-top:1.75rem }
.dreizehn__media{
  overflow:hidden; border-radius:0;
  width:100%; max-width:460px; margin-inline:auto;
}
.dreizehn__media img{
  width:100%;
  filter:grayscale(1) invert(.27) sepia(.07) saturate(10.67) hue-rotate(180deg) brightness(1.02) contrast(.83);
}

/* ================= KONTAKT ================= */

.contact__huge{
  display:block; margin-bottom:clamp(2.5rem,6vw,4rem);
  font-size:clamp(2.7rem,10.5vw,9.5rem); font-weight:600;
  letter-spacing:-.045em; line-height:.95;
}
.contact__line{ display:block; overflow:hidden; padding-bottom:.04em }
.contact__line .w{ display:block; will-change:transform }
.contact__line em{ font-style:normal; color:var(--accent) }
.contact__mail{
  display:inline-block; margin-top:1.25rem; color:var(--gray);
  border-bottom:1px solid var(--line); padding-bottom:.35rem;
  transition:color .4s, border-color .4s;
}
.contact__huge:hover .contact__mail{ color:var(--accent); border-color:var(--accent) }

.contact__grid{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:1000px){ .contact__grid{ grid-template-columns:repeat(4,1fr) } }
.contact__block{ background:var(--paper); padding:clamp(1rem,2vw,1.5rem); display:grid; gap:.5rem; align-content:start }
.contact__block p{ font-size:.95rem; color:var(--ink) }

.socials{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:0;
  border-top:1px solid var(--line);
}
.socials li{ border-bottom:1px solid var(--line) }
.socials a{
  display:block; padding:1.1rem 0;
  transition:padding-left .4s var(--ease);
}
.socials a:hover{ padding-left:1rem }
.socials .tlink{ font-size:clamp(1.05rem,1.8vw,1.35rem) }

/* ================= BLAUES BAND + FOOTER ================= */

.band{
  background:var(--accent);
  height:clamp(300px,42vw,540px);
  padding:clamp(1.5rem,3.5vw,3rem) var(--pad);
}
.band__k{
  font-family:var(--f-serif);
  font-size:clamp(6rem,14vw,12rem); line-height:.8; color:var(--paper);
  letter-spacing:-.04em;
}
.band__k em{ font-style:normal; color:var(--ink) }

.footer{ background:var(--ink); color:var(--paper) }
.footer .micro{ color:var(--moss); margin-bottom:.9rem }
.footer__grid{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,6vw,5rem) var(--pad) clamp(2rem,4vw,3rem);
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .footer__grid{ grid-template-columns:1.4fr repeat(3,.7fr) } }
.footer__logo{ font-weight:600; font-size:1.05rem; display:block; margin-bottom:.75rem }
.footer__brand p{ font-size:.82rem; line-height:1.6; color:var(--sage) }
.footer__col{ display:grid; gap:.45rem; align-content:start }
.footer__col a{ font-size:.9rem; color:var(--sage); transition:color .3s; justify-self:start }
.footer__col a:hover{ color:var(--paper) }
.footer__bar{
  max-width:var(--maxw); margin-inline:auto;
  border-top:1px solid var(--line-dark);
  padding:1.4rem var(--pad);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--moss);
}
.footer__bar p{ color:var(--moss); max-width:none }
.footer__bar a{ transition:color .3s }
.footer__bar a:hover{ color:var(--paper) }

/* ================= MOBILE ================= */

@media (max-width:959px){
  /* schmal wird gestapelt, Text nie über Gesichtern */
  .keynote__grid{ grid-template-columns:repeat(6,1fr) }
  .kfig--a{ grid-column:4/7; grid-row:1; max-width:220px }
  .type{ grid-column:1/7; grid-row:2 }
  .kfig--b{ grid-column:1/3; grid-row:3; max-width:200px; align-self:center }
  .keynote__intro{ grid-column:3/7; grid-row:3 }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .stat:last-child{ grid-column:1/-1 }
}

@media (max-width:720px){
  .contact__grid{ grid-template-columns:repeat(2,1fr) }
  .socials a{ grid-template-columns:minmax(6.5rem,8rem) 1fr }
  .menu__social{ grid-template-columns:repeat(2,1fr) }

  /* ohne Pin muss der Track selbst wischbar sein */
  .weg__pin{ min-height:auto; overflow:visible }
  .weg__track{
    width:100%; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-block:.5rem;
  }
  .weg__track::-webkit-scrollbar{ display:none }
  .era{ scroll-snap-align:center }
  .era:last-child{ margin-right:var(--pad) }
}

/* ================= REDUCED MOTION ================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grain{ animation:none }
  .cursor{ display:none }
  .loader{ display:none }
  .disc canvas{ display:none }
  .disc__fallback{
    display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:grayscale(1) invert(.27) sepia(.07) saturate(10.67) hue-rotate(180deg) brightness(1.02) contrast(.83);
  }
  .marquee__track{ flex-wrap:wrap; width:100% }
  .weg__track{ width:100%; flex-wrap:wrap; justify-content:center }
  .era{ width:min(100%,24rem) }
  .hero__title .w,.contact__line .w{ transform:none }
  .venn__circle i{ animation:none; opacity:.8 }
}

/* ================= LESBARKEIT AUF DEM TELEFON ================= */

@media (max-width:600px){
  /* 11px in Grossbuchstaben mit .08em Sperrung sind am Schreibtisch schon
     grenzwertig und auf einem Telefon, das man naeher haelt, schlicht zu
     klein. Alle Kleinschriften eine Stufe hoch, Fliesstext in den Karten
     auf knapp 15px. Die Eyebrow bleibt bei 11px: sie steht in einer
     einzigen Zeile, die bei 12px ueber die Breite laeuft und dann
     dreizeilig umbricht. */
  .micro, .tcard__num, .issue__date,
  .shead, .masthead, .footer__bar, .nav__toggle-label{ font-size:.78rem }
  .stat__label{ font-size:.82rem }
  .format p, .era__text{ font-size:.95rem }
}

/* Auf kurzen Telefonen (iPhone SE und Verwandtschaft) passt der Auftakt sonst
   nicht mehr ueber die Falz, und auf dem Handy zaehlt der CTA mehr als die
   Bildgroesse. Verschmaelert wird die WAND, nicht einzelne Teile: Schrift und
   Kachel haengen beide an cqw und schrumpfen dadurch proportional mit. */
@media (max-width:600px) and (max-height:730px){
  .hero__wall{ width:80vw }
  .hero__eyebrow{ margin-bottom:1.1rem }
}