/* Die Flaechen-Seite (flaechen.html) — nur das, was ausschliesslich sie
   braucht: das Merkband unter dem Auftakt, die Etagenliste und die
   dreiteilige Zeitleiste der Planung.

   Kopf, Fuss, Wortmarke, Grundfarben und Masse kommen aus
   rechtstext.css, das Seitengeruest (Oberflaechen, Auftakt, Foto,
   Textsektionen, Grundsatzliste, CTA, Weiterlesen-Karte, Abschluss,
   Auftritt beim Scrollen, Drucken) aus seite.css. Beide werden VOR
   dieser Datei geladen.

   Aus dem Entwurf bewusst NICHT uebernommen:
   - saemtliche Kopien von rechtstext.css und seite.css (Kopf, Fuss,
     .wrap, .hero, .foto, .text, .gs, .cta, .weiter, .schluss, .rv,
     Drucken) — rund zwei Drittel des Stilblocks;
   - `.merk .cta`, das den ruhigen Knopf zu einem gefuellten
     umgefaerbt hat. Fuer den gefuellten gibt es `.cta-btn`
     (rechtstext.css); zwei Formen fuer dieselbe Handlung sind genau
     das, was am 24.08. auf Geschichte und Lage aufgeraeumt wurde;
   - der Hover auf `.etage`: die Zeilen sind keine Links und fuehren
     nirgendwohin. */

/* ===== Das Merkband unter dem Auftakt =====

   Es steht bewusst oben und nicht am Seitenende: es ist nicht die
   Bitte um eine Anfrage, sondern die Pointe der Ueberschrift — wer
   jetzt kommt, entscheidet den Zuschnitt mit. Das ist die Nachricht
   der Seite, nicht ihr Nachsatz. */
.merk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vw, 44px);
  padding: 24px 28px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0.04));
}
.merk b {
  display: block;
  font: 400 18px 'Archivo Black', "Arial Black", sans-serif;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.merk span {
  font-size: 14.5px;
  color: var(--fg-muted);
}
@media (max-width: 640px) {
  .merk {
    flex-direction: column;
    align-items: stretch;
  }
  .merk .cta-btn {
    justify-content: center;
  }
}

/* ===== Was feststeht: die Etagen ===== */

.etagen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.etage {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 110px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.etage:first-child {
  border-top: 2px solid var(--accent);
}
.etage .lvl {
  font: 400 19px 'Archivo Black', "Arial Black", sans-serif;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.etage p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  max-width: 52ch;
}
.etage .st {
  display: inline-block;
  text-align: right;
  font: 800 9.5px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
  border: 1px solid currentColor;
}
/* „In Planung" ist ein Zustand und bleibt eine Umrandung. „Idee
   gesucht" ist eine Einladung und wird deshalb gefuellt — der
   Unterschied soll man sehen, ohne zu lesen. `--auf-akzent` statt
   eines festen Tons, weil der Akzent je Oberflaeche ein anderer ist. */
.st-frei {
  color: var(--accent);
}
.st-suche {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--auf-akzent);
}

.etagen-note {
  margin: 22px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 60ch;
}
.etagen-note a {
  color: var(--accent);
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  .etage {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .etage .st {
    justify-self: start;
    text-align: left;
  }
}

/* ===== Was entsteht: die Zeitleiste =====

   Drei Marken auf einer Linie: die erste voll (laeuft), die zweite
   gedeckt (kommt), die dritte offen (danach). Die Farben haengen an
   der Oberflaeche, damit die Leiste auch auf Cream und auf Gold
   traegt. */
.zeitleiste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .zeitleiste {
    grid-template-columns: 1fr;
  }
}
.zeitleiste div {
  position: relative;
  border-top: 1px solid var(--rule-solid);
  padding-top: 22px;
}
.zeitleiste div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border-radius: 50%;
}
.zeitleiste div:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent);
}
.zeitleiste div:nth-child(2)::before {
  background: var(--gold-deep);
}
.zeitleiste div:nth-child(3)::before {
  background: transparent;
  border: 2px solid var(--rule-solid);
}
.zeitleiste .wann {
  display: block;
  font: 800 10px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.zeitleiste b {
  display: block;
  font: 400 17px 'Archivo Black', "Arial Black", sans-serif;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 8px;
}
.zeitleiste p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* Drucken: das Merkband ist ein Bedienelement, die Angaben bleiben. */
@media print {
  .merk {
    display: none;
  }
  .etage,
  .zeitleiste div {
    break-inside: avoid;
  }
}