/* ══════════════════════════════════════════════════════════════
   STRATOS COLLECTIVE
   Helles, ruhiges Interface. Ein weicher Verlauf als Grund, das
   Grün aus dem Logo als einzige Akzentfarbe, sonst Typografie
   und Weissraum. Bewusst zurückhaltend: keine Leuchtkanten,
   keine Dauerbewegung ausser dem Plattenteller in der Marke.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Grundflächen ───────────────────────────────────────── */
  --bg:#FAFBF8;
  --surface:rgba(20,26,18,.028);
  --surface-2:rgba(20,26,18,.052);

  /* ── Schrift ────────────────────────────────────────────── */
  --text:#141813;
  --muted:#525A4E;
  --faint:#67705F;

  /* ── Linien ─────────────────────────────────────────────── */
  --line:rgba(20,26,18,.12);
  --line-2:rgba(20,26,18,.22);

  /* ── Akzent: exakt das Grün aus logo.png ────────────────── */
  --accent:#3A533B;
  --accent-2:#2A3E2B;
  --accent-soft:rgba(58,83,59,.075);
  --accent-line:rgba(58,83,59,.30);
  --warn:#9C4327;

  /* ── Markenzeichen ──────────────────────────────────────── */
  --mark-bg:#DFEBDA;
  --mark-fg:#3A533B;

  /* ── Schatten, neutral und flach ────────────────────────── */
  --sh-1:0 2px 8px -4px rgba(20,26,18,.18);
  --sh-2:0 12px 28px -18px rgba(20,26,18,.34);
  --sh-3:0 24px 56px -40px rgba(20,26,18,.42);

  /* ── Typografie ─────────────────────────────────────────── */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── Mass und Rhythmus ──────────────────────────────────── */
  --maxw:1200px;
  --maxw-wide:1560px;
  --pad:clamp(20px,4.5vw,64px);
  --sec:clamp(78px,9vw,132px);
  --head:68px;

  /* ── Kurven ─────────────────────────────────────────────── */
  --ease:cubic-bezier(.3,.7,.3,1);
  --out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 20px);
  background:var(--bg);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
input,textarea,select{font-size:16px}
::selection{background:rgba(58,83,59,.15)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:var(--maxw-wide)}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:14px;z-index:300;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;
}

/* Elemente, die per Scroll eingeblendet werden, starten unsichtbar —
   aber nur wenn JavaScript wirklich läuft. */
.js [data-anim]{opacity:0}
.js .word-in{visibility:hidden}

/* ══ Hintergrund ═══════════════════════════════════════════
   Ein weicher Verlauf von oben nach unten, dazu zwei sehr
   blasse Grünfelder. Alles knapp über der Wahrnehmungsschwelle.
   ══════════════════════════════════════════════════════════ */
.bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(176deg,#FFFFFF 0%,#FAFBF8 44%,#EFF3EA 100%);
}
.bg i{position:absolute;inset:0;display:block;will-change:transform}
.bg .b1{background:radial-gradient(56vw 46vw at 12% -8%,rgba(58,83,59,.055),transparent 62%)}
.bg .b2{background:radial-gradient(60vw 50vw at 90% 82%,rgba(58,83,59,.045),transparent 66%)}

/* Feines Korn, damit der Verlauf nicht streift. */
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ Kopfzeile ═════════════════════════════════════════════ */
.top{
  position:sticky;top:0;z-index:100;
  background:rgba(250,251,248,.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.top.is-stuck{
  background:rgba(250,251,248,.88);
  border-bottom-color:var(--line);
}

.top-in{
  max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--pad);
  height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:20px;
}

/* ── Fortschrittslinie ─────────────────────────────────────
   Eine schlichte Linie in Akzentfarbe, kein Leuchten. */
.progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;
}
.progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);
  will-change:transform;
}

/* ── Marke ─────────────────────────────────────────────────
   Der Plattenteller. Dreht dauerhaft, per GSAP; die
   CSS-Animation ist nur der Rückfall ohne JavaScript. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{
  width:34px;height:34px;flex:none;display:block;border-radius:50%;
  animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.brand-name{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  transition:color .25s var(--ease);
}
.brand:hover .brand-name{color:var(--accent)}

/* ── Navigation ────────────────────────────────────────────── */
.nav{position:relative;display:flex;align-items:center;gap:clamp(4px,1.4vw,14px)}
.nav-pill{
  position:absolute;left:0;top:50%;height:34px;width:0;margin-top:-17px;
  border-radius:999px;background:var(--accent-soft);
  opacity:0;pointer-events:none;
}
.nav-link{
  position:relative;padding:8px 13px;font-size:14px;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--out);
}
.nav-link:hover,.nav-link[aria-current="true"]{color:var(--text)}
.nav-link:hover::after,.nav-link[aria-current="true"]::after{transform:scaleX(1)}
.nav .btn{margin-left:10px;padding:9px 19px;font-size:13.5px}

