/* Schrift: Archivo, selbst gehostet im Ordner schrift/ neben diesem Ordner.
   Kein Google Fonts, keine Verbindung zu Dritten. Der Browser nimmt die erste
   Datei, die er findet: woff2 (klein) vor ttf. */
@font-face{
  font-family:"Archivo";
  src:url("schrift/Archivo-Variable.woff2") format("woff2-variations"),
      url("schrift/Archivo-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("schrift/Archivo-Italic-Variable.woff2") format("woff2-variations"),
      url("schrift/Archivo-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:italic; font-display:swap;
}

/* Designsystem der Fachschaft (stil.css): Schwarz auf Weiß, drei Grautöne,
   Archivo. Farbe kommt aus dem Logo und aus den Bildern. Bewusst kein Dark Mode. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --ink:#000000;
  --grade-1:#EFEFEF; --grade-2:#DADADA; --grade-3:#767676;
  --logo:#FF3131;
  --font:"Archivo",Helvetica,Arial,sans-serif;
  --t-meta:12px; --t-small:14px; --t-body:17px; --t-lead:21px;
  --space-1:8px; --space-2:16px; --space-3:32px; --space-4:64px; --space-5:128px;
  --m:16px; --rail:200px; --measure:34em;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --auf:cubic-bezier(.16,.84,.12,1);
  --kopf:120px;
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);
  --recht:40px;                /* Zeile Impressum · Datenschutz unter Tickets/Infos */
}
@media (min-width:720px){ :root{ --m:32px; } }
@media (min-width:1280px){ :root{ --m:48px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* Für Suchmaschinen und Screenreader, nicht sichtbar */
.nur-vorlesen{ position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; }
img{ max-width:100%; }
:root{ padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px); }
html,body{ background:var(--paper); }
body{ margin:0;color:var(--ink);font-family:var(--font);font-size:var(--t-body);
  line-height:1.5;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%; }
:focus{ outline:none; }
:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }
a{ color:inherit; }

/* ---------- Kopf mit Schriftzug ---------- */
.kopf{
  position:fixed;left:0;right:0;top:0;z-index:20;
  height:calc(var(--oben) + var(--kopf));
  background:var(--paper);
  transition:height .6s var(--auf), border-color .3s;
  border-bottom:1px solid transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.intro .kopf{ background:transparent;height:100dvh; }
.ansicht-infos .kopf{ border-bottom-color:var(--grade-2); }
.kopf__heim{ position:absolute;inset:0;display:block; }
#marke{
  position:absolute;left:var(--m);top:calc(var(--oben) + var(--m));
  display:block;overflow:visible;transform-origin:0 0;
  pointer-events:none;-webkit-user-drag:none;
  transition:transform .9s var(--auf);
}
#marke .rot{ fill:var(--logo); }
#marke .schatten{ fill:var(--ink); }

/* Buchstaben steigen aus der Grundlinie, danach fällt der Schatten */
.intro:not(.anim) #marke{ visibility:hidden; }
.anim #marke .bst{ animation:steigen .8s var(--auf) both;
  animation-delay:calc(var(--i) * 55ms + 150ms); }
.anim #marke .schatten{ animation:schatten .45s var(--ease) both;
  animation-delay:calc(13 * 55ms + 800ms); }
@keyframes steigen{ from{ transform:translateY(900px); } to{ transform:none; } }
@keyframes schatten{ from{ transform:translate(-55px,-45px); } to{ transform:none; } }

.ueberspringen{
  position:fixed;right:var(--m);bottom:calc(var(--unten) + var(--m));z-index:30;
  appearance:none;background:none;border:0;padding:8px 0;font:inherit;
  font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;
  color:var(--grade-3);cursor:pointer;
}
body:not(.intro) .ueberspringen{ display:none; }

/* ---------- Die zwei Hälften ---------- */
main{ padding-top:var(--kopf);transition:padding-top .6s var(--auf); }
.wahl{
  display:grid;grid-template-rows:1fr 1fr;
  height:calc(100dvh - var(--kopf) - var(--oben) - var(--unten) - var(--recht));
  min-height:320px;
  border-top:1px solid var(--grade-2);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--auf);
}
.quer .wahl{ grid-template-rows:none;grid-template-columns:1fr 1fr; }
.intro .wahl{ clip-path:inset(100% 0 0 0); }
/* Bis seite.js startet: Tickets/Infos und Logo verdeckt, ohne Übergang.
   Kommt das Skript nicht, erscheinen Tickets/Infos nach 5 s trotzdem. */
