/* ==========================================================================
   VIMAX Fliesenkatalog
   Haltung: Nachschlagewerk. Das gesamte Werksprogramm auf einen Blick —
   auffindbar über Serie, Format und Optik. Preise auf Anfrage.
   ========================================================================== */

:root {
  /* Ton: gebrannter Ton und Tageslicht, ein einziger warmer Akzent */
  --tinte:     #0d0e0f;
  --graphit:   #191b1d;
  --papier:    #f7f5f1;
  --porzellan: #efece5;
  --kalk:      #e2ded5;
  --asche:     #8d8b85;
  --champagner: #b0925f;      /* nur für Akzente: Linien, Marken, Hover */
  --champagner-hell: #d7c39b;

  --auf-dunkel: #f3f1ec;
  --auf-hell: var(--tinte);
  --auf-hell-leise: #6b6963;
  --linie: rgba(13, 14, 15, .11);
  --linie-stark: rgba(13, 14, 15, .26);
  --linie-dunkel: rgba(243, 241, 236, .15);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rand: clamp(20px, 4.4vw, 84px);
  --breite: 1720px;
  --takt: clamp(78px, 10vw, 176px);
  --kopfhoehe: 76px;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-weich: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--auf-hell);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

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

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinte); color: var(--porzellan); padding: 12px 20px;
  font-family: var(--mono); font-size: .74rem;
}
.sprung:focus { left: 0; }

.bahn { width: min(100% - var(--rand) * 2, var(--breite)); margin-inline: auto; }

/* ------------------------------------------------------------- Typografie */
.d-xl, .d-l, .d-m, .d-s {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.025em; line-height: .98; margin: 0;
  text-transform: uppercase;
}
.d-xl { font-size: clamp(2.8rem, 8.4vw, 8.2rem); font-weight: 800; letter-spacing: -.035em; }
.d-l  { font-size: clamp(2rem, 4.4vw, 4.2rem); letter-spacing: -.03em; }
.d-m  { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
.d-s  { font-size: clamp(1.02rem, 1.2vw, 1.2rem); letter-spacing: -.015em; }

/* Serif kursiv — der einzige weiche Ton, sparsam für Zwischentexte */
.serif {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: 0; line-height: 1.24;
  font-size: clamp(1.5rem, 3vw, 2.9rem);
}

.marke {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--auf-hell-leise); display: block;
}
.marke--akzent { color: var(--champagner); }
.marke--hell { color: rgba(243, 241, 236, .6); }
.sektion--dunkel .marke--akzent, .fuss .marke--akzent { color: var(--champagner-hell); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fliess { font-size: clamp(.98rem, 1.05vw, 1.1rem); line-height: 1.72; color: var(--auf-hell-leise); margin: 0; }
.fliess--dunkel { color: rgba(244, 243, 240, .68); }
.hinweis { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: var(--auf-hell-leise); margin: 0; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: sticky; top: 0; z-index: 90;
  height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-inline: var(--rand);
  background: rgba(251, 250, 248, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf__marke { display: flex; align-items: center; gap: 12px; }
.kopf__zeichen { width: 34px; height: auto; }
.kopf__schrift { width: 92px; height: auto; }
.kopf__zusatz {
  font-family: var(--mono); font-weight: 400; font-size: .64rem; letter-spacing: .16em;
  color: var(--auf-hell-leise); padding-left: 11px; border-left: 1px solid var(--linie-stark);
  text-transform: uppercase;
}
.kopf__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.kopf__nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--auf-hell-leise); padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--tinte); border-color: var(--tinte); }
.kopf__anfrage {
  background: var(--tinte); color: var(--porzellan) !important;
  padding: 10px 18px !important; border: 0 !important;
}
.kopf__anfrage:hover { background: var(--graphit); }
/* ------------------------------------------------------------ Sprachwahl */
.sprachwahl { position: relative; }
.sprachwahl__knopf {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  padding: 8px 11px; border: 1px solid var(--linie);
  color: var(--auf-hell-leise); transition: border-color .3s var(--ease), color .3s var(--ease);
}
.sprachwahl__knopf:hover, .sprachwahl__knopf[aria-expanded="true"] { color: var(--tinte); border-color: var(--linie-stark); }
.sprachwahl__liste {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 95;
  min-width: 168px; background: var(--papier);
  border: 1px solid var(--linie-stark); box-shadow: 0 14px 40px rgba(19, 21, 23, .1);
}
.sprachwahl__liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 15px; font-size: .86rem;
  transition: background .25s var(--ease);
}
.sprachwahl__liste button:hover { background: var(--porzellan); }
.sprachwahl__liste button[aria-current="true"] { background: var(--tinte); color: var(--porzellan); }
.sprachwahl__liste .mono { font-size: .68rem; letter-spacing: .1em; opacity: .7; }

