/* =========================================================================== ERKLÄRBLATT – DIE FERTIGEN BLATTVORLAGEN =========================================================================== WARUM ES DIESE DATEI GIBT ------------------------- BEFUND MURAT 27.08.2026: „yine pdf bok gibi. köseler kesik düzensiz … yani yapman gereken su: bir sürü html taslaklar hazirlayip ilgili bilgileri oraya koyacaksin. önhazirlanmis html ler yani. ihticaca göre secer kisi. ama düzen bozulmaz htmlde." Er hat recht, und es ist die Umkehrung des bisherigen Weges. Bis hierher wurde jedes Blatt mit jsPDF VERMESSEN, in ein Manifest geschrieben und danach ABSOLUT positioniert (`left/top/width/height` in Millimetern, dazu `overflow:hidden`). Genau daher kamen die abgeschnittenen Ecken, die halben Kästen und die Leerflächen: Weicht die gezeichnete Höhe um einen Zehntelmillimeter von der gemessenen ab, schneidet der Kasten ab – und das fällt erst auf dem Papier auf. Ein Blatt im normalen HTML-FLUSS kann das nicht. Es gibt keine feste Höhe, die zu klein sein könnte; der Text schiebt, was unter ihm steht, nach unten, und der Drucker bricht um. „Düzen bozulmaz" heisst genau das. DER PREIS, UND ER IST BEWUSST BEZAHLT: Wir wissen vorher NICHT auf den Millimeter, wo Seite 2 beginnt. Dafür kann nichts mehr verschwinden. Ein Blatt, dessen Umbruch man nicht vorhersagt, ist besser als eines, dessen letzte Zeile fehlt. WIE DIE VIELFALT ENTSTEHT – EINE STRUKTUR, VIELE GESICHTER ---------------------------------------------------------- Es gibt NICHT 23 verschiedene HTML-Bäume. Es gibt EINEN – immer dieselben Klassen in derselben Reihenfolge (`ebb-kopf`, `ebb-titel`, `ebb-leitfrage`, `ebb-kern`, `ebb-bild`, `ebb-abschnitt`, Kästen, `ebb-check`, `ebb-fuss`) – und dazu zwei unabhängige Achsen: PALETTE `.ebd-` Farbe, Schrift, Rundung (23 Stück) BAUFORM `.ebf-
` wie Abschnitte aussehen (5 Stück) Das ist der Grund, warum eine neue Vorlage zehn Zeilen kostet und nicht hundert – und warum keine Vorlage kaputtgehen kann, wenn eine andere geändert wird. Wer eine 24. Vorlage will, ergänzt eine Palette in `static/css/design-tokens.css` und einen Eintrag in `static/js/erklaerblatt-designs.js`. Sonst nichts. KEINE FESTEN FARBEN IN DIESER DATEI ----------------------------------- Alle Farbwerte stehen als Token in `static/css/design-tokens.css` (DESIGN_SYSTEM.md §3). Hier steht ausschliesslich `var(--…)`. Der Wächter `qa/unit/test_design_system.py` hält diese Datei bei NULL. KEINE FREMDEN SCHRIFTEN ----------------------- Gemini's Entwürfe laden Google Fonts. Das geht hier NICHT: `docs/ PRUEFBERICHT_2026-07-25.md` P3 lässt genau EINE externe Quelle zu (MathJax), und `qa/unit/test_vendor_dateien.py` verbietet jede neue CDN-Referenz. Ausserdem verlässt beim Laden einer Google-Schrift die IP jedes Kindes die EU – das ist keine Geschmacksfrage. Die Vielfalt kommt deshalb aus drei SYSTEM-Stapeln (serifenlos, Serife, Schreibmaschine), die auf jedem Gerät vorhanden sind. MIT WEM: static/js/erklaerblatt-designs.js (Katalog und Bauer), static/js/erklaerblatt-ui.js (Auswahl, Vorschau, Druck), static/css/design-tokens.css (die Paletten), qa/unit/test_erklaerblatt_designs.py. =========================================================================== */ /* -------------------------------------------------------------------------- 0) Die drei Schriftstapel -------------------------------------------------------------------------- Nur System-Schriften (siehe Kopfnotiz). Sie sehen auf Mac, Windows und Android verschieden aus – das ist hinnehmbar, weil das Blatt gedruckt wird und der Druck vom Rechner der Lehrkraft ausgeht, nicht vom Gerät des Kindes. */ .ebb{ --ebb-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ebb-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; --ebb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; /* Vorgabewerte – jede Palette überschreibt sie. Ohne sie wäre ein Blatt mit unbekannter Vorlage unsichtbar statt schlicht. */ --ebb-akzent: var(--ebd-heft-akzent); --ebb-weich: var(--ebd-heft-weich); --ebb-dunkel: var(--ebd-heft-dunkel); --ebb-papier: var(--ebd-heft-papier); --ebb-text: var(--ebd-heft-text); --ebb-linie: var(--ebd-heft-linie); --ebb-font: var(--ebb-sans); --ebb-font-titel: var(--ebb-sans); --ebb-radius: 6px; /* 24 px = 18 pt (v2.526.0, Befund Murat 29.08.2026: „bosluklar cok yazilar büyük gibi"). Vorher 30 px = 22,5 pt - auf A4 ein Plakattitel. Der Kopfblock (Titel, Leitfrage, Kernaussage) frass damit rund ein Drittel der ersten Seite, bevor der erste erklärende Satz begann. Nebenwirkung, die erwünscht ist: der Studio-Weg setzt den Titel mit 20 pt (`EB_STIL.titel`), die beiden Wege liegen jetzt dichter beieinander. */ --ebb-titel-groesse: 24px; } /* -------------------------------------------------------------------------- 1) Das Blatt -------------------------------------------------------------------------- `width:210mm` und `min-height:297mm` – A4 hoch, so wie es gedruckt wird. KEINE feste Höhe: das Blatt wächst mit seinem Inhalt, und der Drucker bricht um. Genau daran hing der ganze Befund. */ .ebb{ width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 18mm 17mm 16mm; background: var(--ebb-papier); color: var(--ebb-text); font-family: var(--ebb-font); font-size: 10.5pt; /* 1,40 STATT 1,55 (v2.526.0). 1,55 ist ein Bildschirmwert; auf Papier ist er luftig bis leer. Gerechnet: 10,5 pt x 1,40 = 5,19 mm je Zeile, bei 263 mm Satzhöhe rund 50 Zeilen statt 45 - also 11 % mehr Text je Seite bei gleichem Blatt. Genau diese 11 % stecken im Zeichenbudget (erklaerblatt.UMFANG_BUDGET). Der Studio-Weg misst mit 1,38 (`EB_STIL.abschnitt`); auch hier laufen die beiden Wege jetzt fast gleich. */ line-height: 1.40; /* Eine einzelne Zeile am Seitenanfang oder -ende ist ein Satzfehler und kein Zufall. Der Browser kennt die Regel, sie war nur nie gesetzt. */ orphans: 3; widows: 3; margin: 0 auto; box-shadow: 0 2px 14px rgba(15,20,35,.16); position: relative; /* EIN BLATT SCHRUMPFT NIE. Steht es in einem Flex-Behälter, dessen Hauptachse waagerecht ist, würde `flex-shrink:1` (die Vorgabe) aus 210 mm klaglos 76 mm machen – das Blatt sähe dann aus wie ein Kassenzettel, und die Ursache stünde in einer ganz anderen Datei. In der Vorschau messbar aufgetreten (Sonde 27.08.2026: 288 px statt 794 px). */ flex: 0 0 auto; /* Ein Blatt ist ein Dokument, kein Textfluss der App: eigene Zählung für die nummerierten Bauformen. */ counter-reset: ebbschritt; } /* Der Kopf: Fach · Thema · Unterthema links, Klasse rechts. Er steht auf JEDER gedruckten Seite nur einmal (HTML kennt keine wiederholten Köpfe ohne `position:running`, das kein Browser druckt) – dafür trägt der Fuss die Seitenzahl, die der Drucker selbst setzt. */ .ebb-kopf{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 8pt; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ebb-akzent); border-bottom: 1.5px solid var(--ebb-linie); padding-bottom: 6px; margin-bottom: 12px; } .ebb-kopf-weg{ color: var(--ebb-text); opacity: .62; font-weight: 600; } .ebb-titel{ font-family: var(--ebb-font-titel); font-size: var(--ebb-titel-groesse); line-height: 1.16; margin: 0 0 6px; color: var(--ebb-dunkel); font-weight: 800; /* Eine Überschrift, die als letzte Zeile einer Seite steht, ist ein Fehler und kein Zufall (§3.2 des Plans – die Regel gilt weiter, sie wird nur nicht mehr gerechnet, sondern dem Drucker gesagt). */ break-after: avoid; page-break-after: avoid; } .ebb-leitfrage{ font-size: 11.5pt; font-weight: 600; margin: 0 0 12px; color: var(--ebb-akzent); } .ebb-leitfrage::before{ content: "Leitfrage"; display: block; font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; font-weight: 700; } /* Die Kernaussage – der eine Satz, der das Blatt trägt. */ /* KOPFBLOCK-DIÄT (v2.526.0). Titel, Leitfrage und Kernaussage sind drei Angaben, die zusammen ankündigen, worum es geht - sie sind nicht der Inhalt. Gemessen am Blatt „Steinzeit" liefen sie von 16 mm bis 103 mm, also über ein Drittel der Seite. Enger gesetzt bleiben sie erkennbar und der erste erklärende Satz rückt rund 25 mm nach oben. */ .ebb-kern{ background: var(--ebb-weich); border-left: 4px solid var(--ebb-akzent); border-radius: 0 var(--ebb-radius) var(--ebb-radius) 0; padding: 10px 14px; margin: 0 0 14px; font-weight: 600; font-size: 10.5pt; break-inside: avoid; page-break-inside: avoid; } /* -------------------------------------------------------------------------- 2) Abbildung und Bildfläche -------------------------------------------------------------------------- WUNSCH MURAT 27.08.2026: „resim ekleme alanlarinida düsünmelisin." Es gibt drei Fälle, und alle drei brauchen Platz auf dem Blatt: a) ein echtes Bild -> ``, Höhe aus dem Entwurf b) eine Skizze/ein Schema -> derselbe Rahmen, Beschriftung darunter c) GAR NICHTS -> eine leere, gerahmte Fläche Fall (c) ist kein Notbehelf, sondern didaktisch der beste der drei: eine beschriftete Fläche, in die das Kind selbst zeichnet, ist mehr wert als ein Symbolbild. Deshalb heisst sie „Zeichne hier" und nicht „kein Bild". */ .ebb-bild{ margin: 0 0 14px; padding: 0; break-inside: avoid; page-break-inside: avoid; } .ebb-bild img{ display: block; max-width: 100%; margin: 0 auto; border-radius: var(--ebb-radius); } .ebb-bild figcaption{ font-size: 8pt; color: var(--ebb-text); opacity: .65; margin-top: 5px; text-align: center; } /* Die leere Fläche. `border-style:dashed` sagt ohne Worte „hier darf etwas hinein"; eine durchgezogene Linie liest sich wie ein Rahmen um etwas Vorhandenes. */ .ebb-flaeche{ border: 2px dashed var(--ebb-linie); border-radius: var(--ebb-radius); min-height: 45mm; display: flex; align-items: center; justify-content: center; color: var(--ebb-text); opacity: .55; font-size: 9pt; text-align: center; padding: 10px; } /* -------------------------------------------------------------------------- 3) Abschnitte – der Fliesstext -------------------------------------------------------------------------- */ .ebb-abschnitt{ margin: 0 0 16px; } .ebb-abschnitt h2{ font-family: var(--ebb-font-titel); font-size: 13pt; margin: 0 0 5px; color: var(--ebb-dunkel); font-weight: 700; break-after: avoid; page-break-after: avoid; } .ebb-abschnitt p{ margin: 0 0 8px; } .ebb-abschnitt p:last-child{ margin-bottom: 0; } /* -------------------------------------------------------------------------- 4) Die Kästen -------------------------------------------------------------------------- Ein Kasten trägt seine Beschriftung im Kasten und nicht darüber – sonst steht die Beschriftung am Seitenende und der Kasten auf der nächsten. */ .ebb-kasten{ border: 1px solid var(--ebb-linie); border-left: 4px solid var(--ebb-akzent); border-radius: 0 var(--ebb-radius) var(--ebb-radius) 0; background: var(--ebb-weich); padding: 11px 14px; margin: 0 0 14px; break-inside: avoid; page-break-inside: avoid; } .ebb-kasten-t{ display: block; font-size: 8pt; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ebb-akzent); margin-bottom: 3px; } .ebb-kasten p{ margin: 0; } .ebb-kasten p + p{ margin-top: 6px; } /* Vier Kästen haben eine EIGENE Bedeutung und deshalb eine eigene Farbe – unabhängig von der Palette. Ein roter Fehlerkasten in einem grünen Blatt ist kein Stilbruch, sondern die Stelle, an der Farbe etwas sagt. Die Werte kommen aus dem Wörterbuch (--bad/--amber), damit es dieselben sind wie überall in der App. */ /* DIE KLASSE HEISST WIE DIE ROLLE. Hier stand `.ebb-fehler`, der Bauer schreibt aber `ebb-` und die Rolle heisst `fehlvorstellung` – der Kasten blieb deshalb grün wie das übrige Blatt (in der Sonde am 27.08.2026 gesehen). Ein zweiter Name für dieselbe Sache ist genau die Art Fehler, die man im Quelltext nicht sieht. */ .ebb-fehlvorstellung{ border-left-color: var(--bad); background: var(--bad-soft); } .ebb-fehlvorstellung .ebb-kasten-t{ color: var(--bad); } .ebb-warnung{ border-left-color: var(--amber); background: var(--amber-soft); } .ebb-warnung .ebb-kasten-t{ color: var(--amber); } .ebb-merksatz{ border-left-width: 5px; font-weight: 600; } /* -------------------------------------------------------------------------- 5) Der Mini-Check -------------------------------------------------------------------------- Er steht am Fuss des Blattes und braucht SCHREIBRAUM. Eine Frage ohne Linie darunter ist eine Frage, die niemand beantwortet. */ .ebb-check{ margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--ebb-akzent); break-inside: avoid; page-break-inside: avoid; } .ebb-check h2{ font-family: var(--ebb-font-titel); margin: 0 0 10px; font-size: 12pt; color: var(--ebb-dunkel); text-transform: uppercase; letter-spacing: .04em; } .ebb-check ol{ margin: 0; padding-left: 20px; } .ebb-check li{ margin-bottom: 12px; } .ebb-check li:last-child{ margin-bottom: 0; } /* Die Schreiblinie. `border-bottom` und nicht ``: das Blatt wird gedruckt, und ein Eingabefeld druckt als leerer Kasten. */ .ebb-linie{ display: block; border-bottom: 1px solid var(--ebb-linie); height: 9mm; margin-top: 3px; } .ebb-linie + .ebb-linie{ margin-top: 0; } /* -------------------------------------------------------------------------- 6) Der Fuss -------------------------------------------------------------------------- */ .ebb-fuss{ margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--ebb-linie); display: flex; justify-content: space-between; gap: 12px; font-size: 7.5pt; color: var(--ebb-text); opacity: .6; } /* ========================================================================== BAUFORMEN – wie ein Abschnitt aussieht ========================================================================== BEFUND MURAT 27.08.2026: „oglum eglenceli htmllerde yap hepsinin renklerini degistirip cakmissin gram degisiklik yok … gemini nasil güzel yapmisti onlarida kullan kreatif ol." Er hatte recht, und der Fehler war eine Abkürzung: die erste Fassung hatte EINE Bauform mit fünf Varianten und 23 Farbsätze darüber. In der Vorschaukachel sahen deshalb alle 23 gleich aus – nur eben in anderen Farben. Eine Vorlage unterscheidet sich aber nicht durch ihre Farbe, sondern durch ihren AUFBAU. Jetzt gibt es DREI unabhängige Achsen, und erst ihre Kombination macht eine Vorlage: `.ebf-` wie ein Abschnitt aussieht (11 Stück) `.ebs-` was das Blatt selbst schmückt (8 Stück) `.ebd-` Farbe, Schrift, Rundung (30 Stück) Die Formen sind aus Gemini's Entwürfen abgeleitet, die Murat geschickt hat: die Bedingungs-Zeilen aus „Extremstellen", die mittige Bauform aus „Brechungsgesetz", die Abzeichen aus „Gorev Macerasi", die Farbblöcke aus „Neseli Adimlar", der Antikrahmen aus „Französische Revolution". Übernommen ist das VERHALTEN, kein Code und keine Datei – dieselbe Regel wie bei den Unterrichts-Widgets (CLAUDE.md: Verhalten nachbauen ja, fremde Dateien nur mit passender Lizenz). ========================================================================== */ /* „linie" – die klassische Sachbuch-Gliederung: Überschrift mit Unterstrich, sonst nichts. Am wenigsten Farbe, am meisten Text je Seite. */ .ebf-linie .ebb-abschnitt h2{ border-bottom: 1px solid var(--ebb-linie); padding-bottom: 4px; } /* „band" – die Überschrift als durchgehender Streifen. Gliedert ein langes Blatt auf einen Blick. */ .ebf-band .ebb-abschnitt h2{ background: var(--ebb-akzent); color: var(--ebb-papier); padding: 6px 12px; border-radius: var(--ebb-radius); margin-bottom: 8px; } /* „karte" – jeder Abschnitt in einem eigenen Rahmen. Ruhig und sehr übersichtlich, kostet aber Platz. */ /* EIN ABSCHNITT DARF BRECHEN – AUCH ALS KARTE (v2.527.0). Hier stand `break-inside: avoid`, und das war der teuerste Fehler dieser Bauform: ein Abschnitt IST der Fliesstext des Blattes und wird 60 bis 100 mm hoch. Passt er unten nicht mehr ganz hin, wanderte die GANZE Karte auf die nächste Seite – am Blatt „Römisches Reich" waren das 68 mm Loch am Fuss von Seite eins, und genau dieses Loch schob den Rest auf eine dritte Seite. Unteilbar bleiben die KURZEN Blöcke: Merksatz, Begriff, Beispiel, Warnung, Kernaussage, Mini-Check. Bei ihnen ist ein Bruch wirklich schlimmer als eine Lücke – ein halber Merksatz ist keine halbe Regel, sondern eine falsche. Ein Abschnitt dagegen liest sich über die Seitengrenze hinweg völlig normal; genau dafür gibt es `orphans`/`widows` (drei Zeilen, siehe `.ebb`) und `break-after: avoid` an der Überschrift. `box-decoration-break: clone` sorgt dafür, dass beide Hälften ihren Rahmen bekommen – ohne die Zeile endet die Karte oben offen und sieht aus wie ein Darstellungsfehler. */ .ebf-karte .ebb-abschnitt{ border: 1px solid var(--ebb-linie); border-radius: var(--ebb-radius); padding: 13px 15px; background: var(--ebb-papier); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ebf-karte .ebb-abschnitt h2{ border-bottom: 2px solid var(--ebb-weich); padding-bottom: 5px; } /* „schritt" – nummerierte Abläufe. Für Verfahren (rechnen, aufbauen, durchführen). Die Nummer kommt aus einem CSS-Zähler und nicht aus dem Text: schreibt die KI „1." in die Überschrift, stünde sonst „1. 1. …". */ .ebf-schritt .ebb-abschnitt{ position: relative; padding-left: 42px; margin-bottom: 18px; } .ebf-schritt .ebb-abschnitt::before{ counter-increment: ebbschritt; content: counter(ebbschritt); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: var(--ebb-radius); background: var(--ebb-akzent); color: var(--ebb-papier); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13pt; } .ebf-schritt .ebb-abschnitt h2{ min-height: 30px; display: flex; align-items: center; } /* „rund" – für jüngere Kinder: grosse Radien, kräftige Flächen, mehr Luft. */ .ebf-rund{ --ebb-radius: 16px; font-size: 11.5pt; line-height: 1.62; } .ebf-rund .ebb-abschnitt{ background: var(--ebb-weich); border-radius: var(--ebb-radius); padding: 14px 18px; break-inside: avoid; page-break-inside: avoid; } .ebf-rund .ebb-abschnitt h2{ font-size: 14pt; color: var(--ebb-akzent); } .ebf-rund .ebb-kasten{ border-radius: var(--ebb-radius); border-left-width: 6px; } .ebf-rund .ebb-kern{ border-radius: var(--ebb-radius); border-left-width: 6px; } /* -------------------------------------------------------------------------- NEU: die Formen aus Gemini's Entwürfen -------------------------------------------------------------------------- */ /* „spalte" – die Überschrift steht als farbige Spalte LINKS, der Text daneben (Vorbild: die Bedingungs-Zeilen in „Extremstellen berechnen"). Sehr stark, wenn jeder Abschnitt eine benannte Regel ist. Auf Papier bleibt es lesbar, weil die Spalte eine feste Breite hat und der Text nicht in eine Schlucht rutscht. */ .ebf-spalte .ebb-abschnitt{ display: flex; align-items: stretch; margin-bottom: 14px; border: 1px solid var(--ebb-linie); border-radius: var(--ebb-radius); overflow: hidden; break-inside: avoid; page-break-inside: avoid; } .ebf-spalte .ebb-abschnitt h2{ flex: none; width: 46mm; margin: 0; background: var(--ebb-akzent); color: var(--ebb-papier); padding: 12px 13px; font-size: 11.5pt; line-height: 1.3; display: flex; align-items: center; } .ebf-spalte .ebb-abschnitt > *:not(h2){ padding: 12px 14px; } .ebf-spalte .ebb-abschnitt > p{ background: var(--ebb-weich); flex: 1; margin: 0; } .ebf-spalte .ebb-abschnitt > p + p{ padding-top: 0; } /* „mitte" – Titel, Leitfrage und Kernaussage mittig, Abschnitte in umrandeten Blöcken mit nummerierten Überschriften (Vorbild: „Brechungsgesetz"). Wirkt wie eine Lehrbuchseite. */ .ebf-mitte .ebb-titel, .ebf-mitte .ebb-leitfrage{ text-align: center; } .ebf-mitte .ebb-kern{ text-align: center; border-left: 0; border-radius: var(--ebb-radius); border-top: 2px solid var(--ebb-akzent); border-bottom: 2px solid var(--ebb-akzent); background: transparent; font-style: italic; } .ebf-mitte .ebb-kopf{ justify-content: center; gap: 22px; } .ebf-mitte .ebb-abschnitt{ border: 1px solid var(--ebb-dunkel); border-radius: var(--ebb-radius); padding: 14px 16px; break-inside: avoid; page-break-inside: avoid; } .ebf-mitte .ebb-abschnitt h2::before{ counter-increment: ebbschritt; content: counter(ebbschritt) ". "; } /* „abzeichen" – jeder Abschnitt ist ein Rahmen mit einer Plakette, die auf der oberen Kante sitzt (Vorbild: „Level 1 / Level 2" aus der Mission). Für Kinder, die einen Ablauf als Stufen erleben sollen. */ .ebf-abzeichen .ebb-abschnitt{ position: relative; border: 2px solid var(--ebb-akzent); border-radius: 12px; padding: 20px 16px 14px; margin: 22px 0 18px; break-inside: avoid; page-break-inside: avoid; } .ebf-abzeichen .ebb-abschnitt h2{ position: absolute; top: -12px; left: 16px; margin: 0; counter-increment: ebbschritt; background: var(--ebb-akzent); color: var(--ebb-papier); padding: 3px 13px; border-radius: 999px; font-size: 10pt; letter-spacing: .02em; } .ebf-abzeichen .ebb-abschnitt h2::before{ content: counter(ebbschritt) " · "; } /* „block" – kräftige Farbblöcke mit dickem linken Balken, jeder Abschnitt eine eigene Fläche (Vorbild: „Neseli Adimlar"). Fröhlich, ohne albern zu werden – die Struktur bleibt dieselbe. */ .ebf-block{ --ebb-radius: 14px; } .ebf-block .ebb-abschnitt{ background: var(--ebb-weich); border-left: 9px solid var(--ebb-akzent); border-radius: var(--ebb-radius); padding: 16px 18px; margin-bottom: 16px; break-inside: avoid; page-break-inside: avoid; } .ebf-block .ebb-abschnitt h2{ color: var(--ebb-akzent); font-size: 14pt; margin-bottom: 6px; } .ebf-block .ebb-kasten{ border-radius: var(--ebb-radius); border-left-width: 9px; border-top: 0; border-right: 0; border-bottom: 0; } .ebf-block .ebb-kern{ border-radius: var(--ebb-radius); border-left-width: 9px; text-align: center; } /* „gitter" – zwei Abschnitte nebeneinander. Spart Platz auf einem Blatt mit vielen kurzen Punkten; bei langem Fliesstext ist es die falsche Wahl, deshalb steht es nicht bei den Textfächern. */ .ebf-gitter .ebb-abschnitt{ display: inline-block; vertical-align: top; width: calc(50% - 5px); box-sizing: border-box; padding: 12px 14px; margin: 0 0 10px; background: var(--ebb-weich); border-radius: var(--ebb-radius); break-inside: avoid; page-break-inside: avoid; } .ebf-gitter .ebb-abschnitt:nth-of-type(odd){ margin-right: 8px; } /* „blase" – weiche Kästen mit versetztem Schatten. Freundlich für die Grundschule, und der Schatten ist so gesetzt, dass er auch als Schwarzweisskopie noch als Rand erkennbar bleibt. */ .ebf-blase{ --ebb-radius: 18px; } .ebf-blase .ebb-abschnitt{ background: var(--ebb-papier); border: 2px solid var(--ebb-weich); border-radius: var(--ebb-radius); padding: 15px 18px; margin-bottom: 18px; box-shadow: 5px 5px 0 var(--ebb-weich); break-inside: avoid; page-break-inside: avoid; } .ebf-blase .ebb-abschnitt h2{ color: var(--ebb-akzent); } .ebf-blase .ebb-kasten{ border-radius: var(--ebb-radius); border: 2px dashed var(--ebb-akzent); } .ebf-blase .ebb-kern{ border-radius: var(--ebb-radius); border: 2px dashed var(--ebb-akzent); text-align: center; } /* ========================================================================== BLATTSCHMUCK – was das Blatt selbst trägt ========================================================================== Die zweite Achse. Sie betrifft nicht die Abschnitte, sondern das PAPIER: Kanten, Rahmen, Untergrund, Kopfform. Erst zusammen mit der Bauform wird aus einer Palette eine erkennbare Vorlage. ALLE SCHMUCKFORMEN SIND KOPIERERFEST. Kein flächiges Dunkel, keine Verläufe über den Satzspiegel: Ein Erklärblatt geht schwarzweiss in den Kopierer (dieselbe Regel wie im Blatt-Studio, §1.2), und eine Tonerwüste ist in der Klasse unlesbar. ========================================================================== */ /* Farbige Kante links – der klassische Ordner-Reiter. */ .ebs-kante-links{ border-left: 10mm solid var(--ebb-akzent); padding-left: 12mm; } /* Kante oben – wirkt wie ein Deckblatt. */ .ebs-kante-oben{ border-top: 7mm solid var(--ebb-dunkel); } /* Doppelte Kante oben und unten – ruhig und formell. */ .ebs-kante-doppelt{ border-top: 3mm solid var(--ebb-akzent); border-bottom: 3mm solid var(--ebb-akzent); } /* Innenrahmen wie bei einem alten Dokument (Vorbild: Französische Revolution). `::before` und nicht ein zweiter `border`, weil der Rahmen INNERHALB der Ränder liegen soll. */ .ebs-rahmen::before{ content: ""; position: absolute; top: 8mm; left: 8mm; right: 8mm; bottom: 8mm; border: 1.5px solid var(--ebb-akzent); pointer-events: none; } /* Karo-Untergrund für Mathematik – sehr hell, damit er den Text nicht angreift. Zwei Verläufe statt eines Bildes: keine Datei, kein Ladeweg. */ .ebs-karo{ background-image: linear-gradient(var(--ebb-weich) 1px, transparent 1px), linear-gradient(90deg, var(--ebb-weich) 1px, transparent 1px); background-size: 5mm 5mm; } /* Punktraster – für naturwissenschaftliche Blätter. */ .ebs-punkte{ background-image: radial-gradient(var(--ebb-weich) 1.2px, transparent 1.2px); background-size: 6mm 6mm; } /* Linienraster nur im oberen Bereich – wie ein Schreibheft. */ .ebs-linien{ background-image: linear-gradient(var(--ebb-weich) 1px, transparent 1px); background-size: 100% 8mm; } /* Der Kopf als Pille – kräftig, aber nur eine Zeile hoch. */ .ebs-pille .ebb-kopf{ background: var(--ebb-dunkel); color: var(--ebb-papier); padding: 7px 16px; border-radius: 999px; border-bottom: 0; } .ebs-pille .ebb-kopf .ebb-kopf-weg{ color: var(--ebb-papier); opacity: .85; } /* ========================================================================== TITELFORMEN ========================================================================== Die dritte, kleinste Achse: wie der Titel selbst auftritt. Sie hat keine eigene Klasse im Katalog – sie hängt an der Bauform, wo sie hingehört (mittig bei „mitte", Balken bei „spalte" …). Diese Regeln stehen deshalb hier gesammelt und nicht verteilt. ========================================================================== */ .ebt-balken .ebb-titel{ border-left: 6px solid var(--ebb-akzent); padding-left: 14px; } .ebt-versal .ebb-titel{ text-transform: uppercase; letter-spacing: -.01em; font-size: 26px; } .ebt-unter .ebb-titel{ border-bottom: 3px solid var(--ebb-akzent); padding-bottom: 8px; } .ebt-mitte .ebb-titel, .ebt-mitte .ebb-leitfrage{ text-align: center; } /* ========================================================================== DIE PALETTEN ========================================================================== Je Vorlage sechs Farbnamen, eine Schrift und eine Rundung. Mehr nicht – alles Weitere erbt vom Grundblatt oben. Wer hier eine siebte Angabe braucht, hat wahrscheinlich eine neue BAUFORM gemeint, keine neue Palette. ========================================================================== */ /* ---- Sek I: ruhig und klar --------------------------------------------- */ .ebd-tafel{ --ebb-akzent:var(--ebd-tafel-akzent); --ebb-weich:var(--ebd-tafel-weich); --ebb-dunkel:var(--ebd-tafel-dunkel); --ebb-papier:var(--ebd-tafel-papier); --ebb-text:var(--ebd-tafel-text); --ebb-linie:var(--ebd-tafel-linie); } .ebd-heft{ --ebb-akzent:var(--ebd-heft-akzent); --ebb-weich:var(--ebd-heft-weich); --ebb-dunkel:var(--ebd-heft-dunkel); --ebb-papier:var(--ebd-heft-papier); --ebb-text:var(--ebd-heft-text); --ebb-linie:var(--ebd-heft-linie); } .ebd-sonne{ --ebb-akzent:var(--ebd-sonne-akzent); --ebb-weich:var(--ebd-sonne-weich); --ebb-dunkel:var(--ebd-sonne-dunkel); --ebb-papier:var(--ebd-sonne-papier); --ebb-text:var(--ebd-sonne-text); --ebb-linie:var(--ebd-sonne-linie); } .ebd-wiese{ --ebb-akzent:var(--ebd-wiese-akzent); --ebb-weich:var(--ebd-wiese-weich); --ebb-dunkel:var(--ebd-wiese-dunkel); --ebb-papier:var(--ebd-wiese-papier); --ebb-text:var(--ebd-wiese-text); --ebb-linie:var(--ebd-wiese-linie); } .ebd-notiz{ --ebb-akzent:var(--ebd-notiz-akzent); --ebb-weich:var(--ebd-notiz-weich); --ebb-dunkel:var(--ebd-notiz-dunkel); --ebb-papier:var(--ebd-notiz-papier); --ebb-text:var(--ebd-notiz-text); --ebb-linie:var(--ebd-notiz-linie); } /* ---- Sek II: sachlich --------------------------------------------------- */ .ebd-akademie{ --ebb-akzent:var(--ebd-akademie-akzent); --ebb-weich:var(--ebd-akademie-weich); --ebb-dunkel:var(--ebd-akademie-dunkel); --ebb-papier:var(--ebd-akademie-papier); --ebb-text:var(--ebd-akademie-text); --ebb-linie:var(--ebd-akademie-linie); --ebb-font:var(--ebb-serif); --ebb-font-titel:var(--ebb-serif); --ebb-radius:2px; } .ebd-journal{ --ebb-akzent:var(--ebd-journal-akzent); --ebb-weich:var(--ebd-journal-weich); --ebb-dunkel:var(--ebd-journal-dunkel); --ebb-papier:var(--ebd-journal-papier); --ebb-text:var(--ebd-journal-text); --ebb-linie:var(--ebd-journal-linie); --ebb-font-titel:var(--ebb-serif); --ebb-radius:2px; } .ebd-pruefung{ --ebb-akzent:var(--ebd-pruefung-akzent); --ebb-weich:var(--ebd-pruefung-weich); --ebb-dunkel:var(--ebd-pruefung-dunkel); --ebb-papier:var(--ebd-pruefung-papier); --ebb-text:var(--ebd-pruefung-text); --ebb-linie:var(--ebd-pruefung-linie); --ebb-radius:0px; } .ebd-technik{ --ebb-akzent:var(--ebd-technik-akzent); --ebb-weich:var(--ebd-technik-weich); --ebb-dunkel:var(--ebd-technik-dunkel); --ebb-papier:var(--ebd-technik-papier); --ebb-text:var(--ebd-technik-text); --ebb-linie:var(--ebd-technik-linie); --ebb-radius:3px; } .ebd-technik .ebb-kopf{ font-family: var(--ebb-mono); letter-spacing: 0; } .ebd-kontrast{ --ebb-akzent:var(--ebd-kontrast-akzent); --ebb-weich:var(--ebd-kontrast-weich); --ebb-dunkel:var(--ebd-kontrast-dunkel); --ebb-papier:var(--ebd-kontrast-papier); --ebb-text:var(--ebd-kontrast-text); --ebb-linie:var(--ebd-kontrast-linie); --ebb-radius:0px; --ebb-titel-groesse:27px; } /* ---- Fachgesichter ------------------------------------------------------ */ .ebd-mathe{ --ebb-akzent:var(--ebd-mathe-akzent); --ebb-weich:var(--ebd-mathe-weich); --ebb-dunkel:var(--ebd-mathe-dunkel); --ebb-papier:var(--ebd-mathe-papier); --ebb-text:var(--ebd-mathe-text); --ebb-linie:var(--ebd-mathe-linie); --ebb-radius:4px; } .ebd-physik{ --ebb-akzent:var(--ebd-physik-akzent); --ebb-weich:var(--ebd-physik-weich); --ebb-dunkel:var(--ebd-physik-dunkel); --ebb-papier:var(--ebd-physik-papier); --ebb-text:var(--ebd-physik-text); --ebb-linie:var(--ebd-physik-linie); --ebb-radius:4px; } .ebd-chemie{ --ebb-akzent:var(--ebd-chemie-akzent); --ebb-weich:var(--ebd-chemie-weich); --ebb-dunkel:var(--ebd-chemie-dunkel); --ebb-papier:var(--ebd-chemie-papier); --ebb-text:var(--ebd-chemie-text); --ebb-linie:var(--ebd-chemie-linie); --ebb-radius:5px; } .ebd-chemie .ebb-kopf{ font-family: var(--ebb-mono); } .ebd-biologie{ --ebb-akzent:var(--ebd-biologie-akzent); --ebb-weich:var(--ebd-biologie-weich); --ebb-dunkel:var(--ebd-biologie-dunkel); --ebb-papier:var(--ebd-biologie-papier); --ebb-text:var(--ebd-biologie-text); --ebb-linie:var(--ebd-biologie-linie); --ebb-radius:8px; } .ebd-geschichte{ --ebb-akzent:var(--ebd-geschichte-akzent); --ebb-weich:var(--ebd-geschichte-weich); --ebb-dunkel:var(--ebd-geschichte-dunkel); --ebb-papier:var(--ebd-geschichte-papier); --ebb-text:var(--ebd-geschichte-text); --ebb-linie:var(--ebd-geschichte-linie); --ebb-font:var(--ebb-serif); --ebb-font-titel:var(--ebb-serif); --ebb-radius:2px; } .ebd-deutsch{ --ebb-akzent:var(--ebd-deutsch-akzent); --ebb-weich:var(--ebd-deutsch-weich); --ebb-dunkel:var(--ebd-deutsch-dunkel); --ebb-papier:var(--ebd-deutsch-papier); --ebb-text:var(--ebd-deutsch-text); --ebb-linie:var(--ebd-deutsch-linie); --ebb-font:var(--ebb-serif); --ebb-radius:2px; } .ebd-sprachen{ --ebb-akzent:var(--ebd-sprachen-akzent); --ebb-weich:var(--ebd-sprachen-weich); --ebb-dunkel:var(--ebd-sprachen-dunkel); --ebb-papier:var(--ebd-sprachen-papier); --ebb-text:var(--ebd-sprachen-text); --ebb-linie:var(--ebd-sprachen-linie); --ebb-radius:6px; } .ebd-geo{ --ebb-akzent:var(--ebd-geo-akzent); --ebb-weich:var(--ebd-geo-weich); --ebb-dunkel:var(--ebd-geo-dunkel); --ebb-papier:var(--ebd-geo-papier); --ebb-text:var(--ebd-geo-text); --ebb-linie:var(--ebd-geo-linie); --ebb-radius:4px; } .ebd-kunst{ --ebb-akzent:var(--ebd-kunst-akzent); --ebb-weich:var(--ebd-kunst-weich); --ebb-dunkel:var(--ebd-kunst-dunkel); --ebb-papier:var(--ebd-kunst-papier); --ebb-text:var(--ebd-kunst-text); --ebb-linie:var(--ebd-kunst-linie); --ebb-radius:12px; } .ebd-informatik{ --ebb-akzent:var(--ebd-informatik-akzent); --ebb-weich:var(--ebd-informatik-weich); --ebb-dunkel:var(--ebd-informatik-dunkel); --ebb-papier:var(--ebd-informatik-papier); --ebb-text:var(--ebd-informatik-text); --ebb-linie:var(--ebd-informatik-linie); --ebb-radius:3px; } .ebd-informatik .ebb-kopf, .ebd-informatik .ebb-kasten-t{ font-family: var(--ebb-mono); letter-spacing: 0; } /* ---- Jüngere Kinder ----------------------------------------------------- */ .ebd-bunt{ --ebb-akzent:var(--ebd-bunt-akzent); --ebb-weich:var(--ebd-bunt-weich); --ebb-dunkel:var(--ebd-bunt-dunkel); --ebb-papier:var(--ebd-bunt-papier); --ebb-text:var(--ebd-bunt-text); --ebb-linie:var(--ebd-bunt-linie); } .ebd-weltraum{ --ebb-akzent:var(--ebd-weltraum-akzent); --ebb-weich:var(--ebd-weltraum-weich); --ebb-dunkel:var(--ebd-weltraum-dunkel); --ebb-papier:var(--ebd-weltraum-papier); --ebb-text:var(--ebd-weltraum-text); --ebb-linie:var(--ebd-weltraum-linie); } /* Der Kopf als dunkles Band – das einzige Stück „Weltraum", das ein Kopierer verkraftet. Ein ganzflächig dunkler Hintergrund wäre auf Papier eine Tonerwüste und in der Klasse unlesbar. */ .ebd-weltraum .ebb-kopf{ background: var(--ebb-dunkel); color: var(--ebb-papier); padding: 8px 14px; border-radius: 999px; border-bottom: 0; } .ebd-baecker{ --ebb-akzent:var(--ebd-baecker-akzent); --ebb-weich:var(--ebd-baecker-weich); --ebb-dunkel:var(--ebd-baecker-dunkel); --ebb-papier:var(--ebd-baecker-papier); --ebb-text:var(--ebd-baecker-text); --ebb-linie:var(--ebd-baecker-linie); } /* -------------------------------------------------------------------------- NACHTRAG v2.504.0 – die Paletten der Gemini-Vorlagen -------------------------------------------------------------------------- Sieben eigene, sieben geliehene. Eine geliehene Palette ist KEINE Doppelung: „Mathematik – Rechenweg" und „Mathematik – kariert" tragen dieselben Farben und sind trotzdem zwei verschiedene Blätter, weil Bauform und Blattschmuck andere sind. Farbe ist die schwächste Unterscheidung – genau das war der Befund. */ .ebd-analysis{ --ebb-akzent:var(--ebd-analysis-akzent); --ebb-weich:var(--ebd-analysis-weich); --ebb-dunkel:var(--ebd-analysis-dunkel); --ebb-papier:var(--ebd-analysis-papier); --ebb-text:var(--ebd-analysis-text); --ebb-linie:var(--ebd-analysis-linie); --ebb-font-titel:var(--ebb-serif); --ebb-radius:3px; } .ebd-zentriert{ --ebb-akzent:var(--ebd-zentriert-akzent); --ebb-weich:var(--ebd-zentriert-weich); --ebb-dunkel:var(--ebd-zentriert-dunkel); --ebb-papier:var(--ebd-zentriert-papier); --ebb-text:var(--ebd-zentriert-text); --ebb-linie:var(--ebd-zentriert-linie); --ebb-font:var(--ebb-serif); --ebb-font-titel:var(--ebb-serif); --ebb-radius:0px; } .ebd-mission{ --ebb-akzent:var(--ebd-mission-akzent); --ebb-weich:var(--ebd-mission-weich); --ebb-dunkel:var(--ebd-mission-dunkel); --ebb-papier:var(--ebd-mission-papier); --ebb-text:var(--ebd-mission-text); --ebb-linie:var(--ebd-mission-linie); --ebb-radius:12px; } .ebd-neseli{ --ebb-akzent:var(--ebd-neseli-akzent); --ebb-weich:var(--ebd-neseli-weich); --ebb-dunkel:var(--ebd-neseli-dunkel); --ebb-papier:var(--ebd-neseli-papier); --ebb-text:var(--ebd-neseli-text); --ebb-linie:var(--ebd-neseli-linie); --ebb-radius:14px; } .ebd-natur{ --ebb-akzent:var(--ebd-natur-akzent); --ebb-weich:var(--ebd-natur-weich); --ebb-dunkel:var(--ebd-natur-dunkel); --ebb-papier:var(--ebd-natur-papier); --ebb-text:var(--ebd-natur-text); --ebb-linie:var(--ebd-natur-linie); --ebb-font:var(--ebb-serif); --ebb-radius:10px; } .ebd-firin{ --ebb-akzent:var(--ebd-firin-akzent); --ebb-weich:var(--ebd-firin-weich); --ebb-dunkel:var(--ebd-firin-dunkel); --ebb-papier:var(--ebd-firin-papier); --ebb-text:var(--ebd-firin-text); --ebb-linie:var(--ebd-firin-linie); --ebb-radius:20px; } .ebd-orman{ --ebb-akzent:var(--ebd-orman-akzent); --ebb-weich:var(--ebd-orman-weich); --ebb-dunkel:var(--ebd-orman-dunkel); --ebb-papier:var(--ebd-orman-papier); --ebb-text:var(--ebd-orman-text); --ebb-linie:var(--ebd-orman-linie); --ebb-radius:16px; } /* Geliehene Paletten – anderer Aufbau, dieselben Farben. */ .ebd-karo{ --ebb-akzent:var(--ebd-mathe-akzent); --ebb-weich:var(--ebd-mathe-weich); --ebb-dunkel:var(--ebd-mathe-dunkel); --ebb-papier:var(--ebd-mathe-papier); --ebb-text:var(--ebd-mathe-text); --ebb-linie:var(--ebd-mathe-linie); --ebb-radius:3px; } .ebd-labor{ --ebb-akzent:var(--ebd-chemie-akzent); --ebb-weich:var(--ebd-chemie-weich); --ebb-dunkel:var(--ebd-chemie-dunkel); --ebb-papier:var(--ebd-chemie-papier); --ebb-text:var(--ebd-chemie-text); --ebb-linie:var(--ebd-chemie-linie); --ebb-radius:6px; } .ebd-labor .ebb-kopf,.ebd-labor .ebb-kasten-t{ font-family:var(--ebb-mono); letter-spacing:0; } .ebd-archiv{ --ebb-akzent:var(--ebd-geschichte-akzent); --ebb-weich:var(--ebd-geschichte-weich); --ebb-dunkel:var(--ebd-geschichte-dunkel); --ebb-papier:var(--ebd-geschichte-papier); --ebb-text:var(--ebd-geschichte-text); --ebb-linie:var(--ebd-geschichte-linie); --ebb-font:var(--ebb-serif); --ebb-font-titel:var(--ebb-serif); --ebb-radius:0px; } .ebd-tabelle{ --ebb-akzent:var(--ebd-technik-akzent); --ebb-weich:var(--ebd-technik-weich); --ebb-dunkel:var(--ebd-technik-dunkel); --ebb-papier:var(--ebd-technik-papier); --ebb-text:var(--ebd-technik-text); --ebb-linie:var(--ebd-technik-linie); --ebb-radius:4px; } .ebd-heftlinien{ --ebb-akzent:var(--ebd-heft-akzent); --ebb-weich:var(--ebd-heft-weich); --ebb-dunkel:var(--ebd-heft-dunkel); --ebb-papier:var(--ebd-heft-papier); --ebb-text:var(--ebd-heft-text); --ebb-linie:var(--ebd-heft-linie); --ebb-radius:4px; } .ebd-uebersicht{ --ebb-akzent:var(--ebd-akademie-akzent); --ebb-weich:var(--ebd-akademie-weich); --ebb-dunkel:var(--ebd-akademie-dunkel); --ebb-papier:var(--ebd-akademie-papier); --ebb-text:var(--ebd-akademie-text); --ebb-linie:var(--ebd-akademie-linie); --ebb-radius:4px; } .ebd-uzaydunkel{ --ebb-akzent:var(--ebd-weltraum-akzent); --ebb-weich:var(--ebd-weltraum-weich); --ebb-dunkel:var(--ebd-weltraum-dunkel); --ebb-papier:var(--ebd-weltraum-papier); --ebb-text:var(--ebd-weltraum-text); --ebb-linie:var(--ebd-weltraum-linie); --ebb-radius:14px; } /* ========================================================================== DIE VORSCHAU IN DER AUSWAHL ========================================================================== WUNSCH MURAT 27.08.2026: „o dizayninda saginda kücük önizlemesi olsun basinca büyür moda gecince üstünde gidince kücülür eski halinde olur." Das Kärtchen zeigt ein ECHTES Blatt – dasselbe HTML, dieselbe Vorlage, nur verkleinert. Ein gemaltes Symbolbild wäre eine zweite Wahrheit, die beim ersten Vorlagenwechsel nicht mehr stimmt. `transform:scale()` und NICHT `zoom`: hier ist die Verkleinerung Dekoration in einem Kasten fester Grösse, der Fluss darunter soll sich NICHT ändern. (Beim grossen Blatt ist es umgekehrt – dort hängt der Zoom an `zoom`, siehe index.css.) */ .ebb-mini{ /* `display:block` ist Pflicht: die Kachel ist ein (sie steht in einem Knopf, und ein
im Knopf ist ungültiges HTML). Ein inline stehendes Element nimmt weder Breite noch `aspect-ratio` an. */ display: block; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: var(--card); position: relative; pointer-events: none; } .ebb-mini > .ebb{ position: absolute; top: 0; left: 0; transform-origin: top left; box-shadow: none; margin: 0; /* 210 mm sind 794 px. Der Maßstab hängt an einer Variablen, weil dieselbe Kachel an zwei Orten in verschiedener Größe steht (Auswahlkachel und, später, das Regal). Wer sie woanders benutzt, setzt `--ebb-mini-skala` auf `Kachelbreite / 794` – die Zahl steht dann bei der Kachel und nicht hier, wo niemand sie vermutet. */ transform: scale(var(--ebb-mini-skala, .19)); } /* ========================================================================== DIE BILDVORLAGEN (v2.980.0) – zehn Vorlagen mit Bildern ========================================================================== Murat 08.10.2026: „Erkler Blat'ı da biraz böyle renkli … çekici hale getirelim … farklı farklı çeşitli". Die Bilder setzt der Bauer (`bilder` im Katalog, erklaerblatt-designs.js); hier steht nur, WIE sie auf dem Blatt sitzen. ⛔ Keine Bilddatei kommt von einer KI – alles aus static/images/emoji (Fluent Emoji, MIT) und static/images/blatt/figuren. KOPIERFEST wie der übrige Blattschmuck: das Farbband oben ist schmal, die Flächen sind hell, und jede Figur ist ein Bild, das auch grau lesbar bleibt. Alle Regeln hängen an `.ebx` – die 37 übrigen Vorlagen sehen keine davon. ========================================================================== */ /* Blattschmuck „bilder": ein Farbband mit Wellenkante oben. Die Wellen sind Kreise in Papierfarbe, die aus dem Band ausgestanzt werden – kein Bild, kein Ladeweg. */ .ebs-bilder::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8mm; background: radial-gradient(circle at 5mm 8mm, var(--ebb-papier) 3.1mm, transparent 3.3mm) 0 0 / 10mm 8mm repeat-x, linear-gradient(90deg, var(--ebb-akzent), var(--ebb-dunkel)); pointer-events: none; } /* Die Bilder neben dem Titel. */ .ebx .ebx-deko{ float: right; display: flex; gap: 2mm; margin: -1mm 0 2mm 4mm; } .ebx .ebx-deko-b{ width: 15mm; height: 15mm; object-fit: contain; } .ebx.ebx-flach .ebx-deko-b{ width: 11mm; height: 11mm; } /* Der Begleiter stellt die Leitfrage – als Sprechblase. */ .ebx-frage{ display: flex; align-items: center; gap: 4mm; margin: 0 0 12px; break-inside: avoid; page-break-inside: avoid; clear: both; } .ebx-figur{ width: 22mm; height: auto; flex: none; } .ebx-frage .ebb-leitfrage{ flex: 1; margin: 0; position: relative; background: var(--ebb-weich); border: 2px solid var(--ebb-akzent); border-radius: 14px; padding: 8px 13px; } .ebx-frage .ebb-leitfrage::after{ content: ""; position: absolute; left: -9px; top: 50%; margin-top: -8px; border-width: 8px 9px 8px 0; border-style: solid; border-color: transparent var(--ebb-akzent) transparent transparent; } /* Zeichen in Kernaussage, Kästen und Mini-Check. */ .ebx .ebx-ik{ width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 6px; } .ebx .ebb-kern .ebx-ik{ width: 19px; height: 19px; vertical-align: -4px; } .ebx .ebb-check h2 .ebx-ik{ width: 20px; height: 20px; vertical-align: -4px; } .ebx .ebb-kasten{ display: flow-root; } .ebx-kfigur{ float: right; width: 17mm; height: auto; margin: -4px -2px 0 8px; } /* Das Bild am Abschnitt – rechts, der Text fliesst daneben. */ .ebx .ebb-abschnitt{ display: flow-root; } .ebx .ebx-motiv{ float: right; width: 16mm; height: 16mm; object-fit: contain; margin: 0 0 4px 10px; } .ebx.ebx-flach .ebx-motiv{ width: 11mm; height: 11mm; } /* Beim Band steht die Überschrift als Streifen über die ganze Breite – das Bild setzt sich darunter. */ .ebf-band.ebx .ebx-motiv{ margin-top: 36px; } /* Der Abschluss: Begleiter + drei Gesichter zum Ankreuzen. */ .ebx-ende{ display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 16px; border: 2px dashed var(--ebb-akzent); border-radius: 14px; background: var(--ebb-weich); break-inside: avoid; page-break-inside: avoid; } .ebx-ende--kann{ border-style: solid; border-width: 0 0 0 5px; border-radius: 0 10px 10px 0; } .ebx-endfigur{ width: 23mm; height: auto; flex: none; } .ebx-ende-tx b{ display: block; font-size: 11.5pt; color: var(--ebb-dunkel); margin-bottom: 6px; } .ebx-gesichter{ display: flex; flex-wrap: wrap; gap: 6mm; } .ebx-gesicht{ display: inline-flex; align-items: center; gap: 2mm; font-size: 9pt; } .ebx-gesicht i{ font-style: normal; } .ebx-gesicht-b{ width: 9mm; height: 9mm; object-fit: contain; } .ebx-kreis{ width: 4.5mm; height: 4.5mm; border: 1.5px solid var(--ebb-text); border-radius: 50%; display: inline-block; } /* ---- Was die zehn voneinander unterscheidet ------------------------------ */ /* Bilderbuch: grosse Bilder, Robby gross. */ .ebd-bilderbuch .ebx-motiv{ width: 20mm; height: 20mm; } .ebd-bilderbuch .ebx-figur{ width: 26mm; } .ebd-bilderbuch .ebb-abschnitt h2{ font-size: 15pt; } /* Comic: dicke schwarze Konturen und harte Schatten. */ .ebd-comic .ebb-abschnitt{ border: 2.5px solid var(--ebb-dunkel); box-shadow: 4px 4px 0 var(--ebb-dunkel); } .ebd-comic .ebb-kasten{ border: 2.5px solid var(--ebb-dunkel); border-radius: var(--ebb-radius); } .ebd-comic .ebb-titel{ font-weight: 900; color: var(--ebb-akzent); } .ebd-comic .ebx-frage .ebb-leitfrage{ border-color: var(--ebb-dunkel); background: var(--ebb-weich); } .ebd-comic .ebx-frage .ebb-leitfrage::after{ border-right-color: var(--ebb-dunkel); } /* Lernposter: grosse Kopfbilder, die Bänder kräftig. */ .ebd-poster .ebx-deko-b{ width: 18mm; height: 18mm; } .ebd-poster .ebb-abschnitt h2{ background: linear-gradient(90deg, var(--ebb-akzent), var(--ebb-dunkel)); } /* Klar mit Bild: ruhig, das Band dünn. */ .ebd-klarbild.ebs-bilder::before{ height: 4mm; background: var(--ebb-akzent); } /* Naturforscher: weiche grüne Blasen. */ .ebd-naturbild .ebb-abschnitt{ border-color: var(--ebb-linie); } /* Physik- und Chemielabor: der Zähler als Kreis. */ .ebd-physikbild .ebb-abschnitt::before, .ebd-chemiebild .ebb-abschnitt::before{ border-radius: 50%; } .ebd-chemiebild .ebb-warnung{ border-left-width: 7px; } /* Zeitreise: Sepia und Serifen, die Überschrift mit Zierlinie. */ .ebd-zeitbild .ebb-abschnitt h2{ border-bottom: 1px solid var(--ebb-linie); padding-bottom: 3px; } .ebd-zeitbild .ebb-titel{ letter-spacing: .01em; } /* Sprachwerkstatt: die Begriffe als Karteikarte. */ .ebd-sprachbild .ebb-begriff{ border-left-width: 0; border-top: 5px solid var(--ebb-akzent); border-radius: var(--ebb-radius); } /* ---- Die Paletten der Bildvorlagen -------------------------------------- */ .ebd-bilderbuch{ --ebb-akzent:var(--ebd-bilderbuch-akzent); --ebb-weich:var(--ebd-bilderbuch-weich); --ebb-dunkel:var(--ebd-bilderbuch-dunkel); --ebb-papier:var(--ebd-bilderbuch-papier); --ebb-text:var(--ebd-bilderbuch-text); --ebb-linie:var(--ebd-bilderbuch-linie); --ebb-radius:20px; --ebb-titel-groesse:28px; } .ebd-entdecker{ --ebb-akzent:var(--ebd-entdecker-akzent); --ebb-weich:var(--ebd-entdecker-weich); --ebb-dunkel:var(--ebd-entdecker-dunkel); --ebb-papier:var(--ebd-entdecker-papier); --ebb-text:var(--ebd-entdecker-text); --ebb-linie:var(--ebd-entdecker-linie); --ebb-radius:12px; } .ebd-comic{ --ebb-akzent:var(--ebd-comic-akzent); --ebb-weich:var(--ebd-comic-weich); --ebb-dunkel:var(--ebd-comic-dunkel); --ebb-papier:var(--ebd-comic-papier); --ebb-text:var(--ebd-comic-text); --ebb-linie:var(--ebd-comic-linie); --ebb-radius:14px; --ebb-titel-groesse:27px; } .ebd-poster{ --ebb-akzent:var(--ebd-poster-akzent); --ebb-weich:var(--ebd-poster-weich); --ebb-dunkel:var(--ebd-poster-dunkel); --ebb-papier:var(--ebd-poster-papier); --ebb-text:var(--ebd-poster-text); --ebb-linie:var(--ebd-poster-linie); --ebb-radius:12px; } .ebd-klarbild{ --ebb-akzent:var(--ebd-klarbild-akzent); --ebb-weich:var(--ebd-klarbild-weich); --ebb-dunkel:var(--ebd-klarbild-dunkel); --ebb-papier:var(--ebd-klarbild-papier); --ebb-text:var(--ebd-klarbild-text); --ebb-linie:var(--ebd-klarbild-linie); --ebb-radius:6px; } .ebd-naturbild{ --ebb-akzent:var(--ebd-naturbild-akzent); --ebb-weich:var(--ebd-naturbild-weich); --ebb-dunkel:var(--ebd-naturbild-dunkel); --ebb-papier:var(--ebd-naturbild-papier); --ebb-text:var(--ebd-naturbild-text); --ebb-linie:var(--ebd-naturbild-linie); --ebb-radius:18px; } .ebd-physikbild{ --ebb-akzent:var(--ebd-physikbild-akzent); --ebb-weich:var(--ebd-physikbild-weich); --ebb-dunkel:var(--ebd-physikbild-dunkel); --ebb-papier:var(--ebd-physikbild-papier); --ebb-text:var(--ebd-physikbild-text); --ebb-linie:var(--ebd-physikbild-linie); --ebb-radius:8px; --ebb-font-titel:var(--ebb-sans); } .ebd-chemiebild{ --ebb-akzent:var(--ebd-chemiebild-akzent); --ebb-weich:var(--ebd-chemiebild-weich); --ebb-dunkel:var(--ebd-chemiebild-dunkel); --ebb-papier:var(--ebd-chemiebild-papier); --ebb-text:var(--ebd-chemiebild-text); --ebb-linie:var(--ebd-chemiebild-linie); --ebb-radius:8px; } .ebd-zeitbild{ --ebb-akzent:var(--ebd-zeitbild-akzent); --ebb-weich:var(--ebd-zeitbild-weich); --ebb-dunkel:var(--ebd-zeitbild-dunkel); --ebb-papier:var(--ebd-zeitbild-papier); --ebb-text:var(--ebd-zeitbild-text); --ebb-linie:var(--ebd-zeitbild-linie); --ebb-radius:4px; --ebb-font:var(--ebb-serif); --ebb-font-titel:var(--ebb-serif); } .ebd-sprachbild{ --ebb-akzent:var(--ebd-sprachbild-akzent); --ebb-weich:var(--ebd-sprachbild-weich); --ebb-dunkel:var(--ebd-sprachbild-dunkel); --ebb-papier:var(--ebd-sprachbild-papier); --ebb-text:var(--ebd-sprachbild-text); --ebb-linie:var(--ebd-sprachbild-linie); --ebb-radius:12px; } /* Das eigene Druckdokument (v2.979.3, erklaerblatt-ui.js `ebDruckDokument`): nichts als das Blatt – keine Ränder des Dokuments, kein Schatten. */ .ebb-druckdok, .ebb-druckdok body{ margin: 0; padding: 0; background: transparent; } .ebb-druckdok .ebb{ margin: 0 auto; box-shadow: none; } /* ========================================================================== DRUCK – hier entscheidet sich, ob A4 wirklich A4 ist ========================================================================== Auf dem Bildschirm trägt das Blatt seine Ränder selbst (`padding:18mm`). Beim Drucken übernimmt sie `@page`, und das Blatt gibt sie ab – sonst stünden beide übereinander und der Satzspiegel wäre 35 mm eingerückt. `size: A4 portrait` steht hier und nicht in index.css: `@page` gilt für das ganze Dokument und lässt sich nicht auf eine Klasse einschränken. Diese Datei wird nur dort geladen, wo Erklärblätter gezeigt werden. */ @media print{ /* DERSELBE SATZSPIEGEL WIE AUF DEM BILDSCHIRM (v2.526.0). Vorher standen hier 16/15 mm, während `.ebb` am Bildschirm 18/17/16 mm trug - die Spalte war gedruckt 4 mm breiter als in der Vorschau, und damit brach jede Zeile im Druck an einer anderen Stelle um. Zwei Maße für dasselbe Blatt sind eine Wahrheit zu viel. */ @page{ size: A4 portrait; margin: 18mm 17mm 16mm; } .ebb{ width: auto; min-height: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; background: var(--ebb-papier); /* Farbflächen sollen wirklich gedruckt werden. Ohne diese Zeile lässt Chrome Hintergründe weg – und der Merksatz-Kasten ist dann ein Rahmen um nichts. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ebb-mini{ display: none; } /* Das Farbband der Bildvorlagen steht auf dem Bildschirm im Rand des Blattes. Im Druck trägt `@page` den Rand, das Blatt hat keinen – also bekommt der Kopf hier Platz unter dem Band. */ .ebb.ebs-bilder{ padding-top: 11mm; } }