/* ==========================================================================
   Components shared by all pages: header, navigation, language switch,
   search panel, burger menu, sticky anchor bar, band system, photo chips,
   footer. Extracted from the approved drafts (identical across all three).
   ========================================================================== */

/* ==========================================================================
   Header – dark, sticky; on the homepage it blends into the title band
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark-bg);
  color: var(--dark-fg);
  border-bottom: var(--line-dark);
}
.bar { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); }

/* Wordmark – logo variant D: white swan, hairline, two-line caps text.
   Proportions per design system v2: swan 104px, gap 22px, text 30px, x --s.
   Face: Roboto Condensed 700 (the proprietary 'nimbus-sans-tw01con' of
   the drafts is not web-available; see fonts.css). */
.wordmark {
  --s: 0.62;
  display: flex;
  align-items: center;
  gap: calc(22px * var(--s));
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.wordmark .logo-swan { display: block; width: calc(104px * var(--s)); height: auto; }
.wordmark .logo-rule { align-self: stretch; width: 1px; background: currentColor; }
.wordmark .logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: calc(30px * var(--s));
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wordmark .logo-text span { display: block; }
.site-footer .wordmark { --s: 0.8; }
/* Touch target at least 44 px high (SV-02-015, ADR-0003 H2): the padding
   enlarges the clickable area, not the drawing – the hairline stretches
   over the content box only. */
.site-header .wordmark { padding-block: 10px; }

/* Main navigation */
.nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.nav-list > li { position: relative; }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px; /* 16px until 2026-10-10: with the submenu arrows the English header wrapped "Local area" just above the burger breakpoint */
  background: none;
  border: 0;
  color: var(--dark-fg);
  font: 400 var(--fs-body)/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.nav-item .label { padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; transition: border-color var(--ease-control); }
.nav-item:hover .label,
.nav-item[aria-current="page"] .label,
.has-sub:has(> .nav-toggle[aria-expanded="true"]) .label { border-bottom-color: var(--dark-fg); }

/* Items with a submenu: the name links to the page, the arrow button next
   to it opens the submenu (operator 2026-10-10 – a click on the name must
   lead to the page). 44px target in the header (ADR-0003 H2). */
.has-sub { display: flex; align-items: center; }
.has-sub > .nav-item { padding-right: 0; }
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dark-fg);
  cursor: pointer;
}
.nav-toggle svg { width: 12px; height: 12px; transition: transform var(--ease-control); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* "Buchung folgt" placeholder item (stage 2) */
.nav-future { cursor: default; color: var(--dark-muted); }
.nav-future:hover .label { border-bottom-color: transparent; }
.nav-future small { font-size: 0.75rem; border: var(--line-dark); padding: 2px 6px; line-height: 1.2; }

/* Submenus */
.sub {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  background: var(--dark-bg);
  border: var(--line-dark);
}
.sub a { display: block; padding: 10px var(--space-3); text-decoration: none; color: var(--dark-fg); transition: background-color var(--ease-control); }
.sub a:hover { background: var(--color-muted); }
@media (hover: hover) and (min-width: 1241px) {
  .has-sub:hover > .sub { display: block; }
  .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
}
/* AT state for keyboard users (ADR-0003 topic H1): show the submenu while
   focus is inside the item, mirroring the hover behaviour. */
@media (min-width: 1241px) {
  .has-sub:focus-within > .sub { display: block; }
}

/* Tools: language switch, search toggle, burger */
.tools { display: flex; align-items: center; gap: var(--space-1); }
.tools .icon-btn:hover { background: var(--color-muted); }

/* Language switch: real links (no JS, no cookie – SV-02-008).
   44px touch target on every breakpoint (ADR-0003 topic H2). */
.lang { display: flex; align-items: center; color: var(--dark-muted); font-size: var(--fs-small); }
.lang a, .lang button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  font: 400 var(--fs-small)/1 var(--font-body);
  color: var(--dark-muted);
}
.lang [aria-current="true"], .lang [aria-pressed="true"] { color: var(--dark-fg); font-weight: 700; }
.lang a:hover, .lang button:hover { color: var(--dark-fg); }

.burger { display: none; }

/* Search panel (SV-02-010) */
.search { background: var(--color-surface); color: var(--color-ink); }
.search form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-3); }
.search label { flex-basis: 100%; font-size: var(--fs-small); color: var(--color-muted); }
.search input {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 400 var(--fs-body)/1 var(--font-body);
}
.search input::placeholder { color: var(--color-muted); }
.search .icon-btn:hover { background: var(--color-bg); }
.search .note { flex-basis: 100%; font-size: var(--fs-small); color: var(--color-muted); min-height: 1.4em; }

