/* =========================================================
   KALIM – Stylesheet
   Aufbau: 1 Tokens · 2 Reset · 3 Layout · 4 Header/Nav
           5 Hero · 6 Sections · 7 Footer · 8 Breakpoints
   Mobile First: Basis = Mobil, ab 768px / 1024px Desktop.
   ========================================================= */

/* ---------- 1 Tokens ---------- */
:root {
  --bg:        #0b0b0c;
  --bg-alt:    #121011;
  --fg:        #f2f2f0;
  --fg-muted:  #9a9490;
  /* Das Kampagnenrot, abgenommen von der Datumskarte im Album-Trailer.
     ACHTUNG: sehr dunkel. Als Fläche mit weisser Schrift stark (13:1), als
     Textfarbe auf dem Seitenhintergrund dagegen nur 1,5:1 und damit
     unlesbar. Deshalb wird es ausschliesslich für Flächen benutzt –
     Buttons, Fehlerchip, Favicon. Für Text und Fokusrahmen: --fg. */
  --accent:    #62120d;
  /* Aufgehellte Fassung desselben Farbtons (3,5°) für roten TEXT.
     #62120d käme auf 1,51:1 und wäre auf dem dunklen Video praktisch
     unsichtbar; dieser Ton erreicht 4,55:1 und erfüllt damit WCAG AA.
     Falls es dunkler sein soll: #d7352a = 4,15:1 ist die Untergrenze,
     die ich noch vertreten würde. */
  --accent-text: #e2392c;
  --line:      rgba(255,255,255,.12);

  --font-head: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:      1200px;
  --gutter:    20px;
  --header-h:  60px;
  --radius:    4px;
}

/* ---------- 2 Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  /* Sticky Footer: auf kurzen Seiten sitzt die Fußzeile unten am Rand,
     statt mitten im Bild zu schweben. */
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1 0 auto; }
.site-footer { flex: 0 0 auto; }

img, picture, video { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }

/* Sichtbarer Fokus – Barrierefreiheit, nicht entfernen */
/* Weiss statt Akzent: das dunkle Rot käme als Rahmen nur auf 1,5:1. */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* nur für Screenreader sichtbar */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3 Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 760px; }

.section { padding: 64px 0; }

.section-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.lead { color: var(--fg-muted); font-size: 1.05rem; }
.eyebrow {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 12px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 26px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
/* Weisse Schrift auf dem dunklen Rot: 13:1. Fast-Schwarz käme nur auf 1,5:1. */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #fff; color: #000; }
.btn-ghost { border-color: var(--fg); color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: #000; }
.btn-small { padding: 12px 20px; font-size: .78rem; border: 1px solid var(--fg); }
.btn-small:hover { background: var(--fg); color: #000; }
.btn-disabled {
  border-color: var(--line); color: var(--fg-muted);
  pointer-events: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 4 Header / Navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
/* Modifier für Seiten ohne Bild hinter der Kopfzeile. Seiten mit
   Video-Kopfband lassen ihn weg und bleiben durchsichtig. */
.site-header.is-solid {
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

/* Kein Logo im Header, nur der Zurück-Link – auf allen Seiten mittig.
   height: 100% ist nötig, damit Logo und Link die volle Kopfzeilenhöhe
   als Tippfläche nutzen können. */
.header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* Wortmarke in der Kopfzeile, verlinkt auf die Startseite */
.header-logo {
  display: flex; align-items: center;
  height: 100%; padding-inline: 14px;   /* vergrößert die Tippfläche */
}
.header-logo img {
  width: auto;
  height: clamp(18px, 1.7vw, 26px);
  /* Schlagschatten, weil das Logo auf durchsichtiger Kopfzeile direkt
     auf dem Video liegt und dessen Helligkeit wechselt. */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.75));
}
.header-logo:hover img { opacity: .8; }

/* Kopfzeilen-Navigation der übrigen Unterseiten: nur „Zurück", immer mittig.
   Ein Burger-Menü gibt es nicht mehr – keine Seite hat genug Einträge. */
.site-nav { height: 100%; }
.site-nav ul { display: flex; height: 100%; }
.site-nav li { display: flex; }
.site-nav a {
  display: flex; align-items: center;
  padding-inline: 14px;                 /* volle Kopfzeilenhöhe als Tippfläche */
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.site-nav a:hover { color: var(--fg); }

/* ---------- 5 Startseite ----------
   Hero und Fußzeile teilen sich eine Bildschirmhöhe, ohne Scrollen.
   min-height statt height: reicht der Platz nicht – sehr flache Fenster,
   sehr große Schriftgröße –, wächst die Seite und scrollt. Abgeschnitten
   wird nie etwas.

   Das Video liegt auf Seitenebene, nicht im Hero. Dadurch läuft es auch
   hinter der Fußzeile weiter, die dafür keinen eigenen Hintergrund hat. */
.landing {
  position: relative;
  min-height: 100svh;                /* svh = korrekt trotz mobiler Browserleiste */
  display: flex; flex-direction: column;
  background: #000;
}

.bg-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bg-media img,
.bg-media picture,
.bg-video { width: 100%; height: 100%; object-fit: cover; }

/* Der Loop wird eingeblendet, sobald er tatsächlich läuft.
   Bleibt er aus, sieht man weiterhin das Standbild. */
.bg-video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.bg-video.is-playing { opacity: 1; }

/* Dunkelt Ober- und Unterkante ab, damit Logo, Text und Fußzeile
   auf jedem Videobild lesbar bleiben. */
.bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 12%,
                                      rgba(0,0,0,.12) 55%, rgba(0,0,0,.5) 100%);
}

/* Auf der Startseite steht der Text nur unten, dort reicht der Verlauf.
   Liegt Inhalt über die ganze Höhe verteilt (Tour), braucht es zusätzlich
   eine gleichmäßige Abdunklung – sonst verschwindet Text auf hellen
   Videobildern. Stärke unten in Zahlen belegt. */
/* 0,68 in der Mitte ist gemessen, nicht geschätzt: Der hellste Frame hinter
   der Venue-Zeile liegt bei 119/255. Bei 0,60 käme die gedämpfte Schrift auf
   4,43:1 und verfehlte WCAG AA (4,5:1); 0,68 ergibt rund 5,1:1. */
.bg-overlay-flach { background:
  linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.74) 14%,
                          rgba(0,0,0,.68) 55%, rgba(0,0,0,.84) 100%); }

