:root{--bk-accent:var(--oliv);--bk-accent-dark:var(--oliv-deep);--bk-soft:var(--salbei-bg);
    --bk-ink:var(--ink);--bk-muted:var(--ink-70);--bk-line:var(--line);
    --bk-bg:var(--paper);--bk-surface:var(--paper);--bk-radius:0px;--bk-font-head:var(--font-head)}

/* Gemeinsame Bausteine für Terminbuchung (.bk) und Ratgeber (.rg).
   Farben/Typo kommen über --bk-* Tokens, die jeder Entwurf selbst setzt. */

/* ════════════ Terminbuchung ════════════ */
.bk{max-width:1000px;margin-inline:auto}
.bk__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bk__steps{display:flex;gap:0;margin-bottom:clamp(2rem,4vw,3rem);counter-reset:bk}
.bk__step{
  flex:1;display:flex;flex-direction:column;gap:.55rem;padding-top:1.1rem;
  border-top:3px solid var(--bk-line);color:var(--bk-muted);
  font-size:.9375rem;font-weight:600;transition:.35s ease;counter-increment:bk;min-width:0
}
.bk__step::before{
  content:counter(bk);width:26px;height:26px;border-radius:50%;
  background:var(--bk-line);color:var(--bk-bg);display:grid;place-items:center;
  font-size:.8125rem;font-weight:600;transition:.35s ease;flex:none
}
.bk__step.is-active{border-top-color:var(--bk-accent);color:var(--bk-ink)}
.bk__step.is-active::before{background:var(--bk-accent);color:#fff}
.bk__step.is-done{border-top-color:var(--bk-accent)}
.bk__step.is-done::before{background:var(--bk-soft);color:var(--bk-accent);content:"✓"}
.bk__step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.bk__step span{display:none}.bk__steps{gap:8px}}

.bk__panel[hidden]{display:none}
.bk__h{font-family:var(--bk-font-head);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.2;margin:0 0 .5rem;font-weight:600;letter-spacing:-.015em}
.bk__sub{color:var(--bk-muted);margin:0 0 1.8rem;font-size:1rem;max-width:62ch}

/* Anliegen */
.bk__opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.bk__opts{grid-template-columns:1fr}}
.bk__opt{
  display:flex;gap:1rem;align-items:flex-start;text-align:left;padding:1.25rem 1.3rem;
  border:2px solid var(--bk-line);border-radius:var(--bk-radius);background:var(--bk-surface);
  transition:.25s ease;cursor:pointer
}
.bk__opt:hover{border-color:var(--bk-accent)}
.bk__opt.is-sel{border-color:var(--bk-accent);background:var(--bk-soft)}
.bk__opt-ic{
  flex:none;width:38px;height:38px;border-radius:50%;background:transparent;
  border:2px solid var(--bk-line);color:#fff;display:grid;place-items:center;transition:.22s ease
}
.bk__opt-ic svg{opacity:0;transform:scale(.6);transition:.22s ease}
.bk__opt:hover .bk__opt-ic{border-color:var(--bk-accent)}
.bk__opt.is-sel .bk__opt-ic{background:var(--bk-accent);border-color:var(--bk-accent)}
.bk__opt.is-sel .bk__opt-ic svg{opacity:1;transform:none}
.bk__opt strong{display:block;font-size:1rem;line-height:1.3;font-family:var(--bk-font-head)}
.bk__opt span{display:block;font-size:.9375rem;color:var(--bk-muted);margin-top:.2rem;line-height:1.45}

