68 lines
5.2 KiB
CSS
68 lines
5.2 KiB
CSS
@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; }
|