/* Bergheimer Stahlhallen · Website
   Stil nach dem Vorbild mo-studio.de (von Michael Kuhl am 22.10.2026 vorgegeben):
   weißer Grund, große fette Grotesk-Überschriften, ruhige große Einleitungen,
   Fotos als Hauptdarsteller, Lila nur sparsam. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --weiss: #FFFFFF;
  --grund: #F6F3EE;      /* warmes Elfenbein als Seitengrund */
  --nacht: #17101E;      /* fast schwarzes Aubergine für Einstieg und Fußbereich */
  --text: #151318;
  --text-2: #57535C;
  --trenner: #E2DFE6;
  --flieder: #EDE4F2;
  --flieder-hell: #F7F3F9;
  --lila: #6F2D90;
  --lila-tief: #561F72;
  --auf-lila-2: #EADFF1;
  --trenn-auf-lila: rgba(255, 255, 255, .28);
  --gold: #B39A50;
  --gold-text: #6B5822;
  --silber: #D9DADA;
  --silber-tief: #9C9D9D;

  /* Raster: Inhalt beginnt oft bei einem Viertel der Breite (wie beim Vorbild) */
  --rand: clamp(20px, 5vw, 80px);
  --breite: min(1360px, calc(100vw - 2 * var(--rand)));
  --links: calc((100vw - var(--breite)) / 2);
  --einzug: calc(var(--breite) * .25);
  --spalt: clamp(20px, 2.2vw, 32px);

  /* Schrift */
  --titel-groesse: clamp(2.6rem, 6.2vw, 6rem);
  --h2: clamp(2.2rem, 4.6vw, 4.4rem);
  --h3: clamp(1.3rem, 1.7vw, 1.6rem);
  --gross: clamp(1.25rem, 1.9vw, 1.75rem);
  --text-groesse: 1.0625rem;
  --klein: .9375rem;
  --etikett: .78rem;

  /* Abstände */
  --abschnitt: clamp(72px, 8vw, 128px);
  --kopf-hoehe: 88px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; scrollbar-color: var(--lila) var(--flieder-hell); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: var(--text-groesse); line-height: 1.6;
  font-stretch: 100%; overflow-x: hidden; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--lila); color: #fff; }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.lila :focus-visible { outline-color: #fff; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { max-width: 68ch; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: #fff; padding: 12px 18px; }
.skip:focus { top: 12px; }
.wrap { width: var(--breite); margin-inline: auto; position: relative; }
.einstieg > .wrap { position: static; }
main, .fuss { position: relative; }
/* Ganz feine Papier-Struktur über dem Elfenbein */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
main { z-index: 1; }
section { position: relative; }

