/* ==========================================================================
   OpenSourceSignage – Player
   Wird auf den Displays angezeigt (Browser, Android-WebView, Windows-WebView2).
   Enthält außerdem die Stile des Folien-Renderers, die der Editor mitbenutzt.
   ========================================================================== */

:root {
    --oss-accent: #4f46e5;
    --oss-bg: #0b1020;
    --oss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Die Grundfarben gelten nur auf den Player-Seiten. Die Verwaltung bindet
   diese Datei ebenfalls ein (für Folienvorschau und Badge-Vorschau) – dort
   darf sie das Aussehen der Oberfläche nicht verändern. */
body.oss-player,
body.oss-preview {
    background: var(--oss-bg);
}

body.oss-player,
body.oss-preview {
    color: #fff;
    font-family: var(--oss-font);
    overflow: hidden;
}

html, body { margin: 0; padding: 0; }
body.oss-player, body.oss-preview { height: 100%; width: 100%; }

body.oss-player { cursor: none; }
body.oss-player.is-interactive { cursor: default; }
body.oss-preview { cursor: default; }

/* --- Wurzel und Drehung -------------------------------------------------- */

#oss-root { position: fixed; inset: 0; overflow: hidden; }
#oss-root.rot-90,
#oss-root.rot-270 { }

.oss-rotate { position: absolute; top: 50%; left: 50%; transform-origin: center center; }

/* --- Inhaltsbereich (verkleinert sich bei Einblendungen) ----------------- */

.oss-content {
    position: absolute; inset: 0;
    transition: inset .35s ease;
    overflow: hidden;
    background: #000;
}

/* --- Bühne (Folien) ------------------------------------------------------ */

.oss-viewport {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    overflow: hidden;
}

.oss-stage { transform-origin: center center; position: relative; }
.oss-stage-fit { position: relative; overflow: hidden; flex: 0 0 auto; }
.oss-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.oss-stage__html { position: absolute; inset: 0; overflow: hidden; }

.oss-el { box-sizing: border-box; }
.oss-table { border-collapse: collapse; }

/* --- Datenquellen --------------------------------------------------------
   Termine, Nachrichten, Tabellenzeilen. Zwei Anordnungen: eine Liste mit der
   Zeit links und Karten untereinander. */

.oss-feed {
    --feed-accent: #4f46e5;
    --feed-gap: 10px;
    display: flex; flex-direction: column; gap: var(--feed-gap);
    width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
}
.oss-feed__title {
    flex: 0 0 auto; font-weight: 700; font-size: 1.15em;
    color: var(--feed-accent); letter-spacing: -.01em;
}
.oss-feed__list { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; gap: var(--feed-gap); }
.oss-feed__leer { margin: 0; opacity: .55; font-size: .92em; }

.oss-feed__item { display: flex; gap: .8em; align-items: baseline; min-width: 0; }
.oss-feed__when {
    flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--feed-accent); font-size: .88em; min-width: 7.5em;
}
.oss-feed__body { min-width: 0; }
.oss-feed__headline { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-feed__where { font-size: .82em; opacity: .7; }
.oss-feed__text { font-size: .82em; opacity: .78; margin-top: .12em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Wetter: heute groß, die folgenden Tage klein daneben */
.oss-wetter {
    --wetter-accent: #4f46e5;
    display: flex; flex-direction: column; gap: .5em;
    width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
}
.oss-wetter__title {
    flex: 0 0 auto; font-weight: 700; font-size: 1.15em;
    color: var(--wetter-accent); letter-spacing: -.01em;
}
.oss-wetter__heute { display: flex; align-items: center; gap: .6em; min-width: 0; }
.oss-wetter__symbol { flex: 0 0 auto; color: var(--wetter-accent); line-height: 0; }
.oss-wetter__symbol svg { width: 2.4em; height: 2.4em; }
.oss-wetter__jetzt { min-width: 0; }
.oss-wetter__grad { font-size: 1.9em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.oss-wetter__lage { font-size: .82em; opacity: .78; margin-top: .15em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-wetter__spanne { font-size: .72em; opacity: .6; font-variant-numeric: tabular-nums; }
.oss-wetter__tage {
    flex: 1 1 auto; display: flex; gap: .5em; align-items: flex-start;
    overflow: hidden; min-height: 0;
}
.oss-wetter__tag {
    flex: 1 1 0; min-width: 0; text-align: center; display: flex;
    flex-direction: column; align-items: center; gap: .1em;
}
.oss-wetter__wochentag { font-size: .72em; font-weight: 700; opacity: .8; }
.oss-wetter__tagsymbol { color: var(--wetter-accent); line-height: 0; }
.oss-wetter__tagsymbol svg { width: 1.3em; height: 1.3em; }
.oss-wetter__hoch { font-size: .82em; font-weight: 650; font-variant-numeric: tabular-nums; }
.oss-wetter__tief { font-size: .7em; opacity: .6; font-variant-numeric: tabular-nums; }
.oss-wetter__datum { font-size: .62em; opacity: .5; font-variant-numeric: tabular-nums; }
.oss-wetter__regen { font-size: .62em; opacity: .7; color: var(--wetter-accent);
    font-variant-numeric: tabular-nums; }
.oss-wetter__ort { font-size: .68em; opacity: .55; margin-top: .1em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zusatzwerte: zwei Spalten, damit auch acht Zeilen nicht in die Länge gehen */
.oss-wetter__werte {
    flex: 0 0 auto; display: grid; gap: .05em .8em;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: .68em;
}
.oss-wetter__wert { display: flex; justify-content: space-between; gap: .4em; min-width: 0; }
.oss-wetter__wertname { opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-wetter__wertzahl { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Die nächsten Stunden als schmaler Streifen */
.oss-wetter__stunden {
    flex: 0 0 auto; display: flex; gap: .4em; overflow: hidden;
    padding-top: .25em; border-top: 1px solid currentColor;
    /* Die Linie soll trennen, nicht dominieren. */
    border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}
.oss-wetter__stunde {
    flex: 1 1 0; min-width: 0; text-align: center; display: flex;
    flex-direction: column; align-items: center; gap: .05em;
}
.oss-wetter__uhrzeit { font-size: .62em; opacity: .7; font-variant-numeric: tabular-nums; }

/* Karten: jede Zeile ein abgesetzter Kasten */
.oss-feed--karten .oss-feed__item {
    flex-direction: column; align-items: stretch; gap: .15em;
    background: rgba(0, 0, 0, .04); border-radius: 10px; padding: .6em .8em;
}
.oss-feed--karten .oss-feed__when { min-width: 0; }
.oss-feed--karten .oss-feed__headline { white-space: normal; }

/* --- Personensuche -------------------------------------------------------
   Ein Element auf einer Folie, deshalb füllt es dessen Fläche vollständig aus
   und scrollt nur innen. Die Farben kommen als Variablen aus der Gestaltung. */

.oss-people {
    --people-accent: #4f46e5;
    --people-card: #ffffff;
    --people-card-border: rgba(0, 0, 0, .1);
    --people-card-radius: 14px;
    --people-gap: 14px;
    --people-photo: 96px;
    --people-columns: 1;
    display: flex; flex-direction: column; gap: var(--people-gap);
    width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
}

.oss-people__search { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.oss-people__input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05em;
    padding: .62em 2.2em .62em .9em;
    border: 2px solid var(--people-card-border); border-radius: var(--people-card-radius);
    background: var(--people-card); color: inherit;
}
.oss-people__input:focus { outline: none; border-color: var(--people-accent); }
.oss-people__input::-webkit-search-cancel-button { display: none; }
.oss-people__clear {
    position: absolute; right: .5em; width: 1.5em; height: 1.5em; line-height: 1;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; background: transparent; color: inherit;
    font: inherit; font-size: 1.2em; opacity: .55; cursor: pointer;
}
.oss-people__clear:hover, .oss-people__clear:focus-visible { opacity: 1; background: rgba(0, 0, 0, .07); }

.oss-people__results { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.oss-people__note { margin: 0; padding: .8em .2em; opacity: .6; font-size: .92em; }
.oss-people__note--error { color: #b91c1c; opacity: .95; }

.oss-people__list {
    display: grid; gap: var(--people-gap);
    grid-template-columns: repeat(var(--people-columns), minmax(0, 1fr));
    align-content: start;
}
.oss-people__card {
    display: flex; align-items: center; gap: var(--people-gap);
    background: var(--people-card); border: 1px solid var(--people-card-border);
    border-radius: var(--people-card-radius); padding: calc(var(--people-gap) * .8);
    box-sizing: border-box; min-width: 0;
}
.oss-people__card--stacked { flex-direction: column; align-items: center; text-align: center; }
.oss-people__card--sample { opacity: .82; }

.oss-people__photo {
    flex: 0 0 auto; width: var(--people-photo); height: var(--people-photo);
    border-radius: 50%; overflow: hidden; background: rgba(0, 0, 0, .06);
    display: grid; place-items: center;
}
.oss-people__photo--square { border-radius: calc(var(--people-card-radius) * .7); }
.oss-people__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oss-people__photo--initials {
    background: var(--people-accent); color: #fff; font-weight: 700;
    font-size: calc(var(--people-photo) * .38);
}

.oss-people__fields { min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.oss-people__field { min-width: 0; display: flex; align-items: baseline; gap: .5em; }
.oss-people__card--stacked .oss-people__field { justify-content: center; }
.oss-people__label {
    flex: 0 0 auto; font-size: .62em; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; opacity: .5;
}
.oss-people__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-people__field--titel .oss-people__value { font-size: 1.25em; font-weight: 700; }
.oss-people__field--stark .oss-people__value { font-weight: 700; color: var(--people-accent); }
.oss-people__field--klein .oss-people__value { font-size: .82em; opacity: .72; }

.oss-people__keys { flex: 0 0 auto; display: flex; flex-direction: column; gap: .3em; }
.oss-people__key-row { display: flex; gap: .3em; justify-content: center; }
.oss-people__key {
    flex: 1 1 0; min-width: 0; font: inherit; font-size: .8em;
    padding: .5em .2em; border: 1px solid var(--people-card-border);
    border-radius: calc(var(--people-card-radius) * .5);
    background: var(--people-card); color: inherit; cursor: pointer;
}
.oss-people__key:active { background: var(--people-accent); color: #fff; }
.oss-people__key--wide { flex: 2 1 0; }

.oss-marquee__track {
    animation-name: oss-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    padding-left: 100%;
}
@keyframes oss-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* --- Übergänge ----------------------------------------------------------- */

.oss-slide-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.oss-slide-layer.enter-fade { animation: oss-fade-in .6s ease forwards; }
.oss-slide-layer.leave-fade { animation: oss-fade-out .6s ease forwards; }
.oss-slide-layer.enter-slide { animation: oss-slide-in .6s cubic-bezier(.4, 0, .2, 1) forwards; }
.oss-slide-layer.leave-slide { animation: oss-slide-out .6s cubic-bezier(.4, 0, .2, 1) forwards; }
.oss-slide-layer.enter-zoom { animation: oss-zoom-in .6s ease forwards; }
.oss-slide-layer.leave-zoom { animation: oss-zoom-out .6s ease forwards; }

@keyframes oss-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes oss-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes oss-slide-in  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes oss-slide-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes oss-zoom-in  { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes oss-zoom-out { from { opacity: 1; } to { opacity: 0; transform: scale(.96); } }

/* --- Standby / Kopplung -------------------------------------------------- */

.oss-screen {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: radial-gradient(900px 500px at 50% 0%, #1b2545 0%, #0b1020 60%);
    text-align: center; padding: 5vh 4vw;
}

.oss-panel { max-width: 46em; }
.oss-panel h1 { font-size: clamp(28px, 4.4vw, 56px); margin: 0 0 .3em; font-weight: 700; letter-spacing: -.02em; }
.oss-panel p  { font-size: clamp(15px, 1.6vw, 22px); color: #a5b0c9; margin: 0 0 1.2em; line-height: 1.5; }

.oss-code-input {
    font-size: clamp(30px, 6vw, 72px);
    letter-spacing: .3em;
    text-align: center;
    text-transform: uppercase;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: rgba(255, 255, 255, .06);
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    color: #fff;
    padding: .25em .2em;
    width: 100%;
    max-width: 8em;
    outline: none;
}
.oss-code-input:focus { border-color: var(--oss-accent); background: rgba(79, 70, 229, .14); }

.oss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    background: var(--oss-accent); color: #fff; border: 0; border-radius: 10px;
    font: inherit; font-size: clamp(15px, 1.7vw, 21px); font-weight: 600;
    padding: .7em 1.6em; cursor: pointer; text-decoration: none;
}
.oss-btn:hover { filter: brightness(1.08); }
.oss-btn--ghost { background: rgba(255, 255, 255, .1); }

.oss-keypad {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(2.4em, 1fr));
    gap: .45em; max-width: 26em; margin: 1.6em auto 0;
}
.oss-keypad button {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    color: #fff; border-radius: 10px; font: inherit; font-size: clamp(15px, 1.9vw, 24px);
    font-weight: 600; padding: .5em 0; cursor: pointer; min-height: 2em;
}
.oss-keypad .oss-keypad__enter { background: var(--oss-accent); border-color: transparent; }
.oss-keypad button:active { background: rgba(255, 255, 255, .2); }

.oss-status {
    position: fixed; bottom: 12px; left: 12px;
    font-size: 12px; color: rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .45); padding: 4px 9px; border-radius: 6px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    pointer-events: none; z-index: 900;
    opacity: 0; transition: opacity .3s ease;
}
.oss-status.is-visible { opacity: 1; }

.oss-error { color: #fca5a5; margin-top: 1em; min-height: 1.4em; font-size: clamp(14px, 1.5vw, 19px); }

.oss-identify {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(79, 70, 229, .92);
    display: grid; place-items: center; text-align: center;
    font-size: clamp(40px, 9vw, 130px); font-weight: 800;
    animation: oss-identify-pulse 1s ease-in-out infinite alternate;
}
@keyframes oss-identify-pulse { from { opacity: .82; } to { opacity: 1; } }

/* --- Einblendungen (Overlays) -------------------------------------------- */

.oss-overlay {
    position: absolute; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    animation: oss-fade-in .4s ease;
    font-size: clamp(16px, 1.7vw, 26px);
}
.oss-overlay--top    { top: 0; left: 0; right: 0; }
.oss-overlay--bottom { bottom: 0; left: 0; right: 0; }
.oss-overlay--left   { top: 0; bottom: 0; left: 0; }
.oss-overlay--right  { top: 0; bottom: 0; right: 0; }
.oss-overlay--fullscreen { inset: 0; }
.oss-overlay--ticker { bottom: 0; left: 0; right: 0; align-items: center; }

.oss-overlay__inner { width: 100%; height: 100%; display: flex; align-items: center; }
.oss-overlay--ticker .oss-overlay__inner { white-space: nowrap; }
.oss-overlay--ticker .oss-overlay__inner > * {
    display: inline-block; padding-left: 100%;
    animation: oss-marquee 22s linear infinite;
}

/* Standardklassen für die mitgelieferten Vorlagen */
.oss-overlay-pad { padding: 1.4em 1.6em; width: 100%; }
.oss-overlay-kicker { font-size: .8em; text-transform: uppercase; letter-spacing: .12em; opacity: .72; }
.oss-overlay-title { font-size: 1.7em; font-weight: 700; margin: .25em 0; line-height: 1.15; }
.oss-overlay-text { font-size: 1.05em; line-height: 1.4; opacity: .92; white-space: pre-wrap; }
.oss-overlay-foot { margin-top: 1.2em; font-size: .82em; opacity: .65; }
.oss-overlay-row { display: flex; align-items: baseline; gap: 1em; padding: 0 1.6em; width: 100%; }
.oss-overlay-center { text-align: center; width: 100%; padding: 2em; }

/* --- Kiosk --------------------------------------------------------------- */

.oss-kiosk {
    position: absolute; inset: 0;
    background: var(--kiosk-bg, #fff);
    color: var(--kiosk-text, #0f172a);
    display: flex; flex-direction: column;
    font-size: clamp(15px, 1.35vw, 22px);
}

.oss-kiosk__header {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 1em;
    padding: 1em 1.6em;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
    background: rgba(255, 255, 255, .6);
}
.oss-kiosk__logo { height: 2.6em; width: auto; }
.oss-kiosk__title { font-size: 1.35em; font-weight: 700; letter-spacing: -.01em; }
.oss-kiosk__nav { margin-left: auto; display: flex; gap: .5em; flex-wrap: wrap; }

.oss-kiosk__tab {
    border: 1px solid rgba(0, 0, 0, .12); background: #fff;
    color: inherit; border-radius: 999px; padding: .45em 1.1em;
    font: inherit; font-size: .92em; font-weight: 600; cursor: pointer;
}
.oss-kiosk__tab.is-active { background: var(--kiosk-accent, #4f46e5); border-color: transparent; color: #fff; }

.oss-kiosk__body { flex: 1 1 auto; position: relative; overflow: hidden; }
.oss-kiosk__page { position: absolute; inset: 0; overflow: auto; padding: 1.6em; }
.oss-kiosk__page--flush { padding: 0; }

/* Ohne Rahmen: keine Kopfzeile, kein Innenabstand – die Folie bekommt die
   ganze Fläche. Der Hintergrund bleibt schwarz, damit ein Seitenverhältnis,
   das nicht zum Bildschirm passt, sauber abschließt statt in einen weißen
   Rand zu laufen. */
.oss-kiosk--blank { background: #000; }
.oss-kiosk--blank .oss-kiosk__page { padding: 0; }

/* Bildschirmschoner */
.oss-saver { position: absolute; inset: 0; background: #000; color: #fff; overflow: hidden; z-index: 700; }
.oss-saver__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transition: opacity 1.1s ease;
}
.oss-saver__slide.is-active { opacity: 1; }
.oss-saver__slide.kenburns.is-active { animation: oss-kenburns 18s ease-out forwards; }
@keyframes oss-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }

.oss-saver__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3em 2em 2em; color: #fff; font-size: 1.3em;
    background: linear-gradient(to top, rgba(0,0,0,.68), transparent);
}

/* --- Hinweis-Badge (gestaltbar) ------------------------------------------ */

.oss-badge {
    position: absolute;
    z-index: 10;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .38);
    font-size: calc(clamp(15px, 1.9vw, 30px) * var(--badge-scale, 1));
    line-height: 1.25;
    cursor: pointer;
    max-width: 90%;
}

.oss-badge__inner { display: flex; align-items: center; gap: .7em; }
.oss-badge__texts { display: flex; flex-direction: column; min-width: 0; }
/* Die Schrift skaliert getrennt von der Fläche: `--badge-scale` sitzt auf der
   Schriftgröße des Badges und zieht damit alle Abstände in `em` mit, also die
   ganze Fläche. `--badge-text` wirkt nur hier. */
.oss-badge__text { font-weight: 650; font-size: calc(1em * var(--badge-text, 1)); }
.oss-badge__subtext { font-size: calc(.72em * var(--badge-text, 1)); opacity: .72; margin-top: .15em; }

.oss-badge__dot {
    width: .7em; height: .7em; border-radius: 50%; flex: 0 0 auto;
    opacity: .9;
}

/* Formen */
.oss-badge--pill    { border-radius: 999px; padding: .85em 1.9em; }
.oss-badge--square  { border-radius: 18px; padding: 1.1em 1.6em; }
.oss-badge--bar     { border-radius: 0; padding: 1em 2em; left: 0 !important; right: 0; width: 100%;
                      transform: none !important; max-width: none; }
.oss-badge--bar .oss-badge__inner { justify-content: center; }

.oss-badge--circle {
    border-radius: 50%;
    width: 11em; height: 11em;
    display: grid; place-items: center;
    text-align: center; padding: 1em;
}
.oss-badge--circle .oss-badge__inner { flex-direction: column; gap: .45em; }

/* Ein Viertelkreis, kein Ei.
   `border-radius: 100% 0 0 0` beschreibt eine **Ellipse** mit den Radien der
   Box – bei einer breiten, flachen Box wird daraus ein liegendes Ei. Rund
   wird die Ecke erst, wenn die Box quadratisch ist. Deshalb feste Maße, so
   wie beim Kreis auch, und der Text sitzt im massiven Teil. */
.oss-badge--quarter {
    width: 13em; height: 13em;
    border-radius: 100% 0 0 0;
    display: grid;
    align-items: end; justify-items: end;
    padding: 1.6em;
    text-align: right;
    max-width: none;
}
.oss-badge--quarter .oss-badge__texts { align-items: flex-end; }
.oss-badge--quarter .oss-badge__inner { max-width: 100%; }

/* Positionen */
.oss-badge--at-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.oss-badge--at-bottom       { bottom: 7%; left: 50%; transform: translateX(-50%); }
.oss-badge--at-top          { top: 7%; left: 50%; transform: translateX(-50%); }
.oss-badge--at-bottom-right { bottom: 0; right: 0; }
.oss-badge--at-bottom-left  { bottom: 0; left: 0; }
.oss-badge--at-top-right    { top: 0; right: 0; }
.oss-badge--at-top-left     { top: 0; left: 0; }

/* Viertelkreis richtet sich nach seiner Ecke: gerundet wird immer die Ecke,
   die zur Bildschirmmitte zeigt, und der Text sitzt in der gegenüberliegenden,
   massiven Ecke. */
.oss-badge--quarter.oss-badge--at-bottom-left {
    border-radius: 0 100% 0 0;
    justify-items: start; text-align: left;
}
.oss-badge--quarter.oss-badge--at-bottom-left .oss-badge__texts { align-items: flex-start; }
.oss-badge--quarter.oss-badge--at-top-right {
    border-radius: 0 0 0 100%;
    align-items: start;
}
.oss-badge--quarter.oss-badge--at-top-left {
    border-radius: 0 0 100% 0;
    align-items: start; justify-items: start; text-align: left;
}
.oss-badge--quarter.oss-badge--at-top-left .oss-badge__texts { align-items: flex-start; }

/* Randpositionen bekommen etwas Abstand, außer bei Ecken-Formen */
.oss-badge--pill.oss-badge--at-bottom-right,
.oss-badge--square.oss-badge--at-bottom-right,
.oss-badge--circle.oss-badge--at-bottom-right { bottom: 5%; right: 4%; }
.oss-badge--pill.oss-badge--at-bottom-left,
.oss-badge--square.oss-badge--at-bottom-left,
.oss-badge--circle.oss-badge--at-bottom-left  { bottom: 5%; left: 4%; }
.oss-badge--pill.oss-badge--at-top-right,
.oss-badge--square.oss-badge--at-top-right,
.oss-badge--circle.oss-badge--at-top-right    { top: 5%; right: 4%; }
.oss-badge--pill.oss-badge--at-top-left,
.oss-badge--square.oss-badge--at-top-left,
.oss-badge--circle.oss-badge--at-top-left     { top: 5%; left: 4%; }
.oss-badge--bar.oss-badge--at-bottom, .oss-badge--bar.oss-badge--at-bottom-right,
.oss-badge--bar.oss-badge--at-bottom-left { bottom: 0; }
.oss-badge--bar.oss-badge--at-top, .oss-badge--bar.oss-badge--at-top-right,
.oss-badge--bar.oss-badge--at-top-left { top: 0; }
.oss-badge--bar.oss-badge--at-center { top: 50%; transform: translateY(-50%) !important; }

/* Bewegung – wirkt auf den Inhalt, damit die Positionierung per transform
   (z. B. translateX(-50%)) unangetastet bleibt. */
.oss-badge--anim-bounce .oss-badge__inner { animation: oss-badge-bounce 2.6s ease-in-out infinite; }
.oss-badge--anim-pulse  .oss-badge__inner { animation: oss-badge-pulse 2.2s ease-in-out infinite; }
.oss-badge--anim-glow { animation: oss-badge-glow 2.4s ease-in-out infinite; }

@keyframes oss-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@keyframes oss-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
@keyframes oss-badge-glow {
    0%, 100% { box-shadow: 0 14px 44px rgba(0, 0, 0, .38); }
    50%      { box-shadow: 0 14px 44px rgba(0, 0, 0, .38), 0 0 0 .8em rgba(255, 255, 255, .12); }
}

/* Lageplan */
.oss-map { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: #f1f5f9; }
.oss-map__inner { position: relative; max-width: 100%; max-height: 100%; }
.oss-map__inner img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

.oss-hotspot {
    position: absolute;
    border: 3px solid currentColor;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    display: flex; align-items: flex-start;
}
.oss-hotspot:hover, .oss-hotspot:active {
    background: color-mix(in srgb, currentColor 34%, transparent);
    transform: scale(1.02);
}
.oss-hotspot__label {
    color: #fff;
    font-size: .8em; font-weight: 650;
    padding: .18em .6em; border-radius: 0 0 5px 0;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
}

/* Abteilungsliste */
.oss-directory__search {
    width: 100%; font: inherit; font-size: 1.1em;
    padding: .7em 1em; margin-bottom: 1.2em;
    border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px;
    background: #fff; color: inherit;
}
.oss-directory__group { margin-bottom: 1.6em; }
.oss-directory__group-title {
    font-size: .82em; text-transform: uppercase; letter-spacing: .1em;
    color: var(--kiosk-accent, #4f46e5); font-weight: 700; margin-bottom: .6em;
}
.oss-directory__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19em, 1fr)); gap: .8em; }
.oss-directory__item {
    border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: .9em 1.1em;
    background: #fff; display: flex; align-items: center; gap: 1em;
    text-align: left; font: inherit; color: inherit; cursor: default;
}
.oss-directory__item[data-clickable="1"] { cursor: pointer; }
.oss-directory__item[data-clickable="1"]:active { background: #f8fafc; }
.oss-directory__name { font-weight: 650; font-size: 1.05em; }
.oss-directory__meta { font-size: .85em; opacity: .68; }
.oss-directory__room {
    margin-left: auto; flex: 0 0 auto;
    background: var(--kiosk-accent, #4f46e5); color: #fff;
    border-radius: 9px; padding: .4em .8em; font-weight: 700; font-size: 1.05em;
}

.oss-kiosk__frame { width: 100%; height: 100%; border: 0; }
.oss-kiosk__html { padding: 1.6em; }

/* Die Bedienknöpfe im Kiosk: zurück und zur Startseite. Auf einem Set ohne
   Rahmen sind sie oft die einzigen sichtbaren Bedienelemente, deshalb sind
   sie einstellbar wie eine Schaltfläche auf einer Folie: Form, Farbe,
   Beschriftung, Größe und Ecke. `--knopf-scale` sitzt auf der Schriftgröße;
   alle Maße darin stehen in `em` und wachsen mit.

   Jede Ecke ist ein Behälter. Stehen beide Knöpfe in derselben, rücken sie
   nebeneinander statt übereinander – ohne dass jemand das ausrechnen muss. */
.oss-kiosk__ecke {
    position: absolute; z-index: 20;
    display: flex; gap: .9em; align-items: center;
}
.oss-kiosk__ecke--at-bottom-left   { left: 1.2em;  bottom: 1.2em; }
.oss-kiosk__ecke--at-bottom-right  { right: 1.2em; bottom: 1.2em; }
.oss-kiosk__ecke--at-bottom-center { left: 50%; bottom: 1.2em; transform: translateX(-50%); }
.oss-kiosk__ecke--at-top-left      { left: 1.2em;  top: 1.2em; }
.oss-kiosk__ecke--at-top-right     { right: 1.2em; top: 1.2em; }

.oss-kiosk__knopf {
    background: var(--kiosk-accent, #4f46e5); color: #fff; border: 0;
    font: inherit; font-weight: 650;
    font-size: calc(1em * var(--knopf-scale, 1));
    cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    /* Feinabstand zum Rand, in Bildpunkten aus der Einstellung. */
    transform: translate(var(--knopf-x, 0px), var(--knopf-y, 0px));
}
.oss-kiosk__knopf:active {
    transform: translate(var(--knopf-x, 0px), var(--knopf-y, 0px)) scale(.97);
    filter: brightness(.92);
}
.oss-kiosk__knopf:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Formen */
.oss-kiosk__knopf--pill   { border-radius: 999px; padding: .7em 1.5em; }
.oss-kiosk__knopf--square { border-radius: 12px;  padding: .8em 1.4em; }
.oss-kiosk__knopf--circle {
    border-radius: 50%; width: 5.4em; height: 5.4em; padding: .4em;
    display: grid; place-items: center; text-align: center; line-height: 1.1;
}

.oss-info-layer {
    position: absolute; inset: 0; z-index: 30;
    background: rgba(15, 23, 42, .55);
    display: grid; place-items: center; padding: 2em;
}
.oss-info-card {
    background: #fff; color: #0f172a; border-radius: 18px;
    padding: 2em 2.2em; max-width: 40em; max-height: 80%; overflow: auto;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.oss-info-card h2 { margin-top: 0; }

/* Optionale Uhr über allen Inhalten */
.oss-clock {
    position: absolute; top: 1.2em; right: 1.4em; z-index: 600;
    font-size: clamp(15px, 1.6vw, 26px); font-weight: 600;
    color: #fff; background: rgba(0, 0, 0, .42);
    padding: .25em .7em; border-radius: 8px;
    font-variant-numeric: tabular-nums; pointer-events: none;
}

/* Beschriftung von Formen (z. B. Räume auf einem Lageplan) */
.oss-el__label {
    display: inline-block; padding: .18em .6em; font-weight: 650; line-height: 1.35;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-radius: 0 0 5px 0; pointer-events: none;
}

/* Verlinkte Elemente auf interaktiven Seiten */
.oss-kiosk .oss-el.is-clickable { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.oss-kiosk .oss-el.is-clickable:hover { filter: brightness(1.06); transform: scale(1.012); }
.oss-kiosk .oss-el.is-clickable:active { transform: scale(.995); }

/* Gestaltete Einblendung: Folie füllt den eingeblendeten Bereich */
.oss-overlay__inner--slide { display: grid; place-items: center; padding: 0; }


/* --- Außerhalb der Betriebszeit ------------------------------------------ */

body.oss-player.oss-off { background: #000; }

.oss-off-screen {
    position: fixed; inset: 0; background: #000;
    display: grid; place-items: center;
}

/* Sehr dezenter Hinweis: sichtbar, wenn man davorsteht, aber kein Leuchten
   im dunklen Flur und kein Einbrennen auf dem Panel. */
.oss-off-hint {
    color: #1c1c1c; text-align: center; font-size: 15px; line-height: 1.5;
    user-select: none;
}
.oss-off-hint small { display: block; font-size: 13px; color: #141414; }

/* --- Notfallmeldung ------------------------------------------------------
   Vollflächig, kontraststark, aus jeder Entfernung lesbar. Keine Animation:
   Ein Bildschirm, der im Ernstfall blinkt, wird schlechter gelesen, nicht
   besser. */

.oss-alarm {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: 6vmin; text-align: center;
    background: #b91c1c; color: #fff;
}
.oss-alarm--gelb { background: #ca8a04; color: #1c1917; }
.oss-alarm--blau { background: #1d4ed8; color: #fff; }

.oss-alarm__inner { max-width: 88%; }
.oss-alarm__headline {
    font-size: 9vmin; font-weight: 800; line-height: 1.1;
    letter-spacing: -.01em; text-wrap: balance;
}
.oss-alarm__text { margin-top: 3vmin; font-size: 4.4vmin; line-height: 1.35; opacity: .95; }
.oss-alarm__foot {
    position: absolute; left: 0; right: 0; bottom: 3vmin;
    font-size: 2vmin; opacity: .55; letter-spacing: .08em; text-transform: uppercase;
}

/* --- Ruhebild ------------------------------------------------------------
   Nichts zu zeigen: schwarz, in der Mitte das eingestellte Logo. Ohne Angaben
   bleibt nur ein sehr dezenter Hinweis in der Ecke – hell genug zum Ablesen
   aus der Nähe, dunkel genug, um nachts nicht zu leuchten. */

.oss-idle {
    position: absolute; inset: 0; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3vh;
}
.oss-idle__logo { max-width: 60vw; max-height: 45vh; object-fit: contain; opacity: .9; }
.oss-idle__text {
    color: #d7d7d7; font-size: 2.2vh; letter-spacing: .04em; text-align: center;
    max-width: 70vw;
}
.oss-idle__hint {
    position: absolute; right: 2vw; bottom: 2vh;
    color: #1c1c1c; text-align: right; font-size: 15px; line-height: 1.5; user-select: none;
}
.oss-idle__hint small { display: block; font-size: 13px; color: #141414; }

/* --- Schaltflächen auf einer Folie -----------------------------------------
   Ein echtes <button>, damit Fokus und Tastatur vom Browser kommen. Die Größe
   macht das Element, nicht der Inhalt: Ein Knopf soll da sitzen, wo er
   hingezogen wurde. */
.oss-knopf {
    width: 100%; height: 100%;
    display: flex; align-items: center; gap: .5em;
    padding: .4em .8em; box-sizing: border-box;
    border: 0; border-radius: 14px;
    font: inherit; line-height: 1.15; text-align: inherit;
    cursor: pointer; appearance: none;
    transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.oss-knopf__symbol { flex: 0 0 auto; line-height: 0; }
.oss-knopf__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oss-knopf__unterzeile { font-size: .62em; font-weight: 400; opacity: .82; }
.oss-knopf--zweizeilig { line-height: 1.05; }

/* Sichtbare Rückmeldung. Auf einem Bildschirm im Foyer ist das der einzige
   Hinweis, dass die Berührung angekommen ist – es gibt keinen Mauszeiger,
   der sich verändert, und kein Klicken zu hören. */
.oss-knopf:active { transform: scale(.97); filter: brightness(.92); }
.oss-knopf:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Ein unsichtbarer Bereich – der klickbare Fleck auf einem Lageplan. Er zeigt
   nichts an, muss aber mit der Tastatur erreichbar bleiben. Weil es keine
   eigene Farbe gibt, an der sich ein Fokusring orientieren könnte, sind es
   zwei: hell innen, dunkel außen. Diese Kombination ist über jedem Plan zu
   sehen, egal wie hell oder dunkel er ist. */
.oss-knopf--unsichtbar { padding: 0; }
.oss-knopf--unsichtbar:active { transform: none; filter: none; }
.oss-knopf--unsichtbar:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .9);
}

/* Wer die Bewegung nicht will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .oss-knopf { transition: none; }
    .oss-knopf:active { transform: none; }
}

/* Eine vollflächige Einblendung als Ruhebild eines Kiosks.
   Sie füllt den Bildschirm wie eine gewöhnliche Einblendung – aber das Badge
   liegt darüber, denn sie ist hier der Ruhezustand und keine Sperre. */
.oss-saver--overlay { background: #000; }
.oss-saver__overlay {
    position: absolute; inset: 0;
    display: grid; place-items: center; overflow: hidden;
}
.oss-saver__overlay .oss-overlay__inner { width: 100%; height: 100%; }