/* PURPLERHINO REAL ESTATE - Onepager
   Startseite unverändert aus dem Design-Prototyp (Entwurf 2a "Splitter").
   Unterseiten überarbeitet: die Szene tritt hinter Inhalt zurück, statt mit ihm
   um dieselbe Fläche zu konkurrieren.
   Alle cqw-Einheiten beziehen sich auf .viewport (container-type:inline-size),
   das im echten Build die Fensterbreite ist - im Prototyp war es der 1440/390er Rahmen. */

/* ---------- Fonts ---------- */

/* Archivo - Grotesk mit fester Statik, trägt Überschriften und Fließtext.
   Variabel 400-700, damit eine Datei den ganzen Gewichtsbereich abdeckt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
  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;
}

/* JetBrains Mono - ausschliesslich für Kleindaten: Navigation, Marken, Register-
   angaben. Nie für Fliesstext, nie als Überschrift. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Basis ---------- */

:root {
  --ink: #0b0819;

  --text: #f3eefa;
  --text-bright: #f4f0fa;
  --text-soft: #e2dbf0;
  /* Kleindaten stehen auf 10-12px; die beiden Stufen sind gegenüber dem Prototyp
     angehoben, damit sie auch über der Szene 4.5:1 halten. */
  --text-muted: #b6acd2;
  --text-dim: #a094c4;

  --lilac: #a294c4;
  --lilac-bright: #d5cbe8;
  --magenta: #ab1473;
  --pink: #f0b8dd;
  --rule: rgba(199, 155, 214, 0.2);
  --rule-soft: rgba(199, 155, 214, 0.12);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ruhige, exponentielle Verzögerung - kein Überschwingen. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-backdrop: 0;
  --z-page: 5;
  --z-header: 10;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--pink);
}

/* Ohne Tap-Rückmeldung fühlt sich ein Link auf dem Touchgerät unbestätigt an -
   dort gibt es keinen Hover, der den Treffer vorher quittiert. */
a:active {
  opacity: 0.7;
}

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

::selection {
  background: var(--magenta);
  color: #fff;
}

img {
  max-width: 100%;
}

/* ---------- Rahmen ---------- */

.viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  container-type: inline-size;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}

/* Die drei Hintergrundebenen: Schein, Szene, Abdunklung darüber.
   Sie liegen ausserhalb von <main>, damit die Animation beim Seitenwechsel
   ohne Neustart weiterläuft. */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-backdrop);
}

.backdrop__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    46% 46% at 50% 46%,
    rgba(93, 27, 111, 0.5) 0%,
    rgba(11, 8, 25, 0) 70%
  );
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.backdrop__scene {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.backdrop__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.backdrop__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 50% at 50% 48%,
    rgba(11, 8, 25, 0.88) 0%,
    rgba(11, 8, 25, 0.58) 46%,
    rgba(11, 8, 25, 0.05) 82%
  );
  transition: opacity 900ms var(--ease-out);
}

/* Textseiten: die Szene bleibt mittig wie auf der Startseite, tritt aber
   zurück - kleiner und gedimmt.
   :has() greift auf <main>, das der Router austauscht; der Übergang läuft
   deshalb beim Seitenwechsel von selbst. */
.viewport:has(> .page--text) .backdrop__scene {
  opacity: 0.55;
  transform: scale(0.94);
}

.viewport:has(> .page--text) .backdrop__glow {
  opacity: 0.6;
}

/* Derselbe Aufbau wie auf der Startseite, nur kräftiger: tiefer Grund in der
   Mitte, wo der Inhalt steht, Szene nach aussen hin sichtbar. Ersetzt die
   früheren Verläufe auf den einzelnen Seiten.

   Die Deckung im Kern ist bewusst nicht höher als 0.9 - darüber verschwindet
   die Szene ganz, und der Hintergrund ist dann nur noch dunkelgrau. Bei 0.9
   bleibt der schwächste Textton über dem hellsten Splitter bei 6.0:1 -
   nachgerechnet, nicht geschätzt. */
