:root{
  --creme:#FDF4E2; --fairway:#2F5D3F; --fairway-d:#22452F; --gold:#EEC46F;
  --ocker:#A8843E; --ocker-text:#8A6A2C; --edge-feld:#A8843E; --ink:#2A2724; --line:#C9A45C; --card:#FFFDF7; --edge:#E8D9B4;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--ink);
  font-family:Karla,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.disp{font-family:"Archivo Black",Impact,sans-serif;letter-spacing:-.01em}
.scr{font-family:Yellowtail,"Brush Script MT",cursive}
a{color:var(--fairway);text-decoration:none}
a:hover{color:var(--ocker-text)}
h1,h2{margin:0}
p{margin:0}
.crest{width:100%;height:auto;display:block}

.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(18px,4vw,44px);border-bottom:2px dotted var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:inherit}
.brand .crest{width:50px}
.brand span span{display:block}
.brand .disp{font-size:16px;line-height:1}
.brand .scr{font-size:13px;color:var(--fairway);line-height:1.15}
nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);flex-wrap:wrap}
nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.btn{display:inline-block;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  padding:14px 28px;font-size:14px;min-height:44px;line-height:1.2}
.btn-g{background:var(--fairway);color:var(--creme);padding:11px 20px;font-size:12.5px;min-height:0}
.btn-g:hover{background:var(--fairway-d);color:var(--creme)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#E3B451;color:var(--ink)}
.btn-out{border:2px solid var(--creme);color:var(--creme);padding:12px 26px}
.btn-out:hover{background:var(--creme);color:var(--fairway)}
.btn-green{background:var(--fairway);color:var(--creme)}
.btn-green:hover{background:var(--fairway-d);color:var(--creme)}

.hero{background:var(--fairway);padding:clamp(40px,7vw,64px) clamp(18px,4vw,44px) clamp(48px,8vw,72px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:-8%;right:-8%;bottom:0;height:130px;
  background:var(--gold);opacity:.15;border-radius:50% 50% 0 0/100% 100% 0 0}
.hero-in{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.hero .crest{width:clamp(110px,18vw,150px)}
.hero h1{font-size:clamp(32px,6.4vw,58px);color:var(--creme);line-height:1.03;text-wrap:balance}
.hero p{font-size:clamp(16px,2.2vw,18px);color:#D5E3D6;max-width:600px}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,4vw,34px);padding:clamp(38px,6vw,54px) clamp(18px,4vw,44px)}
.steps .num{font-size:34px;color:var(--ocker-text)}
.steps .rule{border-top:2px dotted var(--line);margin:10px 0}
.steps h2{font-size:17px;text-transform:uppercase;margin-bottom:9px}
.steps p{font-size:15px;color:#4E4A40}

.event{background:var(--gold);padding:clamp(28px,4vw,40px) clamp(18px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.event h2{font-size:clamp(21px,3.4vw,29px);text-transform:uppercase;line-height:1.15}
.event p{font-size:15px;color:#5A4A22;margin-top:6px}

.tarife{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;padding:clamp(34px,5vw,46px) clamp(18px,4vw,44px)}
.card{border:1px solid var(--edge);background:var(--card);padding:22px;
  display:flex;flex-direction:column;gap:8px}
.lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ocker-text);font-weight:700}
.preis{font-size:27px;color:var(--fairway)}
.preis::after{content:" €";font-size:16px}
.card p{font-size:14px;color:#4E4A40}

footer{background:var(--ink);color:#9A9184;padding:28px clamp(18px,4vw,44px);
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;font-size:13px;line-height:1.7}
footer strong{color:var(--creme)}
footer a{color:var(--gold)}
.stars{display:flex;gap:7px}
.stars svg{width:12px;height:12px;fill:var(--gold)}

@media (max-width:640px){
  .bar{gap:12px}
  nav{width:100%;gap:14px;justify-content:flex-start}
  nav a:not(.btn){font-size:10.5px;letter-spacing:.14em}
  nav .btn-g{margin-left:auto}
  .event{flex-direction:column;align-items:flex-start}
}

.buchen{padding:clamp(38px,6vw,54px) clamp(18px,4vw,44px);border-top:2px dotted var(--line)}
.buchen h2{font-size:clamp(22px,3.6vw,30px);text-transform:uppercase}
.buchen>p{font-size:15px;color:#4E4A40;margin:9px 0 22px;max-width:520px}
.calendly-inline-widget{border:1px solid var(--edge);background:var(--card);
  min-width:320px;height:760px}


/* --- Sprungmarke fuer Tastatur und Screenreader --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);
  padding:10px 16px;font-weight:700;z-index:50}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* Auf den dunklen Flaechen muss der Ring hell sein, sonst verschwindet er. */
.hero :focus-visible{outline-color:var(--creme)}

/* --- Mitgliedsantrag --- */
.mitglied{padding:clamp(38px,6vw,54px) clamp(18px,4vw,44px);border-top:2px dotted var(--line)}
.mitglied h2{font-size:clamp(22px,3.6vw,30px);text-transform:uppercase}
.mitglied .lead{font-size:15px;color:#4E4A40;margin:9px 0 26px;max-width:560px}
.mitglied form{max-width:680px;border:1px solid var(--edge);background:var(--card);
  padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:16px}
.feld-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--ocker-text)}
.feld input,.feld select,.feld textarea{font:inherit;font-size:16px;color:var(--ink);
  background:var(--creme);border:1px solid var(--edge-feld);padding:11px 12px;
  border-radius:0;min-height:46px;width:100%}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--fairway);
  outline:3px solid var(--ink);outline-offset:1px}
.feld-check label{display:flex;align-items:flex-start;gap:10px;font-size:14px;
  color:#4E4A40;line-height:1.5;cursor:pointer}
.feld-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--fairway)}
.pflicht{font-size:12.5px;color:#7A7264}
.mitglied form .btn{align-self:flex-start;border:0;cursor:pointer;font-family:inherit}
.mitglied form .btn[disabled]{opacity:.55;cursor:progress}
.status{font-size:14.5px;line-height:1.5;min-height:1px}
.status.gut{color:var(--fairway);font-weight:700}
.status.schlecht{color:#9B2C22;font-weight:700}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Impressum und Datenschutz --- */
.recht{max-width:760px;margin:0 auto;padding:clamp(34px,5vw,52px) clamp(18px,4vw,44px)}
.recht h1{font-size:clamp(26px,4.4vw,38px);text-transform:uppercase;margin-bottom:22px}
.recht h2{font-size:16px;text-transform:uppercase;margin:30px 0 8px;color:var(--fairway)}
.recht p,.recht li{font-size:15px;color:#4E4A40;margin-bottom:10px}
.recht ul{margin:0 0 10px;padding-left:20px}
.recht .zurueck{display:inline-block;margin-top:32px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700}


/* --- Terminbuchung wird erst auf Klick geladen --- */
.buchen .einwilligung{border:1px solid var(--edge);background:var(--card);
  padding:clamp(20px,3vw,30px);max-width:680px}
.buchen .einwilligung p{font-size:14.5px;color:#4E4A40;margin-bottom:16px}
.buchen .einwilligung .btn{border:0;cursor:pointer;font-family:inherit}
.buchen .einwilligung .direktlink{margin-top:14px;margin-bottom:0}


/* --- Abschnittsueberschriften in den Rasterbereichen --- */
.steps .bereich,.tarife .bereich{grid-column:1/-1;font-size:clamp(22px,3.6vw,30px);
  text-transform:uppercase;margin-bottom:-6px}
.tarife .bereich-lead{grid-column:1/-1;font-size:15px;color:#4E4A40;margin:-2px 0 6px}
.zeitraum{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ocker-text);font-weight:700;margin-top:-4px}