/* ==========================================================================
   Vista City — Abschnitte der Startseite
   ========================================================================== */

/* --- Laufband --------------------------------------------------------------
   Die Rotation sitzt auf .ticker, das Beschneiden aber ausschließlich auf
   dem Wrapper. Lag beides auf demselben Element, kappte overflow:hidden die
   schräg stehenden Buchstaben oben und unten.
   -------------------------------------------------------------------------- */

/* Der Uebergang liegt in einer eigenen, mitgedrehten Fläche.
   Waagerecht auslaufend stand die Kante quer zum schrägen Band und wirkte
   wie ein Fehler. Jetzt ist die Auslaufkante um denselben Winkel gedreht wie
   das Band, läuft also parallel dazu und schließt bündig ab. */

.tickerwrap {
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 8rem) clamp(2.5rem, 4vw, 4rem);
}

.tickerwrap::before {
  content: '';
  position: absolute;
  /* Seitlicher und oberer Ueberstand: durch die Drehung heben sich die
     Ecken, ohne Reserve entstünden dort Lücken zur Hero-Fläche. */
  left: -10%;
  right: -10%;
  top: -4rem;
  height: calc(100% + 4rem);
  rotate: -1.2deg;
  /* Dunkel: lange, weiche Blende — auf dunklem Grund bleiben die
     Zwischenstufen dunkel und fallen nicht auf. */
  background: linear-gradient(180deg,
    var(--fade) 0%,
    var(--fade) 58%,
    color-mix(in oklab, var(--fade) 72%, transparent) 72%,
    color-mix(in oklab, var(--fade) 38%, transparent) 84%,
    color-mix(in oklab, var(--fade) 12%, transparent) 93%,
    transparent 100%);
}

/* Hell: geschlossene Kante statt Blende.
   Ein Verlauf von Schwarz nach Transparent muss über hellem Grund durch
   Grau — jede Zwischenstufe wird dort zu einem sichtbaren Schleier. Deshalb
   bleibt die Fläche hier bis kurz unter das Band volldeckend und endet dann
   auf vier Prozent Strecke. Das ergibt eine saubere Kante, die durch die
   Drehung schräg unter dem Band steht — ohne jede Grauzone. */
:root[data-theme='light'] .tickerwrap::before {
  background: linear-gradient(180deg,
    var(--fade) 0%,
    var(--fade) 78%,
    transparent 82%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .tickerwrap::before {
    background: linear-gradient(180deg,
      var(--fade) 0%,
      var(--fade) 78%,
      transparent 82%);
  }
}

.ticker {
  position: relative;
  z-index: 1;
  padding-block: 1.15rem;
  /* Themeunabhängig dunkel: das Band liegt auf der dunklen Übergangsfläche,
     nicht auf der Seite. Mit var(--surface) war es im hellen Theme ein
     weißer Halbtransparenz-Schleier über Schwarz — daher das Grau. */
  border-block: 1px solid oklch(100% 0 0 / 0.12);
  background: oklch(18% 0.008 300 / 0.72);
  rotate: -1.2deg;
  scale: 1.05;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 38s linear infinite;
}
.tickerwrap:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 0.72rem + 0.45vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(88% 0.004 300);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  background: var(--accent);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* --- Bento-Raster ----------------------------------------------------------
   Kacheln heben sich beim Zeigen nicht an und leuchten nicht — sie bekommen
   eine Akzentkante und einen Nummernwechsel. Anheben plus Farbschein wirkt
   auf jeder Kachel gleich und damit beliebig.
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 0.9vw, 0.9rem);
}

.tile {
  position: relative;
  z-index: 0;
  display: grid;
  align-content: end;
  gap: 0.6rem;
  min-height: 16rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-mid) linear,
    background-color var(--dur-mid) linear;
}
.tile:hover { border-color: var(--line-hi); background: var(--surface-hi); }

/* Akzentkante fährt oben ein — eine Bewegung, kein Leuchten. */
.tile::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.tile:hover::before { transform: scaleX(1); }

.tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 0.85vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-wrap: balance;
}
.tile__text {
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Kategoriezeile mit vorangestellter Nummer, durch eine Linie abgesetzt.
   Die Nummer stand vorher als große Konturzahl oben in der Kachel — zu
   schwach, um zu tragen, und ohne Bezug zum Text darunter. */
.tile__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--dur-mid) linear;
}
.tile:hover .tile__kicker { color: var(--accent); }

.tile__index {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.tile__index::after {
  content: '';
  width: clamp(1.25rem, 2.5vw, 2.25rem);
  height: 1px;
  background: var(--line-hi);
}

/* Leitkachel: doppelte Höhe, eigenes Bildmaterial. */
.tile--lead {
  grid-column: span 3;
  grid-row: span 2;
  min-height: 34rem;
  color: oklch(99% 0 0);
  border-color: transparent;
}
.tile--lead:hover { background: var(--surface); }
.tile--lead .tile__title { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.2rem); }
.tile--lead .tile__text { color: oklch(90% 0.004 300); max-width: 44ch; }
.tile--lead .tile__kicker { color: oklch(82% 0.004 300); border-top-color: oklch(100% 0 0 / 0.2); }
.tile--lead:hover .tile__kicker { color: oklch(99% 0 0); }
.tile--lead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--src);
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out-expo);
}
.tile--lead:hover::after { transform: scale(1.07); }

