/* ==========================================================================
   Bienz Storen GmbH – Stylesheet
   Aufbau:
   1. Design-Tokens (Farben, Schriften, Abstände)
   2. Reset & Grundlagen
   3. Layout-Helfer
   4. Komponenten: Button, Link
   5. Header & Navigation
   6. Hero
   7. Startseiten-Bereiche: Einleitung, Direkt, Geschichte, Galerie
   8. Bildansicht (Lightbox)
   9. Footer
   10. Reduzierte Bewegung
   Mobile-first: Basisstile gelten für Smartphones, Media Queries erweitern nach oben.
   ========================================================================== */


/* 1. DESIGN-TOKENS ------------------------------------------------------- */
:root {
  /* Bewusst festes, helles Farbschema: verhindert, dass mobile Browser (z. B. Chrome
     unter Android, Samsung Internet) die Seite bei aktiviertem Dark Mode des Geräts
     automatisch abdunkeln/invertieren ("Force Dark"/"Web-Inhalte abdunkeln"). Wirkt
     zusammen mit <meta name="color-scheme" content="light"> im <head> jeder Seite –
     das Corporate Design (inkl. der dunkelblauen Hero-Flächen) bleibt so auf jedem
     Gerät und in jedem Modus exakt gleich hell/farbig wie auf dem Desktop. */
  color-scheme: light only;

  /* Corporate Design – nur diese drei Farben plus Weiss */
  --blue-dark:  #212B5B;
  --blue-light: #42A5F5;
  --pink:       #E91E63;
  --white:      #FFFFFF;

  /* Abgeleitet (gleiche Farbe, nur transparenter) */
  --ink:      var(--blue-dark);
  --ink-soft: rgba(33, 43, 91, .78);
  --line:     rgba(33, 43, 91, .14);

  /* Schriften */
  --font-head: "Fjalla One", "Arial Narrow", Impact, "Helvetica Neue", Arial, sans-serif;
  --font-body: Verdana, Geneva, "DejaVu Sans", sans-serif;

  /* Rundungen */
  --radius-s: 10px;   /* Buttons */
  --radius-m: 16px;   /* Galerie-Bilder */
  --radius-l: 24px;   /* grosse Flächen: Hero, Bild, Karte */

  /* Layout */
  --max:      1320px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  /* Obergrenze bewusst reduziert (war 9.5rem): auf sehr grossen Monitoren entstand sonst zu
     viel Leerraum zwischen den Abschnitten und die Seite wirkte zerstückelt statt zusammenhängend. */
  --section:  clamp(4.5rem, 9vw, 7rem);
  --header-h: 72px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 960px) {
  :root { --header-h: 84px; }
}


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

/* Bereich oberhalb der Seite (Statusleiste bei Geräten mit Aussparung) freihalten */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  /* Wiederholt (zusätzlich zum Eintrag in Abschnitt 1) direkt neben den html/body-Regeln,
     mit denen es zusammenwirkt – so bleibt die komplette Dark-Mode-Sperre an einer gut
     auffindbaren Stelle beisammen. */
  color-scheme: light only;
}
/* Einige Mobil-Browser (u. a. Samsung Internet, ältere Chrome-Versionen für Android) dunkeln
   Seiten per eigener Geräte-/Browsereinstellung ("Dark mode"/"Webseiten abdunkeln") auch dann
   noch heuristisch ab, wenn kein <meta name="color-scheme"> bzw. keine @media
   (prefers-color-scheme: dark)-Regel vorhanden ist – dagegen hilft nur, jede grosse Fläche mit
   einer ausdrücklichen, "sichtbar hellen" Hintergrundfarbe zu belegen (background-color statt
   nur background, zusätzlich mit !important gegen die automatische Umfärbung abgesichert).
   Das Corporate Design (inkl. dunkelblauer Flächen) bleibt davon unberührt: die dunkelblauen
   Panels haben weiterhin ihre eigene, ausdrücklich gesetzte Farbe. */
html {
  background: var(--white);
  background-color: #ffffff !important;
  color-scheme: light only;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  background-color: #ffffff !important;
  color: var(--ink);
  color: var(--ink) !important;
  color-scheme: light only;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, ul, figure, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: var(--white) !important;
  color-scheme: light only;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: calc(.75rem + env(safe-area-inset-top, 0px)); }


