/* ==========================================================================
   BASE — reset, nav, footer, buttons, shared section scaffolding.
   Black Titanium / Aluminium / Dark Glass system (see tokens.css).
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; } /* NOT overflow-x:hidden — breaks sticky positioning per guide */
body {
  overflow-x: clip;
  background:
    radial-gradient(45% 32% at var(--mx, 50%) var(--my, 8%), rgba(36, 38, 42, 0.55) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--charcoal-800) 0%, var(--charcoal-900) 45%, #030404 100%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, repeat, no-repeat;
  color: var(--ivory);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--gold-champagne); line-height: 1.15; }
:focus-visible { outline: 2px solid var(--gold-muted); outline-offset: 2px; }

/* ---------- Nav ---------- */
/* background/backdrop-filter live on ::before, not .nav itself: any
   filter/backdrop-filter/transform on an element establishes a new
   containing block for its position:fixed descendants — and #nav-links
   (the mobile off-canvas menu) is exactly that, a fixed child of .nav.
   With backdrop-filter on .nav directly, #nav-links' `inset` resolved
   against .nav's own ~56px-tall box instead of the viewport, collapsing
   the open mobile menu to a sliver with the page showing through beneath
   the first link or two. A pseudo-element carries the frosted-glass look
   without .nav itself ever having the property, so real DOM descendants
   keep the viewport as their containing block. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(168,170,172,.14);
  z-index: 100;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5,6,6,.78);
  backdrop-filter: blur(14px);
}
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 19px; color: var(--ivory); }
/* No filter here — images/logo/logo-mark.svg now carries the same
   titanium gradient fill as the hero/footer marks (baked into the file
   itself), so the flat brightness(0) invert(1) that used to force it
   plain white is dropped to let that gradient actually show. */
.nav__logo-mark { width: 30px; height: 30px; }
.nav__logo-accent { color: var(--gold-champagne); }
.nav__links { display: flex; gap: 28px; font-size: 14px; color: var(--warm-gray); }
.nav__links a:hover { color: var(--gold-champagne); }
.nav__cta {
  padding: 10px 22px;
  border: 1px solid var(--bronze-border);
  border-radius: var(--radius-btn);
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(168,170,172,.1), transparent);
  font-size: 14px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nav__cta:hover { border-color: var(--bronze-border-bright); background: rgba(168,170,172,.08); }

/* ---------- Buttons (shared CTA language across every section) ----------
   Dark titanium/aluminium buttons: restrained by default, brighten on
   hover (border, subtle glow, text) with a very small lift — no aggressive
   glow. .btn--primary carries an optional slow-traveling silver highlight
   along its border (disabled under prefers-reduced-motion). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--bronze-border);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.btn svg, .btn .arrow { transition: transform var(--transition-fast); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  overflow: hidden;
  background: linear-gradient(180deg, #232526 0%, #101112 100%);
  color: var(--silver-light);
  border-color: rgba(168, 170, 172, 0.32);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-sheen 5.5s linear infinite;
  pointer-events: none;
}
.btn--primary:hover {
  border-color: rgba(242, 242, 242, 0.6);
  background: linear-gradient(180deg, #2c2e2f 0%, #16181a 100%);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.btn--ghost { background: var(--obsidian-card); color: var(--ivory); }
.btn--ghost:hover { border-color: var(--bronze-border-bright); background: rgba(168,170,172,.06); transform: translateY(-1px); }
@keyframes btn-sheen {
  from { background-position: 0% 0; }
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow { transition: none; }
  .btn--primary::before { animation: none; }
  .btn--primary:hover, .btn--ghost:hover { transform: none; }
}

/* ---------- Shared section scaffolding ---------- */
.section {
  position: relative;
  padding: 80px 0;
  background: transparent;
}
.section__inner { max-width: 1520px; margin: 0 auto; padding: 0 4vw; position: relative; z-index: 2; }
.section__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  text-align: center;
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(30px, 4vw, 52px);
  text-align: center;
  color: var(--gold-champagne);
  margin-bottom: 16px;
}
.section__lede {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: var(--warm-gray);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}
.section__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: transparent;
  pointer-events: none;
}

