/* Container Rent Petri — Designsystem V3 (Final Art Direction 18.09.2026)
   Offizielle Farben: Grün #95C11F, Blau #009FE3, Dunkelblau #06222E (Quelle: containerrent.de)
   Dunkle, kinematische Flächen; helle Nebelpanels für Lesbarkeit.
   Kein WebGL, keine 3D-Bibliothek, keine externe Abhängigkeit. */

/* ---------- Schriften (lokal, offline-tauglich) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/inter-normal-latin.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: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/inter-normal-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/newsreader-normal-latin.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: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/newsreader-normal-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/newsreader-italic-latin.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: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/newsreader-italic-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Offizielle Marke */
  --green: #95c11f;
  --green-deep: #7ba413;
  --blue: #009fe3;
  --blue-deep: #00668f;      /* Link auf hellen Flächen (AA) */
  --navy: #06222e;           /* offizielles Dunkelblau */

  /* Daraus abgeleitetes Flächensystem */
  --ink: #04161e;            /* Seitengrund, tiefste Fläche */
  --navy-2: #0a2b39;         /* angehobenes Panel */
  --petrol: #0e3a4c;         /* Akzentfläche, Formular */
  --mist: #e8edef;           /* kühle helle Fläche */
  --mist-2: #dbe3e7;         /* tiefere Nebelfläche */
  --smoke: #f2f5f6;          /* hellste Fläche, sparsam */

  /* Text */
  --on-dark: #f2f7f8;
  --on-dark-soft: rgba(255, 255, 255, .68);
  --on-dark-faint: rgba(255, 255, 255, .46);
  --on-light: #06222e;
  --on-light-soft: #45606e;

  /* Linien */
  --line-d: rgba(255, 255, 255, .11);
  --line-d-soft: rgba(255, 255, 255, .06);
  --line-l: rgba(6, 34, 46, .13);
  --line-l-soft: rgba(6, 34, 46, .07);

  --r-panel: clamp(20px, 2.6vw, 38px);
  --r-card: clamp(14px, 1.3vw, 20px);
  --page: min(1600px, calc(100vw - clamp(20px, 4vw, 76px)));
  --pad: clamp(1.5rem, 4vw, 4.4rem);
  --header-h: 80px;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-hover: .22s;
  --t-state: .32s;
  --t-panel: .46s;
  --t-reveal: .72s;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); overflow-x: clip; }
body {
  margin: 0; background: var(--ink); color: var(--on-dark);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Sehr feines Filmkorn über der ganzen Seite — kein Glow, kein Glas */
body::after {
  content: ""; position: fixed; z-index: 999; inset: 0; pointer-events: none;
  opacity: .035; background-image: url("data:image/png;base64,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");
  background-size: 128px 128px; mix-blend-mode: overlay;
}
/* Scrollsperre bei offenem Menü am <html>, nicht am <body>: ein body mit overflow:hidden wird
   (wegen overflow-x:clip am html) zum eigenen Scrollbereich — die klebende Kopfzeile samt
   Schließen-Knopf rutschte dann aus dem Bild, wenn das Menü weiter unten geöffnet wurde. */
html.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.03; letter-spacing: -.022em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .8rem 1.2rem; border-radius: 999px; background: var(--green); color: var(--navy); font-weight: 700; transform: translateY(-190%); transition: transform var(--t-state) var(--ease); }
.skip-link:focus { transform: none; }
.shell { width: var(--page); margin-inline: auto; }
section[id], main[id], div[id] { scroll-margin-top: calc(var(--header-h) + 22px); }

/* ---------- Typo-Bausteine ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .44rem 1rem;
  border: 1px solid var(--line-d); border-radius: 999px; background: rgba(255,255,255,.05);
  color: var(--on-dark-soft); font-size: .67rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.panel-light .pill { border-color: var(--line-l); background: rgba(6,34,46,.04); color: var(--on-light-soft); }
.lead { color: var(--on-dark-soft); font-size: clamp(1rem, .95rem + .28vw, 1.18rem); line-height: 1.58; max-width: 58ch; }
.panel-light .lead { color: var(--on-light-soft); }
.micro { font-size: .8rem; line-height: 1.55; color: var(--on-dark-faint); }
.panel-light .micro { color: var(--on-light-soft); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(4,22,30,.72); backdrop-filter: saturate(150%) blur(18px); border-bottom: 1px solid var(--line-d-soft); transition: background var(--t-state) var(--ease), border-color var(--t-state); }
body.scrolled .site-header { background: rgba(4,22,30,.93); border-bottom-color: var(--line-d); }
.header-inner { width: var(--page); margin-inline: auto; display: flex; align-items: center; gap: 1.2rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; transition: opacity var(--t-hover) var(--ease); }
.brand:hover { opacity: .82; }
.brand img { width: clamp(172px, 15.5vw, 224px); height: auto; }
.main-nav { margin-left: auto; display: none; align-items: center; gap: .1rem; }
.main-nav > .nav-item { position: relative; }
.main-nav > .nav-item > a {
  position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: .38rem;
  min-height: 44px; padding: 0 .5rem; font-size: 1rem; font-weight: 500; color: var(--on-dark-soft);
  transition: color var(--t-hover) var(--ease);
}
.main-nav > .nav-item > a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 15px; height: 1px;
  background: linear-gradient(90deg, var(--green), rgba(149,193,31,.25));
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform var(--t-state) var(--ease), opacity var(--t-hover) var(--ease);
}
.main-nav > .nav-item:hover > a, .main-nav > .nav-item.is-current > a, .main-nav > .nav-item:focus-within > a { color: var(--on-dark); }
.main-nav > .nav-item:hover > a::after, .main-nav > .nav-item.is-current > a::after, .main-nav > .nav-item:focus-within > a::after { transform: scaleX(1); opacity: 1; }
.main-nav > .nav-item > a svg { width: 9px; height: 9px; opacity: .5; transition: transform var(--t-state) var(--ease); }
.main-nav > .nav-item:hover > a svg { transform: rotate(180deg); }
.mega {
  position: absolute; z-index: 60; left: -.4rem; top: calc(100% + 8px); min-width: 264px;
  padding: 1.6rem 1.7rem; border: 1px solid var(--line-d); border-radius: 22px;
  background: linear-gradient(180deg, #0c3143, #071f2a);
  box-shadow: 0 34px 80px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985);
  transition: opacity var(--t-state) var(--ease), transform var(--t-panel) var(--ease), visibility var(--t-panel);
}
.main-nav > .nav-item:hover .mega, .main-nav > .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.main-nav > .nav-item:nth-child(n+3) .mega { left: auto; right: -.4rem; }
.mega-grid { display: flex; flex-wrap: wrap; gap: 1.7rem 2.5rem; }
.mega-grid > div { min-width: 188px; }
.mega-grid h3 { margin-bottom: .75rem; color: var(--green); font-size: .63rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.mega-grid a { display: block; padding: .34rem 0; color: var(--on-dark-soft); font-size: .93rem; font-weight: 450; opacity: 0; transform: translateY(6px); transition: color var(--t-hover) var(--ease), padding-left var(--t-state) var(--ease), opacity .38s var(--ease), transform .38s var(--ease); }
.main-nav > .nav-item:hover .mega a, .main-nav > .nav-item:focus-within .mega a { opacity: 1; transform: none; }
.mega-grid a:hover { color: var(--on-dark); padding-left: 6px; }
.mega-grid a:nth-child(2) { transition-delay: .03s } .mega-grid a:nth-child(3) { transition-delay: .06s }
.mega-grid a:nth-child(4) { transition-delay: .09s } .mega-grid a:nth-child(5) { transition-delay: .12s }
/* Ohne sichtbare Hauptnavigation schiebt margin-left:auto den Menüknopf an den rechten Rand */
.header-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.header-phone { display: none; align-items: center; gap: .5rem; padding: .55rem .95rem; border: 1px solid var(--line-d); border-radius: 999px; color: var(--green); font-size: .95rem; font-weight: 650; white-space: nowrap; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.header-phone span { color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.header-phone:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 12px; border: 1px solid var(--line-d); border-radius: 999px; background: none; cursor: pointer; transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.nav-toggle:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.nav-toggle span[aria-hidden] { display: block; height: 1.5px; background: var(--on-dark); border-radius: 2px; transition: transform var(--t-state) var(--ease), opacity var(--t-hover) var(--ease); }
/* Der erste <span> im Knopf ist die sr-only-Beschriftung, die drei Striche sind span 2–4 */
body.nav-open .nav-toggle span[aria-hidden]:nth-of-type(2) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span[aria-hidden]:nth-of-type(3) { opacity: 0; }
body.nav-open .nav-toggle span[aria-hidden]:nth-of-type(4) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Mobile Navigation ---------- */
.mobile-nav { position: fixed; z-index: 90; inset: var(--header-h) 0 0; padding: 1.4rem clamp(1.1rem, 5vw, 2rem) 3rem; background: linear-gradient(180deg, #071f2a, var(--ink)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity var(--t-state) var(--ease), transform var(--t-panel) var(--ease), visibility var(--t-panel); }
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.mobile-nav details { border-bottom: 1px solid var(--line-d-soft); }
.mobile-nav summary, .mobile-link { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-family: var(--serif); font-size: 1.42rem; font-weight: 400; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-family: var(--sans); font-size: 1.3rem; font-weight: 200; color: var(--on-dark-faint); transition: transform var(--t-panel) var(--ease), color var(--t-hover); }
.mobile-nav details[open] summary::after { transform: rotate(45deg); color: var(--green); }
.mobile-link { border-bottom: 1px solid var(--line-d-soft); }
.mobile-sub { padding: .1rem 0 1.2rem; }
.mobile-group { margin: .9rem 0 .25rem; color: var(--green); font-size: .63rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.mobile-sub a { display: block; padding: .52rem 0; color: var(--on-dark-soft); font-size: 1rem; font-weight: 450; transition: color var(--t-hover) var(--ease), padding-left var(--t-state) var(--ease); }
.mobile-sub a:hover { color: var(--on-dark); padding-left: 5px; }
.mobile-contact { display: grid; gap: .6rem; margin-top: 1.8rem; }
.mobile-contact a { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.25rem; border: 1px solid var(--line-d); border-radius: 15px; font-weight: 600; transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.mobile-contact a:first-child { background: var(--green); border-color: var(--green); color: var(--navy); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; font-size: .9rem; font-weight: 650; letter-spacing: -.005em; transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-state) var(--ease); }
.btn span[aria-hidden] { transition: transform var(--t-state) var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.994); }
.btn-primary { background: var(--green); color: var(--navy); box-shadow: 0 10px 30px -14px rgba(149,193,31,.7); }
.btn-primary:hover { background: #a6d327; transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(149,193,31,.75); }
.btn-ghost { border: 1px solid var(--line-d); color: var(--on-dark); }
.btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.panel-light .btn-ghost { border-color: var(--line-l); color: var(--on-light); }
.panel-light .btn-ghost:hover { border-color: var(--navy); background: rgba(6,34,46,.05); }
.btn-ghost-light { border: 1px solid var(--line-d); color: var(--on-dark); }
.btn-ghost-light:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.more { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; color: var(--green); font-size: .84rem; font-weight: 650; transition: gap var(--t-state) var(--ease); }
.more::after { content: "→"; transition: transform var(--t-state) var(--ease); }
.panel-light .more { color: var(--blue-deep); }
a.card:hover .more::after { transform: translateX(5px); }

/* ---------- Brotkrumen ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.1rem 0 .1rem; color: var(--on-dark-faint); font-size: .78rem; }
.crumbs a { transition: color var(--t-hover) var(--ease); }
.crumbs a:hover { color: var(--on-dark); }

/* ---------- Hero ---------- */
/* z-index: liegt über dem nach oben ragenden Tonverlauf des folgenden Abschnitts (.section::before) */
.hero { position: relative; z-index: 1; width: var(--page); margin: clamp(.5rem, 1.2vw, 1rem) auto 0; border-radius: var(--r-panel); overflow: hidden; background: var(--navy); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
/* Lesbarkeitsmaske: unten durchgehend tragfähig, Bildmitte bleibt offen */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to top, rgba(4,22,30,.97) 0%, rgba(4,22,30,.9) 26%, rgba(4,22,30,.62) 48%, rgba(6,34,46,.22) 74%, rgba(6,34,46,.44) 100%),
  linear-gradient(to right, rgba(4,22,30,.8) 0%, rgba(4,22,30,.42) 46%, rgba(4,22,30,.1) 78%, rgba(4,22,30,.26) 100%); }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(84vh, 800px); padding: clamp(2.2rem, 4.2vw, 4rem); }
.hero-sm .hero-inner { min-height: min(52vh, 470px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: end; gap: clamp(1.6rem, 3vw, 3.4rem); }
.hero-eyebrow { margin-bottom: clamp(1rem, 2vw, 1.7rem); }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 5.2rem); }
.hero-sm h1 { font-size: clamp(2.1rem, 4.4vw, 63.2px); } /* bewusst in px begrenzt: wächst nicht mit der Grundschrift */
.hero-lead { margin-top: 1.15rem; max-width: 46ch; color: var(--on-dark-soft); font-size: clamp(.98rem, .94rem + .22vw, 1.12rem); line-height: 1.6; }
.hero-actions { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
/* weicher lokaler Schleier, damit Lead und Buttons auf jedem Motiv tragen */
.hero-actions::before {
  content: ""; position: absolute; z-index: -1; inset: -6.5rem -7.5rem -5rem -7.5rem;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 52%, rgba(4,22,30,.8) 0%, rgba(4,22,30,.72) 45%, rgba(4,22,30,.6) 60%, rgba(4,22,30,.47) 70%, rgba(4,22,30,.35) 78%, rgba(4,22,30,.23) 85%, rgba(4,22,30,.12) 91%, rgba(4,22,30,.04) 96%, rgba(4,22,30,0) 100%);
}
.hero-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-d); background: linear-gradient(180deg, rgba(4,22,30,.4), rgba(4,22,30,.75)); }
.hero-facts > div { padding: 1.15rem clamp(1.1rem, 2.4vw, 2rem) 1.35rem; border-left: 1px solid var(--line-d-soft); transition: background var(--t-state) var(--ease); }
.hero-facts > div:hover { background: rgba(255,255,255,.035); }
.hero-facts > div:first-child { border-left: 0; padding-left: clamp(2.2rem, 4.2vw, 4rem); }
.hero-facts > div:last-child { padding-right: clamp(2.2rem, 4.2vw, 4rem); }
.hero-facts strong { display: block; font-size: .95rem; font-weight: 650; letter-spacing: -.01em; }
.hero-facts span { display: block; margin-top: .2rem; color: var(--on-dark-faint); font-size: .8rem; }

