/* pb19 – Version 199
   Prinzipien: getrennte Seiten, normaler Dokumentfluss, kein JS,
   keine festen Pixel-Koordinaten, drei Schrift-Versionen, responsive-tauglich. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
address { font-style: normal; }

:root {
  --blau:   #336699;
  --hell:   #888888;   /* Fließtext / Label */
  --dunkel: #666666;   /* Betonung */
  --mittel: #555555;   /* Ueberschriften (Medium 500), groesser + dunkler */
  --text:   #333333;
  --bg:     #ffffff;

  --rand: 32px;
  --block-w: 33rem;   /* gemeinsame Spaltenbreite -> Logo auf beiden Seiten gleich */

  /* drei Schrift-Versionen + Logo, alles relativ (rem) */
  --fs-logo:  4.75rem;    /* 76px */
  --fs-body:  1.0625rem;  /* 17px */
  --fs-emph:  1.1875rem;  /* 19px - Ueberschriften groesser als Body */
  --fs-label: 0.75rem;    /* 12px */

  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html { font-size: 100%; }            /* respektiert die Nutzer-Einstellung */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- HEADER (normaler Fluss, oben) ---------- */
header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.25rem var(--rand) 1.25rem;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 2.875rem; width: auto; display: block; }

nav { display: flex; gap: 1.5rem; }
nav a {
  font-size: var(--fs-body); font-weight: 400; color: var(--hell);
  text-decoration: none; letter-spacing: 0.02em; line-height: 1.2;
  transition: color .2s;
}
nav a:hover, nav a.active { color: var(--blau); }

/* ---------- MAIN / zentrierter, linksbündiger Block ---------- */
main { padding: clamp(2rem, 12vh, 9rem) var(--rand) 3rem; flex: 1 0 auto; }
.block { width: var(--block-w); max-width: 100%; margin: 0 auto; text-align: left; }

.hero-logo { font-size: var(--fs-logo); font-weight: 700; line-height: 1; margin-left: -0.06em; letter-spacing: -0.025em; }
.hero-logo .pb { color: var(--dunkel); }
.hero-logo .neun { color: var(--blau); }

.subtitle {
  font-size: var(--fs-body); font-weight: 400; color: var(--hell);
  margin-top: -0.615em; margin-bottom: 2.5rem; white-space: nowrap;
}

/* ---------- DREI SCHRIFT-VERSIONEN ---------- */
.t-label { font-size: var(--fs-label); font-weight: 400; color: var(--hell); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; font-feature-settings: "ss01" 1, "case" 1; }
.t-cap   { font-size: var(--fs-label); font-weight: 400; color: var(--hell); line-height: 1.4; font-feature-settings: "ss01" 1; }
.t-body  { font-size: var(--fs-body);  font-weight: 400; color: var(--hell);   line-height: 1.6; }
.t-emph  { font-family: var(--font); font-size: var(--fs-emph);  font-weight: 500; font-synthesis: none; color: var(--mittel); line-height: 1.7rem; }
.subtitle, .t-body, .t-emph { text-wrap: pretty; }

/* ---------- INHALTS-REGIONEN ---------- */
.regions { display: flex; flex-direction: column; gap: 2.5rem; }
.leistungen { display: flex; flex-direction: column; gap: 2.55rem; }  /* Abstand zwischen Themen (halbiert) */
.region  { display: flex; flex-direction: column; gap: 2px; }

.tag { font-size: var(--fs-label); font-weight: 400; color: var(--hell); margin-left: 0.5rem; }

.kontakt { display: flex; gap: 3.5rem; margin-top: -1.9rem; }
.ghost { visibility: hidden; }
.adr-neben { margin-top: 1.7rem; }
.kontakt a { color: var(--blau); text-decoration: none; }
.kontakt a:hover { color: #29527A; }

/* FOOTER mit Mitgliedslogo (linksbuendig zum Inhalt) */
footer { padding: 1.5rem var(--rand) 4rem; }
.footer-inner { width: var(--block-w); max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; }
.gih-logo { width: 1.5rem; height: 1.5rem; display: block; flex: none; }
.gih-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.gih-link .t-cap { transition: color .2s; }
.gih-link:hover .t-cap { color: var(--dunkel); }

/* ---------- RESPONSIVE (Grundgerüst, später feiner) ---------- */
/* leistungen.html: fixe Kopf-/Fusszone, nur Themenblock scrollt, Fade unten */
.page-leistungen { height: 100vh; height: 100dvh; }
.page-leistungen main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.page-leistungen .block { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page-leistungen .leistungen-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6rem; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent); }
.page-leistungen .leistungen-scroll::-webkit-scrollbar { width: 0; height: 0; }

@media (max-width: 600px) {
  :root { --rand: 20px; --fs-logo: 2.75rem; }

  /* Kopfzeile: Balken-Logo mitverkleinern, Navigation einzeilig */
  header { gap: 1rem; padding: 1.25rem var(--rand) 0.75rem; }
  .logo { display: none; }                              /* Balkenlogo mobil aus, Navigation linksbuendig */
  nav { gap: 0.9rem; white-space: nowrap; }
  nav a { font-size: 0.9375rem; letter-spacing: 0.01em; } /* 15px, kompakter */

  /* Hoehenabstaende raffen (weniger Leerraum), inkl. Footer */
  body { min-height: 0; }                 /* keine erzwungene Vollhoehe auf Mobil */
  main { flex: 0 0 auto; padding-top: 2rem; padding-bottom: 1.5rem; }   /* A: mehr Luft Nav->PB19 (oben groesser) */
  .hero-logo { margin-left: -0.05em; }
  .subtitle { white-space: normal; margin-top: -0.35em; margin-bottom: 2.25rem; } /* B: etwas kleiner als A */
  .regions { gap: 1rem; }
  .leistungen { gap: 0.9rem; }
  /* Footer fix am unteren Bildrand (wie Kopf oben), minimale Hoehe */
  footer { padding: 0.5rem var(--rand) calc(1.25rem + env(safe-area-inset-bottom)); } /* Unterkante 1.25rem zum sicheren Rand */
  body:not(.page-leistungen) footer { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 10; }
  body:not(.page-leistungen) main { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }   /* Platz fuer den fixen Footer */

  /* Schriften mobil: Ueberschriften = Untertitelgroesse (17px), Texte 16px (Unterschied bleibt) */
  .t-emph { font-size: var(--fs-body); line-height: 1.6; }
  .t-body { font-size: 1rem; }

  /* sonstige Mobil-Anpassungen */
  .ghost { display: none; }
  .t-body, .t-emph { white-space: normal; }
  .kontakt { flex-direction: column; gap: 1rem; margin-top: 0; }
  .adr-neben { margin-top: 1.1rem; }   /* Abstand zu "Weitere Adresse" nur anteilig verkleinert */
}

/* sanftes Einblenden gegen Aufbau-Zuckungen (reines CSS) */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
body { animation: fadein 1s ease-out both; }

/* Fokus-Styles (Tastatur), mit Fallback für alte Browser */
a:focus { outline: 2px solid var(--blau); outline-offset: 3px; }
a:focus:not(:focus-visible) { outline: none; }