/* =====================================================================
   AGONWEB – Startseite
   Design-System übernommen vom "Moonex"-Theme (Next.js Agency Template):
   scharfkantig, große Typo, enges Letter-Spacing, Signal-Koralle als
   einziger Akzent, Figtree (Text/Display) + Amiri (Zier-Serife).
   Branding-Motiv (Eichel) bleibt vorerst als Platzhalter.
   Akzentfarbe zentral über --accent austauschbar.
   ===================================================================== */

/* ---------- Schriften (lokal) ---------- */
/* Figtree ersetzt Cerebri Sans (Text/Display). Nur 4 genutzte Schnitte:
   400 Regular (Body) · 600 (Betonung) · 700 Bold · 800 ExtraBold (Display).
   Kursiv wird ausschließlich über die Zier-Serife Amiri gesetzt (s. --font-serif). */

@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Figtree/figtree-v9-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Figtree/figtree-v9-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Figtree/figtree-v9-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/Figtree/figtree-v9-latin-800.woff2") format("woff2"); }

:root {
  --ink: #000000;            /* Überschriften: reines Schwarz (Moonex) */
  --ink-soft: #666666;       /* Fließtext */
  --muted: #999999;          /* Meta / Sekundär */
  --paper: #ffffff;
  --tint: #f6f6f6;           /* heller Sektions-Wechsel */
  --warm: #f1eee9;           /* warmes Papier (Moonex color-11) */
  --line: rgba(0, 0, 0, 0.14);
  --line-strong: #000000;
  --accent: #FB8500;         /* Signal-Koralle (Moonex accent-1) */
  --accent-2: #FB8500;       /* dunklere Variante / Hover */
  --brand-teal: #0088A8;     /* Logo-Zeichen / Marken-Türkis */
  --brand-teal-light: #44D3DF; /* helle Türkis-Variante */
  --dark: #131313;           /* dunkle Bühne (Antwort/Kontakt) */
  --dark-soft: #999999;
  --radius: 4px;             /* globaler, dezenter Rundungsradius (Hero-Kreis ausgenommen) */
  --font-display: "Figtree", "Arial Black", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-serif: "Amiri", Georgia, "Times New Roman", serif;
  --dur: 300ms;
  --ease: ease-in-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip auf html UND body – sonst erzeugt die bewusst rechts
   herausragende .hero-figure einen horizontalen Scroll, der die rechten
   Header-Elemente (Burger/CTA) aus dem Viewport schiebt. */
html { scroll-behavior: smooth; overflow-x: clip; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eaeaea; }
::-webkit-scrollbar-thumb { background: var(--accent); }
::selection { color: #fff; background: var(--accent); }

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
main img { border-radius: var(--radius); }   /* Inhaltsbilder; Hero-Kreis bleibt rund (rundes Frame) */
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
ul { list-style: none; }

.container {
  width: min(1550px, 100% - 3rem);   /* maximale Seitenbreite – wie im Theme */
  margin-inline: auto;
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.kicker {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.kicker::before {
  content: "";
  width: 2.4em; height: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}
.kicker-light { color: var(--accent); }

.section-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 1.6rem;
  max-width: 20ch;
}
.title-light { color: #fff; }

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  max-width: 58ch;
  color: var(--ink-soft);
}
.lead-light { color: #b5b5b5; }
.lead-light strong { color: #fff; }

/* ---------- Buttons (rechteckig, Moonex) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 1.3em 2.4em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-2); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.section-dark .btn-ghost { border-color: #3a3a3a; color: #fff; }
.section-dark .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-big { font-size: clamp(1.15rem, 2.2vw, 1.6rem); padding: 1.1em 2em; }

/* ---------- Kopf ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background var(--dur), box-shadow var(--dur);
}
.site-head.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
/* Bei offenem Mobilmenü keinen backdrop-filter – sonst wird der Header zum
   Containing-Block für das fixed-Panel und schneidet es unten ab */
.site-head.nav-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.head-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 2.4rem;
  transition: padding-block var(--dur);
}
.site-head.scrolled .head-inner {
  padding-block: 1.2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-right: auto;
  color: var(--ink);
}
.logo strong { font-weight: 800; color: var(--accent); }

/* Header-Logo (fertiges SVG-Lockup, images/logo.svg) */
.logo-img { height: 48px; width: auto; transition: opacity var(--dur) var(--ease); }

/* Hover: das Zeichen neben „AGONWEB" dreht sich langsam um seinen Mittelpunkt */
.logo-mark {
  transform-box: fill-box;
  transform-origin: center;
}
.logo:hover .logo-mark { animation: logo-mark-spin 6s linear infinite; }
@keyframes logo-mark-spin { to { transform: rotate(360deg); } }

/* Übrige Logo-Teile (Schriftzug + Schild) beim Hover einfärben,
   während sich das Zeichen dreht */
.logo-img > path { transition: fill var(--dur) var(--ease); }
.logo:hover .logo-img > path { fill: var(--brand-teal); }
@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo-mark { animation: none; }
}

/* Acorn bleibt als Marken-Motiv in Fußzeile & Über-mich */
.acorn { width: 1.4em; height: 1.4em; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.acorn-body { fill: var(--accent); }
.acorn-cap { fill: var(--ink); }
.foot-acorn:hover .acorn { transform: scale(1.2) rotate(-12deg); }

.main-nav { display: flex; gap: 2rem; align-items: center; }
.nav-cta { display: none; }  /* nur im mobilen Slide-in-Panel sichtbar */
.main-nav a {
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  color: var(--ink);
}
.main-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.main-nav > a:not(.nav-cta):hover { color: var(--accent); }
.main-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.main-nav a[aria-current="page"] { color: var(--accent); }

.btn-head { padding: 0.95em 1.6em; font-size: 0.92rem; }

.burger {
  display: none;
  background: none;
  border: 0;
  width: 2.4rem; height: 2.4rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.burger span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur), opacity var(--dur);
}
.burger.open span:first-child { transform: translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:last-child { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Untermenü „Leistungen" ---------- */

.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.caret { font-size: 1.4em; color: var(--muted); transition: transform var(--dur); }  /* normale Schriftfarbe, abgegraut; 100 % größer */
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.has-sub:hover .sub-toggle { color: var(--accent); }

.sub-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  display: grid;
  min-width: 14rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.3);
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sub-menu a {
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}
.sub-menu a:hover { background: var(--tint); color: var(--accent); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 2;                 /* liegt über #problem, damit das runde Bild hineinragen darf */
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--paper);
}

/* Rundes Zier-Bild – bottom-right, ragt nach unten in #problem hinein */
.hero-figure {
  --size: clamp(480px, min(66vw, 100vh), 1000px); /* auch an Viewport-Höhe koppeln, sonst rutscht der Kreis bei kurzen, breiten Fenstern unter die Nav */
  position: absolute;
  right: calc(var(--size) * -0.3);         /* rechte 20 % ragen aus dem Browserrand */
  bottom: clamp(-210px, -15vh, -180px);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* #problem liegt unter dem Hero, damit das runde Bild sichtbar hineinragt */
#problem { position: relative; z-index: 1; }

.hero-inner { position: relative; padding-block: 10rem 6rem; }

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

.hero-title {
  font-size: clamp(2.08rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 16ch;
  margin-bottom: 2rem;
  text-transform: none;
}
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: inline-block; }

/* „geradsteht" – Zier-Serife (Amiri) + selbstzeichnende Unterstreichung */
.standout {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  position: relative;
  white-space: nowrap;
  padding-inline: 0.03em;
}
/*.standout::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.02em;
  width: 100%; height: 0.08em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw-line 0.7s 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes draw-line { to { transform: scaleX(1); } }*/

.hero-sub {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: 0.7rem;
  letter-spacing: -0.02em;
}
.hero-scope {
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 2.6rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid var(--line);
  border-radius: 999px;
  display: flex;
  justify-content: center;
}
.scroll-hint-dot {
  width: 4px; height: 9px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: hint 1.8s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
}


/* ---------- Sektionen ---------- */

.section { padding-block: clamp(5rem, 10vw, 9rem); }
.section-tint { background: var(--tint); }
.section-dark { background: var(--dark); color: #eaeaea; }

/* ---------- Karten-Grundform ---------- */

.grid { display: grid; gap: 0; margin-top: 3rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* Karten-Raster mit geteilten Linien (editorial) */
.grid-3, .grid-4 { gap: 0; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem 2.2rem;
  margin: -0.5px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--ink); background: var(--tint); position: relative; z-index: 1; }
.card h3 { font-size: 1.4rem; margin-bottom: 0.7rem; letter-spacing: -0.03em; }
.card p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Problem ---------- */

.pain { position: relative; }
.pain-num {
  font-family: var(--font-display);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  font-size: 2.4rem;
  display: block;
  margin-bottom: 1rem;
  transition: color var(--dur);
}
.pain:hover .pain-num { color: var(--accent); }

/* ---------- Antwort / USP (dunkle Bühne) ---------- */

.niemand-list { margin: 2.6rem 0 1.8rem; display: grid; gap: 0.9rem; }
.niemand {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #5c5c5c;
}
.strike { position: relative; }
.strike::after {
  content: "";
  position: absolute;
  left: 0; top: 54%;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.strike.struck::after { transform: scaleX(1); }

/* Positiv-Variante der Liste in #antwort: weiß + Koralle-Häkchen statt Durchstreichen */
#antwort .niemand {
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
#antwort .niemand::before {
  content: "\2713";           /* ✓ */
  flex: none;
  color: var(--accent);
  font-size: 0.72em;
  font-weight: 900;
}

.doch {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 2rem;
}
.doch em { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-weight: 700; }

.proof-row {
  margin-top: 3.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  border-top: 2px solid #2a2a2a;
  padding-top: 2.4rem;
}
.proof-big {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
  color: #fff;
}
.proof-sub { font-size: 0.9rem; color: var(--dark-soft); margin-top: 0.3rem; }

/* ---------- Leistungen: Service-Liste (Moonex-Signatur) ---------- */

.service-list { margin-top: 3rem; border-bottom: 2px solid var(--ink); }
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1fr 1.1fr 3rem;
  align-items: center;
  gap: 1.5rem;
  padding: 2.6rem 1.5rem;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.service-row:hover { background: var(--tint); }
.service-index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
}
.service-row:hover .service-index { color: var(--accent); -webkit-text-stroke: 0; }
.service-main h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.035em; text-transform: uppercase; }
.service-claim { color: var(--ink-soft); font-size: 1rem; margin-top: 0.4rem; }
.service-flag {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.35em 0.8em;
}
.service-tags { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.service-arrow {
  justify-self: end;
  font-size: 1.8rem;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service-row:hover .service-arrow { color: var(--accent); transform: translateX(6px); }
.service-row--main { background: rgba(250, 71, 42, 0.04); }

/* ---------- Leistungen: Karten-Variante (Fallback / Bewerber-Sektion) ---------- */

.cluster { position: relative; display: flex; flex-direction: column; }
.cluster h3 { text-transform: uppercase; font-size: 1.35rem; }
.cluster-claim {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent) !important;
  margin-bottom: 1.2rem;
}
.cluster ul { display: grid; gap: 0.5rem; }
.cluster li {
  color: var(--ink-soft);
  font-size: 0.98rem;
  padding-left: 1.5em;
  position: relative;
}
.cluster li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
  transition: transform var(--dur);
}
.cluster li:hover::before { transform: translateX(3px); }

.cluster-main { border-color: var(--ink); border-width: 2px; }
.cluster-tag {
  position: absolute;
  top: 1.6rem; right: 1.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.35em 0.8em;
}

.card-link {
  margin-top: auto;
  padding-top: 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color var(--dur), gap var(--dur);
}
.card-link:hover { color: var(--accent); gap: 0.8em; }

/* ---------- Ablauf ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
}
.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem 2rem;
  margin: -0.5px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}
.step h3 { font-size: 1.35rem; margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: -0.02em; }
.step p { color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Tempo & grün ---------- */

.speed-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}
.speed-meter { display: grid; gap: 1.8rem; }
.meter-bar { display: grid; gap: 0.5rem; }
.meter-label { font-size: 0.92rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
.meter-track {
  display: block;
  height: 14px;
  border-radius: var(--radius);
  background: var(--tint);
  border: 1px solid var(--line);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  transition: width 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.meter-slow { background: #cccccc; }
.meter-fast { background: var(--accent); }
.meter-time { font-size: 0.85rem; color: var(--muted); }

/* ---------- Preise ---------- */

.price-grid { margin-top: 3rem; }
.price { text-align: left; display: flex; flex-direction: column; }
.price h3 { font-size: 2.6rem; color: var(--accent); }
.price-for { min-height: 3.2em; font-size: 0.95rem !important; margin-top: 0.4rem; }
.price-tag { margin-block: 0.8rem 1.4rem; }
.price-tag strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.price-tag span { color: var(--muted); font-size: 0.9rem; margin-left: 0.4em; }
.price ul { display: grid; gap: 0.55rem; }
.price li {
  font-size: 0.96rem;
  color: var(--ink-soft);
  padding-left: 1.6em;
  position: relative;
}
.price li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.price-featured {
  border-color: var(--ink);
  border-width: 2px;
  position: relative;
  z-index: 1;
}
.price-badge {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5em 1em;
}
.price-featured { padding-top: 3.4rem; }

.price-note {
  margin-top: 2.6rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- Referenzen ---------- */

.ref-preview {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--tint);
  aspect-ratio: 16 / 11;
  margin-bottom: 1.4rem;
  padding: 2rem 1rem 1rem;
  overflow: hidden;
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.ref-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.4rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 0.7rem;
}
.ref-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.ref-shape { border-radius: 0; background: #e0e0e0; }
.ref-hero { height: 38%; background: linear-gradient(120deg, #d6d6d6, #ececec); }
.ref-a .ref-hero { background: linear-gradient(120deg, rgba(250,71,42,0.35), rgba(250,71,42,0.12)); }
.ref-b .ref-hero { background: linear-gradient(120deg, #d3dee9, #e8eef4); }
.ref-c .ref-hero { background: linear-gradient(120deg, #e9e2d3, #f4efe4); }
.ref-d .ref-hero { background: linear-gradient(120deg, #d2d6da, #ebedf0); }
.ref-line { height: 9px; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.ref-blocks { display: flex; gap: 0.55rem; background: none; }
.ref-blocks i { flex: 1; height: 26px; border-radius: 0; background: #e0e0e0; }
.ref:hover .ref-hero { filter: saturate(1.4); }
.ref-branch {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ref h3 { margin-top: 0.4rem; text-transform: uppercase; font-size: 1.3rem; }

.ref-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
.ref-filter button {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7em 1.3em;
  cursor: pointer;
  transition: color var(--dur), background var(--dur), border-color var(--dur);
}
.ref-filter button:hover { border-color: var(--ink); }
.ref-filter button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ref.is-hidden { display: none; }

/* ---------- Über ---------- */

.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}
.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(250, 71, 42, 0.35), transparent 60%),
    linear-gradient(160deg, #2a2a2a, #131313);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.acorn-big { width: 4.5rem; height: 4.5rem; opacity: 0.95; }
.about-photo-note { color: var(--dark-soft); font-size: 0.85rem; text-align: center; }
.about-copy .btn { margin-top: 1.8rem; }

/* ---------- Kontakt ---------- */

.section-contact { text-align: center; }
.contact-inner .kicker { justify-content: center; }
.contact-inner .kicker::before { display: none; }
.contact-inner .section-title, .contact-inner .lead { margin-inline: auto; }
.contact-cta { margin-top: 2.6rem; }
.contact-note { margin-top: 1.6rem; color: var(--dark-soft); font-size: 0.95rem; }

/* ---------- Fußzeile ---------- */

.site-foot {
  background: var(--dark);
  color: var(--dark-soft);
  border-top: 2px solid #2a2a2a;
  padding-block: 3rem;
  text-align: center;
  font-size: 0.9rem;
}
.foot-inner { display: grid; gap: 0.9rem; justify-items: center; }
.foot-acorn { background: none; border: 0; cursor: pointer; width: 2rem; }
.foot-acorn .acorn { width: 100%; height: auto; opacity: 0.75; transition: transform var(--dur), opacity var(--dur); }
.foot-acorn:hover .acorn { transform: rotate(-14deg) scale(1.15); opacity: 1; }
.foot-line { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.foot-nav { display: flex; gap: 1.6rem; }
.foot-nav a { color: var(--dark-soft); }
.foot-nav a:hover { color: var(--accent); }
.foot-copy { font-size: 0.82rem; }

/* Fallende Eichel (Easter Egg) */
.falling-acorn { position: fixed; top: -3rem; width: 1.6rem; z-index: 99; pointer-events: none; }

/* =====================================================================
   Unterseiten
   ===================================================================== */

.page-hero {
  padding: 11rem 0 5rem;
  background: var(--paper);
}
.page-hero h1.section-title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  max-width: 18ch;
}
.page-hero .hero-cta { margin-top: 2.4rem; }

/* ---------- Aufbaukosten-Zeilen ---------- */

.build-cost { margin-top: 2.6rem; display: grid; gap: 0; max-width: 720px; border-bottom: 1px solid var(--line); }
.build-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.4rem 0.4rem;
  background: transparent;
}
.build-row strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; }
.build-row span { color: var(--ink-soft); font-size: 0.95rem; }
.build-price { font-family: var(--font-display); font-weight: 800; color: var(--accent); white-space: nowrap; }

/* ---------- Webseiten-TÜV ---------- */

.tuev-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3rem;
}
.plakette {
  width: min(240px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.3rem;
  transform: rotate(-6deg);
  position: relative;
  margin-inline: auto;
  box-shadow: 0 24px 50px -20px rgba(250, 71, 42, 0.5);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plakette:hover { transform: rotate(3deg) scale(1.04); }
.plakette::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}
.plakette-year { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; }
.plakette-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; max-width: 12ch; margin-inline: auto; }

/* Ampel-Report */
.report {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  display: grid;
  gap: 1rem;
  max-width: 520px;
}
.report-head { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: -0.02em; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.9rem;
  font-size: 0.97rem;
}
.report-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ampel { display: flex; gap: 0.35rem; flex-shrink: 0; }
.ampel i { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--tint); border: 1px solid var(--line); }
.ampel .on-green { background: #27b14b; border-color: #27b14b; }
.ampel .on-yellow { background: #f0b429; border-color: #f0b429; }
.ampel .on-red { background: var(--accent); border-color: var(--accent); }

/* =====================================================================
   Responsive
   ===================================================================== */

/* Kompaktere Hauptnavigation auf mittleren Breiten – nur solange die Nav
   horizontal ist (zwischen Mobilmenü-Grenze 1024px und 1130px) */
@media (min-width: 1025px) and (max-width: 1130px) {
  .main-nav { gap: 1.5rem; }
  .main-nav a { font-size: 0.85rem; }
}

@media (max-width: 1024px) {
  .service-row { grid-template-columns: 4rem 1fr 2.5rem; }
  .service-row .service-tags { grid-column: 2 / 4; }

  /* ===== Mobiles Menü greift ab hier (vorher 720px) ===== */
  .burger { display: flex; }

  /* Logo + Burger-X über dem einfahrenden Panel halten (Panel liegt im
     Header-Stacking-Kontext, daher hier höheres z-index nötig) */
  .logo, .burger { position: relative; z-index: 60; }

  /* Von rechts einfahrendes Panel (Moonex-Offcanvas-Adaption) */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;            /* echte sichtbare Höhe auf Mobilgeräten */
    width: 100%;
    max-width: 420px;
    background: var(--paper);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.09);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 7.5rem 2.4rem 2.6rem;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.open { transform: translateX(0); }

  /* Top-Level-Menüpunkte (Webseiten-TÜV/Referenzen/Über mich) auf 18px;
     „Leistungen" bleibt als Gruppen-Label bei 16px (Basisregel greift) */
  .main-nav > a:not(.nav-cta),
  .sub-toggle {
    font-size: 1.125rem;
    line-height: 1.2;
    padding: 0.45rem 0;
  }
  .main-nav > a:not(.nav-cta)::after { display: none; }

  .has-sub { flex-direction: column; align-items: flex-start; }
  .caret { display: none; }
  .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    background: none;
    padding: 0.2rem 0 0.6rem;
    gap: 0.45rem;
    justify-items: start;
    text-align: left;
  }
  /* Untermenü darf beim Hover nicht seitlich springen – neutralisiert die
     Desktop-Regel .has-sub:hover .sub-menu { transform: translate(-50%, …) } */
  .has-sub:hover .sub-menu,
  .has-sub:focus-within .sub-menu { transform: none; }
  .sub-menu a { font-size: 1.125rem; color: var(--ink-soft); }
  /* Im Panel kein Hintergrund beim Hover (nur Farbwechsel) */
  .sub-menu a:hover { background: none; }

  /* CTA statt Copyright – unten im Panel */
  .main-nav .nav-cta {
    display: inline-flex;
    margin-top: auto;
    align-self: stretch;
    justify-content: center;
    color: #fff;               /* Solid-Button behält weiße Schrift */
    letter-spacing: 0.02em;
  }
}

@media (max-width: 960px) {
  /* kompakterer Kopf auf Tablet/Mobil */
  .head-inner { padding-block: 1.5rem; }
  /* Hero-Titel auf Tablet/Mobil 25 % größer */
  .hero-title { font-size: clamp(2.6rem, 7.5vw, 6.5rem); }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: repeat(2, 1fr); }
  .speed-inner, .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-visual { order: 2; max-width: 380px; }
  .tuev-hero-inner { grid-template-columns: 1fr; }
  .tuev-hero-inner .plakette { margin-top: 1rem; }
  .service-row { grid-template-columns: 3.5rem 1fr; row-gap: 0.6rem; }
  .service-arrow { display: none; }
  .service-tags { grid-column: 1 / 3; }
}

/* Header-CTA („Anfragen") erst ab 1025px zeigen – ab 1024px übernimmt das
   Mobilmenü mit CTA im Panel, kein Nebeneinander von Button + Burger */
@media (max-width: 1024px) {
  .btn-head { display: none; }
}

@media (max-width: 720px) {
  .grid-4 { grid-template-columns: 1fr; }

  .hero-inner { padding-block: 8.5rem 2.5rem; }
  /* Bild aus dem Overlap lösen: unter die CTAs in den Fluss stellen,
     volle Browserbreite (Kante zu Kante), eckig – überlagert weder die
     Buttons darüber noch die #problem-Sektion darunter. */
  .hero { flex-direction: column; }
  .hero-inner { order: 1; }
  .hero-figure {
    order: 2;
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .scroll-hint { display: none; }
  /* CTAs nebeneinander, flacher und nur so breit wie ihr Inhalt (nicht auf Containerbreite strecken) */
  .hero-cta { flex-wrap: wrap; gap: 0.6rem; }
  .hero-cta .btn { flex: 0 0 auto; width: auto; padding: 0.9em 1.3em; font-size: 0.95rem; }
  .price-for { min-height: 0; }
  .page-hero { padding-top: 8rem; }
  .service-index { font-size: 1.1rem; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .standout::after { transform: scaleX(1); }
  .strike::after { transform: scaleX(1); }
  .meter-fill { transition: none; }
}

/* =====================================================================
   Dunkler Hero (Startseite) – gescoped auf .hero-bg-test am <body>,
   damit die Unterseiten (heller Hero) unberührt bleiben.
   Früher in hero-dark-test.css, hierher migriert.
   ===================================================================== */

/* Hero: dunkles SVG als Cover-Hintergrund */
.hero-bg-test .hero {
  background: #0e2a47 url("images/bg.svg") center / cover no-repeat;
}
/* Auf Tablet/Mobil würde „cover" die seitlichen Blobs wegschneiden – SVG (preserveAspectRatio=none)
   stattdessen auf die Herofläche strecken, damit die wabernden Elemente sichtbar bleiben. */
@media (max-width: 960px) {
  .hero-bg-test .hero { background-size: 100% 100%; }
}

/* Dunkle Schrift auf dem Hintergrund invertieren */
.hero-bg-test .hero-title { color: #fff; }
.hero-bg-test .hero-sub   { color: #fff; }
.hero-bg-test .hero-scope { color: rgba(255, 255, 255, 0.75); }
/* .hero-eyebrow und .standout bleiben Koralle – auf Dunkel gut lesbar */

/* Ghost-Button auf Dunkel (analog zu .section-dark) */
.hero-bg-test .hero .btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero-bg-test .hero .btn-ghost:hover { border-color: #fff; background: #fff; color: var(--dark); }

/* Scroll-Hinweis hell */
.hero-bg-test .scroll-hint { border-color: rgba(255, 255, 255, 0.5); }

/* Kopfzeile über dem dunklen Hero (nur solange nicht gescrollt) */
.hero-bg-test .site-head:not(.scrolled) .main-nav a:not(.nav-cta),
.hero-bg-test .site-head:not(.scrolled) .sub-toggle { color: #fff; }
.hero-bg-test .site-head:not(.scrolled) .burger span { background: #fff; }

/* Dropdown-Panel bleibt hell → seine Einträge NICHT mit-invertieren */
.hero-bg-test .site-head:not(.scrolled) .main-nav .sub-menu a { color: var(--ink); }

/* Logo-Umschaltung: Weiß über dem Hero, Dunkel sobald der Header weiß wird */
.hero-bg-test .logo-light { display: none; }
.hero-bg-test .site-head:not(.scrolled) .logo-dark  { display: none; }
.hero-bg-test .site-head:not(.scrolled) .logo-light { display: block; }

/* Mobiles Menü offen: Overlay ist weiß → Kopf-Elemente dunkel schalten,
   damit Logo, Burger-X und Links auf dem hellen Overlay sichtbar sind
   (überschreibt die Dark-Hero-Invertierung per Quell-Reihenfolge) */
@media (max-width: 1024px) {
  .hero-bg-test .site-head.nav-open .burger span { background: var(--ink); }
  .hero-bg-test .site-head.nav-open .main-nav a:not(.nav-cta),
  .hero-bg-test .site-head.nav-open .sub-toggle { color: var(--ink); }
  /* Hover im offenen Panel: Text auf Akzentfarbe (schlägt den Ink-Override) */
  .hero-bg-test .site-head.nav-open .main-nav a:not(.nav-cta):hover { color: var(--accent); }
}
/* Nur wenn das Panel den Kopf voll überdeckt (Vollbild ≤420px), auch das
   Logo dunkel schalten – bei breiterem Panel liegt es noch überm Hero */
@media (max-width: 420px) {
  .hero-bg-test .site-head.nav-open .logo-dark  { display: block; }
  .hero-bg-test .site-head.nav-open .logo-light { display: none; }
}