/* REF Solution GmbH – Stylesheet
   Schriften lokal (Inter, SIL OFL), keine externen Anfragen. */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800; font-display: swap; }

:root {
  --graphit: #1c2125;
  --graphit-2: #272e33;
  --stahl: #56616b;
  --stahl-hell: #9aa4ac;
  --beton: #e6e9eb;
  --papier: #f5f6f7;
  --weiss: #ffffff;
  --glut: #e8590c;
  --glut-dunkel: #b04204;
  --glut-hell: #ffb02e;
  --hitze: linear-gradient(90deg, #272e33 0%, #6e1c0c 28%, #c2350a 52%, #e8590c 74%, #ffb02e 100%);

  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--graphit);
  background: var(--weiss);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--glut-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--graphit); }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-family: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
p { margin: 0 0 1em; max-width: 68ch; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--stahl); max-width: 58ch; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--grau { background: var(--papier); }
.section--dunkel { background: var(--graphit); color: var(--beton); }
.section--dunkel h2, .section--dunkel h3 { color: var(--weiss); }
.section--dunkel .lead, .section--dunkel p { color: #c3cad0; }
.section--dunkel a { color: var(--glut-hell); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--weiss); padding: 8px 14px; }

/* ---------- Header ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--beton); }
.kopf__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--graphit); }
.marke img { height: 46px; width: auto; }
.marke__text { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; }
.marke__text small { display: block; font-family: var(--text); font-weight: 500; font-size: .72rem; letter-spacing: 0; color: var(--stahl); margin-top: 4px; }
.marke.has-logo .marke__text { display: none; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; color: var(--graphit); font-weight: 500; font-size: .96rem; padding: 10px 12px; border-radius: var(--radius); }
.nav a:hover { background: var(--papier); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--glut); border-radius: 0; }
.nav .btn { margin-left: 12px; }

.menue-knopf { display: none; background: none; border: 1px solid var(--beton); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-weight: 600; color: var(--graphit); cursor: pointer; }

@media (max-width: 960px) {
  .menue-knopf { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--weiss); border-bottom: 1px solid var(--beton); padding: 8px var(--gutter) 20px; }
  .nav.offen { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--papier); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--glut); padding-left: 14px; }
  .nav .btn { margin: 12px 0 0; text-align: center; justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; text-decoration: none; padding: 13px 22px; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.btn--glut { background: var(--glut); color: var(--graphit); }
.btn--glut:hover { background: var(--glut-hell); color: var(--graphit); }
.btn--rahmen { border-color: currentColor; color: inherit; background: transparent; }
.btn--rahmen:hover { background: rgba(255,255,255,.08); color: inherit; }
.nav .btn--glut { padding: 10px 16px; }
.nav .btn--glut:hover { background: var(--glut-hell); }

/* ---------- Hero ---------- */
.hero { background: var(--graphit); color: var(--weiss); position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--hitze); }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: end; padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 112px); }
.hero h1 { color: var(--weiss); max-width: 14ch; }
.hero .lead { color: #c3cad0; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__bild { aspect-ratio: 4 / 5; }
.hero__fakten { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 40px 0 0; padding: 0; list-style: none; color: var(--stahl-hell); font-size: .95rem; }
.hero__fakten strong { color: var(--weiss); font-weight: 600; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__bild { aspect-ratio: 16 / 10; order: -1; }
}

/* Seitenkopf für Unterseiten */
.seitenkopf { background: var(--graphit); color: var(--weiss); position: relative; padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 7vw, 96px); }
.seitenkopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--hitze); }
.seitenkopf h1 { color: var(--weiss); max-width: 20ch; }
.seitenkopf .lead { color: #c3cad0; }
.seitenkopf--schlicht { background: var(--papier); color: var(--graphit); }
.seitenkopf--schlicht h1 { color: var(--graphit); }
.seitenkopf--schlicht::after { display: none; }

/* ---------- Bilder mit Platzhalter ---------- */
.bild { position: relative; overflow: hidden; background: var(--graphit-2); border-radius: var(--radius); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild.fehlt img { display: none; }
.bild.fehlt::before { content: attr(data-platzhalter); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--stahl-hell); font-size: .85rem;
  background: repeating-linear-gradient(135deg, var(--graphit-2) 0 14px, #2d353b 14px 28px); }

/* ---------- Zwei Geschäftsfelder ---------- */
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--beton); border-radius: var(--radius); overflow: hidden; }
.feld { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--graphit); background: var(--weiss); }
.feld + .feld { border-left: 1px solid var(--beton); }
.feld .bild { aspect-ratio: 16 / 9; border-radius: 0; }
.feld__text { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; }
.feld__text h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.feld__text p { color: var(--stahl); }
.feld__mehr { margin-top: auto; font-weight: 600; color: var(--glut-dunkel); padding-top: 8px; }
.feld:hover .feld__mehr { color: var(--graphit); text-decoration: underline; }
@media (max-width: 760px) {
  .felder { grid-template-columns: 1fr; }
  .feld + .feld { border-left: 0; border-top: 1px solid var(--beton); }
}

