Bswi Docs

Ausgabeformate

• HTML: Direkt im Browser, perfekt für digitale Nutzung
• DOCX: Word-Dokument mit docx-generator.js
• PDF: Aus DOCX via LibreOffice konvertiert

Corporate Design Spezifikationen

Primärfarben (Blau-Palette)

Sekundärfarben

Typografie

• Schrift: Montserrat (Google Fonts), Fallback: Arial
• Titel: 15-18pt, Bold, Blau 1
• Untertitel: 10-12pt, Medium, Blau 3
• Fließtext: 11pt, Regular
• Footer: 8.5pt

Header-Layout (3-Spalten)

┌──────────────────────────────────────────────────────────┐
│ [LOGO]  │  Titel (zentriert)   │  Name: _______         │
│         │  Untertitel          │  Datum: _______        │
├──────────────────────────────────────────────────────────┤
│                    (2.5px Border Blau 1)                 │

Logo SVG (Inline)

<svg viewBox="0 0 692.7 566.9" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="g1" x1="399.7" y1="366.2" x2="1258.5" y2="80.8" gradientUnits="userSpaceOnUse">
      <stop offset="0.3" stop-color="#41C0F0"/><stop offset="0.4" stop-color="#A4DBF8"/>
    </linearGradient>
    <linearGradient id="g2" x1="212.7" y1="462.7" x2="-54.8" y2="242.1" gradientUnits="userSpaceOnUse">
      <stop offset="0.3" stop-color="#067AA7"/><stop offset="0.6" stop-color="#41C0F0"/><stop offset="1" stop-color="#A4DBF8"/>
    </linearGradient>
    <linearGradient id="g3" x1="241.1" y1="340.2" x2="423.9" y2="424.6" gradientUnits="userSpaceOnUse">
      <stop offset="0.1" stop-color="#067AA7"/><stop offset="0.3" stop-color="#41C0F0"/><stop offset="1" stop-color="#A4DBF8"/>
    </linearGradient>
    <linearGradient id="g4" x1="515.2" y1="15.2" x2="280.7" y2="716.7" gradientUnits="userSpaceOnUse">
      <stop offset="0.1" stop-color="#0E66AF"/><stop offset="0.7" stop-color="#1B3D71"/>
    </linearGradient>
  </defs>
  <path d="M689.4 0 616.1 18.8C603.2 22.1 593.8 31.7 590.4 44.5L450.2 566.9 624.9 566.9 689.4 0Z" fill="url(#g1)"/>
  <path d="M156.2 136.4 29.8 168.7C13.7 172.9 0 189.5 0 206.2L0 567 156.2 567 156.2 136.4Z" fill="url(#g2)"/>
  <path d="M220.5 566.9 385.9 566.9 369.5 163.2 248.5 194.2 220.5 566.9Z" fill="url(#g3)"/>
  <path d="M248.5 194.2 0 566.9 156.2 566.9 369.5 163.2 248.4 194.2ZM460.2 58.7 220.5 567 385.9 567 559.5 33.3 460.2 58.7ZM680 157.5 586.1 60.7 450.3 567 661.6 567 692.6 185.5C693.6 173 689.1 167 680 157.6Z" fill="url(#g4)"/>
</svg>

Logo PNG: Logo_BSWI_Quer_RGB.png (562x180px, Seitenverhältnis 3.12:1)

Footer-Layout

┌──────────────────────────────────────────────────────────┐
│ (2px Border Blau 1)                                      │
│ Dirk Schulenburg · BS:WI    Kompetent Zukunft Gestalten  │
│                             (kursiv, Blau 3)   Seite X/Y │
└──────────────────────────────────────────────────────────┘

• Weißer Hintergrund
• Obere Trennlinie: 2px Blau 1
• Links: "Dirk Schulenburg · BS:WI" (grau)
• Mitte/Rechts: Claim kursiv in Blau 3
• Bei mehrseitigen Dokumenten: "Seite X von Y"

Design-Komponenten

Aufgaben-Box

.bswi-task {
    background: #F6F6F6;
    border: 2px solid #008BC9;
    border-left-width: 6px;
    border-radius: 10px;
    padding: 14px 18px;
}

• Header mit Icon 📝, Titel und Punkte-Badge
• Hellgrauer Hintergrund
• Dicker Akzent-Rand links (Blau 4)

Info-Box / Tipp

.bswi-info {
    background: #EAF6FE;
    border-left: 5px solid #008BC9;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
}

• Icon 💡 für Tipps, ✅ für Selbstkontrolle
• Blau 7 Hintergrund

Formel-Box

.formel-box {
    background: #1C3D71;
    color: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

Lernziele-Box

.lernziele-box {
    background: linear-gradient(135deg, #EAF6FE 0%, #fff 100%);
    border: 2px solid #008BC9;
    border-radius: 12px;
}

• Icon 🎯
• Bullet-Liste mit Lernzielen

Tabellen

• Header: Blau 1 Hintergrund, weiße Schrift
• Zeilen: Zebra-Streifen mit Blau 7
• Rahmen: Blau 6

Eingabezeilen (Print)

.bswi-input-line { border-bottom: 1.5px solid #666; min-height: 2em; }
.bswi-input-line.short { width: 40%; }
.bswi-input-line.inline { width: 60px; display: inline-block; }

Mehrseitige Dokumente

HTML: Seitenumbrüche

.page {
    width: 210mm;
    height: 297mm;
    page-break-after: always;
    page-break-inside: avoid;
}

@media print {
    .page { page-break-after: always; }
    .page:last-child { page-break-after: auto; }
}

DOCX: Seitenumbrüche

new Paragraph({ children: [new PageBreak()] })

Seitenzahlen im Footer

• HTML: Manuell "Seite 1 von 2" in jeder .page
• DOCX: PageNumber.CURRENT und PageNumber.TOTAL_PAGES

DOCX-Erstellung

Verwende docx-generator.js für Word-Dokumente:

npm install docx
node docx-generator.js

Logo in DOCX (korrektes Seitenverhältnis)

new ImageRun({
    data: logoBuffer,
    transformation: { width: 112, height: 36 }, // 562:180 = 3.12:1
    type: "png"
})

Header-Tabelle (3 Spalten)

new Table({
    columnWidths: [2000, 5500, 2966],
    rows: [
        new TableRow({
            children: [
                // Logo links
                new TableCell({ children: [logoImage] }),
                // Titel mitte
                new TableCell({ children: [title, subtitle] }),
                // Name/Datum rechts
                new TableCell({ children: [nameField, dateField] })
            ]
        })
    ]
})

PDF-Erstellung

python3 scripts/office/soffice.py --headless --convert-to pdf dokument.docx --outdir ./

Kontaktdaten

Dirk Schulenburg
BS:WI – Berufliche Schule für Wirtschaft und Internationales
Hinrichsenstraße 35 · 20535 Hamburg
[email protected]
Tel: +49 40 428 976 - 0
www.bswi.hamburg

Claim

Kompetent Zukunft Gestalten

Bildsprache

Echt, freundlich, weltoffen, international

Version 1.1 - Added allowed-tools (2026-03-12)