/* ========================================================================= Das Reglement als Reiter der Seite. Kopfzeile, Navigation und Fusszeile kommen aus eplz.css wie überall sonst. Hier steht nur, was das Blatt selbst braucht. Die CSS der Vorlage (reglement.css) ist beim Bauen an `.reglement-blatt` gebunden worden — sonst hätte ihr `body{font-size:8.9pt}` die ganze Seite erfasst. Sie liegt dort zweifach vor: @media screen alle Längen als Vielfache von --u (Standard 1rem) @media print die absoluten Masse der Vorlage, unangetastet Am Bildschirm skaliert damit ALLES relativ — Schrift, Ränder, Rahmen, Formeln — und zwar im selben Verhältnis. Auf Papier bleibt der Satz exakt so, wie er gesetzt wurde. ========================================================================= */ /* Der Knopf zum PDF sitzt rechts in der Abschnittszeile. Die Goldlinie der Abschnittszeile ist ein ::after mit flex:1 — mit `order: 2` rückt der Knopf dahinter, und die Linie schiebt ihn an den rechten Rand. */ .reglement-pdf { order: 2; flex: none; align-self: center; text-decoration: none; white-space: nowrap; } /* ------------------------------------------------------------------- Blatt */ @media screen { /* --u ist die Masseinheit des Blattes: der eine Regler für den ganzen Satz. Sie skaliert Schrift, Ränder, Rahmen und Formeln gemeinsam — das Blatt bleibt in sich stimmig, egal wie gross es steht. 1rem entspräche exakt dem Druckstück (8,9 pt Grundschrift = 12,1 px). Am Bildschirm ist das zu klein zum Lesen — Papier hält man näher ans Auge als einen Monitor. Darum 1.3rem: derselbe Satz, knapp ein Drittel grösser. Weil der Wert in rem steht, wächst er weiterhin mit der Schriftgrösse, die der Leser im Browser eingestellt hat. 210mm = 49.60629 Einheiten. Auf schmalen Geräten weicht das Blatt auf die volle Breite aus, statt sich unlesbar klein zu skalieren. */ .reglement-blatt { --u: 1.3rem; width: min(calc(49.60629 * var(--u)), 100%); margin: 0 auto; background: #f2ebd9; box-shadow: 0 1px 3px rgba(35, 38, 30, 0.12), 0 8px 32px rgba(35, 38, 30, 0.14); overflow: hidden; } /* ---------------------------------------------------------- Deckblatt --- Das Deckblatt ist ein volles A4-Blatt: Siegel, Titel, Zierrat, Fusszeile. Gedruckt gehört das so. Am Bildschirm steht es als 297mm hohe grüne Wand vor dem Text — man scrollt an ihm vorbei, statt es anzusehen. Erhaltenswert ist daran das Zitat. Es bleibt auf dem Filz stehen — Hintergrund und Schriftfarbe kommen unverändert aus der Vorlage (grüner Verlauf, Creme). Alles andere verschwindet, und aus dem A4-Blatt wird ein Band über dem Satzspiegel. Nur für den Bildschirm; im Druck ist das Deckblatt unangetastet. */ .reglement-blatt .cover { position: relative; width: auto; height: auto; padding: calc(4 * var(--u)) calc(3 * var(--u)) calc(3.4 * var(--u)); overflow: hidden; } /* Achtung: .cover-strap und .cover-cite — also das Zitat — sind Kinder von .cover-main. Der Container muss also bleiben; ausgeblendet werden seine Geschwister und die anderen Kinder. Und `.seal-lg`, das grosse Siegel, hängt direkt in .cover-main, nicht im Titel. */ .reglement-blatt .cover .frame, .reglement-blatt .cover-top, .reglement-blatt .cover .seal-lg, .reglement-blatt .cover-title, .reglement-blatt .cover-sub, .reglement-blatt .cover-orn, .reglement-blatt .cover-motto-wrap, .reglement-blatt .cover-foot { display: none; } /* Die Guilloche des Deckblatts, unverändert in ihrer Farbe: Grün auf Grün. So ist sie gezeichnet, und so bleibt sie ein Hauch statt eines Musters — der frühere Versuch scheiterte daran, dass sie in Gold auf Creme stand. Das SVG behält seine Proportion (viewBox 210x297, width:100% + height:auto), damit die Kreise Kreise bleiben und keine Ellipsen werden. Sein Kreismittelpunkt liegt bei 108/297 = 36.4 % der Höhe — genau um diesen Wert wird es hochgezogen, damit er hinter dem Zitat zu liegen kommt. Was übersteht, schneidet das overflow:hidden des Bandes weg. */ .reglement-blatt .cover-guilloche { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -36.4%); pointer-events: none; } /* Das Zitat steht vor dem Zierrat. */ .reglement-blatt .cover-inner { position: relative; z-index: 1; } /* Die Vorlage stellt den Inhalt absolut und über die ganze Seitenhöhe. */ .reglement-blatt .cover-inner, .reglement-blatt .cover-main { position: static; inset: auto; display: block; padding: 0; text-align: center; } /* Farben bleiben, wie die Vorlage sie setzt: Creme auf Filz, Zuschreibung in Gold. Begrenzt wird nur die Zeilenlänge. */ .reglement-blatt .cover-strap { max-width: calc(30 * var(--u)); margin: 0 auto; } /* Die Ränder aus @page (18mm 18mm 16mm) gelten nur im Druck. Am Bildschirm klebte der Satzspiegel sonst an der Blattkante. Auf schmalen Geräten dürfen sie schrumpfen — 18mm Rand auf einem Telefon wäre Verschwendung. */ .reglement-blatt .sheet { /* clamp(unten, bevorzugt, oben): die vw-Werte müssen bei normaler Fensterbreite ÜBER der Obergrenze liegen, damit die Obergrenze greift — also exakt die 18mm/16mm der Vorlage. Erst auf schmalen Geräten übernimmt der vw-Wert. */ padding: clamp(1rem, 9vw, calc(4.25197 * var(--u))) clamp(1rem, 9vw, calc(4.25197 * var(--u))) clamp(1rem, 8vw, calc(3.77953 * var(--u))); } /* Der Satz ist ZWEISPALTIG — im Druck. Dort verteilt der Browser die Spalten über die Seiten, und genau so steht es im PDF. Am Bildschirm gibt es keine Seiten: der Block würde zu zwei über 2000 px hohen Spalten. Man läse die linke bis ganz nach unten und müsste dann wieder hinaufscrollen. Deshalb hier einspaltig. */ .reglement-blatt .cols { column-count: 1; column-rule: none; } /* Eingebettete Formeln laufen im Fliesstext mit — auf Textgrösse, damit die Zeilen ruhig bleiben. `em` ist hier richtig: relativ zum umgebenden Text. */ .reglement-blatt .katex { font-size: 1em; } /* Abgesetzte Formeln stehen auf Fliesstextgrösse — die Kästen erben die Grundschrift des Blattes, `1em` trifft sie also genau. Alle drei Selektoren müssen genannt werden: die Vorlage staffelt die Kästen unterschiedlich (`.formula.wide` schrumpft auf .72em) und ist dabei spezifischer als ein blosses `.reglement-blatt .katex`. Sonst käme je nach Kasten eine andere Grösse heraus. */ .reglement-blatt .formula .katex, .reglement-blatt .formula.wide .katex, .reglement-blatt .fx .katex { font-size: 1em; } /* Etwas Luft, damit die grösseren Formeln nicht an den Rahmen stossen. */ .reglement-blatt .fx { padding-top: calc(0.19 * var(--u)); padding-bottom: calc(0.19 * var(--u)); } } /* -------------------------------------------------------------------- Druck */ /* Die @page-Regel der Vorlage enthält Randbox-Regeln (@top-center, @bottom-left, @bottom-right-corner) aus CSS Paged Media. Die kennt kein Browser — und Chrome verwirft daran die GANZE Regel, also auch `size` und `margin`. Gedruckt wurde deshalb auf Letter und ab Seite 2 ohne Ränder. Darum hier dieselben Werte noch einmal, ohne Randboxen. Diese Datei wird nach reglement.css geladen, gewinnt also. Ränder je Seite kann NUR @page setzen: ein padding am .sheet läge nur auf der ersten und letzten Seite an, nicht auf jeder. */ @page { size: A4; margin: 18mm 18mm 16mm 18mm; } /* Das Deckblatt füllt die Seite randlos (die Vorlage: `@page cover{margin:0}`). */ @page cover { margin: 0; } @media print { /* Gedruckt wird das Reglement, nicht die Website drumherum. */ .kopf, .abschnitt, .fuss { display: none; } .seite { max-width: none; padding: 0; } .reglement-blatt { width: auto; margin: 0; box-shadow: none; background: none; /* `overflow: hidden` verhindert Seitenumbrüche im Inneren — im Druck weg. */ overflow: visible; } }