/* Fenster beim ersten Besuch */
.sprachfenster {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--rand);
  background: rgba(19, 21, 23, .55); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s var(--ease);
}
.sprachfenster.ist-da { opacity: 1; }
.sprachfenster__kasten {
  width: min(100%, 440px); background: var(--papier);
  padding: clamp(26px, 4vw, 38px);
  transform: translateY(12px); transition: transform .6s var(--ease);
}
.sprachfenster.ist-da .sprachfenster__kasten { transform: none; }
.sprachfenster__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0 22px; background: var(--linie); border: 1px solid var(--linie); }
.sprachfenster__knopf {
  display: flex; align-items: center; gap: 9px; justify-content: flex-start;
  padding: 13px 15px; background: var(--papier); font-size: .9rem;
  transition: background .25s var(--ease);
}
.sprachfenster__knopf:hover { background: var(--porzellan); }
.sprachfenster__knopf[aria-pressed="true"] { background: var(--tinte); color: var(--porzellan); }
.sprachfenster__knopf .mono { font-size: .66rem; letter-spacing: .1em; opacity: .65; }

.kopf__schalter { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.kopf__schalter span { display: block; width: 22px; height: 1.5px; background: var(--tinte); }

@media (max-width: 980px) {
  .kopf__zusatz { display: none; }
  .kopf__schalter { display: flex; }
  .sprachwahl { width: 100%; margin-top: 10px; }
  .sprachwahl__liste { position: static; width: 100%; margin-top: 8px; }
  .kopf__nav {
    position: fixed; inset: var(--kopfhoehe) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: 8px var(--rand) 24px; display: none;
  }
  .menue-offen .kopf__nav { display: flex; }
  .kopf__nav a { width: 100%; padding: 14px 0; font-size: .82rem; }
  .kopf__anfrage { margin-top: 12px; text-align: center; }
}

/* ------------------------------------------------------------ Startseite */
.auftakt {
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--linie);
}
.auftakt__gitter { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 76px); align-items: end; }
@media (max-width: 900px) { .auftakt__gitter { grid-template-columns: 1fr; } }

.zahlenband { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); margin-top: clamp(34px, 5vw, 56px); }
.zahlenband div { padding: 22px 20px 0 0; }
.zahlenband dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--auf-hell-leise); }
.zahlenband dd { margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.3rem); letter-spacing: -.02em; }
@media (max-width: 720px) { .zahlenband { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }

/* Bildband der Startseite: Raumaufnahmen im Schnelldurchlauf */
.band { display: flex; gap: 1px; overflow: hidden; background: var(--linie); }
.band figure { flex: 1 1 0; margin: 0; overflow: hidden; height: clamp(220px, 34vh, 420px); }
.band img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.band figure:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .band figure:nth-child(n+4) { display: none; } }

/* --------------------------------------------------------------- Sektion */
.sektion { padding-block: var(--takt); }
.sektion--dunkel { background: var(--tinte); color: var(--auf-dunkel); }
.sektion--dunkel .fliess { color: rgba(244, 243, 240, .68); }
.sektion--dunkel .marke { color: rgba(244, 243, 240, .55); }

