/* =====================================================================
   WE WILL SEE – Gestaltung
   ---------------------------------------------------------------------
   STELLSCHRAUBEN: Die wichtigsten Werte stehen gesammelt hier oben.
   Farben als Hex-Code (#rrggbb). Nach dem Ändern Datei speichern und
   hochladen, dann die Website neu laden.
   ===================================================================== */
:root{
  /* --- Farben --- */
  --ink:#1f1b1c;          /* Hintergrund (Druck-Schwarz der Plakate) */
  --ink-2:#2a2526;        /* Hintergrund von Eingabefeldern */
  --ink-3:#3a3335;        /* feine Trennlinien */
  --violet:#ae68a3;       /* WE WILL SEE Violett (Logo, Zeitachse, Knöpfe) */
  --violet-soft:#cf9fc6;  /* helleres Violett (Hover, Links) */
  --paper:#f1ecef;        /* Textfarbe */
  --muted:#a89ea4;        /* gedämpfte Textfarbe */
  --line:rgba(174,104,163,.38);

  /* --- Schriften --- */
  --year:Tahoma,"Tahoma Bold",Verdana,"DejaVu Sans Condensed","Noto Sans",sans-serif;  /* Jahreszahlen */
  --display:Verdana,"Verdana Pro","DejaVu Sans","Noto Sans",sans-serif;                /* Titel */
  --body:Verdana,"Verdana Pro","DejaVu Sans","Noto Sans",sans-serif;                   /* Fliesstext */
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace; /* Uhrzeiten, Labels */

  /* --- Grössen --- */
  --head-h:64px;          /* Höhe der Kopfzeile */
  color-scheme:dark;
}
/* Bewegungsstärke der Grafik: siehe assets/js/main.js, ganz oben (MOTION) */

html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:15px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:var(--violet-soft)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--violet-soft);outline-offset:3px}
.mono{font-family:var(--mono);letter-spacing:.04em}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopfzeile */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--ink-3)}
.top-in{height:var(--head-h);display:flex;align-items:center;gap:20px}
.brand{display:block;color:var(--violet);line-height:0}
.brand .logo-svg{width:40px;height:40px;display:block}
nav.main{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.years{display:flex;gap:4px;padding:3px;border:1px solid var(--ink-3);border-radius:999px}
.years a,.navlink{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--muted);padding:5px 12px;border-radius:999px;white-space:nowrap}
.years a:hover,.navlink:hover{color:var(--paper)}
.years a[aria-current="page"]{background:var(--violet);color:var(--ink);font-weight:500}
.navlink[aria-current="page"]{color:var(--paper);text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:6px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--violet);padding:9px 16px;border-radius:2px;background:transparent;color:var(--paper)}
.btn.solid{background:var(--violet);color:var(--ink)}
.btn:hover{background:var(--violet-soft);border-color:var(--violet-soft);color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--ink-3);border-radius:2px;padding:6px 10px;font-family:var(--mono);font-size:12px}

/* Views */
.view[hidden]{display:none!important}
.stage{position:relative}
#start .stage{height:auto;min-height:0}
canvas.graph{display:block;width:100%;touch-action:pan-y;cursor:default}

/* Startseite */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ink-3)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;padding-block:56px 64px;display:grid;grid-template-columns:minmax(0,1fr);max-width:1200px;margin:0 auto;pointer-events:none}
.hero-in > *{pointer-events:auto;justify-self:start;width:fit-content;max-width:100%}
.wordmark{margin:0;color:var(--violet);line-height:0}
.wordmark .logo-svg{display:block;width:var(--logo-w);height:var(--logo-w);max-width:100%}
.hero-in{--logo-w:clamp(200px,26vw,360px)}
/* Abstand = Zeilenabstand im Logo (33.7 von 595 Einheiten); Ziffernhöhe = Buchstabenhöhe im Logo */
.yearline{display:flex;align-items:flex-start;gap:calc(var(--logo-w) * .0567) calc(var(--logo-w) * .07);flex-wrap:wrap;margin-top:calc(var(--logo-w) * .0567)}
.outline{font-family:var(--year);font-weight:700;font-size:calc(var(--logo-w) * .403);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--violet);letter-spacing:0;text-box:trim-both cap alphabetic}
.facts{font-family:var(--year);font-weight:400;color:var(--violet);text-transform:uppercase;font-size:calc(var(--logo-w) * .0987);line-height:1.12;text-box:trim-both cap alphabetic;white-space:nowrap}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.badge{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:28px;letter-spacing:.06em}
.hint{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:10px}

