/*
Theme Name: Praxis Scherzler
Theme URI: https://praxis-scherzler.de/
Author: Dr. Andreas Scherzler
Description: Schlankes Theme fuer die Hausarztpraxis am Heusweg. Ohne Page-Builder,
  ohne externe Abhaengigkeiten. Die Aktuelles-Meldungen kommen aus den WordPress-
  Beitraegen, die Schliesszeiten aus assets/hinweise.js.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: praxis-scherzler
*/

/* Schriften. Die WOFF2-Dateien muessen unter assets/fonts/ liegen.
   Kein Aufruf an Google Fonts. */
@font-face{font-family:"Newsreader";src:url("assets/fonts/Newsreader-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("assets/fonts/Newsreader-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("assets/fonts/Newsreader-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ---------------------------------------------------------------
   Gestaltungstokens
   Farbwelt: Hamburger Altbau – Kalkputz, dunkelgrüne Haustür, Messing
   --------------------------------------------------------------- */
:root{
  --kalk:        #F3F4F0;
  --kalk-tief:   #E7E9E2;
  --tuergruen:   #1C3A2E;
  --gruen-hell:  #2E5545;
  --messing:     #A8843C;
  --tinte:       #161A18;
  --grau:        #5E6660;
  --weiss:       #FFFFFF;
  --signal:      #8C2F1F;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  --spur: 0.14em;
  --rand: 3px;
  --breite: 1120px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:96px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--kalk);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0;letter-spacing:-0.01em;}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}
a{color:inherit;}

:focus-visible{outline:var(--rand) solid var(--messing);outline-offset:3px;}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px;}

/* Augenbrauen-Label: markiert Abschnittsart, nicht Dekoration */
.eyebrow{
  font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);
  font-weight:700;color:var(--messing);margin:0 0 0.9rem;
  display:flex;align-items:center;gap:0.7rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:0.35;max-width:120px;}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--tuergruen);color:var(--weiss);
  padding:12px 20px;z-index:200;
}
.skip:focus{left:0;}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(243,244,240,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--kalk-tief);
}
.kopf-innen{
  max-width:var(--breite);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;
}
.marke{
  text-decoration:none;line-height:1.05;margin-right:auto;
  display:flex;align-items:center;gap:14px;
}
/* Signet steht direkt im Markup (header.php / footer.php). Das SVG faerbt sich
   ueber currentColor und braucht daher keine eigene Datei. */
.marke-logo{
  width:32px;height:41px;flex:none;
  color:var(--tuergruen);
  display:block;
}
.marke b{display:block;font-family:var(--serif);font-size:1.38rem;font-weight:600;white-space:nowrap;}
.marke-text span{
  display:block;font-size:0.63rem;text-transform:uppercase;
  letter-spacing:var(--spur);color:var(--grau);font-weight:700;
}
.nav{display:flex;gap:26px;}
.nav a{
  text-decoration:none;font-size:0.9rem;font-weight:700;padding:4px 0;
  border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
}
.nav a:hover{border-bottom-color:var(--messing);}
.tel-kopf{
  text-decoration:none;font-weight:700;font-size:0.95rem;white-space:nowrap;
  border-bottom:2px solid var(--kalk-tief);
}
.tel-kopf:hover{border-bottom-color:var(--tuergruen);}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  font-size:0.88rem;letter-spacing:0.03em;
  padding:13px 24px;border:2px solid var(--tuergruen);
  background:var(--tuergruen);color:var(--kalk);
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.btn:hover{background:var(--gruen-hell);border-color:var(--gruen-hell);}
.btn--linie{background:transparent;color:var(--tuergruen);}
.btn--linie:hover{background:var(--tuergruen);color:var(--kalk);}
.btn--hell{border-color:var(--kalk);background:var(--kalk);color:var(--tuergruen);}
.btn--hell:hover{background:transparent;color:var(--kalk);}

@media (max-width:900px){
  .nav{display:none;}
}
@media (max-width:520px){
  .tel-kopf{display:none;}
  .marke b{font-size:1.2rem;}
  .marke-text span{font-size:0.58rem;}
  .marke-logo{width:26px;height:33px;}
  .kopf-innen{gap:14px;}
  .btn{padding:12px 18px;}
}

