/* Das Nötigste, das der Rahmen selbst mitbringt — NICHT das Design der Seite.
   Wird als ERSTES geladen, damit der Entwurf jede dieser Regeln überschreiben kann.

   ⚠️ WARUM ES DIESE DATEI GIBT (Prüf-Gate 09.09.2026): Vorher benutzten das Grundgerüst,
   die 404-Seite und die drei Rechtsseiten Klassen wie `.skip`, `.wrap` und `.sec`, deren
   Regeln ausschließlich aus dem KUNDEN-Entwurf kamen. Der Entwurfs-Prompt schreibt diese
   Namen aber nirgends vor. Mit einem Entwurf, dessen Klassen anders heißen, baute alles
   fehlerfrei, alle Tests blieben grün — und auf jeder Seite stand oben links dauerhaft ein
   blauer Link „Zum Inhalt springen", der nur bei Tastaturbedienung erscheinen darf. */

/* Sprunglink für Tastaturbedienung: unsichtbar, bis er den Fokus bekommt. z-index ÜBER der festen Kopfzeile
   des Fundaments (50) — bei Gleichstand gewann die Kopfzeile, und der Link verschwand beim ersten Tab unter dem Logo. */
.skip { position: absolute; left: -999px; }
/* Der Fokusring liegt INNEN, schwarz auf der weißen Fläche: Der Sprunglink erscheint über jedem Hero, hell
   wie dunkel. Der Ring des Fundaments (außen, in der Akzentfarbe) kam auf dunklem Hero nur auf 2,7 : 1 —
   ein Ring innen hebt sich immer 21 : 1 ab, und die weiße Fläche selbst trägt den Kontrast zum Hintergrund.
   outline statt box-shadow: Den Kontrastmodus überlebt nur outline. */
.skip:focus { left: 1rem; top: 1rem; z-index: 60; padding: .75rem 1.25rem;
  background: #fff; color: #000; border-radius: .5rem; outline: 3px solid #000; outline-offset: -3px; }

/* Grundmaße, damit die Rahmen-Seiten auch ohne Entwurfs-CSS lesbar sind. */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.sec { padding: 4rem 0; }
img { max-width: 100%; height: auto; }
/* Seiten-Fundament v1 — die Grundlage der statischen Kundenseiten (Plan docs/PLAN-premium-astro-2026-09-15.md, P1).
   Hier steht nur, was für ALLE Entwürfe gilt: Standardwerte, Zustände, Mechanik, Barrierefreiheit.
   Das Aussehen einer Sektion schreibt der Entwurf selbst, unter der id der Sektion.
   Vertrag: packages/website-basis/musterkarte/MUSTERKARTE.md · Verhalten: src/scripts/fundament.js
   In einer Seite unter sites/ ist diese Datei eine Kopie der Vorlage — geändert wird nur die Vorlage.

   ⚠️ KEIN :root IN DIESER DATEI. Die Standardwerte stehen auf `html`: Der :root-Block des Entwurfs
   gewinnt damit immer (höhere Spezifität, egal in welcher Reihenfolge geladen), und die Page Factory
   liest beim Übersetzen und bei der Schrift-Erkennung nur :root-Blöcke. Stünde hier eine Schrift in
   :root, könnte sie die Schrift des Entwurfs überdecken.
   ⚠️ UNSICHTBAR NUR UNTER `.js`. Die Klasse setzt fundament.js erst, nachdem es geprüft hat, was schon
   im Bild ist. Läuft das Skript nicht, bleibt alles sichtbar. */

html {
  --max: 1320px;
  --rand: clamp(20px, 4vw, 56px);
  --luft: clamp(88px, 12vw, 168px);
  --blatt: clamp(28px, 4vw, 56px);
  --r-pille: 999px;
  --r-gross: 28px;
  --r-klein: 12px;
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inaus: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Abstand der festen Kopfzeile nach oben — 0, in der Vorschau wie auf der Kundenseite (seit 12.10.2026: die
     Core-Pille „Erstentwurf Website", für die die Vorschau 44 px freihielt, gibt es nicht mehr). */
  --kopf-oben: 0px;
  --kopf-hoehe: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
/* ⚠️ KEIN Versatz unter html[data-entwurf]. Bis 12.10.2026 hielt die Vorschau ab 768 px 44 px oben frei und nahm
   der Kopfzeile ihren 12-px-Rand, damit sie unter Cores schwebender Pille saß. Die Pille ist weg; Vorschau und
   Kundenseite sehen oben gleich aus (Lehre vorschau-versatz-kundencode: die Kundenseite darf nicht wissen, dass
   sie in einer Vorschau hängt). Schon gespeicherte Entwürfe tragen die alte Kopie: Core überschreibt sie beim
   Anzeigen (apps/core/src/lib/previewKlickschutz.ts, STREIFEN_WEG_STYLE). */
html.menue-offen { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--akzent); color: var(--auf-akzent); }

/* Überschriften bewusst maßvoll: große Schaugrößen gehören in die Sektion (#start h1 …). Sonst sprengt
   ein langes deutsches Wort die Rechtsseiten und jede schmale Spalte. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
/* Lange deutsche Wörter („Elektroinstallation") ragen bei 320 px sonst über den Rand. */
p, li { overflow-wrap: break-word; hyphens: auto; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--text-gedaempft); max-width: 46ch; }
.kicker { font: 500 0.78rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-tief); }
.akzent { color: var(--akzent-tief); }
.dunkel { background: var(--dunkel); color: var(--text-hell); }
.dunkel .lead { color: var(--text-hell-gedaempft); }
.dunkel .kicker, .dunkel .akzent { color: var(--akzent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Knöpfe: Pille, eine Aktionsfarbe je Grund (hell: die dunkle Fläche, dunkel: der Akzent). */
.knopf {
  --knopf-bg: var(--dunkel);
  --knopf-fg: var(--grund-2);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05em 1.6em;
  border-radius: var(--r-pille);
  border: 1px solid transparent;
  background: var(--knopf-bg);
  color: var(--knopf-fg);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  /* Umbrechen erlaubt: bei großer Browser-Schrift ragten Knöpfe am Handy bis zu 110 px aus dem Bild. */
  max-width: 100%;
  cursor: pointer;
  transition: transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.knopf [data-icon] { transition: transform 0.5s var(--ease-aus); }
.knopf:hover [data-icon] { transform: translateX(4px); }
.knopf:active { transform: scale(0.98); }
.knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text); border-color: var(--linie); }
.knopf--leise:hover { border-color: var(--text); }
.dunkel .knopf { --knopf-bg: var(--akzent); --knopf-fg: var(--auf-akzent); }
.dunkel .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }
.dunkel .knopf--leise:hover { border-color: var(--text-hell); }

/* Fokus: 3 px. Auf hellem Grund in der tiefen Akzentfarbe — die helle hätte dort zu wenig Kontrast. */
:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: var(--akzent); }
[tabindex="-1"]:focus { outline: none; }
/* Der Fokus darf nie hinter der festen Kopfzeile verschwinden (WCAG 2.2, 2.4.11): Rückwärts-Tab, Sprungmarken
   und scrollIntoView halten diesen Abstand zur Oberkante. Am Dokument als scroll-padding, nicht als
   scroll-margin an Sektionen — sonst doppelte sich der Abstand bei Sprungmarken, und Formularfelder blieben
   verdeckt (gemessen: bis zu acht verdeckte Ziele bei 400 % Zoom). */
html { scroll-padding-top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 12px); }

/* Blatt: die Sektion schiebt sich mit runder Oberkante über die vorige. */
.blatt { position: relative; z-index: 1; margin-top: calc(-1 * var(--blatt)); border-radius: var(--blatt) var(--blatt) 0 0; }

