/* ═══════════════════════════════════════════════════════════════════
   MY GLOBAL IMPACT
   ─────────────────────────────────────────────────────────────────
   Satz      Inter (Text und Überschriften) · Mono (Meta-Angaben)
   Farben    Tiefes Weltraumblau, warmes Papierweiß, ein Blauton
   Bewegung  Sparsam. Einmal einblenden, langsam, nie hüpfend.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #05080a;
  --ink-2:    #080d10;
  --ink-3:    #0d1418;
  --paper:    #e9e6de;
  --paper-2:  #c7cccb;
  --paper-3:  #97a1a0;
  --rule:     rgba(233,230,222,.13);
  --rule-2:   rgba(233,230,222,.24);
  --sky:      #8ab6d2;
  --ember:    #d69a5c;
  --mono:     ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --slow:     cubic-bezier(.16,1,.3,1);
  --gut:      clamp(1.25rem,4vw,3.5rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font:400 clamp(15.5px,1.06vw,17px)/1.70 'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--sky);color:var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#162026}
::-webkit-scrollbar-thumb:hover{background:#22313a}

/* ── Raster ─────────────────────────────────────────────────────── */
.shell{width:min(100% - 2 * var(--gut),1460px);margin-inline:auto}
.band{padding:clamp(5rem,10vw,9.5rem) 0;position:relative}
.band + .band{border-top:1px solid var(--rule)}

/* ── Typografie ─────────────────────────────────────────────────── */
.display{
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:500;line-height:1.10;letter-spacing:-.032em;
}
.d-1{font-size:clamp(1.75rem,6.4vw,5.6rem)}
.d-2{font-size:clamp(2.1rem,4.4vw,3.9rem)}
.d-3{font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.12}
.d-4{font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.2}
.display em{font-style:normal;color:var(--paper-2)}

p{max-width:64ch}
.intro{font-size:clamp(1.10rem,1.4vw,1.32rem);line-height:1.58;color:var(--paper);max-width:52ch}
.body-dim{color:var(--paper-2)}
.fine{font-size:.885rem;line-height:1.68;color:var(--paper-2)}

.tag{
  font-family:var(--mono);font-size:.695rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--paper-3);font-weight:500;
}
.num{font-family:var(--mono);font-size:.695rem;letter-spacing:.13em;color:var(--paper-3)}

.rule{height:1px;background:var(--rule);border:0}

/* Kopfzeile einer Sektion: Nummer links, Titel, Beschreibung */
.band-head{
  display:grid;grid-template-columns:2.8rem minmax(0,1fr);
  gap:0 1.5rem;align-items:start;
  padding-bottom:clamp(2.5rem,5vw,4.25rem);
}
@media(min-width:900px){
  .band-head{grid-template-columns:5.5rem minmax(0,1fr);gap:0 var(--gut)}
}
.band-head .num{padding-top:.72rem}
.band-head h2{margin-bottom:1.1rem}
.band-head .lede{max-width:46ch;color:var(--paper-2);font-size:1.06rem}

/* Haarlinie am oberen Rand zeigt die Leseposition. Bewusst nur
   1 Pixel und im Akzentton — ein Lesezeichen, kein Ladebalken. */
#pageline{position:fixed;top:0;left:0;height:1px;width:0;z-index:90;
  background:var(--sky);opacity:.65;transition:width .1s linear}

/* ── Kopf / Navigation ──────────────────────────────────────────── */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:1.55rem 0;transition:padding .5s var(--ease),background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.masthead.compact{
  padding:.95rem 0;background:rgba(5,8,10,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule);
}
.masthead.retreat{transform:translateY(-102%)}
.masthead{transition:transform .55s var(--ease),padding .5s var(--ease),background .5s,border-color .5s}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:2rem}

.wordmark{display:flex;align-items:center;flex:none}
.wordmark .mk{
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;
  font-size:clamp(1.15rem,1.35vw,1.42rem);line-height:1;letter-spacing:-.026em;
  transition:opacity .35s var(--ease);
}
.wordmark:hover .mk{opacity:.72}

/* Eigene Fläche unter dem Menü: ohne sie schiebt sich die
   Hamburg-Fahne des Globus zwischen die Menüpunkte. */
