/* ═══════════════════════════════════════════════════════════════
   WE — eine Sprache für alle Seiten.

   Die Startseite hat sieben Regeln, die nirgends aufgeschrieben
   standen. Hier stehen sie:

   1  Der Schnitt ist das Maß.        φ = 1,618
   2  Zwei Stimmen, kein Dazwischen.  laut 700/−.045em · leise 500/+.2em
   3  Die Mitte hält.                 jede Seite beginnt mit einer Bühne
   4  Die schwarze Kante.             fix am Fensterrand, nicht am Textende
   5  Die Glut ist ein Punkt.         nie eine Fläche
   6  Nichts hat einen Rahmen.        der Abstand trennt
   7  Alles atmet.                    ein Atemzug je Seite

   Was NICHT gilt: auf Textseiten gewinnt die Lesbarkeit. Die Bühne
   kommt vor dem Text, nie darüber. Die Fließspalte bleibt bei 41em.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --weiss:#FFFFFF;
  --tinte:#0E0E10;
  --text:#33333A;
  --grau:#7C7C82;
  --leise:#5E5E68;
  --linie:#E8E8EC;
  --nebel:#F2F2F4;
  --glut:#C8502E;
  --tafel:#0B0B0D;
  --tafel-kante:#1E1E22;

  --phi:1.618;
  /* Die Fließspalte — unverändert breit, wegen der Lesbarkeit.
     In px, nicht in em: der Fuß setzt eine kleinere Schrift, und
     41em hätten dort eine schmalere Spalte ergeben — die Marke im
     Fuß stand dann 85px weiter innen als der Text darüber. */
  --breite:779px;         /* = 41em bei 19px Grundschrift */
  --band:58px;            /* die schwarze Kante am Fuß jeder Seite */
  /* Der Seitenrand. Er war fest auf 24px — bei 779px Spaltenbreite
     wirkt das auf einem grossen Schirm wie angeklebt. Jetzt waechst er
     mit dem Fenster, abgeleitet aus dem Schnitt dieser Seite: phi hoch
     sechs ist 17,94. 390px ergaeben 21,7px, darum die Untergrenze bei
     24px — am Handy bleibt alles wie es war. 779px ergeben 43px,
     ab etwa 1000px sind 56px erreicht. */
  --rand:clamp(24px, calc(100vw / 17.94), 56px);
  --konsole-b:210px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--weiss); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  font-size:19px; line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding:0 var(--rand) var(--band);
  overflow-x:hidden;
}
.spalte{max-width:var(--breite);margin:0 auto}

/* ── Regel 2 · Die zwei Stimmen ──────────────────────────────
   Alles, was auf der Seite spricht, spricht in einer von beiden.
   Es gibt keine dritte. Größen sind Skalen EINER Stimme, nicht
   Sprossen einer Leiter.                                      */
.leise{
  font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leise); line-height:1.5;
}
.marke-oben{
  display:block; margin-bottom:16px;
  font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leise);
}

/* ── Regel 3 · Die Bühne ─────────────────────────────────────
   Ein Wort, mittig, im Schnitt. Darum Leere. Der Text beginnt
   darunter — sichtbar genug, dass man weiterliest.            */
