/* ==========================================================================
   BELHAG AG – Stylesheet a9 (Stand November 2026)
   Vanilla CSS · keine Abhängigkeiten
   ==========================================================================
   Was hier gilt:
   · Schrift: Montserrat auf der ganzen Website, lokal eingebunden
     (assets/fonts), also ohne Verbindung zu Google.
   · Zwei Designs: hell (Standard) und dunkel. Der Umschalter sitzt im Kopf,
     gesteuert wird über data-theme am <html>. Ohne JavaScript gilt hell.
   · Farben nur über Paletten-Variablen (--bg, --text, --accent …). Bereiche,
     die anders aussehen (helle Sektion, Bildkopf, Fuss, Kopfleiste über dem
     Bild, Karten im dunklen Design), setzen ihre eigene Palette. Alles darin
     passt sich von selbst an, Einzelregeln je Bereich braucht es kaum.
   · Signatur: «Masslinien», technische Bemassungslinien wie im Küchenplan.
   ========================================================================== */

/* ---------- Schrift: Montserrat, variabel 100 bis 900 ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-v31.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext-v31.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Ersatzschrift mit angepassten Massen: Bis Montserrat geladen ist, springt
   der Text so kaum. */
@font-face {
  font-family: "Montserrat Ersatz";
  src: local("Arial");
  size-adjust: 113%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- Feste Grössen (gleich in beiden Designs) ---------- */
:root {
  --font-display: "Montserrat", "Montserrat Ersatz", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);

  --text-xs: 0.72rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: clamp(1.1rem, 0.98rem + 0.45vw, 1.28rem);
  --text-xl: clamp(1.55rem, 1.15rem + 1.6vw, 2.35rem);
  --text-2xl: clamp(2rem, 1.2rem + 3.3vw, 3.75rem);
  --text-hero: clamp(2.45rem, 0.9rem + 6.4vw, 6.25rem);

  --max-w: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 0.85rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;

  /* Pfeil für Hauptknöpfe, als Maske: nimmt die Schriftfarbe an */
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   PALETTEN
   Hell ist Standard. Helle Sektionen bleiben in beiden Designs hell.
   ========================================================================== */
:root,
.section--light,
.site-header.is-scrolled,
body.nav-open .site-header,
body.seite-flach .site-header {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F5F6F7;
  --surface-2: #EDEFF1;
  --line: #E2E4E7;
  --line-strong: #C9CDD2;
  --mass: #C9CDD2;
  --text: #141619;
  --muted: #5B6168;
  --accent: #1C1F23;
  --accent-hover: #3A3F45;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(28, 31, 35, 0.12);
  --em: #7A8089;
  --nav-bg: #FFFFFF;
  --header-bg: rgba(255, 255, 255, 0.88);
  --switch-bg: #F1F2F4;
  --logo-hell: none;
  --logo-dunkel: block;
  --card-schatten: 0 30px 60px -34px rgba(20, 22, 25, 0.32);

  --glass-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(245, 246, 247, 0.92));
  --glass-border: #E2E4E7;
  --glass-shadow: 0 40px 90px -45px rgba(20, 22, 25, 0.35), inset 0 1px 0 #FFFFFF;
  --glass-field-bg: #FFFFFF;
  --glass-field-border: #D2D6DB;
  --tile-bg: #FFFFFF;
  --tile-border: #E2E4E7;
  --tile-hover: #FFFFFF;
  --tile-selected: #F0F1F3;
  --icon-bg: #F0F1F3;
  --icon-border: #E2E4E7;
  --field-bg: #FFFFFF;
  --field-border: #D2D6DB;
  --upload-border: #C3C8CE;
  --upload-bg: #FAFAFB;
  --track: #E2E4E7;
  --glow-1: rgba(20, 22, 25, 0.05);
  --glow-2: rgba(20, 22, 25, 0.07);

  --ok-text: #0B6B3A;
  --ok-bg: #EEFAF3;
  --ok-border: #A9E3C1;
  --err-text: #B42318;
  --err-bg: #FEF3F2;
  --err-border: #F5C2BC;
}

