/* ==========================================================================
   SKM Pumpen-Center — Design System & Stylesheet
   Apple/Mac-inspiriert · Bootstrap 5 Erweiterung
   Version: 1.0 · Phase 3 Frontend Blueprint
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* --- Farben: Primär (CI-Farbe bestätigt) --- */
  --color-primary: #09458d;
  --color-primary-rgb: 9, 69, 141;
  --color-primary-dark: #062f60;
  --color-primary-light: #ececfb;
  --color-primary-lighter: #f4f4fd;

  /* --- Farben: Neutral --- */
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* --- Farben: Funktion --- */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;

  /* --- Typografie --- */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", "Fira Code", Consolas, monospace;

  /* --- Spacing (8px Grid) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-16: 7.5rem;   /* 120px */

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Schatten --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Layout --- */
  --container-max: 1280px;
  --content-max: 780px;
  --navbar-height: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  font-family: var(--font-family-base);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--color-gray-800);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-dark);
}

/* Fokus-State (Accessibility) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-gray-900);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-weight: 600;
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h3 {
  font-size: 1.75rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1.375rem;
  line-height: 1.35;
}
h5 {
  font-size: 1.125rem;
  line-height: 1.4;
}
h6 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  max-width: 75ch; /* Optimale Lesebreite */
}

.text-small {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.text-caption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-gray-500);
}

.overline {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-gray-600);
}

/* Responsive Typografie */
@media (max-width: 991.98px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}
@media (max-width: 575.98px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   4. LAYOUT & SEKTIONEN
   -------------------------------------------------------------------------- */
.container-skm {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.content-narrow {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Sektionen mit großzügigem Weißraum */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.section--sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.section--lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Hintergründe */
.section--gray {
  background-color: var(--color-gray-50);
}
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.section--primary h2,
.section--primary h3,
.section--primary p {
  color: var(--color-white);
}
.section--dark {
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
}

/* Sektions-Header (zentriert) */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.section-header p {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar-skm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition-base);
}
.navbar-skm.scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar-skm__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Logo */
.navbar-skm__logo img {
  height: 40px;
  width: auto;
}

/* Navigation Links */
.navbar-skm__nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
}
@media (min-width: 992px) {
  .navbar-skm__nav { display: flex; }
}

.navbar-skm__nav > li > a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar-skm__nav > li > a:hover,
.navbar-skm__nav > li > a.active {
  color: var(--color-primary);
  background-color: var(--color-primary-lighter);
}

/* Dropdown */
.navbar-skm__dropdown {
  position: relative;
  /* Link und Umschalt-Button stehen nebeneinander in einer Zeile. */
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}
/* Bei Eintraegen mit Untermenue traegt die Zeile die Hervorhebung, nicht der
   Link: Sonst endete die Pille am Linkende und der Pfeil stand ausserhalb.
   Der Link gibt Hintergrund und Radius deshalb ab, sein Innenabstand bleibt
   und wird rechts vom Button fortgesetzt. */
.navbar-skm__nav > .navbar-skm__dropdown > a,
.navbar-skm__nav > .navbar-skm__dropdown > a:hover,
.navbar-skm__nav > .navbar-skm__dropdown > a.active {
  background-color: transparent;
  border-radius: 0;
  padding-right: var(--space-1);
}
.navbar-skm__dropdown-button {
  padding-right: var(--space-2);
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.navbar-skm__dropdown:hover,
.navbar-skm__dropdown.is-open {
  background-color: var(--color-primary-lighter);
}
.navbar-skm__dropdown:hover > a,
.navbar-skm__dropdown.is-open > a {
  color: var(--color-primary);
}
/* Siehe oben: :has() steht getrennt, damit ein Browser ohne Unterstuetzung
   nicht Hover und is-open mitverliert. */
.navbar-skm__dropdown:has(> a.active) {
  background-color: var(--color-primary-lighter);
}
.navbar-skm__dropdown:has(> a.active) > a {
  color: var(--color-primary);
}
/* Der Chevron sitzt seit dem Umbau auf einem eigenen Button, nicht mehr
   als ::after am Link — nur so kann er aria-expanded tragen und auf Touch
   das Untermenue oeffnen, ohne dem Link im Weg zu stehen. */
.navbar-skm__dropdown-button,
.offcanvas-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mindest-Trefferflaeche nach WCAG 2.5.8; der Chevron selbst misst 8 px. */
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Der Chevron sass frueher als ::after am Link und war damit automatisch
     currentColor — er wurde blau und lag innerhalb der Hervorhebung. Als
     Geschwister erbt der Button sonst die Body-Farbe, und die Pille bricht
     vor ihm ab. */
  color: var(--color-gray-700);
}
.navbar-skm__dropdown:hover .navbar-skm__dropdown-button,
.navbar-skm__dropdown.is-open .navbar-skm__dropdown-button {
  color: var(--color-primary);
}
/* :has() bewusst in einer eigenen Regel: Kennt ein Browser den Selektor
   nicht, verwirft er die komplette Regel — in einer Komma-Liste haette das
   auch Hover und is-open mitgerissen. So faellt im schlechtesten Fall nur
   die Einfaerbung des aktiven Eintrags weg. */
.navbar-skm__dropdown:has(> a.active) .navbar-skm__dropdown-button {
  color: var(--color-primary);
}
.navbar-skm__chevron {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-fast);
}
.navbar-skm__dropdown.is-open .navbar-skm__chevron,
.offcanvas-nav__toggle[aria-expanded='true'] .navbar-skm__chevron {
  transform: rotate(-135deg) translateY(2px);
}
.navbar-skm__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  visibility: hidden;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-100);
  list-style: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 1060;
}
/* Unsichtbare Bruecke ueber den Abstand zwischen Link und Menue. Ohne sie
   verliert der Zeiger auf dem Weg nach unten den Hover, und das Menue
   schliesst sich, bevor man einen Eintrag erreicht. */
