/* =========================================================
   eventstar – Phase 2: Modernisierung (evolutionär)
   Gleiche Marke (Schwarz · Weiß · #821815, Nunito/Space Grotesk/Public Sans),
   mehr Luft, Glass-Navigation, Soft Shadows, Micro-Interactions.
   ========================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Marke (unverändert) */
  --c-primary:       #821815;
  --c-primary-hover: #821815;   /* bewusst identisch: offizielle Markenfarbe, Hover nur über Lift + Glow */
  --c-on-primary:    #ffffff;   /* Weiß auf #821815 = 10 : 1 Kontrast (WCAG AAA) */
  --c-primary-glow:  rgba(130, 24, 21, .45);

  /* Neutrals – leicht angehobenes Schwarz für Tiefe */
  --c-bg:       #050607;
  --c-surface:  #0e1214;
  --c-surface-2:#141a1d;
  --c-slate:    #222f34;
  --c-ink:      #12191c;         /* Text auf hellem Glas */
  --c-text:     #f5f6f7;
  --c-muted:    rgba(245, 246, 247, .76);   /* ca. 11 : 1 auf Schwarz statt 7 : 1 */
  --c-line:     rgba(255, 255, 255, .08);

  /* Typografie */
  --f-display: "Nunito Sans", system-ui, sans-serif;
  --f-heading: "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Public Sans", system-ui, sans-serif;

  --fs-sm:      .9375rem;
  --fs-body:    1.125rem;
  --fs-lead:    clamp(1.125rem, 1.4vw, 1.25rem);
  --fs-eyebrow: clamp(1rem, 1.5vw, 1.25rem);
  --fs-h2:      clamp(2rem, 4.2vw, 3.25rem);
  --fs-h1:      clamp(2.75rem, 7.5vw, 5.75rem);

  /* Spacing-Skala (8-pt) */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;   --s-8: 8rem;
  --section-y: clamp(5rem, 11vw, 9rem);

  /* Form */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-tile: 24px;   /* einheitlicher Kachel-Radius (Menü + Seite) */

  /* Schatten (soft, mehrlagig) */
  --shadow-card:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 2px 4px rgba(0,0,0,.25),
    0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-card-hover:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 4px 8px rgba(0,0,0,.3),
    0 28px 60px -12px rgba(0,0,0,.7),
    0 0 0 1px rgba(130,24,21,.35),
    0 20px 60px -20px var(--c-primary-glow);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .2s;
  --t-med: .45s;
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 var(--fs-body)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
/* Akzent-Wort: kein Rot als Text (Kontrast), sondern Gewichtung –
   Grundtext gedämpft, Akzent voll weiß + kräftiger. Das Markenrot trägt das Stern-Icon. */
mark { background: none; color: var(--c-text); font-weight: 600; }
::selection { background: var(--c-primary); color: #fff; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 1000;
  background: #fff; color: #000; padding: .75rem 1.25rem; border-radius: var(--r-pill);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Liquid Glass (Apple-Stil) ---------- */
@property --glass-tint { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .07); }
/* Wiederverwendbare Glas-Oberfläche: sehr transparent, leichte Unschärfe,
   Lichtkante (Rim) per Masken-Gradient, Tiefe per inneren Schatten. */
.glass {
  --glass-tint: rgba(255, 255, 255, .07);
  --glass-blur: 10px;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%) brightness(1.06);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),      /* obere Lichtkante */
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 0 0 24px rgba(255, 255, 255, .04),     /* Volumen */
    0 10px 40px -10px rgba(0, 0, 0, .55);        /* Schwebeschatten */
  color: #fff;
}
/* Spiegelnde Kante: 1px-Rand mit Verlauf, nur der Rand bleibt sichtbar */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%,
    rgba(255,255,255,0) 50%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Glanzlicht oben links */
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.10), transparent 45%);
}
/* Lichtbrechung (nur Chromium; per JS aktiviert) */
.glass--refract { -webkit-backdrop-filter: url(#glass-refract) blur(var(--glass-blur)) saturate(170%) brightness(1.06); backdrop-filter: url(#glass-refract) blur(var(--glass-blur)) saturate(170%) brightness(1.06); }

/* Fallback ohne backdrop-filter / „Transparenz reduzieren“: dunkel deckend */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(16, 19, 21, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: #101315; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 3b. Navigation (volle Contentbreite, BYD-Prinzip) ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 16px var(--gutter) 0;
  pointer-events: none;
}
.nav__shell {
  pointer-events: auto;
  width: min(100%, var(--container));    /* exakt so breit wie der Content */
  margin-inline: auto;
  border-radius: 32px;
  transition: --glass-tint var(--t-med) var(--ease-out);
}
/* Beim Scrollen bzw. offenem Panel: etwas mehr Tönung → Lesbarkeit auf jedem Untergrund */
.nav.is-scrolled .nav__shell { --glass-tint: rgba(12, 14, 16, .38); }
.nav.is-open .nav__shell     { --glass-tint: rgba(12, 14, 16, .78); --glass-blur: 28px; }

.nav__bar {
  display: flex; align-items: center; gap: var(--s-4);
  height: 64px; padding: 0 10px 0 26px;
}
.nav :focus-visible { outline-color: #fff; }

/* Logo: Weiß-Variante (Schriftzug weiß, Quadrat #821815) – img/logo/eventstar-logo-weiss-*.webp */
.logo { display: inline-block; flex-shrink: 0; padding: 6px 0; }
.logo__img { display: block; width: 140px; height: auto; }
.logo--footer .logo__img { width: 150px; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  height: 40px; padding: 0 .85rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: rgba(255,255,255,.86);
  font: 500 .9375rem/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);              /* hält Text auf hellen Stellen lesbar */
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); }
.nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
/* aktiver Reiter wie bei BYD: feine Linie unter dem Wort */
.nav__link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 6px; height: 2px; border-radius: 2px;
  background: #fff; transform: scaleX(0); transition: transform var(--t-med) var(--ease-out);
}
.nav__link--menu::after { right: 2.05rem; }
.nav__link[aria-expanded="true"] { color: #fff; }
.nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; transition: background-color var(--t-fast);
}
.nav__icon svg { width: 20px; height: 20px; }
.nav__icon:hover { background: rgba(255,255,255,.1); }