.nav{
  display:none;align-items:center;gap:.15rem;
  padding:.3rem .35rem;border-radius:100px;
  border:1px solid var(--rule);
  background:rgba(7,12,16,.62);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
@media(min-width:1000px){.nav{display:flex}}
/* Sobald die Kopfzeile selbst eine Fläche hat, würde die zweite
   Blurschicht trüb wirken. Dann genügt ein heller Hauch. */
.masthead.compact .nav,
.masthead.compact .link-btn{
  background:rgba(233,230,222,.05);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:rgba(233,230,222,.10);
}
.nav a{
  position:relative;font-size:.875rem;font-weight:400;color:var(--paper-2);
  padding:.52rem 1.02rem;border-radius:100px;white-space:nowrap;
  transition:color .3s var(--ease),background .35s var(--ease);
}
.nav a:hover{color:var(--paper);background:rgba(233,230,222,.085)}
/* Die Sektion, in der man gerade liest */
.nav a[aria-current]{color:var(--paper);background:rgba(233,230,222,.085)}

.mast-right{display:flex;align-items:center;gap:1.1rem}
.link-btn{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  border:1px solid var(--rule-2);border-radius:100px;
  padding:.66rem 1.2rem;font-size:.83rem;letter-spacing:.01em;
  background:rgba(7,12,16,.62);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:border-color .4s,background .4s,color .4s;
}
.link-btn:hover{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.link-btn .arw{display:block;width:13px;height:1px;background:currentColor;position:relative}
.link-btn .arw::after{
  content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

.mast-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;align-items:flex-end;
}
@media(min-width:1000px){.mast-toggle{display:none}}
.mast-toggle i{display:block;height:1px;background:var(--paper);transition:.45s var(--slow)}
.mast-toggle i:nth-child(1){width:22px}
.mast-toggle i:nth-child(2){width:14px}
body.menu-open .mast-toggle i:nth-child(1){width:22px;transform:translateY(3px) rotate(45deg)}
body.menu-open .mast-toggle i:nth-child(2){width:22px;transform:translateY(-3px) rotate(-45deg)}

/* Vollbild-Menü */
.curtain{
  position:fixed;inset:0;z-index:70;background:var(--ink-2);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--slow);
  display:grid;align-content:center;
}
body.menu-open .curtain{clip-path:inset(0 0 0 0)}
.curtain-list{border-top:1px solid var(--rule)}
.curtain-list a{
  display:grid;grid-template-columns:3.4rem 1fr auto;align-items:baseline;gap:1.4rem;
  padding:clamp(.85rem,2.1vw,1.5rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .55s var(--slow),color .4s;
  overflow:hidden;
}
.curtain-list a:hover{padding-left:1.1rem;color:var(--sky)}
.curtain-list a > span:nth-child(2){
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:clamp(1.6rem,4.2vw,2.8rem);line-height:1.08;
  transform:translateY(105%);transition:transform .8s var(--slow);display:block;
}
body.menu-open .curtain-list a > span:nth-child(2){transform:none}
.curtain-list a:nth-child(1) span:nth-child(2){transition-delay:.14s}
.curtain-list a:nth-child(2) span:nth-child(2){transition-delay:.2s}
.curtain-list a:nth-child(3) span:nth-child(2){transition-delay:.26s}
.curtain-list a:nth-child(4) span:nth-child(2){transition-delay:.32s}
.curtain-list a:nth-child(5) span:nth-child(2){transition-delay:.38s}
.curtain-list a:nth-child(6) span:nth-child(2){transition-delay:.44s}
.curtain-foot{
  display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;margin-top:2.6rem;
}

/* ── Hero ───────────────────────────────────────────────────────── */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
/* Der Globus liegt fest im Viewport und bleibt beim Scrollen stehen.
   Er ist direktes Kind von <body>, damit er zuverlässig hinter allen
   Sektionen liegt (die tragen z-index 3). Die Deckkraft regelt JS. */
#earth{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
  will-change:opacity;
}
/* Muss wie der Globus fest im Viewport liegen. Läge sie in der
   Hero-Sektion, entstünde an deren Unterkante eine sichtbare Naht
   zwischen abgedunkeltem und hellem Globus. */
.hero-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;will-change:opacity;
  background:
    linear-gradient(to top,rgba(5,8,10,.92) 0%,rgba(5,8,10,.42) 19%,rgba(5,8,10,0) 46%),
    linear-gradient(to right,rgba(5,8,10,.72) 0%,rgba(5,8,10,.12) 38%,rgba(5,8,10,0) 62%);
}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(3rem,7vw,6rem)}
.hero-kicker{display:flex;align-items:center;gap:.85rem;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.hero-kicker .dotmark{width:5px;height:5px;border-radius:50%;background:var(--sky);flex:none}
.hero-h{max-width:none}
/* Die Maske braucht Luft nach oben und unten, sonst kappt sie
   Ober- und Unterlängen (g in „Technologien", f in „Luft").
   Die negativen Außenabstände holen den Zeilenrhythmus zurück. */
.hero-h .ln{
  display:block;overflow:hidden;
  padding:.14em 0 .26em;
  margin:-.14em 0 -.26em;
}
/* 130 % statt 100 %: die Maske ist durch die Innenabstände höher
   geworden, der Text muss entsprechend weiter darunter starten. */
.hero-h .ln > span{display:block;transform:translateY(130%);transition:transform 1.35s var(--slow)}
.ready .hero-h .ln > span{transform:none}
.hero-h .ln:nth-child(2) > span{transition-delay:.11s}
.hero-h .ln:nth-child(3) > span{transition-delay:.22s}
.hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;
  flex-wrap:wrap;margin-top:clamp(2rem,4vw,3.2rem);
  opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .55s,transform 1.2s var(--slow) .55s;
}
.ready .hero-foot{opacity:1;transform:none}
.hero-foot p{max-width:38ch;color:var(--paper-2);font-size:1.0rem}
.hero-meta{display:flex;gap:2.2rem;flex-wrap:wrap;align-items:baseline}
.hero-meta div{display:grid;gap:.3rem}
.hero-meta b{font-weight:400;font-size:.96rem}