/* ---------- Spalten & Raster ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.zweispaltig--gleich { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .zweispaltig, .zweispaltig--gleich { grid-template-columns: 1fr; } }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--beton); border: 1px solid var(--beton); border-radius: var(--radius); overflow: hidden; }
.raster > * { background: var(--weiss); padding: 28px; }
.raster h3 { margin-bottom: .4em; }
.raster p { color: var(--stahl); margin: 0; font-size: .98rem; }
.section--grau .raster > * { background: var(--weiss); }
.section--dunkel .raster { background: #39424a; border-color: #39424a; }
.section--dunkel .raster > * { background: var(--graphit); }

.kopfzeile { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.kopfzeile h2 { margin: 0; max-width: 22ch; }
.kopfzeile p { margin: 0; color: var(--stahl); max-width: 46ch; }

/* ---------- Aggregate (typografische Wand) ---------- */
.aggregate { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1em 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 3.1vw, 2.45rem); line-height: 1.25; letter-spacing: -0.02em; }
.aggregate li { color: var(--weiss); }
.aggregate li::after { content: "/"; color: var(--glut); margin: 0 .38em; font-weight: 400; }
.aggregate li:last-child::after { content: ""; }

/* ---------- Ablauf (echte Reihenfolge) ---------- */
.ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--graphit); }
.ablauf li { counter-increment: schritt; padding: 22px 24px 26px 0; border-bottom: 1px solid var(--beton); }
.ablauf li::before { content: counter(schritt); display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--glut-dunkel); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.ablauf h3 { margin-bottom: .3em; }
.ablauf p { color: var(--stahl); margin: 0; font-size: .98rem; }
@media (max-width: 860px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* ---------- Listen ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--beton); position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 3px; background: var(--glut); }
.section--dunkel .liste li { border-color: #39424a; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--beton); background: var(--weiss); border-radius: 999px; padding: 7px 15px; font-weight: 500; font-size: .95rem; }

/* ---------- Zertifikate ---------- */
.zert { display: grid; grid-template-columns: 9.5rem 1fr; gap: 6px 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--beton); }
.zert:first-child { border-top: 1px solid var(--beton); }
.zert__kuerzel { font-family: var(--display); font-weight: 800; font-size: 1.5rem; min-width: 6.5ch; }
.zert p { margin: 0; color: var(--stahl); }
@media (max-width: 560px) { .zert { grid-template-columns: 1fr; } }