/* ---------- Hinweisbalken für Schließzeiten ---------- */
.hinweisband{display:none;background:var(--signal);color:#FBF6F2;}
.hinweisband[data-aktiv]{display:block;}
.hinweisband[data-vorschau]{background:var(--kalk-tief);color:var(--tinte);border-bottom:1px solid #D8DCD2;}
.hinweisband-innen{
  max-width:var(--breite);margin:0 auto;padding:16px 24px;
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;font-size:0.95rem;
}
.hinweisband b{
  font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);
  white-space:nowrap;
}
.hinweisband a{color:inherit;font-weight:700;}

/* ---------- Hero ---------- */
.hero{padding:76px 0 60px;}
.hero-raster{display:grid;grid-template-columns:1.15fr 0.85fr;gap:64px;align-items:start;}
.hero p.lead{font-size:1.15rem;max-width:34em;color:var(--grau);margin-top:1.4rem;}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem;}

/* Signaturelement: Sprechstundenstatus in Echtzeit */
.status{
  background:var(--tuergruen);color:var(--kalk);
  padding:30px 30px 26px;position:relative;
}
.status::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--messing);
}
.status-kopf{
  display:flex;align-items:center;gap:10px;
  font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);
  font-weight:700;opacity:0.75;margin-bottom:14px;
}
.punkt{width:9px;height:9px;border-radius:50%;background:#7FB069;flex:none;}
.punkt[data-zu]{background:#C97B5A;}
.status-satz{font-family:var(--serif);font-size:1.55rem;line-height:1.2;margin:0 0 22px;}
.status-satz em{font-style:normal;color:#E9C97E;}
.zeiten{width:100%;border-collapse:collapse;font-size:0.9rem;}
.zeiten th,.zeiten td{
  text-align:left;padding:7px 0;border-bottom:1px solid rgba(243,244,240,0.16);
  font-weight:400;vertical-align:top;
}
.zeiten th{width:7em;padding-right:14px;font-weight:700;white-space:nowrap;}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:none;}
.zeiten tr[data-heute]{color:#E9C97E;}
.zeiten tr[data-heute] th{font-weight:700;}

@media (max-width:900px){
  .hero{padding:48px 0 40px;}
  .hero-raster{grid-template-columns:1fr;gap:38px;}
}

/* ---------- Notfallband ---------- */
.notfall{background:var(--kalk-tief);border-top:1px solid #D8DCD2;border-bottom:1px solid #D8DCD2;}
.notfall-innen{
  max-width:var(--breite);margin:0 auto;padding:18px 24px;
  display:flex;flex-wrap:wrap;gap:10px 36px;align-items:baseline;font-size:0.94rem;
}
.notfall b{font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);color:var(--signal);}
.notfall a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--messing);}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:82px 0;}
.abschnitt--rand{border-top:1px solid var(--kalk-tief);}
.abschnitt--dunkel{background:var(--tuergruen);color:var(--kalk);}
.abschnitt--dunkel .eyebrow{color:#E9C97E;}
.abschnitt--dunkel p{color:rgba(243,244,240,0.82);}
.kopfzeile{max-width:44em;margin-bottom:48px;}
.kopfzeile p{color:var(--grau);margin-top:1rem;}
.abschnitt--dunkel .kopfzeile p{color:rgba(243,244,240,0.82);}

/* Drei Säulen */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--kalk-tief);}
.saeule{
  background:var(--weiss);padding:36px 30px 32px;
  display:flex;flex-direction:column;text-decoration:none;
  transition:background .2s;
}
.saeule:hover{background:#FAFBF8;}
.saeule h3{margin-bottom:12px;}
.saeule p{font-size:0.95rem;color:var(--grau);flex:1;}
.saeule-mehr{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:var(--spur);color:var(--messing);}
@media (max-width:820px){.saeulen{grid-template-columns:1fr;}}

/* Leistungsverzeichnis */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.leistungen h3{
  font-family:var(--sans);font-size:0.74rem;text-transform:uppercase;
  letter-spacing:var(--spur);font-weight:700;color:var(--messing);
  padding-bottom:12px;border-bottom:1px solid var(--kalk-tief);margin-bottom:18px;
}
.leistungen ul{list-style:none;margin:0;padding:0;}
.leistungen li{margin-bottom:9px;}
.leistungen a{text-decoration:none;font-size:0.97rem;border-bottom:1px solid transparent;}
.leistungen a:hover{border-bottom-color:var(--messing);}
@media (max-width:820px){.leistungen{grid-template-columns:1fr;gap:32px;}}

/* Praxisprofil */
.profil{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;}
.bildfeld{
  aspect-ratio:4/5;background:var(--kalk-tief);
  display:flex;align-items:center;justify-content:center;
  color:var(--grau);font-size:0.78rem;text-transform:uppercase;letter-spacing:var(--spur);
  text-align:center;padding:20px;border:1px solid #D8DCD2;
}
@media (max-width:820px){.profil{grid-template-columns:1fr;gap:36px;}}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.person .bildfeld{aspect-ratio:5/6;margin-bottom:18px;}
.person h3{margin-bottom:4px;}
.person .rolle{font-size:0.78rem;text-transform:uppercase;letter-spacing:var(--spur);font-weight:700;color:var(--messing);margin-bottom:12px;}
.person p{font-size:0.95rem;color:var(--grau);}
@media (max-width:820px){.team{grid-template-columns:1fr;}}

/* Aktuelles – mit Datum, damit erkennbar bleibt, wie frisch die Meldung ist */
.meldungen{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(243,244,240,0.18);}
.meldung{background:var(--tuergruen);padding:30px 28px;}
.meldung time{
  display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);
  font-weight:700;color:#E9C97E;margin-bottom:10px;
}
.meldung h3{font-size:1.15rem;margin-bottom:8px;}
.meldung p{font-size:0.95rem;margin:0;}
@media (max-width:820px){.meldungen{grid-template-columns:1fr;}}