.buehne{
  position:relative;
  height:clamp(300px, 56svh, 540px);
  margin:0 calc(var(--rand) * -1) clamp(30px,6vh,64px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:0 var(--rand);
}
.buehne h1, .buehne .wort-gross{
  font-size:min(17vw, calc(var(--buehne-h, 46vh) * .58));
  font-weight:700; letter-spacing:-.045em; line-height:.86;
  color:var(--tinte); margin:0; text-wrap:balance;
  animation:auf 1.6s cubic-bezier(.16,1,.3,1) both, atmen 22s ease-in-out 1.6s infinite;
}
.buehne .unter{
  margin-top:clamp(20px,4vh,38px);
  animation:auf 1.6s cubic-bezier(.16,1,.3,1) .45s both;
}
@keyframes auf{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
/* Regel 7 · ein einziger Atemzug je Seite, halbe Amplitude der Startseite */
@keyframes atmen{0%,100%{transform:scale(1)} 50%{transform:scale(1.011)}}

/* ── Typografie ──────────────────────────────────────────────
   h1 lebt in der Bühne. h2 ist dieselbe laute Stimme, kleiner —
   nicht eine mittlere Sprosse dazwischen.                     */
h1{
  font-size:clamp(46px,9.5vw,104px);
  font-weight:700; letter-spacing:-.045em; line-height:.9;
  color:var(--tinte); text-wrap:balance;
  margin:clamp(56px,11vh,116px) 0 clamp(24px,4vh,38px);
}
h2{
  font-size:clamp(32px,4.6vw,48px); font-weight:700;
  letter-spacing:-.045em; line-height:.98;
  color:var(--tinte); text-wrap:balance;
  margin:clamp(64px,10vh,112px) 0 20px;
}
h3{font-size:21px;font-weight:700;letter-spacing:-.025em;color:var(--tinte);margin:38px 0 6px}
p{margin-bottom:18px}
p:last-child{margin-bottom:0}
p.gross{
  font-size:clamp(21px,2.7vw,27px); line-height:1.42; font-weight:700;
  letter-spacing:-.022em; color:var(--tinte); margin-bottom:26px;
  text-wrap:balance;
}
b,strong{font-weight:600;color:var(--tinte)}
em.still{font-style:normal;color:var(--grau)}

/* Regel 5 · Die Glut ist eine Linie unter dem Wort, keine Fläche.
   Der Link bleibt trotzdem auf den ersten Blick ein Link.      */
a{
  color:var(--tinte); text-decoration:none;
  border-bottom:1.5px solid var(--glut);
  padding-bottom:1px;
  transition:border-color .2s, color .2s;
}
a:hover{color:var(--glut); border-color:var(--tinte)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--glut); outline-offset:3px; border-radius:1px;
}

/* Regel 5 · der Aufzählungspunkt glüht nicht mehr — er ist ein Strich */
ul{list-style:none;margin:18px 0 24px}
li{padding-left:24px;position:relative;margin-bottom:12px}
li:before{content:'';position:absolute;left:0;top:.82em;
  width:12px;height:1.5px;background:var(--leise);opacity:.5}

hr{border:0;border-top:1px solid var(--linie);margin:56px 0}

/* ── Regel 6 · Der ruhige Block hat keinen Rahmen mehr ───────
   Früher: zwei Haarlinien. Jetzt: Luft und eine leise Zeile.  */
.ruhig{
  margin:clamp(40px,6vh,64px) 0;
  padding:0;
}
.ruhig p:last-child{margin-bottom:0}
.ruhig > .leise{display:block; margin-bottom:10px}

/* ── Formular · nur eine Grundlinie, kein Kasten ─────────────*/
label{display:block;margin-bottom:10px;
  font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise)}
