:root {
  --paper: #dfe7ea; --plan: #f7f9f6; --ink: #17324d; --soft: #4d6476; --wall: 7px; --mark: #ffd23f;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #12222f; --plan: #1b3041; --ink: #eaf1ee; --soft: #b0c3cb; --mark: #ffd23f; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1.0625rem/1.55 Bahnschrift, "DIN Alternate", "Avenir Next", "Segoe UI", sans-serif;
}
main { max-width: 68rem; margin: 0 auto; padding: clamp(1.25rem, 5vw, 4rem) 1rem; }
.title { margin-bottom: 2.5rem; }
h1 { margin: 0; font-size: clamp(2.5rem, 10.5vw, 6rem); line-height: .95; font-weight: 700; letter-spacing: -.02em; }
.who { margin: 1.1rem 0 0; font-size: 1.25rem; }
.who span { display: block; color: var(--soft); font-size: 1.0625rem; }
.plan {
  display: grid; grid-template-columns: 3fr 2fr; background: var(--plan);
  border: var(--wall) solid var(--ink);
}
.room {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 15rem; padding: 1.5rem; color: inherit; text-decoration: none;
}
.room + .room { border-left: var(--wall) solid var(--ink); }
.room + .room + .room { border-top: var(--wall) solid var(--ink); }
.room:first-child { grid-row: span 2; min-height: 26rem; }
/* Tuer: Luecke in der Wand, Tuerblatt und Schwenkbogen */
.room + .room::before {
  content: ""; position: absolute; top: calc(var(--wall) * -1); right: 1.5rem; width: 3rem; height: var(--wall);
  background: var(--plan);
}
.room + .room::after {
  content: ""; position: absolute; top: 0; right: 1.5rem; width: 3rem; height: 3rem;
  border-right: 2px solid var(--soft);
  background: radial-gradient(circle 3rem at 100% 0, transparent calc(100% - 2px), var(--soft) calc(100% - 1.5px), var(--soft) 100%, transparent 100%);
}
.room.planned { background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--soft) 16%, transparent) 12px 14px); }
h2 { margin: 1rem 0 0; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; }
.room:first-child h2 { font-size: clamp(2rem, 6vw, 3.25rem); }
.room p { margin: .6rem 0 0; max-width: 34rem; }
.status { align-self: flex-start; margin: 0 0 auto !important; padding: .1rem .5rem; background: var(--mark); color: #17324d; font-weight: 600; font-size: .9375rem; }
.stack { color: var(--soft); font-size: .9375rem; }
a.room:hover h2 { text-decoration: underline; text-underline-offset: .15em; }
a:focus-visible { outline: 3px solid var(--mark); outline-offset: -8px; }
footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; color: var(--soft); }
footer a { color: var(--ink); }
@media (max-width: 40rem) {
  .plan { grid-template-columns: 1fr; }
  .room, .room:first-child { min-height: 14rem; grid-row: auto; }
  .room + .room { border-left: 0; border-top: var(--wall) solid var(--ink); }
}