/* =========================================================
   Zmokyz – Stilvorlage

   Gestaltungsgedanke
   ------------------
   Die Marke bringt ihre Gestaltung schon mit: das schwarz-weiße Z im
   Kreis, das Violett aus dem Schriftzug, dazu der Neon-Header mit
   Berliner Skyline in Pink, Gelb und Blau. Genau daraus ist alles hier
   abgeleitet - nichts Dazuerfundenes.

   Was es "futuristisch" macht, sind vier Dinge, die zusammenspielen:
     1. Aurora  - langsam driftende Lichtfelder, aus dem Neon-Header
     2. Korn    - feines Filmkorn über allem, damit die Verläufe nicht
                  glatt und synthetisch wirken
     3. Glas    - Flächen mit echter Tiefenunschärfe statt Kästen
     4. Licht   - Karten, die dem Zeiger folgen

   Zwei Themen: dunkel (Standard, wie die Marke) und hell. Umschalter
   in der Kopfzeile, Systemeinstellung wird beim ersten Besuch beachtet.
   ========================================================= */

/* Für weiche Verlaufsdrehungen - ohne @property springt der Winkel. */
@property --winkel {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --leuchten {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

:root {
  /* --- Marke ---------------------------------------------------
     Das Violett ist direkt aus dem Logo genommen (das "Z" in Zmoky
     und das "B" in Berlin). Für Text und kleine Flächen gibt es eine
     dunklere Fassung, weil das Original auf Weiß zu wenig Kontrast
     hätte - dieselbe Farbe, nur tragfähig.
     ------------------------------------------------------------ */
  --brand:    #8E5FA8;   /* Violett des Schriftzugs, unverändert */
  --brand-tief: #6D3D8C; /* dieselbe Farbe, dunkler - für Text auf Weiß */
  --violet:   #A855F7;   /* aufgehellt, für Licht auf Dunkel */
  --indigo:   #5B5BD6;
  --cyan:     #22B8D6;
  --pink:     #E0459B;   /* aus der Neonschrift - sparsam eingesetzt */
  --amber:    #E9A93C;

  /* Der Hauptverlauf bleibt in der Familie der Marke: Violett nach
     Indigo. Pink kommt nur dort vor, wo es wirklich leuchten soll. */
  --gradient:   linear-gradient(100deg, var(--brand) 0%, var(--indigo) 100%);
  --gradient-3: linear-gradient(100deg, var(--cyan) 0%, var(--brand) 50%, var(--pink) 100%);

  /* --- Maße --------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1180px;
  --narrow: 760px;
  --radius: 18px;
  --radius-sm: 11px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Hell (Standard) -----------------------------------------
   Das offizielle Logo steht auf Weiß, mit schwarzer Skyline und
   violetten Initialen. Die Website übernimmt genau das: heller,
   ruhiger Grund, Schwarz für Text, Violett als einzige Signalfarbe.
   Das liest sich im Laden bei Tageslicht und auf dem Handy deutlich
   besser als eine durchgehend schwarze Seite.
   ------------------------------------------------------------- */
:root, :root[data-theme='light'] {
  --bg:        #FBFAFC;
  --bg-2:      #F4F2F8;
  --surface:   rgba(255, 255, 255, 0.72);
  --surface-2: #FFFFFF;
  --line:      rgba(26, 16, 44, 0.10);
  --line-2:    rgba(26, 16, 44, 0.19);
  --text:      #16111F;
  --muted:     #574F6B;
  --faint:     #837B98;
  --accent:    var(--brand-tief);
  --accent-bg: rgba(142, 95, 168, 0.12);
  --aurora-1:  rgba(142, 95, 168, 0.28);
  --aurora-2:  rgba(91, 91, 214, 0.18);
  --aurora-3:  rgba(34, 184, 214, 0.14);
  --korn:      0.022;
  --glas:      blur(20px) saturate(165%);
  --schatten:  0 26px 64px -26px rgba(40, 20, 80, 0.26);
  --logo-hell: 1;     /* helle Logo-Fassung einblenden */
  --logo-dunkel: 0;
  color-scheme: light;
}

/* --- Dunkel --------------------------------------------------- */
:root[data-theme='dark'] {
  --bg:        #0B0912;
  --bg-2:      #120F1B;
  --surface:   rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line:      rgba(255, 255, 255, 0.11);
  --line-2:    rgba(255, 255, 255, 0.2);
  --text:      #F4F2F9;
  --muted:     #ABA4BE;
  --faint:     #7B7391;
  --accent:    var(--violet);
  --accent-bg: rgba(168, 85, 247, 0.15);
  --aurora-1:  rgba(168, 85, 247, 0.26);
  --aurora-2:  rgba(91, 91, 214, 0.20);
  --aurora-3:  rgba(224, 69, 155, 0.14);
  --korn:      0.05;
  --glas:      blur(22px) saturate(150%);
  --schatten:  0 30px 80px -22px rgba(0, 0, 0, 0.75);
  --gradient:  linear-gradient(100deg, var(--violet) 0%, var(--indigo) 100%);
  --logo-hell: 0;
  --logo-dunkel: 1;
  color-scheme: dark;
}

/* =========================================================
   Grundlagen
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); letter-spacing: -0.045em; font-weight: 680; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); letter-spacing: -0.035em; }
h3 { font-size: 1.22rem; letter-spacing: -0.02em; }

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

a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }
::selection { background: rgba(168, 85, 247, 0.4); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.narrow { max-width: var(--narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 300; padding: 0.7rem 1.1rem;
  background: var(--violet); color: #fff;
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* =========================================================
   Atmosphäre: Aurora und Filmkorn

   Beides liegt fest hinter dem Inhalt und scrollt nicht mit.
   Das Korn ist der Grund, warum die Verläufe nicht nach glattem
   Standardverlauf aussehen - es bricht die Farbflächen auf.
   ========================================================= */

.aurora {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.aurora::before, .aurora::after {
  content: '';
  position: absolute;
  width: 90vmax; height: 90vmax;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aurora::before {
  top: -40vmax; left: -20vmax;
  background:
    radial-gradient(circle at 50% 50%, var(--aurora-1), transparent 62%);
  animation: drift-a 34s var(--ease) infinite alternate;
}
.aurora::after {
  top: -30vmax; right: -25vmax;
  background:
    radial-gradient(circle at 50% 50%, var(--aurora-2), transparent 60%),
    radial-gradient(circle at 30% 70%, var(--aurora-3), transparent 55%);
  animation: drift-b 46s var(--ease) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 8vh, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-12vw, 12vh, 0) scale(0.92); }
}

/* Filmkorn – erzeugt im Browser, keine Bilddatei nötig. */
.korn {
  position: fixed; inset: -50%; z-index: -1;
  pointer-events: none;
  opacity: var(--korn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: korn-flimmern 0.8s steps(4) infinite;
}
@keyframes korn-flimmern {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 2%); }
}

/* Fortschrittsbalken beim Scrollen – scroll-getrieben, ohne JavaScript. */
.fortschritt {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  background: var(--gradient-3);
  scale: 0 1;
  animation: fortschritt linear;
  animation-timeline: scroll(root);
}
@keyframes fortschritt { to { scale: 1 1; } }

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

/* =========================================================
   Auftauchen beim Scrollen
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal:nth-child(6) { transition-delay: 0.3s; }
.no-js .reveal { opacity: 1; transform: none; }

/* --- Scroll-getriebene Feinheiten ---------------------------
   Diese laufen direkt am Scrollstand und nicht über einen Zeitgeber:
   flüssig, ohne JavaScript, und sie halten an, wenn man anhält.
   Browser ohne Unterstützung zeigen einfach den Endzustand.
   ----------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Überschriften und Absätze steigen leicht auf */
    .section__head, .aufsteigen {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    @keyframes aufsteigen {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: none; }
    }

    /* Karten kommen minimal größer werdend herein */
    .tile, .offer, .store, .liquid, .contact-card {
      animation: heranziehen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes heranziehen {
      from { opacity: 0; transform: translateY(26px) scale(0.975); }
      to   { opacity: 1; transform: none; }
    }

    /* Bilder geben sich von unten frei, statt einfach da zu sein */
    .galerie__bild img, .aufdecken-bild {
      animation: freigeben linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes freigeben {
      from { clip-path: inset(18% 0 0 0); transform: scale(1.08); }
      to   { clip-path: inset(0 0 0 0); transform: none; }
    }

    /* Trennlinien zeichnen sich beim Vorbeiscrollen */
    .timeline__item { animation: linie-ziehen linear both; animation-timeline: view();
                      animation-range: entry 0% entry 40%; }
    @keyframes linie-ziehen {
      from { opacity: 0.25; transform: translateX(-10px); }
      to   { opacity: 1; transform: none; }
    }

    /* Wo scroll-getrieben läuft, wird die JavaScript-Variante still-
       gelegt - sonst überlagern sich beide. */
    .reveal { opacity: 1; transform: none; transition: none; }
  }
}

/* =========================================================
   Bausteine
   ========================================================= */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.75rem; font-weight: 620;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ''; width: 1.6rem; height: 1px;
  background: currentColor; opacity: 0.55;
}

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}

