/* Entwurf 4A – wie 3A, Kopfbereich wie 1A (Text links, Gebäudeschnitt rechts), ohne Kennzahl-Kacheln. Web-Temperatur „weich“,
   Werte nur aus tokens.css (GL-008).
   Zur Entscheidung durch den Praxisinhaber (wie Entwurf 2):
   1. Zweifarbige Überschriften (Hervorhebung in --hl).
   2. Hero-Titel größer als --lb-size-hero und in Plex Sans 700 statt 600.
   3. Dunkle Etiketten-Pillen („badge“) als zusätzlicher Web-Baustein. */
:root{
  --hl: var(--lb-green);
  --hl-on-dark: var(--lb-green-pale);
  --frame: 1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--lb-stage);color:var(--lb-text);font:400 17px/var(--lb-lh-body) var(--lb-font-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{color:var(--lb-blue);font-weight:600;line-height:var(--lb-lh-heading);letter-spacing:var(--lb-tracking-heading)}
h1 em,h2 em{font-style:normal;color:var(--hl)}
a:hover{border-bottom:0}
a:focus-visible{outline:var(--lb-focus);outline-offset:var(--lb-focus-offset)}
.frame{width:min(var(--frame),calc(100% - 2 * var(--lb-space-4)));margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--lb-surface);padding:var(--lb-space-2);border-radius:var(--lb-web-radius-field)}
.card{background:var(--lb-surface);border-radius:var(--lb-web-radius);box-shadow:var(--lb-web-shadow);padding:var(--lb-space-5)}

/* Buttons – Pillen */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--lb-web-button-height);padding:0 var(--lb-space-4);border-radius:var(--lb-web-radius-pill);background:var(--lb-blue);color:var(--lb-on-dark);border:1px solid var(--lb-blue);font-weight:600;font-size:15px;transition:background var(--lb-motion-color) var(--lb-easing),color var(--lb-motion-color) var(--lb-easing)}
.btn:hover{background:var(--lb-blue-hover);color:var(--lb-on-dark);border-bottom:1px solid var(--lb-blue-hover)}
.btn-outline{background:transparent;color:var(--lb-blue)}
.btn-outline:hover{background:var(--lb-surface);color:var(--lb-blue);border-bottom-color:var(--lb-blue)}
.btn-sm{min-height:var(--lb-web-touch-min);padding:0 var(--lb-space-3);font-size:14.5px}
.btn-light{background:var(--lb-surface);color:var(--lb-blue);border-color:var(--lb-surface)}
.btn-light:hover{background:var(--lb-green-light);color:var(--lb-blue);border-bottom-color:var(--lb-green-light)}
.btn-ghost{background:transparent;color:var(--lb-on-dark);border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.45)}

/* Etiketten */
.badge{display:inline-block;background:var(--lb-blue);color:var(--lb-on-dark);font-size:var(--lb-size-label);font-weight:600;letter-spacing:var(--lb-tracking-label);text-transform:uppercase;padding:5px 14px;border-radius:var(--lb-web-radius-pill)}
.badge-klein{font-size:11px;padding:4px 12px;background:var(--lb-blue-muted)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:var(--lb-surface);box-shadow:var(--lb-web-shadow)}
.kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-4);min-height:76px}
.logo{display:block;line-height:0}
.logo img{width:165px;height:auto}
.kopf nav{display:flex;align-items:center;gap:var(--lb-space-4);font-size:14.5px}
.kopf nav a:not(.btn){color:var(--lb-text);padding:var(--lb-space-2) 0}
.kopf nav a:not(.btn):hover{color:var(--lb-blue);border-bottom:2px solid var(--lb-green)}