/* Card visuals (border, radius, shadow, hover) now come from the shared
   dh-card system in css/cards.css — see .dh-card / .dh-card--surface. */

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: transparent;
  padding: clamp(40px, 6vw, 64px) 4vw 32px;
}
/* No max-width here, on purpose: .nav has no content cap either (just
   padding:0 4vw, full-bleed edge to edge) — footer must match the nav
   bar's actual width exactly, not the 1520px cap the section content uses.
   Both .nav and .footer share the same 4vw horizontal padding, so leaving
   this uncapped lines their left/right edges up exactly. (.footer__cols
   below fills its track with justify-content:space-between so it no
   longer clusters left on wide screens the way it used to before that
   fix.) */
.footer__inner { max-width: none; }
/* 4-column grid: brand-description + the 3 link columns, all starting at
   the same top edge on row 2 — the logo/wordlock sits alone on row 1,
   spanning the full width above them. (.footer__brand and .footer__cols
   are both display:contents below, so their children — .footer__brand-row,
   .footer__brand-desc, and the three .footer__col — become direct items
   of this grid instead of being trapped inside two unevenly-tall wrapper
   boxes, which is what let "Leistungen/Unternehmen/Rechtliches" start
   level with the icon instead of level with the description under it.) */
.footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 340px) repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 28px;
}
.footer__brand { display: contents; }
.footer__brand-row { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
/* Same titanium mark + gradient wordlock as the hero intro logo
   (css/hero-cinematic-scroll.css .cinema-intro__lockup), just the final
   drawn/filled state with no entrance animation — a static reuse of that
   design instead of the old flat white icon + plain text. */
.footer__mark { width: 30px; height: 30px; flex: 0 0 auto; margin-top: 3px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
/* Stacked, not inline — matches the hero intro's own wordlock
   (.cinema-intro__wordlock: .brand then .sub, block-level, one under the
   other), not a side-by-side "DesignHaus Studio" single line. */
.footer__wordlock { display: block; }
.footer__wordlock-brand {
  display: block;
  font-family: 'Roboto','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -0.005em; line-height: 1.2;
  background: linear-gradient(180deg, #ffffff 0%, #dde1e3 40%, #8f979c 58%, #d8dcdf 76%, #f6f7f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__wordlock-sub { display: block; margin-top: -0.18em; font-family: 'Roboto','Segoe UI','Helvetica Neue',Arial,sans-serif; font-size: 13px; font-weight: 500; color: #7c868d; }
.footer__brand-desc { grid-column: 1; grid-row: 2; color: var(--warm-gray); font-size: 14px; line-height: 1.55; }
/* Lives inside .footer__brand-row now (a flex row: logo, wordlock, then
   this) — sits right next to the wordlock text, inside the same
   brand-row gap, instead of under the description or pushed out to the
   far right edge of the footer. */
.footer__social { display: flex; gap: 10px; align-self: center; }
.footer__social a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid rgba(168,170,172,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px -18px rgba(0,0,0,.9); color: var(--warm-gray); transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.footer__social a:hover { border-color: rgba(242,242,242,.48); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px -18px rgba(0,0,0,.95); }
.footer__social img { width: 32px; height: 32px; display: block; }
/* display:contents unwraps the <nav> so its three .footer__col children
   become direct items of .footer__top's grid (columns 2/3/4, row 2) —
   same row as .footer__brand-desc, so all four start flush at the same
   top edge instead of the columns starting level with the icon above. */
.footer__cols { display: contents; }
.footer__col:nth-child(1) { grid-column: 2; grid-row: 2; }
.footer__col:nth-child(2) { grid-column: 3; grid-row: 2; }
.footer__col:nth-child(3) { grid-column: 4; grid-row: 2; }
.footer__col strong { display: block; color: var(--gold-muted); font-size: 13px; letter-spacing: .06em; margin-bottom: 14px; }
.footer__col a { display: block; color: var(--warm-gray); font-size: 14px; line-height: 21px; margin-bottom: 10px; }
.footer__col a:hover { color: var(--gold-champagne); }
/* Last link in each column carries no trailing margin, so the column's
   box ends exactly at its own text, not 10px below it — needed so
   .footer__bottom's bottom-aligned box lands flush with that text instead
   of a half-line below it. */
.footer__col a:last-child { margin-bottom: 0; }
/* Same cell as .footer__brand-desc (column 1, row 2), align-self:end —
   the description is much shorter than the link columns, so this drops
   the copyright to the bottom of that shared cell, level with the
   columns' last row (Preise/Kontakt/Cookie-Richtlinie), flush left under
   the logo. line-height matches .footer__col a's exactly (21px) so the
   two text baselines land on the same line despite the smaller font-size. */
.footer__bottom { grid-column: 1; grid-row: 2; align-self: end; color: var(--warm-gray-dim); font-size: 13px; line-height: 21px; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .section { padding: 64px 0; }
}

@media (max-width: 600px) {
  .section { padding: 48px 0; }
}

/* max-width:900px (not 700px) — matches the nav's own hamburger
   breakpoint above. Below 900px there isn't enough room for all three
   link columns to sit on one row (Leistungen/Unternehmen fit, but
   Rechtliches wraps onto a second line inside .footer__cols), which
   silently grows the desktop grid row's height and throws off
   .footer__bottom's align-self:end position relative to Preise. Switching
   to the stacked/centered mobile layout at the same width nav does avoids
   ever hitting that in-between wrapped state. */
@media (max-width: 900px) {
  .footer__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; }
  /* display:inline-flex (not flex) so the box shrink-wraps to its content
     instead of stretching out to max-width — at max-width:320px the block
     was rendering nearly edge-to-edge in a ~340px-wide column, so centering
     the box made no visible difference and the left-aligned text inside
     just read as "stuck to the left of the page". Shrink-wrapped + centered
     text makes the whole lockup (icon, title, wrapped description) actually
     sit in the middle. */
  /* text-align:left, not center: .footer__wordlock shares a wrapper <div>
     with .footer__brand-desc (the paragraph, which needs real width to
     wrap onto 2 lines). With text-align:center, the short wordlock text
     centered itself within that wider wrapper box and drifted away from
     the icon instead of hugging it. Left-aligning everything inside keeps
     title/description both flush against the icon; the outer
     inline-flex + margin:auto still centers the whole compact lockup as
     one unit on the page — same trick as before, just not fighting itself
     from the inside. */
  .footer__brand { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0 auto; max-width: 320px; text-align: left; }
  .footer__brand-row { margin-bottom: 0; }
  .footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 32px 24px; width: auto; }
  /* Reset the desktop grid-column/grid-row placement (columns 2/3/4 of the
     4-column desktop grid) back to auto flow — .footer__cols has its own
     2-column grid here, and those leftover desktop values would otherwise
     try to place column 1 in a "column 2" that doesn't exist in this
     narrower template. Matches the desktop rules' own nth-child selectors
     (same specificity) so this actually wins by source order. */
  .footer__col:nth-child(1), .footer__col:nth-child(2), .footer__col:nth-child(3) { grid-column: auto; grid-row: auto; }
  /* Leistungen / Unternehmen mirror each other — left column hugs its
     inner edge left, right column hugs its inner edge right — instead of
     both centered independently, which read as two disconnected blocks. */
  .footer__col:nth-child(1) { text-align: left; }
  .footer__col:nth-child(2) { text-align: right; }
  /* Rechtliches spans both columns below, using the exact same
     grid-template-columns as .footer__cols above (not its own centered
     auto-width grid) so Datenschutz/Impressum land under Leistungen and
     AGB/Cookie-Richtlinie land under Unternehmen — same columns, same
     left/right alignment, instead of a disconnected centered block. */
  .footer__col:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    justify-content: center;
    column-gap: 24px;
    row-gap: 10px;
    text-align: center;
  }
  .footer__col:last-child strong {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  .footer__col:last-child a {
    margin-bottom: 0;
  }
  .footer__col:last-child a:nth-of-type(odd) { text-align: left; }
  .footer__col:last-child a:nth-of-type(even) { text-align: right; }
  /* align-self:center overrides the desktop rule's align-self:end — under
     mobile's flex-direction:column, align-self:end pushes the item to the
     cross-axis end (the right edge) instead of respecting .footer__top's
     align-items:center, which is what actually made it look stuck to the
     left/right instead of centered. */
  .footer__bottom { align-self: center; text-align: center; }
}