/* Unterseite mit Hintergrundvideo: Abstand unter die fixierte Kopfzeile */
.landing main.section { padding-top: calc(var(--header-h) + 40px); }

.landing main { position: relative; z-index: 2; flex: 1 0 auto; display: flex; flex-direction: column; }
.landing .site-footer { position: relative; z-index: 2; flex: 0 0 auto; background: transparent; }

.hero {
  position: relative;
  flex: 1 0 auto;
  min-height: 58svh;                 /* Rückfall für sehr flache Fenster */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 26px;
}

/* Ton-Schalter oben rechts, liegt über allem */
.ton-schalter {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  width: 44px; height: 44px;          /* Tippziel */
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.ton-schalter:hover { background: rgba(0,0,0,.7); border-color: var(--fg); }
.ton-schalter svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.ton-schalter .ikon-an { display: none; }
.ton-schalter.is-an .ikon-an  { display: block; }
.ton-schalter.is-an .ikon-aus { display: none; }

/* Wortmarke oben mittig über dem Video */
.hero-logo {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  padding: 22px var(--gutter) 0;
  pointer-events: none;
}
.hero-logo img {
  width: auto;
  /* um 20 % angehoben (vorher 22 / 2.6vw / 42) */
  height: clamp(26px, 3.12vw, 50px);  /* skaliert mit der Fensterbreite mit */
  max-width: 100%;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.65));
}

/* Symbolreihe: Instagram, YouTube, TikTok. Keine Beschriftung sichtbar –
   der Name steckt im aria-label. 44 px Tippziel, wie überall. */
.sozial-reihe {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; gap: 2px;
  justify-content: center;            /* mobil mittig unter dem Datum */
}
.sozial-reihe a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--fg);
  opacity: .75;
  transition: opacity .2s ease;
}
.sozial-reihe a:hover { opacity: 1; }
.sozial-reihe a:focus-visible { outline: 3px solid var(--fg); outline-offset: -4px; }
.sozial-reihe svg { width: 21px; height: 21px; display: block; }

/* Mobil: Motive, darunter Ansage und Datum, darunter der Button –
   schlicht die Reihenfolge aus dem Markup. Die Motive tragen alt="",
   Vorlesewerkzeuge beginnen also bei der Ansage. */
.hero-content {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;                /* mobil mittig, auf Wunsch */
  text-align: center;
}
.hero-text { min-width: 0; }

/* Bundle-Motive. Sie sind zugleich der Weg zum Shop – der Button darunter
   ist auf Kundenwunsch entfallen. Die Höhe hängt an der Fensterhöhe, nicht
   an der Breite: Die Startseite soll ohne Scrollen auskommen, und begrenzt
   ist dabei immer die Höhe. */
/* Motive und ihre Beschriftung bilden eine Einheit – am Desktop ist das
   die linke Spalte. */
.produkt-block {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 0 18px;
}

