@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-upright.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --ink: #20384d;
  --accent: #0c6bb2;
  --muted: #506579;
  --paper: #ffffff;
  --soft: #f1f5fa;
  --line: #d8e3ef;
  --radius: 20px;
  --gutter: clamp(20px, 4vw, 48px);
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 112.5%;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #a64117; outline-offset: 5px; border-radius: 3px; }
header, main, footer { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
header { min-height: 88px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.brand { --brand-scale: 1; display: inline-block; max-width: 100%; color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1.4; letter-spacing: -.2px; text-decoration: none; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.brand-kicker { display: block; font-size: calc(1rem * var(--brand-scale)); font-weight: 600; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; }
.brand-name { display: block; font-size: calc(2.2184rem * var(--brand-scale)); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
nav a { padding: 9px 15px; text-decoration: none; border-radius: 8px; font-size: 1rem; }
nav a[aria-current="page"] { background: var(--soft); font-weight: 650; }
nav a:hover { background: var(--soft); }
.draft { background: var(--soft); color: var(--muted); padding: 5px var(--gutter); text-align: center; font-size: 0.777778rem; line-height: 1.5; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 2; background: white; padding: 12px; }
.skip:focus { top: 12px; }
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy visual" "actions actions"; gap: 24px 40px; align-items: start; padding-block: 38px 24px; }
.hero-copy, .hero-visual { min-width: 0; }
.hero-copy { grid-area: copy; }
.hero-actions { grid-area: actions; min-width: 0; }
.eyebrow { margin: 0 0 16px; font-size: 0.888889rem; letter-spacing: .07em; color: var(--accent); font-weight: 650; }
h1 { margin: 0; max-width: 22ch; font-size: 2.666667rem; line-height: 1.12; letter-spacing: -.045em; font-weight: 650; }
.hero-tagline { margin: 20px 0 0; color: var(--muted); font-size: 1.111111rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 17px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: white; text-decoration: none; font-weight: 600; font-size: 1rem; }
.button-secondary { background: transparent; color: var(--accent); border-color: #506579; }
.hero-visual { grid-area: visual; display: flex; justify-content: center; align-items: center; }
img { display: block; max-width: 100%; height: auto; }
.hero img { width: min(100%, 637px); border-radius: 14px; }
.page-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
.content-section { min-width: 0; }
h2 { margin: 0 0 20px; font-size: 1.666667rem; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
p { margin: 0 0 15px; max-width: 66ch; }
.section-willkommen { padding: 30px 28px 28px 0; }
.section-leistungen { align-self: stretch; padding: 30px 32px; background: var(--soft); border-radius: var(--radius); }
.section-leistungen .section-body { display: flex; flex-direction: column; }
#angebot-link, #team-link { margin-top: 14px; margin-bottom: 0; font-weight: 600; }
.section-team { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; gap: 40px; padding: 32px 36px; border: 1px solid var(--line); border-radius: var(--radius); }
.team-copy, .team-visual { min-width: 0; }
.team-visual { justify-self: center; margin: 0; }
.team-visual figcaption { margin-top: 12px; }
.content-image { width: 224px; max-width: 100%; border-radius: 14px; }
#ulla { font-size: 1.111111rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 0; }
#beruf { color: var(--muted); margin-bottom: 0; }
#gemeinsam { font-size: 0.888889rem; font-weight: 650; color: var(--accent); letter-spacing: .06em; margin-bottom: 8px; }
.section-kontakt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 32px 36px; background: var(--soft); border-radius: var(--radius); }
.contact-intro, .contact-details { min-width: 0; }
#sprechzeiten { font-size: 1rem; font-weight: 600; }
#kontakt-einleitung { margin-bottom: 8px; }
#terminweg { color: var(--ink); }
#standort { font-weight: 650; margin-bottom: 14px; }
#email, #telefon { margin-bottom: 8px; }
#anschrift-label { font-size: 1.666667rem; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 20px; }
#adresse { margin-bottom: 18px; }
#kontakt-link { margin-bottom: 0; font-weight: 400; }
footer { border-top: 1px solid var(--line); padding-block: 25px 30px; color: var(--muted); font-size: 0.888889rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 28px; align-items: start; }
footer > p { font-weight: 600; margin: 0; }
address { font-style: normal; }
footer a { display: inline-block; margin-bottom: 5px; }
footer > div { display: flex; flex-direction: column; }
.notice { background: var(--soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 20px; margin-top: 20px; }
.notice h2 { font-size: 1.333333rem; }
a, p, h1, h2, address { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  header { gap: 14px; }
  nav a { padding-inline: 10px; }
  .hero { column-gap: 28px; }
  .page-sections { gap: 22px; }
  .section-team, .section-kontakt { padding: 28px; gap: 30px; }
  footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "actions" "visual"; }
}
@media (max-width: 700px) {
  header { display: block; padding-block: 16px 12px; }
  .brand { display: block; max-width: 100%; }
  nav { margin-top: 12px; gap: 3px; }
  nav a { padding: 8px 12px; }
  .hero { gap: 24px; padding-block: 30px 24px; }
  h1 { font-size: 2.222222rem; max-width: 21ch; }
  .hero-tagline { font-size: 1rem; margin-block: 16px 0; }
  .page-sections { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .section-willkommen { padding: 8px 0; }
  .section-leistungen { padding: 26px; }
  .section-team, .section-kontakt { grid-template-columns: minmax(0, 1fr); padding: 26px; gap: 24px; }
  .team-visual { justify-self: start; }
  .content-image { width: 208px; }
  h2, #anschrift-label { font-size: 1.555556rem; }
  footer { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

@media (max-width: 480px) { .brand { --brand-scale: .835714; } }
@media (max-width: 360px) { .brand { --brand-scale: .685714; } }

button { font-family: inherit; line-height: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #a64117; outline-offset: 5px; }
.updates-dialog { width: min(42rem, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 20px 70px rgb(0 0 0 / .25); }
.updates-dialog::backdrop { background: rgb(20 40 60 / .42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dialog-heading { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; background: white; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 0; font-size: 1.555556rem; }
.dialog-body { padding: 28px; min-height: 10rem; }
.dialog-body p:last-child { margin-bottom: 0; }
.dialog-body .notice { margin-top: 0; }
html:has(.updates-dialog:modal) { overflow: hidden; }
@media (max-width: 700px) {
  .actions { flex-direction: column; align-items: stretch; }
  .updates-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 14px; }
  .dialog-heading, .dialog-body { padding: 20px; }
}

.phone-number { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 650; line-height: 1.3; user-select: text; }
.phone-status { font-weight: 650; border-left: 4px solid #506579; padding-left: 12px; }
.phone-status-open { border-left-color: #0c6bb2; }
.phone-note { font-size: 1rem; }

/* Keep navigation available on roomy desktop viewports. */
@media (min-width: 1100px) and (min-height: 600px) {
  html { scroll-padding-top: 8rem; }
  body > header {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding-inline: max(var(--gutter), calc((100% - 1120px) / 2));
    background: var(--paper);
  }
  .skip { position: fixed; z-index: 20; }
}

/* Opaque fallback remains when background blur is unavailable. */
@media (min-width: 1100px) and (min-height: 600px) {
  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body > header {
      background: rgb(255 255 255 / .5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body > header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.footer-dialog-link { align-self: flex-start; padding: 0; margin-bottom: 5px; border: 0; background: transparent; color: var(--accent); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.legal-dialog h3 { font-size: 1.111111rem; line-height: 1.35; margin: 24px 0 12px; }
.legal-dialog address { margin-bottom: 16px; }
.legal-note { padding: 16px; background: var(--soft); border-left: 3px solid var(--accent); }
.legal-dialog a { overflow-wrap: anywhere; }
.legal-page { max-width: 76ch; margin: 40px auto 56px; }
.legal-page h2 { font-size: 1.25rem; line-height: 1.35; margin: 28px 0 12px; }
.legal-page address { margin-bottom: 16px; }
.legal-page a { overflow-wrap: anywhere; }

/* Links: ruhige Grunddarstellung, sichtbar bei Maus und Tastatur. */
a, .footer-dialog-link { text-decoration-line: none; }
a:hover, a:focus-visible, .footer-dialog-link:hover, .footer-dialog-link:focus-visible { text-decoration-line: underline; }

/* Menüpunkte werden durch Hintergrund und Fokusrahmen markiert. */
nav a:hover, nav a:focus-visible { text-decoration-line: none; }

/* Reflow: lange Zwischenüberschriften und niedrige Zoom-Viewports. */
h3 { overflow-wrap: anywhere; }
.dialog-heading > * { min-width: 0; max-width: 100%; }
@media (max-height: 400px) { .dialog-heading { position: static; } }

/* Höherer Textkontrast über Bildern bei unveränderter Headertransparenz. */
header nav a { color: var(--ink); }

/* Angebotsseite: bestehende Typografie, eigenständige Inhaltsgruppen. */
.services-page { padding-block: 42px; }
.services-intro { margin-bottom: 42px; }
.services-intro > p { margin-top: 20px; }
.services-review { padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--soft); }
.services-jumps { margin-top: 24px; gap: 12px; }
.services-jumps a { border: 1px solid var(--accent); }
.services-group { margin-block: 40px; scroll-margin-top: 1rem; }
.services-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.service-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.service-card h3 { margin: 0 0 12px; font-size: 1.333333rem; line-height: 1.3; }
.service-card p { margin: 0; }
.services-contact { padding: 28px; background: var(--soft); border-radius: var(--radius); }
@media(max-width:700px) { .services-page { padding-block:28px; } .services-grid { grid-template-columns:minmax(0,1fr); } .services-jumps { align-items:stretch; flex-direction:column; } }

/* Teamübersicht: Porträts aus dem Bestand, ohne Beschnitt. */
.team-page { padding-block: 42px; }
.team-intro { margin-bottom: 36px; }
.team-intro p { margin-top: 20px; }
.team-roster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.person-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--radius); }
.person-card img { width:100%; max-width:240px; aspect-ratio:2/3; object-fit:contain; margin:0 auto 24px; border-radius:12px; }
.person-copy h2 { font-size:1.333333rem; margin:0 0 8px; overflow-wrap:anywhere; }
.person-copy p { color:var(--muted); margin-bottom:14px; }
.person-copy a { display:inline-block; padding-block:6px; }
.team-contact { margin-top:40px; padding:28px; background:var(--soft); border-radius:var(--radius); }
@media(max-width:1000px) { .team-roster { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .team-page { padding-block:28px; } .team-roster { grid-template-columns:minmax(0,1fr); } }

.portrait-link { display:block; width:100%; max-width:240px; margin:0 auto 24px; border-radius:12px; }
.person-card .portrait-link img { margin:0; }

/* Personenprofil: vorhandene Gestaltung, lesbarer chronologischer Werdegang. */
.profile-page { padding-block:32px 42px; }
.profile-back { margin-bottom:24px; }
.profile-intro { display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; align-items:center; }
.profile-intro img { width:100%; height:auto; border-radius:12px; }
.profile-intro h1 { font-size:clamp(2rem,4vw,2.666667rem); margin-bottom:12px; }
.profile-role { font-weight:600; margin-bottom:20px; }
.profile-intro p { max-width:60ch; }
.profile-career { margin-top:40px; max-width:52rem; }
.career-list { list-style:none; padding:0; margin:24px 0; }
.career-list li { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.career-list p { margin:0; }
@media(max-width:600px) { .profile-intro { grid-template-columns:minmax(0,1fr); gap:24px; } .profile-intro img { max-width:210px; } .career-list li { grid-template-columns:minmax(0,1fr); gap:6px; } }

/* Kontaktseite: Wege, Anschrift und Telefonzeiten klar getrennt. */
.contact-page { padding-block:42px; }
.contact-lead { margin:20px 0 32px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.contact-grid h2 { margin-bottom:20px; }
.contact-grid address { font-style:normal; margin-bottom:20px; }
.contact-phone { font-size:1.333333rem; font-weight:600; }
.contact-section { margin-top:40px; }
.contact-section h2 { margin-bottom:20px; }
.contact-hours { width:100%; max-width:40rem; border-collapse:collapse; margin:24px 0; }
.contact-hours th, .contact-hours td { padding:12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.contact-hours thead { background:var(--soft); }
.contact-review { padding:12px 16px; border-left:3px solid var(--accent); background:var(--soft); }
.contact-emergency { padding:28px; background:var(--soft); border-radius:var(--radius); }
@media(max-width:700px) { .contact-grid { grid-template-columns:minmax(0,1fr); gap:32px; } .contact-page { padding-block:28px; } .contact-hours th, .contact-hours td { padding:10px 6px; } }

.osm-mobile-note { display:none; }
@media(max-width:767px) { .osm-mobile-note { display:block; margin-top:8px; color:var(--muted); } }

/* Originalmotiv der Praxis, zugeschnittene transparente Webfassung. */
.brand { width:320px; flex:0 1 320px; }
.brand-logo { width:100%; height:auto; }
@media(max-width:480px) { .brand { width:min(320px,100%); } }

/* Desktop: halber Logo-Abstand, gleichmäßige Menülücken, Kontakt rechts fixiert.
   Die natürliche Breite der vier Links beträgt mit Source Sans 3 rund 340px. */
@media (min-width: 1100px) {
  header nav { width: calc((100% - 320px + 340px) / 2); justify-content: space-between; }
}

/* Empfangsbild: weicher Übergang, Aktionen direkt unter dem Begleitsatz. */
.hero { display:block; position:relative; isolation:isolate; min-height:300px; padding-block:38px 24px; }
.hero-copy { position:relative; z-index:2; width:min(100%,660px); background:transparent; }
.hero-copy h1, .hero-copy .hero-tagline { width:fit-content; background:white; box-shadow:0 0 18px 6px white; }
.hero-actions { position:relative; z-index:2; margin-top:24px; }
.hero-actions .button-secondary { background:white; }
.hero-actions #kontakt-aktion { background:rgb(255 255 255 / .94); }
.hero-visual { position:absolute; z-index:0; top:38px; right:0; width:min(56%,637px); pointer-events:none; }
.hero-visual img { width:100%; border-radius:0; }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(to right,white 0%,white 8%,rgb(255 255 255 / 0) 34%,rgb(255 255 255 / 0) 82%,white 100%),linear-gradient(to bottom,white 0%,rgb(255 255 255 / 0) 20%,rgb(255 255 255 / 0) 80%,white 100%); }
@media(max-width:1099px) {
 .hero { min-height:0; }
 .hero-copy { width:100%; background:transparent; box-shadow:none; }
 .hero-copy h1, .hero-copy .hero-tagline { background:transparent; box-shadow:none; }
 .hero-actions #kontakt-aktion { background:white; }
 .hero-visual { position:static; width:100%; margin-top:24px; }
 .hero-visual img { width:min(100%,637px); border-radius:14px; }
 .hero-visual::after { display:none; }
}
@media(max-width:700px) { .hero { padding-block:30px 24px; } }

.notice .notice-image{display:block;max-width:100%;max-height:24rem;width:auto;height:auto;margin:1rem auto;border-radius:.5rem;}