.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-2); opacity: 0.7;
}
.section__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- Knöpfe --- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.88rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font: inherit; font-size: 0.97rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gradient); color: #fff; }
.btn--primary:hover { box-shadow: 0 12px 34px -10px rgba(168, 85, 247, 0.7); }

.btn--ghost {
  border-color: var(--line-2); color: var(--text);
  background: var(--surface);
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
}
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-bg); }

.btn--small { padding: 0.55rem 1.1rem; font-size: 0.88rem; }

/* --- Glaskarte mit Lichtpunkt am Zeiger --- */
.glas {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: var(--glas);
  -webkit-backdrop-filter: var(--glas);
  overflow: hidden;
}
/* Der Lichtpunkt: --mx/--my setzt das Skript beim Bewegen des Zeigers. */
.glas::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
              var(--accent-bg), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.glas:hover::before { opacity: 1; }
/* Feiner Lichtrand oben – gibt der Fläche Kante. */
.glas::after {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
  pointer-events: none;
}

.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* =========================================================
   Hinweisband
   ========================================================= */

.noticebar { position: relative; z-index: 110; font-size: 0.925rem; }
.noticebar:empty { display: none; }
.noticebar__item {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.noticebar__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
}
.noticebar--warn .noticebar__dot {
  background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 216, 77, 0.18);
}
.noticebar__text { flex: 1 1 16rem; margin: 0; }
.noticebar__link { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* =========================================================
   Kopfzeile
   ========================================================= */

.header {
  position: sticky; top: 0; z-index: 100;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
  border-bottom-color: var(--line);
}

.header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.75rem; }