/* Hero – wie 1A: Text links, Gebäudeschnitt rechts */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--lb-space-7);align-items:center;padding:var(--lb-space-7) 0 var(--lb-space-2)}
.hero h1{font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:var(--lb-space-4)}
.lead{font-size:19px;color:var(--lb-text-muted)}
.hero .lead{margin-top:var(--lb-space-4)}
.actions{display:flex;flex-wrap:wrap;gap:var(--lb-space-2);margin-top:var(--lb-space-5)}
.schnitt-karte{padding:0;overflow:hidden}
.karten-kopf{display:flex;justify-content:space-between;gap:var(--lb-space-2);padding:var(--lb-space-2) var(--lb-web-card-padding) 0;font-size:var(--lb-size-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--lb-label)}
.karten-kopf span:first-child{color:var(--lb-green-dark)}
.schnitt-karte .schnitt{background:transparent;padding:var(--lb-space-2) var(--lb-space-4) 0}
.schnitt-karte figcaption{margin:0 var(--lb-space-3) var(--lb-space-3);padding:var(--lb-space-2) var(--lb-space-3);background:var(--lb-surface-alt);border-radius:var(--lb-web-radius-field);font-size:var(--lb-size-small);color:var(--lb-text-muted)}
.schnitt-karte .legende{margin-bottom:var(--lb-space-1)}
.schnitt-karte .legende li{background:var(--lb-surface);padding:3px 12px;font-size:13px}

/* Abschnitte */
.band{padding:var(--lb-space-7) 0 0}
.band>.frame>h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.018em;margin:var(--lb-space-3) 0 var(--lb-space-5)}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--lb-web-gap)}
.leistung{display:flex;flex-direction:column;gap:var(--lb-space-2)}
.leistung-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-2)}
.nr{font-size:28px;font-weight:600;color:var(--lb-blue);line-height:1}
.leistung h3{font-size:22px;margin-top:var(--lb-space-1)}
.leistung p{font-size:16px;color:var(--lb-text-muted)}

/* Gebäudeschnitt */
.schnitt svg{display:block;width:100%;height:auto}
.legende{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--lb-space-1);counter-reset:n}
.legende li{counter-increment:n;background:var(--lb-surface-alt);border-radius:var(--lb-web-radius-pill);padding:5px 14px;font-size:14px;font-weight:500;color:var(--lb-blue)}
.legende li::before{content:counter(n) "  ";font-weight:400;color:var(--lb-blue-muted)}

/* Gesprächsbalken */
.cta-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-4);margin-top:var(--lb-web-gap);padding:var(--lb-space-4) var(--lb-space-5)}
.cta-bar p{font-size:17px}

/* Profil */
.profil{display:grid;grid-template-columns:260px 1fr;gap:var(--lb-space-6);align-items:start}
.portrait{aspect-ratio:4/5;border-radius:var(--lb-web-radius-image);background:var(--lb-stage);display:grid;place-items:center;color:var(--lb-label);font-size:var(--lb-size-small)}
.profil-text{display:flex;flex-direction:column;gap:var(--lb-space-3)}
.profil-text h3{font-size:24px;font-weight:700}
.profil-text>p:not(.lead){color:var(--lb-text-muted)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--lb-space-1)}
.chips li{background:var(--lb-green-light);color:var(--lb-green-dark);font-size:13.5px;font-weight:500;padding:6px 14px;border-radius:var(--lb-web-radius-pill)}

/* Kontakt – blaues Abschlussfeld */
.final{padding:var(--lb-space-7) 0}
.final-panel{background:var(--lb-blue);border-radius:var(--lb-web-radius);padding:var(--lb-space-7) var(--lb-space-5);text-align:center;color:var(--lb-on-dark-muted)}
.final-panel h2{color:var(--lb-on-dark);font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.018em}
.final-panel h2 em{color:var(--hl-on-dark)}
.final-panel>p{margin-top:var(--lb-space-3);font-size:17px}
/* Drei Fragen: gut lesbare weiße Karten auf Blau */
.fragen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lb-space-2);max-width:820px;margin:var(--lb-space-4) auto 0;counter-reset:f;text-align:left}
.fragen li{counter-increment:f;display:flex;align-items:center;gap:var(--lb-space-2);background:var(--lb-surface);color:var(--lb-blue);border-radius:var(--lb-web-radius-field);padding:var(--lb-space-3) var(--lb-space-3);font-size:18px;font-weight:600;line-height:1.3}
.fragen li::before{content:counter(f);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lb-green-light);color:var(--lb-green-dark);font-size:16px;font-weight:600}
@media (max-width:760px){.fragen{grid-template-columns:1fr}}
.final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lb-space-2);margin-top:var(--lb-space-5)}

/* Fuß */
.fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--lb-space-2);padding:0 0 var(--lb-space-6);font-size:12px;font-weight:500;color:var(--lb-label)}
.fuss a{color:var(--lb-blue-muted)}

