/* ============================================ WOCHENPLAN — DRUCKANSICHT ============================================ Ein A4-Blatt im Layout der bisherigen Canva-PDFs. Alle Masse sind an 2608-WP-17.pdf ausgemessen und in mm notiert, damit sie beim Drucken direkt stimmen. Die Farben kommen ueber CSS-Variablen aus inc/colors.php und werden im gesetzt. Zwei Ausgaben aus derselben Vorlage: .format-a4 210 x 297 mm .format-social 1080 x 1440 px — dasselbe Blatt, nur 17 mm kuerzer und als Ganzes hochskaliert. ============================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #fff; } body { font-family: "Bouba Round Light", helvetica, arial, sans-serif; font-weight: 300; color: var(--wp-ton); -webkit-print-color-adjust: exact; print-color-adjust: exact; -webkit-font-smoothing: antialiased; } /* ---- Das Blatt ---- */ .wp-blatt { position: relative; width: 210mm; height: 297mm; padding: 13mm 10.5mm 12mm; display: flex; flex-direction: column; background: #fff; overflow: hidden; } /* ---- Kopfzeile ---- */ .wp-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 6.8mm; line-height: 1; padding-bottom: 6mm; border-bottom: 0.7mm solid var(--wp-ton); flex: none; } /* ---- Mittelteil: senkrechter Schriftzug + die sieben Tage ---- */ .wp-mitte { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; margin-top: 13.5mm; } .wp-vertikal { flex: none; width: 26mm; display: flex; align-items: center; justify-content: flex-start; } .wp-vertikal span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 24mm; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } .wp-tage { flex: 1 1 auto; display: flex; flex-direction: column; gap: 9.4mm; min-width: 0; } /* ---- Eine Tageszeile ---- flex: 1 1 auto laesst jede Zeile so hoch werden, wie ihr Text sie braucht, und verteilt den Rest gleichmaessig. Deshalb kann kein Text ueberlaufen, auch wenn ein Titel laenger wird als alles bisher Dagewesene. */ .wp-tag { display: flex; align-items: center; gap: 4.5mm; flex: 1 1 auto; min-height: 22.8mm; min-width: 0; } .wp-tag.ist-leer { display: none; } /* ---- Tages-Badge ---- */ .wp-badge { flex: none; width: 22.8mm; height: 22.8mm; border-radius: 4mm; display: flex; align-items: center; justify-content: center; font-size: 8.5mm; line-height: 1; letter-spacing: 0.01em; } /* ---- Bilder ---- */ .wp-bilder { flex: none; position: relative; display: flex; gap: 4.5mm; } .wp-bild { display: block; width: 22.8mm; height: 22.8mm; border-radius: 3mm; overflow: hidden; background: #eee; } .wp-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Das handgezeichnete + bzw. or sitzt mittig ueber der Luecke und ragt ueber beide Bilder. currentColor sorgt dafuer, dass dieselbe Datei in beiden Farbwelten funktioniert. */ .wp-zeichen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); width: 8.5mm; color: var(--wp-ton); z-index: 2; pointer-events: none; } .wp-zeichen svg { display: block; width: 100%; height: auto; } .wp-zeichen-oder { width: 10mm; } /* ---- Textkasten ---- */ .wp-kasten { flex: 1 1 auto; align-self: stretch; min-width: 0; display: flex; align-items: center; justify-content: center; border: 0.34mm solid var(--wp-ton); border-radius: 4.2mm; padding: 3mm 5mm; } .wp-zeile { font-size: 5mm; line-height: 1.35; text-align: center; /* Keine Silbentrennung: Die Canva-Vorlage trennt nie, und noetig ist es auch nicht — die Zeilen wachsen mit. overflow-wrap bleibt als Notnagel fuer den Fall, dass ein einzelnes Wort breiter als der Kasten waere. */ hyphens: manual; overflow-wrap: break-word; } /* Medium ausschliesslich fuer , und

— dieselbe Regel wie im Theme. Im Blatt selbst kommt derzeit nichts davon vor; die Regel greift, sobald ein redaktioneller Text sie mitbringt. */ .wp-blatt strong, .wp-blatt b, .wp-blatt h3 { font-family: "Bouba Round Medium", helvetica, arial, sans-serif; font-weight: normal; font-synthesis-weight: none; } /* Schriftstufen: greifen erst, wenn ein Eintrag deutlich aus der Reihe faellt. Gemessen an September 2026 betrifft das fast nur die Sonntage. */ .wp-kasten.ist-lang .wp-zeile { font-size: 4.5mm; } .wp-kasten.ist-sehr-lang .wp-zeile { font-size: 4.1mm; line-height: 1.3; } /* Der Trenner zwischen zwei Eintraegen. Eigenes Element, weil die meisten Videotitel selbst einen Gedankenstrich enthalten — ohne mehr Abstand und etwas Zurueckhaltung in der Farbe waere er nicht als Trenner lesbar. */ .wp-trenner { display: inline-block; margin: 0 0.75em; opacity: 0.55; } /* ---- Fusszeile ---- */ .wp-fuss { flex: none; display: flex; justify-content: space-between; align-items: baseline; font-size: 5.4mm; line-height: 1; margin-top: 7.8mm; padding-top: 6mm; border-top: 0.7mm solid var(--wp-ton); } /* ============================================ Zweites Ausgabeformat: 1080 x 1440 fuer Social Media ============================================ Dasselbe Blatt, nur 280 statt 297 mm hoch (3:4 statt 1:1,414) und als Ganzes skaliert. 210 mm sind bei 96 dpi 793,7 px, also 1080/793,7. Die Tageszeilen fangen die fehlende Hoehe von selbst ab. */ body.format-social { width: 1080px; height: 1440px; overflow: hidden; } body.format-social .wp-blatt { height: 280mm; padding: 11mm 10.5mm 10mm; transform: scale(1.36074); transform-origin: top left; } /* 3:4 ist im Verhaeltnis 17 mm kuerzer als A4. Die Abstaende geben das ab, nicht die Inhalte — Badges, Bilder und Schriftgroessen bleiben gleich. */ body.format-social .wp-kopf { padding-bottom: 4.5mm; } body.format-social .wp-mitte { margin-top: 9mm; } body.format-social .wp-tage { gap: 6.5mm; } body.format-social .wp-fuss { margin-top: 5mm; padding-top: 4.5mm; } /* ============================================ Bildschirm und Druck ============================================ */ @media screen { body.format-a4 { background: #d8d8d4; padding: 20px 0; display: flex; justify-content: center; } body.format-a4 .wp-blatt { box-shadow: 0 2px 18px rgba(0,0,0,.25); } } @page { size: A4 portrait; margin: 0; } @media print { body.format-a4 { background: none; padding: 0; display: block; } .wp-blatt { box-shadow: none; } } /* ---- Hilfslinien mit ?raster=1 ---- */ .mit-raster .wp-tag { outline: 0.2mm dashed rgba(240,85,55,.5); } .mit-raster .wp-kasten { outline: 0.2mm dashed rgba(0,120,255,.4); } .mit-raster .wp-vertikal { outline: 0.2mm dashed rgba(0,160,80,.5); }