/*
 * d4-base.css — D4 RadicalEdition shared overrides
 * body.d4-theme scopes mobile-bar/menu overrides (applied to body via bodyClass prop)
 * Shared subpage rules are scoped to .d4-page so they only affect pages
 * that opt in to the D4 design system via <div class="d4-page">.
 * The React homepage intentionally does not opt in; its .hero-texture rules
 * below are the only unscoped homepage-specific exception in this stylesheet.
 *
 * D4 tokens:
 *   BG        #0a0a0a    Alt-BG   #0d0d12
 *   Text      #f0ede6    Muted    #b8b8c2
 *   Accent    #e84118    Border   #1a1a1f
 *   Font      DM Sans (body/headings)
 *   Mono      DM Mono (labels/tags/numbers)
 */

/* Shared text hierarchy. Dark and light contexts are intentionally separate
   so a readable dark-surface token is never reused on a light background. */
:root {
  --text-primary-on-dark: #f0ede6;
  --text-secondary-on-dark: #d4d4dc;
  --text-muted-on-dark: #b8b8c2;
  --text-subtle-on-dark: rgba(235, 235, 242, 0.65);
  --text-primary-on-light: #1b1b22;
  --text-secondary-on-light: #3f3f48;
  --text-muted-on-light: #62626d;
}

/* 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: var(--text-primary-on-dark);
  -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: var(--text-muted-on-dark); }
.d4-page .bc-list a { color: var(--text-muted-on-dark); }
.d4-page .bc-list a:hover { color: var(--text-primary-on-dark); }
.d4-page .bc-sep { color: var(--text-subtle-on-dark); }

/* ── 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: var(--text-primary-on-dark); font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .hero-lead { color: var(--text-muted-on-dark); }
/* Homepage hero texture: the source is decorative, so keep it out of the
   critical preload path and serve a viewport-sized modern asset instead. */
.hero-texture {
  background-image: url('/studio-hero-bg-640.webp');
}
@media (min-width: 769px) {
  .hero-texture {
    background-image: url('/studio-hero-bg-1024.webp');
  }
}
@supports (background-image: image-set(url('x') type('image/avif'))) {
  .hero-texture {
    background-image: image-set(
      url('/studio-hero-bg-640.avif') type('image/avif'),
      url('/studio-hero-bg-640.webp') type('image/webp')
    );
  }
  @media (min-width: 769px) {
    .hero-texture {
      background-image: image-set(
        url('/studio-hero-bg-1024.avif') type('image/avif'),
        url('/studio-hero-bg-1024.webp') type('image/webp')
      );
    }
  }
}

/* ── 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: var(--text-primary-on-dark); font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .sec-lead { color: var(--text-muted-on-dark); }

/* ── Graffiti-Management intake ── */
.d4-page .management-intake-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}
.d4-page .management-intake-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
.d4-page .management-intake-field {
  padding: 22px 20px;
}
.d4-page .management-intake-field--wide {
  grid-column: 1 / -1;
}
.d4-page .management-portal-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
@media (max-width: 720px) {
  .d4-page .management-intake-layout,
  .d4-page .management-intake-fields,
  .d4-page .management-portal-layout,
  .d4-page .management-portal-benefits {
    grid-template-columns: 1fr !important;
  }
  .d4-page .management-intake-field--wide {
    grid-column: auto;
  }
}

/* ── 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: var(--text-muted-on-dark);
  background: transparent;
}
.d4-page .btn-ghost:hover {
  border-color: #e84118;
  background: rgba(232,65,24,.06);
  color: var(--text-primary-on-dark);
}

/* ── 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: var(--text-primary-on-dark); font-family: 'DM Sans', system-ui, sans-serif; }
.d4-page .proc-step p { color: var(--text-muted-on-dark); }

/* ── 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: var(--text-primary-on-dark);
  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: var(--text-muted-on-dark); }

/* ── 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: var(--text-muted-on-dark);
}
.d4-page .dist-link:hover {
  border-color: #e84118;
  color: var(--text-primary-on-dark);
  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: var(--text-muted-on-dark);
}

/* ── 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: var(--text-primary-on-dark); }

/* ── 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;
  }
}

/* ── Stats grid: collapse to 2×2 before columns become too narrow ── */
@media (max-width: 900px) {
  .d4-page .d4-stats-grid {
    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: var(--text-muted-on-dark); transition: background 0.2s; }
/* ── Ansprechpartner: portrait column responsive ── */
.d4-page .wfg-portrait-col {
  flex: 0 0 320px;
  min-height: 460px;
}
@media (max-width: 768px) {
  .d4-page .wfg-portrait-col {
    flex: 0 0 100% !important;
    min-height: 280px !important;
    border-right: none !important;
    border-bottom: 1px solid #1a1a1f;
  }
}

.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; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted-on-dark); text-decoration: none; border-bottom: 1px solid #1a1a1f; transition: color 0.15s; }
.mob-menu-link:hover { color: var(--text-primary-on-dark); }
.mob-menu-close { align-self: flex-end; background: transparent; border: 1px solid #1a1a1f; color: var(--text-muted-on-dark); 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; }

/*
 * Mobile navigation is rendered by React on the homepage and by BaseLayout on
 * every other page. Keep the generated overlay visually identical to the
 * homepage menu so changing pages never changes the navigation language.
 */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 490;
  background: #0a0a0a;
  overflow-y: auto;
}
#mobile-menu.is-open { display: flex; flex-direction: column; }
#mobile-menu .mobile-menu-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 80px 28px 48px;
}
#mobile-menu .mobile-menu-inner a {
  display: block;
  padding: 18px 0;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
   color: var(--text-muted-on-dark);
  text-decoration: none;
  border-bottom: 1px solid #1a1a1f;
  transition: color 0.15s;
}
#mobile-menu .mobile-menu-inner a:hover,
#mobile-menu .mobile-menu-inner a:focus-visible { color: var(--text-primary-on-dark); }
#mobile-menu .mobile-menu-inner a[aria-current="page"] { color: #e84118; }
#mobile-menu .mobile-menu-inner .mobile-menu-cta {
  margin-top: 8px;
  border-radius: 0 !important;
  background: transparent !important;
   color: var(--text-muted-on-dark) !important;
  text-align: left;
}
#mobile-menu .mobile-menu-inner .mobile-menu-cta:hover,
#mobile-menu .mobile-menu-inner .mobile-menu-cta:focus-visible {
  background: transparent !important;
   color: var(--text-primary-on-dark) !important;
}
#mobile-menu .mobile-menu-close {
  display: block;
  align-self: flex-end;
  margin-bottom: 32px;
  padding: 7px 14px;
  border: 1px solid #1a1a1f;
  background: transparent;
   color: var(--text-muted-on-dark);
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
#mobile-menu .mobile-menu-close:hover,
#mobile-menu .mobile-menu-close:focus-visible { color: #f0ede6; }
@media (max-width: 768px) {
  #mobile-menu { bottom: 0 !important; }
}