/* Icons: per Name eingesetzt (packages/website-basis/zusammenbau.mjs). */
[data-icon] { display: inline-grid; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
[data-icon] > svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* 1 · Kopfzeile + Handy-Menü ------------------------------------------------------------------ */
[data-kopf] { position: fixed; top: var(--kopf-oben); left: 0; right: 0; z-index: 50; }
[data-kopf] > :not([data-menue]) { position: relative; z-index: 1; }
[data-menue] {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow-y: auto;
  /* Das Menü scrollt in sich — ohne eigenen Abstand verschwand der Fokus beim Rückwärts-Tab hinter der Kopfzeile
     (gemessen: Handy quer und 400 % Zoom, 0 von 5 Messpunkten sichtbar). */
  scroll-padding-top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 12px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-aus), visibility 0s 0.45s;
}
.menue-offen [data-menue] { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-aus); }
/* OHNE SKRIPT — und zwar NUR, wenn Skripte wirklich aus sind.
   ⚠️ `@media (scripting: none)`, NICHT `html:not(.js)`. Das zweite gilt auch im Moment, BEVOR fundament.js
   geladen hat: Bei langsamem Netz stand die volle Navigation dann umgebrochen und 116 px hoch über der
   Überschrift, weil hier die Kopfzeile auf `absolute` und der Menü-Knopf auf unsichtbar ging (dritter
   Barrierefreiheits-Durchgang P1, im Prüfstand P2 mit verzögertem Skript nachgemessen, behoben 16.09.2026).
   `scripting` weiß vom ersten Byte an, ob der Browser Skripte ausführt — es gibt keinen Zwischenzustand.

   Ohne Skript kann der Knopf nichts öffnen: dann weder Knopf noch Menü, die Navigation bleibt sichtbar. Die
   Kopfzeile wird nie deckend — sie steht im Fluss auf dunklem Grund, statt unlesbar über hellen Sektionen zu
   schweben oder bei 400 % Zoom ein Drittel des Bildschirms zu fressen. Das stehende Laufband bricht um, damit
   jeder Eintrag sichtbar bleibt (sonst am Handy 1 von 6).

   Browser ohne `scripting` (vor Chrome 120, Safari 17, Firefox 113) werten keine der beiden Regeln aus: Sie
   zeigen die Navigation und keinen Menü-Knopf — sieht am Handy nicht schön aus, bleibt aber bedienbar. */
@media (scripting: none) {
  [data-burger], [data-menue] { display: none !important; }
  [data-kopf] { position: relative !important; background: var(--dunkel); }
  [data-laufband] > ul { flex-wrap: wrap !important; }
  [data-laufband] > ul > li { white-space: normal !important; }
}
@media (max-height: 30em) {
  [data-kopf] { position: absolute; }
}
/* Solange das Menü offen ist, bleibt der Schließen-Knopf im Bild — sonst sperrte ein quer gedrehtes Handy die Seite
   hinter einem Menü, dessen Knopf mit der Kopfzeile nach oben aus dem Bild gescrollt ist. */
.menue-offen [data-kopf] { position: fixed; }

/* 2 · Hero: Einstieg als reine CSS-Zeitanimation — hängt an keinem Skript und nie am Einblenden. */
/* Polster oben wie unten: sonst schneidet overflow:clip die Punkte großer Umlaute ab. */
.zeile { display: block; overflow: clip; padding-block: 0.12em 0.07em; margin-block: -0.12em -0.07em; }
.zeile > span { display: inline-block; animation: fundament-zeile 1.15s var(--ease-aus) both; }
.zeile + .zeile > span { animation-delay: 0.12s; }
.einstieg { animation: fundament-auf 1s var(--ease-aus) both; animation-delay: calc(var(--d, 0) * 0.1s + 0.1s); }
.einstieg-bild { animation: fundament-vorhang 1.5s var(--ease-aus) 0.2s both; }
@keyframes fundament-zeile { from { transform: translateY(108%); } }
@keyframes fundament-auf { from { opacity: 0; transform: translateY(22px); } }
@keyframes fundament-vorhang {
  from { clip-path: inset(100% 0 0 0 round var(--r-gross)); }
  to { clip-path: inset(0 0 0 0 round var(--r-gross)); }
}

/* Einblenden beim Scrollen (data-reveal) ---------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.9s var(--ease-aus), transform 1.1s var(--ease-aus);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(18% 8% 18% 8% round var(--r-gross));
  transition: clip-path 1.4s var(--ease-aus);
}
/* :focus-within — wer per Tab ankommt, bevor das Element eingeblendet ist, soll nicht auf Unsichtbares fokussieren. */
.js [data-reveal].ist-da,
.js [data-reveal]:focus-within { opacity: 1; transform: none; }
/* Maske nur für Bilder: auf Text schnitte die Rundung Buchstaben an den Ecken ab. Sie endet 16 px AUSSERHALB des
   Elements: bei inset(0) schnitt sie den Fokusring des Vorher/Nachher-Reglers weg (gemessen: kein Pixel Ring). */
.js [data-reveal="clip"].ist-da,
.js [data-reveal="clip"]:focus-within { clip-path: inset(-16px round var(--r-gross)); }
/* Beim Fokus ohne Überblendung: sonst stand der Fokusring fast eine Sekunde auf halb durchsichtigem Inhalt
   (gemessen beim Tab durch den Musterkunden: Deckkraft 0 im Moment des Fokus). */
.js [data-reveal]:focus-within { transition: none; }

/* 3 · Laufband: fundament.js legt die Spur an und klont die Reihe. -------------------------------- */
/* Nur waagerecht abschneiden: senkrecht muss der Pause-Knopf samt Fokusring über ein flaches Band hinausragen
   dürfen (gemessen am Handy: Band 27 px hoch, Knopf 44 px — mit overflow: clip war er halb weg). */
[data-laufband] { position: relative; overflow-x: clip; }
[data-laufband-spur] { display: flex; width: max-content; }
.js [data-laufband-spur] { animation: fundament-laufband var(--laufband-dauer, 42s) linear infinite; }
[data-laufband]:hover [data-laufband-spur],
[data-laufband]:focus-within [data-laufband-spur],
html.bewegung-aus [data-laufband-spur] { animation-play-state: paused; }
@keyframes fundament-laufband { to { transform: translate3d(-50%, 0, 0); } }
/* Der Knopf „Bewegung anhalten" (WCAG 2.2.2): Hover hält nur für Maus-Nutzer an, wer mit Tastatur oder Finger
   kommt, braucht einen Knopf. fundament.js legt ihn an; er hält alle endlosen Animationen der Seite an. */
[data-bewegung-knopf] {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
}
.dunkel [data-bewegung-knopf] { border-color: var(--linie-dunkel); background: var(--dunkel); color: var(--text-hell); }
/* Zwei Balken bzw. ein Dreieck aus Rahmen in currentColor — bleibt auch im Kontrastmodus sichtbar. */
[data-bewegung-knopf]::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
[data-bewegung-knopf][aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 12px solid currentColor; border-block: 8px solid transparent; }

/* 4 · Leitgedanke: Wort für Wort hell, während der Satz durchs Bild scrollt. Ohne Unterstützung bleibt
   er einfach stehen. ⚠️ cssMinify:false in astro.config.mjs ist Pflicht: der Minifier faltet
   animation-timeline in die animation-Kurzform, dort ist es ungültig — die Zeile fällt still weg. */
/* Die Startfarbe ist eine Text-Rolle, deren Kontrast der Vertrag garantiert (≥ 4,5:1). Mit 18 % der Textfarbe lagen
   gemessen 7 bis 9 von 22 Wörtern bei 1,44:1 — genau die Kernaussage. Der Bereich endet früh: steht der Satz
   mittig im Bild, ist er ausgefärbt. */
[data-aussage] { view-timeline: --fundament-aussage block; --aussage-start: var(--text-gedaempft); }
.dunkel [data-aussage],
[data-aussage].dunkel { --aussage-start: var(--text-hell-gedaempft); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-aussage-bereit] [data-wort] {
      animation-name: fundament-aufhellen;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --fundament-aussage;
      animation-range: cover calc(10% + var(--n, 0) * 30%) cover calc(15% + var(--n, 0) * 30%);
    }
  }
}
@keyframes fundament-aufhellen { from { color: var(--aussage-start); } }

