/* ============================================================
   ARO TECHNOLOGIES — Shared Site Tokens & Components
   Used by all subpages: PV-Wartung, Drohneninspektion, BESS,
   Repowering, Team, Referenzen, Blog, Impressum, Datenschutz
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  --bg:      #000;
  --bg2:     oklch(0.08 0 0);
  --bg-light: oklch(0.965 0.008 242);
  --border:  oklch(0.20 0 0);
  --border-light: oklch(0.88 0.01 242);
  --accent:  oklch(0.74 0.19 185);
  --accent-d: oklch(0.66 0.18 185);
  --violet:  oklch(0.58 0.22 298);
  --violet-l: oklch(0.78 0.18 298);
  --amber:   oklch(0.78 0.14 85);
  --text:    oklch(0.91 0.012 242);
  --text-dark: oklch(0.14 0.02 242);
  --muted:   oklch(0.56 0.03 242);
  --muted-light: oklch(0.42 0.03 242);

  --font:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hero:    'Space Grotesk', sans-serif;
  --mono:    'Space Mono', monospace;

  --nav-h: 84px;
  --container: 1280px;
}

/* Breite Monitore: Container mitwachsen lassen, damit links/rechts
   nicht übermäßig viel Leerraum bleibt (gilt für Nav, Footer & alle Seiten) */
@media (min-width: 1680px) {
  :root { --container: min(1600px, 88vw); }
}
@media (min-width: 2200px) {
  :root { --container: min(1800px, 80vw); }
}
/* Große Desktops: gesamte UI moderat hochskalieren — Copy-Texte bleiben lesbar.
   `zoom` skaliert wie Browser-Zoom, px-Layouts inklusive. */
@media (min-width: 1920px) {
  html { zoom: 1.1; }
}
@media (min-width: 2560px) {
  html { zoom: 1.22; }
}
/* Landing-Page (React) setzt max-width inline — hier gezielt überschreiben */
@media (min-width: 1680px) {
  #root div[style*="max-width: 1280px"] { max-width: var(--container) !important; }
}
/* ── Vereinheitlichte Hero-Ausrichtung ───────────────────────────────────
   Hero-Inhalt beginnt an derselben linken Container-Kante wie alle übrigen
   Sektions-Headlines — auf Landing UND Unterseiten. width:100% ist nötig,
   weil die Hero-Sektionen Flexbox sind (sonst schrumpft der Container auf
   Inhaltsbreite und zentriert sich im Bild). */
