/* FlurfunkPro Landingpage. Bauplan auf Petrol, Marke aus assets/flurfunkpro-logo. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("assets/fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* CI dotnet Services */
  --petrol-deep: #0d3a44;
  --petrol: #14505c;
  --petrol-light: #3c7885;
  --haze: #b8d3d9;
  --amber: #e0a458;

  /* Rollen */
  --ground: #0b323b;          /* Planfläche */
  --room: var(--petrol-deep);  /* Raumfläche */
  --corridor: #0e4350;         /* Verkehrsfläche */
  --wall: var(--petrol-light);
  --text: #eef5f6;
  --text-soft: var(--haze);
  --text-quiet: #8fb3bb;
  --line-soft: rgba(184, 211, 217, 0.22);

  --radius: 4px;
  --wall-in: 2px;
  --wall-out: 6px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 48px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--amber);
}

::selection { background: var(--amber); color: var(--petrol-deep); }

html { scrollbar-color: var(--petrol-light) var(--ground); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--petrol); border: 3px solid var(--ground); border-radius: 6px; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--radius); }

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.ico--lg { width: 28px; height: 28px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--amber); color: var(--petrol-deep); padding: 8px 14px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font-weight: 650; font-size: 1.0625rem; white-space: nowrap; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--amber); color: var(--petrol-deep); }
.btn--ghost { border: 1px solid var(--wall); color: var(--text); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 0.97rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #e9b675; }
  .btn--ghost:hover { border-color: var(--haze); background: rgba(184, 211, 217, 0.06); }
}

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 50, 59, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  height: 68px; display: flex; align-items: center; gap: 32px;
}
.nav__logo img { height: 30px; width: auto; }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { color: var(--text-soft); text-decoration: none; font-weight: 550; transition: color 200ms ease; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Logo (170px), vier Links (333px), Knöpfe (271px) und zwei Abstände brauchen 838px Zeile,
   die es erst ab 911px gibt (Rand 4vw). Bis 940px daher nur Logo und Knöpfe. */
@media (max-width: 940px) {
  .nav nav { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__inner { gap: 16px; }
  .nav__logo img { height: 26px; }
}

/* Raumstempel */
.stamp, .room__no {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-quiet);
}

/* ---------- Grundriss ---------- */
.hero { padding: clamp(20px, 3vw, 36px) var(--gutter) 0; }

.plan {
  --corridor-h: 64px;
  position: relative;
  max-width: var(--wrap); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  grid-template-rows: minmax(0, 1fr) var(--corridor-h) minmax(0, 1fr);
  height: clamp(560px, calc(100dvh - 68px - 92px), 700px);
  gap: var(--wall-in);
  padding: var(--wall-out);
  background: var(--wall);
  border-radius: 2px;
}
.plan > * { background: var(--room); position: relative; min-width: 0; min-height: 0; }

.foyer {
  grid-column: 1; grid-row: 1 / 4;
  padding: clamp(24px, 3.2vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.foyer > .stamp { position: absolute; top: 18px; left: 22px; }
.foyer__copy { max-width: 34rem; }
.foyer h1 { font-size: clamp(2.2rem, 3.1vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; }
.lead { margin-top: 20px; font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--text-soft); max-width: 30rem; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Registrieren (#1632): versteckt, bis main.js weiß, dass die öffentliche Registrierung an ist.
   Eigene Regel, weil .btn display setzt und das hidden-Attribut sonst überstimmt. */
[data-signup][hidden], [data-signup-off][hidden] { display: none; }
/* Unter den Knöpfen im Foyer, nur bei offener Registrierung (#12566). */
.actions__note { margin-top: 12px; color: var(--text-quiet); font-size: 0.95rem; }

/* Eingang: Lücke in der Außenwand mit Türflügel */
.entrance {
  position: absolute; bottom: calc(-1 * var(--wall-out)); left: clamp(24px, 3.2vw, 48px);
  width: 64px; height: var(--wall-out); background: var(--room);
}
.entrance::after {
  content: ""; position: absolute; left: 0; bottom: var(--wall-out);
  width: 64px; height: 64px;
  border-top-right-radius: 64px;
  border-top: 1px solid var(--wall); border-right: 1px solid var(--wall);
  opacity: 0.55;
}

.corridor {
  grid-column: 2 / 4; grid-row: 2;
  background: var(--corridor);
  display: flex; align-items: center;
}
/* offener Durchgang zum Foyer */
.corridor::before {
  content: ""; position: absolute; left: calc(-1 * var(--wall-in)); top: 0; bottom: 0;
  width: var(--wall-in); background: var(--corridor);
}
.stamp--corridor { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.corridor__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 1px dashed rgba(184, 211, 217, 0.18);
}

.room { padding: 16px 18px 14px; display: flex; flex-direction: column; overflow: hidden; }
.room--n1 { grid-column: 2; grid-row: 1; }
.room--n2 { grid-column: 3; grid-row: 1; }
.room--s1 { grid-column: 2; grid-row: 3; }
.room--s2 { grid-column: 3; grid-row: 3; }

.room__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.room__name { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--text); font-size: 0.98rem; }
.room__name .ico { color: var(--text-quiet); }

/* Türen: Lücke in der Wand zum Flur, Türflügel als Viertelkreis */
.door { position: absolute; left: 22px; width: 44px; height: var(--wall-in); background: var(--room); }
.door--s { bottom: calc(-1 * var(--wall-in)); }
.door--n { top: calc(-1 * var(--wall-in)); }
.door::after {
  content: ""; position: absolute; left: 0; width: 44px; height: 44px; opacity: 0.45;
  border-right: 1px solid var(--wall);
}
.door--s::after { bottom: var(--wall-in); border-bottom: 1px solid var(--wall); border-bottom-right-radius: 44px; }
.door--n::after { top: var(--wall-in); border-top: 1px solid var(--wall); border-top-right-radius: 44px; }

/* Nachrichten */
.feed {
  flex: 1; min-height: 0; margin-top: 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.msg { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 0.95rem; line-height: 1.4; }
.msg__meta { color: var(--text-quiet); font-size: 0.82rem; margin-bottom: 1px; }
.msg__meta b { color: var(--text); font-weight: 650; margin-right: 4px; font-size: 0.92rem; }
.msg__meta time { font-variant-numeric: tabular-nums; }
.msg__body > p:not(.msg__meta) { color: #d7e6e9; }
.avatar {
  width: 28px; height: 28px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--petrol); color: var(--haze);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 3px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 0.8rem; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.thread { display: inline-flex; align-items: center; gap: 4px; color: var(--text-quiet); font-size: 0.8rem; margin-bottom: 2px; }

.msg.is-new { animation: msg-in 420ms var(--ease-out) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Bote: das Amber-Quadrat aus der Marke */
.courier {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  background: var(--amber); border-radius: 1px;
  opacity: 0; pointer-events: none; z-index: 3;
  will-change: transform;
}

.plan__note { max-width: var(--wrap); margin: 12px auto 0; font-size: 0.84rem; color: var(--text-quiet); }

/* Grundriss schmal: Flur wird senkrechte Achse */
@media (max-width: 900px) {
  .plan {
    --corridor-w: 34px;
    height: auto;
    grid-template-columns: var(--corridor-w) minmax(0, 1fr);
    grid-template-rows: auto repeat(4, 210px);
  }
  .foyer { grid-column: 1 / 3; grid-row: 1; padding: 44px 22px 36px; }
  .corridor { grid-column: 1; grid-row: 2 / 6; }
  .corridor::before { left: 0; right: 0; top: calc(-1 * var(--wall-in)); bottom: auto; width: auto; height: var(--wall-in); }
  .corridor__line { left: 50%; right: auto; top: 0; bottom: 0; height: auto; border-top: 0; border-left: 1px dashed rgba(184, 211, 217, 0.18); }
  .stamp--corridor { right: auto; left: 50%; top: 14px; transform: translateX(-50%); writing-mode: vertical-rl; }
  .room--n1, .room--n2, .room--s1, .room--s2 { grid-column: 2; }
  .room--n1 { grid-row: 2; } .room--n2 { grid-row: 3; } .room--s1 { grid-row: 4; } .room--s2 { grid-row: 5; }
  .door, .door--s, .door--n { left: calc(-1 * var(--wall-in)); top: 56px; bottom: auto; width: var(--wall-in); height: 40px; }
  .door::after, .door--s::after, .door--n::after {
    top: 0; bottom: auto; left: var(--wall-in); width: 40px; height: 40px;
    border: 0; border-top: 1px solid var(--wall); border-right: 1px solid var(--wall); border-radius: 0 40px 0 0;
  }
  .entrance { left: 22px; }
}

/* ---------- Abschnitte ---------- */
section h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.022em; }
.section-lead { margin-top: 16px; color: var(--text-soft); font-size: 1.15rem; max-width: 40rem; }

/* Film */
.film { padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 9vw, 120px); }
/* Zeitleiste und Film passen zusammen in ein Fenster: Breite folgt auch der Fensterhöhe.
   183px = Navigation 68 + Luft 24 + Kapitelzeile 54 + Maßlinie 25 + Wände 12. */
.film__frame {
  margin-top: 56px; position: relative;
  max-width: min(100%, calc((100dvh - 183px) * 16 / 9 + 12px));
}
.film__frame { container: film / inline-size; }

.measure { position: relative; height: 54px; }
.measure li { position: absolute; left: calc(var(--at) * 100%); bottom: 10px; }
.measure button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0 0 0 10px; border: 0; background: none; cursor: pointer;
  color: var(--text-soft); font-size: 0.9rem; font-weight: 600; white-space: nowrap; line-height: 1.25;
  border-left: 1px solid var(--wall);
  transition: color 200ms ease;
}
.measure button:hover, .measure button[aria-current="true"] { color: var(--text); }
.measure__time { color: var(--text-quiet); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.measure li:last-child button { transform: translateX(0); }

.measure__rule {
  position: relative; height: 11px; margin-bottom: 14px;
  border-left: 1px solid var(--wall); border-right: 1px solid var(--wall);
}
.measure__rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--wall);
}
.measure__fill {
  position: absolute; left: 0; top: 4px; height: 3px; width: 100%;
  background: var(--amber); transform-origin: left; transform: scaleX(0);
}

.film__room {
  position: relative;
  padding: var(--wall-out); background: var(--wall);
}
.film__room video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--petrol-deep); }
.film__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 26px 0 22px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--amber); color: var(--petrol-deep); font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 10px 30px rgba(5, 25, 30, 0.45);
  transition: transform 160ms var(--ease-out), opacity 200ms ease;
}
.film__play .ico { width: 22px; height: 22px; }
.film__play:active { transform: translate(-50%, -50%) scale(0.97); }
.film__len { font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }
.film__play[hidden] { display: none; }

