/* ==========================================================================
   THE WILD RUMBLE — GOING NOWHERE (2026)
   Farbwelt abgeleitet aus dem Album-Artwork:
   verwitterter Spielplatz, Palmen im Vordergrund, blasser Winterhimmel.
   ========================================================================== */

:root {
  /* Grund / Erde — dunkle Bildpartien */
  --ink:      #101109;
  --soil:     #1a1b14;
  --bark:     #24241c;
  --bark-2:   #2f2f25;
  --line:     #3d3c31;

  /* Vegetation */
  --moss:     #4f5843;
  --frond:    #8d9668;

  /* Verwittertes Plastik — die Farbakzente des Artworks */
  --rust:     #a3132f;
  --rust-lt:  #c9203f;
  --gold:     #d9a441;
  --straw:    #d8c578;

  /* Licht */
  --sky:      #d5e0f0;
  --bone:     #ece7dc;
  --bone-dim: #a8a498;

  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 74px;

  --section-gap: clamp(3.5rem, 7vw, 6rem);
  --radius: 2px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset / Basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--soil);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Erdiger Verlauf als Grundebene — unten dunkler, wie der Bildvordergrund */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 0%, #23241b 0%, transparent 60%),
    linear-gradient(180deg, var(--soil) 0%, var(--ink) 100%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; transition: color 0.25s var(--ease); }
a:hover { color: var(--straw); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 0.6em;
  color: var(--bone);
}

h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
h4 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Nur fuer Screenreader. Bewusst mit !important, damit die Regel nicht von
   spezifischeren Kontext-Selektoren ausgehebelt wird und Text sichtbar wird. */
.twr-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.twr-skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.twr-skip-link:focus { top: 0.75rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Vordergrund-Ebene: Palmwedel in den unteren Bildecken
   Liegt ueber dem Inhalt, faengt aber keine Klicks ab.
   -------------------------------------------------------------------------- */

.twr-foliage-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}

.twr-foliage {
  position: absolute;
  bottom: 0;
}

.twr-foliage--left  { left: 0; }
.twr-foliage--right { right: 0; }

.twr-foliage__layer {
  position: absolute;
  bottom: 0;
  /* von JS gesetzt: Parallax (x/y) + Mauszeiger-Versatz */
  --px: 0px;
  --py: 0px;
  will-change: transform;
}

.twr-foliage--left  .twr-foliage__layer { left: 0;  transform-origin: 12% 100%; }
.twr-foliage--right .twr-foliage__layer { right: 0; transform-origin: 88% 100%; }

.twr-foliage__layer img {
  height: 100%;
  width: auto;
  max-width: none;
  /* nach oben weich auslaufen, damit die Wedel nicht als Wand lesen */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}

/* --- Tiefenstaffelung: hinten groesser, dunkler, unschaerfer --- */

.twr-foliage__layer--back {
  height: clamp(220px, 38vh, 440px);
  opacity: 0.45;
  filter: blur(2.5px) brightness(0.6) saturate(0.75);
}

.twr-foliage__layer--front {
  height: clamp(240px, 43vh, 490px);
  opacity: 0.9;
}

/* weit in die Ecken schieben, damit die Inhaltsspalte frei bleibt */
.twr-foliage--left  .twr-foliage__layer--back  { margin-left: -30%; }
.twr-foliage--left  .twr-foliage__layer--front { margin-left: -24%; }
.twr-foliage--right .twr-foliage__layer--back  { margin-right: -30%; }
.twr-foliage--right .twr-foliage__layer--front { margin-right: -24%; }

/* rechte Seite spiegeln, damit die Wedel zur Mitte zeigen */
.twr-foliage--right .twr-foliage__layer img { transform: scaleX(-1); }

/* --- Wind: sehr langsames, unregelmaessiges Wiegen --- */

@keyframes twr-sway-a {
  0%, 100% { transform: translate(var(--px), var(--py)) rotate(0deg)     scale(1); }
  35%      { transform: translate(var(--px), var(--py)) rotate(0.9deg)   scale(1.008); }
  70%      { transform: translate(var(--px), var(--py)) rotate(-0.55deg) scale(0.997); }
}

@keyframes twr-sway-b {
  0%, 100% { transform: translate(var(--px), var(--py)) rotate(0deg)     scale(1); }
  30%      { transform: translate(var(--px), var(--py)) rotate(-1.2deg)  scale(1.012); }
  65%      { transform: translate(var(--px), var(--py)) rotate(0.7deg)   scale(0.995); }
}

