/* =========================
       Farbwelt passend zum Logo
       ========================= */
    :root {
      --bg: #030303;             /* Haupt-Hintergrund, fast schwarz     */
      --bg-soft: #101010;        /* Karten-Hintergrund                  */
      --accent-red: #e13a22;     /* Logo-Rot                            */
      --accent-gold: #d8a646;    /* Logo-Gold                           */
      --accent-gold-soft: #b78733;
      --text-main: #f4f4f4;      /* Haupt-Textfarbe                     */
      --text-muted: #aaaaaa;     /* abgeschwächter Text                 */
      --border-soft: #2a2a2a;    /* leichte Rahmenlinie                 */
    }

.hersteller-logos {
  display: flex;
  flex-wrap: wrap;          /* erlaubt max. 2 Reihen */
  justify-content: center;  /* Logos in der Mitte */
  gap: 1.2rem;              /* Abstand zwischen Logos */
  margin: 1rem 0 2rem;
}

.hersteller-logos img {
  max-height: 80px !important;  /* Höhe begrenzen */
  width: auto !important;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

    * {
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background:
        radial-gradient(circle at 10% 0%, #2b1b12 0, transparent 45%),
        radial-gradient(circle at 90% 0%, #3b2418 0, transparent 45%),
        #000;
      color: var(--text-main);
    }

    a {
      color: var(--accent-gold);
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 1rem;
    }

.map-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 15px 40px rgba(0,0,0,0.75);
  margin: 0.8rem 0 1.5rem;
}

.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ablauf-grid {
  display: grid;
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}

@media (min-width: 780px) {
  .ablauf-grid {
    grid-template-columns: 1fr 1fr; /* 2 gleiche Spalten */
  }
}

.nahverkehr {
  font-size: 0.95rem;
  margin-top: 0.8rem;
}

.nahverkehr::before {
  content: "🚶‍♂️ "; /* kleines Fußgänger-Symbol */
  font-size: 1.1rem;
}

    /* =========================
       HEADER / NAV
       ========================= */
    header {
      background: rgba(0, 0, 0, 0.97);
      border-bottom: 1px solid var(--border-soft);
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.6rem 0.3rem;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .nav-logo img {
      height: 44px;  /* Logo in der Navi */
      width: auto;
      display: block;
    }

    .nav-title {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--accent-gold);
    }

    .nav-subtitle {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    .nav-links {
      display: flex;
      flex-wrap: nowrap;      /* WICHTIG: alles in einer Zeile lassen */
      gap: 1rem;              /* etwas Abstand, bei Bedarf kleiner machen */
      justify-content: flex-end;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.13em;
    }

    @media (max-width: 900px) {
      .nav-links {
        flex-wrap: wrap;      /* auf Handy darf es wieder umbrechen */
        gap: 0.5rem;
      }
    }

    .nav-main-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.nav-legal-links {
  display: flex;
  align-items: center;
  margin-left: 0.8rem;       /* kleiner Abstand zur Haupt-Navi */
  padding-left: 0.8rem;
  border-left: 1px solid var(--border-soft); /* optische Trennung */
}

.nav-legal-links a {
  font-size: 0.7rem;         /* etwas kleiner */
  color: var(--text-muted);  /* etwas dezenter */
}

.nav-legal-links a:hover {
  color: var(--accent-gold);
  background: rgba(225, 58, 34, 0.12);
  border-color: var(--accent-red);
}

    .nav-links a {
      text-decoration: none;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      border: 1px solid transparent;
      color: var(--text-main);
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .nav-links a:hover {
      background: rgba(225, 58, 34, 0.18);
      border-color: var(--accent-red);
      color: var(--accent-gold);
    }

    @media (max-width: 720px) {
      nav {
        flex-direction: column;
        align-items: flex-start;
      }
      .nav-links {
        width: 100%;
        justify-content: flex-start;
      }
    }

    /* =========================
       SECTIONS / CARDS
       ========================= */
    main {
      padding: 2rem 0 3rem;
    }

    section {
      margin-bottom: 2.4rem;
      background: radial-gradient(circle at top, #1b1b1b 0, #101010 55%, #050505 100%);
      border-radius: 18px;
      padding: 1.9rem 1.6rem;
      border: 1px solid var(--border-soft);
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
      position: relative;
      scroll-margin-top: 95px; /* Überschriften bei Anker-Links sichtbar */
      overflow: hidden;
    }

    section::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      border: 1px solid transparent;
      background:
        linear-gradient(130deg, rgba(209, 140, 54, 0.35), transparent 45%, rgba(225, 58, 34, 0.25)) border-box;
      mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0.55;
      pointer-events: none;
    }

    h1, h2, h3 {
      margin-top: 0;
      font-weight: 800;
    }

    h2 {
      font-size: 1.3rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent-gold);
    }

    h3 {
      font-size: 0.95rem;
      color: var(--accent-red);
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    p {
      margin: 0.35rem 0 0.8rem;
      font-size: 0.96rem;
    }

    ul {
      padding-left: 1.2rem;
      margin: 0.4rem 0 0.9rem;
    }

    .muted {
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    strong {
      color: #ffffff;
      font-weight: 700;
    }


.hero-text {
  max-width: 36rem;
}

/* kleine Überschrift über dem Titel */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.72rem;
  color: var(--accent-gold-soft);
  margin-bottom: 0.6rem;
}

/* kurzer Einführungs-Text */
.hero-lead {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  color: var(--text-main);
}

/* Fakten-Badges (Verkauf / Ort / Öffnungszeiten) */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-badge-label {
  color: var(--text-muted);
}

.hero-badge-value {
  font-weight: 600;
  color: var(--accent-gold);
}

/* Hinweistext unten */
.hero-note {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 32rem;
}

.hero-note-highlight {
  font-weight: 700;
  color: var(--accent-gold);
}

/* rechte Spalte (Slider) optional etwas begrenzen */
.hero-slider {
  min-height: 260px;
}

.hero {
  display: grid;
  gap: 1.8rem;
  background:
    radial-gradient(circle at 20% 0%, #3a2215 0, transparent 45%),
    radial-gradient(circle at 80% 10%, #5b3420 0, transparent 55%),
    #050505;
  border-color: rgba(216, 166, 70, 0.4);
  align-items: stretch;
}

@media (min-width: 780px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.72rem;
  color: var(--accent-gold-soft);
  margin-bottom: 0.35rem;
}

.hero-tagline {
  font-size: 0.98rem;
  color: var(--text-main);
  max-width: 30rem;
}

/* Slider-Container rechts */
.hero-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  background: #000;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
}

/* einzelne Slides */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Verdunkelung & Inhalt */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.15)
  );
}

.hero-slide-content {
  position: absolute;
  inset: auto 1.3rem 1.3rem 1.3rem;
  max-width: 85%;
}

.hero-slide-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-gold-soft);
  margin-bottom: 0.25rem;
}