/* ---------- Abschnitte: durchlaufender dunkler Fluss, helle Panels eingelegt ---------- */
.section { position: relative; padding: clamp(3rem, 6vw, 6.4rem) 0 0; }
.section:last-of-type { padding-bottom: clamp(3rem, 6vw, 6.4rem); }
/* weiche Tonüberblendung zwischen den Abschnitten statt harter Kanten */
.section::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: -6%; width: min(1500px, 96vw); height: 60%;
  transform: translateX(-50%); pointer-events: none; opacity: .5;
  background: radial-gradient(60% 100% at 50% 0%, rgba(14,58,76,.5), rgba(4,22,30,0) 72%);
  /* oben weich einblenden: keine sichtbare Kante über dem vorherigen Abschnitt */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.section > .shell { position: relative; z-index: 1; }
/* Helle Nebelfläche — eingelegt, mit Überlappung nach oben */
.section-sand > .shell {
  border-radius: var(--r-panel); padding: clamp(2.4rem, 4.6vw, 4.8rem) var(--pad);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(6,34,46,.10), rgba(6,34,46,0) 62%),
    radial-gradient(120% 60% at 50% 110%, rgba(6,34,46,.13), rgba(6,34,46,0) 60%),
    linear-gradient(168deg, var(--mist), var(--mist-2) 58%, #cfdade);
  color: var(--on-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(6,34,46,.055),
              0 40px 90px -50px rgba(0,0,0,.8);
}
/* helle Flächen sind bewusste Lesepausen, keine abgeschnittenen Karten:
   oben und unten läuft der Ton in die dunklen Nachbarflächen aus */
.section-sand > .shell > * { position: relative; z-index: 1; }
.section-sand h1, .section-sand h2, .section-sand h3 { color: var(--on-light); }
/* Angehobenes dunkles Panel */
.section-navy > .shell {
  border-radius: var(--r-panel); padding: clamp(2.4rem, 4.6vw, 4.8rem) var(--pad);
  background: linear-gradient(168deg, var(--petrol), var(--navy) 58%, #071f2a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -54px rgba(0,0,0,.85);
}
/* Panels dürfen sich leicht überlagern — kein Kartenstapel, sondern ein Fluss */
.section-sand + .section-navy, .section-navy + .section-sand,
.section-sand + .section-sand, .section-navy + .section-navy { padding-top: clamp(1.2rem, 2.4vw, 2.4rem); }

/* ---------- Editorial-Kopf ---------- */
.section-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: clamp(1.2rem, 3vw, 3.6rem); margin-bottom: clamp(1.9rem, 3.4vw, 3.4rem); }
.section-head h2 { margin-top: 1.1rem; font-size: clamp(1.85rem, 3.8vw, 3.5rem); }
.section-head .lead { padding-bottom: .4rem; }
/* Kopf ohne sichtbare Überschrift (z. B. Kontakt › Unser Team): Pille und Einleitung untereinander statt halbleerer Zweispalter */
.section-head:has(> div > h2.sr-only) { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
.counter { display: flex; align-items: baseline; gap: .55rem; margin-bottom: 1.1rem; }
.counter b { font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.counter i { font-style: normal; color: var(--on-dark-faint); font-size: .92rem; letter-spacing: .04em; }
.panel-light .counter i, .section-sand .counter i { color: var(--on-light-soft); }
.counter .bar { position: relative; flex: 1; max-width: 118px; height: 1.5px; margin-left: .7rem; background: var(--line-d); overflow: hidden; }
.section-sand .counter .bar { background: var(--line-l); }
.counter .bar::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: scaleX(var(--p, .25)); transform-origin: left; }

/* ---------- Kacheln (Foto-Karten) ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.7rem, .95vw, 1.1rem); }
.tile { position: relative; grid-column: span 4; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: clamp(1.3rem, 2vw, 1.95rem); border-radius: var(--r-card); overflow: hidden; background: var(--navy-2); color: var(--on-dark); isolation: isolate; }
.tile-wide { grid-column: span 8; }
.tile-full { grid-column: span 12; min-height: clamp(400px, 40vw, 560px); }
.tile img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgba(4,22,30,.97) 0%, rgba(4,22,30,.9) 17%, rgba(4,22,30,.62) 35%, rgba(4,22,30,.24) 56%, rgba(4,22,30,.02) 80%); transition: opacity var(--t-state) var(--ease); }
.tile > * { position: relative; z-index: 2; }
.tile b { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: .8rem; padding: .34rem .82rem; border: 1px solid var(--line-d); border-radius: 999px; background: rgba(4,22,30,.42); backdrop-filter: blur(6px); color: rgba(255,255,255,.9); font-size: .63rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.tile h3 { text-shadow: 0 1px 16px rgba(4,22,30,.6); font-family: var(--serif); font-size: clamp(1.3rem, 2.05vw, 2.15rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.tile-full h3 { font-size: clamp(1.6rem, 2.7vw, 2.7rem); }
.tile p { text-shadow: 0 1px 12px rgba(4,22,30,.55); margin-top: .55rem; max-width: 48ch; color: var(--on-dark-soft); font-size: .9rem; line-height: 1.5; }
a.tile::before { content: "→"; position: absolute; z-index: 3; right: clamp(1.3rem, 2vw, 1.95rem); bottom: clamp(1.3rem, 2vw, 1.95rem); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-d); border-radius: 50%; background: rgba(4,22,30,.4); backdrop-filter: blur(6px); font-size: .9rem; opacity: 0; transform: translateY(8px); transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease), background var(--t-state) var(--ease); }
a.tile:hover::before, a.tile:focus-visible::before { opacity: 1; transform: none; background: var(--green); color: var(--navy); border-color: var(--green); }
a.tile:hover img, a.tile:focus-visible img { transform: scale(1.05); }
a.tile:hover::after { opacity: .92; }

/* ---------- Foto-Strecke ---------- */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 25%); gap: clamp(.7rem, .95vw, 1.1rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.r-item { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4.1; padding: 1.3rem; border-radius: var(--r-card); overflow: hidden; background: var(--navy-2); color: var(--on-dark); scroll-snap-align: start; }
.r-item img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.r-item::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgba(4,22,30,.96) 0%, rgba(4,22,30,.84) 18%, rgba(4,22,30,.4) 42%, rgba(4,22,30,.03) 72%); }
.r-item > * { position: relative; z-index: 2; }
.r-item h3 { text-shadow: 0 1px 14px rgba(4,22,30,.6); font-family: var(--serif); font-size: 1.3rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.14; }
.r-item:hover img { transform: scale(1.06); }
.rail-nav { display: flex; align-items: center; gap: .5rem; margin-top: 1.4rem; }
.rail-nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-d); border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: .95rem; transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease), transform var(--t-hover) var(--ease), opacity var(--t-state); }
.rail-nav button:last-of-type { background: var(--green); border-color: var(--green); color: var(--navy); }
.rail-nav button:hover:not(:disabled) { transform: translateY(-2px); }
.rail-nav button:first-of-type:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.section-sand .rail-nav button { border-color: var(--line-l); }
.section-sand .rail-nav button:first-of-type:hover:not(:disabled) { background: rgba(6,34,46,.06); border-color: var(--navy); }
.rail-progress { flex: 1; max-width: 190px; height: 1.5px; margin-left: .6rem; background: var(--line-d); overflow: hidden; }
.section-sand .rail-progress { background: var(--line-l); }
.rail-progress i { display: block; width: 24%; height: 100%; background: var(--green); transform-origin: left; transition: transform var(--t-panel) var(--ease), width var(--t-panel) var(--ease); }
.rail-count { margin-left: .2rem; color: var(--on-dark-faint); font-size: .76rem; font-variant-numeric: tabular-nums; }
.section-sand .rail-count { color: var(--on-light-soft); }