.twr-foliage__layer[data-sway="1"] { animation: twr-sway-a 17s ease-in-out infinite; }
.twr-foliage__layer[data-sway="2"] { animation: twr-sway-b 13s ease-in-out infinite -3s; }
.twr-foliage__layer[data-sway="3"] { animation: twr-sway-b 19s ease-in-out infinite -7s; }
.twr-foliage__layer[data-sway="4"] { animation: twr-sway-a 15s ease-in-out infinite -5s; }

@media (max-width: 900px) {
  .twr-foliage__layer--back  { height: clamp(170px, 28vh, 280px); opacity: 0.38; }
  .twr-foliage__layer--front { height: clamp(190px, 32vh, 320px); opacity: 0.8; }
}

@media (max-width: 560px) {
  .twr-foliage--right { display: none; }
  .twr-foliage--left .twr-foliage__layer--back { display: none; }
  .twr-foliage--left .twr-foliage__layer--front { height: 180px; opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   Filmkorn
   Liegt über allem, fängt aber keine Klicks ab. Die Textur kommt aus einem
   inline-SVG — kein zusätzliches Bild, wenige Bytes.
   -------------------------------------------------------------------------- */

.twr-grain {
  position: fixed;
  inset: -50%;            /* grösser als der Viewport, damit das Wandern nicht an den Rand stösst */
  z-index: 60;
  pointer-events: none;
  opacity: 0.32;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: twr-grain-shift 700ms steps(1) infinite;
  will-change: transform;
}

/* Winzige Sprünge — das Korn "lebt", ohne zu flackern */
@keyframes twr-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .twr-grain { animation: none; }
}

/* --------------------------------------------------------------------------
   Laufband unter dem Hero
   -------------------------------------------------------------------------- */

.twr-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink);
  padding-block: 0.8rem;
  /* an den Rändern ausblenden, damit es nicht abgeschnitten wirkt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.twr-ticker__track {
  display: flex;
  width: max-content;
  animation: twr-ticker 46s linear infinite;
}

.twr-ticker__item {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
  padding-right: 1.5rem;
}

/* Nur das erste Viertel wandert — danach setzt die Kopie nahtlos an */
@keyframes twr-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.twr-ticker:hover .twr-ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .twr-ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.twr-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.twr-wrap--narrow { max-width: 780px; }

.twr-main { position: relative; z-index: 2; }

.twr-section {
  padding-block: var(--section-gap);
  scroll-margin-top: var(--header-h);
  position: relative;
}

/* Gerissene Kante zwischen den Sektionen statt einer glatten Linie.
   Die Kontur kommt als inline-SVG, kein zusätzliches Bild. */
.twr-section + .twr-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9px;
  background-color: var(--line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 4.6 L38 3.1 L74 5.4 L118 2.7 L163 5.9 L207 3.4 L248 6.2 L296 2.9 L341 5.1 L389 3.6 L432 6.4 L478 2.6 L523 5.7 L569 3.2 L611 6.1 L658 2.8 L704 5.3 L749 3.9 L793 6.3 L839 2.5 L884 5.6 L928 3.3 L973 6.0 L1018 2.7 L1063 5.2 L1108 3.8 L1152 6.2 L1200 4.1' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 4.6 L38 3.1 L74 5.4 L118 2.7 L163 5.9 L207 3.4 L248 6.2 L296 2.9 L341 5.1 L389 3.6 L432 6.4 L478 2.6 L523 5.7 L569 3.2 L611 6.1 L658 2.8 L704 5.3 L749 3.9 L793 6.3 L839 2.5 L884 5.6 L928 3.3 L973 6.0 L1018 2.7 L1063 5.2 L1108 3.8 L1152 6.2 L1200 4.1' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}

/* Rueckfall ohne mask-Unterstuetzung: schlichte Linie */
@supports not (mask-image: url("")) {
  .twr-section + .twr-section { border-top: 1px solid var(--line); }
  .twr-section + .twr-section::before { display: none; }
}

.twr-section__head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.twr-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

/* Durchnummerierung der Sektionen (01, 02, …) — nur auf dem OnePager,
   rein über einen CSS-Zähler, das Markup bleibt unberührt. */
