/* Schriftgroessen fuer hochkante Grossdisplays (Info-Stele im Dorf).
   Ohne passendes Geraet ist diese Datei wirkungslos - die Abfrage unten
   trifft weder Desktop noch Handy -, deshalb wird sie ohne Schalter geladen.

   Ausgangslage: quark stellt die Wurzelgroesse fliessend ein und landet bei
   1080 px Fensterbreite auf 19 px; spectre macht daraus 0,8rem = 15,2 px
   Fliesstext. Auf der Stele sind das 9,3 mm - ein CSS-Pixel misst dort
   0,61 mm statt der von CSS angenommenen 0,26 mm (am Geraet nachgemessen
   2026-08-24: 1080x1920 bei devicePixelRatio 1, der 10-cm-Balken der
   /check-Seite ist real 23 cm lang).

   Zwei unabhaengige Ueberlegungen fuehren zur selben Groesse:

   Lesbarkeit - bei einer Versalhoehe von rund einem Zweihundertstel der
   Leseentfernung wird es bequem. 15 px reichen an der Stele bis gut 1,3 m,
   also nur fuer den, der schon davorsteht. Wer ueberlegt, ob er hingeht,
   steht zwei Meter weg.

   Zeilenlaenge - 1080 px Breite fassen bei 15 px ueber 120 Zeichen je Zeile.
   Angenehm sind 60 bis 75; darueber verliert das Auge beim Ruecksprung die
   Zeile. Erst um die 30 px landet man dort.

   36 px Wurzelgroesse ergibt 28,8 px Fliesstext (17,6 mm, lesbar bis etwa
   2,4 m, rund 69 Zeichen je Zeile). Weil saemtliche Groessen von quark und
   spectre in rem haengen, wachsen Ueberschriften, Abstaende und Knoepfe im
   selben Verhaeltnis mit - eine Zahl statt einer Tabelle. */

/* Ausserhalb der Stele bleibt der Sprung auf die Kachelseite unsichtbar;
   dort fuehrt das Burger-Menue durch die vollstaendige Navigation. */
.stele-sprung { display: none; }

