/* * Die Seite soll beim Nachladen nicht seitlich zucken. * * Wird eine kuerzere Liste geladen, verschwindet die Bildlaufleiste, der * Inhalt wird um ihre Breite breiter und springt - beim naechsten laengeren * Inhalt zurueck. Das reserviert den Platz dauerhaft. Betrifft alle Breiten, * darum ausserhalb der Media Queries. */ html { scrollbar-gutter: stable; } /* * In der Anwendung selbst nicht. * * Dort ist die Seite genau so hoch wie das Fenster - gescrollt wird in den * .scrollBox darin, das Dokument gar nicht. Zu reservieren gibt es also * nichts, aber reserviert wurde trotzdem: gemessen am 20.08.2026 war das * in allen Modulen 1425 statt 1440 Pixel breit. * * Sichtbar wird das ueberall dort, wo das System die Leisten dauerhaft * anzeigt (macOS: "Scrollbalken einblenden - immer"). Dann steht rechts ein * 15 Pixel breiter Streifen, den keine Vorlage faerbt: das Hintergrundbild * des reicht nur bis zum Rand des , in den reservierten * Streifen laeuft allein die Hintergrundfarbe - bei "Wood" also weiss statt * Holz. Neben dem fuenf Pixel breiten Rand, den "space" laesst, sieht das * aus wie eine leere Bildlaufspur. * * #boxAll gibt es nur im angemeldeten Bereich (index_computer.php:138). Die * oeffentlichen Seiten und die Website scrollen wirklich und behalten die * Reservierung. */ html:has(#boxAll) { scrollbar-gutter: auto; } /* * Responsive - loest die drei Geraetezweige ab. * * Bisher gab es drei getrennte Ansichten (computer, tablet, phone) mit eigenen * Views, eigener Bookmarks-Logik und eigenem CSS. Jede Aenderung musste damit * zweimal gemacht werden, und die Zweige sind auseinandergelaufen - in der * Phone-Fassung fehlte sogar eine Rechtepruefung, die der Desktop hat. * * Jetzt laeuft ueberall die Desktop-Ansicht. Diese Datei kommt NACH screen.css * und aendert nur, was auf schmalen Schirmen anders sein muss. * * WICHTIG: Am Desktop bleibt alles, wie es war. Jede Regel hier steckt in einer * Media Query, die erst unterhalb von 960 Pixeln greift - eine Breite, die ein * Desktop-Fenster praktisch nie unterschreitet. * * Der Gedanke dahinter (so von Peter vorgegeben): wird es eng, zaehlt nur die * Liste. Die Ordner links und die Werkzeuge rechts sind das Unwichtigste, sie * verschwinden. Zurueck holt man sie sich ueber die beiden vorhandenen * Strich-Knoepfe - links `#fhideBox`, rechts `#bhide`. Sie legen sich dann * ueber den Inhalt, statt ihn zusammenzuquetschen, und es ist immer nur eine * Spalte zugleich offen. */ /* Symbole, die es nur in einer der beiden Ansichten gibt */ .narrow-only { display: none; } /* * Der Knopf, der schmal die Bereichswahl aufklappt. Am Desktop gibt es ihn * nicht - dort stehen alle Bereiche nebeneinander im Kopf. */ #navBtn { display: none; } /* ------------------------------------------------------------------ * Desktop - bis hierher war min-width fest in computer.css verdrahtet. * Jetzt gilt sie nur noch, solange auch wirklich Platz da ist. * ------------------------------------------------------------------ */ @media (min-width: 960px) { #boxAll { min-width: 960px; } #boxHeader { min-width: 960px; } /* * Die Kopfleiste war in Pixeln ausgemessen: 250 fuers Logo, 550 fuer die * Bereiche, davon 500 fuer die Kacheln (screen.css). Die 500 sind nur eine * Rechnung - sieben Kacheln mit 60px Mindestbreite und je 10px Abstand * ergeben 490. Sie ging auf, solange die Beschriftung in die 60px passte. * * Eine breitere Schrift laesst die Kachel mitwachsen, die Summe * ueberschreitet die 500, und der letzte Punkt faellt in die zweite Zeile - * obwohl rechts das halbe Fenster frei ist. Die Leiste nimmt sich jetzt den * Platz, den sie braucht; nach rechts begrenzt sie ohnehin nur #userNav, * und das haengt absolut am Rand. */ #boxMainHeader { width: auto; } #nav { width: auto; display: flex; } #nav > li { float: none; } } /* * Die Hoehe der Kopfleiste steht an einer Stelle. * * Sie wird an mehreren Orten gebraucht - die Spalten fahren darunter ein, die * Klapplisten haengen daran. Als Variable steht die Zahl einmal da; wer den * Kopf aendert, aendert alles Uebrige mit. */ :root { --bm-kopf: 60px; } /* ------------------------------------------------------------------ * Schmal - unter 960px. Die Liste bekommt die ganze Breite. * ------------------------------------------------------------------ */ @media (max-width: 959px) { /* * Auf schmalen Schirmen ist das Grundmass groesser: 13 Pixel liest man am * Schreibtisch bequem, auf dem Handy mit Armlaenge Abstand nicht mehr. Die * gewaehlte Stufe wirkt weiterhin - sie rechnet auf diesem Grundmass. */ :root { --bm-basis: 15px; /* * Die Hoehe des Kopfes: 13 Rand + 44 Knopf + 13 Rand. * * Sie steht hier, weil drei Dinge sie brauchen und sonst auseinander * laufen: der Kopf selbst, die beiden Spalten, die darunter fest * stehen, und die Flaeche ueber dem weggeschobenen Inhalt. Vorher * stand in den Spalten die Desktop-Hoehe 80 - deshalb begannen sie * acht Pixel tiefer als die Liste daneben. */ --bm-kopf: 60px; } #boxAll, #boxHeader { min-width: 0; } /* * Der Kopf liegt ueber allem, was schmal aufgeht. * * Die Stapelfolge, an einer Stelle: * * 1003 der Vorhang * 1004 die ein- und ausfahrenden Spalten * 1010 die Kopfleiste - samt allem, was aus ihr herunterhaengt * 1400 das Werkzeugblatt * * Der Kopf stand auf 1003 und damit unter der Spalte. Solange die Spalte * ihn ohnehin verdeckte, fiel es nicht auf; seit sie erst darunter * beginnt, schnitt sie die Klapplisten ab, die aus dem Kopf * herunterhaengen. Deren eigenes z-index von 1200 half nichts - es gilt * nur innerhalb des Stapels, den #boxHeader aufmacht. * * Diese Regel MUSS fuer sich stehen. Zuerst war sie an die Zeile darueber * angehaengt, und damit bekam #boxAll das z-index mit - der ganze Inhalt * legte sich ueber die Klappliste. Peter sah es sofort. */ #boxHeader { z-index: 1010; } /* * Die Raender, die am Desktop den beiden Spalten Platz machen, fallen weg. * Mit !important, weil das JavaScript diese Werte beim Ein- und Ausblenden * direkt ins Element schreibt - ohne den Vorrang blieben Reste stehen. */ #boxMain { margin-left: 0 !important; } #boxMiddle { margin-right: 0 !important; } /* --------------------------------------------------------------- * Der Kopf wird zum Pulldown. * * Am Desktop stehen die sieben Bereiche als Icon-Reihe nebeneinander. * Schmal ist dafuer kein Platz, also zeigt der Kopf nur noch den Bereich, * in dem man gerade ist. Ein Tipp darauf klappt die uebrigen darunter auf. * * Bewusst kein