.scroll-mark{
  position:absolute;left:0;right:0;bottom:clamp(3rem,7vw,6rem);z-index:2;
  display:none;align-items:center;justify-content:flex-end;
}
@media(min-width:1000px){.scroll-mark{display:flex}}

/* ── Fließtext-Doppelspalte ─────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.2rem)}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem)}}
.duo p + p{margin-top:1.15rem}
.pull{
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:clamp(1.2rem,1.85vw,1.6rem);
  line-height:1.24;letter-spacing:-.008em;color:var(--paper);
  border-left:1px solid var(--rule-2);padding-left:clamp(1.2rem,2.5vw,2rem);
  max-width:30ch;
}
.pull cite{display:block;font:400 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3);margin-top:1.2rem;font-style:normal}

/* ── Nummerierte Liste (Kreislauf) ──────────────────────────────── */
.ol-steps{list-style:none;border-top:1px solid var(--rule)}
.ol-steps li{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:0 var(--gut);
  padding:clamp(1.3rem,2.6vw,1.9rem) 0;border-bottom:1px solid var(--rule);
  transition:background .5s var(--ease);
}
@media(min-width:800px){
  .ol-steps li{grid-template-columns:3.2rem 15rem minmax(0,1fr)}
}
.ol-steps li:hover{background:rgba(233,230,222,.022)}
.ol-steps .st{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--paper-3);padding-top:.42rem}
.ol-steps h3{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:1.12rem;line-height:1.3;letter-spacing:-.018em}
.ol-steps p{color:var(--paper-2);font-size:.975rem;max-width:52ch;margin-top:.35rem}
@media(min-width:800px){.ol-steps p{margin-top:0}}

/* ── Projekte ───────────────────────────────────────────────────── */
.proj{border-top:1px solid var(--rule)}
.proj-item{border-bottom:1px solid var(--rule)}
.proj-head{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:1rem var(--gut);
  align-items:baseline;width:100%;text-align:left;
  padding:clamp(1.5rem,3vw,2.3rem) 0;
  transition:padding-left .6s var(--slow);
}
.proj-item:hover .proj-head{padding-left:.7rem}
.proj-head .pt{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:clamp(1.08rem,1.9vw,1.5rem);line-height:1.24;letter-spacing:-.022em;font-weight:500}
.proj-head .pm{display:flex;align-items:center;gap:1.4rem}
.proj-status{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-3);border:1px solid var(--rule);border-radius:2px;padding:.3rem .6rem;white-space:nowrap;
  display:none;
}
@media(min-width:760px){.proj-status{display:inline-block}}
.plus{position:relative;width:15px;height:15px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--paper-2);transition:.5s var(--slow)}
.plus::before{left:0;top:7px;width:15px;height:1px}
.plus::after{left:7px;top:0;width:1px;height:15px}
.proj-item.open .plus::after{transform:rotate(90deg);opacity:0}
.proj-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--slow)}
.proj-item.open .proj-body{grid-template-rows:1fr}
.proj-body > div{overflow:hidden}
.proj-inner{
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.6rem);
  padding:.4rem 0 clamp(2rem,4vw,3.2rem);
}
/* Platzhalter, der die Spalte der Sektionsnummer frei hält.
   Muss VOR der Media Query stehen, sonst überschreibt er sie. */