/* 3. LAYOUT-HELFER ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight-top { padding-top: 0; }

/* Dezent getönte Sektionsflächen (Corporate-Design-Farben), damit nicht die ganze Website
   durchgehend reinweiss wirkt. Bewusst sehr helle, ruhige Farbwerte statt kräftiger Flächen –
   der Wechsel zwischen Weiss und diesen Tönen gibt der Seite Struktur und Charakter, ohne
   unruhig zu werden. Wird abschnittsweise auf <section>-Ebene eingesetzt (padding kommt
   weiterhin von .section); Pink/Rot bleibt bewusst ein kleiner Akzent und wird hier nicht
   als Flächenfarbe verwendet. */
.section--tint {
  /* Solide, helle Fallback-Farbe zusätzlich zum Verlauf: mobile Browser mit automatischer
     Abdunkelung erkennen bei rein transparenten Verläufen mitunter keinen "sicher hellen"
     Hintergrund und dunkeln dann trotz color-scheme:light only nach – mit einer ausdrücklichen
     background-color bleibt die Fläche in jedem Fall hell. */
  /* Ton bewusst minimal warmer/weicher als reines Eisblau (Hue leicht Richtung Indigo
     verschoben, etwas entsättigt) – gleiche Fläche, nur angenehmer in der Wirkung. */
  background-color: #F4F7FE !important;
  background-image: linear-gradient(180deg, rgba(66, 165, 245, .09), rgba(66, 165, 245, .035) 60%, rgba(66, 165, 245, 0));
  color-scheme: light only;
}
.section--tint-solid {
  background: #F4F7FE;
  background-color: #F4F7FE !important;
  color-scheme: light only;
}
.section--tint-dark {
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: var(--white) !important;
  color-scheme: light only;
}
.section--tint-dark .ink-soft-on-dark { color: rgba(255, 255, 255, .78); }

/* Überschriften in Fjalla One */
.display {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.06;
  letter-spacing: .005em;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  text-wrap: balance;
}

/* Fliesstext: angenehme Zeilenlänge */
.prose p { max-width: 36rem; }
.prose p + p { margin-top: 1.25rem; }

/* Zweispaltig ab Tablet-Breite (Titel links, Text rechts) */
.split { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .split > :first-child { grid-column: 1 / span 5; }
  .split > :last-child  { grid-column: 7 / span 6; }
}


/* 4. KOMPONENTEN --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: .9rem 2rem;
  border: 2px solid var(--pink);
  border-radius: var(--radius-s);
  background: var(--pink);
  background-color: #E91E63 !important;
  color: var(--white) !important;
  color-scheme: light only;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--blue-dark); background-color: #212B5B !important; border-color: var(--blue-dark); }
.btn--block { width: 100%; }
/* Button auf dunklem Grund (Hero): beim Darüberfahren weiss statt dunkelblau */
.btn--on-dark:hover { background: var(--white); background-color: #ffffff !important; border-color: var(--white); color: var(--blue-dark) !important; }

.link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--blue-light);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
  transition: text-decoration-color .2s var(--ease);
}
.link:hover { text-decoration-color: var(--blue-dark); }


/* 5. HEADER & NAVIGATION ------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--white);
  background-color: #ffffff !important;
  color-scheme: light only;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: var(--header-h);
}
.brand { display: block; flex: none; line-height: 0; }
/* Logo auf dem Smartphone: Höhe an der Fensterbreite statt an der (auf sehr schmalen
   Geräten knappen) Headerhöhe bemessen, damit immer genug Luft zum Menü-Button bleibt.
   Breite bewusst nicht gesetzt (width: auto) – so bleibt das Seitenverhältnis der SVG-Datei
   in jeder Grösse exakt erhalten, nichts wird gestaucht oder abgeschnitten. */
.brand img { height: clamp(28px, 8vw, 42px); width: auto; max-width: 48vw; }
@media (min-width: 960px) {
  .brand img { height: calc(var(--header-h) - 26px); max-width: none; }
}