.viewport:has(> .page--text) .backdrop__veil {
  background: radial-gradient(
    82% 82% at 50% 48%,
    rgba(11, 8, 25, 0.9) 0%,
    rgba(11, 8, 25, 0.87) 48%,
    rgba(11, 8, 25, 0.62) 80%,
    rgba(11, 8, 25, 0.3) 100%
  );
}

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: clamp(16px, 2cqw, 30px) clamp(20px, 4cqw, 56px);
}

.site-header__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.9cqw, 11px);
  letter-spacing: 0.2em;
  color: var(--lilac);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2cqw, 30px);
  font-family: var(--mono);
  font-size: clamp(10px, 0.9cqw, 11px);
  letter-spacing: 0.16em;
  color: var(--lilac-bright);
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: color 260ms var(--ease-out);
}

/* Der einzige Punkt, der die Seite verlässt. Er läuft bewusst in derselben
   Farbe wie die übrigen - Rosa bedeutet hier "du bist hier", und ein dauerhaft
   rosa Eintrag würde als aktive Seite gelesen. Der Pfeil trägt die Markierung
   allein. */
.site-nav__external::after {
  content: "↗";
  margin-left: 0.45em;
  /* Der Pfeil sitzt optisch zu hoch auf der Grundlinie der Versalien. */
  vertical-align: -0.04em;
  opacity: 0.7;
}

/* Aktive Seite - im Prototyp gab es nur eine Ansicht, echte Unterseiten
   brauchen eine Markierung. Strich statt nur Farbe: die Markierung darf nicht
   allein über Farbe laufen. */
.site-nav a[aria-current="page"] {
  color: var(--pink);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  height: 1px;
  background: currentColor;
}

/* ---------- Seiten ---------- */

.page {
  position: absolute;
  inset: 0;
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
}

/* Inhalt kann auf kleinen/niedrigen Fenstern länger sein als der Rahmen:
   innerhalb der Seite scrollen, aber nie den oberen Rand abschneiden. */
.page--text {
  --column: 100%;
  /* Untergrenze für den oberen Rand: Höhe des Headers plus etwas Luft. Der
     Header ist eine eigene Ebene über der Seite, sein Platz muss hier frei
     bleiben - sonst läuft die Überschrift auf flachen Fenstern hinter die
     Navigation. Der Wert steht bei jeder Breite, bei der der Header seine Höhe
     ändert (siehe „Mobil"), und wird von jeder Regel abgefragt, die den oberen
     Rand setzt. So kann keine spätere Regel die Freihaltung aushebeln.
     Einzeilig ist der Header höchstens 104px hoch. */
  --top-min: 112px;

  justify-content: flex-start;
  /* Die Spalte steht mittig, der Text darin bleibt linksbündig - zentrierter
     Fliesstext wäre auf einer Unternehmensseite unlesbar. */
  align-items: center;
  gap: clamp(24px, 2.9cqw, 44px);
  padding: max(var(--top-min), clamp(92px, 12.5vh, 146px))
    clamp(22px, 4cqw, 64px) clamp(34px, 4cqw, 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Ab Tabletbreite hält der Inhalt eine feste Spaltenbreite; links und rechts
   daneben bleibt die gedimmte Szene sichtbar. */
@container (min-width: 900px) {
  .page--text {
    --column: min(1080px, 86cqw);
  }
}

/* Blöcke behalten ihre natürliche Höhe - sonst quetscht der Flexcontainer sie
   auf niedrigen Fenstern zusammen, statt die Seite scrollen zu lassen. */
.page--text > *,
.hero > * {
  flex-shrink: 0;
}

.page--text > * {
  width: 100%;
  max-width: var(--column);
}

.page:focus {
  outline: none;
}

/* ---------- Start (unverändert) ---------- */

.hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(24px, 3.2cqw, 42px);
  padding: clamp(80px, 10cqw, 130px) clamp(22px, 4cqw, 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hero__logo {
  width: clamp(250px, 38cqw, 540px);
  height: auto;
  /* verhindert, dass das Logo auf flachen Fenstern aus dem Rahmen wächst */
  max-height: 46vh;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 70px rgba(6, 3, 18, 0.92));
}

.hero__claim {
  margin: 0;
  font-size: clamp(26px, 3.2cqw, 46px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text-bright);
  text-align: center;
  text-shadow: 0 6px 40px rgba(11, 8, 25, 0.9);
  text-wrap: balance;
}

.hero__keywords {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(10px, 0.92cqw, 12px);
  line-height: 2;
  letter-spacing: 0.3em;
  color: var(--text-soft);
  text-transform: uppercase;
  text-align: center;
}

.hero__footnote {
  position: absolute;
  bottom: clamp(18px, 2.2cqw, 30px);
  left: 0;
  right: 0;
  z-index: var(--z-page);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ---------- Typografische Bausteine ---------- */

/* Trägt die Spaltenbreite; die Überschrift darin begrenzt ihr eigenes Mass. */
.page-head {
  display: block;
}

.page-title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(32px, 4.6cqw, 62px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text-bright);
  text-wrap: balance;
}

.page-title--imprint {
  max-width: 22ch;
  font-size: clamp(28px, 3.8cqw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Kleindaten: Marken, Register, Ortsangaben. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.8cqw, 52px);
}

.lead {
  flex: 1 1 340px;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.55cqw, 23px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text-soft);
  text-wrap: pretty;
}

.copy {
  flex: 1 1 300px;
  margin: 0;
  max-width: 58ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Unternehmen: die Kette ---------- */

/* Vier Schritte als Folge, nicht als vier gleichwertige Kacheln: eine Linie
   läuft durch, jeder Schritt setzt eine Marke darauf. Der letzte Schritt ist
   die These des Hauses und darum farbig abgesetzt. */
.chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 2.4cqw, 40px) clamp(18px, 2.2cqw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.chain__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: clamp(18px, 1.8cqw, 26px);
}

/* Die Marke auf der Linie. */
.chain__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(28px, 3cqw, 44px);
  height: 2px;
  background: var(--lilac);
}