/* Tage */
.bk__days{
  display:flex;gap:10px;overflow-x:auto;padding:4px 4px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch
}
.bk__days::-webkit-scrollbar{height:3px}
.bk__days::-webkit-scrollbar-track{background:var(--bk-line)}
.bk__days::-webkit-scrollbar-thumb{background:var(--bk-accent)}
.bk__day{
  flex:0 0 84px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.85rem .4rem;border:2px solid var(--bk-line);border-radius:var(--bk-radius);
  background:var(--bk-surface);transition:.22s ease;cursor:pointer
}
.bk__day:hover:not([disabled]){border-color:var(--bk-accent);transform:translateY(-2px)}
.bk__day.is-sel{border-color:var(--bk-accent);background:var(--bk-soft)}
.bk__day[disabled]{opacity:.4;cursor:not-allowed}
.bk__day-wt{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--bk-muted)}
.bk__day-d{font-family:var(--bk-font-head);font-size:1.5rem;font-weight:600;line-height:1.1;color:var(--bk-ink)}
.bk__day-m{font-size:.8125rem;color:var(--bk-muted)}
.bk__day-f{font-size:.8125rem;margin-top:.25rem;color:var(--bk-accent);font-weight:600}
.bk__day[disabled] .bk__day-f{color:var(--bk-muted)}

.bk__slothint{font-size:.9375rem;color:var(--bk-muted);margin:1.4rem 0 .4rem;font-weight:600}
.bk__slotgroup{font-size:.8125rem;letter-spacing:.01em;color:var(--bk-muted);font-weight:600;margin:1.2rem 0 .6rem}
.bk__slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.bk__slot{
  padding:.7rem .4rem;border:1.5px solid var(--bk-line);border-radius:calc(var(--bk-radius) - 4px);
  background:var(--bk-surface);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;
  transition:.18s ease;cursor:pointer
}
.bk__slot:hover:not([disabled]){border-color:var(--bk-accent);color:var(--bk-accent)}
.bk__slot.is-sel{background:var(--bk-accent);border-color:var(--bk-accent);color:#fff}
.bk__slot.is-busy{opacity:.32;cursor:not-allowed;text-decoration:line-through}

/* Formular */
.bk__form{display:grid;gap:1rem}
.bk__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.bk__row{grid-template-columns:1fr}}
.bk__field label{display:block;font-size:.9375rem;font-weight:600;letter-spacing:.01em;color:var(--bk-muted);margin-bottom:.4rem}
.bk__field input,.bk__field textarea{
  width:100%;padding:.85rem 1rem;border:2px solid var(--bk-line);border-radius:calc(var(--bk-radius) - 4px);
  background:var(--bk-surface);color:var(--bk-ink);font-size:1rem;transition:border-color .22s ease
}
.bk__field input:focus,.bk__field textarea:focus{outline:none;border-color:var(--bk-accent)}
.bk__field textarea{min-height:110px;resize:vertical}
.bk__check{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:var(--bk-muted);line-height:1.5}
.bk__check input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--bk-accent)}
.bk__check a{color:var(--bk-accent);text-decoration:underline;text-underline-offset:2px}

.bk__chosen{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding:1rem 1.2rem;
  background:var(--bk-soft);border-radius:var(--bk-radius);margin-bottom:1.6rem;font-size:.9375rem
}
.bk__chosen b{color:var(--bk-accent)}

/* Navigation */
.bk__nav{display:flex;gap:1rem;justify-content:space-between;margin-top:2rem;flex-wrap:wrap}
.bk__nav [hidden]{display:none}
.bk__next:disabled{opacity:.4;cursor:not-allowed}

/* Bestätigung */
.bk__done-ic{
  width:66px;height:66px;border-radius:50%;background:var(--bk-soft);color:var(--bk-accent);
  display:grid;place-items:center;margin-bottom:1.4rem
}
.bk__summary{
  border:2px solid var(--bk-line);border-radius:var(--bk-radius);padding:1.5rem;margin:1.8rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.5rem;font-size:1rem
}
@media(max-width:520px){.bk__summary{grid-template-columns:1fr;gap:.2rem 0}}
.bk__summary dt{font-size:.8125rem;letter-spacing:.1em;color:var(--bk-muted);font-weight:600;padding-top:.25rem}
.bk__summary dd{margin:0;font-weight:600}
@media(max-width:520px){.bk__summary dd{margin-bottom:.9rem}}

/* Öffnungszeiten-Hinweis */
.bk__oz{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.9375rem;
  padding:1.1rem 1.3rem;border-radius:var(--bk-radius);background:var(--bk-soft);margin-top:2rem
}
.bk__oz dt{color:var(--bk-muted);font-weight:600}
.bk__oz dd{margin:0}