.section{max-width:1200px;margin:0 auto;padding-block:64px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.big{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-.03em;margin:8px 0 24px;text-wrap:balance}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.post{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--paper);min-width:0}
.post h3{font-family:var(--display);font-size:17px;line-height:1.3;margin:0;text-wrap:balance}
.post p{margin:0;color:var(--muted);font-size:14px}
.post:hover h3{color:var(--violet-soft)}
.still{aspect-ratio:16/10;max-width:100%;border:1px solid var(--ink-3);position:relative;overflow:hidden;
  background:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
   radial-gradient(120% 90% at var(--gx,30%) var(--gy,30%),#6a6466 0%,#2b2728 45%,#141112 100%);}
.still span{position:absolute;left:12px;bottom:10px;right:12px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(16px,2.2vw,24px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(241,236,239,.75);letter-spacing:-.02em}
.date{font-family:var(--mono);font-size:12px;color:var(--violet)}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.quote{font-family:var(--display);font-size:clamp(18px,2vw,22px);line-height:1.45;margin:0;color:var(--paper);max-width:60ch}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:16px}
.pass{border:1.5px solid var(--violet);background:var(--paper);color:var(--ink);max-width:420px}
.pass .p-top{background:var(--ink);color:var(--violet);padding:16px 18px;font-family:var(--display);text-transform:uppercase;font-size:14px;line-height:1.25}
.pass .p-mid{padding:18px;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;font-size:34px;letter-spacing:-.02em}
.pass .p-mid small{display:block;font-size:13px;font-weight:400;letter-spacing:.02em;margin-top:12px;line-height:1.4;text-transform:none}
.pass .p-bot{background:var(--ink);color:var(--violet);padding:10px 18px;font-family:var(--mono);font-size:11px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.barcode{height:34px;margin:0 18px 14px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px)}

form.nl{display:flex;flex-direction:column;gap:12px;max-width:460px}
form.nl label{font-family:var(--mono);font-size:12px;color:var(--muted)}
form.nl input[type=email],form.nl textarea{width:100%;box-sizing:border-box;background:var(--ink-2);border:1px solid var(--ink-3);color:var(--paper);padding:12px 14px;font:inherit;border-radius:2px}
form.nl input:focus{border-color:var(--violet);outline:none}
form.nl .row{display:flex;gap:10px;flex-wrap:wrap}
form.nl .row input{flex:1 1 220px;min-width:0}
.ok{font-family:var(--mono);font-size:13px;color:var(--violet-soft)}
.sp-groups{display:flex;flex-wrap:wrap;gap:32px 72px}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:16px}
.logos img{height:44px;width:auto;max-width:100%;opacity:.78;transition:opacity .2s}
.logos img:hover{opacity:1}

footer{border-top:1px solid var(--ink-3)}
.foot{max-width:1200px;margin:0 auto;padding-block:28px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted)}
.foot a{color:var(--muted)}

/* Jahres-Graph */
.year-card{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:4px 32px;align-items:start;padding-block:16px 12px;border-bottom:1px solid var(--ink-3)}
.year-card .yc-a{grid-row:span 2}
.year-card h1{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;margin:4px 0 0;text-transform:uppercase;letter-spacing:-.01em;color:var(--paper)}
.year-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;max-width:75ch}
.year-card .more[hidden]{display:none}
.card-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;background:none;border:1px solid var(--ink-3);color:var(--muted);padding:4px 10px;border-radius:999px}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--violet);color:var(--paper)}
.legend{position:absolute;z-index:5;right:max(16px,env(safe-area-inset-right,0px));bottom:14px;font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

.list{max-width:900px;margin:0 auto;padding-block:24px 64px}
.list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-3)}
.list li a{text-decoration:none;color:inherit;display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:16px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--ink-3);padding:14px 4px;align-items:baseline}
.list li a:hover .t{color:var(--violet-soft)}
.list .tm{font-family:var(--mono);color:var(--violet);font-size:13px}
.list .t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px}
.list .m{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;text-transform:none;margin-top:2px}
.list .v{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase}