/* Anfahrt */
.kontakt{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;}
.kontaktliste{list-style:none;margin:0 0 28px;padding:0;}
.kontaktliste li{padding:16px 0;border-bottom:1px solid var(--kalk-tief);}
.kontaktliste li:first-child{border-top:1px solid var(--kalk-tief);}
.kontaktliste dt,.kontaktliste .label{
  font-size:0.72rem;text-transform:uppercase;letter-spacing:var(--spur);
  font-weight:700;color:var(--messing);margin-bottom:5px;
}
.kontaktliste a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--kalk-tief);}
.kontaktliste a:hover{border-bottom-color:var(--tuergruen);}
.karte{
  background:var(--kalk-tief);border:1px solid #D8DCD2;min-height:380px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 32px;
}
.karte p{max-width:32em;font-size:0.92rem;color:var(--grau);}
.karte iframe{width:100%;height:100%;min-height:380px;border:0;}
@media (max-width:820px){.kontakt{grid-template-columns:1fr;gap:36px;}}

/* Fußzeile */
.fuss{background:var(--tuergruen);color:rgba(243,244,240,0.8);padding:56px 0 30px;font-size:0.92rem;}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.fuss h4{
  font-family:var(--sans);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:var(--spur);color:#E9C97E;margin-bottom:14px;
}
.fuss ul{list-style:none;margin:0;padding:0;}
.fuss li{margin-bottom:8px;}
.fuss a{text-decoration:none;border-bottom:1px solid rgba(243,244,240,0.28);}
.fuss a:hover{border-bottom-color:#E9C97E;}
.fuss .marke b,.fuss .marke-text span{color:var(--kalk);}
.fuss .marke-logo{color:#E9C97E;width:38px;height:49px;}
.fuss-schluss{
  border-top:1px solid rgba(243,244,240,0.18);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:0.85rem;
}
@media (max-width:820px){.fuss-raster{grid-template-columns:1fr;gap:32px;}}

/* Einblenden beim Scrollen */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.sichtbar{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}