/* Mobile header: burger up to 1240px (design system v2 said 960px; raised
   2026-10-07 to 1100px and 2026-10-10 to 1240px because the full header
   overflows below ~1240px since FAQ, "Buchung folgt" and the submenu arrows –
   1100px was an operator decision, 1240px a measured fix; the check run now tests
   the width just above the breakpoint, ADR-0009) */
@media (max-width: 1240px) {
  .burger { display: inline-grid; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0;
    background: var(--dark-bg);
    border-bottom: var(--line-dark);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .site-header.menu-open .nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-1) var(--gutter) var(--space-3); }
  .nav-list > li { border-bottom: var(--line-dark); }
  .nav-list > li:last-child { border-bottom: 0; }
  .nav-item { width: 100%; justify-content: space-between; min-height: 56px; padding: 0; font-size: 1.0625rem; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > .nav-item { width: auto; flex: 1; }
  .nav-toggle { width: 56px; min-height: 56px; }
  .sub { position: static; border: 0; min-width: 0; padding: 0 0 var(--space-2); flex-basis: 100%; }
  .sub a { padding: 10px var(--space-2); }
  .tools { margin-left: auto; gap: 0; }
  .site-header .wordmark { --s: 0.52; }
}
@media (max-width: 400px) {
  .site-header .wordmark { --s: 0.4; }
  .site-header .bar { gap: var(--space-1); }
  .lang a, .lang button { min-width: 44px; padding: 0 4px; }
}

/* ==========================================================================
   Sticky anchor bar – sticks directly below the (also sticky) header.
   Active state via aria-current, set by IntersectionObserver (theme.js).
   ========================================================================== */
.anchor-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--color-bg);
  border-bottom: var(--line);
}
.anchor-bar ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.anchor-bar ul::-webkit-scrollbar { display: none; }
.anchor-bar li { flex: 0 0 auto; }
.anchor-bar a {
  display: flex;
  align-items: center;
  min-height: var(--anchor-h);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--ease-control);
}
/* is-active mirrors aria-current (theme.js toggles both; the umgebung
   draft styles the class form) */
.anchor-bar a:hover, .anchor-bar a.is-active, .anchor-bar a[aria-current="true"] { border-bottom-color: var(--color-ink); }
.anchor-bar a:focus-visible { outline-offset: -2px; }

/* Anchor targets must not hide behind the sticky header. Default offset =
   header height; pages with a sticky anchor bar (unterkunft, umgebung)
   extend this in their page CSS:
   main [id] { scroll-margin-top: calc(var(--header-h) + var(--anchor-h) + var(--space-2)); } */
main [id] { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }

/* ==========================================================================
   Band system – four band types per design system v2
   ========================================================================== */
.band { padding-block: var(--band-pad); }
.dark { background: var(--dark-bg); color: var(--dark-fg); }
.surface { background: var(--color-surface); }

/* minmax(0, 1fr) instead of 1fr: columns may shrink below the longest word.
   With 1fr (= minmax(auto, 1fr)), 11 x 24px gaps + the longest heading word
   forced a 557px grid width at 375px viewport -> horizontal scrolling. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); }
@media (max-width: 600px) { .grid { column-gap: var(--space-2); } }
.grid > * { min-width: 0; }

.band h2 { font-size: var(--fs-h2); }
.lead { font-size: var(--fs-lead); line-height: 1.6; }
.prose p + p { margin-top: var(--space-2); }
.band-head { margin-bottom: var(--space-8); row-gap: var(--space-3); align-items: end; }
.band-head .head-title { grid-column: 1 / span 6; }
.band-head .head-text { grid-column: 8 / span 5; }
@media (max-width: 960px) {
  .band-head .head-title, .band-head .head-text { grid-column: 1 / -1; }
}

/* Photo figures with label chips */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--color-surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  background: var(--color-bg);
  color: var(--color-ink);
  padding: 6px 12px;
  font-size: var(--fs-small);
  line-height: 1.35;
  max-width: calc(100% - 2 * var(--space-2));
}
.tag strong { font-weight: 700; }
.tag.top-right { left: auto; right: var(--space-2); bottom: auto; top: var(--space-2); }

/* Veil over photo bands (text legibility, >= 4.5:1 with the veil) */
.veil { position: absolute; inset: 0; }

/* ==========================================================================
   Footer – always dark
   ========================================================================== */
.site-footer { padding-block: var(--space-10) var(--space-6); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-3); row-gap: var(--space-1); }
.footer-nav a { display: inline-block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--ease-control); }
.footer-nav a:hover { border-bottom-color: var(--dark-fg); }
.footer-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--dark-muted);
}
.guest-area small { font-size: 0.75rem; border: var(--line-dark); padding: 2px 6px; margin-left: 6px; }
@media (max-width: 600px) {
  .footer-meta { flex-direction: column; }
}