/* ── Burger ────────────────────────────────────────────────── */
.burger{
  display:none;width:44px;height:44px;margin-right:-10px;
  border:0;background:none;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.burger i{
  display:block;width:20px;height:1.5px;background:var(--text);margin:5px auto;
  border-radius:2px;transition:transform .42s var(--out),opacity .2s var(--ease),background .25s;
}
.burger:hover i{background:var(--accent)}
.is-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.is-open .burger i:nth-child(2){opacity:0;transform:scaleX(.4)}
.is-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Mobiles Menü ──────────────────────────────────────────── */
.menu{
  position:fixed;inset:var(--head) 0 auto 0;z-index:99;
  display:none;flex-direction:column;
  padding:10px var(--pad) 30px;
  background:rgba(250,251,248,.96);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.menu.is-open{display:flex}
.menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 2px;text-decoration:none;color:var(--text);
  font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.025em;
  border-bottom:1px solid var(--line);
  transition:color .25s var(--ease),padding-left .35s var(--out);
}
.menu a span{color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.menu a:last-child{border-bottom:0;color:var(--accent)}
.menu a:hover,.menu a:active{color:var(--accent);padding-left:10px}

/* ══ Typografie ════════════════════════════════════════════ */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;line-height:1.08}
h2{font-size:clamp(27px,3.4vw,44px);letter-spacing:-.035em}
h3{font-size:16.5px;font-weight:500;letter-spacing:-.012em;line-height:1.4}
p{margin:0}

.kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}
.kicker b{color:var(--accent);font-weight:500}
.lead{margin-top:20px;max-width:52ch;color:var(--muted);font-size:16.5px}

.sec{position:relative;padding-block:var(--sec)}
.sec + .sec{border-top:1px solid var(--line)}

/* ══ Buttons ═══════════════════════════════════════════════
   Rückmeldung sitzt auf dem Druck, nicht auf dem Loslassen.
   ══════════════════════════════════════════════════════════ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:999px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform .38s var(--spring),box-shadow .38s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-2);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--out);
}
.btn:hover::before{transform:scaleX(1);transform-origin:0 50%}
/* Ein sehr weicher Lichtfleck, der dem Zeiger folgt. Position kommt
   aus --px und --py, deshalb kein Konflikt mit dem transform oben. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(90px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.16),transparent 62%);
  transition:opacity .3s var(--ease);
}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0) scale(.972);transition-duration:.09s;box-shadow:none}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn .arw{transition:transform .38s var(--out)}
.btn:hover .arw{transform:translateX(4px)}

.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn--ghost::before{background:var(--accent-soft)}
.btn--ghost::after{background:radial-gradient(90px circle at var(--px,50%) var(--py,50%),rgba(58,83,59,.07),transparent 62%)}
.btn--ghost:hover{color:var(--accent);border-color:var(--accent-line);box-shadow:var(--sh-1)}

/* Textlink mit wachsender Unterlinie */
.btn-text{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:8px 2px;font-size:15px;color:var(--muted);text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .25s var(--ease),transform .3s var(--spring);
}
.btn-text::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--line-2)}
.btn-text::before{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--out);z-index:1;
}
.btn-text:hover{color:var(--accent)}
.btn-text:hover::before{transform:scaleX(1)}
.btn-text:active{transform:scale(.98);transition-duration:.09s}
.btn-text .arw{transition:transform .38s var(--out)}
.btn-text:hover .arw{transform:translateX(4px)}

/* ══ Einstieg ══════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:calc(100vh - var(--head));
  min-height:calc(100svh - var(--head));
  display:flex;align-items:center;
  padding-block:clamp(48px,8vh,110px) clamp(56px,9vh,120px);
}
/* min-width:0 ist nötig: der Schriftzug steht auf nowrap, sonst
   zwingt sein Mindestmass das Flex-Kind breiter als die Spalte
   und die Messung im Skript rechnet mit einer zu grossen Breite. */
.hero-in{width:100%;min-width:0}