.sektionskopf {
  display: flex; justify-content: space-between; align-items: end; gap: 28px;
  padding-bottom: 28px; margin-bottom: 34px; border-bottom: 1px solid var(--linie);
}
.sektion--dunkel .sektionskopf { border-color: var(--linie-dunkel); }
@media (max-width: 760px) { .sektionskopf { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* --------------------------------------------------- Serienraster (Index) */
.serienraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.serie {
  background: var(--papier); display: flex; flex-direction: column;
  transition: background .4s var(--ease);
}
.serie:hover { background: var(--weiss, #fff); }
.serie__bild {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kalk);
}
.serie__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.serie:hover .serie__bild img { transform: scale(1.045); }
.serie__leer { display: grid; place-items: center; height: 100%; }
.serie__neu {
  position: absolute; top: 0; left: 0; background: var(--tinte); color: var(--porzellan);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; padding: 5px 9px;
}
.serie__text { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.serie__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.015em; font-size: 1.06rem; margin: 0; }
.serie__zeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: auto; padding-top: 12px; }
.serie__formate { font-family: var(--mono); font-size: .66rem; color: var(--auf-hell-leise); letter-spacing: .04em; }

/* ------------------------------------------------------------- Filterband */
.filterband {
  position: sticky; top: var(--kopfhoehe); z-index: 60;
  background: rgba(251, 250, 248, .95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie); padding-block: 14px;
}
.filterband__zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suche {
  flex: 1 1 240px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--linie-stark); padding: 9px 14px; background: transparent;
}
.suche input { flex: 1; border: 0; background: transparent; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.suche input:focus { outline: 0; }
.wahl {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 13px; border: 1px solid var(--linie-stark); background: transparent;
}
.marker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--linie); transition: all .3s var(--ease);
}
.marker:hover { border-color: var(--linie-stark); }
.marker[aria-pressed="true"] { background: var(--tinte); color: var(--porzellan); border-color: var(--tinte); }
.markerreihe { display: flex; flex-wrap: wrap; gap: 7px; }

/* ------------------------------------------------------------ Serienseite */
.serienkopf { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(32px, 4vw, 56px); }
@media (max-width: 900px) { .serienkopf { grid-template-columns: 1fr; } }

.datenliste { border-top: 1px solid var(--linie); margin-top: 26px; }
.datenliste div { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.datenliste dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--auf-hell-leise); }
.datenliste dd { margin: 0; font-size: .95rem; }
@media (max-width: 560px) { .datenliste div { grid-template-columns: 1fr; gap: 4px; } }

.artikelraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.artikel { background: var(--papier); padding: 0 0 16px; }
.artikel__bild { aspect-ratio: 1; background: var(--kalk); overflow: hidden; }
.artikel__bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel__text { padding: 14px 16px 0; }
.artikel__name { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .88rem; letter-spacing: -.01em; margin: 0 0 6px; }

.datenblatt { width: 100%; font-size: .86rem; }
.datenblatt th, .datenblatt td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.datenblatt th { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-hell-leise); font-weight: 400; width: 40%; }
.datenblatt tr:last-child th, .datenblatt tr:last-child td { border-bottom: 0; }

/* Lagerbestand als Balken — zeigt, was tatsächlich verfügbar ist */
.lager { display: flex; align-items: center; gap: 10px; }
.lager__balken { flex: 1; height: 3px; background: var(--linie); position: relative; max-width: 120px; }
.lager__balken span { position: absolute; inset: 0 auto 0 0; background: var(--tinte); }

/* ------------------------------------------------------------- Raumbilder */
.raumreihe { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--rand); }
.raumreihe figure { flex: 0 0 auto; margin: 0; scroll-snap-align: center; overflow: hidden; }
.raumreihe img { height: clamp(260px, 48vh, 560px); width: auto; object-fit: cover; }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; background: var(--tinte); color: var(--porzellan);
  transition: background .4s var(--ease);
}
.knopf:hover { background: var(--graphit); }
.knopf--rand { background: transparent; color: inherit; border: 1px solid currentColor; }
.knopf--rand:hover { background: var(--tinte); color: var(--porzellan); border-color: var(--tinte); }
.knopf__pfeil { transition: transform .4s var(--ease); }
.knopf:hover .knopf__pfeil { transform: translateX(5px); }

/* -------------------------------------------------------------- Downloads */
.downloadliste { border-top: 1px solid var(--linie); }
.download {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--linie);
  transition: padding-left .4s var(--ease);
}
.download:hover { padding-left: 10px; }
.download__titel { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1rem; letter-spacing: -.01em; }
@media (max-width: 620px) { .download { grid-template-columns: 1fr auto; } .download__mb { display: none; } }