/* ---------- Split: großes Medium + technische Ebene ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(1.6rem, 3.4vw, 4.4rem); }
.split-reverse .split-media { order: 2; }
.split-media { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--navy-2); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4,22,30,.62), rgba(4,22,30,.06) 46%); }
.split-media figcaption { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; padding: .44rem .95rem; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(4,22,30,.6); backdrop-filter: blur(10px); color: rgba(255,255,255,.92); font-size: .7rem; }
.split-body h2 { font-size: clamp(1.8rem, 3.35vw, 3.15rem); }
.split-body .lead { margin-top: 1.05rem; }
.split-list { display: grid; margin: clamp(1.5rem, 2.4vw, 2.2rem) 0 0; padding: 0; list-style: none; }
.split-list li { display: grid; grid-template-columns: minmax(2.9rem, max-content) minmax(0, 1fr); gap: .35rem 1.1rem; padding: 1rem .6rem; border-top: 1px solid var(--line-d-soft); border-radius: 10px; transition: background var(--t-state) var(--ease); }
.split-list li:hover { background: rgba(255,255,255,.035); }
.section-sand .split-list li { border-top-color: var(--line-l-soft); }
.section-sand .split-list li:hover { background: rgba(6,34,46,.035); }
.split-list li:last-child { border-bottom: 1px solid var(--line-d-soft); }
.section-sand .split-list li:last-child { border-bottom-color: var(--line-l-soft); }
.split-list b { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: var(--green); letter-spacing: .01em; }
.section-sand .split-list b { color: var(--blue-deep); }
.split-list strong { display: block; font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.split-list span { display: block; margin-top: .18rem; color: var(--on-dark-soft); font-size: .88rem; line-height: 1.52; }
.section-sand .split-list span { color: var(--on-light-soft); }

/* ---------- Karten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 30%, 384px), 1fr)); gap: clamp(.7rem, .95vw, 1.1rem); }
.card { display: flex; flex-direction: column; padding: clamp(1.4rem, 2vw, 1.95rem); border: 1px solid var(--line-d); border-radius: var(--r-card); background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); transition: transform var(--t-state) var(--ease), border-color var(--t-state) var(--ease), background var(--t-state) var(--ease); }
.section-sand .card { border-color: var(--line-l); background: linear-gradient(165deg, var(--smoke), #e3eaed); }
a.card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.section-sand a.card:hover { border-color: rgba(6,34,46,.3); }
.card b { margin-bottom: .85rem; color: var(--green); font-size: .63rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.section-sand .card b { color: var(--blue-deep); }
.card h3 { font-family: var(--serif); font-size: clamp(1.14rem, 1.5vw, 1.52rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.16; }
.card p { margin-top: .6rem; color: var(--on-dark-soft); font-size: .9rem; line-height: 1.55; }
.section-sand .card p { color: var(--on-light-soft); }
.card .more { margin-top: auto; padding-top: 1.1rem; }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-d); }
.section-sand .stats { border-top-color: var(--line-l); }
.stats > div { padding: clamp(1.4rem, 2.4vw, 2.2rem) 1.2rem 0; border-left: 1px solid var(--line-d-soft); }
.section-sand .stats > div { border-left-color: var(--line-l-soft); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats strong { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4.2vw, 3.8rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
.stats span { display: block; margin-top: .55rem; color: var(--on-dark-faint); font-size: .82rem; line-height: 1.45; }
.section-sand .stats span { color: var(--on-light-soft); }
/* Textwerte (Auftraggeber, Verfahren) ruhiger setzen als Zahlen */
.stats > div.is-text strong { font-family: var(--sans); font-size: clamp(1.02rem, 1.35vw, 1.3rem); font-weight: 600; line-height: 1.32; letter-spacing: -.008em; text-wrap: balance; }

/* ---------- Prozess: echte Reihenfolge, als tief eingelegtes Deck ---------- */
.process {
  position: relative; display: grid; gap: 2px;
  padding: clamp(.45rem, .9vw, .85rem);
  border-radius: var(--r-card);
  background: linear-gradient(168deg, rgba(14,58,76,.92), rgba(6,34,46,.96) 58%, rgba(4,22,30,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.045),
              0 34px 74px -50px rgba(0,0,0,.92);
}
/* echte Fortschrittslinie entlang der Nummern */
.process::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: clamp(2.2rem, 3.4vw, 3rem); bottom: clamp(2.2rem, 3.4vw, 3rem);
  left: calc(clamp(.45rem, .9vw, .85rem) + clamp(.7rem, 1.4vw, 1.35rem) + 1.05rem);
  width: 1px; opacity: .55;
  background: linear-gradient(to bottom, var(--green), rgba(0,159,227,.6) 52%, rgba(255,255,255,.05));
}
.process > div {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr);
  align-items: baseline; gap: .55rem clamp(1rem, 2vw, 2.2rem);
  padding: clamp(1rem, 1.7vw, 1.5rem) clamp(.7rem, 1.4vw, 1.35rem);
  border-radius: calc(var(--r-card) - 6px);
  background: rgba(255,255,255,.018);
  transition: background var(--t-state) var(--ease), transform var(--t-state) var(--ease),
              box-shadow var(--t-state) var(--ease);
}
.process > div:nth-child(even) { background: rgba(255,255,255,.048); }
.process > div:hover {
  transform: translateY(-2px);
  background: linear-gradient(118deg, rgba(14,58,76,.95), rgba(10,43,57,.72));
  box-shadow: inset 0 0 0 1px rgba(149,193,31,.24), 0 18px 36px -24px rgba(0,0,0,.92);
}
.process b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-family: var(--sans); font-size: .8rem; font-weight: 650; letter-spacing: .03em;
  color: #052029; background: var(--green);
  transition: box-shadow var(--t-state) var(--ease);
}
.process > div:nth-child(even) b { background: var(--blue); }
.process > div:hover b { box-shadow: 0 0 0 5px rgba(149,193,31,.15); }
.process > div:nth-child(even):hover b { box-shadow: 0 0 0 5px rgba(0,159,227,.17); }
.process h3 { font-family: var(--serif); font-size: clamp(1.18rem, 1.7vw, 1.65rem); font-weight: 400; letter-spacing: -.018em; }
.process p { max-width: 62ch; font-size: .9rem; line-height: 1.6; }
/* Das Deck bleibt auf jeder Flächentonalität dunkel — es ist der Anker der Seite */
.section-sand .process h3, .process h3 { color: var(--on-dark); }
.section-sand .process p, .process p { color: var(--on-dark-soft); }

/* Kompakte Ablauf-Sequenz für Seiten, die den Ablauf nur referenzieren */
.process-strip { display: grid; gap: clamp(1.3rem, 2.4vw, 2rem); }
.process-strip ol {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.55rem, .9vw, .9rem); margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.process-strip li {
  display: grid; gap: .7rem; align-content: start;
  padding: clamp(.95rem, 1.5vw, 1.25rem) clamp(.8rem, 1.2vw, 1.05rem);
  border-radius: var(--r-card);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
  transition: background var(--t-state) var(--ease), transform var(--t-state) var(--ease),
              box-shadow var(--t-state) var(--ease);
}
.process-strip li:hover {
  transform: translateY(-2px); background: rgba(255,255,255,.075);
  box-shadow: inset 0 0 0 1px rgba(149,193,31,.28);
}
.process-strip b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  font-size: .74rem; font-weight: 650; letter-spacing: .03em;
  color: #052029; background: var(--green);
}
.process-strip li:nth-child(even) b { background: var(--blue); }
.process-strip span { color: var(--on-dark); font-family: var(--serif); font-size: clamp(1rem, 1.25vw, 1.2rem); letter-spacing: -.012em; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.7rem, .95vw, 1.1rem); }
.g-item { position: relative; grid-column: span 4; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--navy-2); }
.gallery .g-item:nth-child(6n+1), .gallery .g-item:nth-child(6n+5) { grid-column: span 8; }
/* Einzelbild: mittig gesetzt statt über die volle Panelbreite gezogen —
   so wird ein 1200-px-Derivat nie größer als seine natürliche Breite dargestellt. */
.gallery .g-item:only-child { grid-column: 3 / span 8; }
.g-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .9s var(--ease); }
.gallery .g-item:nth-child(6n+1) img, .gallery .g-item:nth-child(6n+5) img { aspect-ratio: 16 / 9; }
.g-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4,22,30,.72), rgba(4,22,30,.04) 52%); }
.g-item:hover img { transform: scale(1.045); }
.g-item figcaption { position: absolute; z-index: 2; left: .95rem; bottom: .95rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(4,22,30,.55); backdrop-filter: blur(10px); color: #fff; font-size: .7rem; font-weight: 500; }
@media (min-width: 961px) {
  .gallery .g-item:nth-child(3):last-child { grid-column: span 12; }
  .gallery .g-item:nth-child(3):last-child img { aspect-ratio: 21 / 8; }
  .gallery .g-item:nth-child(4):last-child { grid-column: span 8; }
  .gallery .g-item:nth-child(4):last-child img { aspect-ratio: 16 / 9; }
}

/* ---------- Personen ---------- */
.people { display: grid; gap: clamp(2rem, 3.2vw, 2.9rem); }
.person-group h3 { margin-bottom: 1rem; color: var(--green); font-size: .63rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.section-sand .person-group h3 { color: var(--blue-deep); }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(196px, 19%, 250px), 1fr)); gap: clamp(.7rem, .95vw, 1.1rem); }
.person { margin: 0; border: 1px solid var(--line-d); border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.04); transition: transform var(--t-state) var(--ease), border-color var(--t-state) var(--ease); }
.section-sand .person { border-color: var(--line-l); background: var(--smoke); }
.person:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); }
.person img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.person figcaption { display: grid; gap: .16rem; padding: .9rem 1.05rem 1.1rem; }
.person strong { font-family: var(--serif); font-size: 1.08rem; font-weight: 400; letter-spacing: -.015em; }
.person span { color: var(--on-dark-faint); font-size: .78rem; line-height: 1.45; }
.section-sand .person span { color: var(--on-light-soft); }
.person-grid > .person:only-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: center; max-width: 520px; }
.person-grid > .person:only-child img { aspect-ratio: 4 / 3; height: 100%; }
.person-grid > .person:only-child figcaption { padding: 1rem 1.3rem; }
.person-grid > .person:only-child strong { font-size: 1.24rem; }

