/* ==========================================================================
   Kantonist Energy — Stylesheet
   Dark-Premium-Design nach Corporate Colors:
   Carbon #161616 · Stahlgrau #646C6F · Limettengrün #91D206
   Display: Archivo · Fließtext: Plus Jakarta Sans
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Plus+Jakarta+Sans:wght@300;400;500&display=swap");

:root {
  /* Base colors — Corporate */
  --color-lime: #91d206;
  --color-lime-bright: #a4e81a;
  --color-steel: #646c6f;
  --color-carbon: #131516;
  --color-carbon-deep: #0e1011;
  --color-graphite-card: #1b1e20;
  --color-graphite-raised: #22262a;
  --color-ink: #f4f6f2;          /* Primärtext auf dunklem Grund */
  --color-pure-white: #ffffff;
  --color-signal-orange: #ff5a26;

  /* Typography scale */
  --text-caption-sm: 12px; --leading-caption-sm: 1.5; --tracking-caption-sm: 0;
  --text-caption: 14px; --leading-caption: 1.5; --tracking-caption: 0;
  --text-body-sm: 16px; --leading-body-sm: 1.49; --tracking-body-sm: 0;
  --text-body: 18px; --leading-body: 1.33; --tracking-body: 0;
  --text-body-lg: 23px; --leading-body-lg: 1.25; --tracking-body-lg: 0;
  --text-subheading: 30px; --leading-subheading: 1.14; --tracking-subheading: -0.01em;
  --text-heading-sm: 36px; --leading-heading-sm: 1.1; --tracking-heading-sm: -0.015em;
  --text-heading: 48px; --leading-heading: 1.04; --tracking-heading: -0.02em;
  --text-heading-lg: 60px; --leading-heading-lg: 1; --tracking-heading-lg: -0.02em;
  --text-display: 92px; --leading-display: 0.96; --tracking-display: -0.025em;
  --font-weight-regular: 400;
  --font-weight-display: 500;
  --tracking-eyebrow: 0.14em;
  --tracking-logo: 0.14em;
  --font-regola: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Spacing */
  --spacing-5:5px; --spacing-6:6px; --spacing-8:8px; --spacing-9:9px;
  --spacing-10:10px; --spacing-12:12px; --spacing-14:14px; --spacing-15:15px;
  --spacing-16:16px; --spacing-18:18px; --spacing-24:24px; --spacing-30:30px;
  --spacing-32:32px; --spacing-36:36px; --spacing-42:42px; --spacing-54:54px;
  --spacing-96:96px; --spacing-120:120px;
  --page-max-width: 1344px;

  /* Radius */
  --radius-cards: 14px; --radius-pills: 24px; --radius-inputs: 10px;
  --radius-buttons: 10px; --radius-specialtycards: 18px;

  /* Elevation & lines */
  --shadow-subtle: rgba(0,0,0,0.35) 0px 1px 3px 0px;
  --shadow-md: rgba(0,0,0,0.45) 0px 6px 24px -6px;
  --glow-lime: var(--shadow-md); /* frühere Leuchtkante — jetzt bewusst nur Schatten */

  /* Signaturform der Marke: der Blitz aus dem Logo-Schild (clip-path). */
  --bolt: polygon(58% 0, 0 56%, 40% 56%, 30% 100%, 100% 40%, 60% 40%);
  --border-hairline: 1px solid rgba(255,255,255,0.09);
  --border-hairline-inverse: 1px solid rgba(255,255,255,0.15);

  /* Semantic */
  --surface-page: var(--color-carbon);
  --surface-card: var(--color-graphite-card);
  --surface-card-accent: var(--color-graphite-card);
  --surface-inverse: var(--color-carbon-deep);
  --surface-figure: #24282b;
  --surface-input: rgba(255,255,255,0.045);
  --surface-ghost: rgba(255,255,255,0.06);
  --surface-ghost-hover: rgba(255,255,255,0.1);
  --surface-ghost-inverse: rgba(255,255,255,0.10);
  --surface-ghost-inverse-hover: rgba(255,255,255,0.16);
  --surface-header: rgba(14,16,17,0.8);

  --text-primary: var(--color-ink);
  --text-secondary: #a9b0af;      /* Stahlgrau, aufgehellt für Lesbarkeit */
  --text-muted: #757d7c;
  --text-on-inverse: var(--color-pure-white);
  --text-on-inverse-secondary: rgba(255,255,255,0.62);
  --text-on-inverse-muted: rgba(255,255,255,0.4);
  --text-link: var(--color-lime);

  --action-primary: var(--color-lime);
  --action-primary-text: #10240a;
  --action-urgent: var(--color-lime);
  --action-urgent-text: #10240a;
  --action-secondary: var(--color-graphite-raised);
  --action-secondary-text: var(--color-ink);

  --focus-border: var(--color-lime);
  --rating-star: var(--color-lime);
  --duration-fast: .18s;
  --duration-reveal: .9s;
  --ease-standard: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchor-link targets: offset so the sticky header never covers the heading. */