/* Detail-Panel */
.panel{position:fixed;z-index:70;top:calc(env(safe-area-inset-top,0px) + var(--head-h));right:0;bottom:0;width:min(440px,100%);background:var(--ink);border-left:1px solid var(--violet);transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.panel.open{transform:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--ink-3);font-family:var(--mono);font-size:12px;color:var(--muted)}
.panel-head button{background:none;border:1px solid var(--ink-3);padding:4px 10px;border-radius:2px;font-family:var(--mono);font-size:12px}
.panel-body{overflow-y:auto;padding:20px 20px calc(28px + env(safe-area-inset-bottom,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.panel .kicker{font-family:var(--mono);font-size:13px;color:var(--violet)}
.panel .panel-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1.02;letter-spacing:-.025em;margin:6px 0 10px;text-wrap:balance}
.panel .meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 14px}
.panel .guest{border-left:2px solid var(--violet);padding-left:12px;font-size:13px;color:var(--violet-soft);margin:16px 0}
.panel .lead{font-weight:700;margin:16px 0 10px}
.panel p{margin:0 0 12px;max-width:62ch}
.panel .still{margin-top:4px}
.pn{display:flex;justify-content:space-between;gap:10px;margin-top:22px;border-top:1px solid var(--ink-3);padding-top:14px}
.pn button{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:12px;text-align:left;padding:4px 0;max-width:48%}
.pn button:last-child{text-align:right}
.pn button:hover{color:var(--paper)}
.pn b{display:block;color:var(--paper);font-family:var(--display);font-size:13px;text-transform:uppercase}

/* Inhaltsseiten */
.page{max-width:1100px;margin:0 auto;padding-block:48px 72px}
.page .intro{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,21px);line-height:1.5;max-width:60ch}
.page p{max-width:65ch}
.facts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:20px}
.facts3 h3,.team h3{font-family:var(--display);font-size:16px;margin:12px 0 6px;text-transform:uppercase}
.facts3 p,.team p{margin:0;font-size:14px;color:var(--muted)}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:20px}
.role{font-family:var(--mono);font-size:12px;color:var(--violet)}
.portrait{aspect-ratio:1;max-width:100%;--gx:50%;--gy:35%}
.newsitem{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:28px;padding-block:28px;border-top:1px solid var(--ink-3);text-decoration:none;color:var(--paper)}
.newsitem h2{font-family:var(--display);font-size:22px;line-height:1.2;margin:6px 0 8px;text-wrap:balance}
.newsitem p{margin:0;color:var(--muted)}
.newsitem:hover h2{color:var(--violet-soft)}


@media (max-width:860px){
  nav.main .navlink,nav.main .years{display:none}
  .menu-btn{display:inline-block}
  nav.main.open{position:fixed;inset:calc(env(safe-area-inset-top,0px) + var(--head-h)) 0 auto 0;background:var(--ink);border-bottom:1px solid var(--violet);flex-direction:column;align-items:flex-start;padding:16px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));gap:12px}
  nav.main.open .navlink,nav.main.open .years{display:flex}
  nav.main.open .navlink{font-size:16px;padding:6px 0}
  .split{grid-template-columns:minmax(0,1fr)}
  .newsitem{grid-template-columns:minmax(0,1fr);gap:14px}
  .top-tickets{padding:7px 10px;font-size:12px}
  .stage{height:auto}
  .year-card{grid-template-columns:minmax(0,1fr)}
  .year-card .yc-a{grid-row:auto}
  .legend{position:static;justify-content:flex-start;padding:8px max(16px,env(safe-area-inset-left,0px)) 24px}
  .panel{top:auto;left:0;width:100%;height:min(80%,640px);border-left:0;border-top:1px solid var(--violet);transform:translateY(102%)}
  .list li a{text-decoration:none;color:inherit;grid-template-columns:64px minmax(0,1fr)}
  .list .v{display:none}
}
@media (prefers-reduced-motion:reduce){.panel{transition:none}}

/* ---------- Ergänzungen für die Live-Website ---------- */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--violet);color:var(--ink);padding:8px 14px}
.skip:focus{left:16px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.err{font-family:var(--mono);font-size:13px;color:#f0a0a0}
.muted{color:var(--muted);max-width:52ch}
.ruled{border-top:1px solid var(--ink-3)}
h2.big.mid,h1.big.mid{font-size:clamp(26px,3vw,38px)}
.gap{margin-top:56px}
.gap-lg{margin-top:64px}
.prose{max-width:65ch}
.prose p{margin:0 0 1em}
.page .intro p{margin:0 0 1em}
.extra{font-family:var(--mono);font-size:12px;margin-top:6px!important;color:var(--violet)!important}
img.still,img.has-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid var(--ink-3)}
img.portrait{aspect-ratio:1}
.post:hover img.has-img,.newsitem:hover img.has-img{filter:none}
.still-img{display:block;width:100%;height:auto;border:1px solid var(--ink-3);filter:grayscale(1)}
.ptext p{margin:0 0 12px;max-width:62ch}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.legend .lg-film{background:var(--paper)}
.legend .lg-buch{background:var(--violet-soft);border-radius:1px;transform:rotate(45deg)}
.legend .lg-musik{border:2px solid var(--violet);width:6px;height:6px}
.logo-text{font-family:var(--display);font-weight:700;color:var(--muted);text-transform:uppercase}
.logos a{line-height:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.article .back{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:24px}
.article .date{display:block}
.article .cover{margin:0 0 32px}
.article .cover img{display:block;width:100%;height:auto}
.article .cover figcaption,.blocks figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
.blocks h2,.blocks h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:1.6em 0 .6em}
.blocks figure{margin:24px 0}
.blocks img{display:block;max-width:100%;height:auto}
.blocks blockquote{margin:24px 0;padding-left:16px;border-left:2px solid var(--violet);font-family:var(--display);font-size:18px}
.blocks ul,.blocks ol{padding-left:1.2em}
.partners{border-top:1px solid var(--ink-3);padding-block:40px}
.yearline .facts{min-width:0}
@media (max-width:520px){.facts{white-space:normal}}
@media (max-width:759px){.hero-in{padding-bottom:340px}}