.nav__toggle {
  display: none; position: relative; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.nav__toggle:hover { background: rgba(255,255,255,.1); }
.nav__toggle-line {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform var(--t-med) var(--ease-out), top var(--t-med) var(--ease-out);
}
.nav__toggle-line:nth-child(2) { top: 18px; }
.nav__toggle-line:nth-child(3) { top: 25px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Aufklapp-Panel: die Glasfläche wächst nach unten (wie bei BYD) */
.nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.nav__panel[hidden] { display: none; }
.nav.is-open .nav__panel { grid-template-rows: 1fr; }
.nav__panel-inner { overflow: hidden; min-height: 0; }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  margin: 0 26px; padding: var(--s-3) 0 var(--s-2); border-top: 1px solid rgba(255,255,255,.12);
}
.panel__title { font: 600 1rem/1.3 var(--f-body); }
.panel__all { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; text-decoration: none; color: rgba(255,255,255,.8); }
.panel__all svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); }
.panel__all:hover { color: #fff; }
.panel__all:hover svg { transform: translateX(3px); }

.panel__grid {
  list-style: none; margin: 0; padding: var(--s-1) 18px 20px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.panel-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; height: 100%;
  padding: 16px 18px 18px; text-decoration: none;
}
.panel-card img { width: 96px; height: 96px; object-fit: contain; margin: -6px 0 6px -8px; transition: transform var(--t-med) var(--ease-out); }
.panel-card strong { font: 700 1.0625rem/1.25 var(--f-heading); }
.panel-card span:not(.pill) { font-size: .875rem; line-height: 1.4; color: rgba(255,255,255,.72); margin-bottom: .9rem; }
.panel-card .pill  { margin-top: auto; white-space: nowrap; font-size: .8125rem; padding: .45rem .8rem; }
.panel-card:hover img { transform: scale(1.06) rotate(-3deg); }
.panel__mobile-links { display: none; }
.panel__sub { font-size: .9375rem; color: rgba(255,255,255,.7); }
.panel__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-card__photo { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin: -4px 0 12px; }
.panel-card__photo picture { display: contents; }
.panel-card__photo img { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; filter: grayscale(1) brightness(.85); transition: filter .5s var(--ease-out), transform .8s var(--ease-out) !important; }
.panel-card--photo:hover .panel-card__photo img { filter: none; transform: scale(1.04) !important; }
/* Mobilmenü: zwei gleichwertige Gruppen */
.nav__panel--mobile { display: none; }
.mnav__title { margin: 14px 26px 8px; font: 400 .8125rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mnav__grid, .mnav__list { list-style: none; margin: 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mnav__grid a, .mnav__list a {
  display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: 8px 12px; border-radius: 16px;
  text-decoration: none; color: #fff; font: 600 .875rem/1.2 var(--f-body); min-width: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.mnav__grid a:active, .mnav__list a:active { background: rgba(255,255,255,.12); }
.mnav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mnav__grid a { flex-direction: column; justify-content: center; gap: .35rem; padding: 10px 4px; text-align: center; font-size: .8125rem; letter-spacing: -.01em; }
@media (max-width: 380px) { .mnav__grid a { font-size: .75rem; } }
.mnav__grid img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.mnav__list a { justify-content: space-between; }
.mnav__list svg { width: 16px; height: 16px; opacity: .6; flex-shrink: 0; }
.btn.mnav__cta { display: flex; margin: 16px 14px 18px; width: auto; }

/* Hauptpunkt „Unsere Kompetenzen“ hervorgehoben */
.nav__link--primary { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #fff; margin-right: 6px; }
.nav__link--primary:hover, .nav__link--primary[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.nav__link--primary::after { display: none; }

.nav__contact { margin-right: 4px; }

/* Abdunklung der Seite bei offenem Panel */
.nav__scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fade var(--t-med) var(--ease-out);
}
.nav__scrim[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

/* ---------- 3c. Einheitliche Kacheln (Menü + Seite) ---------- */
.tile {
  position: relative; isolation: isolate;
  border-radius: var(--r-tile);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background-color var(--t-fast), border-color var(--t-fast),
              transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
/* Roter Schein, der der Maus folgt (#821815; Position per JS, sonst oben mittig) */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(130, 24, 21, .38), transparent 60%);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.tile:hover, .tile:focus-within { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.tile:hover::before, .tile:focus-within::before { opacity: 1; }
.tile--lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .85), 0 20px 60px -28px var(--c-primary-glow);
}

/* „Mehr erfahren“-Pill (identisch in Menü und Seite) */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); color: #fff;
  font: 500 .875rem/1 var(--f-body); font-style: normal; text-decoration: none;
  transition: background-color var(--t-fast);
}
.pill svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--ease-out); }
.tile:hover .pill, .tile:focus-within .pill { background: var(--c-primary); }
.tile:hover .pill svg { transform: translateX(3px); }

/* ---------- 4. Buttons & Micro-Interactions ---------- */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn {
  --_bg: transparent; --_fg: var(--c-text);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.9rem;
  font: 500 1rem/1 var(--f-body); letter-spacing: .005em; text-decoration: none;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

/* Lichtreflex, der beim Hover über den Button läuft */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn__arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform var(--t-med) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  --_bg: var(--c-primary); --_fg: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px -8px var(--c-primary-glow);
}
.btn--primary:hover {
  --_bg: var(--c-primary-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 14px 36px -8px var(--c-primary-glow);
}
.btn--ghost {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }
.btn--light { --_bg: #fff; --_fg: var(--c-ink); }
.btn--light::after { background: linear-gradient(105deg, transparent 30%, rgba(130,24,21,.15) 50%, transparent 70%); }
.btn--sm { padding: .7rem 1.15rem; font-size: .9375rem; }
.btn--block { width: 100%; }

/* ---------- 5. Typo-Bausteine ---------- */
/* Unterüberschrift (Eyebrow): bündig zur H2, rote Linie (#821815) als Marken-Akzent,
   Versalien mit Sperrung in Public Sans, ohne Fettschrift; Akzentwort per <mark> nur weiß */
.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: var(--s-3);
  font: 400 1rem/1.2 var(--f-body);      /* Public Sans – wie Fließtext, Menü und Footer */
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow::before {
  content: ""; flex-shrink: 0;
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--c-primary);
}
.eyebrow > span { min-width: 0; }   /* Text darf umbrechen, Linie bleibt vorne */
.eyebrow mark { font-weight: inherit; color: inherit; }
/* Alternative B (nicht aktiv): rote Kapsel – Klasse .eyebrow--fill ergänzen */
.eyebrow--fill {
  display: inline-flex; padding: .45rem 1rem; border-radius: var(--r-pill);
  background: var(--c-primary); color: rgba(255,255,255,.82); font-size: .9rem;
}
.eyebrow--fill::before { content: none; }
.section-title {
  font: 700 var(--fs-h2)/1.1 var(--f-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lead {
  margin-top: var(--s-3);
  font-size: var(--fs-lead); color: var(--c-muted);
  max-width: none; text-wrap: pretty;   /* volle Contentbreite */
}
.section-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
/* Überschriften stehen immer linksbündig */

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 860px);
  display: flex; align-items: center;
  padding: 140px 0 var(--s-7);
  overflow-x: clip;               /* nur seitlich beschneiden – der Schein darf weich nach unten auslaufen */
}
.hero__visual {
  position: absolute; z-index: -1;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  top: 52%; translate: 0 -50%;
  width: clamp(300px, 36vw, 540px);
}
.hero__visual img {
  width: 100%; height: auto;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6));
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}
.hero__content { position: relative; }
.hero__content > * { max-width: min(100%, 640px); }
.hero__title {
  font: 400 clamp(2.75rem, 6.2vw, 5.5rem)/1.02 var(--f-display);
  letter-spacing: -.03em;
  margin-bottom: var(--s-4);
}
.hero__text {
  max-width: 34rem; margin-bottom: var(--s-5);
  font-size: var(--fs-lead); color: var(--c-muted);
}