#leistungen, #ablauf, #anfrage { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-regola);
  font-weight: var(--font-weight-regular);
  font-feature-settings: "lnum", "tnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Dekor darf seitlich überstehen, ohne die Seite zu verbreitern */
}
img { max-width: 100%; display: block; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-lime-bright); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .stat-value { font-family: var(--font-display); }
button { font-family: inherit; }
::selection { background: rgba(145,210,6,.85); color: #10240a; }
:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 2px; }
.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 32px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--color-lime); color: #10240a; padding: 12px 18px;
  border-radius: 8px; transition: top .18s ease;
}
.skip-link:focus { top: 8px; color: #10240a; }

section.sec { padding: 96px 0; }
section.sec.no-pad-top { padding-top: 0; }
section.sec.no-pad-bottom { padding-bottom: 0; }
section.sec.tight { padding: 72px 0; }

/* Wechselnde Sektionshintergründe — flächig in den Corporate Colors,
   keine Verläufe, keine Leuchteffekte:
   (Standard) Carbon · sec-steel = Corporate-Grau · sec-green = Corporate-Grün */
section.sec.sec-steel {
  background: var(--color-steel);
  --text-primary: #ffffff;
  --text-secondary: #e4e8e7;
  --text-muted: #cfd4d3;
  --text-link: #ffffff;
  --surface-card: rgba(22,22,22,.30);
  --surface-input: rgba(0,0,0,.20);
  --border-hairline: 1px solid rgba(255,255,255,.16);
  --action-secondary: #161616;
  --action-secondary-text: #ffffff;
}
section.sec.sec-steel .card { border-color: rgba(255,255,255,.12); box-shadow: none; }
section.sec.sec-steel .field select { background-color: #4b5255; }
section.sec.sec-steel .field select option, section.sec.sec-steel .field select optgroup { background-color: #4b5255; }
section.sec.sec-steel .field input[type="file"]::file-selector-button { background: #4b5255; }
section.sec.sec-steel .decor { color: rgba(255,255,255,.22); }
/* Lime auf Mittelgrau kontrastiert schlecht — Akzente dort in Weiß */
section.sec.sec-steel :is(.step-note, .step-kicker, .component-row-title .highlight, .faq-toggle, .service-card-title-row) { color: #fff; }
section.sec.sec-steel a:hover { color: #fff; }

section.sec.sec-green {
  background: var(--color-lime);
  color: var(--color-carbon);
  --text-primary: #161616;
  --text-secondary: rgba(22,22,22,.78);
  --text-muted: rgba(22,22,22,.6);
  --text-link: #161616;
  --border-hairline: 1px solid rgba(22,22,22,.18);
}
section.sec.sec-green .eyebrow { color: rgba(22,22,22,.7); }
section.sec.sec-green .eyebrow::before { color: #161616; }
section.sec.sec-green .eyebrow::after { background: rgba(22,22,22,.45); }
section.sec.sec-green h2, section.sec.sec-green h3 { color: #161616; }
section.sec.sec-green a:hover { color: #161616; }

/* Dunkler Button für grüne Flächen */
.btn-dark { background: var(--color-carbon); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Großer, ruhiger Blitz als Flächendekor (kein Glow) */
.bolt-decor {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(220px, 24vw, 420px); aspect-ratio: 160 / 220;
  background: rgba(22,22,22,.10); clip-path: var(--bolt);
  right: max(2vw, 20px); top: 50%; transform: translateY(-50%) rotate(12deg);
}
.bolt-decor.light { background: rgba(255,255,255,.05); }

/* Dekor-Elemente: inhaltsbezogene Outline-SVGs im Sektionshintergrund
   (includes/decor.php) — Parallax via [data-parallax] in main.js */
section.sec { position: relative; overflow: hidden; }
section.sec > .wrap { position: relative; z-index: 1; }
.decor {
  position: absolute; z-index: 0; pointer-events: none;
  color: rgba(148,157,160,.17); will-change: transform;
}
.decor svg { display: block; width: 100%; height: auto; overflow: visible; }
.decor-tr { top: 30px; right: max(2vw, 20px); width: clamp(230px, 26vw, 420px); }
.decor-tl { top: 30px; left: max(2vw, 20px); width: clamp(230px, 26vw, 420px); }
.decor-br { bottom: 30px; right: max(2vw, 20px); width: clamp(230px, 26vw, 420px); }
.decor-bl { bottom: 30px; left: max(2vw, 20px); width: clamp(190px, 20vw, 320px); }
.decor-mr { top: 34%; right: max(2vw, 20px); width: clamp(140px, 13vw, 210px); }
.decor-sm { width: clamp(140px, 13vw, 210px); }
.decor-wide { width: clamp(380px, 44vw, 680px); }
.decor-sun .decor-rays { animation: decor-spin 80s linear infinite; transform-origin: 100px 100px; }
@keyframes decor-spin { to { transform: rotate(360deg); } }

/* Lichtflecken ('glow' in decor.php) sind abgeschafft — bewusst kein Leuchten mehr. */
.decor-glow { display: none; }

.border-top { border-top: var(--border-hairline); }
.border-bottom { border-bottom: var(--border-hairline); }

/* ==========================================================================
   Icons
   ========================================================================== */
.icon {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.icon-filled { fill: currentColor; stroke: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .bar {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Logo mit Schriftzug (weiße Schrift, funktioniert nativ auf dunklem Grund).
   Unter ~44 px Höhe wird „GmbH“ unleserlich — darum ist der Header 80 px hoch. */
.brand { display: block; flex-shrink: 0; }
.brand img { height: 56px; width: auto; display: block; transition: opacity var(--duration-fast) ease; }
.brand:hover img { opacity: .85; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.main-nav a.nav-link {
  font: 400 16px var(--font-regola); letter-spacing:normal; color: var(--text-secondary);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.main-nav a.nav-link:hover { color: var(--color-ink); }
.main-nav a.nav-link.active { color: var(--color-ink); border-bottom-color: var(--color-lime); }
.burger { margin-left: auto; display: none; }
.mobile-panel {
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--color-carbon-deep);
  display: none;
}
.mobile-panel.open { display: block; }
.mobile-panel .wrap {
  padding: 18px 32px 24px; display: flex; flex-direction: column; gap: 18px;
}
.mobile-panel a.nav-link {
  font: 400 23px var(--font-regola); letter-spacing:normal; color: var(--color-ink);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14px var(--font-regola); letter-spacing:normal; line-height: 1.5;
  text-decoration: none; border: none; cursor: pointer;
  border-radius: var(--radius-buttons); padding: 14px 24px;
  transition: box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease, opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.btn-primary { background: var(--action-primary); color: var(--action-primary-text); }
.btn-primary:hover { background: var(--color-lime-bright); box-shadow: var(--shadow-md); color: var(--action-primary-text); transform: translateY(-1px); }
/* Marken-Blitz als Abschluss der Haupt-CTAs */
.btn-primary::after, .btn-dark::after {
  content: ""; width: 9px; height: 13px; flex-shrink: 0;
  background: currentColor; clip-path: var(--bolt);
}
.btn-secondary { background: var(--action-secondary); color: var(--action-secondary-text); border: var(--border-hairline); }
.btn-secondary:hover { background: #292e32; box-shadow: var(--shadow-subtle); color: var(--action-secondary-text); }
.btn-urgent { background: var(--action-urgent); color: var(--action-urgent-text); padding: 8px 18px; }
.btn-urgent:hover { box-shadow: var(--shadow-md); color: var(--action-urgent-text); }
.btn-ghost-inverse {
  background: var(--surface-ghost-inverse); color: var(--text-on-inverse);
  padding: 12px 24px; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-ghost-inverse:hover { background: var(--surface-ghost-inverse-hover); color: var(--text-on-inverse); }
.btn-full { width: 100%; padding: 18px; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

.icon-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-buttons);
  border: var(--border-hairline); background: rgba(255,255,255,0.04); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.icon-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(145,210,6,.5); }
.icon-btn .icon { width: 17px; height: 17px; }
.icon-btn.inverse { border: var(--border-hairline-inverse); background: transparent; color: var(--text-on-inverse-secondary); }
.icon-btn.inverse:hover { background: rgba(255,255,255,.08); color: var(--text-on-inverse); }
.icon-btn.icon-btn-lg { width: 40px; height: 40px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text-link);
  text-underline-offset: 3px; font: 500 14px var(--font-regola); letter-spacing:normal;
  background: none; border: none; padding: 0; cursor: pointer;
}
.link-arrow:hover { text-decoration: underline; color: var(--color-lime-bright); }

/* ==========================================================================
   Content components
   ========================================================================== */
/* Eyebrow: „01 —— LEISTUNGEN“. Die Ziffer kommt aus data-num, die Linie ist
   ein Pseudo-Element; Reihenfolge Ziffer → Linie → Text über flex-order. */
.eyebrow {
  margin: 0 0 24px; font-family: var(--font-display); font-size: var(--text-caption-sm); line-height: var(--leading-caption-sm);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  font-weight: 500; color: var(--text-secondary);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: attr(data-num); order: -2; color: var(--color-lime); letter-spacing: .04em; }
.eyebrow::after { content: ""; order: -1; width: 36px; height: 1px; background: rgba(255,255,255,.28); flex-shrink: 0; }
.eyebrow:not([data-num])::before { display: none; }
.eyebrow.inverse { color: rgba(255,255,255,.6); }

.section-head { margin-bottom: 54px; max-width: 62ch; min-width: 0; }
.section-head h2 {
  font-weight: var(--font-weight-display); color: var(--text-primary);
  font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  hyphens: auto; overflow-wrap: anywhere; /* lange Komposita („Bauunternehmen“) auf schmalen Screens */
}
.section-head .lead {
  margin: 24px 0 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm); color: var(--text-secondary);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* Kennzahlen-Band: sattes Corporate-Grün direkt unter dem Hero */
.stats-band { position: relative; overflow: hidden; background: var(--color-lime); color: var(--color-carbon); }
.stats-band .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-band .stat { padding: 42px 32px 42px 0; }
.stats-band .stat + .stat { padding-left: 32px; }
.stat-value {
  font-weight: var(--font-weight-display); font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); color: #161616;
}
.stat-label {
  margin: 10px 0 0; max-width: 30ch; color: rgba(22,22,22,.72);
  font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption);
}

.faq-item { border-top: var(--border-hairline); padding: 18px 0; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm); color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item .faq-toggle { color: var(--text-link); flex-shrink: 0; font-size: 20px; line-height: 1; }
.faq-item .faq-toggle::before { content: "+"; }
.faq-item[open] .faq-toggle::before { content: "\2013"; }
.faq-item p.faq-answer {
  margin: 16px 0 0; color: var(--text-secondary); font-size: var(--text-caption);
  line-height: var(--leading-caption); letter-spacing: var(--tracking-caption);
}

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card {
  background: var(--surface-card); border-radius: var(--radius-cards); padding: var(--spacing-32);
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-subtle);
}
.card.flush { padding: 0; overflow: hidden; }
.card:where(.service-card, .flush):hover { border-color: rgba(255,255,255,.12); }

/* B2B-Band (grüne Sektion): Text links, Foto rechts mit dunklem Versatzrahmen */
.b2b-figure { position: relative; }
.b2b-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-cards); position: relative; z-index: 1; }
.b2b-figure::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  background: var(--color-carbon); border-radius: var(--radius-cards);
}

.figure { background: var(--surface-figure); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure.ratio-4-3 { aspect-ratio: 4 / 3; }

.figure-placeholder {
  background: var(--surface-figure); display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-secondary); font-size: var(--text-caption-sm);
  letter-spacing: var(--tracking-caption-sm); padding: 24px;
}

/* Termin-Aufruf (Über uns): liegt in einer grünen Sektion, deshalb dunkle Schrift */
.promo-banner {
  color: #161616; display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-42); flex-wrap: wrap; text-decoration: none;
}
.promo-banner:hover { color: #161616; }
.promo-banner .promo-content { flex: 1 1 460px; min-width: 0; }
.promo-banner h3 {
  margin: 0 0 16px; max-width: 30ch; font-weight: var(--font-weight-display);
  font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  color: #161616;
}
.promo-banner p { margin: 0; max-width: 56ch; color: rgba(22,22,22,.75); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; }
.field label {
  display: block; font-size: var(--text-caption-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--spacing-8);
}
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; font: 400 var(--text-body-sm) var(--font-regola);
  letter-spacing: var(--tracking-body-sm); color: var(--text-primary); background: var(--surface-input);
  border: var(--border-hairline); border-radius: var(--radius-inputs); padding: var(--spacing-15); outline: none;
  font-family: var(--font-regola);
  color-scheme: dark;
}
/* Select: die aufklappende Liste zeichnet das Betriebssystem. Sie übernimmt die
   Feldfarbe, deshalb braucht das Feld einen deckenden Wert — mit halbtransparentem
   Hintergrund rendert Windows die Liste weiß auf weiß. Optionen zusätzlich
   explizit setzen, da manche Browser sie nicht vom Feld erben. */
.field select {
  background-color: var(--color-graphite-raised);
  color: var(--text-primary);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
.field select:hover { border-color: rgba(145,210,6,.45); }
.field select option, .field select optgroup {
  background-color: var(--color-graphite-raised);
  color: var(--text-primary);
}
.field select option:checked { background-color: rgba(145,210,6,.22); }

.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--focus-border); box-shadow: 0 0 0 3px rgba(145,210,6,.18);
}
.field input[type="file"] {
  padding: var(--spacing-10); font-size: var(--text-caption); cursor: pointer;
  color: var(--text-secondary);
}
/* Der Auswahl-Button im Datei-Feld wird sonst im hellen System-Stil gezeichnet */
.field input[type="file"]::file-selector-button {
  font: 500 13px var(--font-regola);
  background: var(--color-graphite-raised); color: var(--text-primary);
  border: var(--border-hairline); border-radius: 8px;
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.field input[type="file"]::file-selector-button:hover {
  background: #2b3136; border-color: rgba(145,210,6,.45);
}
.field-hint {
  margin: 8px 0 0; font-size: var(--text-caption-sm); line-height: var(--leading-caption-sm);
  color: var(--text-muted);
}
.field-hint:empty { display: none; }
.field-hint.error { color: #ff8a5e; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--text-secondary); font-size: var(--text-caption-sm); line-height: var(--leading-caption-sm); letter-spacing: var(--tracking-caption-sm); }
.consent input { width: auto; padding: 0; margin-top: 3px; accent-color: var(--color-lime); }

.form-status { margin: 0 0 15px; padding: 14px 15px; border-radius: var(--radius-inputs); font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); display: none; }
.form-status.visible { display: block; }
.form-status.success { background: rgba(145,210,6,.12); color: var(--color-lime); }
.form-status.error { background: rgba(255,90,38,.12); color: #ff8a5e; }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; height: 88vh; min-height: 640px; overflow: hidden; background: var(--color-carbon-deep);
}
.hero .hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: kburns 28s ease-out both, photoin 1.8s var(--ease-standard) both;
}
.hero video.hero-bg {
  width: 100%; height: 100%; object-fit: cover; animation: photoin 1.8s var(--ease-standard) both;
}
/* Video-Rotation: mehrere Hero-Videos werden weich übergeblendet (main.js) */
.hero .hero-media { position: absolute; inset: 0; }
.hero .hero-media video.hero-bg {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.2s var(--ease-standard);
  animation: none; /* photoin würde per fill-mode die Opacity-Überblendung überschreiben */
}
.hero .hero-media video.hero-bg.is-active { opacity: 1; }
.hero .scrim-1 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,12,10,.78) 0%, rgba(10,12,10,.3) 65%, rgba(10,12,10,.15) 100%); }
.hero .scrim-2 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,16,17,.5) 0%, rgba(14,16,17,0) 32%, rgba(14,16,17,0) 55%, var(--color-carbon) 100%); }
.hero .hero-content {
  position: relative; z-index: 1; height: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero .logo-mark { width: 150px; height: auto; margin: 0 0 24px; animation: rise .9s var(--ease-standard) both; }
.hero .kicker { margin: 0 0 24px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); animation: rise .9s .13s var(--ease-standard) both; }
.hero h1 {
  margin: 0; max-width: 16ch; font-weight: var(--font-weight-display); font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); color: #fff; animation: rise .9s .13s var(--ease-standard) both;
}
.hero .hero-lead {
  margin: 24px 0 0; max-width: 46ch; font-size: var(--text-body-lg); line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg); color: rgba(255,255,255,.82); animation: rise .9s .26s var(--ease-standard) both;
}
.hero .btn-row { margin-top: 36px; display: flex; gap: 12px; animation: rise .9s .39s var(--ease-standard) both; }
.hero .meta-row {
  margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); display: flex; gap: 24px;
  animation: rise .9s .52s var(--ease-standard) both;
}
.hero .meta-row p { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.page-hero {
  position: relative; background: var(--color-carbon-deep); overflow: hidden;
}
.page-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .45; animation: photoin45 1.8s var(--ease-standard) both; }
.page-hero .scrim-1 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,12,10,.92), rgba(10,12,10,.45)), linear-gradient(to bottom, transparent 60%, var(--color-carbon) 100%); }
.page-hero .wrap { position: relative; padding: 120px 32px 96px; }
.page-hero h1 {
  margin: 24px 0 0; font-weight: var(--font-weight-display); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); color: #fff;
}
.page-hero .hero-lead {
  margin: 24px 0 0; max-width: 46ch; font-size: var(--text-body-lg); line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg); color: rgba(255,255,255,.82);
}

