/* 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 bleiben Sprung und Zurueck unsichtbar; dort fuehrt das
   Burger-Menue durch die Navigation, und Zurueck hat der Browser selbst. */
.stele-sprung,
.stele-zurueck { display: none; }

/* --- Anzeigemodus sichtbar machen -------------------------------------- */
/* Ein grauer Buchstabe oben rechts: D fuer Desktop, M fuer Mobil, S fuer
   Stele. Er haengt an denselben Abfragen wie das Aussehen und zeigt deshalb
   nicht, was wir vermuten, sondern was der Browser tatsaechlich anwendet.

   Anlass: Die Stele hat einen Knopf fuer Barrierefreiheit, der nur die untere
   Bildschirmhaelfte benutzt. Aus 1080x1920 wird damit rund 1080x960 - ein
   Seitenverhaeltnis von 1,125 statt 0,56, und die Abfrage unten trifft nicht
   mehr. Wenn dort dann M steht, ist das die Erklaerung. */
body::after {
  content: "D";
  position: fixed;
  top: 2px;
  right: 6px;
  z-index: 2000;
  color: rgba(90, 90, 90, 0.45);
  font: 700 22px/1 -apple-system, system-ui, sans-serif;
  pointer-events: none;
}

/* Unterhalb 1628 px blendet das Theme das Desktop-Menue aus - das ist die
   Grenze, an der die Site auf mobil umschaltet. */
@media (max-width: 1627px) {
  body::after { content: "M"; }
}

/* Steht zuletzt und gewinnt damit gegen M, wenn beides zutrifft. */
html.stele body::after { content: "S"; }

/* 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. */
html.stele #toggle { display: none !important; }

/* Zurueck-Knopf links neben dem Sprung. Der Kiosk-WebView hat eine Historie,
   aber keinen Knopf dafuer - und ohne einen kommt man von einem Link in einer
   Hoerstra-Antwort oder aus einem Kalendereintrag nicht zurueck.

   Rechnung fuer den Abstand: Der Sprung sitzt 1,25rem vom rechten Rand und ist
   80 px breit, dazu 16 px Luft - macht 96 px mehr Abstand fuer diesen hier.
   Gleiche Groesse, gleiche Hoehe, damit sie als Paar lesbar sind. */
html.stele .stele-zurueck {
  /* Ohne display hier bliebe die Grundregel .stele-zurueck { display: none }
     stehen - der Knopf war dadurch komplett verschwunden. */
  display: block;
  position: fixed;
  top: 1.45rem;
  right: calc(1.25rem + 96px);
  z-index: 1002;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  /* Dieselbe Scheibe wie hinter dem Burger - das Kopf-Modul der Site legt sie
     dort ueber .mobile-menu .button_container. Auf hellen Seiten sieht man sie
     kaum; ueber einem Foto ist sie der Unterschied zwischen lesbar und nicht.
     Radius wie beim Sprung-Knopf daneben, damit beide gleich aussehen. */
  background: rgba(244, 248, 239, 0.92);
  border-radius: 14px;
  color: var(--leben-green-dark, #276238);
  cursor: pointer;
  touch-action: manipulation;
}

/* Der Pfeil in der Staerke der Burgerstriche (12 px), ohne Rahmen und ohne
   Flaeche - der Burger daneben hat auch keine, und die beiden sollen als Paar
   lesbar sein. Er besteht aus drei Teilen und einem Flicken.

   Die beiden Schenkel: gedrehte Balken mit runden Enden, wie die Burgerstriche.
   Beide beginnen im selben Punkt (22 px von links, halbe Hoehe) und fahren von
   dort auseinander - der Drehpunkt liegt darum am linken Balkenende, nicht in
   seiner Mitte. */
html.stele .stele-zurueck::before,
html.stele .stele-zurueck::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 34px;
  width: 30px;
  height: 12px;
  border-radius: 6px;
  background: currentColor;
  transform-origin: left center;
}

html.stele .stele-zurueck::before { transform: rotate(-45deg); }
html.stele .stele-zurueck::after  { transform: rotate(45deg); }

/* Der Schaft, so lang wie die Burgerstriche. Links eckig - dort sitzt die
   Spitze, eine runde Kappe wuerde davor hervorlugen. */
html.stele .stele-zurueck span {
  position: absolute;
  left: 22px;
  top: 34px;
  width: 44px;
  height: 12px;
  border-radius: 0 6px 6px 0;
  background: currentColor;
}

/* Der Flicken. Zwei Balken mit runden Enden koennen sich an ihrem gemeinsamen
   Anfang nicht treffen - die Rundung ist genau das, was die Spitze verhindert,
   und uebrig bleibt eine Kuppe. Zwei Rahmenkanten eines gedrehten Quadrats
   stossen dagegen in einer Gehrung zusammen. Klein genug, dass von ihm nur die
   Spitze aus der Kuppe herausschaut; seine Schenkel liegen unter den Balken.
   Die Masse sind relativ zum Schaft, in dem er haengt. */
html.stele .stele-zurueck span::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 20px;
  height: 20px;
  border-left: 10px solid currentColor;
  border-bottom: 10px solid currentColor;
  transform: rotate(45deg);
}

html.stele .stele-zurueck:active { opacity: 0.6; }

/* 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. */
html.stele .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. */
html.stele .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. */
html.stele .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. */
html.stele #body-wrapper .container { padding-top: 1rem; }

html.stele { font-size: 36px; }

/* Grosse Schrift braucht relativ weniger Durchschuss als kleine: 1,5
   zieht die Zeilen bei 28 px unnoetig auseinander. */
html.stele 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. */
html.stele h1, html.stele .h1 { font-size: 50px; }
html.stele h2, html.stele .h2 { font-size: 42px; }
html.stele h3, html.stele .h3 { font-size: 36px; }
html.stele h4, html.stele .h4 { font-size: 32px; }
/* Kein Ton an der Stele: Das Geraet hat weder Lautsprecher noch Mikrofon.
   Ein Knopf, der nichts bewirken kann, ist schlimmer als keiner - er laesst
   jemanden zweimal tippen und dann glauben, die Seite sei kaputt. Die
   Sprachausgabe bleibt ueberall sonst, wo sie gehoert wird. */
html.stele .vorlesen-wrapper { display: none !important; }