/* ==========================================================================
   Esterbauer-Maier – Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
   01  Design-Tokens (Farben, Typo, Abstände)
   02  Reset & Basis
   03  Typografie & Hilfsklassen
   04  Layout (Container, Sections, Grids)
   05  Buttons & Links
   06  Header / Navigation
   07  Hero + Signature-Grafik (SVG-Animation)
   08  Karten / Leistungen
   09  Prozess-Zeitstrahl
   10  Über-uns-Teaser & Textseiten
   11  Galerie (Platzhalter für eigene Fotos)
   12  Kontakt (Formular, Themen-Kacheln, Kontaktkarte)
   13  CTA-Band & Footer
   14  Scroll-Reveal-Animationen
   15  Reduced Motion & Print
   ========================================================================== */

/* ==========================================================================
   00  SCHRIFTEN – lokal eingebunden (fonts/)
   --------------------------------------------------------------------------
   Bewusst KEINE Google-Fonts-Einbindung: so werden keine Daten (IP-Adresse)
   der Besucher an Google übertragen. Die Dateien liegen im Ordner "fonts/"
   und müssen mit hochgeladen werden.

   Alle drei Schriften stehen unter der SIL Open Font License 1.1,
   das Selfhosting ist dadurch ausdrücklich erlaubt:
     Source Serif 4 – Frank Grießhammer / Adobe
     Source Sans 3  – Paul D. Hunt / Adobe
     IBM Plex Mono  – Mike Abbink / IBM

   Source Serif und Source Sans sind Variable Fonts: eine Datei deckt alle
   Schriftstärken ab. IBM Plex Mono liegt in zwei Schnitten vor.
   ========================================================================== */

/* --- Source Serif 4 (Überschriften) ---
   Eine humanistische Serifenschrift: warm, ruhig, seit Jahrhunderten
   vertrautes Schriftbild. Ersetzt die vorherige technische Grotesk,
   die moderner, aber auch unpersönlicher gewirkt hat. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sourceserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sourceserif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Source Sans 3 (Fließtext) ---
   Die passende Grotesk zur Serifenschrift, ebenfalls humanistisch
   gezeichnet: offene Formen, gut lesbar auch in kleinen Größen. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/sourcesans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/sourcesans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Mono (Kennzahlen, kleine Auszeichnungen) ---
   Wird deutlich sparsamer eingesetzt als vorher. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01  DESIGN-TOKENS
   ========================================================================== */
:root {
  /* --- Farben: dunkles Anthrazit als Basis --- */
  --ink-950: #07090a;
  --ink-900: #0b0e10;
  --ink-850: #101417;
  --ink-800: #14191c;
  --ink-750: #1a2024;
  --ink-700: #222a2f;

  /* --- Akzent 1: PETROL = Firmenfarbe (T-Shirts), Energie/Elektrik ---
     Die Variablen heißen weiterhin "--amber-*", weil sie an über 60 Stellen
     im Stylesheet verwendet werden. Nur die Werte sind auf Petrol geändert.

     ZURÜCK AUF ORANGE: einfach diese drei Zeilen wieder auf die alten Werte
     setzen, dann ist die ganze Seite wieder orange:
        --amber-400: #ffc247;
        --amber-500: #f5a524;
        --amber-600: #d9860d;
        --amber-glow: rgba(245, 165, 36, 0.28);
     Zusätzlich stecken in der Hero-Grafik in index.html feste Farbwerte
     (Suchbegriff "PETROL" in den Kommentaren dort). */
  --amber-400: #56c2cc;   /* hell – für Text, Links, Labels auf dunklem Grund */
  --amber-500: #1f9aa6;   /* Hauptton – Buttons, Linien, Blitz */
  --amber-600: #14707a;   /* dunkel – Rahmen, Verläufe */
  --amber-glow: rgba(31, 154, 166, 0.3);

  /* --- Akzent 2: gedecktes Teal = Photovoltaik, Nachhaltigkeit --- */
  --teal-400: #4fbfae;
  --teal-500: #2c9e8e;
  --teal-600: #1f7a6d;
  --teal-glow: rgba(44, 158, 142, 0.25);

  /* --- Akzent 3: Amber als "Funke" = nur kleine Energie-Details ---
     Bewusst sparsam eingesetzt, damit Petrol die Hauptfarbe bleibt:
       Blitz und Sonne in der Hero-Grafik, Ladebalken der Wallbox,
       Schrittnummern im Ablauf, Icon der Elektroinstallation,
       Themen-Kachel "Hauselektrik" im Formular, Tastatur-Fokusrahmen.
     Damit ist auch die Zuordnung wieder ablesbar:
       Petrol = Marke/Bedienung, Teal = Photovoltaik, Amber = Elektrik. */
  --spark-400: #ffc247;
  --spark-500: #f5a524;
  --spark-600: #d9860d;
  --spark-glow: rgba(245, 165, 36, 0.28);

  /* --- Neutrale Töne --- */
  --white: #ffffff;
  --text: #e9edef;
  --text-muted: #9aa6ac;
  --text-dim: #6d7a81;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Typografie --- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* fluide Schriftgrößen (mobile-first, skalieren mit dem Viewport) */
  --fs-hero: clamp(2.4rem, 8.2vw, 5.4rem);
  --fs-h1: clamp(2.1rem, 6vw, 3.9rem);
  --fs-h2: clamp(1.7rem, 4.4vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 2.4vw, 1.45rem);
  --fs-body: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  --fs-label: 0.72rem;

  /* --- Abstände & Radien --- */
  --space-section: clamp(4.5rem, 10vw, 9rem);
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;

  --container: 1220px;
  --header-h: 74px;

  /* --- Easing --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ==========================================================================
   02  RESET & BASIS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background-color: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Feines technisches Raster über der gesamten Seite – gibt Tiefe,
   ohne aufdringlich zu sein. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
}

body > * { position: relative; z-index: 1; }

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

/* Sichtbarer Fokus-Zustand für Tastaturnutzung (Barrierefreiheit).
   Bewusst in Amber: der Rahmen liegt oft direkt auf petrolfarbenen
   Elementen (Buttons, Formularfelder) und wäre in Petrol kaum zu sehen. */
:focus-visible {
  outline: 2px solid var(--spark-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Sprunglink für Screenreader / Tastatur */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--amber-500);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03  TYPOGRAFIE & HILFSKLASSEN
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  /* "opsz" ist die optische Achse von Source Serif: bei großen Graden werden
     die Serifen feiner gezeichnet. Das lässt Überschriften ruhiger wirken. */
  font-variation-settings: "opsz" 40;
  /* Serifenschriften brauchen etwas mehr Zeilenluft als eine Grotesk */
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Sicherheitsnetz: lange deutsche Komposita ("Elektroinstallation",
     "Umsatzsteuer-Identifikationsnummer") dürfen niemals aus ihrer Spalte
     herauslaufen. Greift nur, wenn ein Wort sonst überstehen würde. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber-400); text-underline-offset: 3px; }