/* Helle Sektion: eine Stufe grauer als die Seite, Karten darin weiss */
.section--light {
  --bg: #F2F3F4;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --line: #DCDFE2;
  --muted: #565B61;
  --accent: #2A2E33;
  --accent-hover: #44494F;
  background: var(--bg);
  color: var(--text);
}

/* Dunkel: ganze Seite im dunklen Design, dazu alles, was immer dunkel ist
   (Bildkopf, Fuss, Kopfleiste über dem Bild, Grossansicht) */
:root[data-theme="dark"],
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] body.nav-open .site-header,
:root[data-theme="dark"] body.seite-flach .site-header,
.site-header,
.hero,
.page-head,
.site-footer,
.lightbox {
  color-scheme: dark;
  --bg: #141619;
  --surface: #1C1F23;
  --surface-2: #24282D;
  --line: #363B41;
  --line-strong: #4A5057;
  --mass: #363B41;
  --text: #F2F3F5;
  --muted: #A9AEB5;
  --accent: #E8EAED;
  --accent-hover: #FFFFFF;
  --on-accent: #141619;
  --accent-soft: rgba(232, 234, 237, 0.22);
  --em: #E8EAED;
  --nav-bg: #1C1F23;
  --header-bg: rgba(17, 19, 22, 0.82);
  --switch-bg: rgba(17, 19, 22, 0.55);
  --logo-hell: block;
  --logo-dunkel: none;
  --card-schatten: none;

  --glass-bg: linear-gradient(150deg, rgba(232, 234, 237, 0.10), rgba(242, 243, 245, 0.04) 40%, rgba(0, 74, 173, 0.10));
  --glass-border: rgba(242, 243, 245, 0.14);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(242, 243, 245, 0.12);
  --glass-field-bg: rgba(17, 19, 22, 0.45);
  --glass-field-border: rgba(242, 243, 245, 0.16);
  --tile-bg: rgba(242, 243, 245, 0.05);
  --tile-border: rgba(242, 243, 245, 0.13);
  --tile-hover: rgba(232, 234, 237, 0.10);
  --tile-selected: rgba(232, 234, 237, 0.16);
  --icon-bg: rgba(232, 234, 237, 0.14);
  --icon-border: rgba(232, 234, 237, 0.22);
  --field-bg: #1C1F23;
  --field-border: #363B41;
  --upload-border: rgba(242, 243, 245, 0.28);
  --upload-bg: rgba(242, 243, 245, 0.04);
  --track: rgba(242, 243, 245, 0.15);
  --glow-1: rgba(236, 238, 240, 0.16);
  --glow-2: rgba(232, 234, 237, 0.30);

  --ok-text: #86EFAC;
  --ok-bg: rgba(134, 239, 172, 0.08);
  --ok-border: rgba(134, 239, 172, 0.45);
  --err-text: #FCA5A5;
  --err-bg: rgba(252, 165, 165, 0.08);
  --err-border: rgba(252, 165, 165, 0.4);
}

