/* ============================================================
   ELEKTRIKER DORTMUND — site.css
   Basis: Kino-Landmark, re-themed für Elektriker
   Jede Seite linkt diese Datei unverändert. Alle Theme-Werte
   (Farben, Typo, Spacing, Schatten, Motion) sind hier definiert.
   Per-page <style> enthält NUR Layout-Overrides (grid-Spans,
   Positionierung) — niemals neue Theme-Werte.
   ============================================================ */

/* ── 1. DESIGN TOKENS (:root) ──────────────────────────────── */
:root {
  /* Farbrollen */
  --color-bg:              #f7f8fc;
  --color-surface:         #ffffff;
  --color-surface-alt:     #edf0f8;
  --color-border:          #d1d9eb;

  --color-text:            #111827;
  --color-text-muted:      #4b5568;
  --color-text-on-primary: #ffffff;

  --color-primary:         #1c3d7a;
  --color-primary-hover:   #142d5c;
  --color-primary-subtle:  #e6ecf8;

  --color-grad-a:          #162f65;
  --color-grad-b:          #2d62c4;

  --color-cta:             #e07a10;
  --color-cta-hover:       #c2640a;
  --color-text-on-cta:     #1a0e02;

  --color-dark:            #0c1220;
  --color-dark-2:          #101828;
  --color-dark-line:       #1e2d48;
  --color-dark-muted:      #8fa3c4;

  --color-focus:           #0b1e4a;
  --color-danger:          #b91c1c;
  --color-danger-bg:       #fef2f2;
  --color-danger-border:   #fca5a5;
  --color-success:         #166534;
  --color-warning:         #92400e;

  /* Typografie */
  --font-body:    'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-heading: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-size-base: 1.125rem;  /* 18px — Pflicht-Untergrenze */
  --line-height-body: 1.65;
  --line-height-heading: 1.12;
  --measure: 66ch;

  /* Typografische Skala (Ratio ~1.25) */
  --font-size-xs:  0.72rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.15rem;
  --font-size-xl:  1.4rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.8rem;

  /* Spacing (N × 0.25rem ramp) — keep the scale complete so var(--space-N)
     never resolves to an undefined token (which silently zeroes padding/gap). */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;

  /* Radius (technisch-präzise Persönlichkeit) */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* Schatten (ein zurückhaltendes System) */
  --shadow-sm: 0 1px 3px rgba(12,18,32,.08);
  --shadow-md: 0 8px 24px rgba(12,18,32,.12);
  --shadow-lg: 0 20px 50px rgba(12,18,32,.20);

  /* Motion */
  --duration-fast: 0.12s;
  --duration-base: 0.22s;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --container-max: 1280px;
  --tap-target-min: 44px;

  /* Section padding */
  --section-pad: 5rem;
}

/* ── 2. MOTION GUARD ────────────────────────────────────────── */
@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;
    scroll-behavior: auto !important;
  }
}

/* ── 3. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: clip; /* sticky-safe guard against any residual horizontal overflow on mobile */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── 4. ACCESSIBILITY ───────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-cta); color: var(--color-text-on-cta);
  padding: var(--space-3) var(--space-5);
  font-weight: 800; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 5. TYPOGRAPHY PRIMITIVES ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -.015em;
  overflow-wrap: break-word; /* long German compounds break instead of overflowing narrow columns */
}
h1 { font-size: clamp(2rem, 5vw, var(--font-size-4xl)); }
h2 { font-size: clamp(1.6rem, 3.5vw, var(--font-size-3xl)); }
h3 { font-size: clamp(1.2rem, 2.5vw, var(--font-size-2xl)); }
h4 { font-size: var(--font-size-xl); }

p + p { margin-top: var(--space-4); }
a:hover { opacity: .85; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border: 1px solid #c5d3ec;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}
.eyebrow--light {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
}
.eyebrow--accent {
  color: var(--color-cta);
  background: rgba(224,122,16,.12);
  border-color: rgba(224,122,16,.4);
}
.eyebrow .dot { color: var(--color-cta); }

.lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-width: 54ch;
}
.lead--light { color: var(--color-dark-muted); }
.measure { max-width: var(--measure); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Text links in body copy */
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--color-primary-hover); }