.hero .inner,
.hero-section .inner,
.hero-bess .inner {
  max-width: var(--container) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Vereinheitlichte Hero-Designsprache ───────────────────────────
   Gitter liegt nur über dem Header-Bild (rechts) und fadet nach links aus;
   das Bild selbst fadet weich in den Seitenhintergrund — keine harte Kante.
   Gilt für alle Hero-Bild-Varianten: .hero__bgwrap / .hero-bgwrap / .hero-bess__bg */
#hero.grid-bg { background-image: none; }
section.hero.grid-bg,
section.hero-section.grid-bg,
section.hero-bess.grid-bg { background-image: none; }
#hero > div[style*="background-size: 60px 60px"] {
  -webkit-mask-image: linear-gradient(to right, transparent 30%, oklch(0 0 0) 68%);
  mask-image: linear-gradient(to right, transparent 30%, oklch(0 0 0) 68%);
}
.hero__bgwrap, .hero-bgwrap, .hero-bess__bg { width: 62% !important; }
.hero__bgwrap::after, .hero-bgwrap::after, .hero-bess__bg::after {
  background:
    linear-gradient(to right, var(--bg, #000) 0%, oklch(0 0 0 / .90) 38%, oklch(0 0 0 / .68) 60%, oklch(0 0 0 / .40) 80%, oklch(0 0 0 / .18) 100%),
    linear-gradient(to bottom, transparent 62%, var(--bg, #000) 100%) !important;
}
/* Altes Box-Gitter (nur im Bild) ausblenden — ersetzt durch Vollflächen-Gitter */
.hero__bgwrap .grid-overlay, .hero-bgwrap .grid-overlay, .hero-bess__bg .grid-overlay { display: none; }
/* Vollflächen-Gitter über dem gesamten Hero, von rechts nach links ausfadend —
   exakt die Parameter der Startseite (Linien .6, opacity .35, 60px, Maske 30→68%) */
section.hero::before,
section.hero-section::before,
section.hero-bess::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.55 0 0 / .6) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.55 0 0 / .6) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, oklch(0 0 0) 68%);
  mask-image: linear-gradient(to right, transparent 30%, oklch(0 0 0) 68%);
}
@media (max-width: 880px) {
  .hero__bgwrap, .hero-bgwrap, .hero-bess__bg { width: 100% !important; opacity: .35; }
}
nav[aria-label="Hauptnavigation"] > div[style*="height: 72px"] {
  height: var(--nav-h) !important;
  max-width: var(--container) !important;
}
nav[aria-label="Hauptnavigation"] a[href="#hero"] img {
  height: 38px !important;
  /* Logo-SVG trägt echte Markenfarben */
  filter: none; /* SVG trägt echte Markenfarben */
}
nav[aria-label="Hauptnavigation"] .desktop-nav {
  gap: clamp(14px, 1.6vw, 32px) !important;
}
nav[aria-label="Hauptnavigation"] .desktop-nav > a:not(.btn-primary):not(.header-phone) {
  font-size: clamp(14px, 1.05vw, 16px) !important;
  color: oklch(0.82 0 0);
  white-space: nowrap;
}
nav[aria-label="Hauptnavigation"] .desktop-nav > a.header-phone { font-size: 15px !important; white-space: nowrap; }
nav[aria-label="Hauptnavigation"] .desktop-nav > a.btn-primary {
  font-size: 15px !important;
  padding: 12px 26px !important;
}
nav[aria-label="Hauptnavigation"] .desktop-nav > button { font-size: 12px !important; padding: 6px 12px !important; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- A11y ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.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; top: -100px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--text-dark);
  padding: 12px 20px; border-radius: 4px;
  font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Typography ---------- */
.lbl, .label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
  text-transform: uppercase;
}
/* Overline-Kicker: einheitlich 13px, auch wo Seiten 11px inline setzen */
.section-label { font-size: 13px !important; }
span.lbl, .lbl { font-size: 13px !important; }

/* FAQ: lesbare Antworten + geöffnet im Marken-Violett (wie Landing-Karten) */
details.faq__item > p { color: oklch(0.80 0.015 242) !important; }
details.faq__item[open] {
  background: linear-gradient(135deg, oklch(0.20 0.08 298), oklch(0.13 0.04 298)) !important;
  border-color: oklch(0.45 0.18 298) !important;
}
details.faq__item[open] > summary { color: #fff !important; }
details.faq__item[open] > p { color: oklch(0.90 0.02 290) !important; }
.h2, h2.h2 {
  font-family: var(--hero);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -.01em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  min-height: 44px; /* WCAG touch target */
}
.btn:hover { opacity: .85; }
.btn:active { transform: translateY(1px); }
.btn-o, .btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-o:hover, .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  transition: border-color .2s;
}
.card:hover { border-color: oklch(0.35 0 0); }