.vorab .wahl{ clip-path:inset(100% 0 0 0);transition:none;animation:vorab-zeigen 0s 5s forwards; }
.vorab #marke{ visibility:hidden; }
@keyframes vorab-zeigen{ to{ clip-path:inset(0 0 0 0); } }
.feld{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--m);text-decoration:none;color:var(--ink);background:var(--paper);
  font:inherit;text-align:left;border:0;cursor:pointer;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.feld + .feld{ border-top:1px solid var(--grade-2); }
.quer .feld + .feld{ border-top:0;border-left:1px solid var(--grade-2); }
.feld:hover{ background:var(--ink);color:var(--paper); }
.feld:focus-visible{ outline:1px solid var(--ink);outline-offset:-10px; }
.feld:hover:focus-visible{ outline-color:var(--paper); }
.feld__meta{ font-size:var(--t-small);line-height:1.4;color:var(--grade-3);max-width:24em; }
.feld:hover .feld__meta{ color:var(--grade-2); }
.feld__fuss{ display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2); }
.feld__wort{
  font-size:clamp(52px,10vw,168px);line-height:.86;font-weight:500;
  font-stretch:92%;letter-spacing:-.035em;
}
.feld__pfeil{ font-size:clamp(28px,4vw,56px);line-height:1;font-weight:300;
  transition:transform .3s var(--auf); }
.feld:hover .feld__pfeil{ transform:translate(6px,-6px); }
.feld--infos:hover .feld__pfeil{ transform:translateX(10px); }

/* ---------- Infos ---------- */
.infos{ padding:var(--space-4) var(--m) var(--space-5); }
.ansicht-infos .wahl, .ansicht-infos .recht, body:not(.ansicht-infos) .infos{ display:none; }
/* Impressum und Datenschutz: klein unter den Hälften, erscheint mit ihnen */
.recht{ display:flex;gap:var(--space-2);align-items:center;height:var(--recht);margin:0;
  padding:0 var(--m);border-top:1px solid var(--grade-2);font-size:var(--t-meta);color:var(--grade-3);
  transition:opacity .6s var(--ease) .5s; }
.intro .recht, .vorab .recht{ opacity:0;visibility:hidden;transition:none; }
.recht a, .fuss__recht a{ color:inherit;text-decoration:none; }
.recht a:hover, .fuss__recht a:hover{ color:var(--ink); }
.fuss__recht{ display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:6px; }
.schluss .fuss__recht a:hover{ text-decoration:none; }
.schluss .fuss__recht a{ font-size:inherit;text-decoration:none;line-height:inherit;font-weight:inherit;font-stretch:inherit;letter-spacing:inherit; }
.infos__zurueck{
  display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;
  font-size:var(--t-small);color:var(--grade-3);
}
.infos__zurueck:hover{ color:var(--ink); }
.abschnitt{
  display:grid;gap:var(--space-2);
  padding-top:var(--space-4);
}
@media (min-width:900px){
  .abschnitt{ grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--space-3); }
}
.abschnitt__titel{
  margin:0;font-size:var(--t-meta);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grade-3);padding-top:.35em;
}
.lead{ margin:0;font-size:var(--t-lead);line-height:1.45;max-width:var(--measure);
  text-wrap:pretty;hyphens:auto; }
.prosa{ max-width:var(--measure);hyphens:auto; }
.prosa p{ margin:var(--space-2) 0 0; }
.eckdaten{ display:grid;gap:0;margin:var(--space-3) 0 0;max-width:var(--measure); }
.eckdaten div{ display:grid;grid-template-columns:7em 1fr;gap:var(--space-2);
  padding:10px 0;border-top:1px solid var(--grade-2); }