/* ---------- Schrift ---------- */
.titel { font-weight: 700; font-size: var(--titel-groesse); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
h2, .h2 { font-weight: 700; font-size: var(--h2); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
h3, .h3 { font-weight: 500; font-size: var(--h3); line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: var(--gross); line-height: 1.32; letter-spacing: -.01em; max-width: 30em; }
.text-2 { color: var(--text-2); }
.etikett { display: block; font-size: var(--etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }

/* Dünne Linie vom linken Fensterrand bis kurz vor den Einzug, direkt über dem Etikett (wie beim Vorbild) */
.mit-linie .kopf-zeile { position: relative; }
.mit-linie .kopf-zeile::before {
  content: ""; position: absolute; top: 0; left: calc(-1 * var(--links)); height: 1px; background: var(--text);
  width: calc(var(--links) + var(--einzug) - var(--spalt));
}
.lila.mit-linie .kopf-zeile::before { background: rgba(255,255,255,.7); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--lila); color: #fff; border: 1.5px solid var(--lila);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.knopf:hover { border-color: var(--lila-tief); }
.knopf:hover svg { transform: translateX(4px); }
.knopf.rahmen {
  background: transparent; color: var(--text); border: 1.5px solid var(--text);
  font-size: var(--etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; min-height: 44px; padding: 0 18px;
}
.knopf.rahmen:hover { color: #fff; border-color: var(--text); }
.lila .knopf { background: #fff; color: var(--lila); border-color: #fff; }
.lila .knopf:hover { border-color: var(--flieder); }
.lila .knopf.rahmen { background: transparent; color: #fff; border-color: #fff; }
.lila .knopf.rahmen:hover { color: var(--lila); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- Kopfleiste ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--kopf-hoehe); background: rgba(246, 243, 238, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .3s var(--ease); }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--trenner); }
.kopf.auf-bild { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.kopf.auf-bild :focus-visible { outline-color: #fff; }
.kopf.offen { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grund); }   /* sonst wird das Vollbild-Menü in der Kopfleiste eingesperrt */
.logo .hell { display: none; }
.kopf.auf-bild .logo .hell { display: block; }
.kopf.auf-bild .logo .dunkel { display: none; }
.kopf .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; width: clamp(150px, 14vw, 190px); flex: none; }
.logo img { width: 100%; }
.kopf nav ul { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.kopf nav a { text-decoration: none; font-size: 1rem; font-weight: 500; padding: 8px 0; position: relative; }
.kopf nav a:not(.knopf)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.kopf nav a:not(.knopf):hover::after, .kopf nav a[aria-current]::after { transform: scaleX(1); }
.kopf nav .knopf { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.kopf .tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menue-knopf { display: none; }

/* ---------- Einstieg im Kino-Format: Foto über die ganze Fläche, edler Verlauf, Schrift weiß ---------- */
.einstieg { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--nacht); overflow: hidden; }
.buehne { position: absolute; inset: 0; z-index: 0; }
.buehne .bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.buehne .bild.aktiv { opacity: 1; z-index: 1; }
.buehne picture, .buehne img { width: 100%; height: 100%; }
.buehne img { object-fit: cover; }
.js .buehne .bild.aktiv img { animation: heranfahren 9s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes heranfahren { from { transform: scale(1.12); } to { transform: scale(1); } }
.buehne::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(19, 19, 21, .78) 0%, rgba(19, 19, 21, .45) 16%, rgba(19, 19, 21, 0) 34%),
    linear-gradient(0deg, rgba(19, 19, 21, .92) 0%, rgba(19, 19, 21, .62) 34%, rgba(19, 19, 21, .18) 62%, rgba(19, 19, 21, .30) 100%),
    linear-gradient(90deg, rgba(19, 19, 21, .55) 0%, rgba(19, 19, 21, 0) 60%);
}
.einblicke { position: absolute; z-index: 3; top: calc(var(--kopf-hoehe) + clamp(24px, 4vh, 48px)); right: var(--links); width: 240px; text-align: right; color: #fff; }
.einblicke .schalter { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.einblicke button {
  position: relative; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; overflow: hidden;
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; padding: 0; transition: background-color .25s, color .25s, border-color .25s;
}
.einblicke button:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.einblicke button[aria-pressed="true"] { background: #fff; color: var(--nacht); border-color: #fff; }
.einblicke button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lila); transform-origin: left; animation: fortschritt 7s linear both; }
.buehne.steht .einblicke button::after { display: none; }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.einblicke .bild-text { display: block; margin-top: 12px; font-size: .875rem; color: #fff; line-height: 1.4; text-shadow: 0 1px 12px rgba(10, 6, 14, .7); }
.einblicke .etikett { color: rgba(255,255,255,.82); }

.einstieg-text { position: relative; z-index: 3; padding: calc(var(--kopf-hoehe) + 48px) 0 clamp(32px, 5vh, 56px); pointer-events: none; }
.einstieg-text > * { pointer-events: auto; }   /* die freie Fläche darf die Knöpfe 1-2-3 nicht verdecken */
.einstieg-text .titel { max-width: 14ch; text-shadow: 0 2px 40px rgba(10, 6, 14, .35); }
.einstieg-text .unter { margin-left: var(--einzug); margin-top: clamp(24px, 3vw, 40px); }
.einstieg-text .lead { color: rgba(255,255,255,.88); }
.einstieg-text .knoepfe { margin-top: 32px; }
.einstieg .knopf.rahmen { color: #fff; border-color: rgba(255,255,255,.75); }
.einstieg .knopf.rahmen:hover { color: var(--nacht); border-color: #fff; }
.einstieg :focus-visible { outline-color: #fff; }
.fakten { margin: clamp(40px, 6vh, 72px) 0 0 var(--einzug); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalt); }
.fakten li { border-top: 1px solid rgba(255,255,255,.45); padding-top: 14px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.92); }

/* Auftritt beim Laden */
.js .einstieg-text > :not(.titel) { animation: auftauchen 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.js .einstieg-text > :nth-child(2) { animation-delay: .15s; }
.js .einstieg-text > :nth-child(3) { animation-delay: .35s; }
.js .einstieg-text > :nth-child(4) { animation-delay: .55s; }
.js .einblicke { animation: auftauchen 1.2s .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Unterseiten-Einstieg */
.einstieg.unterseite { min-height: 78svh; }
.einstieg.unterseite .titel { font-size: clamp(2.3rem, 5vw, 4.8rem); max-width: 18ch; }
.brotkrumen { margin-bottom: 20px; color: rgba(255,255,255,.8); }
.brotkrumen a { color: rgba(255,255,255,.8); }
.brotkrumen span { margin: 0 8px; }

/* Ruhiger Auftritt beim Scrollen (nur mit JavaScript, ohne reduzierte Bewegung) */
.js .auftritt { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .auftritt.sichtbar { opacity: 1; transform: none; }
.js .auftritt picture { overflow: hidden; }
.js .auftritt picture img { transform: scale(1.06); transition: transform 1.6s var(--ease), filter .7s var(--ease); }
.js .auftritt.sichtbar picture img { transform: none; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abschnitt) 0; }
.abschnitt.dicht { padding: clamp(64px, 8vw, 112px) 0; }
.kopf-zeile { display: grid; grid-template-columns: var(--einzug) minmax(0, 1fr); margin-bottom: clamp(40px, 5vw, 72px); }
.kopf-zeile .etikett { grid-column: 1; padding-top: .9em; padding-right: var(--spalt); }
.kopf-zeile h2, .kopf-zeile .lead { grid-column: 2; }
.kopf-zeile .lead { margin-top: 24px; color: var(--text-2); }
.inhalt { margin-left: var(--einzug); }
.lila { background: var(--lila); color: #fff; }
.lila .kopf-zeile .lead, .lila .text-2 { color: var(--auf-lila-2); }
.flieder { background: var(--flieder-hell); }

/* Karten wie Projektkarten beim Vorbild */
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) var(--spalt); }
.karte { display: flex; flex-direction: column; }
.karte picture, .karte img { width: 100%; }
.karte img { aspect-ratio: 4 / 3; object-fit: cover; }
.karte h3 { margin-top: 20px; }
.karte .etikett { margin-top: 12px; }
.karte p { margin-top: 8px; color: var(--text-2); font-size: var(--klein); }
.karte .knopf { align-self: flex-start; margin-top: 20px; }
.karte.breit { grid-column: 1 / -1; }
.karten.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--spalt); }
.karten.drei + .liste-referenzen { margin-top: clamp(48px, 5vw, 72px); }
a.karte { text-decoration: none; color: inherit; }
a.karte picture { overflow: hidden; }
a.karte img { transition: transform 1s var(--ease), filter .7s var(--ease); }
a.karte:hover img { transform: scale(1.04); }
a.karte h3 { transition: color .25s; }
a.karte:hover h3 { color: var(--lila); }
.karten.drei .karte h3 { font-size: clamp(1.1rem, 1.3vw, 1.3rem); margin-top: 16px; }
.liste-referenzen a { color: inherit; text-decoration-color: var(--lila); text-underline-offset: .25em; }
.liste-referenzen a:hover { color: var(--lila); }

/* Bildstrecke auf den Projektseiten: abwechselnd ein großes und zwei kleinere Fotos */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--spalt); }
.galerie figure:nth-child(3n + 1) { grid-column: 1 / -1; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galerie figure:nth-child(3n + 1) img { aspect-ratio: 16 / 9; }
.karte.breit img { aspect-ratio: 16 / 7; }

/* Leistungsliste */
.leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
.leistungen li { position: relative; padding: 16px 0 16px 32px; border-top: 1px solid var(--trenner); line-height: 1.45; }
.leistungen li svg { position: absolute; left: 0; top: 19px; width: 18px; height: 18px; color: var(--lila); }
.bild-gross { margin-top: clamp(48px, 6vw, 80px); }
.bild-gross img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
figcaption { margin-top: 12px; font-size: var(--klein); color: var(--text-2); }
.lila figcaption { color: var(--auf-lila-2); }

/* Bildband über die ganze Breite */
.band { position: relative; isolation: isolate; min-height: clamp(380px, 72svh, 760px); display: flex; align-items: flex-end; color: #fff; background: var(--nacht); overflow: hidden; z-index: 1; }
.band picture { position: absolute; inset: -14% 0; z-index: -1; transform: translate3d(0, var(--verschub, 0px), 0); will-change: transform; }
.band img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(19,19,21,.85) 0%, rgba(19,19,21,.2) 60%); }
.band .wrap { padding: clamp(48px, 8vw, 112px) 0; }
.band-text { margin-left: var(--einzug); max-width: 18ch; font-weight: 700; font-size: var(--h2); line-height: 1.04; letter-spacing: -.03em; }
.band-hinweis { position: absolute; right: 0; bottom: 20px; font-size: .75rem; color: rgba(255,255,255,.6); }

/* Team */
.team-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); margin-top: clamp(32px, 4vw, 56px); }
.team-text p { color: var(--text-2); }

/* Ablauf: die Halle wächst aus dem Grundriss */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spalt); }
.ablauf-zeichnung .klebt { position: sticky; top: 130px; }
.ablauf-zeichnung svg { width: 100%; height: auto; overflow: visible; }
.ablauf-zeichnung .stand { margin-top: 18px; color: var(--lila); }
.schritte { padding-left: var(--spalt); }
.schritt { position: relative; padding: 0 calc(84px + var(--spalt)) clamp(56px, 9vh, 96px) 72px; min-height: 28vh; }
.schritt::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 0; width: 2px;
  background: linear-gradient(var(--lila), var(--lila)) top / 2px var(--fuellung, 0%) no-repeat, var(--trenner);
}
.schritt:last-child::before { display: none; }
.schritt .nr {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--text); display: grid; place-items: center; font-weight: 700; background: var(--weiss);
  transition: background-color .4s, color .4s, border-color .4s, opacity .3s;
}
.schritt.aktiv .nr { background: var(--lila); border-color: var(--lila); color: #fff; }
.schritt h3 { margin-top: 6px; font-weight: 700; }
.schritt p { margin-top: 10px; color: var(--text-2); max-width: 44ch; }
.stempel {
  position: absolute; right: var(--spalt); top: -6px; width: 84px; height: 84px; color: var(--gold-text);
  opacity: 0; transform: rotate(-14deg) scale(1.3); transition: opacity .35s, transform .45s var(--ease);
}
.schritt.erledigt .stempel { opacity: .9; transform: rotate(-14deg) scale(1); }
.bauphasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalt); margin-top: clamp(48px, 6vw, 80px); }
.bauphasen img, .bauphasen .plan-zeichnung { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ablauf .knoepfe { margin-top: clamp(40px, 5vw, 64px); }

.halle-svg .plan { fill: rgba(111,45,144,.05); stroke: var(--lila); stroke-width: 2; stroke-dasharray: 8 6; }
.halle-svg .plan-linie { stroke: rgba(111,45,144,.35); stroke-width: 1; stroke-dasharray: 4 5; }
.halle-svg .achs-marke circle { fill: var(--weiss); stroke: var(--lila); stroke-width: 1.5; }
.halle-svg .achs-marke text { fill: var(--lila); font-size: 11px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.halle-svg .stuetze { stroke: var(--text); stroke-width: 4; stroke-linecap: square; }
.halle-svg .binder { fill: none; stroke: var(--text); stroke-width: 3; }
.halle-svg .pfette { stroke: var(--text-2); stroke-width: 2; }
.halle-svg .wand { fill: rgba(111,45,144,.10); stroke: var(--text); stroke-width: 2; }
.halle-svg .wand.giebel { fill: rgba(111,45,144,.06); }
.halle-svg .dach { fill: rgba(156,157,157,.25); stroke: var(--text); stroke-width: 2; }
.halle-svg .paneel { stroke: rgba(21,19,24,.25); stroke-width: 1; }
.halle-svg .lichtband { fill: rgba(255,255,255,.9); stroke: var(--text-2); stroke-width: 1; }
.halle-svg .tor { fill: var(--gold); stroke: var(--gold-text); stroke-width: 1.5; }
.halle-svg .tor-linie { stroke: rgba(21,19,24,.3); stroke-width: 1; }
.halle-svg .erweiterung { fill: none; stroke: var(--lila); stroke-width: 2; stroke-dasharray: 7 6; }
.halle-svg .erweiterung-text { fill: var(--lila); font-size: 13px; font-weight: 700; font-family: inherit; }
.js .halle-svg .stufe { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .halle-svg .stufe.an { opacity: 1; transform: none; }
.js .halle-svg .stufe-2 .stuetze { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); }
.js .halle-svg .stufe-2.an .stuetze { transform: scaleY(1); }

/* Referenzen */
.orte { margin-top: clamp(56px, 7vw, 96px); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.15; letter-spacing: -.025em; color: #6E6A74; max-width: none; }
.orte b { color: var(--text); font-weight: inherit; }
.referenzen-start .knoepfe { margin-top: 32px; }

/* Über uns und Ansprechpartner */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spalt); }
.ueber-raster .text p + p { margin-top: 18px; }
.ueber-raster .text p { color: var(--text-2); }
.ansprechpartner h3 { font-size: var(--etikett); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 12px; }
.ansprechpartner li { border-top: 1px solid var(--trenner); }
.ansprechpartner li:last-child { border-bottom: 1px solid var(--trenner); }
.person summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1fr 20px; gap: 12px; align-items: center; padding: 14px 0; min-height: 52px; }
.person summary::-webkit-details-marker { display: none; }
.person summary b { font-weight: 600; }
.person summary span { color: var(--text-2); }
.person summary svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.person[open] summary svg { transform: rotate(45deg); }
.person summary:hover b { color: var(--lila); }
.kontakt-person { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 0 0 16px; }
.kontakt-person a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--lila); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kontakt-person a:hover { text-decoration: underline; }
.kontakt-person svg { width: 18px; height: 18px; flex: none; }

