/* =========================================================================
   MOBILE KORREKTUREN — smartfabrik.de
   Erzeugt am 27.08.2026. Eine Datei, ein Ort, in einem Zug zuruecknehmbar.

   WARUM ES DIESE DATEI GIBT
   Die Startseite traegt 1683 kB CSS in einem einzigen <style>-Block, der ueber
   Dutzende Nachbesserungen gewachsen ist. Genau dieses Anhaengen hat zwei der
   Fehler erzeugt, die hier behoben werden:
     - #team .tc-bcols{grid-template-columns:1fr 1fr!important} steht OHNE
       Medienabfrage und hat die vorhandene mobile Regel stillgelegt.
     - .basalte .bimg traegt min-height:420px UND aspect-ratio:4/3; das ergibt
       420/3*4 = 560px erzwungene Mindestbreite und zog die ganze Seite auf
       580px auf.
   Wer in jener Datei weiter hinten etwas anhaengt, legt die naechste Falle.
   Deshalb liegen Korrekturen ab jetzt hier.

   WIE DIE REGELN GEWINNEN
   Der grosse Stilblock steht im BODY (in einem Elementor-Widget), nicht im
   <head>. Ein im Kopf geladenes Blatt steht in der Dokumentreihenfolge DAVOR
   und verliert jeden Gleichstand. Die Waehler haengen deshalb an Kennungen
   (#basalte, #team, #partner, #sforchHub) oder tragen ein body/header-Praefix,
   und !important steht dort, wo der Bestand selbst !important setzt.

   AM SCHREIBTISCH AENDERT SICH NICHTS. Nachgewiesen, nicht zugesagt: 30
   Kennwerte bei 1024, 1280 und 1440px wurden vor der Aenderung aufgenommen
   (pruefung/abnahme_mobil.js grundstand) und danach verglichen.

   ZURUECKNEHMEN: mu-plugins/sf-mobil.php und den Ordner sf-mobil loeschen.
   ========================================================================= */



/* ####################################################################
   Seitlicher Ueberlauf — .basalte .bimg und #team .tc-bcols
   #################################################################### */
/* ==================================================================
   Startseite — seitlicher Ueberlauf (.basalte .bimg / #team .tc-bcols)
   Zusatz-Stylesheet, gewinnt ueber Abschnitts-ID + !important, also
   unabhaengig davon, ob es im Kopf oder nach dem Seiten-<style> landet.
   Oberhalb 1023 px veraendert es nichts (bei 1024 und 1440 px alle
   Kennwerte gegen die Seite ohne Zusatz verglichen: identisch).
   ================================================================== */

/* ---- 1) Basalte: die Bildspalte darf schrumpfen --------------------
   .bimg traegt aspect-ratio:4/3 UND min-height:420px. Ein Seiten-
   verhaeltnis rechnet eine feste Hoehe in eine Breite um: 420/3*4 =
   560 px Mindestbreite. Die Spalte von .bsplit ist 1fr = minmax(auto,1fr),
   und dieses auto uebernimmt die 560 px — deshalb blieb die Spalte
   560 px breit, obwohl @media(max-width:860px) laengst auf eine Spalte
   gestellt hatte.
   Angesetzt wird am auto, nicht an der Mindesthoehe: die Rasterkinder
   duerfen unter ihre Mindestbeitragsgroesse. Das ist genau die Regel,
   die /en/ und /ar/ bereits mitbringen (.basalte .bsplit > *{min-width:0}
   — dort gemessen min-width 0px, auf der deutschen Seite auto). Nur der
   deutschen Fassung fehlt sie; sie nachzureichen haelt alle drei
   Sprachen gleich, statt die beiden gesunden Seiten umzubauen.
   Vorteil gegenueber min-height:0 — die vom Entwurf gewollte Bildhoehe
   von 420 px bleibt (Telefon: 280x420 / 350x420 statt 280x210 / 350x263),
   und /en/ + /ar/ aendern sich nicht.
   Grenze 1023 statt 860 px: unterhalb 1024 px ist es kein Schreibtisch.
   Zwischen 861 und 1023 px erzwang die 560-px-Bildbreite sonst weiter
   eine auf 191 px gequetschte Textspalte. -------------------------- */
@media (max-width:1023px){
  #basalte .bsplit > *{ min-width:0 !important; }
}