/* ---------- Notdienst-Band ---------- */
.notdienst { background: var(--glut); color: var(--graphit); }
.notdienst__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 28px; }
.notdienst p { margin: 0; font-size: 1.15rem; font-weight: 500; max-width: none; }
.notdienst strong { font-family: var(--display); font-weight: 800; }
.notdienst a { color: var(--graphit); font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); text-decoration: none; white-space: nowrap; }
.notdienst a:hover { text-decoration: underline; }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.galerie a { display: block; }
.galerie .bild { aspect-ratio: 4 / 3; }
.galerie a:hover img { opacity: .88; }

/* ---------- Referenzen ---------- */
.kunden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 2px solid var(--graphit); }
.kunden li { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.015em; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--beton); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.person { border: 1px solid var(--beton); border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--weiss); }
.person__kuerzel { width: 60px; height: 60px; border-radius: 50%; background: var(--graphit); color: var(--weiss); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.person h3 { margin: 0 0 2px; font-size: 1.2rem; }
.person__rolle { color: var(--stahl); margin: 0 0 12px; }
.person a { display: block; word-break: break-word; }

/* ---------- Kontakt ---------- */
.kontaktblock dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.kontaktblock dt { color: var(--stahl); }
.kontaktblock dd { margin: 0; font-weight: 500; }

.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.formular .voll { grid-column: 1 / -1; }
.formular label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.formular label .opt { font-weight: 400; color: var(--stahl); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea {
  width: 100%; font: inherit; color: var(--graphit); background: var(--weiss); border: 1px solid #c6ccd1; border-radius: var(--radius); padding: 12px 14px; }
.formular textarea { min-height: 170px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 3px solid var(--glut); outline-offset: 0; border-color: var(--graphit); }
.formular .check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 400; font-size: .95rem; color: var(--stahl); }
.formular .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--glut); }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .formular { grid-template-columns: 1fr; } }

