/* ==========================================================================
   vioma.de: Druck-/PDF-Version
   Wird mit media="print" geladen, style.css und specials.css nur mit
   media="not print" (2421.xsl). Beim Drucken gilt also nur diese Datei.
   Ziel: weißer Hintergrund, schwarzer Text, gleiche Reihenfolge und Logik wie
   auf der Website. Inline-Styles aus dem Inhalt (FAQ im Inhalt, Seiten-CSS im
   Footer-Bereich) bleiben aktiv und werden hier nur wo nötig überschrieben,
   deshalb haben diese Regeln ein #site davor.
   ========================================================================== */

@page {
	size: A4;
	margin: 16mm 15mm 18mm;
}

/* Wie fonts.less (latin) */
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts-api.viomassl.com/fonts/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts-api.viomassl.com/fonts/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Werte, die Inline-Styles der Seite erwarten (sonst aus style.css) */
	--template-color-ink: #000;
	--template-color-accent: #000;
	--template-color-white: #000;
	--font-family-icons: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro', sans-serif;
	--line: #c8cdd2;
}

html {
	font-size: 10.5pt;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

body {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- Nicht drucken ---------- */

/* #footer: darin liegendes Seiten-CSS (<style>) wirkt trotzdem weiter */
#header,
.spotlights,
#footer,
#condeon-consentmanager,
#condeon-consentmanager-backdrop,
.cookiefirst-root,
.vio,
#globalalert,
.hl__part--whobble,
.v-faq__sign,
noscript {
	display: none !important;
}

.visuallyhidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Druckkopf ---------- */

.print-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 2em;
	padding-bottom: .75em;
	border-bottom: 1px solid #000;
}

.print-head__logo {
	display: block;
	width: 7.5em;
	height: auto;
}

.print-head__url {
	font-size: .8em;
	overflow-wrap: anywhere;
	text-align: right;
}

/* ---------- Grundtypo ---------- */

p,
ul,
ol {
	margin: 0 0 1em;
}

ul,
ol {
	padding-left: 1.4em;
}

li {
	margin-bottom: .3em;
}

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}

strong,
b {
	font-weight: 700;
}

img {
	max-width: 100%;
	height: auto;
}

/* Farbige Inline-Styles aus dem Editor (z. B. Orange, weißer Link) auf Schwarz */
main [style*="color"] {
	color: #000 !important;
}

main > .grp {
	margin: 0 0 2.5em;
}

/* ---------- Headlines (wie Website: Versalien, normaler Teil leicht, <strong>-Teil fett) ---------- */

.hl__anchor {
	display: block;
	margin: 0 0 1em;
	color: inherit;
	text-decoration: none;
	break-after: avoid;
	page-break-after: avoid;
}

.hl__anchor + * {
	margin-top: 0;
}

.hl {
	margin: 0;
	color: #000;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	break-after: avoid;
	page-break-after: avoid;
}

h1.hl {
	font-size: 1.75em;
	font-weight: 800;
}

h2.hl {
	font-size: 1.5em;
}

h3.hl {
	font-size: 1.25em;
}

main :is(h2, h3) {
	text-transform: uppercase;
}

.hl__part--big,
.hl__part--small {
	display: block;
}

.hl__part--big strong {
	font-size: var(--_hl-strong-fontsize, 1.6em);
	font-weight: 800;
}

.hl__part--small {
	margin-top: .3em;
	font-size: .5em;
	font-weight: 600;
	line-height: 1.6;
}

/* Seiten-CSS setzt #site h1 small auf Weiß */
#site .hl .hl__part--small {
	color: #000;
}

.hl__part--small:empty {
	display: none;
}

/* Linie zwischen Haupt- und Unterzeile */
.hl__part--arrow {
	display: block;
	height: 0;
	margin: .45em 0 .6em;
	border-top: 2px solid #000;
}

/* ---------- CTAs ---------- */

.cta {
	display: inline-block;
	margin: 0 .5em .5em 0;
	padding: .35em 1.1em;
	border: 1px solid #000;
	border-radius: 2em;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}

/* ---------- Akkordeons immer offen ---------- */

details::details-content {
	display: block;
	content-visibility: visible;
}

details > summary {
	list-style: none;
}

details > summary::-webkit-details-marker {
	display: none;
}

.nst21-accordion-box {
	display: block !important;
	height: auto !important;
}

/* ---------- FAQ-Block im Inhalt (.v-faq, Inline-CSS im Inhalt) ---------- */

#site .v-faq {
	--vf-brand: #000;
	--vf-line: var(--line);
	--vf-muted: #000;
	margin: 0;
}

#site .v-faq .v-faq__btn,
#site .v-faq .v-faq__btn--primary {
	display: inline-block;
	padding: .35em 1em;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	text-align: left;
}

#site .v-faq .v-faq__ctb {
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 2em;
}

#site .v-faq .v-faq__panel {
	gap: 1.5em;
	margin-bottom: 2.5em;
}

#site .v-faq .v-faq__col {
	padding: 1.4em 1.5em;
	border-radius: 0;
}

#site .v-faq .v-faq__col--done {
	background: #fff;
	border: 1px solid var(--line);
}

#site .v-faq .v-faq__col--todo {
	background: #fff;
	color: #000;
	border: 2px solid #000;
}

#site .v-faq .v-faq__col--todo .v-faq__rows li {
	border-color: var(--line);
}

/* Nummernspalte bleibt wie auf der Website unsichtbar, Frage bündig mit der Antwort */
#site .v-faq .v-faq__item summary {
	grid-template-columns: 0 minmax(0, 1fr);
	gap: 0;
	padding: 1em 0 .6em;
	cursor: auto;
	break-after: avoid;
	page-break-after: avoid;
}

#site .v-faq .v-faq__answer {
	padding: 0 0 1.4em;
}

#site .v-faq .v-faq__dash li::before {
	background: #000;
}

/* ---------- Seiten-CSS im Footer-Bereich (Verlauf, Kontakt) ----------
   Es steht im HTML nach dieser Datei, daher hier mit "main >" spezifischer. */

#site main > [data-attr-notiz="Updates"] {
	max-width: none;
	padding-top: 0;
}

#site main > [data-attr-notiz="Updates"] > .grp-mem {
	padding: 1.2em 1.5em;
	break-inside: avoid;
	page-break-inside: avoid;
	outline: 1px solid var(--line);
	outline-offset: -1px;
}

/* Link-Icon: auf Papier ohne Funktion */
#site main > [data-attr-notiz="Updates"] .grp-mem a:not([class])::before {
	content: none;
}

#site main > [data-attr-sprungmarke="support"] {
	max-width: none;
	margin-bottom: 0;
	padding: 1.2em 1.5em;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 1em solid #000;
	break-inside: avoid;
	page-break-inside: avoid;
}