.navbar-skm__dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-2));
  height: var(--space-2);
}
/* Eine einzige Wahrheit ueber den Zustand: die Klasse is-open, gesetzt von
   main.js aus Hover, Button-Klick und Escape. Vorher steuerten drei
   CSS-Zustaende (.open, :hover, :focus-within) unabhaengig voneinander —
   dabei konnten zwei Menues gleichzeitig offen stehen, und aria-expanded
   haette ohnehin nicht dazu gepasst. */
.navbar-skm__dropdown.is-open .navbar-skm__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.navbar-skm__dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.navbar-skm__dropdown-menu a:hover {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary);
}

/* Navbar Right: Suche + Sprachwechsler */
.navbar-skm__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.btn-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-search-toggle:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.lang-switch a {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-gray-400);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.lang-switch a.active {
  color: var(--color-primary);
  background-color: var(--color-primary-lighter);
}
.lang-switch a:hover:not(.active) {
  color: var(--color-gray-700);
}

/* Hamburger */
.navbar-skm__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  gap: 5px;
  padding: 0;
}
@media (min-width: 992px) {
  .navbar-skm__hamburger { display: none; }
}
.navbar-skm__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-gray-700);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.navbar-skm__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.navbar-skm__hamburger.active span:nth-child(2) {
  opacity: 0;
}
.navbar-skm__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Offcanvas */
.offcanvas-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-white);
  z-index: 1080;
  padding: var(--space-8) var(--space-5);
  /* visibility, nicht nur right: Ein Element ausserhalb des Sichtbereichs
     bleibt fokussierbar. Ohne das tabbte man am Desktop durch die 15 Links
     des geschlossenen Mobilmenues (WCAG 2.4.3). visibility steht in der
     transition, damit das Ausblenden weiterhin animiert. */
  visibility: hidden;
  /* visibility mit Verzoegerung statt Dauer: Beim Oeffnen muss sie sofort
     umschalten, sonst ist das Panel beim Fokussieren noch unsichtbar und
     nicht fokussierbar — der Fokussprung ins Menue lief ins Leere. Beim
     Schliessen wartet sie das Hinausgleiten ab. */
  transition: right var(--transition-smooth), visibility 0s linear 0.4s;
  overflow-y: auto;
}
.offcanvas-nav.open {
  right: 0;
  visibility: visible;
  transition: right var(--transition-smooth), visibility 0s linear 0s;
}
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1070;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.offcanvas-nav__list > li > a {
  display: block;
  padding: var(--space-3) 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-gray-800);
  border-bottom: 1px solid var(--color-gray-100);
}
/* Bei Eintraegen mit Untermenue steht neben dem Link ein Button. Die Linie
   am Link endete dann vor ihm; sie gehoert an die Zeile, nicht an den Link. */
