/* start.css — die Bereichsseite ueber dem Werkzeugkasten.
 * ════════════════════════════════════════════════════════════════════
 * WARUM ES DIESE EBENE GIBT
 *
 * Der Werkzeugkasten trug neunzehn Kacheln in vier Gruppen. Fuer das
 * Haus ist das eine Uebersicht; fuer einen Mandanten mit vier
 * Werkzeugen war es eine Seite, auf der drei Ueberschriften ins Leere
 * zeigten, weil tor.js ihre Gruppen weggeraeumt hatte. Was blieb, war
 * eine halb leere Flaeche -- und eine halb leere Flaeche liest sich
 * wie ein Defekt, nicht wie ein Zuschnitt.
 *
 * Diese Seite zeigt statt Werkzeugen BEREICHE. Jeder Bereich nennt auf
 * seinem Band, welche Werkzeuge in ihm liegen -- und zwar nur die, die
 * dieser Leser hat. Wer drei Baender sieht, sieht eine vollstaendige
 * Seite, nicht den Rest einer groesseren.
 *
 * WAAGERECHT, NICHT STEHEND
 *
 * Die Teilstreitkraefte auf systeme.html stehen in vier stehenden
 * Kacheln nebeneinander -- vier ist eine feste Zahl, ein Viertel der
 * Breite ist immer gleich breit. Die Zahl der Bereiche ist NICHT fest:
 * sie haengt am Zuschnitt des Mandanten. Stehende Kacheln wuerden
 * dabei ihre Breite aendern und mit ihr den Bildausschnitt; waagerechte
 * Baender aendern nur ihre Hoehe und bleiben ueber die ganze Breite
 * gleich angeschnitten. Ein Band vertraegt drei Bereiche so gut wie
 * fuenf.
 *
 * DIE NAHT IST DUNKEL, NICHT WEISS
 *
 * Zwischen den Baendern liegen zwei Bildpunkte in #0a0e0a. Eine weisse
 * Linie waere auf dunklen Fotos der hellste Punkt der Seite und zoege
 * das Auge genau auf das Nichts zwischen zwei Bildern. Derselbe Grund
 * steht in systeme.css.
 *
 * UND KEIN CREMEFARBENER STREIFEN UNTEN
 *
 * body traegt denselben dunklen Grund wie die Naehte. Bleibt am Ende
 * ein halber Bildpunkt uebrig, ist er schwarz und nicht creme. */

body.st-start {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: #0a0e0a;
}

.st {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  background: #0a0e0a;
}

/* ── Ein Band ────────────────────────────────────────────────────────
   flex:1 1 0 statt einer festen Hoehe: drei Baender teilen sich den
   Schirm zu Dritteln, fuenf zu Fuenfteln. min-height haelt das Band
   lesbar, wenn der Schirm niedrig ist -- dann scrollt die Seite, was
   allemal besser ist als ein Band, in dem der Name nicht mehr passt. */
.ber {
  position: relative;
  flex: 1 1 0;
  min-height: 116px;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #0a0e0a;
  isolation: isolate;
}

.ber__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.03);
  transition: transform .55s ease;
}

/* Der Schleier laeuft NACH RECHTS aus, nicht nach unten. Der Text
   steht links; rechts soll das Foto Foto bleiben. Ein gleichmaessig
   dunkles Band waere nur noch eine getoente Flaeche, und dann koennte
   man das Bild auch weglassen. */
.ber__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(5, 11, 7, .94) 0%,
    rgba(5, 11, 7, .86) 28%,
    rgba(5, 11, 7, .48) 55%,
    rgba(5, 11, 7, .16) 80%,
    rgba(5, 11, 7, .04) 100%);
  transition: opacity .55s ease;
}

.ber__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .42rem;
  height: 100%;
  padding: 1rem clamp(1.35rem, 5vw, 3.6rem);
  max-width: 62ch;
}