/* ------------------------------------------------------------------- Fuß */
.fuss { background: var(--tinte); color: var(--auf-dunkel); padding-top: var(--takt); margin-top: var(--takt); }
.fuss__gitter { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
@media (max-width: 760px) { .fuss__gitter { grid-template-columns: 1fr; gap: 30px; } }
.fuss .marke { color: rgba(244, 243, 240, .55); }
.fuss__liste { margin-top: 16px; display: grid; gap: 9px; }
.fuss__liste a { font-size: .93rem; color: rgba(244, 243, 240, .84); transition: color .3s var(--ease); }
.fuss__liste a:hover { color: var(--porzellan); }
.fuss__zeile { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 0 26px; border-top: 1px solid var(--linie-dunkel); }
.fuss .hinweis { color: rgba(244, 243, 240, .48); }

/* ------------------------------------------------------------- Bewegung */
.zeigt-sich { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.zeigt-sich.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Auftritt — die Bühne, der Filmstreifen und die Bewegungen
   Alles läuft über transform und opacity, damit es auf jedem Gerät ruhig bleibt.
   ========================================================================== */

/* Kopf liegt über der Bühne und wird erst beim Scrollen fest */
body.hat-buehne .kopf {
  position: fixed; inset: 0 0 auto 0;
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
  color: var(--auf-dunkel);
  transition: background .6s var(--ease-weich), color .6s var(--ease-weich),
              border-color .6s var(--ease-weich), backdrop-filter .6s var(--ease-weich);
}
body.hat-buehne .kopf .kopf__nav a,
body.hat-buehne .kopf .sprachwahl__knopf { color: rgba(243, 241, 236, .72); }
body.hat-buehne .kopf .kopf__nav a:hover,
body.hat-buehne .kopf .kopf__nav a[aria-current="page"],
body.hat-buehne .kopf .sprachwahl__knopf:hover { color: var(--auf-dunkel); border-color: var(--champagner); }
body.hat-buehne .kopf .kopf__zusatz { color: rgba(243, 241, 236, .5); border-left-color: var(--linie-dunkel); }
body.hat-buehne .kopf .sprachwahl__knopf { border-color: var(--linie-dunkel); }
body.hat-buehne .kopf .kopf__anfrage { background: var(--champagner); color: var(--tinte) !important; }
body.hat-buehne .kopf .kopf__anfrage:hover { background: var(--champagner-hell); }
body.hat-buehne .kopf__zeichen, body.hat-buehne .kopf__schrift { filter: invert(1) brightness(1.9); }
body.hat-buehne .kopf__schalter span { background: var(--auf-dunkel); }

/* Sobald gescrollt wird, kommt der helle Kopf zurück */
body.hat-buehne.ist-gescrollt .kopf {
  background: rgba(247, 245, 241, .92); backdrop-filter: blur(16px);
  border-bottom-color: var(--linie); color: var(--auf-hell);
}
body.hat-buehne.ist-gescrollt .kopf .kopf__nav a,
body.hat-buehne.ist-gescrollt .kopf .sprachwahl__knopf { color: var(--auf-hell-leise); }
body.hat-buehne.ist-gescrollt .kopf .kopf__nav a:hover,
body.hat-buehne.ist-gescrollt .kopf .kopf__nav a[aria-current="page"] { color: var(--tinte); border-color: var(--tinte); }
body.hat-buehne.ist-gescrollt .kopf .kopf__zusatz { color: var(--auf-hell-leise); border-left-color: var(--linie-stark); }
body.hat-buehne.ist-gescrollt .kopf .kopf__anfrage { background: var(--tinte); color: var(--papier) !important; }
body.hat-buehne.ist-gescrollt .kopf__zeichen,
body.hat-buehne.ist-gescrollt .kopf__schrift { filter: none; }
body.hat-buehne.ist-gescrollt .kopf__schalter span { background: var(--tinte); }

/* ------------------------------------------------------------------ Bühne */
/* Der Kopf schwebt über der Bühne. Passt der Inhalt nicht in einen Bildschirm
   — kleines Telefon, große Schrift —, wächst die Sektion nach oben. Ohne
   diesen Abstand schöbe sich die Überschrift dann unter das Logo. */
.buehne {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--tinte); color: var(--auf-dunkel);
  padding-top: calc(var(--kopfhoehe) + clamp(12px, 2.5vh, 32px));
  padding-bottom: clamp(38px, 6vh, 78px);
}
.buehne__bilder { position: absolute; inset: 0; }
.buehne__bild {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.78) saturate(.94) contrast(1.02);
  opacity: 0; transform: scale(1.08);
}
/* Keyframes statt Transition: laufen auch an, wenn die Seite im Hintergrund lädt */
.buehne__bild.ist-aktiv { animation: buehne-fahrt 11s linear forwards, buehne-auf 2.2s var(--ease-weich) forwards; }
@keyframes buehne-fahrt { from { transform: scale(1.02); } to { transform: scale(1.13); } }
@keyframes buehne-auf { from { opacity: 0; } to { opacity: 1; } }

