/* =====================================================================
   ELEKTRIX — design system
   Lime · Black · Cream · Mono
   ===================================================================== */
:root {
  --lime: #C5F23D;
  --black: #0A0A0A;
  --ink: #F4F4F1;             /* main text on dark */
  --cream: #0E0E10;            /* main background — dark */
  --paper: #161618;            /* cards / surface */
  --mute: #9A9A9A;             /* secondary text */
  --line: #242427;             /* default border */
  --line-dark: #2E2E32;        /* darker border on dark sections */
  --error: #FF6B5E;            /* form failure state — 4.6:1 on --cream */

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --pad-x: clamp(20px, 5vw, 88px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on, "cv11" on;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  background: var(--lime);
  color: var(--black);
  padding: 12px 18px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 13px;
  transition: top .15s ease;
}
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.eyebrow { color: var(--mute); }
.on-dark { color: rgba(255,255,255,.7); }

/* =====================================================================
   LOGO
   ===================================================================== */
.nav-logo-img {
  display: block;
  height: 42px;
  width: auto;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-lg { padding: 16px 24px; font-size: 15px; }
.btn-full { width: 100%; justify-content: center; padding: 18px 24px; font-size: 16px; }
.btn-primary {
  background: var(--lime);
  color: var(--black);
  box-shadow: 0 1px 0 var(--black);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--black); }
.btn-ghost {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
}
.btn-ghost:hover { background: var(--black); color: var(--cream); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad-x);
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(246,246,244,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav-logo { flex: 0 0 auto; }
.nav-links {
  display: flex; gap: 28px;
  font-family: var(--f-display);
  font-weight: 500; font-size: 14px;
}
.nav-links a { position: relative; white-space: nowrap; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; gap: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.lang button { padding: 4px 2px; color: var(--mute); }
.lang button.is-on { color: var(--black); font-weight: 600; }
.nav-cta { display: inline-flex; }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 22px; height: 2px; background: var(--black); }
.nav-mobile {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream); padding: 20px var(--pad-x); display: flex; flex-direction: column; gap: 14px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 880px) {
  .nav-links, .nav-cta, .lang { display: none; }
  .nav-mobile .lang-mobile {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--f-mono); font-size: 15px; color: var(--mute);
    padding-top: 8px; border-top: 1px solid var(--line);
  }
  .nav-mobile .lang-mobile button {
    min-width: 44px; min-height: 44px;
    padding: 8px 14px; color: var(--mute);
  }
  .nav-mobile .lang-mobile button.is-on { color: var(--black); font-weight: 600; }
  .nav-burger { display: flex; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  padding: 140px var(--pad-x) 80px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  background: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 10vw; max-width: 120px;
  background: var(--lime);
  z-index: 0;
}
.hero-grid { position: relative; z-index: 1; padding-left: clamp(40px, 8vw, 80px); }
.hero-meta { display: flex; align-items: center; gap: 10px; color: var(--mute); margin-bottom: 28px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--black); }
.hero-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: condensed;
  font-size: clamp(42px, 6.8vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.hero-title .line { display: block; }
.hero-title .line-lime {
  display: inline-block;
  padding: 0 8px 4px 4px;
  margin-left: -6px;
  background: var(--lime);
  color: var(--black);
}
.hero-sub {
  max-width: 540px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: #2a2a2a;
  margin: 0 0 36px;
  line-height: 1.5;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  max-width: 540px;
}
.hero-tag {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  font-family: var(--f-display);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hero-tag:hover { background: var(--paper); border-color: var(--black); transform: translateY(-1px); }
.hero-tag:hover svg { color: var(--black); }
.hero-circuit {
  position: relative; z-index: 1;
  height: 100%; max-height: 720px;
  display: flex; align-items: stretch; justify-content: center;
}
.hero-circuit svg { width: 100%; height: auto; }

/* HERO PHOTO + ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX( 24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kenBurns {
  0%   { transform: scale(1.05) translateX(0); }
  50%  { transform: scale(1.12) translateX(-1.5%); }
  100% { transform: scale(1.05) translateX(0); }
}
@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(700%); opacity: 0; }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10,10,10,0.4); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(10,10,10,0); }
}
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -4px); } }

.hero-meta { animation: fadeUp 0.7s 0.05s both; }
.hero-meta .dot { animation: pulseDot 2.4s ease-in-out infinite; }
.hero-title .line:nth-child(1) { animation: fadeUp 0.8s 0.10s both; }
.hero-title .line:nth-child(2) { animation: slideInLeft 0.9s 0.25s both; }
.hero-title .line:nth-child(3) { animation: fadeUp 0.8s 0.40s both; }
.hero-sub  { animation: fadeUp 0.8s 0.55s both; }
.hero-ctas { animation: fadeUp 0.8s 0.70s both; }
.hero-tag { animation: fadeUp 0.6s both; }
.hero-tag:nth-child(1) { animation-delay: 0.85s; }
.hero-tag:nth-child(2) { animation-delay: 0.95s; }
.hero-tag:nth-child(3) { animation-delay: 1.05s; }
.hero-tag:nth-child(4) { animation-delay: 1.15s; }

.hero-photo-wrap {
  position: relative;
  width: 100%; height: 100%;
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0a0a;
}
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: fadeIn 1.2s 0.15s both, kenBurns 22s 0.15s ease-in-out infinite;
}
.hero-photo-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(197,242,61,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,242,61,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: fadeIn 1.4s 0.6s both;
}
.hero-photo-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 14%;
  background: linear-gradient(180deg, transparent 0%, rgba(197,242,61,0.22) 45%, rgba(197,242,61,0.7) 50%, rgba(197,242,61,0.22) 55%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: scanLine 7s 1.2s ease-in-out infinite;
}
.hero-photo-badge {
  position: absolute;
  left: -20px;
  bottom: 32px;
  padding: 14px 20px;
  background: var(--lime);
  display: flex; flex-direction: column; gap: 2px;
  border: 1.5px solid var(--black);
  max-width: 260px;
  z-index: 3;
  animation: slideInLeft 0.8s 1.1s both, drift 5s 1.9s ease-in-out infinite;
}
.hero-photo-badge .mono { color: var(--black); opacity: 0.7; font-size: 10px; }
.hero-photo-badge strong { font-family: var(--f-display); font-weight: 700; font-size: 16px; }

.hero-photo-stat {
  position: absolute;
  right: -16px;
  top: 32px;
  padding: 14px 18px;
  background: rgba(10,10,10,0.85);
  color: var(--cream);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 3;
  animation: slideInRight 0.8s 1.3s both;
}
.hero-photo-stat .mono { color: rgba(255,255,255,0.6); font-size: 10px; }
.hero-photo-stat .small { font-size: 9px; }
.hero-photo-stat strong {
  font-family: var(--f-display); font-weight: 800; font-size: 28px;
  letter-spacing: -0.01em; color: var(--lime); margin: 2px 0;
}
.hero-scroll { animation: fadeIn 1s 1.5s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-meta, .hero-meta .dot, .hero-title .line, .hero-sub, .hero-ctas, .hero-tag,
  .hero-photo, .hero-photo-grid, .hero-photo-scan, .hero-photo-badge, .hero-photo-stat,
  .hero-scroll { animation: none !important; }
}

.hero-scroll {
  position: absolute; bottom: 24px; left: var(--pad-x);
  display: flex; align-items: center; gap: 8px;
  color: var(--mute);
  font-family: var(--f-mono); font-size: 11px;
}

.hero-centered .hero-grid { padding-left: 0; max-width: 980px; margin: 0 auto; text-align: center; }
.hero-centered .hero-meta { justify-content: center; }
.hero-centered .hero-sub { margin-left: auto; margin-right: auto; }
.hero-centered .hero-ctas { justify-content: center; }
.hero-centered .hero-tags { margin: 0 auto; }
.hero-centered .hero-circuit { display: none; }
.hero-centered { grid-template-columns: 1fr; min-height: auto; padding-bottom: 120px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 120px; padding-bottom: 60px; }
  .hero-circuit { display: none; }
  .hero-grid { padding-left: 32px; }
  .hero-tags { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee {
  background: var(--black);
  color: var(--cream);
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
}
.marquee-item { display: inline-flex; align-items: center; gap: 18px; }
.marquee-item svg { color: var(--lime); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   SECTIONS — common
   ===================================================================== */
.section { padding: 120px var(--pad-x); }
.section-light { background: var(--cream); }
.section-cream { background: #EFEEEA; }
.section-dark { background: var(--black); color: var(--cream); }
.section-head { max-width: 880px; margin: 0 0 72px; }
.section-head .eyebrow { display: inline-block; margin-bottom: 18px; }
.section-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: condensed;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.section-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--mute);
  max-width: 620px;
  margin: 0;
}
.on-dark.section-title, .section-dark .section-title { color: var(--cream); }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card {
  background: var(--paper);
  padding: 0;
  display: flex; flex-direction: column;
  transition: background .25s ease;
  min-height: 460px;
}
.service-card > .service-head,
.service-card > .service-title,
.service-card > .service-body,
.service-card > .service-list,
.service-card > .service-foot { padding-left: 30px; padding-right: 30px; }
.service-card:hover { background: var(--cream); }
.service-card:hover .service-icon { color: var(--black); transform: rotate(-4deg) scale(1.06); }
.service-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #1a1a1a;
  margin-bottom: 24px;
}
.service-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.service-card:hover .service-photo img { transform: scale(1.04); }
.service-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.service-n { color: var(--mute); }
.service-icon {
  color: var(--ink);
  transition: transform .25s ease, color .25s ease;
}
.service-card:nth-child(1) .service-icon,
.service-card:nth-child(4) .service-icon { padding: 6px; background: var(--lime); border-radius: 50%; width: 48px; height: 48px; }
.service-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.service-body {
  color: var(--mute);
  font-size: 14.5px;
  margin: 0 0 20px;
  flex: 0;
}
.service-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px;
  flex: 1;
}
.service-list li { display: flex; align-items: center; gap: 8px; color: #333; }
.service-list svg { color: var(--black); flex: 0 0 14px; }
.service-foot { padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--line); margin-top: 8px; }
.service-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 13px;
}
.service-link:hover svg { transform: translateX(4px); transition: transform .2s; }