/* ---------- 7. Sections ---------- */
.section { padding-block: var(--section-y); }
.section--tint {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(130,24,21,.14), transparent 60%),
    linear-gradient(180deg, var(--c-bg), var(--c-surface) 30%, var(--c-surface) 70%, var(--c-bg));
}

/* Leistungs-Karten */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-4);
}
.card__icon {
  width: 128px; aspect-ratio: 1; margin: -.5rem 0 var(--s-3) -.75rem;
  transition: transform var(--t-med) var(--ease-out);
}
.card:hover .card__icon { transform: scale(1.06) rotate(-3deg); }
@media (min-width: 900px) {   /* Kompetenzen: oben 3 Technik-Kacheln, darunter 2 breite */
  .cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards--5 > :nth-child(-n+3) { grid-column: span 2; }
  .cards--5 > :nth-child(n+4) { grid-column: span 3; }
  .cards--5 > :nth-child(n+4) { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: start; }
  .cards--5 > :nth-child(n+4) .card__icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .cards--5 > :nth-child(n+4) { grid-template-rows: auto auto 1fr; }
  .cards--5 > :nth-child(n+4) .pill { justify-self: start; align-self: end; }
}
.card__title { font: 700 1.5rem/1.2 var(--f-heading); letter-spacing: -.015em; margin-bottom: .75rem; }
.card__text  { color: var(--c-muted); font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--s-4); }
.card .pill  { margin-top: auto; }
.card .pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* ganze Kachel klickbar */

/* Ablauf */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: none;
}
.step { padding: var(--s-4); }
.step__no {
  display: inline-block; margin-bottom: var(--s-3);
  font: 700 .875rem/1 var(--f-heading); letter-spacing: .08em;
  color: var(--c-on-primary); background: var(--c-primary);
  padding: .45rem .7rem; border-radius: var(--r-pill);
}
.step h3 { font: 700 1.375rem/1.25 var(--f-heading); margin-bottom: .5rem; }
.step p  { color: var(--c-muted); font-size: 1.0625rem; line-height: 1.7; }

/* Ansprechpartner */
.contact-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.contact-solo .section-head { margin-bottom: 0; }
.people--solo { grid-template-columns: 1fr; }
@media (max-width: 1180px) { .contact-solo { grid-template-columns: 1fr; } .people--solo { max-width: 680px; } }
.people--solo .person { grid-template-columns: 38% 1fr; }
.people { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.person {
  display: grid; grid-template-columns: 42% 1fr; align-items: end;
  overflow: hidden;
}
.person__media {
  position: relative; align-self: stretch; display: flex; align-items: flex-end;
  background: radial-gradient(80% 60% at 50% 85%, rgba(130,24,21,.5), transparent 70%);
}
.person__media img {
  width: 100%; max-height: 380px; object-fit: contain; object-position: bottom;
  transition: transform .8s var(--ease-out);
}
.person:hover .person__media img { transform: scale(1.03); }
.person__body { padding: var(--s-4) var(--s-4) var(--s-4) var(--s-2); }
.person__name { font: 600 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.person__first { display: block; font-weight: 300; color: var(--c-muted); font-size: .72em; letter-spacing: 0; margin-bottom: .1em; }
.person__role { color: var(--c-muted); margin: .5rem 0 var(--s-3); font-size: 1.0625rem; }
.person__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.person__contact a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px;
  font-size: .9375rem; text-decoration: none; overflow-wrap: anywhere;
  color: var(--c-text); opacity: .85; transition: opacity var(--t-fast), color var(--t-fast);
}
.person__contact a:hover { opacity: 1; color: #fff; }
.person__actions { display: flex; align-items: center; gap: .75rem; margin-top: var(--s-3); }
.btn.person__call { flex-shrink: 0; width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.person__call svg { width: 22px; height: 22px; }
.person__write { flex: 1; justify-content: center; white-space: nowrap; padding-inline: 1.1rem; min-width: 0; }
.btn__icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Popup „Nachricht an …“ */
.person-dialog { padding: 0; border: 0; background: transparent; color: var(--c-text); width: min(560px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow: auto; }
.person-dialog::backdrop { background: rgba(5,6,7,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.person-dialog[open] { animation: dlg-in .28s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.person-dialog__inner { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); }
.person-dialog .person-dialog__inner.tile { background: #111517; }
.person-dialog__close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--c-text); background: rgba(255,255,255,.08);
}
.person-dialog__close:hover { background: rgba(255,255,255,.16); }
.person-dialog__close svg { width: 20px; height: 20px; }
.person-dialog__title { font: 700 clamp(1.375rem, 3vw, 1.75rem)/1.2 var(--f-heading); letter-spacing: -.02em; margin: .4rem 3rem 1.25rem 0; }
.form.form--dialog { padding: 0; overflow: visible; }
.form.form--dialog .form__grid { gap: var(--s-2); }
.form.form--dialog .form__actions { margin-top: var(--s-3); }
html.has-dialog { overflow: hidden; }
@media (max-width: 560px) { .form--dialog .form__grid > .field { grid-column: 1 / -1; } }

/* Produktseite: Zurück-Link oben rechts neben den Brotkrumen */
.product__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--s-5); }
.product__top .breadcrumb ol { margin-bottom: 0; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; color: var(--c-text); text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background var(--t-fast), border-color var(--t-fast);
}
.back-link svg { width: 18px; height: 18px; transform: rotate(180deg); transition: transform var(--t-med) var(--ease-out); }
.back-link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.back-link:hover svg { transform: rotate(180deg) translateX(3px); }
.ico {
  flex-shrink: 0; width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: rgba(255,255,255,.07); color: var(--c-text);
}


/* ---------- Anfrage ---------- */
.section-head--form { margin-bottom: 2.5rem; }   /* Vorteile gehören sichtbar zum Formular */
.inquiry__benefits { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: .9rem 2.5rem; }
.inquiry__benefits li { display: flex; align-items: center; gap: .75rem; font-size: 1.0625rem; }
.inquiry__benefits svg {
  width: 28px; height: 28px; padding: 6px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary);
}

.form {
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
/* Formular nutzt die Kachel-Optik (.tile); der rote Schein bleibt hier dezenter */
.form.tile::before { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(130, 24, 21, .22), transparent 60%); }
.form__hint { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-3); }
.form__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); }
.form__grid > .field { grid-column: span 6; }
.form__grid > .field--third   { grid-column: span 4; }   /* Anlass · Termin · Gäste */
.form__grid > .field--quarter { grid-column: span 3; }   /* Name · Firma · E-Mail · Telefon */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: .45rem; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.form__grid > .field--full { grid-column: 1 / -1; }
.field label, .field legend { font: 500 .9375rem/1.3 var(--f-body); color: var(--c-text); padding: 0; }
.field legend { margin-bottom: .6rem; }