/* Im dunklen Design sind Hervorhebungen in hellen Sektionen dunkel (wie bisher) */
:root[data-theme="dark"] .section--light { --em: #2A2E33; }

/* Über Fotos (Startbild, Seitenkopf, Kopfleiste ganz oben): Linien und
   Nebentext heller, sonst gehen sie im Bild unter */
.site-header { --line: rgba(242, 243, 245, 0.28); --muted: #C9CDD2; }
.hero, .page-head { --muted: #CDD1D6; }

/* Kurzes, weiches Überblenden beim Umschalten des Designs (main-a9.js setzt
   die Klasse für einen Moment) */
html.theme-wechsel *,
html.theme-wechsel *::before,
html.theme-wechsel *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Anker-Sprünge dürfen nicht unter der fixierten Kopfleiste landen
   (gescrollt rund 101 px, ungescrollt 112 px hoch) */
[id] { scroll-margin-top: 7.5rem; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Sichtbarer Tastaturfokus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: 400; }

p { text-wrap: pretty; }

/* Hervorhebung über Farbe statt Kursive: im hellen Design ein zweiter Grauton */
em { font-style: normal; color: var(--em); }

/* Kleine Überschrift über dem Titel – seit November 2026 ohne Strich davor */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--muted); max-width: 44ch; }

/* ---------- Layout-Helfer ---------- */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: var(--section-y); position: relative; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* ==========================================================================
   SIGNATUR: Masslinie – Bemassungslinie wie im Küchenplan
   Als Sektionstrenner: <div class="masslinie"><span>2400 mm · Massarbeit</span></div>
   ========================================================================== */
.masslinie {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  margin-inline: var(--pad);
}
.masslinie::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--mass);
}
/* Endstriche wie bei technischer Bemassung */
.masslinie::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 6px);
  height: 13px;
  background:
    linear-gradient(var(--mass), var(--mass)) left center / 1px 13px no-repeat,
    linear-gradient(var(--mass), var(--mass)) right center / 1px 13px no-repeat;
}
.masslinie span {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding-inline: 1.25rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ==========================================================================
   Kopfleiste, Design-Umschalter, Vollbild-Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem var(--pad);
  color: var(--text);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.site-header.is-scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.75rem;
}

.logo {
  position: relative;
  z-index: 102;
  display: block;
}
/* Logo: auf dem Desktop gross, zum Handy hin so weit herunter, dass Logo,
   Design-Umschalter und Menü-Knopf auch auf 360 px nebeneinander Platz haben.
   Zwei Fassungen: hell über Fotos und im dunklen Design, dunkel auf hellem
   Grund. Welche sichtbar ist, bestimmt die Palette der Kopfleiste. */
.logo img { height: clamp(2.6rem, 1.83rem + 3.3vw, 4.8rem); width: auto; }
.logo__hell { display: var(--logo-hell, block); }
.logo__dunkel { display: var(--logo-dunkel, none); }

.header-cta { display: none; }
@media (min-width: 760px) {
  .header-cta {
    display: inline-block;
    margin-left: auto;
    margin-right: 1.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--muted);
    transition: color 0.3s ease;
  }
  .header-cta:hover { color: var(--text); }
}

/* Design-Umschalter: Sonne = hell, Mond = dunkel, der Knopf gleitet */
.themeswitch {
  position: relative;
  z-index: 102;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 4.25rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  margin-left: auto;
  margin-right: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--switch-bg);
  color: var(--muted);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
@media (min-width: 760px) {
  .themeswitch { margin-left: 0; margin-right: 1.4rem; }
}
.themeswitch::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.45s var(--ease-out), background 0.3s ease;
}
:root[data-theme="dark"] .themeswitch::before { transform: translateX(2.05rem); }
.themeswitch svg {
  position: relative;
  z-index: 1;
  width: 0.95rem;
  height: 0.95rem;
  transition: color 0.3s ease;
}
.themeswitch__sonne { color: var(--on-accent); }
:root[data-theme="dark"] .themeswitch__sonne { color: var(--muted); }
:root[data-theme="dark"] .themeswitch__mond { color: var(--on-accent); }
.themeswitch:hover { border-color: var(--line-strong); }

/* Burger */
.nav-toggle {
  z-index: 102;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  width: 2rem;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.45s var(--ease-out), opacity 0.3s ease, background 0.3s ease;
}
.nav-toggle:hover span { background: var(--muted); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Overlay-Navigation */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--nav-bg);
  display: grid;
  place-items: normal;
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s 0.7s;
}
body.nav-open .nav-overlay {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-out);
}
/* Das Menü zentriert sich über automatische Ränder: Ist genug Platz, steht es
   exakt in der Mitte; ist es höher als der Bildschirm, beginnt es unter der
   Kopfleiste und lässt sich scrollen, statt abgeschnitten zu werden. */