/* ── 6. BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  font-weight: 800; font-size: var(--font-size-md);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              background var(--duration-fast) var(--ease);
  min-height: var(--tap-target-min);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-cta {
  background: var(--color-cta);
  color: var(--color-text-on-cta);
  box-shadow: 0 8px 22px rgba(224,122,16,.38);
}
.btn-cta:hover { background: var(--color-cta-hover); box-shadow: 0 12px 28px rgba(224,122,16,.45); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: 0 4px 14px rgba(28,61,122,.28);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-ghost {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.42);
  color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover { background: var(--color-surface-alt); }

.btn--lg { font-size: var(--font-size-lg); padding: var(--space-5) var(--space-10); }
.btn--sm { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); min-height: 36px; }

/* Phone inline link */
.tel-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 800; color: var(--color-primary);
  text-decoration: none;
}
.tel-link:hover { color: var(--color-primary-hover); }
.tel-link svg { width: 18px; height: 18px; color: var(--color-cta); flex: none; }

/* ── 7. LAYOUT PRIMITIVES ───────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding: var(--section-pad) 0; background: var(--color-bg); }
.section--tint { background: var(--color-surface-alt); }
.section--dark {
  background: var(--color-dark);
  color: var(--color-dark-muted);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--color-cta); background: rgba(224,122,16,.12); border-color: rgba(224,122,16,.35); }
.section--dark .lead { color: var(--color-dark-muted); }

.section-head { margin-bottom: var(--space-12); }
.section-head.center { text-align: center; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head .eyebrow { margin-bottom: var(--space-3); }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── 8. COMPONENT PRIMITIVES ────────────────────────────────── */

/* --- Card --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Dark card (inside .section--dark) */
.card--dark {
  background: var(--color-dark-2);
  border-color: var(--color-dark-line);
  box-shadow: none;
}
.card--dark:hover {
  border-color: rgba(224,122,16,.5);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.card--dark h3, .card--dark h4 { color: #fff; }
.card--dark p { color: var(--color-dark-muted); }

/* Photo card (services) */
.pcard {
  background: var(--color-dark-2);
  border: 1px solid var(--color-dark-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(0,0,0,.4);
  border-color: rgba(224,122,16,.5);
}
.pcard-img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; display: block; background: var(--color-dark-line); }
.pcard-body { padding: var(--space-6); }
.pcard-icon {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: #fff; font-size: var(--font-size-lg); font-weight: 800; margin-bottom: var(--space-3);
}
.pcard-icon svg { width: 20px; height: 20px; color: var(--color-cta); flex: none; }
.pcard p { color: var(--color-dark-muted); font-size: var(--font-size-md); }
.pcard .more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-cta); font-weight: 800; font-size: var(--font-size-sm);
}
.pcard .more svg { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease); }
.pcard:hover .more svg { transform: translateX(4px); }

/* --- Image placeholder --- */
.imgph {
  background: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.imgph::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6);
  white-space: pre-line;
  letter-spacing: .04em;
}
.imgph--hero {
  position: absolute; inset: 0;
  border: none; border-radius: 0;
  background: linear-gradient(135deg, #0a1628 0%, #1a2f5a 50%, #0c1220 100%);
  z-index: 0;
}
.imgph--hero::after { color: rgba(255,255,255,.3); font-size: 0.65rem; }
.imgph--portrait { aspect-ratio: 4/5; border-radius: var(--radius-xl); }
.imgph--service { aspect-ratio: 16/10; border-radius: 0; border: none; }
.imgph--before-after { aspect-ratio: 4/3; border-radius: var(--radius-lg); }

/* Real images replacing imgph placeholders */
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block;
}
.portrait-img {
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.editorial-img {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.square-img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: var(--radius-lg);
}

/* --- Icon badge (circular) --- */
.icon-badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge--primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.icon-badge--white { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: var(--color-cta); }
.icon-badge--cta { background: rgba(224,122,16,.14); color: var(--color-cta); border: 1px solid rgba(224,122,16,.35); }

/* --- Chip (Stadtteil coverage) --- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  font-weight: 700; font-size: var(--font-size-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
.chip:hover {
  background: var(--color-primary-subtle);
  border-color: #c5d3ec;
}
.chip svg { width: 15px; height: 15px; color: var(--color-primary); flex: none; }
.chip-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* --- Steps (process) --- */
.steps-row { display: grid; gap: var(--space-6); position: relative; }
/* Connector spans from the centre of the first circle to the centre of the last,
   not the full row — otherwise it juts out past the outer circles as stray stubs.
   For 3 equal columns the centre offset is half a column = (100% - 2*gap) / 6. */
.steps-row::before {
  content: '';
  position: absolute; top: 38px;
  left: calc((100% - 2 * var(--space-6)) / 6);
  right: calc((100% - 2 * var(--space-6)) / 6);
  height: 2px; background: var(--color-border); z-index: 0;
}
.step-item { text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--color-grad-a), var(--color-grad-b));
  color: #fff; font-weight: 800; font-size: var(--font-size-xl);
  display: grid; place-items: center;
  margin: 0 auto var(--space-5);
  box-shadow: 0 6px 18px rgba(28,61,122,.3);
}
.step-item h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.step-item p { color: var(--color-text-muted); font-size: var(--font-size-md); max-width: 28ch; margin-inline: auto; }