strong { color: var(--white); font-weight: 600; }

/* Mono-Label für Kennzahlen, Rubriken, Schrittnummern */
/* Rubrik-Zeile über den Überschriften.
   Bewusst in der Fließtextschrift statt in Mono und mit deutlich weniger
   Sperrung als vorher – das wirkt ruhiger und weniger nach Technik-Template. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-500);
  margin: 0 0 1.1rem;
}
.label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}
.label--teal { color: var(--teal-400); }
.label--muted { color: var(--text-dim); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* Amber-Unterstreichung für einzelne Wörter in Überschriften */
.hl {
  color: var(--white);
  background-image: linear-gradient(var(--amber-500), var(--amber-500));
  background-repeat: no-repeat;
  background-size: 100% 0.16em;
  background-position: 0 92%;
  padding-bottom: 0.04em;
}
.hl--teal { background-image: linear-gradient(var(--teal-500), var(--teal-500)); }

/* Dünne Trennlinie mit Amber-Anlauf */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--amber-500), transparent 38%);
  opacity: 0.5;
}

/* ==========================================================================
   04  LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* abgesetzte Sektion (etwas hellere Fläche + Hairlines) */
.section--alt {
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { max-width: 720px; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section-head--wide { max-width: 900px; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   05  BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--amber-500);
  --btn-fg: var(--ink-950);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px var(--amber-glow), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  --btn-fg: var(--white);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  border-color: var(--amber-500);
}

.btn--teal { --btn-bg: var(--teal-500); --btn-fg: #04100e; }
.btn--block { width: 100%; justify-content: center; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--amber-400);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform 0.25s var(--ease-out);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(5px); }

/* ==========================================================================
   06  HEADER / NAVIGATION  (sticky, mobil als Hamburger-Menü)
   ========================================================================== */
/* Leicht transparenter Header mit Weichzeichnung: der Inhalt schimmert
   beim Scrollen dezent durch (Glas-Effekt). Das ist unproblematisch, weil
   das Logo als transparentes SVG eingebunden ist. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(11, 14, 16, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
/* Klasse wird per JS beim Scrollen gesetzt */
.site-header.is-scrolled {
  background-color: rgba(7, 9, 10, 0.9);
  border-bottom-color: var(--line);
}
/* Browser ohne backdrop-filter bekommen einen deckenden Hintergrund */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background-color: var(--ink-900); }
  .site-header.is-scrolled { background-color: var(--ink-950); }
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --- Logo ---------------------------------------------------------------
   images/logo.svg ist die transparente Vektorversion aus deinem Logo-Kit
   (schwarze Grafik, kein Hintergrund). Mit invert(1) wird daraus die
   Negativ-Variante: weißer Schriftzug, weiße Blitz-Fläche mit dunklem
   Blitz darin. Weil die Datei transparent ist, entsteht dabei KEIN Kasten –
   egal welche Farbe dahinter liegt.

   Vorteile gegenüber dem JPG:
     - randscharf in jeder Größe (Vektor), auch auf Retina-Displays
     - nur 23 KB
     - kein weißer Hintergrund, den man wegrechnen muss

   Wenn du das Logo lieber im Original (schwarz) auf einer weißen Platte
   möchtest, ergänze am <a class="brand"> die Klasse "brand--plate"
   (siehe unten). */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  width: auto;
  height: 44px;
  filter: invert(1);
}
@media (min-width: 720px) { .brand img { height: 50px; } }