/* Zwei Schleier: unten für die Schrift, oben für den Kopf */
/* Drei Schleier: oben für den Kopf, unten und links für die Schrift.
   Ohne sie verschwindet Text auf hellen Marmoraufnahmen. */
.buehne__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,14,15,.78) 0%, rgba(13,14,15,0) 24%),
    linear-gradient(0deg, rgba(13,14,15,.94) 0%, rgba(13,14,15,.62) 34%, rgba(13,14,15,.14) 62%, rgba(13,14,15,0) 78%),
    linear-gradient(90deg, rgba(13,14,15,.62) 0%, rgba(13,14,15,.18) 46%, rgba(13,14,15,0) 72%);
}

.buehne__inhalt { position: relative; }   /* Breite kommt von .bahn */
.buehne__kopf { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 4vw, 72px); align-items: end; }
@media (max-width: 900px) { .buehne__kopf { grid-template-columns: 1fr; } }

.buehne h1 { color: var(--auf-dunkel); margin-top: 18px; }
.buehne .fliess { color: rgba(243, 241, 236, .74); }

/* Zeilenweiser Aufzug der Überschrift */
.aufzug { display: block; overflow: hidden; }
.aufzug > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.25s var(--ease);
}
.ist-eingeblendet .aufzug > span { transform: none; }
.aufzug:nth-of-type(2) > span { transition-delay: .1s; }

/* Feine Linie, die sich selbst zieht */
.zugstrich {
  height: 1px; background: var(--champagner); transform-origin: left;
  transform: scaleX(0); transition: transform 1.6s var(--ease) .35s;
  margin: clamp(26px, 4vh, 46px) 0 clamp(20px, 3vh, 32px);
}
.ist-eingeblendet .zugstrich { transform: scaleX(1); }

.buehne__fuss {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 26px; flex-wrap: wrap;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease) .5s, transform 1.1s var(--ease) .5s;
}
.ist-eingeblendet .buehne__fuss { opacity: 1; transform: none; }

.buehne__zahlen { display: flex; gap: clamp(26px, 4vw, 64px); flex-wrap: wrap; }
.buehne__zahlen div { display: grid; gap: 6px; }
.buehne__zahlen dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,241,236,.5); }
.buehne__zahlen dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -.03em; }

/* Auf dem Telefon muss die ganze Bühne mit wenig Höhe auskommen: engere
   Abstände, die Kennzahlen in zwei Reihen, der Scrollhinweis entfällt.
   Sonst rutschen Zahlen und Knöpfe unter den sichtbaren Rand. */
@media (max-width: 620px) {
  .buehne {
    padding-top: calc(var(--kopfhoehe) + 10px);
    padding-bottom: clamp(22px, 3vh, 44px);
  }
  .buehne .d-xl { font-size: clamp(2.1rem, 9.4vw, 3.1rem); }
  .buehne h1 { margin-top: 10px; }
  .buehne .serif { font-size: clamp(1.2rem, 5.2vw, 1.5rem); }
  .buehne__kopf { gap: 12px; }
  .zugstrich { margin: clamp(10px, 1.6vh, 18px) 0 clamp(10px, 1.6vh, 16px); }
  /* Der Schnellkontakt schwebt unten rechts — die Knöpfe der Bühne dürfen
     nicht unter ihm verschwinden, also bleibt darunter Platz frei. */
  .buehne__fuss { gap: 16px; padding-bottom: 62px; }
  .buehne__zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .buehne__zahlen div { gap: 3px; }
  .buehne__zahlen dt { font-size: .56rem; letter-spacing: .15em; }
  .buehne__zahlen dd { font-size: 1.26rem; }
  .buehne .scrollzeichen { display: none; }
}