/* ════════════ Ratgeber ════════════ */
.rg-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,3.5vw,3rem)}
.rg-chip{
  padding:.55rem 1.1rem;border:1.5px solid var(--bk-line);border-radius:100px;
  font-size:.9375rem;font-weight:600;transition:.22s ease;cursor:pointer;color:var(--bk-muted);background:transparent
}
.rg-chip:hover{border-color:var(--bk-accent);color:var(--bk-accent)}
.rg-chip.is-on{background:var(--bk-accent);border-color:var(--bk-accent);color:#fff}

.rg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:900px){.rg-grid{grid-template-columns:1fr}}
.rg-card{
  display:flex;flex-direction:column;background:var(--bk-surface);
  border:1px solid var(--bk-line);border-radius:var(--bk-radius);overflow:hidden;transition:.3s ease
}
.rg-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(20,20,18,.13);border-color:transparent}
.rg-card[hidden]{display:none}
.rg-card__img{overflow:hidden;position:relative}
.rg-card__img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;transition:transform .7s ease}
.rg-card:hover .rg-card__img img{transform:scale(1.05)}
.rg-card__kat{
  position:absolute;top:12px;left:12px;background:var(--bk-bg);color:var(--bk-accent);
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  padding:.32rem .8rem;border-radius:100px
}
.rg-card__b{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.rg-card__b :is(h2,h3){font-family:var(--bk-font-head);font-size:1.12rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.rg-card__b p{color:var(--bk-muted);font-size:.9375rem;margin:.6rem 0 1.2rem;line-height:1.55}
.rg-card__meta{margin-top:auto;display:flex;gap:1rem;font-size:.9375rem;color:var(--bk-muted);align-items:center}
.rg-card__meta b{color:var(--bk-accent);font-weight:600}

/* Artikel */
.rg-hero{position:relative;overflow:hidden}
.rg-hero img{width:100%;height:auto;aspect-ratio:21/8;object-fit:cover}
@media(max-width:760px){.rg-hero img{aspect-ratio:3/2}}
.rg-art{max-width:68ch;margin-inline:auto}
.rg-art__meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.9375rem;color:var(--bk-muted);margin-bottom:1.2rem;align-items:center}
.rg-art__meta b{color:var(--bk-accent);letter-spacing:.01em;font-size:.8125rem}
.rg-art__intro{font-size:var(--fs-lead);line-height:1.6;color:var(--bk-ink);margin:0 0 2.4rem;font-weight:500}
.rg-art h2{font-family:var(--bk-font-head);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.24;margin:2.8rem 0 .9rem;letter-spacing:-.015em}
.rg-art p{margin:0 0 1.2rem;color:var(--ink-70);line-height:1.7}
.rg-art ul{margin:1rem 0 1.4rem;padding:0;list-style:none;display:grid;gap:.7rem}
.rg-art li{padding-left:1.5rem;position:relative;line-height:1.65;opacity:.86}
.rg-art li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;background:var(--bk-accent);border-radius:50%}
.rg-art li b{opacity:1;font-weight:600}
.rg-fazit{
  position:relative;background:var(--bk-soft);
  padding:1.6rem 1.6rem 1.4rem;margin:2.8rem 0 0;border-radius:var(--bk-radius)
}
.rg-fazit::before{content:"";position:absolute;left:1.6rem;top:0;width:42px;height:2px;background:var(--bk-accent)}
.rg-fazit strong{display:block;font-size:.8125rem;letter-spacing:.01em;color:var(--oliv-dark);margin-bottom:.5rem}
.rg-fazit p{margin:0;font-size:1.02rem;line-height:1.62}
.rg-cta{
  margin-top:3rem;padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--bk-radius);
  background:var(--bk-soft);display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap
}
.rg-cta div{flex:1;min-width:240px}
.rg-cta :is(h2,h3){font-family:var(--bk-font-head);font-size:1.2rem;margin:0 0 .4rem}
.rg-cta p{margin:0;color:var(--bk-muted);font-size:.9375rem}
.rg-more{margin-top:clamp(3rem,6vw,5rem)}