/* Schriften – lokal eingebunden, keine Verbindung zu Google.
   Die Dateien liegen in /assets/fonts/ (siehe LIESMICH.txt). */
@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
main:focus { outline: none; }
section[id], div[id="termin"] { scroll-margin-top: 16px; }

/* Sichtbarer Tastaturfokus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0A6B63; outline-offset: 3px; border-radius: 8px;
}

/* Direkt zum Inhalt */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: #0F2A2E; color: #FFFFFF; padding: 12px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #FFFFFF; }

/* Spam-Schutz: für Menschen unsichtbar */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Porträt: Foto legt sich über die Grafik, sobald es hochgeladen ist */
.portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Formular-Hinweise */
.form-msg { margin: 0; font-size: 15px; line-height: 1.5; padding: 12px 16px; border-radius: 12px; background: #FFF1EA; color: #7A2E12; }
.btn[disabled], button[disabled] { opacity: .6; cursor: progress; }

/* Navigation: unter 1200 px als Menü */
.menu-btn { display: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid #0F2A2E; background: #FFFFFF; color: #0F2A2E; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn path { transition: transform .25s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .m1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .m2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 1200px) { header > .wrap { flex-wrap: nowrap !important; column-gap: 28px !important; } #hauptnav { flex-wrap: nowrap !important; column-gap: 18px !important; } #hauptnav .navlink { white-space: nowrap; } }
@media (max-width: 1199px) {
  .menu-btn { display: inline-flex; flex: 0 0 48px; }
  header > .wrap { column-gap: 12px !important; flex-wrap: wrap !important; }
  header > .wrap > a:first-child { flex: 1 1 0; min-width: 0; }
  #hauptnav { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 8px 0 4px; }
  #hauptnav.open { display: flex !important; }
  #hauptnav .navlink { padding: 14px 4px; border-bottom: 1px solid #DCE7E5; }
  #hauptnav .btn { margin-top: 12px; }
}
@media (max-width: 420px) {
  header > .wrap > a:first-child svg { width: 40px; height: 40px; }
  header > .wrap > a:first-child span span:last-child { font-size: 12px !important; }
}