@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/karla-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/karla-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/karla-latin-700-normal.woff2') format('woff2');}
/* ===========================================================
   Kinderarztpraxis Dr. Sachse Mutzschen
   Zentrales Stylesheet
   =========================================================== */


:root{
  --bg:            #FBF9F5;
  --bg-alt:        #F1EEE6;
  --ink:           #24312C;
  --ink-soft:      #56645D;
  --sage:          #52735F;
  --sage-dark:     #3C5747;
  --gold:          #C68A2E;
  --line:          #DFD9C9;
  --white:         #FFFFFF;
  --max-w:         1040px;
  --radius:        3px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--sage-dark);
  line-height: 1.2;
  margin: 0 0 .5em;
}

h1{ font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; }
h2{ font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
h3{ font-size: 1.15rem; }

p{ max-width: none; }

a{ color: var(--sage-dark); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover{ color: var(--gold); }

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

/* ---------- Header / Navigation ---------- */

.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 24px;
}

.logo-link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color: var(--ink);
}

.logo-mark{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--sage);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem;
  flex-shrink:0;
}

.logo-text{
  font-family:'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sage-dark);
  line-height:1.2;
}
.logo-text span{
  display:block;
  font-family:'Karla', sans-serif;
  font-size:.78rem;
  font-weight:400;
  color: var(--ink-soft);
}

nav.main-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: 6px 22px;
  margin:0; padding:0;
}

nav.main-nav a{
  text-decoration:none;
  color: var(--ink);
  font-size: .97rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current="page"]{
  border-bottom-color: var(--gold);
  color: var(--sage-dark);
}

.nav-toggle{ display:none; }

@media (max-width: 760px){
  .header-inner{ flex-wrap:wrap; }
  nav.main-nav ul{ gap: 4px 16px; font-size:.9rem; }
}

/* ---------- Hero ---------- */

.hero{
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow{
  color: var(--gold);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .6em;
}
.hero p.lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: none;
}