.nav-overlay > div {
  margin: auto;
  padding-block: 7.5rem;
}
/* Kopfleiste über das Overlay heben, sonst ist der Schliessen-Knopf verdeckt */
body.nav-open .site-header {
  z-index: 102;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-overlay ul { text-align: center; }
.nav-overlay li { overflow: hidden; }
.nav-overlay a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  /* wächst mit der Breite und ist durch die Höhe begrenzt, damit das Menü
     auch auf flachen Laptops (1280 x 720) unter die Kopfleiste passt */
  font-size: clamp(2rem, min(6vw, 5.6vh), 3.75rem);
  line-height: 1.35;
  color: var(--text);
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out), color 0.3s ease, opacity 0.3s ease;
}
body.nav-open .nav-overlay a { transform: translateY(0); }
body.nav-open .nav-overlay li:nth-child(2) a { transition-delay: 0.05s; }
body.nav-open .nav-overlay li:nth-child(3) a { transition-delay: 0.10s; }
body.nav-open .nav-overlay li:nth-child(4) a { transition-delay: 0.15s; }
body.nav-open .nav-overlay li:nth-child(5) a { transition-delay: 0.20s; }
body.nav-open .nav-overlay li:nth-child(6) a { transition-delay: 0.25s; }
body.nav-open .nav-overlay li:nth-child(7) a { transition-delay: 0.30s; }
/* Fährt die Maus über das Menü, treten die anderen Punkte zurück */
@media (hover: hover) {
  .nav-overlay ul:hover a:not(:hover) { opacity: 0.4; }
}
.nav-overlay a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.nav-overlay .nav-contact {
  margin-top: 2.5rem;
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.nav-overlay .nav-contact a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  transform: none;
  color: var(--accent);
}