/* --- Das offizielle Zeichen --- */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.logo__mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  /* Das Zeichen ist schwarz hinterlegt - im hellen Thema bekommt es
     deshalb einen eigenen dunklen Kreis, sonst schwebt ein schwarzer
     Klotz auf hellem Grund. */
  background: #000;
  box-shadow: 0 0 0 1px var(--line-2), 0 0 22px -6px var(--violet);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.logo:hover .logo__mark {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 0 0 1px var(--violet), 0 0 30px -4px var(--violet);
}
.logo__text {
  font-size: 1.3rem; font-weight: 650; letter-spacing: -0.05em;
}
.logo__text b {
  font-weight: 650;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: block; padding: 0.5rem 0.85rem;
  border-radius: 100px;
  font-size: 0.94rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; inset: auto 50% 0.25rem;
  height: 2px; width: 0;
  background: var(--gradient); border-radius: 2px;
  transition: width 0.3s var(--ease), inset-inline 0.3s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link[aria-current='page']::after { width: 55%; inset-inline: 22.5%; }
.nav__link[aria-current='page'] { color: var(--text); }

.header__tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* --- Themenumschalter --- */
.themetoggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; color: var(--text);
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
  transition: border-color 0.2s ease, transform 0.3s var(--ease);
}
.themetoggle:hover { border-color: var(--accent); transform: rotate(25deg); }
.themetoggle svg { width: 17px; height: 17px; }
.themetoggle .sonne { display: none; }
:root[data-theme='light'] .themetoggle .sonne { display: block; }
:root[data-theme='light'] .themetoggle .mond { display: none; }

.nav-toggle {
  display: none; flex: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; color: var(--text); cursor: pointer;
}
.nav-toggle__bar { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: background-color 0.2s ease; }
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: currentColor; transition: transform 0.25s var(--ease);
}
.nav-toggle__bar::before { top: -5.5px; }
.nav-toggle__bar::after { top: 5.5px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 4.75rem 0 auto; margin: 0;
    padding: 0.75rem 1.5rem 1.75rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.is-open { display: block; animation: nav-auf 0.3s var(--ease); }
  @keyframes nav-auf { from { opacity: 0; transform: translateY(-8px); } }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 0.95rem 0.5rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
}

/* =========================================================
   Titelbereich mit dem offiziellen Logo
   ========================================================= */

/* =========================================================
   Titelbereich

   Aufbau von oben nach unten: das freigestellte Logo, die Überschrift,
   ein wechselnder Slogan, der Einleitungstext, die Knöpfe und zuletzt
   der Öffnungsstatus. Erst wer wir sind, dann was wir sagen, dann was
   man tun kann.

   Alles mittig - das Logo ist symmetrisch aufgebaut (Skyline über dem
   Schriftzug, das Z genau in der Mitte), linksbündig stünde es schief
   im Raum.
   ========================================================= */

.hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.hero__buehne { max-width: 54rem; margin-inline: auto; }

/* --- Das freigestellte Logo ---------------------------------
   Ohne weißen Kasten, dafür mit einem weichen Lichtschein dahinter,
   der die Farben der Marke aufnimmt. Der Schein liegt hinter dem Bild
   und ist bewusst sehr zurückhaltend - er soll das Logo tragen, nicht
   überstrahlen. */