.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px;
  padding: .8rem 1rem;
  font: 400 1rem/1.4 var(--f-body); color: var(--c-text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.field select {
  appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f6f7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}
.field select option { background: var(--c-surface); color: var(--c-text); }
.field textarea { resize: vertical; min-height: 120px; }
.field ::placeholder { color: rgba(245,246,247,.58); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.35); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: #fff;
  background-color: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }

.field__help  { font-size: .875rem; color: var(--c-muted); }
.field__error { display: none; font-size: .875rem; font-weight: 500; color: #fff; }
/* Fehlerzustand: Markenrot als Fläche/Rahmen, Text bleibt weiß (Kontrast) */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.field.is-invalid .field__error { display: flex; align-items: flex-start; gap: .5rem; }
.field.is-invalid .field__error::before {
  content: "!"; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: .75rem; font-weight: 700; margin-top: .1em;
}

/* Chips (Mehrfachauswahl) */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .6rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.03);
  font-size: .9375rem;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover span { border-color: rgba(255,255,255,.45); }
.chip input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.chip input:checked + span::before { content: "✓"; font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.chip:active span { transform: scale(.97); }

/* Checkbox Datenschutz */
.field--check { grid-template-columns: auto 1fr; column-gap: .85rem; align-items: start; }
.field--check input {
  appearance: none; width: 24px; height: 24px; margin: 1px 0 0; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: 6px; background: transparent;
  display: grid; place-items: center;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.field--check input::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.field--check input:checked { background: var(--c-primary); border-color: var(--c-primary); }
.field--check input:checked::after { opacity: 1; }
.field--check input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.field--check label { font-weight: 400; font-size: .9375rem; color: var(--c-muted); line-height: 1.55; }
.field--check label a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.field--check .field__error { grid-column: 2; }

.form__summary {
  margin-bottom: var(--s-3); padding: 1rem 1.25rem; border-radius: 12px;
  background: rgba(130,24,21,.18); border: 1px solid var(--c-primary); color: #fff; font-size: .9375rem;
}
.form__summary:focus { outline: none; }
.form__summary ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.form__summary a { color: #fff; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.form__alt { font-size: .9375rem; color: var(--c-muted); }
.form__alt a { color: var(--c-text); text-decoration: none; font-weight: 500; }
.form__alt a:hover { text-decoration: underline; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }

.form__status:not(:empty) {
  margin-top: var(--s-3); padding: 1rem 1.25rem; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--c-line);
}
.form.is-sent .form__grid, .form.is-sent .form__actions, .form.is-sent .form__hint { display: none; }
.form.is-sent .form__status { margin-top: 0; padding: var(--s-4); font-size: 1.125rem; }

/* ---------- 8. Footer (gleiche Schrift wie Fließtext: Public Sans) ---------- */
.footer {
  border-top: 1px solid var(--c-line);
  padding: var(--s-6) 0 var(--s-4);
  font: 400 1rem/1.6 var(--f-body);
}
.footer__grid { display: grid; gap: var(--s-5); grid-template-columns: 1.3fr repeat(3, 1fr); }
.footer__claim { margin-top: var(--s-2); color: var(--c-muted); max-width: 28ch; }
.footer__title { font: 600 1rem/1.3 var(--f-body); color: var(--c-text); margin-bottom: var(--s-1); }
.footer__grid nav, .footer__grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.footer a { color: var(--c-muted); text-decoration: none; padding-block: .15rem; transition: color var(--t-fast); }
.footer a:hover { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer__address { font-style: normal; display: grid; gap: .6rem; color: var(--c-muted); }
.footer__line { display: inline-flex; align-items: flex-start; gap: .6rem; }
.footer__line svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .2em; color: var(--c-text); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--c-line);
  color: var(--c-muted); font-size: .9375rem;
}
.footer__legal p:last-child { display: flex; flex-wrap: wrap; gap: .5rem var(--s-3); }

/* Mobile Schnellkontakt (Liquid Glass, unten) */
.quickbar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 80; display: none; gap: 8px; padding: 6px;
  border-radius: var(--r-pill);
  --glass-tint: rgba(12, 14, 16, .4);
  transform: translateY(150%); visibility: hidden;
  transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.quickbar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.quickbar svg { width: 18px; height: 18px; }
.quickbar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem; border-radius: var(--r-pill); font-weight: 500; text-decoration: none;
}
.quickbar__primary { background: var(--c-primary); }