/* ==========================================================================
   Startbild (Hero): mittig, mit Masslinie unter dem Titel
   «Auf den Millimeter.» steht als Bemassung unter «Küchen, die bleiben.»:
   Die Linie zieht sich beim Laden von der Mitte nach aussen auf.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(7.5rem, 16vh, 10rem) clamp(5rem, 11vh, 8rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--text);
}
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__media img { animation: kenburns 22s var(--ease-out) both; }
@keyframes kenburns {
  from { transform: scale(1.14) translateX(1.5%); }
  to   { transform: scale(1.0)  translateX(0); }
}
/* Abdunkeln: oben und unten stärker, dazu eine weiche Mitte hinter dem Text */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 50% at 50% 52%, rgba(17, 19, 22, 0.5), rgba(17, 19, 22, 0) 72%),
    linear-gradient(180deg, rgba(17, 19, 22, 0.62) 0%, rgba(17, 19, 22, 0.3) 42%, rgba(17, 19, 22, 0.88) 100%);
}
.hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero__title {
  max-width: none;
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span {
  display: inline-block;
  transform: translateY(115%);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) > span { animation-delay: 0.15s; }
@keyframes rise { to { transform: translateY(0); } }

/* Bemassung: |—— AUF DEN MILLIMETER. ——| */
.hero__mass {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.6rem);
  width: min(100%, 44rem);
  margin: clamp(1.1rem, 2.6vh, 1.75rem) auto 0;
  font-size: clamp(0.72rem, 0.6rem + 0.55vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__mass > span {
  flex: none;
  padding-left: 0.34em;          /* gleicht die Sperrung nach dem letzten Zeichen aus */
  opacity: 0;
  animation: fadeup 1s var(--ease-out) 0.55s forwards;
}
.hero__mass::before,
.hero__mass::after {
  content: "";
  flex: 1;
  height: 15px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  opacity: 0.75;
  transform: scaleX(0);
  animation: massziehen 1.3s var(--ease-out) 0.45s forwards;
}
.hero__mass::before { border-left: 1px solid currentColor; transform-origin: right center; }
.hero__mass::after { border-right: 1px solid currentColor; transform-origin: left center; }
@keyframes massziehen { to { transform: scaleX(1); } }

.hero__sub {
  margin: clamp(1.5rem, 3.5vh, 2.25rem) auto 0;
  max-width: 50ch;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
  opacity: 0;
  animation: fadeup 1s var(--ease-out) 0.8s forwards;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1rem;
  margin-top: clamp(2rem, 4.5vh, 2.75rem);
  opacity: 0;
  animation: fadeup 1s var(--ease-out) 1s forwards;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .hero .hero__actions { width: 100%; }
  /* volle Breite und etwas engere Sperrung, damit beide Beschriftungen einzeilig bleiben */
  .hero .hero__actions .btn { width: 100%; max-width: 24rem; padding-inline: 1.25rem; font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* Scroll-Hinweis unten in der Mitte */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.3em;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 2.75rem;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}
@media (max-width: 700px), (max-height: 720px) { .hero__scroll { display: none; } }

/* ==========================================================================
   Knöpfe
   Rund, mit Füllung, die beim Überfahren von links einläuft. Hauptknöpfe
   tragen einen Pfeil, der dabei ein Stück nach rechts rückt.
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-farbe: var(--text);
  --btn-rand: var(--accent);
  --btn-fuell: var(--accent);
  --btn-fuell-farbe: var(--on-accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--btn-rand);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-farbe);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-fuell);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  color: var(--btn-fuell-farbe);
  border-color: var(--btn-fuell);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.55);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.btn:disabled::before { transform: scaleX(0); }

.btn--solid {
  --btn-bg: var(--accent);
  --btn-farbe: var(--on-accent);
  --btn-rand: var(--accent);
  --btn-fuell: var(--accent-hover);
  --btn-fuell-farbe: var(--on-accent);
}
.btn--solid::after {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-right: -0.2em;
  background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
  transition: transform 0.45s var(--ease-out);
}
.btn--solid:hover::after,
.btn--solid:focus-visible::after { transform: translateX(5px); }

.btn--ghost { --btn-rand: var(--line-strong); }

/* Über Fotos: Glas statt leerer Fläche */
.hero .btn--ghost,
.page-head .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-rand: rgba(242, 243, 245, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--klein {
  min-height: 2.6rem;
  padding: 0.55rem 1.15rem;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.link-arrow::after { content: "→"; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(6px); }

/* ==========================================================================
   Scroll-Reveal (per IntersectionObserver, siehe main-a9.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ==========================================================================
   Leistungs-Karten
   Im hellen Design weiss auf grauer Sektion, im dunklen Design dunkel.
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, background 0.4s ease, box-shadow 0.5s ease;
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: var(--card-schatten);
}
.card__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.card h3 { font-size: 1.45rem; color: var(--text); }
.card p { color: var(--muted); font-size: var(--text-sm); line-height: 1.75; flex-grow: 1; }
.card .link-arrow { margin-top: 0.5rem; }

/* ==========================================================================
   Vorher/Nachher-Slider
   Aufbau: .ba | .ba__after (img) | .ba__before (div mit img, wird geclippt)
   ========================================================================== */
.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  --pos: 50%;
}
.ba img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { position: absolute; inset: 0; }
.ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: #E8EAED;
  pointer-events: none;
}
.ba__handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #141619;
  border: 1px solid #E8EAED;
  color: #E8EAED;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
.ba__label {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(17, 19, 22, 0.75);
  color: #F2F3F5;
  border: 1px solid rgba(242, 243, 245, 0.2);
  pointer-events: none;
}
.ba__label--before { left: 1rem; }
.ba__label--after  { right: 1rem; }

/* ==========================================================================
   Referenzen-Galerie + Filter + Grossansicht
   ========================================================================== */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 2.5rem 2rem;
}
.filterbar button {
  padding: 0.6rem 1.3rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.filterbar button:hover { border-color: var(--accent); color: var(--text); }
.filterbar button.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.gallery__item.is-hidden { display: none; }
/* Wrapper, wenn Galerie-Kacheln als Link dienen (z. B. Teaser auf der Startseite) */
.gallery__link { display: block; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s ease;
}
.gallery__item:hover img { transform: scale(1.06); filter: brightness(0.65); }
/* Bildunterschrift liegt immer auf dunklem Verlauf, deshalb feste helle Farben */
.gallery__item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1.25rem;
  color: #F2F3F5;
  background: linear-gradient(transparent, rgba(17, 19, 22, 0.9));
  transform: translateY(30%);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.gallery__item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery__item figcaption b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.gallery__item figcaption span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #E8EAED; }

/* Grossansicht */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 19, 22, 0.94);
  display: none;
  place-items: center;
  padding: var(--pad);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-height: 82vh; max-width: 100%; border: 1px solid var(--line); }
.lightbox__caption { margin-top: 1rem; text-align: center; color: var(--muted); font-size: var(--text-sm); }
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.lightbox__close:hover { color: var(--accent); transform: rotate(90deg); }

/* ==========================================================================
   Zahlen / Counter
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.stat > span {
  display: block;
  margin-top: 0.85rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Prozess-Timeline
   ========================================================================== */
.timeline { position: relative; margin-top: 3.5rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 0.5px);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}
.timeline__step {
  position: relative;
  padding-left: 4rem;
  padding-bottom: 3rem;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 6px);
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.timeline__step.is-visible::before {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.timeline__step .step-mass {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline__step h3 { margin-block: 0.35rem 0.6rem; font-size: 1.45rem; }
.timeline__step p { color: var(--muted); max-width: 54ch; }

/* ==========================================================================
   Team (Über uns)
   Fotos schwarzweiss, beim Überfahren in Farbe. Funktionen folgen.
   ========================================================================== */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 19rem));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 3rem;
}
/* Auf dem Handy zwei Porträts nebeneinander */
@media (max-width: 559px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .team figcaption b { font-size: 1rem; }
}
.team figure { position: relative; }
.team__bild {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.team img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s ease, transform 0.9s var(--ease-out);
}
.team figure:hover img { filter: grayscale(0); transform: scale(1.035); }
.team figcaption { padding-top: 1.1rem; }
.team figcaption b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.team figcaption span {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.team abbr { text-decoration: none; }
.team figcaption a {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.team figcaption a:hover { color: var(--text); text-decoration-color: currentColor; }
@media (max-width: 559px) {
  .team figcaption a { font-size: 0.8rem; }
}

/* ==========================================================================
   Formulare (Schaden melden, Kontakt, Bewerbung)
   ========================================================================== */
.form { display: grid; gap: 1.25rem; max-width: 40rem; }
.form label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 0.65rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted); opacity: 0.7; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
/* Hinweis «* Pflichtfeld» */
.form-pflicht { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.04em; }

/* Projekt-Wizard (Kontaktseite) */
.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: fadeup 0.5s var(--ease-out); }
.wizard__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}
.wizard__options button {
  padding: 1.4rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}