/* Der Schriftzug wird per JavaScript exakt auf die Spaltenbreite
   gerechnet, damit er auf jedem Bildschirm bündig sitzt. */
.word{
  margin:0;font-family:var(--display);font-weight:250;
  font-stretch:118%;font-variation-settings:"wdth" 118,"wght" 250;
  letter-spacing:0;line-height:.9;
  font-size:clamp(56px,20.5vw,300px);
  white-space:nowrap;
  color:var(--text);
}
.word-in{display:inline-block;white-space:nowrap}
/* overflow:hidden macht die Hülle, aus der der Buchstabe hochfährt.
   Deshalb darf hier drin nichts stehen, was über den Buchstaben
   hinausragt — ein Schein würde als Rechteck abgeschnitten. */
.word .ch{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.06em;margin-bottom:-.06em;
}
.word .ch > i{display:inline-block;font-style:normal;will-change:transform}

.hero-rule{position:relative;height:1px;margin-top:clamp(22px,3.4vh,40px);background:var(--line)}
.hero-rule i{
  position:absolute;inset:0;display:block;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-line),transparent 62%);
}
/* Startzustand nur, wenn JavaScript die Linie auch wieder aufzieht. */
.js .hero-rule i{transform:scaleX(0)}

.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,4.2vw,64px);
  margin-top:20px;
  font-family:var(--mono);font-size:clamp(9.5px,1.05vw,11.5px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.hero-meta .hm{white-space:nowrap;font-variant-numeric:tabular-nums}

.actions{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap;margin-top:clamp(30px,5vh,52px)}

/* Scrollhinweis, still */
.cue{
  position:absolute;left:var(--pad);bottom:clamp(18px,3.4vh,34px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}
.cue-line{display:block;width:52px;height:1px;background:var(--line-2)}

/* ══ 01 Über ═══════════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr);gap:clamp(34px,5.5vw,80px)}
.about-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  border:1px solid var(--accent-line);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

.prose{margin-top:26px}
.prose p{color:var(--muted);max-width:56ch}
.prose p + p{margin-top:18px}

.facts{margin:0}
.facts > div{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:18px;
  padding:16px 0;border-top:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.facts > div:last-child{border-bottom:1px solid var(--line)}
.facts > div:hover{border-top-color:var(--accent-line)}
.facts dt{
  margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);padding-top:3px;
}
.facts dd{margin:0;font-size:15px;color:var(--text)}

/* ══ 02 Sets ═══════════════════════════════════════════════ */
.setlist{margin-top:36px}
.set{position:relative;border-top:1px solid var(--line)}
.set:last-of-type{border-bottom:1px solid var(--line)}
/* Schmaler Balken links, wächst beim Überfahren und bei der
   aktiven Zeile. */
.set::before{
  content:"";position:absolute;left:calc(var(--pad) * -.5);top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s var(--out);
}
.set:hover::before,.set.is-active::before{transform:scaleY(1);transform-origin:50% 0}
.set::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-soft),transparent 42%);
  opacity:0;transition:opacity .38s var(--ease);
}
.set:hover::after,.set.is-active::after{opacity:1}

.set-row{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(14px,2vw,22px);
  padding:15px 0;
}

/* Der Knopf ist zugleich die Nummer der Zeile: ohne Zeigerkontakt
   steht dort die Nummer, beim Überfahren erscheint das Symbol. */
.set-play{
  position:relative;flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:transform .4s var(--spring),border-color .3s var(--ease),
             background .3s var(--ease),box-shadow .3s var(--ease);
}
.set-play > *{grid-area:1/1;transition:opacity .26s var(--ease),transform .38s var(--out)}
.sp-num{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint)}
.sp-ico{opacity:0;transform:scale(.7)}
.sp-play{margin-left:2px}
.sp-eq{display:flex;align-items:flex-end;gap:2.5px;height:14px;opacity:0}
.sp-eq i{display:block;width:2px;background:var(--accent);border-radius:2px;height:35%}
.set.is-playing .sp-eq i{animation:eq .82s var(--ease) infinite alternate}
.set.is-playing .sp-eq i:nth-child(2){animation-duration:.58s;animation-delay:-.2s}
.set.is-playing .sp-eq i:nth-child(3){animation-duration:1.02s;animation-delay:-.45s}
@keyframes eq{from{height:24%}to{height:100%}}

.set:hover .set-play,.set.is-active .set-play{
  border-color:var(--accent-line);color:var(--accent);background:#fff;
}
.set-play:hover{transform:scale(1.09);box-shadow:var(--sh-1)}
.set-play:active{transform:scale(.94);transition-duration:.09s}

