/* ============================================================
   Ergänzungen: Unterseiten, Cookie-Hinweis, Bedienhilfen
   Wird zusätzlich zu site.css geladen.
   ============================================================ */

/* ---------- Unterseiten und Fließtext ---------- */
.unterseite-kopf{background:var(--ton);border-bottom:1px solid var(--linie);padding-block:clamp(40px,6vw,72px)}
.unterseite-kopf .titel{font-size:clamp(30px,4.4vw,52px);margin-bottom:var(--s3)}
.fliesstext{max-width:70ch}
.fliesstext h2{font-size:clamp(23px,2.8vw,32px);margin:var(--s6) 0 var(--s2)}
.fliesstext h3{font-size:clamp(19px,2.2vw,24px);margin:var(--s5) 0 var(--s1)}
.fliesstext p{margin:0 0 1.05em}
.fliesstext ul,.fliesstext ol{margin:0 0 1.2em;padding-left:1.3em}
.fliesstext li{margin-bottom:.4em}
.fliesstext a{color:var(--gruen-d);text-underline-offset:3px}
.fliesstext blockquote{margin:var(--s4) 0;padding-left:var(--s4);border-left:2px solid var(--gruen);font-family:var(--display);font-style:italic;font-size:1.15em;color:var(--wald-2,var(--wald))}
.fliesstext table{width:100%;border-collapse:collapse;margin:var(--s4) 0}
.fliesstext th,.fliesstext td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie)}
.beitrag-bild{margin:0 0 var(--s5)}
.beitrag-bild img{width:100%;border-radius:var(--r)}
.rueckmeldung.warnung{background:#FBEFE0;color:#8E5610}
.karte-platz{cursor:default}
.karte-platz img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- Cookie-Hinweis ---------- */
.cc-huelle{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;
  background:rgba(20,28,14,.5);backdrop-filter:blur(2px);padding:16px}
.cc-huelle[hidden]{display:none}
.cc-box{background:var(--weiss);border-radius:var(--r);box-shadow:var(--e3);
  width:min(680px,100%);padding:clamp(20px,3vw,32px);max-height:88vh;overflow:auto}
.cc-box h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:var(--s2)}
.cc-box p{font-size:15px;color:var(--text-2);margin:0 0 var(--s3)}
.cc-gruppen{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.cc-gruppe{display:flex;gap:12px;align-items:flex-start;background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--r-s);padding:12px 14px;font-size:14.5px;line-height:1.5;cursor:pointer}
.cc-gruppe input{margin-top:3px;width:18px;height:18px;accent-color:var(--gruen);flex:none}
.cc-gruppe b{display:block;color:var(--wald);font-weight:700}
.cc-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cc-knoepfe .btn{flex:1 1 auto;justify-content:center}
.cc-fuss{margin:var(--s3) 0 0;font-size:13.5px}
.cc-fuss a{color:var(--gruen-d)}
.cc-neu{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--weiss);border:1px solid var(--linie);
  border-radius:99px;padding:9px 16px;font:600 13px/1 var(--ui);color:var(--text);cursor:pointer;box-shadow:var(--e1)}
.cc-neu:hover{border-color:var(--gruen);color:var(--gruen-d)}
.cc-neu[hidden]{display:none}
@media (max-width:900px){.cc-neu{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ---------- Bedienhilfen ---------- */
.a11y-knopf{position:fixed;right:18px;bottom:74px;z-index:66;width:46px;height:46px;border-radius:50%;
  background:var(--wald);border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--e2)}
.a11y-knopf svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.a11y-knopf:hover{background:var(--gruen-d)}
@media (max-width:900px){.a11y-knopf{bottom:calc(132px + env(safe-area-inset-bottom,0px))}}
.a11y-panel{position:fixed;right:18px;bottom:130px;z-index:67;width:min(300px,calc(100vw - 36px));
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--e3);padding:var(--s4)}
.a11y-panel[hidden]{display:none}
@media (max-width:900px){.a11y-panel{bottom:calc(188px + env(safe-area-inset-bottom,0px))}}
.a11y-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.a11y-kopf strong{font-family:var(--display);font-size:18px;color:var(--wald);font-weight:400}
.a11y-kopf button{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--text-2)}
.a11y-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:var(--s3);font-size:14.5px}
.a11y-tasten{display:flex;gap:6px}
.a11y-tasten button{width:38px;height:34px;border:1px solid var(--linie);background:var(--papier);border-radius:var(--r-xs);
  cursor:pointer;font-weight:700;color:var(--wald)}
.a11y-tasten button:hover{border-color:var(--gruen);background:var(--gruen-h)}
.a11y-schalter{display:flex;gap:11px;align-items:center;padding:8px 0;font-size:14.5px;cursor:pointer}
.a11y-schalter input{width:18px;height:18px;accent-color:var(--gruen)}
.a11y-zuruecksetzen{margin-top:var(--s2);width:100%;padding:10px;border:1px solid var(--linie);background:var(--papier);
  border-radius:var(--r-s);cursor:pointer;font:600 14px/1 var(--ui);color:var(--text)}