/* ---- 2) Team: zwei Firmen untereinander ---------------------------
   Die spaete Regel „Der Trennstrich klebte an der rechten Spalte“ steht
   ohne Medienabfrage und erzwingt mit !important zwei Spalten. Sie
   schlaegt damit die aeltere @media(max-width:560px)-Regel, die auf eine
   Spalte umstellen wollte. Zwei Spalten koennen zusammen nicht schmaler
   als 248 + 178 = 426 px werden. Unterhalb 560 px gilt darum wieder die
   Absicht des Entwurfs. Gewonnen wird ueber .tc-brands im Waehler plus
   eigenes !important. ---------------------------------------------- */
@media (max-width:560px){
  #team .tc-brands .tc-bcols{ grid-template-columns:1fr !important; }

  /* Der senkrechte Strich ergibt untereinander keinen Sinn. Die
     waagerechte Linie setzt der Bestand schon selbst (gemessen 1px,
     rgb(227,232,236)); zu neutralisieren ist nur die senkrechte, die
     eine spaete !important-Regel auch unter 560 px wieder setzt.
     Logische Eigenschaft, damit die arabische Fassung stimmt. */
  #team .tc-brands .tc-bcol:last-child{ border-inline-start:0 !important; }

  /* Der zweite Block hat per spaeter !important-Regel 20 px Innenabstand
     vorn, der erste 22 px aus .tc-bcol{padding:36px 22px 30px}. Neben-
     einander faellt das nicht auf, untereinander stehen die beiden
     Fuchs-Logos dadurch 2 px versetzt (gemessen x=42 gegen x=40). */
  #team .tc-brands .tc-bcol:last-child{ padding-inline-start:22px !important; }
}


/* ####################################################################
   Kopfleiste auf dem Telefon: eine Reihe statt zwei
   #################################################################### */
/* ==========================================================================
   KOPFLEISTE MOBIL — eine Reihe statt zwei          (korrigierte Fassung)
   --------------------------------------------------------------------------
   URSACHE unveraendert richtig erkannt: Burger (order:2), Sprachen (order:3)
   und Menue (order:4) haben eine Nummer, die Beratungs-Schaltflaeche nicht.
   Sie bleibt auf 0 und sortiert sich vor den Burger. Logo + volle
   Schaltflaeche sprengen die Telefonzeile, flex-wrap schiebt den Rest nach
   unten.

   VIER AENDERUNGEN GEGENUEBER DEM VORSCHLAG:

   1. NUR NOCH EINE MEDIENABFRAGE, max-width:560px.
      Gemessen ist ab ca. 500px jede Seite in jeder Sprache schon einreihig
      (/ 540px = 53px, /en/knx-service/ 500px = 59px, /partner/basalte/ 560px
      = 59px). Das Band 561px bis 980/840px ist nicht kaputt und wird deshalb
      nicht angefasst. Damit ist "am Schreibtisch aendert sich nichts" nicht
      mehr eine Zusage, sondern eine Eigenschaft der Datei: oberhalb 560px
      existiert keine Regel. Gemessen: ab 600px sind Logo, Schaltflaeche,
      Burger, Sprachen und Kopfhoehe auf allen geprueften Seiten Kasten fuer
      Kasten identisch zu vorher.

   2. LOGO MIT BASIS 0 STATT 96px.
      Der Zeilenumbruch rechnet mit der Flex-BASIS, nicht mit der spaeter
      geschrumpften Breite. Basis 96 + Schaltflaeche 138 + Burger 44 + 20
      Spaltenabstand = 298 > 268 verfuegbar bei 300px — der Burger faellt auf
      Reihe zwei, BEVOR das Logo schrumpfen darf. Mit `flex:1 1 0` ist die
      Basis 0, die Zeile kann rechnerisch nicht mehr brechen, und das Logo
      waechst danach bis max-width zurueck. min-width:72px ist der Boden,
      damit der Schriftzug lesbar bleibt.

   3. PFEIL UEBER DAS ELEMENT AUSBLENDEN, NICHT UEBER DIE KLASSE.
      Auf /partner/basalte/ heisst es `Showroom-Tour <span>&rarr;</span>` —
      OHNE class="ar". `> span` trifft beide Bauarten.

   4. SCHRIFTGROESSE DER blpnav-SCHALTFLAECHE BLEIBT, WIE SIE IST.
      Der Bestand setzt unter 560px bereits 12.5px. Sie auf 13.5px zu heben
      macht lange Beschriftungen breiter — das Gegenteil des Ziels. Nur die
      Innenabstaende werden angefasst. Aus demselben Grund entfaellt der
      Wechsel auf display:inline-flex oberhalb 560px, der dort den Leerraum
      zwischen Wort und Pfeil verschluckt hat ("Beratung&rarr;").

   Ausserdem: padding-block:4px statt 9px. 44px Zeile + 8 + 1 Trennlinie =
   53px — genau die Hoehe, die die Leiste ab 561px ohnehin hat. Damit wird
   keine Leiste, die schon einreihig war, hoeher.

   Waehler sind dreistufig (header.nav > .wrap > x = 1 Element + 3 Klassen).
   Das Haupt-Stylesheet steht als <style> IM BODY, ein Zusatzblatt im Kopf
   steht davor und verlaere jeden Gleichstand nach Position; mit vier Stufen
   gegen hoechstens zwei im Bestand entscheidet die Spezifitaet. !important
   steht nur dort, wo der Bestand selbst !important oder eine Medienabfrage
   mit gleicher Spezifitaet setzt. Geprueft wurde mit addStyleTag in den
   <head>, also im unguenstigsten Fall.
   ========================================================================== */