.proj-inner > .sp{display:none}
@media(min-width:900px){
  .proj-inner{
    grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.08fr);
    gap:var(--gut);align-items:start;
  }
  .proj-inner > .sp {display:block;grid-column:1;grid-row:1}
  .proj-inner > div {grid-column:2;grid-row:1}   /* Daten und Text links  */
  .proj-inner > .fig{grid-column:3;grid-row:1}   /* Konzeptbild rechts    */
}
/* Konzeptbilder: leicht gerundet, Haarlinie im Akzentblau,
   weicher Schlagschatten nach unten für etwas Tiefe. */
.fig{
  position:relative;overflow:hidden;background:var(--ink-3);aspect-ratio:3/2;
  border-radius:12px;
  border:1px solid rgba(138,182,210,.24);
  box-shadow:
    inset 0 1px 0 rgba(233,230,222,.07),
    0 20px 44px -26px rgba(0,0,0,.95);
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.proj-item:hover .fig{
  border-color:rgba(138,182,210,.44);
  box-shadow:
    inset 0 1px 0 rgba(233,230,222,.1),
    0 24px 52px -26px rgba(0,0,0,1),
    0 0 0 4px rgba(138,182,210,.05);
}
.fig img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.68) contrast(1.08) brightness(.86);
  transform:scale(1.02);transition:transform 1.6s var(--slow),filter .8s;
}
.proj-item.open .fig img{transform:scale(1)}
.fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(200deg,rgba(90,140,175,.18),rgba(5,8,10,.28));
  mix-blend-mode:overlay;
}
.fig figcaption{
  position:absolute;left:.75rem;bottom:.75rem;z-index:2;
  padding:.42rem .68rem;border-radius:5px;
  background:rgba(5,8,10,.66);border:1px solid rgba(233,230,222,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);
}
.spec{border-top:1px solid var(--rule)}
.spec div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.6rem 1.2rem;padding:.72rem 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);padding-top:.2rem}
.spec dd{font-size:.975rem;color:var(--paper)}
.impact{margin-top:1.5rem;list-style:none;display:grid;gap:.5rem}
.impact li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;font-size:.94rem;color:var(--paper-2)}
.impact li::before{content:"";width:5px;height:1px;background:var(--sky);margin-top:.75rem}
.note{
  margin-top:clamp(2rem,4vw,3rem);padding:1.2rem 0 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:1fr;gap:.6rem;
}
@media(min-width:800px){.note{grid-template-columns:9.5rem minmax(0,1fr);gap:1.2rem}}

