/* * ═══════════════════════════════════════════════════════════════════════════ * DIE ARBEITSFLÄCHE ZWISCHEN KOPF UND FUSS DER WEBSITE * ═══════════════════════════════════════════════════════════════════════════ * * ⚠ HIER STAND EINMAL DAS GEGENTEIL: „Bewusst schlicht und NICHT im Aussehen der * öffentlichen Seite: wer hier ist, arbeitet." Der Nutzer hat am 05.08.2026 * anders entschieden — Kopf und Fuss der Website umschliessen jetzt auch den * internen Bereich. Und er hat recht: für acht Menschen, die zwei- bis dreimal im * Jahr etwas eintragen, ist eine vertraute Umgebung mehr wert als die Ansage * „du bist woanders". Der `noindex`-Vermerk und die Anmeldung sagen das ohnehin. * * Diese Datei formatiert nur noch DAZWISCHEN: Formulare, Tabellen, Hinweise, * Karten. Sie wird NACH dem Stylesheet der Website geladen und gewinnt deshalb bei * gleicher Genauigkeit. * * ⚠ KEINE `font-family` FÜR `body`. Die Schrift der Website steht als `style` am * ``-Element und wird vererbt; eine Angabe hier würde sie überschreiben, und * der interne Bereich stünde in Systemschrift zwischen zwei Blöcken in * Vereinsschrift. * * Reines CSS ohne Aufbauwerkzeug: der interne Bereich muss auf einem * Standard-Webspace laufen und in fünf Jahren noch, ohne Tailwind-Bau. Die * Klassen `.kopf`, `.marke`, `.kopfnav` und `.wer` gehören zum schlichten * Rückfallrahmen (`seite_kopf_schlicht`) und werden nur gebraucht, wenn * `_rahmen.php` fehlt — also unter `npm run dev`. */ :root { --blau: #005090; --hell: #f2f6fa; --dunkel: #10161d; --rand: #d8dfe7; } /* * ═══════════════════════════════════════════════════════════════════════════ * ⚠ NUR IM INHALT — ein `*` HAT DEN KOPF DER WEBSITE ZERSTÖRT * ═══════════════════════════════════════════════════════════════════════════ * * Hier stand `* { box-sizing: border-box; }`. Harmlos, solange dieser Bereich * seinen eigenen schlichten Rahmen hatte. Seit Kopf und Fuss der Website * mitgeliefert werden, war es ein Fehler mit sichtbarer Folge. * * WARUM: `globals.css` gibt der Inhaltsschale ausdrücklich `box-sizing: * content-box` (`@utility schale`) — nur so sind `
` * und `
` gleich breit. Tailwind legt * seine Regeln in einen CASCADE LAYER. Und eine Regel OHNE Layer schlägt jede * Regel IN einem Layer, ganz gleich wie spezifisch sie ist — ein `*` mit * Spezifität 0 gewinnt gegen `.schale`. * * GEMESSEN am 06.08.2026 bei 1978 px Fensterbreite: * * box-sizing Schale Logo im Kopf Logo im Fuss * Website content-box 1680 182 182 * Intern border-box 1600 222 182 * * Vierzig Pixel, und der Nutzer hat sie im Screenshot sofort gesehen: „Das Logo * sitzt intern viel zu weit rechts und ist mit dem Logo aus dem Footer nicht * linksbündig." Meine eigenen Messungen hatten es nicht gefunden, weil ich bei * 1440 px gemessen habe — dort greift die Maximalbreite von 1600 px gar nicht, * und beide Rechenwege kommen zufällig auf dasselbe Ergebnis. * * MERKSATZ: Wer fremdes Markup übernimmt, darf keine Regel ohne Layer und ohne * Geltungsbereich schreiben. Gemessen wird an der Stelle, an der die Grenze * wirkt — nicht dort, wo es gerade bequem ist. */ .inhalt, .inhalt *, .bereiche, .bereiche *, .krumen, .krumen *, .kopf, .kopf * { box-sizing: border-box; } body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--dunkel); background: #fff; } .kopf { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid var(--rand); background: var(--hell); } .marke { font-weight: 700; text-decoration: none; color: var(--dunkel); } .marke span { display: block; font-weight: 400; font-size: .78rem; color: #5a6673; } .kopfnav { display: flex; gap: 1rem; align-items: center; font-size: .9rem; } .kopfnav a { color: var(--blau); } .wer { color: #5a6673; } /* * ⚠ DIESELBE SCHALE WIE DIE WEBSITE (100rem) UND DIESELBEN SEITENRÄNDER. * * Sonst begänne der Inhalt an einer anderen Kante als Wappen und Fusszeile — und * genau darauf hat der Nutzer bei der Startseite schon zweimal hingewiesen * („Text zu Text"). Die Werte stammen aus `globals.css` (`--container-schale`) * und den Polstern der Kopfleiste (`px-4 sm:px-6 2xl:px-10`). * * Damit Formulare nicht über die ganze Breite laufen, sind Karten und * Formularelemente einzeln begrenzt — Tabellen dürfen breit sein, sie brauchen * den Platz. */ .inhalt { max-width: 100rem; margin: 0 auto; padding: 2rem 1rem 4rem; } @media (min-width: 640px) { .inhalt { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1536px) { .inhalt { padding-left: 2.5rem; padding-right: 2.5rem; } } .inhalt > p, .inhalt > .hinweis, .karte, .inhalt form { max-width: 52rem; } /* Tabellen dürfen die ganze Schale nutzen — eine Meldungsliste mit sechs Spalten auf 52 rem zu quetschen macht sie unlesbar. */ .inhalt > table { max-width: none; } /* `font-weight` mitgeben: die Website setzt für Überschriften eigene Gewichte, und ohne Angabe erbte hier ein zufälliger Wert aus deren Stylesheet. */ h1 { font-size: 1.9rem; font-weight: 800; margin: .25rem 0 1.5rem; letter-spacing: -0.02em; } h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .75rem; } label { display: block; margin: .9rem 0 .25rem; font-weight: 600; font-size: .92rem; } input[type=text], input[type=password], input[type=email], input[type=date], select, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--rand); border-radius: .4rem; font: inherit; background: #fff; } textarea { min-height: 8rem; } button, .knopf { display: inline-block; margin-top: 1.1rem; padding: .6rem 1.1rem; border: 0; border-radius: 999px; background: var(--blau); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } /* * ⚠ `a.leise` MUSS MITGENANNT WERDEN — hier stand nur `button.leise`, und das war * ein Fehler mit unsichtbarer Folge im Wortsinn. * * `.knopf` setzt `color: #fff` (weisse Schrift auf blauem Grund). Für ein `` griff `button.leise` nicht — es blieb also weisse Schrift. * Auf dem Rechner fiel das nicht auf, weil der Grund blau blieb. Am Handy setzt * `.inhalt td.aktionen a` den Grund auf `#fff`, und damit stand weisse Schrift auf * weissem Grund: der Knopf „Herunterladen" war eine leere weisse Fläche. * * Gemeldet vom Nutzer am 06.08.2026 („der download button auf mobil ist nur weiß * ohne text ersichtlich"). Meine eigene Prüfung hatte nur das Markup gelesen — * dass der Verweis DA ist, sagt nichts darüber, ob man ihn SIEHT. * * ⚠ NEBENWIRKUNG, ausdrücklich gewollt: die Verweise „Zurück zur Übersicht" tragen * dieselbe Klasse und waren dadurch bisher gefüllte blaue Knöpfe — also so laut wie * „Speichern". Ab jetzt sind sie umrandet und leise, wie der Klassenname sagt. */ button.leise, a.leise { background: #fff; color: var(--blau); border: 1px solid var(--rand); } .hinweis { padding: .8rem 1rem; border-radius: .5rem; border-left: 3px solid var(--blau); background: var(--hell); margin: 1rem 0; } .hinweis.warnung { border-left-color: #b3261e; background: #fdf1f0; } .hinweis.gut { border-left-color: #1d7a3d; background: #eff8f2; } /* * ⚠ DIE KACHELN NUTZEN DIE GANZE BREITE — und das war eine Kehrtwende. * * Ich hatte sie auf 52 rem begrenzt, nachdem der Nutzer sagte, es sähe „auf * Desktop komisch aus". Seine Antwort auf die schmale Fassung: „du darfst intern * aber die ganze Breite verwenden. Die 5 Menüpunkte waren vorhin alle mal * nebeneinander, fand ich nicht schlecht." * * Also breit. Bei fünf Bereichen (Rolle `verwaltung`) stehen sie damit in einer * Reihe, und das ist die Übersicht, die eine Übersicht sein soll. * * ⚠ WAS TROTZDEM SCHMAL BLEIBT: laufender Text und Formulare. Nicht aus * Geschmack — eine Textzeile über 1400 px ist schwer zu lesen (das Auge findet * den Zeilenanfang nicht wieder), und ein Eingabefeld über die ganze Breite für * einen 20 Zeichen langen Titel sieht aus wie ein Fehler. Tabellen dürfen breit * sein, sie brauchen es. */ .karten { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 1.25rem; } /* * ═══════════════════════════════════════════════════════════════════════════ * HÖCHSTENS VIER SPALTEN IN DER ÜBERSICHT — damit die Zeilen dort umbrechen, * wo der Nutzer sie beschrieben hat * ═══════════════════════════════════════════════════════════════════════════ * * Er hat die Kacheln am 06.08.2026 in drei Zeilen vorgegeben („neue ZEILE …"), * sah aber zwei. Der Grund lag nicht in der Reihenfolge, sondern hier: `auto-fit` * füllt, was hineinpasst, und `.inhalt` ist 100rem breit — das sind bis zu sechs * Spalten. Bei zehn Kacheln wurden daraus 5 + 5. * * ⚠ VIER, WEIL SEINE MITTLERE ZEILE VIER KACHELN HAT. Die Zahl ist nicht geraten: * PopUp, Ankündigung, Rückschau, Presse stehen bei ihm zusammen, und das geht nur * bei genau vier Spalten auf. Damit ergibt sich 4 + 4 + 2 — seine drei Zeilen. * * ⚠ `repeat(4, 1fr)` UND NICHT `auto-fit` MIT OBERGRENZE. Eine Obergrenze für * `auto-fit` gibt es in CSS nicht; der übliche Ersatz (`minmax` mit berechneter * Mindestbreite) rechnet Spaltenabstände in einer Formel mit und bricht, sobald * `gap` sich ändert. Vier feste Spuren sind hier ehrlicher: es sind zehn Kacheln, * keine Liste, die wächst. * * ⚠ NUR DIE ÜBERSICHT, deshalb die zweite Klasse. Die Ordnerkacheln in „Dateien" * benutzen dasselbe `.karten` und SOLLEN die Breite ausnutzen — dort sind es * beliebig viele, und vier Spalten wären bei zwanzig Ordnern eine unnötig lange * Seite. * * Unterhalb von 62rem bleibt `auto-fit` zuständig und macht daraus von selbst * drei, zwei oder eine Spalte. Vier Spalten × 14rem plus drei Abstände sind * 58.7rem — die Grenze liegt bewusst knapp darüber. */ @media (min-width: 62rem) { .karten.bereichskacheln { grid-template-columns: repeat(4, 1fr); } } /* * ═══════════════════════════════════════════════════════════════════════════ * DER ERZWUNGENE ZEILENUMBRUCH ZWISCHEN DEN GRUPPEN * ═══════════════════════════════════════════════════════════════════════════ * * `grid-column: 1 / -1` heisst „von der ersten bis zur letzten Spalte". Ein * Element, das die ganze Breite belegt, drängt alles Folgende in eine neue Zeile — * das ist der einzige Weg, in einem Raster einen Umbruch zu erzwingen, ohne für * jede Gruppe ein eigenes Raster aufzumachen. * * ⚠ WARUM NICHT DREI GETRENNTE RASTER, was die naheliegende Lösung wäre: dann * bestimmt jede Gruppe ihre Spaltenbreite selbst. Eine Zeile mit zwei Kacheln * hätte doppelt so breite Kacheln wie eine mit vier. Ein Raster mit Umbrüchen hält * ALLE Kacheln gleich breit — und genau das macht es als Raster erkennbar. * * `height: 0` und kein Rand: der Abstand zwischen den Zeilen kommt schon von * `gap`. Eine Höhe hier käme dazu und die Gruppen fielen auseinander. * * ⚠ ER GILT AUCH AM HANDY, wo ohnehin jede Kachel allein steht — dort ist er * unsichtbar und schadet nicht. Ihn nur oberhalb einer Breite zu setzen wäre eine * zweite Regel, die dasselbe entscheidet. */ .zeilenbruch { grid-column: 1 / -1; height: 0; } .karte { display: block; padding: 1.1rem; border: 1px solid var(--rand); border-radius: .75rem; text-decoration: none; color: inherit; background: #fff; } .karte:hover { background: var(--hell); } /* * ⚠ NUR IN DEN KACHELN DER ÜBERSICHT, nicht in jeder `.karte`. * * Diese beiden Regeln machen aus `` die Kachelüberschrift und aus * `` die Beschreibung darunter. Als `.karte strong` geschrieben trafen sie * ab dem Moment, in dem auch Formulare in `.karte` stehen, JEDES hervorgehobene * Wort in einem Formular — im Hinweis „Absätze durch eine **Leerzeile** trennen" * stand „Leerzeile" plötzlich blau in einer eigenen Zeile (gesehen im Bild am * 06.08.2026, gemeldet durch Hinsehen). * * `.karten .karte` trifft nur die Kacheln im Raster der Übersicht. */ .karten .karte strong { display: block; color: var(--blau); } .karten .karte span { font-size: .88rem; color: #5a6673; } /* * Der Abspieler für Hörproben. Eigene Breite, weil er in einer Tabellenspalte * steht: ohne Angabe nimmt er die Breite, die der Browser für richtig hält, und * das sind in Chrome 300 px und in Safari die ganze Spalte. * * `display: block` und ein kleiner Abstand nach oben: er steht UNTER dem * Dateinamen, nicht daneben. Nebeneinander wird die Zeile in der Handyansicht * (Karten) zu einer Zeile mit zwei halben Dingen. */ /* * ═══════════════════════════════════════════════════════════════════════════ * DIE FILTERLEISTE — Terminarten im internen Kalender * ═══════════════════════════════════════════════════════════════════════════ * * Flach gebaut: keine kräftige Farbe, kein Rahmen um das Ganze. Sie steht mitten im * Inhalt, und eine zweite laute Leiste unter der Navigation würde mit ihr um * Aufmerksamkeit streiten. * * ⚠ 44 px MINDESTHÖHE, auch am Rechner. Diese Verweise werden am Handy angetippt, * womöglich mit einem Instrument in der anderen Hand. * * `flex-wrap`: bei vier Filtern und 360 px Handybreite passen sie in zwei Zeilen. * Waagerechtes Schieben wäre die Alternative und ist schlechter — man sieht dann * nicht, dass es einen vierten Filter gibt. */ .filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.25rem; } .filter a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem .9rem; border: 1px solid var(--rand); border-radius: 999px; background: #fff; color: var(--blau); text-decoration: none; font-size: .92rem; } .filter a span { color: #5a6673; font-size: .82rem; } .filter a.hier { background: var(--blau); color: #fff; border-color: var(--blau); font-weight: 600; } /* Auf blauem Grund braucht die Zahl eine eigene Farbe — grau ist dort kaum lesbar. */ .filter a.hier span { color: rgba(255,255,255,.78); } .hoerprobe { display: block; width: 100%; max-width: 20rem; margin-top: .4rem; height: 2.25rem; } table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .93rem; } th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--rand); } th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6673; } code { background: var(--hell); padding: .1rem .35rem; border-radius: .25rem; font-size: .9em; } /* ═══════════════════════════════════════════════════════════════════════════ * ABLAGEFLÄCHE FÜRS HOCHLADEN — Dateien hineinziehen * ═══════════════════════════════════════════════════════════════════════════ * * Frage des Nutzers (06.08.2026): „Ist das Upload-Feld ein Drag-and-drop-Feld? * Können hier mehrere Dateien ausgewählt werden?" * * Mehrere: ja, das konnte das Feld schon (`multiple`). Hineinziehen: die Browser * nehmen Dateien auch auf einem nackten `` an — aber das ist * ein Knopf von 90 px Breite, und darauf zielt niemand. Eine Fläche, die man * trifft, ist der Unterschied zwischen „geht theoretisch" und „wird benutzt". * * ⚠ DAS FELD BLEIBT DARIN UND SICHTBAR. Es wäre verlockend, es zu verstecken und * die Fläche als Knopf zu nehmen — dann hinge das Hochladen aber an JavaScript. * So funktioniert ohne Skript alles wie bisher, und mit Skript kommt das * Hineinziehen dazu. */ .ablage { border: 2px dashed var(--rand); border-radius: .75rem; padding: 1.25rem; background: #fbfcfd; transition: border-color .15s, background .15s; } .ablage.drueber { border-color: var(--blau); background: #eef4fa; } .ablage p { margin: 0 0 .75rem; color: #5a6673; font-size: .92rem; } .ablage .zaehler { margin: .75rem 0 0; font-weight: 600; color: var(--blau); } .ablage .zaehler:empty { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ * BEREICHSLEISTE UND BROTKRUMEN * ═══════════════════════════════════════════════════════════════════════════ * * Die Leiste sitzt direkt unter dem Kopf der Website und trennt sich von ihm * durch einen hellen Grund — sie gehört zum internen Bereich, nicht zur Website. * * ⚠ SIE IST NICHT KLEBRIG (`sticky`). Der Kopf der Website ist es schon; zwei * übereinander klebende Leisten nehmen am Handy die halbe Höhe. Die Seiten hier * sind kurz genug, dass man oben ist, bevor man sie vermisst. */ .bereiche { border-bottom: 1px solid var(--rand); background: var(--hell); } .bereiche-innen { max-width: 100rem; margin: 0 auto; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem; } @media (min-width: 640px) { .bereiche-innen { padding: 0 1.5rem; } } @media (min-width: 1536px) { .bereiche-innen { padding: 0 2.5rem; } } .bereiche a { display: inline-block; padding: .7rem .85rem; font-size: .9rem; font-weight: 600; color: #5a6673; text-decoration: none; border-bottom: 2px solid transparent; } .bereiche a:hover { color: var(--blau); } /* Die laufende Stelle mit Linie UND Farbe: nur Farbe ist bei Blau auf Hellblau zu wenig Unterschied, nur Linie übersieht man beim Überfliegen. */ .bereiche a.hier { color: var(--blau); border-bottom-color: var(--blau); } .krumen { margin: 0 0 1.25rem; font-size: .9rem; color: #5a6673; } .krumen a { color: var(--blau); } .krumen .pfeil { margin: 0 .5rem; color: #a8b2bd; } /* ═══════════════════════════════════════════════════════════════════════════ * JAHRGÄNGE ZUM AUFKLAPPEN — in der Galerie-Übersicht * ═══════════════════════════════════════════════════════════════════════════ */ .jahrgang { border-top: 1px solid var(--rand); } .jahrgang:last-of-type { border-bottom: 1px solid var(--rand); } .jahrgang > summary { cursor: pointer; padding: .85rem .25rem; list-style: none; display: flex; align-items: baseline; gap: .75rem; } .jahrgang > summary::-webkit-details-marker { display: none; } /* Eigenes Dreieck, damit es links steht und sich dreht — das eingebaute sitzt je nach Browser woanders und lässt sich nicht zuverlässig formatieren. */ .jahrgang > summary::before { content: "›"; display: inline-block; width: .8rem; color: var(--blau); font-weight: 700; transition: transform .15s; } .jahrgang[open] > summary::before { transform: rotate(90deg); } .jahrgang > summary strong { font-size: 1.15rem; } .jahrgang > summary:hover { background: var(--hell); } .jahrgang table { margin-top: 0; margin-bottom: 1rem; } /* ═══════════════════════════════════════════════════════════════════════════ * ⚠ FESTE SPALTENBREITEN — jede Jahresgruppe ist eine EIGENE Tabelle * ═══════════════════════════════════════════════════════════════════════════ * * Und genau das ist die Falle: eine Tabelle rechnet ihre Spaltenbreiten aus IHREM * Inhalt. Acht Jahrgänge sind acht Tabellen, also acht verschiedene Ergebnisse. * * GEMESSEN am 06.08.2026 bei 1600 px, linke Kante der Titelspalte: * * 2026 229 2025 198 2024 274 2023 278 * 2022 291 2021 266 2020 319 2019 243 * * Über 120 px Unterschied. Beim Aufklappen eines Jahrgangs sprangen die Spalten, * und untereinander stand nichts in einer Flucht — vom Nutzer gemeldet. * * `table-layout: fixed` löst das: die Breiten stehen fest, der Inhalt richtet sich * danach. Nur die Titelspalte bleibt frei und nimmt den Rest — sie ist die * einzige, deren Länge nicht vorhersehbar ist. * * ⚠ MIT `overflow-wrap`, sonst schiebt ein langer Titel ohne Leerzeichen die * feste Breite doch wieder auf. */ .jahrestabelle { table-layout: fixed; width: 100%; } .jahrestabelle th, .jahrestabelle td { overflow-wrap: anywhere; } .jahrestabelle th:nth-child(1), .jahrestabelle td:nth-child(1) { width: 10rem; } .jahrestabelle th:nth-child(2), .jahrestabelle td:nth-child(2) { width: auto; } .jahrestabelle th:nth-child(3), .jahrestabelle td:nth-child(3) { width: 9rem; } .jahrestabelle th:nth-child(4), .jahrestabelle td:nth-child(4) { width: 7.5rem; } .jahrestabelle th:nth-child(5), .jahrestabelle td:nth-child(5) { width: 13rem; } .jahrestabelle th:nth-child(6), .jahrestabelle td:nth-child(6) { width: 11rem; } /* Die Galerie-Jahrestabelle hat nur zwei Spalten: Vorschaubild und Angaben. */ .jahrgang table:not(.jahrestabelle) { table-layout: fixed; width: 100%; } .jahrgang table:not(.jahrestabelle) td:first-child { width: 6rem; } /* ═══════════════════════════════════════════════════════════════════════════ * AM HANDY — ZEILEN WERDEN KARTEN * ═══════════════════════════════════════════════════════════════════════════ * * Anlass: der Nutzer hat die Masken am 06.08.2026 auf einem iPhone geprüft. * Befund wörtlich: „Es zerhagelt die Tabellen und sieht unbedienbar aus." Am * Rechner war alles gut — und soll es bleiben. Denn die Pflege wird nach seiner * Einschätzung überwiegend am Telefon stattfinden. * * WARUM ES ZERHAGELT — gerechnet, nicht geraten: * `.jahrestabelle` steht auf `table-layout: fixed` mit festen Spaltenbreiten * (10 + auto + 9 + 7,5 + 13 + 11 rem, siehe oben). Das sind rund 808 px * Mindestbreite OHNE die Titelspalte. Ein iPhone hat 390 px. Die restlichen * Tabellen haben fünf bis sechs Spalten mit `white-space: nowrap` an den Zellen * — sie brechen nicht, sie schieben. * * WARUM KEIN WAAGERECHTES SCROLLEN. Das wäre die kurze Antwort: `overflow-x: * auto` um jede Tabelle, fertig. Nur ist der Zweck dieser Tabellen nicht Lesen * sondern BEDIENEN — jede Zeile endet in „Bearbeiten" und „Entfernen". In einem * Scrollkasten liegen diese Knöpfe genau dort, wo man sie nicht sieht, und man * trifft sie beim Wischen versehentlich. Eine Tabelle, durch die man schiebt, * ist lesbar; bedienbar ist sie nicht. * * DESHALB: unter 768 px wird jede Zeile eine Karte, jede Zelle eine Zeile * darin, mit ihrer Spaltenüberschrift darüber. Die Kopfzeile entfällt, weil * sie dann nichts mehr überschreibt. * * ⚠ DIE BESCHRIFTUNG KOMMT AUS DER ZELLE (`data-spalte`), NICHT AUS DIESER * DATEI. Man könnte sie hier je Spaltennummer hinschreiben * (`td:nth-child(3)::before { content: "Kategorie" }`) und käme ohne Änderung * am PHP aus. Dann stünde die Überschrift aber zweimal im Projekt — einmal im * `` und einmal hier — und beim Umbenennen einer Spalte driftet sie * auseinander. Genau diese Art Dublette ist in diesem Projekt schon viermal * schiefgegangen. Die Zelle trägt ihre Überschrift selbst. * * ⚠ `!important` IST HIER NICHT ZU VERMEIDEN, und das ist der einzige Ort in * dieser Datei. `white-space: nowrap`, Polster und Schriftgrössen stehen als * INLINE-`style` an den Zellen und Knöpfen (`neuigkeiten.php:565` und weitere). * Ein Inline-Attribut schlägt jede Regel aus einem Stylesheet, Layer hin oder * her — dagegen hilft nur `!important`. Die Alternative wäre, in fünf Masken * jedes `style`-Attribut in eine Klasse zu überführen; das ist richtig, aber ein * eigener Umbau, und er würde den Handy-Fehler nicht schneller beheben. * 768 px = Tailwinds `md`. Darüber greift keine dieser Regeln. */ @media (max-width: 767px) { .inhalt table { margin-top: .75rem; font-size: 1rem; } /* Die Kopfzeile überschreibt nichts mehr, sobald die Zellen untereinander stehen — jede Zelle sagt selbst, was sie ist. `th` ZUSÄTZLICH zu `thead`: alle fünf Masken benutzen inzwischen ``, aber `zugaenge.php` tat es bis zum 06.08.2026 nicht, und der Fehler wäre stumm gewesen — die Überschriften hätten als erste Karte dagestanden. Im internen Bereich ist jedes `th` eine Spaltenüberschrift, keine Zeilen- überschrift; es auszublenden ist hier immer richtig. */ .inhalt thead, .inhalt th { display: none; } .inhalt tbody, .inhalt tr, .inhalt td { display: block; } .inhalt tr { margin-bottom: .7rem; padding: .85rem .9rem; border: 1px solid var(--rand); border-radius: .75rem; } /* Die letzte Karte braucht unten keinen Abstand — darunter kommt schon der Abstand der Tabelle. */ .inhalt tr:last-child { margin-bottom: 0; } .inhalt td { padding: .3rem 0; border-bottom: none; /* Bricht das Inline-`white-space:nowrap` der Masken. Ohne das steht ein langes Zitat in der Pressetabelle als einzige 900 px breite Zeile. */ white-space: normal !important; overflow-wrap: anywhere; } /* Leere Zellen (etwa eine Aktionsspalte ohne Rechte) würden als leere Zeile mit Polster stehen bleiben. */ .inhalt td:empty { display: none; } /* Die Spaltenüberschrift ÜBER dem Wert, nicht davor: nebeneinander müsste man eine Breite für die Beschriftung festlegen, und bei „Überschrift" gegen „Wann" wäre jede Wahl für eine von beiden falsch. */ .inhalt td[data-spalte]::before { content: attr(data-spalte); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6673; } /* Die Zelle, an der man die Zeile erkennt (Titel, Überschrift, Name). Sie steht als Überschrift der Karte da und braucht keine Beschriftung — was „Bäckerei Bräzzele" ist, sagt die Karte durch ihre Stellung. */ .inhalt td.haupt { padding-bottom: .45rem; font-size: 1.05rem; } .inhalt td.haupt::before { display: none; } /* * Die Aktionsspalte — der Grund für den ganzen Umbau. * * ⚠ 2,75 rem = 44 px MINDESTHÖHE. Das ist keine Zierde: „Bearbeiten" und * „Entfernen" stehen direkt nebeneinander, und die eine Aktion ist nicht * zurücknehmbar. Bei den ursprünglichen `.25rem` Polster sind das * Trefferflächen von rund 26 px — auf einem Telefon liegt „Entfernen" damit * innerhalb der Fingerkuppe, die auf „Bearbeiten" zielt. */ .inhalt td.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; padding-top: .7rem; border-top: 1px solid var(--rand); } .inhalt td.aktionen::before { display: none; } /* Die Masken setzen `style="display:inline"` an die Formulare — als Flex-Kind muss es ein Kasten sein, sonst sitzt der Knopf daneben statt darin. */ .inhalt td.aktionen form { display: inline-flex !important; margin: 0; } .inhalt td.aktionen a, .inhalt td.aktionen button { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0 !important; padding: .4rem 1rem !important; font-size: .95rem !important; border: 1px solid var(--rand); border-radius: .5rem; background: #fff; /* ⚠ FARBE MITGEBEN. Dieser Block setzt den Grund auf weiss; ohne eigene Schriftfarbe hängt die Lesbarkeit davon ab, was der Verweis sonst erbt — und erbt er `.knopf`, ist sie weiss. Genau so war „Herunterladen" unsichtbar. */ color: var(--blau); text-decoration: none; } /* * Die festen Spaltenbreiten aufheben. Sie sind oben mit `.jahrestabelle * td:nth-child(n)` gesetzt (Spezifität 0,2,1) — eine Regel mit `.inhalt td` * (0,1,1) käme dagegen nicht an. Deshalb hier mit demselben Gewicht und * später in der Datei, nicht mit `!important`. */ .inhalt .jahrestabelle { table-layout: auto; } .inhalt .jahrestabelle td:nth-child(1), .inhalt .jahrestabelle td:nth-child(2), .inhalt .jahrestabelle td:nth-child(3), .inhalt .jahrestabelle td:nth-child(4), .inhalt .jahrestabelle td:nth-child(5), .inhalt .jahrestabelle td:nth-child(6) { width: auto; } .inhalt .jahrgang table:not(.jahrestabelle) { table-layout: auto; } .inhalt .jahrgang table:not(.jahrestabelle) td:first-child { width: auto; } } /* ═══════════════════════════════════════════════════════════════════════════ * AM HANDY — DIE FUSSZEILE DER WEBSITE WIRD SCHMAL * ═══════════════════════════════════════════════════════════════════════════ * * Wunsch des Nutzers (06.08.2026): „Im Internen Bereich Footer auf Mobilversion * schmälern, heißt Logo noch anzeigen, die Texte bis zum Copyright entfernen * (sind intern auf Mobil auch nicht notwendig)." * * Der Grund ist nachvollziehbar: unter 640 px stellt Tailwind das Raster * einspaltig, und dann stehen vier Spalten UNTEREINANDER — Wappen, Probezeiten, * drei Bereichsverweise, drei Rechtsverweise. Auf einer Maske, die selbst kurz * ist, ist der Fuss dann länger als der Inhalt. * * ⚠ EINE ABWEICHUNG VON DER VORGABE, BEWUSST: Kontakt · Impressum · * Datenschutz BLEIBEN. `anmelden.php` ist ohne Anmeldung erreichbar, also eine * öffentliche Seite, und § 5 DDG verlangt ein „ständig verfügbares" Impressum. * Eine Fusszeile, die es am Telefon weglässt, wäre auf genau der einen Seite * dieses Bereichs zu wenig, die jeder sehen kann. Statt einer Spalte sind es * jetzt drei Wörter in EINER Zeile — der Platzgewinn bleibt fast derselbe. * * ⚠ WARUM DIE REGELN AUF `footer` OHNE KLASSE ZIELEN. Der Fuss ist fremdes * Markup, aus dem gebauten HTML geschnitten (`scripts/rahmen-fuer-intern.mjs`), * und trägt nur Tailwind-Klassen, die sich beim nächsten Bau ändern können. * Der Kopfkommentar dieser Datei warnt zu Recht vor Regeln ohne * Geltungsbereich — hier ist der Geltungsbereich das Stylesheet selbst: * `stil.css` wird ausschliesslich von `intern/_kern.php` eingebunden und von * keiner Seite der Website. Es gibt in diesem Bereich genau einen `