/* ---------- Layout ---------- */
.sec, .section { padding: 80px clamp(24px, 5vw, 80px); }
.inner { max-width: var(--container); margin: 0 auto; }
.grid-bg {
  background-image: linear-gradient(oklch(0.28 0 0) 1px, transparent 1px),
                    linear-gradient(90deg, oklch(0.28 0 0) 1px, transparent 1px);
  background-size: 60px 60px;
}
.divider {
  height: 2px;
  background: linear-gradient(90deg, oklch(0.35 0.22 298), oklch(0.74 0.19 185), oklch(0.74 0.19 240));
  opacity: .6;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* .fu = fade-up. Default to fully visible so content is always rendered;
   animation only enhances initial entry. Never let opacity stick at 0. */
.fu {
  opacity: 1;
  animation: fadeUp .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .fu { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   NAV — shared across all subpages
   ============================================================ */
.aro-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, oklch(0.35 0.22 298 / .45), oklch(0.74 0.19 185 / .45), oklch(0.74 0.19 240 / .45)) 1;
  padding: 0 clamp(24px, 5vw, 80px);
  transition: all .3s;
  isolation: isolate;
}
.aro-nav__inner { height: var(--nav-h); }
.aro-nav__logo img { height: 36px; filter: none; }
.aro-nav__lang {
  background: none;
  border: 1px solid var(--border, oklch(0.20 0 0));
  border-radius: 4px;
  color: var(--muted, oklch(0.65 0 0));
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  transition: all .15s;
}
.aro-nav__lang:hover { color: var(--text, #fff); border-color: oklch(0.35 0.04 242); }
.aro-nav__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text, #fff);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s;
  white-space: nowrap;
}
.aro-nav__phone:hover { color: var(--accent); }
@media (max-width: 1100px) { .aro-nav__phone { display: none; } }
.aro-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.aro-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.aro-nav__logo img {
  height: 34px;
  width: auto;
  filter: none; /* SVG trägt echte Markenfarben */
}
.aro-nav__links {
  display: flex;
  gap: clamp(12px, 1.4vw, 28px);
  align-items: center;
}
.aro-nav__links a:not(.btn) {
  color: oklch(0.82 0 0);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.aro-nav__links a:not(.btn):hover { color: var(--accent); }
/* Aktive Seite — höhere Spezifität, damit es generische Regel sicher schlägt */
.aro-nav .aro-nav__links a:not(.btn)[aria-current="page"],
header.aro-nav .aro-nav__links a[aria-current="page"] {
  color: var(--accent) !important;
  position: relative;
}
.aro-nav .aro-nav__links a:not(.btn)[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 12px oklch(0.74 0.19 185 / 0.5);
}
.aro-nav .aro-nav__cta,
header.aro-nav a.btn.aro-nav__cta,
header.aro-nav .aro-nav__cta:link,
header.aro-nav .aro-nav__cta:visited {
  color: #fff !important;
  padding: 12px 26px !important;
  font-size: 15px !important;
  min-height: 46px !important;
  background: var(--accent) !important;
  white-space: nowrap !important;
}
.aro-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid oklch(0.30 0 0);
  border-radius: 6px;
  width: 44px; height: 44px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.aro-nav__toggle:hover { border-color: var(--accent); color: var(--accent); }
.aro-nav__toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
@media (max-width: 960px) {
  .aro-nav__links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    height: calc(100dvh - var(--nav-h));
    width: min(320px, 86vw);
    background: oklch(0.04 0 0);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .aro-nav__links[data-open="true"] { transform: translateX(0); }
  .aro-nav__links a:not(.btn) {
    padding: 14px 12px;
    border-bottom: 1px solid oklch(0.14 0 0);
    font-size: 15px;
  }
  .aro-nav__cta { margin-top: 16px; align-self: flex-start; }
  .aro-nav__toggle { display: inline-flex; }
}

/* ============================================================
   FOOTER — mirrors the landing page <Footer/> exactly
   ============================================================ */
.aro-footer {
  background: var(--bg2);
  padding: 56px clamp(24px, 5vw, 80px) 32px;
  position: relative;
}
.aro-footer__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, oklch(0.35 0.22 298 / .45), oklch(0.74 0.19 185 / .45), oklch(0.74 0.19 240 / .45));
}
.aro-footer__inner {
  max-width: var(--container, 1280px);
  margin: 0 auto;
}
.aro-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
  align-items: start;
}
@media (max-width: 1100px) {
  .aro-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px 40px;
  }
  .aro-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .aro-footer__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.aro-footer__col h4 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.aro-footer__col h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 28px; height: 1px;
  background: var(--accent);
}
.aro-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aro-footer__col a {
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s;
}
.aro-footer__col a:hover { color: var(--accent); }
.aro-footer__brand .aro-footer__logos {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.aro-footer__logo--tech {
  height: 64px;
  width: auto;
  filter: none; /* SVG trägt echte Markenfarben */
}
.aro-footer__logo--energy {
  height: 56px;
  width: auto;
  filter: none; /* SVG trägt echte Markenfarben */
}
.aro-footer__divider {
  width: 1px;
  height: 56px;
  background: var(--border);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .aro-footer__brand .aro-footer__logos { gap: 18px; }
  .aro-footer__logo--tech { height: 52px; }
  .aro-footer__logo--energy { height: 46px; }
  .aro-footer__divider { height: 46px; }
}
.aro-footer__tag {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 260px;
}
.aro-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.aro-footer__sociallink {
  color: var(--muted);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.aro-footer__sociallink:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.aro-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aro-footer__contactrow {
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.6;
  transition: color .15s;
}
.aro-footer__contactrow svg { flex-shrink: 0; }
.aro-footer__contactrow:hover { color: var(--accent); }
.aro-footer__contactrow--static { align-items: flex-start; }
.aro-footer__contactrow--static svg { margin-top: 2px; }
.aro-footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.aro-footer__copy {
  color: var(--muted);
  font-size: 13px;
}
.aro-footer__tagline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--border);
  letter-spacing: .08em;
}