@media (max-width: 720px) {
  .film__room { padding: 4px; }
  .film__play { min-height: 52px; font-size: 1rem; padding: 0 18px; }
}

/* Legende */
.legend-section { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line-soft); }
.legend-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legend { margin: 0; border: var(--wall-in) solid var(--wall); }
.legend__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 24px; padding: 20px 24px; align-items: center; }
.legend__row + .legend__row { border-top: 1px solid var(--line-soft); }
.legend dt { display: flex; align-items: center; gap: 14px; font-weight: 650; font-size: 1.05rem; }
.legend dd { margin: 0; color: var(--text-soft); }
.legend__sym {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--wall); border-radius: var(--radius); color: var(--haze);
}
.legend__sym .ico { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .legend-layout { grid-template-columns: 1fr; }
  .legend__row { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .legend dd { padding-left: 54px; }
}

/* Schnitt */
.section-cut { padding: clamp(72px, 9vw, 120px) 0; background: var(--petrol-deep); }
.building {
  margin-top: 56px; position: relative;
  max-width: 980px;
}
.floor, .ground { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.floor__level {
  align-self: center; padding-right: 20px;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}
.floor__room {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 28px 32px;
  border-left: var(--wall-out) solid var(--wall); border-right: var(--wall-out) solid var(--wall);
  border-bottom: var(--wall-in) solid var(--wall);
  background: var(--ground);
}
.floor--top .floor__room { border-top: var(--wall-out) solid var(--wall); }
.floor__room .ico--lg { color: var(--haze); margin-top: 2px; }
.floor h3 { font-size: 1.3rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.floor p { margin-top: 6px; color: var(--text-soft); max-width: 44rem; }
.tag {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--wall); border-radius: var(--radius); color: var(--haze);
}
.ground .doors {
  display: flex; flex-wrap: wrap;
  border-top: var(--wall-out) solid var(--wall);
  margin-top: calc(-1 * var(--wall-in));
}
.doors li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 22px 0 0; margin-right: 6px;
  color: var(--text); font-weight: 600;
}
.doors .ico { color: var(--haze); width: 20px; height: 20px; }
@media (max-width: 720px) {
  .floor, .ground { grid-template-columns: 1fr; }
  .floor__level { padding: 0 0 8px; }
  .floor + .floor .floor__level { padding-top: 0; }
  .floor__room { padding: 22px 18px; border-left-width: 4px; border-right-width: 4px; grid-template-columns: 1fr; gap: 10px; }
  .floor { margin-top: 0; }
  .floor:not(.floor--top) .floor__level { display: block; margin-top: 14px; }
  .ground .floor__level { margin-top: 18px; }
}

/* Preise */
.pricing { padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 9vw, 120px); }
.switches { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--wall); border-radius: calc(var(--radius) + 2px); }
.seg button {
  border: 0; background: none; cursor: pointer; border-radius: var(--radius);
  min-height: 40px; padding: 0 16px; color: var(--text-soft); font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.seg button:active { transform: scale(0.97); }
.seg button[aria-checked="true"] { background: var(--haze); color: var(--petrol-deep); }

.price-plan {
  margin-top: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--wall-in); padding: var(--wall-out); background: var(--wall);
}
.plan-room { background: var(--room); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; }
.plan-room header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-room h3 { font-size: 1.35rem; }
.price { margin-top: 28px; font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price__unit { margin-top: 8px; color: var(--text-quiet); font-size: 0.95rem; }
.facts { margin-top: 28px; display: grid; gap: 10px; }
.facts--two { grid-template-columns: 1fr; }
.facts li { display: flex; gap: 10px; align-items: baseline; color: #d7e6e9; }
.facts .ico { color: var(--haze); width: 16px; height: 16px; transform: translateY(2px); }
.plan-room__extra { margin-top: auto; padding-top: 24px; color: var(--text-quiet); font-size: 0.95rem; }
.plan-room__cta { margin-top: auto; padding-top: 28px; }
.price-note { margin-top: 16px; color: var(--text-quiet); font-size: 0.9rem; max-width: 60rem; }
[data-price] { display: inline-block; }
[data-price].is-swapping { animation: swap 260ms var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@media (max-width: 960px) {
  .price-plan { grid-template-columns: 1fr; }
  .facts--two { grid-template-columns: 1fr; }
}

/* Plankopf */
.closing { padding: 0 0 clamp(72px, 9vw, 120px); }
.titleblock {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border: var(--wall-out) solid var(--wall);
}
.titleblock__main { padding: clamp(28px, 4vw, 56px); }
.titleblock__main h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.titleblock__main h2 span { color: var(--amber); }
.titleblock__main p { margin: 18px 0 32px; color: var(--text-soft); font-size: 1.15rem; }
.titleblock__main .actions--closing { margin-top: 0; }
.titleblock__fields { margin: 0; display: grid; border-left: var(--wall-in) solid var(--wall); }
.titleblock__fields > div { padding: 16px 24px; display: grid; gap: 2px; align-content: center; }
.titleblock__fields > div + div { border-top: 1px solid var(--line-soft); }
.titleblock__fields dt { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-quiet); }
.titleblock__fields dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
@media (max-width: 860px) {
  .titleblock { grid-template-columns: 1fr; border-width: 4px; }
  .titleblock__fields { border-left: 0; border-top: var(--wall-in) solid var(--wall); }
}

.footer { border-top: 1px solid var(--line-soft); padding: 28px 0 40px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer img { height: 26px; width: auto; opacity: 0.9; }
.footer p { color: var(--text-quiet); font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  .msg.is-new, [data-price].is-swapping { animation: fade 200ms ease both; }
  @keyframes fade { from { opacity: 0; } }
  .btn:active, .seg button:active { transform: none; }
}

/* Prüfrunde 1 */
.nb { white-space: nowrap; }
.film__play { left: calc(var(--wall-out) + 24px); top: auto; bottom: calc(var(--wall-out) + 24px); transform: none; white-space: nowrap; }
.film__play:active { transform: scale(0.97); }
@media (max-width: 900px) {
  .plan { grid-template-rows: auto repeat(4, 236px); }
  .entrance { left: auto; right: 22px; }
  .entrance::after { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--wall); border-radius: 64px 0 0 0; }
}
@media (max-width: 720px) {
  .film__play { left: 14px; bottom: 14px; min-height: 44px; padding: 0 14px; gap: 8px; font-size: 0.95rem; }
  .film__len { display: none; }
  .floor, .ground { position: relative; }
  .floor .floor__level, .floor:not(.floor--top) .floor__level { position: absolute; right: 22px; top: 22px; margin: 0; padding: 0; z-index: 1; }
  .ground .floor__level { margin-top: 0; padding: 0; }
  .ground .doors { margin-top: 0; padding-top: 4px; }
  .ground { padding-top: 18px; }
  .ground .floor__level { position: static; }
}
.room__head .room__no { order: 2; }
@media (min-width: 901px) {
  .room--s1 .room__head, .room--s2 .room__head { padding-left: 64px; }
}

/* Prüfrunde Finish-Review */
.courier { width: 18px; height: 18px; border-radius: 2px; box-shadow: 0 2px 8px rgba(5, 25, 30, 0.5); }
.titleblock__main h2 span { color: var(--haze); }
.measure__fill { background: var(--haze); }
.film__play { background: var(--petrol); color: var(--text); border: 1px solid var(--haze); }
.film__play .ico { color: var(--amber); }
.film__len { opacity: 0.8; }

/* Maßkette über dem Grundriss */
.plan-measure {
  max-width: var(--wrap); margin: 0 auto 10px; display: flex; height: 26px;
  border-bottom: 1px solid var(--wall); position: relative;
}
.plan-measure span {
  flex: var(--w) 1 0; position: relative; display: flex; align-items: flex-start; justify-content: center;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-quiet);
  border-left: 1px solid var(--wall);
}
.plan-measure span:last-child { border-right: 1px solid var(--wall); }
.plan-measure span::after { content: ""; position: absolute; bottom: -5px; left: -1px; width: 1px; height: 9px; background: var(--wall); }
.plan-measure span:last-child::before { content: ""; position: absolute; bottom: -5px; right: -1px; width: 1px; height: 9px; background: var(--wall); }
@media (min-width: 901px) { .plan { height: clamp(540px, calc(100dvh - 68px - 128px), 660px); } .foyer > .stamp { display: none; } }

/* Türbögen frei von Inhalt */
@media (min-width: 901px) {
  .room--n1, .room--n2 { padding-bottom: 54px; }
}
@media (max-width: 900px) {
  .plan-measure { display: none; }
  .foyer > .stamp { display: none; }
  .door, .door--s, .door--n { top: 10px; }
  .room__head { padding-left: 44px; }
}
@media (max-width: 720px) {
  .film__play { top: 14px; bottom: auto; }
  .film__len { display: inline; }
}

/* Preise bündig */
.plan-room header { display: grid; gap: 4px; }
.plan-room header .room__no { min-height: 2.6em; }

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; } /* mit Registrieren (#1632) zu breit für 320px */
.footer__links a { color: var(--text-soft); font-size: 0.92rem; }
.film__play { box-shadow: none; }
.plan-measure { padding-bottom: 4px; }