@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .services-grid { grid-template-columns: 1fr; } .service-card { min-height: auto; } .service-head { margin-bottom: 40px; } }

/* =====================================================================
   STATS
   ===================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: 0.8fr 3fr;
  gap: 40px;
  align-items: start;
}
.stats-eyebrow { color: rgba(255,255,255,.5); padding-top: 24px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat {
  border-left: 1px solid var(--line-dark);
  padding: 0 28px;
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-n {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: condensed;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lime);
  margin-bottom: 12px;
}
.stat-l {
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-family: var(--f-display);
}
@media (max-width: 880px) {
  .stats-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .stat { padding: 0 16px; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* =====================================================================
   REFS — bento gallery
   ===================================================================== */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.ref-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.ref-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.05); }

.ref-img { position: relative; flex: 1; overflow: hidden; background: #1a1a1a; }
.ref-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.ref-card:hover .ref-img img { transform: scale(1.04); }
.ref-img-tag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px;
  background: var(--lime);
  color: var(--black);
  font-weight: 600;
  border-radius: 999px;
  font-size: 10px;
  z-index: 2;
}

.ref-meta {
  padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.ref-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  line-height: 1.2;
}
.ref-sub { color: var(--mute); font-size: 10.5px; }

.portrait-slot { position: relative; width: 100%; height: 100%; min-height: 480px; }
.portrait-img {
  width: 100%; height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}