/* ---------- 9. Scroll-Reveal (nur mit JS aktiv) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1100px) {
  .nav__icon { display: none; }
  .nav__link { padding: 0 .45rem; font-size: .84375rem; }
  .nav__cta { white-space: nowrap; }
  .nav__bar { gap: 12px; padding-left: 20px; }
  .nav__cta .btn__arrow { display: none; }
  .nav__link--primary { margin-right: 2px; }
  .logo__img { width: 124px; }
  .panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}
@media (max-width: 1023px) {
  .nav__links, .nav__cta, .nav__contact { display: none; }
  .nav__panel:not(.nav__panel--mobile) { display: none !important; }
  .nav__panel--mobile:not([hidden]) { display: grid; }
  .nav__toggle { display: block; }
  .nav__bar { height: 60px; padding-left: 20px; }
  .nav__shell { border-radius: 28px; }
  .panel__head { display: none; }
  .panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 12px 8px; border-top: 1px solid rgba(255,255,255,.12); margin: 0 14px; padding-inline: 0; }
  .panel-card { padding: 12px 14px 14px; }
  .panel-card img { width: 64px; height: 64px; margin: -4px 0 4px -6px; }
  .panel-card span, .panel-card .pill { display: none; }
  .panel__grid li:last-child { grid-column: 1 / -1; }
  .panel__mobile-links { display: flex; flex-direction: column; padding: 6px 26px 18px; }
  .panel__mobile-links a:not(.btn) { padding: .8rem 0; font-weight: 500; text-decoration: none; color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.1); }
  .panel__mobile-links .btn { margin-top: 1rem; }
  .nav__panel-inner { max-height: calc(100svh - 110px); overflow-y: auto; }
  .form__grid > .field--third, .form__grid > .field--quarter { grid-column: span 6; }
  .form__grid > .field--third:nth-of-type(3) { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; padding-top: 110px; min-height: 0; }
  .hero__visual { position: relative; right: auto; top: auto; translate: none; width: min(72vw, 340px); margin: 0 auto 1.5rem; order: -1; }
}
@media (max-width: 640px) {
  .btn-group .btn { flex: 1 1 100%; }
  .person { grid-template-columns: 1fr; }
  .person__media img { max-height: 300px; }
  .person__body { padding: var(--s-3); }
  .footer__grid { grid-template-columns: 1fr; }
  .form__grid > .field, .form__grid > .field--third, .form__grid > .field--quarter { grid-column: 1 / -1; }
  .form__actions .btn { width: 100%; }
  .quickbar { display: flex; }
  body { padding-bottom: 80px; }
  .eyebrow { font-size: .875rem; gap: .75rem; }
  .eyebrow::before { width: 28px; }
}


/* ---------- 11. Unterseiten ---------- */
/* Seitenkopf: Brotkrumen, Eyebrow, H1, Einleitung, optional breites Foto */
.page-hero { padding: 132px 0 0; }
.breadcrumb ol { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .875rem; color: var(--c-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb a { text-decoration: none; color: var(--c-muted); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb [aria-current] { color: var(--c-text); }
.page-title {
  font: 400 clamp(2.5rem, 5.6vw, 4.75rem)/1.04 var(--f-display);
  letter-spacing: -.03em; text-wrap: balance;
}
.page-title--product { font-size: clamp(2.25rem, 4.4vw, 3.75rem); }
.page-title__suffix { color: var(--c-muted); font-weight: 300; }
.page-hero__text .lead { margin-top: var(--s-3); }
.page-hero__media { margin-top: var(--s-6); overflow: hidden; aspect-ratio: 21 / 9; padding: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__media picture { display: contents; }
/* Seitenkopf aller Unterseiten: Text links, Bild rechts daneben – am Inhaltsraster ausgerichtet,
   damit es auch auf sehr breiten Bildschirmen neben dem Text sitzt; Ränder laufen weich ins Schwarz aus */
.page-hero--split {
  --edge: max(var(--gutter), (100vw - var(--container)) / 2);
  --inner: min(var(--container), 100vw - 2 * var(--gutter));
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 74vh, 720px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 132px 0 clamp(3.5rem, 7vw, 6rem);
}
.page-hero--split .container { position: relative; }
.page-hero--split .page-hero__text { max-width: min(100%, 720px); }
.page-hero--split .lead { max-width: 36rem; }
.page-hero__bg {
  position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(var(--edge) + var(--inner) * .36);
  right: max(0px, var(--edge) - 14rem);
}
.page-hero__bg picture { display: contents; }
.page-hero__bg img { width: 100%; height: 100%; display: block; }
.page-hero--photo .page-hero__bg img { object-fit: cover; }
.page-hero__video {   /* gleiche weiche Ränder wie das Titelbild (Maske greift bei Videos nicht über den Elternblock) */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: inherit; mask-image: inherit; -webkit-mask-composite: inherit; mask-composite: inherit;
}
@media (prefers-reduced-motion: no-preference) { .page-hero__bg--video img { visibility: hidden; } }   /* Video ersetzt das Titelbild */
@media (prefers-reduced-motion: reduce) { .page-hero__video { display: none; } }                        /* nur Standbild */
.page-hero--photo .page-hero__bg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 32%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.page-hero--photo .page-hero__bg::after {   /* leicht abdunkeln, oben für die Navigation etwas mehr */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,7,.65) 0%, rgba(5,6,7,.15) 30%, rgba(5,6,7,.1) 100%);
}
@media (min-width: 1600px) {   /* breite Bildschirme: Bild endet weich auch nach rechts */
  .page-hero--photo .page-hero__bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 82%, transparent 100%), linear-gradient(0deg, transparent 0, #000 32%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 82%, transparent 100%), linear-gradient(0deg, transparent 0, #000 32%);
  }
}
.page-hero--star { min-height: clamp(480px, 64vh, 620px); }
.page-hero--star .page-hero__bg {
  left: auto; right: var(--edge); width: clamp(260px, 30vw, 440px);
  top: 120px; bottom: 40px; display: flex; align-items: center;
}
.page-hero--star .page-hero__bg img { height: auto; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); animation: float 9s ease-in-out infinite; }
.section--first { padding-top: clamp(4rem, 8vw, 6.5rem); }
.stack { display: grid; gap: var(--s-3); }
.stack > *, .service > * { min-width: 0; }
.service__title, .page-title, .section-title { overflow-wrap: break-word; hyphens: auto; }

/* Leistungsblöcke: Text frei auf der Seite wie auf der Startseite, nur „Das übernehmen wir“ als Kachel */
.section--services { padding-top: clamp(2.5rem, 5vw, 4rem); }
.services { display: grid; }
.service {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem);
  align-items: start; padding-block: clamp(3.5rem, 7vw, 5.5rem); scroll-margin-top: 110px;
}
.service + .service { border-top: 1px solid var(--c-line); }
.service:first-child { padding-top: 0; }
.service:last-child { padding-bottom: 0; }
.service__text .section-title { margin-bottom: var(--s-3); }
.service__body p { font-size: var(--fs-lead); color: var(--c-muted); line-height: 1.7; text-wrap: pretty; }
.service__body p + p { margin-top: var(--s-3); }
.service__list { padding: clamp(1.5rem, 3vw, 2.25rem); }
.service__icon { display: block; width: 96px; height: 96px; object-fit: contain; margin: -.5rem 0 var(--s-2) -.75rem; }
.service__list-title { font: 400 .8125rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-3); }
.service__list .checklist li { font-size: 1rem; }

/* Häkchen-Liste */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; font-size: 1.0625rem; line-height: 1.55; }
.checklist svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--c-primary); color: #fff; margin-top: .05em; }
.checklist strong { color: var(--c-text); }

/* Filter (Technik, Referenzen) */
.filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--s-4); }
.filter__btn { scroll-margin-top: 120px;

  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.1rem;
  border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
  color: var(--c-text); font: 500 .9375rem/1 var(--f-body); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.filter__btn:hover { border-color: rgba(255,255,255,.45); }
.filter__btn[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); }
.filter__count { font-size: .8125rem; padding: .15rem .5rem; border-radius: var(--r-pill); background: rgba(255,255,255,.12); }
.filter__empty { color: var(--c-muted); }
.is-filtered-out { display: none !important; }

