/* Zahnarztpraxis Bramann – statische Seite
   Schrift: Montserrat (Light 300). Für DSGVO-konforme Einbindung lokal unter
   /assets/fonts/ ablegen – es werden keine externen Ressourcen geladen. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Montserrat Light"), local("Montserrat-Light"),
       url("fonts/montserrat-v31-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Montserrat Medium"), local("Montserrat-Medium"),
       url("fonts/montserrat-v31-latin-500.woff2") format("woff2");
}

:root {
  --text: #747474;
  --link: #333333;
  --heading: #333333;
  --bg: #ffffff;
  --rule: #e2e2e2;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #d7d6d6; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", Verdana, Geneva, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #fff; padding: 8px 12px; color: var(--link);
}
.skip-link:focus { left: 8px; top: 8px; z-index: 10; }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Startseite */
.home {
  text-align: center;
  padding-top: clamp(60px, 18vh, 206px);
  padding-bottom: 60px;
}
.home .logo { display: block; margin: 0 auto; width: 450px; max-width: 100%; height: auto; }
.home .contact { margin: 50px 0 0; }
.home .legal { margin: 20px 0 0; }

/* Unterseiten */
.page-header { text-align: center; padding: 40px 16px 10px; }
.page-header .logo { width: 220px; max-width: 70%; height: auto; }

.legal-text { max-width: 800px; margin: 0 auto; padding: 20px 0 60px; font-size: 14px; line-height: 1.7; }
.legal-text h1 { color: var(--heading); font-weight: 500; font-size: 26px; margin: 20px 0 30px; }
.legal-text h2 { color: var(--heading); font-weight: 500; font-size: 19px; margin: 40px 0 12px; }
.legal-text h3 { color: var(--heading); font-weight: 500; font-size: 16px; margin: 28px 0 8px; }
.legal-text h4 { color: var(--heading); font-weight: 500; font-size: 14px; margin: 22px 0 6px; }
.legal-text p { margin: 0 0 14px; }
.legal-text ul { margin: 0 0 14px; padding-left: 20px; }
.legal-text a { word-break: break-word; }

footer {
  text-align: center;
  padding: 24px 16px 30px;
  border-top: 1px solid var(--rule);
}
footer p { margin: 0; }