/* ═══════════════════════════════════════════════════════════
   base.css – Gemeinsame Basis für alle Seiten
   (Schriften, Design-Tokens, Reset, Navigation, Footer)
   Einzige Quelle der Wahrheit – Werte aus index.html.
   ═══════════════════════════════════════════════════════════ */

/* ── LOKALE SCHRIFTEN ─────────────────────────────────
   Headings: Lora (Serif) · Body: Karla (Grotesk) – beide SIL OFL,
   self-hosted als variable woff2 (DSGVO – kein Google CDN live).
   Subsets latin + latin-ext (deckt deutsche Umlaute/ß ab).        */

/* Lora – Headings (var(--font-heading)), Gewichte 400–700 */
@font-face {
  font-family: 'Lora';
  src: url('./fonts/lora-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  src: url('./fonts/lora-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  src: url('./fonts/lora-italic-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  src: url('./fonts/lora-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Karla – Body (var(--font-body)), Gewichte 200–800 */
@font-face {
  font-family: 'Karla';
  src: url('./fonts/karla-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('./fonts/karla-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  src: url('./fonts/karla-italic-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('./fonts/karla-italic-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
  --ivory:      #F4F1EA;   /* Haupthintergrund – warmes Weiß */
  --sand:       #CDC1AC;   /* Wechsel-Sektionen – tiefer, damit weiße Karten abheben */
  --taupe:      #8A7A6C;   /* Dekorativ-Nummern, Rahmen */
  --greige:     #B87060;
  --gold:       #C4A25D;   /* Dekorativ: Linien, Buttons */
  --gold-text:  #5A3F06;   /* Text auf hellem BG – kräftiger für Kontrast */
  --dark:       #100E0C;   /* Fast-Schwarz für Credentials, Footer */
  --text:       #14100A;   /* Haupttext – Tinte */
  --text-light: #352B20;   /* Fließtext – dunkler für besseren Kontrast */

  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --gold-btn:       #8A6B28;   /* Buttons: Weiß/Gold ≈ 5:1 – WCAG AA */
  --gold-btn-hover: #7A5C20;   /* Button-Hover: dunkler */

  --max-w: 1100px;             /* Standard-Breite (Rechtsseiten überschreiben) */
  --section-pad: 100px 24px;
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── UTILITIES ─────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.gold      { color: var(--gold); }
.divider {
  width: 48px; height: 1px;
  background: var(--gold);
  margin: 20px auto;
}
.divider--left { margin-left: 0; }

/* ── SKIP-LINK ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -48px; left: 0;
  z-index: 1000;
  background: var(--dark);
  color: #fff;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ── NAVIGATION ────────────────────────────────────── */
/* :not(.footer-nav) – sonst erbt auch der Footer-<nav> position:fixed + Nav-Hintergrund */
nav:not(.footer-nav) {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(244,241,234,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(94,68,8,0.18);
  padding: 0 24px;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.nav-logo-mark {
  width: 46px;
  height: auto;
  display: block;
  filter: brightness(0.25) sepia(0.3);
  flex-shrink: 0;
}
.nav-logo-divider {
  width: 1px;
  height: 38px;
  background: rgba(94,68,8,0.22);
  flex-shrink: 0;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-logo-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--dark);
  white-space: nowrap;
}
.nav-logo-sub {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold-text);
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
}
.nav-links a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--gold-text);
  color: var(--gold-text);
  transition: all 0.25s;
}
.nav-cta:hover { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
/* Zurück-Link (nur Rechtsseiten) */
.nav-back {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.25s;
}
.nav-back:hover { color: var(--gold-text); }

/* ── NAV-DROPDOWN „Leistungen" (Desktop) ───────────── */
.nav-item--dropdown { position: relative; }
.nav-dropdown {
  opacity: 0; visibility: hidden; pointer-events: none;
  position: absolute; top: 100%; left: -16px;
  min-width: 260px;
  background: var(--ivory);
  border: 1px solid rgba(94,68,8,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  padding: 14px 0 10px;
  margin-top: -2px;
  transition: opacity 0.2s, visibility 0.2s;
  list-style: none;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-dropdown a {
  display: block;
  padding: 11px 22px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: none; white-space: nowrap;
}
.nav-dropdown a:hover { background: rgba(196,162,93,0.1); }
.nav-dropdown-current {
  display: block;
  padding: 11px 22px;
  font-size: 11px; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--taupe); cursor: default;
}

/* ── HAMBURGER / MOBILE MENU ───────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none; border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--dark);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--ivory);
  z-index: 98;
  flex-direction: column;
  padding: 40px 24px;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--dark);
  padding: 16px 0;
  border-bottom: 1px solid rgba(94,68,8,0.12);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-submenu { border-bottom: 1px solid rgba(94,68,8,0.12); }
.mobile-submenu summary {
  font-family: var(--font-heading); font-size: 26px; font-weight: 600;
  color: var(--dark); padding: 16px 0; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mobile-submenu summary::-webkit-details-marker { display: none; }
.mobile-submenu summary::after { content: '›'; transform: rotate(90deg); transition: transform 0.25s; font-size: 20px; }
.mobile-submenu[open] summary::after { transform: rotate(-90deg); }
.mobile-submenu-list { display: flex; flex-direction: column; padding: 0 0 16px 12px; gap: 4px; }
.mobile-submenu-list a {
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  padding: 10px 0; border-bottom: none; color: var(--text-light);
}
.mobile-submenu-current {
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  padding: 10px 0; color: var(--taupe);
}
.mobile-menu .mobile-cta {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px;
  background: var(--gold-btn);
  color: #fff;
  border: none;
}
body.menu-open { overflow: hidden; }

/* ── FOOTER ────────────────────────────────────────── */
footer {
  background: var(--dark);
  padding: 60px 24px 32px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  gap: 40px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-logo-mark {
  width: auto;
  height: 108px;
  display: block;
  opacity: 0.95;
}
.footer-logo-divider {
  width: 1px;
  height: 96px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.footer-logo-text {
  display: flex;
  flex-direction: column;
}
.footer-logo-name {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
}
.footer-logo-sub {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
.footer-address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
  margin-top: 12px;
}
.footer-nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  transition: color 0.25s;
}
.footer-nav a:hover { color: var(--gold); }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  transition: color 0.25s;
}
.footer-legal a:hover { color: var(--gold); }

/* ── RESPONSIVE NAV ────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 560px) {
  .nav-logo-mark { width: 38px; }
  .nav-logo-name { font-size: 20px; letter-spacing: 0.03em; }
  .nav-logo { gap: 10px; }
  .nav-logo-divider { display: none; }
  .nav-logo-sub { font-size: 9px; letter-spacing: 0.13em; }
}