/* ----------------------------------------------------
   FONTS
-----------------------------------------------------*/
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------
   DESIGN TOKENS (CI)
-----------------------------------------------------*/
:root{
    /* Farben */
    --gold: #FED141;
    --black: #000000;
    --grey-900: #0b0b0b;
    --grey-800: #111111;
    --grey-700: #1E1E1E;
    --grey-400: #495057;
    --grey-300: #CCCCCC;
    --white: #ffffff;

    /* Bootstrap mappings */
    --bs-primary: var(--gold);

    /* Typo */
    --font-base: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fs-base: 1rem;                 /* 16px */
    --fs-sm: .95rem;
    --fs-xs: .9rem;
    --lh-base: 1.6;

    /* Headings (responsive) */
    --h1: clamp(2.2rem, 2.5vw + 1.6rem, 4.5rem);
    --h2: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
    --h5: 1.125rem;

    /* Spacing & Radius */
    --space-section: 4.5rem;
    --radius: .75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-sm: 0 4px 16px rgba(0,0,0,.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,.12);
    --shadow-lg: 0 12px 36px rgba(0,0,0,.18);

    /* Transitions */
    --tr-fast: .2s ease;
    --tr-med: .25s ease;
}

/* ----------------------------------------------------
   BASE / GLOBAL
-----------------------------------------------------*/
html { scroll-behavior: smooth; }
body { font-family: var(--font-base); font-size: var(--fs-base); line-height: var(--lh-base); background: var(--grey-700);  }

.bg-dark { background-color: var(--grey-700) !important; }
.bg-black { background-color: var(--black) !important; }
.color-lightgrey { color: var(--grey-300) !important; }

.py-6 { padding-block: var(--space-section); }

h1{ font-weight:700; font-size: var(--h1); line-height:1.2; color: var(--gold); margin-bottom: .5em; }
h2{ font-weight:800; font-size: var(--h2); line-height:1.25; color: var(--gold); margin-bottom: .75em; }
h5{ font-weight:700; font-size: var(--h5); }

.page-footer, #footer { font-size: var(--fs-sm); }

/* Links (goldener CI-Link) */
a.footer-link, a.product-link, .link-privacy{
    color: var(--gold); text-decoration: none; transition: color var(--tr-fast), text-decoration var(--tr-fast);
}
a.footer-link:hover, a.product-link:hover, .link-privacy:hover{
    color: color-mix(in oklab, var(--gold) 85%, black 15%); text-decoration: underline;
}

/* ----------------------------------------------------
   NAVBAR
-----------------------------------------------------*/
.nav-glass{
    background: rgba(0,0,0,.45);
    backdrop-filter: saturate(160%) blur(10px);
    transition: background var(--tr-med), box-shadow var(--tr-med);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-glass.scrolled{ background: #0b0b0b; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.navbar-brand{ color: var(--gold) !important; }
.navbar-dark .navbar-nav .nav-link{
    color: rgba(255,255,255,.85); padding: .6rem .9rem; position: relative; transition: color var(--tr-fast);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link{ color: var(--gold); }
.navbar-dark .navbar-nav .nav-link::after{
    content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2px;
    background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform var(--tr-med);
}
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after{ transform: scaleX(1); }
.navbar-dark .dropdown-toggle::after{ border-top-color: var(--gold); }

/* Dropdown dunkel + goldene States */
.dropdown-menu.dropdown-menu-dark{
    --bs-dropdown-bg: #0f0f0f;
    --bs-dropdown-color: rgba(255,255,255,.9);
    --bs-dropdown-border-color: rgba(255,255,255,.08);
    --bs-dropdown-link-color: rgba(255,255,255,.9);
    --bs-dropdown-link-hover-bg: color-mix(in oklab, var(--gold) 18%, transparent);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: color-mix(in oklab, var(--gold) 28%, black 72%);
    --bs-dropdown-link-active-color: #fff;
    border: 1px solid var(--bs-dropdown-border-color);
    border-radius: var(--radius);
    padding: .5rem; margin-top: .4rem;
    opacity: 0; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease;
}
.show > .dropdown-menu.dropdown-menu-dark{ opacity:1; transform: translateY(0); }

/* Toggler sichtbar */
.navbar-dark .navbar-toggler{ border-color: rgba(255,255,255,.25); }
.navbar-dark .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.15); }

/* Navbar-CTA */
.nav-cta{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.5rem .85rem; border:1px solid var(--gold);
    border-radius:.6rem; color: var(--gold); text-decoration:none; transition: all var(--tr-fast);
}
.nav-cta:hover{ background: var(--gold); color: var(--black); }

/* Mobile-Dropdown-Fix */
@media (max-width: 991.98px){
    .navbar-nav .dropdown-menu{ position: static; float:none; width:100%; margin:.25rem 0 .5rem; }
    .navbar-nav .dropdown-menu.dropdown-menu-dark{ opacity:1 !important; transform:none !important; transition:none; }
    .navbar-brand img{ height: 36px; }
}

/* ----------------------------------------------------
   HERO (Video)
-----------------------------------------------------*/
.hero-section{
    min-height: 100vh; display:flex; align-items:center; position:relative; overflow:hidden; background: var(--black);
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.55); z-index:1; }
.hero-content{ position:relative; z-index:2; }
.hero-accent{ color: var(--gold); }