@media (min-width: 800px) and (max-aspect-ratio: 3/4) {
  /* Und auf der Stele genau umgekehrt.

     Mit !important, ungern, aber unvermeidlich: leben-in-hoerste bringt ein
     eigenes Kopf-Modul mit, das .mobile-menu .button_container inline im head
     auf display:block und z-index:1001 festnagelt - beides !important, und
     inline heisst ohnehin nach dieser Datei. Ohne dieselbe Betonung kommt
     hier nichts durch, und das Ausblenden scheitert lautlos: Beide Knoepfe
     liegen an derselben Stelle, der Burger bleibt obenauf, und der Tipp
     oeffnet weiter das Menue, das er ersetzen sollte.

     Der Selektor haengt an nichts ausser der Kennung - wo der Knopf im Baum
     steht, geht die Regel nichts an. Die Ebene ueber dem fremden Modul ist
     der Rueckhalt, falls das Ausblenden doch einmal nicht greift. */
  #toggle { display: none !important; }

  /* Trefferflaeche. Die 28x24 px des Themes sind auf der Stele 17x15 mm und
     liegen damit klar unter den 60 px, ab denen dieses Panel zuverlaessig
     trifft. 80 px sind knapp 5 cm - der Knopf, der zum Menue fuehrt, sollte
     nicht der schwerste Treffer der Seite sein.

     Der Selektor nimmt das a mit: das Kopf-Modul der Site setzt padding und
     border-radius ueber .mobile-menu .button_container, und es steht inline
     im head, also nach dieser Datei. Gleiche Spezifitaet reicht da nicht. */
  .mobile-menu a.stele-sprung {
    /* display und z-index gehoeren hierher, nicht an .stele-sprung: Zwischen
       zwei !important entscheidet weiterhin die Spezifitaet, und
       .mobile-menu .button_container (0,2,0) schlaegt .stele-sprung (0,1,0).
       Solange hier block stand, fiel das nicht auf - es war dasselbe, was
       das fremde Modul setzt. Mit flex fiel die ganze Anordnung aus, und die
       Balken lagen wieder als flacher Streifen oben.
       (#toggle gewinnt dagegen mit (1,0,0), deshalb greift das Ausblenden.) */
    display: flex !important;
    z-index: 1002 !important;
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Die Balken aus der absoluten Positionierung des Themes loesen. Dort
     haengen sie an drei Einzelregeln mit festen top-Werten (0, 8, 16), die
     fuer ein 24 px hohes Feld gedacht sind - im vergroesserten Knopf kleben
     sie dadurch als Block am oberen Rand. Statisch im Flex-Feld ordnen sie
     sich von selbst mittig an, unabhaengig davon, was das Theme fuer top
     und left setzt. Ein Kampf um Spezifitaet weniger. */
  /* Drei Balken zu 12 px mit 6 px Luft ergeben 48 px Hoehe - genauso breit
     wie die Balken selbst, das Zeichen wird also quadratisch. Duenne Striche
     in einem 80er-Feld sahen aus wie ein flacher Streifen, und aus zwei
     Metern Entfernung ist ein 12 px starker Balken (7 mm) noch als Balken zu
     erkennen. */
  .mobile-menu a.stele-sprung span {
    /* Ohne display:block bleiben die Balken inline, und inline ignoriert
       Breite und Hoehe - das Theme hatte sie nur ueber position:absolute aus
       dem Textfluss geholt. */
    display: block;
    position: static;
    height: 12px;
    width: 48px;
    border-radius: 6px;
  }

  /* Der Sitename ist unterhalb 1628 px auf clamp(13px, 3.4vw, 18px) gesetzt.
     Bei 1080 px greift die Deckelung, er steht also auf 18 px - 11 mm, neben
     einem 28,8 px grossen Fliesstext und einem 75 px hohen Logo. 32 px ist
     die Zahl, die dieselbe Datei fuer breite Bildschirme waehlt; Platz dafuer
     ist hier. Zwei Klassen im Selektor, weil das Kopf-Modul inline im head
     steht und bei gleicher Spezifitaet gewaenne. */
  .logo-with-title .site-title-text { font-size: 32px; }

  /* Abstand unter der Kopfzeile halbieren. 2rem sind bei 36 px Wurzelgroesse
     72 px - gut vier Zentimeter Leere, bevor der Inhalt beginnt. Der Wert
     haengt an rem und ist so gross geworden, ohne dass ihn jemand gewaehlt
     haette. Nur oben; unten stoert er nicht. */
  #body-wrapper .container { padding-top: 1rem; }

  html { font-size: 36px; }

  /* Grosse Schrift braucht relativ weniger Durchschuss als kleine: 1,5
     zieht die Zeilen bei 28 px unnoetig auseinander. */
  body { line-height: 1.4; }

  /* Ueberschriften duerfen nicht im selben Verhaeltnis mitwachsen. Die
     Groessenstaffel von spectre (h1 = 2rem) ist fuer eine Wurzel von 19 px
     gedacht und ergibt dort 38 px. An 36 px gehaengt werden daraus 72 px,
     also 44 mm - Plakatschrift, und ein langer Titel fuellt den halben
     Bildschirm. Im Archiv passiert das regelmaessig, weil die Titel aus
     Dateinamen entstehen.

     Je groesser die Grundschrift, desto kleiner darf der Sprung sein: den
     Rang einer Zeile zeigt hier schon ihre absolute Groesse, nicht erst der
     Abstand zum Fliesstext. h1 bleibt mit 50 px knapp beim Doppelten der
     28,8 px und ist bis rund vier Meter lesbar - fuer eine Ueberschrift
     reicht das reichlich. */
  h1, .h1 { font-size: 50px; }
  h2, .h2 { font-size: 42px; }
  h3, .h3 { font-size: 36px; }
  h4, .h4 { font-size: 32px; }
}