/* ============================================================
   Body offset for fixed nav
   ============================================================ */
body.has-fixed-nav { padding-top: var(--nav-h); }

/* ============================================================
   PAGE THEMING — pro Unterseite ein Akzent-Charme
   Aktiviere via <body data-page-theme="drone|bess|repower|team|blog|wartung">
   Standard: Türkis (Landing-Akzent)
   ============================================================ */
:root { --page-accent: var(--accent); --page-accent-d: var(--accent-d); }
body[data-page-theme="wartung"]  { --page-accent: oklch(0.74 0.19 185); --page-accent-d: oklch(0.66 0.18 185); }
body[data-page-theme="drone"]    { --page-accent: oklch(0.66 0.22 298); --page-accent-d: oklch(0.58 0.22 298); }
body[data-page-theme="bess"]     { --page-accent: oklch(0.78 0.14 85);  --page-accent-d: oklch(0.70 0.14 85); }
body[data-page-theme="repower"]  { --page-accent: oklch(0.78 0.18 155); --page-accent-d: oklch(0.66 0.18 155); }
body[data-page-theme="team"]     { --page-accent: oklch(0.74 0.19 185); --page-accent-d: oklch(0.66 0.18 185); }
body[data-page-theme="blog"]     { --page-accent: oklch(0.72 0.18 240); --page-accent-d: oklch(0.62 0.18 240); }

/* Themed accent overrides – nur dort, wo Charme sichtbar werden soll.
   Globale Akzente (Buttons, Nav-CTA) bleiben Türkis für Markenkonsistenz. */
body[data-page-theme] .lbl,
body[data-page-theme] .label,
body[data-page-theme] .eyebrow,
body[data-page-theme] .page-eyebrow {
  color: var(--page-accent);
}
body[data-page-theme] .hero__glow--themed {
  background: color-mix(in oklch, var(--page-accent) 18%, transparent);
}
body[data-page-theme] .divider--themed {
  background: linear-gradient(90deg, transparent, var(--page-accent), transparent);
  opacity: .55;
}

/* ============================================================
   BREADCRUMBS — schmale, mono-typografische Pfadanzeige
   ============================================================ */
.crumbs {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px clamp(24px, 5vw, 80px) 0;
  position: relative;
  z-index: 5; /* über Hero-Hintergrund */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--page-accent); }
.crumbs__sep { color: oklch(0.32 0 0); }
.crumbs__cur { color: var(--page-accent); }

/* ============================================================
   PAGE EYEBROW — große Mono-Kennung über dem H1 jeder Unterseite
   Format: "— 02 / Drohneninspektion"
   ============================================================ */
.page-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--page-accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-weight: 700;
}
.page-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--page-accent);
  display: inline-block;
}

/* ============================================================
   STICKY CTA — schwebender „Anfrage stellen" Button (mobile-first)
   ============================================================ */