/* Produktkacheln */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { display: flex; flex-direction: column; padding: 10px; }
.product-card__media { aspect-ratio: 3 / 4; overflow: hidden; border-radius: calc(var(--r-tile) - 8px); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 14px 10px 10px; flex: 1; }
.product-card__cat { font: 600 .75rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.product-card__title { font: 700 1.0625rem/1.3 var(--f-heading); margin-bottom: .75rem; }
.product-card .pill { margin-top: auto; }
.product-card .pill::after, .ref-card .pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Produktseite */
.product { padding: 132px 0 0; }
.product__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.product__media { padding: 10px; position: sticky; top: 110px; }
.product__media img { width: 100%; height: auto; display: block; border-radius: calc(var(--r-tile) - 8px); }
.product__overview { margin: var(--s-4) 0 var(--s-5); }
.product__overview p { color: var(--c-muted); font-size: var(--fs-lead); line-height: 1.7; }
.product__overview p + p, .product__overview .checklist { margin-top: var(--s-3); }
/* Produktdetail: Datenblatt links (frei, ohne Kachel), Anfrageformular rechts */
#artikel-anfrage { scroll-margin-top: 90px; }
.specs .section-title { margin-bottom: var(--s-4); }
.specs__list { margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
.specs__row {
  display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: var(--s-3);
  padding: 1rem .25rem; border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; line-height: 1.55;
}
.specs__row:nth-child(even of .specs__row) { background: rgba(255,255,255,.02); }
.specs__row dt { color: var(--c-muted); }
.specs__row dd { margin: 0; color: var(--c-text); overflow-wrap: anywhere; }
.specs__row dd ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.specs__head { padding: 2rem .25rem .6rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.specs__head h3 { font: 400 .8125rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text); }
.specs__head h3::before { content: ""; display: inline-block; width: 20px; height: 3px; margin: 0 .6rem .2em 0; background: var(--c-primary); vertical-align: middle; }
.specs__note { margin-top: var(--s-3); font-size: .9375rem; color: var(--c-muted); }
/* kompaktes Formular in der Seitenspalte */
.form--compact { padding: clamp(1.5rem, 3vw, 2rem); }
.form--compact .form__grid { gap: var(--s-2) var(--s-2); }
@media (min-width: 1101px) {   /* Artikelanfrage: Anzahl schmal, Service breit */
  .form__grid > .field--quarter.field--qty { grid-column: span 2; }
  .form__grid > .field--quarter.field--service { grid-column: span 4; }
}
.form__kicker { font: 400 .8125rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.form__title { font: 700 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--f-heading); letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.form--compact .form__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
.form--compact .form__alt { text-align: center; }

/* Über uns – Meilensteine */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.milestone { padding: var(--s-4); display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.milestone__year { grid-row: 1 / span 2; margin-bottom: 0; }
@media (max-width: 640px) { .milestone { grid-template-columns: 1fr; } .milestone__year { grid-row: auto; margin-bottom: var(--s-3); } }
.milestone__year { font: 400 clamp(2.5rem, 4vw, 3.25rem)/1 var(--f-display); letter-spacing: -.03em; }
.milestone__year::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--c-primary); margin-top: var(--s-2); }
.milestone__title { font: 700 1.25rem/1.3 var(--f-heading); margin-bottom: .6rem; }
.milestone p { color: var(--c-muted); line-height: 1.7; }

/* Referenzen */
.ref-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ref-card { padding: 10px; display: flex; flex-direction: column; }
.ref-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--r-tile) - 8px); }
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.ref-card:hover .ref-card__media img { transform: scale(1.04); }
.ref-card__body { padding: 14px 10px 10px; display: grid; gap: .35rem; align-content: start; }
.ref-card__body .product-card__cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-card__title { font: 700 1.125rem/1.3 var(--f-heading); }
.ref-card { position: relative; }
.ref-card__link { color: inherit; text-decoration: none; }
.ref-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.ref-card__link:focus-visible { outline: none; }
.ref-card:has(.ref-card__link:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.ref-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) clamp(2rem, 6vw, 5rem); margin: 0 0 var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.ref-facts dt { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .3rem; }
.ref-facts dd { margin: 0; font-size: 1.0625rem; }
.ref-facts a { color: var(--c-text); text-decoration-color: var(--c-primary); text-underline-offset: 3px; }
.ref-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.ref-gallery__item { margin: 0; padding: 10px; }
.ref-gallery__item img { width: 100%; height: auto; display: block; border-radius: calc(var(--r-tile) - 8px); }

/* Teaser-Raster + „Mehr“-Button */
.ref-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section-more { margin-top: var(--s-4); }
/* Einheitliche Bildwirkung der Referenzen: gleicher Rahmen, gleicher dezenter Verlauf */
.ref-card__media { position: relative; }
.ref-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,6,7,0) 55%, rgba(5,6,7,.35) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; }
/* Referenzbilder: in Graustufen, volle Farben erst beim Überfahren (Grau wirkt ruhiger als Rot und lässt die roten Akzente stehen) */
.ref-card__media img { filter: grayscale(1) contrast(1.08) brightness(.9); transition: transform .8s var(--ease-out), filter .5s var(--ease-out); }
.ref-card:hover .ref-card__media img, .ref-card:focus-within .ref-card__media img { filter: none; }
@media (hover: none) { .ref-card__media img { filter: grayscale(.6); } }
.eyebrow-link { text-decoration: none; color: inherit; display: inline-block; }
.eyebrow-link:hover .eyebrow { color: var(--c-text); }

/* Jobs */
.job-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.job-block { padding: var(--s-4); }
.job-block__title { font: 700 1.375rem/1.25 var(--f-heading); margin-bottom: var(--s-3); }
.cta-tile { margin-top: var(--s-3); padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.cta-tile__title { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--f-heading); margin-bottom: .5rem; }
.cta-tile p { color: var(--c-muted); max-width: 70ch; }