.footer-brand img { height: 58px; }

/* Alternative: Logo im Original auf weißer Platte. */
.brand--plate {
  padding: 0.45rem 0.8rem;
  background: var(--white);
  border-radius: 12px;
}
.brand--plate img { filter: none; height: 38px; }
@media (min-width: 720px) { .brand--plate img { height: 44px; } }

/* --- Hamburger-Button (nur mobil sichtbar) --- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 42px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Navigation: mobil ausklappbares Panel --- */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: grid;
  gap: 0.2rem;
  padding: 1rem clamp(1.15rem, 4vw, 2.5rem) 1.6rem;
  background-color: var(--ink-950);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, transform 0.3s var(--ease-out), visibility 0.24s;
}
.nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.2rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav a[aria-current="page"] { color: var(--amber-400); }
.nav .nav-cta { margin-top: 1rem; border-bottom: 0; }

/* Desktop-Navigation */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav a {
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    transition: color 0.2s ease;
  }
  .nav a:hover { color: var(--white); }
  /* Amber-Marker für die aktive Seite */
  .nav a[aria-current="page"] { color: var(--white); }
  .nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.1rem;
    height: 2px;
    background: var(--amber-500);
    border-radius: 2px;
  }
  .nav .nav-cta { margin: 0 0 0 0.6rem; }
}

/* Kompakter Button in der Navigation */
.nav-cta {
  padding: 0.7rem 1.15rem !important;
  background: var(--amber-500);
  color: var(--ink-950) !important;
  border-radius: 999px !important;
  font-weight: 600;
  justify-content: center !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--amber-glow); }
.nav-cta::after { display: none !important; }

/* Scroll-Fortschritt als hauchdünne Amber-Linie unter dem Header */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal-500), var(--amber-500));
  transition: width 0.1s linear;
}

/* ==========================================================================
   07  HERO + SIGNATURE-GRAFIK
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(31, 154, 166, 0.12), transparent 62%),
    radial-gradient(760px 520px at 12% 92%, rgba(44, 158, 142, 0.13), transparent 65%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 70%);
}

.hero-grid {
  display: grid;
  gap: clamp(2.2rem, 5vw, 3rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 3.2rem; }
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  font-variation-settings: "opsz" 60;   /* größter optischer Grad */
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin-bottom: 1.1rem;
}
.hero h1 span { display: block; }
.hero h1 .line-2 { color: var(--text-muted); }

.hero-slogan { font-size: var(--fs-lead); color: var(--text-muted); max-width: 46ch; }

/* Faktenzeile unter dem CTA – Mono-Labels, keine Buzzwords */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-top: 2.2rem;
  padding: 0;
  list-style: none;
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-muted);
}
.hero-facts li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
}
/* Punkt 1 Teal (PV), Punkt 2 Amber (Elektrik), Punkt 3 weiß (Haustechnik) –
   dieselbe Zuordnung wie bei den Leistungskacheln */
.hero-facts li:nth-child(2)::before { background: var(--spark-500); }
.hero-facts li:nth-child(3)::before { background: var(--white); }

/* --- Rahmen der Signature-Grafik --- */
.hero-visual {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 60%),
    var(--ink-850);
  padding: clamp(0.7rem, 2vw, 1.1rem);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
/* Ecken-Marker: technische Anmutung */
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--amber-500);
  opacity: 0.7;
}
.hero-visual::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-radius: var(--radius-lg) 0 0 0; }
.hero-visual::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 var(--radius-lg) 0; }

.hero-visual svg { width: 100%; height: auto; }

/* Bildunterschrift der Grafik */
.hero-visual figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.6rem 0.5rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   SVG-Animation: Module rasten ein → Blitz zieht sich zur Wallbox
   Wichtig: Der Endzustand ist der Standardzustand. Die Animationen laufen
   nur, wenn per JS die Klasse .play gesetzt wird (siehe script.js).
   Dadurch ist die Grafik ohne JS und bei prefers-reduced-motion sofort
   vollständig sichtbar.
   -------------------------------------------------------------------------- */
.energy-scene { --dur: 0.62s; }
.energy-scene * { transform-box: fill-box; }

/* Panels: einfliegen + einrasten */
.energy-scene.play .panel {
  animation: panel-in var(--dur) var(--ease-snap) both;
}
.energy-scene.play .panel:nth-of-type(1) { animation-delay: 0.15s; }
.energy-scene.play .panel:nth-of-type(2) { animation-delay: 0.29s; }
.energy-scene.play .panel:nth-of-type(3) { animation-delay: 0.43s; }
.energy-scene.play .panel:nth-of-type(4) { animation-delay: 0.57s; }
.energy-scene.play .panel:nth-of-type(5) { animation-delay: 0.71s; }
.energy-scene.play .panel:nth-of-type(6) { animation-delay: 0.85s; }