.sticky-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px oklch(0 0 0 / .5), 0 0 0 1px oklch(0.74 0.19 185 / .5);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  transition: transform .2s, box-shadow .2s, background .2s;
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
}
.sticky-cta[data-show="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta:hover {
  background: oklch(0.80 0.19 185);
  color: #ffffff;
  box-shadow: 0 14px 36px oklch(0 0 0 / .55), 0 0 0 1px oklch(0.74 0.19 185 / .8);
  transform: translateY(-2px);
}
.sticky-cta:visited { color: #ffffff; }
.sticky-cta:link { color: #ffffff; }
.sticky-cta svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .sticky-cta {
    left: 16px; right: 16px;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
  }
}
@media print { .sticky-cta { display: none !important; } }

/* ============================================================
   INLINE CTA STRIP — kleine, wiederverwendbare CTA-Zeile zwischen Sektionen
   ============================================================ */
.cta-strip {
  background: linear-gradient(
    135deg,
    oklch(0.10 0.04 242) 0%,
    oklch(0.06 0 0) 100%
  );
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px clamp(24px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--page-accent), transparent);
  opacity: .6;
}
.cta-strip__text { flex: 1 1 320px; }
.cta-strip__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin-bottom: 8px;
  display: block;
}
.cta-strip__title {
  font-family: var(--hero);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.cta-strip__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   ERROR PAGE — 404 / Fehlerseite
   ============================================================ */
.errpage {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px clamp(24px, 5vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.errpage__code {
  font-family: var(--mono);
  font-size: clamp(80px, 18vw, 200px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--page-accent), var(--violet-l));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.errpage__h1 {
  font-family: var(--hero);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.errpage__p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}
.errpage__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────
   ARO • Gemeinsames Mobile-Stylesheet
   Wird in allen Unterseiten (PV-Wartung, BESS, Drohneninspektion,
   Repowering, Blog, Team) inkludiert.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Hero: Stack auf 880px ─────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero { padding: calc(var(--nav-h, 72px) + 32px) 24px 56px !important; }
  .hero h1 { font-size: clamp(34px, 8vw, 56px) !important; line-height: 1.05 !important; }
  .hero p.lead, .hero .lead { font-size: clamp(15px, 3.5vw, 17px) !important; }
  .hero__inner { max-width: 100% !important; }
}

/* ── Buttons full-width auf 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  .hero a[class*="btn"],
  .pkg__cta,
  .cta a[class*="btn"],
  a.btn-primary,
  a.btn-outline,
  button.btn-primary,
  button.btn-outline {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 24px !important;
  }
  .hero > .inner > .hero__inner > div[style*="flex"][style*="gap"],
  .cta > .cta__inner > div[style*="flex"] {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ── Touch-Targets ≥ 44×44 (WCAG 2.5.5) ────────────────────────────────── */
@media (max-width: 768px) {
  a[class*="btn"],
  button:not(.unstyled),
  .pkg__cta,
  details > summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  nav a { padding: 10px 8px !important; }
}

/* ── Inputs: ≥16px Schrift, größere Tap-Targets ───────────────────────── */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
}

/* ── Sections: tighter padding auf Mobile ──────────────────────────────── */
@media (max-width: 640px) {
  section.sec, section.hero, section.pakete, section.cta {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .sec-head h2, .h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .stats { padding: 32px 24px !important; }
  .stats__grid { gap: 24px !important; }
  .stats__num { font-size: clamp(28px, 8vw, 40px) !important; }
}

/* ── Pakete: enger Spacing & klare Trennung ────────────────────────────── */
@media (max-width: 640px) {
  .pkg-grid { gap: 20px !important; }
  .pkg { padding: 28px 24px !important; }
  .pkg__features li { font-size: 14px !important; line-height: 1.55 !important; }
}

/* ── Footer: stack columns ─────────────────────────────────────────────── */
@media (max-width: 540px) {
  footer .ft-inner,
  footer [style*="grid"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ── Nav: kein horizontales Scrolling ──────────────────────────────────── */
@media (max-width: 1024px) {
  body { overflow-x: hidden; }
}

/* ── FAQ details: Lesbarkeit ───────────────────────────────────────────── */
@media (max-width: 640px) {
  details.faq__item summary { font-size: 15px !important; padding: 18px 20px !important; }
  details.faq__item p { font-size: 14px !important; padding: 0 20px 18px !important; }
}

/* ── Mobile Tap-Targets (WCAG 2.5.5 — min. 44×44) ──────────────────────── */
@media (max-width: 760px) {
  .aro-footer a,
  .aro-footer button,
  .aro-foot__col a,
  .aro-foot__legal a,
  .aro-foot__lang button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Inputs nicht unter 16px (iOS auto-zoom-Schutz) */
  input, textarea, select { font-size: 16px !important; }
}

/* ── Mobile Mindest-Schriftgröße: Microlabels 10/11px → 12px ─────────── */
@media (max-width: 640px) {
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"],
  .lbl, .section-label,
  .stats__lbl, .stats-strip__lbl, .stat-cell__label {
    font-size: 12px !important;
  }
}


/* ── A11Y: sichtbarer Tastatur-Fokus (global, alle Seiten) ── */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent, #3FB8AF);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }


/* ── Card-Hover im Landing-Look: Akzentbalken zieht auf, Titel färbt sich ── */
.svc-card, .std-card, .usp__card, .proc-tile, .uc-card, .blog-card, .cert-card, .hover-card,
.pkg, .team-card, .tl-item__card {
  position: relative;
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.svc-card::before, .std-card::before, .usp__card::before, .proc-tile::before,
.uc-card::before, .blog-card::before, .cert-card::before, .hover-card::before,
.pkg::before, .team-card::before, .tl-item__card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, oklch(0.74 0.19 185)), oklch(0.58 0.22 298));
  transform: scaleY(.25);
  transform-origin: top;
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s;
  pointer-events: none;
}
.svc-card:hover::before, .std-card:hover::before, .usp__card:hover::before, .proc-tile:hover::before,
.uc-card:hover::before, .blog-card:hover::before, .cert-card:hover::before, .hover-card:hover::before,
.pkg:hover::before, .team-card:hover::before, .tl-item__card:hover::before {
  transform: scaleY(1);
  opacity: 1;
}
.svc-card:hover, .std-card:hover, .usp__card:hover, .proc-tile:hover,
.uc-card:hover, .cert-card:hover, .hover-card:hover, .pkg:hover,
.blog-card:hover, .team-card:hover, .tl-item__card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, oklch(0.74 0.19 185));
  box-shadow: 0 12px 32px -14px oklch(0 0 0 / .45);
}
.svc-card:hover h3, .std-card:hover .std-card__name, .usp__card:hover h3,
.proc-tile:hover h3, .uc-card:hover h3, .hover-card:hover .hover-card__label {
  color: var(--accent, oklch(0.74 0.19 185));
  transition: color .2s;
}
.timeline-step:hover h4 { color: var(--accent, oklch(0.74 0.19 185)); transition: color .2s; }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .std-card, .usp__card, .proc-tile, .uc-card, .blog-card, .cert-card, .hover-card,
  .svc-card::before, .std-card::before, .usp__card::before, .proc-tile::before,
  .uc-card::before, .blog-card::before, .cert-card::before, .hover-card::before { transition: none; }
}