.photo-slot { position: relative; width: 100%; height: 100%; }
.photo-slot > svg { width: 100%; height: 100%; display: block; }
.photo-slot-tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 8px;
  background: rgba(10,10,10,0.75);
  color: #f6f6f4;
  font-size: 10px;
  letter-spacing: 0.08em;
  backdrop-filter: blur(4px);
}

/* Bento spans — hero image + varied scale */
.ref-card-0  { grid-column: span 6; grid-row: span 2; }   /* Rohrinstallation — hero */
.ref-card-1  { grid-column: span 3; grid-row: span 2; }   /* LED Decke */
.ref-card-2  { grid-column: span 3; grid-row: span 1; }   /* Außenkasten */
.ref-card-3  { grid-column: span 3; grid-row: span 1; }   /* Dach */
.ref-card-4  { grid-column: span 4; grid-row: span 2; }   /* Antenne */
.ref-card-5  { grid-column: span 4; grid-row: span 2; }   /* LED Bad */
.ref-card-6  { grid-column: span 4; grid-row: span 1; }   /* Küche */
.ref-card-7  { grid-column: span 3; grid-row: span 2; }   /* Verteilerkasten */
.ref-card-8  { grid-column: span 3; grid-row: span 1; }   /* Klemmleisten NEW */
.ref-card-9  { grid-column: span 3; grid-row: span 1; }   /* Verdrahtung NEW */
.ref-card-10 { grid-column: span 3; grid-row: span 2; }   /* LED Stube */
.ref-card-11 { grid-column: span 6; grid-row: span 2; }   /* PV Thermo wide */

@media (max-width: 900px) {
  .refs-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 12px;
  }
  .ref-card-0,  .ref-card-1,  .ref-card-2,  .ref-card-3,
  .ref-card-4,  .ref-card-5,  .ref-card-6,  .ref-card-7,
  .ref-card-8,  .ref-card-9,  .ref-card-10, .ref-card-11 { grid-column: span 1; grid-row: span 1; }
  .ref-card-0, .ref-card-4, .ref-card-11 { grid-column: span 2; }
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.section-about { background: var(--paper); border-top: 1px solid var(--line); }
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: stretch;
}
.about-portrait { position: relative; }
.portrait-svg { width: 100%; height: 100%; min-height: 480px; object-fit: cover; display: block; }
.about-portrait-tag {
  position: absolute; left: 16px; bottom: 16px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--mute);
}
.about-text { display: flex; flex-direction: column; }
.about-text .eyebrow { display: inline-block; margin-bottom: 18px; }
.about-body { font-size: 16px; color: #333; margin: 0 0 18px; max-width: 56ch; }
.about-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin: 32px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.about-meta dt { color: var(--mute); margin-bottom: 4px; }
.about-meta dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 18px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-meta { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   PROCESS
   ===================================================================== */
.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  position: relative;
}
.process-step { position: relative; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 140ms + 360ms); }
.process-list.is-active .process-step { opacity: 1; transform: translateY(0); }

/* horizontal connector track running above all steps */
.process-track {
  position: relative;
  margin-top: 56px;
  height: 18px;
}
.process-track-line {
  position: absolute; left: 0; right: 0; top: 8px; height: 1px;
  background: var(--black);
  opacity: .35;
}
.process-track-fill {
  position: absolute; left: 0; top: 7px; height: 3px;
  width: 0%;
  background: var(--black);
  transition: width 1.6s cubic-bezier(.7,.05,.2,1);
  transition-delay: 200ms;
}
.process-track.is-active .process-track-fill { width: calc(100% - (100% / var(--step-count) / 2)); }
.process-track-spark {
  position: absolute; top: 1px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--black);
  transform: translateX(-50%);
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(197,242,61,.6);
  transition:
    left 1.6s cubic-bezier(.7,.05,.2,1),
    opacity .25s ease,
    box-shadow .4s ease;
  transition-delay: 200ms, 0ms, 0ms;
}
.process-track.is-active .process-track-spark {
  left: calc(100% - (100% / var(--step-count) / 2));
  opacity: 1;
  box-shadow: 0 0 0 8px rgba(197,242,61,0);
  animation: process-pulse 1.6s ease-in-out 1.8s infinite;
}
@keyframes process-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,242,61,.5); }
  50%      { box-shadow: 0 0 0 9px rgba(197,242,61,0);  }
}

/* per-step dot sitting on the track */
.process-dot {
  position: absolute;
  top: -56px;
  left: calc(50% - 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--black);
  z-index: 2;
  transition: background .25s ease, transform .25s ease;
  transition-delay: calc(var(--i) * 140ms + 600ms);
}
.process-list.is-active .process-step .process-dot { background: var(--lime); transform: scale(1.1); }

.process-n {
  color: var(--mute);
  font-size: 13px;
}
.process-step h3 {
  font-family: var(--f-display);
  font-weight: 800; font-size: 22px;
  margin: 0;
}
.process-step p { color: var(--mute); margin: 0; font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  .process-step, .process-track-fill, .process-track-spark, .process-dot {
    transition: none !important; animation: none !important;
  }
  .process-step { opacity: 1; transform: none; }
  .process-track-fill { width: calc(100% - (100% / var(--step-count) / 2)); }
}

@media (max-width: 900px) {
  .process-list { grid-template-columns: 1fr 1fr; }
  .process-track { display: none; }
  .process-dot { display: none; }
}
@media (max-width: 540px) {
  .process-list { grid-template-columns: 1fr; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.section-contact { padding-top: 100px; padding-bottom: 100px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: start;
}
.contact-left .section-title { color: var(--cream); }
.contact-sub { color: rgba(255,255,255,.65); max-width: 460px; margin: 0 0 32px; }
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-dark);
  transition: background .2s ease;
}
a.contact-card:hover { background: rgba(197,242,61,.1); border-color: var(--lime); }
.contact-card .mono { color: rgba(255,255,255,.5); }
.contact-card strong { font-family: var(--f-display); font-weight: 700; font-size: 15px; }