.chain__step h2 {
  margin: 0;
  font-size: clamp(17px, 1.5cqw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.chain__step p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(14px, 1.05cqw, 15px);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.chain__step--hold::before {
  background: var(--pink);
  height: 3px;
}

.chain__step--hold h2 {
  color: var(--pink);
}

/* ---------- Bildbänder ---------- */

.band {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.band__img {
  display: block;
  width: 100%;
  height: clamp(140px, 16cqw, 198px);
  object-fit: cover;
  /* Der Grund ist sehr tief. Ein Foto mit hartem Beschnitt steht darauf als
     Fremdkörper, deshalb löst sich die Unterkante in den Seitengrund auf und
     die Helligkeit ist leicht zurückgenommen. */
  filter: brightness(0.88) saturate(0.88) contrast(1.05);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 74%,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 74%,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

.band__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.16em;
  color: var(--lilac);
  text-transform: uppercase;
}

.band__caption .credit {
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ---------- Karriere ---------- */

/* Auf der Karriere-Seite ist das Foto Beiwerk - Aussage und Adresse sind der
   Inhalt. Es bleibt deshalb flacher als das Gebäudeband auf der
   Unternehmen-Seite, damit die Seite in einen Bildschirm passt. */
.page--karriere .band__img {
  height: clamp(130px, 14cqw, 190px);
}

.career-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2.4cqw, 44px);
}

.career-head__title {
  flex: 1 1 360px;
}

.career-head__intro {
  flex: 1 1 300px;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* An der Stelle, an der die Stellenliste stand, steht jetzt ein Satz. Er
   übernimmt deren Linie, damit der Block als Inhalt gelesen wird und nicht als
   Nachsatz zum Foto, und trägt die Schriftgrösse des Leitsatzes: es ist die
   Antwort auf die Frage, wegen der jemand diese Seite öffnet. */
.career-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: clamp(18px, 1.8cqw, 26px);
  border-top: 1px solid var(--rule);
}

.career-notice p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.55cqw, 23px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text-soft);
  text-wrap: pretty;
}

.career-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6cqw, 48px);
  padding-top: clamp(2px, 0.6cqw, 8px);
}