/* Menü-Schalter (nur Smartphone / kleines Tablet) */
.nav-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  margin-right: -.5rem;
  padding: 0 .5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: .9375rem;
}
.nav-toggle__bars { position: relative; width: 24px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child  { top: 12px; }
.nav-open .nav-toggle__bars span:first-child { top: 6px; transform: rotate(45deg); }
.nav-open .nav-toggle__bars span:last-child  { top: 6px; transform: rotate(-45deg); }

/* Mobile Navigation: Vollflächiges Menü unter dem Header */
.site-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: .5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--white);
  background-color: #ffffff !important;
  color: var(--ink);
  color-scheme: light only;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.nav-open .site-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.875rem;
  line-height: 1.2;
  text-decoration: none;
}
.site-nav__list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--blue-light); padding-left: 1rem; }

/* Desktop / Tablet quer: Navigation in einer Zeile */
@media (min-width: 960px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: block;
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .site-nav__extra { display: none; }
  .site-nav__list { display: flex; gap: clamp(1.5rem, 3.2vw, 3rem); }
  .site-nav__list a {
    position: relative;
    display: inline-block;
    min-height: 0;
    padding: .5rem 0;
    border: 0;
    font-family: var(--font-body);
    font-size: .9375rem;
  }
  .site-nav__list a[aria-current="page"] { box-shadow: none; padding-left: 0; }
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 3px;
    border-radius: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .site-nav__list a:hover::after { transform: scaleX(1); }
  .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); background: var(--blue-light); }
}


/* 6. HERO ---------------------------------------------------------------- */
.hero { padding-top: .75rem; }

.hero__panel {
  --slat: clamp(30px, 4.6vw, 60px);   /* Höhe einer Lamelle im Platzhalter */

  /* ── Einstellungen für den dunklen Verlauf ─────────────────────────── */
  --scrim: 1;                /* Stärke des dunklen Verlaufs: 0 = aus, 1 = Standard, 1.2 = kräftiger */
  --scrim-rgb: 33 43 91;     /* Dunkelblau #212B5B */
  /* ──────────────────────────────────────────────────────────────────── */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(24rem, calc(72vh - var(--header-h)), 34rem);
  height: clamp(24rem, calc(72svh - var(--header-h)), 34rem);
  border-radius: var(--radius-l);
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: var(--white) !important;
  color-scheme: light only;
}

.hero__media,
.hero__placeholder,
.hero__light,
.hero__scrim { position: absolute; inset: 0; }

/* Platzhalter: ruhige Lamellenfläche mit Lichtstreifen. Diese Fläche ist die dauerhafte
   Hero-Hintergrundebene (kein Video). */
.hero__placeholder {
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color-scheme: light only;
}
.hero__light {
  background-image: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.20) 50%, transparent 78%);
  background-size: 260% 100%;
  background-position: calc(var(--hero-p, 0) * 70%) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 72%);
  -webkit-mask-size: 100% var(--slat);
          mask-size: 100% var(--slat);
  transition: background-position .6s var(--ease);
}

/* Echte Lamellen (einzelne Flächen statt eines Hintergrund-Tricks): jede Lamelle kippt für
   sich um ihre eigene Oberkante, so wie bei einer echten Lamellenstore. Einzige Bewegung im
   Hero (der Text in .hero__content steht fest): --hero-p (0–1, von js/main.js anhand der
   Scrollposition laufend geschrieben, Abschnitt 7a) treibt Kippwinkel, Stauchung und
   Aufhellung direkt; ohne JavaScript oder bei «Bewegung reduzieren» bleiben die Lamellen in
   Ruhestellung (--hero-p bleibt 0, siehe js/main.js). Sitzt über dem Platzhalter, unter
   Video/Verlauf/Text.
   WICHTIG (technische Trennung Lamellen/Text): --hero-p wird zwar auf .hero__panel (dem
   gemeinsamen Vorfahren) gesetzt, aber ausschliesslich hier, in .hero__slats span, gelesen.
   .hero__content weiter unten bekommt zusätzlich eine eigene, nicht überschreibbare
   "transform: none"-Zusicherung, damit eine Lamellen-Transformation niemals auf den
   Textcontainer vererbt werden kann, auch nicht durch künftige Änderungen. */