/* ---------- Download-Karten ---------- */
.dlc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 23%, 320px), 1fr)); gap: clamp(.7rem, .95vw, 1.1rem); }
.dlc { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-d); border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.04); transition: transform var(--t-state) var(--ease), border-color var(--t-state) var(--ease); }
.section-sand .dlc { border-color: var(--line-l); background: var(--smoke); }
.dlc:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); }
.section-sand .dlc:hover { border-color: rgba(6,34,46,.3); }
.dlc img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-2); }
.dlc-body { display: grid; gap: .3rem; padding: 1rem 1.15rem 1.25rem; }
.dlc-body strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.dlc-body span { color: var(--on-dark-soft); font-size: .82rem; line-height: 1.5; }
.section-sand .dlc-body span { color: var(--on-light-soft); }
.dlc > b { position: absolute; top: .8rem; right: .8rem; padding: .3rem .72rem; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(4,22,30,.75); backdrop-filter: blur(6px); color: #fff; font-size: .63rem; font-weight: 650; letter-spacing: .08em; }
.dl-group { margin-bottom: clamp(1.8rem, 2.8vw, 2.5rem); }
.dl-group h3 { margin-bottom: 1rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 400; letter-spacing: -.015em; }
.dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 24%, 330px), 1fr)); gap: .5rem; }
.dl-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; border: 1px solid var(--line-d); border-radius: 13px; background: rgba(255,255,255,.035); font-size: .95rem; font-weight: 600; transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease), transform var(--t-hover) var(--ease); }
.section-sand .dl-list a { border-color: var(--line-l); background: var(--smoke); }
.dl-list a span { color: var(--green); font-size: .72rem; font-weight: 650; letter-spacing: .05em; }
.section-sand .dl-list a span { color: var(--blue-deep); }
.dl-list a:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); transform: translateX(4px); }
.section-sand .dl-list a:hover { border-color: var(--navy); background: #fbfcfc; }

/* ---------- Referenzliste ---------- */
.ref-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(258px, 24%, 340px), 1fr)); gap: .5rem; }
.ref-list a { display: grid; gap: .3rem; padding: 1.15rem 1.3rem; border: 1px solid var(--line-d); border-radius: 13px; background: rgba(255,255,255,.035); transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease), transform var(--t-hover) var(--ease); }
.section-sand .ref-list a { border-color: var(--line-l); background: var(--smoke); }
.ref-list a:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.section-sand .ref-list a:hover { border-color: var(--navy); background: #fbfcfc; }
.ref-list b { color: var(--green); font-size: .61rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.section-sand .ref-list b { color: var(--blue-deep); }
.ref-list strong { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.24; }
.ref-list span { color: var(--on-dark-faint); font-size: .78rem; }
.section-sand .ref-list span { color: var(--on-light-soft); }

/* ---------- Akkordeon (FAQ und alle Aufklapp-Gruppen) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.6rem, 3.2vw, 4.2rem); align-items: start; }
.faq h2 { font-size: clamp(1.8rem, 3.35vw, 3.1rem); }
.faq-list { display: grid; }
.acc { border-top: 1px solid var(--line-d-soft); }
.section-sand .acc { border-top-color: var(--line-l-soft); }
.acc:last-child { border-bottom: 1px solid var(--line-d-soft); }
.section-sand .acc:last-child { border-bottom-color: var(--line-l-soft); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  min-height: 66px; padding: 1rem .9rem; margin: 0 -.9rem; border-radius: 12px;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.25vw, 1.22rem); font-weight: 400;
  letter-spacing: -.012em; line-height: 1.32; cursor: pointer; list-style: none;
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: rgba(255,255,255,.04); }
.section-sand .acc > summary:hover { background: rgba(6,34,46,.04); }
.acc-icon { flex: 0 0 auto; position: relative; width: 32px; height: 32px; border: 1px solid var(--line-d); border-radius: 50%; transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), transform var(--t-panel) var(--ease); }
.section-sand .acc-icon { border-color: var(--line-l); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: opacity var(--t-state) var(--ease); }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] > summary { color: var(--green); }
.section-sand .acc[open] > summary { color: var(--navy); }
.acc[open] .acc-icon { transform: rotate(135deg); background: var(--green); border-color: var(--green); color: var(--navy); }
.acc-body { overflow: hidden; }
.acc-body > div { padding: 0 3.2rem 1.5rem .9rem; color: var(--on-dark-soft); font-size: .94rem; line-height: 1.64; }
.section-sand .acc-body > div { color: var(--on-light-soft); }

/* ---------- Kontaktband ---------- */
.section-sand .contact-card p { color: var(--on-light-soft); }

/* ---------- Formular auf Petrol-Panel ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: clamp(1.6rem, 3.2vw, 4rem); align-items: start; padding: clamp(1.8rem, 3.6vw, 3.6rem) clamp(1.5rem, 3.2vw, 3.4rem); border-radius: var(--r-panel); background: linear-gradient(162deg, var(--petrol), #082633 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -54px rgba(0,0,0,.85); color: var(--on-dark); }
.form-grid h2 { margin-top: 1.1rem; font-size: clamp(1.75rem, 3.15vw, 2.9rem); color: var(--on-dark); }
.form-grid .lead { color: var(--on-dark-soft); }
form.anfrage { display: grid; gap: 1.5rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; }
form.anfrage label { display: grid; gap: .4rem; color: var(--on-dark-faint); font-size: .71rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
form.anfrage label small { font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .85; }
form.anfrage input, form.anfrage select, form.anfrage textarea {
  width: 100%; padding: .78rem .95rem; border: 1px solid var(--line-d); border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--on-dark); font-size: 1rem; font-weight: 450;
  letter-spacing: -.01em; text-transform: none;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}
form.anfrage input::placeholder, form.anfrage textarea::placeholder { color: rgba(255,255,255,.34); }
form.anfrage select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
form.anfrage select option { background: var(--navy); color: var(--on-dark); }
form.anfrage textarea { resize: vertical; min-height: 120px; }
form.anfrage input:hover, form.anfrage select:hover, form.anfrage textarea:hover { border-color: rgba(255,255,255,.24); }
form.anfrage input:focus, form.anfrage select:focus, form.anfrage textarea:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(149,193,31,.2); }
form.anfrage fieldset { margin: 0; padding: 0; border: 0; }
form.anfrage legend { padding: 0 0 .7rem; color: var(--on-dark-faint); font-size: .71rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.check-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.check-grid label { flex-direction: row; align-items: center; gap: .55rem; min-height: 46px; padding: 0 1.05rem; border: 1px solid var(--line-d); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--on-dark); font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.check-grid label:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.check-grid label:has(input:checked) { border-color: var(--green); background: rgba(149,193,31,.16); }
.check-grid input { width: auto; padding: 0; border: 0; background: none; accent-color: var(--green); }
.check-grid input:focus { box-shadow: none; }
/* Datenschutz-Zustimmung: ein semantisches Label, Kästchen links, Text daneben.
   Feste Spalten statt Flex-Ausrichtung — der Text kann nicht mehr aus der Spalte wandern. */
form.anfrage label.privacy {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: .8rem; row-gap: .4rem;
  width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 0; padding: clamp(.9rem, 1.5vw, 1.15rem) clamp(.95rem, 1.7vw, 1.25rem);
  border: 1px solid var(--line-d); border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--on-dark-soft);
  font-size: .88rem; font-weight: 450; letter-spacing: 0; text-transform: none; line-height: 1.55;
  cursor: pointer;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
form.anfrage label.privacy:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.055); }
form.anfrage label.privacy:has(.privacy-box:checked) { border-color: rgba(149,193,31,.45); background: rgba(149,193,31,.075); }
form.anfrage label.privacy:has(.privacy-box:focus-visible) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(149,193,31,.2); }
form.anfrage .privacy-box {
  grid-column: 1; grid-row: 1;
  width: 1.15rem; height: 1.15rem; min-width: 1.15rem; flex: none;
  margin: .2rem 0 0; padding: 0; border: 0; border-radius: 4px;
  background: none; box-shadow: none; accent-color: var(--green); cursor: pointer;
}
form.anfrage .privacy-box:focus { box-shadow: none; }
form.anfrage .privacy-box:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
form.anfrage .privacy-text {
  grid-column: 2; grid-row: 1; min-width: 0;
  overflow-wrap: break-word; hyphens: auto;
}
form.anfrage .privacy-text a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
form.anfrage .privacy-text a:hover { color: #b7dc46; }
form.anfrage .privacy-text em {
  font-style: normal; margin-left: .25rem; padding: .1rem .42rem;
  border-radius: 999px; background: rgba(255,255,255,.08);
  color: var(--on-dark-faint); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
form.anfrage label.privacy .field-error { grid-column: 2; grid-row: 2; margin: 0; }
form.anfrage label.privacy.is-invalid { border-color: #e59a5f; background: rgba(229,154,95,.09); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
form.anfrage button { border: 0; cursor: pointer; }
.form-status { color: var(--on-dark-soft); font-size: .84rem; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #ffd0a8; }
.form-status[data-state="ok"] { color: var(--green); }
form.anfrage .field-error { display: none; margin-top: .3rem; color: #ffc59b; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
form.anfrage label.is-invalid .field-error { display: block; }
form.anfrage label.is-invalid input, form.anfrage label.is-invalid select { border-color: #e59a5f; }

/* ---------- CTA ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1.1fr) auto; align-items: end; gap: clamp(1.4rem, 3vw, 3.2rem); padding: clamp(2.2rem, 4.2vw, 4rem) var(--pad); border-radius: var(--r-panel); background: linear-gradient(140deg, var(--petrol), var(--navy) 52%, #061b25); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.cta h2 { font-size: clamp(1.8rem, 3.55vw, 3.25rem); }
.cta p { margin-top: .9rem; max-width: 54ch; color: var(--on-dark-soft); font-size: 1rem; line-height: 1.58; }

/* ---------- Stellenanzeigen ---------- */
.job-grid { display: grid; gap: .7rem; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.6rem; padding: clamp(1.25rem, 2vw, 1.7rem) clamp(1.3rem, 2.2vw, 1.9rem); border: 1px solid var(--line-d); border-radius: var(--r-card); background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); transition: transform var(--t-state) var(--ease), border-color var(--t-state) var(--ease), background var(--t-state) var(--ease); }
.job:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.job h3 { font-family: var(--serif); font-size: clamp(1.18rem, 1.8vw, 1.7rem); font-weight: 400; letter-spacing: -.018em; line-height: 1.16; }
.job-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.job-meta span { padding: .3rem .78rem; border: 1px solid var(--line-d); border-radius: 999px; color: var(--on-dark-soft); font-size: .72rem; font-weight: 500; }
.job-go { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line-d); border-radius: 50%; font-size: 1rem; transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.job:hover .job-go { background: var(--green); border-color: var(--green); color: var(--navy); transform: translateX(4px); }
.job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: clamp(1.4rem, 2.4vw, 2rem); }
.job-facts > div { padding: 1.1rem 1.25rem; border: 1px solid var(--line-d); border-radius: var(--r-card); background: rgba(255,255,255,.04); }
.job-facts b { display: block; margin-bottom: .35rem; color: var(--green); font-size: .62rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.job-facts span { font-size: .96rem; font-weight: 550; }
.job-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.job-col { padding: clamp(1.4rem, 2.2vw, 2rem); border: 1px solid var(--line-l); border-radius: var(--r-card); background: linear-gradient(165deg, var(--smoke), #e3eaed); }
.job-col h3 { margin-bottom: 1rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 400; letter-spacing: -.018em; }
.job-col ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.job-col li { position: relative; padding-left: 1.5rem; color: var(--on-light-soft); font-size: .93rem; line-height: 1.58; }
.job-col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- Fußzeile ---------- */
.footer { width: var(--page); margin: clamp(3rem, 5.4vw, 6rem) auto 0; border-radius: var(--r-panel) var(--r-panel) 0 0; background: linear-gradient(180deg, #061d27, #030f15); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: clamp(1.6rem, 3vw, 3rem); padding: clamp(2.4rem, 4.2vw, 3.8rem) var(--pad) clamp(2rem, 3.2vw, 2.8rem); }
/* Originales Farblogo — kein filter, kein invert, kein grayscale.
   Damit es auf dunklem Grund trägt, sitzt es auf einem hellen Markenpanel. */
/* Footer-Logo: die offizielle farbige Originaldatei, direkt auf dunklem Grund
   wie im Kopfbereich — kein Weißmachen, kein filter, kein Farbeingriff. */
.footer-logo {
  display: inline-block; border-radius: 10px;
  transition: opacity var(--t-hover) var(--ease), transform var(--t-state) var(--ease);
}
.footer-logo:hover { opacity: .86; transform: translateY(-1px); }
.footer-logo:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.footer-brand img { display: block; width: clamp(172px, 15.5vw, 224px); height: auto; }
.footer-brand p { margin-top: 1.1rem; max-width: 34ch; color: var(--on-dark-soft); font-size: .88rem; line-height: 1.6; }
.footer h2 { margin-bottom: 1rem; color: var(--green); font-family: var(--sans); font-size: .63rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.footer a { display: block; padding: .32rem 0; color: var(--on-dark-soft); font-size: .89rem; transition: color var(--t-hover) var(--ease), padding-left var(--t-state) var(--ease); }
.footer a:hover { color: var(--on-dark); padding-left: 5px; }
.footer-wordmark { padding: 0 var(--pad); border-top: 1px solid var(--line-d-soft); }
.footer-wordmark img {
  display: block; width: 100%; max-width: 1180px; height: auto; margin-inline: auto;
  padding: clamp(1.8rem, 3.6vw, 3.2rem) 0; opacity: .085;
}
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.3rem var(--pad) 1.6rem; border-top: 1px solid var(--line-d-soft); color: var(--on-dark-faint); font-size: .8rem; }
.footer-bottom a { display: inline; padding: 0; }
.footer-bottom a:hover { padding-left: 0; }

/* ---------- Bewegung: ein System für die ganze Seite ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 65ms); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal-mask img { clip-path: inset(0 0 100% 0); transform: scale(1.03); transition: clip-path .85s var(--ease), transform .95s var(--ease); transition-delay: calc(var(--i, 0) * 65ms); }
  .reveal-mask.is-in img { clip-path: inset(0 0 0 0); transform: none; }
  .reveal-mask figcaption { opacity: 0; transition: opacity .45s var(--ease) .3s; }
  .reveal-mask.is-in figcaption { opacity: 1; }
  .counter .bar::after { transform: scaleX(0); transition: transform .9s var(--ease) .12s; }
  .counter.is-in .bar::after { transform: scaleX(var(--p, .25)); }
  .hero-layer { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .acc-body { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (min-width: 1180px) { .main-nav { display: flex; } .nav-toggle { display: none; } .header-actions { margin-left: .4rem; } }
@media (min-width: 1366px) { .header-phone { display: inline-flex; } }
@media (min-width: 1366px) and (max-width: 1535px) { .header-phone span { display: none; } }

@media (max-width: 1280px) {
  .faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; }
}
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.6rem; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
  .section-head .lead { padding-bottom: 0; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .split-reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 16 / 10; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tile { grid-column: span 6; min-height: 306px; }
  .tile-wide, .tile-full { grid-column: span 12; }
  .tile-full { min-height: 370px; }
  .g-item, .gallery .g-item:nth-child(6n+1), .gallery .g-item:nth-child(6n+5) { grid-column: span 6; }
  .gallery .g-item:only-child { grid-column: 2 / span 10; }
  .gallery .g-item img, .gallery .g-item:nth-child(6n+1) img, .gallery .g-item:nth-child(6n+5) img { aspect-ratio: 4 / 3 !important; }
  .rail { grid-auto-columns: minmax(250px, 42%); }
  .process > div { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .process p { grid-column: 2; }
  .process::before { top: clamp(1.8rem, 3vw, 2.4rem); bottom: clamp(1.8rem, 3vw, 2.4rem); }
  .process-strip ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-band { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { min-height: min(76vh, 620px); }
  .hero-sm .hero-inner { min-height: 400px; }
  .acc-body > div { padding-right: 1.4rem; }
}
@media (max-width: 860px) {
  .stats, .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3), .stats > div:nth-child(4) { padding-top: 1.4rem; }
  .stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-facts > div { border-top: 1px solid var(--line-d-soft); }
  .hero-facts > div:nth-child(-n+2) { border-top: 0; }
  .hero-facts > div:nth-child(odd) { border-left: 0; padding-left: clamp(1.4rem, 5vw, 2.4rem); }
  .hero-facts > div:nth-child(even) { padding-right: clamp(1.4rem, 5vw, 2.4rem); }
  .job { grid-template-columns: minmax(0, 1fr); }
  .job-go { justify-self: start; }
}
@media (max-width: 640px) {
  :root { --page: calc(100vw - 18px); --r-panel: 18px; --pad: 1.15rem; }
  body { font-size: 16px; }
  .hero { margin-top: .4rem; }
  .hero-inner { min-height: min(74vh, 560px); padding: 1.5rem 1.2rem 1.9rem; }
  .hero-sm .hero-inner { min-height: 320px; }
  .hero .pill { padding: .38rem .8rem; font-size: .61rem; letter-spacing: .11em; line-height: 1.4; }
  .hero-facts > div { padding: .95rem 1.2rem 1.05rem !important; }
  .tile, .tile-wide, .tile-full { grid-column: span 12; min-height: 272px; }
  .g-item, .gallery .g-item:nth-child(6n+1), .gallery .g-item:nth-child(6n+5) { grid-column: span 12; }
  .gallery .g-item:only-child { grid-column: span 12; }
  .rail { grid-auto-columns: 78%; }
  .cards, .dlc-grid, .dl-list, .ref-list, .job-cols { grid-template-columns: minmax(0, 1fr); }
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-grid > .person:only-child { grid-column: span 2; grid-template-columns: minmax(0, 1fr); max-width: none; }
  .person-grid > .person:only-child img { aspect-ratio: 16/9; }
  .process { padding: .35rem; }
  .process > div { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .45rem .85rem; padding: 1rem .8rem; }
  .process::before { left: calc(.35rem + .8rem + .95rem); }
  .process b { width: 1.9rem; height: 1.9rem; font-size: .74rem; }
  .process-strip ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.anfrage label.privacy { padding: .95rem 1rem; column-gap: .7rem; }
  .split-list li { grid-template-columns: minmax(2.2rem, max-content) minmax(0, 1fr); gap: .3rem .8rem; padding-inline: 0; }
  .acc > summary { padding-inline: 0; margin-inline: 0; min-height: 60px; }
  .acc-body > div { padding: 0 0 1.3rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .counter .bar { display: none; }
  .rail-progress { max-width: 100px; }
}
@media (max-width: 380px) {
  .person-grid { grid-template-columns: minmax(0, 1fr); }
  .process-strip ol { grid-template-columns: minmax(0, 1fr); }
  form.anfrage label.privacy { grid-template-columns: 1.05rem minmax(0, 1fr); padding: .9rem .9rem; }
  .rail { grid-auto-columns: 86%; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions .btn-row, .form-foot { width: 100%; }
  .job-meta span { font-size: .68rem; }
}
@media print {
  body::after, .site-header, .mobile-nav, .rail-nav { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ---------- Referenz-Detailseiten ---------- */
.ref-text { max-width: 62ch; display: grid; gap: 1.05rem; align-content: start; }
@media (min-width: 1181px) {
  .ref-text { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem clamp(2rem, 4vw, 4.2rem); }
}
.ref-text p { color: var(--on-dark-soft); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.72; }
.section-sand .ref-text p { color: var(--on-light-soft); }
.ref-note {
  max-width: 62ch; padding: 1rem 1.15rem;
  border-left: 2px solid var(--blue); border-radius: 0 12px 12px 0;
  background: rgba(0,159,227,.09); color: var(--on-dark-soft); font-size: .88rem; line-height: 1.6;
}
.ref-list a .ref-go { margin-top: .15rem; color: var(--green); font-size: .8rem; font-weight: 600; opacity: .0; transform: translateX(-4px); transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.ref-list a:hover .ref-go, .ref-list a:focus-visible .ref-go { opacity: 1; transform: none; }
.section-sand .ref-list a .ref-go { color: var(--blue-deep); }
@media (prefers-reduced-motion: reduce) { .ref-list a .ref-go { opacity: 1; transform: none; } }
.ref-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(.8rem, 1.6vw, 1.6rem);
  padding: clamp(1.2rem, 2vw, 1.8rem) 0;
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
}
.ref-nav a { display: grid; gap: .3rem; color: var(--on-dark); text-decoration: none; transition: color var(--t-hover) var(--ease); }
.ref-nav a span { color: var(--on-dark-faint); font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.ref-nav a strong { font-family: var(--serif); font-size: clamp(1.02rem, 1.35vw, 1.28rem); font-weight: 400; letter-spacing: -.015em; }
.ref-nav a:hover strong { color: var(--green); }
.ref-nav-next { text-align: right; }
.ref-nav-back {
  justify-self: center; padding: .7rem 1.2rem; border: 1px solid var(--line-d); border-radius: 999px;
  color: var(--on-dark-soft); font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.ref-nav-back:hover { border-color: var(--green); color: var(--on-dark); background: rgba(149,193,31,.1); }


/* ---------- Ansprechpartner: Filterleiste und Personenkarten ---------- */
.team-filter { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.team-filter[hidden] { display: none; }
.tf-scroll {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .45rem; border-radius: 999px;
  background: linear-gradient(140deg, rgba(14,58,76,.7), rgba(6,34,46,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
}
.tf-btn {
  display: inline-flex; align-items: center; gap: .48rem;
  min-height: 44px; padding: .5rem 1.05rem;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--on-dark-soft);
  font-family: var(--sans); font-size: .84rem; font-weight: 600; letter-spacing: .005em;
  white-space: nowrap; cursor: pointer;
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease), transform var(--t-hover) var(--ease);
}
.tf-btn:hover { background: rgba(255,255,255,.06); color: var(--on-dark); }
.tf-btn:active { transform: translateY(1px); }
.tf-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tf-btn.is-active {
  background: var(--green); border-color: var(--green); color: #052029;
  box-shadow: 0 10px 22px -14px rgba(149,193,31,.9);
}
.tf-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.2rem; padding: 0 .38rem; border-radius: 999px;
  background: rgba(255,255,255,.1); color: var(--on-dark-faint);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tf-btn.is-active .tf-n { background: rgba(5,32,41,.18); color: #052029; }

.team-status { margin-bottom: clamp(1rem, 1.8vw, 1.5rem); color: var(--on-dark-faint); font-size: .8rem; }

.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(252px, 24%, 300px), 1fr));
  gap: clamp(.75rem, 1vw, 1.15rem);
}
.team-card {
  display: grid; grid-template-rows: auto 1fr; margin: 0; overflow: hidden;
  border-radius: var(--r-card);
  background: linear-gradient(168deg, rgba(14,58,76,.62), rgba(6,34,46,.9) 62%, rgba(4,22,30,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease),
              opacity var(--t-state) var(--ease);
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(149,193,31,.3), 0 20px 40px -26px rgba(0,0,0,.95);
}
.team-card.is-out { display: none; }
.team-card.is-fading { opacity: 0; transform: translateY(6px); }
.tc-media { position: relative; overflow: hidden; background: var(--navy-2); }
/* height:auto ist nötig, damit das aspect-ratio das height-Attribut des <img> schlägt */
.tc-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; }
.tc-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,22,30,.62), rgba(4,22,30,0) 58%);
}
.tc-mono {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--petrol), var(--navy) 70%);
  color: rgba(255,255,255,.34);
  font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: .04em;
}
.tc-body { display: grid; align-content: start; gap: .3rem; padding: 1rem 1.15rem 1.15rem; }
.tc-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.24; }
.tc-role { color: var(--green); font-size: .74rem; font-weight: 600; line-height: 1.45; }
.tc-note {
  margin-top: .45rem; padding: .55rem .7rem;
  border-left: 2px solid var(--blue); border-radius: 0 9px 9px 0;
  background: rgba(0,159,227,.1); color: var(--on-dark-soft);
  font-size: .76rem; line-height: 1.5;
}
.tc-lines { display: grid; gap: .12rem; margin-top: .75rem; }
.tc-line {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: baseline;
  gap: .45rem; padding: .38rem .5rem; margin-inline: -.5rem;
  border-radius: 9px; color: var(--on-dark);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.tc-line:hover { background: rgba(255,255,255,.07); }
.tc-line:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tc-key { color: var(--on-dark-faint); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* E-Mail-Adressen sind lang: lieber etwas kleiner setzen als mitten im Wort brechen */
.tc-val { min-width: 0; font-size: .78rem; font-weight: 500; letter-spacing: -.004em; overflow-wrap: break-word; }
.tc-line:hover .tc-val { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .team-card, .team-card.is-fading { transition: none; transform: none; opacity: 1; }
}

/* ---------- Anschrift & Erreichbarkeit ---------- */
.anschrift { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 3vw, 3.4rem); align-items: start; }
.anschrift-adresse { display: grid; gap: .35rem; font-style: normal; }
.anschrift-adresse span { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 400; letter-spacing: -.016em; line-height: 1.3; }
.anschrift-adresse span:first-child { color: var(--green); }
.anschrift-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.anschrift-liste li { display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); align-items: baseline; gap: .4rem clamp(1rem, 2vw, 2rem); padding: .95rem .6rem; border-top: 1px solid var(--line-d-soft); border-radius: 10px; transition: background var(--t-state) var(--ease); }
.anschrift-liste li:last-child { border-bottom: 1px solid var(--line-d-soft); }
.anschrift-liste li:hover { background: rgba(255,255,255,.035); }
.anschrift-liste b { color: var(--on-dark-faint); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.anschrift-liste div { min-width: 0; font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 500; overflow-wrap: anywhere; }
.anschrift-liste a { color: var(--on-dark); transition: color var(--t-hover) var(--ease); }
.anschrift-liste a:hover { color: var(--green); }
@media (max-width: 860px) {
  .anschrift { grid-template-columns: minmax(0, 1fr); }
  .anschrift-liste li { grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); padding-inline: 0; }
}

/* ---------- Ansprechpartner: Responsive (muss nach der Basisregel stehen) ---------- */
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tf-scroll::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .tc-line { grid-template-columns: 3.4rem minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .tc-body { padding: .9rem 1rem 1rem; }
  .tf-btn { padding: .5rem .85rem; font-size: .8rem; }
}


/* ---------- Drei Wege ins Haus: helle, eindeutig klickbare Karten ---------- */
.contact-band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.2vw, 1.25rem);
}
.contact-way {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .35rem;
  min-height: 210px; padding: clamp(1.3rem, 2vw, 1.7rem);
  border-radius: var(--r-card);
  background: linear-gradient(162deg, #f4f7f8, var(--mist) 55%, var(--mist-2));
  color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(6,34,46,.07),
              0 20px 42px -28px rgba(0,0,0,.85);
  overflow: hidden;
  transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}
/* Petri-Grün als Akzentkante — das Signal, dass hier etwas passiert */
.contact-way::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(to bottom, var(--green), var(--blue));
  transition: width var(--t-state) var(--ease);
}
.contact-way:hover, .contact-way:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(6,34,46,.14),
              0 30px 56px -28px rgba(0,0,0,.9);
}
.contact-way:hover::before, .contact-way:focus-visible::before { width: 7px; }
.contact-way:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.contact-way:active { transform: translateY(-1px); }
.cw-kicker {
  color: var(--blue-deep); font-size: .64rem; font-weight: 750;
  letter-spacing: .17em; text-transform: uppercase;
}
.cw-title {
  margin-top: .5rem; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 400; letter-spacing: -.022em; line-height: 1.16; color: var(--navy);
}
.cw-meta {
  justify-self: start; margin-top: .45rem; padding: .22rem .62rem;
  border-radius: 999px; background: rgba(6,34,46,.07);
  color: var(--on-light-soft); font-size: .69rem; font-weight: 650; letter-spacing: .02em;
}
.cw-text { margin-top: .6rem; color: var(--on-light-soft); font-size: .87rem; line-height: 1.55; }
.cw-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: end; margin-top: 1.1rem; padding: .62rem 1.1rem;
  border-radius: 999px; background: var(--green); color: #052029;
  font-size: .85rem; font-weight: 700; letter-spacing: .005em;
  box-shadow: 0 12px 24px -16px rgba(149,193,31,.95);
  transition: background var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}