@media (max-width:560px){

  /* --- Lueckenlose Reihenfolge. Das ist die eigentliche Korrektur. --------
     Logo 0, Beratung 1, Burger 2, Menue 4, Sprachen 5. Menue behaelt seine
     4 aus dem Bestand, damit oberhalb 560px nichts umsortiert wird. */
  header.nav    > .wrap  > .logo,
  header.blpnav > .nwrap > .blogo        { order:0 !important }
  header.nav    > .wrap  > .btn,
  header.blpnav > .nwrap > .bnav-cta     { order:1 !important }
  header.nav    > .wrap  > .sfnav-burger,
  header.blpnav > .nwrap > .sfnav-burger { order:2 !important; margin-inline-start:0 !important }
  header.nav    > .wrap  > .menu,
  header.blpnav > .nwrap > .bmenu        { order:4 !important }
  header.nav    > .wrap  > .sflang,
  header.blpnav > .nwrap > .sflang       { order:5 !important }

  /* --- Die Zeile ---------------------------------------------------------
     space-between wuerde die drei Elemente ueber die Zeile streuen. Ein
     einziger auto-Rand vor der Schaltflaeche schiebt genau einmal: Logo
     links, Beratung + Burger als Gruppe rechts. flex-wrap bleibt, weil das
     Klappmenue die zweite Zeile braucht. */
  header.nav    > .wrap,
  header.blpnav > .nwrap{
    justify-content:flex-start !important;
    flex-wrap:wrap; column-gap:10px; row-gap:0;
    height:auto; padding-inline:16px; padding-block:4px;
  }
  header.nav    > .wrap  > .btn,
  header.blpnav > .nwrap > .bnav-cta{ margin-inline-start:auto !important }

  /* --- Logo: das einzige Element, das nachgeben darf --------------------- */
  header.nav    > .wrap  > .logo,
  header.blpnav > .nwrap > .blogo{
    flex:1 1 0; width:auto; min-width:72px; max-width:156px; height:40px;
  }

  /* --- Schaltflaeche kompakt --------------------------------------------
     Hoehe kommt aus min-height statt aus dem Innenabstand: so darf sie
     schmal werden, ohne die Trefflaeche zu verlieren. */
  header.nav    > .wrap  > .btn,
  header.blpnav > .nwrap > .bnav-cta{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; white-space:nowrap; padding:6px 14px; column-gap:0;
  }
  header.nav    > .wrap  > .btn{ font-size:13.5px }   /* .btn kommt von 15px */
  /* .bnav-cta behaelt die 12.5px aus dem Bestand — bewusst nicht angefasst. */

  /* --- Pfeil weg. Ueber das Element, damit auch der klassenlose Span auf
         /partner/basalte/ getroffen wird. */
  header.nav    > .wrap  > .btn > span,
  header.blpnav > .nwrap > .bnav-cta > span{ display:none }

  /* --- Burger: 26x20 ist als Trefflaeche zu klein ------------------------
     Die Kiste waechst auf 44x44, die drei Striche werden darin neu zentriert
     (sie haengen absolut am Label: Span top 21 -> ::before 13, ::after 29,
     Mitte 22). Der negative Aussenrand holt die Striche optisch an die
     Seitenkante zurueck; logische Kante, damit die arabische Fassung von
     allein spiegelt. margin-block:0 raeumt die 10px weg, die ein Theme-
     Stylesheet JEDEM <label> unten anhaengt — der Burger IST ein <label>. */
  header.nav    > .wrap  > .sfnav-burger,
  header.blpnav > .nwrap > .sfnav-burger{
    flex:0 0 auto; width:44px; height:44px;
    margin-block:0; margin-inline-end:-9px;
  }
  header.nav    > .wrap  > .sfnav-burger > span,
  header.blpnav > .nwrap > .sfnav-burger > span{ top:21px; left:9px }

  /* --- DE/EN/AR unter das Klappmenue -------------------------------------
     Selten-Aktion, kostet in der Telefonzeile 75px neben drei taeglichen
     Bedienzielen. Sichtbarkeit haengt am selben Kaestchen wie das Menue,
     ohne eine Zeile Javascript. Im Menue bekommen die drei Ziele erst eine
     brauchbare Groesse; in der Leiste waren sie 16x18 Pixel.
     Oberhalb 560px bleibt die Umschaltung, wo sie war. */
  header.nav    > .wrap  > .sflang,
  header.blpnav > .nwrap > .sflang{
    display:none !important;
    width:100%; margin:0; padding-inline-start:0; border-inline-start:0;
    border-top:1px solid rgba(12,14,16,.07); padding-top:4px;
    column-gap:0; font-size:14px; flex-wrap:wrap;
  }
  header.nav    > .wrap  > .sfnav-cb:checked ~ .sflang,
  header.blpnav > .nwrap > .sfnav-cb:checked ~ .sflang{ display:flex !important }
  header.nav    > .wrap  > .sflang > *,
  header.blpnav > .nwrap > .sflang > *{
    min-height:44px; display:inline-flex; align-items:center; padding-inline:14px;
  }
  header.nav    > .wrap  > .sflang > :first-child,
  header.blpnav > .nwrap > .sflang > :first-child{ padding-inline-start:0 }
}