/* 5 · Lichtkegel (nur mit Maus, siehe fundament.js). Das ::before einer Licht-Kachel gehört dem Fundament. */
[data-licht] { position: relative; isolation: isolate; }
[data-licht] > * { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-licht]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.45s var(--ease-aus);
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--akzent) 22%, transparent), transparent 62%);
  }
  [data-licht]:hover::before { opacity: 1; }
}

/* 6 · Sticky-Ablauf ------------------------------------------------------------------------------ */
/* Abgedunkelt nur mit laufendem Skript, sonst bliebe Text dauerhaft kontrastarm. Nur auf 72 %: auch ein
   inaktiver Schritt ist lesbarer Text und braucht 4,5:1. Die übliche Abdunkelung auf 30–40 % fiel mit 2,3:1
   durch.
   🔴 HIER STAND BIS ZUM 16.09.2026 „das hält, wenn --text-hell-gedaempft auf --dunkel mindestens 7:1 hat
   (Vertrag)". Das ist nachgerechnet FALSCH (barrierefreiheit-reviewer): 7,05:1 ergeben nach dem Abdunkeln
   4,22:1, nicht 4,5. Nötig wären ~7,6:1. Und die opacity liegt auf dem ganzen Schritt, trifft also auch die
   Schrittnummer (--akzent, 0,8rem, also kleiner Text, Schwelle 4,5) — dort hilft KEINE Vertragszahl, weil
   jede Abdunkelung unter 100 % einen 4,5:1-Text unter 4,5 drückt. Der Musterkunde besteht (4,70 bzw. 5,60),
   es ist nichts kaputt. Sauber wird es erst, wenn der Text gar nicht mehr abgedunkelt wird (der inaktive
   Zustand liesse sich über den Fortschrittsbalken und .ist-aktiv zeigen) oder inaktive Schritte eine eigene,
   geprüfte Farbe bekommen statt der Deckkraft. Entscheidung Maximilian, offener Punkt im Ticket
   „Kontrast-Pruefung beim Erzeugen" (docs/WEGWEISER-astro-erste-kundenseite.md). */
.js [data-schritt] { opacity: 0.72; transition: opacity 0.6s var(--ease-aus); }
.js [data-schritt].ist-aktiv { opacity: 1; }
[data-schritt-bild] { transition: opacity 0.9s var(--ease-aus), transform 1.6s var(--ease-aus); }
/* Versteckt wird erst unter .ist-bereit: fundament.js setzt es nur, wenn zu jedem Schritt ein Bild gleichen Namens da
   ist. Passen die Namen nicht, bleiben die Bilder sichtbar, statt allesamt zu verschwinden. */
.js [data-ablauf].ist-bereit [data-schritt-bild]:not(.ist-aktiv) { opacity: 0; transform: scale(1.06); }
[data-fortschritt] { position: relative; overflow: hidden; }
[data-fortschritt]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent);
  transform-origin: left;
  transform: scaleX(var(--anteil, 0));
  transition: transform 0.8s var(--ease-aus);
}

/* 7 · Vorher/Nachher-Regler ------------------------------------------------------------------------ */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
/* aspect-ratio als Rückfall: alle Kinder liegen absolut — ohne Höhe wäre der Regler unsichtbar. */
[data-vergleich] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; user-select: none; touch-action: pan-y; }
[data-vergleich] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* z-index: die Reihenfolge der beiden Bilder im Markup ist egal — sonst deckte ein später stehendes Nachher-Bild das
   Vorher-Bild zu, und der Regler bewegte nur noch den Griff. */
[data-vergleich-vor] { z-index: 1; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
[data-vergleich] > input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
[data-vergleich]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 24px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
[data-vergleich]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M22 20l-8 8 8 8M34 20l8 8-8 8' fill='none' stroke='%2311181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
[data-vergleich]:has(> input:focus-visible) { outline: 3px solid var(--akzent-tief); outline-offset: 4px; }
[data-vergleich].zeigt-hinweis { animation: fundament-hinweis 2.1s var(--ease-inaus); }
@keyframes fundament-hinweis {
  0% { --pos: 50%; }
  35% { --pos: 74%; }
  72% { --pos: 28%; }
  100% { --pos: 50%; }
}

/* 8 · Fragen: native Liste mit name="…" — es ist immer nur eine offen. --------------------------- */
details[name] > summary { list-style: none; cursor: pointer; }
details[name] > summary::-webkit-details-marker { display: none; }
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  details[name]::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-aus), content-visibility 0.5s allow-discrete; }
  details[name][open]::details-content { height: auto; }
}

/* 10 · Anfrage: In der Vorschau ist die Bestätigung eine leere, schon vorhandene Live-Region, die das Fundament
   beim Senden füllt — eine Region, die erst beim Einblenden entsteht, sagen Vorlesegeräte nicht zuverlässig an.
   Leer ist sie unsichtbar, bleibt aber im Zugänglichkeitsbaum. !important, weil das Blatt die Bestätigung unter
   seiner id gestaltet und damit gewinnt: unsichtbar blieb sie nur, solange es zufällig keine position setzt. */
[data-anfrage-ok]:empty {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}

/* 9 · Magnet-Knopf: die Verschiebung setzt fundament.js, nur mit Maus. ---------------------------- */
[data-magnet] {
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition: translate 0.35s var(--ease-aus), transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Bewegung reduziert: alles steht sofort da, nichts läuft endlos. --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  /* Steht das Band, bricht die Reihe um — sonst blieben die meisten Einträge nie sichtbar (gemessen am Handy: 1 von 6).
     Den Klon braucht dann niemand. !important, weil das Blatt die Liste unter seiner id als flex setzt. */
  [data-laufband-spur] { animation: none !important; width: auto; }
  [data-laufband] > ul,
  [data-laufband-spur] > ul { flex-wrap: wrap !important; }
  /* Auch der einzelne Eintrag darf umbrechen: bei großer Browser-Schrift wurde „Prüfung nach DGUV V3" sonst zu 34 %
     abgeschnitten (Blatt: white-space: nowrap, Band: overflow-x: clip). */
  [data-laufband] > ul > li,
  [data-laufband-spur] > ul > li { white-space: normal !important; }
  [data-laufband-spur] > [aria-hidden="true"] { display: none !important; }
  /* Hier bewegt sich nichts endlos — ein Knopf „Bewegung anhalten" wäre nur Rauschen fürs Vorlesegerät. */
  [data-bewegung-knopf] { display: none; }
  [data-magnet] { translate: none; }
}
/* Selbst gehostete Hausschriften — kein Aufruf bei Google. Der Lizenztext liegt als
   LICENSE-*.txt daneben (die Open Font License verlangt ihn bei jeder Weitergabe).
   Erzeugt von der Page Factory. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/schriften/archivo.woff2") format("woff2-variations")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:100 900;font-display:swap;src:url("/schriften/source-sans-3.woff2") format("woff2-variations")}
/* Farb- und Schrift-Tokens aus dem Entwurf (:root-Bloecke). Erzeugt von der Page Factory —
   Änderungen hier gehen beim nächsten Lauf verloren. */
:root {
  --grund: #ebe9e5;
  --grund-2: #f7f6f3;
  --dunkel: #14181e;
  --dunkel-2: #1f262f;
  --text: #14181e;
  --text-gedaempft: #4a525c;
  --text-hell: #f2f1ee;
  --text-hell-gedaempft: #b9bec6;
  --akzent: #f2453a;
  --akzent-tief: #c4180f;
  --auf-akzent: #14181e;
  --linie: rgb(20 24 30 / 0.16);
  --linie-dunkel: rgb(242 241 238 / 0.16);
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --r-pille: 2px;
  --r-gross: 2px;
  --r-klein: 0px;
  --blatt: 0px;
  --rot: #d81d14;
  --rot-tief: #b8170f;
}
/* Stylesheet des Entwurfs, unveraendert und global (kein Astro-Scoping). Reihenfolge wie im
   Entwurf — bei gleicher Spezifitaet gewinnt die spaetere Regel. Erzeugt von der Page Factory. */