.about-hero h1 {
  margin: 0; font-weight: var(--font-weight-display); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); color: var(--text-primary);
}
.about-hero .lead {
  margin: 0; max-width: 52ch; font-size: var(--text-body); line-height: var(--leading-body);
  letter-spacing: var(--tracking-body); color: var(--text-secondary);
}
.figure-portrait-4-5 { aspect-ratio: 4/5; border-radius: 12px; }

/* ==========================================================================
   Grids
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-footer { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }
.grid-asym-b2b { display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; }
.grid-asym-about { display: grid; grid-template-columns: 1fr .85fr; gap: 54px; align-items: center; }
.grid-asym-faq { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; align-items: start; }
.grid-asym-imprint { display: grid; grid-template-columns: .7fr 1.3fr; gap: 54px; align-items: start; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }

/* Leistungen cards */
.service-card { display: flex; flex-direction: column; height: 100%; transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease; }
.service-card:hover { transform: translateY(-3px); }
.service-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.service-card-body { flex: 1; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.service-card-body .btn { margin-top: auto; align-self: flex-start; }
.service-card-title-row { display: flex; align-items: center; gap: 12px; color: var(--color-lime); }
.service-card-title-row .icon { color: var(--color-lime); }
.service-card-title-row p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink); }
.service-card-body > p.desc { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--text-secondary); }