.eckdaten dt{ color:var(--grade-3);font-size:var(--t-small);padding-top:2px; }
.eckdaten dd{ margin:0; }
/* Kalender: drei gleichwertige Links in einer Zeile */
.kalender{ display:flex;flex-wrap:wrap;gap:4px 20px; }
.kalender a{ text-decoration:none;border-bottom:1px solid var(--grade-2);transition:border-color .14s var(--ease); }
.kalender a:hover{ border-bottom-color:var(--ink); }

.ph{ background:var(--grade-1);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0 .15em; }

/* Karussell wie auf fs.bauernschwoof.de: gleiche Höhe, Breite folgt dem Format */
.karussell{ --kar-h:min(52vh,360px);margin-top:var(--space-3);
  margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m));
  -webkit-user-select:none;user-select:none; }
@media (min-width:720px){ .karussell{ --kar-h:min(58vh,480px); } }
.karussell__buehne{ position:relative; }
.karussell__spur{
  display:flex;gap:var(--space-2);overflow-x:auto;padding:0 var(--m);
  scroll-snap-type:x mandatory;scroll-padding:0 var(--m);scroll-behavior:smooth;
  scrollbar-width:none;
}
.karussell__spur::-webkit-scrollbar{ display:none; }
.karussell__bild{ margin:0;flex:0 0 auto;scroll-snap-align:start; }
.bildrahmen{ position:relative;height:var(--kar-h);max-width:none;
  background:var(--grade-1);overflow:hidden; }
.bildrahmen img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;pointer-events:none;opacity:0;transition:opacity .4s var(--ease); }
.bildrahmen img.da{ opacity:1; }
.bildrahmen__platz{ position:absolute;left:12px;bottom:10px;font-size:var(--t-meta);
  color:var(--grade-3);letter-spacing:.04em; }
.karussell__nav{
  position:absolute;top:0;bottom:0;width:14%;min-width:44px;
  appearance:none;background:none;border:0;padding:0 var(--m);cursor:pointer;
  display:flex;align-items:center;color:var(--ink);
}
.karussell__nav--prev{ left:0;justify-content:flex-start; }
.karussell__nav--next{ right:0;justify-content:flex-end; }
.karussell__nav[disabled]{ opacity:0;pointer-events:none; }
@media (hover:none){ .karussell__nav{ display:none; } }
.karussell__fuss{ display:flex;justify-content:space-between;gap:var(--space-2);
  padding:0 var(--m);margin-top:var(--space-1);font-size:var(--t-meta);color:var(--grade-3); }
.plus{ appearance:none;background:none;border:0;padding:0 6px;font:inherit;
  font-size:var(--t-small);color:var(--grade-3);cursor:pointer;line-height:1; }
.plus:hover{ color:var(--ink); }

/* Tabellen: Preise und Vorverkauf */
.liste{ width:100%;max-width:44em;border-collapse:collapse; }
.liste th,.liste td{ text-align:left;vertical-align:baseline;padding:12px 0;
  border-top:1px solid var(--grade-2); }
.liste tr:last-child td{ border-bottom:1px solid var(--grade-2); }
.liste th{ font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grade-3);border-top:0;padding-top:0; }
.liste td + td{ padding-left:var(--space-2); }
.preis{ text-align:right !important;white-space:nowrap; }
.klein{ font-size:var(--t-small);color:var(--grade-3); }
.karte{ text-decoration:none;border-bottom:1px solid var(--grade-2);
  transition:border-color .14s var(--ease); }
.karte:hover{ border-bottom-color:var(--ink); }
.karte span{ color:var(--grade-3);white-space:nowrap; }
.karte span.ph{ color:var(--ink); }
.verkauf td:first-child{ white-space:nowrap; }
@media (max-width:560px){
  .verkauf thead{ display:none; }
  .verkauf tr{ display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-2);
    border-top:1px solid var(--grade-2);padding:12px 0; }
  .verkauf td{ border:0 !important;padding:0 !important; }
  .verkauf td:nth-child(3){ grid-column:1 / -1;padding-top:4px !important; }
  .verkauf tr:last-child{ border-bottom:1px solid var(--grade-2); }
}
.anmerkung{ margin:var(--space-2) 0 0;font-size:var(--t-small);color:var(--grade-3);max-width:var(--measure); }

.schluss{ margin-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-3);
  align-items:baseline;justify-content:space-between;border-top:1px solid var(--ink);
  padding-top:var(--space-2); }