.twr-main[data-page="home"] { counter-reset: twr-abschnitt; }

.twr-main[data-page="home"] .twr-section { counter-increment: twr-abschnitt; }

.twr-main[data-page="home"] .twr-section__eyebrow::before {
  content: counter(twr-abschnitt, decimal-leading-zero);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--moss);
  padding-right: 0.75rem;
  border-right: 1px solid var(--line);
}

.twr-section__lead {
  max-width: 62ch;
  color: var(--bone-dim);
  font-size: 1.05em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.twr-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(16, 17, 9, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.twr-header.is-scrolled {
  background: rgba(16, 17, 9, 0.94);
  border-bottom-color: var(--line);
}

.twr-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.twr-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--bone);
  flex-shrink: 0;
}
.twr-brand:hover { color: var(--bone); }

.twr-brand__logo { width: 38px; height: auto; }

.twr-brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.twr-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}

.twr-nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  padding-block: 0.4rem;
  white-space: nowrap;
}

.twr-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.twr-nav__link:hover,
.twr-nav__link.is-active { color: var(--bone); }

.twr-nav__link.is-active::after { transform: scaleX(1); }

.twr-nav__link--cta {
  color: var(--gold);
  border: 1px solid var(--line);
  padding: 0.45rem 0.95rem;
}
.twr-nav__link--cta::after { display: none; }
.twr-nav__link--cta:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

/* --- Sprachumschalter --------------------------------------------------- */

.twr-nav__lang { display: flex; align-items: center; }

.twr-langswitch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  overflow: hidden;
}

.twr-langswitch__opt {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  padding: 0.42rem 0.62rem;
  line-height: 1;
  transition: color 0.28s var(--ease);
}

.twr-langswitch__opt:hover { color: var(--bone); }

/* aktive Sprache: gefüllter Block, der beim Wechsel herüberwandert */
.twr-langswitch__opt.is-on { color: var(--ink); }

.twr-langswitch__sep {
  width: 1px;
  background: var(--line);
  align-self: stretch;
}

/* Der Marker liegt hinter der Schrift und sitzt auf der aktiven Hälfte. */
.twr-langswitch::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: var(--gold);
  transition: transform 0.32s var(--ease);
}

.twr-langswitch:has(.twr-langswitch__opt:last-of-type.is-on)::before {
  transform: translateX(100%);
}

/* Ohne :has()-Unterstützung bleibt der Marker links — dann sorgt die
   Randfarbe für die Unterscheidung. */
@supports not selector(:has(*)) {
  .twr-langswitch::before { display: none; }
  .twr-langswitch__opt.is-on { color: var(--gold); }
}

.twr-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  color: var(--bone);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Nur der Balken-Span wird gestylt — nicht per Element-Selektor, sonst
   ueberschreibt die Regel auch das .twr-visually-hidden Label im Button. */
.twr-nav__bars {
  position: relative;
  display: block;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: background 0.2s var(--ease);
}
.twr-nav__bars::before,
.twr-nav__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform 0.28s var(--ease);
}
.twr-nav__bars::before { top: -6px; }
.twr-nav__bars::after  { top: 6px; }

.twr-nav__toggle[aria-expanded="true"] .twr-nav__bars { background: transparent; }
.twr-nav__toggle[aria-expanded="true"] .twr-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.twr-nav__toggle[aria-expanded="true"] .twr-nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .twr-nav__toggle { display: flex; }

  .twr-nav__list {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(16, 17, 9, 0.985);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }

  .twr-nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .twr-nav__link {
    display: block;
    font-size: 1.25rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--bark-2);
  }
  .twr-nav__link::after { display: none; }
  .twr-nav__link.is-active { color: var(--gold); }

  .twr-nav__link--cta {
    margin-top: 1rem;
    text-align: center;
    border-color: var(--gold);
  }

  /* Sprachumschalter sitzt im aufgeklappten Menü unter den Punkten */
  .twr-nav__lang {
    margin-top: 1.25rem;
    justify-content: center;
  }

  .twr-langswitch__opt { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.twr-hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 4rem) clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}

.twr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.twr-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.5;
  filter: contrast(1.05);
}

.twr-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,17,9,0.72) 0%, rgba(16,17,9,0.35) 45%, var(--soil) 100%),
    linear-gradient(90deg, rgba(16,17,9,0.85) 0%, transparent 65%);
}