.hero__logo {
  position: relative;
  width: min(30rem, 82%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  animation: logo-auf 1s var(--ease) both;
}
.hero__logo img { width: 100%; display: block; }

/* Im dunklen Thema muss das schwarze Logo aufgehellt werden, sonst
   verschwindet die Skyline im Hintergrund. */
:root[data-theme='dark'] .hero__logo img { filter: invert(1) hue-rotate(180deg) saturate(1.15); }

.hero__logo::before {
  content: '';
  position: absolute; inset: -18% -10%;
  z-index: -1;
  background:
    radial-gradient(50% 55% at 50% 50%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
    radial-gradient(38% 45% at 72% 40%, color-mix(in srgb, var(--indigo) 22%, transparent), transparent 70%);
  filter: blur(38px);
  animation: schein 7s ease-in-out infinite;
}
@keyframes schein {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes logo-auf {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
}

.hero__title {
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  margin-bottom: 0.6rem;
  animation: hoch 0.9s 0.15s var(--ease) both;
}

/* Ein Stück der Überschrift in den Farben der Marke.
   Wird über Sternchen im Text der Verwaltung gesetzt: aus
   "Vom Raucher zum Dampfer *zum Nichtraucher*." wird der Teil
   zwischen den Sternchen farbig. */
.neon {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* --- Der wechselnde Slogan ----------------------------------

   Zwei Lagen übereinander statt einer.

   Vorher stand hier nur eine Zeile: Der alte Satz ging hinaus, das
   Feld wurde geleert, dann kam der neue herein. Dazwischen war rund
   eine Sekunde lang wirklich nichts zu sehen - ein Loch mitten im
   Titelbereich.

   Jetzt liegen zwei Lagen genau übereinander. Beim Wechsel geht die
   eine hinaus, während die andere schon hereinkommt. Es ist immer
   Text da, und die Bewegung wirkt wie eine Übergabe statt wie ein
   Austausch.

   Feste Höhe: Der Slogan wechselt, alles darunter bleibt stehen.
   ----------------------------------------------------------- */

.hero__sloganfeld {
  position: relative;
  min-height: calc(clamp(1.15rem, 2.4vw, 1.6rem) * 1.6);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  perspective: 700px;
}

/* Ein feiner Strich, der beim Wechsel einmal durchläuft. Er verbindet
   die beiden Sätze optisch - man sieht, dass etwas übergeben wird,
   statt dass etwas verschwindet. */
.hero__sloganfeld::after {
  content: '';
  position: absolute; left: 50%; bottom: -0.35rem;
  width: 0; height: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--brand), var(--indigo), transparent);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}
.hero__sloganfeld.wechselt::after { animation: strich-durch 1.05s var(--ease); }
@keyframes strich-durch {
  0%   { width: 0;     opacity: 0; }
  35%  { width: 9rem;  opacity: 0.9; }
  70%  { width: 12rem; opacity: 0.55; }
  100% { width: 0;     opacity: 0; }
}

.hero__slogan {
  position: relative;
  display: block; width: 100%;
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.02em;
}

/* Die beiden Lagen liegen genau aufeinander. Ohne Skript ist nur die
   erste da und verhält sich wie ein normaler Absatz. */
.slogan__lage {
  display: block;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__slogan.hat-welle .slogan__lage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 0.28em;
}

/* Jedes Zeichen einzeln, damit die Bewegung als Welle durch die Zeile
   läuft statt alles auf einmal zu springen. Die Wörter bleiben als
   Einheit zusammen, damit der Umbruch auf schmalen Geräten stimmt. */
.slogan__lage .wort { display: inline-block; white-space: nowrap; }
.slogan__lage .zeichen { display: inline-block; }

.hero__slogan.hat-welle .slogan__lage .zeichen {
  opacity: 0;
  transform: translateY(0.5em) rotateX(-50deg);
  filter: blur(2.5px);
  transition: opacity 0.46s var(--ease), transform 0.46s var(--ease), filter 0.46s var(--ease);
}
.hero__slogan.hat-welle .slogan__lage.is-in .zeichen {
  opacity: 1; transform: none; filter: none;
}
.hero__slogan.hat-welle .slogan__lage.is-out .zeichen {
  opacity: 0;
  transform: translateY(-0.45em) rotateX(50deg);
  filter: blur(2.5px);
}

/* Für den Moment, in dem der Satz ohne Bewegung hingestellt wird -
   etwa beim Zurückkommen auf die Seite. Ohne das würde er dort erst
   langsam einblenden, obwohl er einfach nur wieder da sein soll. */
.slogan__lage.ohne-uebergang .zeichen { transition: none !important; }

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

.hero__text {
  max-width: 46ch; margin-inline: auto;
  animation: hoch 0.9s 0.3s var(--ease) both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  margin-top: 2rem;
  animation: hoch 0.9s 0.45s var(--ease) both;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  animation: hoch 0.9s 0.6s var(--ease) both;
}
@keyframes hoch { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .hero__logo, .hero__title, .hero__text, .hero__actions, .hero__meta { animation: none; }
  .hero__logo::before { animation: none; }
}

/* =========================================================
   Bildband – ein großes Foto quer über die Breite

   Zurzeit genutzt für die Filiale Schönefeld: der Laden in der
   Abenddämmerung, ein Flugzeug im Anflug darüber. Das Bild trägt für
   sich, deshalb liegt darüber nur ein Verlauf und eine kurze Zeile -
   keine Überschrift, kein Knopf, nichts, was es zerschneidet.
   ========================================================= */

.bildband {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--schatten);
}
/* Bewusst 16:9 statt fester Höhe: Das Bild lebt von der ganzen
   Anordnung - Flugzeug oben, Ladenfront in der Mitte, das Z auf dem
   Asphalt unten. Ein flacheres Band würde das Z abschneiden. */
.bildband__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; object-position: 50% 46%;
  display: block;
}
@media (max-width: 700px) {
  /* Hochkant hätte das Bild zu wenig Breite – lieber etwas höher. */
  .bildband__foto { aspect-ratio: 4 / 3; object-position: 50% 42%; }
}
/* Nur unten abdunkeln – der Himmel oben soll Himmel bleiben. */
.bildband::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(6, 4, 12, 0.88) 0%,
    rgba(6, 4, 12, 0.52) 20%,
    rgba(6, 4, 12, 0.10) 42%,
    transparent 60%);
  pointer-events: none;
}
.bildband__zeile {
  position: absolute; inset: auto 0 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: clamp(1.1rem, 3vw, 2rem);
  color: #F6F4FA;
}
.bildband__ort {
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 640;
  letter-spacing: -0.03em; margin: 0 0 0.2rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.bildband__hinweis {
  margin: 0; font-size: 0.92rem;
  color: rgba(246, 244, 250, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.bildband .status {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
  color: #F6F4FA;
}
.bildband .status strong { color: #fff; }

/* Beim Scrollen zoomt es minimal heraus – der einzige Effekt hier. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bildband__foto {
      animation: bild-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes bild-zoom {
      from { transform: scale(1.09); }
      to   { transform: scale(1); }
    }
  }
}

/* =========================================================
   Illustrationen der Lage

   Zwei am Rechner entstandene Bilder, die zeigen sollen, wo die
   Filialen liegen: eine draußen Richtung Flughafen, eine mitten in
   der Stadt. Sie sind ausdrücklich KEINE Fotos der Läden.

   Deshalb sind sie gestalterisch klar von den echten Ladenfotos
   abgesetzt: eigene Überschrift, ein Schildchen auf jedem Bild und
   ein Hinweis darunter, der nicht zu übersehen ist. Sie stehen
   außerdem unter der echten Galerie, nie darüber.
   ========================================================= */

.illus { display: grid; gap: 1rem; }
@media (min-width: 820px) { .illus { grid-template-columns: 1fr 1fr; } }

.illu {
  position: relative; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.illu img {
  width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: 50% 45%;
  display: block;
}
.illu::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 4, 12, 0.82) 0%,
              rgba(6, 4, 12, 0.32) 30%, transparent 58%);
  pointer-events: none;
}

/* Das Schildchen – sitzt oben, damit es sofort auffällt. */
.illu__marke {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: rgba(12, 8, 20, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 100px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #EFE9F7;
}
.illu__marke svg { width: 13px; height: 13px; }

.illu__text {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: 1.1rem 1.25rem;
  color: #F6F4FA;
}
.illu__ort {
  margin: 0 0 0.15rem;
  font-size: 1.15rem; font-weight: 640; letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.illu__lage {
  margin: 0; font-size: 0.88rem;
  color: rgba(246, 244, 250, 0.85);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* --- Die Erklärung, die beim Zeigen oder Tippen erscheint ---------
   Auf dem Rechner beim Überfahren, auf dem Handy beim Tippen. Der
   Knopf liegt über dem ganzen Bild, damit man nicht zielen muss.
   Wichtig: Der Hinweis unter den Bildern bleibt trotzdem stehen -
   eine Aufklärung, die man erst suchen muss, ist keine. */

.illu__schalter {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  font: inherit; color: inherit;
}
.illu__schalter span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.illu__info {
  position: absolute; inset: 0; z-index: 4;
  display: grid; align-content: center; gap: 0.6rem;
  padding: clamp(1.1rem, 3.5vw, 1.9rem);
  background: rgba(9, 6, 16, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #F2EEF8;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  pointer-events: none;
}
.illu:hover .illu__info,
.illu:focus-within .illu__info,
.illu.is-offen .illu__info { opacity: 1; visibility: visible; }

.illu__info h3 {
  margin: 0; font-size: 1.02rem; color: #fff;
  display: flex; align-items: center; gap: 0.5rem;
}
.illu__info h3 svg { width: 17px; height: 17px; flex: none; color: #C79BE0; }
.illu__info p {
  margin: 0; font-size: 0.88rem; line-height: 1.55;
  color: rgba(242, 238, 248, 0.86);
}
.illu__info p + p { margin-top: 0.5rem; }

/* Auf Geräten ohne Zeiger ein kleiner Wink, dass da etwas ist. */
@media (hover: none) {
  .illu__marke::after { content: '· antippen'; opacity: 0.75; font-weight: 400; }
}

.illu-hinweis {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.89rem; color: var(--muted);
}
.illu-hinweis svg { width: 17px; height: 17px; flex: none; margin-top: 0.15rem; color: var(--accent); }
.illu-hinweis strong { color: var(--text); }

/* =========================================================
   Öffnungsstatus
   ========================================================= */

.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.44rem 0.95rem 0.44rem 0.78rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface);
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
  font-size: 0.87rem; font-weight: 500; color: var(--muted);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.status strong { font-weight: 600; color: var(--text); }

.status--open { color: var(--text); border-color: rgba(74, 222, 128, 0.32); }
.status--open .status__dot {
  background: #4ADE80;
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}
.status--soon .status__dot { background: var(--amber); }

/* =========================================================
   Filialen
   ========================================================= */

.store { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding: 1.9rem; }
@media (min-width: 820px) {
  .store { grid-template-columns: 1.05fr 0.95fr; gap: 2.75rem; align-items: start; }
}
.store__name { margin-bottom: 0.9rem; }
.store__address { font-style: normal; color: var(--muted); margin-bottom: 1.25rem; }
.store__address a { color: var(--text); }
.store__intro { color: var(--muted); font-size: 0.97rem; margin-bottom: 1.5rem; }
.store__transit {
  font-size: 0.86rem; color: var(--faint);
  padding-top: 1rem; margin-top: 1.25rem; border-top: 1px solid var(--line);
}
.store__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.hours { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours caption {
  text-align: left; font-weight: 620; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 0.85rem;
}
.hours th, .hours td { padding: 0.52rem 0; text-align: left; font-weight: 400; vertical-align: top; }
.hours th { color: var(--muted); width: 8.5rem; font-weight: 400; }
.hours td { color: var(--text); font-variant-numeric: tabular-nums; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line); }
.hours .is-today th, .hours .is-today td { color: var(--text); font-weight: 640; }
.hours .is-today th::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 0.5rem; vertical-align: middle;
}
.hours .is-closed td { color: var(--faint); font-weight: 400; }

.store__note { font-size: 0.84rem; color: var(--faint); margin-top: 1rem; }

.store__special {
  margin-top: 1.25rem; padding: 0.9rem 1.1rem;
  background: var(--accent-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 0.89rem;
}
.store__special strong { color: var(--text); }

.map {
  width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
:root[data-theme='dark'] .map { filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.86); }

/* =========================================================
   Sortiment – die Kategorien gleich unter dem Titelbereich

   Der Auftritt: Die Karten kommen wie ein aufgefächertes Kartenspiel
   herein - leicht aus der Tiefe gekippt, versetzt, und richten sich
   beim Hereinscrollen auf. Beim Zeigen darauf hebt sich die Karte,
   das Symbol dreht sich leicht und ein Lichtstreif wandert darüber.

   Der ganze Block steht in einer eigenen Perspektive, sonst kippen
   die Karten flach statt räumlich.
   ========================================================= */

.kategorien { perspective: 1400px; perspective-origin: 50% 0%; }

.tile {
  position: relative;
  padding: 1.9rem;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease), border-color 0.3s ease, box-shadow 0.45s var(--ease);
}
.tile:hover {
  transform: translateY(-8px) rotateX(3deg);
  border-color: var(--line-2);
  box-shadow: var(--schatten);
}

/* Lichtstreif, der beim Zeigen einmal quer über die Karte läuft. */
.tile::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 35%,
              color-mix(in srgb, var(--brand) 22%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.tile:hover::before { transform: translateX(120%); }

.tile__icon {
  width: 30px; height: 30px; margin-bottom: 1.35rem;
  color: var(--accent);
  transition: transform 0.5s var(--ease), color 0.3s ease;
}
.tile:hover .tile__icon { transform: rotate(-8deg) scale(1.12); }

.tile__title { margin-bottom: 0.4rem; position: relative; }
.tile__subtitle { font-size: 0.875rem; color: var(--accent); margin-bottom: 0.9rem; font-weight: 500; }
.tile__text { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* Nummer der Karte, sehr zurückhaltend – gibt dem Raster Rhythmus. */
.tile__num {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: var(--faint); opacity: 0.55;
}

/* Das Auffächern beim Hereinscrollen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kategorien .tile {
      animation: auffaechern linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    @keyframes auffaechern {
      from {
        opacity: 0;
        transform: translateY(60px) rotateX(-14deg) scale(0.94);
      }
      to { opacity: 1; transform: none; }
    }
    /* Versetzt: jede zweite und dritte Karte kommt einen Tick später. */
    .kategorien .tile:nth-child(3n+2) { animation-range: entry 4% entry 66%; }
    .kategorien .tile:nth-child(3n+3) { animation-range: entry 8% entry 70%; }
  }
}

/* Browser ohne scroll-getriebene Animation: die JavaScript-Fassung
   übernimmt und fächert per Verzögerung auf. */
.no-scrolltimeline .kategorien .tile {
  opacity: 0;
  transform: translateY(50px) rotateX(-12deg) scale(0.95);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.no-scrolltimeline .kategorien .tile.is-in { opacity: 1; transform: none; }

/* =========================================================
   Zahlenleiste
   ========================================================= */

.usp { border-block: 1px solid var(--line); }
.usp__grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 12rem), 1fr));
}
.usp__item {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--line);
  text-align: center;
}
.usp__item:last-child { border-right: 0; }
@media (max-width: 640px) {
  .usp__item:nth-child(2n) { border-right: 0; }
  .usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.usp__num {
  display: block;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 680;
  letter-spacing: -0.035em; line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.usp__label { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 0.4rem; }

/* =========================================================
   Zweispaltiger Abschnitt (Begrüßung, Über uns)
   ========================================================= */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--breit { grid-template-columns: 1.15fr 0.85fr; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.split__badge {
  position: absolute; left: -0.75rem; bottom: -0.75rem;
  padding: 0.9rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--schatten);
  text-align: center;
}
.split__badge strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.split__badge span { display: block; font-size: 0.8rem; color: var(--muted); }

/* Leicht kippende Bildkachel – reagiert auf den Zeiger. */
.kipp { transition: transform 0.5s var(--ease); transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine) {
  .kipp:hover { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) scale(1.015); }
}

.link-pfeil {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--accent); font-weight: 600; text-decoration: none;
  margin-top: 0.5rem;
}
.link-pfeil::after {
  content: '→'; transition: transform 0.3s var(--ease);
}
.link-pfeil:hover::after { transform: translateX(4px); }

/* Hinweis zum Weiterscrollen unter dem Titelbereich */
.scrollhinweis {
  display: grid; place-items: center; gap: 0.5rem;
  margin-top: 3rem;
  color: var(--faint); font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none;
}
.scrollhinweis span {
  display: block; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--line-2), transparent);
  position: relative; overflow: hidden;
}
.scrollhinweis span::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  animation: tropfen 2.2s var(--ease) infinite;
}
@keyframes tropfen {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* =========================================================
   Aktionen
   ========================================================= */

.offer { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.6rem; }
.offer__badge {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.2rem; padding: 0.5rem 0.75rem;
  background: var(--accent-bg); border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: 0.84rem; font-weight: 680; color: var(--accent);
  white-space: nowrap;
}
.offer__title { font-size: 1.06rem; margin-bottom: 0.3rem; }
.offer__text { font-size: 0.93rem; color: var(--muted); margin: 0; }

/* =========================================================
   Marken – als langsam laufendes Band
   ========================================================= */

.marquee {
  --tempo: 38s;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 0.75rem; width: max-content;
  animation: laufen var(--tempo) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }

.brands { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.brands li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface);
  font-size: 0.94rem; color: var(--muted); white-space: nowrap;
}
.brands li b { color: var(--text); font-weight: 620; }
.brands li span { color: var(--accent); font-size: 0.79rem; }