@keyframes panel-in {
  0%   { opacity: 0; transform: translate(-14px, -30px) scale(0.82); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Glanz-Sweep, einmalig über die Modulfläche */
.energy-scene.play .panel-shine { animation: shine-sweep 1.1s ease-out 1.1s both; }
@keyframes shine-sweep {
  0%   { opacity: 0; transform: translateX(-120px); }
  35%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(150px); }
}

/* Sonne + Strahlen */
.energy-scene.play .sun { animation: fade-scale 0.9s var(--ease-out) 0.05s both; }
.energy-scene.play .sun-ray { animation: ray-in 0.7s var(--ease-out) both; }
.energy-scene.play .sun-ray:nth-of-type(1) { animation-delay: 1.15s; }
.energy-scene.play .sun-ray:nth-of-type(2) { animation-delay: 1.25s; }
.energy-scene.play .sun-ray:nth-of-type(3) { animation-delay: 1.35s; }

@keyframes fade-scale {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ray-in {
  from { opacity: 0; stroke-dashoffset: 60; }
  to   { opacity: 0.9; stroke-dashoffset: 0; }
}

/* Haus zeichnet sich auf */
.energy-scene.play .house-shape { animation: fade-up 0.8s var(--ease-out) both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Blitz: wird von oben nach unten freigelegt (Clip-Rechteck skaliert) */
.energy-scene.play .bolt-reveal {
  animation: reveal-down 0.95s cubic-bezier(0.65, 0, 0.35, 1) 1.5s both;
}
@keyframes reveal-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.energy-scene.play .bolt-flash { animation: bolt-flash 0.7s ease-out 2.2s both; }
@keyframes bolt-flash {
  0%   { opacity: 0; }
  25%  { opacity: 0.85; }
  100% { opacity: 0.25; }
}

/* Leitung zur Wallbox: Linie zeichnen + Energiepunkt läuft einmal durch */
.energy-scene.play .conduit {
  animation: draw-line 0.7s ease-out 2.35s both;
}
@keyframes draw-line {
  from { stroke-dashoffset: 220; }
  to   { stroke-dashoffset: 0; }
}
.energy-scene.play .spark-dot { animation: spark-run 1.15s ease-in-out 2.55s both; }
@keyframes spark-run {
  0%   { opacity: 0; offset-distance: 0%; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* Wallbox / Speicher: Gehäuse + Ladebalken */
.energy-scene.play .wallbox { animation: fade-up 0.7s var(--ease-out) 1.05s both; }
.energy-scene.play .charge-bar { animation: bar-fill 0.45s var(--ease-out) both; }
.energy-scene.play .charge-bar:nth-of-type(1) { animation-delay: 3.0s; }
.energy-scene.play .charge-bar:nth-of-type(2) { animation-delay: 3.18s; }
.energy-scene.play .charge-bar:nth-of-type(3) { animation-delay: 3.36s; }
@keyframes bar-fill {
  from { opacity: 0; transform: scaleX(0.15); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Beschriftungen mit Führungslinien erscheinen zuletzt */
.energy-scene.play .annotation { animation: fade-in 0.6s ease-out both; }
.energy-scene.play .annotation:nth-of-type(1) { animation-delay: 1.35s; }
.energy-scene.play .annotation:nth-of-type(2) { animation-delay: 2.9s; }
.energy-scene.play .annotation:nth-of-type(3) { animation-delay: 3.5s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Transform-Ursprünge für die SVG-Animationen */
.energy-scene .bolt-reveal { transform-origin: 50% 0; }   /* Blitz von oben freilegen */
.energy-scene .charge-bar  { transform-origin: 0 50%; }   /* Ladebalken von links füllen */

/* Pfad, auf dem der Energiepunkt zur Wallbox läuft
   (identisch mit dem d-Attribut von .conduit in index.html) */
.energy-scene .spark-dot {
  offset-path: path("M330 466 L 452 466 C 486 466 496 452 500 436 L 552 436");
  offset-rotate: 0deg;
  transform-box: view-box;
}

/* Auf kleinen Displays werden die Beschriftungen in der Grafik zu klein –
   dort zeigen wir stattdessen nur die Bildunterschrift darunter. */
@media (max-width: 620px) {
  .energy-scene .annotations { display: none; }
}

/* Statische Stile der Szene */
.energy-scene .scene-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-dim);
}
.energy-scene .scene-value {
  font-family: var(--font-mono);
  font-size: 15px;
  fill: var(--spark-400);   /* Ladeanzeige der Wallbox – gehört zu den Funken */
}

/* ==========================================================================
   08  KARTEN / LEISTUNGEN
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--ease-out), border-color 0.35s ease, background-color 0.35s ease;
}
/* farbiger Lichtsaum an der Oberkante, wird beim Hover kräftiger */
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent, var(--amber-500)), transparent);
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.card:hover::before { opacity: 1; }

.card h3 { margin: 0; }
.card p { color: var(--text-muted); font-size: 0.98rem; margin: 0; }

/* Icon-Fläche */
.card-icon,
.icon-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-accent, var(--amber-500)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--amber-500)) 34%, transparent);
  color: var(--card-accent, var(--amber-500));
  flex: none;
}
.card-icon svg,
.icon-badge svg { width: 26px; height: 26px; }