/* ── Streifen-Effekt auch für generische .card & .services-light__card ── */
.card, .services-light__card { position: relative; overflow: hidden; }
.card::before, .services-light__card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent, oklch(0.74 0.19 185)), oklch(0.58 0.22 298));
  transform: scaleY(.25); transform-origin: top; opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s; pointer-events: none; z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before, .services-light__card:hover::before { transform: scaleY(1); opacity: 1; }
  .card:hover, .services-light__card:hover {
    border-color: var(--fx-violet, oklch(0.45 0.18 298)) !important;
    box-shadow: 0 12px 32px -14px oklch(0 0 0 / .45);
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card::before, .services-light__card, .services-light__card::before { transition: none; }
}

/* ── Grid-Vereinheitlichung: lückenfreie Kachel-Umbrüche site-weit ── */
.pkg-grid { grid-template-columns: repeat(3, 1fr) !important; }
.services-grid { grid-template-columns: repeat(4, 1fr) !important; }
.usecases-grid, .cert-grid, .proc-tiles__grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1000px) {
  .usecases-grid, .cert-grid, .proc-tiles__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .services-grid, .pkg-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .usecases-grid, .cert-grid, .proc-tiles__grid { grid-template-columns: 1fr !important; }
}


/* ── Hover-Variation je Kartenfamilie: dezente Farb-Washes + Micro-Scale ── */
.svc-card::after, .std-card::after, .usp__card::after, .proc-tile::after,
.uc-card::after, .blog-card::after, .cert-card::after, .hover-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  border-radius: inherit;
}
/* Familie 1: Leistungs- & Info-Karten → zarter Lila-Schimmer von oben links */
.svc-card::after, .hover-card::after, .usp__card::after, .blog-card::after {
  background: radial-gradient(120% 90% at 0% 0%, oklch(0.58 0.22 298 / .10), transparent 55%);
}
/* Familie 2: Standards & Zertifikate → Türkis-Schimmer von unten rechts */
.std-card::after, .cert-card::after {
  background: radial-gradient(120% 90% at 100% 100%, oklch(0.74 0.19 185 / .10), transparent 55%);
}
/* Familie 3: Prozess- & Typen-Kacheln → diagonaler Verlaufshauch + Micro-Scale */
.proc-tile::after, .uc-card::after {
  background: linear-gradient(135deg, oklch(0.74 0.19 185 / .07), transparent 40%, oklch(0.58 0.22 298 / .07));
}
.svc-card:hover::after, .std-card:hover::after, .usp__card:hover::after, .proc-tile:hover::after,
.uc-card:hover::after, .blog-card:hover::after, .cert-card:hover::after, .hover-card:hover::after {
  opacity: 1;
}
.proc-tile:hover, .uc-card:hover { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .svc-card::after, .std-card::after, .usp__card::after, .proc-tile::after,
  .uc-card::after, .blog-card::after, .cert-card::after, .hover-card::after { transition: none; }
}


