/* ===================================================================
   Startseite nach dem Anmelden. Baut auf den Farben und Bausteinen von
   gate.css auf, damit beides wie eine Anwendung wirkt und nicht wie zwei
   verschiedene Seiten.
   =================================================================== */

/* Grundschrift und Grundfarbe stehen in gate.css auf `body.gate` und
   greifen hier deshalb NICHT. Ohne diese Wiederholung fällt die Seite auf
   die Browservorgaben zurück: schwarze Serifenschrift auf dunklem Grund,
   praktisch unlesbar. */
body.start {
  display: block;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .01em;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(63, 189, 245, .10), transparent 58%),
    radial-gradient(100% 70% at 92% 8%, rgba(138, 118, 255, .10), transparent 60%),
    var(--tinte);
}

/* ---------- Kopfleiste ------------------------------------------------ */

.kopfleiste {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(6, 9, 16, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rand);
}

.kopfleiste .marke { margin: 0; font-size: .72rem; }

/* Zurück-Knopf. Steht ganz links, weil dort jeder ihn erwartet -- gleiche
   Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort
   ist kein "davor", und ein Knopf, der nichts tut, ist schlimmer als
   keiner. Auf den übrigen Seiten entscheidet kopf.js, ob er erscheint. */
.zurueck-knopf {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px 8px 12px;
  /* Verlaufsrahmen: Die Füllung ist DECKEND, dadurch bleibt vom unteren
     Verlauf nur der 1px schmale Rand sichtbar. Wäre sie durchsichtig,
     schiene der Rahmenverlauf durch die ganze Fläche und der Knopf sähe
     aus wie eine Hauptaktion -- das soll er gerade nicht. */
  background:
    linear-gradient(180deg, #151c28, #10161f) padding-box,
    linear-gradient(180deg, rgba(158, 196, 230, .40), rgba(158, 196, 230, .12)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-leise);
  font: inherit; font-size: .82rem; font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: color var(--tempo), box-shadow var(--tempo), background var(--tempo);
}

.zurueck-knopf__pfeil {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--tempo);
}

.zurueck-knopf:hover {
  color: var(--text);
  background:
    linear-gradient(180deg, #1a2431, #131b25) padding-box,
    linear-gradient(180deg, rgba(63, 189, 245, .62), rgba(138, 118, 255, .30)) border-box;
  box-shadow: 0 2px 12px -4px rgba(63, 189, 245, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Der Pfeil rückt beim Überfahren ein Stück nach links -- die Bewegung
   sagt in welche Richtung es geht, ohne zusätzlichen Text. */
.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-2px); }

.zurueck-knopf:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.zurueck-knopf:active .zurueck-knopf__pfeil { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .zurueck-knopf__pfeil { transition: none; }
  .zurueck-knopf:hover .zurueck-knopf__pfeil,
  .zurueck-knopf:active .zurueck-knopf__pfeil { transform: none; }
}

.kopfleiste__rechts { display: flex; align-items: center; gap: 12px; }

.wer {
  font-size: .86rem; color: var(--text-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}

.abmelden {
  padding: 7px 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand);
  border-radius: 9px;
  color: var(--text); font: inherit; font-size: .84rem; cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.abmelden:hover { background: rgba(255, 255, 255, .08); border-color: var(--rand-hell); }

/* ---------- Inhalt ---------------------------------------------------- */

.inhalt {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
}

.willkommen { margin-bottom: 38px; }
.willkommen .titel { margin-bottom: 6px; }

/* ---------- Zahlen ---------------------------------------------------- */

.zahlen-block { margin-bottom: 34px; }

.zahlen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}

.zahl {
  padding: 14px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.zahl__wert { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.zahl__name { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-still); }

/* Nur wenn wirklich etwas überfällig ist, wird die Kachel hervorgehoben --
   sonst stumpft die Farbe ab und man übersieht sie im Ernstfall. */
.zahl[data-warn="ja"] { border-color: rgba(255, 154, 162, .42); background: rgba(255, 154, 162, .07); }
.zahl[data-warn="ja"] .zahl__wert { color: var(--warn); }

/* ---------- Bereiche --------------------------------------------------- */

.bereiche {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.bereich {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}

.bereich__name { font-weight: 600; font-size: .95rem; }

.bereich__stand {
  margin-left: auto;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-still);
  white-space: nowrap;
}

/* Phase 1 ist in Arbeit - das wird hervorgehoben, der Rest bleibt ruhig. */
.bereich[data-phase="1"] { border-color: rgba(63, 189, 245, .34); }
.bereich[data-phase="1"] .bereich__stand { color: var(--akzent); }

/* Fertige Bereiche sind anklickbar und heben sich deutlich ab. */
.bereich[data-fertig="ja"] {
  padding: 0;
  border-color: rgba(63, 189, 245, .5);
  background: linear-gradient(100deg, rgba(63, 189, 245, .10), rgba(138, 118, 255, .07));
  transition: border-color var(--tempo), background var(--tempo);
}
.bereich[data-fertig="ja"]:hover { border-color: rgba(63, 189, 245, .8); }

.bereich__link {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 13px 15px;
  color: inherit; text-decoration: none;
  border-radius: var(--radius-klein);
}
.bereich__link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bereich[data-fertig="ja"] .bereich__stand { color: var(--akzent); font-weight: 600; }

.inhalt .fuss { margin-top: 40px; text-align: left; }

@media (max-width: 520px) {
  .kopfleiste { padding: 12px 16px; }
  .kopfleiste .marke { font-size: .64rem; }
  .wer { max-width: 34vw; }
}