.twr-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.twr-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

.twr-hero__kicker::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--rust);
}

.twr-hero__title {
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 0.92;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.twr-hero__meta {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.4rem;
}

.twr-hero__meta strong { color: var(--gold); font-weight: 600; }

.twr-hero__venue {
  color: var(--bone-dim);
  font-size: 0.98rem;
  margin-bottom: 2.2rem;
}

/* --- Countdown bis zum Release ------------------------------------------ */

.twr-countdown {
  display: flex;
  margin-bottom: 2.2rem;
}

.twr-countdown__unit {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-right: clamp(1.1rem, 3vw, 2rem);
}

.twr-countdown__unit + .twr-countdown__unit {
  padding-left: clamp(1.1rem, 3vw, 2rem);
  border-left: 1px solid var(--line);
}

.twr-countdown__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.twr-countdown__lbl {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.twr-countdown__out {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.2rem;
}

.twr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.twr-hero__art {
  position: relative;
  justify-self: center;
  max-width: 420px;
  width: 100%;
  perspective: 1000px;
}

/* Cover schwebt leicht und kippt minimal zum Mauszeiger (--tx/--ty aus JS) */
.twr-hero__art picture {
  display: block;
  --tx: 0deg;
  --ty: 0deg;
  transform: rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform 0.5s var(--ease);
  animation: twr-float 9s ease-in-out infinite;
  will-change: transform;
}

@keyframes twr-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.twr-hero__art img {
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85);
}

/* --- Hero-Intro: laeuft einmal beim Laden, kein Scroll-Trigger noetig --- */

@keyframes twr-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Die Headline wird zusaetzlich von unten "aufgedeckt". */
@keyframes twr-unmask {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(14px); }
  to   { opacity: 1; clip-path: inset(-15% 0 -15% 0); transform: none; }
}

.twr-hero__kicker,
.twr-hero__meta,
.twr-hero__venue,
.twr-hero__actions,
.twr-hero__art {
  animation: twr-rise 0.85s var(--ease) both;
}

.twr-hero__title {
  animation: twr-unmask 1.1s var(--ease) both;
}

.twr-hero__kicker  { animation-delay: 0.10s; }
.twr-hero__title   { animation-delay: 0.20s; }
.twr-hero__meta    { animation-delay: 0.55s; }
.twr-hero__venue   { animation-delay: 0.65s; }
.twr-hero__actions { animation-delay: 0.75s; }

/* Das Cover schwebt bereits (twr-float) — die Intro-Animation liegt auf dem
   aeusseren Container, damit sich beide nicht gegenseitig ueberschreiben. */
.twr-hero__art { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .twr-hero__kicker,
  .twr-hero__title,
  .twr-hero__meta,
  .twr-hero__venue,
  .twr-hero__actions,
  .twr-hero__art { animation: none; }
}

/* --- Reveal beim Scrollen --- */

.twr-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Beim erstmaligen Setzen der Klasse per JS steht das Element noch auf
   opacity 1 — ohne diese Ausnahme wuerde es sichtbar ausblenden und danach
   wieder einblenden. Die Klasse wird direkt im naechsten Frame entfernt. */
.twr-reveal--init { transition: none !important; }

.twr-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* gestaffelt, wenn mehrere Elemente gleichzeitig sichtbar werden —
   bewusst kurz, sonst wirkt ein Sprung ins Menueziel wie eine leere Seite */