/* ── Sekundär-CTA im Hero: Landing-Stil (Textlink mit Unterstrich statt Outline-Button) ── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  padding: 15px 8px;
  border-bottom: 1px solid oklch(1 0 0 / .25);
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
/* Hero-Primär-Button auf Landing-Maß */
.hero .btn, .hero .btn-primary { padding: 15px 32px; font-size: 16px; }


/* ── Hero-Bildfeld wie auf der Landing: volle Breite, Fade läuft weit ins Bild ── */
.hero__bgwrap, .hero-bgwrap, .hero-bess__bg {
  width: 100% !important;
  left: 0 !important;
}
.hero__bgwrap img, .hero-bgwrap img, .hero-bess__bg img {
  object-position: 70% center !important;
}
@media (max-width: 880px) {
  .hero__bgwrap, .hero-bgwrap, .hero-bess__bg { opacity: .35; }
}


/* ── Lesbarkeit: Kartentexte größer ── */
.svc-card p, .svc-card li, .std-card__desc, .usp__card p, .proc-tile p,
.uc-card p, .hover-card p, .process__step p, .blog-card p {
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.svc-card h3, .usp__card h3, .proc-tile h3, .uc-card h3 { font-size: 18px !important; }
.hover-card > div:first-child { font-size: 12px !important; }

/* ── Grafischer Hintergrund für helle Sektionen: Platinen-Grafik (wie Testimonials) ── */
.sec--light, .pakete, .standards, .services-light,
section.sec[style*="background:oklch(0.965"], section.sec[style*="background:oklch(0.97"] {
  background-image: none !important;
  position: relative;
}
.sec--light::before, .pakete::before, .standards::before, .services-light::before,
section.sec[style*="background:oklch(0.965"]::before, section.sec[style*="background:oklch(0.97"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../uploads/circuit-bg.svg) center / cover no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.sec--light > *, .pakete > *, .standards > *, .services-light > *,
section.sec[style*="background:oklch(0.965"] > *, section.sec[style*="background:oklch(0.97"] > * {
  position: relative;
  z-index: 1;
}


/* ── Hero-Höhe: kompakt wie ursprünglich — Bild/Fade bleiben vollflächig ── */
.hero, .hero-bess, .hero-section, section#hero {
  min-height: 72vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: calc(var(--nav-h, 72px) + 48px) !important;
  padding-bottom: 56px !important;
}
.hero p.lead, .hero-bess p.lead { margin-bottom: 28px !important; }


/* ── Fakten-Leisten: Labels lesbar (site-weit einheitlich) ── */
.stats__lbl, .stats-strip__lbl, .stat-cell__label {
  font-size: 15px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  line-height: 1.45 !important;
}