.produkt-reihe {
  display: flex; align-items: flex-end;
  gap: clamp(8px, 3vw, 24px);
  margin: 0;
}

/* Beschriftung statt Button. Kein Kasten, keine Fläche – nur eine
   unterstrichene Zeile. Der Unterstrich liegt an der Schrift, nicht am
   Rahmen: Das Tippziel ist 44 px hoch, ein Rahmen sässe dadurch weit
   unter dem Text. */
/* Das Cover ist quadratisch und deshalb bewusst etwas niedriger als die
   Bundle-Motive (16svh gegen 21svh): Bei gleicher Höhe wöge die volle
   Fläche optisch schwerer als die freigestellten Shirts. Die Unterkanten
   fluchten trotzdem, weil beide Blöcke unten ausgerichtet sind. */
.produkt-block .produkt-link > picture > img {
  display: block; width: auto;
  height: clamp(96px, 16svh, 200px);
  border-radius: 2px;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.8));
}

.produkt-hinweis {
  display: inline-flex; align-items: center;
  min-height: 44px;                   /* Tippziel */
  margin-top: 4px;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
  transition: opacity .2s ease;
}
/* Erst beim Überfahren ein Unterstrich. Im Ruhezustand bleibt die Zeile
   glatt, wie gewünscht – ganz ohne Rückmeldung wäre aber nicht erkennbar,
   dass sie anklickbar ist. */
.produkt-hinweis:hover { text-decoration: underline; }
.produkt-hinweis:focus-visible {
  outline: 3px solid var(--fg); outline-offset: 4px;
}

/* Der Link umschliesst das Bild. Ohne display:block bliebe er inline und
   setzte unter dem Bild den Zeilenabstand als Lücke an. */
.produkt-link {
  display: block;
  border-radius: var(--radius);
  transition: transform .25s ease, filter .25s ease;
}
/* Bewusst zurückhaltend: leichtes Anheben und Aufhellen statt Rahmen oder
   Einblendung – der Kunde wollte es dezent. */
.produkt-link:hover { transform: translateY(-6px); filter: brightness(1.12); }
.produkt-link:active { transform: translateY(-2px); }
/* Für die Tastatur muss es dagegen deutlich sein: ein Anheben allein ist
   kein erkennbarer Fokus. Weiss statt Akzentrot – das Rot käme auf dem
   dunklen Video nur auf 1,5:1. */
.produkt-link:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 4px;
}
.produkt-reihe img {
  display: block;
  width: auto;
  height: clamp(96px, 21svh, 260px);  /* etwas kleiner: Es teilt sich die
                                         Höhe jetzt mit dem Cover-Block */
  /* Die Shirts sind fast schwarz und würden sonst mit dem dunklen Video
     verschwimmen – der Schatten setzt sie ab. */
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.8));
}

.hero-eyebrow {
  /* Bewusst zurückhaltend: dünner Schnitt, kleiner als vorher. Inter ist
     eine variable Schrift, 300 steht also wirklich zur Verfügung und wird
     nicht vom Browser künstlich verdünnt. */
  font-size: clamp(.75rem, 2.5vw, .8rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--accent-text);
  text-shadow: 0 1px 10px rgba(0,0,0,.9);   /* Schutz vor hellen Videobildern */
}

.hero-date {
  font-family: var(--font-head);
  /* um rund ein Fünftel verkleinert (vorher 2.5rem / 11vw / 4.5rem),
     damit die Zeile darüber die Hauptrolle behält */
  font-size: clamp(2rem, 8.6vw, 3.5rem);
  line-height: .9;
  letter-spacing: .02em;
  margin: 0;                          /* unter dem Datum folgt nichts mehr */
  color: var(--fg);
}

/* ---------- 6 Sections ---------- */

/* Tour */
.tour-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "date info" ".  cta";
  align-items: center;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.tour-item:first-child { border-top: 1px solid var(--line); }
.tour-date  { grid-area: date; text-align: center; }
.tour-date .day { display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1; }
.tour-date .mon { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-muted); }
.tour-info  { grid-area: info; }
.tour-city  { font-size: 1.1rem; font-weight: 600; margin: 0; }
.tour-venue { color: var(--fg-muted); font-size: .88rem; margin: 0; }
.tour-item .btn { grid-area: cta; justify-self: start; margin-top: 8px; }
.is-soldout { opacity: .55; }

/* Über */
.about-media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  background: #1c1c1f; border-radius: var(--radius);
  margin-bottom: 24px;
}

/* Kontakt – mobil gestapelt: nebeneinander rutschten die Adressen je nach
   Länge unterschiedlich weit nach rechts und die Spalte wirkte zerrissen.
   Ab 768 px ist Platz für beides nebeneinander (siehe Abschnitt 8). */