/* Zustandslogik */
.set:hover .sp-num,.set.is-active .sp-num{opacity:0;transform:scale(.7)}
.set:hover .sp-play{opacity:1;transform:scale(1)}
.set.is-active:not(.is-playing) .sp-play{opacity:1;transform:scale(1)}
.set.is-playing .sp-play{opacity:0;transform:scale(.7)}
.set.is-playing .sp-eq{opacity:1}
.set.is-playing:hover .sp-eq{opacity:0}
.set.is-playing:hover .sp-pause{opacity:1;transform:scale(1)}
.set.is-playing .sp-num{opacity:0}

.set-name{min-width:0}
.set-name h3{
  transition:color .28s var(--ease),transform .42s var(--out);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.set:hover .set-name h3{color:var(--accent);transform:translateX(3px)}
.set.is-active .set-name h3{color:var(--accent)}
.set-meta{
  margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.set-meta b{color:var(--muted);font-weight:400}

.set-dur{
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.set-sc{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--faint);text-decoration:none;
  transition:color .28s var(--ease),background .28s var(--ease),transform .4s var(--spring);
}
.set-sc:hover{color:var(--accent);background:var(--accent-soft);transform:scale(1.1)}
.set-sc:active{transform:scale(.93);transition-duration:.09s}

/* Ausklappende Leiste der aktiven Zeile */
.set-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--out);
}
.set.is-active .set-panel{grid-template-rows:1fr}
.set-panel-in{overflow:hidden;min-height:0}
.set-panel-row{
  display:flex;align-items:center;gap:14px;
  padding:0 0 18px 68px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .35s var(--ease) .06s,transform .45s var(--out) .06s;
}
.set.is-active .set-panel-row{opacity:1;transform:none}
.t{
  font-family:var(--mono);font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums;flex:none;min-width:40px;
}
.t.end{text-align:right}
.seek{
  position:relative;flex:1;min-width:60px;height:22px;
  display:flex;align-items:center;cursor:pointer;touch-action:none;
}
.seek::before{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:999px;
  background:var(--line-2);transition:height .28s var(--ease);
}
.seek:hover::before{height:5px}
.seek-fill{
  position:absolute;left:0;height:3px;border-radius:999px;width:0;
  background:var(--accent);transition:height .28s var(--ease);
}
.seek:hover .seek-fill{height:5px}
.seek-knob{
  position:absolute;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--accent);margin-left:-5.5px;
  box-shadow:0 0 0 3px var(--bg),0 1px 4px rgba(20,26,18,.3);
  opacity:0;transform:scale(.5);
  transition:opacity .25s var(--ease),transform .38s var(--spring);
}
.seek:hover .seek-knob,.seek:focus-visible .seek-knob{opacity:1;transform:scale(1)}

.set-note{
  margin:20px 0 0;font-size:13.5px;color:var(--warn);
  padding:12px 16px;border-radius:10px;
  background:rgba(156,67,39,.05);border:1px solid rgba(156,67,39,.2);
}
.list-empty{
  margin-top:32px;padding:30px;border:1px dashed var(--line-2);border-radius:14px;
  color:var(--muted);font-size:15px;
}

/* ══ 03 Live ═══════════════════════════════════════════════ */
.gigs{margin-top:36px;display:grid;gap:0}