.twr-reveal[style*="--i"] { transition-delay: calc(var(--i) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  .twr-reveal { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .twr-hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .twr-hero__art { max-width: 320px; justify-self: start; order: -1; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.twr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.twr-btn:hover {
  color: var(--bone);
  border-color: var(--bone-dim);
  transform: translateY(-2px);
}

.twr-btn--primary {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--bone);
}
.twr-btn--primary:hover {
  background: var(--rust-lt);
  border-color: var(--rust-lt);
  color: #fff;
}

.twr-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.twr-btn--gold:hover {
  background: var(--straw);
  border-color: var(--straw);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Release / Album-Block
   -------------------------------------------------------------------------- */

.twr-release {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.twr-release + .twr-release {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
}

/* Gespiegelte Blocks: das Cover rutscht per order in die zweite Spalte —
   deshalb muessen die Spaltenbreiten mitgedreht werden, sonst wird das
   Cover dort breiter dargestellt als in den nicht gespiegelten Blocks. */
.twr-release--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.twr-release--flip .twr-release__art { order: 2; }

.twr-release__art img {
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px -22px rgba(0,0,0,0.8);
}

.twr-release__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
}

.twr-release__badge--muted {
  background: transparent;
  color: var(--bone-dim);
  border: 1px solid var(--line);
}

.twr-release__date {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-size: 0.9rem;
  margin-bottom: 1.6rem;
}

/* Formathinweis (z. B. Vinyl-Preis) */
.twr-release__format {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--line);
  background: rgba(36, 36, 28, 0.6);
  color: var(--bone-dim);
  font-size: 0.95rem;
}

.twr-release__format strong { color: var(--gold); font-weight: 600; }

.twr-release__format-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--frond);
  padding: 0.25rem 0.6rem;
}

.twr-tracklist {
  columns: 2;
  column-gap: 2.5rem;
  margin-bottom: 2rem;
}

.twr-tracklist li {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bark-2);
  break-inside: avoid;
  font-size: 0.95rem;
  color: var(--bone-dim);
}

.twr-tracklist li span:first-child {
  color: var(--moss);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}

@media (max-width: 620px) {
  .twr-tracklist { columns: 1; }
  .twr-release { grid-template-columns: 1fr; }
  .twr-release--flip .twr-release__art { order: 0; }
  .twr-release__art { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   Streaming-Links
   -------------------------------------------------------------------------- */

.twr-streams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.twr-stream {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  background: rgba(36, 36, 28, 0.6);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.25s var(--ease);
}

.twr-stream:hover {
  background: var(--bark-2);
  border-color: var(--gold);
  color: var(--bone);
  transform: translateY(-2px);
}

/* Icons sind dunkler Kreis + weisse Marke — ohne Filter loest sich der
   Kreis im dunklen Grund auf und nur die Marke bleibt stehen. */
.twr-stream img {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Musik / Spotify-Embed
   -------------------------------------------------------------------------- */

.twr-embed {
  border: 1px solid var(--line);
  background: var(--bark);
  overflow: hidden;
}

.twr-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.twr-embed--album iframe { height: 380px; }

/* --------------------------------------------------------------------------
   Shows
   -------------------------------------------------------------------------- */

.twr-show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.twr-show:first-child { border-top: 1px solid var(--line); }

.twr-show__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-size: 1.05rem;
  min-width: 7.5ch;
}

.twr-show__venue { font-weight: 500; }
.twr-show__city { color: var(--bone-dim); font-size: 0.92rem; }

.twr-show__note {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--rust);
  color: var(--bone);
  padding: 0.2rem 0.6rem;
  margin-top: 0.4rem;
}

@media (max-width: 640px) {
  .twr-show {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .twr-show__cta { justify-self: start; }
}

/* Terminzeile hebt sich beim Überfahren leicht ab.
   Bewusst ohne Verschiebung des Inhalts — sonst wandert der Tickets-Button
   unter dem Cursor weg. Stattdessen ein Akzent am linken Rand. */
.twr-show {
  position: relative;
  transition: background 0.3s var(--ease);
}

.twr-show::before {
  content: '';
  position: absolute;
  /* im Aussenrand statt direkt am Datum — sonst klebt der Balken am Text.
     Oben und unten eingerückt, damit er die Trennlinien nicht berührt. */
  left: -0.9rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--rust);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}

@media (hover: hover) and (min-width: 641px) {
  .twr-show:hover {
    background: linear-gradient(90deg, rgba(163, 19, 47, 0.12), transparent 70%);
  }
  .twr-show:hover::before { transform: scaleY(1); }
}

.twr-shows__follow {
  margin-top: 2rem;
  color: var(--bone-dim);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */

.twr-gallery {
  columns: 3;
  column-gap: 1rem;
}

.twr-gallery__item {
  display: block;
  position: relative;
  margin-bottom: 1rem;
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.twr-gallery__item img {
  width: 100%;
  /* width/height im HTML liefern nur das Seitenverhaeltnis — die Hoehe
     muss frei skalieren, sonst werden die Kacheln verzerrt */
  height: auto;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.85);
}

/* Spotlight: das überfahrene Bild bleibt hell, die übrigen treten zurück.
   Nur mit echtem Zeigegerät — auf Touch gäbe es kein Zurück. */
@media (hover: hover) and (min-width: 700px) {
  /* Die Promofotos sind bereits sehr dunkel — kräftiges Abdunkeln macht sie
     schwarz statt zurücktreten. Der Kontrast entsteht deshalb vor allem
     dadurch, dass das aktive Bild aufhellt. */
  .twr-gallery:hover .twr-gallery__item img {
    filter: saturate(0.7) brightness(0.85);
  }
  .twr-gallery .twr-gallery__item:hover img {
    filter: saturate(1.05) brightness(1.12);
  }
}

.twr-gallery__item:hover img {
  transform: scale(1.04);
  filter: saturate(1);
}

/* Lupen-Hinweis, damit erkennbar ist, dass sich die Bilder öffnen lassen */
.twr-gallery__item::after {
  content: '';
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(236, 231, 220, 0.55);
  background:
    linear-gradient(var(--bone), var(--bone)) center / 13px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) center / 1px 13px no-repeat,
    rgba(16, 17, 9, 0.55);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.twr-gallery__item:hover::after,
.twr-gallery__item:focus-visible::after {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) { .twr-gallery { columns: 2; } }
@media (max-width: 520px) { .twr-gallery { columns: 1; } }

.twr-credit {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   Kontextabhängiger Mauszeiger
   Nur mit echtem Zeigegerät; Tastaturbedienung bleibt unberührt.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  /* Lupe über der Galerie */
  .twr-gallery__item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='17' cy='17' r='11' fill='rgba(16,17,9,.65)' stroke='%23ece7dc' stroke-width='1.6'/%3E%3Cpath d='M17 12v10M12 17h10' stroke='%23ece7dc' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M25.5 25.5 34 34' stroke='%23ece7dc' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 17 17, zoom-in;
  }

  /* Play über den Videovorschauen */
  .twr-video__facade {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='19' fill='rgba(163,19,47,.85)' stroke='%23ece7dc' stroke-width='1.6'/%3E%3Cpath d='M18 15l12 7-12 7z' fill='%23ece7dc'/%3E%3C/svg%3E") 22 22, pointer;
  }
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.twr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 6, 0.96);
  padding: clamp(1rem, 5vw, 4rem);
}