.ber__name {
  font-family: var(--serif, "Merriweather", Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--cream, #F9F2E4);
  text-wrap: balance;
}

/* Die Werkzeugnamen stehen auf dem Band, nicht erst dahinter. Ein
   Bereich mit einem unbekannten Inhalt waere eine Tuer ohne Schild:
   man klickt sie auf, um zu sehen, ob man sie gebraucht haette. */
.ber__liste {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: rgba(249, 242, 228, .74);
  line-height: 1.6;
}

/* Das Trennzeichen haengt am FOLGENDEN Namen, nicht am vorangehenden.
   tor.js entfernt Namen, die dieser Leser nicht hat -- haenge das
   Zeichen hinten an, beginnt die Liste nach einem Schnitt irgendwann
   mit einem Mittelpunkt im Nichts. */
.ber__w + .ber__w::before {
  content: "·";
  margin: 0 .5em;
  color: rgba(249, 242, 228, .40);
}

.ber__zahl {
  position: absolute;
  right: clamp(1.35rem, 5vw, 3.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(249, 242, 228, .62);
}
.ber__zahl b {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(249, 242, 228, .92);
}

/* Der Bildnachweis. Klein, aber im gerenderten Browser lesbar -- das
   ist die Bedingung der Lizenzen, unter denen die Aufnahmen stehen,
   und sie gilt unabhaengig davon, wie gern man sie unterbraechte. */
.ber__quelle {
  position: absolute;
  right: .55rem;
  bottom: .3rem;
  z-index: 1;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .02em;
  color: rgba(249, 242, 228, .34);
  pointer-events: none;
}

.ber:hover .ber__bild,
.ber:focus-visible .ber__bild { transform: scale(1.08); }
.ber:hover .ber__schleier { opacity: .88; }

.ber:focus-visible {
  outline: 3px solid var(--cream, #F9F2E4);
  outline-offset: -3px;
}

/* ── Das Hausband ────────────────────────────────────────────────────
   Die Werkbank bekommt kein Foto, sondern das Hausgruen. Das ist keine
   Sparsamkeit: sie ist das einzige Band, das nie ein Mandant sieht,
   und der Unterschied im Aussehen ist die billigste Warnung, die es
   gibt -- wer das gruene Band vor sich hat, arbeitet im Haus.

   Weniger Hoehe als die Bildbaender, weil sie kein Bild zu zeigen hat
   und sonst nur Leere bekaeme. */
.ber--haus {
  flex: 0 1 auto;
  min-height: 92px;
  background: linear-gradient(100deg, #04180B 0%, #06280F 58%, #082E12 100%);
  border-top: 1px solid rgba(249, 242, 228, .10);
}
.ber--haus .ber__schleier { background: none; }
.ber--haus .ber__name { font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.ber--haus .ber__liste { color: rgba(249, 242, 228, .58); }
.ber--haus .ber__zahl { color: rgba(249, 242, 228, .42); }
.ber--haus .ber__zahl b { font-size: 1.15rem; color: rgba(249, 242, 228, .70); }
.ber--haus:hover { background: linear-gradient(100deg, #052010 0%, #07310F 58%, #0A3A16 100%); }

/* ── Der Vorhang ─────────────────────────────────────────────────────
   Dieselbe Regel wie fuer den Werkzeugkasten in dashboard.css: der
   Schnitt kommt nach einer Netzantwort, also duerfen die Baender nicht
   vorher schon dastehen. Sonst blitzt einem Mandanten die Werkbank des
   Hauses auf, bevor sie verschwindet -- genau die Meldung vom
   15.09.2026, nur eine Ebene hoeher.

   visibility, nicht display: der Platz bleibt stehen, die Seite
   springt nicht. Aufgedeckt wird ueber [data-tor] am <html>, das
   tor.js in JEDEM Ausgang setzt, auch im Fehlerfall. */
.st .ber { visibility: hidden; }
html[data-tor="fertig"] .st .ber { visibility: visible; }

/* ── Schmale Schirme ─────────────────────────────────────────────────
   Unter 760px wird aus der Hoehenteilung ein fester Schnitt: auf einem
   Telefon waere ein Fuenftel von 100dvh ein Streifen von 120 Pixeln,
   auf dem weder Bild noch Name etwas werden. Lieber scrollen. */
@media (max-width: 760px) {
  body.st-start { min-height: 0; display: block; }
  .st { display: block; }
  .ber {
    aspect-ratio: 16 / 7;
    min-height: 132px;
    margin-bottom: 2px;
  }
  .ber__text { max-width: none; padding-right: 1.2rem; }
  .ber__zahl { display: none; }
  .ber__schleier {
    background: linear-gradient(100deg,
      rgba(5, 11, 7, .95) 0%, rgba(5, 11, 7, .88) 46%, rgba(5, 11, 7, .52) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ber__bild { transition: none; }
  .ber:hover .ber__bild, .ber:focus-visible .ber__bild { transform: scale(1.03); }
}