/* Ablauf / step cards */
.step-card { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.step-card .step-kicker { display: flex; align-items: center; gap: 12px; color: var(--color-lime); }
.step-card .step-kicker p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-caption-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.step-card .step-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); letter-spacing: var(--tracking-body-lg); }
.step-card .step-desc { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--text-secondary); }
.step-card .step-note { margin: auto 0 0; padding-top: 18px; border-top: var(--border-hairline); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--color-lime); }

/* Component rows (PV/WP pages) */
.component-row-title { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.component-row-title .highlight { color: var(--color-lime); }
/* Hinweis unter den Komponenten: Empfehlung, kein Zwang — andere Hersteller möglich */
.component-note {
  margin: 24px 0 0; padding: 18px 24px; border-left: 3px solid var(--color-lime);
  background: rgba(22,22,22,.22); border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0;
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--text-secondary); max-width: 72ch;
}
.component-note strong { color: var(--text-primary); font-weight: 500; }
.logo-placeholder { height: 48px; border-radius: 12px; background: var(--surface-figure); display: flex; align-items: center; justify-content: center; font-size: var(--text-caption-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.logo-image { height: 48px; width: auto; max-width: 160px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px 10px; }

/* ==========================================================================
   Projects carousel
   ========================================================================== */
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 42px; flex-wrap: wrap; }
.carousel-controls { display: flex; gap: 12px; flex-shrink: 0; }
.carousel-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .project-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.project-card-body { padding: 24px 24px 30px; display: flex; flex-direction: column; gap: 8px; }
.project-card-body .project-title { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.project-card-body .project-note { margin: 0; font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--text-secondary); }

/* Vorteile head (Über uns) */
.vorteile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vorteile-note { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing:normal; color: var(--text-secondary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--surface-inverse); color: #fff; border-top: 1px solid rgba(255,255,255,.07); }
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col.links { gap: 14px; }
.footer-logo { width: 180px; height: auto; }
.footer-address { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: rgba(255,255,255,.62); }
.footer-address a { color: rgba(255,255,255,.62); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: rgba(255,255,255,.62); }
.footer-social { display: flex; gap: 12px; }
.footer-col-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.footer-col a.footer-link { font: 400 16px var(--font-regola); letter-spacing:normal; color: rgba(255,255,255,.62); text-align: left; }
.footer-col a.footer-link:hover { color: var(--color-lime); }
.footer-bottom {
  max-width: var(--page-max-width); margin: 0 auto; padding: 24px 32px 42px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 24px;
}
.footer-bottom p { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing:normal; color: rgba(255,255,255,.4); }

/* ==========================================================================
   Datenschutz / Impressum content
   ========================================================================== */
.legal-block { display: flex; flex-direction: column; gap: 12px; }
.legal-block .label { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.legal-block .value { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.legal-block .value-sm { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--text-secondary); }
.legal-block h3 { margin: 0; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); letter-spacing: var(--tracking-body-lg); font-weight: var(--font-weight-regular); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes kburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes photoin { from { opacity: 0; } to { opacity: 1; } }
@keyframes photoin45 { from { opacity: 0; } to { opacity: .45; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-reveal] { opacity: 0; }
[data-reveal].revealed { animation: rise .9s var(--ease-standard) both; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  [data-reveal] { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive breakpoints
   (mirrors the design system's tested breakpoints at 1100 / 820 / 640px)
   ========================================================================== */
@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-footer { grid-template-columns: 1fr 1fr 1fr !important; row-gap: 42px !important; }
  .carousel-track .project-card { flex: 0 0 calc((100% - 24px) / 2) !important; }
  .hero h1 { font-size: 60px !important; letter-spacing: -0.015em !important; }
}

@media (max-width: 820px) {
  .wrap, .site-header .bar, .mobile-panel .wrap, .page-hero .wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .grid-2, .grid-asym-b2b, .grid-asym-about, .grid-asym-faq, .grid-asym-imprint, .grid-form { grid-template-columns: 1fr !important; gap: 36px !important; }
  .main-nav { display: none !important; }
  .burger { display: block !important; }
  .decor { display: none !important; } /* Dekor-SVGs ausblenden — zu wenig Platz; Glows bleiben */
  section.sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .hero h1 { font-size: 48px !important; letter-spacing: -0.01em !important; max-width: none !important; }
  .page-hero h1, .about-hero h1 { font-size: 40px !important; letter-spacing: -0.01em !important; }
  .section-head h2, .promo-banner h3 { font-size: 38px !important; letter-spacing: -0.015em !important; }
  .grid-2 > *, .grid-asym-b2b > *, .grid-asym-about > *, .grid-asym-faq > *, .grid-form > * { min-width: 0 !important; }
  .hero { height: auto !important; min-height: 0 !important; padding: 120px 0 72px !important; }
  .hero .meta-row { flex-wrap: wrap !important; gap: 18px !important; }
  .brand img { height: 46px !important; }
  .stats-band .wrap { grid-template-columns: 1fr !important; }
  .stats-band .stat { padding: 24px 0 !important; }
  .bolt-decor { display: none !important; }
  .b2b-figure::before { display: none !important; }
  .field-row { grid-template-columns: 1fr; }
  .grid-footer { grid-template-columns: 1fr 1fr !important; }
  .carousel-head, .reviews-head, .vorteile-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .reviews-action { margin-left: 0 !important; }
  .carousel-controls { margin-top: 6px; }
}

@media (max-width: 640px) {
  :root { --spacing-32: 20px; --spacing-36: 22px; --spacing-24: 16px; }
  .grid-3, .grid-4, .grid-footer { grid-template-columns: 1fr !important; }
  .carousel-track .project-card { flex: 0 0 100% !important; }
  .hero h1 { font-size: 38px !important; letter-spacing: -0.01em !important; }
  .page-hero h1, .about-hero h1 { font-size: 32px !important; letter-spacing: -0.01em !important; }
  .section-head h2, .promo-banner h3 { font-size: 32px !important; letter-spacing: -0.01em !important; }
  .stat-value { font-size: 30px !important; }
  .hero .btn-row { flex-direction: column !important; align-items: stretch !important; }
  .hero .btn-row a, .hero .btn-row button { width: 100% !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; }
  section.sec { padding-top: 54px !important; padding-bottom: 54px !important; }
}