.a11y-zuruecksetzen:hover{border-color:var(--gruen);color:var(--gruen-d)}
.a11y-fuss{margin:var(--s2) 0 0;font-size:12.5px;color:var(--text-2)}

/* Wirkung der Bedienhilfen */
:root{--a11y-schrift:1}
html[style*="--a11y-schrift"] body{font-size:calc(var(--grundschrift,17px) * var(--a11y-schrift))}
.a11y-lesbar body,.a11y-lesbar h1,.a11y-lesbar h2,.a11y-lesbar h3,.a11y-lesbar h4{font-family:var(--ui) !important;letter-spacing:.01em}
.a11y-links a{text-decoration:underline !important;text-underline-offset:3px}
.a11y-ruhig *,.a11y-ruhig *::before,.a11y-ruhig *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.a11y-kontrast{--text:#1B2118;--text-2:#333C2F;--papier:#FFFFFF;--ton:#F2F4EC;--linie:#5F6A55;--gruen-d:#3E5A0C;--petrol-d:#10443B;--ocker-d:#5F4308}
.a11y-kontrast .hero-bild::after{background:linear-gradient(97deg,rgba(10,16,6,.95) 0%,rgba(10,16,6,.88) 45%,rgba(10,16,6,.6) 100%)}
.a11y-kontrast .lead,.a11y-kontrast .klein,.a11y-kontrast p{color:var(--text)}
.a11y-kontrast .btn-p{background:#4E7010;color:#fff}
.a11y-kontrast a{text-decoration:underline}

/* ---------- Cookie-Hinweis, schlanke Ausführung ---------- */
/* Nur Information: schmales Band am unteren Rand, ohne Verdunkelung. */
.cc-huelle.cc-info{background:none;backdrop-filter:none;pointer-events:none;
  place-items:end center;padding:0 16px 16px}
.cc-huelle.cc-info .cc-box{pointer-events:auto;width:min(880px,100%);
  padding:18px clamp(18px,2.4vw,26px);display:grid;gap:4px 26px;align-items:center;
  grid-template-columns:1fr auto;border:1px solid var(--linie)}
.cc-huelle.cc-info .cc-box h2{grid-column:1;font-size:17px;margin:0 0 2px}
.cc-huelle.cc-info .cc-box p{grid-column:1;margin:0;font-size:14.5px}
.cc-huelle.cc-info .cc-knoepfe{grid-column:2;grid-row:1 / span 2}
.cc-huelle.cc-info .cc-knoepfe .btn{flex:0 0 auto;white-space:nowrap}
.cc-huelle.cc-info .cc-fuss{grid-column:1;margin:6px 0 0}
@media (max-width:640px){
  .cc-huelle.cc-info .cc-box{grid-template-columns:1fr}
  .cc-huelle.cc-info .cc-knoepfe{grid-column:1;grid-row:auto;margin-top:12px}
  .cc-huelle.cc-info .cc-knoepfe .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- Seitliches Schnellmenü ---------- */
.sm{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:75;
  display:flex;flex-direction:column;gap:6px;padding-right:0}
.sm-knopf{display:flex;align-items:center;gap:0;background:var(--gruen);color:var(--auf-akzent);
  border:0;border-radius:10px 0 0 10px;box-shadow:0 6px 18px rgba(20,28,14,.24);
  padding:0;cursor:pointer;text-decoration:none;overflow:hidden;
  transition:background .18s ease,gap .22s ease,padding-right .22s ease,color .18s ease}
.sm-symbol{width:52px;height:52px;display:grid;place-items:center;flex:none}
.sm-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.sm-text{max-width:0;opacity:0;white-space:nowrap;font:600 14.5px/1 var(--ui);
  transition:max-width .26s ease,opacity .18s ease}
.sm-knopf:hover,.sm-knopf:focus-visible,.sm-knopf.offen{background:var(--gruen-d);color:#fff}
.sm-knopf:hover .sm-text,.sm-knopf:focus-visible .sm-text,.sm-knopf.offen .sm-text{max-width:220px;opacity:1}
.sm-knopf:hover,.sm-knopf:focus-visible,.sm-knopf.offen{padding-right:18px;gap:2px}
.sm-knopf:focus-visible{outline:2px solid var(--weiss);outline-offset:-4px}

/* Ausklapper mit den Ordinationszeiten */
.sm-box{position:fixed;right:64px;top:50%;transform:translateY(-50%);z-index:76;
  width:min(320px,calc(100vw - 88px));background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r);box-shadow:var(--e3);padding:18px 20px}
.sm-box[hidden]{display:none}
.sm-box-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--linie-2,#EDF0E6)}
.sm-box-kopf strong{font:600 16px/1.3 var(--ui);color:var(--wald)}
.sm-box-kopf button{background:none;border:0;font-size:24px;line-height:1;color:var(--text-2);cursor:pointer;padding:0 2px}
.sm-box-kopf button:hover{color:var(--wald)}
.sm-zeiten{list-style:none;margin:0;padding:0;font-size:14.5px}
.sm-zeiten li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--linie-2,#EDF0E6)}
.sm-zeiten li:last-child{border-bottom:0}
.sm-zeiten li span:first-child{color:var(--text-2)}
.sm-zeiten li span:last-child{color:var(--wald);font-weight:600;text-align:right}
.sm-zeiten li.heute{background:var(--gruen-h);margin-inline:-8px;padding-inline:8px;border-radius:6px}
.sm-zeiten li.heute span:first-child{color:var(--gruen-d);font-weight:600}
.sm-box-fuss{margin:12px 0 14px;font-size:13.5px;color:var(--text-2)}
.sm-box .btn{width:100%;justify-content:center}

.sm-kurz{display:none}

@media (max-width:900px){
  /* Auf schmalen Bildschirmen wird daraus die Leiste am unteren Rand. */
  .sm{right:0;left:0;top:auto;bottom:0;transform:none;flex-direction:row;gap:0;
    background:var(--gruen);box-shadow:0 -4px 18px rgba(20,28,14,.22)}
  .sm-knopf{flex:1;flex-direction:column;gap:3px;border-radius:0;box-shadow:none;
    padding:9px 4px 8px;color:var(--auf-akzent)}
  .sm-symbol{width:auto;height:24px}
  .sm-text{display:none}
  .sm-kurz{display:block;font:600 11.5px/1.15 var(--ui);text-align:center;white-space:nowrap}
  .sm-knopf:hover,.sm-knopf:focus-visible,.sm-knopf.offen{padding-right:4px;gap:3px;background:var(--gruen-d)}
  .sm-box{right:12px;left:12px;bottom:74px;top:auto;transform:none;width:auto}
  body{padding-bottom:0}
}
@media (max-width:900px){
  .nachoben{bottom:84px}
  .a11y-knopf{bottom:84px}
  .cc-neu{bottom:84px}
  /* Der Cookie-Hinweis darf die untere Leiste nicht verdecken. */
  .cc-huelle.cc-info{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .cc-huelle:not(.cc-info){align-items:end;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .pu-huelle{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Pop-up-Hinweis ---------- */
.pu-huelle{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;
  background:rgba(20,28,14,.62);backdrop-filter:blur(3px);animation:pu-ein .28s ease both}
.pu-huelle[hidden]{display:none}
.pu-box{position:relative;background:var(--weiss);border-radius:var(--r);box-shadow:var(--e3);
  width:min(560px,100%);max-height:90vh;overflow:auto;animation:pu-auf .32s cubic-bezier(.2,.8,.3,1) both}
.pu-bild{width:100%;height:auto;display:block;border-radius:var(--r) var(--r) 0 0}
.pu-inhalt{padding:clamp(22px,3vw,32px)}
.pu-inhalt h2{font-size:clamp(21px,2.6vw,27px);margin:0 0 var(--s2)}
.pu-text{font-size:15.5px;color:var(--text-2);line-height:1.65}
.pu-text p{margin:0 0 .8em}
.pu-text p:last-child{margin-bottom:0}
.pu-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.pu-knoepfe .btn{flex:1 1 auto;justify-content:center}
.pu-zu{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:var(--e1);display:grid;place-items:center;cursor:pointer;color:var(--wald)}
.pu-zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.pu-zu:hover{background:var(--weiss);color:var(--gruen-d)}
html.pu-offen{overflow:hidden}
@keyframes pu-ein{from{opacity:0}to{opacity:1}}
@keyframes pu-auf{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pu-huelle,.pu-box{animation:none}
  .sm-text{transition:none}
}

/* ---------- Startbilder: Übergang nach Einstellung ---------- */
/* Grundlage steht in site.css; hier wird sie nach Wahl abgewandelt. */
.js .hero-bild.effekt-blende figure.sichtbar img{animation:none;transform:scale(1.03)}
.js .hero-bild.effekt-keiner figure{transition:none}
.js .hero-bild.effekt-keiner figure.sichtbar img{animation:none;transform:none}

/* ---------- Platz für die untere Leiste ---------- */
@media (max-width:900px){
  body:has(.sm){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .sm{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* Auf mittleren Breiten darf das Schnellmenü nicht über dem Inhalt liegen. */
@media (min-width:901px) and (max-width:1340px){
  main .wrap,
  footer .wrap{padding-right:calc(var(--gutter) + 58px)}
}

/* ---------- Sicherheitsfrage im Formular ---------- */
.feld-frage{background:var(--gruen-h);border:1px solid var(--gruen-rand);border-radius:var(--r-s);
  padding:14px 16px;margin-top:var(--s2)}
.feld-frage label{color:var(--gruen-d)}
.feld-frage input{background:var(--weiss)}
.feld-frage .frage-text{margin:2px 0 8px;font-size:17px;font-weight:600;color:var(--wald);
  letter-spacing:0;text-transform:none}