/* Schwebende Bedienelemente (Darstellung links, Cookie-Einstellungen rechts) und Darstellungsvarianten */
body{padding-bottom:calc(var(--hit-min) + var(--s-5) + env(safe-area-inset-bottom,0px))}
.schweb-leiste{position:fixed;left:var(--s-3);right:var(--s-3);bottom:calc(var(--s-3) + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:var(--s-3);pointer-events:none;z-index:40}
.schweb{pointer-events:auto;min-height:var(--hit-min);padding:0 var(--s-4);font:var(--fw-medium) var(--fs-sm)/1 var(--font-text);color:var(--c-text);background:var(--c-surface);border:var(--b-regel) solid var(--c-line-strong);border-radius:var(--r-rund);cursor:pointer}
.schweb:hover{border-color:var(--c-text)}
.darstellung-panel{position:fixed;left:var(--s-3);bottom:calc(var(--hit-min) + var(--s-3) + var(--s-2) + env(safe-area-inset-bottom,0px));width:min(calc(100vw - 2 * var(--s-3)),24rem);max-height:calc(100vh - 8rem);overflow:auto;padding:var(--s-4);background:var(--c-surface);color:var(--c-text);border:var(--b-regel) solid var(--c-line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-float);z-index:41}
.darstellung-panel[hidden]{display:none}
.darstellung-titel{font:var(--fw-head) var(--fs-lg)/1.2 var(--font-head);margin:0 0 var(--s-3)}
.darstellung-gruppe{margin-bottom:var(--s-3)}
.darstellung-label{margin:0 0 var(--s-1);font-weight:var(--fw-strong);font-size:var(--fs-sm)}
.darstellung-optionen{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.darstellung-unten{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4);align-items:center}
@media print{.schweb-leiste,.darstellung-panel{display:none}}

/* Schriftgroesse (alle Groessen sind rem) */
:root[data-schrift="gross"]{font-size:112.5%}
:root[data-schrift="sehr-gross"]{font-size:125%}
/* Bewegung */
:root[data-bewegung="reduziert"] *,:root[data-bewegung="reduziert"] *::before,:root[data-bewegung="reduziert"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* Hoher Kontrast: Farben stehen in tokens.css (Abschnitt 7); hier nur Linienstaerken und Unterstreichung */
:root[data-kontrast="hoch"] a{text-decoration:underline;text-decoration-thickness:2px}
:root[data-kontrast="hoch"] .knopf,:root[data-kontrast="hoch"] .schweb,:root[data-kontrast="hoch"] .chip{border-width:3px}
:root[data-kontrast="hoch"] :focus-visible{outline-width:4px}
/* Bei vergroesserter Schrift frueher auf das Handy-Menue wechseln (Medienabfragen in rem folgen der eigenen Schriftgroesse nicht) */
:root[data-schrift] .nav{display:none!important}
:root[data-schrift] .mobil{display:block!important}
.kreis a,:root[data-kontrast="hoch"] .kreis a{text-decoration:none}

/* Schwebende Leiste: nie umbrechen, auf kleinen Bildschirmen kurze Beschriftung */
.schweb{white-space:nowrap}
.schweb .kurz{display:none}
@media (max-width:480px){
  .schweb{padding:0 var(--s-3)}
  .schweb .lang{display:none}
  .schweb .kurz{display:inline}
}

/* Das Panel ist eigenstaendig: auch auf Oberflaechen ohne komponenten.css (Demo, Mautic-Seiten, Zahlungsseite, HACCP) nur mit tokens.css + dieser Datei lauffaehig */
.darstellung-panel{font-family:var(--font-text);color:var(--c-text);background:var(--c-surface);border:var(--b-regel,2px) solid var(--c-line-strong);border-radius:var(--r-2)}
.darstellung-panel .chip{min-height:var(--hit-min);padding:0 var(--s-4);font:var(--fw-medium) var(--fs-sm) var(--font-text);color:var(--c-text);background:var(--c-blatt);border:var(--b-haar,1px) solid var(--c-line-strong);border-radius:var(--r-chip,var(--r-2));cursor:pointer}
.darstellung-panel .chip[aria-pressed="true"]{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.darstellung-panel .knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit-min);padding:0 var(--s-4);font:var(--fw-strong) var(--fs-sm)/1 var(--font-text);border-radius:var(--r-2);border:var(--b-regel,2px) solid transparent;cursor:pointer}
.darstellung-panel .k-zweit{background:var(--c-blatt);color:var(--c-text);border-color:var(--c-line-strong)}
.darstellung-panel .k-text{background:transparent;color:var(--c-link);text-decoration:underline;text-underline-offset:.18em}
.darstellung-panel .chip:focus-visible,.darstellung-panel .knopf:focus-visible,.schweb:focus-visible{outline:var(--focus-ring,3px solid var(--c-focus));outline-offset:2px}