/* Kontakt */
/* Kontaktseite */
.event-hint {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(120deg, rgba(130,24,21,.28), rgba(130,24,21,.06) 55%), var(--c-surface);
  border-color: rgba(130,24,21,.45);
}
.event-hint__icon { width: 88px; height: 88px; object-fit: contain; }
.event-hint__title { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--f-heading); letter-spacing: -.02em; margin-bottom: .4rem; }
.event-hint__text p { color: var(--c-muted); font-size: 1.0625rem; line-height: 1.65; max-width: 46rem; }
.section--hint { padding-bottom: 0; }
.contact-card__ico.contact-card__ico--brand { background: rgba(255,255,255,.08); }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.contact-card { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .75rem; }
.contact-card h3 { font: 700 1.25rem/1.2 var(--f-heading); margin-top: .25rem; }
.contact-card__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: #fff; }
.contact-card__ico svg { width: 22px; height: 22px; }
.contact-card__ico img { width: 26px; height: 26px; object-fit: contain; }
.contact-card__big { font: 600 1.25rem/1.3 var(--f-body); color: var(--c-text); text-decoration: none; white-space: nowrap; }
.contact-card__note, .contact-card address { color: var(--c-muted); font-style: normal; line-height: 1.65; }
.contact-card__mails { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.contact-card__mails a { display: grid; font-size: .9375rem; color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
.contact-card__mails a span { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.contact-card__mails a:hover, .contact-card__big:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-card__facts { margin: 0; display: grid; gap: .55rem; }
.contact-card__facts dt { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.contact-card__facts dd { margin: 0; }
.contact-card .pill { margin-top: auto; align-self: flex-start; }
.form-note {
  display: flex; gap: .75rem; align-items: flex-start; margin-top: var(--s-4); padding: 1rem 1.25rem;
  border-left: 4px solid var(--c-primary); background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0;
  font-size: 1.0625rem; line-height: 1.6;
}
.form-note svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: .2em; }
.form-note a { color: var(--c-text); font-weight: 600; }
@media (max-width: 960px) { .contact-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .event-hint { grid-template-columns: 1fr; }
  .event-hint .btn { justify-self: start; }
}
@media (max-width: 560px) { .contact-cards { grid-template-columns: 1fr; } }
.company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.company__card { padding: clamp(1.75rem, 4vw, 3rem); }
.company__icon { width: 88px; height: 88px; margin-bottom: var(--s-3); }
.company__address { font-style: normal; display: grid; gap: .8rem; margin: var(--s-3) 0 var(--s-4); color: var(--c-muted); font-size: 1.0625rem; }
.company__address a { color: var(--c-muted); text-decoration: none; }
.company__address a:hover { color: var(--c-text); }
.company__media { padding: 10px; overflow: hidden; }
.company__media picture { display: block; height: 100%; }
.company__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: calc(var(--r-tile) - 8px); display: block; }

/* Rechtstexte */
/* Rechtstexte: frei auf der Seite wie der Fließtext der Startseite */
.prose { font-size: var(--fs-lead); line-height: 1.7; text-wrap: pretty; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font: 700 clamp(1.5rem, 2.6vw, 2.125rem)/1.2 var(--f-heading); letter-spacing: -.02em; color: var(--c-text); margin-top: clamp(3rem, 6vw, 4.5rem); }
.prose h3 { font: 700 clamp(1.1875rem, 1.6vw, 1.375rem)/1.3 var(--f-heading); margin-top: 2.25rem; }
.prose h4 { font: 600 1rem/1.4 var(--f-body); margin-top: 1.5rem; color: var(--c-muted); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--c-muted); }
.prose strong { color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: .4rem; }
.prose a { color: var(--c-text); text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; word-break: break-word; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.prose { min-width: 0; overflow-wrap: break-word; }
.prose td { overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--c-line); }
.prose th { width: 28%; color: var(--c-muted); font-weight: 600; }

@media (max-width: 960px) {
  .service, .product__grid, .company, .contact-solo { grid-template-columns: 1fr; }
  .contact-solo .section-head { margin-bottom: 0; }
  .page-hero.page-hero--split { min-height: 0; justify-content: flex-end; padding-top: calc(96px + 46vw); }
  .page-hero__bg { left: 0; right: 0; bottom: auto; height: calc(104px + 62vw); }
  .page-hero--photo .page-hero__bg, .page-hero--photo .page-hero__bg {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 55%); mask-image: linear-gradient(0deg, transparent 0, #000 55%);
  }
  .page-hero--star .page-hero__bg { left: auto; right: var(--gutter); top: 96px; bottom: auto; height: auto; width: min(44vw, 260px); }
  .page-hero.page-hero--star { padding-top: calc(96px + min(46vw, 260px)); }
  .product__media { position: static; max-width: 520px; }
  .product-grid--4, .ref-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .page-hero, .product { padding-top: 104px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card__title { font-size: .9375rem; }
  .ref-grid--4 { grid-template-columns: 1fr; }
  .specs__row { grid-template-columns: 1fr; gap: .2rem; }
  .form--compact .form__grid > .field { grid-column: 1 / -1; }
  .page-hero__media { aspect-ratio: 4 / 3; }
}

/* Höherer Kontrast auf Wunsch des Systems */
@media (prefers-contrast: more) {
  :root { --c-muted: #ffffff; --c-line: rgba(255,255,255,.35); }
  .field input:not([type="checkbox"]), .field select, .field textarea, .chip span { border-color: rgba(255,255,255,.6); }
  .glass { --glass-tint: rgba(10, 12, 14, .92); }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Dezent animierter Pfeil im Menü-Button */
@keyframes nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } 95% { transform: translateX(2px); } }
.btn__arrow--nudge { animation: nudge 3.2s var(--ease-out) infinite; }
.btn:hover .btn__arrow--nudge { animation: none; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn__arrow--nudge { animation: none; } }

/* Menü „Unsere Kompetenzen“ wie die Startseite: oben 3 Technik-Kacheln, darunter 2 breite */
.panel__grid--komp { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.panel__grid--komp > li:nth-child(-n+3) { grid-column: span 2; }
.panel__grid--komp > li:nth-child(n+4) { grid-column: span 3; }
.panel__grid--komp > li:nth-child(n+4) .panel-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; align-items: start;
}
.panel__grid--komp > li:nth-child(n+4) .panel-card img { grid-row: 1 / span 3; margin: -6px 0 0 -8px; }
.panel__grid--komp > li:nth-child(n+4) .panel-card .pill { justify-self: start; align-self: end; margin-top: .6rem; }
.panel__grid--komp .panel-card span:not(.pill) { margin-bottom: .6rem; }
/* Mobil: gleiche Ordnung – 3 kleine Kacheln, darunter 2 breite mit Icon links */
.mnav__grid--komp { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mnav__grid--komp > li:nth-child(-n+3) { grid-column: span 2; }
.mnav__grid--komp > li:nth-child(n+4) { grid-column: span 3; }
.mnav__grid--komp > li:nth-child(n+4) a { flex-direction: row; justify-content: flex-start; text-align: left; padding: 8px 10px; gap: .5rem; }
.mnav__grid--komp > li:nth-child(n+4) img { width: 36px; height: 36px; }

/* Technik-Kacheln wie Referenzen: Graustufen, volle Farben erst beim Überfahren */
.product-card__media img { filter: grayscale(1) contrast(1.08) brightness(.9); transition: transform .8s var(--ease-out), filter .5s var(--ease-out); }
.product-card:hover .product-card__media img, .product-card:focus-within .product-card__media img { filter: none; }
@media (hover: none) { .product-card__media img { filter: grayscale(.6); } }


/* =====================================================================
   12. Mobile-Optimierung (320–1024 px)
   Breakpoints: 1023 px (Tablet, Hamburger-Menü) · 767 px (Smartphone quer/klein-Tablet) · 479 px (Smartphone)
   ===================================================================== */

/* Kein horizontales Scrollen – „clip“ statt „hidden“, damit Sticky-Elemente, das fixe Menü
   und Dropdowns nicht abgeschnitten werden */
html, body { overflow-x: clip; }

/* Menü offen → Seite darunter scrollt nicht mit (wird per JS gesetzt) */
html.nav-locked, html.nav-locked body { overflow: hidden; }
.nav__panel-inner { overscroll-behavior: contain; }

/* Tabellen (z. B. in Rechtstexten): horizontal scrollbar mit Schatten als Hinweis */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--c-bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--c-bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255,255,255,.18), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.18), transparent) right / 12px 100% no-repeat scroll;
}
.table-wrap table { min-width: 520px; }

/* Mobiler Abschluss im Footer (nur unter 768 px sichtbar) */
.footer__cta { display: none; }

/* ---------- Tablet & Smartphone: Touch-Ergonomie (≥ 48 × 48 px) ---------- */
@media (max-width: 1023px), (pointer: coarse) {
  .logo { display: inline-flex; align-items: center; min-height: 48px; }
  .nav__toggle { width: 48px; height: 48px; }
  .nav__toggle-line { left: 15px; }
  .nav__toggle-line:nth-child(2) { top: 20px; }
  .nav__toggle-line:nth-child(3) { top: 27px; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2),
  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) { top: 23px; }

  .pill { min-height: 48px; padding-inline: 1.15rem; font-size: .9375rem; }
  .filter__btn, [data-filter] { min-height: 48px; }
  .btn, .btn--sm { min-height: 48px; }
  .person__contact a { min-height: 48px; }
  .contact-card__big { display: inline-flex; align-items: center; min-height: 48px; }
  .contact-card__mails a { min-height: 48px; justify-content: center; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-link { min-height: 48px; }
  .eyebrow-link { min-height: 48px; display: inline-flex; align-items: center; }

  /* Footer-Links als volle Tap-Zeilen */
  .footer nav a, .footer__address a { display: flex; align-items: center; min-height: 48px; padding-block: 0; }
  .footer__legal p:last-child a { display: inline-flex; align-items: center; min-height: 48px; }

  /* Kleine Versal-Beschriftungen gut lesbar */
  .product-card__cat, .service__list-title { font-size: .8125rem; }
}

