und <link rel="canonical"> entstehen Diese Datei darf nur CSS mitbringen, kein JavaScript. Der Seitentitel steht im <title>, die Quelladresse im Canonical-Verweis. Beide werden für den Druck sichtbar gemacht: Der <head> wird zum Kopfblock des Dokuments, dazu kommt über head::before der Firmenname. Warum der Kopfblock im Textfluss steht und nicht fest im Seitenrand Geprüft am 20.09.2026: Chrome wiederholt feste Elemente (position:fixed) beim Drucken NICHT auf jedem Blatt und stellt sie auch nicht in den Seitenrand, sondern setzt sie irgendwo in den Fluss. Eine laufende Kopfzeile auf jedem Blatt gibt es deshalb nur mit JavaScript oder einem Satzprogramm. Was auf jedem Blatt steht, liefert der Browser selbst: Chrome druckt mit der Einstellung „Kopf- und Fußzeilen“ (ab Werk an) Datum und Titel oben, Quelladresse und Blattzahl unten. Unser Kopfblock nennt Firma, Titel und Quelle noch einmal ausdrücklich, damit das Blatt auch ohne diese Einstellung zuzuordnen ist. Das Druckdatum kann CSS nicht erzeugen, es kommt aus der Kopfzeile des Browsers. Geprüft am 20.09.2026 mit der Druckausgabe von Chrome (A4) an einem Fachartikel, der AWG-Tabelle, dem Wissens-Hub (FAQ und Glossar) und einer Leistungsseite. */ @media print { /* ------------------------------------------------------------------ 1 · Seitenformat Oben und unten bleibt Rand für die laufende Kopf- und Fußzeile frei. ------------------------------------------------------------------ */ @page { size: A4 portrait; margin: 16mm 15mm 16mm; } /* ------------------------------------------------------------------ 2 · Ruhe: nichts bewegt sich, nichts glänzt, nichts ist dunkel Hintergrundflächen und Verläufe fallen weg. Chrome druckt sie ohne die Einstellung „Hintergrundgrafiken“ ohnehin nicht; mit der Einstellung käme sonst eine schwarze Seite heraus. ------------------------------------------------------------------ */ *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: none !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; text-wrap: auto; } html.js .reveal { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------------ 3 · Farbwerte für Papier Die Seite arbeitet durchgehend mit Eigenschaften aus core.css. Werden sie umgesetzt, druckt jeder Baustein schwarz auf weiß, ohne dass jede Regel einzeln überschrieben werden muss. Aufgeführt sind alle Stellen, die die Werte selbst noch einmal setzen (helle Abschnitte, Karten). ------------------------------------------------------------------ */ html:root, .bg-deep, .bg-deep-2, .bg-paper, .bg-paper-2, .bg-white, .apply-card, .spec-card, .d-hero, .p-hero, .nf { --bg: #FFFFFF; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --line: #C7C7C7; --line-2: #9B9B9B; --text: #000000; --text-2: #222222; --text-3: #444444; --light: #FFFFFF; --ink: #000000; --ink-2: #222222; --fg: #000000; --fg-2: #222222; --fg-3: #444444; --card: #FFFFFF; --card-2: #FFFFFF; --card-line: #C7C7C7; --btn-bg: #FFFFFF; --btn-fg: #000000; --accent: #000000; --glow: transparent; --ok: #000000; --hdr: 0px; --gutter: 0mm; --wrap: 100%; --r-xl: 0; --r-lg: 0; --r-md: 0; --r-sm: 0; } /* ------------------------------------------------------------------ 4 · Grundschrift ------------------------------------------------------------------ */ html, body { background: #FFFFFF !important; color: #000000 !important; } body { margin: 0; font: 400 10.5pt/1.5 var(--display); font-variation-settings: "wdth" 100; -webkit-print-color-adjust: economy; print-color-adjust: economy; } main, article, section, .wrap, .sec { max-width: none; padding-left: 0; padding-right: 0; } .sec, .d-quote { padding-top: 0; padding-bottom: 6mm; } .p-hero, .d-hero, .art-hero { padding: 0 0 5mm; overflow: visible; } .stack-top { margin-top: 4mm; } /* ------------------------------------------------------------------ 5 · Was nicht auf Papier gehört Navigation, Bedienelemente, 3D-Leinwände, Werbeflächen und alles, was nur auf dem Bildschirm eine Aufgabe hat. ------------------------------------------------------------------ */ .hdr, .ftr, .drawer, .scrim, .skip, .d-sub, .pal, .toast, .lang-hint, .lang-wrap, .lang-pop, .cc, .cc-scrim, .kb, .crumbs, .art-toc, .gloss-az, .filters, .legal-nav, .hero-actions, .btn, .link, .arr, .i-ext, .card.spot, button, input, select, textarea, output, form, label, canvas, video, audio, iframe, .fab, .d-hero-media, .d-ico, .ico-tile, .d-ico-tile, .art-fig, .awg-tool, .d-gal, .news-list, .news-img, .d-rel, .d-more, .d-cta, .d-cta-grid, .art-links, .art-tags, .apply-card, .map-frame, .map-actions, .awg-info, .eyebrow::before, .faq summary::after, .note-box::before { display: none !important; } /* Abschnitte, in denen nach dem Aufräumen nur noch eine Überschrift stünde (Bildergalerie, Kachelreihen mit weiteren Artikeln), fallen ganz weg. .d-rel ist die Reihe „Weitere Leistungen“ bzw. „Weitere Branchen“ am Ende jeder Leistungs- und Branchenseite. Ohne diese Zeile blieb dort auf Papier die Überschrift „Alles aus einer Hand.“ ohne Inhalt stehen (geprüft am 20.09.2026 an leistung-kabelkonfektion und branche-automobil). */ section:has(> .wrap > .d-gal), section:has(> .wrap > .news-list), section:has(> .wrap > .d-rel), section:has(> .wrap > .d-cta-grid) { display: none !important; } /* ------------------------------------------------------------------ 6 · Kopfblock und Fußzeile des Datenblatts Der <head> steht im Dokument vor dem <body>. Als Block gesetzt wird er zum Kopf des Datenblatts: Firmenname, Titel der Seite, Quelladresse. Alles andere im Kopf (meta, script, style, die übrigen Verweise) bleibt unsichtbar, dafür sorgt der Browser selbst. ------------------------------------------------------------------ */ head { display: block; margin: 0 0 6mm; padding: 0 0 2mm; border-bottom: .75pt solid #000000; } head::before { content: "Powertune Spezialkabelsysteme GmbH & Co. KG · Datenblatt"; display: block; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #333333; } head > title { display: block; margin: 1.5mm 0 0; font: 600 12pt/1.3 var(--display); color: #000000; } head > link[rel="canonical"] { display: block; margin: 1mm 0 0; font: 400 7.5pt/1.4 var(--mono); color: #333333; word-break: break-all; } head > link[rel="canonical"]::before { content: "Quelle: " attr(href); } body::after { content: "Powertune Spezialkabelsysteme GmbH & Co. KG · Johann-Adam-Kleinschroth-Str. 10 · 97318 Kitzingen · Tel. +49 9321 3924811 · info@powertune.de · powertune.de"; display: block; margin: 6mm 0 0; padding: 2mm 0 0; border-top: .75pt solid #000000; font: 400 7.5pt/1.5 var(--display); color: #333333; break-inside: avoid; page-break-inside: avoid; } /* ------------------------------------------------------------------ 7 · Einspaltig Alle Raster der Website werden auf eine Spalte gelegt. Auf Papier gibt es keine Seitenspalte und keine Karten nebeneinander. ------------------------------------------------------------------ */ .art-grid, .d-over, .d-lst, .d-faq, .d-all, .head, .job-layout, .kt-grid, .grid-2, .grid-3, .grid-4, .gloss, .d-facts, .d-hero-grid, .perks, .chips { display: block !important; gap: 0 !important; } .art-aside, .kt-side, .d-hero-copy { position: static !important; width: auto; } /* Fehlerseite: auf Papier ohne Bildschirmhöhe und ohne Mittigkeit */ .nf { display: block; min-height: 0; padding: 0; text-align: left; } .nf-fig { width: 70mm; margin: 0 0 3mm; } .nf-links { display: block; margin: 3mm 0 0; } .nf-links li { display: inline; margin-right: 5mm; } .prose, .d-text p, .lead, .faq p, .note-box { max-width: none; } /* ------------------------------------------------------------------ 8 · Überschriften und Fließtext Die Schriftgrößen der Website rechnen mit der Fensterbreite. Auf Papier gibt es keine Fensterbreite, deshalb feste Punktgrößen. ------------------------------------------------------------------ */ .h1, .art-h1, h1, .p-hero .h1, .p-hero .art-h1, .d-hero .h1, .nf .h1 { margin: 0 0 3mm; font-size: 19pt; line-height: 1.15; letter-spacing: -.02em; max-width: none; } .tag, .chip { border-radius: 0; padding: .5mm 1.5mm; font-size: 8pt; } .h2, .prose h2, h2 { margin: 6mm 0 2mm; font-size: 13pt; line-height: 1.25; letter-spacing: -.01em; break-after: avoid; page-break-after: avoid; } .h3, .prose h3, .faq-cat, h3 { margin: 4mm 0 1.5mm; font-size: 11pt; line-height: 1.3; break-after: avoid; page-break-after: avoid; } .eyebrow, .num, .meta { margin: 0 0 1mm; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #444444; } .meta { text-transform: none; letter-spacing: .04em; } .meta > * { margin-right: 4mm; } .lead, .prose > p:first-child, .d-text p:first-child { margin: 0 0 3mm; font: 400 11pt/1.5 var(--display); letter-spacing: 0; color: #000000; } p, li, dd, dt, td, th, address, blockquote { color: #000000; orphans: 3; widows: 3; } .prose p, .d-text p { margin: 0 0 3mm; font-size: 10.5pt; line-height: 1.55; } .prose ul, .prose ol { margin: 0 0 3mm; padding-left: 5mm; } .prose li, .check li, .d-list li, .bullets li { font-size: 10.5pt; line-height: 1.45; margin: 0 0 1mm; } .d-list, .check { display: block; } .d-list li, .check li { display: list-item; list-style: square outside; margin-left: 5mm; padding: 0; border: 0; font-weight: 400; } .d-list li::before, .check li::before { content: none; display: none; } /* Aufzählungen, deren Punkt am Bildschirm ein Kästchen mit Hintergrundfarbe ist (.d-text ul auf den Leistungs- und Branchenseiten, .bullets auf den Stellen- seiten, .perks auf der Karriereseite). Abschnitt 2 nimmt jeder Fläche den Hintergrund, sonst stünden die Punkte ohne Marke und in Bildschirmgröße da. Sie werden deshalb wie .d-list zu echten Listen mit Quadratmarke. Geprüft am 20.09.2026 an leistung-kabelkonfektion, stelle-konstrukteur und karriere: vorher 17 px ohne Marke, danach 10,5 pt mit Quadrat. */ .d-text ul, .bullets { display: block; margin: 0 0 3mm; padding-left: 5mm; } .d-text ul li, .bullets li, .perks li { display: list-item; list-style: square outside; max-width: none; margin: 0 0 1mm; padding: 0; border: 0; font-size: 10.5pt; line-height: 1.45; font-weight: 400; } .perks li { margin-left: 5mm; } .d-text ul li::before, .bullets li::before, .perks li::before { content: none; display: none; } .note-box { display: block; margin: 3mm 0; padding: 2mm 3mm; border: .5pt solid #9B9B9B; border-radius: 0; font-size: 9.5pt; line-height: 1.45; } .d-quote blockquote { margin: 0; padding: 0; border: 0; } .d-quote p { font-size: 11pt; line-height: 1.4; letter-spacing: 0; } .d-quote footer { margin-top: 1mm; font-size: 8pt; } /* ------------------------------------------------------------------ 9 · Tabellen Der eigentliche Nutzen auf Papier: AWG-Tabelle, Merkmale, Kenndaten. Der Tabellenkopf wiederholt sich auf jedem Blatt, Zeilen werden nicht getrennt. Die Kopfzeile bekommt eine graue Fläche, die auch ohne die Browsereinstellung „Hintergrundgrafiken“ mitgedruckt wird. ------------------------------------------------------------------ */ table, .awg, .spec-table { width: 100%; margin: 2mm 0 4mm; border-collapse: collapse; font-variant-numeric: tabular-nums; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { break-inside: avoid; page-break-inside: avoid; } th, td, .awg th, .awg td, .spec-table th, .spec-table td { padding: 1.4mm 2mm; border: .5pt solid #9B9B9B; font-size: 9pt; line-height: 1.35; text-align: left; vertical-align: top; color: #000000; } thead th, .awg thead th { font: 600 8.5pt/1.3 var(--display); letter-spacing: 0; text-transform: none; color: #000000; background: #E8E8E8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .spec-table th, .awg td:first-child { width: auto; font: 600 9pt/1.35 var(--display); letter-spacing: 0; text-transform: none; color: #000000; } .spec-table tr:last-child th, .spec-table tr:last-child td, .awg tbody tr:last-child td { border-bottom: .5pt solid #9B9B9B; } .awg tr.hl { background: transparent !important; } .awg tr.hl td:first-child { box-shadow: none !important; } .awg td.muted { color: #666666; } .awg-wrap, .spec-card { overflow: visible !important; margin: 0; padding: 0; border: 0; } .spec-card + .spec-card { margin-top: 3mm; } /* ------------------------------------------------------------------ 10 · FAQ und Glossar Auf Papier gibt es kein Aufklappen. Jede Antwort steht sichtbar unter ihrer Frage, auch wenn das <details> im Browser zu war. ------------------------------------------------------------------ */ details, .faq details { display: block; margin: 0 0 3mm; padding: 0; border: 0; border-radius: 0; } details::details-content { content-visibility: visible !important; block-size: auto !important; height: auto !important; overflow: visible !important; } details:not([open]) > *:not(summary) { display: block !important; } details > summary, .faq summary { display: block; padding: 0 0 1mm; font: 600 10.5pt/1.35 var(--display); color: #000000; list-style: none; cursor: auto; } details > summary::-webkit-details-marker { display: none; } .faq { display: block; } .faq p, .faq .ans p, .faq .ans li { padding: 0; margin: 0 0 2mm; font-size: 10pt; line-height: 1.5; } .faq .ans ul, .faq .ans ol { margin: 0 0 2mm; padding-left: 5mm; } .faq-cat { margin-top: 5mm; } .gloss > div { padding: 0 0 2mm; margin: 0 0 2mm; border: 0; border-bottom: .5pt solid #C7C7C7; } .gloss dt { font: 600 10pt/1.3 var(--display); } .gloss dt small { display: inline; margin-left: 2mm; font: 500 7.5pt/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #444444; } .gloss dd { margin: .5mm 0 0; font-size: 9.5pt; line-height: 1.45; } /* ------------------------------------------------------------------ 11 · Kennzahlen, Bilder, Beschriftungen ------------------------------------------------------------------ */ .d-facts { margin: 3mm 0; padding: 0; } .d-facts > div { display: block; margin: 0 0 1.5mm; padding: 0; border: 0; } .d-facts dt { display: block; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #444444; } .d-facts dd { display: block; margin: 0 0 1mm; font-size: 11pt; letter-spacing: 0; } figure { margin: 3mm 0; padding: 0; border: 0; break-inside: avoid; page-break-inside: avoid; } img { max-width: 100%; height: auto; } .prose figure img, figure img { max-height: 70mm; width: auto; border-radius: 0; } figcaption, .prose figcaption { padding: 1mm 0 0; font: 400 8pt/1.4 var(--display); letter-spacing: 0; color: #333333; } address { font-style: normal; font-size: 9.5pt; line-height: 1.5; } /* ------------------------------------------------------------------ 12 · Verweise als ausgeschriebene Adresse Auf Papier ist ein Verweis nur dann etwas wert, wenn die Adresse dabeisteht. Anker auf derselben Seite und Verweise ohne eigenen Text bekommen nichts, sonst stünde überall Klammerwerk. ------------------------------------------------------------------ */ a { color: #000000; text-decoration: underline; text-underline-offset: 2px; } .prose a[href^="http"]::after, .gloss a[href^="http"]::after, .faq a[href^="http"]::after, .d-text a[href^="http"]::after, p a[href^="http"]::after, li a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 8pt/1.3 var(--mono); word-break: break-all; color: #333333; } .prose a[href^="/"]::after, .gloss a[href^="/"]::after, .faq a[href^="/"]::after, .d-text a[href^="/"]::after, p a[href^="/"]::after, li a[href^="/"]::after { content: " (powertune.de" attr(href) ")"; font: 400 8pt/1.3 var(--mono); word-break: break-all; color: #333333; } a[href^="#"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="javascript:"]::after { content: none; } /* ------------------------------------------------------------------ 13 · Umbrüche ------------------------------------------------------------------ */ h1, h2, h3, .h1, .h2, .h3, .eyebrow, .faq-cat, summary { break-after: avoid; page-break-after: avoid; } figure, .gloss > div, .spec-card, details, .note-box, .d-facts > div { break-inside: avoid; page-break-inside: avoid; } section, article { break-before: auto; page-break-before: auto; } }

/* Powertune · Designentwurf v3 · Druckfassung (Wunsch 23, freigegeben am 20.09.2026) ================================================================================== Aus der Website wird auf Papier ein Datenblatt: Kopfzeile mit Firma und Seitentitel, schwarze Schrift auf Weiß, saubere Tabellen, Fußzeile mit der Quelladresse und der Anschrift. Keine Navigation, keine Bedienelemente, keine 3D-Leinwände, keine Schatten und Verläufe. Verweise stehen als ausgeschriebene Adresse dahinter, damit sie in der Projektakte noch etwas wert sind. Warum alles in @media print steht Die Datei wird mit media="print" eingebunden. Trotzdem steht jede Regel noch einmal in @media print. Grund: tools/wp_theme.py liest die Stylesheets aus dem Seitenkopf und meldet sie in WordPress an, ohne das media-Attribut zu übernehmen. So kann die Datei in keinem Fall am Bildschirm wirken. Warum Kopf- und Fußzeile aus und <link rel="canonical"> entstehen Diese Datei darf nur CSS mitbringen, kein JavaScript. Der Seitentitel steht im <title>, die Quelladresse im Canonical-Verweis. Beide werden für den Druck sichtbar gemacht: Der <head> wird zum Kopfblock des Dokuments, dazu kommt über head::before der Firmenname. Warum der Kopfblock im Textfluss steht und nicht fest im Seitenrand Geprüft am 20.09.2026: Chrome wiederholt feste Elemente (position:fixed) beim Drucken NICHT auf jedem Blatt und stellt sie auch nicht in den Seitenrand, sondern setzt sie irgendwo in den Fluss. Eine laufende Kopfzeile auf jedem Blatt gibt es deshalb nur mit JavaScript oder einem Satzprogramm. Was auf jedem Blatt steht, liefert der Browser selbst: Chrome druckt mit der Einstellung „Kopf- und Fußzeilen“ (ab Werk an) Datum und Titel oben, Quelladresse und Blattzahl unten. Unser Kopfblock nennt Firma, Titel und Quelle noch einmal ausdrücklich, damit das Blatt auch ohne diese Einstellung zuzuordnen ist. Das Druckdatum kann CSS nicht erzeugen, es kommt aus der Kopfzeile des Browsers. Geprüft am 20.09.2026 mit der Druckausgabe von Chrome (A4) an einem Fachartikel, der AWG-Tabelle, dem Wissens-Hub (FAQ und Glossar) und einer Leistungsseite. */ @media print { /* ------------------------------------------------------------------ 1 · Seitenformat Oben und unten bleibt Rand für die laufende Kopf- und Fußzeile frei. ------------------------------------------------------------------ */ @page { size: A4 portrait; margin: 16mm 15mm 16mm; } /* ------------------------------------------------------------------ 2 · Ruhe: nichts bewegt sich, nichts glänzt, nichts ist dunkel Hintergrundflächen und Verläufe fallen weg. Chrome druckt sie ohne die Einstellung „Hintergrundgrafiken“ ohnehin nicht; mit der Einstellung käme sonst eine schwarze Seite heraus. ------------------------------------------------------------------ */ *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: none !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; text-wrap: auto; } html.js .reveal { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------------ 3 · Farbwerte für Papier Die Seite arbeitet durchgehend mit Eigenschaften aus core.css. Werden sie umgesetzt, druckt jeder Baustein schwarz auf weiß, ohne dass jede Regel einzeln überschrieben werden muss. Aufgeführt sind alle Stellen, die die Werte selbst noch einmal setzen (helle Abschnitte, Karten). ------------------------------------------------------------------ */ html:root, .bg-deep, .bg-deep-2, .bg-paper, .bg-paper-2, .bg-white, .apply-card, .spec-card, .d-hero, .p-hero, .nf { --bg: #FFFFFF; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --line: #C7C7C7; --line-2: #9B9B9B; --text: #000000; --text-2: #222222; --text-3: #444444; --light: #FFFFFF; --ink: #000000; --ink-2: #222222; --fg: #000000; --fg-2: #222222; --fg-3: #444444; --card: #FFFFFF; --card-2: #FFFFFF; --card-line: #C7C7C7; --btn-bg: #FFFFFF; --btn-fg: #000000; --accent: #000000; --glow: transparent; --ok: #000000; --hdr: 0px; --gutter: 0mm; --wrap: 100%; --r-xl: 0; --r-lg: 0; --r-md: 0; --r-sm: 0; } /* ------------------------------------------------------------------ 4 · Grundschrift ------------------------------------------------------------------ */ html, body { background: #FFFFFF !important; color: #000000 !important; } body { margin: 0; font: 400 10.5pt/1.5 var(--display); font-variation-settings: "wdth" 100; -webkit-print-color-adjust: economy; print-color-adjust: economy; } main, article, section, .wrap, .sec { max-width: none; padding-left: 0; padding-right: 0; } .sec, .d-quote { padding-top: 0; padding-bottom: 6mm; } .p-hero, .d-hero, .art-hero { padding: 0 0 5mm; overflow: visible; } .stack-top { margin-top: 4mm; } /* ------------------------------------------------------------------ 5 · Was nicht auf Papier gehört Navigation, Bedienelemente, 3D-Leinwände, Werbeflächen und alles, was nur auf dem Bildschirm eine Aufgabe hat. ------------------------------------------------------------------ */ .hdr, .ftr, .drawer, .scrim, .skip, .d-sub, .pal, .toast, .lang-hint, .lang-wrap, .lang-pop, .cc, .cc-scrim, .kb, .crumbs, .art-toc, .gloss-az, .filters, .legal-nav, .hero-actions, .btn, .link, .arr, .i-ext, .card.spot, button, input, select, textarea, output, form, label, canvas, video, audio, iframe, .fab, .d-hero-media, .d-ico, .ico-tile, .d-ico-tile, .art-fig, .awg-tool, .d-gal, .news-list, .news-img, .d-rel, .d-more, .d-cta, .d-cta-grid, .art-links, .art-tags, .apply-card, .map-frame, .map-actions, .awg-info, .eyebrow::before, .faq summary::after, .note-box::before { display: none !important; } /* Abschnitte, in denen nach dem Aufräumen nur noch eine Überschrift stünde (Bildergalerie, Kachelreihen mit weiteren Artikeln), fallen ganz weg. .d-rel ist die Reihe „Weitere Leistungen“ bzw. „Weitere Branchen“ am Ende jeder Leistungs- und Branchenseite. Ohne diese Zeile blieb dort auf Papier die Überschrift „Alles aus einer Hand.“ ohne Inhalt stehen (geprüft am 20.09.2026 an leistung-kabelkonfektion und branche-automobil). */ section:has(> .wrap > .d-gal), section:has(> .wrap > .news-list), section:has(> .wrap > .d-rel), section:has(> .wrap > .d-cta-grid) { display: none !important; } /* ------------------------------------------------------------------ 6 · Kopfblock und Fußzeile des Datenblatts Der <head> steht im Dokument vor dem <body>. Als Block gesetzt wird er zum Kopf des Datenblatts: Firmenname, Titel der Seite, Quelladresse. Alles andere im Kopf (meta, script, style, die übrigen Verweise) bleibt unsichtbar, dafür sorgt der Browser selbst. ------------------------------------------------------------------ */ head { display: block; margin: 0 0 6mm; padding: 0 0 2mm; border-bottom: .75pt solid #000000; } head::before { content: "Powertune Spezialkabelsysteme GmbH & Co. KG · Datenblatt"; display: block; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #333333; } head > title { display: block; margin: 1.5mm 0 0; font: 600 12pt/1.3 var(--display); color: #000000; } head > link[rel="canonical"] { display: block; margin: 1mm 0 0; font: 400 7.5pt/1.4 var(--mono); color: #333333; word-break: break-all; } head > link[rel="canonical"]::before { content: "Quelle: " attr(href); } body::after { content: "Powertune Spezialkabelsysteme GmbH & Co. KG · Johann-Adam-Kleinschroth-Str. 10 · 97318 Kitzingen · Tel. +49 9321 3924811 · info@powertune.de · powertune.de"; display: block; margin: 6mm 0 0; padding: 2mm 0 0; border-top: .75pt solid #000000; font: 400 7.5pt/1.5 var(--display); color: #333333; break-inside: avoid; page-break-inside: avoid; } /* ------------------------------------------------------------------ 7 · Einspaltig Alle Raster der Website werden auf eine Spalte gelegt. Auf Papier gibt es keine Seitenspalte und keine Karten nebeneinander. ------------------------------------------------------------------ */ .art-grid, .d-over, .d-lst, .d-faq, .d-all, .head, .job-layout, .kt-grid, .grid-2, .grid-3, .grid-4, .gloss, .d-facts, .d-hero-grid, .perks, .chips { display: block !important; gap: 0 !important; } .art-aside, .kt-side, .d-hero-copy { position: static !important; width: auto; } /* Fehlerseite: auf Papier ohne Bildschirmhöhe und ohne Mittigkeit */ .nf { display: block; min-height: 0; padding: 0; text-align: left; } .nf-fig { width: 70mm; margin: 0 0 3mm; } .nf-links { display: block; margin: 3mm 0 0; } .nf-links li { display: inline; margin-right: 5mm; } .prose, .d-text p, .lead, .faq p, .note-box { max-width: none; } /* ------------------------------------------------------------------ 8 · Überschriften und Fließtext Die Schriftgrößen der Website rechnen mit der Fensterbreite. Auf Papier gibt es keine Fensterbreite, deshalb feste Punktgrößen. ------------------------------------------------------------------ */ .h1, .art-h1, h1, .p-hero .h1, .p-hero .art-h1, .d-hero .h1, .nf .h1 { margin: 0 0 3mm; font-size: 19pt; line-height: 1.15; letter-spacing: -.02em; max-width: none; } .tag, .chip { border-radius: 0; padding: .5mm 1.5mm; font-size: 8pt; } .h2, .prose h2, h2 { margin: 6mm 0 2mm; font-size: 13pt; line-height: 1.25; letter-spacing: -.01em; break-after: avoid; page-break-after: avoid; } .h3, .prose h3, .faq-cat, h3 { margin: 4mm 0 1.5mm; font-size: 11pt; line-height: 1.3; break-after: avoid; page-break-after: avoid; } .eyebrow, .num, .meta { margin: 0 0 1mm; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #444444; } .meta { text-transform: none; letter-spacing: .04em; } .meta > * { margin-right: 4mm; } .lead, .prose > p:first-child, .d-text p:first-child { margin: 0 0 3mm; font: 400 11pt/1.5 var(--display); letter-spacing: 0; color: #000000; } p, li, dd, dt, td, th, address, blockquote { color: #000000; orphans: 3; widows: 3; } .prose p, .d-text p { margin: 0 0 3mm; font-size: 10.5pt; line-height: 1.55; } .prose ul, .prose ol { margin: 0 0 3mm; padding-left: 5mm; } .prose li, .check li, .d-list li, .bullets li { font-size: 10.5pt; line-height: 1.45; margin: 0 0 1mm; } .d-list, .check { display: block; } .d-list li, .check li { display: list-item; list-style: square outside; margin-left: 5mm; padding: 0; border: 0; font-weight: 400; } .d-list li::before, .check li::before { content: none; display: none; } /* Aufzählungen, deren Punkt am Bildschirm ein Kästchen mit Hintergrundfarbe ist (.d-text ul auf den Leistungs- und Branchenseiten, .bullets auf den Stellen- seiten, .perks auf der Karriereseite). Abschnitt 2 nimmt jeder Fläche den Hintergrund, sonst stünden die Punkte ohne Marke und in Bildschirmgröße da. Sie werden deshalb wie .d-list zu echten Listen mit Quadratmarke. Geprüft am 20.09.2026 an leistung-kabelkonfektion, stelle-konstrukteur und karriere: vorher 17 px ohne Marke, danach 10,5 pt mit Quadrat. */ .d-text ul, .bullets { display: block; margin: 0 0 3mm; padding-left: 5mm; } .d-text ul li, .bullets li, .perks li { display: list-item; list-style: square outside; max-width: none; margin: 0 0 1mm; padding: 0; border: 0; font-size: 10.5pt; line-height: 1.45; font-weight: 400; } .perks li { margin-left: 5mm; } .d-text ul li::before, .bullets li::before, .perks li::before { content: none; display: none; } .note-box { display: block; margin: 3mm 0; padding: 2mm 3mm; border: .5pt solid #9B9B9B; border-radius: 0; font-size: 9.5pt; line-height: 1.45; } .d-quote blockquote { margin: 0; padding: 0; border: 0; } .d-quote p { font-size: 11pt; line-height: 1.4; letter-spacing: 0; } .d-quote footer { margin-top: 1mm; font-size: 8pt; } /* ------------------------------------------------------------------ 9 · Tabellen Der eigentliche Nutzen auf Papier: AWG-Tabelle, Merkmale, Kenndaten. Der Tabellenkopf wiederholt sich auf jedem Blatt, Zeilen werden nicht getrennt. Die Kopfzeile bekommt eine graue Fläche, die auch ohne die Browsereinstellung „Hintergrundgrafiken“ mitgedruckt wird. ------------------------------------------------------------------ */ table, .awg, .spec-table { width: 100%; margin: 2mm 0 4mm; border-collapse: collapse; font-variant-numeric: tabular-nums; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { break-inside: avoid; page-break-inside: avoid; } th, td, .awg th, .awg td, .spec-table th, .spec-table td { padding: 1.4mm 2mm; border: .5pt solid #9B9B9B; font-size: 9pt; line-height: 1.35; text-align: left; vertical-align: top; color: #000000; } thead th, .awg thead th { font: 600 8.5pt/1.3 var(--display); letter-spacing: 0; text-transform: none; color: #000000; background: #E8E8E8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .spec-table th, .awg td:first-child { width: auto; font: 600 9pt/1.35 var(--display); letter-spacing: 0; text-transform: none; color: #000000; } .spec-table tr:last-child th, .spec-table tr:last-child td, .awg tbody tr:last-child td { border-bottom: .5pt solid #9B9B9B; } .awg tr.hl { background: transparent !important; } .awg tr.hl td:first-child { box-shadow: none !important; } .awg td.muted { color: #666666; } .awg-wrap, .spec-card { overflow: visible !important; margin: 0; padding: 0; border: 0; } .spec-card + .spec-card { margin-top: 3mm; } /* ------------------------------------------------------------------ 10 · FAQ und Glossar Auf Papier gibt es kein Aufklappen. Jede Antwort steht sichtbar unter ihrer Frage, auch wenn das <details> im Browser zu war. ------------------------------------------------------------------ */ details, .faq details { display: block; margin: 0 0 3mm; padding: 0; border: 0; border-radius: 0; } details::details-content { content-visibility: visible !important; block-size: auto !important; height: auto !important; overflow: visible !important; } details:not([open]) > *:not(summary) { display: block !important; } details > summary, .faq summary { display: block; padding: 0 0 1mm; font: 600 10.5pt/1.35 var(--display); color: #000000; list-style: none; cursor: auto; } details > summary::-webkit-details-marker { display: none; } .faq { display: block; } .faq p, .faq .ans p, .faq .ans li { padding: 0; margin: 0 0 2mm; font-size: 10pt; line-height: 1.5; } .faq .ans ul, .faq .ans ol { margin: 0 0 2mm; padding-left: 5mm; } .faq-cat { margin-top: 5mm; } .gloss > div { padding: 0 0 2mm; margin: 0 0 2mm; border: 0; border-bottom: .5pt solid #C7C7C7; } .gloss dt { font: 600 10pt/1.3 var(--display); } .gloss dt small { display: inline; margin-left: 2mm; font: 500 7.5pt/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #444444; } .gloss dd { margin: .5mm 0 0; font-size: 9.5pt; line-height: 1.45; } /* ------------------------------------------------------------------ 11 · Kennzahlen, Bilder, Beschriftungen ------------------------------------------------------------------ */ .d-facts { margin: 3mm 0; padding: 0; } .d-facts > div { display: block; margin: 0 0 1.5mm; padding: 0; border: 0; } .d-facts dt { display: block; font: 500 7.5pt/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #444444; } .d-facts dd { display: block; margin: 0 0 1mm; font-size: 11pt; letter-spacing: 0; } figure { margin: 3mm 0; padding: 0; border: 0; break-inside: avoid; page-break-inside: avoid; } img { max-width: 100%; height: auto; } .prose figure img, figure img { max-height: 70mm; width: auto; border-radius: 0; } figcaption, .prose figcaption { padding: 1mm 0 0; font: 400 8pt/1.4 var(--display); letter-spacing: 0; color: #333333; } address { font-style: normal; font-size: 9.5pt; line-height: 1.5; } /* ------------------------------------------------------------------ 12 · Verweise als ausgeschriebene Adresse Auf Papier ist ein Verweis nur dann etwas wert, wenn die Adresse dabeisteht. Anker auf derselben Seite und Verweise ohne eigenen Text bekommen nichts, sonst stünde überall Klammerwerk. ------------------------------------------------------------------ */ a { color: #000000; text-decoration: underline; text-underline-offset: 2px; } .prose a[href^="http"]::after, .gloss a[href^="http"]::after, .faq a[href^="http"]::after, .d-text a[href^="http"]::after, p a[href^="http"]::after, li a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 8pt/1.3 var(--mono); word-break: break-all; color: #333333; } .prose a[href^="/"]::after, .gloss a[href^="/"]::after, .faq a[href^="/"]::after, .d-text a[href^="/"]::after, p a[href^="/"]::after, li a[href^="/"]::after { content: " (powertune.de" attr(href) ")"; font: 400 8pt/1.3 var(--mono); word-break: break-all; color: #333333; } a[href^="#"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="javascript:"]::after { content: none; } /* ------------------------------------------------------------------ 13 · Umbrüche ------------------------------------------------------------------ */ h1, h2, h3, .h1, .h2, .h3, .eyebrow, .faq-cat, summary { break-after: avoid; page-break-after: avoid; } figure, .gloss > div, .spec-card, details, .note-box, .d-facts > div { break-inside: avoid; page-break-inside: avoid; } section, article { break-before: auto; page-break-before: auto; } }