/* Hausarztpraxis Gesa Blank & Kollegen – Nachbau nach FireShot-Masterlayouts (1920 px Desktop) */
:root{
  --teal:#0c779b;
  --text:#000;
  --muted:#444;
  --bg:#e4ebf5;
  --topbar:#dfdfdf;
  --card:#f2f2f2;
  --band:#f8f8f8;
  --footer:#9e9e9e;
  --red:#ff3942;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Helvetica,Arial,"Liberation Sans",sans-serif;
  font-size:15px;line-height:25px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--teal)}
img{display:block;max-width:100%}
p{margin:0 0 12.5px}
b,strong{color:var(--muted);font-weight:700}

/* ---------- Kontaktleiste ---------- */
.topbar{
  height:54px;background:var(--topbar);position:relative;z-index:2;
  box-shadow:0 1px 6px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:16px;color:#333;padding-right:25px;
}
.topbar strong{color:#333}
.topbar svg{margin:0 5px 0 9px;flex:none}
.topbar a{color:var(--teal)}
.topbar a:hover{text-decoration:underline}

/* ---------- Kopf ---------- */
.header{width:1032px;margin:0 auto;height:132px;position:relative}
.logo{position:absolute;left:60.5px;top:17.5px;width:105px;height:97px}
.logo img{width:105px;height:97px}
.nav{position:absolute;right:56px;top:55px;display:flex;gap:24px}
.nav a{font-size:21px;line-height:22px;font-weight:700;color:var(--muted)}
.nav a:hover,.nav a.active{color:var(--teal)}

/* ---------- Seitencontainer ---------- */
.page{width:1032px;margin:0 auto;background:#fff}
.inner{padding:0 44px}

h1,h2,h3{margin:0;font-weight:400}
.h1{font-size:37px;line-height:39px;text-align:center;color:var(--teal)}
.h2{font-size:24px;line-height:28px;letter-spacing:1.2px;font-weight:700;color:var(--teal)}
.h3{font-size:24px;line-height:28px;letter-spacing:1.2px;color:var(--teal);text-align:center}
.h4{font-size:18px;line-height:24px;font-weight:700;color:var(--teal)}
.lbl{font-weight:700;color:var(--muted)}
.ind{padding-left:35px}
.ind2{padding-left:41px}
.red{color:var(--red)}
.u{text-decoration:underline}

/* ---------- Startseite ---------- */
.home-intro{padding-top:45px}
.hero{width:944px;height:629.5px;object-fit:cover}
.welcome{font-size:37px;line-height:39px;text-align:center;color:var(--muted);margin-top:43px}
.home-intro .h2{margin:8.5px 0 11.5px}
.band{height:90px;margin-top:56px;background:var(--band);border-bottom:1px solid #ececec}
.two{display:grid;grid-template-columns:444px 444px;column-gap:56px}
.contact{padding-top:44px}
.contact .h2{margin-bottom:13.5px;line-height:26px}
.contact .h4{margin:22.5px 0 10.5px}
.contact .team{width:444px;margin-top:13px}
.dash{margin:12.5px 0 13px;line-height:25px}
.hzv{width:944px;margin-top:57px}
.contact{padding-bottom:64.5px}

/* ---------- Über uns ---------- */
.about{padding:43.5px 27px 0}
.about > .h1{margin-bottom:80.5px}
.docs{display:grid;grid-template-columns:462px 462px;column-gap:54px;row-gap:124px;align-items:start}
.docs.stretch{align-items:stretch;margin-top:128px}
.doc{background:var(--card);padding:33px 38px 0;text-align:center;font-size:16px;line-height:26px}
.doc .name{font-size:24.5px;line-height:30px;color:var(--teal);margin:0 0 21px}
.doc p{margin:0 0 14px}
.doc .portrait{width:159px;height:159px;border-radius:50%;object-fit:cover;margin:30px auto -72px}
.doc .portrait.tight{margin-top:41px}
.sep{height:1px;background:#ebebeb;margin:123.5px -27px 0}
.mfa-title{margin-top:43.5px}
.mfa{display:grid;grid-template-columns:462px 462px;column-gap:54px;margin-top:130.5px;padding-bottom:114.5px}
.mfa figure{margin:0 0 25px;text-align:center}
.mfa figure.empty{visibility:hidden}
.mfa img{width:159px;height:159px;object-fit:cover;margin:0 auto;border-radius:2px}
.mfa figcaption{margin-top:33px;font-size:12.5px;line-height:18px;color:var(--teal)}

/* ---------- Leistungen ---------- */
.gallery{display:flex;gap:13.5px;padding:13px 13px 0;align-items:flex-start}
.gallery img{width:241.5px;height:auto}
.services{padding:83.5px 44px 44.5px}
.services .two{margin-top:35.5px;text-align:center}
.services .h3{margin-bottom:19.5px}

/* ---------- Rechtstexte ---------- */
.legal{padding:43.5px 44px 60px}
.legal .h1{margin-bottom:50px}
.legal h2{font-size:18px;line-height:24px;font-weight:700;color:var(--teal);margin:30px 0 10.5px}
.legal h3{font-size:15px;line-height:25px;font-weight:700;color:var(--muted);margin:18px 0 6px}
.legal ul{margin:0 0 12.5px;padding-left:35px}
.legal a{color:var(--teal);word-break:break-word}

/* ---------- Footer ---------- */
.footer{
  width:1032px;margin:0 auto;background:var(--footer);height:159px;
  padding:30.75px 44px 0;display:grid;grid-template-columns:1fr 1fr 1fr;
  line-height:24.5px;color:#000;
}
.footer b{color:#454545}
.footer .c2{text-align:center}
.footer .c3{text-align:center;padding-left:36px;color:var(--muted)}
.footer .c3 a{display:block}
.footer .mail{color:var(--muted)}

/* ---------- Responsiv (unterhalb der Desktop-Vorlage) ---------- */
@media (max-width:1060px){
  .header,.page,.footer{width:auto;max-width:1032px}
  .header{height:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px}
  .logo,.nav{position:static}
  .logo,.logo img{width:72px;height:auto}
  .nav{gap:18px}
  .nav a{font-size:18px}
  .inner,.services,.legal{padding-left:16px;padding-right:16px}
  .hero,.hzv,.contact .team{width:100%;height:auto}
  .welcome,.h1{font-size:28px;line-height:32px}
  .two,.docs,.mfa{grid-template-columns:1fr;row-gap:32px}
  .docs{row-gap:104px}
  .contact .team{margin-top:0}
  .about{padding:32px 16px 0}
  .docs.stretch{margin-top:104px}
  .doc{padding:28px 20px 0}
  .sep{margin:72px -16px 0}
  .mfa{margin-top:48px;padding-bottom:48px}
  .gallery{flex-wrap:wrap;gap:8px;padding:8px}
  .gallery img{width:calc(50% - 4px)}
  .services{padding-top:40px}
  .footer{height:auto;grid-template-columns:1fr;row-gap:16px;padding:24px 16px}
  .footer .c2,.footer .c3{text-align:left;padding-left:0}
}
@media (max-width:480px){
  .topbar{font-size:12px}
  .topbar strong{display:none}
  .nav{width:100%;justify-content:space-between;margin-top:12px}
  .nav a{font-size:16px}
  .welcome,.h1{font-size:24px;line-height:29px}
}