.twr-lightbox.is-open { display: flex; }

.twr-lightbox__img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border: 1px solid var(--line);
}

.twr-lightbox__btn {
  position: absolute;
  background: none;
  border: 1px solid var(--line);
  color: var(--bone);
  width: 48px; height: 48px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.twr-lightbox__btn:hover { background: var(--bark-2); border-color: var(--gold); }

.twr-lightbox__close { top: 1.25rem; right: 1.25rem; }
.twr-lightbox__prev  { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.twr-lightbox__next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
  .twr-lightbox__prev { left: 0.5rem; }
  .twr-lightbox__next { right: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Videos
   -------------------------------------------------------------------------- */

.twr-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.twr-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--bark);
  overflow: hidden;
}

.twr-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- Vorschau statt geladenem Player --- */

.twr-video__facade {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  background: var(--bark);
}

.twr-video__facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.85);
  transition: filter 0.4s var(--ease), transform 0.6s var(--ease);
}

.twr-video__facade:hover img,
.twr-video__facade:focus-visible img {
  filter: saturate(1) brightness(1);
  transform: scale(1.03);
}

/* Play-Dreieck in der Mitte */
.twr-video__play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 66px; height: 46px;
  border-radius: 12px;
  background: rgba(16, 17, 9, 0.72);
  border: 1px solid rgba(236, 231, 220, 0.35);
  transition: background 0.3s var(--ease), scale 0.3s var(--ease);
}

.twr-video__play::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  translate: -40% -50%;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--bone);
}

.twr-video__facade:hover .twr-video__play,
.twr-video__facade:focus-visible .twr-video__play {
  background: var(--rust);
  border-color: var(--rust);
  scale: 1.08;
}

.twr-video__title {
  margin: 0.9rem 0 0.2rem;
  font-size: 1.05rem;
}