.hero__slats {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px;
  perspective: 420px;
  contain: layout paint style;
}
/* Jede einzelne Lamelle bekommt eine deutlich sichtbare helle Oberkante (reflektiertes Licht,
   wenn sie sich wendet) und eine dunkle, scharf abgesetzte Unterkante (Schattenkante zur
   naechsten Lamelle) -- zusammen mit Gap + box-shadow entsteht der Eindruck echter,
   einzelner Querlamellen statt einer glatten Flaeche. Kraeftige Kipp-/Stauchwerte (-62deg/.6)
   plus ein mit --hero-p ansteigender "brightness"-Filter (die Lamelle hellt sichtbar auf, wenn
   sie sich dem Licht zuwendet) machen das Öffnen/Wenden unmissverstaendlich sichtbar, nicht nur
   messbar. Naehere Perspective (420px statt zuvor 700px) verstaerkt die 3D-Wirkung zusaetzlich. */
.hero__slats span {
  flex: 1;
  min-height: 0;
  transform-origin: 50% 0%;
  background-image: linear-gradient(to bottom,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.3) 12%,
    rgba(255,255,255,.05) 40%,
    rgba(0,0,0,.4) 100%);
  box-shadow: 0 2px 2px rgba(0,0,0,.35);
  transform: rotateX(calc(var(--hero-p, 0) * -68deg)) scaleY(calc(1 - var(--hero-p, 0) * .66));
  filter: brightness(calc(1 + var(--hero-p, 0) * .65));
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
/* Handy: etwas zurückhaltendere, aber weiterhin klar erkennbare Amplitude (ruckelfrei, da nur
   Winkel/Faktoren kleiner sind, nicht die Technik). */
@media (max-width: 639px) {
  .hero__slats span {
    transform: rotateX(calc(var(--hero-p, 0) * -54deg)) scaleY(calc(1 - var(--hero-p, 0) * .5));
    filter: brightness(calc(1 + var(--hero-p, 0) * .48));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slats span { transition: none; }
}

/* Dunkler Verlauf für die Lesbarkeit über der Lamellenfläche.
   Er ist dort am stärksten, wo der Text steht (unten links), und läuft nach oben und rechts
   fast vollständig aus.
   Auf dem Smartphone steht der Text über die ganze Breite, dort läuft der Verlauf nur von unten nach oben. */
.hero__scrim {
  /* Ersatz für Browser ohne moderne Farbsyntax */
  background: linear-gradient(to top, rgba(33,43,91,.85) 0%, rgba(33,43,91,.4) 55%, rgba(33,43,91,0) 85%);
  background:
    linear-gradient(to top,
      rgb(var(--scrim-rgb) / calc(.88 * var(--scrim))) 0%,
      rgb(var(--scrim-rgb) / calc(.74 * var(--scrim))) 30%,
      rgb(var(--scrim-rgb) / calc(.38 * var(--scrim))) 58%,
      rgb(var(--scrim-rgb) / calc(.15 * var(--scrim))) 70%,
      rgb(var(--scrim-rgb) / calc(.04 * var(--scrim))) 80%,
      rgb(var(--scrim-rgb) / 0) 90%),
    rgb(var(--scrim-rgb) / calc(.08 * var(--scrim)));
}
@media (min-width: 640px) {
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgb(var(--scrim-rgb) / calc(.84 * var(--scrim))) 0%,
        rgb(var(--scrim-rgb) / calc(.70 * var(--scrim))) 30%,
        rgb(var(--scrim-rgb) / calc(.42 * var(--scrim))) 56%,
        rgb(var(--scrim-rgb) / calc(.18 * var(--scrim))) 68%,
        rgb(var(--scrim-rgb) / calc(.05 * var(--scrim))) 78%,
        rgb(var(--scrim-rgb) / 0) 88%),
      linear-gradient(to right,
        rgb(var(--scrim-rgb) / calc(.58 * var(--scrim))) 0%,
        rgb(var(--scrim-rgb) / calc(.46 * var(--scrim))) 45%,
        rgb(var(--scrim-rgb) / calc(.14 * var(--scrim))) 85%,
        rgb(var(--scrim-rgb) / 0) 100%),
      rgb(var(--scrim-rgb) / calc(.08 * var(--scrim)));
  }
}