.wizard__options button:hover { border-color: var(--accent); transform: translateY(-3px); }
.wizard__options button.is-selected { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.wizard__progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wizard__progress i {
  flex: 1;
  height: 2px;
  background: var(--line);
  transition: background 0.4s ease;
}
.wizard__progress i.is-done { background: var(--accent); }
.wizard__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ==========================================================================
   Sticky-CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(150%);
  transition: transform 0.5s var(--ease-out), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta:not(.sticky-cta--dark) { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16); }
.sticky-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Mehrere Sticky-CTAs übereinander (Startseite: Schaden melden + Projekt starten) */
.sticky-cta-stack {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.5s var(--ease-out);
}
.sticky-cta-stack.is-visible { transform: translateY(0); }
.sticky-cta-stack .sticky-cta {
  position: static;
  transform: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sticky-cta--dark {
  background: var(--header-bg);
  color: var(--text);
  border-color: var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sticky-cta--dark:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ==========================================================================
   Fuss (in beiden Designs anthrazit)
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 4rem 2.5rem;
  background: var(--surface);
  color: var(--text);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2.5rem;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.site-footer a, .site-footer p { color: var(--muted); font-size: var(--text-sm); line-height: 2; }
.site-footer a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.footer-bottom a:hover { color: var(--accent); }

/* ==========================================================================
   Seitenkopf für Unterseiten (Foto, immer dunkel)
   ========================================================================== */
.page-head {
  min-height: 55svh;
  display: flex;
  align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: 3.5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
}
.page-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: kenburns 18s var(--ease-out) both;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17, 19, 22, 0.5), rgba(17, 19, 22, 0.9));
}

