/* ==========================================================================
   TABACON – Einzelunternehmer · Design System
   Basis: Screendesigns TCN-26-06/08-914 · Wireframes v01 (Source of Truth)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --red: #ff0000;
  /* Buttons bleiben siteweit rot, auch in eingefärbten Bereichen */
  --brand-red: #ff0000;
  --brand-red-dark: #cc0000;
  /* Tabakwaren-Bereich */
  --brown: #9C7E66;
  --brown-dark: #82664F;
  --red-dark: #cc0000;
  --red-soft: #FDE8E9;
  --navy: #1E2A47;
  --navy-deep: #16203A;
  --navy-soft: #24314F;
  --slate: #64748B;
  --ink: #1E2A47;
  --text: #4C5568;
  --muted: #7A8296;
  --bg: #FFFFFF;
  --bg-soft: #F2F3F5;
  --bg-gray: #E8EAED;
  --border: #E2E5EA;
  --border-dark: rgba(255, 255, 255, .14);

  /* Typo */
  --nav-schrift: .875rem;   /* Kopfzeile und Aufklappmenü */
  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Sora', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.3rem, 4.4vw, 3.6rem);
  --fs-h1: clamp(2rem, 3.4vw, 3rem);
  --fs-h2: clamp(1.55rem, 2.5vw, 2.2rem);
  --fs-h3: 1.125rem;
  --fs-lead: clamp(1.02rem, 1.2vw, 1.14rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .76rem;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 32px);
  --section: clamp(4.25rem, 8vw, 7.25rem);
  --radius: 10px;
  --radius-sm: 6px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 14px 34px -18px rgba(30, 42, 71, .28);
  --shadow-header: 0 8px 30px -18px rgba(30, 42, 71, .35);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .btn-round, .btn-round span { transition: none; } html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--red); text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.35; }

.accent { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 6px;
  font-size: var(--fs-small); font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ---------- Container / Section ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section); position: relative; }
.section--soft { background: var(--bg-soft); }
.section--gray { background: var(--bg-gray); }
.section--navy { background: var(--navy); }
.section--red { background: var(--red); }
.section--flush { padding-block: 0; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 4.75rem); }

.section--navy, .section--red { color: rgba(255, 255, 255, .82); }
.section--navy h2, .section--navy h3, .section--red h2, .section--red h3 { color: #fff; }

/* Section-Kopf */
.section-head { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-lead); }
.section-head > :last-child { margin-bottom: 0; }

/* Label (Eyebrow) – roter Strich + Versalien */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 1.1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
}
.label::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.section--navy .label, .section--red .label, .on-dark .label,
.hero--red .label, .hero--navy .label, .cta-block .label,
.split--red .label, .split--navy .label { color: #fff; }

.lead { font-size: var(--fs-lead); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 17px; height: 17px; }

.btn--primary { background: var(--brand-red); color: #fff; }
.btn--primary:hover { background: var(--brand-red-dark); box-shadow: 0 12px 24px -12px rgba(255, 0, 0, .55); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); box-shadow: 0 12px 24px -12px rgba(30, 42, 71, .55); }

.btn--outline { border-color: var(--border); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--navy); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn--lg { padding: 16px 32px; font-size: .95rem; }

/* Text-Link mit Pfeil (tertiärer CTA) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .875rem; font-weight: 600; color: var(--red);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }
.link-arrow--light { color: #fff; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.9rem; }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Icons stehen frei – ohne Kreis, linksbündig zur Textkante */
.icon-badge {
  display: flex; justify-content: flex-start; align-items: center;
  width: auto; height: auto; min-width: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--red);
  margin: 0 0 1.1rem; padding: 0;
}
.icon-badge .icon { display: block; width: 44px; height: 44px; margin: 0 auto 0 0; }
.icon-badge--fill { color: var(--red); }
/* Gefüllte Symbole wie das Signet: Fläche statt Kontur */
.icon--fill { fill: currentColor; stroke: none; }
/* Icons als eigene SVG-Datei: Seitenverhältnis bleibt erhalten,
   Farbe kommt aus der Datei (Tabacon-Rot) */
.icon-img { object-fit: contain; }
.icon-badge--dark { color: #fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Gesetzliche Firmenbezeichnung, dezent oberhalb der Navigation – auf
   Wunsch der Geschäftsführung. Läuft mit der Seite mit (nicht sticky) und
   verschwindet dadurch unter dem Header, sobald man zu scrollen beginnt. */
.legal-strip {
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
  padding: 6px var(--gutter);
  margin: 0;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-header); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 96px;
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .header-inner { height: 78px; }

/* Logo (offizielles SVG: rote Wortmarke + Unterzeile) */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 50px; width: auto; transition: height .3s var(--ease); }
.site-header.is-scrolled .logo img { height: 44px; }
.footer-brand .logo { gap: 16px; }
.footer-brand .logo img { height: 52px; }
/* Signet vor der Wortmarke im Footer */
.logo-signet--footer { width: 52px; height: 52px; flex: none; color: var(--red); }

/* Wortmarke ⇄ Signet -------------------------------------------------------
   Beide liegen in derselben Rasterzelle. Im Ruhezustand ist die Wortmarke zu
   sehen; sobald der Header schrumpft, wandert sie nach links aus dem Rahmen
   und das Signet fährt an ihre Position. Die Box schrumpft mit, damit die
   Navigation nachrückt. */
.logo-stack {
  display: grid; align-items: center; justify-items: start;
  width: 174px; height: 60px; overflow: hidden;
  transition: width .34s var(--ease), height .3s var(--ease);
}
.logo-wort, .logo-signet {
  grid-area: 1 / 1;
  transition: opacity .5s var(--ease), transform .75s var(--ease);
}
/* Das Signet wartet rechts außerhalb und fährt von dort herein */
.logo-signet {
  width: 56px; height: 56px; color: var(--red);
  opacity: 0; transform: translateX(72px);
}
/* Höhe bleibt bei 66px – die Box schneidet sonst oben und unten
   ins Signet, weil sie überstehende Inhalte kappt */
.site-header.is-scrolled .logo-stack { width: 62px; height: 56px; }
.site-header.is-scrolled .logo-wort { opacity: 0; transform: translateX(-30px); }
.site-header.is-scrolled .logo-signet { opacity: 1; transform: none; transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .logo-stack, .logo-wort, .logo-signet { transition: none; }
}

/* Hauptnavigation */
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 12px; white-space: nowrap;   /* „Über tabacon“ bleibt einzeilig */
  /* --nav-schrift gilt für Kopfzeile und Untermenü gleichermaßen */
  font-size: var(--nav-schrift); font-weight: 400; color: var(--navy);
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.main-nav > li > a .icon {
  width: 13px; height: 13px; transition: transform .25s var(--ease);
  padding: 10px; box-sizing: content-box; margin: -10px -6px;  /* Tippfläche für Touch */
}
.main-nav > li > a:hover, .main-nav > li.is-active > a { color: var(--red); }
/* Der geöffnete Punkt bekommt eine helle Fläche, damit klar ist, wozu das
   aufgeklappte Feld gehört. */
.main-nav > li.has-mega:hover > a,
.main-nav > li.has-mega:focus-within > a { background: var(--bg-soft); color: var(--navy); }
.main-nav > li.nav-kamel.has-mega:hover > a { color: var(--brown-dark); }
.main-nav > li.is-active > a { font-weight: 700; }
.main-nav > li.is-open > a .icon { transform: rotate(180deg); }

/* Dropdown */
.subnav {
  position: absolute; top: calc(100% + 10px); left: 50%;
  translate: -50% 0;
  min-width: 250px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 50px -22px rgba(30, 42, 71, .4);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.main-nav > li:hover .subnav,
.main-nav > li:focus-within .subnav,
.main-nav > li.is-open .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block; padding: 10px 14px; border-radius: 6px;
  font-size: .84rem; font-weight: 500; color: var(--navy); white-space: nowrap;
}
.subnav a:hover { background: var(--bg-soft); color: var(--red); }
/* Punkte ohne Ziel stehen in derselben Farbe wie die übrigen – sie sollen
   gleichwertig lesbar sein. Sie reagieren nur nicht auf Zeigen und Klicken. */
.subnav a:not([href]), .mega-col a:not([href]) { cursor: default; }
.subnav a:not([href]):hover, .mega-col a:not([href]):hover { background: none; }

/* --------------------------------------------------------------------------
   Megamenü
   Breites Panel über die volle Kopfbreite, innen Spalten mit Überschrift und
   Unterpunkten. Das <li> gibt seine Positionierung ab (position: static),
   damit sich das Panel am Header ausrichtet und nicht am Menüpunkt.
   -------------------------------------------------------------------------- */
.main-nav > li.has-mega { position: static; }
/* Bezugsrahmen ist die Kopfzeile selbst, nicht der ganze Header. Sonst öffnet
   sich das Feld unterhalb der Warengruppen-Leiste (.pnav) und schiebt sie
   optisch weg – es soll sie stattdessen überdecken. */