#kopf .leiste {
      width: min(100% - 24px, 1380px);
      margin: 12px auto 0;
      display: flex;
      align-items: center;
      gap: clamp(10px, 2vw, 28px);
      padding: 8px 8px 8px 16px;
      border-radius: var(--r-pille);
      border: 1px solid var(--linie-dunkel);
      background: rgb(242 241 238 / 0.07);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: var(--text-hell);
      transition: background-color 0.5s var(--ease-aus), border-color 0.5s var(--ease-aus), box-shadow 0.5s var(--ease-aus);
    }

@media (min-width: 768px) {
      html[data-entwurf] #kopf .leiste { margin-top: 4px; }
    }

#kopf.ist-fest .leiste,
    .menue-offen #kopf .leiste,
    html:not(.js):not(:has([data-kopf-marke])) #kopf .leiste {
      background: rgb(20 24 30 / 0.94);
      border-color: var(--linie-dunkel);
      box-shadow: 0 10px 26px -16px rgb(0 0 0 / 0.65);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

#kopf .marke { display: flex; align-items: center; color: inherit; text-decoration: none; }

#kopf .marke img { height: 72px; width: auto; }

#kopf .nav { margin-left: auto; }

#kopf .nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

#kopf .nav a { display: block; padding: 12px 14px; color: var(--text-hell-gedaempft); text-decoration: none; font: 600 0.8rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.3s; }

#kopf .nav a:hover { color: var(--text-hell); }

#kopf .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; padding: 0.85em 1.25em; font-weight: 700; }

#kopf .knopf:hover { --knopf-bg: var(--rot-tief); }

#kopf :focus-visible { outline-color: var(--akzent); }

#kopf [data-burger] { display: none; width: 48px; height: 48px; border-radius: var(--r-pille); border: 1px solid var(--linie-dunkel); background: transparent; color: var(--text-hell); cursor: pointer; place-content: center; gap: 6px; }

#kopf [data-burger] i { display: block; width: 20px; height: 0; border-top: 1.5px solid currentColor; transition: transform 0.45s var(--ease-aus); }

#kopf [data-burger][aria-expanded="true"] i:first-of-type { transform: translateY(3.75px) rotate(45deg); }

#kopf [data-burger][aria-expanded="true"] i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }

#kopf [data-menue] { padding: calc(var(--kopf-oben) + var(--kopf-hoehe) + 24px) var(--rand) 40px; background: var(--dunkel); color: var(--text-hell); }

#kopf [data-menue] ul { list-style: none; margin: 0 0 32px; padding: 0; }

#kopf [data-menue] li { border-bottom: 1px solid var(--linie-dunkel); }

#kopf [data-menue] li a { display: block; padding: 16px 0; color: inherit; text-decoration: none; font: 800 clamp(1.8rem, 7vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -0.02em; }

#kopf [data-menue] .knopf { display: flex; justify-content: center; margin-top: 12px; padding: 1.15em 1.4em; }

#kopf [data-menue] .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }

@media (max-width: 70em) and (scripting: enabled) {
      #kopf .nav { display: none; }
      #kopf [data-burger] { display: grid; }
      #kopf .leiste > .knopf { margin-left: auto; }
    }

@media (max-width: 640px) {
      #kopf .marke img { height: 54px; }
      #kopf .leiste > .knopf { width: 48px; height: 48px; padding: 0; justify-content: center; }
      #kopf .leiste > .knopf .zahl { display: none; }
    }

@media (scripting: none) {
      #kopf .leiste,
      #kopf .nav ul { flex-wrap: wrap; }
    }

#start {
      position: relative;
      isolation: isolate;
      overflow: clip;
      min-height: min(100dvh, 960px);
      display: grid;
      align-items: center;
      padding-block: calc(var(--kopf-oben) + var(--kopf-hoehe) + clamp(20px, 3.4vw, 48px)) clamp(56px, 7vw, 96px);
      background-color: var(--dunkel);
      background-image: radial-gradient(70% 60% at 0% 100%, var(--dunkel-2) 0%, transparent 70%);
    }

#start [data-kopf-marke] { position: absolute; top: 90px; left: 0; width: 1px; height: 1px; }

#start .wrap { position: relative; z-index: 2; }

#start .text { max-width: min(660px, calc(100vw - min(44vw, 760px) - 3 * var(--rand))); }

#start .kicker { display: flex; align-items: center; gap: 0.8em; }

#start .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#start h1 .zeile > span { overflow-wrap: anywhere; }

#start h1 { margin-top: 22px; font-weight: 800; font-size: clamp(2.5rem, 0.9rem + 3.9vw, 4.9rem); line-height: 0.98; letter-spacing: -0.035em; }

#start .lead { margin-top: 26px; max-width: 30em; font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem); }

#start .aktionen { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

#start .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; }

#start .knopf:hover { --knopf-bg: var(--rot-tief); }

#start .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }

#start .knopf--leise:hover { --knopf-bg: transparent; border-color: var(--text-hell); }

#start .punkte { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text-hell-gedaempft); }

#start .punkte li { display: flex; align-items: center; gap: 12px; }

#start .punkte [data-icon] { color: var(--akzent); }

#start .bild { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(44vw, 760px); margin: 0; background: var(--dunkel); }

#start .bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

#start .bild { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.5) 22%, #000 56%); mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.5) 22%, #000 56%); }

#start .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 24 30 / 0.75) 0%, transparent 32%); }

#start .ring {
      position: absolute;
      z-index: 1;
      width: min(58vw, 860px);
      aspect-ratio: 1;
      right: calc(min(44vw, 760px) / 2 - min(58vw, 860px) / 2);
      top: 58%;
      translate: 0 -50%;
      border-radius: 50%;
      color: rgb(242 241 238 / 0.13);
      background: repeating-conic-gradient(from 0deg, currentColor 0 3.9deg, transparent 3.9deg 6deg);
      -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 90.4%);
      mask: radial-gradient(closest-side, transparent 90%, #000 90.4%);
      pointer-events: none;
    }

#start .bild { isolation: isolate; }

#start .bild img { position: absolute; inset: 0; }

#start .bild img.wechsel { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
      #start .bild img { animation: start-wechsel 36s infinite both; }
      #start .bild img:nth-of-type(2) { animation-delay: 6s; }
      #start .bild img:nth-of-type(3) { animation-delay: 12s; }
      #start .bild img:nth-of-type(4) { animation-delay: 18s; }
      #start .bild img:nth-of-type(5) { animation-delay: 24s; }
      #start .bild img:nth-of-type(6) { animation-delay: 30s; }
      @keyframes start-wechsel { 0% { opacity: 0; } 3% { opacity: 1; } 16.7% { opacity: 1; } 19.7% { opacity: 0; } 100% { opacity: 0; } }
      #start .bild img:first-of-type { animation-name: start-wechsel-erst; animation-delay: 0s; }
      @keyframes start-wechsel-erst { 0% { opacity: 1; } 16.7% { opacity: 1; } 19.7% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } }
    }

#start .siegel { position: absolute; z-index: 3; right: calc(min(44vw, 760px) - 96px); bottom: clamp(48px, 6vw, 88px); width: 208px; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 18px; text-align: center; border-radius: 50%; background: var(--rot-tief); color: #fff; rotate: -7deg; box-shadow: 0 22px 44px -18px rgb(0 0 0 / 0.7); }

#start .siegel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / 0.6); pointer-events: none; }

#start .siegel b { font: 800 3.5rem/0.9 var(--font-display); letter-spacing: 0; }