.contact-way.is-extern .cw-cta { background: var(--blue); color: #02141c; box-shadow: 0 12px 24px -16px rgba(0,159,227,.95); }
.cw-arrow { transition: transform var(--t-state) var(--ease); }
.contact-way:hover .cw-arrow, .contact-way:focus-visible .cw-arrow { transform: translateX(3px); }
.contact-way:hover .cw-cta { box-shadow: 0 16px 30px -14px rgba(149,193,31,.95); }
.contact-way.is-extern:hover .cw-cta { box-shadow: 0 16px 30px -14px rgba(0,159,227,.95); }
@media (prefers-reduced-motion: reduce) {
  .contact-way, .cw-arrow, .contact-way::before { transition: none; }
  .contact-way:hover, .contact-way:focus-visible { transform: none; }
}
@media (max-width: 1024px) { .contact-band { grid-template-columns: minmax(0, 1fr); } .contact-way { min-height: 0; } }

/* ---------- Pflichtfeld-Kennzeichnung, Gruppenfehler, Fehlerzusammenfassung ---------- */
.req { color: var(--green); font-weight: 700; }
.section-sand .req { color: var(--blue-deep); }
form.anfrage .req-legend {
  margin: 0; color: var(--on-dark-faint); font-size: .78rem; letter-spacing: 0;
  text-transform: none; font-weight: 450;
}
form.anfrage .legend-hint {
  margin: -.2rem 0 .85rem; color: var(--on-dark-faint);
  font-size: .78rem; font-weight: 450; letter-spacing: 0; text-transform: none;
}
form.anfrage .group-error {
  display: none; margin-top: .7rem; padding: .5rem .75rem;
  border-left: 2px solid #e59a5f; border-radius: 0 9px 9px 0;
  background: rgba(229,154,95,.12); color: #ffc59b;
  font-size: .78rem; font-weight: 500; line-height: 1.5;
}
form.anfrage fieldset.is-invalid .group-error { display: block; }
form.anfrage fieldset.is-invalid .check-grid label { box-shadow: inset 0 0 0 1px rgba(229,154,95,.55); }
form.anfrage .form-summary {
  padding: 1rem 1.15rem; border-left: 3px solid #e59a5f; border-radius: 0 12px 12px 0;
  background: rgba(229,154,95,.12); color: var(--on-dark);
}
form.anfrage .form-summary[hidden] { display: none; }
form.anfrage .form-summary strong { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 650; }
form.anfrage .form-summary ul { margin: 0; padding-left: 1.1rem; }
form.anfrage .form-summary li { color: var(--on-dark-soft); font-size: .83rem; line-height: 1.6; }
.form-foot { flex-wrap: wrap; }
.form-foot .req-legend { flex-basis: 100%; order: -1; margin-bottom: .2rem; }

/* ---------- Rechtstexte: lange Fließtexte ruhig und lesbar ---------- */
.rechtstext { max-width: 74ch; margin-top: 2.2rem; }
.rechtstext h3 {
  margin: 2.4rem 0 .9rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.016em; color: var(--on-dark);
}
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext p { margin-bottom: 1rem; color: var(--on-dark-soft); font-size: .95rem; line-height: 1.75; }
.rechtstext ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; color: var(--on-dark-soft); font-size: .95rem; line-height: 1.7; }
.rechtstext a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Bewerbung: letzter Schritt vor dem externen Portal ---------- */
.portal-hinweis {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line-d-soft); border-left: 3px solid var(--green);
  border-radius: 14px; background: rgba(255,255,255,.035);
}
.portal-hinweis .ph-kopf {
  margin-bottom: .6rem; color: var(--green); font-family: var(--sans);
  font-size: .68rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
.portal-hinweis p { color: var(--on-dark-soft); font-size: .92rem; line-height: 1.65; }
.portal-hinweis p + p { margin-top: .7rem; }
.portal-hinweis a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.portal-hinweis a:hover { color: var(--green); }

/* ---------- Mobile Feinschliff ----------
   Steht bewusst am Dateiende: diese Regeln müssen die Basisregeln sicher übersteuern
   (die frühere Referenz-Navigation wurde genau daran von ihrer Basisregel überschrieben). */

/* Referenz-Navigation: Tablet zweispaltig, Telefon untereinander */
@media (max-width: 1024px) {
  .ref-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.3rem; }
  .ref-nav-back { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .ref-nav { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; }
  .ref-nav-next { text-align: left; }
  .ref-nav-back { grid-row: 3; }
}

/* Lange deutsche Komposita und URLs: umbrechen statt überlaufen.
   Überschriften bekommen gezielte weiche Trennstellen (&shy;) im HTML statt automatischer Trennung;
   in Rechtstexten keine Silbentrennung, sonst entstehen Trennstriche mitten in URLs und Abkürzungen. */
body { overflow-wrap: break-word; }
@media (max-width: 860px) {
  .stats strong, .stats span, .hero-facts strong, .hero-facts span {
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
  }
}

/* Stellen-Eckdaten: Tablet 2 x 2, Telefon als kompakte Zeilen (Bezeichnung links, Wert rechts) */
@media (max-width: 1024px) {
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .job-facts { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .job-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; }
  .job-facts b { margin-bottom: 0; }
  .job-facts span { text-align: right; }
}

/* Tippflächen: mindestens 44 px, ohne das Layout zu verschieben */
.brand { min-height: 44px; }
.crumbs a { padding-block: .75rem; margin-block: -.75rem; }
.anschrift-liste a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .footer-grid a { padding-block: .62rem; }
  .tc-line { padding-block: .62rem; }
}