.card-index {
  position: absolute;
  top: 1.1rem; right: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.card .link-arrow { margin-top: auto; }

/* Akzentfarben pro Leistungsbereich:
   Teal = Photovoltaik, Amber = Elektrik, Hellgrau = Planung.
   Betrifft nur Icon, Rahmen des Icons, den Lichtsaum oben an der Karte
   und die Blitz-Häkchen der Merkmalliste – alles kleine Flächen. */
.accent-teal  { --card-accent: var(--teal-500); }
.accent-amber { --card-accent: var(--spark-500); }
.accent-light { --card-accent: #cfd7db; }

/* --- Detail-Blöcke auf der Leistungen-Seite --- */
.service-block {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  padding-block: clamp(2.4rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.service-block:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 860px) {
  .service-block { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 3rem; }
  .service-block .service-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.service-aside { display: flex; flex-direction: column; gap: 1rem; }
/* Die Spalte ist nur ~320 px breit, die Überschrift aber bis 2.9rem groß.
   Deshalb hier Silbentrennung erlauben. Zusätzlich steht im HTML bei
   "Elektro&shy;installation" ein weiches Trennzeichen, damit die Trennung
   auch in Browsern ohne deutsches Trennwörterbuch an der richtigen
   Stelle passiert. */
.service-aside h2 {
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.service-block .service-body p { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.68; }

/* Merkmal-Liste mit Blitz-Häkchen */
.feature-list {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text);
}
.feature-list li::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: 0.5rem;
  background: var(--card-accent, var(--amber-500));
  clip-path: polygon(52% 0, 0 62%, 42% 62%, 30% 100%, 100% 40%, 56% 40%);
}
@media (min-width: 640px) {
  .feature-list { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   09  PROZESS-ZEITSTRAHL  (Beratung → Planung → Montage → Service)
   ========================================================================== */
.process { position: relative; }

.process-track {
  display: grid;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: 3.4rem;
}
/* vertikale Verbindungslinie (mobil) */
.step::before {
  content: "";
  position: absolute;
  left: 1.09rem;
  top: 2.6rem;
  bottom: -1.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--amber-500), rgba(31, 154, 166, 0.12));
}
.step:last-child::before { display: none; }

/* Schrittnummer: bewusst in Amber ("Funke"), die Verbindungslinie
   dazwischen bleibt petrol – so setzen die Nummern Akzente,
   ohne dass der Zeitstrahl insgesamt die Farbe wechselt. */
.step-num {
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--spark-600);
  background: var(--ink-850);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--spark-400);
}
.step h3 { margin: 0 0 0.45rem; font-size: 1.16rem; }
.step p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }
.step-meta {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* doppelte Nummer im Markup (Fallback) ausblenden – sichtbar ist der Textknoten */
.step-num span { display: none; }

/* Desktop: horizontaler Zeitstrahl – nummerierte Kreise sitzen auf der Linie */
@media (min-width: 940px) {
  .process-track {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
    padding-top: 4.8rem;
  }
  .step { padding-left: 0; padding-right: 1.2rem; }
  .step::before {
    left: 2.7rem;
    right: -1.8rem;
    top: -3.05rem;   /* auf Höhe der Kreismitte */
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--amber-500), rgba(31, 154, 166, 0.15));
  }
  .step-num {
    top: -4.2rem;
    left: 0;
    box-shadow: 0 0 0 5px rgba(245, 165, 36, 0.1);
  }
}

/* ==========================================================================
   10  ÜBER-UNS-TEASER & TEXTSEITEN
   ========================================================================== */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}

/* Fließtext-Bereich für längere Inhalte (Über uns, Impressum, Datenschutz) */
.prose { max-width: 68ch; }
.prose p { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.72; }
.prose p.prose-lead-in {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.9rem; font-size: 1.1rem; }
.prose ul { color: var(--text-muted); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* Zitat-Block */
.pull-quote {
  margin: 2.6rem 0;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 2px solid var(--amber-500);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.35;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Kennzahlen-/Merkmal-Raster */
/* WICHTIG: minmax(0, 1fr) statt 1fr.
   Mit reinem "1fr" richtet sich die Spaltenbreite nach dem längsten Wort
   darin – dadurch wurden die Spalten unterschiedlich breit (191 px links,
   158 px rechts) und der Text in den rechten beiden Kästen wirkte gequetscht.
   minmax(0, ...) erzwingt exakt gleich breite Spalten. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-grid div {
  padding: 1.3rem 1.2rem;
  background: var(--ink-850);
}
.stat-grid dt,
.stat-grid .stat-key {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.stat-grid dd,
.stat-grid .stat-val {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--white);
  /* lange Wörter dürfen den Kasten nicht sprengen */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================================================
   11  GALERIE / BILD-PLATZHALTER
   ========================================================================== */
/* HINWEIS FÜR DICH:
   Die Kacheln sind bewusst leer. Um ein eigenes Foto einzusetzen, in der
   jeweiligen HTML-Datei den kommentierten <img>-Tag aktivieren und die
   Platzhalter-Beschriftung (.ph-note) löschen. */
/* Zwei Spalten – passt zu vier Fotos (2 x 2) und lässt die Bilder groß wirken.
   Auf dem Handy ein Bild pro Zeile, sonst erkennt man die Details nicht.
   Bei sechs oder mehr Fotos hier auf repeat(3, 1fr) ab 900px umstellen. */
.gallery {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* --- Kachel mit echtem Foto --- */
.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-850);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ausschnitt: bei hohen Fotos den unteren Bereich (Anlage) bevorzugen */
  object-position: center 45%;
  transition: transform 0.7s var(--ease-out);
}
.tile:hover img { transform: scale(1.045); }

/* Bildunterschrift als Overlay mit dunklem Verlauf */
.tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 0.9rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(to top, rgba(4, 6, 7, 0.85), rgba(4, 6, 7, 0.45) 50%, transparent);
  pointer-events: none;
}