.schluss a{ font-size:clamp(34px,5vw,64px);line-height:1;font-weight:500;font-stretch:92%;
  letter-spacing:-.03em;text-decoration:none; }
.schluss a:hover{ text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em; }
.fuss{ font-size:var(--t-meta);color:var(--grade-3); }

/* Ausverkauft: gleiches Feld, kein Link, keine Hover-Umkehr */
.feld--aus{ cursor:default; }
.feld--aus:hover{ background:var(--paper);color:var(--ink); }
.feld--aus:hover .feld__meta{ color:var(--grade-3); }
/* Gleiche Größe wie „Tickets“; reicht die Breite nicht, trennt es als Aus-/verkauft */
.feld--aus .feld__fuss{ display:block; }
.feld--aus .feld__wort{ display:block;hyphens:manual;-webkit-hyphens:manual; }
.schluss__aus{ font-size:clamp(34px,5vw,64px);line-height:1;font-weight:500;font-stretch:92%;
  letter-spacing:-.03em; }

/* Pfeile als SVG, damit Handys sie nicht als Emoji darstellen */
.pfeil{ display:inline-block;width:.75em;height:.75em;vertical-align:-.05em;overflow:visible; }
/* Linie wächst mit dem Pfeil: Stärke in Einheiten der 24er-Zeichenfläche,
   nicht in Pixeln. Verhältnis wie am Handy (2px bei 28px Pfeilgröße). */
.pfeil path{ vector-effect:none;stroke-width:var(--strich,2.2); }
.feld__pfeil{ display:block;line-height:0; }
.feld__pfeil .pfeil{ width:1em;height:1em;--strich:1.7; }
.schluss .pfeil{ --strich:1.8; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important;transition:none !important; }
  .karussell__spur{ scroll-behavior:auto; }
}

/* ---------- Ladesymbol: das B tanzt, der Schatten bleibt am Boden ----------
   Erscheint erst nach 0,35 s, damit es bei schnellem Laden nicht aufblitzt.
   Takt 120 BPM (0,5 s). Verschwindet, sobald das Bild da ist. */
.lade{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;animation:lade-ein .3s var(--ease,ease) .35s forwards;
}
.lade svg{ width:var(--lade-b,32px);height:auto;overflow:visible;display:block; }
.lade .lade__schatten{ fill:var(--ink,#000); }
.lade .lade__b{
  fill:var(--logo,#FF3131);
  transform-box:fill-box;transform-origin:50% 100%;
  animation:lade-hopsen .5s infinite;
}
@keyframes lade-ein{ to{ opacity:1; } }
@keyframes lade-hopsen{
  0%   { transform:translate(0,0) scale(1.08,.9);  animation-timing-function:cubic-bezier(.2,.6,.35,1); }
  12%  { transform:translate(0,0) scale(.96,1.05); animation-timing-function:cubic-bezier(.2,.6,.35,1); }
  50%  { transform:translate(-9%,-34%) scale(1,1) rotate(-6deg); animation-timing-function:cubic-bezier(.6,0,.8,.4); }
  88%  { transform:translate(0,0) scale(.97,1.04); }
  100% { transform:translate(0,0) scale(1.08,.9); }
}
/* Bild da: Symbol weg */
.bildrahmen img.da ~ .lade, .kachel img.da ~ .lade, .leuchte__bild.da ~ .lade{ display:none; }
/* Weniger Bewegung gewünscht: nur ruhiges Pulsieren */
@media (prefers-reduced-motion:reduce){
  .lade .lade__b{ animation:lade-pulsieren 1.6s ease-in-out infinite; }
  @keyframes lade-pulsieren{ 50%{ opacity:.35; } }
}

/* 10/2026: vier Links (mit Barrierefreiheit) passen auf schmalen Handys nicht
   in eine Zeile. Dort darf die Zeile umbrechen; --recht wächst mit, damit die
   Hälften darüber weiter genau in den Bildschirm passen. */
.recht a, .fuss__recht a{ white-space:nowrap; }
@media (max-width:440px){
  :root{ --recht:64px; }
  .recht{ flex-wrap:wrap;align-content:center;row-gap:4px;column-gap:14px; }
}