.meldung { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 24px; font-weight: 500; }
.meldung--fehler { background: #fdecea; color: #8a1c0f; border: 1px solid #f3b8ae; }
.meldung--ok { background: #eaf6ec; color: #1d5c2b; border: 1px solid #b6dcbf; }
.meldung[hidden] { display: none; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 1.8em; }
.rechtstext h3 { margin-top: 1.4em; }

/* ---------- Abschluss-CTA ---------- */
.abschluss { background: var(--graphit); color: var(--weiss); position: relative; }
.abschluss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hitze); }
.abschluss__inner { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding-block: clamp(56px, 7vw, 88px); }
.abschluss h2 { color: var(--weiss); margin: 0 0 .3em; max-width: 20ch; }
.abschluss p { color: #c3cad0; margin: 0; }
.abschluss__aktionen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.fuss { background: #14181b; color: #aab3ba; font-size: .95rem; }
.fuss__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 40px; }
.fuss h3 { color: var(--weiss); font-size: 1rem; margin-bottom: 12px; }
.fuss a { color: #d7dde1; text-decoration: none; }
.fuss a:hover { color: var(--glut-hell); text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss p { margin: 0 0 .5em; }
.fuss__unten { border-top: 1px solid #2a3136; padding-block: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; }
@media (max-width: 860px) { .fuss__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss__inner { grid-template-columns: 1fr; } }

.abstand-oben { margin-top: clamp(40px, 6vw, 72px); }
.mt-0 { margin-top: 0; }
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section--dunkel .kopfzeile p { color: #c3cad0; }

/* =====================================================================
   EFFEKTE: Glas, Schatten, Glut, Animationen
   ===================================================================== */
:root {
  --radius: 14px;
  --radius-klein: 10px;
  --schatten-1: 0 1px 2px rgba(16,20,24,.06), 0 4px 12px rgba(16,20,24,.06);
  --schatten-2: 0 2px 4px rgba(16,20,24,.06), 0 12px 32px rgba(16,20,24,.12);
  --schatten-3: 0 4px 8px rgba(16,20,24,.08), 0 24px 56px rgba(16,20,24,.18);
  --schatten-glut: 0 8px 24px rgba(232,89,12,.35);
  --glas: rgba(255,255,255,.08);
  --glas-rand: rgba(255,255,255,.16);
  --weich: cubic-bezier(.2,.7,.2,1);
}

/* --- Header aus Glas --- */
.kopf { background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: rgba(28,33,37,.08); transition: box-shadow .3s var(--weich), background .3s; }
.kopf.gescrollt { background: rgba(255,255,255,.86); box-shadow: 0 6px 24px rgba(16,20,24,.08); }
.nav a { transition: background .2s, color .2s; }
.nav a[aria-current="page"] { box-shadow: none; position: relative; }
.nav a:not(.btn)[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--glut); }
@media (max-width: 960px) {
  .nav { background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--schatten-2); }
  .nav.offen { animation: menue-auf .25s var(--weich); }
  .nav a:not(.btn)[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Buttons mit Tiefe --- */
.btn { border-radius: 999px; transition: transform .2s var(--weich), box-shadow .2s var(--weich), background .2s, color .2s; }
.btn--glut { box-shadow: var(--schatten-glut); background: linear-gradient(135deg, #ff7a1f, var(--glut) 55%, #d24d06); }
.btn--glut:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,89,12,.45); background: linear-gradient(135deg, #ff8f3a, #f06512 55%, #d9530a); }
.btn--glut:active { transform: translateY(0); }
.btn--rahmen:hover, .btn--glas:hover { transform: translateY(-2px); }
.btn--glas { color: var(--weiss); background: var(--glas); border-color: var(--glas-rand); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glas:hover { background: rgba(255,255,255,.16); color: var(--weiss); }

/* --- Hero: Vollbild mit Ofenglut --- */
.hero--voll { overflow: hidden; isolation: isolate; min-height: min(88vh, 820px); display: flex; align-items: center; }
.hero--voll .hero__inner { grid-template-columns: 1.25fr .75fr; align-items: center; width: 100%; }
.hero__hintergrund { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 110%, #3a1a10 0%, #1c2125 55%), var(--graphit); }
.hero__hintergrund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; transform: scale(1.06); animation: ken-burns 24s ease-in-out infinite alternate; }
.hero__hintergrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,27,.92) 0%, rgba(20,24,27,.7) 45%, rgba(20,24,27,.25) 100%), linear-gradient(0deg, rgba(20,24,27,.6), transparent 40%); }
.glut { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; z-index: 1; }
.glut--1 { width: 46vw; height: 46vw; right: -12vw; bottom: -26vw; background: radial-gradient(circle, #ff7a1f 0%, #c2350a 45%, transparent 70%); animation: glimmen 7s ease-in-out infinite; }
.glut--2 { width: 26vw; height: 26vw; right: 22vw; bottom: -16vw; background: radial-gradient(circle, #ffb02e 0%, #e8590c 50%, transparent 72%); opacity: .35; animation: glimmen 9s ease-in-out -3s infinite; }
.funken { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 78% 92%, #ffb02e, transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 96%, #ff7a1f, transparent 60%),
    radial-gradient(2px 2px at 70% 98%, #ffd27a, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 94%, #ffb02e, transparent 60%),
    radial-gradient(1px 1px at 64% 97%, #ff7a1f, transparent 60%);
  animation: funkenflug 6s linear infinite; }
@keyframes glimmen { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.12) translateY(-2%); opacity: .7; } }
@keyframes ken-burns { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes funkenflug { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-55vh); opacity: 0; } }
.hero--voll h1 { max-width: 13ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }

/* Glaskarte */
.glaskarte { background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid var(--glas-rand); border-radius: 20px; padding: 10px 26px; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); color: #d5dbe0; }
.glaskarte__zeile { display: grid; grid-template-columns: 5.2rem 1fr; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .95rem; line-height: 1.4; }
.glaskarte .zahl { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--weiss); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.glaskarte__notdienst { display: flex; align-items: center; gap: 14px; padding: 18px 0 16px; color: var(--weiss); text-decoration: none; line-height: 1.35; }
.glaskarte__notdienst:hover { color: var(--glut-hell); }
.puls { position: relative; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: #3ddc84; flex: none; }
.puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84; animation: puls 2s ease-out infinite; }
@keyframes puls { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@media (max-width: 860px) {
  .hero--voll { min-height: 0; }
  .hero--voll .hero__inner { grid-template-columns: 1fr; }
  .hero__hintergrund::after { background: linear-gradient(180deg, rgba(20,24,27,.75), rgba(20,24,27,.92)); }
  .glut--1 { width: 120vw; height: 120vw; right: -50vw; bottom: -70vw; }
  .glut--2 { display: none; }
}

/* Auftritt beim Laden */
.auftritt { opacity: 0; transform: translateY(22px); animation: auftritt .9s var(--weich) forwards; animation-delay: calc(var(--i, 0) * .12s + .1s); }
@keyframes auftritt { to { opacity: 1; transform: none; } }

/* Unterseiten-Kopf mit Glut */
.seitenkopf:not(.seitenkopf--schlicht) { overflow: hidden; isolation: isolate; }
.seitenkopf:not(.seitenkopf--schlicht)::before { content: ""; position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -18vw; bottom: -42vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,31,.55), rgba(194,53,10,.25) 45%, transparent 70%); filter: blur(60px); animation: glimmen 8s ease-in-out infinite; }
.seitenkopf h1, .seitenkopf .lead, .seitenkopf .hero__aktionen { animation: auftritt .8s var(--weich) both; }
.seitenkopf .lead { animation-delay: .12s; }
.seitenkopf .hero__aktionen { animation-delay: .24s; }
.seitenkopf--schlicht { background: radial-gradient(80% 140% at 100% 0%, #fde6d6 0%, transparent 55%), var(--papier); }

/* --- Bilder & Karten --- */
.bild { border-radius: var(--radius); }
.bild img { transition: transform .8s var(--weich); }

.felder { border: 0; overflow: visible; gap: 24px; }
.feld { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-2); transition: transform .35s var(--weich), box-shadow .35s var(--weich); }
.feld + .feld { border: 0; }
.feld .bild { border-radius: 0; }
.feld:hover { transform: translateY(-6px); box-shadow: var(--schatten-3); }
.feld:hover .bild img { transform: scale(1.06); }
.feld__mehr::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .25s var(--weich); }
.feld:hover .feld__mehr::after { transform: translateX(5px); }

.raster { background: transparent; border: 0; gap: 18px; overflow: visible; border-radius: 0; }
.raster > * { border-radius: var(--radius); box-shadow: var(--schatten-1); border: 1px solid rgba(28,33,37,.06); transition: transform .3s var(--weich), box-shadow .3s var(--weich); position: relative; overflow: hidden; }
.raster > *::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--hitze); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--weich); }
.raster > *:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.raster > *:hover::before { transform: scaleX(1); }
.section--dunkel .raster { background: transparent; }
.section--dunkel .raster > * { background: var(--glas); border-color: var(--glas-rand); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Dunkle Sektionen bekommen ein leichtes Glühen */
.section--dunkel { position: relative; overflow: hidden; isolation: isolate; }
.section--dunkel::before { content: ""; position: absolute; z-index: -1; width: 70vw; height: 70vw; left: -25vw; top: -40vw; border-radius: 50%; background: radial-gradient(circle, rgba(232,89,12,.22), transparent 65%); filter: blur(40px); }

.aggregate li { transition: color .2s; }
.aggregate li:hover { color: var(--glut-hell); }

/* Ablauf */
.ablauf { border-top: 0; gap: 18px; }
.ablauf li { background: var(--weiss); border: 1px solid rgba(28,33,37,.07); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten-1); position: relative; transition: transform .3s var(--weich), box-shadow .3s var(--weich); }
.ablauf li:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.ablauf li::before { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ff7a1f, #d24d06); color: var(--weiss); box-shadow: var(--schatten-glut); font-size: .95rem; margin-bottom: 14px; }

/* Zertifikate als Glaskacheln */
.zert { border: 1px solid rgba(28,33,37,.07); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; background: var(--weiss); box-shadow: var(--schatten-1); transition: box-shadow .3s, transform .3s var(--weich); }
.zert:first-child { border-top: 1px solid rgba(28,33,37,.07); }
.zert:hover { transform: translateX(4px); box-shadow: var(--schatten-2); }
.zert__kuerzel { background: linear-gradient(135deg, var(--graphit), #4a2414); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Notdienst-Band mit wanderndem Glanz */
.notdienst { background: linear-gradient(110deg, #d24d06, #e8590c 30%, #ff8a2b 50%, #e8590c 70%, #d24d06); background-size: 250% 100%; animation: glanz 8s linear infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
@keyframes glanz { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Galerie + Lightbox */
.galerie { gap: 14px; }
.galerie a { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-1); transition: box-shadow .3s, transform .3s var(--weich); }
.galerie a:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); }
.galerie a:hover img { opacity: 1; transform: scale(1.08); }
.galerie .bild { border-radius: 0; }
.leuchtkasten { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vmin; background: rgba(14,17,19,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: einblenden .25s ease; }
.leuchtkasten img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: zoom-in .35s var(--weich); }
.leuchtkasten button { position: absolute; border: 1px solid var(--glas-rand); background: var(--glas); color: var(--weiss); width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.leuchtkasten .lk-zu { top: 20px; right: 20px; }
.leuchtkasten .lk-zurueck { left: 20px; top: 50%; transform: translateY(-50%); }
.leuchtkasten .lk-vor { right: 20px; top: 50%; transform: translateY(-50%); }
.leuchtkasten button:hover { background: rgba(255,255,255,.2); }
@keyframes einblenden { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }

/* Referenzen als Karten */
.kunden { border-top: 0; gap: 16px; }
.kunden li { border: 1px solid rgba(28,33,37,.07); border-radius: var(--radius); padding: 26px 24px; background: var(--weiss); box-shadow: var(--schatten-1); transition: transform .3s var(--weich), box-shadow .3s, color .2s; position: relative; overflow: hidden; }
.kunden li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--hitze); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--weich); }
.kunden li:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.kunden li:hover::after { transform: scaleX(1); }

/* Team */
.person { border-color: rgba(28,33,37,.07); box-shadow: var(--schatten-1); transition: transform .3s var(--weich), box-shadow .3s; }
.person:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.person__kuerzel { background: linear-gradient(135deg, #2f383e, var(--graphit)); box-shadow: inset 0 0 0 2px var(--glut), var(--schatten-1); }

.chips li { box-shadow: var(--schatten-1); transition: transform .2s var(--weich), box-shadow .2s; }
.chips li:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }

/* Formular */
.formular { background: var(--weiss); border: 1px solid rgba(28,33,37,.07); border-radius: 20px; padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--schatten-2); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea { border-radius: var(--radius-klein); transition: border-color .2s, box-shadow .2s; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--glut); box-shadow: 0 0 0 4px rgba(232,89,12,.18); }

/* Abschluss mit Glut */
.abschluss { overflow: hidden; isolation: isolate; }
.abschluss::after { content: ""; position: absolute; z-index: -1; width: 50vw; height: 50vw; right: -10vw; top: -20vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,31,.35), transparent 65%); filter: blur(50px); animation: glimmen 9s ease-in-out infinite; }

/* --- Einblenden beim Scrollen --- */
.js .zeigen { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--weich), transform .8s var(--weich); transition-delay: calc(var(--v, 0) * 70ms); }
.js .zeigen.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .auftritt, .js .zeigen { opacity: 1 !important; transform: none !important; }
  .glut, .funken, .hero__hintergrund img, .notdienst { animation: none !important; }
}