/* Rechtliches */
.nav__back { margin-left: auto; }
.legal { max-width: 46rem; padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.022em; }
/* German compounds (Geschäftsbedingungen, Auftragsverarbeitung, Unterauftragsverarbeiter) are wider
   than a 320 px phone at this size: hyphenate (lang=de), and break anywhere as a last resort. */
.legal h1, .legal h2 { hyphens: auto; overflow-wrap: anywhere; }
.legal p, .legal li, .legal address { overflow-wrap: break-word; }
.legal > .section-lead { margin-top: 16px; }
.legal section { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.legal h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.legal h3 { margin-top: 20px; font-size: 1.02rem; line-height: 1.3; letter-spacing: 0; }
.legal p, .legal address { margin-top: 12px; color: var(--text-soft); font-style: normal; max-width: 68ch; }
.legal address { color: var(--text); }
.legal a { color: var(--text); }
.legal .btn--primary { color: var(--petrol-deep); text-decoration: none; }
.legal__facts { margin: 12px 0 0; display: grid; gap: 8px; }
.legal__facts > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px; }
.legal__facts dt { color: var(--text-quiet); }
.legal__facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.legal ol, .legal ul { margin: 12px 0 0; padding-left: 1.4em; color: var(--text-soft); max-width: 68ch; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--text-quiet); }
.legal strong { color: var(--text); font-weight: 600; }
.legal__table { margin-top: 16px; overflow-x: auto; }
.legal .legal__packages { overflow-wrap: anywhere; }
.legal table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.legal th, .legal td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.legal thead th { color: var(--text); font-weight: 600; }
.legal tbody th { color: var(--text-soft); font-weight: 400; }
.legal td { color: var(--text); }
.legal__date { margin-top: 44px; font-size: 0.92rem; color: var(--text-quiet); }
.footer__links a[aria-current="page"] { color: var(--text); text-decoration-thickness: 2px; }
@media (max-width: 560px) { .legal__facts > div { grid-template-columns: 1fr; gap: 0; } }

