/*
 * d4-base.css — D4 RadicalEdition shared overrides
 * body.d4-theme scopes mobile-bar/menu overrides (applied to body via bodyClass prop)
 * All rules are scoped to .d4-page so they only affect pages
 * that opt in to the D4 design system via <div class="d4-page">.
 *
 * D4 tokens:
 *   BG        #0a0a0a    Alt-BG   #0d0d12
 *   Text      #f0ede6    Muted    #4a4a54
 *   Accent    #e84118    Border   #1a1a1f
 *   Font      DM Sans (body/headings)
 *   Mono      DM Mono (labels/tags/numbers)
 */

/* Local font-face declarations — no Google Fonts connection */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:700 900;font-display:swap;src:url('/fonts/dm-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:700 900;font-display:swap;src:url('/fonts/dm-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Before/After slider focus ring ── */
[data-slider-handle]:focus-visible {
  outline: 2px solid #e84118;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ── Base ── */
.d4-page {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: #0a0a0a;
  color: #f0ede6;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav overrides ── */
.d4-page .nav-cta {
  background: #e84118;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}
.d4-page .nav-cta:hover { background: #c93510; }
.d4-page .nav-links a[aria-current="page"] { color: #e84118; }

/* ── Breadcrumb ── */
.d4-page .bc-wrap { background: #0a0a0a; }
.d4-page .bc-list li { color: #4a4a54; }
.d4-page .bc-list a { color: #4a4a54; }
.d4-page .bc-list a:hover { color: #f0ede6; }
.d4-page .bc-sep { color: rgba(74,74,84,.4); }

/* ── Hero ── */
.d4-page .page-hero {
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1f;
  padding-bottom: 56px;
}
.d4-page .page-hero::before { display: none; }
.d4-page .hero-eyebrow { color: #e84118; font-family: 'DM Mono', 'Courier New', monospace; }
.d4-page .hero-eyebrow::before { background: #e84118; }
.d4-page .page-h1 { color: #f0ede6; font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .hero-lead { color: #4a4a54; }

/* ── Sections ── */
.d4-page .section { background: #0a0a0a; padding: 64px 0; border-top: 1px solid #1a1a1f; }
.d4-page .section--alt { background: #0d0d12; }
.d4-page .sec-eyebrow { color: #e84118; font-family: 'DM Mono', 'Courier New', monospace; }
.d4-page .sec-eyebrow::before { background: #e84118; }
.d4-page .sec-h2 { color: #f0ede6; font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .sec-lead { color: #4a4a54; }

/* ── Buttons ── */
.d4-page .btn-primary {
  background: #e84118;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}
.d4-page .btn-primary:hover { background: #c93510; }
.d4-page .btn-ghost {
  border-radius: 0;
  border-color: #1a1a1f;
  color: #4a4a54;
  background: transparent;
}
.d4-page .btn-ghost:hover {
  border-color: #e84118;
  background: rgba(232,65,24,.06);
  color: #f0ede6;
}

/* ── Process steps ── */
.d4-page .proc-grid { gap: 1px; background: #1a1a1f; border: 1px solid #1a1a1f; }
.d4-page .proc-step {
  background: #0d0d12;
  border: none;
  border-radius: 0;
  padding: 32px 24px;
}
.d4-page .proc-num {
  border-radius: 0;
  border-color: #e84118;
  border-width: 1px;
  font-family: 'DM Mono', 'Courier New', monospace;
  color: #e84118;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  background: transparent;
}
.d4-page .proc-step h4 { color: #f0ede6; font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .proc-step p { color: #4a4a54; }

/* ── FAQ ── */
.d4-page .faq-stack { max-width: 780px; margin-top: 40px; }
.d4-page details.fqi { border-bottom: 1px solid #1a1a1f; }
.d4-page details.fqi summary {
  color: #f0ede6;
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 22px 0;
}
.d4-page details.fqi summary:hover { color: #e84118; }
.d4-page .fqi-icon { color: #e84118; }
.d4-page .fqi-body { color: #4a4a54; }

/* ── CTA band ── */
.d4-page .cta-band {
  background: #e84118;
  border-top: none;
  text-align: left;
}
.d4-page .cta-band::before { display: none; }
.d4-page .cta-band h2 { color: #fff; }
.d4-page .cta-band p { color: rgba(255,255,255,.85); margin-left: 0; margin-right: 0; }
.d4-page .cta-band-btns { justify-content: flex-start; }
.d4-page .cta-band .btn-primary {
  background: #fff;
  color: #e84118;
  border-radius: 0;
}
.d4-page .cta-band .btn-primary:hover { background: rgba(255,255,255,.9); }

/* ── District links ── */
.d4-page .dist-link {
  border-radius: 0;
  background: #0d0d12;
  border-color: #1a1a1f;
  color: #4a4a54;
}
.d4-page .dist-link:hover {
  border-color: #e84118;
  color: #f0ede6;
  background: rgba(232,65,24,.05);
}

/* ── Location tags ── */
.d4-page .loc-tag {
  border-radius: 0;
  border-color: #1a1a1f;
  background: rgba(232,65,24,.04);
  color: #4a4a54;
}

/* ── Article link cards ── */
.d4-page .art-link {
  border-radius: 0;
  background: #0d0d12;
  border-color: #1a1a1f;
}
.d4-page .art-link:hover {
  border-color: #e84118;
  transform: none;
  box-shadow: none;
}
.d4-page .art-link-cat { color: #e84118; }
.d4-page .art-link-title { color: #f0ede6; }

/* ── Mobile phone bar (body.d4-theme) ── */
body.d4-theme .mobile-phone-bar {
  background: #e84118;
  box-shadow: 0 -4px 20px rgba(232,65,24,.3);
  border-top-color: rgba(255,255,255,.15);
}

/* ── Mobile menu CTA (body.d4-theme) ── */
body.d4-theme .mobile-menu-cta {
  background: #e84118 !important;
  border-radius: 0 !important;
  color: #fff !important;
}
body.d4-theme .mobile-menu-cta:hover {
  background: #c93510 !important;
}
body.d4-theme .mobile-menu-inner a[aria-current="page"] { color: #e84118; }

/* ── Responsive layout helpers ── */

/*
 * CONVENTION: Always use .d4-2col (or .d4-3col / .d4-methods-grid) for
 * two-column grids in sub-page components. Never write an inline
 * gridTemplateColumns: '1fr 1fr' — inline styles cannot respond to media
 * queries, so the layout will not collapse on mobile.
 *
 * For grids that already switch columns via a JS `mobile` state variable
 * (e.g. form rows in RadicalEdition), keep the JS-based approach in place
 * but do not introduce new inline two-column grids.
 */

/* Two-column grid that collapses to single column on mobile */
.d4-page .d4-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Three-column grid that collapses to single column on mobile */
.d4-page .d4-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Methods tile grid — 2 columns desktop, 1 column mobile */
.d4-page .d4-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Stats bar — 4 columns desktop, 2×2 on narrow phones */
.d4-page .d4-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Service card — full-border tile used inside d4-3col service grids */
.d4-page .d4-service-card {
  border-left: 1px solid #1a1a1f;
}

/* Flex pair item — stacks to full width on mobile */
.d4-page .d4-pair-item {
  min-width: 0;
}

/* Ressourcenschonender Ansatz — asymmetric editorial split:
   headline left (~44 fr), body text right (~52 fr).
   Eyebrow label sits above the grid as a full-width row.
   Collapses to a single column on mobile. */
.d4-page .d4-ressource-grid {
  display: grid;
  grid-template-columns: 44fr 52fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* Prevent grid children from overflowing 1fr columns */
.d4-page .d4-2col > *,
.d4-page .d4-3col > *,
.d4-page .d4-methods-grid > *,
.d4-page .d4-stats-grid > *,
.d4-page .d4-ressource-grid > * {
  min-width: 0;
}

/* Prevent page-level horizontal scroll */
.d4-page {
  overflow-x: hidden;
}

/* ── Mid-breakpoint: 3-col → 2-col at tablet width ── */
@media (max-width: 1024px) {
  .d4-page .d4-3col {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .d4-page .d4-2col {
    grid-template-columns: 1fr !important;
  }

  .d4-page .d4-3col {
    grid-template-columns: 1fr !important;
  }

  .d4-page .d4-methods-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ressourcenschonender Ansatz grid — collapses to single column on mobile */
  .d4-page .d4-ressource-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats bar collapses to 2×2 grid on phones */
  .d4-page .d4-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Service cards in single-column view: restore left border and add top separator */
  .d4-page .d4-service-card {
    border-left: 1px solid #1a1a1f !important;
    border-top: 1px solid #1a1a1f !important;
  }

  .d4-page .d4-pair-item {
    flex: 1 1 100% !important;
  }

  /* TechnicalRows: keep horizontal scroll working on narrow screens */
  .d4-page .tech-rows-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .d4-page .tech-rows-scroll > * {
    min-width: 480px;
  }
}

/* ── Vier Prinzipien: Detail-Text immer sichtbar ── */
.p4-detail {
  opacity: 1;
}


/* ── RadicalEdition: extracted keyframes + layout classes ──────────────── */
/* (Moved from inline <style> tags in RadicalEdition.tsx for SSR safety)   */

/* RotatingBadge */
@keyframes spin-badge { to { transform: rotate(360deg); } }
.rb-spin { animation: spin-badge 12s linear infinite; }
.rb-spin[data-paused] { animation-play-state: paused; }
a:hover .rb-spin:not([data-paused]) { animation-play-state: paused; }

/* Contact form animations */
@keyframes kachel-puls {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 1.5px rgba(232,65,24,0.45); }
}
@keyframes email-puls {
  0%, 100% { color: #ffffff; text-shadow: none; }
  50% { color: #e84118; text-shadow: 0 0 18px rgba(232,65,24,0.22); }
}
@keyframes info-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes info-border-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(232,65,24,0); }
  50%       { box-shadow: 0 0 0 1px rgba(232,65,24,0.50); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes kachel-puls       { 0%, 100% {} }
  @keyframes email-puls        { 0%, 100% {} }
  @keyframes info-float        { 0%, 100% {} }
  @keyframes info-border-pulse { 0%, 100% {} }
}

/* Global layout — selection, focus, nav, mobile menu */
::selection { background: #e84118; color: #fff; }
:focus-visible { outline: 2px solid #e84118; outline-offset: 3px; }
html { scroll-behavior: smooth; }
.nav-links { display: flex; gap: 28px; align-items: center; }
@media (max-width: 720px) { .nav-links { display: none; } }
.hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 4px; }
@media (max-width: 720px) { .hamburger { display: flex; } }
.hamburger span { display: block; width: 22px; height: 1.5px; background: #4a4a54; transition: background 0.2s; }
.mob-menu { position: fixed; inset: 0; z-index: 490; background: #0a0a0a; display: flex; flex-direction: column; padding: 80px 28px 48px; gap: 0; }
.mob-menu-link { display: block; padding: 18px 0; font-family: 'DM Mono','Courier New',monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #4a4a54; text-decoration: none; border-bottom: 1px solid #1a1a1f; transition: color 0.15s; }
.mob-menu-link:hover { color: #f0ede6; }
.mob-menu-close { align-self: flex-end; background: transparent; border: 1px solid #1a1a1f; color: #4a4a54; font-family: 'DM Mono','Courier New',monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; margin-bottom: 32px; }