/* Scrim, damit der Text auf dem Foto in beiden Themes trägt. */
.tile__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    oklch(6% 0.004 300 / 0.35) 0%,
    oklch(6% 0.004 300 / 0.55) 45%,
    oklch(6% 0.004 300 / 0.92) 100%);
}

.tile--wide, .tile--half { grid-column: span 3; }

/* --- Kennzahlen ------------------------------------------------------------
   Zahlen in Volltonfarbe statt Verlaufsschrift.
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ==========================================================================
   Schlussaufruf — Vollbild mit Statuspanel statt zentriertem Textblock
   ========================================================================== */

.closer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 4rem + 8vw, 10rem);
  border-top: 1px solid var(--line);
  color: oklch(99% 0 0);
}

.closer .mark { --mark-color: oklch(100% 0 0 / 0.5); z-index: 1; }
.closer .mark--accent { --mark-color: var(--accent); }
.closer .edgenote { color: oklch(80% 0.004 300); z-index: 1; }

.closer__media { position: absolute; inset: 0; z-index: -2; }
.closer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* Abdunklung von links, damit die Headline steht und das Foto rechts atmet. */
.closer__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      oklch(6% 0.004 300 / 0.94) 0%,
      oklch(6% 0.004 300 / 0.78) 38%,
      oklch(6% 0.004 300 / 0.42) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg-deep) 100%);
}

.closer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.closer__eyebrow { color: oklch(84% 0.004 300); display: flex; align-items: center; gap: 0.7rem; }
.closer__eyebrow::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  background: var(--state-live);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--state-live) 25%, transparent);
}

.closer__title {
  margin-block: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(3rem, 1.5rem + 7vw, 8rem);
  line-height: 0.84;
}
.closer__title em { font-style: normal; color: var(--accent); }

.closer__text {
  max-width: 40ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  color: oklch(84% 0.004 300);
  font-size: var(--text-lg);
  text-wrap: pretty;
}
.closer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.closer__actions .btn--ghost {
  background: transparent;
  border-color: oklch(100% 0 0 / 0.35);
  color: oklch(99% 0 0);
  backdrop-filter: none;
}
.closer__actions .btn--ghost:hover {
  background: oklch(99% 0 0);
  border-color: oklch(99% 0 0);
  color: oklch(12% 0.008 300);
}

/* --- Live-Anzeige ----------------------------------------------------------
   Bewusst kein umrandeter Kasten mit Zeilenliste: eine Karte mit Rahmen,
   gleichmäßigen Trennlinien und Label-Wert-Paaren sieht auf jeder Seite
   gleich aus. Hier stehen nur zwei Angaben — als Zahl, nicht als Tabelle.
   -------------------------------------------------------------------------- */

.live {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--accent);
}

.live__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(80% 0.004 300);
}
.live__dot {
  width: 0.45rem; height: 0.45rem;
  border-radius: var(--r-pill);
  background: var(--state-live);
  animation: pulse 2.4s var(--ease-out-expo) infinite;
}

.live__figure {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  line-height: 0.9;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.live__figure b {
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  font-weight: 400;
  color: oklch(99% 0 0);
}
.live__figure span {
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  color: oklch(70% 0.004 300);
}

.live__caption {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: oklch(74% 0.004 300);
}

.live__next {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(100% 0 0 / 0.16);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: oklch(72% 0.004 300);
}
.live__next b { color: oklch(97% 0.002 300); font-weight: 700; }

.live__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: oklch(60% 0.004 300);
}
.live__hint b { color: oklch(88% 0.002 300); }

/* --- Umbrüche ------------------------------------------------------------ */

@media (max-width: 72rem) {
  .closer__grid { grid-template-columns: 1fr; }
  .status { max-width: 26rem; }
}
@media (max-width: 70rem) {
  .tile--lead { grid-column: 1 / -1; grid-row: auto; min-height: 26rem; }
}
@media (max-width: 44rem) {
  .bento { grid-template-columns: 1fr; }
  .tile--lead, .tile--wide, .tile--half { grid-column: 1 / -1; }
}

/* ==========================================================================
   Drei Staaten
   ---------------------------------------------------------------------------
   Das Alleinstellungsmerkmal des Servers bekommt einen eigenen Abschnitt
   statt einer Kachel unter vielen: drei gleichwertige Karten nebeneinander,
   darunter der Kreislauf, der erklärt, warum sie zusammenhängen.
   ========================================================================== */

.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-mid) linear, background-color var(--dur-mid) linear;
}
.state:hover { border-color: var(--line-hi); background: var(--surface-hi); }
.state:hover > .topo { opacity: calc(var(--topo-opacity, 1) * 1.9); }

.state__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.state__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.state__rule {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.state__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.state__text { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }

/* Währung und Führung als Kenndaten unter dem Text. */
.state__facts {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.state__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.state__facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.state__facts dd {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.state__symbol {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
}

/* --- Wirtschaftskreislauf --------------------------------------------------- */

.cycle {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cycle__head { display: grid; gap: 0.8rem; max-width: 52ch; }
.cycle__head h3 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); line-height: 0.98; }
.cycle__head p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }

/* Region unter dem Staatsnamen: ordnet ein, ohne den Namen zu verdraengen. */
.state__region {
  margin-top: -0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}