/* --- Stat card --- */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.stat-card b { display: block; font-size: var(--font-size-lg); color: var(--color-text); font-weight: 800; }
.stat-card span { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --- Accordion (FAQ) --- */
.accordion { max-width: 840px; margin-inline: auto; }
.acc-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
  overflow: hidden;
}
.acc-trigger {
  width: 100%; text-align: left;
  padding: var(--space-5) var(--space-6);
  font-weight: 700; font-size: var(--font-size-lg);
  color: var(--color-text);
  background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-6); min-height: var(--tap-target-min);
}
.acc-trigger:hover { background: var(--color-surface-alt); }
.acc-icon {
  width: 24px; height: 24px; flex: none;
  color: var(--color-cta);
  transition: transform var(--duration-base) var(--ease);
}
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease);
}
.acc-body p {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}
.acc-body p + p { margin-top: var(--space-3); }
.acc-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Notice / safety callout --- */
.notice {
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex; gap: var(--space-4); align-items: flex-start;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.notice--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}
.notice-icon {
  width: 24px; height: 24px; flex: none; margin-top: 2px;
  color: var(--color-danger);
}
.notice--danger .notice-body strong { color: var(--color-danger); }
.notice-body { font-size: var(--font-size-md); line-height: 1.55; }

/* --- Reveal animation --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.reveal[data-delay="6"] { transition-delay: .48s; }

/* ── 9. SHARED CHROME ───────────────────────────────────────── */

/* --- Top bar --- */
.topbar {
  background: var(--color-dark);
  color: #8fa3c4;
  font-size: var(--font-size-sm);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-1);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 700; }
.topbar .dot { color: var(--color-cta); margin-right: var(--space-2); }

/* --- Header / nav --- */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,18,32,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #fff;
  transition: box-shadow var(--duration-base) var(--ease);
}
header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35); }