/* Schmale Viewports (320 bis 480 px, auch bei Browser-Zoom): Navigation passt in eine Zeile.
   Bis 480px, weil Logo 26px + Knöpfe in Normalgröße erst ab etwa 480px in die Zeile passen. */
@media (max-width: 480px) {
  .nav__inner { gap: 12px; }
  .nav__logo { min-width: 0; flex: 0 1 auto; }
  .nav__logo img { height: 22px; }
  .nav .btn--small { padding: 0 12px; font-size: 0.9rem; min-height: 38px; }
  .nav__actions { gap: 8px; }
}

/* Unter 960px Rahmenbreite reicht der Platz zwischen den Kapitelmarken nicht mehr
   (KI-Assistent 0:40 und Demo 0:45 liegen 8,6 % auseinander): Kapitel als Zeile. */
@container film (max-width: 960px) {
  .measure { height: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
  .measure li { position: static; }
  /* steht am Dateiende, damit es die absolute Position der Grundregel schlägt */
  .measure__rule { display: none; }
}

/* ---------- Logoflug (#1294) ----------
   Ein einziges Logo: das Navigationslogo. Seine Marke (.brand) ist in Foyergröße gezeichnet
   und sitzt verkleinert im Kopf. main.js schiebt sie beim Laden ins Foyer über die
   Überschrift und führt sie beim Scrollen zurück in den Kopf (nur transform und opacity).
   Das Foyer hält den Platz frei (.hero-logo); die Kopie darin ist nur sichtbar, solange
   nichts fliegt: ohne Skript oder bei reduzierter Bewegung. Maße als Zahlen in px. */
:root { --logo-h: 30; --logo-big: 60; }
@media (max-width: 900px) { :root { --logo-big: 48; } }
@media (max-width: 940px) { :root { --logo-h: 26; } }
@media (max-width: 480px) { :root { --logo-h: 22; } }
@media (max-width: 360px) { :root { --logo-big: 40; } }

.brand { display: flex; height: calc(var(--logo-big) * 1px); width: max-content; }
.brand img { height: 100%; width: auto; max-width: none; }

.nav__logo.nav__logo--fly {
  position: relative; display: block; flex: none; min-width: 0;
  height: calc(var(--logo-h) * 1px);
  width: calc(var(--logo-h) * 249px / 44);
}
.nav__logo--fly .brand {
  --s: calc(var(--logo-h) / var(--logo-big));
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  transform: scale(var(--s));
  pointer-events: none;
}
/* Bis 412px zeigt der Kopf nur das Zeichen, denn Logo (124px), Abstand und beide Knöpfe
   (237px) brauchen 374px Zeile, die es erst ab 413px gibt (Rand 4vw). Der Schriftzug
   blendet beim Landen aus, das Zeichen landet auf dem Zeichen. */
@media (max-width: 412px) {
  .nav__logo.nav__logo--fly { width: calc(var(--logo-h) * 1px); }
  .nav__logo--fly .brand__word { opacity: 0; }
}
/* Der Fokusring wandert mit der Marke und bleibt 2px stark. */
.nav__logo--fly:focus-visible { outline: none; }
.nav__logo--fly:focus-visible .brand {
  outline: calc(2px / var(--s)) solid var(--amber);
  outline-offset: calc(3px / var(--s));
  border-radius: calc(var(--radius) / var(--s));
}
/* Die Knöpfe liegen über der fliegenden Marke. */
.nav__actions { position: relative; z-index: 1; }

.hero-logo { height: calc(var(--logo-big) * 1px); margin-bottom: clamp(22px, 2.6vw, 34px); pointer-events: none; }
html.is-flying .hero-logo { visibility: hidden; }
html.is-flying .nav__logo--fly .brand { will-change: transform; }