/* Einmalige Startbewegung: Lamellen schwingen nach oben und geben das Bild frei */
.hero__reveal {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  perspective: 1400px;
  pointer-events: none;
}
.hero__reveal span {
  flex: 1;
  background: var(--blue-dark);
  background-color: #212B5B !important;
  transform-origin: 50% 0;
  animation: slat-open 1.1s cubic-bezier(.65, 0, .35, 1) both;
  animation-delay: calc(.15s + var(--i) * .07s);
}
@keyframes slat-open {
  to { transform: rotateX(-95deg); visibility: hidden; }
}

/* Tablet im Hochformat: Hero nicht unnötig hoch */
@media (min-width: 640px) and (orientation: portrait) {
  .hero__panel { height: 30rem; }
}

/* Text: steht fest, keine Animation – bewegt wird ausschliesslich die Lamellenfläche im Hintergrund.
   "transform: none" ist hier bewusst explizit gesetzt (nicht nur impliziert durch Abwesenheit einer
   Regel): .hero__content/.hero__title/.hero__name/.hero__claim lesen --hero-p an keiner Stelle, und
   diese Zusicherung stellt zusätzlich sicher, dass auch künftig keine Lamellen-Transformation auf
   den Textcontainer vererbt werden kann. Position, Grösse und Form bleiben über den gesamten
   Scrollbereich pixelgenau gleich. */
.hero__content {
  position: relative;
  z-index: 2;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 1.375rem;
}