.twr-video__meta {
  color: var(--bone-dim);
  font-size: 0.88rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Shop-CTA
   -------------------------------------------------------------------------- */

.twr-cta-band {
  border: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(163,19,47,0.16) 0%, transparent 55%),
    var(--bark);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.twr-cta-band h2 { margin-bottom: 0.5rem; }

.twr-cta-band p {
  color: var(--bone-dim);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Shop / Bestellformular
   -------------------------------------------------------------------------- */

/* Teaser auf dem OnePager — verlinkt auf die eigene Shop-Seite */
.twr-shopteaser {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(163, 19, 47, 0.14) 0%, transparent 55%),
    var(--bark);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.twr-shopteaser__art img {
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.8);
}

.twr-shopteaser__text {
  color: var(--bone-dim);
  max-width: 46ch;
  margin-bottom: 1.9rem;
}

.twr-shopteaser__text strong { color: var(--gold); font-weight: 600; }

@media (max-width: 700px) {
  .twr-shopteaser { grid-template-columns: 1fr; }
  .twr-shopteaser__art { max-width: 260px; }
}

.twr-order {
  border: 1px solid var(--line);
  background: var(--bark);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.twr-order__product {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.twr-order__product img {
  width: 100%;
  border: 1px solid var(--line);
}

.twr-order__name { margin-bottom: 0.35rem; }

.twr-order__price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.twr-order__text { color: var(--bone-dim); margin: 0; }

@media (max-width: 600px) {
  .twr-order__product { grid-template-columns: 1fr; }
  .twr-order__product picture { max-width: 220px; display: block; }
}

/* --- Formular --- */

.twr-order__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

.twr-field { display: flex; flex-direction: column; gap: 0.4rem; }
.twr-field--wide { grid-column: 1 / -1; }
.twr-field--narrow { max-width: 9rem; }

.twr-field label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.twr-field__hint {
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.7;
}

.twr-field input,
.twr-field select,
.twr-field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--bone);
  background: var(--soil);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-appearance: none;
          appearance: none;
}

.twr-field select {
  /* eigener Pfeil, da appearance zurueckgesetzt ist */
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
                    linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.twr-field textarea { resize: vertical; min-height: 3.5rem; }

.twr-field input:focus,
.twr-field select:focus,
.twr-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink);
}

.twr-field__error {
  color: var(--rust-lt);
  font-size: 0.85rem;
}

.twr-order__vat {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bone-dim);
  margin-bottom: 0.9rem;
}

.twr-summe {
  width: 100%;
  max-width: 24rem;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.twr-summe th,
.twr-summe td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bark-2);
  font-weight: 400;
  color: var(--bone-dim);
  text-align: left;
}

.twr-summe td { text-align: right; font-variant-numeric: tabular-nums; }

.twr-summe__total th,
.twr-summe__total td {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.twr-summe__hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--bone-dim);
}

/* Sendezustand des Bestellbuttons: sichtbar beschäftigt, nicht erneut klickbar */
.twr-btn.is-sending {
  position: relative;
  padding-left: 3.1rem;
  cursor: progress;
  opacity: 0.9;
}

.twr-btn.is-sending::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: twr-spin 0.7s linear infinite;
}

@keyframes twr-spin {
  to { transform: rotate(360deg); }
}

.twr-btn.is-sending:disabled { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .twr-btn.is-sending::before { animation-duration: 2s; }
}

.twr-order__submit {
  display: flex;
  /* .twr-field setzt column — hier ausdruecklich zuruecksetzen, sonst
     zentriert align-items den Button horizontal statt ihn auszurichten. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}

.twr-order__note {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--bone-dim);
}

.twr-order__note a { text-decoration: underline; }

.twr-order__error {
  border: 1px solid var(--rust);
  background: rgba(163, 19, 47, 0.14);
  color: var(--bone);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

.twr-order__done h3 { color: var(--gold); }

.twr-order__done p {
  color: var(--bone-dim);
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

@media (max-width: 560px) {
  .twr-order__form { grid-template-columns: 1fr; }
  .twr-field--narrow { max-width: none; }
}

/* --------------------------------------------------------------------------
   About-Seite
   -------------------------------------------------------------------------- */

.twr-page-head {
  padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) clamp(2rem, 5vw, 3.5rem);
}

/* --- Fehlerseite --------------------------------------------------------- */