.offcanvas-nav__list > li.offcanvas-nav__item > a {
  border-bottom: 0;
}
.offcanvas-nav__item {
  border-bottom: 1px solid var(--color-gray-100);
}
/* Link und Umschalt-Button in einer Zeile; der Link nimmt den Platz,
   der Button sitzt rechts am Rand und bleibt mit 28 px gut treffbar. */
.offcanvas-nav__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.offcanvas-nav__link {
  flex: 1 1 auto;
}
.offcanvas-nav__item > .offcanvas-nav__sublist {
  flex: 1 0 100%;
}
.offcanvas-nav__sublist {
  list-style: none;
  padding: 0 0 0 var(--space-4);
}
.offcanvas-nav__sublist a {
  display: block;
  padding: var(--space-2) 0;
  font-size: 1rem;
  color: var(--color-gray-600);
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1090;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  padding: var(--space-8) var(--space-5);
  transform: translateY(-100%);
  opacity: 0;
  /* Siehe .offcanvas-nav: transform und opacity allein entfernen das
     geschlossene Overlay nicht aus der Fokusreihenfolge — Schliessen-Knopf
     und Suchfeld waren am Desktop antabbbar. */
  visibility: hidden;
  /* Siehe .offcanvas-nav: sofort sichtbar beim Oeffnen, damit das Suchfeld
     fokussierbar ist; beim Schliessen wartet visibility die Animation ab. */
  transition: transform var(--transition-smooth), opacity var(--transition-base), visibility 0s linear 0.4s;
}
.search-overlay.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--transition-smooth), opacity var(--transition-base), visibility 0s linear 0s;
}
.search-overlay__inner {
  max-width: 680px;
  margin: 0 auto;
}
.search-overlay__input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--color-gray-200);
  background: transparent;
  font-size: 2rem;
  font-weight: 300;
  padding: var(--space-4) 0;
  color: var(--color-gray-900);
  outline: none;
  font-family: var(--font-family-base);
}
.search-overlay__input::placeholder {
  color: var(--color-gray-300);
}
.search-overlay__input:focus {
  border-bottom-color: var(--color-primary);
}
.search-overlay__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.search-overlay__close:hover {
  background-color: var(--color-gray-100);
}

/* Spacer für fixed navbar */
.navbar-spacer {
  height: var(--navbar-height);
}

/* --------------------------------------------------------------------------
   6. HERO-BANNER
   -------------------------------------------------------------------------- */

/* Variante A: Split (Text + Bild nebeneinander) */
.hero {
  padding: var(--space-16) 0 var(--space-12);
  position: relative;
  overflow: hidden;
}
.hero--split {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}
.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--split .hero__title {
  margin-bottom: var(--space-5);
}
.hero--split .hero__subtitle {
  font-size: 1.25rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 520px;
}
.hero--split .hero__image img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Variante B: Fullwidth Bild mit Overlay */
.hero--fullwidth {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-10);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--fullwidth::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.hero--fullwidth .hero__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
}
.hero--fullwidth .hero__title {
  color: var(--color-white);
}
.hero--fullwidth .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.125rem;
}

/* Variante C: Minimal (nur Text) */
.hero--minimal {
  padding: var(--space-10) 0 var(--space-8);
  background: var(--color-white);
}
.hero--minimal .hero__title {
  margin-bottom: var(--space-3);
}
.hero--minimal .hero__subtitle {
  color: var(--color-gray-600);
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn-skm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-family-base);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-skm:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

/* Primary */
.btn-skm--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-skm--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary / Outline */
.btn-skm--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-skm--secondary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Ghost */
.btn-skm--ghost {
  background: transparent;
  color: var(--color-gray-600);
  border-color: transparent;
}
.btn-skm--ghost:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* White (für dunkle Hintergründe) */
.btn-skm--white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
.btn-skm--white:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary-dark);
}