.contact-list { margin: 0; }
.contact-list > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.contact-list dt {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.contact-list dd { margin: 0; }
/* Blockelement mit Innenabstand: macht die Adresse zu einem Tippziel
   von rund 44 px Höhe. */
.contact-list a {
  display: inline-block;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;   /* lange Adressen brechen statt zu überlaufen */
}
.contact-list a:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- 7 Footer ----------
   Bewusst minimal: nur die vier Links, zentriert, plus eine Zeile Copyright.
   Auf der Startseite ohne eigenen Hintergrund, damit das Video durchläuft. */
.site-footer {
  background: #08080a;
  padding: 24px 0 20px;
  font-size: .85rem;
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
}
.footer-legal ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 10px;
}
/* Innenabstand statt Zeilenabstand: so wird das Tippziel auf dem Handy
   rund 44 px hoch, ohne dass die Zeile optisch auseinanderfällt. */
.footer-legal a {
  color: var(--fg-muted);
  display: inline-block;
  padding: 12px 8px;
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--fg); text-decoration: underline; }

.copyright { color: var(--fg-muted); margin: 0; font-size: .78rem; }

/* ---------- 7b Unterseiten ---------- */

/* Abstand, damit der Inhalt nicht unter der fixierten Kopfzeile beginnt.
   Seiten mit Video-Kopfband regeln das selbst (siehe .has-pagehero). */
.subpage main.section { padding-top: calc(var(--header-h) + 48px); }

/* 404: mittig, aber nicht formatfüllend – sonst läge die Fußzeile mit den
   Pflichtlinks unter der Falz. */
.page-404 {
  display: grid; place-content: center;
  text-align: center;
}

/* Typografie der Rechtstexte */
.legal h1 {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(2rem, 7vw, 3rem); line-height: 1;
  text-transform: uppercase; margin: 0 0 32px;
}
.legal h2 { font-size: 1.15rem; margin: 40px 0 10px; letter-spacing: .01em; }
.legal h3 { font-size: 1rem; margin: 24px 0 6px; }
.legal p, .legal li { color: #ccccc8; }
.legal ul { list-style: disc; padding-left: 20px; margin: 0 0 1em; }
.legal a { border-bottom: 1px solid var(--line); }
.legal a:hover { color: var(--fg); border-color: var(--fg); }
.legal .stand { color: var(--fg-muted); font-size: .85rem; margin-top: 44px; }

/* ---------- 8 Breakpoints ---------- */

/* ===== Tablet ab 768px ===== */
@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }

  .section { padding: 96px 0; }

  .tour-item {
    grid-template-columns: 80px 1fr auto;
    grid-template-areas: "date info cta";
    gap: 24px;
  }
  .tour-item .btn { margin-top: 0; justify-self: end; }

  .about-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: center;
  }
  .about-media img { margin-bottom: 0; }

  /* Ab Tablet ist Platz für Bezeichnung und Adresse nebeneinander */
  .contact-list > div {
    flex-direction: row; flex-wrap: wrap;
    gap: 4px 16px; align-items: baseline;
  }
  .contact-list dt { min-width: 140px; }

  /* Startseite: Ab hier ist waagerecht Platz für zwei Spalten – sonst
     klebt alles in der unteren linken Ecke und die halbe Breite bleibt
     leer.

       links   die Motive
       rechts  Ansage und Datum, bündig mit dem rechten Rand

     Beide sitzen unten auf einer Linie. */
  .hero-content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
  }
  .produkt-block { margin: 0; }
  .hero-text     { text-align: right; }

  /* Symbole rechts – auf der dem Bundle gegenüberliegenden Seite.
     Der negative Rand gleicht den Leerraum im 44-px-Tippziel aus,
     sonst stünde das letzte Symbol sichtbar links vom Datum. */
  .sozial-reihe { justify-content: flex-end; margin-right: -11px; }

  .produkt-reihe img { height: clamp(120px, 18svh, 190px); }
}

/* ===== Quer gehaltenes Handy =====
   Muss NACH dem 768er-Block stehen: Ein Handy im Querformat ist breiter
   als 768px und bekäme sonst dessen Maße, obwohl senkrecht kaum Platz
   ist. Die Zeile aus dem Block darüber bleibt richtig, nur die Höhe
   der Motive wird zurückgenommen. */
@media (orientation: landscape) and (max-height: 500px) {
  .produkt-reihe img { height: clamp(70px, 20svh, 110px); }
}

/* ===== Desktop ab 1024px: Burger raus, Inline-Navigation rein ===== */
/* ===== Große Screens ===== */
@media (min-width: 1440px) {
  .section { padding: 120px 0; }
}