.twr-404 {
  min-height: 62svh;
  display: flex;
  align-items: center;
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

.twr-404 h1 { font-size: clamp(2.8rem, 9vw, 6rem); }

.twr-404__actions { margin-top: 2.2rem; }

.twr-about__figure {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.twr-about__portrait {
  border: 1px solid var(--line);
}

.twr-about__figure .twr-credit { margin-top: 0.8rem; }

.twr-prose { max-width: 68ch; }

.twr-prose h2 {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.twr-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.twr-prose h3 { margin-top: 2rem; color: var(--gold); }

.twr-prose p, .twr-prose li { color: var(--bone-dim); }

/* Fliesstext-Links: Unterstrich wächst beim Überfahren von links nach rechts */
.twr-prose p a,
.twr-prose li a,
.twr-section__lead a,
.twr-shows__follow a,
.twr-credit a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size 0.35s var(--ease), color 0.25s var(--ease);
}

@media (hover: hover) {
  .twr-prose p a,
  .twr-prose li a,
  .twr-section__lead a,
  .twr-shows__follow a,
  .twr-credit a { background-size: 0% 1px; }

  .twr-prose p a:hover,
  .twr-prose li a:hover,
  .twr-section__lead a:hover,
  .twr-shows__follow a:hover,
  .twr-credit a:hover { background-size: 100% 1px; }
}

.twr-prose strong { color: var(--bone); font-weight: 600; }

.twr-prose ul { margin: 0 0 1.2em; }
.twr-prose ul li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.4em;
}
.twr-prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 1px;
  background: var(--rust);
}

.twr-factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.twr-fact {
  background: var(--bark);
  padding: 1.4rem 1.5rem;
}

.twr-fact__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.5rem;
}

.twr-fact__value { color: var(--bone); font-size: 1.02rem; }
.twr-fact__value a { color: var(--gold); }

.twr-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.twr-member {
  border: 1px solid var(--line);
  background: var(--bark);
  padding: 1.25rem 1.4rem;
}

.twr-member__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--bone);
  margin-bottom: 0.2rem;
}

.twr-member__role {
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twr-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.twr-downloads + .twr-downloads { margin-bottom: 2.5rem; }

.twr-downloads__hint {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
}

.twr-legal {
  font-size: 0.92rem;
  line-height: 1.7;
}

.twr-legal p { color: var(--bone-dim); }

/* Hinweis auf der englischen Fassung: Rechtstexte gelten nur auf Deutsch */
.twr-legal__hinweis {
  border-left: 2px solid var(--gold);
  background: rgba(217, 164, 65, 0.08);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  font-size: 0.92rem;
  color: var(--bone) !important;
}

.twr-legal__note {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Amtliche Mustertexte: Umbrueche bleiben erhalten, aber der Block darf
   auf schmalen Schirmen normal umbrechen statt seitlich zu scrollen. */
.twr-legal__pre {
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bone-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 1.5em;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: rgba(36, 36, 28, 0.5);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.twr-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--ink);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}

.twr-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.twr-footer__brand .twr-brand { margin-bottom: 1rem; }

.twr-footer__tagline {
  color: var(--bone-dim);
  font-size: 0.94rem;
  max-width: 34ch;
}

.twr-footer__heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.1rem;
}

.twr-footer__list li { margin-bottom: 0.6rem; }

.twr-footer__list a {
  color: var(--bone-dim);
  font-size: 0.95rem;
}
.twr-footer__list a:hover { color: var(--gold); }

.twr-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.twr-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.twr-social__link:hover { border-color: var(--gold); background: var(--bark-2); }

.twr-social__link img {
  width: 20px; height: 20px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
}

.twr-social__link:hover img { opacity: 1; }

.twr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
}

.twr-footer__bottom a { color: var(--bone-dim); }
.twr-footer__bottom a:hover { color: var(--gold); }

@media (max-width: 780px) {
  .twr-footer__top { grid-template-columns: 1fr 1fr; }
  .twr-footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Cookie-Hinweis
   -------------------------------------------------------------------------- */

.twr-cookie {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(140%);
  z-index: 150;
  width: min(680px, calc(100vw - 2rem));
  background: rgba(26, 27, 20, 0.985);
  border: 1px solid var(--line);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9);
  transition: transform 0.45s var(--ease);
}

.twr-cookie.is-visible { transform: translateX(-50%) translateY(0); }

.twr-cookie__text {
  flex: 1 1 300px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--bone-dim);
  margin: 0;
}

.twr-cookie__text a { color: var(--gold); text-decoration: underline; }

@media (max-width: 520px) {
  .twr-cookie { padding: 1.2rem; }
  .twr-cookie .twr-btn { width: 100%; }
}