/* ####################################################################
   Klappmenue: Sprungziele und Querformat
   #################################################################### */
/* ===== Klappmenue: Sprungziele nicht unter die klebende Kopfleiste laufen lassen =====
   header.nav (Startseite) und header.blpnav (uebrige Seiten) stehen auf
   position:sticky, top:0. Ein Sprung setzt das Ziel auf y=0 — also genau hinter die
   Leiste. Der Abstand kommt vom Skript (--sf-kopfhoehe = gemessene Kopfhoehe + 12px
   Luft); die festen Werte sind nur der Rueckfall, falls kein Skript laeuft.
   Kein !important noetig: live setzt kein einziges Element eine eigene scroll-margin
   (gemessen: 0 Treffer), es gibt keine scroll-snap-Achse und keinen zweiten
   Scrollbehaelter, an dem sich ein Versatz aufaddieren koennte.

   BANDGRENZEN — gemessen, nicht geschaetzt (Kopfhoehe der Startseite):
     331px→145 · 333px→107 · 390px→103 · 430px→91 · 522px→91 · 525px→53 · 981px→77
   Der Vorgaenger legte die Grenzen auf 339 und 560 und lag damit an beiden Stellen
   daneben (bei 333–339px 51px Luft zu viel, bei 523–560px bis zu 65px zu viel).
   Der Rueckfall je Band ist die GROESSTE Kopfhoehe des Bandes + 12: zu viel Luft ist
   kosmetisch, zu wenig verdeckt den Anfang des Abschnitts.

   1023 STATT 980 AN DER OBERKANTE: Der Auftrag schuetzt den Schreibtisch ab 1024px.
   Zwischen 981 und 1023px gibt es kein Klappmenue, aber dieselbe klebende Leiste
   (77px) und dieselben drei Sprungmarken — dort blieb das Ziel bisher zu 77px
   verdeckt. Ab 1024px greift keine dieser Regeln, gegengeprueft bei 1024 und 1440px. */
@media (max-width:1023px){ [id]{ scroll-margin-top: var(--sf-kopfhoehe, 89px); } }
@media (max-width:980px) { [id]{ scroll-margin-top: var(--sf-kopfhoehe, 65px); } }
@media (max-width:522px) { [id]{ scroll-margin-top: var(--sf-kopfhoehe, 119px); } }
@media (max-width:332px) { [id]{ scroll-margin-top: var(--sf-kopfhoehe, 157px); } }

