/* ========================================================= NEWSPAPER LAYOUT - Benno-Style / Yearbook-Spread A4 hochkant (210 x 297 mm). 4 Seiten bilden eine A3-Broschüre. ========================================================= */ :root { --paper: #ffffff; --ink: #1a1a1a; --ink-soft: #3a3a3a; --ink-muted: #6b6b6b; --rule: #e5e5e3; --rule-soft: #efefed; --accent: #0055a4; --accent-soft: rgba(0, 85, 164, .08); --serif: 'Libre Baskerville', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --display: 'Montserrat', 'Inter', sans-serif; --page-w: 210mm; --page-h: 297mm; --page-pad: 14mm; } /* Farbschemata (werden per [data-theme] am gesetzt) */ [data-theme="default"] { --accent: #0055a4; --accent-soft: rgba(0,85,164,.08); } [data-theme="warm"] { --accent: #b2542b; --accent-soft: rgba(178,84,43,.08); --paper: #faf7f1; --rule: #e4ddcd; --rule-soft: #efe8d8; } [data-theme="forest"] { --accent: #2f6a4f; --accent-soft: rgba(47,106,79,.08); } [data-theme="rose"] { --accent: #b85672; --accent-soft: rgba(184,86,114,.08); } [data-theme="ocean"] { --accent: #2a7a8a; --accent-soft: rgba(42,122,138,.08); } [data-theme="plum"] { --accent: #6b4a7a; --accent-soft: rgba(107,74,122,.08); } [data-theme="sunset"] { --accent: #d0492e; --accent-soft: rgba(208,73,46,.08); } [data-theme="mono"] { --accent: #1a1a1a; --accent-soft: rgba(26,26,26,.06); } /* ---------- Seite ---------- */ .page { width: var(--page-w); height: var(--page-h); background: var(--paper); color: var(--ink); padding: var(--page-pad); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 40px rgba(0,0,0,.08); border-radius: 2px; font-family: var(--sans); display: flex; flex-direction: column; gap: 6mm; position: relative; overflow: hidden; page-break-after: always; break-after: page; } .page-header { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6mm; row-gap: 1mm; border-bottom: 1px solid var(--ink); padding-bottom: 3mm; flex-shrink: 0; } .page-num { font-family: var(--display); font-weight: 800; font-size: 10pt; letter-spacing: .12em; color: var(--accent); grid-row: 1 / 3; } .page-title { font-family: var(--display); font-weight: 800; font-size: 20pt; letter-spacing: -.01em; margin: 0; line-height: 1.05; } .page-kicker { font-size: 9.5pt; color: var(--ink-muted); margin: 0; font-style: italic; font-family: var(--serif); grid-column: 2; } /* Spread-Header variante (rechte Seite mit continuation) */ .spread-header.continuation .page-title { color: var(--ink-soft); } .page-footer { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 2mm; display: flex; justify-content: space-between; font-size: 8pt; color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase; font-family: var(--display); font-weight: 600; flex-shrink: 0; } .folio { letter-spacing: .2em; } /* ========================================================= SEITE 1 - COVER ========================================================= */ .cover { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 8mm; } .cover-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 3mm; font-family: var(--display); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; font-size: 10pt; } .cover-kicker { color: var(--accent); } .cover-hero { display: flex; align-items: stretch; } .photo-hero { width: 100%; aspect-ratio: 4 / 3; border-radius: 3mm; background: var(--rule-soft); margin: 0; } .photo-hero img { border-radius: 3mm; } .cover-title { font-family: var(--display); font-weight: 900; font-size: 52pt; line-height: .95; letter-spacing: -.02em; margin: 0 0 4mm; display: flex; flex-direction: column; gap: 1mm; } .cover-title .cover-divider { height: 2px; background: var(--accent); width: 20mm; margin: 2mm 0; } .cover-sub { font-family: var(--serif); font-style: italic; font-size: 12pt; color: var(--ink-soft); margin: 0 0 4mm; } .cover-meta { font-family: var(--display); font-weight: 600; font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: 2mm; align-items: baseline; flex-wrap: wrap; } .cover-meta .dot { color: var(--accent); } /* ========================================================= SEITEN 2 + 3 - JAHRBUCH-SPREAD ========================================================= */ .page-spread .student-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); grid-template-rows: repeat(var(--rows, 3), 1fr); gap: var(--gap, 4mm); } .empty-state { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10mm; border: 1px dashed var(--rule); border-radius: 4mm; color: var(--ink-muted); font-style: italic; font-size: 10pt; line-height: 1.5; } .empty-state strong { color: var(--accent); font-style: normal; } /* Karten-Stile je nach Skalierung (wird per Klasse am Grid gesetzt). NEUES Layout: Foto oben zentriert, Name darunter, Q/A-Liste unten. */ .student-card { border: 1px solid var(--rule); border-radius: 3mm; background: var(--paper); display: flex; flex-direction: column; align-items: stretch; padding: var(--card-pad, 3mm); gap: var(--card-gap, 1.5mm); break-inside: avoid; page-break-inside: avoid; min-width: 0; min-height: 0; overflow: hidden; /* harte Kapselung — kein Überlauf nach außen */ } .photo-student { width: var(--card-photo-size, 20mm); height: var(--card-photo-size, 20mm); border-radius: 50%; margin: 0 auto; /* horizontal zentriert */ background: var(--rule-soft); flex-shrink: 0; } .photo-student img { border-radius: 50%; } .student-body { display: flex; flex-direction: column; gap: var(--card-gap-body, 1mm); flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; } .student-name { font-family: var(--display); font-weight: 800; font-size: var(--card-name-size, 11pt); line-height: 1.1; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--ink); padding-bottom: 0.6mm; flex-shrink: 0; } /* Frage/Antwort-Liste — vertikal, gleichmäßig verteilt, harte Kapselung */ .student-qa { display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--card-qa-gap-y, 0.8mm); flex: 1 1 auto; min-height: 0; overflow: hidden; } .qa { display: grid; grid-template-columns: var(--card-icon-size, 3.5mm) minmax(0, 1fr); align-items: center; column-gap: 1.2mm; min-width: 0; min-height: 0; overflow: hidden; } .qa-q { width: var(--card-icon-size, 3.5mm); height: var(--card-icon-size, 3.5mm); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .qa-q svg { width: 100%; height: 100%; display: block; } .qa-a { display: block; white-space: nowrap; /* niemals umbrechen */ overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); font-size: var(--card-fact-size, 8.5pt); color: var(--ink); line-height: 1.25; border-bottom: 1px dotted var(--rule); padding: 0.2mm 0 0.4mm; min-width: 0; } /* Motto darf 2 Zeilen sein, kleinere Schrift */ .qa-motto .qa-a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: calc(var(--card-fact-size, 8.5pt) * 0.85); line-height: 1.2; font-style: italic; word-break: break-word; overflow-wrap: break-word; } .qa-motto { align-items: start; /* Icon oben bei mehrzeiliger Antwort */ } .qa-motto .qa-q { margin-top: 0.2em; } /* Memory-Label mit Icon */ .memory-label { font-family: var(--display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--card-dt-size, 6.5pt); color: var(--accent); line-height: 1.1; display: flex; align-items: center; gap: 1.5mm; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .memory-icon { width: var(--card-icon-size, 3mm); height: var(--card-icon-size, 3mm); flex-shrink: 0; display: block; } /* Platzhalter: zeigt beim leeren contenteditable einen grauen Hinweis */ [contenteditable="true"][data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--rule); font-style: italic; pointer-events: none; } /* Firefox/Edge Workaround: Zeilenumbruch in leerem Editable */ [contenteditable="true"][data-placeholder]:is(:has(br:only-child), :has(> :only-child:empty))::before { content: attr(data-placeholder); color: var(--rule); font-style: italic; } /* Memory-Block in der Karte komplett deaktiviert (zu wenig Platz und verursachte Umbruch-Konflikte). Die Karten zeigen jetzt nur die Q/A-Liste, dafür mit großzügig verteiltem vertikalem Platz. */ .student-memory-block { display: none !important; } /* --- Karten-Tiers (Größen-Presets) --- Jedes Tier legt fest: - Größen (Schrift, Foto, Padding) - Wie viele Q/A-Spalten das Grid hat - Welche Q/A-Blöcke sichtbar sind (essen, buch, motto, memory-block) */ /* =========================================================== Tier-Skalen für die Steckbrief-Karten. Konstantes Verhältnis: Photo:Icon ≈ 9:1, Icon : Schrift ≈ 1.6:1. Alle Tiers behalten Memory-Block aktiv (außer XXS, dort kein Platz). =========================================================== */ /* Tier-Skalen für das VERTIKALE Card-Layout (Foto oben). Foto ist proportional zur Karten-Höhe, Schrift kompakt. */ /* XL · 1-4 Kinder · 1 Karte ≈ 190×110 mm */ .tier-xl { --card-pad: 7mm; --card-gap: 4mm; --card-photo-size: 50mm; --card-name-size: 18pt; --card-fact-size: 12pt; --card-icon-size: 6mm; --card-gap-body: 3mm; --card-qa-gap-y: 2mm; --gap: 7mm; } /* L · 5-8 Kinder · 1 Karte ≈ 90×110 mm */ .tier-l { --card-pad: 5mm; --card-gap: 3mm; --card-photo-size: 35mm; --card-name-size: 13pt; --card-fact-size: 9.5pt; --card-icon-size: 4.8mm; --card-gap-body: 2mm; --card-qa-gap-y: 1.4mm; --gap: 4mm; } /* M · 9-12 Kinder · 1 Karte ≈ 90×73 mm */ .tier-m { --card-pad: 3.5mm; --card-gap: 2.5mm; --card-photo-size: 24mm; --card-name-size: 11pt; --card-fact-size: 8.5pt; --card-icon-size: 4mm; --card-gap-body: 1.5mm; --card-qa-gap-y: 1mm; --gap: 3.5mm; } /* S · 13-18 Kinder · 1 Karte ≈ 60×73 mm */ .tier-s { --card-pad: 2.8mm; --card-gap: 2mm; --card-photo-size: 20mm; --card-name-size: 9.5pt; --card-fact-size: 7.5pt; --card-icon-size: 3.4mm; --card-gap-body: 1.2mm; --card-qa-gap-y: 0.8mm; --gap: 3mm; } /* XS · 19-24 Kinder · 1 Karte ≈ 60×55 mm */ .tier-xs { --card-pad: 2.2mm; --card-gap: 1.5mm; --card-photo-size: 16mm; --card-name-size: 8.5pt; --card-fact-size: 7pt; --card-dt-size: 5.5pt; --card-icon-size: 3mm; --card-gap-body: 1mm; --card-qa-gap-y: 0.6mm; --gap: 2.5mm; } .tier-xs .qa-motto { display: none; } /* 5 Fragen */ /* XXS · 25-30 Kinder · 1 Karte ≈ 60×45 mm */ .tier-xxs { --card-pad: 1.8mm; --card-gap: 1.2mm; --card-photo-size: 13mm; --card-name-size: 8pt; --card-fact-size: 6.8pt; --card-icon-size: 2.6mm; --card-gap-body: 0.8mm; --card-qa-gap-y: 0.4mm; --gap: 2mm; } .tier-xxs .qa-buch, .tier-xxs .qa-motto { display: none; } /* 4 Fragen (Fach, Hobby, Essen, Beruf), nur 1 Spalte */ /* Pan-/Remove-Buttons bei kleinen Tiers schrumpfen + bei XXS ganz aus */ .tier-s .photo-pan, .tier-s .photo-remove, .tier-xs .photo-pan, .tier-xs .photo-remove, .tier-xxs .photo-pan, .tier-xxs .photo-remove { width: 18px; height: 18px; font-size: 11px; line-height: 16px; top: 2px; } .tier-xs .photo-pan, .tier-xxs .photo-pan { display: none !important; } .tier-xxs .photo-remove { width: 14px; height: 14px; font-size: 9px; line-height: 12px; right: 1px; top: 1px; } /* ========================================================= SEITE 2 - GRUSSWORT (Letter) ========================================================= */ .letter-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(70mm, 40%) 1fr; gap: 6mm; } .photo-intro { margin: 0; background: var(--rule-soft); border-radius: 3mm; aspect-ratio: auto; min-height: 70mm; } .photo-intro img { border-radius: 3mm; } .letter-body { display: flex; flex-direction: column; gap: 4mm; min-height: 0; } .letter-lead { font-family: var(--serif); font-style: italic; font-size: 13pt; line-height: 1.4; color: var(--ink); margin: 0; } .letter-text { font-family: var(--sans); font-size: 10.5pt; line-height: 1.55; color: var(--ink-soft); margin: 0; white-space: pre-wrap; flex: 1; } .letter-sign { font-family: var(--display); font-weight: 700; font-size: 11pt; color: var(--accent); margin: 0; letter-spacing: .04em; } /* ========================================================= SEITEN 3 & 6 - CHRONIK (Vollseiten-Bento) ========================================================= */ .page-chronicle .memory-bento { flex: 1; } /* ========================================================= SEITE 7 - WARME DUSCHEN (großzügig) ========================================================= */ .shower-grid-large { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; align-content: start; overflow: hidden; } .shower-grid-large .shower-card { padding: 4mm 5mm; } .shower-grid-large .shower-text { font-size: 11pt; line-height: 1.4; margin: 0 0 2mm; } .shower-grid-large .shower-from { font-size: 8pt; } /* ========================================================= SEITE 8 - RÜCKSEITE (Gruß + Impressum) ========================================================= */ .page-8 .teacher-card { flex: 1; min-height: 0; } .memory-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(30mm, 1fr); gap: 3mm; flex: 1; min-height: 0; } .memory-card { border: 1px solid var(--rule); border-radius: 3mm; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); break-inside: avoid; page-break-inside: avoid; min-width: 0; } .photo-memory { margin: 0; flex: 1 1 auto; min-height: 20mm; background: var(--rule-soft); } .memory-body { padding: 2.5mm 3mm 3mm; border-top: 1px solid var(--rule-soft); } .memory-title { font-family: var(--display); font-weight: 700; font-size: 9.5pt; margin: 0 0 0.5mm; line-height: 1.15; overflow-wrap: anywhere; } .memory-meta { font-family: var(--display); font-size: 6.5pt; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.5mm; } .memory-text { margin: 0; font-size: 7.5pt; line-height: 1.35; color: var(--ink-soft); } /* Bento-Zuweisungen (6-Spalten-Raster) */ .memory-card:nth-child(6n+1) { grid-column: span 3; } .memory-card:nth-child(6n+2) { grid-column: span 3; } .memory-card:nth-child(6n+3) { grid-column: span 2; } .memory-card:nth-child(6n+4) { grid-column: span 2; } .memory-card:nth-child(6n+5) { grid-column: span 2; } .memory-card:nth-child(6n+6) { grid-column: span 6; } .shower-card { margin: 0; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 2mm; padding: 2.5mm 3.5mm; background: var(--paper); font-family: var(--serif); break-inside: avoid; page-break-inside: avoid; } .shower-text { margin: 0 0 1mm; font-size: 9pt; line-height: 1.35; font-style: italic; color: var(--ink); } .shower-from { font-family: var(--display); font-weight: 600; font-size: 7pt; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); } .teacher-card { border: 1px solid var(--rule); border-radius: 3mm; padding: 4mm 5mm; background: var(--accent-soft); display: flex; flex-direction: column; min-height: 0; } .teacher-card h3 { font-family: var(--display); font-weight: 800; font-size: 12pt; margin: 0 0 2mm; line-height: 1.1; } .teacher-text { font-family: var(--serif); font-size: 8.5pt; line-height: 1.45; margin: 0; color: var(--ink-soft); flex: 1; overflow: hidden; } .teacher-sign { margin-top: 3mm; font-family: var(--display); font-weight: 700; font-size: 9pt; color: var(--accent); letter-spacing: .04em; } .imprint { margin-top: 3mm; padding-top: 2mm; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; font-size: 7pt; color: var(--ink-muted); line-height: 1.4; flex-shrink: 0; } .imprint-col { display: flex; flex-direction: column; } .imprint-col strong { font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 6.5pt; color: var(--ink); margin-bottom: 1mm; } /* ========================================================= DRUCK-LAYOUT (A3-Bogen) ========================================================= */ .print-layout { display: none; flex-direction: column; gap: 64px; align-items: center; padding: 20px 0 40px; } .print-info { font-size: 13px; color: var(--ui-muted); max-width: 720px; text-align: center; line-height: 1.55; background: #fff; border: 1px solid var(--ui-border); border-radius: 8px; padding: 12px 16px; } .print-info strong { color: var(--ui-text, #1a1a1a); } .sheet { width: 420mm; height: 297mm; background: var(--paper); display: grid; grid-template-columns: 210mm 210mm; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.12); overflow: hidden; page-break-after: always; break-after: page; } .sheet-label { position: absolute; top: -30px; left: 0; font-family: 'Montserrat', var(--display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted, #6b6b6b); background: var(--ui-panel, #fff); padding: 4px 10px; border: 1px solid var(--ui-border, #e5e5e3); border-radius: 6px; white-space: nowrap; } .sheet-slot { display: block; position: relative; } .sheet-slot .page { box-shadow: none; border-radius: 0; page-break-after: auto; break-after: auto; margin: 0; height: 297mm; } .sheet-fold { position: absolute; top: 0; bottom: 0; left: 210mm; width: 0; border-left: 1px dashed rgba(0,0,0,.2); pointer-events: none; z-index: 1; }