/* Hinweis zum Weiterscrollen */
.scrollzeichen { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,241,236,.55); }
.scrollzeichen i { display: block; width: 42px; height: 1px; background: rgba(243,241,236,.4); position: relative; overflow: hidden; }
.scrollzeichen i::after { content: ""; position: absolute; inset: 0; background: var(--champagner-hell); transform: translateX(-100%); animation: strichlauf 2.6s var(--ease-weich) infinite; }
@keyframes strichlauf { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* ----------------------------------------------------------- Filmstreifen */
/* Der Streifen wird von Hand bewegt — er hängt nicht am Seitenscroll und hält
   die Seite nirgends fest. Wischen, ziehen oder liegen lassen. */
.filmstreifen { position: relative; background: var(--tinte); color: var(--auf-dunkel); }
.filmstreifen__buehne { padding-block: clamp(48px, 9vh, 104px); }
.filmstreifen__spur {
  display: flex; gap: clamp(14px, 1.6vw, 30px); padding-inline: var(--rand);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  cursor: grab;
}
.filmstreifen__spur::-webkit-scrollbar { display: none; }
/* Während man zieht, darf das Einrasten nicht gegenhalten */
.filmstreifen__spur.zieht { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.filmstreifen__spur img { -webkit-user-drag: none; user-select: none; }
.filmstreifen__karte { position: relative; flex: 0 0 auto; width: clamp(200px, 23vw, 360px); margin: 0; scroll-snap-align: center; }
.filmstreifen__karte img { width: 100%; height: min(58svh, 520px); object-fit: cover; filter: brightness(.92); transition: filter .6s var(--ease); }
.filmstreifen__karte:hover img { filter: brightness(1.05); }
.filmstreifen__karte figcaption {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--linie-dunkel); margin-top: 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
}
.filmstreifen__karte figcaption span:last-child { color: var(--champagner-hell); }
/* Titel links, die beiden Pfeile rechts — der zweite Weg neben Wischen und Ziehen */
.filmstreifen__kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-inline: var(--rand); margin-bottom: clamp(24px, 4vh, 44px);
}
.filmstreifen__pfeile { display: flex; gap: 8px; flex: 0 0 auto; }
.filmstreifen__pfeil {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; color: var(--auf-dunkel);
  border: 1px solid var(--linie-dunkel); border-radius: 50%;
  cursor: pointer; transition: border-color .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.filmstreifen__pfeil:hover { border-color: var(--champagner); background: rgba(196, 180, 155, .12); }
.filmstreifen__pfeil:disabled { opacity: .3; cursor: default; }
.filmstreifen__pfeil:disabled:hover { border-color: var(--linie-dunkel); background: transparent; }

@media (max-width: 900px) {
  .filmstreifen__karte { width: clamp(210px, 64vw, 320px); }
  .filmstreifen__karte img { height: min(46svh, 400px); }
}

/* --------------------------------------------------------- Karten fein */
.serie { position: relative; }
.serie__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,14,15,.42), rgba(13,14,15,0) 55%);
  opacity: 0; transition: opacity .7s var(--ease);
}
.serie:hover .serie__bild::after { opacity: 1; }
.serie__name { transition: color .4s var(--ease); }
.serie:hover .serie__name { color: var(--champagner); }
.serie__text { position: relative; }
.serie__text::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: var(--champagner); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.serie:hover .serie__text::after { transform: scaleX(1); }
.serie__neu { background: var(--champagner); color: var(--tinte); letter-spacing: .2em; }

.knopf { position: relative; overflow: hidden; }
.knopf::after {
  content: ""; position: absolute; inset: 0; background: var(--champagner);
  transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1;
}
.knopf:hover::after { transform: none; }
.knopf:hover { background: var(--tinte); color: var(--tinte); }
.knopf { z-index: 0; }
.knopf--rand:hover { background: transparent; color: var(--tinte); border-color: var(--champagner); }

/* Bildband der Startseite etwas höher und mit Zoom */
.band figure { height: clamp(260px, 42vh, 520px); }
.band img { transition: transform 2s var(--ease); }
.band figure:hover img { transform: scale(1.07); }

