/* Aesthetiker – gemeinsamer Stil (hell, schwarz-weiß, Grün nur als Akzent) */
:root{
  --bg:#f6f4ef; --paper:#ffffff; --ink:#121212; --ink2:#2b2a27; --muted:#6c6963; --faint:#9b978f;
  --line:#e3dfd6; --line2:#cdc8bd;
  --green:#3f6b3a; --green-hi:#33582f; --green-soft:#e7eee3;
  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --gut:16px; --max:1240px; --bar:60px;
  color-scheme:light;
}
@media (min-width:900px){:root{--gut:40px; --bar:68px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em}
p{margin:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}

/* Termin-Knopf: Grün heißt Termin */
.pill{display:inline-flex; align-items:center; justify-content:center; gap:.55em; height:46px; padding:0 22px; border-radius:999px; background:var(--green); color:#fff; font:600 15px/1 var(--sans); white-space:nowrap; transition:background .2s, transform .15s}
.pill:hover{background:var(--green-hi)}
.pill:active{transform:scale(.97)}
.pill[disabled]{background:#b9c4b5; cursor:not-allowed}
.pill-sm{height:38px; padding:0 18px; font-size:14px}
.pill-lg{height:56px; padding:0 30px; font-size:16.5px}
.link{display:inline-flex; gap:.4em; align-items:center; font:500 15px/1 var(--sans); padding:8px 0; border-bottom:1px solid var(--ink)}
.link:hover{color:var(--green); border-color:var(--green)}

/* Kopfleiste */
.bar{position:fixed; inset:0 0 auto; z-index:50; height:var(--bar); display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding-inline:var(--gut); background:var(--bg); border-bottom:1px solid transparent; transition:border-color .3s}
.bar.solid{border-color:var(--line)}
.logo{display:flex; align-items:center; gap:12px}
.logo .mono{font:400 28px/1 var(--serif)}
.logo .word{font:600 12px/1 var(--serif); font-variation-settings:"opsz" 28; letter-spacing:.34em; padding-left:12px; border-left:1px solid var(--line2); height:20px; display:flex; align-items:center}
.nav{display:none}
.bar-act{display:flex; align-items:center; gap:10px}
.menu-btn{width:42px; height:42px; display:grid; place-content:center; gap:7px}
.menu-btn span:not(.sr){display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .3s}
.menu-open .menu-btn span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}
@media (max-width:359px){.logo .word{display:none}}
@media (min-width:900px){
  .bar{grid-template-columns:1fr auto 1fr}
  .nav{display:flex; gap:32px}
  .nav a{font:500 14px/1 var(--sans); color:var(--muted); padding:10px 0; position:relative}
  .nav a::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1.5px; background:var(--green); transform:scaleX(0); transition:transform .3s}
  .nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)}
  .bar-act{justify-self:end}
  .menu-btn{display:none}
  .logo .word{font-size:13px}
}
.menu{position:fixed; inset:0; z-index:40; background:var(--bg); padding:calc(var(--bar) + 24px) var(--gut) 28px; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s}
.menu-open .menu{opacity:1; visibility:visible; transition:opacity .3s}
.menu-open{overflow:hidden}
.menu ol{list-style:none; margin:0; padding:0}
.menu li a{display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font:400 clamp(32px,9.5vw,42px)/1.1 var(--serif)}
.menu li a small{font:500 12px/1 var(--sans); color:var(--faint)}
.menu-foot{margin-top:auto; display:grid; gap:16px}
.menu-foot p{color:var(--muted); font-size:14px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}