.hero__title {
  display: flex; flex-direction: column; gap: .5rem; font-weight: 400;
  transform: none;
  /* zusätzliche Sicherheit bei sehr hellen Videoszenen */
  text-shadow: 0 1px 3px rgba(33,43,91,.35), 0 2px 28px rgba(33,43,91,.5);
}
.hero__name {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: .005em;
  transform: none;
}
.hero__claim {
  font-family: var(--font-head);
  font-size: clamp(1.1875rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  transform: none;
  color: rgba(255,255,255,.92);
}

@media (min-width: 640px) {
  .hero__content {
    padding: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Kompakte Hero-Variante für Unterseiten (Produkte, Dienstleistungen, Über uns, Kontakt): gleicher
   Aufbau wie die Startseite, nur etwas niedriger und mit etwas kleinerer Schrift – beide Varianten
   liegen jetzt nahe beieinander, damit der Hero auf allen Seiten einheitlich wirkt. Weil der Text hier
   einen grösseren Teil der Fläche einnimmt, ist der Verlauf etwas kräftiger. */
.hero--compact .hero__panel {
  --scrim: 1.25;
  height: clamp(17rem, 46vh, 20rem);
  height: clamp(17rem, 46svh, 20rem);
}
.hero--compact .hero__name {
  font-size: clamp(2rem, 5.4vw, 4rem);
}
.hero--compact .hero__claim {
  font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
}
@media (min-width: 640px) {
  .hero--compact .hero__panel {
    height: clamp(20rem, 40vh, 25rem);
    height: clamp(20rem, 40svh, 25rem);
  }
}


/* 7. STARTSEITEN-BEREICHE ------------------------------------------------ */

/* Einleitung «Persönlich. Direkt. Unkompliziert.»: Überschrift und Text als ein zusammengehöriger
   Abschnitt in einer dezenten hellblauen Fläche statt lose nebeneinander auf Weiss. Ein kurzer Pink-Strich
   über der Überschrift ist der einzige Akzent (bewusst sparsam eingesetzt). */
.intro__panel {
  position: relative;
  /* Breite auf sehr grossen Monitoren bewusst begrenzt (statt die volle Wrap-Breite zu
     füllen): so wirkt die Fläche nebeneinander mit der dunkelblauen «Neu gegründet»-Fläche
     und der schmaleren Galerie-Spalte darunter einheitlicher statt beliebig breit gestreckt. */
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-l);
  /* Solide Fallback-Farbe hinter dem Verlauf, siehe Hinweis bei .section--tint. Minimal
     wärmerer/weicherer Ton (Hue leicht Richtung Indigo, etwas entsättigt) als zuvor, plus
     ein sehr dezenter Hauch Pink im Verlauf – kaum wahrnehmbar, nimmt der Fläche aber die
     "technische" Eiskühle. */
  background-color: #EFF3FD !important;
  background-image: linear-gradient(155deg, rgba(66, 165, 245, .12), rgba(233, 30, 99, .02) 60%, rgba(66, 165, 245, .045));
  border: 1px solid rgba(66, 165, 245, .18);
  color-scheme: light only;
  overflow: hidden;
}
/* Sehr dezentes, lamellenartiges Linienmuster als Wasserzeichen oben rechts – erinnert an
   Storen/Sonnenschutz, ohne aufdringlich zu wirken (reine CSS-Grafik, keine Stockgrafik). */
.intro__panel::after {
  content: "";
  position: absolute;
  top: -10%; right: -6%;
  width: 46%; height: 120%;
  background: repeating-linear-gradient(
    100deg,
    rgba(33, 43, 91, .05) 0, rgba(33, 43, 91, .05) 6px,
    transparent 6px, transparent 20px
  );
  pointer-events: none;
}
.intro__accent {
  display: block;
  width: 2.75rem;
  height: 4px;
  margin-bottom: 1.25rem;
  border-radius: 2px;
  background: var(--pink);
  background-color: #E91E63 !important;
}

/* «Persönlich. Direkt. Unkompliziert.»: die drei Begriffe wirken als zusammengehörende, klar
   voneinander abgesetzte Elemente statt als eine fortlaufende Überschrift – je ein kurzer,
   farbiger Balken davor (Dunkelblau/Hellblau/Pink, dieselbe Reihenfolge wie im Corporate
   Design), der optisch an eine Lamelle erinnert. */
.intro__title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2em;
}
.intro__title span {
  display: flex;
  align-items: center;
  gap: .55em;
}
.intro__title span::before {
  content: "";
  display: block;
  flex: none;
  width: 1.6rem;
  height: .32em;
  border-radius: 2px;
}
.intro__title span:nth-child(1)::before { background: var(--blue-dark); background-color: #212B5B !important; }
.intro__title span:nth-child(2)::before { background: var(--blue-light); background-color: #42A5F5 !important; }
.intro__title span:nth-child(3)::before { background: var(--pink); background-color: #E91E63 !important; }
.intro__body { font-size: 1rem; }
@media (min-width: 900px) {
  .intro__body { font-size: 1.0625rem; }
}

/* Geschichte «Neu gegründet»: grosszügige, dunkelblaue Fläche (gleiche Sprache wie Hero und die
   dunklen Flächen der Produkte-Seite), damit der Abschnitt sichtbar zur Seite gehört statt isoliert
   zu wirken. */
/* Etwas knapperer Abstand zur hellblauen Einleitungsfläche darüber (war * .55): der Sprung
   Hellblau → viel Weiss → Dunkelblau wirkte zuvor etwas hart. Weiterhin deutlich Luft
   zwischen den beiden Flächen, nur nicht mehr ganz so viel wie zuvor. */
.story { padding-top: calc(var(--section) * .4); }
.story__panel {
  position: relative;
  /* Gleiche Breitenbegrenzung wie .intro__panel, siehe dort: für ein zusammenhängenderes
     Bild auf grossen Monitoren statt einer zu breit wirkenden Einzelfläche. */
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: var(--radius-l);
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: var(--white) !important;
  color-scheme: light only;
  overflow: hidden;
}
/* Dezentes grafisches Element im Hintergrund: waagrechte, geneigte Streifen erinnern an
   Lamellen/Storen, ohne den Text zu stören (sehr helle Deckkraft, rechte Seite ausgeblendet). */
.story__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -8deg,
      rgba(66, 165, 245, .1) 0, rgba(66, 165, 245, .1) 10px,
      transparent 10px, transparent 34px
    );
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 100%);
  pointer-events: none;
}
.story__title, .story__body, .story__link { position: relative; }
.story__title { margin-bottom: 1rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.story__body { max-width: 42rem; color: rgba(255, 255, 255, .88); }
.story__body p + p { margin-top: 1.25rem; }
.story__link:hover { text-decoration-color: var(--white); }

/* Galerie: Slideshow */
.section-head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* Galerie-Überschrift auf dieselbe Breite wie die hellblaue/dunkelblaue Fläche darüber
   begrenzt (siehe .intro__panel / .story__panel), damit der Abschnitt auf grossen Monitoren
   zur gleichen zentrierten Spalte gehört statt über die volle Breite zu laufen. */
.gallery-section .section-head {
  max-width: 68rem;
  margin-inline: auto;
}

.slideshow { position: relative; }
/* Bewusst kompakter als frueher (nicht mehr die volle Wrap-Breite): die Referenzfotos
   sollen hochwertig wirken, aber nicht mehr die Seite dominieren. Zentriert, skaliert
   ab Tablet/Mobile ganz normal mit der verfuegbaren Breite nach unten. */
.slideshow__stage {
  position: relative;
  /* Etwas breiter als zuvor (war 47rem), damit die Spalte auf grossen Monitoren nicht so
     viel schmaler wirkt als die hellblaue/dunkelblaue Fläche darüber (siehe .intro__panel /
     .story__panel, ebenfalls auf eine gemeinsame Breite begrenzt). */
  max-width: 54rem;
  margin-inline: auto;
}

/* Alle drei Referenzfotos zeigen sich in EXAKT demselben Rahmen (fester Bildausschnitt
   4:3, siehe assets/img/galerie-*.jpg – alle drei liegen bereits in diesem Seitenverhaeltnis
   vor), damit die Groesse beim Wechseln zwischen den Bildern nicht mehr springt. */
.slideshow__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slideshow__viewport::-webkit-scrollbar { display: none; }

.slideshow__track { display: flex; align-items: stretch; height: 100%; }
.slideshow__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; position: relative; }
.slideshow__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* Jedes Foto wird auf denselben festen Rahmen zugeschnitten (object-fit: cover) --
   dadurch bleiben Breite/Hoehe/Eckenradius/Pfeil- und Beschriftungsposition beim
   Wechsel zwischen den Bildern exakt gleich; nur das Foto selbst wechselt. */
.slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Ausnahme fuer die Plisseetuere: das Originalfoto ist hochformatig, das Produkt (Tuer von
   oben bis unten, inkl. seitlicher Fuehrung) soll aber vollstaendig sichtbar bleiben statt
   per object-fit:cover oben/unten beschnitten zu werden. Aussenrahmen (Groesse/Rundung/
   Navigation/Beschriftung) bleibt dadurch unveraendert identisch zu den anderen beiden
   Slides -- nur innerhalb dieses einen Slides wird das Bild vollstaendig eingepasst
   (Letterboxing links/rechts in der Markenfarbe statt Beschnitt oben/unten). */
.slideshow__slide--contain img {
  object-fit: contain;
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color-scheme: light only;
}

/* Pfeile: gleiche Optik wie die Bedienelemente von Hero und Bildansicht, im kompakteren
   Rahmen etwas kleiner skaliert als frueher. */
.slideshow__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: rgba(33,43,91,.55);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.slideshow__btn:hover { background: rgba(33,43,91,.85); border-color: var(--white); }
.slideshow__btn--prev { left: .6rem; }
.slideshow__btn--next { right: .6rem; }
@media (min-width: 900px) {
  .slideshow__btn { width: 44px; height: 44px; }
  .slideshow__btn--prev { left: .85rem; }
  .slideshow__btn--next { right: .85rem; }
}

/* Punkte: zeigen Anzahl und aktuelle Position, dezent im Corporate Design */
.slideshow__dots {
  display: flex;
  justify-content: center;
  gap: .625rem;
  margin-top: 1.25rem;
}
.slideshow__dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(33, 43, 91, .22);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.slideshow__dots button:hover { background: rgba(33, 43, 91, .4); }
.slideshow__dots button[aria-selected="true"] {
  background: var(--blue-light);
  background-color: #42A5F5 !important;
  transform: scale(1.25);
}

/* Produktinfo direkt im Foto: kleine, hochwertige Referenz-Beschriftung oben
   links, einheitlich bei allen drei Bildern (Desktop/Tablet/Handy, DE/EN) --
   verdeckt das Produkt (meist mittig/unten im Bild) dadurch am wenigsten.
   Dunkelblaue Fläche (Corporate-Farbe) als Basis, Pink/Hellblau nur als
   winziger Akzent-Strich – bewusst zurückhaltend. */
.slideshow__info {
  position: absolute;
  left: .6rem;
  top: .6rem;
  z-index: 1;
  max-width: min(72%, 13.5rem);
  padding: .5rem .7rem .55rem;
  border-radius: var(--radius-s);
  background: rgba(33, 43, 91, .82);
  color: var(--white);
  color-scheme: light only;
  text-align: left;
  line-height: 1.25;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(33, 43, 91, .25);
}
.slideshow__info::before {
  content: '';
  display: block;
  width: 22px;
  height: 3px;
  margin: 0 auto .32rem 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--blue-light));
}
.slideshow__info-name {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.slideshow__info-meta {
  display: block;
  font-size: .62rem;
  color: rgba(255, 255, 255, .78);
  margin-top: .1rem;
}
@media (min-width: 640px) {
  .slideshow__info {
    left: 1rem;
    top: 1rem;
    padding: .65rem .9rem .7rem;
    max-width: 17rem;
  }
  .slideshow__info-name { font-size: .88rem; }
  .slideshow__info-meta { font-size: .74rem; margin-top: .15rem; }
}


/* 8. BILDANSICHT (LIGHTBOX) --------------------------------------------- */
.lightbox {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop {
  background: var(--blue-dark);
  background-color: #212B5B !important;
}

.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 4.5rem 1rem 6rem;
  touch-action: pan-y;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 11rem);
  object-fit: contain;
  border-radius: var(--radius-m);
}
.lightbox__caption { font-size: .875rem; color: rgba(255,255,255,.85); text-align: center; }

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(33,43,91,.5);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__btn:hover { background: var(--white); color: var(--blue-dark); border-color: var(--white); }
.lightbox__btn--close { top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.lightbox__btn--prev  { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); left: calc(50% - 60px); }
.lightbox__btn--next  { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); right: calc(50% - 60px); }