.gig{
  position:relative;
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2.6vw,30px);
  padding:22px 0;border-top:1px solid var(--line);
}
.gig:last-child{border-bottom:1px solid var(--line)}
.gig-date{display:flex;flex-direction:column;gap:1px}
.gd-day{
  font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.gd-mon{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.gig-body h3{font-family:var(--display);font-size:clamp(16px,1.9vw,20px);letter-spacing:-.022em}
.gig-where{margin-top:5px;font-size:13.5px;color:var(--muted)}
.gig-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.gig:hover .gig-tag{color:var(--muted);border-color:var(--line-2)}
/* Vergangene Termine treten über die Farbe zurück, nicht über die
   Deckkraft: so bleibt jede Zeile lesbar. */
.gig.is-past .gd-day,.gig.is-past .gig-body h3{
  color:var(--muted);transition:color .35s var(--ease);
}
.gig.is-past:hover .gd-day,.gig.is-past:hover .gig-body h3{color:var(--text)}

/* Der nächste Termin ist eine eigene Karte */
.gig.is-next{
  border:1px solid var(--line);border-radius:16px;
  background:#fff;
  padding:clamp(20px,3vw,28px);margin-bottom:16px;
  box-shadow:var(--sh-3);
}
.gig.is-next + .gig{border-top:1px solid var(--line)}
.gig.is-next .gd-day{color:var(--accent);font-size:32px}
.gig.is-next .gd-mon{color:var(--accent)}
.gig.is-next .gig-tag{color:var(--accent);border-color:var(--accent-line)}
.gig-lead{
  grid-column:1/-1;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}

/* Countdown */
.countdown{
  grid-column:1/-1;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,3vw,30px);
}
.cd-unit{display:flex;flex-direction:column;gap:4px;min-width:56px}
.cd-unit b{
  font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:500;
  letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.cd-unit i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.cd-sep{align-self:center;width:1px;height:22px;background:var(--line);margin-bottom:12px}
.after{margin-top:34px}

/* ══ 04 Booking ════════════════════════════════════════════ */
.book-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(34px,5.5vw,80px)}
form{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;min-width:0}
.field label{
  margin-bottom:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  transition:color .25s var(--ease);
}
.field:focus-within label{color:var(--accent)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:11px;
  background:#fff;border:1px solid var(--line);color:var(--text);outline:0;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-2)}
.field textarea{min-height:108px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B85A3C}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2367705F' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.err{font-size:13.5px;color:var(--warn)}
.sent{
  border:1px solid var(--accent-line);background:#fff;
  border-radius:16px;padding:30px;box-shadow:var(--sh-2);
}
.sent h3{font-size:20px;color:var(--accent)}
.sent p{margin-top:10px;color:var(--muted);font-size:14.5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══ 05 Kontakt und Fuss ═══════════════════════════════════ */
.contact{text-align:center}
.contact .kicker{justify-content:center}
.mail{
  display:inline-block;font-family:var(--display);
  font-size:clamp(21px,3.6vw,42px);font-weight:500;letter-spacing:-.035em;
  color:var(--text);text-decoration:none;overflow-wrap:anywhere;
  padding-bottom:8px;position:relative;
  transition:color .28s var(--ease);
}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)}
.mail::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--out);z-index:1;
}
.mail:hover{color:var(--accent)}
.mail:hover::before{transform:scaleX(1)}

.socials{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.social{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;border:1px solid var(--line);
  font-size:14px;color:var(--muted);text-decoration:none;
  transition:color .28s var(--ease),border-color .28s var(--ease),
             box-shadow .28s var(--ease),transform .4s var(--spring);
}
.social:hover{
  color:var(--accent);border-color:var(--accent-line);
  transform:translateY(-2px);box-shadow:var(--sh-1);
}
.social:active{transform:translateY(0) scale(.97);transition-duration:.09s}

.foot{
  border-top:1px solid var(--line);padding-block:26px 36px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}

/* ══ Responsive ════════════════════════════════════════════ */
@media (max-width:980px){
  .about-grid,.book-grid{grid-template-columns:1fr}
  .facts{margin-top:6px}
}
@media (max-width:820px){
  .nav{display:none}
  .burger{display:block}
  .row{grid-template-columns:1fr}
  .hero{min-height:auto;padding-block:clamp(40px,9vh,72px) clamp(64px,11vh,96px)}
  .cue{display:none}
}
@media (max-width:680px){
  .set-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:0}
  .set-dur{display:none}
  .set-panel-row{padding-left:0}
  .gig,.gig.is-next{grid-template-columns:64px minmax(0,1fr);row-gap:12px}
  .gig-tag{grid-column:2;justify-self:start}
  .gig.is-next .gig-tag{grid-column:1/-1}
  .cd-sep{display:none}
  .cd-unit{min-width:48px}
  .foot{flex-direction:column;gap:8px}
}

/* Die "Booking offen"-Karte hat kein Datum, also auch keine
   Datumsspalte. Steht bewusst nach den Medienabfragen, damit sie
   auch auf dem Handy gilt. */
.gig.gig--open{grid-template-columns:minmax(0,1fr) auto}

/* ══ Barrierefreiheit ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .js [data-anim]{opacity:1}
  .js .word-in{visibility:visible}
  .js .hero-rule i{transform:none}
  .brand-mark{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .top,.top.is-stuck{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .grain{display:none}
}
@media (prefers-contrast:more){
  :root{--muted:#3A4136;--faint:#4A5243;--line:rgba(20,26,18,.26);--line-2:rgba(20,26,18,.42)}
  .top,.top.is-stuck{background:var(--bg)}
}