/* ── Updates ────────────────────────────────────────────────────── */
.news{border-top:1px solid var(--rule)}
.news a{
  display:grid;grid-template-columns:1fr;gap:.5rem var(--gut);
  padding:clamp(1.2rem,2.4vw,1.75rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .6s var(--slow),background .5s;
}
@media(min-width:840px){
  .news a{grid-template-columns:3.2rem minmax(0,20rem) minmax(0,1fr) 1.5rem;align-items:baseline}
}
.news a:hover{padding-left:.7rem;background:rgba(233,230,222,.02)}
.news h3{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:1.04rem;line-height:1.34;letter-spacing:-.016em}
.news p{font-size:.94rem;color:var(--paper-2);max-width:60ch}
.news .go{justify-self:end;color:var(--paper-3);transition:transform .5s var(--slow),color .4s;display:none}
@media(min-width:840px){.news .go{display:block}}
.news a:hover .go{transform:translateX(4px);color:var(--sky)}

/* ── Games ──────────────────────────────────────────────────────── */
.games{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:700px){.games{grid-template-columns:1fr 1fr}}
@media(min-width:1150px){.games{grid-template-columns:repeat(4,1fr)}}
.game{
  background:var(--ink);padding:clamp(1.6rem,3vw,2.2rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;min-height:16rem;
  transition:background .55s var(--ease);
}
.game:hover{background:var(--ink-3)}
.game h3{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:1.2rem;line-height:1.2;letter-spacing:-.022em;margin:.8rem 0 .6rem}
.game p{font-size:.93rem;color:var(--paper-2)}
.game .play{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--paper)}
.game .play i{
  width:26px;height:26px;border:1px solid var(--rule-2);border-radius:50%;
  display:grid;place-items:center;transition:.5s var(--slow);
}
.game .play i::after{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;margin-left:2px}
.game:hover .play i{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ── Mitmachen ──────────────────────────────────────────────────── */
.ways{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media(min-width:860px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{background:var(--ink);padding:clamp(1.8rem,3.4vw,2.6rem);display:flex;flex-direction:column;gap:1rem;min-height:15rem}
.way h3{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:1.26rem;line-height:1.22;letter-spacing:-.024em}
.way p{font-size:.97rem;color:var(--paper-2)}
.way .cost{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline}
.way .cost b{font-weight:400;font-size:.95rem}

/* ── Status ─────────────────────────────────────────────────────── */
.status-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:end}
@media(min-width:900px){.status-grid{grid-template-columns:1.1fr 1fr}}
.meter{margin-top:2rem}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.meter-top b{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:clamp(2.1rem,4.2vw,3rem);line-height:1;letter-spacing:-.035em}
.meter-bar{height:1px;background:var(--rule-2);position:relative}
.meter-bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--paper);transition:width 2.4s var(--slow)}
.meter-steps{display:flex;justify-content:space-between;margin-top:.9rem;gap:.6rem;flex-wrap:wrap}
.meter-steps span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.meter-steps span.done{color:var(--paper-2)}
.meter-steps span.live{color:var(--sky)}

/* ── Kontakt ────────────────────────────────────────────────────── */
.form{display:grid;gap:1.6rem;max-width:34rem}
.f-row{display:grid;gap:1.6rem}
@media(min-width:600px){.f-row{grid-template-columns:1fr 1fr}}
.field{position:relative}
.field label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3);margin-bottom:.6rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-2);
  color:var(--paper);font:400 1rem/1.6 'Inter',sans-serif;padding:.55rem 0;
  transition:border-color .4s;border-radius:0;
}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field select option{background:var(--ink-2);color:var(--paper)}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--paper)}
.field .caret{position:absolute;right:2px;bottom:1.1rem;width:6px;height:6px;border-right:1px solid var(--paper-3);border-bottom:1px solid var(--paper-3);transform:rotate(45deg);pointer-events:none}
.submit{
  justify-self:start;border:1px solid var(--rule-2);border-radius:2px;
  padding:.82rem 1.5rem;font-size:.85rem;transition:.45s var(--ease);
  display:inline-flex;align-items:center;gap:.7rem;
}
.submit:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.contact-aside{display:grid;gap:1.6rem;align-content:start}
.contact-aside div{display:grid;gap:.35rem}