.hero-slide-title {
  font-size: 1.5rem;
  font-weight: 850;
  margin-bottom: 0.2rem;
}

.hero-slide-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Slider-Navigation (Dots) */
.hero-slider-dots {
  position: absolute;
  left: 1.auto;
  right: 20px;
  bottom: 1.1rem;
  display: flex;
  gap: 0.4rem;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.hero-dot.active {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  transform: scale(1.1);
}

@media (max-width: 779px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-slider {
    min-height: 220px;
    order: -1; /* Slider nach oben auf Mobile */
  }
}

    /* =========================
       LAYOUT-HILFEN
       ========================= */
    .two-column {
      display: grid;
      gap: 1.6rem;
    }

/* Hersteller-Artikel-Übersicht */
.hersteller-gruppe {
  margin-top: 2rem;
  scroll-margin-top: 170px;
}

/* Überschriften etwas klarer trennen */
.hersteller-gruppe h3 {
  margin-bottom: 0.6rem;
  letter-spacing: 0.18em;
  font-size: 1rem;
}

/* Hersteller-Unterzeile feiner */
.hersteller-subline {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

.artikel-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.artikel-card {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  padding: 0.6rem;
  display: flex;              /* Flexbox aktiv */
  flex-direction: column;     /* Elemente top → bottom */
  gap: 0.6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.artikel-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;        /* Verzerrung vermeiden */
  background: #fff;
  border-radius: 8px;
}

.artikel-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.artikel-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mehr-link {
  margin-top: auto;            /* Drückt Link nach unten */
  font-size: 0.87rem;
  color: var(--accent-gold);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

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

/* 5. Kachel „…und vieles mehr“ */
.artikel-card.mehr {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at top, #3a2215 0, #101010 50%, #050505 100%);
  border-color: rgba(216, 166, 70, 0.7);
}

.artikel-card.mehr .artikel-name {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-gold);
}

.artikel-card.mehr .artikel-info {
  color: var(--text-main);
}

    @media (min-width: 780px) {
      .two-column {
        grid-template-columns: 1.25fr 1fr;
      }
    }

    .tag {
      display: inline-block;
      padding: 0.2rem 0.65rem;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
      font-size: 0.75rem;
      margin-right: 0.3rem;
      margin-bottom: 0.3rem;
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .faq-item {
      margin-bottom: 1rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px dashed var(--border-soft);
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    /* =========================
       FOOTER
       ========================= */
    footer {
      background: #000;
      color: var(--text-muted);
      font-size: 0.85rem;
      padding: 1rem 0;
      border-top: 1px solid var(--border-soft);
    }

    footer a {
      color: var(--accent-gold);
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    /* Lightbox Hintergrund */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Großes Bild */
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

/* Lightbox aktiv */
.lightbox-overlay.active {
  display: flex;
}

/* Cursor Hinweis */
.lightbox-trigger {
  cursor: zoom-in;
}

.artikel-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  
  /* alles, was abschneidet, deaktivieren */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;          /* überschreibt evtl. -webkit-box */
}

.artikel-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #101010, #050505);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.artikel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
  border-color: rgba(216, 166, 70, 0.8);
  background: radial-gradient(circle at top, #1d120a 0, #050505 55%);
}

/* Bild-Frame */
.artikel-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.25s ease;
}

/* leichter Zoom beim Hover */
.artikel-card:hover img {
  transform: scale(1.04);
}

/* “Mehr erfahren” optisch als Button */
.mehr-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--accent-gold);
  text-decoration: none;
  padding: 0.25rem 0;
}

.mehr-link::after {
  content: "↗";
  font-size: 0.85em;
  transition: transform 0.18s ease;
}

.mehr-link:hover::after {
  transform: translateX(3px) translateY(-1px);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
}

/* Navi etwas höher & moderner */
header {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
}

nav {
  min-height: 64px;
}

/* Links: moderne Underline-Animation */
.nav-links a {
  position: relative;
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text-main);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.nav-links a:hover {
  background: rgba(225, 58, 34, 0.12);
  border-color: rgba(225, 58, 34, 0.55);
  color: var(--accent-gold);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

section {
  margin-bottom: 3rem;
  padding: 2.2rem 1.9rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at top, #20120a 0, #101010 55%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.9);
}

/* leichter Glow beim Hover der Sektion */
section:hover {
  border-color: rgba(216, 166, 70, 0.5);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.hersteller-mini-nav::-webkit-scrollbar {
  display: none;
}

.hersteller-mini-nav a img {
  height: 45px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hersteller-mini-nav a img:hover {
  opacity: 1;
  transform: scale(1.08);
}

.sortiment-logo-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 110px;          /* <- hier höher setzen, z.B. 110–130px */
  z-index: 80;         /* über dem Header (Header hat z-index: 50) */

  display: none;       /* bleibt korrekt, Anzeige steuern wir per JS */

  padding: 0.35rem 1.2rem;
  background: radial-gradient(circle at top, #1a120b 0, #050505 60%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

/* wird vom JS an/aus geschaltet */
.sortiment-logo-bar.visible {
  display: flex;
}

.sortiment-logo-bar img {
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
  border-radius: 4px;
}

.sortiment-logo-bar a:hover img {
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.9));
}

/* =========================
   SOCIAL MEDIA BAR
   ========================= */
.social-bar {
  position: sticky;
  top: 64px; /* sitzt direkt unter deinem Header */
  z-index: 45;
  display: flex;
  justify-content: center;
  gap: 1.4rem;

  padding: 0.45rem 0.8rem;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
}

.social-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  color: var(--accent-gold);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-bar a:hover {
  background: rgba(216,166,70,0.12);
  transform: translateY(-1px);
  color: var(--accent-gold);
}

.social-bar img {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.social-bar a:hover img {
  opacity: 1;
}

@media (max-width: 720px) {
  .social-bar span {
    display: none; /* nur Icons auf Mobile */
  }
}

/* =========================
   HERO / START – NEUES LAYOUT
   ========================= */

.hero {
  position: relative;
  overflow: hidden;

  display: grid;
  gap: 1.8rem;
  align-items: stretch;

  background:
    radial-gradient(circle at 20% 0%, rgba(255, 80, 40, 0.35) 0, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(216, 166, 70, 0.28) 0, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(255, 0, 0, 0.18) 0, transparent 60%),
    #020202;
  border-color: rgba(216, 166, 70, 0.7);
}

@media (min-width: 780px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero-text {
  max-width: 36rem;
}

/* kleiner Eyebrow-Text */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.72rem;
  color: var(--accent-gold-soft);
  margin-bottom: 0.6rem;
}

/* Fetter Titel mit Glow */
@keyframes heroGlow {
  0%   { text-shadow: 0 0 14px rgba(0, 0, 0, 0.8),
                 0 0 30px rgba(216, 166, 70, 0.35); }
  50%  { text-shadow: 0 0 20px rgba(0, 0, 0, 1),
                 0 0 40px rgba(216, 166, 70, 0.6); }
  100% { text-shadow: 0 0 14px rgba(0, 0, 0, 0.8),
                 0 0 30px rgba(216, 166, 70, 0.35); }
}

.hero h1 {
  margin: 0 0 0.9rem;
  font-size: 3.2rem;
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  /* HIER die Änderungen */
  color: #fffaf0; /* fast weiß, leicht warm */
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(0, 0, 0, 0.9);

  animation: heroGlow 2.8s ease-in-out infinite;
}

/* Subline unter dem Titel */
.hero-subline {
  margin: 0 0 1.1rem;
  font-size: 1.02rem;
  color: #f6f6f6;
  max-width: 32rem;
}

/* Fakten-Badges */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-badge-label {
  color: var(--text-muted);
}

.hero-badge-value {
  font-weight: 600;
  color: var(--accent-gold);
}

/* Hinweistext unten */
.hero-note {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 32rem;
}

.hero-note-highlight {
  font-weight: 700;
  color: var(--accent-gold);
}

/* Buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.1rem;
  border-radius: 999px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.hero-button.primary {
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-red)100%);
  color: #000;
  box-shadow: 0 0 24px rgba(216, 166, 70, 0.55);
}

.hero-button.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px #e13a22b3;
}

.hero-button.ghost {
  background: transparent;
  color: var(--accent-gold);
  border-color: rgba(216, 166, 70, 0.6);
}

.hero-button.ghost:hover {
  background: rgba(216, 166, 70, 0.12);
  transform: translateY(-2px);
}

/* kleine Highlight-Leiste unten */
.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.hero-highlights span {
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(0,0,0,0.5);
}

/* Slider rechts – bleibt wie gehabt */
.hero-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  background: #000;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
}

/* Slides etc. kannst du aus deinem bisherigen CSS lassen,
   die funktionieren ja schon gut */

/* Animation „reinfallen“ */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-text > * {
  animation: heroFadeUp 0.7s ease forwards;
  opacity: 0;
}

.hero-text > *:nth-child(1) { animation-delay: 0.0s; }
.hero-text > *:nth-child(2) { animation-delay: 0.05s; }
.hero-text > *:nth-child(3) { animation-delay: 0.12s; }
.hero-text > *:nth-child(4) { animation-delay: 0.2s; }
.hero-text > *:nth-child(5) { animation-delay: 0.3s; }
.hero-text > *:nth-child(6) { animation-delay: 0.4s; }
.hero-text > *:nth-child(7) { animation-delay: 0.5s; }

@media (max-width: 779px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    font-size: 2.4rem;
  }

  .hero-slider {
    min-height: 220px;
    order: -1; /* Slider nach oben auf Mobile */
  }
}

/* === NOTFALL-FIX: HERO-ÜBERSCHRIFT SICHTBAR MACHEN === */
#start.hero h1 {
  color: #df3015b3 !important;      /* hell / gut lesbar */
  opacity: 1 !important;          /* auf jeden Fall sichtbar */
  position: relative;             /* über evtl. Overlays */
  z-index: 5 !important;
  mix-blend-mode: normal;
}

.hero-actions {
  justify-content: center;
}

body.datenschutz h1 {
  color: var(--accent-red); /* oder deine gewünschte Farbe */
}
body.datenschutz h2,
body.datenschutz h3 {
  color: var(--accent-gold); /* oder deine gewünschte Farbe */
}