#start .siegel .jahre { font: 700 0.8rem/1.1 var(--font-display); letter-spacing: 0.12em; margin-right: -0.12em; text-transform: uppercase; }

#start .siegel i { width: 0.5rem; height: 0.5rem; margin-block: 5px; background: #fff; rotate: 45deg; }

#start .siegel .zeile2 { font: 700 0.9rem/1.2 var(--font-display); }

@media (max-width: 900px) {
      #start .siegel { right: var(--rand); bottom: 28px; width: 176px; padding: 14px; }
      #start .siegel b { font-size: 2.9rem; }
      #start .siegel .jahre { font-size: 0.74rem; }
      #start .siegel .zeile2 { font-size: 0.82rem; }
    }

@keyframes start-ring { to { rotate: 45deg; } }

@supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        #start .ring { animation: start-ring linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
      }
    }

@media (max-width: 900px) {
      #start { display: block; padding-bottom: 0; }
      #start .text { max-width: none; padding-bottom: 8px; }
      #start .bild { position: relative; width: 100%; margin-top: 40px; aspect-ratio: 4 / 5; max-height: 72vh; }
      #start .bild { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
      #start .bild::after { display: none; }
      #start .ring { width: 120vw; right: -62vw; top: 24%; color: rgb(242 241 238 / 0.07); }
    }

@media (min-width: 60em) {
      #start .lead { hyphens: manual; }
    }

#schwerpunkte { border-top: 1px solid var(--linie-dunkel); padding-block: clamp(22px, 2.8vw, 36px); }

#schwerpunkte ul { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 52px); margin: 0; padding: 0 clamp(12px, 1.7vw, 26px); list-style: none; }

#schwerpunkte li { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 52px); font: 800 clamp(1.5rem, 1rem + 2vw, 2.7rem)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }

#schwerpunkte li:nth-child(even) { color: var(--text-hell-gedaempft); }

#schwerpunkte li::after { content: ""; width: 0.3em; height: 0.3em; background: var(--akzent); rotate: 45deg; flex: none; }

#haltung { position: relative; padding-block: var(--luft) clamp(64px, 8vw, 110px); background: var(--grund); }

#haltung .kicker { display: flex; align-items: center; gap: 0.8em; margin-bottom: 28px; }

#haltung .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#haltung [data-aussage] { max-width: 26ch; font: 800 clamp(1.9rem, 1rem + 3.5vw, 4.3rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--text); }

#haltung .fakten { margin: clamp(56px, 7vw, 104px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--text); }

#haltung .fakten > div { padding: 22px clamp(14px, 2vw, 32px) 4px 0; }

#haltung .fakten > div + div { padding-left: clamp(14px, 2vw, 32px); border-left: 1px solid var(--linie); }

#haltung dt { font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-gedaempft); overflow-wrap: anywhere; }

#haltung .zahl { display: block; margin-top: 14px; font: 800 clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; color: var(--text); }

#haltung .zahl small { font-size: 0.42em; letter-spacing: -0.01em; color: var(--akzent-tief); }

#haltung dd { margin: 0; }

#haltung [data-aussage] { hyphens: manual; }

#haltung dd p { margin-top: 10px; max-width: 28ch; font-size: 0.98rem; line-height: 1.45; color: var(--text-gedaempft); }

@media (max-width: 900px) {
      #haltung .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #haltung .fakten > div { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--linie); }
      #haltung .fakten > div:nth-child(odd) { padding-left: 0; border-left: 0; }
      #haltung .fakten > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linie); }
    }

@media (max-width: 24em) {
      #haltung .fakten { grid-template-columns: minmax(0, 1fr); }
      #haltung .fakten > div, #haltung .fakten > div:nth-child(even) { padding-left: 0; border-left: 0; }
    }

@media (min-width: 60em) {
      #haltung dd p { hyphens: manual; }
    }

#leistungen { position: relative; padding-block: 0 var(--luft); background: var(--grund); }

#leistungen .kicker { display: flex; align-items: center; gap: 0.8em; }

#leistungen .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#leistungen .kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#leistungen h2 { margin-top: 16px; max-width: 16ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#leistungen .lead { max-width: 36ch; }

#leistungen .bento { margin-top: clamp(36px, 5vw, 72px); display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: repeat(12, minmax(0, 1fr)); }

#leistungen .k-abbruch { grid-column: 1 / span 7; }

#leistungen .k-saegen { grid-column: 8 / span 5; }

#leistungen .k-bohren { grid-column: 1 / span 4; }

#leistungen .k-rueckbau { grid-column: 5 / span 4; }

#leistungen .k-entkernung { grid-column: 9 / span 4; }

#leistungen .k-demontage { grid-column: 1 / span 6; }

#leistungen .k-entruempelung { grid-column: 7 / span 6; }

#leistungen .k-weitere { grid-column: 1 / -1; }

#leistungen .kachel { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 420px; padding: clamp(22px, 2.4vw, 36px); border-radius: var(--r-gross); background: var(--grund-2); border: 1px solid var(--linie); }

#leistungen .kachel .nr { display: inline-block; margin-bottom: 14px; padding: 7px 10px 6px; background: var(--dunkel); font: 700 0.78rem/1 var(--font-display); letter-spacing: 0.16em; color: var(--akzent); }

#leistungen .kachel h3 { font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem); letter-spacing: -0.03em; }

#leistungen .kachel p { margin-top: 10px; max-width: 42ch; }

#leistungen .kachel--bild { border: 0; background: var(--dunkel); color: var(--text-hell); }

#leistungen .kachel--bild img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-aus); }

#leistungen .kachel--bild:hover img { transform: scale(1.05); }

#leistungen .kachel--bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 24 30 / 0) 6%, rgb(20 24 30 / 0.6) 36%, rgb(20 24 30 / 0.94) 66%); }

#leistungen .kachel--bild p { color: rgb(242 241 238 / 0.9); }

#leistungen .k-abbruch img { object-position: 50% 62%; }

#leistungen .k-saegen img { object-position: 46% 62%; }

#leistungen .k-rueckbau img { object-position: 50% 55%; }

#leistungen .k-entkernung img { object-position: 50% 12%; }

#leistungen .k-bohren img { object-position: 50% 4%; }

#leistungen .kachel--bild :focus-visible { outline-color: var(--akzent); }

#leistungen .k-demontage, #leistungen .k-entruempelung { min-height: 300px; justify-content: space-between; }

#leistungen .kachel .gross { font-size: 2.6rem; color: var(--akzent-tief); }

#leistungen .mehr { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 8px; font-weight: 700; font-size: 0.95rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; }

#leistungen .k-weitere { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0; padding: 0; background: transparent; border: 0; border-top: 1px solid var(--text); border-radius: 0; }

#leistungen .weitere { flex: 1 1 200px; display: grid; gap: 8px; align-content: start; padding: 24px clamp(14px, 1.8vw, 28px) 8px 0; }

#leistungen .weitere + .weitere { padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--linie); }

#leistungen .weitere [data-icon] { font-size: 1.7rem; color: var(--akzent-tief); }

#leistungen .weitere h3 { margin-top: 6px; font-size: 1.2rem; font-weight: 800; }

#leistungen .weitere p { margin: 0; font-size: 0.98rem; color: var(--text-gedaempft); }

#leistungen .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; }

#leistungen .knopf:hover { --knopf-bg: var(--rot-tief); }

#leistungen .cta :focus-visible { outline-color: var(--akzent); }

#leistungen .cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 36px); background: var(--dunkel); color: var(--text-hell); border-radius: var(--r-gross); }

#leistungen .cta p { font: 800 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.15 var(--font-display); letter-spacing: -0.02em; max-width: 28ch; }

#leistungen .cta .aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

#leistungen .cta .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }

#leistungen .cta .knopf--leise:hover { --knopf-bg: transparent; border-color: var(--text-hell); }

