/* Lokal gehostete Schriften, SIL Open Font License 1.1 (siehe fonts/OFL-*.txt) – nur Latin-Subset */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-serif-display-400.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/outfit-variable.woff2) format("woff2")}

:root{--navy:#1d4489;--navy-d:#163566;--green:#3a8f4f;--green-l:#8dbf9a;--bg:#fff;--soft:#f3f6fb;--text:#1b2a44}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Outfit,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--navy)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* Kopfleiste mit Hamburger-Menü – nur mobil sichtbar (siehe Media Query) */
header.bar{display:none;position:sticky;top:0;background:#fff;border-bottom:3px solid var(--navy);z-index:10}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:12px;height:40px}
.burger{width:44px;height:44px;border:0;background:none;display:grid;place-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:24px;height:3px;border-radius:2px;background:var(--navy);transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:3px solid var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.08)}
#menu.open{display:block}
#menu a{display:block;padding:14px 20px;text-decoration:none;font-weight:500;color:var(--navy);border-top:1px solid #dfe5ef}
[id]{scroll-margin-top:70px}

/* Startbereich */
/* --hero-img wird im Template gesetzt (Seiten-Medien oder Standardfoto); der weiße Verlauf liegt per CSS darüber */
.hero{position:relative;padding:80px 0 100px;background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.8) 45%,#fff 80%),var(--hero-img) left center/cover no-repeat #fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:110px 1fr auto;gap:40px;align-items:center}
.hero h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:clamp(2.4rem,5vw,3.8rem);color:var(--navy);line-height:1.05}
.hero h2{font-weight:500;font-size:clamp(1.3rem,3vw,2rem);color:var(--navy);margin:.4em 0 .8em}
.hero hr{border:0;height:3px;background:var(--green);max-width:640px;margin:20px 0 24px}
.hero p{max-width:560px;font-size:1.35rem;font-weight:500;color:var(--navy)}
.dipl{list-style:none;font-size:1.15rem;font-weight:600;color:var(--navy)}
.dipl li{padding:3px 0}
.open{color:var(--navy)}
.open h3{font-size:1.4rem;margin-bottom:10px}
.open h3.sub{margin:28px 0 4px}
.open table{border-collapse:collapse;font-size:1.1rem;width:100%}
.open td{padding:10px 0;border-bottom:1px solid #dfe5ef}
.open td:last-child{padding-left:28px;text-align:right;font-weight:600}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px}

/* Abschnitte */
section{padding:80px 0}
.title{font-family:"DM Serif Display",serif;font-weight:400;font-size:2.4rem;line-height:1.1;color:var(--navy);margin-bottom:24px}
#hinweise{background:var(--navy);color:#fff;padding:16px 0 40px}
#hinweise .title{color:#fff}
#leistungen{padding:40px 0}

/* Aktuelle Hinweise (Box + mobiles Overlay) */
.news{background:#fff;color:var(--text);border-radius:6px;padding:20px 24px;margin-bottom:40px}
.news h2,#news-dialog h2{font-size:1.3rem;color:var(--navy);margin-bottom:8px}
.news p+p,#news-dialog p+p{margin-top:6px}
#news-dialog{border:0;border-radius:10px;padding:24px;width:calc(100% - 32px);max-width:420px;margin:auto;color:var(--text);font-family:inherit}
#news-dialog::backdrop{background:rgba(22,53,102,.6)}
#news-dialog .ok{display:block;width:100%;margin-top:20px;padding:12px;border:0;border-radius:6px;background:var(--navy);color:#fff;font:600 1rem Outfit,sans-serif;cursor:pointer}

/* Bitte beachten */
.note{background:rgba(255,255,255,.08);padding:20px;border-radius:6px}
.note li{margin:6px 0 6px 18px}
.note a{color:#fff}
.warn{margin-top:8px;padding:10px 14px;border-left:4px solid #f0a33a;background:rgba(240,163,58,.15);border-radius:4px}
.warn b,.warn strong{color:#ffc56b}

/* Leistungen */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:var(--soft);border-radius:14px;padding:28px}
.card h3{color:var(--navy);margin-bottom:6px}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact p+p{margin-top:16px}
.map img{display:block;width:100%;height:auto;border-radius:14px;border:2px solid var(--navy)}
.map figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px}
.map figcaption a{font-weight:600;text-decoration:none}
.map figcaption small{font-size:.75rem;opacity:.7}
.map figcaption small a{font-weight:400;color:inherit}

/* Footer */
footer{background:var(--navy);color:#fff;padding:40px 0 30px;position:relative}
footer small{display:block;text-align:center;opacity:.7}
footer small+small{margin-top:12px}
footer a{color:#fff}

/* Unterseiten (Impressum, Datenschutz) */
.top{padding:30px 0;border-bottom:1px solid #dfe5ef}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .home{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"DM Serif Display",serif;font-size:1.3rem;color:var(--navy)}
.top .home img{width:14px;height:46px}
.back{font-weight:500;text-decoration:none}
.back:hover{color:var(--green)}
.legal{max-width:800px;padding-top:50px;padding-bottom:70px}
.legal h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:2.6rem;line-height:1.1;color:var(--navy);margin-bottom:12px}
.legal h2,.legal h3{font-size:1.3rem;color:var(--navy);margin:36px 0 10px}
.legal p+p,.legal p+ul,.legal ul+p{margin-top:12px}
.legal ul{padding-left:22px}
/* Platzhalter, die noch ergänzt werden müssen */
.todo{background:#fff3cd;padding:0 4px;border-radius:3px}

/* Wartungsseite */
.maint{min-height:calc(100vh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 16px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.92)),var(--hero-img,none) center/cover no-repeat}
.maint-card{display:flex;gap:32px;align-items:flex-start;max-width:640px;background:#fff;border-radius:14px;padding:36px;box-shadow:0 10px 40px rgba(29,68,137,.12)}
.maint-card img{flex:none}
.maint h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:2.2rem;line-height:1.1;color:var(--navy)}
.maint .fach{font-size:1.2rem;font-weight:500;color:var(--navy);margin:6px 0 20px}
.maint h2{font-size:1.3rem;color:var(--green);margin-bottom:6px}
.maint .open{margin-top:24px}
.maint .open h3{font-size:1.15rem}
.maint .open table{font-size:1rem}
.maint .open a{color:var(--navy);text-decoration:none}

@media(max-width:800px){
  .maint-card{flex-direction:column;align-items:center;text-align:center;padding:24px}
  .maint-card img{width:28px;height:auto}
  .maint .open{text-align:left}
  /* header.bar{display:block} – Menü derzeit ausgeblendet */
  .hero .wrap,.contact{grid-template-columns:1fr}
  .hero .logo{display:none}
  .hero{padding:40px 0 80px;background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.92) 60%,#fff),var(--hero-img) center top/cover no-repeat #fff}
  .hero .wrap{gap:28px}
  /* E-Mail unter die Bezeichnung, damit die lange Adresse nicht umbricht */
  .open table.mail td{display:block;text-align:left;padding-left:0}
  .open table.mail td:first-child{border-bottom:0;padding-bottom:0}
  section,#kontakt{padding:40px 0}
  .grid{gap:14px}
  .card{padding:20px}
}