/* Social-Schaltflächen in den Markenfarben */
.contact-aside .socials{display:flex;flex-direction:row;flex-wrap:wrap;gap:.62rem;margin-top:.15rem}
.contact-aside .socials a{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.7);
  transition:transform .45s var(--slow),box-shadow .45s var(--ease),filter .4s;
}
.contact-aside .socials a svg{width:19px;height:19px;display:block}
.contact-aside .socials a:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.85),0 0 0 4px rgba(233,230,222,.07);
}
.contact-aside .socials a:active{transform:translateY(-1px)}
.s-mail{background:#525c66}
.s-wa  {background:#25d366}
.s-fb  {background:#1877f2}
.s-ig  {background:radial-gradient(circle at 28% 108%,#fdd66b 0%,#f97c3c 22%,#e8437f 46%,#c32aa3 66%,#5b51d8 92%)}
.s-x   {background:#0b0b0d;box-shadow:inset 0 0 0 1px rgba(233,230,222,.26),0 2px 10px -4px rgba(0,0,0,.7)}
.s-x:hover{box-shadow:inset 0 0 0 1px rgba(233,230,222,.4),0 10px 24px -8px rgba(0,0,0,.85),0 0 0 4px rgba(233,230,222,.07)}

/* ── Fuß ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.6rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:1100px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-grid ul{list-style:none;display:grid;gap:.6rem}
.foot-grid a{font-size:.94rem;color:var(--paper-2);transition:color .35s}
.foot-grid a:hover{color:var(--paper)}
.foot-bottom{
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.6rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}

/* ── Einblenden ─────────────────────────────────────────────────── */
[data-in]{opacity:0;transform:translateY(22px);transition:opacity 1.15s var(--ease),transform 1.15s var(--slow)}
[data-in].seen{opacity:1;transform:none}
[data-in][data-d="1"]{transition-delay:.09s}
[data-in][data-d="2"]{transition-delay:.18s}
[data-in][data-d="3"]{transition-delay:.27s}

/* ── Ladeschleier ───────────────────────────────────────────────── */
#veil{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s;
}
#veil.done{opacity:0;visibility:hidden}
.veil-inner{text-align:center;display:grid;gap:1.4rem;justify-items:center}
.veil-inner .mk{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.veil-line{width:132px;height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.veil-line i{position:absolute;inset:0;background:var(--paper);transform-origin:left;transform:scaleX(0);transition:transform .3s linear}

/* ═══════════════════════════════════════════════════════════════════
   HANDY UND TABLET
   ───────────────────────────────────────────────────────────────────
   Alles ab hier gilt nur unterhalb der Desktop-Breite. Bewusst als
   eigener Block am Ende, statt die Grundwerte zu verändern: So bleibt
   die Desktop-Ansicht garantiert unberührt, und man sieht auf einen
   Blick, was am Handy anders ist.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopfzeile ──────────────────────────────────────────────────────
   Marke, Spendenknopf und Menü mussten sich 331 px teilen und liefen
   über — der Menüknopf lag bei 360 px Geräten außerhalb des Bildes.
   Engere Abstände und ein kompakterer Knopf schaffen den Platz. */
@media (max-width:999px){
  .masthead{padding:1.05rem 0}
  .masthead.compact{padding:.72rem 0}
  .mast-row{gap:.85rem}
  .mast-right{gap:.62rem}
  .link-btn{padding:.52rem .92rem;font-size:.78rem}

  /* Eine 1-px-Haarlinie verschwindet auf einem Handydisplay fast.
     Etwas kräftiger und mit größerer Tippfläche. */
  .mast-toggle{width:32px;height:32px;gap:6px}
  .mast-toggle i{height:1.5px}
  .mast-toggle i:nth-child(1){width:21px}
  .mast-toggle i:nth-child(2){width:13px}
  body.menu-open .mast-toggle i:nth-child(1){width:21px;transform:translateY(3.75px) rotate(45deg)}
  body.menu-open .mast-toggle i:nth-child(2){width:21px;transform:translateY(-3.75px) rotate(-45deg)}
}
@media (max-width:420px){
  .wordmark .mk{font-size:1.04rem}
  .link-btn{padding:.5rem .8rem;font-size:.74rem}
  .link-btn .arw{display:none}
}

/* ── Vollbild-Menü ──────────────────────────────────────────────────
   Die Kurzbeschreibung in der dritten Spalte brach auf zwei Zeilen und
   drängte den Titel zusammen. Am Handy zählt die Zielgenauigkeit des
   Fingers mehr als die Beschriftung. */
@media (max-width:600px){
  .curtain-list a{grid-template-columns:2.6rem 1fr;gap:0 1rem;padding:1rem 0}
  .curtain-list a > span:nth-child(3){display:none}
  .curtain-foot{margin-top:2rem;gap:.45rem 1.4rem}
}

/* ── Hero ───────────────────────────────────────────────────────────
   Am Desktop steht der Globus rechts neben der Schrift. Hochkant gibt
   es dieses Nebeneinander nicht: Die Kugel gehört über den Text, größer
   und mittig, und der Verlauf verdunkelt nur von unten. Die seitliche
   Abdunklung von links wäre hier wirkungslos und ließe die Schrift auf
   der hellen Kugel liegen. */
@media (max-width:899px){
  .hero-veil{
    background:linear-gradient(to top,
      rgba(5,8,10,.97) 0%,
      rgba(5,8,10,.9)  27%,
      rgba(5,8,10,.48) 50%,
      rgba(5,8,10,0)   80%);
  }
  #hero{padding-top:5.4rem}
  .hero-inner{padding-bottom:clamp(2.4rem,7vw,6rem)}
  .hero-kicker{gap:.6rem;margin-bottom:1.35rem}
  /* Eine Spur enger gesetzt, damit „Vorfinanzierungsphase · Hamburg ·
     seit 2026" auf eine Zeile passt statt mit „2026" allein zu brechen. */
  .hero-kicker .tag{font-size:.6rem;letter-spacing:.095em}

  .hero-foot{gap:1.7rem}
  .hero-foot p{font-size:.975rem;max-width:none}
  /* Drei Kennzahlen als geordnete Tafel mit Haarlinie statt als lose
     Reihe, in der die dritte einsam unter den beiden anderen hing. */
  .hero-meta{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;
    width:100%;border-top:1px solid var(--rule);padding-top:1.05rem;
  }
  .hero-meta div:last-child{grid-column:1 / -1}
}

/* ── Abschnitte ─────────────────────────────────────────────────────
   Die Sektionsnummer stand in einer 2,8-rem-Spalte neben der
   Überschrift und nahm der Schrift fast ein Sechstel der Breite.
   Hochkant sitzt sie besser darüber. */
@media (max-width:899px){
  .band{padding:clamp(3.6rem,9vw,6rem) 0}
  .band-head{grid-template-columns:1fr;gap:.75rem 0;padding-bottom:2.2rem}
  .band-head .num{padding-top:0}
  .band-head h2{margin-bottom:.9rem}
  .band-head .lede{font-size:1.01rem}
}

/* ── Nummerierte Liste (Kreislauf) ──────────────────────────────────
   Der auffälligste Fehler: Das Raster hatte zwei Spalten, aber drei
   Kinder. Der Absatz rutschte damit unter die Nummer — in eine
   3,2 rem schmale Spalte, ein Wort pro Zeile. Feste Zuordnung. */
@media (max-width:799px){
  .ol-steps li{grid-template-columns:2.6rem minmax(0,1fr);gap:.3rem 1rem}
  .ol-steps .st{grid-column:1;grid-row:1;padding-top:.3rem}
  .ol-steps h3{grid-column:2;grid-row:1}
  .ol-steps p{grid-column:2;grid-row:2;margin-top:.2rem;max-width:none}
}

/* ── Projekte ───────────────────────────────────────────────────────
   Die Kennwerte hatten eine feste 9,5-rem-Spalte für die Bezeichnung.
   Bei 360 px blieben dem Wert 130 px — jeder Eintrag drei Zeilen hoch.
   Bezeichnung darüber, Wert über die ganze Breite. */
@media (max-width:899px){
  .proj-head{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.5rem 1rem}
  .proj-head .pt{font-size:1.06rem}
  .spec div{grid-template-columns:1fr;gap:.25rem;padding:.8rem 0}
  .spec dt{padding-top:0}
  .spec dd{font-size:.95rem}
  .impact li{font-size:.92rem}
  .fig figcaption{left:.6rem;bottom:.6rem;font-size:.545rem}
}

/* ── Games und Mitmachen ────────────────────────────────────────────
   Die Karten hatten eine Mindesthöhe von 16 rem für das
   vierspaltige Raster. Einspaltig sind das leere Flächen. */
@media (max-width:699px){
  .game{min-height:0;gap:1.35rem;padding:1.5rem 1.35rem}
  .game h3{margin:.7rem 0 .5rem}
  .way{min-height:0;padding:1.6rem 1.35rem;gap:.85rem}
  .way .cost{padding-top:1rem}
}

/* ── Status, Formular, Fuß ──────────────────────────────────────── */
@media (max-width:599px){
  /* Fünf Meilensteine auf 331 px: etwas kleiner gesetzt, damit die
     Wörter nicht aneinanderstoßen. */
  .meter-steps{gap:.45rem .85rem}
  .meter-steps span{font-size:.555rem;letter-spacing:.1em}
  .meter{margin-top:1.6rem}
  /* Ein Absendeknopf, den man mit dem Daumen nicht verfehlt. */
  .submit{width:100%;justify-content:center;padding:.95rem 1.5rem}
  .form{gap:1.4rem}
  .f-row{gap:1.4rem}
  .foot-bottom{gap:.85rem}
  .foot-grid{gap:2.2rem}
}

/* ── Touch-Bedienung ────────────────────────────────────────────────
   Auf Geräten ohne Maus bleibt ein Hover-Zustand nach dem Antippen
   hängen: Die Zeile, die man gerade berührt hat, verschiebt sich und
   bleibt verschoben. Deshalb sind die Hover-Bewegungen dort aus —
   erkannt am Gerät, nicht an der Fensterbreite. */
@media (hover:none){
  .proj-item:hover .proj-head{padding-left:0}
  .news a:hover{padding-left:0;background:none}
  .ol-steps li:hover{background:none}
  .game:hover{background:var(--ink)}
  .way:hover{background:var(--ink)}
  .curtain-list a:hover{padding-left:0;color:inherit}
  .nav a:hover{background:none;color:var(--paper-2)}
  .wordmark:hover .mk{opacity:1}
  .contact-aside .socials a:hover{
    transform:none;box-shadow:0 2px 10px -4px rgba(0,0,0,.7);
  }
  .s-x:hover{box-shadow:inset 0 0 0 1px rgba(233,230,222,.26),0 2px 10px -4px rgba(0,0,0,.7)}
  .link-btn:hover{border-color:var(--rule-2);background:rgba(7,12,16,.62);color:var(--paper)}
  .submit:hover{background:none;color:var(--paper);border-color:var(--rule-2)}
  .foot-grid a:hover{color:var(--paper-2)}
  .game:hover .play i{background:none;color:inherit;border-color:var(--rule-2)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-in],.hero-h .ln > span,.hero-foot{opacity:1!important;transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   UNTERSEITEN
   ───────────────────────────────────────────────────────────────────
   Seit die Menüpunkte eigene Adressen haben, beginnt jede Unterseite
   direkt mit ihrem Inhalt. Der erste Abschnitt braucht deshalb Luft
   nach oben: Die Kopfzeile liegt fest im Viewport und würde ihn sonst
   überdecken.
   ═══════════════════════════════════════════════════════════════════ */
.band.page-top{padding-top:clamp(8.5rem,15vw,12.5rem)}
@media (max-width:899px){
  .band.page-top{padding-top:8rem}
}
/* Kein Hero, also keine Trennlinie am oberen Rand des ersten Bandes. */
.band.page-top{border-top:0}

/* Der Titel einer Unterseite steht dort, wo im Onepager die
   Sektionsüberschrift stand — gleiche Größe, gleiche Rasterspalte. */
.page-head{margin-bottom:0}
.page-head h1{margin-bottom:1.1rem}

/* ── Rechtstexte ────────────────────────────────────────────────────
   Impressum und Datenschutz sind Lesetexte, keine Gestaltungsflächen.
   Eine schmale Spalte, klare Zwischentitel, viel Ruhe. */
.legal{max-width:62ch}
.legal h2{
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:600;font-size:1.12rem;line-height:1.3;letter-spacing:-.018em;
  margin:0 0 .9rem;
}
.legal section{
  padding:clamp(1.6rem,3vw,2.2rem) 0;border-top:1px solid var(--rule);
}
.legal section:first-of-type{border-top:0;padding-top:0}
.legal p{color:var(--paper-2);font-size:1rem;line-height:1.66;max-width:62ch}
.legal p + p{margin-top:.9rem}
/* Nach einer Aufzählung braucht der nächste Absatz denselben Abstand —
   sonst klebt er an der letzten Zeile der Liste. */
.legal ul + p{margin-top:1.1rem}
.legal a{border-bottom:1px solid var(--rule-2);transition:border-color .35s}
.legal a:hover{border-bottom-color:var(--paper)}
.legal ul{list-style:none;margin-top:.9rem;display:grid;gap:.5rem}
.legal li{
  display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;
  font-size:.97rem;color:var(--paper-2);
}
.legal li::before{content:"";width:5px;height:1px;background:var(--sky);margin-top:.78rem}
/* Anschrift und Vertretung: Zeilenumbrüche zählen, deshalb kein <p>. */
.legal address{font-style:normal;color:var(--paper);font-size:1rem;line-height:1.66}
.legal .stamp{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;
  border-top:1px solid var(--rule);
}

/* ═══════════════════════════════════════════════════════════════════
   NACHTRÄGE
   ═══════════════════════════════════════════════════════════════════ */

/* Die Projekttitel sind jetzt echte Überschriften, die den Aufklapp-
   Knopf umschließen. Sichtbar soll sich dadurch nichts ändern: Die
   Überschrift ist nur die Hülle, gestaltet wird weiter der Knopf. */
.proj-title{
  margin:0;font:inherit;font-weight:inherit;letter-spacing:inherit;
}
.proj-title > .proj-head{width:100%}

/* Datum eines Tech-Updates. Steht rechts neben dem Text, am Handy
   darunter — und sagt Suchmaschinen, wie frisch der Eintrag ist. */
.news-datum{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  color:var(--paper-3);white-space:nowrap;align-self:start;
}
@media(min-width:840px){
  .news a{grid-template-columns:3.2rem minmax(0,20rem) minmax(0,1fr) auto 1.5rem}
  .news-datum{padding-top:.2rem}
}
@media(max-width:839px){
  .news-datum{margin-top:.1rem}
}

/* ── Fehlerseite ──────────────────────────────────────────────────── */
.oops{
  min-height:100svh;display:grid;align-content:center;
  padding:clamp(6rem,14vw,10rem) 0;position:relative;z-index:3;
}
.oops .code{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky);display:block;margin-bottom:1.4rem;
}
.oops p{margin:1.2rem 0 2.2rem;color:var(--paper-2);font-size:1.06rem;max-width:46ch}
.oops .wege{display:flex;flex-wrap:wrap;gap:.6rem}
.oops .wege a{
  border:1px solid var(--rule-2);border-radius:100px;
  padding:.6rem 1.15rem;font-size:.85rem;color:var(--paper-2);
  transition:border-color .4s,color .4s,background .4s;
}
.oops .wege a:hover{border-color:var(--paper);color:var(--ink);background:var(--paper)}
@media (hover:none){
  .oops .wege a:hover{border-color:var(--rule-2);color:var(--paper-2);background:none}
}