.header-inner { position: relative; }
.megamenu {
  position: absolute; top: 100%; left: 50%; z-index: 20;
  /* Feld nur so breit wie sein Inhalt, nicht über die ganze Bildschirmbreite.
     --gutter als Sicherheitsabstand zum Viewport-Rand. */
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  /* Leicht transparent (93%): Der Seiteninhalt schimmert dezent durch. */
  background: rgba(242, 243, 245, .93);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 26px 46px -26px rgba(30, 42, 71, .38);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.main-nav > li.has-mega:hover .megamenu,
.main-nav > li.has-mega:focus-within .megamenu,
.main-nav > li.has-mega.is-open .megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Feste Spaltenzahl statt auto-fit: Die Spalten stehen dadurch auf allen
   Panels an denselben Stellen, egal wie viele Einträge sie haben. */
.mega-inner {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  justify-content: start;
  gap: 28px;
  padding: 22px var(--gutter) 26px;
  align-items: start;
}
/* Feste Breite statt „so breit wie der längste Eintrag“: sonst zieht ein
   einzelner langer Link (z. B. „Erfrischung, Energy, Säfte“) seine Spalte
   breiter als die Nachbarn und die nächste Spaltenüberschrift rückt
   sichtbar weiter weg. Mit fester Breite stehen alle Spaltenköpfe im
   selben Abstand zueinander, längere Einträge brechen stattdessen um. */
.mega-col { min-width: 0; width: 170px; }

/* Gruppenüberschrift: kleines, ruhiges Label über den Einträgen – nicht
   umgekehrt. Vorher war die Überschrift größer und dunkler als die Links
   darunter, dadurch wirkte das Panel unsortiert.
   Die feste Mindesthöhe hält alle Listen auf einer Linie, auch wenn ein
   Label wie „Vapes und neue Nikotinprodukte“ zweizeilig umbricht. */
.mega-col > .mega-head {
  display: block; margin-bottom: 14px;
  min-height: 2.2em;
  font-size: .7rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  max-width: 20ch;
}
.mega-col > .mega-head[href]:hover { color: var(--red); }
/* Hauptpunkt ganz ohne Unterpunkte (z. B. „Raucherbedarf“, „Süßwaren“):
   bündig oben mit den übrigen Spalten, wie eine Liste mit nur einem
   Eintrag – keine Sonderausrichtung mehr, damit alle Spaltenköpfe auf
   derselben Linie beginnen. */
/* Eine Spalte kann zwei Warengruppen tragen: die zweite hängt unter der
   Liste der ersten und bekommt oben Abstand, damit die Zuordnung klar bleibt.
   Der ersten Überschrift bleibt ihre Mindesthöhe, damit alle Spalten des
   Panels auf einer Linie beginnen. */
.mega-col--stapel > .mega-head + .mega-head,
.mega-col--stapel > ul + .mega-head {
  min-height: 0; margin-top: 34px; margin-bottom: 14px;
}

.mega-col ul { display: grid; gap: 2px; }
/* Gleiche Breitenbegrenzung wie der Spaltenkopf (20ch): ein einzelner
   langer Eintrag (z. B. „Erfrischung, Energy, Säfte“) soll die Spalte
   nicht breiter machen als ihre Nachbarn – sonst rückt die nächste
   Spalte spürbar weiter weg. Lieber bricht der Eintrag um. */
.mega-col ul a {
  display: block; padding: 6px 0;
  font-size: var(--nav-schrift); line-height: 1.4; color: var(--navy);
  max-width: 20ch;
  transition: color .2s var(--ease);
}
.mega-col ul a[href]:hover { color: var(--red); }

/* Tabakwaren-Spalte im Sortiment-Menü: bleibt gold/braun (--brown) statt
   des roten Hovers der übrigen Spalten – passend zum bestehenden
   Tabakwaren-Akzent (siehe --brown, .theme-tabak). */
.mega-col--tabak > .mega-head[href]:hover,
.mega-col--tabak ul a[href]:hover { color: var(--brown); }

/* Einleitungsspalte im Mega-Menü (z. B. „Für Unternehmer“): eigener
   Kasten links neben den Spalten, siehe NAV_INTRO in build.py. */
.mega-col--intro {
  width: 230px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.mega-col--intro h3 {
  margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.3; color: var(--navy);
}
.mega-col--intro p {
  margin: 0; font-size: .82rem; line-height: 1.55; color: var(--muted);
}
.mega-col--intro .link-arrow { margin-top: 2px; }

/* Die schlichte Einzelliste (z. B. „Kontakt“) hat keine Nachbarspalte,
   an der sie sich ausrichten müsste – sie bleibt so breit wie ihr
   Inhalt, statt die feste Spaltenbreite zu übernehmen. */
.mega-col--schlicht { width: auto; }


/* Panels mit nur einer Spalte (bisher nur „Kontakt“) hängen direkt unter
   ihrem eigenen Menüpunkt, statt über die volle Kopfzeile zentriert zu
   sein. WICHTIG: Das <li> bekommt bewusst KEIN eigenes position:relative
   (bleibt wie jeder andere Mega-Punkt bei position:static) – sonst würde
   das Panel (top:100%) an der kleinen Höhe des Links selbst hängen statt
   an der ganzen, viel höheren Kopfzeile wie bei den übrigen Menüs, und
   es entstünde eine sichtbare Lücke zwischen weißer Kopfzeile und Panel.
   Bezugsrahmen bleibt also .header-inner (siehe oben) – vertikal hängt
   „Kontakt“ dadurch exakt so bündig wie alle anderen Menüs. Die
   waagerechte Position lässt sich bei diesem Bezugsrahmen nicht mehr rein
   per CSS auf den Menüpunkt ausrichten (der liegt irgendwo weiter rechts
   in der Kopfzeile) – das übernimmt main.js mit einer kurzen Messung
   (siehe „Kontakt-Menü“ dort), die das exakte left in Pixeln setzt. */
.megamenu--schmal {
  left: 0; right: auto;
  min-width: 270px; width: max-content; max-width: 340px;
  /* Runde Ecken exakt wie .megamenu (16px, nicht die kleineren 10px von
     var(--radius)/.subnav) – sonst wirkt die Karte im direkten Vergleich
     mit den breiten Menüs (Sortiment, Für Unternehmer, Über tabacon)
     trotzdem leicht "anders gerundet". */
  border: 1px solid var(--border); border-radius: 16px;
  transform: translateY(8px);
}
.main-nav > li.has-mega:hover .megamenu--schmal,
.main-nav > li.has-mega:focus-within .megamenu--schmal,
.main-nav > li.has-mega.is-open .megamenu--schmal { transform: translateY(0); }
.megamenu--schmal .mega-inner {
  grid-template-columns: minmax(0, 1fr);
  padding: 20px 22px 24px;
}

@media (max-width: 1100px) {
  .mega-inner { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
                grid-auto-columns: auto; gap: 24px 26px; }
  .mega-col ul a { white-space: normal; }
}

/* „Über tabacon“ in Kamel hervorgehoben */
.main-nav > li.nav-kamel > a,
.main-nav > li.nav-kamel.is-active > a { color: var(--brown); font-weight: 600; }
.main-nav > li.nav-kamel > a:hover { color: var(--brown-dark); }
.mobile-nav > a.single.nav-kamel { color: var(--brown); }
/* Gilt auch, wenn der Punkt ein Untermenü hat (aktuell „Über tabacon“) –
   die Klasse landet dann auf dem <details>, nicht auf einem <a>. */
.mobile-nav details.nav-kamel > summary { color: var(--brown); }

.header-actions { display: flex; align-items: center; gap: 8px; }
/* Kleiner als früher (war 11/20 bei .8rem): Die Kopfzeile wurde sonst so breit,
   dass die Navigation umbrach und „Über tabacon“ in die zweite Zeile rutschte. */
.header-actions .btn { padding: 9px 14px; font-size: .76rem; }
.header-actions .btn .icon { width: 15px; height: 15px; }

/* Zugang zum Bestellportal: Reiter am rechten Rand, bleibt beim Scrollen
   stehen. Rote Fläche mit feiner weißer Kontur, Zeichen und Schrift weiß;
   beim Zeigen dreht sich das um.
   Die Beschriftung läuft von unten nach oben: vertical-rl schreibt von oben
   nach unten, die halbe Drehung kehrt die Leserichtung um. Damit die Reihen-
   folge stimmt, steht das Zeichen deshalb unten im Kasten – column-reverse. */
.shop-reiter {
  position: fixed; right: 0; top: 50%; z-index: 95;
  transform: translateY(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
  padding: 18px 11px;
  background: var(--red); color: #fff;
  border: 1px solid #fff; border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: 0 14px 34px -18px rgba(30, 42, 71, .35);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  transition: background .25s var(--ease), color .25s var(--ease),
              padding-right .25s var(--ease);
}
.shop-reiter span {
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg);
}
.shop-reiter .icon { width: 18px; height: 18px; color: #fff; transition: color .25s var(--ease); }
.shop-reiter:hover { background: #fff; color: var(--red); border-color: var(--red); padding-right: 17px; }
.shop-reiter:hover .icon { color: var(--red); }
@media (max-width: 900px) {
  .shop-reiter { display: none; }   /* auf kleinen Schirmen zu aufdringlich */
}

/* Burger */
.nav-toggle {
  display: none;
  width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; place-items: center;
}
.nav-toggle .icon { width: 22px; height: 22px; color: var(--navy); }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-burger { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

/* Mobile Panel */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; top: var(--header-h, 70px); z-index: 90;
  background: #fff; overflow-y: auto;
  padding: 20px var(--gutter) 48px;
}
body.nav-open .mobile-nav { display: block; }
body.nav-open { overflow: hidden; }
.mobile-nav details { border-bottom: 1px solid var(--border); }
.mobile-nav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 4px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--navy); font-size: 1rem;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary a { flex: 1; color: inherit; }        /* Name führt zur Übersicht */
.mobile-nav summary .icon {
  width: 16px; height: 16px; transition: transform .25s;
  padding: 8px; box-sizing: content-box; margin: -8px;    /* größere Tippfläche zum Aufklappen */
}
.mobile-nav details[open] summary .icon { transform: rotate(180deg); }
.mobile-nav .subpages { padding: 2px 4px 16px; display: grid; gap: 2px; }
.mobile-nav .subpages a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text); font-size: .92rem; }
.mobile-nav .subpages a:hover { background: var(--bg-soft); color: var(--red); }
/* Gleiche Tabakwaren-Ausnahme wie im Desktop-Megamenü: gold/braun statt rot. */
.mobile-nav .ebene-2--tabak > .subpages a:hover { color: var(--brown); }
/* Dritte Ebene: eingerückt, ohne eigene Trennlinie, damit die Gliederung
   ruhig bleibt. Punkte ohne Ziel sind grau statt schwarz. */
.mobile-nav .ebene-2 { border-bottom: 0; }
.mobile-nav .ebene-2 > summary { padding: 9px 12px; font-weight: 500; font-size: .92rem; color: var(--text); }
.mobile-nav .ebene-2 > .subpages { padding: 0 0 8px 14px; border-left: 2px solid var(--border); margin-left: 12px; }
.mobile-nav a:not([href]):hover { background: none; }
.mobile-nav > a.single {
  display: block; padding: 17px 4px; border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--navy); font-size: 1rem;
}
.mobile-nav .mobile-cta { display: grid; gap: 12px; margin-top: 26px; }

/* ==========================================================================
   HERO-VARIANTEN
   ========================================================================== */