/* ── Einheits-Typo: H1 und Faktenzeile identisch auf allen Seiten (überschreibt Inline-Styles) ── */
#hero h1, .hero h1, .hero-bess h1, .hero-section h1 {
  font-family: var(--hero, 'Space Grotesk', sans-serif) !important;
  font-size: clamp(40px, 5.5vw, 80px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
}
.stats__num,
[aria-label="Kennzahlen"] .stats__grid > div > div:first-child,
[aria-label="Kennzahlen"] > div > div > div:first-child {
  font-size: clamp(30px, 3.5vw, 44px) !important;
  line-height: 1 !important;
}
.stats__lbl,
[aria-label="Kennzahlen"] .stats__grid > div > div:last-child,
[aria-label="Kennzahlen"] > div > div > div:last-child {
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin-top: 8px !important;
}


/* ── Startseite: Hero-Bildfläche 50px tiefer ziehen ── */
section#hero {
  min-height: calc(72vh + 86px) !important;
}


/* ============ Sprint 3 ============ */
/* B18: CTA-Kontrast — dunkleres Button-Türkis, Schrift bleibt weiß (≥4.5:1) */
:root { --accent-btn: var(--accent); --accent-btn-h: oklch(0.80 0.19 185); }
.btn { background: var(--accent-btn); }
.btn:hover { background: var(--accent-btn-h); }
header.aro-nav .aro-nav__cta,
header.aro-nav .aro-nav__cta:link,
header.aro-nav .aro-nav__cta:visited { background: var(--accent-btn) !important; }
header.aro-nav .aro-nav__cta:hover { background: var(--accent-btn-h) !important; }
.sticky-cta { background: var(--accent-btn); }
.sticky-cta:hover { background: var(--accent-btn-h); }
.pkg__cta { background: var(--accent-btn) !important; color: #fff !important; }
.pkg__badge { background: var(--accent-btn) !important; color: #fff !important; }

/* B13: EN-Schalter ausblenden, bis EN-Unterseiten existieren */
.aro-nav__lang { display: none !important; }




/* B18 — finaler Kontrast-Override (schlägt alle früheren !important-Regeln) */
.btn, a.btn, button.btn,
.btn-primary, a.btn-primary, button.btn-primary,
header.aro-nav a.btn.aro-nav__cta,
.aro-nav .aro-nav__cta,
a.sticky-cta, .sticky-cta {
  background: var(--accent-btn) !important;
  color: #fff !important;
}
.btn:hover, a.btn:hover, button.btn:hover,
.btn-primary:hover, a.btn-primary:hover,
header.aro-nav a.btn.aro-nav__cta:hover,
a.sticky-cta:hover, .sticky-cta:hover {
  background: var(--accent-btn-h) !important;
  color: #fff !important;
}
.btn-o, .btn-outline, a.btn-outline, .btn-ghost, a.btn-ghost {
  background: transparent !important;
}


/* Standards: geometrisch 3+3 statt Waisenkarten */
.standards__grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1020px) { .standards__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 620px)  { .standards__grid { grid-template-columns: 1fr !important; } }

/* Nebenleistungs-Kacheln: kräftigere Titel */
.hover-card__label { font-size: 13px !important; font-weight: 700 !important; }


/* Nebenleistungen: geometrisch, keine Waisenkarten */
.sideservices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1020px) { .sideservices-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sideservices-grid { grid-template-columns: 1fr; } }


/* ── Hero-Subcopy site-weit vereinheitlicht (Farbe, Größe, Umbruchbreite) ── */
section.hero p.lead,
section.hero-bess p.lead,
section.hero p.fu.muted,
section.hero p.muted.fu {
  color: var(--muted) !important;
  font-size: clamp(16px, 1.55vw, 19px) !important;
  line-height: 1.75 !important;
  max-width: 620px !important;
  margin-bottom: 36px !important;
}


/* ── Cross-Page-CTA: lila mit weißer Schrift (führt auf andere Unterseite) ── */
.cta-lila, a.cta-lila {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, oklch(0.42 0.20 298), oklch(0.34 0.18 298)) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: var(--hero, 'Space Grotesk', sans-serif); font-weight: 600;
  padding: 12px 22px; border-radius: 8px;
  text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 6px 18px -8px oklch(0.34 0.18 298);
  transition: filter .18s ease, transform .18s ease;
}
.cta-lila:hover { filter: brightness(1.12); transform: translateY(-1px); }