/**
 * Shell CSS (JBC-10, Christiane Mayer): nav, footer, mobile-menu dialog,
 * Aktivitaeten submenu, legal-page typography, homepage placeholder,
 * skip-link. Site-specific, on top of tokens.css's shared tokens/buttons
 * (`.btn`, `.wrap`, `.btn-primary`) -- nothing here duplicates a token,
 * every colour/radius/shadow below is a var() from tokens.css.
 *
 * No hardcoded hex values (web-design-quickstart.md rule 6), buttons stay
 * solid (framework.md "Hard rules"), contrast checked against both themes
 * per DESIGN.md's own numbers (--text on --surface 15.5:1, --text-2 on
 * --surface 6.95:1, both already far above the 4.5:1 floor, so nav/footer
 * text reusing those tokens needs no separate measurement).
 */

/* ---------- baseline (tokens.css sets body/img+video radius only) --------- */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.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;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.2vw, 2.75rem); margin: 0 0 16px; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 12px; }
p { line-height: 1.65; }

/* ---------- skip link ---------------------------------------------------- */
.site-skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
  transition: top 150ms ease;
}
.site-skip-link:focus { top: 12px; }

/* ---------- nav ------------------------------------------------------------
   A wider container than the 640px `.wrap` (tokens.css): the nav bar and
   footer span the page, they are not a reading column. Longhand padding
   only (framework.md "shorthand-clobber" family), so it never collides with
   a type-selector rule that also sets vertical padding on the same element. */