/* Button Small */
.btn-skm--sm {
  padding: 10px 20px;
  font-size: 0.875rem;
  min-height: 40px;
}

/* Inline-Link-Button */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-primary);
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.link-arrow:hover {
  color: var(--color-primary-dark);
  gap: 10px;
}
.link-arrow:hover::after {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

/* Branchen-Karte */
.card-branch {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  height: 100%;
}
.card-branch:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card-branch__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.card-branch__icon img,
.card-branch__icon svg {
  width: 28px;
  height: 28px;
}
.card-branch__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}
.card-branch__text {
  font-size: 0.9375rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-4);
}
.card-branch .link-arrow {
  margin-top: auto;
}

/* Card-Branch mit Media (z. B. fuer Aehnliche Produkte:
   Bild oben, Inhalt unten, padding ruht auf __body) */
.card-branch--with-media {
  padding: 0;
  overflow: hidden;
}
.card-branch__media {
  height: 180px;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-branch__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-branch__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-2);
}
.card-branch__body .card-product__type {
  margin-bottom: var(--space-2);
}
.card-branch__body .card-product__specs {
  margin-bottom: var(--space-3);
}
.card-branch__body .card-branch__title {
  font-size: 1.125rem;
}
.card-branch__body .link-arrow {
  margin-top: auto;
}

/* Produkt-Karte */
.card-product {
  display: flex;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card-product__image {
  flex-shrink: 0;
  width: 240px;
  background-color: var(--color-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.card-product__image img {
  max-height: 180px;
  object-fit: contain;
}
.card-product__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-product__type {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.card-product__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}
.card-product__excerpt {
  font-size: 0.9375rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  flex-grow: 1;
  /* Clamp auf 3 Zeilen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-product__specs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.spec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Responsive: Produkt-Karte vertikal auf Mobile */
@media (max-width: 767.98px) {
  .card-product {
    flex-direction: column;
  }
  .card-product__image {
    width: 100%;
    height: 200px;
  }
}

/* --------------------------------------------------------------------------
   9. FEATURE ROW (Text + Bild abwechselnd)
   -------------------------------------------------------------------------- */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.feature-row--reverse {
  flex-direction: row-reverse;
}
.feature-row__content {
  flex: 1;
}
.feature-row__image {
  flex: 1;
}
.feature-row__image img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  width: 100%;
}

@media (max-width: 991.98px) {
  .feature-row,
  .feature-row--reverse {
    flex-direction: column;
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   10. CTA-BAND
   -------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
  padding: var(--space-10) var(--space-5);
}
.cta-band h2 {
  margin-bottom: var(--space-3);
}
.cta-band p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   11. TIMELINE
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding: var(--space-6) 0;
}
/* Vertikale Linie Mitte */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-gray-200);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: var(--space-8);
}

/* Abwechselnde Seiten */
.timeline__item:nth-child(odd) {
  justify-content: flex-start;
  padding-right: calc(50% + var(--space-8));
  text-align: right;
}
.timeline__item:nth-child(even) {
  justify-content: flex-end;
  padding-left: calc(50% + var(--space-8));
}

/* Punkt auf der Linie */
.timeline__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--space-4);
  width: 14px;
  height: 14px;
  background-color: var(--color-primary);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  z-index: 2;
}

.timeline__year {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1;
}
.timeline__card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
}
.timeline__card h4 {
  margin-bottom: var(--space-2);
}
.timeline__card p {
  color: var(--color-gray-600);
  font-size: 0.9375rem;
  margin-bottom: 0;
  max-width: none;
}

/* Mobile: Einspaltiges Timeline */
@media (max-width: 991.98px) {
  .timeline::before {
    left: 20px;
  }
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    padding-left: 56px;
    padding-right: 0;
    justify-content: flex-start;
    text-align: left;
  }
  .timeline__item::before {
    left: 20px;
  }
}

/* --------------------------------------------------------------------------
   12. FORMULARE
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5);
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 6px;
}
.form-label .required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-control-skm {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-family-base);
  font-size: 1rem; /* 16px verhindert Zoom auf iOS */
  line-height: 1.5;
  color: var(--color-gray-800);
  background-color: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.form-control-skm::placeholder {
  color: var(--color-gray-400);
}
.form-control-skm:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  outline: none;
  background-color: var(--color-white);
}

/* Select mit Custom-Pfeil */
select.form-control-skm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.938 10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* Textarea */
textarea.form-control-skm {
  resize: vertical;
  min-height: 120px;
}

/* Checkbox */
.form-check-skm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.form-check-skm input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.form-check-skm input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10.28 2.28a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06L4.25 7.22l4.97-4.97a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.form-check-skm label {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  cursor: pointer;
}

/* Error State */
.form-control-skm.is-invalid {
  border-color: var(--color-error);
}
.invalid-feedback {
  font-size: 0.8125rem;
  color: var(--color-error);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   13. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb-skm {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0 0 var(--space-4);
  gap: var(--space-1);
}
.breadcrumb-skm li {
  font-size: 0.8125rem;
  color: var(--color-gray-400);
}
.breadcrumb-skm li a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}
.breadcrumb-skm li a:hover {
  color: var(--color-primary);
}
.breadcrumb-skm li + li::before {
  content: '›';
  margin-right: var(--space-1);
  color: var(--color-gray-300);
}
.breadcrumb-skm li.active {
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------------------
   14. FACETTIERTE SUCHE
   -------------------------------------------------------------------------- */
.search-faceted {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
}
@media (max-width: 991.98px) {
  .search-faceted {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Filter */
.filter-sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-5));
  align-self: start;
}
@media (max-width: 991.98px) {
  .filter-sidebar {
    position: static;
  }
}

.filter-group {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-gray-200);
}
.filter-group:last-child {
  border-bottom: none;
}
.filter-group__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.filter-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 0.9375rem;
  color: var(--color-gray-700);
  cursor: pointer;
}
.filter-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.filter-group input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10.28 2.28a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06L4.25 7.22l4.97-4.97a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.filter-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--color-gray-400);
}

/* Produkt-Ergebnisliste */
.product-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mobile Filter Toggle */
.filter-toggle-mobile {
  display: none;
  margin-bottom: var(--space-4);
}
@media (max-width: 991.98px) {
  .filter-toggle-mobile { display: block; }
  .filter-sidebar { display: none; }
  .filter-sidebar.open { display: block; }
}

/* --------------------------------------------------------------------------
   15. PRODUKT-DETAIL
   -------------------------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 991.98px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
.product-detail__gallery {
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.product-detail__gallery img {
  max-height: 360px;
  object-fit: contain;
}
.product-detail__info h1 {
  margin-bottom: var(--space-4);
}
.product-detail__specs {
  margin: var(--space-6) 0;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table tr {
  border-bottom: 1px solid var(--color-gray-100);
}
.spec-table td {
  padding: var(--space-3) 0;
  font-size: 0.9375rem;
}
.spec-table td:first-child {
  font-weight: 600;
  color: var(--color-gray-700);
  width: 40%;
}
.spec-table td:last-child {
  color: var(--color-gray-800);
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer-skm {
  background-color: var(--color-gray-900);
  color: var(--color-gray-400);
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
}
.footer-skm a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}
.footer-skm a:hover {
  color: var(--color-white);
}
.footer-skm__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.footer-skm__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-skm__list li {
  margin-bottom: var(--space-2);
}
.footer-skm__list a {
  font-size: 0.9375rem;
}
.footer-skm__logo {
  margin-bottom: var(--space-4);
}
.footer-skm__logo img {
  height: 36px;
  /* Filter für weißes Logo — oder separate weiße SVG-Variante nutzen */
  filter: brightness(0) invert(1);
}
.footer-skm__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 320px;
}
.footer-skm__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8125rem;
}
.footer-skm__legal {
  display: flex;
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   17. PAGINATION
   -------------------------------------------------------------------------- */
.pagination-skm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-8);
}
.pagination-skm a,
.pagination-skm span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray-600);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pagination-skm a:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}
.pagination-skm .active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   18. SCROLL REVEAL (CSS-only)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger für Karten-Grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary) !important; }
.bg-gray { background-color: var(--color-gray-50); }
.mb-0 { margin-bottom: 0 !important; }
.mt-section { margin-top: var(--space-12); }