/* ===== Querformat: das offene Menue muss auf den Bildschirm passen =====
   Das Menue liegt IN der klebenden Kopfleiste. Offen ist die Leiste 411px hoch — auf
   einem quer gehaltenen Telefon (740x360, 844x390) mehr als der ganze Bildschirm.
   Weil sie auf top:0 klebt und das Menue selbst nicht scrollt, war der letzte
   Menuepunkt „Kontakt" (top 367 / bottom 408 bei 360px Bildschirmhoehe) bei JEDEM
   Scrollstand ausserhalb — also gar nicht erreichbar. Ausgerechnet der Verweis, dessen
   Sprungziel die Regeln oben freilegen sollen.
   Der Deckel haengt an der Bildschirmhoehe, nicht an der Breite: Hochformat-Telefone
   (390x844) bleiben unveraendert, ebenso alles ab 1024px (max-height dort weiterhin
   „none"). 100vh zuerst als Rueckfall, 100dvh darueber fuer Browser mit einklappbarer
   Adressleiste. overscroll-behavior verhindert, dass das Wischen im Menue die Seite
   darunter mitzieht. */
@media (max-width:980px) and (max-height:600px){
  .nav .sfnav-cb:checked~.menu{
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width:840px) and (max-height:600px){
  .blpnav .sfnav-cb:checked~.bmenu{
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* ####################################################################
   Kennzahlen-Reihen im Hero und in der Team-Karte
   #################################################################### */
/* =====================================================================
   KENNZAHLEN-REIHEN AUF SCHMALEN GERAETEN — korrigierte Fassung

   Zwei Aenderungen gegenueber dem Vorschlag des Kollegen:

   (a) Das Hero-Kennzahlenband steht auf max-width:900px, nicht auf 560px.
       Grund: build/smartfabrik-homepage.html — und damit /en/ und /ar/ live —
       enthaelt fuer .statcard bereits einen @media(max-width:900px)-Block mit
       genau diesem Zweierraster. Ein zweiter Bruchpunkt bei 560px erzeugt dort
       eine Stufe bei 560/561 (gemessen: Bandhoehe 205,4 -> 191,0 px, .n 20 -> 19 px,
       Kartenpolster 10/14 -> 18/16 px). Auf 900 gesetzt liegt die Regel auf dem
       vorhandenen Bruchpunkt, es entsteht keine neue Kante, und der einzige echte
       Restfehler des Bestandsblocks wird ueber die ganze Breite mitgenommen:
       .statcard .stat{border-inline-end:1px} wird dort nicht zurueckgesetzt,
       deshalb traegt auch die RECHTE Spalte einen Haarstrich an der Aussenkante
       (gemessen /en/ bei 540/560/600px: Zellen [1] und [3] border-right 1px).
       Die Werte (18px 16px / 12px 10px / 9,5px) sind bewusst die des vorhandenen
       Blocks — auf /en/ und /ar/ aendert dieses Stylesheet dadurch fast nichts
       (Zellhoehe 64,0 -> 63,7 px), auf der noch alten deutschen / zieht es sie auf
       denselben Stand.

   (b) Die Team-Reihe bleibt bei 560px — dort ist es richtig. Oberhalb passt
       #team .tc-stats in eine Zeile (gemessen 561px: Inhalt endet bei r505,9 im
       Kasten bis r541), unterhalb bricht es um und der Trennstrich am Zellenanfang
       haengt frei. 560 ist ausserdem eine im Projekt schon benutzte Bruchstelle.

   Beibehalten: das body-Praefix. Der grosse Stylesheet-Block der Startseite
   (69 713 Zeichen, enthaelt "SBAR" und .tc-stats) steht in einem
   DIV.elementor-widget-container, also HINTER dem Kopf. Ohne Praefix gemessen:
   "#team .tc-stats{display:grid}" bleibt wirkungslos, die Reihe steht weiter auf
   flex und behaelt padding 22px 0 0.

   Fallengelassen: minmax(0,1fr) und die beiden :first-/:last-child-Polsterzeilen
   im Hero. Beides ist nachgemessen wirkungslos — minmax verhaelt sich neben
   min-width:0 exakt wie 1fr (320px: 125px 125px, 390px: 160px 160px, dokScroll
   371 bzw. 428 — bitgleich), und das Zellenpolster steht ueber die Grundregel
   ohnehin schon auf 12px. Im TEAM-Teil bleibt :first-child stehen, dort ist es
   zwingend: #team .tc-stats div:first-child{padding-inline-start:0} hat die
   hoehere Spezifitaet und wuerde die erste Zelle sonst linksbuendig ziehen.

   Schreibtisch: ab 901px greift keine Zeile. Gemessen 1024px statcard
   x32 y826,7 w960 h160, 1440px x162 y849 w1116 h97, tc-stats x505,9 w486,1 h68
   bzw. x715,3 w562,7 h68 — identisch zur Ausgangsmessung.
   ===================================================================== */

/* --- 1) Kennzahlenband unter dem Hero (.statbar > .wrap > .statcard > .stats)
   Fuenf Kennzahlen in zwei Spalten: 2 / 2 / 1. Die fuenfte kann nicht anders als
   allein stehen und laeuft deshalb ueber beide Spalten. Die Linien sitzen in der
   Zelle, nicht im Abstand — so laufen sie buendig durch, auch wenn eine
   Beschriftung zweizeilig wird. Alle Kanten logisch, damit /ar/ spiegelt.
   Achtung bei Textaenderungen: nth-child(-n+4) haengt an genau fuenf Kennzahlen. */
@media (max-width:900px){
  body .statbar .statcard{padding:18px 16px}

  body .statbar .statcard .stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin:0;
  }

  /* border:0 raeumt den Strich der rechten Spalte ab, den der Bestandsblock
     stehen laesst. min-width:0 haelt lange Woerter davon ab, die Spalte
     aufzuziehen — dieselbe Falle wie bei .basalte .bimg und #team .tc-bcols. */
  body .statbar .statcard .stats>.stat{
    padding:12px 10px;
    margin:0;
    border:0;
    text-align:center;
    min-width:0;
  }
  body .statbar .statcard .stats>.stat:last-child{grid-column:1/-1}
  body .statbar .statcard .stats>.stat:nth-child(odd):not(:last-child){border-inline-end:1px solid var(--line)}
  body .statbar .statcard .stats>.stat:nth-child(-n+4){border-bottom:1px solid var(--line)}

  /* Die geerbte Zeilenhoehe ist 18px und damit kleiner als die Schrift selbst.
     Nach unten mitwachsend, damit "Ingenieure" auch auf 320px in die halbe
     Kartenbreite passt (gemessen 320px: 17px, Textbreite 100px bei 104px Zelle);
     nach oben bei 19px gedeckelt, also exakt der Wert des Bestandsblocks. */
  body .statbar .statcard .stats>.stat .n{font-size:clamp(17px,4.9vw,19px);line-height:1.15}
  body .statbar .statcard .stats>.stat .t{font-size:9.5px;line-height:1.35;margin-top:4px}
}

/* --- 2) Kennzahlen in der Team-Karte (#team .tc-stats)
   Flexbox mit flex-wrap und Trennstrich am Zellenanfang: sobald umgebrochen wird,
   steht der Strich vor der ersten Zelle der neuen Zeile frei im Raum. Drei
   Kennzahlen in zwei Spalten, die dritte ueber beide Spalten.
   !important nur beim padding, weil die vorhandene Regel padding-top mit
   !important setzt. 8px + 12px Zellenpolster = die alten 22px unter dem Haarstrich.
   Achtung bei Textaenderungen: nth-child(-n+2) haengt an genau drei Kennzahlen. */
@media (max-width:560px){
  body #team .tc-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:8px 0 0!important;
  }
  body #team .tc-stats>div{
    padding:12px 10px;
    margin:0;
    border:0;
    text-align:center;
    min-width:0;
  }
  /* Zwingend: "#team .tc-stats div:first-child{padding-inline-start:0}" ist
     spezifischer als die Zeile darueber und wuerde die erste Zelle sonst
     linksbuendig aus dem Raster ziehen. */
  body #team .tc-stats>div:first-child{padding-inline-start:10px;border-inline-start:0}
  body #team .tc-stats>div:last-child{grid-column:1/-1}
  body #team .tc-stats>div:nth-child(odd):not(:last-child){border-inline-end:1px solid var(--line)}
  body #team .tc-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}

  body #team .tc-stats>div strong{font-size:clamp(17px,4.9vw,19px);line-height:1.15}
  body #team .tc-stats>div span{font-size:9.5px;line-height:1.35;margin-top:4px}
}