.badge-hero{
    padding:.35rem .8rem; border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--gold) 18%, transparent);
    color: var(--black); font-weight:600; font-size:.95rem;
}

/* Chips */
.hero-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.chip{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .65rem; border-radius: .6rem;
    background: rgba(255,255,255,.15); color:#fff; font-weight:500; font-size: var(--fs-xs);
}
.chip i{ color: var(--gold); }

/* Variante für dunklen Hintergrund */
.chip.dark {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.chip.dark i { color: var(--gold); }

/* Variante für hellen Hintergrund */
.chip.light {
    background: color-mix(in oklab, var(--gold) 18%, transparent);
    color: var(--black);
}
.chip.light i { color: var(--gold); }

@media (min-width:768px){ .hero-chips{ justify-content:flex-start; } }
@media (max-width:767.98px){ .hero-chips{ justify-content:center; } }

/* CTAs (gemeinsam für Hero/Kontakt) */
.cta, .cta-btn{
    display:inline-flex; align-items:center; gap:.55rem;
    border-radius: .8rem; padding:.75rem 1.2rem; font-weight:700;
    text-decoration:none; transition: all var(--tr-med); font-size:1.05rem;
}
.cta.filled, .cta-btn.filled{ background: var(--gold); color: var(--black); }
.cta.filled:hover, .cta-btn.filled:hover{ background: color-mix(in oklab, var(--gold) 85%, black 15%); color:#fff; transform: translateY(-2px); }
.cta.outline, .cta-btn.outline{ border:2px solid var(--gold); color: var(--gold); }
.cta.outline:hover, .cta-btn.outline:hover{ background: var(--gold); color: var(--black); transform: translateY(-2px); }

/* ----------------------------------------------------
   PRODUKTE
-----------------------------------------------------*/
#produkte{
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(var(--grey-800), var(--grey-900));
}
#produkte h2{ color:#fff; }
#produkte .lead{ color: rgba(255,255,255,.8) !important; }

#produkte .product-card{ background:#fff; border:0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--tr-med), transform var(--tr-med); overflow:hidden; }
#produkte .product-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-2px); }
#produkte .product-card .card-body{ padding: 1rem 1.25rem 1.25rem; }
#produkte .product-card p{ color: var(--grey-400) !important; }

#produkte .product-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:#000; }
#produkte .product-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .35s ease, filter .35s ease; display:block; }
#produkte .product-card:hover .product-media img{ transform: scale(1.06); filter: saturate(1.05); }
#produkte .product-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); pointer-events:none; }

#produkte .product-tag{
    position:absolute; left:1rem; bottom:1rem; z-index:2;
    display:inline-block; padding:.45rem .85rem; border-radius: var(--radius);
    background: var(--gold); color: var(--black); font-weight:600; font-size:1rem; box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

/* Produkt-Links (dezente Variante) */
.product-link{ color: var(--gold); font-weight:500; text-decoration:none; transition: color var(--tr-fast); }
.product-link:hover{ color: color-mix(in oklab, var(--gold) 85%, black 15%); text-decoration: underline; }

/* ----------------------------------------------------
   KONTAKT-CTA (Section)
-----------------------------------------------------*/
#kontakt{ background: linear-gradient(180deg, #0b0b0b 0%, #000 100%); }

/* ----------------------------------------------------
   TESTIMONIALS
-----------------------------------------------------*/
.tst-card{ border:0; height:100%; transition: transform var(--tr-med), box-shadow var(--tr-med); }
.tst-card:hover{ transform: translateY(-4px); }
.tst-quote{ width:42px; height:42px; border-radius: var(--radius-pill); margin-bottom:2rem; color: var(--gold); font-size:80px; line-height:1; }
.tst-text{ font-size: 1.25rem; line-height:1.6; color:#212529; }
.tst-name{ font-weight:600; color:#495057; }
.stars{ display:inline-flex; gap:2px; margin:.6rem 0 .2rem; }
.star{ width:32px; height:32px; }
.star.filled path{ fill: var(--gold); }
.star.empty  path{ fill:#e9ecef; }

/* Carousel Controls */
.custom-control{
    width:auto; height:auto; top:50%; transform: translateY(-50%);
    background:#fff; color: var(--black);
    border-radius: var(--radius-pill); padding:.5rem .8rem; opacity:1;
}
.custom-control span{ font-size:1.75rem; line-height:1; }

/* Indikatoren */
.carousel-indicators{ margin-top:2rem; position:static; }
.carousel-indicators [data-bs-target]{
    width:12px; height:12px; border-radius:50%;
    background-color: var(--gold); opacity:.5;
    transition: opacity var(--tr-med), transform var(--tr-med); margin: 0 6px;
}
.carousel-indicators .active{ opacity:1; transform: scale(1.2); }

@media (max-width: 767.98px){
    .tst-card{ margin-bottom: 1rem; }
}

/* ----------------------------------------------------
   TIMELINE (Prozess)
-----------------------------------------------------*/
.timeline{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:2rem; }
.timeline-step{
    background:#fff; border-radius: var(--radius);
    padding:2rem 1.5rem; text-align:center; box-shadow: var(--shadow-sm);
    transition: transform var(--tr-med), box-shadow var(--tr-med);
}
.timeline-step:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.timeline-icon{
    width:64px; height:64px; margin:0 auto 1rem; border-radius:50%;
    background: color-mix(in oklab, var(--gold) 18%, transparent);
    display:flex; align-items:center; justify-content:center; font-size:1.6rem; color: var(--gold);
}
.timeline-step h5{ margin-bottom:.75rem; }

/* ----------------------------------------------------
   FORMULAR (Kontaktformular)
-----------------------------------------------------*/
#kontaktformular .btn-send{
    background: var(--gold); color: var(--black); font-weight:700;
    border:none; border-radius:.65rem; padding:.65rem 1.2rem; transition: all var(--tr-fast);
}
#kontaktformular .btn-send:hover{ background: color-mix(in oklab, var(--gold) 85%, black 15%); color:#fff; transform: translateY(-1px); }
#kontaktformular .btn-outline-call{
    border:1px solid var(--gold); color: var(--gold); border-radius:.65rem; padding:.65rem 1.1rem; font-weight:600; text-decoration:none; transition: all var(--tr-fast);
}
#kontaktformular .btn-outline-call:hover{ background: var(--gold); color: var(--black); }
#kontaktformular .contact-link{ color: inherit; text-decoration:none; }
#kontaktformular .contact-link:hover{ color: var(--gold); text-decoration: underline; }

/* ----------------------------------------------------
   FOOTER
-----------------------------------------------------*/
#footer{ line-height:1.6; }
#footer h5, #footer h6{ color:#fff; }
.footer-link{ color: rgba(255,255,255,.7); }
.footer-link:hover{ color: var(--gold); }
.social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,.08); color: var(--gold);
    font-size:1.2rem; transition: all var(--tr-med);
}
.social-link:hover{ background: var(--gold); color: var(--black); }

