/* Gemeinsamer Kopf- und Fußbereich für alle Seiten. */
:root {
  --bar: 76px;
  --font-text: "Geist", "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-body: 17px;
  --fs-heading: clamp(30px, 3.3vw, 48px);
  --fs-lead: clamp(19px, 1.45vw, 22px);
  --fs-small: 15px;
  --g: clamp(16px, 1.6vw, 24px);
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 48px;
  --s-9: 56px;
  --s-12: 96px;
  --paper-soft: rgba(247, 245, 239, .76);
  --t-hover: 180ms;
  --t-ui: 240ms;
}

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
  height: var(--bar);
  padding: 0 var(--m);
  color: var(--white);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}

.top.is-solid {
  color: var(--ink);
  background: var(--paper);
}

.top-logo img {
  width: auto;
  height: 54px;
}

.top .logo-dark,
.top.is-solid .logo-light {
  display: none;
}

.top.is-solid .logo-dark {
  display: block;
}

.top-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-6);
}

.top-nav a,
.top-phone {
  color: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.top-nav a:hover,
.top-nav a[aria-current="page"],
.top-phone:hover {
  text-decoration-line: underline;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.top-button {
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--fs-small);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-ui) ease, visibility var(--t-ui), background-color var(--t-hover) ease;
}

.top.is-solid .top-button {
  visibility: visible;
  opacity: 1;
}

.top-call {
  display: none;
}

/* „Anrufen“ (Link) und „Menü“ (Button) nach demselben Modell: beide inline-flex und vertikal
   zentriert. Ein Button mit display:block verlässt sich auf die Zentrierung des Browsers, die je
   nach Browser (und mit den alten Menü-Regeln in styles.css) anders ausfällt; dann stünde „Menü“
   tiefer als „Anrufen“. */
.top .menu-button,
.top-call {
  align-items: center;
  min-height: 44px;
  margin: 0;
  font: 600 var(--fs-body)/1 var(--font-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.top .menu-button {
  display: none;
  width: auto;
  height: auto;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.top .menu-button:hover,
.top .menu-button[aria-expanded="true"] {
  color: inherit;
  background: none;
  transform: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: var(--s-4) var(--m) var(--s-6);
  color: var(--paper);
  background: var(--forest-deep);
  overflow-y: auto;
}

.menu[hidden] {
  display: none;
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.menu-head img {
  width: auto;
  height: 46px;
}

.menu-head .menu-close {
  position: static;
  width: auto;
  min-height: 44px;
  height: auto;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: 600 var(--fs-body)/1 var(--font-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

.menu-links {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.menu-links a {
  color: inherit;
  font: 600 var(--fs-heading)/1.2 var(--font-display);
  text-decoration: none;
}

.menu-links a:hover {
  color: var(--green-light);
}

.menu-contact {
  display: grid;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-8);
  font-size: var(--fs-lead);
}

.menu-contact a {
  color: var(--green-light);
}

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-9) var(--m) var(--s-5);
  color: var(--paper);
  background: var(--forest-deep);
  overflow: clip;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--g);
}

.footer h2 {
  margin: 0 0 var(--s-3);
  color: var(--paper);
  font: 600 var(--fs-body)/1.4 var(--font-text);
}

.footer address,
.footer p {
  margin: 0;
  color: var(--paper-soft);
  font-style: normal;
  line-height: 1.75;
}

.footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

.footer a:hover {
  color: var(--green-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.footer-legal {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
}

.footer-mark {
  margin-top: var(--s-12);
  --logo-black: var(--white);
  --logo-green: var(--white);
}

.lr-logo {
  display: block;
  width: clamp(150px, 16vw, 240px);
  height: auto;
  overflow: visible;
}

.lr-ink path { fill: var(--logo-black); }
.lr-green path { fill: var(--logo-green); }

.page-hero { margin-top: 0; }
.legal-page .legal-content { padding-top: calc(var(--bar) + 72px); }

@media (max-width: 1080px) {
  .top-nav { gap: var(--s-5); }
  .top-phone { display: none; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --bar: 64px; }
  .top { gap: var(--s-5); }
  .top-nav, .top-actions { display: none; }
  .top-call { display: inline-flex; grid-column: 2; justify-self: end; }
  .top .menu-button { display: inline-flex; grid-column: 3; }
  .top-logo img { height: 44px; }
  .footer { min-height: 0; margin-top: var(--s-9); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .footer-cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: site-menu-in 220ms ease both; }
  @keyframes site-menu-in {
    from { opacity: 0; translate: 0 -12px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (pointer: coarse) {
  .footer p a,
  .footer address a { display: inline-block; padding-block: var(--s-2); }
}

@media print {
  .top, .menu { display: none !important; }
  .footer { background: none; color: var(--ink); }
}