/* Monteure gesucht */
.gesucht .inhalt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spalt); align-items: end; }
.gesucht p { color: var(--text-2); }

/* Fragen */
.frage { border-top: 1px solid var(--trenner); }
.frage:last-child { border-bottom: 1px solid var(--trenner); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-weight: 500; font-size: var(--h3); line-height: 1.3; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 24px; height: 24px; flex: none; transition: transform .35s var(--ease); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage summary:hover { color: var(--lila); }
.frage .antwort { padding: 0 48px 28px 0; color: var(--text-2); }
.frage .antwort a { color: var(--lila); font-weight: 600; }

/* Anfrage */
.anfrage-raster { display: grid; grid-template-columns: var(--einzug) minmax(0, 1fr); }
.anfrage .seite { padding-right: var(--spalt); }
.kontakt-liste a, .kontakt-liste div { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--trenn-auf-lila); text-decoration: none; font-weight: 600; font-size: var(--klein); }
.kontakt-liste svg { width: 20px; height: 20px; flex: none; }
.kontakt-liste a:hover { text-decoration: underline; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--spalt); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.voll { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--klein); }
.field label small { font-weight: 400; color: var(--auf-lila-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.0625rem; color: var(--text); background: var(--weiss); border: 1.5px solid transparent; border-radius: 0;
  min-height: 54px; padding: 12px 16px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151318' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.field .hinweis { font-size: .875rem; color: var(--auf-lila-2); }
.field-error { display: none; font-size: var(--klein); font-weight: 700; color: #FFE7A3; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #FFD36B; }
.einwilligung label { display: flex; gap: 14px; align-items: flex-start; font-weight: 400; line-height: 1.5; cursor: pointer; }
.einwilligung input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--text); }
.einwilligung a { color: #fff; }
.formular .senden { grid-column: 1 / -1; }
.formular button[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-status { grid-column: 1 / -1; font-weight: 600; }
.form-status.is-error { color: #FFE7A3; }
.form-status a { color: #fff; }
#form-wrap.is-sent form { display: none; }
#form-success { border: 1.5px solid rgba(255,255,255,.7); padding: clamp(28px, 4vw, 48px); max-width: 640px; }
#form-success h3 { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
#form-success p { margin-top: 14px; color: var(--auf-lila-2); }
#form-success svg { width: 60px; height: 60px; margin-bottom: 18px; }
#form-success:focus { outline: none; }

/* Unterseiten-Bausteine */
.zwei-spalten-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spalt); }
.zwei-spalten-text p + p { margin-top: 16px; }
.bildband { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--spalt); }
.bildband img { width: 100%; height: clamp(220px, 26vw, 400px); object-fit: cover; }
.liste-referenzen { columns: 3; column-gap: var(--spalt); }
.liste-referenzen li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--trenner); font-weight: 600; line-height: 1.35; }
.liste-referenzen li span { display: block; font-weight: 400; color: var(--text-2); font-size: var(--klein); }
.anzahl { color: var(--lila); font-weight: 700; }
.cta-band .inhalt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spalt); align-items: end; }
.cta-band .tel-gross { font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.cta-band .tel-gross:hover { text-decoration: underline; }

/* Rechtstexte */
.recht { padding: calc(var(--kopf-hoehe) + clamp(48px, 7vw, 96px)) 0 var(--abschnitt); }
.recht .wrap > * { max-width: 760px; margin-left: var(--einzug); }
.recht h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.recht h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; margin-top: 44px; }
.recht p, .recht address { margin-top: 12px; font-style: normal; }
.recht .vorlaeufig { margin-top: 24px; padding: 16px 20px; background: var(--flieder-hell); font-weight: 600; }

