/* Raumplan-Bildschirm – Gestaltung nach der Raumübersicht des NotSan Trackers (RDMH-Farben) */
:root {
  color-scheme: light;
  --accent: #e60005;
  --blue: #1662a3;
  --ink: #1d2329;
  --muted: #5d6770;
  --line: #d9dde1;
  --soft: #f3f4f5;
  --ok: #1f7343;
  --ok-soft: #e8f4ec;
  --warn: #8a5a00;
  --warn-soft: #fff3c7;
  --danger: #9c1d28;
  --danger-soft: #fdebed;
  --event: #5b3fa0;
  --event-soft: #efeafb;
  --shadow: 0 6px 18px rgba(20, 28, 36, 0.07);
  --cols: 4;
  --rows: 3;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--soft); color: var(--ink);
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
button { font: inherit; cursor: pointer; }
.rp-root { width: 100%; height: 100%; display: grid; }
.rp-message {
  place-self: center; max-width: 70vw; padding: 28px 34px;
  border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 18px;
  background: #fff; box-shadow: var(--shadow); font-size: clamp(1rem, 1.6vw, 1.8rem); color: var(--muted);
}
.rp-message strong { display: block; color: var(--ink); margin-bottom: .3em; }

/* Rahmen */
.rp-slide {
  height: 100vh; padding: 2vh 2.2vw 1.4vh;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1.4vh;
  background: linear-gradient(180deg, #fff 0, #fff 13vh, var(--soft) 13vh);
  border-top: .55vh solid var(--accent);
}
.rp-slide.no-toolbar { grid-template-rows: auto minmax(0, 1fr) auto; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 2vw; min-height: 8vh; }
.rp-brand { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.rp-brand img { width: clamp(44px, 4.4vw, 88px); height: clamp(44px, 4.4vw, 88px); object-fit: contain; }
.rp-brand strong { display: block; font-size: clamp(22px, 2.1vw, 44px); line-height: 1.05; }
.rp-brand span { display: block; color: var(--muted); font-size: clamp(12px, 1vw, 20px); margin-top: .2em; }
.rp-time { text-align: right; flex: 0 0 auto; }
.rp-clock { font-size: clamp(26px, 2.6vw, 54px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rp-date { margin-top: .35em; color: var(--muted); font-size: clamp(13px, 1.05vw, 21px); font-weight: 650; }
.rp-preview { display: inline-block; margin-top: .35em; padding: .25em .7em; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 800; font-size: clamp(11px, .8vw, 16px); }

/* Werkzeugleiste und Zusammenfassung */
.rp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.2vw; flex-wrap: wrap; }
.rp-sites { display: flex; gap: .5vw; flex-wrap: wrap; }
.rp-sites button, .rp-toggle {
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px;
  padding: .5em 1.05em; font-weight: 750; font-size: clamp(12px, .85vw, 17px);
}
.rp-sites button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.rp-sites button:focus-visible, .rp-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.rp-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rp-summary { display: flex; gap: .7vw; }
.rp-summary div {
  display: flex; align-items: center; gap: .8vw; padding: .55vh 1vw;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.rp-summary span { color: var(--muted); font-size: clamp(11px, .8vw, 16px); font-weight: 650; }
.rp-summary strong { font-size: clamp(17px, 1.35vw, 28px); font-variant-numeric: tabular-nums; }
.rp-summary .s-occupied { border-left: 4px solid var(--accent); }
.rp-summary .s-free { border-left: 4px solid var(--ok); }
.rp-summary .s-blocked { border-left: 4px solid var(--warn); }

/* Raster */
.rp-grid {
  min-height: 0; display: grid; gap: .8vw;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}
.rp-card {
  container-type: size;
  min-width: 0; min-height: 0; position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow);
}
.rp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #c6ccd2; }
.rp-card.state-occupied::before { background: var(--accent); }
.rp-card.state-event::before { background: var(--event); }
.rp-card.state-free::before, .rp-card.state-free-soon::before { background: var(--ok); }
.rp-card.state-blocked::before { background: var(--warn); }
.rp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7cqh 4cqw 1cqh 6cqw; }
.rp-card h2 { margin: 0; font-size: 14px; font-size: clamp(15px, min(15cqh, 8cqw), 48px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-card-type { display: block; margin-top: .2em; color: var(--muted); font-size: clamp(11px, min(8cqh, 4.4cqw), 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-pill {
  flex: 0 0 auto; padding: .32em .65em; border-radius: 999px; background: #eef0f2; color: #39434c;
  font-size: clamp(11px, min(8cqh, 4.2cqw), 24px); font-weight: 800; white-space: nowrap;
}
.state-occupied .rp-pill { background: var(--danger-soft); color: var(--danger); }
.state-event .rp-pill { background: var(--event-soft); color: var(--event); }
.state-free .rp-pill, .state-free-soon .rp-pill { background: var(--ok-soft); color: var(--ok); }
.state-blocked .rp-pill { background: var(--warn-soft); color: var(--warn); }
.rp-card-main { min-height: 0; padding: 1cqh 4cqw 1cqh 6cqw; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.rp-card-main time { color: var(--accent); font-size: clamp(11px, min(9cqh, 5cqw), 28px); font-weight: 850; font-variant-numeric: tabular-nums; }
.state-event .rp-card-main time { color: var(--event); }
.state-blocked .rp-card-main time { color: var(--warn); }
.rp-card-main strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .08em 0; font-size: clamp(14px, min(15cqh, 8.5cqw), 48px); line-height: 1.08; }
.rp-card-main p { margin: 0; color: var(--muted); font-size: clamp(11px, min(9cqh, 5cqw), 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-free { color: #4e5a64; font-size: clamp(13px, min(11cqh, 6cqw), 34px); font-weight: 700; }
.rp-card-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2.5cqh 4cqw 2.5cqh 6cqw; background: #f8f9fa; border-top: 1px solid #eceff1; font-size: clamp(10px, min(8cqh, 4.4cqw), 24px); }
.rp-card-next span { color: var(--muted); white-space: nowrap; }
.rp-card-next strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-height: 130px) { .rp-card-main p, .rp-card-type { display: none; } }
.rp-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); background: #fff; font-size: clamp(16px, 1.5vw, 30px); }

.rp-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: clamp(10px, .75vw, 15px); }
.rp-footer .rp-problem { color: var(--danger); font-weight: 750; }

/* Einzelraum (Türschild) */
.rp-room { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5vw; }
.rp-room-now {
  min-height: 0; position: relative; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 4vh 3vw; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow);
  border-left: 1.2vw solid #c6ccd2;
}
.rp-room-now.state-occupied { border-left-color: var(--accent); }
.rp-room-now.state-event { border-left-color: var(--event); }
.rp-room-now.state-free, .rp-room-now.state-free-soon { border-left-color: var(--ok); }
.rp-room-now.state-blocked { border-left-color: var(--warn); }
.rp-room-now h1 { margin: 0; font-size: clamp(36px, 5.5vw, 120px); line-height: 1; }
.rp-room-now .rp-card-type { font-size: clamp(14px, 1.4vw, 30px); }
.rp-room-title { display: flex; flex-direction: column; align-items: flex-start; gap: .6vh; }
.rp-room-now .rp-pill { font-size: clamp(16px, 1.6vw, 34px); padding: .35em .9em; margin-top: 1.4vh; }
.rp-room-current { align-self: center; }
.rp-room-current time { display: block; color: var(--accent); font-size: clamp(18px, 2vw, 42px); font-weight: 850; }
.state-event .rp-room-current time { color: var(--event); }
.state-blocked .rp-room-current time { color: var(--warn); }
.rp-room-current strong { display: block; margin: .15em 0; font-size: clamp(26px, 3.4vw, 76px); line-height: 1.05; }
.rp-room-current p { margin: .3em 0 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 36px); }
.rp-room-nextline { color: var(--muted); font-size: clamp(14px, 1.3vw, 28px); border-top: 1px solid #eceff1; padding-top: 2vh; }
.rp-room-nextline strong { color: var(--ink); }
.rp-day { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1vh; padding: 2.5vh 1.6vw; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.rp-day h3 { margin: 0 0 .5vh; font-size: clamp(16px, 1.4vw, 30px); }
.rp-day ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9vh; min-height: 0; overflow: hidden; }
.rp-day li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2vw; padding: 1.1vh 1vw; border-radius: 12px; background: var(--soft); border-left: 5px solid #c6ccd2; }
.rp-day li.k-course { border-left-color: var(--accent); }
.rp-day li.k-event { border-left-color: var(--event); }
.rp-day li.k-block { border-left-color: var(--warn); }
.rp-day li.is-past { opacity: .45; }
.rp-day li.is-now { background: #fff; box-shadow: 0 0 0 2px var(--ink) inset; }
.rp-day time { font-weight: 850; font-size: clamp(13px, 1.1vw, 24px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-day strong { display: block; font-size: clamp(14px, 1.2vw, 26px); }
.rp-day span { display: block; color: var(--muted); font-size: clamp(12px, .95vw, 20px); }
.rp-day .rp-free { padding: 2vh 0; }

@media (max-width: 900px) {
  .rp-slide { padding: 14px; }
  .rp-summary { display: none; }
  .rp-room { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .rp-brand span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .rp-card, .rp-room-now { transition: border-color .4s; }
}

/* v2: Hinweise, Vorschau-Grund, Seitenanzeige */
.rp-reason { display: inline-block; margin-top: .35em; padding: .25em .7em; border-radius: 999px; background: #e7f0f8; color: var(--blue); font-weight: 800; font-size: clamp(11px, .85vw, 18px); }
.rp-banner { display: flex; gap: 1vw; align-items: center; padding: .9vh 1.2vw; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--blue); font-size: clamp(13px, 1vw, 22px); }
.rp-banner strong { white-space: nowrap; }
.rp-slide.has-banner { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.rp-slide.no-toolbar.has-banner { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.rp-notice { height: 100vh; padding: 5vh 6vw; display: grid; grid-template-rows: auto 1fr auto; background: linear-gradient(145deg, #fff 0, #fff 56%, #f2f3f4 56%); border-top: .65vh solid var(--accent); }
.rp-notice article { align-self: center; max-width: 1300px; padding: 4vh 4vw; border: 1px solid var(--line); border-left: 8px solid var(--blue); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.rp-notice .kicker { color: var(--blue); font-weight: 850; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(12px, 1vw, 20px); }
.rp-notice h1 { margin: .2em 0; font-size: clamp(2.4rem, 4.6vw, 6rem); line-height: 1.02; }
.rp-notice p { margin: .6em 0 0; font-size: clamp(1.2rem, 2.1vw, 2.8rem); white-space: pre-wrap; line-height: 1.35; color: #404951; }
.rp-dots { display: flex; gap: 6px; }
.rp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c6ccd2; }
.rp-dots i.on { background: var(--blue); }