/* Basis: full-bleed Grid, Copy links im Container-Raster, Media bis zum Rand */
.hero { position: relative; overflow: hidden; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  min-height: clamp(480px, 58vh, 640px);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  padding-right: clamp(2rem, 5vw, 5rem);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
/* Hero: kräftigere Überschrift, ruhigerer Fließtext – mehr Kontrast im
   ersten Bildschirm */
.hero-copy h1 {
  max-width: 13em;
  font-size: var(--fs-display);
  letter-spacing: -.03em;
  line-height: 1.06;
}
.hero-copy .lead {
  max-width: 30em;
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  opacity: 0;
}
.hero-media { position: relative; min-height: 340px; }
.hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Roter Hero (Referenz: Unternehmer-Screendesign) */
.hero--red { background: var(--red); color: rgba(255, 255, 255, .92); }
.hero--red h1 { color: #fff; }
.hero--red h1 .accent-line { color: var(--navy); }

/* Navy Hero */
.hero--navy { background: var(--navy); color: rgba(255, 255, 255, .85); }
.hero--navy h1 { color: #fff; }
.hero--navy h1 .accent-line { color: var(--red); }
.hero--navy .hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(30, 42, 71, .5) 24%, transparent 58%);
}

/* Weißer Split-Hero (Referenz: Kiosk-Startseite) */
.hero--light { background: #fff; }
.hero--light h1 .accent-line { color: var(--red); }
.hero--light .hero-media { padding: 0; }

/* Bild-Hero mit dunklem Overlay (z. B. Kiosk-Landingpage): das Bild sitzt
   NICHT mehr randlos hinter der ganzen Section, sondern eingefasst im
   normalen .container – links/rechts bleibt dadurch Weißraum (die Section
   behält ihren normalen Hintergrund), das Bild selbst ist zentriert und
   endet an der üblichen Inhaltsbreite. */
.hero--image .container {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero--image .container::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(22, 32, 58, .68);
}
.hero--image .hero-center-inner { position: relative; z-index: 2; }
.hero--image h1 { color: #fff; }
.hero--image .lead { color: rgba(255, 255, 255, .88); }

/* Zentrierter, ruhiger Hero (z. B. Kontakt) */
.hero--center { background: var(--bg-soft); }
/* Heller Zentral-Hero ohne Grauton – für Seiten, bei denen direkt
   darunter eine section--soft folgt */
.hero--flat { background: #fff; }
.hero--center .hero-center-inner {
  max-width: 780px; margin-inline: auto; text-align: center;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.hero--center .label { justify-content: center; }
.hero--center .cta-row { justify-content: center; }

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 1.4rem;
  font-size: .78rem; font-weight: 500; color: var(--muted);
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .icon { width: 12px; height: 12px; color: var(--muted); }
.hero--red .breadcrumb, .hero--red .breadcrumb a, .hero--red .breadcrumb .icon,
.hero--navy .breadcrumb, .hero--navy .breadcrumb a, .hero--navy .breadcrumb .icon { color: rgba(255, 255, 255, .65); }
.hero--red .breadcrumb a:hover, .hero--navy .breadcrumb a:hover { color: #fff; }

/* ==========================================================================
   INTRO-VIDEO (Startseite, über dem Hero)
   Bildschirmfüllend. Das Video ist 1920×650 und damit deutlich breiter als
   ein Bildschirm – object-fit: cover schneidet deshalb links und rechts an.
   Wer stattdessen das komplette Bild sehen will, ersetzt bei .video-hero
   die Höhe durch  aspect-ratio: 1920 / 650;  und entfernt height/min-height.
   ========================================================================== */
.video-hero {
  position: relative;
  /* füllt den Bildschirm unterhalb des Headers – der Header ist weiß und
     würde sonst als Balken über dem Video liegen */
  height: calc(100vh - var(--header-h, 86px)); min-height: 480px;
  overflow: hidden;
  display: grid; align-items: center;
  background: var(--navy-deep);
}
.vh-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Abdunklung, damit die weiße Schrift auf jedem Bildinhalt lesbar bleibt */
.vh-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 15, 28, 0.291) 0%, rgba(10, 15, 28, 0.273) 45%, rgba(10, 15, 28, .25) 100%);
}
/* Linker Anschlag exakt wie .hero-copy – dort wird mit 100vw gerechnet,
   .container dagegen mit der Inhaltsbreite ohne Scrollbalken. Genau diese
   paar Pixel Unterschied ließen den Videotext gegenüber der H1 verspringen. */
.vh-inner {
  position: relative; z-index: 2; display: grid;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right: clamp(2rem, 5vw, 5rem);
}
.vh-line {
  grid-area: 1 / 1;                     /* alle Blöcke an derselben Stelle */
  margin: 0; max-width: 13em;
  /* exakt die Hero-Überschrift: gleiche Größe, Stärke und Laufweite */
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: #fff;
}
/* Aufbau Wort für Wort: Jedes Wort startet um --i * 90 ms später als das
   vorige, --start legt fest, wann der jeweilige Block im Videodurchlauf an
   die Reihe kommt. Ein Zyklus = Videolänge (25,75 s). */
.vh-word {
  display: inline-block;
  opacity: 0;
  /* weiche Expo-Kurve: schneller Beginn, langes Ausklingen – die Wörter
     wirken dadurch eher fließend als geschaltet */
  animation: vh-word 25.75s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: calc(var(--start, 0s) + var(--i, 0) * 130ms);
  will-change: opacity, transform, filter;
}
/* Kommen und Gehen sind spiegelbildlich: 1,4 s in jede Richtung, aus
   Unschärfe und leichter Übergröße heraus. Die längere Dauer und der
   weiche Verlauf lassen den Text fließen statt einzublenden. */
@keyframes vh-word {
  0%     { opacity: 0; transform: translateY(26px) scale(1.06); filter: blur(14px); }
  5.5%   { opacity: 1; transform: none;                         filter: blur(0); }
  22%    { opacity: 1; transform: none;                         filter: blur(0); }
  27.5%  { opacity: 0; transform: translateY(-26px) scale(.97); filter: blur(14px); }
  100%   { opacity: 0; transform: translateY(26px) scale(1.06); filter: blur(14px); }
}

@media (max-width: 720px) {
  .video-hero { height: 78vh; min-height: 420px; }
  /* am Handy nur noch eine Ahnung von Abdunklung – gerade genug,
     damit die weiße Schrift lesbar bleibt */
  .vh-scrim { background: linear-gradient(180deg, rgba(10, 15, 28, .18) 0%, rgba(10, 15, 28, .3) 100%); }
  .vh-line { max-width: none; }
}

/* Ohne Bewegungswunsch: nur der erste Textblock steht ruhig da; das Video
   pausiert main.js zusätzlich auf dem ersten Bild */
@media (prefers-reduced-motion: reduce) {
  .vh-word { animation: none; opacity: 0; transform: none; filter: none; }
  .vh-line:nth-child(1) .vh-word { opacity: 1; }
}

/* ==========================================================================
   BILD-SLOTS (Platzhalter für finale Tabacon-Fotografie)
   ========================================================================== */
.img-slot {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .06), transparent 45%),
    linear-gradient(145deg, #26334F 0%, #1A2440 100%);
  color: rgba(255, 255, 255, .75);
  min-height: 220px;
}
.img-slot::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px dashed rgba(255, 255, 255, .28); border-radius: 6px;
  pointer-events: none;
}
.img-slot .slot-inner { text-align: center; padding: 24px; position: relative; z-index: 1; }
.img-slot .icon { width: 30px; height: 30px; margin-inline: auto; margin-bottom: 12px; color: rgba(255, 255, 255, .55); }
.img-slot .slot-title {
  display: block; font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.img-slot .slot-desc { display: block; margin-top: 6px; font-size: .78rem; color: rgba(255, 255, 255, .6); max-width: 30ch; }
/* Echte Fotos in Slots: füllen die Fläche, Zuschnitt zentriert */
.img-slot img, .hero-media img, .split-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.img-slot:has(img)::after { display: none; }

/* Bildwechsel im Hero: Bilder liegen übereinander, das aktive ist sichtbar
   und zoomt über seine Standzeit ganz leicht heran */
.img-slot--slideshow img {
  opacity: 0; transform: scale(1);
  transition: opacity 1.6s var(--ease), transform 8s linear;
}
.img-slot--slideshow img.is-active { opacity: 1; transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .img-slot--slideshow img { transition: none; transform: none; }
  .img-slot--slideshow img.is-active { transform: none; }
}
.img-slot--ratio-43 { aspect-ratio: 4 / 3; }
.img-slot--ratio-32 { aspect-ratio: 3 / 2; }
.img-slot--ratio-169 { aspect-ratio: 16 / 9; }
.img-slot--ratio-34 { aspect-ratio: 3 / 4; }
.img-slot--band { aspect-ratio: unset; min-height: clamp(260px, 38vw, 430px); }
.img-slot--light {
  background: linear-gradient(145deg, #EDEFF2 0%, #E1E4E9 100%);
  color: var(--muted);
}
.img-slot--light::after { border-color: rgba(30, 42, 71, .22); }
.img-slot--light .icon { color: var(--muted); }
.img-slot--light .slot-title { color: var(--navy); }
.img-slot--light .slot-desc { color: var(--muted); }
.rounded { border-radius: var(--radius); }

/* ==========================================================================
   KARTEN & GRIDS
   ========================================================================== */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card h3 { margin-bottom: .4em; }
.card p { font-size: .92rem; margin-bottom: 0; }
.card p + .link-arrow { margin-top: 14px; }
a.card { display: block; color: inherit; }
.card:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #D2D7DF; }

/* Komplett klickbare Karte: Der Titel-Link legt sich unsichtbar über die
   ganze Kachel. Der runde Button bleibt sichtbar, ist aber nur noch Optik
   (aria-hidden), damit Screenreader den Link nicht doppelt vorlesen. */
.card--clickable .card-link { color: inherit; }
.card--clickable .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card--clickable .card-link:hover { color: var(--red); }
.card--clickable:has(.card-link:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.card--clickable .card-link:focus-visible { outline: none; }
/* Hover irgendwo auf der Kachel zieht den Button mit auf – gilt auch für
   Karten, die selbst ein Link sind (a.card) */
.card--clickable:hover .btn-round, a.card:hover .btn-round { width: var(--w-open); background: var(--brand-red-dark); }
.card--clickable:hover .btn-round span, a.card:hover .btn-round span { opacity: 1; transform: none; }

/* Feine rote Linie über dem Titel (Referenz: Zielgruppen-Karten) */
.card--tick::before {
  content: ""; display: block;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--red);
  margin-bottom: 18px;
}

/* Hervorgehobene Karte (rote Border, Referenz: „Ansprechpartner“-Karte) */
/* --------------------------------------------------------------------------
   Farbige Karten ("Für wen ist tabacon?")
   Drei Wege, drei Markenfarben. Bewusst gleichwertig: keine Karte bekommt
   einen Rahmen oder Schatten, der sie wichtiger aussehen lässt als die
   anderen. Schrift und Pfeil stehen auf allen dreien weiß.
   -------------------------------------------------------------------------- */
.card--rot, .card--hellblau, .card--navy {
  border-color: transparent; color: #fff;
}
.card--rot { background: var(--red); }
.card--hellblau { background: var(--slate); }
.card--navy { background: var(--navy-deep); }

.card--rot h3, .card--hellblau h3, .card--navy h3,
.card--rot .card-link, .card--hellblau .card-link, .card--navy .card-link { color: #fff; }
.card--rot p, .card--hellblau p, .card--navy p { color: rgba(255, 255, 255, .84); }
.card--rot .link-arrow, .card--hellblau .link-arrow, .card--navy .link-arrow { color: #fff; }

/* Hover: nur anheben, Farbe eine Spur vertiefen – kein roter Rahmen */
.card--rot:hover, .card--hellblau:hover, .card--navy:hover { border-color: transparent; }
.card--rot:hover { background: var(--red-dark); }
.card--hellblau:hover { background: #55637A; }
.card--navy:hover { background: var(--navy); }
.card--rot .card-link:hover, .card--hellblau .card-link:hover, .card--navy .card-link:hover { color: #fff; }
.card--rot:has(.card-link:focus-visible),
.card--hellblau:has(.card-link:focus-visible),
.card--navy:has(.card-link:focus-visible) { outline-color: var(--navy-deep); }

.card--highlight { border-color: var(--red); }
.card--highlight:hover { border-color: var(--red); box-shadow: 0 18px 40px -20px rgba(255, 0, 0, .4); }

/* Icon-Karte */
.card--icon { display: flex; flex-direction: column; }
.card--icon .icon-badge { margin-bottom: 1rem; }

/* Runder Pfeil-Button – sitzt am Kartenfuß, dadurch fluchten die Buttons
   einer Reihe unabhängig von der Textlänge */
/* Runder Pfeil-Button, der bei Hover nach rechts zu einer Pille aufzieht
   und dabei sein Label freigibt. --w-open steuert die Endbreite. */
.btn-round {
  --w-open: 132px;   /* knapp hinter dem Wort – kein toter Raum rechts */
  display: inline-flex; align-items: center; justify-content: flex-start; flex: none;
  width: 46px; height: 46px; padding-left: 13px; border-radius: 999px;
  background: var(--red); color: #fff; overflow: hidden;
  margin-top: auto; align-self: flex-start;
  transition: width .38s var(--ease), background .25s var(--ease);
}
.btn-round span {
  margin-left: 9px; padding-right: 15px; white-space: nowrap;
  font-size: .86rem; font-weight: 600; letter-spacing: -.01em;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .28s var(--ease), transform .38s var(--ease);
}
.btn-round:hover, .btn-round:focus-visible { width: var(--w-open); }
.btn-round:hover span, .btn-round:focus-visible span { opacity: 1; transform: none; }
.card .btn-round { margin-top: 22px; }
/* margin-top:auto schiebt den Button an den Kartenfuß; der Abstand darüber
   muss deshalb vom Text kommen, sonst klebt er in der längsten Karte am Text */
.card--icon .btn-round { margin-top: auto; }
/* Gilt genauso für normale Buttons in Icon-Karten: Sie sitzen am Kartenfuß,
   dadurch fluchten sie über die ganze Reihe, egal wie lang der Text ist. */
.card--icon .btn { margin-top: auto; align-self: flex-start; }
.card--icon p:has(+ .btn) { margin-bottom: 28px; }
.card--icon p:has(+ .btn-round),
.card--icon h3:has(+ .btn-round) { margin-bottom: 30px; }
.btn-round .icon { width: 19px; height: 19px; flex: none; }
.btn-round:hover { background: var(--brand-red-dark); }

/* Karten auf dunklem Grund */
.section--navy .card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--border-dark);
}
.section--navy .card h3 { color: #fff; }
.section--navy .card p { color: rgba(255, 255, 255, .68); }
.section--navy .card:hover { border-color: rgba(255, 255, 255, .3); box-shadow: none; }

/* Navy Icon-Kacheln (Referenz: Sortiment-Section Kiosk-Design) */
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-dark); border: 1px solid var(--border-dark); border-radius: var(--radius); overflow: hidden; }
.tile {
  background: var(--navy);
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px);
  text-align: center; color: rgba(255, 255, 255, .68);
  transition: background .3s var(--ease);
}
.tile:hover { background: var(--navy-soft); }
.tile .icon { width: 34px; height: 34px; margin: 0 auto 16px; color: var(--red); }
.tile h3 { color: #fff; font-size: 1rem; margin-bottom: .35em; }
.tile p { font-size: .82rem; margin: 0; }
a.tile { display: block; text-decoration: none; }

/* Info-Grid – rahmenlose Rasterfläche, nur durch feine rote Linien getrennt.
   Für reine Informationen gedacht; alles Verlinkte bleibt eine Karte.
   Spaltenzahl über --cols steuerbar, z. B. style="--cols:4". Die Linien
   entstehen aus dem 1-px-Abstand, deshalb passen sie sich jedem Umbruch an. */
.info-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.info-item {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 36px);
}
/* Die Trennlinien gehören zur Zelle, nicht zum Untergrund. Sie zeichnen sich
   beim Einblenden von der Kante her auf – deshalb blitzt keine rote Fläche auf. */
.info-item::before,
.info-item::after {
  content: ""; position: absolute; background: var(--red);
  transition: transform .9s var(--ease); transition-delay: var(--d, 0s);
}
.info-item::before { left: 0; top: 12%; bottom: 12%; width: 1px; transform: scaleY(0); transform-origin: top; }
.info-item::after { left: 0; right: 0; top: 0; height: 1px; transform: scaleX(0); transform-origin: left; }
.info-item.is-visible::before { transform: scaleY(1); }
.info-item.is-visible::after { transform: scaleX(1); }
/* keine Linie an der Außenkante – wird per JS markiert */
.info-item[data-firstcol]::before,
.info-item[data-firstrow]::after { display: none; }
.info-item[data-firstcol] { padding-left: 0; }

.info-item h3 { margin-bottom: .45em; }
.info-item p { font-size: .92rem; margin-bottom: 0; }
.info-item .icon-badge { margin-bottom: 12px; }
.info-item .icon-badge > .icon { width: 26px; height: 26px; }

.section--navy .info-item h3 { color: #fff; }
.section--navy .info-item p { color: rgba(255, 255, 255, .68); }

@media (prefers-reduced-motion: reduce) {
  .info-item::before { transform: scaleY(1); }
  .info-item::after { transform: scaleX(1); }
}

@media (max-width: 860px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .info-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   LISTEN
   ========================================================================== */

/* Pfeil-Liste (Referenz: rote Nutzen-Section) */
.arrow-list { display: grid; gap: 16px; }
.arrow-list li { display: flex; gap: 14px; align-items: flex-start; }
.arrow-list .icon { width: 18px; height: 18px; margin-top: 5px; color: var(--red); }
.on-red .arrow-list .icon, .section--red .arrow-list .icon, .split--red .arrow-list .icon { color: #fff; }
.section--red .arrow-list li, .split--red .arrow-list li { color: rgba(255, 255, 255, .92); font-weight: 500; }
.split--navy .arrow-list .icon { color: var(--red); }

/* Check-Liste */
.check-list { display: grid; gap: 14px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; }
.check-list .check {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-top: 2px; border-radius: 50%;
  background: var(--red-soft); color: var(--red);
}
.check-list .check .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.check-list strong { color: var(--ink); }

/* ==========================================================================
   PROZESS-MODULE
   ========================================================================== */

/* Horizontaler Stepper (Referenz: „So starten wir die Zusammenarbeit“) */
.steps { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 22px; counter-reset: step; }
/* Jede Stufe zieht ihre eigene Verbindung zur nächsten, auf halber Kartenhöhe.
   Das Stück reicht unter die folgende Karte, die es deckend überlagert –
   sichtbar bleibt genau der Zwischenraum. */
.step::after {
  content: ""; position: absolute; z-index: 0;
  top: 50%; left: 100%; width: 30px;
  border-top: 2px solid var(--border);
  transform: translateY(-50%);
}
.step:last-child::after { display: none; }
.step {
  position: relative; z-index: 1; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 20px 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.step-num {
  counter-increment: step;
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: -57px auto 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  border: 5px solid #fff;
  box-shadow: 0 8px 18px -8px rgba(255, 0, 0, .5);
}
.step-num::before { content: counter(step); }
.step h3 { font-size: 1rem; margin-bottom: .4em; }
.step p { font-size: .85rem; margin: 0; }
.steps-wrap { padding-top: 32px; }

/* Vertikale Timeline */
.timeline { position: relative; display: grid; gap: 8px; counter-reset: tstep; max-width: 720px; }
.timeline::before {
  content: ""; position: absolute; top: 24px; bottom: 24px; left: 23px;
  border-left: 2px dashed var(--border);
}
.timeline li { position: relative; display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.tl-num {
  counter-increment: tstep;
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-heading); font-weight: 700;
  box-shadow: 0 0 0 5px #fff;
}
.section--soft .tl-num { box-shadow: 0 0 0 5px var(--bg-soft); }
.tl-num::before { content: counter(tstep); }
.timeline h3 { font-size: 1.02rem; margin-bottom: .3em; }
/* Schritt ohne Fließtext: Überschrift steht dann mittig zur Ziffer */
.timeline h3:only-child { margin-bottom: 0; }
.timeline p { font-size: .92rem; margin: 0; max-width: 52ch; }

/* ==========================================================================
   SPLIT-SECTIONS
   ========================================================================== */

/* Media/Copy-Split, full-bleed (Referenz: rote Nutzen-Section, Navy-Sortiment) */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.split-media { position: relative; min-height: 380px; }
.split-media .img-slot { position: absolute; inset: 0; height: 100%; }
.split-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.8rem, 5vw, 5rem);
}
.split-copy > :last-child { margin-bottom: 0; }
/* Rote Variante: Weiß auf reinem Rot erreicht nur rund 4:1 Kontrast.
   Deshalb hier volles Weiß statt abgesetztem und etwas mehr Schriftstärke. */
.split--red .split-copy { background: var(--red); color: #fff; }
.split--red .split-copy h2 { color: #fff; }
.split--red .split-copy p { font-weight: 500; }
.split--red .split-copy .btn--primary { background: #fff; color: var(--ink); }
.split--red .split-copy .btn--primary:hover { background: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); }
.split--navy .split-copy { background: var(--navy-deep); color: rgba(255, 255, 255, .82); }
.split--navy .split-copy h2 { color: #fff; }

/* Split im Container (mit Radius) */
.split--boxed { border-radius: var(--radius); overflow: hidden; }

/* Einfache zweispaltige Inhalts-Sektion */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.cols--top { align-items: flex-start; }
.cols > div > :last-child { margin-bottom: 0; }

/* Sticky-Spalte (für längere Inhaltsseiten) */
.col-sticky { position: sticky; top: 120px; }

/* ==========================================================================
   BAYERN-KARTE
   ========================================================================== */
/* Kartengrafik als externe SVG (assets/images/bayern-karte.svg) –
   wird einmal geladen und auf allen Seiten aus dem Cache bedient.
   Die Standort-Pins liegen als eigenes, inline eingebundenes SVG darüber,
   damit sie weiterhin per CSS gestylt und animiert werden können. */
/* Karte und Pin-Overlay liegen in derselben Grid-Zelle. Beide skalieren über
   ihr eigenes Seitenverhältnis, dadurch decken sie sich exakt – unabhängig
   davon, wie hoch die umgebende Spalte ist. */
.map-wrap { position: relative; display: grid; align-items: start; }
.map-wrap.col-sticky { position: sticky; }  /* sonst überschreibt .map-wrap das Sticky-Verhalten */
.map-bavaria, .map-pins { grid-area: 1 / 1; width: 100%; height: auto; }
.map-pins { overflow: visible; pointer-events: none; }
.map-pin { cursor: default; }
.map-pin .pin-shape { fill: var(--red); }
.map-pin .pin-dot { fill: #fff; }
/* Schriftgrad in Karteneinheiten: Die viewBox ist 944 breit, bei rund
   500 px Anzeigebreite entsprechen 34 Einheiten etwa 18 px auf dem Schirm. */
.map-pin text {
  font-family: var(--font-heading); font-size: 34px; font-weight: 700;
  letter-spacing: -.01em;
  fill: var(--navy);
  paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 5px;
}
.section--navy .map-pin text { fill: #fff; }
.map-pin .pin-pulse {
  fill: var(--red); opacity: .25;
  transform-origin: center; transform-box: fill-box;
  animation: pin-pulse 2.6s var(--ease) infinite;
}

/* Pins fallen von oben an ihren Platz, sobald die Karte ins Bild kommt.
   backwards statt forwards: Ohne die Klasse stehen sie einfach da – fällt
   die Animation aus, bleibt die Karte trotzdem vollständig. */
.map-wrap.is-visible .pin-drop {
  animation: pin-drop .85s cubic-bezier(.34, 1.3, .64, 1) backwards;
  animation-delay: calc(var(--i, 0) * .12s);
}
@keyframes pin-drop {
  0%   { opacity: 0; transform: translateY(-170px); }
  55%  { opacity: 1; }
  72%  { transform: translateY(9px); }
  88%  { transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .map-wrap.is-visible .pin-drop { animation: none; }
}
@keyframes pin-pulse {
  0% { transform: scale(.4); opacity: .35; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-pin .pin-pulse { animation: none; opacity: 0; } }

/* ==========================================================================
   SLIDER / SCROLLER
   ========================================================================== */
.scroller-wrap { position: relative; }
.scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 560px);
  gap: 22px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
.scroller-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.scroller-btn {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  color: var(--navy);
  transition: border-color .25s, color .25s, transform .25s;
}
.scroller-btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.scroller-btn .icon { width: 18px; height: 18px; }
.scroller-dots { display: flex; gap: 7px; margin-left: 8px; }
.scroller-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: #CBD0D9; cursor: pointer; transition: background .25s, transform .25s;
}
.scroller-dots button.is-active { background: var(--red); transform: scale(1.25); }

/* Media-Karte (Bild + Text, Referenz: Fahrzeugflotten-Karte) */
.media-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.media-card .img-slot { min-height: 250px; }
.media-card-body { padding: 26px 28px 30px; }
.media-card-body h3 { margin-bottom: .35em; }
.media-card-body p { font-size: .9rem; margin-bottom: 0; }
.media-card-body p + .btn, .media-card-body p + .link-arrow { margin-top: 18px; }
/* Rahmenlose Variante: nur Bild und Text, kein Kasten drumherum */
.media-card--plain { background: none; border: 0; border-radius: 0; overflow: visible; }
.media-card--plain .media-card-body { padding: 22px 0 0; }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion { display: grid; gap: 12px; }
/* Zwei Akkordeons nebeneinander, mittig unter der Überschrift */
.accordion--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 18px;
  max-width: 880px; margin-inline: auto;
}
.acc-note { max-width: 680px; margin: 28px auto 0; text-align: center; }
@media (max-width: 760px) { .accordion--cols { grid-template-columns: 1fr; } }
.accordion details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .25s; }
.accordion details[open] { border-color: var(--navy); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink); font-size: .98rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { width: 18px; height: 18px; color: var(--red); transition: transform .3s var(--ease); }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion .acc-body { padding: 0 24px 22px; font-size: .93rem; }
.accordion .acc-body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   HINWEIS-PANEL (fachliche Abgrenzungen, Transparenz)
   ========================================================================== */
.notice {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-soft); border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(22px, 3vw, 32px);
}
.notice .icon-badge { margin: 0; }
.notice h3 { margin-bottom: .35em; }
.notice p { font-size: .93rem; margin-bottom: 0; }
.section--soft .notice { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--red); }

/* ==========================================================================
   ANSPRECHPARTNER / TEAM
   ========================================================================== */
.person-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--navy);
}
.person-card .img-slot { aspect-ratio: 3 / 4; min-height: 0; }
.person-card figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 70px 22px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(22, 32, 58, .92) 78%);
  color: #fff;
}
.person-card .p-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.person-card .p-role { display: block; font-size: .82rem; color: rgba(255, 255, 255, .75); margin-top: 2px; }
.person-card .p-contact {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: .8rem; font-weight: 600; color: #fff;
}
.person-card .p-contact .icon { width: 15px; height: 15px; color: var(--red); }
.person-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.person-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }

/* Platzhalter-Balken (Namen noch nicht freigegeben) */
.ph-bar { display: inline-block; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.ph-bar--sm { height: 10px; background: rgba(255, 255, 255, .22); }

/* Anliegen-Chips (Kontakt-Router) */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.chip {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px;
  font-weight: 600; font-size: .92rem; color: var(--ink);
  transition: border-color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chip .icon { width: 30px; height: 30px; color: var(--red); }
.chip .chip-arrow { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .3s var(--ease), color .25s; }
.chip:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.chip:hover .chip-arrow { transform: translateX(4px); color: var(--red); }

/* ==========================================================================
   KONTAKT-CTA (Abschlussmodul)
   ========================================================================== */
/* Abschlussmodul direkt über dem Footer – eigener Schieferton.
   Reines Weiß für den Text, weil abgesetztes Weiß auf #64748b
   den Kontrastwert unter den Mindestwert drücken würde. */
.cta-block { background: var(--slate); color: #fff; position: relative; overflow: hidden; }
.cta-block .container { position: relative; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cta-inner h2 { color: #fff; max-width: 18em; }
.cta-inner p { max-width: 46em; margin-bottom: 0; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Kontaktkarten-Reihe (Referenz: Telefon/WhatsApp/Ansprechpartner) */
.contact-cards .card { display: flex; flex-direction: column; align-items: flex-start; }
.contact-cards .card .meta { margin-top: auto; padding-top: 10px; font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   FORMULAR
   ========================================================================== */
.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.form-field .req { color: var(--red); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: .95rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, .1);
}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--red); background: #FFF7F7; }
.form-field .field-hint { font-size: .75rem; color: var(--muted); }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; }
.form-consent input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--red); flex: none; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.form-footer .form-note { font-size: .78rem; color: var(--muted); }

/* Status-Panels (Erfolg / Fehler – Zustände aus dem Wireframe) */
.form-status { display: none; gap: 18px; align-items: flex-start; border-radius: var(--radius); padding: 24px 26px; margin-bottom: 26px; }
.form-status.is-visible { display: flex; }
.form-status h3 { margin-bottom: .3em; }
.form-status p { margin: 0; font-size: .92rem; }
.form-status--success { background: #EDF7EF; border: 1px solid #BFE3C6; }
.form-status--success .icon-badge { margin: 0; color: #2E9E44; }
.form-status--error { background: #FDF0F0; border: 1px solid #F2C6C8; }
.form-status--error .icon-badge { margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .72); font-size: .875rem; }
.footer-main {
  display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3.2rem, 5vw, 4.6rem) clamp(2.4rem, 4vw, 3.4rem);
}
.footer-brand .logo strong { font-size: 1.9rem; }
.footer-brand p { margin-top: 16px; max-width: 30ch; font-size: .84rem; }
.footer-col h3 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: rgba(255, 255, 255, .72); font-size: .85rem; transition: color .2s; }
.footer-col a[href]:hover { color: #fff; }
/* Punkte, deren Seite noch fehlt, stehen gedämpft und ohne Zeigehand da */
.footer-col a:not([href]) { color: rgba(255, 255, 255, .45); cursor: default; }

/* Social-Zeile unter dem Markentext */
.footer-social { margin-top: 26px; }
.footer-social > span { display: block; margin-bottom: 12px; font-size: .84rem; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .8);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.social-row .icon { width: 19px; height: 19px; }
.social-row a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* Die gelieferten Zeichen sind reine Marken ohne Kreis, deshalb sitzen sie
   in einem runden Rahmen. Die Höhe ist einheitlich gesetzt, die Breite folgt
   dem jeweiligen Seitenverhältnis – Facebook ist schmal und hoch, Instagram
   quadratisch. Ohne das wirken sie unterschiedlich groß. */
.social-row .icon { width: auto; height: 17px; }
.social-row a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* Mitgliedschaft DTV Tabak, unter der Kontaktspalte */
.footer-dtv { margin-top: 32px; }
.footer-dtv > span {
  display: block; margin-bottom: 12px;
  font-size: .82rem; line-height: 1.35; color: rgba(255, 255, 255, .72);
}
.footer-dtv a {
  display: inline-block;
  opacity: .92; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.footer-dtv img { display: block; height: 46px; width: auto; }
.footer-dtv a:hover { opacity: 1; transform: translateY(-2px); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--border-dark);
  font-size: .78rem; color: rgba(255, 255, 255, .5);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: rgba(255, 255, 255, .6); }
.footer-legal a:hover { color: #fff; }

/* ==========================================================================
   ZAHLENBAND
   ========================================================================== */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.stat { background: #fff; padding: clamp(26px, 3vw, 38px) clamp(14px, 2vw, 24px); text-align: center; }
.stat-value {
  display: block;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
}
.stat-value .unit { color: var(--red); }
.stat-label { display: block; margin-top: 12px; font-size: .84rem; color: var(--muted); }
.stat .ph-bar { background: var(--bg-gray); height: 26px; width: 62%; }
.section--soft .stat { background: #fff; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Anklickbare Kartenpins */
.map-pins a { pointer-events: auto; cursor: pointer; }
.map-pins a .pin-shape { transition: fill .25s var(--ease); }
.map-pins a:hover .pin-shape,
.map-pins a:focus-visible .pin-shape { fill: var(--navy); }
.map-pins a:hover text { fill: var(--red); }

/* ==========================================================================
   ANSPRECHPARTNER · FILTER + TEAMKARTEN
   ========================================================================== */
.filter-bar {
  position: sticky; top: 82px; z-index: 20;
  display: grid; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px clamp(16px, 2vw, 22px);
  margin-bottom: 26px;
  box-shadow: 0 10px 26px -20px rgba(30, 42, 71, .5);
}
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.filter-legend {
  flex: none; width: 82px;
  font-family: var(--font-heading);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.filter-pill:hover { border-color: var(--navy); transform: translateY(-1px); }
.filter-pill .count { font-size: .72rem; font-weight: 600; color: var(--muted); }
.filter-pill[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.filter-pill[aria-pressed="true"]:hover { border-color: var(--red); }
.filter-pill[aria-pressed="true"] .count { color: rgba(255, 255, 255, .7); }
.filter-pill[data-empty="true"] { opacity: .4; }

.filter-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 13px;
}
.filter-count { margin: 0; font-size: .84rem; color: var(--muted); }
.filter-count strong { color: var(--ink); font-weight: 700; }
.filter-reset {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; padding: 0; background: none; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--red);
}
.filter-reset .icon { width: 14px; height: 14px; }
.filter-reset:hover { text-decoration: underline; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

/* Karte = randloses Porträt, Text und Kontakt liegen darüber */
.p-card {
  position: relative; overflow: hidden;
  /* hochformatiger als 3/4: mehr Platz fürs Porträt, die Textleiste am Fuß
     nimmt dadurch anteilig weniger weg */
  aspect-ratio: 3 / 4.35;
  border-radius: var(--radius);
  background: var(--navy);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* backwards statt both: nach dem Lauf gelten wieder die normalen Styles,
   sonst würde der eingefrorene Endzustand den Hover-Effekt blockieren */
.p-card.is-in { animation: card-in .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Porträt füllt die Karte; fehlt das Foto, bleiben die Initialen stehen */
.p-photo {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .07), transparent 46%),
              linear-gradient(150deg, #26334F 0%, #16203A 100%);
  font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem;
  color: rgba(255, 255, 255, .42); letter-spacing: .04em;
}
.p-photo::before { content: attr(data-initials); }
.p-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Bildausschnitt sitzt höher als die Mitte: 50% wäre mittig, größere Werte
     schieben das Motiv weiter nach oben */
  object-position: center 62%;
  transition: transform .6s var(--ease);
}
.p-card:hover .p-photo img { transform: scale(1.05); }

/* Deckende Leiste am Kartenfuß statt Verlauf – Name, Funktion und die
   Kontakt-Buttons stehen dadurch auf ruhigem Grund */
.p-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 18px 20px 20px;
  background: var(--bg-gray);
  color: var(--navy);
}
.p-fn {
  display: block; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
  color: var(--navy); letter-spacing: -.012em; line-height: 1.25;
}
.p-title { display: block; margin-top: 3px; font-size: .82rem; color: var(--muted); }

/* Standort-Chip oben links auf dem Bild */
.p-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  background: var(--bg-soft); color: var(--navy);
  font-size: .74rem; font-weight: 600;
}
.p-badge .icon { width: 13px; height: 13px; color: var(--red); }
.p-card .p-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 4px 14px -8px rgba(22, 32, 58, .8);
}

/* Kontakt: nur Icons – Nummer und Adresse stehen im Tooltip bzw. im aria-label */
.p-links { display: flex; gap: 10px; margin-top: 15px; }
.p-links a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--red); color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.p-links a:hover { background: var(--red-dark); transform: translateY(-2px); }
.p-links .icon { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   VARIANTE B der Ansprechpartner-Karte
   Foto oben, darunter eine helle Fläche: Telefonnummer und E-Mail stehen
   ausgeschrieben da (statt nur als Icon), darunter WhatsApp und LinkedIn.
   -------------------------------------------------------------------------- */
.team-grid--detail { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.p-card--detail {
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
}
.p-card--detail .p-photo { position: relative; inset: auto; aspect-ratio: 4 / 3; }
.p-card--detail .p-body {
  position: static;
  flex: 1; display: flex; flex-direction: column;
  padding: 18px 20px 20px;
  background: #fff; color: var(--navy);
}
.p-card--detail .p-fn { color: var(--navy); }
.p-card--detail .p-title { color: var(--muted); }

/* Kontaktzeilen: Icon links, Text ausgeschrieben daneben */
.p-contact { display: flex; flex-direction: column; gap: 9px; margin-top: 15px; }
.p-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--navy); font-size: .88rem; line-height: 1.35;
  transition: color .2s var(--ease);
}
.p-row span { overflow-wrap: anywhere; }
.p-row .icon { width: 16px; height: 16px; flex: none; color: var(--red); }
.p-row:hover { color: var(--red); }

/* Buttons sitzen immer am Kartenfuß, auch wenn die Funktion zweizeilig wird */
.p-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.p-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--navy);
  font-size: .82rem; font-weight: 600;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.p-btn .icon { width: 15px; height: 15px; }
.p-btn:hover { transform: translateY(-2px); color: #fff; }
.p-btn--wa .icon { color: #25D366; }
.p-btn--wa:hover { background: #25D366; border-color: #25D366; }
.p-btn--li .icon { color: #0A66C2; }
.p-btn--li:hover { background: #0A66C2; border-color: #0A66C2; }
.p-btn:hover .icon { color: #fff; }

/* ==========================================================================
   MEILENSTEINE ALS WAAGRECHTE BAHN (Über Tabacon)
   Die Karten liegen in einer Reihe und rasten beim Wischen einzeln ein. Die
   beiden Knöpfe schieben um genau eine Kartenbreite weiter; wo es nicht mehr
   weitergeht, blenden sie aus (Klasse .is-aus, gesetzt in main.js).
   ========================================================================== */
.ms-bahn { position: relative; }
.ms-spur {
  display: flex; gap: 20px; margin: 0; padding: 4px 4px 22px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  scrollbar-width: thin;
  /* Am rechten Rand ausblenden, damit man sieht: da kommt noch was */
  mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
}
.ms-karte {
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 24vw, 300px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ms-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #D2D7DF; }
.ms-jahr {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
  color: var(--red); letter-spacing: -.02em;
}
/* Feine Linie unter der Jahreszahl als gemeinsame Kante der Reihe */
.ms-jahr::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--red); margin-top: 10px;
}
.ms-karte h3 { font-size: 1rem; margin-bottom: .4em; }
.ms-karte p { font-size: .88rem; margin-bottom: 0; }

.ms-knopf {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--border); color: var(--navy);
  box-shadow: 0 12px 26px -14px rgba(30, 42, 71, .5);
  transition: opacity .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.ms-knopf:hover { background: var(--red); border-color: var(--red); color: #fff; }
.ms-knopf .icon { width: 18px; height: 18px; }
.ms-knopf--zurueck { left: -12px; }
.ms-knopf--vor { right: -12px; }
.ms-knopf.is-aus { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .ms-knopf { display: none; }        /* auf dem Handy wird gewischt */
  .ms-spur { mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-karte { transition: none; }
}

/* Fließtextblock in Lesebreite, für erklärende Absätze ohne Kasten */
.fliesstext { max-width: 74ch; }
.fliesstext p + p { margin-top: 1em; }

/* ==========================================================================
   MITGLIEDSCHAFT (Logo neben Satz)
   ========================================================================== */
.mitglied {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 34px; padding: 22px 26px;
  background: var(--bg-soft); border-radius: var(--radius);
}
.mitglied-logo img { display: block; height: 44px; width: auto; }
.mitglied p { margin: 0; font-size: .92rem; max-width: 62ch; }

/* Vier Porträts nebeneinander (Geschäftsleitung) */
.team-grid--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .team-grid--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team-grid--vier { grid-template-columns: 1fr; } }

/* ==========================================================================
   ZEITLEISTE (Über Tabacon · Meilensteine)
   Jahreszahl links, Ereignis rechts, dazwischen eine durchgehende Linie mit
   Punkt je Station. Auf schmalen Schirmen rutscht das Jahr über den Text.
   ========================================================================== */
.zeitleiste { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.zeitleiste::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 94px;
  border-left: 2px solid var(--border);
}
.zeitleiste > li {
  position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 40px;
  align-items: start;
}
.zeitleiste .jahr {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem;
  color: var(--red); text-align: right; padding-top: 1px;
}
/* Punkt auf der Linie */
.zeitleiste > li::before {
  content: ""; position: absolute; left: 89px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red);
}
.zeitleiste h3 { font-size: 1rem; margin-bottom: .25em; }
.zeitleiste p { font-size: .9rem; margin-bottom: 0; }

@media (max-width: 620px) {
  .zeitleiste::before, .zeitleiste > li::before { display: none; }
  .zeitleiste > li { grid-template-columns: 1fr; gap: 4px; }
  .zeitleiste .jahr { text-align: left; }
}

/* ==========================================================================
   LANDINGPAGE KIOSKBETREIBER
   Auf dem Handy gedacht: Vorteile als angetippte Karten, Kontaktwege als
   große Flächen untereinander.
   ========================================================================== */
.check-list--karten { display: grid; gap: 12px; }
.check-list--karten li {
  align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px;
  font-weight: 600; color: var(--navy);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.check-list--karten li:hover { transform: translateY(-2px); border-color: #D2D7DF; }

.kiosk-aktionen { display: grid; gap: 12px; }
.kiosk-aktionen .btn { width: 100%; justify-content: center; }

.team-empty {
  grid-column: 1 / -1;
  margin: 0; padding: 34px 26px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--muted); font-size: .92rem;
}

@media (max-width: 620px) {
  .filter-bar { position: static; }
  .filter-legend { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .p-card.is-in { animation: none; }
}


/* ==========================================================================
   TABAKWAREN-BEREICH
   Eigene Akzentfarbe: Alles, was sonst rot ist (Labels, Akzentstriche,
   Icons, Linien, farbige Flächen), wird hier braun. Die Buttons greifen auf
   --brand-red zu und bleiben deshalb siteweit einheitlich rot.
   ========================================================================== */
.theme-tabak {
  --red: var(--brown); --red-dark: var(--brown-dark);
  /* auch die Buttons laufen in diesem Bereich auf Braun */
  --brand-red: var(--brown); --brand-red-dark: var(--brown-dark);
  /* zarter Hintergrund für Häkchen, Badges usw. */
  --red-soft: rgba(156, 126, 102, .15);
}
/* Abschluss-CTA in Braun, Button darin weiß – wie beim braunen Split */
.theme-tabak .cta-block { background: var(--brown); }
.theme-tabak .cta-block .btn--primary { background: #fff; color: var(--ink); }
.theme-tabak .cta-block .btn--primary:hover { background: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); }

/* Schatten im Tabakwaren-Bereich: Braun statt Rot */
.theme-tabak .btn--primary:hover { box-shadow: 0 12px 24px -12px rgba(156, 126, 102, .6); }
.theme-tabak .card--highlight:hover { box-shadow: 0 18px 40px -20px rgba(156, 126, 102, .55); }
.theme-tabak .btn-round { box-shadow: 0 8px 18px -8px rgba(156, 126, 102, .55); }
.theme-tabak .icon-badge { box-shadow: none; }
.theme-tabak :focus-visible { outline-color: var(--brown); }

/* Bereichsnavigation über dem Hero -------------------------------------- */
.pnav {
  /* Ohne JavaScript klebt sie selbst unter dem Header; mit JavaScript sitzt
     sie im Header und wird von dessen sticky mitgetragen (siehe main.js). */
  position: sticky; top: var(--header-h, 78px); z-index: 90;
  background: #fff; border-bottom: 1px solid var(--border);
}
.pnav-inner { display: flex; align-items: center; gap: 26px; min-height: 56px; }
/* Im Header: kein eigenes sticky nötig, der Header trägt sie */
.site-header .pnav { position: static; border-top: 1px solid var(--border); }
.site-header.is-scrolled .pnav-inner { min-height: 48px; }
.pnav-title {
  font-family: var(--font-heading); font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brown);
  flex: none;
}
.pnav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.pnav li { flex: none; }
.pnav a {
  display: block; padding: 17px 14px 15px; border-bottom: 2px solid transparent;
  font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pnav a:hover { color: var(--red); }
.pnav a.is-active { color: var(--red); border-bottom-color: var(--red); }

/* Tabakwaren-Familie: pnav bleibt gold/braun statt des roten Hovers/Active-States
   der übrigen Produktfamilien (gleiche Ausnahme wie im Sortiment-Megamenü). */
.pnav--tabak a:hover { color: var(--brown); }
.pnav--tabak a.is-active { color: var(--brown); border-bottom-color: var(--brown); }

.pnav-back { margin-left: auto; font-size: .84rem; font-weight: 600; color: var(--muted); flex: none; }
.pnav-back:hover { color: var(--brown); }
.pnav-back .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }

@media (max-width: 720px) {
  .pnav-inner { gap: 14px; }
  .pnav-title, .pnav-back { display: none; }
  .pnav a { padding: 15px 10px 13px; font-size: .86rem; }
}

/* ==========================================================================
   STARTSEITE (Dachseite)
   ========================================================================== */

/* Sprachumschalter im Header */
.lang { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 10px 0 6px; gap: 5px; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.lang-toggle:hover { border-color: var(--navy); transform: translateY(-1px); }
.lang-toggle .icon { width: 16px; height: 16px; }
.lang-toggle .icon { color: var(--muted); }
/* Pfeil dreht sich, wenn das Menü offen ist */
.lang-toggle .icon { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.lang:hover .lang-toggle .icon,
.lang.is-open .lang-toggle .icon { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 168px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang:hover .lang-menu, .lang:focus-within .lang-menu, .lang.is-open .lang-menu {
  opacity: 1; visibility: visible; transform: none;
}
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  font-size: .85rem; color: var(--navy);
}
/* Flaggen sind rund ausgeschnitten – im Knopf groß, im Menü kleiner */
.flag {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(22, 32, 58, .18);
}
.lang-toggle .flag { width: 28px; height: 28px; }
.lang-menu a:hover { background: var(--bg-soft); color: var(--red); }
.lang-menu a.is-active { color: var(--red); font-weight: 600; }
/* Sprachen ohne Ziel: sichtbar, aber noch nicht klickbar */
.lang-menu a:not([href]) { color: var(--muted); cursor: default; }
.lang-menu a:not([href]):hover { background: none; color: var(--muted); }

/* Fünf Argumente mit feinen Trennlinien */
.usp-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.usp-strip li { padding: 6px clamp(16px, 2vw, 28px); border-left: 1px solid var(--border); }
.usp-strip li:first-child { border-left: 0; padding-left: 0; }
.usp-strip .icon { width: 40px; height: 40px; color: var(--red); }
.usp-strip h3 { margin: 14px 0 .3em; font-size: .95rem; }
.usp-strip p { margin: 0; font-size: .85rem; color: var(--muted); }

/* Sortiment-Block auf Navy */
.section--navy { background: var(--navy-deep); color: rgba(255, 255, 255, .82); }
.section--navy h2, .section--navy h3 { color: #fff; }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); overflow: hidden; }
.tile {
  display: block; padding: clamp(24px, 3vw, 34px); text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78);
  transition: background .25s var(--ease);
}
.tile:first-child, .tile:nth-child(3n+1) { border-left: 0; }
.tile:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .16); }
.tile:hover { background: rgba(255, 255, 255, .05); }
.tile .icon { width: 48px; height: 48px; color: var(--red); }
.tile h3 { margin: 16px 0 .35em; font-size: 1rem; }
.tile p { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* Markenband als Endlos-Carousel: zwei identische Listen laufen nach links,
   nach genau einer Listenbreite springt der Track zurück – der Übergang ist
   dadurch unsichtbar. Logos in Originalfarben. */
/* läuft über die volle Fensterbreite, nicht nur im Textcontainer */
.brand-carousel { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-track { display: flex; width: max-content; animation: brand-lauf 18s linear infinite; }
.brand-carousel:hover .brand-track { animation-play-state: paused; }
@keyframes brand-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-band {
  display: flex; align-items: center; flex: none;
  gap: clamp(48px, 7vw, 96px); margin: 0; padding: 0 clamp(24px, 3.5vw, 48px); list-style: none;
}
.brand-band li { flex: none; }
.brand-band img {
  display: block; width: auto; height: clamp(42px, 5.4vw, 68px);
  mix-blend-mode: multiply;   /* nimmt den weißen Rand der Logodateien weg */
  transition: transform .3s var(--ease);
}
.brand-band img:hover { transform: scale(1.06); }

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

@media (max-width: 980px) {
  .usp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .usp-strip li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(odd) { border-left: 0; }
  /* Die 3-spaltige Grundregel oben (.tile:nth-child(3n+1) { border-left: 0; })
     bleibt auch hier aktiv und nimmt z. B. der 4./10./16. Kachel fälschlich
     ihren linken Rand weg, obwohl sie in der 2-Spalten-Ansicht die RECHTE
     Spalte ist – dadurch fehlte die Trennlinie ausgerechnet in jeder
     zweiten Reihe. Für 2 Spalten gilt stattdessen einfach: gerade = rechts
     (Rand da), ungerade = links (kein Rand) – das hier stellt das explizit
     wieder her. */
  .tile:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .16); }
  .tile:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 620px) {
  .usp-strip { grid-template-columns: 1fr; }
  .usp-strip li { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   REVEAL-ANIMATIONEN
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}

/* Prozess-Schritte kommen seitlich herein – das liest sich als Abfolge.
   Der Versatz zwischen den Karten macht daraus eine Bewegung von links
   nach rechts, passend zur Leserichtung. */
.step[data-reveal]:nth-child(odd),
.timeline li[data-reveal]:nth-child(odd) { transform: translateX(-34px); }
.step[data-reveal]:nth-child(even),
.timeline li[data-reveal]:nth-child(even) { transform: translateX(34px); }
.step[data-reveal].is-visible,
.timeline li[data-reveal].is-visible { transform: none; }

/* Textblöcke – Überschriften, Fließtext, Buttonzeilen – schieben sich
   ebenfalls von links herein statt von unten. Karten, Kacheln und Bilder
   behalten die Aufwärtsbewegung, sonst wird die Seite zu unruhig. */
.section-head[data-reveal],
.hero-copy > [data-reveal],
.hero-center-inner > [data-reveal],
.split-copy > [data-reveal],
.cta-inner > div[data-reveal],
.cols > div > [data-reveal] { transform: translateX(-30px); }

.section-head[data-reveal].is-visible,
.hero-copy > [data-reveal].is-visible,
.hero-center-inner > [data-reveal].is-visible,
.split-copy > [data-reveal].is-visible,
.cta-inner > div[data-reveal].is-visible,
.cols > div > [data-reveal].is-visible { transform: none; }

/* Bilder starten minimal vergrößert und gehen beim Einblenden auf Normalmaß
   zurück – langsamer als der Block selbst, das wirkt ruhiger */
/* Bildflächen mit Bildwechsel sind ausgenommen – sie bringen ihre eigene
   Überblendung mit, und diese Regel würde deren Übergang überschreiben. */
[data-reveal] .img-slot:not(.img-slot--slideshow) img,
[data-reveal] .split-media .img-slot:not(.has-parallax) img,
[data-reveal].img-slot:not(.img-slot--slideshow) img { transform: scale(1.06); }
[data-reveal].is-visible .img-slot:not(.img-slot--slideshow) img,
[data-reveal].is-visible .split-media .img-slot:not(.has-parallax) img,
[data-reveal].is-visible.img-slot:not(.img-slot--slideshow) img {
  transform: none;
  transition: transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .step[data-reveal]:nth-child(n), .timeline li[data-reveal]:nth-child(n),
  .section-head[data-reveal]:nth-child(n), .hero-copy > [data-reveal]:nth-child(n),
  .hero-center-inner > [data-reveal]:nth-child(n), .split-copy > [data-reveal]:nth-child(n),
  .cta-inner > div[data-reveal]:nth-child(n), .cols > div > [data-reveal]:nth-child(n) { transform: none; }
  [data-reveal] .img-slot:not(.img-slot--slideshow) img,
  [data-reveal] .split-media .img-slot:not(.has-parallax) img,
  [data-reveal].img-slot:not(.img-slot--slideshow) img { transform: none; transition: none; }
}

/* ==========================================================================
   STEPPER MIT SCROLL-FORTSCHRITT
   Beim Scrollen füllt sich die Verbindungslinie von links nach rechts und
   jede Nummer schaltet auf Rot, sobald die Linie sie erreicht hat. Der
   Abschnitt behält seine normale Höhe. Aktiviert wird das per JS – ohne JS
   sind alle Nummern rot und die Linien vollständig gezogen.
   ========================================================================== */
@media (min-width: 1081px) {
  /* rote Fülllinie über der grauen Grundlinie */
  .steps-wrap[data-scrollsteps] .step::before {
    content: ""; position: absolute; z-index: 0;
    top: 50%; left: 100%; width: 30px;
    border-top: 1.5px solid var(--red);
    transform: translateY(-50%) scaleX(var(--fill, 0));
    transform-origin: left center;
    transition: transform .25s linear;
  }
  .steps-wrap[data-scrollsteps] .step:last-child::before { display: none; }

  .steps-wrap[data-scrollsteps] .step-num {
    background: var(--bg-gray); color: var(--muted);
    box-shadow: none;
    transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
  }
  .steps-wrap[data-scrollsteps] .step.is-done .step-num {
    background: var(--red); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(255, 0, 0, .5);
  }
  .steps-wrap[data-scrollsteps] .step {
    transition: border-color .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .steps-wrap[data-scrollsteps] .step.is-done { border-color: #D2D7DF; }
}
@media (prefers-reduced-motion: reduce) {
  .steps-wrap[data-scrollsteps] .step::before { transform: translateY(-50%) scaleX(1); }
  .steps-wrap[data-scrollsteps] .step-num { background: var(--red); color: #fff; }
}

/* ==========================================================================
   SCROLL-FORTSCHRITT IM HEADER
   ========================================================================== */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform-origin: left center;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: grid; }
  .header-actions .btn--navy { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
  .step::after { display: none; }
  .step-num { margin-top: -57px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-right: var(--gutter); order: 1; }
  .hero-media { order: 2; min-height: 300px; }
  .hero--navy .hero-media::before {
    background: linear-gradient(180deg, var(--navy) 0%, rgba(30, 42, 71, .4) 18%, transparent 45%);
  }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 300px; }
  .split-media .img-slot { position: relative; inset: auto; }
  .cols { grid-template-columns: 1fr; }
  .col-sticky { position: static; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile p { display: none; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .timeline li { gap: 16px; }
  .timeline::before { left: 19px; }
  .tl-num { width: 40px; height: 40px; font-size: .9rem; }
  .header-actions .btn span { display: none; }
  .header-actions .btn { padding: 11px 13px; }
}

/* Kachel-Grids mit nur 3 Feldern (z. B. „Infrastruktur“, siehe
   tile-grid--solo in p42-sicherheit-qualitaet.html) bekommen ab 980px
   keine 2-Spalten-Ansicht mit leerem vierten Feld, sondern stapeln sich
   einspaltig – eine Trennlinie zwischen den Kacheln statt der sonst
   üblichen Spaltenlinie. Als eigener Block ans Ende gesetzt, damit er
   nach allen drei .tile-grid-Breitenregeln oben gewinnt. */
@media (max-width: 980px) {
  .tile-grid--solo { grid-template-columns: 1fr; }
  .tile-grid--solo .tile { border-left: 0; }
  .tile-grid--solo .tile:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, .16); }
}

/* ==========================================================================
   PARALLAX IN SPLIT-SEKTIONEN
   Das Foto wandert beim Scrollen etwas langsamer als der Text. Der leichte
   Überzoom verhindert, dass beim Versatz Ränder frei werden.
   ========================================================================== */
.split-media .img-slot.has-parallax img {
  transform: translateY(var(--par, 0px)) scale(1.16);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .split-media .img-slot.has-parallax img { transform: none; }
}

/* PLZ-Suche in der Karte */
.plz-form { display: grid; gap: 14px; margin-top: auto; padding-top: 18px; }
.plz-form .form-field { gap: 6px; }
.plz-form input { max-width: 220px; }
.plz-form .btn { justify-self: start; }
.plz-form .field-hint { min-height: 1.2em; }

/* Magnetische Buttons: der Versatz kommt per JS als --mx/--my */
.btn.is-magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn.is-magnetic:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }

/* ==========================================================================
   ICONS
   Die Seiten nutzen wieder die schlichten Systemsymbole aus dem Sprite.
   Sie liegen alle auf derselben 24er-Zeichenfläche und sind dadurch von
   Haus aus gleich groß. Die Tabacon-Icons bleiben unter dist/assets/icons
   liegen – für den Wechsel zurück genügt ein Durchlauf des Austauschs.
   ========================================================================== */
.icon-badge .icon { width: 34px; height: 34px; }
.usp-strip .icon { width: 34px; height: 34px; }
.tile .icon { width: 40px; height: 40px; }
.chip .icon { width: 24px; height: 24px; }
/* ==========================================================================
   PRELOADER (nur Startseite)
   Die Wortmarke sitzt oben links wie später der Header. Der rote Kreis
   steht von Anfang an fest und vollständig im Bild (Größe über vmin
   berechnet, damit er bei keinem Seitenverhältnis am Rand abgeschnitten
   wird) – animiert wird nur das weiße „t“ darin, und zwar weich: es wächst
   aus leicht verkleinertem Zustand mit Fade ein, kein Nachzeichnen mehr.
   main.js blendet das Feld nach dem Laden wieder aus – dabei löst es sich
   (Opacity + leichte Weichzeichnung, länger als zuvor) sanft auf und gibt
   den Blick auf das Hero-Video darunter frei, statt hart wegzuschalten;
   ohne JavaScript übernimmt das <noscript>-Stylesheet im Markup das sofort.
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  overflow: hidden;
  background: var(--bg);
  opacity: 1; visibility: visible;
  filter: blur(0);
  /* Länger und mit gleichmäßiger (nicht abrupt endender) Kurve statt eines
     harten Schnitts oder eines vorne "verpuffenden" Ease-outs: das Feld
     löst sich gleichmäßig auf und gibt den Blick auf das Hero-Video
     langsam frei – main.js verlängert seinen Sicherheits-Timeout
     entsprechend. Eigene, symmetrische Kurve statt var(--ease), das an
     anderer Stelle bewusst ein schnell startendes Ease-out für Entrées ist. */
  transition: opacity 1.15s cubic-bezier(.45, 0, .55, 1),
              visibility 1.15s cubic-bezier(.45, 0, .55, 1),
              filter 1.15s cubic-bezier(.45, 0, .55, 1);
}
.preloader.ist-fertig { opacity: 0; visibility: hidden; pointer-events: none; filter: blur(10px); }
body.ist-ladend { overflow: hidden; }

/* Wortmarke groß oben links, wie im Referenz-Screenshot – bewusst größer
   als das spätere Header-Logo: ein kurzer, prominenter Markenauftritt, der
   beim Ausblenden zur kompakten Kopfzeile hin verschwindet. */
.preloader-wort {
  position: fixed; top: clamp(24px, 8vh, 72px); left: clamp(20px, 5vw, 64px);
  width: clamp(150px, 22vw, 320px); height: auto;
  animation: preloader-einblenden .5s var(--ease) both;
}

/* Kreis und „t“ sind zwei eigenständige <svg>, auf denselben Ankerpunkt
   zentriert (fixed + translate -50%/-50% auf beide). Unterhalb von 721px
   bzw. bei schmal-hohen Fenstern (Tablet im Hochformat) sind beide gleich
   groß – das entspricht dem echten Logo (#i-signet) und war dort schon
   unauffällig. Ab 721px Breite UND Breitformat (min. 4:3) bekommt der
   Kreis seine eigene, randlose Größe (siehe unten); das „t“ bleibt dort
   bewusst kleiner als der Kreis, sonst ragt es bei sehr breiten/kurzen
   Fenstern oben/unten über den Bildschirmrand hinaus (abgeschnitten). */
.preloader-kreis-svg,
.preloader-t-svg {
  position: fixed; top: 50%; left: 70%;
  width: min(137vh, 100vw); aspect-ratio: 1;
  max-width: none;  /* überschreibt die globale Bildregel „img, svg, video {
                        max-width:100% }" – die Randlos-Formel unten braucht
                        bewusst mehr als 100vw Breite, um rechts bis zum
                        Rand zu reichen */
  transform: translate(-50%, -50%);
  display: block;
}
@media (min-width: 721px) and (min-aspect-ratio: 4/3) {
  /* Nur bei „breiten" (Desktop-typischen) Seitenverhältnissen ab 4:3 –
     bei schmal-hohen Fenstern (z.B. Tablet im Hochformat) würde dieselbe
     Randlos-Formel den Kreis so groß machen, dass er unter die Wortmarke
     oben links reicht. Dort bleibt die kompaktere Basis-Formel aktiv. */
  .preloader-kreis-svg {
    width: calc(hypot(100vh, 60vw) * 1.04);
  }
  /* „t“ absichtlich unabhängig vom (nun randlosen) Kreis kleiner gehalten:
     min(108vh, 119vw) bleibt mit Sicherheitsabstand innerhalb der
     Bildschirmkanten, auch wenn der Kreis selbst weit darüber hinausragt. */
  .preloader-t-svg {
    width: min(108vh, 119vw);
  }
}

/* Kreis: steht fest, keine Animation. */
.preloader-kreis { fill: var(--red); }

/* „t“: erst als Kontur nachgezeichnet (pathLength normiert die Einheiten,
   unabhängig von der tatsächlichen Pfadlänge), dann als Fläche eingeblendet
   – klassischer, ruhiger „Logo zeichnet sich“-Effekt statt eines simplen
   Aufblühens. */
.preloader-t-linie { display: none; }  /* kein Nachzeichnen mehr – siehe .preloader-t-svg */
.preloader-t-flaeche { fill: #fff; }

/* „t“ wächst weich ein: Fade + sanftes Einwachsen aus leicht verkleinertem
   Zustand, statt sich als Kontur nachzuzeichnen. Animiert wird das ganze
   <svg>, damit die Fläche als Einheit erscheint. */
.preloader-t-svg {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  animation: preloader-t-weich .8s var(--ease) .4s forwards;
}

@keyframes preloader-t-weich {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes preloader-einblenden {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-wort, .preloader-t-svg { animation: none; }
  .preloader-t-svg { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .preloader.ist-fertig { filter: none; }
}