/* Telefon (auch quer) und Tablet: Mikro-Labels mindestens 11 px */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .pill, .hero .pill, .tile b, .card b, .ref-list b, .job-facts b, .mobile-group, .footer h2,
  .person-group h3, .cw-kicker, .portal-hinweis .ph-kopf, .anschrift-liste b { font-size: .6875rem; letter-spacing: .12em; }
  .dlc > b, .tc-key, form.anfrage label small, .tf-n, .job-meta span { font-size: .6875rem; }
  .tc-line { grid-template-columns: 4.1rem minmax(0, 1fr); }
}
/* Telefon: Kennzahlen etwas kleiner, damit zwei Spalten ruhig nebeneinander passen.
   Foto-Kacheln etwas höher und mit kräftigerem Verlauf unter dem Text: auf dem schmalen
   Format liegt die Schrift sonst über hellen Bildpartien. */
@media (max-width: 640px) {
  .stats strong { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .tile, .tile-wide, .tile-full { min-height: 300px; }
  .tile::after {
    background: linear-gradient(to top, rgba(4,22,30,.97) 0%, rgba(4,22,30,.9) 28%, rgba(4,22,30,.7) 48%,
      rgba(4,22,30,.28) 72%, rgba(4,22,30,.04) 92%);
  }
}

/* ---------- Mobile Feinschliff, Runde 2: Befunde der Sichtprüfung aller Seiten ---------- */

/* Anfrageformular. form.anfrage label ist ein Raster: bei den Nutzungs-Pillen standen dadurch
   Häkchen und Text übereinander, bei den Feldern rutschte das Pflicht-* in eine eigene Zeile. */
form.anfrage .check-grid label {
  display: inline-flex; flex-direction: row; align-items: center; gap: .55rem;
  color: var(--on-dark); font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
form.anfrage .check-grid input {
  flex: none; width: 1.05rem; height: 1.05rem; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: none; box-shadow: none; accent-color: var(--green);
}
form.anfrage .field-grid > label,
form.anfrage fieldset > label:not(.privacy) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; row-gap: .4rem; }
form.anfrage .field-grid > label > :is(input, select, textarea, .field-error),
form.anfrage fieldset > label:not(.privacy) > :is(input, select, textarea, .field-error) { flex: 1 0 100%; }
form.anfrage .privacy-text { hyphens: manual; -webkit-hyphens: manual; }
/* Gruppenüberschriften (Legende) grün wie alle Gruppenlabels der Seite — sonst sehen sie aus wie das Feldlabel darunter */
form.anfrage legend { color: var(--green); }

/* Foto-Karten und Bildstrecken in hellen Panels: Titel bleiben hell (sonst Dunkelblau auf dunklem Foto) */
.section-sand .tile h3, .section-sand .r-item h3 { color: var(--on-dark); }

/* Hero: der lokale Schleier hinter Lead und Buttons läuft oben weich aus statt mit harter Kante */
.hero-actions::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.75rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.75rem);
}

