:root {
  --paper: #fbfaf8;
  --ink: #14181a;
  --muted: #6b7377;
  --blue: #1e3a5f;
  --navy: #14223c;
  --line: #e5e1da;
  --gutter: clamp(20px, 5vw, 48px);
  --gap: clamp(28px, 4vw, 64px);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ece9e3;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
button { cursor: pointer; }
.container { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); column-gap: var(--gap); }
.label, .eyebrow, .brand small, .legal h2 {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow { margin: 0; letter-spacing: .16em; color: var(--blue); }
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); }
.brand > span { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { font-weight: 400; }

/* Gemeinsamer Seitenrahmen */
.page { max-width: 1320px; margin: 0 auto; background: var(--paper); box-shadow: 0 1px 2px rgb(20 24 26 / 6%), 0 18px 48px rgb(20 24 26 / 13%); min-height: 100vh; overflow: hidden; }
.skip-link { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--ink); color: #fff; z-index: 200; }
.skip-link:focus { left: 0; }
.site-header { position: sticky; top: 0; z-index: 100; color: #f2f0eb; }
.header-inner { position: relative; background: var(--navy); height: clamp(64px, 8vw, 80px); align-items: center; }
.site-header .brand { grid-column: span 2; color: #f2f0eb; }
.site-header .brand small { color: #9cb4d2; }
.desktop-nav { min-width: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.desktop-nav a { font-size: 14.5px; color: #c6ceda; padding: 6px 0; border-bottom: 1px solid transparent; }
.desktop-nav a:hover { color: #fff; border-color: #9cb4d2; }
.intro { padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(24px, 3vw, 44px); }
.intro-grid { gap: 8px var(--gap); align-items: start; grid-auto-flow: row dense; }
.intro .eyebrow, .intro h1 { grid-column: span 2; }
.intro h1 { margin: 0; font-size: clamp(23px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.024em; font-weight: 500; }
.optional-break { display: none; }
.intro-contact { min-width: 0; grid-row: span 2; display: flex; flex-direction: column; }
.intro-contact a { display: flex; flex-direction: column; gap: 5px; color: var(--ink); }
.intro-contact a:hover { color: var(--blue); }
.intro-contact a + a { padding-top: 14px; }
.phone { margin-top: 3px; font-size: clamp(18px, 2vw, 21px); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.email { font-size: clamp(15px, 1.6vw, 17.5px); letter-spacing: -.01em; }
.section-title { background: var(--navy); color: #f2f0eb; padding-top: clamp(22px, 2.6vw, 32px); padding-bottom: clamp(22px, 2.6vw, 32px); font-size: clamp(19px, 2.5vw, 28px); line-height: 1.26; letter-spacing: -.022em; font-weight: 500; }
.services { padding-top: clamp(26px, 3vw, 44px); padding-bottom: clamp(26px, 3vw, 44px); }
.services article { border-top: 1px solid var(--line); padding: clamp(18px, 2vw, 24px) 0; }
.services h3 { margin: 0 0 8px; font-size: clamp(18px, 2vw, 21px); line-height: 1.3; letter-spacing: -.014em; font-weight: 600; }
.services p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #4a5357; max-width: 42ch; }
.contact { background: var(--navy); color: #f2f0eb; padding-top: clamp(28px, 3.5vw, 50px); padding-bottom: clamp(28px, 3.5vw, 50px); row-gap: 24px; }
.contact > div { min-width: 0; }
.contact .label { margin: 0 0 10px; color: #9cb4d2; font-weight: 600; }
.contact address { font-style: normal; font-size: 16px; line-height: 1.7; color: #c6ceda; }
.contact strong { display: block; color: #f2f0eb; font-weight: 600; }
.hours, .contact-links { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.hours > div { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.hours > div > :first-child { min-width: 70px; }
.hours > span, .hours > div > :last-child, .contact-links > span { color: #c6ceda; }
.contact-links { line-height: 1.6; }
.contact a { color: #f2f0eb; }
.contact a:hover { color: #9cb4d2; }

/* Mobiles Menü: natives Dialogelement übernimmt Fokus und Escape. */
.menu-toggle { display: none; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 44px; height: 44px; background: none; border: 0; padding: 0; }
.menu-toggle span { width: 24px; height: 1.5px; background: #f2f0eb; }
#mobile-menu { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 20px; background: var(--paper); color: var(--ink); }
#mobile-menu[open] { display: flex; flex-direction: column; }
body:has(#mobile-menu[open]) { overflow: hidden; }
.menu-heading { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.menu-close { width: 44px; height: 44px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink); }
.mobile-nav { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--line); }
.mobile-nav a { font-size: 21px; letter-spacing: -.01em; color: var(--ink); padding: 17px 2px; border-bottom: 1px solid var(--line); }
.menu-contact { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.menu-contact a { font-size: 16px; color: var(--ink); }

/* Impressum und Datenschutz */
.legal { padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(28px, 3.5vw, 50px); }
.legal > .eyebrow { margin: 0 0 8px; }
.legal h1 { margin: 0 0 clamp(20px, 2.5vw, 30px); font-size: clamp(23px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.024em; font-weight: 500; max-width: 26ch; }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 var(--gap); }
.legal section { border-top: 1px solid var(--line); padding: 18px 0; }
.legal h2 { margin: 0 0 8px; font-weight: 600; }
.legal section p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.legal ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; line-height: 1.5; }
.legal section .legal-reference { margin-top: 10px; line-height: 1.6; }
.privacy section { max-width: 820px; }
.privacy h1 { margin-bottom: clamp(18px, 2.2vw, 26px); max-width: 24ch; }
.privacy section { margin-top: clamp(26px, 3vw, 40px); padding-bottom: 0; }
.privacy section + section { margin-top: clamp(20px, 2.4vw, 30px); }
.privacy section p + p { margin-top: 14px; }
.privacy-date { margin: 28px 0 0; font-size: 14px; color: var(--muted); }

@media (min-width: 900px) {
  .columns { grid-template-columns: repeat(3, 1fr); }
  .optional-break { display: inline; }
  .services article:nth-child(-n+3) { border-top: 0; padding-top: 0; }
}
@media (max-width: 899px) {
  .header-inner { display: flex; flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .desktop-nav { flex-wrap: wrap; }
  .header-inner:has(.menu-toggle:not([hidden])) { height: 64px; padding-top: 0; padding-bottom: 0; padding-right: calc(var(--gutter) + 56px); }
  .header-inner:has(.menu-toggle:not([hidden])) .desktop-nav { display: none; }
  .menu-toggle:not([hidden]) { display: flex; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro .eyebrow, .intro h1 { grid-column: auto; }
  .intro-contact { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}