/* ####################################################################
   Orchestrierungs-Diagramm: Liste statt Kreis
   #################################################################### */
/* ============================================================
   Orchestrierungs-Diagramm — mobile Darstellung
   Geprueft gegen die Live-Seite, Korrektur in den <head> gespritzt,
   also im schlechtestmoeglichen Fall VOR dem 68-kB-Stilblock, der
   auf der Startseite in einem DIV im Koerper steht (style-Index 20
   von 22, Elternelement DIV — nachgemessen). Die Waehler haengen
   deshalb an den echten Kennungen #sforchHub / #sforchNet: mit
   1,0,0 / 1,1,0 / 1,2,0 schlagen sie die 0,2,0 und 0,3,0 der Seite
   unabhaengig von der Einhaengestelle. Im gesamten .orchsec-Block
   steht kein !important, deshalb braucht es hier auch keins.

   Aenderungen gegenueber dem ersten Entwurf:
   - Die Spaltenzahl haengt nicht mehr an einer festen Fensterbreite,
     sondern am Platz. Grund: bei genau 560px war die Spalte 255px
     breit, die breiteste Kachel misst natuerlich DE 236 / EN 247 /
     AR 226px. Faellt Lato aus (blockierter Fonthost, erster Besuch),
     waechst EN auf 256px und zwei von neun Kacheln werden zweizeilig.
     Mit auto-fit und einem Mindestmass von 272px schaltet die zweite
     Spalte erst bei rund 594px zu; schmalste gemessene Luft danach
     14px (EN ohne Webfont) statt -6px.
     min(272px,100%) statt 272px ist Pflicht: sonst stuende bei einem
     240px breiten Container eine 272px-Spur darin und das seitliche
     Scrollen kaeme zurueck.
   - Eine einzige Breitenangabe. min(520px,100%) war wirkungslos,
     weil der Container unterhalb 560px Fensterbreite nie breiter
     als 519px wird (bei 559px gemessen: Nabe 519px).
   - Freihaltung unter dem Fuchs 46px statt 40px. .ocenter::after
     sitzt bei inset:-26px und wird von opulse auf 1.28 skaliert;
     bei 148px Fuchs greift der Ring 54px nach unten, die alten
     40+10px reichten dafuer nicht.
   ============================================================ */