.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px),
    var(--ink-850);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out);
}
.placeholder:hover { border-color: var(--amber-600); transform: translateY(-3px); }

.placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-note {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ph-note strong { color: var(--text-muted); font-weight: 500; }
.ph-note svg { width: 22px; height: 22px; opacity: 0.55; }

/* großes Portrait-Platzhalterfeld (Team-Foto) */
.placeholder--portrait { aspect-ratio: 4 / 5; }
.placeholder--wide { aspect-ratio: 16 / 9; }
.placeholder--tall-span {
  grid-row: span 2;
  aspect-ratio: auto;
  min-height: 260px;
}

/* ==========================================================================
   12  KONTAKT
   ========================================================================== */
.contact-layout {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}
@media (min-width: 980px) {
  .contact-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.form-card {
  padding: clamp(1.3rem, 3.4vw, 2.4rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.field { margin-bottom: 1.3rem; }
.field label,
.fieldset-legend {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .optional { color: var(--text-dim); text-transform: none; letter-spacing: 0.02em; }

.field input,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }

.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.26); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(31, 154, 166, 0.16);
  background: rgba(0, 0, 0, 0.5);
}

/* Fehlerzustand (wird per JS gesetzt) */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #e2544a;
  box-shadow: 0 0 0 3px rgba(226, 84, 74, 0.14);
}
.field-error {
  display: none;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: #ff8177;
}
.field-error.is-visible { display: block; }

/* --- Themen-Auswahl: zwei große Kacheln (echte Radio-Buttons) --- */
.topic-fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }

.topic-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .topic-grid { grid-template-columns: 1fr 1fr; }
}

.topic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-out);
}
.topic:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); }

/* Radio visuell versteckt, aber fokussierbar und für Screenreader nutzbar */
.topic input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.topic-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.topic-icon svg { width: 22px; height: 22px; }

.topic-text { display: grid; gap: 0.15rem; }
.topic-title { font-weight: 600; color: var(--text); }
.topic-hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Auswahl-Zustand */
.topic:has(input:checked) {
  border-color: var(--topic-accent, var(--amber-500));
  background: color-mix(in srgb, var(--topic-accent, var(--amber-500)) 10%, transparent);
}
.topic:has(input:checked) .topic-icon {
  color: var(--topic-accent, var(--amber-500));
  border-color: color-mix(in srgb, var(--topic-accent, var(--amber-500)) 45%, transparent);
  background: color-mix(in srgb, var(--topic-accent, var(--amber-500)) 12%, transparent);
}
.topic:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 0.6rem; right: 0.8rem;
  font-size: 0.85rem;
  color: var(--topic-accent, var(--amber-500));
}
/* Fokusring auf der ganzen Kachel, wenn das Radio den Fokus hat */
.topic:has(input:focus-visible) {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
}
.topic--pv { --topic-accent: var(--teal-500); }
.topic--elektro { --topic-accent: var(--spark-500); }

/* --- Datenschutz-Checkbox --- */
.check-field label.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.6;
  cursor: pointer;
}
.check-field input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--amber-500);
  cursor: pointer;
}
.check-field a { color: var(--amber-400); }
.check-field input[aria-invalid="true"] { outline: 2px solid #e2544a; outline-offset: 2px; }

/* Rückmeldung nach dem Absenden */
.form-status {
  display: none;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  font-size: 0.95rem;
}
.form-status.is-visible { display: flex; }
.form-status.is-success {
  border-color: color-mix(in srgb, var(--teal-500) 55%, transparent);
  background: rgba(44, 158, 142, 0.12);
  color: #d7f2ec;
}
.form-status.is-error {
  border-color: rgba(226, 84, 74, 0.6);
  background: rgba(226, 84, 74, 0.1);
  color: #ffd9d5;
}
.form-status strong { display: block; margin-bottom: 0.15rem; color: inherit; }

.form-note {
  margin-top: 1.2rem;
  font-size: 0.83rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Kontaktkarte (Adresse als Text, keine Karten-Einbindung) --- */
.contact-aside { display: grid; gap: 1rem; align-content: start; }

.info-card {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.info-card h3 { font-size: 1.05rem; margin-bottom: 1rem; }

.contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-list svg { width: 19px; height: 19px; flex: none; margin-top: 0.28rem; color: var(--amber-500); }
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--amber-400); text-decoration: underline; }
.contact-list .ct-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.1rem;
}
.contact-list address { font-style: normal; color: var(--text); }