/* ---------- Fußbereich: dunkel und ruhig ---------- */
.fuss { padding: clamp(72px, 8vw, 120px) 0 32px; background: var(--nacht); color: #E8E2EE; z-index: 1; }
.fuss .wrap { display: grid; grid-template-columns: var(--einzug) repeat(3, minmax(0, 1fr)); gap: 40px var(--spalt); font-size: var(--klein); }
.fuss .logo-fuss { width: 170px; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss .kontakt { line-height: 1.9; }
.fuss a { text-decoration: none; color: #fff; }
.fuss a:hover { text-decoration: underline; }
.fuss nav li { padding: 2px 0; }
.fuss .unten { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; color: #A9A0B3; }
.fuss :focus-visible { outline-color: #fff; }

/* ---------- Ältere Fotos gedämpft wie die veredelten Drohnenfotos (deploy/fotos_veredeln.py),
   Klick oder Maus zeigt die vollen Farben ---------- */
picture { display: block; }
picture.ton { position: relative; isolation: isolate; cursor: pointer; }
picture.ton img { filter: saturate(.55) contrast(.9) brightness(1.06); transition: filter .7s var(--ease); }
picture.ton::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #2E1640; mix-blend-mode: lighten; opacity: .55; transition: opacity .7s var(--ease); }
picture.ton.original img { filter: none; }
picture.ton.original::after { opacity: 0; }
@media (hover: hover) {
  picture.ton:hover img { filter: none; }
  picture.ton:hover::after { opacity: 0; }
}
picture.ton img:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }

/* ---------- Kompakte Kopfleiste mit Vollbild-Menü ---------- */
@media (max-width: 1100px) {
  :root { --kopf-hoehe: 72px; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
    background: none; color: inherit; border: 0; font: inherit; font-weight: 600; cursor: pointer; position: relative; z-index: 2;
  }
  .menue-knopf svg { width: 26px; height: 26px; }
  .kopf nav {
    position: fixed; inset: 0; background: var(--grund); color: var(--text); padding: calc(var(--kopf-hoehe) + 24px) var(--rand) 32px;
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; overflow-y: auto; z-index: 1;
  }
  .kopf.offen nav { opacity: 1; visibility: visible; }
  .kopf .logo { position: relative; z-index: 2; }
  .kopf nav ul { flex-direction: column; align-items: flex-end; gap: 4px; }
  .kopf nav a { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; padding: 2px 0; }
  .kopf nav a::after { display: none; }
  .kopf nav .tel { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin-top: 18px; }
  .kopf nav .knopf { font-size: 1.0625rem; letter-spacing: 0; min-height: 56px; margin-top: 12px; padding: 0 26px; }
  .liste-referenzen { columns: 2; }
  .karten.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  :root { --einzug: 0px; }
  .mit-linie .kopf-zeile::before { width: calc(var(--links) + 40vw); }
  .einblicke { top: calc(var(--kopf-hoehe) + 16px); width: auto; }
  .einblicke .bild-text { font-size: .75rem; max-width: 46vw; margin-left: auto; }
  .einstieg-text { padding-top: calc(var(--kopf-hoehe) + 120px); }
  .einstieg.unterseite { min-height: 88svh; }
  .einstieg-text .titel { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .knoepfe .knopf { flex: 1 1 auto; }

  .kopf-zeile { grid-template-columns: 1fr; }
  .kopf-zeile .etikett { padding: 16px 0 14px; }
  .kopf-zeile h2, .kopf-zeile .lead { grid-column: 1; }

  .karten, .karten.drei, .galerie, .leistungen, .team-text, .ablauf-raster, .ueber-raster, .anfrage-raster, .zwei-spalten-text, .gesucht .inhalt, .cta-band .inhalt { grid-template-columns: 1fr; }
  .karte.breit img, .bild-gross img { aspect-ratio: 4 / 3; }
  .ablauf-zeichnung .klebt { position: relative; top: 0; margin-bottom: 32px; }
  .schritte { padding-left: 0; }
  .schritt { padding: 0 0 48px 64px; min-height: 0; }
  .stempel { left: -6px; right: auto; top: -6px; width: 56px; height: 56px; }
  .schritt.erledigt .nr { opacity: 0; }
  .bauphasen { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .ueber-raster .ansprechpartner { margin-top: 32px; }
  .person summary { grid-template-columns: 1fr 20px; }
  .person summary span { grid-row: 2; }
  .anfrage .seite { padding: 0 0 40px; }
  .formular { grid-template-columns: 1fr; }
  .frage .antwort { padding-right: 0; }
  .bildband { grid-template-columns: 1fr; }
  .liste-referenzen { columns: 1; }
  .fuss .wrap { grid-template-columns: 1fr 1fr; }
  .fuss .logo-fuss { grid-column: 1 / -1; }
  .recht .wrap > * { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .halle-svg .stufe, .js .halle-svg .stufe-2 .stuetze { opacity: 1; transform: none; }
}

@media print {
  .kopf, .menue-knopf, #form-wrap, .einblicke { display: none !important; }
  .lila { background: none; color: #000; }
}

/* ---------- Elegante Bewegungen (alle nur ohne „weniger Bewegung“ im System) ---------- */

/* Knöpfe: weiche Farbwelle von links */
.knopf { position: relative; overflow: hidden; isolation: isolate; }
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lila-tief);
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease);
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.knopf.rahmen::before { background: var(--text); }
.lila .knopf::before { background: var(--flieder); }
.lila .knopf.rahmen::before, .einstieg .knopf.rahmen::before { background: #fff; }

/* Kopfleiste gleitet beim Runterscrollen weg und beim Hochscrollen wieder herein */
.kopf { transition: transform .6s var(--ease), background-color .5s var(--ease), color .5s var(--ease), box-shadow .3s var(--ease); }
.kopf.versteckt { transform: translateY(-100%); }

@media (prefers-reduced-motion: no-preference) {
  /* Überschriften steigen Wort für Wort aus einer unsichtbaren Kante */
  .js .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .js .wort > span { display: inline-block; transform: translateY(108%); transition: transform 1.15s cubic-bezier(.2, .75, .15, 1); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .woerter-an .wort > span { transform: none; }
  .js .einstieg .titel .wort > span { transition-duration: 1.4s; transition-delay: calc(200ms + var(--i, 0) * 90ms); }

  /* Dünne Linie zeichnet sich vom Fensterrand her */
  .js .mit-linie .kopf-zeile.auftritt::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .1s; }
  .js .mit-linie .kopf-zeile.auftritt.sichtbar::before { transform: scaleX(1); }

  /* Fotos öffnen sich wie ein Vorhang von unten */
  .js .auftritt picture { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.65, 0, .2, 1) .08s; }
  .js .auftritt.sichtbar picture { clip-path: inset(0 0 0 0); }

  /* Einstiegsfoto mit Tiefe: es bewegt sich beim Scrollen langsamer als die Seite */
  .buehne .bild { transform: translate3d(0, var(--verschub, 0px), 0); }

  /* Weiche Überblendung zwischen den Seiten */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: seite-weg .35s var(--ease) both; }
  ::view-transition-new(root) { animation: seite-her .55s var(--ease) both; }
  @keyframes seite-weg { to { opacity: 0; } }
  @keyframes seite-her { from { opacity: 0; transform: translateY(12px); } }
}

/* ---------- Edler Hintergrund ---------- */

/* Weiches Licht auf dem Elfenbein: zarte Champagner- und Fliederflächen, die langsam wandern */
body::after {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(214, 192, 150, .26), transparent 70%),
    radial-gradient(34% 30% at 88% 30%, rgba(111, 45, 144, .085), transparent 70%),
    radial-gradient(42% 36% at 30% 86%, rgba(160, 140, 190, .12), transparent 72%),
    radial-gradient(30% 28% at 78% 82%, rgba(214, 192, 150, .16), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: lichtwandern 60s ease-in-out infinite alternate; }
}
@keyframes lichtwandern {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1); }
}
.fuss, .kopf { z-index: 50; }
.fuss { z-index: 1; }

/* Steinton: ein etwas tieferes Elfenbein für einen ruhigen Wechsel der Abschnitte */
.stein { background: linear-gradient(180deg, rgba(232, 225, 214, 0) 0%, rgba(232, 225, 214, .72) 14%, rgba(232, 225, 214, .72) 86%, rgba(232, 225, 214, 0) 100%); }

/* Dunkle Bühne: Abschnitt in Aubergine mit sanftem Lichtschein */
.dunkel {
  color: #F1ECF4;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(111, 45, 144, .38), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(179, 154, 80, .14), transparent 70%),
    var(--nacht);
}
.dunkel.mit-linie .kopf-zeile::before { background: rgba(255, 255, 255, .55); }
.dunkel .kopf-zeile .lead, .dunkel .text-2, .dunkel .schritt p, .dunkel figcaption { color: #C9BFD2; }
.dunkel .ablauf-zeichnung .stand { color: #D4B8E6; }
.dunkel .schritt::before { background: linear-gradient(#B98AD6, #B98AD6) top / 2px var(--fuellung, 0%) no-repeat, rgba(255, 255, 255, .16); }
.dunkel .schritt .nr { border-color: rgba(255, 255, 255, .7); background: var(--nacht); color: #fff; }
.dunkel .schritt.aktiv .nr { background: var(--lila); border-color: #B98AD6; }
.dunkel .stempel { color: var(--gold); }
.dunkel :focus-visible { outline-color: #fff; }
.dunkel .halle-svg .plan { fill: rgba(185, 138, 214, .08); stroke: #B98AD6; }
.dunkel .halle-svg .plan-linie { stroke: rgba(185, 138, 214, .45); }
.dunkel .halle-svg .achs-marke circle { fill: var(--nacht); stroke: #B98AD6; }
.dunkel .halle-svg .achs-marke text { fill: #D4B8E6; }
.dunkel .halle-svg .stuetze, .dunkel .halle-svg .binder { stroke: #F1ECF4; }
.dunkel .halle-svg .pfette { stroke: #C9BFD2; }
.dunkel .halle-svg .wand { fill: rgba(185, 138, 214, .14); stroke: #F1ECF4; }
.dunkel .halle-svg .wand.giebel { fill: rgba(185, 138, 214, .08); }
.dunkel .halle-svg .dach { fill: rgba(255, 255, 255, .12); stroke: #F1ECF4; }
.dunkel .halle-svg .paneel { stroke: rgba(255, 255, 255, .22); }
.dunkel .halle-svg .lichtband { fill: rgba(255, 255, 255, .85); stroke: #C9BFD2; }
.dunkel .halle-svg .tor-linie { stroke: rgba(19, 19, 21, .35); }
.dunkel .halle-svg .erweiterung { stroke: #B98AD6; }
.dunkel .halle-svg .erweiterung-text { fill: #D4B8E6; }

/* ---------- Dunkler, edler Grundton (Michael, 22.10.2026: „in einem eleganten Ton wie der“, Bild aus dem Einstieg) ---------- */
:root {
  --grund: #1C1722;          /* Aubergine-Anthrazit, wie unten im Einstieg */
  --tiefer: #120E16;         /* noch dunkler: Ablauf und Fußbereich */
  --text: #F1ECF4;
  --text-2: #B8AFC2;
  --trenner: rgba(255, 255, 255, .13);
  --flieder-hell: #262030;
  --lila-text: #C9A3E0;      /* Lila für Schrift und Links auf dunklem Grund */
}
html { scrollbar-color: #5A3F6E var(--grund); }
:focus-visible { outline-color: var(--lila-text); }

/* Feine helle Papier-Struktur statt dunkler Körnung */
body::before {
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Lichtschimmer auf dem dunklen Grund */
body::after {
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(214, 192, 150, .07), transparent 70%),
    radial-gradient(34% 30% at 88% 30%, rgba(140, 70, 180, .14), transparent 70%),
    radial-gradient(42% 36% at 30% 86%, rgba(120, 90, 160, .10), transparent 72%),
    radial-gradient(30% 28% at 78% 82%, rgba(214, 192, 150, .05), transparent 70%);
}

/* Kopfleiste und Logo */
.kopf { background: rgba(28, 23, 34, .86); }
.logo .dunkel { display: none; }
.logo .hell { display: block; }

/* Abschnitte */
.stein { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .035) 14%, rgba(255, 255, 255, .035) 86%, rgba(255, 255, 255, 0) 100%); }
.dunkel { background: radial-gradient(60% 50% at 80% 10%, rgba(111, 45, 144, .34), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgba(179, 154, 80, .10), transparent 70%), var(--tiefer); }
.dunkel .schritt .nr { background: var(--tiefer); }
.fuss { background: var(--tiefer); }
.schritt .nr { background: var(--grund); }
.halle-svg .achs-marke circle { fill: var(--grund); }

/* Knöpfe: Rahmen-Knopf füllt sich hell, Schrift wird dunkel */
.knopf.rahmen:hover, .knopf.rahmen:focus-visible { color: var(--grund); }

/* Links und Akzente in hellerem Lila */
.leistungen li svg, .anzahl, .kontakt-person a, .frage .antwort a, .ablauf-zeichnung .stand { color: var(--lila-text); }
a.karte:hover h3, .frage summary:hover, .person summary:hover b, .liste-referenzen a:hover { color: var(--lila-text); }
.liste-referenzen a { text-decoration-color: var(--lila-text); }
.orte { color: #8C8396; }

/* Grund hebt sich etwas mehr von den dunklen Bildflächen ab (Michael, 22.10.2026) */
:root { --grund: #262030; --flieder-hell: #2F2839; --trenner: rgba(255, 255, 255, .14); }
.kopf { background: rgba(38, 32, 48, .88); }
body::after {
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(214, 192, 150, .09), transparent 70%),
    radial-gradient(34% 30% at 88% 30%, rgba(150, 80, 195, .20), transparent 70%),
    radial-gradient(42% 36% at 30% 86%, rgba(120, 90, 165, .14), transparent 72%),
    radial-gradient(30% 28% at 78% 82%, rgba(214, 192, 150, .07), transparent 70%);
}
.einstieg { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }

/* Formularfelder bleiben hell mit dunkler Schrift, auch auf dunklem Grund */
.field input, .field select, .field textarea, .field option { color: #151318; background-color: #fff; }
.skip { background: var(--nacht); color: #fff; }
.orte { color: #9A91A4; }
.menue-knopf, .hp { color: inherit; }

/* ---------- Licht und Glanz (Michael, 22.10.2026: „Lichteffekte, glänzend, edler“) ---------- */

/* Gebürsteter Stahl: kaum sichtbarer, feiner Schliff im Grund */
html { background: var(--grund); }
body { background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .06)) fixed,
  var(--grund); }

/* Leuchtende Linien: laufen vom Rand her hell aus */
.mit-linie .kopf-zeile::before { background: linear-gradient(90deg, rgba(241, 236, 244, 0) 0%, rgba(241, 236, 244, .35) 45%, rgba(241, 236, 244, .9) 100%); }

/* Satin-Knöpfe mit weichem Leuchten */
.knopf:not(.rahmen) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -10px rgba(8, 4, 12, .7); transition: box-shadow .5s var(--ease), border-color .3s; }
.knopf:not(.rahmen):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px -10px rgba(8, 4, 12, .85); }
.lila .knopf:not(.rahmen) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 26px -12px rgba(20, 10, 30, .6); }

/* Lichtreflex über Projektfotos beim Darüberfahren */
a.karte picture, .karte picture { position: relative; }
a.karte picture::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, .06) 54%, transparent 68%);
  transform: translateX(-130%); transition: transform 1.2s var(--ease);
}
a.karte:hover picture::before { transform: translateX(130%); }

@media (prefers-reduced-motion: no-preference) {
  /* Zarter Glanzstreifen, der ab und zu über die dunklen Flächen zieht */
  .dunkel, .fuss { position: relative; overflow: clip; isolation: isolate; }   /* clip statt hidden, sonst klebt die Ablauf-Zeichnung nicht mehr */
  .dunkel::after, .fuss::after {
    content: ""; position: absolute; inset: -20% -60%; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .045) 49%, rgba(201, 163, 224, .06) 51%, transparent 58%);
    transform: translateX(-60%);
  }
  .dunkel.glaenzt::after, .fuss.glaenzt::after { animation: glanz 3.2s cubic-bezier(.45, 0, .2, 1) .3s both; }   /* einmal, wenn man hinscrollt */
  @keyframes glanz { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
}

/* ---------- Bilder im Farbton des Hintergrunds, Referenzbilder in Originalfarben (Michael, 22.10.2026) ---------- */
picture.ton img { filter: saturate(.45) contrast(1.03) brightness(.9); }
picture.ton::after { background: #5E3B7C; mix-blend-mode: color; opacity: .5; }
.buehne picture.ton { cursor: default; }
.buehne picture.ton:hover img { filter: saturate(.45) contrast(1.03) brightness(.9); }
.buehne picture.ton:hover::after { opacity: .5; }
.band img { filter: saturate(.4) brightness(.95); }
.band picture::after { content: ""; position: absolute; inset: 0; background: #5E3B7C; mix-blend-mode: color; opacity: .55; }

/* Gebürsteter Stahl feiner */
body { background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .009) 0 1px, transparent 1px 4px),
  linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .06)) fixed,
  var(--grund); }

/* Anfrage-Bereich gedämpft statt kräftigem Lila (Michael, 22.10.2026: „zu grell“) */
.lila {
  background:
    radial-gradient(70% 60% at 88% 0%, rgba(111, 45, 144, .45), transparent 70%),
    radial-gradient(50% 45% at 5% 100%, rgba(179, 154, 80, .08), transparent 70%),
    #2B1A38;
}
.lila .kontakt-liste a, .lila .kontakt-liste div { border-top-color: rgba(255, 255, 255, .16); }
.field input, .field select, .field textarea { background-color: #F3EFF5; }
.field input:focus, .field select:focus, .field textarea:focus { background-color: #fff; }
/* Farbton feiner abgestimmt: dunkler und zarter, damit er mit dem Aubergine-Grund verschmilzt */
picture.ton img, .buehne picture.ton:hover img { filter: saturate(.5) contrast(1.06) brightness(.86); }
picture.ton::after, .buehne picture.ton:hover::after { background: #4A2C63; opacity: .34; }
.band picture::after { background: #4A2C63; opacity: .4; }

/* ---------- Licht wie durch das Lichtband einer Halle (ersetzt das Mauslicht, Michael 22.10.2026) ----------
   Weiche, schräg einfallende Lichtbahnen von oben; sie atmen langsam und verschieben sich beim Scrollen leicht. */
html::after {
  content: ""; position: fixed; inset: -10% -10% -30%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(255, 238, 214, .05) 22%, transparent 27%,
                            transparent 41%, rgba(214, 190, 240, .045) 44%, rgba(214, 190, 240, .06) 46%, transparent 51%,
                            transparent 63%, rgba(255, 238, 214, .035) 66%, transparent 70%,
                            transparent 80%, rgba(214, 190, 240, .04) 83%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 85%);
  filter: blur(18px);
  transform: translate3d(0, var(--lichtversatz, 0px), 0);
}
@media (prefers-reduced-motion: no-preference) {
  html::after { animation: lichtatmen 18s ease-in-out infinite alternate; }
  @keyframes lichtatmen { from { opacity: .7; } to { opacity: 1; } }
}
/* Lichtbahnen etwas kräftiger */
html::after {
  background:
    linear-gradient(112deg, transparent 0 14%, rgba(255, 238, 214, .10) 19%, rgba(255, 238, 214, .04) 24%, transparent 28%,
                            transparent 38%, rgba(214, 190, 240, .09) 42%, rgba(214, 190, 240, .13) 45%, rgba(214, 190, 240, .05) 49%, transparent 53%,
                            transparent 62%, rgba(255, 238, 214, .08) 66%, transparent 71%,
                            transparent 79%, rgba(214, 190, 240, .08) 83%, transparent 89%);
  filter: blur(26px);
}

/* ---------- Dunkles Grau statt Lila-Ton (Michael, 22.10.2026: „zu lila“, „ein dunkles Grau, dann kommen die anderen Farben besser raus“) ---------- */
:root {
  --grund: #27272A;
  --tiefer: #18181A;
  --nacht: #141416;
  --flieder-hell: #303034;
  --text: #F3F3F4;
  --text-2: #B4B4B9;
  --trenner: rgba(255, 255, 255, .13);
}
html { scrollbar-color: #55555C var(--grund); }
.kopf { background: rgba(39, 39, 42, .9); }
.fuss { color: #E6E6E8; }
.fuss .unten { color: #9D9DA3; }
.orte { color: #9D9DA3; }
.einstieg-text .lead, .fakten li { color: rgba(255, 255, 255, .9); }

/* Lichtschimmer und Lichtbahnen neutral-warm statt lila */
body::after {
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(230, 215, 190, .06), transparent 70%),
    radial-gradient(34% 30% at 88% 30%, rgba(255, 255, 255, .035), transparent 70%),
    radial-gradient(30% 28% at 78% 82%, rgba(230, 215, 190, .04), transparent 70%);
}
html::after {
  background:
    linear-gradient(112deg, transparent 0 14%, rgba(255, 244, 226, .09) 19%, rgba(255, 244, 226, .035) 24%, transparent 28%,
                            transparent 38%, rgba(255, 250, 242, .08) 42%, rgba(255, 250, 242, .11) 45%, rgba(255, 250, 242, .04) 49%, transparent 53%,
                            transparent 62%, rgba(255, 244, 226, .07) 66%, transparent 71%,
                            transparent 79%, rgba(255, 250, 242, .06) 83%, transparent 89%);
}

/* Fotos: ruhig gedämpft im Grauton, ohne lila Schleier */
picture.ton img, .buehne picture.ton:hover img { filter: saturate(.55) contrast(1.04) brightness(.9); }
picture.ton::after, .buehne picture.ton:hover::after { background: #2A2A2E; mix-blend-mode: color; opacity: .25; }
.band picture::after { background: #2A2A2E; opacity: .3; }

/* Dunkle Bühne (Ablauf) und Anfrage: Grau mit nur einem leisen Lila-Schein */
.dunkel { background: radial-gradient(60% 50% at 80% 10%, rgba(111, 45, 144, .16), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgba(179, 154, 80, .09), transparent 70%), var(--tiefer); }
.lila { background: radial-gradient(70% 60% at 88% 0%, rgba(111, 45, 144, .30), transparent 70%), radial-gradient(50% 45% at 5% 100%, rgba(179, 154, 80, .07), transparent 70%), #1D1D20; }
.dunkel .kopf-zeile .lead, .dunkel .text-2, .dunkel .schritt p, .dunkel figcaption { color: #BDBDC2; }
.lila .kopf-zeile .lead, .lila .text-2 { color: #C9C9CE; }
.field input, .field select, .field textarea { background-color: #F1F1F2; }
.bauphasen-hinweis { margin-top: 20px; font-size: var(--klein); }
.bauphasen-hinweis a { color: var(--lila-text); font-weight: 600; }

/* ---------- Einzelne Lila-Akzente auf dem Grau (Michael, 22.10.2026) ---------- */
.kopf-zeile .etikett, .ansprechpartner h3, .einblicke .etikett { color: var(--lila-text); }
.mit-linie .kopf-zeile::before { background: linear-gradient(90deg, rgba(243, 243, 244, 0) 0%, rgba(243, 243, 244, .3) 40%, rgba(243, 243, 244, .55) 78%, var(--lila-text) 100%); }
.fakten li { position: relative; }
.fakten li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--lila-text); }
.ansprechpartner h3 { position: relative; padding-top: 14px; }
.ansprechpartner h3::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--lila-text); }
.akzent { color: var(--lila-text); }
html { scrollbar-color: #6F4A88 var(--grund); }
/* Logo etwas größer, damit es gut lesbar ist */
.logo { width: clamp(170px, 15vw, 220px); }
.fuss .logo-fuss { width: 200px; }

/* ---------- Fotos heben sich vom Grau ab (Michael, 22.10.2026) ---------- */
picture.ton img, .buehne picture.ton:hover img { filter: saturate(.72) contrast(1.08) brightness(1.04); }
picture.ton::after, .buehne picture.ton:hover::after { opacity: .1; }
main .karte picture, main .inhalt > figure picture, main .bild-gross picture, main .bauphasen picture, main .galerie picture, main .bildband picture {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 48px -22px rgba(0, 0, 0, .85);
}

/* ---------- Ein Farbton für alle Knöpfe (Michael, 22.10.2026) ----------
   Hauptknopf überall Lila mit weißer Schrift, Nebenknopf überall heller Rahmen. */
.knopf:not(.rahmen), .lila .knopf:not(.rahmen), .einstieg .knopf:not(.rahmen) {
  background-color: var(--lila); color: #fff; border-color: var(--lila);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -10px rgba(8, 4, 12, .7);
}
.knopf:not(.rahmen)::before, .lila .knopf:not(.rahmen)::before { background: var(--lila-tief); }
.knopf:not(.rahmen):hover, .lila .knopf:not(.rahmen):hover { color: #fff; border-color: var(--lila-tief); }
.knopf.rahmen, .lila .knopf.rahmen, .einstieg .knopf.rahmen { background-color: transparent; color: var(--text); border-color: rgba(243, 243, 244, .8); }
.knopf.rahmen::before, .lila .knopf.rahmen::before, .einstieg .knopf.rahmen::before { background: var(--text); }
.knopf.rahmen:hover, .lila .knopf.rahmen:hover, .einstieg .knopf.rahmen:hover { color: var(--grund); border-color: var(--text); }
.bauphasen-hinweis { max-width: none; }
.bauphasen-hinweis a { white-space: nowrap; }

/* ---------- Bilder bauen sich schneller auf (Michael, 22.10.2026) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .auftritt { transition: opacity .55s var(--ease), transform .7s var(--ease); }
  .js .auftritt picture { transition: clip-path .75s cubic-bezier(.65, 0, .2, 1); }
  .js .auftritt picture img { transition: transform .9s var(--ease), filter .7s var(--ease); }
  .js .mit-linie .kopf-zeile.auftritt::before { transition-duration: .9s; transition-delay: 0s; }
}

/* ---------- Menüband edler (Michael, 22.10.2026) ---------- */
.kopf { transition: height .45s var(--ease), transform .6s var(--ease), background-color .5s var(--ease), color .5s var(--ease), box-shadow .3s var(--ease); }
.kopf .logo { transition: width .45s var(--ease); }
/* Beim Scrollen: schmaler, dunkles Glas, feine lila Lichtkante */
.kopf.gescrollt { height: 70px; background: rgba(24, 24, 27, .78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.kopf.gescrollt .logo { width: clamp(150px, 12vw, 180px); }
.kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(90deg, transparent 0%, rgba(201, 163, 224, .55) 30%, rgba(255, 255, 255, .35) 50%, rgba(201, 163, 224, .55) 70%, transparent 100%);
}
.kopf.gescrollt::after { opacity: 1; }
/* Menüpunkte ruhiger, lila Linie wächst aus der Mitte */
.kopf nav a:not(.knopf) { font-size: .95rem; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .8); transition: color .25s; }
.kopf nav a:not(.knopf):hover, .kopf nav a[aria-current] { color: #fff; }
.kopf nav a:not(.knopf)::after { height: 2px; bottom: 0; background: var(--lila-text); transform-origin: center; }
/* Telefon mit feinem Trennstrich und Hörer-Symbol */
.kopf nav li:has(.tel) { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid rgba(255, 255, 255, .18); }
.kopf nav .tel { display: inline-flex; align-items: center; gap: 8px; }
.kopf nav .tel::before {
  content: ""; width: 15px; height: 15px; flex: none; background: var(--lila-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kopf nav .knopf { min-height: 42px; font-size: .9rem; }

@media (max-width: 1100px) {
  .kopf nav li:has(.tel) { padding-left: 0; border-left: 0; }
  .kopf nav .tel::before { width: 18px; height: 18px; }
  .kopf nav a:not(.knopf) { color: var(--text); font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; }
  .kopf nav .tel { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
  .kopf nav ul li { border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 6px 0; width: 100%; text-align: right; }
  .kopf nav ul li:last-child, .kopf nav ul li:has(.tel) { border-bottom: 0; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .kopf nav li { opacity: 0; transform: translateX(24px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
  .kopf.offen nav li { opacity: 1; transform: none; }
  .kopf.offen nav li:nth-child(2) { transition-delay: .05s; } .kopf.offen nav li:nth-child(3) { transition-delay: .1s; }
  .kopf.offen nav li:nth-child(4) { transition-delay: .15s; } .kopf.offen nav li:nth-child(5) { transition-delay: .2s; }
  .kopf.offen nav li:nth-child(6) { transition-delay: .25s; } .kopf.offen nav li:nth-child(7) { transition-delay: .3s; }
}
.menue-knopf { white-space: nowrap; }
@media (max-width: 1100px) {
  .kopf nav a.tel:not(.knopf) { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin-top: 14px; }
}
.menue-knopf svg { flex: none; }
/* Kontaktdaten bei allen Ansprechpartnern untereinander, wie bei Carina (Michael, 22.10.2026) */
.kontakt-person { flex-direction: column; align-items: flex-start; gap: 2px; }

/* ---------- Flüssig auch auf schwächeren Rechnern (23.10.2026, Kollege: Seite ruckelt) ----------
   Gemessen ohne Grafikbeschleunigung: Dauer-Animationen großer fester Lichtflächen, Weichzeichner auf diesen
   Flächen und hinter der Kopfleiste sowie Farbmischung über jedem Foto kosteten beim Scrollen fast alles.
   Das Licht bleibt sichtbar, steht aber still und wird ohne Weichzeichner gemalt. */
html::after {
  animation: none !important; filter: none !important; transform: none !important; opacity: .9;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(255, 238, 214, .07) 19%, transparent 31%,
                            transparent 35%, rgba(214, 190, 240, .08) 45%, transparent 57%,
                            transparent 59%, rgba(255, 238, 214, .06) 66%, transparent 75%,
                            transparent 76%, rgba(214, 190, 240, .06) 83%, transparent 93%);
}
body::after { animation: none !important; }
.kopf, .kopf.gescrollt { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.kopf.gescrollt { background: #18181b; transition: none; }   /* deckend, damit ohne Weichzeichner nichts durchscheint */
picture.ton::after, .buehne picture.ton:hover::after, .band picture::after { mix-blend-mode: normal !important; background: #1d1d20; opacity: .14; }

/* ---------- Karriere: Stellen als Karten ---------- */
.karten.stellen { align-items: stretch; }
.karte.stelle { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); }
.karte.stelle h3 { margin: 0; }
.karte.stelle p { margin: 0 0 8px; }
.karte.stelle .knopf { margin-top: auto; align-self: flex-start; }

/* Spar-Automatik (main.js): auf langsamen Rechnern ohne Bildfilter und Lichtflächen */
html.sparsam picture img, html.sparsam .band img { filter: none !important; }
html.sparsam picture::after, html.sparsam body::after, html.sparsam::after { display: none !important; }