.career-foot__block {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.career-foot__block h2 {
  margin: 0;
  font-size: clamp(16px, 1.4cqw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.career-foot__block p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.1cqw, 15px);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

.career-foot__contact {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  padding-left: clamp(0px, 1.6cqw, 28px);
  border-left: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: clamp(11px, 0.92cqw, 12px);
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Kontaktdaten im Fliesstext sind anklickbar, nicht zum Abtippen. */
.inline-link {
  border-bottom: 1px solid var(--rule);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.inline-link:hover {
  border-bottom-color: currentColor;
}

/* Die Bewerbungsadresse ist die einzige Handlung der Karriere-Seite - sie ist
   ein echter Link, kein Text zum Abtippen. */
.mail-link {
  align-self: flex-start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--pink);
  text-transform: none;
  letter-spacing: 0.08em;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.mail-link:hover {
  color: var(--text-bright);
}

/* Textlinks sind nur so hoch wie ihre Zeile - mit dem Finger zu wenig. Die
   Trefferfläche wächst über ein Pseudoelement, damit das Layout unberührt
   bleibt. Die Bewerbungsadresse steht allein und bekommt die vollen 44px;
   Telefon und E-Mail im Impressum stehen untereinander und werden nur so weit
   vergrössert, dass sich ihre Flächen nicht überlappen. */
@media (pointer: coarse) {
  .mail-link,
  .inline-link {
    position: relative;
  }

  .mail-link::after,
  .inline-link::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }

  .mail-link::after {
    inset: -12px -6px;
  }
}

/* ---------- Impressum ---------- */

/* Das Impressum ist kurz. Oben angeschlagen liesse es zwei Drittel des
   Bildschirms leer, deshalb sitzt es mittig - und die Angaben stehen zu zweit
   nebeneinander statt in einer breiten Reihe. Seit Aufsichtsbehoerde und
   § 18 MStV dazugekommen sind, sind es fuenf: zwei Reihen zu zweit, eine
   allein. Das faellt bei linksbuendigen Textblocken nicht auf. */
.page--impressum,
.page--datenschutz {
  justify-content: safe center;
}

.imprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 2.6cqw, 40px) clamp(22px, 3cqw, 56px);
}

@container (min-width: 700px) {
  .imprint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.imprint-grid__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.imprint-grid__item p {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.75;
  color: var(--text-soft);
}

/* Registerangaben sind Datensätze, keine Prosa - die Ziffernbreite der
   Monospace hält Nummern und Zeilen in Flucht. */
.imprint-grid__item--record p {
  font-family: var(--mono);
  font-size: clamp(13px, 1cqw, 13.5px);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.imprint-grid--legal {
  border-top: 1px solid var(--rule);
  padding-top: clamp(18px, 2.2cqw, 32px);
}

.imprint-grid--legal .imprint-grid__item p {
  max-width: 56ch;
  font-size: clamp(14px, 1.05cqw, 15px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Mobil ---------- */

/* Firmenname und Navigation passen nicht mehr in eine Zeile, sobald es eng
   wird. Die Grenze ist mit jedem Punkt gewandert: 480px bei vier, 600px bei
   fünf, jetzt 660px bei sechs - gemessen passt die Navigation ab 641px neben
   den Namen, der Rest ist Luft. Der Name bleibt stehen (er ist die Marke,
   nicht bloss ein zweiter Weg zur Startseite), die Navigation rutscht darunter.

   Sie darf ausserdem selbst umbrechen: sechs Punkte passen unterhalb von 491px
   auch über die volle Breite nicht mehr nebeneinander. Ohne wrap liefe sie dort
   seitlich aus dem Bild. */
@container (max-width: 659px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .site-header__brand {
    min-height: 34px;
  }

  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px 14px;
    letter-spacing: 0.06em;
  }

  /* Header mit Name über Navigation: 110px. Der Inhalt muss entsprechend tiefer
     anfangen, sonst schiebt er sich darunter. */
  .page--text {
    --top-min: 124px;

    padding-top: max(var(--top-min), clamp(120px, 16vh, 156px));
  }
}

/* Unterhalb von 491px bricht die Navigation um, der Header wird 156px hoch.
   Der Inhalt muss entsprechend tiefer anfangen, sonst laeuft er darunter.

   Hier stand vorher eine Verengung des Spaltenabstands auf 12px, die die
   üblichen Android-Breiten (412, 414, 428) einzeilig halten sollte. Mit dem
   sechsten Punkt ist das nicht mehr zu erreichen: dort bricht die Navigation
   ohnehin um, und zwar auf jedem Telefon. Dreizeilig wird sie nie, auch bei
   300px nicht. */
@container (max-width: 490px) {
  /* Wo die Navigation ohnehin umbricht, soll sie nicht irgendwo brechen: oben
     die Seiten, unten die beiden Rechtstexte. Der Umbruch wird erzwungen statt
     dem Zufall der Wortbreiten ueberlassen - sonst wandert die Grenze mit jeder
     Umbenennung.

     Gemacht wird das mit `order` und einem leeren Flex-Element als Trenner:
     ::after ist ein Kind des Flexcontainers, mit flex-basis 100% draengt es
     alles Nachfolgende in die naechste Zeile. Hoehe 0, es ist nur die Kante. */
  .site-nav__external {
    order: 1;
  }

  .site-nav::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }

  .site-nav__legal {
    order: 3;
  }

  .page--text {
    --top-min: 172px;
  }
}

/* Zeile 1 traegt vier Punkte, und "Mietangebote" ist der laengste davon. Mit
   dem regulaeren Abstand von 14px reisst sie ab 331px; 10px druecken die
   Grenze auf 319px und decken damit 320px ab, die schmalste Breite, die noch
   vorkommt (iPhone SE der ersten Generationen).

   Diese Verengung stand hier schon einmal, fuer fuenf Punkte und mit dem Ziel,
   die Navigation einzeilig zu halten. Das war mit dem sechsten Punkt nicht mehr
   zu erreichen. Jetzt hat sie ein Ziel, das sie erreicht: die gewuenschte
   Aufteilung auf zwei Zeilen zu halten. */
@container (max-width: 429px) {
  .site-nav {
    column-gap: 10px;
  }
}

/* Noch schmaler traegt Zeile 1 "Mietangebote" auch mit 10px nicht mehr; der
   Punkt rutscht auf eine eigene Zeile und der Header wird 204px hoch. Die
   Aufteilung stimmt dann nicht mehr, aber sie bricht wenigstens nicht: der
   Inhalt faengt entsprechend tiefer an. Betrifft Geraete unter 320px. */
@container (max-width: 318px) {
  .page--text {
    --top-min: 218px;
  }
}

/* Auf schmalen Geräten trägt der Inhalt die ganze Breite; die Szene läuft
   ungerückt dahinter, gedimmt bleibt sie trotzdem. */
@container (max-width: 899px) {
  .viewport:has(> .page--text) .backdrop__scene {
    opacity: 0.26;
    transform: none;
  }

  .viewport:has(> .page--text) .backdrop__glow {
    transform: none;
  }

  .viewport:has(> .page--text) .backdrop__veil {
    background: linear-gradient(
      180deg,
      rgba(11, 8, 25, 0.96) 0%,
      rgba(11, 8, 25, 0.94) 100%
    );
  }

  .career-foot__contact {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-height: 640px) {
  .hero {
    gap: clamp(16px, 2.4cqw, 28px);
    padding-top: clamp(64px, 8cqw, 100px);
    padding-bottom: clamp(48px, 6cqw, 80px);
  }

  .hero__logo {
    max-height: 38vh;
  }

  .page--text {
    padding-top: max(var(--top-min), clamp(84px, 12vh, 120px));
    gap: clamp(20px, 2.6cqw, 34px);
  }
}

/* ---------- Bewegung ---------- */

/* Der Router tauscht nur <main> aus. Die Blöcke der neuen Seite laufen gestaffelt
   ein - kurz, ohne Überschwingen, passend zum Zurücktreten der Szene.
   `both` sorgt dafür, dass bei ausgeschalteter Bewegung sofort der Endzustand
   steht, statt dass der Inhalt unsichtbar bleibt. */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page--text > * {
  animation: page-enter 620ms var(--ease-out) both;
}

.page--text > *:nth-child(2) {
  animation-delay: 70ms;
}
.page--text > *:nth-child(3) {
  animation-delay: 140ms;
}
.page--text > *:nth-child(4) {
  animation-delay: 200ms;
}
.page--text > *:nth-child(n + 5) {
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Druck ---------- */

/* ---------- Hinweis vor externen Links ---------- */

/* Diese Seite ruft keine fremden Server auf. Ein externer Link durchbricht das,
   deshalb steht davor ein Hinweis. Er ist bewusst klein und ohne Dramatik: eine
   Auskunft, keine Warnung. Gebaut wird er von leaving.js, hier steht nur, wie er
   aussieht. */
.leaving {
  width: min(420px, calc(100vw - 40px));
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  /* Deutlich dichter als die Szene dahinter, sonst flimmert Text darueber. */
  background: #140f26;
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.leaving::backdrop {
  background: rgba(6, 4, 14, 0.72);
}

.leaving__title {
  margin: 12px 0 0;
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.leaving__body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Der Hostname ist die eigentliche Auskunft des Dialogs. */
.leaving__host {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-soft);
}

.leaving__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 26px);
}

/* Beide Knoepfe tragen dieselbe Hoehe wie die Touchziele der Navigation. */
.leaving__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.leaving__btn:hover {
  border-color: var(--lilac);
  color: var(--text-bright);
}

/* Der weiterfuehrende Knopf ist der einzige Magenta-Fleck im Dialog: die
   Handlung, die die Seite verlaesst, ist auch die einzige, die auffaellt. */
.leaving__btn--go {
  border-color: var(--magenta);
  background: var(--magenta);
  color: #fff;
}

.leaving__btn--go:hover {
  border-color: var(--pink);
  background: var(--pink);
  color: var(--ink);
}

.leaving__btn:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .leaving__btn {
    transition: none;
  }
}

/* Das Impressum wird ausgedruckt oder als PDF abgelegt - Anbieterkennzeichnung
   ist ein Dokument. Ohne diesen Block käme eine einzelne, abgeschnittene Seite
   mit hellem Text auf Weiss heraus, weil der Rahmen 100dvh hoch ist und
   html/body auf overflow:hidden stehen.

   Die Farbtoken werden für den Druck neu belegt, statt Dutzende Regeln zu
   überschreiben - genau dafür sind Token da. */
@media print {
  :root {
    --ink: #fff;
    --text: #111;
    --text-bright: #000;
    --text-soft: #1a1a1a;
    --text-muted: #333;
    --text-dim: #555;
    --lilac: #555;
    --lilac-bright: #222;
    --pink: #000;
    --rule: rgba(0, 0, 0, 0.3);
    --rule-soft: rgba(0, 0, 0, 0.18);
  }

  html,
  body {
    height: auto;
    overflow: visible;
  }

  .viewport {
    height: auto;
    overflow: visible;
    container-type: normal;
  }

  /* Die Szene ist Bildschirmatmosphäre und hat auf Papier nichts zu suchen. */
  .backdrop {
    display: none;
  }

  .page {
    position: static;
    display: block;
  }

  .page--text,
  .hero {
    padding: 0;
    overflow: visible;
  }

  .page--text > * {
    max-width: none;
    animation: none;
    margin-bottom: 20px;
  }

  .site-header {
    position: static;
    padding: 0 0 24px;
  }

  /* Die Navigation ist auf Papier ein toter Link. */
  .site-nav {
    display: none;
  }

  .hero__logo {
    filter: none;
  }

  .hero__claim {
    text-shadow: none;
  }

  .hero__footnote {
    position: static;
  }

  .band__img {
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  a {
    text-decoration: underline;
  }

  /* Die Wortmarke ist zwar ein Link, auf Papier aber ein Briefkopf. */
  .site-header__brand {
    text-decoration: none;
  }
}