.hilf{font-size:19px;color:var(--grau);margin-bottom:16px;line-height:1.55}
textarea,input[type=text]{
  width:100%;font:inherit;font-size:19px;line-height:1.55;
  padding:12px 0;background:transparent;color:var(--tinte);
  border:0;border-bottom:1.5px solid var(--linie);border-radius:0;
  resize:vertical;transition:border-color .2s;
}
textarea::placeholder,input::placeholder{color:#A6A6AE}
textarea:focus,input:focus{outline:none;border-bottom-color:var(--glut)}

/* Genau eine Handlung je Seite darf schwarz stehen. Alles
   Weitere ist ein Strichknopf.                                */
button{
  font:inherit;font-weight:600;font-size:17px;
  padding:14px 30px;border:1.5px solid var(--tinte);border-radius:2px;
  background:var(--tinte);color:#fff;cursor:pointer;margin-top:24px;
  transition:background .2s,color .2s,border-color .2s;
}
button:hover{background:var(--glut);border-color:var(--glut)}
button:disabled{background:transparent;color:#B4B4BC;border-color:var(--linie);cursor:default}
button.still{background:transparent;color:var(--tinte);border-color:var(--linie)}
button.still:hover{background:transparent;color:var(--glut);border-color:var(--glut)}

/* ── Kopf ────────────────────────────────────────────────────*/
.kopf{padding:26px 0 0}
.marke{
  font-size:22px; font-weight:700; letter-spacing:-.045em;
  color:var(--tinte); text-decoration:none; line-height:1;
  border:0; padding:0;
}
.marke:hover{color:var(--glut)}

/* ── Der Fuß ist hell ────────────────────────────────────────
   Das Schwarz gehört jetzt der Kante. Zwei Schwarz wären eines
   zu viel, also wird der Fuß leise.                           */
footer{
  margin:clamp(80px,13vh,140px) 0 0;
  padding:clamp(26px,4vh,40px) 0 clamp(30px,5vh,46px);
  border-top:1px solid var(--linie);
  background:transparent; color:var(--grau);
  font-size:16px; line-height:1.7;
}
footer .spalte{max-width:var(--breite)}
footer a{color:var(--leise); border-bottom-color:var(--linie)}
footer a:hover{color:var(--tinte); border-bottom-color:var(--glut)}
footer .zeile{margin-bottom:8px}
footer .zeile:last-child{margin-bottom:0}
footer .fussmarke{
  display:block; font-size:22px; font-weight:700; letter-spacing:-.045em;
  color:var(--tinte); text-decoration:none; margin-bottom:20px; line-height:1;
  border:0; padding:0;
}
footer .fussmarke:hover{color:var(--glut)}
footer .echr{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--linie);
  font-size:15px; color:var(--grau);
}

/* ═══════════════════════════════════════════════════════════
   REGEL 4 · DIE SCHWARZE KANTE
   Fix am unteren Fensterrand — auf jeder Seite, nicht nur auf
   der Startseite. Sie gibt der Seite einen Boden.
   ═══════════════════════════════════════════════════════════ */
.kante{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  direction:ltr;          /* die Uhr läuft immer von links nach rechts */
  height:var(--band);
  background:var(--tafel); border-top:1px solid #000;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(7px,1.8vw,20px);
  padding:0 clamp(10px,2vw,18px);
  cursor:pointer; user-select:none;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset;
  animation:auf 1.6s cubic-bezier(.16,1,.3,1) .5s both;
}
.kante .kuerzel{
  font-family:var(--mono); font-size:clamp(10px,1.5vmin,13px); font-weight:500;
  letter-spacing:.14em; color:#8A8A92; white-space:nowrap;
}
.kante .gruppe{display:flex;flex-direction:column;align-items:center;gap:3px}
.kante .karten{display:flex;gap:3px}
.kante .gruppe i{
  font-style:normal; font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; color:#6B6B74; line-height:1;
}
.kante .trenner{
  align-self:center; margin-bottom:11px; color:#4A4A52;
  font-family:var(--mono); font-size:13px;
}
/* Eine Karte — dieselbe Mechanik wie auf der Startseite, kleiner. */
.kante .k{
  --kh:30px; --kb:calc(var(--kh) * .70);
  position:relative; width:var(--kb); height:var(--kh);
  perspective:260px;
  font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:calc(var(--kh) * .66);
  border-radius:2px; background:#141418;
  box-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 0 1px var(--tafel-kante);
}
.kante .k .h{
  position:absolute; left:0; width:100%; height:50%;
  overflow:hidden; background:#17171C; color:#F4F4F6;
  display:flex; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.kante .k .h span{display:block;height:var(--kh);line-height:var(--kh)}
.kante .k .o{top:0;border-radius:2px 2px 0 0;align-items:flex-start;
  background:#1B1B21;border-bottom:1px solid rgba(0,0,0,.55)}
.kante .k .u{bottom:0;border-radius:0 0 2px 2px;align-items:flex-end;background:#131318}
.kante .k .u span{margin-top:calc(var(--kh) * -.5)}
.kante .k .fo{z-index:3;transform-origin:50% 100%;transform:rotateX(-90deg)}
.kante .k .fu{z-index:3;transform-origin:50% 0%;transform:rotateX(90deg)}
.kante .k .fo.los{animation:klappO .13s cubic-bezier(.5,0,1,.55) forwards}
.kante .k .fu.los{animation:klappU .13s cubic-bezier(0,.45,.5,1) .13s forwards}
@keyframes klappO{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes klappU{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
.kante .k .fo:after{content:'';position:absolute;inset:0;background:#000;
  opacity:0;transition:opacity .13s linear}
.kante .k .fo.los:after{opacity:.45}

/* Die Anzeige — die Kante wächst über die Seite und kehrt zurück. */
.anzeige{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,8,0); pointer-events:none;
  transition:background .42s ease;
}
.anzeige.auf{background:rgba(6,6,8,.72); pointer-events:auto}
.anzeige .blatt{
  position:relative; width:min(94vw,760px); max-height:84vh; overflow:auto;
  background:var(--tafel); color:#F4F4F6;
  border:1px solid var(--tafel-kante); border-radius:3px;
  padding:clamp(26px,5vmin,48px) clamp(22px,5vmin,48px);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform-origin:50% 100%;
  transform:translateY(38vh) scale(.28); opacity:0;
  transition:transform .44s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.anzeige.auf .blatt{transform:none; opacity:1}
.anzeige .blatt h2{
  font-size:clamp(24px,3.4vw,34px); color:#fff; margin:0 0 26px;
  letter-spacing:-.04em; line-height:1;
}
.anzeige .blatt .zeile{
  display:grid; grid-template-columns:88px 1fr; gap:0 18px;
  padding:15px 0; border-top:1px solid var(--tafel-kante);
}
.anzeige .blatt .zeile .schild{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#6B6B74; padding-top:6px;
}
.anzeige .blatt .zeile .satz{font-size:17px; line-height:1.55; color:#C9C9D1}
.anzeige .blatt .zeile.gross .satz{font-size:21px; color:#fff; font-weight:600}
.anzeige .blatt .zeile b{color:#fff; font-weight:600}
.anzeige .blatt .zu{
  margin-top:28px; background:transparent; color:#8A8A92;
  border:1px solid #333; border-radius:2px;
  font-size:12px; letter-spacing:.2em; padding:12px 26px;
}
.anzeige .blatt .zu:hover{color:#fff; border-color:#666; background:transparent}
@media (max-width:560px){
  .anzeige .blatt .zeile{grid-template-columns:1fr; gap:6px}
  .anzeige .blatt .zeile .schild{padding-top:0}
}

/* ═══════════════════════════════════════════════════════════
   DAS MENÜ — eine Fassung für alle Seiten, Startseite inbegriffen.
   Früher: graue Kapseln, eine davon in Glut gefüllt.
   Jetzt: eine Liste in der leisen Stimme, die beim Zeigen laut
   wird. Die Glut bleibt ein Strich und ein Punkt — eine Linie,
   keine Fläche.

   Hinter den Menütexten liegt ein heller Schleier. Ohne ihn stand
   die Schrift auf dem Handy über der Bühne und war nicht mehr zu
   lesen. Kein Rahmen, keine Kante: nur Milch, die beim Öffnen
   aufzieht und beim Schließen wieder verschwindet.
   ═══════════════════════════════════════════════════════════ */
.knopf{
  position:fixed; top:0; right:0; z-index:52;
  padding:26px 30px; font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grau); cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:9px; transition:color .3s;
}
.knopf .striche{display:flex;flex-direction:column;gap:3px}
.knopf .striche b{display:block;width:15px;height:1.5px;border-radius:0;
  background:currentColor;opacity:.65;transition:opacity .3s}
.knopf:hover .striche b,.knopf.offen .striche b{opacity:1}
.knopf:hover,.knopf.offen{color:var(--tinte)}
.knopf.fix{color:var(--glut)}

.konsole{
  position:fixed; top:52px; right:0; z-index:50;
  width:calc(var(--konsole-b) + 76px);
  padding:18px 30px 42px 46px;
  display:flex; flex-direction:column; align-items:flex-end; gap:0;
  pointer-events:none;
}
.konsole.offen{pointer-events:auto}
/* Der Schleier. Kein Kasten und keine Kante: ein Verlauf, der aus
   der oberen rechten Ecke kommt und nach innen auf null ausläuft.
   Ein backdrop-filter hatte hier zuerst gestanden — der zieht immer
   eine harte Grenze um sein Kästchen, und die schnitt mitten durch
   das Bühnenwort. */
.konsole:before{
  content:'';
  position:absolute; z-index:-1; pointer-events:none;
  /* Der Schleier ist größer als das Menü. Läge er genau darauf, endete
     der Verlauf an der Kante des Kästchens und man sähe genau dort eine
     Stufe — quer über das Bühnenwort. So läuft er außerhalb auf null aus
     und hat nirgends einen Rand. */
  top:-40px; right:-16px; bottom:-56px; left:-210px;
  background:radial-gradient(72% 118% at 93% 28%,
    rgba(255,255,255,.97) 40%,
    rgba(255,255,255,.94) 60%,
    rgba(255,255,255,.70) 78%,
    rgba(255,255,255,.28) 90%,
    rgba(255,255,255,0)   100%);
  opacity:0; transition:opacity .34s ease;
}
.konsole.offen:before{opacity:1}
.bogen{height:1.5px;width:0;background:var(--glut);margin-bottom:14px;
  transition:width .34s cubic-bezier(.16,1,.3,1)}
.konsole.offen .bogen{width:100%}
.seg{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  height:38px; padding:0; background:transparent;
  font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none;
  color:var(--leise); white-space:nowrap;
  border:0; border-radius:0;
  opacity:0; transform:translateX(9px);
  transition:opacity .3s ease, transform .34s cubic-bezier(.16,1,.3,1), color .2s;
}
.konsole.offen .seg{opacity:1; transform:none}
.seg:hover{color:var(--tinte); background:transparent}
/* Regel 5 · genau ein Glutpunkt im ganzen Menü */
.seg.akzent{color:var(--tinte)}
.seg.akzent:after{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--glut); flex:0 0 6px; order:2;
}
.konsole .seg:nth-of-type(1){transition-delay:.02s}
.konsole .seg:nth-of-type(2){transition-delay:.07s}
.konsole .seg:nth-of-type(3){transition-delay:.12s}
.konsole .seg:nth-of-type(4){transition-delay:.17s}
.zumachen{
  display:block; margin-top:30px; padding:0; height:auto; width:auto;
  border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grau);
  opacity:0; transition:opacity .25s ease .2s, color .2s;
}
.konsole.offen .zumachen{opacity:1}
.zumachen:hover{background:transparent;color:var(--tinte)}
.balken{display:none}

/* ═══════════════════════════════════════════════════════════
   DIE SPRACHWAHL — sie sitzt jetzt IN der Kante.
   Vorher klebte sie fix unten links, genau dort, wo die Kante
   hinkommt. In der Kante gibt es keine Kollision mehr.
   ═══════════════════════════════════════════════════════════ */
.sprachwahl{
  position:absolute; left:clamp(10px,2vw,20px); top:50%;
  transform:translateY(-50%); z-index:3; line-height:1;
}
.sprachknopf{
  margin:0; padding:7px 12px;
  background:transparent; color:#8A8A92;
  border:1px solid var(--tafel-kante); border-radius:2px;
  cursor:pointer; font-family:inherit;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:color .2s, border-color .2s;
}
.sprachknopf:hover{color:#fff; border-color:#4A4A52; background:transparent}
.sprachknopf .kurz{display:none}
.sprachliste{
  position:absolute; left:0; bottom:calc(100% + 10px);
  width:min(78vw,300px); max-height:min(58vh,420px); overflow-y:auto;
  display:none; grid-template-columns:1fr 1fr; gap:1px;
  padding:8px; border-radius:3px;
  background:var(--tafel); border:1px solid var(--tafel-kante);
  box-shadow:0 -18px 44px rgba(0,0,0,.5);
}
.sprachwahl.offen .sprachliste{display:grid}
.sprachliste button{
  margin:0; padding:8px 10px; border:0; border-radius:2px;
  background:transparent; color:#A8A8B2; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:400; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:none; letter-spacing:0;
}
.sprachliste button:hover{background:#17171C; color:#fff}
.sprachliste button.da{color:var(--glut); font-weight:600}
html.uebersetzt-laeuft body{opacity:.5; transition:opacity .2s}

/* ── Enge Fenster ────────────────────────────────────────────*/
@media (max-width:640px){
  :root{--konsole-b:180px; --rand:20px}
  body{font-size:18px}
  .knopf{padding:20px 22px}
  .konsole{top:48px; padding:16px 22px 38px 40px}
  /* Auf dem Handy darf die Bühne nicht zur Wüste werden: kürzer,
     und das Wort etwas größer, damit die Leere nicht überwiegt. */
  .buehne{height:clamp(230px,38svh,340px); margin-bottom:clamp(24px,4vh,40px)}
  .buehne h1, .buehne .wort-gross{font-size:min(20vw, calc(38svh * .62))}
}
@media (max-width:560px){
  /* In der Kante wird es eng: Kürzel statt Name, sonst stößt die
     Sprachwahl an die Fallblätter. */
  .kante .kuerzel{display:none}
  .kante .k{--kh:26px}
  .kante .gruppe i{font-size:7px;letter-spacing:.14em}
  .sprachknopf .lang{display:none}
  .sprachknopf .kurz{display:inline}
  .sprachknopf{padding:7px 10px;letter-spacing:.14em}
  .sprachliste{width:min(88vw,290px)}
  .sprachwahl{left:8px}
}
/* Sekunden weg, sobald es eng wird — dieselbe Entscheidung wie auf
   der Startseite. Die Minute ist die kleinste Einheit, die auf einem
   Handy noch lesbar bleibt. */
@media (max-width:560px){ .kante .sek{display:none} }
@media (max-width:380px){
  .kante{gap:5px}
  .kante .k{--kh:23px}
  .kante .trenner{font-size:11px;margin-bottom:9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .anzeige .blatt{transform:none;opacity:1}
}