/* ==========================================================================
   Schaden-Wizard: Glas-Optik
   ========================================================================== */
.section--glow { overflow: hidden; }
.section--glow .container { position: relative; z-index: 1; }
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.glow--1 { width: 34rem; height: 34rem; top: -6rem; right: -8rem; background: radial-gradient(closest-side, var(--glow-1), transparent 72%); }
.glow--2 { width: 26rem; height: 26rem; bottom: -4rem; left: -7rem; background: radial-gradient(closest-side, var(--glow-2), transparent 72%); }

.glass-card {
  margin-top: 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1.25rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.glass-card .wizard__progress i { background: var(--track); }
.glass-card .wizard__progress i.is-done { background: var(--accent); }

.sw__step { display: none; }
.sw__step.is-active { display: block; animation: fadeup 0.5s var(--ease-out); }
.sw__step:focus { outline: none; }
.sw__title { font-size: 1.4rem; font-weight: 400; }
.sw__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.sw__hinweis { margin-top: 0.6rem; color: var(--muted); font-size: var(--text-sm); max-width: 60ch; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin-block: 1.75rem 0.5rem;
}
.tiles[hidden] { display: none; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem 1.2rem;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--accent); background: var(--tile-hover); }
.tile.is-selected {
  border-color: var(--accent);
  background: var(--tile-selected);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.85rem;
  background: var(--icon-bg);
  border: 1px solid var(--icon-border);
  color: var(--accent);
}
.tile__icon svg { width: 1.5rem; height: 1.5rem; }

.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1.5px dashed var(--upload-border);
  border-radius: 1rem;
  background: var(--upload-bg);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.upload:hover, .upload:focus-within { border-color: var(--accent); background: var(--tile-hover); }
.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload__text { display: grid; gap: 0.15rem; min-width: 0; }
.upload__text b { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.upload__text span { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }

.agree { display: flex; align-items: flex-start; gap: 0.8rem; }
.agree input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.agree span { font-size: var(--text-sm); color: var(--muted); }
.agree a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* Upload/Agree sind <label>-Elemente – allgemeine Label-Stile neutralisieren */
.form .upload, .form .agree {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--text);
  margin-bottom: 0;
}

.sw__error {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--err-border);
  border-radius: 0.65rem;
  background: var(--err-bg);
  color: var(--err-text);
  font-size: var(--text-sm);
}
.sw__error a { color: inherit; text-decoration: underline; }

.sw__success { display: block; animation: fadeup 0.5s var(--ease-out); }
.sw__success[hidden] { display: none; }
.sw__success:focus { outline: none; }
.sw__success-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; }
.sw__success-icon svg { width: 2rem; height: 2rem; }
.sw__success p { color: var(--muted); max-width: 52ch; }

/* Eingabefelder in der Glaskarte */
.glass-card .form input:not([type="file"]):not([type="checkbox"]),
.glass-card .form select,
.glass-card .form textarea {
  background: var(--glass-field-bg);
  border-color: var(--glass-field-border);
}
.glass-card .form input:not([type="file"]):not([type="checkbox"]):focus,
.glass-card .form select:focus,
.glass-card .form textarea:focus { border-color: var(--accent); }