/* ----------------------------------------------------
   MISC / LEGACY CLEANUP
-----------------------------------------------------*/
/* Entfernt alte, nicht mehr genutzte Styles:
   .btn-primary color override, .testimonial blockquote, h1/h2 Doppeldefinitionen, 
   doppelte .py-6 und mehrfach definierte Dropdown-Regeln wurden konsolidiert. */


/* Sub-Hero generisch */
.subhero{
    position: relative;
    display: grid;
    align-items: center;
    min-height: 46vh;                 /* etwas Höhe, ohne zu „dominant“ zu sein */
    padding-block: calc(var(--space-section) * .7);
    /* Offset für fixe Navbar – wird via JS als --nav-h gesetzt */
    padding-top: calc(var(--space-section) * .7 + var(--nav-h, 64px));
    overflow: hidden;
}

/* Hintergrund/Overlay (Kontakt: dunkler Verlauf + subtiler Glare) */
.subhero--kontakt{
    background:
        radial-gradient(900px 360px at 80% -120px, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, #000 0%, #0b0b0b 100%);
}
.subhero--kontakt::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.subhero__inner{ position: relative; z-index: 1; }

/* Badge nutzt schon deine CI-Klasse .badge-hero */


/* Schmale Breadcrumb-Leiste unter Sub-Hero */
.breadcrumb-bar{
    background: #0f0f0f;
    padding-block: .55rem;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Bootstrap-Breadcrumb veredeln */
.breadcrumb{
    --bs-breadcrumb-margin-bottom: 0;
    --bs-breadcrumb-divider: '›'; /* schmaler Pfeil; alternativ: '/' */
    background: transparent;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a{
    color: rgba(255,255,255,.75);
    font-size: .95rem;
    text-decoration: none;
    transition: color .2s ease;
}

.breadcrumb .breadcrumb-item a:hover{
    color: var(--gold);
    text-decoration: underline;
}

.breadcrumb .breadcrumb-item.active{
    color: rgba(255,255,255,.5);
}

/* Optional: etwas schmaler auf Mobile */
@media (max-width: 575.98px){
    .breadcrumb .breadcrumb-item,
    .breadcrumb .breadcrumb-item a{ font-size: .9rem; }
}

.card:hover .card-img-top{ transform: scale(1.03); transition: transform .25s ease; }
.card .card-img-top{ transform: scale(1); transition: transform .25s ease; }

/* Kompakte Produktspezifikationen (vertikal) */
.spec-table{
    display:grid;
    grid-template-columns: 1fr auto; /* Label links, Wert rechts */
    gap:.35rem .75rem;
    padding:.75rem .9rem;
    border:1px solid rgba(0,0,0,.06);
    border-radius:.6rem;
    background:#fff;
}
.spec-table dt{
    margin:0; color:#6c757d; font-weight:600; font-size:.95rem;
}
.spec-table dd{
    margin:0; color:#212529; font-weight:700; font-size:.95rem;
    text-align:right;
}

/* zarte Trenner – jede zweite Zeile, ohne extra Markup */
.spec-table dt:nth-of-type(n+3),
.spec-table dd:nth-of-type(n+3){
    border-top:1px dashed rgba(0,0,0,.08);
    padding-top:.35rem;
}

/* Badges für kurze Hinweise (optional) */
.spec-badge{
    display:inline-block; padding:.15rem .45rem; border-radius:.5rem;
    background: color-mix(in oklab,var(--gold) 18%, transparent);
    color: var(--black); font-weight:600; font-size:.85rem;
}

/* Mobile: einspaltig stapeln */
@media (max-width: 575.98px){
    .spec-table{ grid-template-columns: 1fr; }
    .spec-table dd{ text-align:left; }
}


.toc-sticky{
    position: sticky; top: 96px;
    background: #0f0f0f; border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem; padding: 1rem;
}
.toc-sticky .toc-title{ font-weight: 700; color: var(--gold); margin-bottom: .5rem; }
.toc-sticky a{
    display:block; padding:.4rem .5rem; border-radius:.5rem;
    color: rgba(255,255,255,.85); text-decoration:none; font-weight:600;
}
.toc-sticky a:hover{ background: color-mix(in oklab,var(--gold) 14%, transparent); color:#fff; }
.toc-sticky a.active{ color:#000; background: var(--gold); }

.prod-section{
    background:#fff; border:0; border-radius:1rem; overflow:hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
/* Einheitlicher Media-Wrapper für Video & Bild */
.prod-media{
  position: relative;
  background:#000;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0; /* bereits durch .prod-section gerundet */
}
.prod-media video,
.prod-media img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  background: #FFF;
}
.prod-section:hover .prod-media img{
  transform: scale(1.03);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.04);
}

/* Kompakte Spezifikations-Tabelle (falls noch nicht global eingebunden) */
.spec-table{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:.35rem .75rem;
  padding:.75rem .9rem;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.6rem;
  background:#fff;
}
.spec-table dt{
  margin:0; color:#6c757d; font-weight:600; font-size:.95rem;
}
.spec-table dd{
  margin:0; color:#212529; font-weight:700; font-size:.95rem; text-align:right;
}
.spec-table dt:nth-of-type(n+3),
.spec-table dd:nth-of-type(n+3){
  border-top:1px dashed rgba(0,0,0,.08);
  padding-top:.35rem;
}
@media (max-width:575.98px){
  .spec-table{ grid-template-columns: 1fr; }
  .spec-table dd{ text-align:left; }
}

  /* Referenz-Cards */
  .ref-card{
    border:0; border-radius:16px; overflow:hidden; background:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,.08);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .ref-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.14);
  }

  /* Medienbereich: erzwingt immer gleiche Höhe über Seitenverhältnis */
  .ref-card__media{ 
    aspect-ratio: 4 / 3;           /* => alle Bilder exakt gleich groß */
    width:100%; height:auto;
    object-fit:cover; display:block;
    background:#eee;
    transition:transform .4s ease;
  }
  .ref-card:hover .ref-card__media{ transform:scale(1.03); }

  /* Fallback für alte Browser ohne aspect-ratio */
  @supports not (aspect-ratio: 1){
    .ref-card__media-wrap{position:relative;width:100%;padding-top:75%;overflow:hidden;}
    .ref-card__media-wrap > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  }

  .ref-card__media-link{display:block; position:relative; overflow:hidden;}
  .ref-card__media-link::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%);
    opacity:0; transition:opacity .25s ease;
  }
  .ref-card:hover .ref-card__media-link::after{ opacity:.9; }

  .ref-card__body{ padding:1rem 1.125rem 1.25rem; background:#fff; }
  .ref-card__title a{ text-decoration:none; color:inherit; }
  .ref-card__meta{ color:#6c757d; } /* text-secondary */

  /* Badge als Overlay oben links */
  .ref-badge{
    position:absolute; left:.75rem; top:.75rem;
    background:rgba(0,0,0,.6); color:#fff;
    border:1px solid rgba(255,255,255,.2);
  }

  /* optional: dezente goldene Kante beim Hover */
  .ref-card:hover{ outline:1px solid color-mix(in oklab, var(--gold) 38%, transparent); outline-offset:-1px; }

  
  /* Navbar darf Dropdowns überlappen lassen */
#mainNav { overflow: visible; }

/* Ab Desktop: min. Abstand + unsichtbarer Puffer oberhalb des Menüs */
@media (min-width: 992px){
  #mainNav .dropdown-menu{
    margin-top: .4rem;               /* kleiner, definierter Versatz */
    transition: opacity .15s ease, transform .15s ease;
  }
  /* unsichtbarer Streifen zum Überbrücken des Mauswegs */
  #mainNav .dropdown-menu::before{
    content:""; position:absolute; left:0; right:0; top:-10px; height:12px;
  }
}

 .brand-tile{
      --tile-radius: 14px;
      --tile-padY: clamp(.5rem, 1.6vw, .9rem);
      --tile-padX: clamp(.75rem, 2vw, 1.2rem);
      width: 100%;
      max-width: 260px;
      height: clamp(70px, 10vw, 90px);
      padding: var(--tile-padY) var(--tile-padX);
      border-radius: var(--tile-radius);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 6px 22px rgba(0,0,0,.06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
      text-decoration: none;
    }
    /* Helle Kachel (Standard) – ideal für schwarze & bunte Logos */
    .brand-tile--light{
      background: linear-gradient(180deg,#fff 0%, #f7f9fc 100%);
    }
    /* Dunkle Kachel – falls ein Logo sehr hell/weiß ist */
    .brand-tile--dark{
      background: linear-gradient(180deg,#121417 0%, #171a1f 100%);
      border-color: rgba(255,255,255,.08);
      box-shadow: 0 8px 26px rgba(0,0,0,.25);
    }
    .brand-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0,0,0,.10);
      border-color: color-mix(in oklab, var(--gold) 36%, transparent);
    }

    /* Logos: immer farbecht, sauber skaliert */
    .brand-tile img{
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      display: block;
      /* Keine Filter/Grayscale – echte CI-Farben bleiben erhalten */
    }

    /* Auch auf dunklen Seiten bleibt die Kachel hell – guter Kontrast für schwarze Logos */
    .bg-dark .brand-tile--light{ background: linear-gradient(180deg,#fff 0%, #f5f7fb 100%); }
    .bg-dark .brand-tile--dark{ background: linear-gradient(180deg,#0f1114 0%, #15181e 100%); }
    
     .tag-cloud{ gap: .5rem .6rem; max-width: 1100px; }
    .tag-item{
      --padY: .44rem; --padX: .9rem; --radius: 999px;
      display:inline-block; text-decoration:none; white-space:nowrap;
      border-radius: var(--radius);
      border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent);
      background: color-mix(in oklab, var(--gold) 16%, #fff);
      color: #111;
      box-shadow: 0 4px 14px rgba(0,0,0,.04);
      transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
    }
    .tag-item:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      border-color: color-mix(in oklab, var(--gold) 42%, transparent);
      background: color-mix(in oklab, var(--gold) 22%, #fff);
    }

    /* Gewichte 1..5 steuern Größe/Prominenz */
    .tag-w1{ font-size: .95rem; padding: calc(var(--padY) - .08rem) calc(var(--padX) - .10rem); }
    .tag-w2{ font-size: 1.05rem; padding: var(--padY) var(--padX); }
    .tag-w3{ font-size: 1.15rem; padding: calc(var(--padY) + .04rem) calc(var(--padX) + .08rem); }
    .tag-w4{ font-size: 1.28rem; padding: calc(var(--padY) + .10rem) calc(var(--padX) + .14rem); letter-spacing: .1px; }
    .tag-w5{ font-size: 1.42rem; padding: calc(var(--padY) + .16rem) calc(var(--padX) + .22rem); letter-spacing: .15px; }

    /* leichte Variation für „Wolken“-Gefühl (optional) */
    .tag-item:nth-child(3n){ transform: translateY(-1px); }
    .tag-item:nth-child(5n){ transform: translateY(1px); }
    @media (max-width: 575.98px){
      .tag-w5{ font-size: 1.28rem; }
      .tag-w4{ font-size: 1.18rem; }
    }