@media (max-width:840px){

  /* Am Schreibtisch ist die Nabe eine quadratische Zeichenflaeche, auf der
     neun Kacheln absolut auf einem Kreis sitzen. Als Liste braucht sie kein
     Quadrat mehr — bliebe aspect-ratio:1/1 stehen, liefe die Liste unten
     aus dem Kasten heraus. */
  #sforchHub{
    width:min(560px,100%);
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
    gap:10px;
    margin-top:36px;
  }

  /* Speichen und wandernde Punkte zeigen ohne Kreis ins Leere; nebenbei
     enden neun SMIL-Dauer-Animationen auf dem Telefon. Das SVG ist
     aria-hidden, es geht also nichts verloren. */
  #sforchNet{display:none;}

  /* Der Fuchs wird zur Ueberschrift ueber der Liste.
     position:relative statt static ist Absicht: die beiden Ringe haengen als
     ::before/::after an ihm — ohne eigenen Positionierungsrahmen wuerden sie
     sich an der Nabe ausrichten und auf deren Groesse aufgehen.
     46px unterer Abstand + 10px Rasterluecke = 56px, damit der auf 1.28
     skalierende Aussenring (Kasten 200px bei 148px Fuchs, also 54px
     Ausgriff) die erste Kachel nicht mehr erreicht. */
  #sforchHub .ocenter{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    grid-column:1 / -1;
    margin:0 auto 46px;
  }

  /* position:static macht die vom Skript inline gesetzten left/top-Prozente
     wirkungslos — dafuer braucht es kein !important.
     white-space:normal ist die Rueckfallebene: ohne sie wuerde eine laengere
     Beschriftung aus der Kachel laufen und das seitliche Scrollen zurueckholen.
     Die Gewichtung ueber #sforchHub schlaegt zugleich die spaeter im Dokument
     stehende Regel .orchsec .onode:hover, die sonst das translate(-50%,-50%)
     wieder hereinholt. */
  #sforchHub .onode{
    position:static;
    transform:none;
    white-space:normal;
  }
  #sforchHub .onode:hover{transform:translateY(-2px);}
}