.contact-form {
  background: var(--cream);
  color: var(--ink);
  padding: 36px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { color: var(--mute); }
.field input, .field textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(197,242,61,.4);
}
.form-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--error);
  border-radius: 6px;
  color: var(--error);
  font-size: 14px;
  line-height: 1.5;
}
.topic-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.topic {
  padding: 8px 14px;
  font-size: 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-display);
  font-weight: 500;
  transition: all .15s ease;
}
.topic:hover { border-color: var(--black); }
.topic.is-on { background: var(--black); color: var(--cream); border-color: var(--black); }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--black);
  color: var(--cream);
  padding: 24px var(--pad-x);
  border-top: 1px solid var(--line-dark);
}
/* Single row: VAT number · legal links · copyright. Wraps to stacked lines
   on narrow screens rather than squeezing. */
.footer-slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.footer-vat, .footer-copy { color: rgba(255,255,255,.5); font-size: 11px; }
@keyframes ekx-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* =====================================================================
   TEAM
   ===================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .2s ease; }
.team-card:hover { transform: translateY(-3px); }
.team-photo { aspect-ratio: 4/5; position: relative; overflow: hidden; }
.team-photo svg { width: 100%; height: 100%; display: block; }
.team-photo-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; background: rgba(10,10,10,0.7); color: #f6f6f4; font-size: 10px; backdrop-filter: blur(4px); }
.team-meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.team-meta h3 { font-family: var(--f-display); font-weight: 800; font-size: 19px; margin: 0; }
.team-role { color: var(--mute); }
.team-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.team-row .mono { color: var(--mute); }
.team-row a { font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.team-row a:hover { color: var(--black); border-bottom: 1.5px solid var(--lime); }
@media (max-width: 1100px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 80px; align-items: start; }
.faq-head { position: sticky; top: 100px; }
.faq-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--black); }
.faq-item { border-bottom: 1px solid var(--black); }
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  text-align: left;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  transition: color .15s ease;
}
.faq-q:hover { color: #333; }
.faq-n { color: var(--mute); }
.faq-toggle { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--black); }
.faq-item.is-open .faq-q { padding-bottom: 12px; }
.faq-a {
  padding: 0 0 28px 68px;
  color: #2a2a2a;
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
  .faq-q { grid-template-columns: 40px 1fr 24px; gap: 12px; }
  .faq-a { padding-left: 52px; }
}

/* =====================================================================
   TERMIN — simple request form
   ===================================================================== */
.section-book { background: var(--paper); }
.termin-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.termin-side { display: flex; flex-direction: column; gap: 32px; }
.termin-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.termin-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; }
.termin-steps .mono { color: var(--mute); padding-top: 2px; }
.termin-steps strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.termin-steps p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.5; }

.termin-direct {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.termin-direct > .mono { color: var(--mute); font-size: 10px; }
.termin-direct-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  transition: color .15s ease;
}
.termin-direct-row:first-of-type { border-top: none; }
.termin-direct-row:hover { color: var(--black); }
.termin-direct-row strong { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.termin-direct-row .mono { color: var(--mute); font-size: 10px; }

.termin-form { background: var(--cream); padding: 32px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }

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

/* legacy booking removed */

/* =====================================================================
   FOOTER LEGAL
   ===================================================================== */

.service-card { text-decoration: none; color: inherit; cursor: pointer; }
.service-card:hover .service-link svg { transform: translateX(4px); transition: transform .2s; }

/* =====================================================================
   SERVICE DETAIL PAGE
   ===================================================================== */
.detail { padding: 140px var(--pad-x) 0; background: var(--cream); }
.detail-back { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); font-family: var(--f-mono); font-size: 12px; margin-bottom: 32px; }
.detail-back:hover { color: var(--black); }
.detail-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
/* No hero image for this slug (e.g. Glasfaser has no real photo yet) — the
   title column takes the full row instead of leaving an empty second column. */
.detail-hero-full { grid-template-columns: 1fr; }
.detail-hero-full .detail-sub { max-width: 720px; }
.detail-num { font-family: var(--f-mono); color: var(--mute); margin-bottom: 14px; }
.detail-title { font-family: var(--f-display); font-weight: 900; font-stretch: condensed; font-size: clamp(56px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.025em; margin: 0 0 24px; }
.detail-sub { font-size: clamp(16px, 1.3vw, 19px); color: #2a2a2a; max-width: 540px; margin: 0 0 32px; }
.detail-hero-img {
  aspect-ratio: 4/3;
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.detail-hero-img > div, .detail-hero-img > svg { width: 100%; height: 100%; }
.detail-hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: fadeIn 1.1s 0.15s both, kenBurns 24s 0.15s ease-in-out infinite;
}
.detail-hero-img::after {
  /* scan line travelling — lime sweep */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent 0%, rgba(197,242,61,0.20) 45%, rgba(197,242,61,0.65) 50%, rgba(197,242,61,0.20) 55%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: scanLine 8s 1s ease-in-out infinite;
}
.detail-hero-img::before {
  /* subtle lime grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(197,242,61,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,242,61,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  animation: fadeIn 1.4s 0.6s both;
}

.detail-title { animation: fadeUp 0.8s 0.05s both; }
.detail-sub  { animation: fadeUp 0.8s 0.20s both; }
.detail-cta  { animation: fadeUp 0.8s 0.35s both; }
.detail-num  { animation: fadeIn 0.8s 0s both; }

/* Scroll reveal for detail blocks + staggered children */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

[data-reveal] .detail-list li,
[data-reveal] .detail-shot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(0.06s * var(--i, 0) + 0.25s);
}
[data-reveal].is-revealed .detail-list li,
[data-reveal].is-revealed .detail-shot {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] .detail-list li, [data-reveal] .detail-shot {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

.detail-block { padding: 80px 0; border-bottom: 1px solid var(--line); }
.detail-block:last-of-type { border-bottom: none; }
.detail-block-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 60px; align-items: start; }
.detail-block h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; margin: 0; }
.detail-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.detail-list li { background: var(--paper); padding: 24px 28px; }
.detail-list strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.detail-list span { color: var(--mute); font-size: 14px; }
.detail-cta { display: flex; gap: 12px; margin-top: 32px; }
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.detail-shot { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.detail-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.detail-shot figcaption { padding: 10px 14px; color: var(--mute); }
@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
  .detail-block-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-list { grid-template-columns: 1fr; }
}

/* =====================================================================
   DARK-MODE TONAL FIXES
   The site uses a dark palette by default. These overrides correct elements
   that were originally designed for a light background.
   ===================================================================== */


/* Buttons */
.btn-primary { color: var(--black); }
.btn-primary:hover { box-shadow: 0 4px 0 var(--lime); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--black); }