.hero-quickinfo{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.quick-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.quick-card h3{
  margin-bottom:.3em;
  font-size: .95rem;
  text-transform:none;
  color: var(--ink-soft);
  font-family:'Karla',sans-serif;
  font-weight:700;
}
.quick-card p, .quick-card a{
  margin:0;
  font-size: 1.02rem;
}

/* ---------- Section blocks ---------- */

section{ padding: 52px 0; }
section + section{ border-top: 1px solid var(--line); }

.section-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- Tables (Öffnungszeiten / Schließzeiten) ---------- */

table.info-table{
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  margin: 18px 0;
}
table.info-table th, table.info-table td{
  text-align:left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
table.info-table th{
  width: 42%;
  font-weight:700;
  color: var(--sage-dark);
}

.note-box{
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin: 18px 0;
  max-width: none;
}

/* ---------- Cards / lists ---------- */

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 20px;
  margin-top: 24px;
}
.card{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.download-list{
  list-style:none;
  margin: 20px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.download-list li{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--white);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.download-list a{ font-weight:700; }

.placeholder{
  border: 1px dashed var(--line);
  background: var(--bg-alt);
  padding: 20px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Aktuelles ---------- */

.news-item{ padding: 18px 0; }
.news-item + .news-item{ border-top: 1px solid var(--line); }
.news-date{ color: var(--gold); font-weight:700; font-size:.88rem; }

/* ---------- Footer ---------- */

footer.site-footer{
  background: var(--sage-dark);
  color: #EDF1EE;
  margin-top: 40px;
}
footer.site-footer .container{
  padding: 36px 24px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
}
footer.site-footer a{ color:#fff; text-decoration-color: var(--gold); }
footer.site-footer .foot-links{ display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
footer.site-footer small{ opacity:.75; }

/* ---------- Buttons / forms (admin) ---------- */

.btn{
  display:inline-block;
  background: var(--sage-dark);
  color:#fff !important;
  padding: 10px 20px;
  border-radius: var(--radius);
  text-decoration:none;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Karla',sans-serif;
  font-size:.95rem;
}
.btn:hover{ background: var(--gold); }

.form-field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; max-width:480px; }
.form-field input, .form-field textarea{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size:1rem;
}
.form-field label{ font-weight:700; font-size:.9rem; }

.alert{ padding:12px 16px; border-radius:var(--radius); margin-bottom:18px; }
.alert-error{ background:#FBE7E4; color:#7A2A20; border:1px solid #E9B8AF; }
.alert-success{ background:#E6F0E9; color:#2B4A38; border:1px solid #BFDBC9; }

/* Header in Logo-Grün, größeres Logo */
.site-header{background:#E9EFD2;border-bottom:3px solid #ABBE62}
.header-inner{padding:10px 24px}
.logo-link img{height:150px!important;width:auto}
@media (max-width:900px){.logo-link img{height:110px!important}}
@media (max-width:700px){.logo-link img{height:84px!important}}
/* Team: runde Fotos mit Bildunterschrift */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:40px 28px}
.team-member{margin:0;text-align:center}
.team-photo{display:block;width:180px;height:180px;margin:0 auto 14px;border-radius:50%;overflow:hidden;background:var(--sage);text-decoration:none}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.team-initials{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600}
.team-member figcaption strong{display:block;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--sage-dark)}
.team-member figcaption span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.team-photo:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Team-Unterseiten: rundes Porträt mit Untertitel */
.team-portrait{margin:0 auto 28px;text-align:center;max-width:320px}
.team-portrait img{width:220px;height:220px;border-radius:50%;object-fit:cover;object-position:center 20%;display:block;margin:0 auto 10px}
.team-portrait figcaption strong{display:block;font-family:'Fraunces',serif;color:var(--sage-dark)}
.team-portrait figcaption span{display:block;font-size:.9rem;color:var(--ink-soft)}

/* Externe Links + Hinweisfenster */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.ext-link::after{content:"\2197";font-size:.8em;margin-left:.25em;color:var(--gold)}
.ext-dialog{border:1px solid var(--line);border-radius:6px;padding:28px 30px;max-width:460px;width:calc(100% - 32px);background:var(--white);color:var(--ink);box-shadow:0 12px 40px rgba(36,49,44,.25)}
.ext-dialog::backdrop{background:rgba(36,49,44,.45)}
.ext-dialog h2{font-size:1.25rem;margin:0 0 .6em;color:var(--sage-dark)}
.ext-dialog p{margin:0 0 .8em}
.ext-target{background:var(--bg-alt);padding:8px 12px;border-radius:3px;word-break:break-all}
.ext-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.ext-btn{font:inherit;font-weight:600;padding:9px 20px;border-radius:3px;border:1px solid var(--sage);background:var(--sage);color:#fff;cursor:pointer}
.ext-btn:hover{background:var(--sage-dark)}
.ext-btn-secondary{background:transparent;color:var(--sage-dark)}
.ext-btn-secondary:hover{background:var(--bg-alt)}
.ext-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Admin: Formularfelder volle Breite, Link-Werkzeugleiste */
.form-field{max-width:none}
.editor-bar{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.editor-bar button{font:inherit;padding:5px 12px;border:1px solid var(--line);background:var(--white);border-radius:3px;cursor:pointer}
.editor-bar button:hover{background:var(--bg-alt)}
.editor-bar small{color:var(--ink-soft)}
.download-list .dl-desc{display:block;font-size:.9rem;color:var(--ink-soft)}

/* Dezente Farbflächen: Überschriftsbereich und Inhalt */
body{background:#F9FBF3}
.hero{background:#EEF3DC;border-bottom:1px solid #DCE4BF}

/* Kompakter Überschriftsbereich */
.hero h1{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .15em;line-height:1.2}
.hero p.lede{font-size:1rem;margin:0}
.hero + section{padding-top:28px}
section{padding-bottom:36px}

/* Marienkäfer sitzt auf dem gewählten / überfahrenen Menüpunkt */
nav.main-nav a{position:relative}
nav.main-nav a::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  width:30px;height:30px;
  margin-bottom:-9px;
  transform:translateX(-50%) scale(.6);
  background:url("img/Marienkaefer.png") center/contain no-repeat;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .2s ease;
}
nav.main-nav a[aria-current="page"]::before,
nav.main-nav a:hover::before,
nav.main-nav a:focus-visible::before{
  opacity:1;
  transform:translateX(-50%) scale(1);
}
@media (max-width:760px){ nav.main-nav a::before{display:none} }
@media (prefers-reduced-motion:reduce){ nav.main-nav a::before{transition:none} }

/* Öffnungszeiten / Schließzeiten / Kontakt: farbig hinterlegt */
#Oeffnungszeiten, #Schliesszeiten, #Kontakt, .praxisinfo{background:#E9EFD2}
#Oeffnungszeiten, #Schliesszeiten, #Kontakt{border-top:1px solid #D3DDB0}
.praxisinfo{border-top:3px solid #ABBE62;padding:36px 0 40px;margin-top:40px}
.praxisinfo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.praxisinfo h2{font-size:1.25rem;margin:0 0 .5em;color:var(--sage-dark)}
.praxisinfo .info-table{margin:0 0 12px}
.praxisinfo .info-table th,.praxisinfo .info-table td{border-bottom-color:#D3DDB0}
.praxisinfo p{margin:0 0 .8em}
.praxisinfo + footer.site-footer{margin-top:0}

/* Menüschrift im Header: skaliert mit der Fensterbreite, bricht am Desktop nie um */
nav.main-nav a{font-size:clamp(.85rem,1.45vw,1.05rem);white-space:nowrap}
nav.main-nav ul{gap:8px clamp(12px,1.8vw,24px);flex-wrap:nowrap}
.header-inner{gap:clamp(12px,2vw,24px)}
.logo-link{flex-shrink:0}
.logo-link img{height:clamp(96px,12.5vw,150px)!important}
@media (max-width:900px){
  nav.main-nav a{font-size:clamp(.78rem,1.6vw,.9rem)}
  nav.main-nav ul{gap:8px clamp(8px,1.6vw,14px)}
  .logo-link img{height:96px!important}
}
/* nur auf dem Handy: Logo oben, Menü darunter */
@media (max-width:640px){
  .header-inner{flex-wrap:wrap;justify-content:center}
  nav.main-nav ul{flex-wrap:wrap;justify-content:center}
  nav.main-nav a{font-size:.95rem}
  .logo-link img{height:80px!important}
}

/* Einleitungstext Startseite: ein Textblock, eine Schrift */
.hero p.intro{font-family:inherit;font-size:1.1rem;font-weight:400;line-height:1.65;color:var(--ink);max-width:none;margin:0}