@media (max-width: 1023px) {
      #leistungen .kopf { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
      #leistungen .k-abbruch, #leistungen .k-saegen { grid-column: span 6; }
      #leistungen .k-bohren, #leistungen .k-rueckbau { grid-column: span 6; }
      #leistungen .k-entkernung { grid-column: 1 / -1; min-height: 360px; }
      #leistungen .k-demontage, #leistungen .k-entruempelung { grid-column: span 6; }
      #leistungen .weitere { flex-basis: 40%; padding-bottom: 20px; }
      #leistungen .weitere:nth-child(3) { padding-left: 0; border-left: 0; }
    }

@media (max-width: 640px) {
      #leistungen .bento { grid-template-columns: minmax(0, 1fr); }
      #leistungen .k-abbruch, #leistungen .k-saegen, #leistungen .k-bohren, #leistungen .k-rueckbau, #leistungen .k-entkernung, #leistungen .k-demontage, #leistungen .k-entruempelung, #leistungen .k-weitere { grid-column: 1; }
      #leistungen .kachel { min-height: 380px; }
      #leistungen .k-demontage, #leistungen .k-entruempelung { min-height: 260px; }
      #leistungen .weitere { flex-basis: 100%; padding-left: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--linie); }
    }

@media (min-width: 60em) {
      #leistungen .lead { hyphens: manual; }
    }

#kernbohrung { position: relative; isolation: isolate; overflow: clip; padding-block: var(--luft); background: var(--dunkel); }

#kernbohrung .kicker { display: flex; align-items: center; gap: 0.8em; }

#kernbohrung .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#kernbohrung .raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }

#kernbohrung h2 { margin-top: 16px; max-width: 15ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.4vw, 4rem); line-height: 1; letter-spacing: -0.03em; }

#kernbohrung .lead { margin-top: 24px; max-width: 40ch; }

#kernbohrung .daten { margin: clamp(32px, 4vw, 52px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-dunkel); }

#kernbohrung .daten > div { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--linie-dunkel); }

#kernbohrung .daten > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linie-dunkel); }

#kernbohrung dt { font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); }

#kernbohrung dd { margin: 8px 0 0; font-size: 1.06rem; line-height: 1.45; color: var(--text-hell); }

#kernbohrung .aktionen { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 12px; }

#kernbohrung .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; }

#kernbohrung .knopf:hover { --knopf-bg: var(--rot-tief); }

#kernbohrung .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }

#kernbohrung .knopf--leise:hover { --knopf-bg: transparent; border-color: var(--text-hell); }

#kernbohrung .krone { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }

#kernbohrung .krone .ring { position: absolute; inset: 0; border-radius: 50%; color: var(--text-hell); background: repeating-conic-gradient(from 0deg, currentColor 0 3.9deg, transparent 3.9deg 6deg); -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 88.4%); mask: radial-gradient(closest-side, transparent 88%, #000 88.4%); opacity: 0.92; }

#kernbohrung .krone .kern { position: absolute; inset: 9.5%; margin: 0; border-radius: 50%; overflow: hidden; background: var(--dunkel-2); }

#kernbohrung .krone .kern img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

#kernbohrung .krone .marke { position: absolute; z-index: 1; width: 3px; height: 34px; background: var(--akzent); }

#kernbohrung .krone .m-o { left: calc(50% - 1.5px); top: -22px; }

#kernbohrung .krone .m-u { left: calc(50% - 1.5px); bottom: -22px; }

#kernbohrung .krone .m-l { left: -22px; top: calc(50% - 17px); width: 34px; height: 3px; }

#kernbohrung .krone .m-r { right: -22px; top: calc(50% - 1.5px); width: 34px; height: 3px; }

#kernbohrung .krone figcaption { position: absolute; left: 50%; bottom: -54px; translate: -50% 0; width: max-content; max-width: 100%; font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-hell-gedaempft); text-align: center; }

@keyframes kernbohrung-dreh { from { rotate: -40deg; } to { rotate: 40deg; } }

@supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        #kernbohrung .krone .ring { animation: kernbohrung-dreh linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      }
    }

@media (max-width: 900px) {
      #kernbohrung .raster { grid-template-columns: minmax(0, 1fr); }
      #kernbohrung .krone { width: min(88%, 440px); margin-bottom: 40px; }
      #kernbohrung .krone figcaption { bottom: -46px; }
    }

@media (max-width: 520px) {
      #kernbohrung .daten { grid-template-columns: minmax(0, 1fr); }
      #kernbohrung .daten > div:nth-child(even) { padding-left: 0; border-left: 0; }
    }

@media (min-width: 60em) {
      #kernbohrung .lead { hyphens: manual; }
    }

#referenzen { position: relative; padding-block: var(--luft); background: var(--grund-2); }

#referenzen .kicker { display: flex; align-items: center; gap: 0.8em; }

#referenzen .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#referenzen .kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#referenzen h2 { margin-top: 16px; max-width: 14ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#referenzen .lead { max-width: 36ch; }

#referenzen .galerie { margin-top: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: start; }

#referenzen figure { margin: 0; }

#referenzen figure:nth-child(even) { margin-top: clamp(24px, 4vw, 64px); }

#referenzen .rahmen { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--dunkel-2); }

#referenzen .rahmen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-aus); }

#referenzen figure:hover .rahmen img { transform: scale(1.05); }

#referenzen figure:nth-child(8) .rahmen img { object-position: 36% 50%; }

#referenzen .rahmen::before, #referenzen .rahmen::after { content: ""; position: absolute; z-index: 1; width: 22px; height: 22px; pointer-events: none; }

#referenzen .rahmen::before { top: 10px; left: 10px; border-top: 3px solid var(--rot); border-left: 3px solid var(--rot); }

#referenzen .rahmen::after { right: 10px; bottom: 10px; border-right: 3px solid var(--rot); border-bottom: 3px solid var(--rot); }

#referenzen figcaption { display: flex; align-items: baseline; gap: 12px; padding-top: 12px; font-size: 0.98rem; line-height: 1.35; color: var(--text-gedaempft); overflow-wrap: anywhere; }

#referenzen figcaption span { flex: none; font: 700 0.74rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--akzent-tief); }