/* Umbruch: keine einzelnen Wörter in der letzten Zeile, Überschriften ausgewogen */
h3, .ref-nav strong, .ref-list strong, .tc-role { text-wrap: balance; }
p, li, figcaption, .cw-text { text-wrap: pretty; }
h3 { line-height: 1.25; }

/* Kleinteile */
.dl-list a span { flex-shrink: 0; white-space: nowrap; }
.dl-list a { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.dl-group:last-child { margin-bottom: 0; }
/* Stellen-Listen: ein langes Wort darf die Spalte nicht über die Karte hinaus verbreitern */
.job-col ul { grid-template-columns: minmax(0, 1fr); }
/* Rechtstexte ohne vorangestellten Hinweis: kein doppelter Abstand unter dem Hero */
.rechtstext:first-child { margin-top: 0; }
/* FAQ-Fragen ausgewogen umbrechen */
.acc > summary > span:first-child { text-wrap: balance; }
.split-media figcaption, .g-item figcaption { max-width: calc(100% - 2rem); }
.people + .contact-band { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
/* Kontaktkarten einspaltig (Tablet/Telefon): Button als Pille statt linksbündig gestreckter Leiste */
@media (max-width: 1024px) { .cw-cta { justify-self: start; } }

@media (max-width: 860px) {
  /* ungerade letzte Kennzahl über die volle Breite statt L-förmigem Raster mit leerer Zelle */
  .stats > div:last-child:nth-child(odd), .hero-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Ansprechpartner-Filter: alle Abteilungen sichtbar statt verdeckt seitlich scrollend */
  .tf-scroll { flex-wrap: wrap; overflow: visible; border-radius: 22px; }
}

@media (max-width: 640px) {
  /* Seitenrand 14–16 px statt 9 px; Panels etwas knapper gepolstert */
  :root { --page: calc(100vw - clamp(24px, 8.5vw, 32px)); --pad: 1.05rem; }
  /* Hero-Text trägt auch über hellen Bildpartien */
  .hero::before { background:
    linear-gradient(to top, rgba(4,22,30,.97) 0%, rgba(4,22,30,.88) 26%, rgba(4,22,30,.64) 50%, rgba(4,22,30,.52) 74%, rgba(4,22,30,.56) 100%),
    linear-gradient(to right, rgba(4,22,30,.26) 0%, rgba(4,22,30,.1) 100%); }
  .hero h1, .hero-lead { text-shadow: 0 1px 2px rgba(4,22,30,.35), 0 2px 22px rgba(4,22,30,.62); }
  /* Hero-Etikett hebt sich auch vor unruhigen Bildpartien ab */
  .hero .pill { background: rgba(4,22,30,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* Startbild im Hochformat: Gesicht und Hände des Mitarbeiters im Ausschnitt halten */
  .hero .hero-media .hero-start { object-position: 53% 40%; }
  /* Panels, die direkt aufeinander folgen, nicht zu dicht */
  .section-sand + .section-navy, .section-navy + .section-sand,
  .section-sand + .section-sand, .section-navy + .section-navy { padding-top: 1.75rem; }
  /* Brotkrumen einzeilig; die aktuelle Seite (steht ohnehin als Überschrift darunter) wird bei Bedarf gekürzt */
  .crumbs { flex-wrap: nowrap; }
  .crumbs > * { flex-shrink: 0; }
  .crumbs > [aria-current] { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

@media (max-width: 480px) {
  /* Überschriften: feste Zeilenumbrüche aus dem Desktop-Satz aufheben, der Browser balanciert selbst */
  h1 br, h2 br { display: none; }
  /* Hero-Überschriften auf kleinen Telefonen etwas kleiner, damit lange Wörter ganze Zeilen bilden */
  .hero h1 { font-size: clamp(1.95rem, 9.2vw, 2.3rem); }
  .hero-sm h1 { font-size: clamp(1.75rem, 8.6vw, 2.1rem); }
  /* Kennzahlen mit Textwerten einspaltig; reine Zahlenreihen bleiben zweispaltig */
  .stats:has(> .is-text) { grid-template-columns: minmax(0, 1fr); }
  .stats:has(> .is-text) > div { padding: 1.05rem 0 1.1rem; border-left: 0; border-top: 1px solid var(--line-d-soft); }
  .stats:has(> .is-text) > div:first-child { border-top: 0; }
  .stats:has(> .is-text) > div:last-child { padding-bottom: 0; }
  .section-sand .stats:has(> .is-text) > div { border-top-color: var(--line-l-soft); }
  .hero-facts strong { font-size: .88rem; }
  /* Hero-Eckdaten mit längeren Texten (im HTML als .hero-facts-text markiert) einspaltig */
  .hero-facts.hero-facts-text { grid-template-columns: minmax(0, 1fr); }
  .hero-facts.hero-facts-text > div { border-left: 0; border-top: 1px solid var(--line-d-soft); }
  .hero-facts.hero-facts-text > div:first-child { border-top: 0; }
  /* einspaltig ist genug Platz: keine automatische Silbentrennung (zweispaltige Varianten behalten sie) */
  .hero-facts.hero-facts-text strong, .hero-facts.hero-facts-text span,
  .stats:has(> .is-text) strong, .stats:has(> .is-text) span { hyphens: manual; -webkit-hyphens: manual; }
}

@media (max-width: 400px) {
  /* Buttons etwas schmaler gepolstert, damit „Service-Hotline +49 …" möglichst einzeilig bleibt */
  .btn { padding-inline: 1rem; gap: .5rem; letter-spacing: -.01em; }
  .stats strong { font-size: clamp(1.5rem, 7.4vw, 1.75rem); }
}
@media (max-width: 380px) {
  /* mehrzeilige Button-Beschriftungen mittig und mit Luft */
  .btn { text-align: center; padding-block: .6rem; line-height: 1.3; }
  .cw-cta { padding: .6rem .95rem; }
  /* „Ansprechpartner anzeigen" passt hier nicht mehr in die Karte: kurz „Ansprechpartner →" */
  .cw-cta-more { display: none; }
  /* entbehrliche Wortteile in Buttons („Service-", „ansehen"): die Beschriftung bleibt einzeilig */
  .hide-xs { display: none; }
  .job-col { padding: 1.15rem 1rem; }
  /* lange Pillen: engere Laufweite; falls doch zweizeilig, als Etikett statt gequetschter Kapsel */
  .pill, .hero .pill, .tile b { letter-spacing: .07em; border-radius: 14px; line-height: 1.35; }
}

/* ---------- Mobile Feinschliff, Runde 3: kleinste Telefone (≤ 360 px) ---------- */
@media (max-width: 360px) {
  /* Kennzahlen auch als reine Zahlenreihe einspaltig — zwei Spalten sind hier nur ~108 px breit */
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div:nth-child(n) { padding: 1.05rem 0 1.1rem; border-left: 0; border-top: 1px solid var(--line-d-soft); }
  .stats > div:first-child { border-top: 0; }
  .stats > div:last-child { padding-bottom: 0; }
  .section-sand .stats > div:nth-child(n) { border-top-color: var(--line-l-soft); }
  .stats strong, .stats span { hyphens: manual; -webkit-hyphens: manual; }
  /* Ablauf-Schritte: schmalere Nummernspalte, mehr Platz für den Text */
  .process > div { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .45rem .65rem; padding-inline: .6rem; }
  .process::before { left: calc(.35rem + .6rem + .95rem); }
}
/* Ansprechpartner-Filter auf dem Telefon: eine Zeile zum Wischen, der Verlauf rechts zeigt, dass es weitergeht
   (umgebrochen wären es auf 320 px sechs unruhige Zeilen) */
@media (max-width: 480px) {
  .tf-scroll {
    flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; padding-right: 2.6rem;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent);
  }
  .tf-btn { scroll-snap-align: start; }
}

/* ---------- Kundenwünsche 22.09.2026 ---------- */
/* Größere Schrift ab Tablet quer: alle rem-Größen (Text, Abstände) wachsen gleichmäßig mit,
   Telefonlayouts bleiben unverändert */
@media (min-width: 1024px) { html { font-size: 106.25%; } }
@media (min-width: 1680px) { html { font-size: 112.5%; } }
/* Einzelne Wörter in Markenfarben */
.akzent-blau { color: var(--blue); }
.akzent-gruen { color: var(--green); }
/* auf hellen Flächen die dunkleren Töne (Kontrast ≥ 4,5 : 1) */
.section-sand .akzent-blau, .panel-light .akzent-blau { color: var(--blue-deep); }
.section-sand .akzent-gruen, .panel-light .akzent-gruen { color: #44700a; }
/* farbige Wörter im Hero: dunkler Hof für Lesbarkeit auf hellen Bildstellen */
.hero .akzent-blau, .hero .akzent-gruen { text-shadow: 0 1px 2px rgba(4,22,30,.55), 0 0 18px rgba(4,22,30,.72); }
/* Startbild im Tablet-Hochformat: Mitarbeiter mittig im Ausschnitt */
@media (min-width: 641px) and (max-width: 1023px) { .hero .hero-media .hero-start { object-position: 60% 40%; } }
/* Telefon im Menü: Etikett blau, Nummer grün – wie in der Kopfzeile */
.mobile-contact .tel-label { color: var(--blue); }
.mobile-contact .tel-nr { color: var(--green); }
/* Dunkler Hof hinter der Hero-Überschrift: die farbigen Wörter (Kundenwunsch) bleiben auch auf hellen
   Bildstellen lesbar, der Rest des Fotos bleibt offen. Gleiche Technik wie der Schleier hinter Lead und Buttons. */
.hero-grid > div:first-child { position: relative; }
.hero-grid > div:first-child::before {
  content: ""; position: absolute; z-index: -1; inset: -5rem -6.5rem -4.5rem -6.5rem; pointer-events: none;
  background: radial-gradient(closest-side at 46% 56%, rgba(4,22,30,.78) 0%, rgba(4,22,30,.66) 40%, rgba(4,22,30,.52) 55%, rgba(4,22,30,.4) 66%, rgba(4,22,30,.28) 76%, rgba(4,22,30,.17) 84%, rgba(4,22,30,.08) 91%, rgba(4,22,30,.025) 96%, rgba(4,22,30,0) 100%);
}

/* ---------- Kundenwünsche 23.09.2026 ---------- */
/* Grundriss-Buttons in Markenblau: dunkle Schrift wie beim grünen Hauptbutton (Kontrast ≈ 5,5 : 1) */
.btn-blau { background: var(--blue); color: var(--navy); box-shadow: 0 10px 30px -14px rgba(0,159,227,.7); }
.btn-blau:hover { background: #2fb3ec; transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(0,159,227,.75); }
/* Etikett „Fragen und Antworten" in Blau; auf hellen Flächen das dunklere Blau (AA) */
.pill-blau { color: var(--blue); }
.panel-light .pill-blau { color: var(--blue-deep); }
/* Langes Etikett „Servicepakete · individuell abgestimmt": auf schmalen Bildschirmen ohne „Servicepakete ·",
   sonst bricht die Pille zweizeilig (und das Wort steht direkt darunter ohnehin in der Überschrift).
   Der Text steckt in einer inneren Hülle, damit der Flex-Abstand der Pille nicht vor dem Punkt landet. */
@media (max-width: 600px) { .pill-vorsatz { display: none; } }

/* ---------- Kundenwünsche 24.09.2026 ---------- */
/* Galerie mit drei Bildern auf Tablets: das dritte Bild füllt die Zeile (16:9) statt allein
   in einer halben Spalte zu stehen bzw. (961–1024 px) als hohes 4:3-Bild über die volle Breite */
@media (min-width: 641px) and (max-width: 1024px) {
  .gallery .g-item:nth-child(3):last-child { grid-column: span 12; }
  .gallery .g-item:nth-child(3):last-child img { aspect-ratio: 16 / 9 !important; }
}

/* Startbild auf breiten Bildschirmen: Kopf nicht anschneiden, wenn die Bühne flacher als 16:9 ist */
@media (min-width: 1024px) { .hero .hero-media .hero-start { object-position: 50% 22%; } }
/* Unternehmen „Wo die Module entstehen" (10 Bilder): Zeilen 8+4 · 4+4+4 · 4+8 · 4+4+4 ohne Lücken */
@media (min-width: 1025px) {
  .gallery.gallery-fertigung .g-item:nth-child(5) { grid-column: span 4; }
  .gallery.gallery-fertigung .g-item:nth-child(5) img { aspect-ratio: 4 / 3; }
}

/* ---------- Server-Version 24.09.2026: Formular sendet an anfrage.php ---------- */
/* Feld gegen Spam-Programme: für Menschen unsichtbar, per Tab nicht erreichbar */
form.anfrage .kontakt-zusatz { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
form.anfrage button[type="submit"]:disabled { opacity: .6; cursor: progress; transform: none; }

/* ---------- Kundenwünsche 28.09.2026 ---------- */
/* Startbild heller (Kundenwunsch „zu dunkel"): die blauen und grünen Flächen des Originalfotos
   bleiben sichtbar. Abgedunkelt wird nur noch unten und direkt hinter Überschrift, Text und Buttons.
   Am Foto gemessen (5-%-Perzentil der hellsten Stellen hinter der Schrift): Überschrift ≥ 3,6 : 1,
   Fließtext ≥ 5,3 : 1 auf allen Breiten von 320 bis 1920 px. */
.hero-hell::before { background:
  linear-gradient(to top, rgba(4,22,30,.9) 0%, rgba(4,22,30,.74) 18%, rgba(4,22,30,.42) 36%, rgba(4,22,30,.14) 54%, rgba(4,22,30,0) 70%),
  linear-gradient(to right, rgba(4,22,30,.3) 0%, rgba(4,22,30,.1) 34%, rgba(4,22,30,0) 52%); }
.hero-hell .hero-grid > div:first-child::before {
  background: radial-gradient(closest-side at 46% 58%, rgba(4,22,30,.62) 0%, rgba(4,22,30,.5) 42%, rgba(4,22,30,.36) 58%, rgba(4,22,30,.2) 74%, rgba(4,22,30,.08) 88%, rgba(4,22,30,0) 100%); }
.hero-hell .hero-actions::before {
  background: radial-gradient(closest-side at 50% 52%, rgba(4,22,30,.66) 0%, rgba(4,22,30,.56) 45%, rgba(4,22,30,.4) 64%, rgba(4,22,30,.22) 80%, rgba(4,22,30,.08) 92%, rgba(4,22,30,0) 100%); }
/* Tablet: Text steht einspaltig über dem Gesicht — dort kräftigerer Hof, Bildoberkante bleibt hell */
@media (max-width: 1180px) {
  .hero-hell::before { background:
    linear-gradient(to top, rgba(4,22,30,.92) 0%, rgba(4,22,30,.8) 20%, rgba(4,22,30,.62) 42%, rgba(4,22,30,.46) 60%, rgba(4,22,30,.22) 76%, rgba(4,22,30,.05) 90%, rgba(4,22,30,0) 100%),
    linear-gradient(to right, rgba(4,22,30,.34) 0%, rgba(4,22,30,.12) 40%, rgba(4,22,30,0) 62%); }
  .hero-hell .hero-grid > div:first-child::before {
    background: radial-gradient(closest-side at 46% 56%, rgba(4,22,30,.78) 0%, rgba(4,22,30,.66) 40%, rgba(4,22,30,.52) 55%, rgba(4,22,30,.4) 66%, rgba(4,22,30,.28) 76%, rgba(4,22,30,.17) 84%, rgba(4,22,30,.08) 91%, rgba(4,22,30,.025) 96%, rgba(4,22,30,0) 100%); }
  .hero-hell .hero-actions::before {
    background: radial-gradient(closest-side at 50% 52%, rgba(4,22,30,.8) 0%, rgba(4,22,30,.72) 45%, rgba(4,22,30,.6) 60%, rgba(4,22,30,.47) 70%, rgba(4,22,30,.35) 78%, rgba(4,22,30,.23) 85%, rgba(4,22,30,.12) 91%, rgba(4,22,30,.04) 96%, rgba(4,22,30,0) 100%); }
}
/* Telefon: Text bedeckt fast das ganze Bild — gleichmäßiger Verlauf, schwächere Höfe (Textschatten trägt mit) */
@media (max-width: 640px) {
  .hero-hell::before { background:
    linear-gradient(to top, rgba(4,22,30,.9) 0%, rgba(4,22,30,.78) 24%, rgba(4,22,30,.6) 46%, rgba(4,22,30,.46) 64%, rgba(4,22,30,.34) 80%, rgba(4,22,30,.16) 92%, rgba(4,22,30,.04) 100%),
    linear-gradient(to right, rgba(4,22,30,.18) 0%, rgba(4,22,30,.04) 100%); }
  .hero-hell .hero-grid > div:first-child::before {
    background: radial-gradient(closest-side at 46% 56%, rgba(4,22,30,.6) 0%, rgba(4,22,30,.5) 40%, rgba(4,22,30,.38) 56%, rgba(4,22,30,.24) 72%, rgba(4,22,30,.1) 88%, rgba(4,22,30,0) 100%); }
  .hero-hell .hero-actions::before {
    background: radial-gradient(closest-side at 50% 52%, rgba(4,22,30,.62) 0%, rgba(4,22,30,.52) 45%, rgba(4,22,30,.38) 64%, rgba(4,22,30,.22) 80%, rgba(4,22,30,.08) 92%, rgba(4,22,30,0) 100%); }
}

/* Logo deutlich größer (Kundenwunsch „immer noch zu klein"). Damit es auf Laptops neben Menü und
   Hotline passt, rücken die Menüpunkte etwas enger, und das Etikett „Service-Hotline" erscheint erst ab 1600 px.
   Breiten so gewählt, dass zwischen Logo und Menü immer mindestens ~30 px Luft bleiben. */
.brand img { width: clamp(200px, 60vw, 250px); }
@media (min-width: 641px) { .brand img { width: 280px; } }
@media (min-width: 1180px) {
  .main-nav > .nav-item > a { padding: 0 .42rem; font-size: .95rem; }
  .main-nav > .nav-item > a::after { left: .42rem; right: .42rem; }
}
@media (min-width: 1440px) { .brand img { width: 320px; } }
@media (min-width: 1536px) and (max-width: 1599px) { .header-phone span { display: none; } }
@media (min-width: 1536px) { .brand img { width: 340px; } }
/* Fußzeile passend mitvergrößert */
.footer-brand img { width: clamp(220px, 22vw, 300px); max-width: 100%; }