/* ####################################################################
   Partner-Logoraster: gleiche Flaeche je Logo
   #################################################################### */
/* ============================================================
   Partner-Logoraster auf schmalen Geraeten
   Grundgedanke unveraendert: optisch gleich gross heisst gleiche FLAECHE,
   darum pro Seitenverhaeltnis-Gruppe eine eigene Hoehenkappe
   h = Wurzel(2700 / Seitenverhaeltnis).
   Drei Korrekturen gegenueber dem Erstentwurf, alle gemessen:
   (1) Reichweite: #partner .plogos gibt es auch auf /smarthome/ — dort mit
       VIER Logos. Ungeschuetzt machte die feste Spaltenzahl es dort
       schlechter (768 px: Logokasten 84 -> 208 px, viertes Logo als Waise
       in Spalte 1, Textzeile fest 62 px statt auto). Der :has()-Waechter
       begrenzt alles auf genau den Sechser-Satz; ohne :has()-Unterstuetzung
       faellt der Browser auf das heutige Flex zurueck.
   (2) Unter rund 280 px CSS-Breite (390-px-Telefon ab etwa 140 % Zoom) schnitt
       max-width:100% still zu und die Hoehen liefen wieder auseinander:
       bei 260 px 26/26/23,7 px, bei 240 px 25/24,2/21,4 px. Die Kappe der
       Wortmarken ist deshalb zusaetzlich an die Spaltenbreite gebunden.
   (3) Die nth-last-of-type-Vorsorge entfaellt — bei genau sechs Logos
       unerreichbar, und der Waechter schliesst andere Anzahlen ohnehin aus.
   Offen und bewusst zu entscheiden: die Wand verliert auf dem Telefon 33 %
   gedeckte Flaeche (12759 -> 8599 px^2), Wortmarken 38 -> 26 px. Wer das
   nicht will, hebt die Zielflaeche an und rechnet alle vier Kappen neu.
   ============================================================ */

@media (max-width: 860px){

  /* Waechter: genau der Sechser-Satz (mit .dohmen, ohne siebtes Logo).
     Auf diesen Satz sind Spaltenzahl, Zeilenliste und Kappen gerechnet. */
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))){
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:62px 62px auto;   /* zwei Logozeilen, dann Text nach Inhalt */
    align-items:center;
    justify-items:center;
    gap:20px 14px;
    margin-top:36px;
    margin-inline:auto;
    max-width:680px;
    padding:12px 0;
  }

  /* Bestandsregel .partner .plogos>* macht jedes Kind zur Flexbox. Im Raster
     ist das Kind selbst die Zelle, die zusaetzliche Box stoert nur. */
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7)))>*{
    display:block; margin:0; padding:0; min-height:0;
  }

  /* Kappe nach Flaeche, zusaetzlich an die Spaltenbreite gebunden.
     Spalte bei zwei Spalten = (min(100vw-40px,420px)-12px)/2; die breiteste
     Wortmarke hat 4,38:1, daraus 11vw-6px mit Sicherheitsabstand.
     Ueber rund 290 px Fensterbreite ist der zweite Term nie der kleinere,
     dort bleibt es also exakt bei 26 px. */
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))) img.plogo{
    width:auto;
    height:auto !important;
    max-width:100%;
    max-height:min(26px, calc(11vw - 6px));   /* Wortmarken 3,75-4,38:1 */
    object-fit:contain;
  }
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))) img.plogo.knx{
    max-height:36px;   /* 2,09:1 — bindet erst unter ~205 px Fensterbreite */
  }
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))) img.plogo.dohmen{
    max-height:45px;   /* 1,32:1 */
  }
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))) img.plogo.ash{
    max-height:58px;   /* 0,81:1, Hochformat */
  }

  /* „… und viele mehr" ist Beschriftung, kein Logo: eigene volle Zeile. */
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))) .more{
    grid-column:1/-1;
    justify-self:center;
    align-self:center;
    text-align:center;
    padding-top:2px;
  }
}

/* Unter 560 px traegt keine dritte Spalte mehr: die Spalte faellt unter die
   Breite der breitesten Wortmarke. Zwei Spalten teilen 6 Logos ohne Rest. */
@media (max-width: 560px){
  #partner .plogos:has(img.plogo.dohmen):not(:has(img.plogo:nth-of-type(7))){
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:62px 62px 62px auto;
    gap:18px 12px;
    max-width:420px;
  }
}