@media (max-width: 1023px) {
      #referenzen .kopf { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
      #referenzen .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

@media (max-width: 560px) {
      #referenzen figure:nth-child(even) { margin-top: 0; }
      #referenzen figure:nth-child(odd) { margin-top: 0; }
    }

@media (max-width: 24em) {
      #referenzen .galerie { grid-template-columns: minmax(0, 1fr); }
    }

@media (min-width: 60em) {
      #referenzen .lead { hyphens: manual; }
    }

#nachweise { position: relative; padding-block: var(--luft); background: var(--grund); }

#nachweise .kicker { display: flex; align-items: center; gap: 0.8em; }

#nachweise .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#nachweise .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

#nachweise h2 { margin-top: 16px; max-width: 14ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#nachweise p.text { margin-top: 22px; max-width: 34em; }

#nachweise .urkunden { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: clamp(12px, 1.6vw, 22px); }

#nachweise figure { margin: 0; flex: 0 0 auto; }

#nachweise figure img { height: clamp(220px, 19vw, 300px); width: auto; display: block; background: #fff; border: 1px solid var(--linie); box-shadow: 0 24px 48px -28px rgb(20 24 30 / 0.5); }

#nachweise figcaption { padding-top: 12px; font-size: 0.98rem; line-height: 1.35; color: var(--text-gedaempft); }

@media (max-width: 900px) { #nachweise .raster { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 480px) { #nachweise figure img { height: 150px; } #nachweise figcaption { font-size: 0.85rem; max-width: 110px; } }

#stimmen { position: relative; padding-block: var(--luft); background: var(--dunkel); }

#stimmen .kicker { display: flex; align-items: center; gap: 0.8em; }

#stimmen .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#stimmen .kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#stimmen h2 { margin-top: 16px; max-width: 14ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#stimmen .lead { max-width: 36ch; }

#stimmen .raster { margin-top: clamp(36px, 5vw, 72px); display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: repeat(12, minmax(0, 1fr)); }

#stimmen .zitat { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; margin: 0; padding: clamp(22px, 2.4vw, 34px); background: var(--dunkel-2); border: 1px solid var(--linie-dunkel); border-radius: var(--r-gross); }

#stimmen .zitat [data-icon] { font-size: 2.2rem; color: var(--akzent); }

#stimmen blockquote { margin: 0; }

#stimmen blockquote p { font-size: 1.12rem; line-height: 1.55; color: var(--text-hell); }

#stimmen figcaption { display: grid; gap: 4px; }

#stimmen .name { font: 800 1.05rem/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-hell); }

#stimmen .quelle { font: 600 0.72rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-hell-gedaempft); }

#stimmen .z-gross { grid-column: 1 / span 7; grid-row: span 2; border-top: 4px solid var(--rot); gap: 40px; }

#stimmen .z-gross blockquote p { font: 700 clamp(1.35rem, 1rem + 1.3vw, 2.1rem)/1.25 var(--font-display); letter-spacing: -0.02em; }

#stimmen .z-a, #stimmen .z-b { grid-column: 8 / span 5; }

#stimmen .z-c, #stimmen .z-d, #stimmen .z-e, #stimmen .z-f { grid-column: span 3; }

@media (max-width: 1023px) {
      #stimmen .kopf { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
      #stimmen .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #stimmen .z-gross { grid-column: 1 / -1; grid-row: auto; }
      #stimmen .z-a, #stimmen .z-b, #stimmen .z-c, #stimmen .z-d, #stimmen .z-e, #stimmen .z-f { grid-column: span 1; }
    }

@media (max-width: 40em) {
      #stimmen .raster { grid-template-columns: minmax(0, 1fr); }
      #stimmen .z-a, #stimmen .z-b, #stimmen .z-c, #stimmen .z-d, #stimmen .z-e, #stimmen .z-f { grid-column: 1; }
    }

@media (min-width: 24em) {
      #stimmen blockquote p { hyphens: manual; }
    }

@media (min-width: 60em) {
      #stimmen .lead { hyphens: manual; }
    }

#ueber { position: relative; padding-block: var(--luft); background: var(--grund); }

#ueber .kicker { display: flex; align-items: center; gap: 0.8em; }

#ueber .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#ueber .raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

#ueber h2 { margin-top: 16px; max-width: 15ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#ueber .lead { margin-top: 24px; max-width: 42ch; }

#ueber .karte { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; padding: 22px clamp(18px, 2.4vw, 30px); background: var(--dunkel); color: var(--text-hell); border-radius: var(--r-gross); }

#ueber .karte[data-zweite] { margin-top: 12px; }

#ueber .karte [data-icon] { grid-row: span 3; font-size: 2rem; color: var(--akzent); }

#ueber .karte strong { font: 800 1.35rem/1.15 var(--font-display); letter-spacing: -0.02em; }

#ueber .karte span.rolle { color: var(--text-hell-gedaempft); font-size: 0.98rem; }

#ueber .karte a { justify-self: start; font: 800 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text-hell); text-decoration-color: var(--akzent); text-decoration-thickness: 2px; }

#ueber .karte :focus-visible { outline-color: var(--akzent); }

#ueber .daten { margin: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid var(--text); }

#ueber .daten > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--linie); }

#ueber dt { font: 600 0.74rem/1.5 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-gedaempft); }

#ueber dd { margin: 0; }

#ueber .aktionen { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; }

#ueber .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; }

#ueber .knopf:hover { --knopf-bg: var(--rot-tief); }

#ueber .bild { margin: 0; position: sticky; top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 24px); }

@media (max-height: 38em) { #ueber .bild { position: static; } }

#ueber .rahmen { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dunkel-2); }

#ueber .rahmen img { width: 100%; height: 100%; object-fit: cover; }

#ueber .rahmen::before, #ueber .rahmen::after { content: ""; position: absolute; z-index: 1; width: 28px; height: 28px; pointer-events: none; }

#ueber .rahmen::before { top: 14px; left: 14px; border-top: 3px solid var(--rot); border-left: 3px solid var(--rot); }

#ueber .rahmen::after { right: 14px; bottom: 14px; border-right: 3px solid var(--rot); border-bottom: 3px solid var(--rot); }

#ueber figcaption { padding-top: 12px; font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-gedaempft); }

@media (max-width: 900px) {
      #ueber .raster { grid-template-columns: minmax(0, 1fr); }
      #ueber .bild { max-width: 560px; position: static; }
    }

@media (max-width: 560px) {
      #ueber .daten > div { grid-template-columns: minmax(0, 1fr); }
    }

@media (min-width: 60em) {
      #ueber .lead { hyphens: manual; }
    }

#fragen { padding-block: var(--luft); background: var(--grund-2); }

#fragen .kicker { display: flex; align-items: center; gap: 0.8em; }

#fragen .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#fragen .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

#fragen .einleitung { position: sticky; top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 24px); }

#fragen h2 { margin-top: 16px; max-width: 13ch; font-weight: 800; font-size: clamp(2rem, 1rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; }

#fragen .lead { margin-top: 20px; }

#fragen .liste { border-top: 1px solid var(--text); }

#fragen details { border-bottom: 1px solid var(--linie); }

#fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; overflow-wrap: anywhere; font: 700 clamp(1.1rem, 1.6vw, 1.35rem)/1.25 var(--font-display); letter-spacing: -0.01em; }

#fragen summary [data-icon] { width: 44px; height: 44px; padding: 11px; border-radius: 0; border: 1px solid var(--linie); transition: transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s; }

#fragen details[open] summary [data-icon] { transform: rotate(45deg); background: var(--dunkel); color: var(--grund-2); border-color: var(--dunkel); }

#fragen .antwort p { padding: 0 68px 26px 0; max-width: 60ch; color: var(--text-gedaempft); }

@media (max-width: 900px) {
      #fragen .raster { grid-template-columns: minmax(0, 1fr); }
      #fragen .einleitung { position: static; }
      #fragen .antwort p { padding-right: 0; }
    }

@media (min-width: 60em) {
      #fragen .lead { hyphens: manual; }
    }

#aufruf { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(88px, 11vw, 150px); background: var(--dunkel); }

#aufruf .kicker { display: flex; align-items: center; gap: 0.8em; }

#aufruf .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#aufruf .raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }

#aufruf h2 { margin-top: 16px; max-width: 13ch; font-weight: 800; font-size: clamp(2.2rem, 1rem + 3.8vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; }

#aufruf .nummer { display: inline-block; margin-top: clamp(24px, 3.4vw, 40px); font: 800 clamp(2.6rem, 1rem + 4.8vw, 6.2rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; color: var(--text-hell); text-decoration: none; border-bottom: 4px solid var(--rot); padding-bottom: 6px; transition: color 0.3s, border-color 0.3s; }

#aufruf .nummer:hover { color: var(--akzent); border-color: var(--akzent); }

#aufruf .lead { margin-top: 26px; max-width: 40ch; }

#aufruf .lead a { color: var(--text-hell); text-decoration-color: var(--akzent); text-decoration-thickness: 2px; }

#aufruf .aktion { position: relative; z-index: 2; margin-top: 32px; }

#aufruf .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; font-size: 1.05rem; padding: 1.15em 1.8em; }

#aufruf .knopf:hover { --knopf-bg: var(--rot-tief); }

#aufruf .bild { position: relative; isolation: isolate; margin: 0; }

#aufruf .bild::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; translate: -50% -50%; width: 142%; aspect-ratio: 1; border-radius: 50%; color: rgb(242 241 238 / 0.16); background: repeating-conic-gradient(from 0deg, currentColor 0 3.9deg, transparent 3.9deg 6deg); -webkit-mask: radial-gradient(closest-side, transparent 91%, #000 91.4%); mask: radial-gradient(closest-side, transparent 91%, #000 91.4%); pointer-events: none; }

#aufruf .rahmen { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dunkel-2); }

#aufruf .rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

#aufruf .rahmen::before, #aufruf .rahmen::after { content: ""; position: absolute; z-index: 1; width: 28px; height: 28px; pointer-events: none; }

#aufruf .rahmen::before { top: 14px; left: 14px; border-top: 3px solid var(--rot); border-left: 3px solid var(--rot); }

#aufruf .rahmen::after { right: 14px; bottom: 14px; border-right: 3px solid var(--rot); border-bottom: 3px solid var(--rot); }

#aufruf figcaption { position: relative; padding-top: 12px; font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-hell-gedaempft); }

@keyframes aufruf-dreh { from { rotate: 0deg; } to { rotate: 60deg; } }

@supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        #aufruf .bild::before { animation: aufruf-dreh linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      }
    }

@media (max-width: 900px) {
      #aufruf .raster { grid-template-columns: minmax(0, 1fr); }
      #aufruf .bild { max-width: 460px; margin-top: 84px; }
    }

@media (min-width: 60em) {
      #aufruf .lead { hyphens: manual; }
    }

#kontakt { padding-block: var(--luft); background: var(--grund); }

#kontakt .kicker { display: flex; align-items: center; gap: 0.8em; }

#kontakt .kicker::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; rotate: 45deg; flex: none; }

#kontakt .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

#kontakt h2 { margin-top: 16px; font-weight: 800; font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; }

#kontakt .lead { margin-top: 20px; }

#kontakt .daten { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }

#kontakt .daten li { display: flex; gap: 14px; align-items: flex-start; }

#kontakt .daten [data-icon] { color: var(--akzent-tief); font-size: 1.4rem; margin-top: 0.1em; }

#kontakt .daten small { display: block; font: 600 0.72rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-gedaempft); }

#kontakt .daten a { text-decoration-color: var(--rot); text-decoration-thickness: 2px; }

#kontakt .daten strong { font: 800 1.35rem/1.2 var(--font-display); letter-spacing: -0.02em; }

#kontakt .tipp { margin-top: 32px; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--linie); background: var(--grund-2); color: var(--text-gedaempft); font-size: 0.98rem; }

#kontakt .tipp [data-icon] { color: var(--akzent-tief); font-size: 1.4rem; }

#kontakt form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: clamp(24px, 3.4vw, 48px); background: var(--grund-2); border: 1px solid var(--linie); border-top: 4px solid var(--rot); border-radius: var(--r-gross); }

#kontakt .feld { display: grid; gap: 8px; align-content: start; min-width: 0; }

#kontakt .breit { grid-column: 1 / -1; }

#kontakt fieldset { margin: 0; padding: 0; border: 0; }

#kontakt label, #kontakt legend { font-size: 0.95rem; font-weight: 600; color: var(--text); }

#kontakt legend { margin-bottom: 8px; }

#kontakt .optional { font-weight: 400; color: var(--text-gedaempft); }

#kontakt input:not([type="radio"], [type="checkbox"]), #kontakt textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--r-klein); border: 1px solid rgb(20 24 30 / 0.55); background: var(--grund); color: var(--text); transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; }

#kontakt input:focus-visible, #kontakt textarea:focus-visible { outline: 3px solid transparent; outline-offset: 2px; border-color: var(--dunkel); background: var(--grund-2); box-shadow: 0 0 0 4px var(--akzent-tief); }

#kontakt textarea { min-height: 132px; resize: vertical; }

#kontakt .chips { display: flex; flex-wrap: wrap; gap: 10px; }

#kontakt .chip { position: relative; font-weight: 500; }

#kontakt .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

#kontakt .chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; cursor: pointer; border-radius: var(--r-klein); border: 1px solid rgb(20 24 30 / 0.55); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

#kontakt .chip input:checked + span { background: var(--dunkel); color: var(--grund-2); border-color: var(--dunkel); }

#kontakt .chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--akzent-tief); outline: 3px solid transparent; outline-offset: 2px; }

#kontakt .hinweis { margin: 0; font-size: 0.92rem; color: var(--text-gedaempft); overflow-wrap: anywhere; hyphens: auto; }

#kontakt .hinweis a { color: var(--text); }

#kontakt .senden { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

#kontakt .knopf { --knopf-bg: var(--rot); --knopf-fg: #fff; font-weight: 700; font-size: 1.05rem; padding: 1.15em 1.8em; }

#kontakt .knopf:hover { --knopf-bg: var(--rot-tief); }

#kontakt [data-anfrage-ok] { padding: 16px 18px; border-radius: var(--r-klein); background: rgb(216 29 20 / 0.12); color: var(--text); }

@media (forced-colors: active) {
      #kontakt .chip input:checked + span { border-width: 3px; font-weight: 700; }
    }

@media (max-width: 900px) {
      #kontakt .raster { grid-template-columns: minmax(0, 1fr); }
    }

@media (max-width: 560px) {
      #kontakt form { grid-template-columns: minmax(0, 1fr); }
    }

@media (min-width: 60em) {
      #kontakt .lead { hyphens: manual; }
    }

#fuss { padding-block: clamp(64px, 8vw, 110px) 32px; border-top: 1px solid var(--linie-dunkel); overflow: clip; background: var(--dunkel); }

#fuss .oben { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; }

#fuss .marke { display: block; }

#fuss .marke img { height: 76px; width: auto; }

#fuss .marke + p { margin-top: 18px; max-width: 30ch; color: var(--text-hell-gedaempft); }

#fuss .spalten { display: flex; flex-wrap: wrap; gap: 28px clamp(32px, 6vw, 88px); }

#fuss h2 { font: 600 0.74rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); }

#fuss ul { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }

#fuss .spalten a { color: var(--text-hell-gedaempft); text-decoration: none; transition: color 0.3s; }

#fuss .spalten a:hover { color: var(--text-hell); }

#fuss .riesig { margin: clamp(48px, 7vw, 96px) 0 clamp(20px, 3vw, 36px); font: 800 clamp(2.4rem, 9.6vw, 10.5rem)/0.84 var(--font-display); letter-spacing: -0.05em; text-transform: uppercase; white-space: nowrap; text-align: center; color: transparent; background: linear-gradient(180deg, rgb(216 29 20 / 0.95) 8%, rgb(216 29 20 / 0.05) 94%); -webkit-background-clip: text; background-clip: text; }

#fuss .unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--linie-dunkel); font-size: 0.9rem; color: var(--text-hell-gedaempft); }

#fuss .recht { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }

#fuss .recht a { color: inherit; }

@media (max-width: 720px) {
      #fuss { padding-bottom: 104px; }
    }

#whatsapp { position: fixed; right: 14px; bottom: 16px; z-index: 41; display: none; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #128c7e; color: #fff; box-shadow: 0 10px 26px -8px rgb(0 0 0 / 0.6); }

#whatsapp svg { width: 32px; height: 32px; display: block; }

#whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 720px) {
      #whatsapp { display: grid; }
    }

@media (max-width: 720px) and (min-height: 38em) {
      #whatsapp { bottom: calc(86px + env(safe-area-inset-bottom)); }
      html:has(#kontakt :focus-visible) #whatsapp { display: none; }
    }

#ruf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(20 24 30 / 0.97); border-top: 1px solid var(--linie-dunkel); }

#ruf .knopf { flex: 1 1 0; justify-content: center; padding: 1em 0.8em; font-weight: 700; --knopf-bg: var(--rot); --knopf-fg: #fff; }

#ruf .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }

#ruf :focus-visible { outline-color: var(--akzent); }

@media (max-width: 720px) and (min-height: 38em) {
      #ruf { display: flex; }
      html:has(#ruf) { scroll-padding-bottom: 112px; }
      html:has(#kontakt :focus-visible) #ruf { display: none; }
    }