@media (min-width: 820px) {
  .lightbox__stage { padding: 4.5rem 7rem; }
  .lightbox__img { max-height: calc(100svh - 10rem); }
  .lightbox__btn--prev,
  .lightbox__btn--next { top: 50%; bottom: auto; margin-top: -24px; }
  .lightbox__btn--prev { left: 2rem; right: auto; }
  .lightbox__btn--next { right: 2rem; left: auto; }
}


/* 9. FOOTER -------------------------------------------------------------- */
.site-footer {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: rgba(255,255,255,.88);
  color-scheme: light only;
  font-size: .9375rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--blue-light); text-decoration-thickness: 2px; text-underline-offset: .3em; }

.site-footer__grid { display: grid; gap: 2rem; }
.site-footer__brand img { width: min(260px, 100%); height: auto; }

.footer-title {
  margin-bottom: .75rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
}
.site-footer__col p { margin-top: .75rem; }
.footer-links li + li { margin-top: .3rem; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
}
.site-footer__legal ul { display: flex; gap: 1.5rem; }

@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; align-items: start; }
}


/* 10. REDUZIERTE BEWEGUNG ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__reveal { display: none; }
}


/* 11. SPRACHUMSCHALTER (DE/EN) IM FOOTER ---------------------------------
   Zusätzlicher Listeneintrag in .site-footer__legal ul (siehe Abschnitt 9).
   Erlaubt dem bestehenden Flex-Layout bei Bedarf umzubrechen, ohne die
   bestehende Regel .site-footer__legal ul selbst zu verändern. */
.site-footer__legal ul { flex-wrap: wrap; row-gap: .6rem; }
.lang-switch { display: inline-flex; align-items: center; gap: .4rem; }
.lang-switch__current { font-weight: 700; color: var(--white); }
.lang-switch__sep { opacity: .5; }