.wrap-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.site-nav {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  /* JBC-31: own stacking context above the page, otherwise the absolutely
     positioned Aktivitaeten panel paints UNDER later positioned content
     (the home hero photo covered it). 10 stays below the skip link (100)
     and the consent layer. */
  position: relative;
  z-index: 10;
}
.site-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.site-nav-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  /* R1/design-reviewer fix (JBC-10 review): was var(--brand-ink, var(--text)).
     --brand-ink is theme-fixed ON PURPOSE (tokens.css:76's comment has the
     reason: admin-brand.css binds the admin chrome to it, a dark value
     there breaks it). As plain --brand-ink it stays the light ink
     (#26301F) on a dark surface, measured 1.19:1. --text is the
     theme-aware token (tokens.css redefines it in both the media-query
     and data-theme dark blocks), so it carries the right ink in both
     themes automatically, and this is a purely functional nav label, not
     the headline ink --brand-ink is for. */
  color: var(--text);
  text-decoration: none;
}
.site-nav-inline {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.site-nav-inline a,
.site-nav-drop summary { color: var(--text-2); text-decoration: none; }
.site-nav-inline a:hover,
.site-nav-drop summary:hover { color: var(--accent-text); }

/* Aktivitaeten submenu: native <details>/<summary>, no custom JS (see
   nav.html's own header comment for why this specific pattern). */
.site-nav-drop { position: relative; }
.site-nav-drop summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav-drop summary::-webkit-details-marker { display: none; }
.site-nav-drop summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.site-nav-drop[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.site-nav-drop-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
/* Inline in the mobile <dialog>: no floating panel, it lives in the flow. */
.site-nav-dialog .site-nav-drop-panel {
  position: static;
  margin-top: 6px;
  box-shadow: none;
  border: 0;
  padding: 0 0 0 16px;
}
/* Inline in the desktop bar: float below the toggle. */
.site-nav-inline .site-nav-drop-panel {
  position: absolute;
  top: calc(100% + 8px);
  /* JBC-31: anchored right, not left. Aktivitaeten is the second-to-last
     item, so a 220px panel opening rightwards ran 20px past the viewport at
     1194px (scrollWidth 1215). Opening leftwards keeps it inside. */
  right: 0;
}
.site-nav-drop-panel a {
  /* JBC-30c fix: was padding: 8px 10px with no min-height, measured 34px
     tall at the 15px .site-nav-inline font-size (line-height "normal" ~18px
     + 16px padding), under the 44px touch-target floor on every device that
     can reach this panel by touch, not only a phone: the desktop nav only
     hides behind a 900px min-width media query (below), so an iPad in
     landscape (Aktivitaeten submenu screenshot, JBC-30c briefing) shows this
     SAME inline desktop panel, touch-driven, not the separate mobile
     <dialog> markup further down this file. display:flex + min-height
     (not more padding) keeps the panel's own compact width/gap intent
     intact while guaranteeing the floor regardless of font-metric
     rounding differences between engines. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
}
.site-nav-drop-panel a:hover { background: var(--bg-2); color: var(--accent-text); }

/* JBC-30c: active-page indicator, set via site-nav.php's aria-current
   comparison (server-side, render time, see that file's own docblock for
   why: the deployed dist/ is static HTML, there is no request-time PHP to
   compare against once rendered). --accent-text and --accent resolve to the
   SAME --brand-accent(-dark) value in both theme blocks (tokens.css), so
   reusing --accent-text here as both the text colour AND (via --accent) the
   underline needs no separate measurement: 6.65-7.65:1 already clears the
   4.5:1 text floor with room to spare, well above the 3:1 non-text/UI floor
   the underline itself only needs.
   aria-current="page" marks the ONE link whose href exactly matches the
   current URL. aria-current="true" (not "page") marks the Aktivitaeten
   <summary>, which is not itself a page link: it means "the current page
   lives inside this section", distinct from and not a duplicate of the
   "page" value a real matching link gets (JBC-30c briefing: "als
   Elternpunkt markiert, aber nicht doppelt" -- on /aktivitaeten/legacy-trip/
   the summary gets aria-current="true" AND the "Legacy-Trip (Bulgarien)"
   link separately gets aria-current="page", two different attributes on
   two different elements, never two links both claiming "page" at once). */
.site-nav-inline a[aria-current="page"],
.site-nav-dialog nav a[aria-current="page"],
.site-nav-drop-panel a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 700;
}
/* Child combinator on purpose: the dropdown panel sits INSIDE the nav, so a
   descendant selector would also underline the tinted panel link below. */
.site-nav-inline > a[aria-current="page"],
.site-nav-dialog nav > a[aria-current="page"] {
  border-bottom: 2px solid var(--accent);
}
/* Dropdown-panel links sit in a compact flex column (min-height:44px,
   left-aligned padding): a border-bottom there would look like a stray
   rule cutting through the panel rather than an underline under text, so
   the current-page indicator inside the panel is a tinted background
   instead, the same --accent-soft token the framework already uses for
   "tinted pill" surfaces elsewhere (tokens.css). */
.site-nav-drop-panel a[aria-current="page"] {
  background: var(--accent-soft);
}
/* aria-current lives on the <details> element itself (site-nav.php:
   "$mvInAktivitaeten ? ' aria-current=\"true\"' : ''" on the <details ...>
   opening tag), not on <summary>: it represents the whole disclosure/
   section, not a single line of text the way a link's aria-current="page"
   does. The descendant combinator here styles the summary CHILD of that
   marked details, not a summary carrying the attribute on itself (which
   never happens and would silently match nothing, the bug this comment
   replaces: an earlier draft used `.site-nav-drop summary[aria-current]`,
   which requires aria-current on <summary> and therefore never matched
   anything, leaving the "Aktivitaeten" parent visually unmarked on
   /aktivitaeten/legacy-trip/ despite the attribute being present in the
   rendered HTML). */
.site-nav-drop[aria-current] summary,
.site-nav-dialog .site-nav-drop[aria-current] summary {
  color: var(--accent-text);
  font-weight: 700;
}

.site-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.site-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
}

/* Native <dialog>: framework rule (framework.md "Design", DESIGN.md
   "Mobiles Menue"), browser supplies focus trap / Escape / inert backdrop. */
.site-nav-dialog {
  border: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 24px;
  width: min(320px, 86vw);
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.site-nav-dialog::backdrop { background: rgba(20, 32, 43, .45); }
.site-nav-dialog nav { display: flex; flex-direction: column; gap: 4px; }
.site-nav-dialog nav a {
  /* JBC-23 fix-round: was 12px 8px, measured 43px tall (16px font, browser
     "normal" line-height ~18.4px + 24px padding), 1px under the 44px
     touch-target floor, on EVERY mobile dialog nav link (Home, Termine,
     Team, "Alle Aktivitäten", etc.), not only the "Alle Aktivitäten" entry
     this fix-round adds. One extra px per side clears it for all of them
     with no visible layout change. */
  padding: 13px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.site-nav-dialog nav a:hover { background: var(--bg-2); }
/* R1/design-reviewer WARN fix: the inline <summary> inherited only
   .site-nav-drop summary's base rule (no padding), measured 19px tall in
   the mobile dialog. A 44px touch target needs its own padding here, it
   cannot just copy .site-nav-dialog nav a's 12px/8px (that pairs with a
   16px link, summary's inline-flex + gap needs a touch more). */
.site-nav-dialog .site-nav-drop summary {
  min-height: 44px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--text);
}
.site-nav-dialog .site-nav-drop summary:hover { background: var(--bg-2); }
.site-nav-dialog-close {
  align-self: flex-end;
  /* R1/design-reviewer WARN fix: was 40x40, under the 44px touch-target floor. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 8px;
}

@media (min-width: 900px) {
  .site-nav-inline { display: flex; }
  .site-nav-toggle { display: none; }
}

/* ---------- footer -------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  margin-top: 48px;
}
.site-footer-in {
  padding-top: 24px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
  row-gap: 0;
  text-align: center;
}
.site-footer-brand,
.site-footer-copy { flex: 0 0 100%; }
.site-footer-copy { padding-top: 6px; }
/* Desktop: one compact row (brand left, links right) plus a thin copyright
 * line, instead of a tall centred stack of six 44px rows. */
@media (min-width: 1100px) {
  .site-footer-in {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "brand social doterra legal"
      "copy copy copy copy";
    align-items: center;
    justify-items: start;
    column-gap: 32px;
    row-gap: 6px;
    text-align: left;
  }
  .site-footer-brand { grid-area: brand; }
  .site-footer-social { grid-area: social; }
  .site-footer-doterra { grid-area: doterra; }
  .site-footer-legal { grid-area: legal; }
  .site-footer-copy {
    grid-area: copy;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    text-align: center;
  }
}
.site-footer-name {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Same fix and reasoning as .site-nav-brand above. */
  color: var(--text);
  margin: 0;
}
.site-footer-tagline { color: var(--text-2); margin: 4px 0 0; font-size: 15px; }
.site-footer-social a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}
.site-footer-social a:hover { text-decoration: underline; }
.site-footer-doterra {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-2);
  /* R1/design-reviewer WARN fix: was 13px, under DESIGN.md's 15px floor for
     functional secondary text (footer copy is that class, not a versalien
     micro-label). */
  font-size: 15px;
}
.site-footer-doterra img { width: 96px; height: auto; display: block; }
.site-footer-legal a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.site-footer-legal a:hover { color: var(--accent-text); }
/* R1/design-reviewer WARN fix: was 13px, same DESIGN.md floor as above. */
.site-footer-copy { color: var(--text-3); font-size: 15px; margin: 0; }
/* JBC-30b/30c follow-up: footer links, brand and skip link measured 18-41px
   tall, under the 44px touch-target floor (web-design-quickstart rule 5).
   inline-flex + min-height grows the hit area; at 393px nothing moves, at
   desktop the nav bar grows from 56px to 76px (brand and links stay
   vertically centred). The desktop nav links and the Aktivitaeten toggle
   (20px before) get the same floor. Not inline prose, so no WCAG inline
   exception. */
.site-nav-inline > a,
.site-nav-inline .site-nav-drop summary,
.site-footer-social a,
.site-footer-legal a,
.site-footer-doterra,
.site-nav-brand,
.site-skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* JBC-30c: clearance for consent.js's re-open FAB (core, `.claude/rules/
   framework.md` "The consent banner is always ... never a copy": the fab is
   not touchable from this fork, its CSS is injected by consent.js itself at
   `#dma-consent-fab{position:fixed;left:16px;bottom:16px;...width:42px;
   height:42px}`, always on, every theme, every viewport). Fixed position
   means it sits in the same VIEWPORT corner regardless of scroll, so
   whatever content happens to be there once a visitor scrolls to the true
   bottom of the page gets covered. `.site-footer-in`'s grid is
   justify-items:center: on a wide viewport its centred content never
   reaches the left edge the fab occupies, but under 640px (this fork's own
   `.wrap` reading-measure breakpoint) it spans close to the full width, and
   the footer's own 40px bottom padding is not enough clearance (measured:
   the "Datenschutz" legal link and the copyright line sat directly behind
   the fab at 393px, JBC-30c briefing finding 1). Extra padding lands INSIDE
   the footer's own --bg-2 surface (not on body/main), so the added space
   reads as part of the footer rather than a mismatched gap in --bg below
   it. 42px fab + 16px offset = 58px; 88px clears that with headroom for the
   fab's own :hover translateY(-2px) and leaves the copyright line legible
   above it rather than flush against it. */
@media (max-width: 640px) {
  .site-footer-in { padding-bottom: 88px; }
}

/* ---------- legal pages ---------------------------------------------------
   Same .wrap column tokens.css already sets (max-width 640px), a reading
   measure appropriate for long-form legal text, not the wider nav container. */
/* overflow-wrap: a long unbroken German compound heading with no spaces
   (e.g. "Verbraucherstreitbeilegung/Universalschlichtungsstelle", straight
   from the imported Impressum text) does not wrap at 393px otherwise, and
   drags document.documentElement.scrollWidth past the viewport, live-
   measured 566px against a 393px mobile viewport before this rule. */
.legal h1, .legal h2, .legal h3, .legal h4 { overflow-wrap: anywhere; }
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 40px; }
.legal h3 { margin-top: 28px; }
.legal h4 { margin-top: 20px; font-size: 1rem; }
.legal p, .legal ul { color: var(--text-2); }
.legal ul { padding-left: 20px; }

/* ---------- homepage placeholder ------------------------------------------ */
.site-placeholder { padding-top: 64px; padding-bottom: 96px; }
.site-placeholder-lead { font-size: 1.25rem; color: var(--text-2); }
.site-placeholder-note {
  color: var(--text-3);
  border-left: 3px solid var(--line-strong);
  padding-left: 16px;
  margin: 24px 0;
}

/* ---------- reduced motion -------------------------------------------------
   Same reasoning tokens.css already applies elsewhere in this fork: an
   open/close on a native <dialog> is a state change, not a decorative
   animation, so nothing here needs its own prefers-reduced-motion guard
   beyond what the browser's own dialog handling already respects. */

/* ---------- page section rhythm (fork-local, stays ch-*) ------------------
 * One copy for every page (it used to be repeated in page-home.css and
 * page-ueber-mich.css). Not part of the shared mv-* components on purpose:
 * .mv-section (sections.css) owns padding, tone and waves there, and its
 * padding and container width differ from these values, see
 * docs/plan/fwk-ch-01-inventar.md in the framework. */
.ch-section { padding: 56px 0; }
.ch-section-alt { background: var(--bg-2); }
.ch-section-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }