/* ============================================================
   DEEPRISE — PAGE LAYOUT
   Ported from the Claude Design export's inline <style> block
   (DeepRise.dc.html) — same rules, same class names, no bundler.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); background: var(--surface-page); color: var(--text-body); }

/* overflow-x:hidden lives on #main (not html/body) — Safari drops
   position:sticky on descendants when overflow is set on html or body. */
#main { overflow-x: hidden; }

img { max-width: 100%; display: block; }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--off-white); color: var(--ink-900); padding: 10px 16px;
  border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: var(--weight-semibold);
  text-decoration: none; transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: 8px; }

/* Header / nav */
.dr-nav, .dr-lang, .dr-cta { display: none; }
.dr-burger { display: inline-flex; }
@media (min-width: 900px) {
  .dr-nav { display: flex !important; }
  .dr-lang { display: flex !important; }
  .dr-cta { display: flex !important; }
  .dr-burger { display: none !important; }
}
@media (max-width: 900px) { .dr-hero-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) {
  .dr-contact-grid { grid-template-columns: 1fr !important; }
  .dr-profiles { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .dr-chips { grid-template-columns: 1fr 1fr !important; }
  .dr-quotes { grid-template-columns: 1fr !important; }
  .dr-principles { grid-template-columns: 1fr !important; }
  .dr-footer { flex-direction: column !important; gap: 22px !important; }
  .dr-footer-meta { align-items: center !important; text-align: center; }
  .dr-footer-brand { flex-direction: column !important; text-align: center; }
}
/* Grid/flex items default to min-width:auto, which lets a long unbreakable word (e.g. a German
   compound noun) force its column wider than its 1fr share and overflow the viewport on narrow
   phones. min-width:0 lets the track shrink to the container width and wrap normally. */
.dr-chips > div, .dr-profiles > div, .dr-profiles > div > div { min-width: 0; }

.dr-nav-link {
  position: relative; color: var(--text-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none; padding: 2px 0 3px; transition: color var(--duration-base) var(--ease-standard);
}
.dr-nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--mint-500); transition: right var(--duration-base) var(--ease-standard);
}
.dr-nav-link:hover { color: var(--action-tertiary-hover); }
.dr-nav-link:hover::after { right: 0; }
.dr-nav-link[data-active="true"] { color: var(--teal-700); }
.dr-nav-link[data-active="true"]::after { right: 0; }
.dr-nav-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }

/* Language switcher — same underline mechanic as the nav links (animated mint bar, not static text-decoration) */
.dr-lang { align-items: center; gap: 6px; }
.dr-lang a {
  position: relative; color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none; padding: 2px 2px 3px; line-height: normal;
}
.dr-lang a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--mint-500); transition: right var(--duration-base) var(--ease-standard);
}
.dr-lang a:hover::after { right: 0; }
.dr-lang a[aria-current="true"]::after { right: 0; }
.dr-lang a[aria-current="true"] { color: var(--teal-700); }
.dr-lang a:hover { color: var(--action-tertiary-hover); }
.dr-lang a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.dr-lang-divider { width: 1.5px; height: 12px; background: var(--border-subtle); display: inline-block; }

/* Mobile language switcher (same active/underline mechanic, larger touch-friendly size) */
.dr-mlang-row { display: flex; align-items: center; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--border-subtle); }
.dr-mlang-btn {
  position: relative; color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-base);
  text-decoration: none; padding-bottom: 3px;
}
.dr-mlang-btn::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--mint-500); transition: right var(--duration-base) var(--ease-standard);
}
.dr-mlang-btn[aria-current="true"]::after { right: 0; }
.dr-mlang-btn[aria-current="true"] { color: var(--teal-700); }
.dr-mlang-divider { width: 1.5px; height: 14px; background: var(--border-subtle); display: inline-block; }

.dr-burger {
  align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--off-white); color: var(--ink-900); cursor: pointer;
}
.dr-mlink { display: block; padding: 14px 4px; color: var(--text-body); font-weight: var(--weight-semibold); font-size: var(--text-base); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.dr-mobile-menu { display: flex; flex-direction: column; gap: 2px; }
.dr-mobile-menu[hidden] { display: none; }
@media (min-width: 900px) { .dr-mobile-menu { display: none !important; } }

/* Offering cards wrapper (hover-expand handled entirely by :hover/:focus-within in components.css) */
.dr-offering-card a { color: inherit; }

/* Footer */
.dr-flink { font-family: var(--font-sans); font-size: 14px; color: var(--text-on-dark-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.dr-flink:hover { color: var(--off-white); }

/* Utility */
.eyebrow {
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  display: inline-flex; align-items: flex-start; line-height: 1.2; gap: 10px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; margin-top: calc((1.2em - 2px) / 2); background: currentColor; display: inline-block; }
.container { max-width: var(--container-max); margin: 0 auto; }

/* 404 page */
.dr-404-orb { animation: dr404drift 13s ease-in-out infinite alternate; }
.dr-404-orb.b { animation-duration: 16s; animation-delay: -4s; }
.dr-404-dot { animation: dr404pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes dr404drift { from { transform: translate(0, 0); } to { transform: translate(18px, -14px); } }
@keyframes dr404pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .dr-404-orb, .dr-404-dot { animation: none !important; } }

/* Legal pages (Impressum / Datenschutz) */
.dr-legal h2 { font-family: var(--font-serif-display); font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: 44px 0 12px; }
.dr-legal h3 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-heading); margin: 26px 0 6px; }
.dr-legal p { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 14px; }
.dr-legal ul { margin: 0 0 14px; padding-left: 22px; }
.dr-legal li { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin-bottom: 6px; }
.dr-legal a { color: var(--text-link); text-underline-offset: 2px; }
.dr-legal strong { color: var(--text-heading); }