/* Responsiv */
@media (max-width:900px){
  .hero,.leistungen,.profil{grid-template-columns:1fr}
  .hero{gap:var(--lb-space-5)}
  .portrait{max-width:240px}
  .cta-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .frame{width:calc(100% - 28px)}
  .kopf nav a:not(.btn){display:none}
  .hero{padding-top:var(--lb-space-5)}
  .hero .badge{font-size:11px;letter-spacing:.08em}
  .lead{font-size:17px}
  .schnitt-karte .schnitt{padding:var(--lb-space-2) var(--lb-space-1) 0}
  .card{padding:var(--lb-space-4)}
  .final-panel{padding:var(--lb-space-6) var(--lb-space-4)}
  .actions .btn,.final-actions .btn{width:100%}
  .band{padding-top:var(--lb-space-6)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Name des Ansprechpartners im Kopfbereich und beim Kontakt */
.ansprechpartner{margin-top:var(--lb-space-3);font-size:19px;color:var(--lb-text-muted)}
.ansprechpartner strong{color:var(--lb-blue);font-weight:600}
.final-name{margin-top:var(--lb-space-4);font-size:18px;font-weight:600;color:var(--lb-on-dark)}
.final-name+.final-actions{margin-top:var(--lb-space-2)}

/* Über mich: ein Schriftgrad für den ganzen Text */
.profil-text .ueber-text{font-size:17px;line-height:var(--lb-lh-body);color:var(--lb-text)}

/* Porträtfoto */
img.portrait{display:block;width:100%;height:auto;object-fit:cover}

/* Etiketten besser lesbar (einheitlich für alle Etiketten) */
.badge{font-size:14px;letter-spacing:.08em;padding:6px 16px}
.badge-klein{font-size:12.5px;padding:5px 13px}
@media (max-width:640px){.hero .badge{font-size:12.5px;letter-spacing:.06em}}

/* Hausgrafik oben rechts */
.hausgrafik-karte{padding:var(--lb-space-3);margin:0}
.hausgrafik-karte svg{display:block;width:100%;height:auto}
/* Trennlinie zwischen den Abschnitten (Wunsch Praxisinhaber, Abweichung von DESIGN_SYSTEM Kap. 0: Web ohne Linien) */
.band>.frame{border-top:0;padding-top:0}
.band>.frame::before{content:"";display:block;width:66%;height:3px;margin:0 auto var(--lb-space-6);background:var(--lb-green);border-radius:2px}
.band{padding-top:var(--lb-space-6)}
/* Kontrast: Fußzeile in Textfarbe gedämpft statt Label-Grau (2,9 : 1 -> 7,5 : 1) */
.fuss{color:var(--lb-text-muted)}

/* Zeilenumbrüche (auch mobil): Überschriften ausgeglichen, Fließtext ohne einzelnes Wort in der letzten Zeile */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.nw{white-space:nowrap}

/* Ansprechpartner-Zeile in derselben Größe wie der Einleitungstext */
@media (max-width:640px){.ansprechpartner{font-size:17px}}
/* Mobil: Name in eigener Zeile */
@media (max-width:640px){.ansprechpartner strong{display:block;white-space:nowrap}}
/* Mobil: Hausgrafik etwas größer (weniger Innenabstand, Karte etwas breiter) */
@media (max-width:640px){.hausgrafik-karte{padding:6px;margin-inline:-6px}}

/* Unterseiten Impressum/Datenschutz (Build build_live.py) */
.rechtstext{padding:var(--lb-space-7) 0}
.rechtstext .card{max-width:760px;margin-inline:auto;padding:clamp(24px,5vw,48px)}
.rechtstext h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.018em;margin-bottom:var(--lb-space-4)}
.rechtstext h2{font-size:21px;margin:var(--lb-space-5) 0 var(--lb-space-2)}
.rechtstext p,.rechtstext ul{margin:0 0 var(--lb-space-3);font-size:16.5px}
.rechtstext ul{padding-left:1.2em}
.rechtstext li{margin-bottom:var(--lb-space-1)}
.rechtstext a{color:var(--lb-blue);text-decoration:underline;text-underline-offset:2px}
.rechtstext a{overflow-wrap:anywhere}