/* Karte (Kontaktseite) – Satellit */
.map { padding: 0; overflow: hidden; }
.map iframe { display: block; width: 100%; aspect-ratio: 21 / 9; border: 0; }
@media (max-width: 700px) {
  .map iframe { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Anfahrt (Kontaktseite): wo der Eingang ist
   ========================================================================== */
.anfahrt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad) clamp(1.25rem, 3vw, 2rem);
}
.anfahrt .eyebrow { margin-bottom: 0; }
.anfahrt__titel {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--text-xl);
  font-weight: 400;
}
.anfahrt__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--accent);
}
.anfahrt__icon svg { width: 1.3rem; height: 1.3rem; }
.anfahrt__text { color: var(--muted); max-width: 46ch; }
/* Kurzform direkt unter der Adresse */
.eingang {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.eingang svg { width: 1.05rem; height: 1.05rem; color: var(--accent); }

/* ==========================================================================
   Reduzierte Bewegung – Barrierefreiheit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__sub, .hero__actions, .hero__mass > span { opacity: 1; }
  .hero__mass::before, .hero__mass::after { transform: none; }
}

/* ==========================================================================
   «So arbeiten wir» – Sticky Scroll (Startseite)
   Links bleibt die Einleitung stehen, rechts zieht der Ablauf vorbei. Die
   Linie füllt sich dabei wie ein Massband, die Punkte leuchten in dem
   Moment auf, in dem die Linie sie erreicht, und der aktuelle Schritt ist
   hervorgehoben. Gesteuert von main-a9.js über die Variable --fortschritt
   und die Klassen is-visible und is-active.
   Nur zweispaltig: einspaltig würde die stehende Einleitung die Schritte
   verdecken. Deshalb ist der Spaltenwechsel fest an 960 px gebunden.
   ========================================================================== */
.prozess .timeline::before {
  background: linear-gradient(to bottom,
    var(--accent) calc(var(--fortschritt, 0) * 100%),
    var(--line) calc(var(--fortschritt, 0) * 100%));
}

@media (max-width: 959px) {
  .prozess > .grid-2 { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .prozess > .grid-2 { grid-template-columns: 1fr 1fr; }
  .prozess__intro { position: sticky; top: 8rem; }
  .prozess .timeline__step {
    padding-bottom: clamp(4.5rem, 12vh, 8rem);
    opacity: 0.35;
    transition: opacity 0.5s ease;
  }
  .prozess .timeline__step:last-child { padding-bottom: 0; }
  .prozess .timeline__step.is-active { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .prozess .timeline__step { opacity: 1; transition: none; }
}

/* ==========================================================================
   Jobs: Stellenliste wie bei MLG, dazu die Online-Bewerbung
   Je Stelle eine Zeile: Titel · Firma · Pensum · Ort · Mehr erfahren (PDF)
   · Jetzt bewerben. Die Spalten richten sich über alle Zeilen aus, weil
   jede Zeile dasselbe Raster hat. Unter 900 px stapelt sich alles.
   ========================================================================== */
.stellen {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line-strong);
}
.stelle {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) auto;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.stelle__titel {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.stelle__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem;
  gap: 1.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.stelle__aktion {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
@media (max-width: 899px) {
  .stelle { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.6rem 0; }
  .stelle__meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0; }
  .stelle__meta span + span::before { content: "·"; margin-inline: 0.6rem; }
  .stelle__aktion { justify-content: flex-start; margin-top: 0.9rem; }
}
@media (max-width: 480px) {
  .stelle__aktion .btn { flex: 1 1 10rem; }
}
.stellen__fuss {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.stellen__fuss a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }

/* ---------- Rückmeldung unter dem Bewerbungsformular ---------- */
.form-note {
  padding: 0.9rem 1.1rem;
  border-radius: 0.65rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.form-note[hidden] { display: none; }
.form-note a { color: inherit; text-decoration: underline; white-space: nowrap; }
.form-note--ok  { border: 1px solid var(--ok-border);  background: var(--ok-bg);  color: var(--ok-text); }
.form-note--err { border: 1px solid var(--err-border); background: var(--err-bg); color: var(--err-text); }
.form-hinweis { font-size: var(--text-sm); color: var(--muted); }
.form-hinweis a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }

.checklist { display: grid; gap: 0.85rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  line-height: 1.55;
  color: var(--muted);
  break-inside: avoid;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 1rem;
  height: 0.5rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}