/* ==========================================================================
   13  CTA-BAND & FOOTER
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(31, 154, 166, 0.16), transparent 70%),
    radial-gradient(600px 320px at 90% 100%, rgba(44, 158, 142, 0.16), transparent 70%),
    var(--ink-850);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band .cta-inner {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}
@media (min-width: 860px) {
  .cta-band .cta-inner { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band p { color: var(--text-muted); margin: 0; max-width: 52ch; }

.site-footer {
  padding-top: clamp(2.6rem, 6vw, 4rem);
  padding-bottom: 1.6rem;
  background: var(--ink-950);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.6rem; }
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
  font-variation-settings: normal;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--amber-400); text-decoration: underline; }
.footer-col address { font-style: normal; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

.footer-about { color: var(--text-muted); font-size: 0.95rem; max-width: 40ch; margin-top: 1.1rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer-bottom a { color: var(--text-dim); text-decoration: none; }
.footer-bottom a:hover { color: var(--amber-400); }

/* --- "Was hilft uns bei der Anfrage" – nach Thema getrennt --------------- */
.ask-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* farbiger Punkt davor – gleiche Zuordnung wie bei den Themen-Kacheln */
.ask-head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ask-accent, var(--amber-500));
}
.ask-head--pv { --ask-accent: var(--teal-500); }
.ask-head--elektro { --ask-accent: var(--spark-500); margin-top: 1.6rem; }

.ask-list {
  margin: 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.ask-list li::marker {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.82em;
}

/* ==========================================================================
   13b  HELLE ABSCHNITTE
   --------------------------------------------------------------------------
   Die Seite ist grundsätzlich dunkel. Einzelne Abschnitte in der Mitte
   werden hell gesetzt – das gibt Rhythmus und wirkt freundlicher, ohne
   dass die Marke verloren geht.

   Der Trick: Das gesamte Stylesheet arbeitet mit Design-Tokens. Innerhalb
   von .section--light werden diese Tokens einfach umdefiniert. Dadurch
   drehen sich Karten, Rahmen, Textfarben und Icons automatisch mit – ohne
   dass für jede Komponente eine zweite Variante gepflegt werden muss.

   Wichtig: --ink-950 wird NICHT umdefiniert. Diese Farbe ist die
   Schriftfarbe auf den petrolfarbenen Buttons und muss dunkel bleiben.
   ========================================================================== */
.section--light {
  /* Flächen: warmes Off-White statt kaltem Reinweiß */
  --ink-900: #f7f4ef;
  --ink-850: #fffdfa;
  --ink-800: #f2eee7;
  --ink-750: #eae5dc;
  --ink-700: #ddd6ca;

  /* Text */
  --text: #232a2e;
  --text-muted: #4f5a60;
  /* Dunkler als das dunkle Pendant: die kleinen Mono-Beschriftungen
     (Eckdaten, Schritt-Zusätze) sind nur ~11 px groß und brauchen auf
     hellem Grund mindestens 4,5:1 Kontrast. */
  --text-dim: #545e5c;
  --white: #141a1d;          /* "Weiß" ist die Überschriftenfarbe -> hier dunkel */
  --line: rgba(20, 26, 29, 0.13);
  --line-strong: rgba(20, 26, 29, 0.22);

  /* Akzente dunkler ziehen, damit der Kontrast auf hellem Grund stimmt */
  --amber-400: #10646d;
  --amber-500: #14707a;
  --amber-600: #0e565e;
  --amber-glow: rgba(20, 112, 122, 0.22);
  --teal-400: #1c7567;
  --teal-500: #1f7a6d;
  --spark-400: #8a5a06;
  --spark-500: #a86a08;

  background: var(--ink-900);
  color: var(--text);
}

/* --- Übergang Dunkel <-> Hell ---------------------------------------------
   Kurzer, zurückhaltender Verlauf an der Kante. Bewusst dezent gehalten:
   eine lange, deckend startende Blende sah zwar technisch sauberer aus,
   legte aber einen dunklen Schleier über den oberen Teil des hellen
   Abschnitts – dieser knappe Verlauf wirkt frischer. */
.section--light { position: relative; }
.section--light::before,
.section--light::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 46px;
  pointer-events: none;
  z-index: 0;
}
.section--light::before { top: 0; background: linear-gradient(to bottom, rgba(11, 14, 16, 0.14), transparent); }
.section--light::after { bottom: 0; background: linear-gradient(to top, rgba(11, 14, 16, 0.1), transparent); }

/* Zwei helle Abschnitte direkt hintereinander wirken als EIN Block –
   dazwischen wird der Übergang komplett abgeschaltet. */