.nav-wrap {
  display: flex; align-items: center; gap: var(--space-5);
  height: 70px;
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: 800; font-size: 1.1rem; color: #fff;
  text-decoration: none; flex: none;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--color-grad-a), var(--color-grad-b));
  display: grid; place-items: center; flex: none;
  box-shadow: 0 4px 12px rgba(45,98,196,.5);
}
.brand-mark svg { width: 22px; height: 22px; color: #fff; }

.nav-menu {
  display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4);
  flex: 1;
}
.nav-menu a, .nav-menu button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: .92rem;
  color: #cdd8ee; background: none; border: 0; cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
  min-height: var(--tap-target-min);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.nav-menu a:hover, .nav-menu button:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-menu a.active { color: #fff; background: rgba(255,255,255,.1); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle svg { width: 14px; height: 14px; transition: transform var(--duration-fast); }
.nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 230px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              visibility 0s var(--duration-base);
  z-index: 50;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel {
  opacity: 1; pointer-events: auto; visibility: visible; transform: none;
  transition-delay: 0s;
}
.dropdown-panel a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text) !important;
  font-size: .9rem; font-weight: 600;
  background: none;
  transition: background var(--duration-fast);
  min-height: var(--tap-target-min);
  align-items: center;
}
.dropdown-panel a:hover { background: var(--color-surface-alt) !important; color: var(--color-primary) !important; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.nav-phone { text-align: right; line-height: 1.1; color: #fff; }
.nav-phone b { display: block; font-size: 1.05rem; }
.nav-phone span { font-size: .68rem; color: var(--color-cta); font-weight: 800; letter-spacing: .04em; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-md);
  background: transparent; cursor: pointer;
  place-items: center;
  color: #fff;
}
.burger svg { width: 22px; height: 22px; }

/* --- Mobile drawer --- */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(6,10,22,.6);
  opacity: 0; pointer-events: none; visibility: hidden;
  overflow: hidden; /* clip the off-screen (translateX 100%) panel so it can't create horizontal page scroll on mobile */
  transition: opacity var(--duration-base), visibility 0s var(--duration-base);
}
.drawer.open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-surface);
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease);
  display: flex; flex-direction: column; gap: var(--space-2);
  overflow-y: auto;
}
.drawer.open .drawer-panel { transform: none; }
.drawer-close {
  align-self: flex-end; border: 0; background: none;
  font-size: 1.6rem; cursor: pointer; color: var(--color-text-muted);
  line-height: 1; padding: var(--space-2);
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
}
.drawer-panel a, .drawer-panel button {
  display: flex; align-items: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600; color: var(--color-text);
  text-decoration: none; background: none; border: 0;
  cursor: pointer; font-size: inherit;
  min-height: var(--tap-target-min);
}
.drawer-panel a:hover, .drawer-panel button:hover { background: var(--color-surface-alt); }
.drawer-panel .sub-links { padding-left: var(--space-6); }
.drawer-panel .sub-links a { font-size: .95rem; padding: var(--space-3) var(--space-3); }
.drawer-cta { margin-top: var(--space-4); }

/* --- Sticky mobile call bar --- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(12,18,32,.16);
  padding: var(--space-3) var(--space-4);
  display: none;
}
.callbar .btn-cta { width: 100%; font-size: var(--font-size-lg); justify-content: center; }

/* --- Scroll to top --- */
.toTop {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff; border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
  box-shadow: var(--shadow-md);
}
.toTop.show { opacity: 1; transform: none; pointer-events: auto; }
.toTop svg { width: 22px; height: 22px; }
.toTop:hover { background: var(--color-primary-hover); transform: translateY(-2px); }

/* ── 10. HERO (SHARED STRUCTURE) ────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 82vh, 780px);
  display: flex; align-items: center;
  color: #fff;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(8,12,24,.52) 0%,
    rgba(8,12,24,.60) 35%,
    rgba(11,18,40,.92) 100%),
    radial-gradient(120% 90% at 15% 30%, rgba(28,61,122,.35), transparent 55%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%; padding: var(--space-20) 0;
}
.hero-inner { max-width: 680px; }
.hero h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  margin: var(--space-5) 0 var(--space-6);
}
.hero-checks {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-8); max-width: 36ch;
}
.hero-checks li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-weight: 600; font-size: var(--font-size-lg); color: #e8eefb;
}
.hero-checks svg {
  width: 22px; height: 22px; color: var(--color-cta);
  flex: none; margin-top: 2px;
}
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm); color: #b5c5e0;
  display: flex; align-items: center; gap: var(--space-2);
}
.hero-note svg { width: 16px; height: 16px; color: var(--color-cta); flex: none; }

/* Emergency hero variant */
.hero--emergency { min-height: clamp(420px, 65vh, 600px); }
.hero--emergency h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); }

/* Notdienst page: split layout hero */
.hero--split .hero-inner { max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }

/* ── 11. GRADIENT FEATURE BAND ──────────────────────────────── */
.feature-band { margin-top: var(--space-12); position: relative; z-index: 5; }
.feature-card {
  background: linear-gradient(120deg, var(--color-grad-a) 0%, #1c4a9e 55%, var(--color-grad-b) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-10);
}
@media (max-width: 640px) { .feature-card { padding: var(--space-8) var(--space-6); } }
.feature-badges {
  display: grid;
  gap: var(--space-6);
}
.feature-badge {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); color: #fff; padding: var(--space-2);
}
.feature-badge b { font-size: 1.02rem; font-weight: 800; }
.feature-badge span { font-size: var(--font-size-sm); color: #cdd9f1; }

/* ── 12. INTRO SPLIT (editorial) ────────────────────────────── */
.intro-split {
  display: grid; align-items: center; gap: var(--space-12);
}
.intro-text p + p { margin-top: var(--space-4); }
.intro-text h2 { margin-bottom: var(--space-5); }
.stat-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.stat-row .stat-card { flex: 1; min-width: 140px; }

.intro-photo { position: relative; }
.intro-photo .imgph--portrait {
  width: 100%; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.photo-tag {
  position: absolute; left: var(--space-5); bottom: var(--space-5);
  background: rgba(12,18,32,.84);
  backdrop-filter: blur(4px);
  color: #fff; font-weight: 700; font-size: .9rem;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: var(--space-2);
}
.photo-tag svg { width: 17px; height: 17px; color: var(--color-cta); }

/* ── 13. CALL CTA BAND (phone-only, replaces form band) ─────── */
.callband {
  background: linear-gradient(120deg, var(--color-grad-a), var(--color-grad-b));
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-8); flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.callband-text b { font-size: var(--font-size-2xl); color: #fff; display: block; }
.callband-text span { color: #cdd9f1; margin-top: var(--space-1); display: block; }
.callband-phone {
  display: inline-flex; align-items: center; gap: var(--space-4);
  background: rgba(255,255,255,.1);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.22);
  font-size: var(--font-size-2xl); font-weight: 800; color: #fff;
  text-decoration: none;
  transition: background var(--duration-fast);
}
.callband-phone:hover { background: rgba(255,255,255,.2); color: #fff; opacity: 1; }
.callband-phone svg { width: 28px; height: 28px; color: var(--color-cta); }

/* ── 14. COVERAGE (Stadtteile) ──────────────────────────────── */
.coverage-wrap { text-align: center; }
.coverage-wrap .eyebrow { margin-bottom: var(--space-4); }
.coverage-wrap h2 { margin-bottom: var(--space-5); }
.coverage-lead { color: var(--color-text-muted); max-width: 58ch; margin-inline: auto var(--space-8); margin-bottom: var(--space-8); }

/* ── 15. CLOSING CTA (dark) ─────────────────────────────────── */
.closing {
  background: var(--color-dark);
  position: relative; overflow: hidden;
  text-align: center;
}
.closing::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 75% 20%, rgba(45,98,196,.35), transparent 55%);
  z-index: 0;
}
.closing .container { position: relative; z-index: 1; }
.closing h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.closing p { color: var(--color-dark-muted); max-width: 50ch; margin: var(--space-5) auto var(--space-8); font-size: var(--font-size-lg); }
.closing-phone {
  display: inline-flex; align-items: center; gap: var(--space-5);
  background: var(--color-cta);
  color: var(--color-text-on-cta);
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-2xl); font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(224,122,16,.38);
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.closing-phone:hover { background: var(--color-cta-hover); transform: translateY(-2px); color: var(--color-text-on-cta); opacity: 1; }
.closing-phone svg { width: 28px; height: 28px; }
.closing-note { margin-top: var(--space-6); color: var(--color-dark-muted); font-size: var(--font-size-sm); }

/* ── 16. BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; list-style: none; }
.breadcrumb a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb .sep { color: var(--color-border); }

/* ── Screen-reader only utility ─────────────────────────────── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── 17. FOOTER ─────────────────────────────────────────────── */
footer {
  background: var(--color-dark);
  color: #8fa3c4;
  padding: var(--space-16) 0 var(--space-8);
  font-size: .93rem;
}
.footer-grid { display: grid; gap: var(--space-8); }
.footer-brand { display: flex; gap: var(--space-3); align-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: var(--space-5); text-decoration: none; }
.footer-brand .brand-mark { width: 36px; height: 36px; }
footer h3, footer h4 { color: #fff; margin-bottom: var(--space-5); font-size: .95rem; }
footer a { display: block; padding: var(--space-2) 0; color: #8fa3c4; text-decoration: none; }
/* Ensure tel links in topbar / nav-phone meet 44px tap target */
/* Global tel: tap-target — all tel: links ≥ 44 px touch area (WCAG 2.5.5) */
a[href^="tel:"]:not(.btn) { display: inline-flex; align-items: center; padding-block: 11px; }
.topbar a[href^="tel:"]:not(.btn) { padding-inline: var(--space-2); }
.footer-phone a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; }
/* Underline prose links for link-in-text-block accessibility */
main p > a, main li > a { text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: #fff; opacity: 1; }
.footer-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xl); font-weight: 800; color: var(--color-cta);
  margin-bottom: var(--space-2);
}
.footer-phone svg { width: 22px; height: 22px; }
.footer-bar {
  border-top: 1px solid var(--color-dark-line);
  margin-top: var(--space-10); padding-top: var(--space-6);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4); color: #8fa3c4; font-size: var(--font-size-sm);
}
.footer-bar a { display: inline; padding: 0; color: #8fa3c4; }
.footer-bar a:hover { color: #fff; }

/* ── 18. SPECIAL LAYOUTS (used by multiple pages) ───────────── */

/* Service page: why-us panel */
.why-panel {
  background: linear-gradient(120deg, var(--color-grad-a), var(--color-grad-b));
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  color: #fff;
}
.why-panel h3 { color: #fff; }
.why-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.why-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-item svg { width: 22px; height: 22px; color: var(--color-cta); flex: none; margin-top: 2px; }
.why-item p { color: #cdd9f1; font-size: var(--font-size-md); }

/* Feature split (text + visual) */
.feature-split { display: grid; align-items: center; gap: var(--space-12); }
.feature-split .text-side h2 { margin-bottom: var(--space-5); }
.feature-split .text-side p + p { margin-top: var(--space-4); }

/* Icon list (for factors/symptoms/benefits) */
.icon-list { display: flex; flex-direction: column; gap: var(--space-4); }
.icon-list-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.icon-list-item svg { width: 22px; height: 22px; color: var(--color-cta); flex: none; margin-top: 2px; }
.icon-list-item .il-text,
.icon-list-item .icon-list-text { min-width: 0; flex: 1; word-break: break-word; overflow-wrap: break-word; }
.icon-list-item .il-text strong,
.icon-list-item .icon-list-text strong { display: block; color: var(--color-text); font-weight: 700; margin-bottom: 2px; }
.icon-list-item .il-text span,
.icon-list-item .icon-list-text span { color: var(--color-text-muted); font-size: var(--font-size-md); word-break: break-word; overflow-wrap: break-word; }

/* Compact service list for leistungen/hub pages */
.service-row { display: flex; flex-direction: column; gap: var(--space-3); }
.service-row a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700; color: var(--color-text);
  gap: var(--space-4);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.service-row a:hover { background: var(--color-primary-subtle); border-color: #c5d3ec; transform: translateX(4px); }
.service-row a svg { width: 18px; height: 18px; color: var(--color-cta); flex: none; }
.service-row .svc-meta { font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ── 19. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --section-pad: 3.5rem; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .feature-badges { grid-template-columns: repeat(2, 1fr) !important; }
  .intro-split { grid-template-columns: 1fr !important; }
  .intro-photo { order: -1; max-width: 480px; margin-inline: auto; }
  .callband { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero--split .hero-inner { grid-template-columns: 1fr !important; }
  .feature-split { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  :root { --section-pad: 2.75rem; }
  .nav-menu, .nav-phone, .nav-right .btn-cta { display: none; } /* mobile: logo + burger only — the call CTA lives in the sticky callbar & topbar */
  .burger { display: grid; }
  .callbar { display: block; }
  .btn { white-space: normal; } /* long CTA labels (e.g. "Jetzt anrufen: 0159…") wrap instead of forcing horizontal overflow */
  .toTop { bottom: 80px; }
  .g3, .g2 { grid-template-columns: 1fr; }
  .feature-badges { grid-template-columns: repeat(2, 1fr) !important; }
  .steps-row.g3 { grid-template-columns: 1fr; }
  .steps-row::before { display: none; } /* vertical layout — no horizontal connector */
  .feature-band { margin-top: var(--space-8); }
  .callband { padding: var(--space-8); }
  .callband-phone { font-size: var(--font-size-xl); }
  .closing-phone { font-size: var(--font-size-xl); padding: var(--space-4) var(--space-8); }
  .footer-grid { grid-template-columns: 1fr !important; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .stat-row { flex-direction: column; }
  .service-row a { flex-direction: row; }
}

/* ── 20. PRINT ──────────────────────────────────────────────── */
@media print {
  .callbar, .toTop, .drawer, .burger, header { display: none !important; }
  body { background: white; color: black; }
  a[href^="tel"]::after { content: " (" attr(href) ")"; }
}