@page { size: A4; margin: 18mm 18mm 20mm 18mm; } @page :first { margin: 0; } :root { --teal: #0f6f69; --teal-d: #0a4d49; --ink: #1f2937; --mute: #6b7280; --line: #d9e2e1; --soft: #f1f7f6; } * { box-sizing: border-box; } html { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--ink); font-size: 10pt; line-height: 1.5; } body { margin: 0; } /* Deckblatt */ .cover { height: 297mm; width: 210mm; page-break-after: always; position: relative; color: #fff; overflow: hidden; background: linear-gradient(155deg, #0a4d49 0%, #0f6f69 55%, #1d9a8f 100%); } .cover .shape1 { position: absolute; right: -60mm; top: -40mm; width: 170mm; height: 170mm; border-radius: 50%; background: rgba(255,255,255,.07); } .cover .shape2 { position: absolute; left: -50mm; bottom: -60mm; width: 150mm; height: 150mm; border-radius: 50%; background: rgba(255,255,255,.06); } .cover .mark { position: absolute; left: 25mm; top: 30mm; width: 26mm; height: 26mm; border-radius: 6mm; background: #fff; color: var(--teal); font-weight: 800; font-size: 20mm; line-height: 26mm; text-align: center; } .cover h1 { position: absolute; left: 25mm; top: 78mm; margin: 0; font-size: 46pt; letter-spacing: -1px; line-height: 1.05; border: 0; color: #fff; } .cover .sub { position: absolute; left: 25mm; top: 134mm; width: 150mm; font-size: 17pt; font-weight: 300; line-height: 1.35; } .cover .rule { position: absolute; left: 25mm; top: 126mm; width: 40mm; height: 1.4mm; background: #fff; opacity: .8; } .cover .meta { position: absolute; left: 25mm; bottom: 28mm; width: 160mm; font-size: 10pt; line-height: 1.6; opacity: .95; } .cover .meta b { font-weight: 600; } /* Vorspann */ .front { page-break-after: always; } .front h1.plain, .toc h1.plain { border: 0; margin-top: 0; } /* Überschriften */ h1 { font-size: 24pt; color: var(--teal-d); margin: 0 0 6mm; padding-bottom: 3mm; border-bottom: 2px solid var(--teal); page-break-before: always; line-height: 1.15; break-after: avoid; } h1.plain { page-break-before: auto; } .front h1, .toc h1 { page-break-before: auto; } h2 { font-size: 15pt; color: var(--teal); margin: 8mm 0 3mm; break-after: avoid; line-height: 1.25; } h3 { font-size: 11pt; color: var(--ink); margin: 5mm 0 1.5mm; break-after: avoid; } .num { color: #8fb9b5; font-weight: 400; margin-right: 2mm; } p { margin: 0 0 2.5mm; orphans: 3; widows: 3; } ul, ol { margin: 0 0 3mm; padding-left: 6mm; } li { margin-bottom: 1mm; } code { font-family: Consolas, "Courier New", monospace; font-size: 9pt; background: #eef3f2; padding: 0 1mm; border-radius: 1mm; } kbd { font-family: Consolas, monospace; font-size: 8.5pt; background: #fff; border: 1px solid #b7c6c4; border-bottom-width: 2px; border-radius: 1.2mm; padding: 0 1.4mm; white-space: nowrap; } table { border-collapse: collapse; width: 100%; margin: 2mm 0 4mm; font-size: 9pt; break-inside: auto; } th { background: var(--teal); color: #fff; text-align: left; padding: 1.6mm 2.2mm; font-weight: 600; } td { padding: 1.5mm 2.2mm; border-bottom: 1px solid var(--line); vertical-align: top; } tr { break-inside: avoid; } tr:nth-child(even) td { background: #f7fbfa; } /* Bilder */ figure { margin: 3mm 0 5mm; padding: 0; text-align: center; break-inside: avoid; } figure img { max-width: 100%; max-height: 205mm; width: auto; height: auto; border: 1px solid #c8d4d3; border-radius: 1.5mm; box-shadow: 0 1px 3px rgba(0,0,0,.12); } figure.narrow img { max-height: 120mm; } figcaption { font-size: 8.5pt; color: var(--mute); margin-top: 1.5mm; } /* Hinweisboxen */ .tip, .warn, .note { margin: 3mm 0 4mm; padding: 2.4mm 3.5mm; border-left: 3mm solid; border-radius: 0 1.5mm 1.5mm 0; font-size: 9.5pt; break-inside: avoid; } .tip { background: #eaf6ef; border-color: #2f9e6b; } .warn { background: #fff4e5; border-color: #e08a00; } .note { background: #eaf2fb; border-color: #3b82c4; } .tip::before, .warn::before, .note::before { font-weight: 700; display: block; margin-bottom: .5mm; } .tip::before { content: "Tipp"; color: #1f7a50; } .warn::before { content: "Achtung"; color: #b36b00; } .note::before { content: "Hinweis"; color: #2a6aa3; } .steps { counter-reset: s; list-style: none; padding-left: 0; } .steps li { counter-increment: s; padding-left: 8mm; position: relative; margin-bottom: 1.6mm; } .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 5.4mm; height: 5.4mm; border-radius: 50%; background: var(--teal); color: #fff; font-size: 8pt; text-align: center; line-height: 5.4mm; font-weight: 600; } /* Inhaltsverzeichnis */ .toc { page-break-after: always; } .toc a { display: flex; align-items: baseline; color: inherit; text-decoration: none; } .toc a.t1 { font-weight: 600; margin-top: 2.2mm; color: var(--teal-d); font-size: 10.5pt; } .toc a.t2 { padding-left: 8mm; font-size: 9pt; line-height: 1.35; } .toc .tn { width: 9mm; flex: none; } .toc a.t2 .tn { width: 10mm; color: var(--mute); } .toc .tt { flex: none; max-width: 140mm; } .toc .tl { flex: 1; border-bottom: 1px dotted #aab8b6; margin: 0 1.5mm; position: relative; top: -1mm; } .toc .tp { flex: none; min-width: 7mm; text-align: right; } .facts td:first-child { width: 42mm; font-weight: 600; } .small { font-size: 8.5pt; color: var(--mute); } .cols2 { column-count: 2; column-gap: 8mm; }