/* -------------------------------------------------- Bewegung beim Scrollen */
.zeigt-sich { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.zeigt-sich.ist-da { opacity: 1; transform: none; }

/* Bilder, die beim Scrollen leicht mitwandern */
.schwebt { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .buehne__bild.ist-aktiv { animation: none; transform: scale(1.02); }
  .aufzug > span, .buehne__fuss { transform: none !important; opacity: 1 !important; }
  .zugstrich { transform: scaleX(1) !important; }
  .scrollzeichen i::after { animation: none; }
}

/* ==========================================================================
   Schnellkontakt — immer erreichbar, unten rechts
   ========================================================================== */
.schnellkontakt { position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px); z-index: 120; }

.schnellkontakt__knopf {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 14px 22px; background: var(--tinte); color: var(--papier);
  box-shadow: 0 14px 40px rgba(13, 14, 15, .28);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.schnellkontakt__knopf:hover { background: var(--champagner); color: var(--tinte); transform: translateY(-2px); }
.schnellkontakt__punkt { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--champagner-hell); }
.schnellkontakt__knopf:hover .schnellkontakt__punkt { background: var(--tinte); }
.schnellkontakt.ist-offen .schnellkontakt__punkt { background: var(--papier); }
/* leiser Puls, damit der Knopf einmal auffällt, ohne zu blinken */
.schnellkontakt__punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--champagner-hell); animation: puls 3.4s var(--ease-weich) infinite;
}
@keyframes puls { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .schnellkontakt__punkt::after { animation: none; } }

.schnellkontakt__blatt {
  width: min(88vw, 330px); margin-bottom: 12px;
  background: var(--papier); border: 1px solid var(--linie-stark);
  box-shadow: 0 24px 70px rgba(13, 14, 15, .26);
  animation: blatt-auf .5s var(--ease) both;
}
@keyframes blatt-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.schnellkontakt__kopf { padding: 20px 22px 16px; border-bottom: 1px solid var(--linie); }
.schnellkontakt__blatt ul { display: grid; }
.schnellkontakt__blatt li + li { border-top: 1px solid var(--linie); }
.schnellkontakt__blatt li a {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  transition: background .25s var(--ease), padding-left .35s var(--ease);
}
.schnellkontakt__blatt li a:hover { background: var(--porzellan); padding-left: 27px; }
.schnellkontakt__zeichen {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--linie-stark); color: var(--champagner); font-size: 1rem;
}
.schnellkontakt__blatt li a:hover .schnellkontakt__zeichen { border-color: var(--champagner); }
.schnellkontakt__blatt strong { display: block; font-size: .92rem; font-weight: 600; }
.schnellkontakt__blatt em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--auf-hell-leise); margin-top: 3px;
}
.schnellkontakt__fuss {
  display: grid; gap: 5px; padding: 14px 22px 18px; border-top: 1px solid var(--linie);
  background: var(--porzellan); font-size: .78rem;
}
.schnellkontakt__fuss a:hover { color: var(--champagner); }

/* Auf dem Telefon nur der Punkt, damit nichts den Inhalt verdeckt */
@media (max-width: 560px) {
  .schnellkontakt__knopf { padding: 15px 18px; font-size: .66rem; }
}

/* Lieferzeile in der Fußzeile */
.fuss__lieferung { padding-bottom: 34px; }
.fuss__stark { font-family: var(--mono); font-size: 1.02rem; letter-spacing: .04em; }

/* ==========================================================================
   Tippziele auf dem Telefon
   Kleine Textlinks sind mit dem Finger schwer zu treffen. Sie bekommen
   Höhe, ohne dass sich das Layout verschiebt — über Innenabstand statt Rand.
   ========================================================================== */
@media (max-width: 700px) {
  /* Verweise, die nur aus einer Zeile Kleinschrift bestehen */
  a.marke,
  .sektionskopf a,
  [data-pfad] a,
  .schnellkontakt__fuss a,
  .fuss__liste a,
  aside ul a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: 6px;
  }

  /* Das Menüzeichen */
  .kopf__schalter { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Brotkrumen dürfen umbrechen statt zu drängen */
  [data-pfad] { line-height: 2.2; }
}