/* ==========================================================================================
   Seite "Ueber uns" -- Ergaenzungen zu store-seite.css
   Grundlage: documentation/Ueber-uns-Konzept.md und documentation/Entwurf-Ueber-uns.html

   REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .ab
   ------------------------------------------------------------------------------------------
   Das Element <main class="sto ab"> traegt beide Klassen. `.sto` bringt Gestaltungswerte,
   Ruecksetzungen, Kopfzeilenausgleich und alle Bausteine mit, die der Entwurf zeichnet --
   Titelbereich, Kennzahlen, Zweispalter, hervorgehobener Satz, Schaltflaechen, Bildrahmen,
   Bildplatzhalter und das dunkle Abschlussband. Hier steht nur, was neu ist.

   VIER REGELN. Das ist die ganze Datei, und das ist beabsichtigt: Der Entwurf zu dieser Seite
   benutzt ausschliesslich Bausteine, die es schon gibt.

   WARUM NICHT EINFACH wholesale.css MITLADEN
   Drei der vier Regeln stuenden dort schon (Fettung, Titelbereichsteilung, Kennzahlen ohne
   Abstand nach oben) -- aber wholesale.css traegt daneben Vorteilsraster, Konditionstabelle
   und das ganze Anfrageformular, rund 300 Zeilen, die diese Seite nie benutzt. Vor allem aber
   waeren beide Seiten damit aneinandergebunden: Wer die Wholesale-Seite umgestaltet, aendert
   ungefragt die Seite "Ueber uns" mit. Vier Regeln zu wiederholen ist der billigere Preis.

   store-seite.css WIRD NICHT GEAENDERT. 24 Store-Seiten und die Wholesale-Seite haengen daran.

   ⚠ CACHEKENNUNG: nginx liefert /assets/* mit 'Cache-Control: public, max-age=31536000,
   immutable' aus. Jede Aenderung an dieser Datei MUSS die `?v=`-Kennung in
   template-ueber_uns.blade.php hochzaehlen -- sonst behaelt jeder wiederkehrende Besucher bis
   zu einem Jahr die alte Fassung.

   GEMESSEN, NICHT GESCHAETZT (2026-08-13, aus Overpass-Medium.ttf und Overpass-Thin.ttf,
   Werkzeug: documentation/tools/ttfmess.py). Die vier Kennzahlen-Bezeichnungen stehen bei
   217,2 px Kachelbreite alle einzeilig, die knappste (`GEGRÜNDET IN DUISBURG`) mit 37,15 px
   Luft; die Schaltflaechenpaare passen mit 173,64 px Rest. Die Zahlen stehen im Changelog.
   ========================================================================================== */

/* ---------- Fettung im Fliesstext ----------
   Erzeugt aus `**...**` in den Redaktionsfeldern, siehe template-ueber_uns.blade.php.

   ⚠ DER ENTWURF SCHREIBT `strong{font-weight:500}`, UND DAS WAERE FALSCH UEBERNOMMEN.
   Der Entwurf benutzt Jost, eine Familie mit echten Gewichten. Dieses Projekt bindet je
   Schnitt eine EIGENE FAMILIE ein -- "Overpass-Light" fuer den Fliesstext, "Overpass-Medium"
   fuer alles Hervorgehobene. Ein `font-weight: 500` auf Overpass-Light fuehrt zu keiner
   anderen Datei: Die Familie hat genau einen Schnitt, der Browser nimmt ihn und rechnet die
   Fettung selbst hoch -- eine kuenstlich verbreiterte Light.

   `font-weight: normal` gehoert dazu und ist kein Beiwerk: Browser stellen <strong> von sich
   aus auf 700. Overpass-Medium ist mit 500 deklariert; bliebe die 700 stehen, legte der
   Browser ueber den Medium-Schnitt zusaetzlich eine synthetische Fettung.

   ⚠ WARUM `p` UND `li` IM SELEKTOR STEHEN UND NICHT NUR `.ab strong`: Die Kennzahlenreihe
   benutzt ein <b> (.sto-zahl b, store-seite.css) -- die grossen Zahlen 2011, 4, 90+, 30 in
   Overpass-THIN. `.ab b` laege bei (0,1,1) und damit GLEICHAUF mit `.sto-zahl b`; bei
   Gleichstand entscheidet die Ladereihenfolge, und diese Datei wird nach store-seite.css
   geladen. Die Zahlen waeren also von Thin auf Medium gesprungen. Mit `p` und `li` liegt die
   Regel bei (0,1,2), gewinnt dort, wo sie soll, und erreicht die Zahlen nicht: Die stehen in
   einem <div>, nicht in einem Absatz. Dieselbe Falle, dieselbe Loesung wie in wholesale.css.
   `li` steht hier vorsorglich mit -- die Vorlage gibt heute keine Listen aus. */
.ab p b,
.ab p strong,
.ab li b,
.ab li strong {
    font-family: "Overpass-Medium", sans-serif;
    font-weight: normal;
}

/* ---------- Titelbereich: schmalere Bildspalte ----------
   Der Entwurf teilt 1fr .8fr statt 1fr 1fr -- der Text traegt die Seite, das Hochformat
   begleitet sie nur. Der Haltepunkt bleibt bei 1024px wie in store-seite.css; der Entwurf
   schaltet schon bei 900px um, dort waere die Textspalte aber nur 428px breit und die H1
   fiele dreizeilig. Bei 1024px sind es 476px, ab 1280px 549px (gemessen: zweizeilig). */
@media (min-width: 1024px) {
    .ab .sto-hero-grid {
        grid-template-columns: 1fr 0.8fr;
    }
}

/* ---------- Titelbereich ohne Bild ----------
   Faellt das Bild weg -- Feld leer und Bildstelle abgeschaltet --, bleibt im Raster eine
   einzige Spalte ueber die vollen 1052px des Rahmens. Fliesstext ueber diese Breite ist
   schlecht lesbar (rund 100 Zeichen je Zeile). Der Deckel entspricht .sto-schmal.
   Die Klasse setzt die Vorlage nur dann, wenn wirklich keine Bildstelle ausgegeben wird. */
.ab .ab-hero-allein > * {
    max-width: 800px;
}

/* ---------- Kennzahlen schliessen direkt an den Titelbereich an ----------
   Ohne diese Regel stuenden zwischen Titelbereich und Kennzahlen zwei volle
   Abschnittspolster (bis zu 7rem), und die Zahlenreihe verlore den Bezug nach oben.
   Der Entwurf zeichnet es genauso (`style="padding-top:0"` am Kennzahlen-Abschnitt). */
.ab .ab-zahlen-abschnitt {
    padding-top: 0;
}