/* =========================================================
   Beratungsfinder
   ========================================================= */

.finder { padding: clamp(1.5rem, 4vw, 2.75rem); }
.finder__step { display: none; }
.finder__step.is-active { display: block; animation: schritt-auf 0.4s var(--ease); }
@keyframes schritt-auf { from { opacity: 0; transform: translateY(14px); } }

.finder__count {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.75rem;
}
.finder__frage { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: 1.75rem; }

.finder__balken { height: 3px; background: var(--line); border-radius: 3px; margin-bottom: 2rem; overflow: hidden; }
.finder__balken i { display: block; height: 100%; background: var(--gradient); border-radius: 3px; transition: width 0.5s var(--ease); }

.optionen { display: grid; gap: 0.7rem; }
@media (min-width: 640px) { .optionen { grid-template-columns: 1fr 1fr; } }

.option {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.15rem 1.25rem; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit; color: var(--text); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--ease);
}
.option:hover { border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); }
.option__num {
  flex: none; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  font-size: 0.75rem; color: var(--muted);
}
.option b { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.option span { font-size: 0.87rem; color: var(--muted); }

.finder__ergebnis { text-align: left; }
.finder__treffer {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.5rem; margin: 1.5rem 0;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--accent-bg);
}
.finder__treffer svg { width: 26px; height: 26px; color: var(--accent); flex: none; margin-top: 0.2rem; }

