/*
 * Ergänzungen zum übernommenen Super-CSS.
 *
 * Super lieferte Mobile-Navigation und Bild-Lightbox über sein React-Bundle
 * aus; beides ist hier durch eigenes CSS/JS ersetzt (siehe assets/js/site.js).
 * Alles andere kommt unverändert aus static.css / notion.css / super.css.
 */

/* ---------------------------------------------------------------- Mobile-Nav
 * Ab 860px blendet super.css die Item-Liste aus und zeigt den Burger.
 * Geöffnet klappt die Liste als Panel unter der Navbar auf.
 */
@media (max-width: 860px) {
  /* Wrapper hat inline position:relative - für das Panel brauchen wir
     die Navbar als Bezugspunkt. */
  .super-navbar.is-open .super-navbar__content > div:has(.super-navbar__item-list) {
    position: static !important;
  }

  .super-navbar.is-open .super-navbar__item-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    gap: 0;
    padding: 8px 0 12px;
    background: var(--navbar-background-color);
    box-shadow: 0 8px 16px rgb(0 0 0 / 8%);
    border-top: 1px solid var(--color-border-default, rgb(0 0 0 / 8%));
    z-index: 41;
  }

  .super-navbar.is-open .super-navbar__item-list li {
    width: 100%;
  }

  .super-navbar.is-open .super-navbar__item-list .super-navbar__item {
    display: block;
    width: 100%;
    padding: 10px 24px;
  }
}

.super-navbar__menu-open {
  cursor: pointer;
}

/* ----------------------------------------------------- Blättern am Seitenende
 * Vor/Zurück durch alle Seiten. Erzeugt von tools/from_notion.py.
 *
 * Die früher von Hand in Notion gepflegten Links waren gekürzt („So läufts
 * bei uns"), weil sie in zwei Spalten nebeneinander standen und auf dem
 * Handy umbrachen. Hier stehen sie schmal untereinander - damit passen auch
 * lange Titel wie „Warum Leute kommen oder gehen" ohne Kürzung.
 */
.seitenwechsel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-default, rgb(0 0 0 / 10%));
}

.seitenwechsel__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--border-radii-layout, 5px);
  color: var(--color-text-default);
  text-decoration: none;
  transition: background 150ms ease;
}

.seitenwechsel__link:hover {
  background: var(--color-ui-hover-bg, rgb(0 0 0 / 4%));
}

.seitenwechsel__label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-default-light, rgb(0 0 0 / 50%));
}

.seitenwechsel__titel {
  font-weight: 500;
  /* Lange Titel dürfen umbrechen statt das Layout zu sprengen. */
  overflow-wrap: break-word;
}

.seitenwechsel__leer {
  display: none;
}

/* Ab Tablet nebeneinander - dort ist genug Platz für beide Titel. */
@media (min-width: 700px) {
  .seitenwechsel {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }

  .seitenwechsel__link {
    flex: 0 1 auto;
    max-width: 48%;
  }

  .seitenwechsel__link--weiter {
    text-align: end;
    /* Hält „Weiter" rechts, auch wenn es kein „Zurück" gibt. */
    margin-inline-start: auto;
  }

  .seitenwechsel__leer {
    display: block;
  }
}

/* ----------------------------------------------------------------- Lightbox
 * Die Bildquellen stehen bereits als data-full-size im Markup - das hat
 * Super so ausgeliefert, wir nutzen es weiter.
 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgb(0 0 0 / 80%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 32px rgb(0 0 0 / 40%);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.lightbox__close:hover {
  background: rgb(255 255 255 / 15%);
}

/* Nur anklickbar machen, was auch wirklich eine Vollbildquelle hat. */
.notion-image span[data-full-size] {
  cursor: zoom-in;
}

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

/* ------------------------------------------------------------------ Charts
   Die Kennzahlen auf /team-in-zahlen. Balken aus Elementen mit Prozentbreite
   statt SVG: Die Beschriftung bleibt echter Text und die Charts skalieren mit
   der Spalte, ohne dass die Schrift auf dem Handy mitschrumpft. Erzeugt von
   tools/from_notion.py aus tools/kennzahlen.json. */

/* Der Abstand trennt zwei Diagramme, die im Callout untereinander stehen. Er
   muss deutlich größer sein als der Abstand zwischen einem Diagramm und seiner
   eigenen Bildunterschrift, sonst wirkt die Unterschrift wie eine Überschrift
   des nächsten Diagramms. */
.notion-chart-gruppe {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 18px 0 6px;
}

.notion-chart {
  margin: 0;
}

.notion-chart__reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notion-chart__zeile {
  display: grid;
  grid-template-columns: minmax(5.5em, 8.5em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.3;
}

.notion-chart__label {
  color: var(--color-text-default-light);
  overflow-wrap: break-word;
}

/* Die Spur zeigt, wofür 100 % stehen - ohne sie schwebt der Balken im Nichts. */
.notion-chart__spur {
  background: var(--color-bg-gray-light);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.notion-chart__balken {
  display: block;
  height: 100%;
  min-width: 2px;
  /* Farbe steht am Element - sie kommt je Reihe aus CHARTS in
     tools/from_notion.py, damit die Klipfolio-Palette erhalten bleibt. */
  background: var(--color-orange);
  border-radius: 3px;
}

.notion-chart__wert {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 2.5em;
  text-align: right;
}

.notion-chart__fuss {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--color-text-gray);
}

/* Im Callout sitzt der Text schon eng - dort braucht die Achse weniger Platz. */
.notion-callout .notion-chart__zeile {
  grid-template-columns: minmax(4.5em, 7em) minmax(0, 1fr) auto;
}

/* Kreisdiagramme: der Kreis ist ein conic-gradient auf einem runden Element,
   die Zahlen stehen als Text in der Legende daneben. Der Kreis selbst ist
   Dekoration - die Beschriftung des <figure> traegt die Werte fuer
   Vorleseprogramme. */

.notion-chart--kreis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
}

.notion-chart__kreis {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
}

.notion-chart__legende {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Die Legendenzeile nutzt dasselbe Raster wie eine Balkenzeile, nur mit dem
   Farbpunkt anstelle der Spur. */
.notion-chart__legende .notion-chart__zeile {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.notion-chart__punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.notion-chart--kreis .notion-chart__fuss {
  flex: 1 0 100%;
  margin-top: 0;
}

/* Im Callout ist es eng: Kreis und Legende stapeln sich dort. */
@media (max-width: 860px) {
  .notion-chart--kreis {
    gap: 14px;
  }

  .notion-chart__kreis {
    width: 112px;
    height: 112px;
  }
}