/* Nav — translucent dark on scroll */
/* The lime hero bar runs from y=0, so at the top of the page it sits directly
   behind the logo and swallows the bracket and the lime E. Keep the same scrim
   the scrolled state uses, so the wordmark reads everywhere; the border still
   appears only once scrolled. */
.nav {
  background: rgba(14,14,16,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.is-scrolled {
  background: rgba(14,14,16,0.86);
  border-bottom-color: var(--line);
}
.nav-burger span { background: var(--ink); }
.nav-mobile { background: var(--cream); border-bottom-color: var(--line); }
.lang button { color: var(--mute); }
.lang button.is-on { color: var(--ink); }

/* HERO */
.hero { border-bottom-color: var(--line); }
.hero-sub { color: rgba(244,244,241,.78); }
.hero-tag {
  background: rgba(255,255,255,.03);
  border-color: var(--line);
  color: var(--ink);
}
.hero-tag:hover { background: var(--paper); border-color: var(--lime); }
.dot { background: var(--lime); }
.hero-photo-grid {
  background-image:
    linear-gradient(rgba(197,242,61,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,242,61,0.07) 1px, transparent 1px);
}

/* Sections */
.section-light  { background: var(--cream); }       /* dark */
.section-cream  { background: #131316; }            /* slightly different dark */
.section-dark   { background: #060607; color: var(--ink); }   /* deepest */
.section-about  { background: var(--paper); border-top-color: var(--line); }

.section-title  { color: var(--ink); }
.section-sub    { color: rgba(244,244,241,.6); }
.eyebrow        { color: var(--mute); }
.on-dark        { color: rgba(244,244,241,.65); }

/* Marquee */
.marquee { background: #060607; color: var(--ink); border-color: #060607; }

/* Services */
.services-grid { background: var(--line); border-color: var(--line); }
.service-card { background: var(--paper); }
.service-card:hover { background: #1c1c20; }
.service-icon { color: var(--ink); }
.service-card:hover .service-icon { color: var(--ink); }
.service-card:nth-child(1) .service-icon,
.service-card:nth-child(4) .service-icon { background: var(--lime); color: var(--black); }
.service-body { color: rgba(244,244,241,.65); }
.service-list li { color: rgba(244,244,241,.78); }
.service-list svg { color: var(--lime); }
.service-foot { border-top-color: var(--line); }
.service-n { color: var(--mute); }

/* Stats — darker */
.section-dark .stats-eyebrow { color: rgba(244,244,241,.4); }
.stat { border-left-color: var(--line-dark); }
.stat-l { color: rgba(244,244,241,.6); }

/* Refs cards on dark */
.ref-card { background: var(--paper); border-color: var(--line); }
.ref-meta { background: var(--paper); border-top-color: var(--line); }
.ref-title { color: var(--ink); }
.ref-sub { color: var(--mute); }

/* About */
.about-portrait-tag { background: var(--paper); border-color: var(--line); color: var(--mute); }
.about-body { color: rgba(244,244,241,.78); }
.about-meta { border-top-color: var(--line); }
.about-meta dt { color: var(--mute); }
.about-meta dd { color: var(--ink); }

/* Process */
.section-dark .process-track-line { background: var(--cream); opacity: .25; }
.section-dark .process-track-fill { background: var(--cream); }
.section-dark .process-track-spark { border-color: var(--cream); }
.section-dark .process-dot { background: var(--ink); border-color: var(--cream); }
.section-dark .process-list.is-active .process-step .process-dot { background: var(--lime); }
.process-step h3 { color: var(--ink); }
.process-step p { color: rgba(244,244,241,.65); }
.process-n { color: var(--mute); }

/* FAQ */
.faq-list { border-top-color: var(--ink); }
.faq-item { border-bottom-color: var(--ink); }
.faq-q { color: var(--ink); }
.faq-q:hover { color: var(--lime); }
.faq-toggle { color: var(--ink); }
.faq-a { color: rgba(244,244,241,.78); }

/* TERMIN form */
.section-book { background: var(--paper); }
.termin-direct { background: var(--cream); border-color: var(--line); }
.termin-direct-row { border-top-color: var(--line); color: var(--ink); }
.termin-direct-row:hover { color: var(--lime); }
.termin-direct-row strong { color: var(--ink); }
.termin-direct-row:hover strong { color: var(--lime); }
.termin-form { background: var(--cream); border-color: var(--line); }
.termin-steps strong { color: var(--ink); }

/* Form fields */
.field label { color: var(--mute); }
.field input, .field textarea {
  background: #1c1c20;
  border-color: var(--line);
  color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(244,244,241,.35); }
.field input:focus, .field textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(197,242,61,.18);
}

/* Topic pills */
.topic {
  border-color: var(--line);
  background: #1c1c20;
  color: var(--ink);
}
.topic:hover { border-color: var(--lime); }
.topic.is-on { background: var(--lime); color: var(--black); border-color: var(--lime); }

/* Contact form (legacy contact section, if visible) */
.contact-form { background: var(--cream); color: var(--ink); }
.contact-card { background: rgba(255,255,255,.04); border-color: var(--line); }
a.contact-card:hover { background: rgba(197,242,61,.08); border-color: var(--lime); }
.contact-card strong { color: var(--ink); }

/* Footer (already dark; just match new tones) */
.footer { background: #060607; }

/* Service detail page (leistung.html) */
.detail { background: var(--cream); }
.detail-back { color: var(--mute); }
.detail-back:hover { color: var(--lime); }
.detail-hero { border-bottom-color: var(--line); }
.detail-title { color: var(--ink); }
.detail-sub { color: rgba(244,244,241,.78); }
.detail-hero-img { background: var(--paper); border-color: var(--line); }
.detail-block { border-bottom-color: var(--line); }
.detail-block h2 { color: var(--ink); }
.detail-list { background: var(--line); border-color: var(--line); }
.detail-list li { background: var(--paper); }
.detail-list strong { color: var(--ink); }
.detail-list span { color: rgba(244,244,241,.65); }
.detail-shot { background: var(--paper); border-color: var(--line); }
.detail-shot figcaption { color: var(--mute); }

/* =====================================================================
   MOBILE-FIRST TIGHTENING
   Smaller paddings, more compact hero, readable controls on small screens.
   ===================================================================== */
@media (max-width: 980px) {
  :root { --pad-x: 20px; }

  /* Hero compact */
  .hero { padding-top: 96px; padding-bottom: 48px; gap: 32px; }
  .hero::before { width: 6vw; }
  .hero-grid { padding-left: 20px; }
  .hero-meta { margin-bottom: 18px; }
  .hero-title { font-size: clamp(33px, 7.5vw, 57px); margin-bottom: 22px; }
  .hero-sub { font-size: 16px; margin-bottom: 26px; }
  .hero-ctas { margin-bottom: 32px; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-tags { grid-template-columns: 1fr 1fr; gap: 8px 10px; max-width: none; }
  .hero-tag { padding: 9px 12px; font-size: 12px; }
  .hero-scroll { display: none; }

  /* Sections */
  .section { padding: 72px 20px; }
  .section-head { margin-bottom: 40px; }
  .section-title { font-size: clamp(32px, 8vw, 48px); }
  .section-sub { font-size: 15px; }

  /* Marquee smaller */
  .marquee { padding: 16px 0; }
  .marquee-track { font-size: 22px; gap: 36px; }
  .marquee-item { gap: 12px; }

  /* Service cards: single column with smaller min-height */
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; padding-bottom: 8px; }
  .service-card > .service-head,
  .service-card > .service-title,
  .service-card > .service-body,
  .service-card > .service-list,
  .service-card > .service-foot { padding-left: 22px; padding-right: 22px; }
  .service-photo { aspect-ratio: 16/10; margin-bottom: 18px; }
  .service-head { margin-bottom: 14px; }
  .service-title { font-size: 22px; }

  /* Stats */
  .stats-row { gap: 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat { padding: 0 12px; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line-dark); }
  .stat-n { font-size: clamp(40px, 12vw, 64px); margin-bottom: 6px; }

  /* About — gap tighter */
  .section-about { padding: 60px 20px; }
  .about-grid { gap: 28px; }
  .portrait-slot, .portrait-img { min-height: 360px; }

  /* Process — stack to 2 cols then 1 */
  .process-list { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .process-track { display: none; }
  .process-dot { display: none; }

  /* FAQ */
  .faq-q { padding: 18px 0; font-size: 17px; grid-template-columns: 36px 1fr 22px; gap: 10px; }
  .faq-a { padding-left: 46px; padding-bottom: 22px; font-size: 15px; }

  /* Termin — tighten form, stack steps */
  .section-book { padding: 72px 20px; }
  .termin-form { padding: 22px; }
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .topic-grid { gap: 6px; }
  .topic { padding: 8px 12px; font-size: 12px; }
  .field input, .field textarea { padding: 14px; font-size: 16px; } /* prevent iOS zoom */

  /* Footer */
  .footer { padding: 40px 20px 24px; }

  /* Service detail page */
  .detail { padding-top: 96px; }
  .detail-hero { padding-bottom: 40px; gap: 24px; }
  .detail-title { font-size: clamp(40px, 10vw, 64px); }
  .detail-sub { font-size: 15px; }
  .detail-block { padding: 48px 0; }
  .detail-cta { flex-direction: column; align-items: stretch; }
  .detail-cta .btn { justify-content: center; }
  .detail-list li { padding: 18px 20px; }
}

@media (max-width: 540px) {
  .hero-tags { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 18px; }
  .stat, .stat:nth-child(odd), .stat:nth-child(even) {
    border-left: none; border-top: 1px solid var(--line-dark);
    padding: 18px 0 0;
  }
  .stat:first-child { border-top: none; padding-top: 0; }
  .process-list { grid-template-columns: 1fr; }
  .nav { padding-left: 18px; padding-right: 18px; }
}


/* =====================================================================
   FOOTER LEGAL NAV
   ===================================================================== */
.footer-legal-nav {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .04em;
  padding-bottom: 8px;
}
.footer-legal-nav a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.footer-legal-nav a:hover { border-bottom-color: var(--lime); }
.footer-legal-nav .legal-sep { color: var(--mute); }

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 9997;
  background: #0f0f10;
  color: var(--ink);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  animation: cookie-rise .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes cookie-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cookie-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  align-items: center;
  padding: 18px 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.cookie-banner-copy strong { display: block; font-size: 11px; letter-spacing: .12em; color: var(--lime); margin-bottom: 4px; text-transform: uppercase; }
.cookie-banner-copy p { font-size: 14px; line-height: 1.55; color: rgba(244,244,241,.78); margin: 0; max-width: 640px; }
.cookie-banner-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cookie-link {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
  color: rgba(244,244,241,.7); text-decoration: none;
  padding: 4px 6px;
}
.cookie-link:hover { color: var(--lime); }
.cookie-btn { padding: 10px 16px; font-size: 13px; }
/* Accept and reject must carry equal visual weight — unequal prominence is
   treated as a dark pattern by EU DPAs and can invalidate the consent. */
.cookie-btn-choice {
  min-width: 150px;
  justify-content: center;
  background: var(--ink);
  color: #0f0f10;
  border: 1px solid var(--ink);
  font-weight: 700;
}
.cookie-btn-choice:hover { background: var(--lime); border-color: var(--lime); color: #0f0f10; }
@media (max-width: 700px) {
  .cookie-banner-inner { grid-template-columns: 1fr; padding: 16px 18px; gap: 14px; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* =====================================================================
   STICKY CALL BAR — mobile only
   ===================================================================== */
.sticky-call {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 9996;
  gap: 8px;
}
.sticky-call-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px;
  border-radius: 12px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.sticky-call-primary { background: var(--black); color: var(--lime); }
.sticky-call-wa      { background: #25D366;     color: #053a17; }
.sticky-call-btn:active { transform: translateY(1px); }

/* Chat launcher button. Sized here (not inline) so the phone breakpoint below
   can shrink it — on a narrow screen 56px reads oversized next to the two
   sticky-call buttons it sits above. */
.ekx-fab { width: 56px; height: 56px; }

/* One-time chat teaser bubble. Sits above the launcher, same footprint as the
   open chat window so it can never spill off a narrow screen. */
.ekx-teaser {
  position: absolute;
  bottom: 68px; right: 0;
  width: 220px;
  animation: ekx-teaser-in .25s ease;
}
.ekx-teaser-body {
  width: 100%;
  background: #1e1e22;
  color: #f4f4f1;
  border: 1px solid #2a2a2a;
  border-radius: 14px 14px 2px 14px;
  padding: 12px 14px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.ekx-teaser-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f4f4f1;
  color: #111;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
@keyframes ekx-teaser-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .ekx-teaser { width: min(220px, calc(100vw - 48px)); bottom: 58px; }
}

@media (max-width: 720px) {
  .sticky-call { display: flex; }
  body { padding-bottom: 80px; }
  .cookie-banner { bottom: 88px; }
  /* lift chat above call bar */
  #ekx-chat-root > div { bottom: 92px !important; }
  .ekx-fab { width: 46px; height: 46px; }
}


/* GDPR consent checkbox */
.consent-field { margin-top: 4px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; cursor: pointer; color: inherit; }
.consent-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 3px; background: transparent; cursor: pointer;
  opacity: .55;
  display: grid; place-items: center;
}
.consent-row input[type="checkbox"]:checked {
  background: var(--lime); border-color: var(--lime); opacity: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.consent-row input[type="checkbox"]:checked::after { content: none; }
.consent-row a {
  color: var(--lime);
  border-bottom: 1.5px solid var(--lime);
  text-decoration: none;
  font-weight: 600;
}
.consent-row a:hover { background: rgba(197,242,61,.15); }


/* =====================================================================
   RESPONSIVE — TABLET (700–1024px)
   Bewahre 2-spaltige Layouts wo möglich, reduziere Padding & Typo.
   ===================================================================== */
@media (min-width: 700px) and (max-width: 1024px) {
  :root { --pad-x: 32px; }

  /* Tighter nav gap so 6 items + lang fit in one row */
  .nav-links { gap: 18px; font-size: 13px; }
  .nav-cta { padding: 10px 16px; font-size: 13px; }
  .nav { padding: 12px 32px; }

  .section { padding: 88px 32px; }
  .section-head { margin-bottom: 48px; }
  .section-title { font-size: clamp(36px, 5.4vw, 56px); }
  .section-sub { font-size: 16px; }

  /* Hero — keep two-column but tighten */
  .hero { padding: 120px 32px 64px; gap: 36px; min-height: 88vh; }
  .hero-title { font-size: clamp(42px, 6.6vw, 69px); }
  .hero-sub { font-size: 17px; max-width: 48ch; }
  .hero-tags { grid-template-columns: 1fr 1fr; max-width: 480px; }

  /* Services — 2 cards per row stays */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .service-photo { aspect-ratio: 16/10; }

  /* Refs grid feels too tight on tablet */
  .refs-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(170px, auto);
    gap: 12px;
  }

  /* Process — 2x2 grid on tablet so the lime track still feels meaningful in 1 row */
  .process-track { display: none; }
  .process-dot { display: none; }
  .process-list { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }

  /* About — two cols stays but tighter */
  .about-grid { gap: 56px; }
  .about-meta { grid-template-columns: 1fr 1fr; }

  /* Team — 2 cols */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Contact / Termin */
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .termin-grid { grid-template-columns: 1fr; }
  .field input, .field textarea { font-size: 16px; }

  /* Footer */
  .footer { padding: 56px 32px 28px; }
}

/* =====================================================================
   RESPONSIVE — SMALL PHONE polish (≤480px)
   ===================================================================== */
@media (max-width: 480px) {
  :root { --pad-x: 16px; }

  .section { padding: 64px 16px; }
  .section-head { margin-bottom: 32px; }
  .section-eyebrow { font-size: 11px; }
  /* Here the 64px section padding barely clears the 61px nav, so an anchor jump
     leaves the eyebrow hugging the bar. Desktop has enough padding already. */
  section[id] { scroll-margin-top: 28px; }

  /* Hero ultra-compact */
  .hero { padding: 84px 16px 40px; min-height: auto; }
  .hero::before { display: none; }
  .hero-grid { padding-left: 0; }
  .hero-title { font-size: clamp(29px, 8.3vw, 42px); margin-bottom: 18px; }
  .nav-logo-img { height: 32px; }
  .hero-sub { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
  .hero-tags { grid-template-columns: 1fr; gap: 8px; }

  /* Buttons full-width and bigger tap target */
  .btn { padding: 14px 22px; font-size: 14px; min-height: 48px; }
  .hero-ctas .btn { width: 100%; }

  /* Marquee less aggressive */
  .marquee-track { font-size: 18px; gap: 28px; }

  /* Section title scaling */
  .section-title { font-size: clamp(28px, 8.4vw, 40px); line-height: 1.05; }

  /* Service cards inner padding */
  .service-card > .service-head,
  .service-card > .service-title,
  .service-card > .service-body,
  .service-card > .service-list,
  .service-card > .service-foot { padding-left: 18px; padding-right: 18px; }
  .service-photo { aspect-ratio: 4/3; margin-bottom: 14px; }

  /* Stats — single col reads better than cramped 2-col */
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat { padding: 0; border-left: none !important; }
  .stat-n { font-size: 44px; }
  .stats-row { padding-bottom: 32px; }

  /* Refs grid: 2-col bento */
  .refs-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(140px, auto);
    gap: 10px;
  }
  /* simplify all span rules to plain spans on small phones */
  .refs-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  .ref-card-tag { font-size: 10px; padding: 3px 7px; }
  .ref-card-title { font-size: 14px; }
  .ref-card-meta { font-size: 11px; }

  /* About: portrait first, smaller */
  .about-grid { gap: 24px; }
  .portrait-slot, .portrait-img { min-height: 280px; }
  .about-meta { grid-template-columns: 1fr; gap: 16px; }
  .about-meta dt { font-size: 10px; }
  .about-meta dd { font-size: 16px; }

  /* Process */
  .process-list { grid-template-columns: 1fr; gap: 24px; }
  .process-step h3 { font-size: 19px; }
  .process-step p { font-size: 14px; }

  /* FAQ */
  .faq-q { font-size: 16px; padding: 16px 0; grid-template-columns: 32px 1fr 20px; gap: 8px; }
  .faq-a { padding-left: 40px; padding-bottom: 18px; font-size: 14px; line-height: 1.6; }

  /* Termin form */
  .termin-form { padding: 18px; gap: 14px; }
  .topic-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .topic { padding: 9px 10px; font-size: 11.5px; }

  /* Contact cards */
  .contact-card { padding: 18px; }
  .contact-card strong { font-size: 16px; }

  /* Footer. No extra bottom padding for the sticky call bar here — body
     already reserves 80px for it at this breakpoint, so the old 100px was
     stacked on top of that. */
  .footer { padding: 20px 16px; }
  .footer-legal-nav {
    flex-wrap: wrap; gap: 8px 12px;
    font-size: 12px;
  }
  .footer-legal-nav .legal-sep { display: none; }
  /* Light pill, not the old rgba(0,0,0,.04) — that was written for a light
     footer and is invisible now that the footer is near-black. */
  .footer-legal-nav a { background: rgba(255,255,255,.07); padding: 6px 10px; border-radius: 16px; }

  /* Tweaks panel — drag-handle off mobile because crowded */
  .tweaks-panel { right: 12px !important; bottom: 92px !important; width: calc(100vw - 24px) !important; max-width: 360px; }

  /* Chat bubble: smaller bottom inset since call bar takes space */
  #ekx-chat-root > div {
    bottom: 80px !important;
    right: 12px !important;
  }
}

/* =====================================================================
   RESPONSIVE — Sticky bar / call helpers
   ===================================================================== */
@media (max-width: 720px) {
  /* Cookie banner sits ABOVE call bar */
  .cookie-banner { left: 10px; right: 10px; bottom: 84px; border-radius: 12px; }
  .cookie-banner-inner { padding: 14px 16px; }
  .cookie-banner-copy p { font-size: 13px; }
  .cookie-banner-actions { gap: 8px; }
  .cookie-btn { padding: 9px 13px; font-size: 12px; flex: 1; }
  .cookie-link { font-size: 11px; flex-basis: 100%; text-align: center; order: -1; margin-bottom: 4px; }

  /* Tighten chat panel on tiny screens. Targeted by class rather than
     ":first-child" — that positional match also caught the teaser bubble
     whenever it occupied the same slot the chat window would otherwise be in. */
  #ekx-chat-root .ekx-window {
    width: calc(100vw - 24px) !important;
    max-width: 360px;
    height: min(560px, 70vh) !important;
  }
}

/* =====================================================================
   ORIENTATION — landscape phones (short height)
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 32px; }
  .hero-title { font-size: clamp(27px, 5.3vw, 45px); }
  .hero-scroll { display: none; }
  .sticky-call { bottom: 8px; }
  body { padding-bottom: 72px; }
}

/* =====================================================================
   TOUCH polish — remove hover states that get stuck after tap
   ===================================================================== */
@media (hover: none) {
  .btn:hover { transform: none !important; box-shadow: none !important; }
  .service-card:hover .service-photo img { transform: none !important; }
  .ref-card:hover { transform: none !important; }
}

/* =====================================================================
   PREVENT iOS auto-zoom on input focus (font-size must be ≥16px)
   ===================================================================== */
@media (max-width: 1024px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], textarea, select {
    font-size: 16px;
  }
}

/* =====================================================================
   ACCESSIBILITY — ensure form labels & consent are readable on all bg
   ===================================================================== */
/* All three section variants are dark in this theme (--cream is #0E0E10), so
   the consent text needs the light colour everywhere. It used to be
   rgba(26,26,26,.7) for "light" sections — near-black on near-black, which is
   what made the booking form's consent line unreadable. */
.section-light .consent-row,
.section-cream .consent-row,
.section-dark .consent-row { color: rgba(244,244,241,.78); }
.section-light .consent-row a,
.section-cream .consent-row a { color: var(--lime); border-color: var(--lime); }