.section--light + .section--light::before { display: none; }
.section--light:has(+ .section--light)::after { display: none; }

/* Das feine Raster über der Seite ist für Dunkel gedacht – im hellen
   Abschnitt würde es als graue Streifen stören. */
.section--light .container { position: relative; z-index: 1; }

/* Karten im hellen Abschnitt bekommen einen zarten Schatten statt Glanzkante */
.section--light .card,
.section--light .info-card,
.section--light .step {
  box-shadow: 0 2px 14px rgba(20, 26, 29, 0.06);
}

/* ==========================================================================
   13c  PROJEKTSEITE
   ========================================================================== */
.project {
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
  border-top: 1px solid var(--line);
}
.project:first-of-type { border-top: 0; padding-top: 0; }

.project-head { max-width: 74ch; }
.project-head h2 { margin-bottom: 1rem; }
.project-head p { color: var(--text-muted); margin: 1.4rem 0 0; }

/* Eckdaten des Projekts */
.project-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .project-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.project-facts dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.project-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--white);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Bilder eines Projekts */
.project-shots {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
@media (min-width: 720px) {
  .project-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-shot--wide { grid-column: 1 / -1; }
}

.project-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-850);
}
.project-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  cursor: zoom-in;
  transition: transform 0.7s var(--ease-out);
}
.project-shot:hover img { transform: scale(1.035); }
.project-shot--wide img { aspect-ratio: 16 / 9; }

.project-shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 1rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(to top, rgba(4, 6, 7, 0.85), rgba(4, 6, 7, 0.4) 55%, transparent);
  pointer-events: none;
}

/* kleines Lupensymbol als Hinweis, dass man klicken kann */
.project-shot::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(7, 9, 10, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}
.project-shot:hover::after,
.project-shot:focus-within::after { opacity: 1; transform: scale(1); }

.project-note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.3rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.97rem;
  max-width: 70ch;
}

/* ==========================================================================
   13d  BILD-VERGRÖSSERUNG (Lightbox)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 1.4rem);
  padding: clamp(0.8rem, 3vw, 2.5rem);
  background: rgba(4, 6, 7, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lightboxIn 0.22s var(--ease-out) both;
}
.lightbox[hidden] { display: none; }

@keyframes lightboxIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-inner {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  max-height: 100%;
}
.lightbox-inner img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.lightbox-inner figcaption {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 60ch;
}

.lightbox-close,
.lightbox-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  cursor: pointer;
  flex: none;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.06); }
.lightbox-close svg,
.lightbox-nav svg { width: 22px; height: 22px; }

.lightbox-close {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  z-index: 2;
}

/* Auf dem Handy sitzen die Pfeile unten nebeneinander statt seitlich */
@media (max-width: 640px) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    justify-items: center;
  }
  .lightbox-inner { grid-row: 1; }
  .lightbox-prev { grid-row: 2; justify-self: start; }
  .lightbox-next { grid-row: 2; justify-self: end; }
  .lightbox-inner img { max-height: calc(100vh - 12rem); }
}

/* Wenn nur ein Bild vorhanden ist, brauchen wir keine Pfeile */
.lightbox.is-single .lightbox-nav { display: none; }

/* Seite hinter der Lightbox nicht mitscrollen lassen */
body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   13e  FOTO IN DEN LEISTUNGSBLÖCKEN
   ========================================================================== */
.service-photo {
  margin: 1.8rem 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 45%;
}
.service-photo figcaption {
  padding: 0.7rem 1rem 0.85rem;
  background: var(--ink-850);
  font-size: 0.87rem;
  color: var(--text-dim);
}

/* ==========================================================================
   14  SCROLL-REVEAL  (Klasse .is-visible kommt per IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* gestaffelte Verzögerung für Elementgruppen */
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }
.reveal[data-delay="4"] { transition-delay: 0.36s; }
.reveal[data-delay="5"] { transition-delay: 0.45s; }

/* Seiten-Kopf der Unterseiten */
.page-head {
  padding-block: clamp(2.6rem, 7vw, 4.6rem) clamp(1.6rem, 4vw, 2.6rem);
  background:
    radial-gradient(700px 340px at 80% 0%, rgba(31, 154, 166, 0.1), transparent 65%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900));
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: 0.9rem; }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber-400); }

/* Hinweisbox für Platzhalter-Rechtstexte */
.notice {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  margin-bottom: 2.4rem;
  background: rgba(31, 154, 166, 0.08);
  border: 1px solid color-mix(in srgb, var(--amber-500) 42%, transparent);
  border-radius: var(--radius);
  font-size: 0.93rem;
  color: #d3edf1;
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 0.2rem; color: var(--amber-400); }
.notice strong { color: #e6f6f8; }

/* zu ersetzender Platzhalter in Rechtstexten */
.todo {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  background: rgba(31, 154, 166, 0.16);
  border: 1px dashed var(--amber-600);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--amber-400);
}

/* ==========================================================================
   15  REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .nav, .cta-band, .hero-visual { display: none; }
  a { color: #000; }
}