/* ---------- ≤ 1023 px: Tablet ---------- */
@media (max-width: 1023px) {
  .section { padding-block: clamp(3.5rem, 9vw, 5.5rem); }
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav__panel-inner { max-height: calc(100svh - 96px); overflow-y: auto; }
}

/* Tablet hochkant: Hero-Text und Stern teilen sich die Breite, Kompetenzen 2 + 2 + 1 breit */
@media (min-width: 761px) and (max-width: 1023px) {
  .hero__content > * { max-width: 58%; }
  .hero__visual { width: 36vw; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--5 > :last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--s-4); }
  .cards--5 > :last-child .card__icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .cards--5 > :last-child .pill { justify-self: start; align-self: end; }
}

/* ---------- ≤ 767 px: Smartphone ---------- */
@media (max-width: 767px) {
  /* Hero- und Abschluss-CTAs als volle Tap-Flächen */
  .hero .btn-group, .page-hero .btn-group, .product__info .btn-group { flex-direction: column; align-items: stretch; }
  .hero .btn, .product__info .btn, .cta-tile .btn, .section-more .btn, .form__actions .btn { width: 100%; justify-content: center; }
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__alt { text-align: center; }
  .cta-tile { flex-direction: column; align-items: stretch; }

  /* Grids: kompakt 2-spaltig bzw. 1-spaltig */
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ref-grid, .ref-grid--4 { grid-template-columns: 1fr; }
  .cards, .job-grid, .contact-cards { grid-template-columns: 1fr; }

  /* Ansprechpartner-Aktionen: Nachricht volle Breite, Anruf daneben */
  .person__actions .person__write { flex: 1; }
  .people--solo .person { grid-template-columns: 1fr; }
  .person__contact a { overflow-wrap: anywhere; }

  .footer__brand { max-width: none; }
  .footer__cta { display: grid; gap: 10px; margin-top: var(--s-4); align-self: stretch; width: 100%; }
  .footer__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__legal { flex-direction: column; }

}

/* Platz für die mobile Schnellkontakt-Leiste (sichtbar bis 640 px) */


/* Touch-Tablets im Querformat (z. B. iPad, 1024 px) mit Desktop-Menü */
@media (min-width: 1024px) and (pointer: coarse) {
  .nav__link { height: 48px; }
  .nav__bar { height: 68px; }
}

/* ---------- ≤ 479 px: kleine Smartphones ---------- */
@media (max-width: 479px) {
  .product-grid, .product-grid--4 { grid-template-columns: 1fr; }
  .product-card__media { aspect-ratio: 4 / 3; }
  .pill { width: 100%; justify-content: center; }
  .contact-card__mails a { overflow-wrap: anywhere; }
  .ref-facts { flex-direction: column; gap: var(--s-2); }
}

/* ---------- Referenzen: 3 je Kategorie + Case-Study-Unterseiten ---------- */
.ref-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .ref-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ref-grid--3 { grid-template-columns: 1fr; } }

.case-stats { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.case-stat { padding: var(--s-4); display: grid; gap: .35rem; }
.case-stat strong { font: 400 clamp(2.25rem, 4vw, 3rem)/1 var(--f-display); letter-spacing: -.03em; }
.case-stat span { color: var(--c-muted); }
.case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.case__steps { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.case-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
.case-step__num { font: 400 clamp(2rem, 3.5vw, 2.75rem)/1 var(--f-display); color: var(--c-primary-text, #fff); opacity: .35; }
.case-step__title { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--f-heading); letter-spacing: -.02em; margin-bottom: .75rem; }
.case-step__title::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--c-primary); margin-top: .75rem; }
.case-step p { color: var(--c-muted); font-size: var(--fs-lead); line-height: 1.7; }
.case__aside { padding: clamp(1.5rem, 3vw, 2rem); position: sticky; top: 104px; display: grid; gap: var(--s-3); }
.case__list li { font-size: 1rem; }
.case__list li strong { display: block; font-weight: 600; line-height: 1.4; }
.case__list li small { display: block; margin-top: .15rem; font-size: .875rem; line-height: 1.45; color: var(--c-muted, rgba(245,246,247,.62)); }
.case-quote { margin: 0; padding: var(--s-4); border-left: 4px solid var(--c-primary); background: rgba(255,255,255,.04); border-radius: 0 16px 16px 0; }
.case-quote p { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.5; }
.case-quote footer { margin-top: .75rem; color: var(--c-muted); }
.case .ref-gallery { margin-top: var(--s-6); }
/* Case Study: Galerie → Anfrage-Kachel → Ansprechpartner enger zusammen */
.case { padding-bottom: clamp(2rem, 4vw, 3rem); }
.case .ref-gallery { margin-bottom: 0; }
.section--case-cta { padding-block: 0; }
.section--case-cta .cta-tile { margin-top: 0; }
.section--case-cta + .section { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (max-width: 1023px) {
  .case__grid { grid-template-columns: 1fr; }
  .case__aside { position: static; }
}
@media (max-width: 767px) {
  .case-stats { grid-template-columns: 1fr; }
  .case-step { grid-template-columns: 1fr; gap: .5rem; }
}

.case .ref-gallery__item picture { display: block; }
.case .ref-gallery__item img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 640px; }

/* ---------- Mobilmenü: gleiche Struktur wie am Desktop (Akkordeon) ---------- */
.mnav { list-style: none; margin: 6px 14px 0; padding: 0; display: grid; }
.mnav > li { border-bottom: 1px solid rgba(255,255,255,.1); }
.mnav__item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 12px;
  border: 0; background: none; color: #fff; text-decoration: none; text-align: left; cursor: pointer;
  font: 600 1.0625rem/1.2 var(--f-body);
}
.mnav__item svg { width: 18px; height: 18px; opacity: .7; transition: transform var(--t-med) var(--ease-out); }
.mnav__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__sub { padding: 2px 0 14px; }
.mnav__sub .mnav__grid, .mnav__sub .mnav__list { margin: 0; }
.mnav__sub .mnav__list { grid-template-columns: 1fr; }

/* Schnellkontakt mobil: nur Telefon- und Kontakt-Icon, rechts unten */
.quickbar { left: auto; right: 14px; padding: 6px; gap: 6px; }
.quickbar a { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.quickbar svg { width: 22px; height: 22px; }

/* Ansprechpartner mobil: Porträt groß, Unterkörper abgeschnitten */
@media (max-width: 767px) {
  .person { grid-template-columns: 1fr; }
  .person__media { height: clamp(300px, 92vw, 420px); overflow: hidden; align-items: stretch; }
  .person__media picture { display: block; width: 100%; height: 100%; }
  .person__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 16%; transform-origin: 50% 20%; }
  .person__body { padding: var(--s-3) var(--s-3) var(--s-4); }
  .person__media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(0deg, rgba(17,20,22,.95), transparent); pointer-events: none; }
}
.panel__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel__grid--2 .panel-card__photo { aspect-ratio: 21 / 9; }