/* =========================================================
   Geschmacksfinder
   ========================================================= */

.filterleiste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.chip {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.suche {
  width: 100%; max-width: 24rem;
  padding: 0.7rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; color: var(--text); font: inherit; font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.suche:focus { outline: none; border-color: var(--accent); }
.suche::placeholder { color: var(--faint); }

.liquids { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.liquid {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  animation: schritt-auf 0.35s var(--ease) backwards;
}
.liquid__name { font-weight: 600; margin: 0 0 0.15rem; }
.liquid__meta { font-size: 0.83rem; color: var(--faint); margin: 0; }
.liquid__profil {
  display: inline-block; margin-top: 0.55rem;
  padding: 0.1rem 0.55rem; border-radius: 100px;
  font-size: 0.74rem; font-weight: 600;
  background: var(--accent-bg); color: var(--accent);
}
.trefferzahl { font-size: 0.87rem; color: var(--faint); margin-bottom: 1rem; }

/* =========================================================
   Geschichte
   ========================================================= */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__item {
  display: grid; grid-template-columns: 1fr; gap: 0.4rem 2.5rem;
  padding-block: 2.2rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .timeline__item { grid-template-columns: 8.5rem 1fr; } }

.timeline__year {
  font-size: 0.95rem; font-weight: 680; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timeline__title { font-size: 1.3rem; margin-bottom: 0.5rem; }
.timeline__text { color: var(--muted); margin: 0; max-width: 60ch; }

/* Zahlen, die beim Sichtbarwerden hochzählen */
.zahl { font-size: clamp(2rem, 5vw, 3rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1; }
.zahl--neon {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================
   Zitat
   ========================================================= */

.quote {
  max-width: 34ch;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.3; letter-spacing: -0.035em; font-weight: 520;
  text-wrap: balance;
}
.quote em { font-style: normal; }

/* =========================================================
   Galerie mit Leuchtkasten
   ========================================================= */

.galerie { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.galerie__bild {
  position: relative; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3;
}
.galerie__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s ease;
}
.galerie__bild:hover img { transform: scale(1.06); }
.galerie__bild::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-sm);
}

dialog.lightbox {
  padding: 0; border: 0; background: transparent;
  max-width: min(94vw, 1100px); max-height: 92vh;
}
dialog.lightbox::backdrop { background: rgba(2, 1, 6, 0.86); backdrop-filter: blur(8px); }
dialog.lightbox img { border-radius: var(--radius); max-height: 88vh; width: auto; margin-inline: auto; }
.lightbox__zu {
  position: absolute; top: -3rem; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer; font-size: 1.1rem;
}

/* =========================================================
   Formular
   ========================================================= */

.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; gap: 1.3rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field__label { font-size: 0.9rem; font-weight: 550; }
.field__hint { font-size: 0.82rem; color: var(--faint); }

.field input[type='text'], .field input[type='email'], .field input[type='tel'],
.field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--text);
  font: inherit; font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 4px var(--accent-bg);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.choice { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.92rem; color: var(--muted); cursor: pointer; }
.choice input { margin-top: 0.28rem; accent-color: var(--accent); flex: none; width: 1rem; height: 1rem; }
.choice a { color: var(--text); }

/* =========================================================
   Schalterreihe statt Auswahlfeld

   Ein <select> öffnet auf dem iPhone das Systemrad und auf Android
   eine Systemliste - beides sieht nach Betriebssystem aus, nicht nach
   dieser Seite, und braucht zwei Handgriffe statt einem.

   Bei wenigen Möglichkeiten ist eine Reihe von Schaltern besser: alles
   auf einen Blick, ein Fingertipp, und es sieht überall gleich aus.
   Darunter liegen echte Radioknöpfe - Tastatur (Pfeiltasten),
   Vorlesehilfen und das Absenden funktionieren dadurch von selbst.
   ========================================================= */

.segment { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.segment__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* display:flex und flex:1 darunter sorgen dafür, dass alle Schalter
   einer Reihe gleich hoch sind – auch wenn nur bei manchen eine zweite
   Zeile steht. Sonst steht ein kürzerer Schalter niedriger als die
   anderen und die Reihe wirkt schief. */
.segment__option { position: relative; flex: 1 1 8rem; cursor: pointer; display: flex; }

/* Der Knopf bleibt bedienbar, ist aber nicht zu sehen - sichtbar ist
   das Feld daneben. Nicht display:none, sonst wäre er für die Tastatur
   und für Vorlesehilfen weg. */
.segment__option input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}

.segment__feld {
  flex: 1;
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.95rem; color: var(--text);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.segment__feld small { display: block; font-size: 0.79rem; color: var(--faint); }

/* Das Häkchen erscheint erst bei Auswahl – so springt nichts um. */
.segment__haken {
  flex: none; width: 1.1rem; height: 1.1rem;
  border: 1.5px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.segment__haken::after {
  content: ''; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: #fff; transform: scale(0);
  transition: transform 0.18s var(--ease);
}

.segment__option:hover .segment__feld { border-color: var(--accent); }
.segment__option input:checked + .segment__feld {
  border-color: var(--accent);
  background: var(--accent-bg);
  font-weight: 550;
}
.segment__option input:checked + .segment__feld .segment__haken {
  border-color: var(--accent); background: var(--accent);
}
.segment__option input:checked + .segment__feld .segment__haken::after { transform: scale(1); }
.segment__option input:focus-visible + .segment__feld {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.segment__option:active .segment__feld { transform: scale(0.985); }

/* Auf schmalen Bildschirmen steht jeder Schalter für sich.
   Nebeneinander bräuchte "Sophie-Charlotten-Str. 84" drei Zeilen, die
   Schalter würden unterschiedlich hoch und die Reihe schief. Untereinander
   ist die Fläche zum Antippen außerdem deutlich größer.
   (Muss nach der Grundregel stehen, sonst gewinnt deren flex-basis.) */
@media (max-width: 560px) {
  .segment__option { flex: 1 1 100%; }
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note {
  padding: 0.95rem 1.15rem; border-radius: var(--radius-sm);
  font-size: 0.92rem; border: 1px solid var(--line); background: var(--surface);
}
.form__note--error { border-color: rgba(248, 113, 113, 0.45); color: #FCA5A5; }
.form__note--ok { border-color: rgba(74, 222, 128, 0.45); color: #86EFAC; }
:root[data-theme='light'] .form__note--error { color: #B91C1C; }
:root[data-theme='light'] .form__note--ok { color: #15803D; }
.form__note[hidden] { display: none; }

/* =========================================================
   Kontaktkarten
   ========================================================= */

.contact-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.contact-card { padding: 1.5rem; }
.contact-card__label {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.6rem;
}
.contact-card__value { font-size: 1.06rem; font-weight: 500; }
.contact-card__value a { text-decoration: none; }
.contact-card__value a:hover { color: var(--accent); }

/* =========================================================
   Fußleiste für unterwegs
   ========================================================= */

.dock {
  position: fixed; inset: auto 0 0; z-index: 90;
  display: none;
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
  border-top: 1px solid var(--line);
}
.dock__inner { display: flex; gap: 0.4rem; }
.dock a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.45rem 0.3rem; border-radius: 12px;
  font-size: 0.7rem; color: var(--muted); text-decoration: none;
}
.dock a svg { width: 19px; height: 19px; }
.dock a:active { background: var(--accent-bg); color: var(--accent); }
.dock .dock--cta { color: var(--accent); font-weight: 600; }

@media (max-width: 780px) {
  .dock { display: block; }
  body { padding-bottom: 4.5rem; }
}

/* =========================================================
   Fußzeile
   ========================================================= */

.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  font-size: 0.92rem;
}
.footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-bottom: 3rem;
}
.footer__title {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__list a { color: var(--muted); text-decoration: none; }
.footer__list a:hover { color: var(--text); }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.86rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a { color: var(--faint); text-decoration: none; }
.footer__legal a:hover { color: var(--text); }

.agehint {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.8rem; color: var(--muted);
}
.agehint b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  font-size: 0.71rem; font-weight: 700;
}

/* =========================================================
   Neuigkeiten und Rechtstexte
   ========================================================= */

.news__item { padding-block: 1.85rem; border-top: 1px solid var(--line); }
.news__item:last-child { border-bottom: 1px solid var(--line); }
.news__date { font-size: 0.82rem; color: var(--faint); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.news__title { font-size: 1.18rem; margin-bottom: 0.5rem; }
.news__body { color: var(--muted); margin: 0; max-width: 62ch; white-space: pre-line; }

.legal { max-width: var(--narrow); }
.legal h2 { font-size: 1.45rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--text); }

/* =========================================================
   Kleinteile
   ========================================================= */

.zumanfang {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer;
  backdrop-filter: var(--glas); -webkit-backdrop-filter: var(--glas);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}
.zumanfang.is-in { opacity: 1; pointer-events: auto; }
.zumanfang:hover { transform: translateY(-3px); border-color: var(--accent); }
@media (max-width: 780px) { .zumanfang { bottom: 5.25rem; } }

/* Sanfte Seitenwechsel, wo der Browser es kann. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-raus 0.22s var(--ease) both; }
::view-transition-new(root) { animation: vt-rein 0.32s var(--ease) both; }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(10px); } }

@media print {
  .aurora, .korn, .header, .dock, .zumanfang, .fortschritt, .noticebar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Das freigestellte Logo ist schwarz – im dunklen Thema muss es
   umgekehrt werden, sonst verschwindet es im Hintergrund. */
:root[data-theme='dark'] .fuss-logo { filter: invert(1) hue-rotate(180deg) saturate(1.15); }

/* =========================================================
   Jugendschutz-Zeichen in der Kopfzeile

   Rundes Schild in Anlehnung an ein Verkehrszeichen: roter Ring,
   heller Grund, "18" in der Mitte. So kennt man es von
   Zigarettenautomaten - man erkennt es, ohne zu lesen.

   Es steht oben rechts, weil die Altersgrenze bei diesem Sortiment
   keine Fußnote ist. Ein Klick führt zum Abschnitt Jugendschutz
   im Impressum.
   ========================================================= */

.ab18 {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.ab18:hover { transform: scale(1.08); }
.ab18 svg { width: 100%; height: 100%; display: block; }

/* Ring und Schrift in kräftigem Rot, Fläche in der Grundfarbe der
   Seite - so wirkt es im hellen wie im dunklen Thema als Schild und
   nicht als aufgeklebter Punkt. */
.ab18__ring { fill: none; stroke: #D32F2F; stroke-width: 11; }
.ab18__grund { fill: var(--surface-2); }
.ab18__zahl { fill: #D32F2F; font-weight: 800; font-family: var(--font); }

:root[data-theme='dark'] .ab18__ring { stroke: #F05252; }
:root[data-theme='dark'] .ab18__zahl { fill: #F05252; }
:root[data-theme='dark'] .ab18__grund { fill: #17131F; }

@media (max-width: 400px) {
  /* Auf sehr schmalen Geräten steht das Schild ganz für sich,
     der Themenumschalter tritt zurück. */
  .ab18 { width: 34px; height: 34px; }
}

/* =========================================================
   Bauform im Beratungsergebnis

   Eine Schemazeichnung neben dem Text: Sie zeigt die Bauform, damit
   man sich etwas darunter vorstellen kann. Bewusst gezeichnet und
   nicht fotografiert - hier wird eine Bauart empfohlen, kein Modell.
   Der Hinweis unter der Zeichnung sagt das auch ausdrücklich.
   ========================================================= */

.bauform {
  display: grid; gap: 1.5rem; align-items: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 560px) {
  .bauform { grid-template-columns: 9.5rem 1fr; gap: 2rem; }
}

.bauform__bild {
  margin: 0; padding: 1.25rem 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--text);
}
.bauform__svg {
  width: 100%; max-width: 7.5rem; height: auto;
  margin-inline: auto;
  animation: bauform-auf 0.6s var(--ease) both;
}
@keyframes bauform-auf {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}

/* Das eine farbige Element: der Auslöser. Gibt der Zeichnung einen
   Blickfang, ohne sie bunt zu machen. */
.bauform__knopf { fill: var(--accent); }

.bauform__text {
  fill: var(--faint);
  font-size: 8px; font-family: var(--font);
  letter-spacing: 0.02em;
}

.bauform__hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.72rem; color: var(--faint);
  line-height: 1.35;
}