/* 1mpct.de/ — App-Layer der Startseite.
   Fassung 3, 2026-08-26 (Startseiten-Nachbau). Die Fassung vom 2026-08-25
   liegt unter 08 Bereiche/Website & Webspace/XX_Archiv/
   1mpct.de_Startseite_vor-Nachbau_2026-08-26/.

   Grundsatz unveraendert: kein eigener Farbwert, ausschliesslich
   Theme-Variablen (UI-Module_Standard Abschnitt 1). Was hier steht, ist genau
   das, was Theme und sections-Modul nicht abdecken -- alles andere kommt aus
   1ki-theme.css und sections.css. */

/* Embossed Background: Standard-Mechanik aus dem Theme (--theme-bg), siehe
   Vorbild web.1.ki/assets/hintergrund.css bzw. backontrack.css. Absolute
   URL Pflicht (loest sich am Ort der Verwendung auf, also auf ui.1.ki, nicht
   auf 1mpct.de). baue_frame() injiziert hintergrund.css nur fuer web.1.ki
   selbst (deploy.py, ist_web_1ki-Zweig) -- fuer 1mpct.de deshalb hier von
   Hand, exakt derselbe Mechanismus. */
body { --theme-bg: url("https://1mpct.de/assets/bg-emblem.jpg"); }

/* ------------------------------------------------------------- Hero ------ */

/* Die drei Rollenbezeichnungen stehen auf 1mpact.ai als drei Teile einer
   Eyebrow-Zeile nebeneinander. Trennzeichen per ::before statt im Markup,
   damit Vorleseprogramme nicht "Mittelpunkt" vorlesen. */
.home-eyebrow-teile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.home-eyebrow-teile span + span::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--line-strong);
}

/* Das Portraet ist ein freigestellter Kreis auf transparentem Grund. Der
   Rahmen und die Ecken, die .sec-hero-visual sonst setzt, wuerden ein
   sichtbares Quadrat darum ziehen. */
.home-portraet img {
  border: 0;
  border-radius: 0;
  max-width: 420px;
  margin-inline: auto;
}

/* --------------------------------------------------------- Abschnitte ---- */

/* Einzelne primaere Schaltflaeche am Fuss eines Abschnitts. Regel aus
   UI-Module_Standard Abschnitt 6a1: hoechstens eine .btn je Abschnitt, die
   drei Karten darueber tragen deshalb .link-cta. */
.home-sec-cta {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

/* Bildkacheln in den zweispaltigen Abschnitten. Gleiche Optik wie
   .sec-hero-visual, aber ohne dessen Hero-Sonderfall. */
.home-bild { margin: 0; }

.home-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* Hochformatige Illustrationen wuerden neben kurzem Text die Zeile sprengen.
   Deckelung wie beim Portraet, mittig im eigenen Feld. */
.home-bild-hoch img {
  max-width: 380px;
  margin-inline: auto;
}

/* ---------------------------------------------- Fokusthemen, Tab-Strecke -- */

/* Grundzustand ohne JavaScript: die Leiste traegt hidden im Markup, alle
   fuenf Themen stehen untereinander und sind durch eine Linie getrennt.
   root.js nimmt hidden weg und setzt data-tabs-bereit. */
.home-tab + .home-tab {
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}

.home-tabs-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.home-tabs-leiste[hidden] { display: none; }

.home-tabs-leiste button {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  cursor: pointer;
}

.home-tabs-leiste button:hover {
  color: var(--text-strong);
  background: var(--glass);
}

.home-tabs-leiste button:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.home-tabs-leiste button[aria-selected="true"] {
  color: var(--midnight);
  background: var(--sky);
  border-color: var(--sky);
}

/* Im aufgeruesteten Zustand traegt jedes inaktive Panel hidden. Die
   Trennlinie zwischen den Panels entfaellt dann, weil immer nur eines
   sichtbar ist. */
.home-tabs[data-tabs-bereit] .home-tab + .home-tab {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* ------------------------------------------------------------ Kennzahlen -- */

.home-kennzahlen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-4);
  text-align: center;
}

@media (min-width: 860px) {
  .home-kennzahlen ul { grid-template-columns: repeat(4, 1fr); }
}

.home-kennzahlen li { margin: 0; }
.home-kennzahlen li::before { content: none; }

.home-kennzahl-wert,
.home-kennzahl-einheit {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  /* Beim Hochzaehlen aendert sich die Ziffernbreite sonst bei jedem Schritt
     und die ganze Zeile zappelt. */
  font-variant-numeric: tabular-nums;
}

.home-kennzahl-einheit { color: var(--sky); }

.home-kennzahl-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

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

/* Zusaetzlich zum globalen Guard im Theme. root.js prueft dieselbe
   Einstellung noch einmal in JavaScript und setzt den Endwert dann sofort,
   statt hochzuzaehlen. */
@media (prefers-reduced-motion: reduce) {
  .home-kennzahl-wert { transition: none; }
}

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

@media print {
  .home-tabs-leiste { display: none; }
  /* Im Druck ist die Tab-Logik hinderlich: alle fuenf Themen sollen aufs
     Papier, auch die, die am Bildschirm gerade ausgeblendet sind. */
  .home-tabs[data-tabs-bereit] .home-tab[hidden] { display: grid !important; }
}