/*
Theme Name: Vincent Teichmann CV
Theme URI: https://example.com/vt-cv
Author: Auftritt und Erfolg
Author URI: https://example.com
Description: Discreet interactive one-page CV. Warm premium dark, amber accent, serif display. Built on a lock-in-free full-site-editing block theme. Bespoke evidence-jump interaction and click-to-reveal contact, all progressive enhancement.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.65.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vt-cv
Tags: full-site-editing, block-patterns, portfolio, one-page
*/

/* ==================================================================
 * DESIGN TOKENS (warm premium dark)
 * ================================================================== */
:root {
	--vt-base: #0E0C09;
	--vt-base-rgb: 14, 12, 9;
	--vt-fade: 120px;
	--vt-ink: #080705;
	--vt-surface: #17130D;
	--vt-surface-2: #1F1A12;
	--vt-text: #F3ECDF;
	--vt-muted: #B0A48F;
	--vt-line: #322A1E;
	--vt-accent: #D9A441;
	--vt-accent-2: #E9C173;
	--vt-accent-soft: rgba(217, 164, 65, 0.14);
	--vt-accent-line: rgba(217, 164, 65, 0.40);
	--vt-accent-glow: rgba(217, 164, 65, 0.55);
	--vt-maxw: 1180px;
	--vt-read: 760px;
}

/* ==================================================================
 * STRUCTURE (kept from starter): sticky header, no horizontal scroll,
 * seamless top-level sections. Dark base removes any white-stripe risk.
 * ================================================================== */
html, body { overflow-x: clip; }

/* Der Header ist sticky - jedes Sprungziel muss um seine Hoehe tiefer landen,
   sonst verschwindet die Ueberschrift darunter. reveal.js misst ihn und
   schreibt --vt-header-h hierher; der Wert unten ist die Vorgabe, bis das
   Skript zum ersten Mal gelaufen ist, und der Wert im Site-Editor.

   scroll-padding-top am WURZELELEMENT statt scroll-margin-top an einer Liste
   von Zielklassen: so gilt der Versatz fuer jedes Ziel, auch fuer solche, die
   spaeter dazukommen und die man in einer Liste zu ergaenzen vergaesse. Damit
   landen vor allem die sechs nativen Anker der Kopfnavigation richtig - die
   hatten bisher gar keinen Versatz und sprangen unter den Header.

   scroll-behavior gilt ebenfalls global, damit ein nativer Anker genauso weich
   laeuft wie die Spruenge aus vt-cv.js. Kollision gibt es keine: die Aufrufe
   dort uebergeben behavior ausdruecklich, und das gewinnt gegen diese Regel. */
:root {
	--vt-header-h: 64px;
	scroll-padding-top: calc(var(--vt-header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull,
.wp-block-image.alignfull,
.ae-site-footer {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Sticky header lives on the template-part wrapper (long sticky track). */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(> .ae-site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
.ae-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(14, 12, 9, 0.78) !important;
	backdrop-filter: saturate(1.1) blur(10px);
	-webkit-backdrop-filter: saturate(1.1) blur(10px);
	/* Ohne padding: der Header ist sticky, sein Innenabstand gehoert also zur
	   Hoehe im normalen Fluss. Ueber 0,3 s animiert, hiesse das rund 18 Frames
	   Neuberechnung des gesamten Dokuments - ausgeloest bei scrollY > 8, also
	   genau zu Beginn jedes Sprungs.

	   Inzwischen wechselt der Header seine Hoehe ueberhaupt nicht mehr: er
	   verschlankte sich im gescrollten Zustand um 9,6 px, und weil jeder Sprung
	   von ganz oben genau diese Schwelle ueberquert, schrumpfte er MITTEN im
	   Sprung. Der Versatz, mit dem das Ziel berechnet wurde, war beim Ankommen
	   also nicht mehr der gueltige - das Ziel landete daneben.

	   Erwogen und verworfen: den Endzustand vorab zu messen (setzt .is-scrolled
	   probeweise, erzwingt einen Reflow mitten im Klick und liegt trotzdem
	   falsch, wenn ein Sprung innerhalb der ersten 8 px endet) und den
	   Unterschied herauszurechnen (fuehrte den Sonderfall an fuenf
	   Aufrufstellen). Eine feste Hoehe behebt es an allen Stellen zugleich und
	   ist ueberhaupt erst die Voraussetzung dafuer, dass --vt-header-h waehrend
	   eines laufenden Sprungs noch gilt. Schatten und Farbe blenden weiterhin
	   weich, das Mitlaufen bleibt also sichtbar. */
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.ae-site-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(217, 164, 65, 0.10), 0 14px 34px -16px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
	.ae-site-header { transition: none; }
}

/* Header section-jump nav. */
.vt-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.9vw, 1.6rem);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.vt-nav::-webkit-scrollbar { display: none; }
.vt-nav a {
	color: var(--vt-muted);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	padding: 0.3rem 0;
	transition: color 0.2s ease;
}
.vt-nav a:hover, .vt-nav a:focus-visible {
	color: var(--vt-accent);
	outline: none;
}

.vt-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: auto;
	font-family: Figtree, sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
	color: var(--vt-accent-contrast, #100D08);
	background: linear-gradient(135deg, var(--vt-accent-2), var(--vt-accent));
	border-radius: 10px;
	padding: 0.6rem 1.2rem;
	box-shadow: 0 12px 28px -14px var(--vt-accent-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vt-nav-cta:hover,
.vt-nav-cta:focus-visible {
	transform: translateY(-1px);
	color: var(--vt-accent-contrast, #100D08);
	box-shadow: 0 16px 34px -12px var(--vt-accent-glow);
	outline: none;
}
.vt-nav a.vt-nav-cta--menu { display: none; }

/* Mobile: burger toggle + collapsible dropdown nav. */
.vt-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}
.vt-nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--vt-text);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.vt-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vt-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vt-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Narrow desktop: trim the nav so the last label is not cut off. */
@media (min-width: 701px) and (max-width: 1120px) {
	.vt-nav { gap: 0.7rem; }
	.vt-nav a { font-size: 0.78rem; }
	.vt-nav-cta--header { font-size: 0.78rem; padding: 0.55rem 1rem; }
}

@media (max-width: 700px) {
	.vt-nav-toggle { display: flex; }
	.vt-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--vt-surface);
		border-bottom: 1px solid var(--vt-line);
		box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.7);
		transition: max-height 0.3s ease;
	}
	.vt-nav.is-open { max-height: 440px; }
	.vt-nav a {
		width: 100%;
		padding: 0.9rem 1.25rem;
		border-top: 1px solid var(--vt-line);
		font-size: 0.95rem;
	}
	.vt-nav a:first-child { border-top: none; }
	.vt-nav-cta--header { display: none; }
	.vt-nav a.vt-nav-cta--menu {
		display: inline-flex;
		width: auto;
		margin: 1rem 1.25rem 1.2rem;
		padding: 0.85rem 1.4rem;
		border-top: none;
		color: var(--vt-accent-contrast, #100D08);
		font-size: 0.95rem;
	}
}

/* No top-level block gap (no stray background showing through seams). */
.wp-site-blocks > * { margin-block: 0 !important; }
main.wp-block-group {
	margin-block: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.wp-block-post-content { margin-block: 0 !important; }
.wp-block-post-content > :not(.ae-mobilebar),
main > :not(.ae-mobilebar) { margin-top: 0 !important; margin-bottom: 0 !important; position: relative; }
.ae-site-footer { margin-top: 0 !important; }

/* Raw <section> blocks (wp:html) are NOT auto full-bleed inside constrained
 * post-content. Force a 100vw breakout with !important so the constrained
 * child rule cannot clamp them.
 *
 * AUSDRUECKLICH NUR FUER DEN BILDSCHIRM. Im Druck ist 100vw die SEITENbreite:
 * global gestellt machte diese Regel jeden Abschnitt 210 mm breit und schob
 * ihn nach links, sodass alle rechtsbuendigen Angaben - saemtliche Zeitraeume
 * und die Abschlussnoten - aus der Seite fielen. Die Gegenregel im Druckblock
 * nannte nur den alten Selektor und griff nach dem Einzug der Huellen nicht
 * mehr. @media screen schliesst das aus, statt zwei Selektorlisten synchron
 * halten zu muessen.
 *
 * .vt-print-zelle steht mit in der Liste, weil vt-cv.js die Abschnitte fuer
 * die Druckfassung in drei Huellen legt - ohne die Zeile schnurrt die
 * Bildschirmansicht unterhalb des Kopfbereichs auf die 820 px Inhaltsbreite
 * zusammen, die WordPress dem Beitragsinhalt gibt. */
@media screen {
	.wp-block-post-content > .vt-section,
	.wp-block-post-content > section.vt-section,
	.vt-print-zelle > .vt-section {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
}
/* Disable the global 36px inherit-blend on our sections; seams are handled
 * by per-section background-image masks that fade into --vt-base. */
.wp-block-post-content > .vt-section::before,
.vt-print-zelle > .vt-section::before { content: none !important; }

/* ==================================================================
 * REVEAL (JS-gated, editor-safe). Hidden only when reveal.js set
 * .ae-reveal-on on <html> (frontend only). Editor + no-JS show all.
 * ================================================================== */
/* Kein will-change: die Regel trifft alle 44 Reveal-Elemente der Seite, und da
   .is-visible sie nicht zuruecksetzt, blieben alle 44 dauerhaft als eigene
   Compositor-Ebene im Speicher. Opacity- und Transform-Uebergaenge werden
   ohnehin von selbst auf den Compositor gehoben, sobald sie starten. */
.ae-reveal-on .ae-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ae-reveal-on .ae-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ae-reveal-on .ae-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==================================================================
 * GLOBAL TYPE / LINKS
 * ================================================================== */
body { background-color: var(--vt-base); color: var(--vt-text); }
.vt-header .wp-block-site-title a { text-decoration: none; color: var(--vt-text); }
/* The header bar spans the viewport: the constrained layout would otherwise cap
   its row at the 820px content size and centre it. The inline padding replaces
   the global one so the name and CTA line up with the sections below. */
.vt-header.has-global-padding { padding-inline: clamp(1.25rem, 5vw, 4rem); }
.vt-header > .wp-block-group { max-width: none; }
/* Name stays on one line at the far left, CTA stays whole at the far right;
   the nav takes whatever is left between them. */
.vt-header .wp-block-site-title {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ==================================================================
 * SECTION SHELL
 * ================================================================== */
.vt-section, .vt-section *, .vt-section *::before, .vt-section *::after { box-sizing: border-box; }
.vt-section {
	position: relative;
	background-color: var(--vt-base);
	color: var(--vt-text);
	overflow: hidden;
	padding-block: clamp(4.5rem, 8vw, 8.5rem);
	padding-inline: clamp(1.25rem, 5vw, 4rem);
	isolation: isolate;
}
.vt-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.55;
	pointer-events: none;
	/* Support both <div style="background-image:..."> (legacy) and <img> (lazy-loaded):
	 * background-* rules only apply to divs; for <img> use object-fit + sizing. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.vt-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(217, 164, 65, 0.05), transparent 55%),
		linear-gradient(180deg, rgba(8, 7, 5, 0.48), rgba(8, 7, 5, 0.30) 50%, rgba(8, 7, 5, 0.48));
	pointer-events: none;
}
/* Edge fade to base: every section top + bottom resolves to the exact same
 * base colour over a generous band, so neighbouring background images always
 * meet on identical colour and the seam is invisible. Above image + scrim,
 * below the content. */
.vt-section::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(var(--vt-base-rgb), 1) 0, rgba(var(--vt-base-rgb), 0) var(--vt-fade, 120px)),
		linear-gradient(to top, rgba(var(--vt-base-rgb), 1) 0, rgba(var(--vt-base-rgb), 0) var(--vt-fade, 120px));
}
.vt-inner {
	position: relative;
	z-index: 3;
	max-width: var(--vt-maxw);
	margin-inline: auto;
	width: 100%;
}
.vt-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--vt-accent);
	margin: 0 0 1.1rem;
}
.vt-h {
	font-family: Fraunces, Georgia, serif;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--vt-text);
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
}
.vt-lead {
	color: var(--vt-muted);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.7;
	max-width: 60ch;
	margin: 0;
}

/* ==================================================================
 * HERO
 * ================================================================== */
.vt-hero { min-height: 94vh; display: flex; align-items: center; }
/* Wider hero shell so the 1.5x portrait fits next to the SAME-size text column. */
.vt-hero .vt-inner { max-width: 1340px; }
.vt-hero .vt-bg { opacity: 0.68; }
.vt-hero .vt-scrim {
	background:
		radial-gradient(70% 60% at 78% 42%, rgba(217, 164, 65, 0.10), transparent 60%),
		linear-gradient(110deg, rgba(8, 7, 5, 0.85) 0%, rgba(8, 7, 5, 0.55) 45%, rgba(8, 7, 5, 0.25) 100%);
}
.vt-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.vt-hero__name {
	font-family: Fraunces, Georgia, serif;
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--vt-text);
	margin: 0.4rem 0 1.3rem;
	font-size: clamp(3.1rem, 8vw, 6.5rem);
}
.vt-hero__role {
	font-size: clamp(1rem, 1.7vw, 1.6rem);
	color: var(--vt-muted);
	line-height: 1.5;
	margin: 0;
	white-space: nowrap;
}
.vt-hero__role b { color: var(--vt-accent-2); font-weight: 600; }
.vt-portrait {
	position: relative;
	justify-self: center;
	width: min(80%, 420px);
	aspect-ratio: 1 / 1;
	/* Federung in Prozent, damit sie auf jedem Bildschirm gleich wirkt: das
	   Bild ist je nach Breite 320 bis 420 px gross. Ringsum derselbe Wert -
	   nachgemessen beginnt das Haar bei 9,9 % von oben, der Verlauf endet also
	   genau am Haaransatz und ruehrt das Motiv nicht an. */
	--vt-feder: 10%;

	/* Die Haltepunkte des Randverlaufs, einmal abgelegt und in alle vier
	   Verlaufsdefinitionen eingesetzt (zwei Achsen, je Standard- und
	   -webkit-Fassung). Sonst stuende dieselbe Liste viermal in der Datei und
	   liefe beim naechsten Nachjustieren auseinander.

	   Statt zweier Haltepunkte eine S-Kurve nach 3t^2 - 2t^3: an beiden Enden
	   flach, in der Mitte am steilsten. Eine gerade Rampe hat an Anfang und
	   Ende einen Knick im Helligkeitsverlauf, und genau solche Knicke nimmt
	   das Auge als Kante wahr - deshalb wirkte der Uebergang bisher haerter,
	   als er breit ist. */
	--vt-rand-stops:
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0.10) calc(var(--vt-feder) * 0.2),
		rgba(0, 0, 0, 0.35) calc(var(--vt-feder) * 0.4),
		rgba(0, 0, 0, 0.65) calc(var(--vt-feder) * 0.6),
		rgba(0, 0, 0, 0.90) calc(var(--vt-feder) * 0.8),
		rgba(0, 0, 0, 1) var(--vt-feder),
		rgba(0, 0, 0, 1) calc(100% - var(--vt-feder)),
		rgba(0, 0, 0, 0.90) calc(100% - var(--vt-feder) * 0.8),
		rgba(0, 0, 0, 0.65) calc(100% - var(--vt-feder) * 0.6),
		rgba(0, 0, 0, 0.35) calc(100% - var(--vt-feder) * 0.4),
		rgba(0, 0, 0, 0.10) calc(100% - var(--vt-feder) * 0.2),
		rgba(0, 0, 0, 0) 100%;
}
/* Uebernimmt hier die Aufgabe, die auf einer weissen Folie der Schlagschatten
   haette: das Portraet vom Grund abheben. Ein dunkler Schatten waere auf
   rgba(8, 7, 5) nicht wahrnehmbar, und eine ausgefranste Kante wirft ohnehin
   keinen. Zurueckgenommen, damit zwei weiche Effekte nicht diffus wirken. */
.vt-portrait::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	background: radial-gradient(circle at 50% 45%, var(--vt-accent-glow), transparent 62%);
	filter: blur(26px);
	opacity: 0.6;
}
/* Die Maske sitzt am Bild, nicht am Rahmen: am Rahmen wuerde sie die
   ueberstehende Aura (inset: -10%) mit beschneiden.
   Zwei Verlaufsebenen, eine je Achse, als Schnittmenge verrechnet. Versteht
   ein Browser mask-composite nicht, verrechnet er sie als Vereinigung - dann
   franst nur die Ecke leicht aus und das Bild sieht aus wie bisher. Kein
   Bruch, deshalb kein @supports-Zweig. */
.vt-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-mask-image:
		linear-gradient(to bottom, var(--vt-rand-stops)),
		linear-gradient(to right, var(--vt-rand-stops));
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, var(--vt-rand-stops)),
		linear-gradient(to right, var(--vt-rand-stops));
	mask-composite: intersect;
}
.vt-scrollcue {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--vt-muted);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.vt-scrollcue span {
	width: 1px; height: 34px;
	background: linear-gradient(to bottom, var(--vt-accent), transparent);
	animation: vt-cue 2.4s ease-in-out infinite;
	transform-origin: top;
}
@keyframes vt-cue { 0%,100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vt-scrollcue span { animation: none; } }

/* ==================================================================
 * ANSCHREIBEN (core wow: evidence triggers)
 * ================================================================== */
.vt-letter .vt-inner { max-width: var(--vt-read); }
.vt-letter__hint {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--vt-muted);
	font-size: 0.9rem;
	margin: 0 0 2.4rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--vt-line);
	border-radius: 10px;
	background: rgba(217, 164, 65, 0.05);
}
.vt-letter__hint b { color: var(--vt-accent); font-weight: 600; }
.vt-letter p {
	font-size: clamp(1.12rem, 1.5vw, 1.28rem);
	line-height: 1.85;
	color: #E7DECF;
	margin: 0 0 1.7rem;
}
.vt-letter .vt-sign {
	font-family: Fraunces, Georgia, serif;
	font-size: 1.5rem;
	color: var(--vt-text);
	margin-top: 2rem;
}

/* ==================================================================
 * ZEITSTRAHL (timeline of expandable nodes)
 * ================================================================== */
.vt-timeline { position: relative; margin-top: 3rem; padding-left: 2.2rem; }
.vt-timeline::before {
	content: "";
	position: absolute;
	left: 7px; top: 6px; bottom: 6px;
	width: 2px;
	background: linear-gradient(to bottom, var(--vt-accent), rgba(217, 164, 65, 0.12));
}
.vt-node {
	position: relative;
	margin-bottom: 1.1rem;
	border: 1px solid var(--vt-line);
	border-radius: 14px;
	background: rgba(23, 19, 13, 0.72);
	/* Kein eigenes scroll-margin-top mehr: die feste 96 war eine
	   Desktop-Zahl und widersprach auf dem Telefon der tatsaechlich
	   gemessenen Hoehe. Der Versatz kommt jetzt aus scroll-padding-top
	   am :root, siehe ganz oben. */
	transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}
.vt-node::before {
	content: "";
	position: absolute;
	left: -2.2rem; top: 1.7rem;
	width: 16px; height: 16px;
	margin-left: -1px;
	border-radius: 50%;
	background: var(--vt-base);
	border: 2px solid var(--vt-accent);
	box-shadow: 0 0 0 4px rgba(14, 12, 9, 1);
}
.vt-node > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1rem;
	padding: 1.4rem 3rem 1.4rem 1.5rem;
	position: relative;
}
.vt-node > summary::-webkit-details-marker { display: none; }
/* An entry with nothing further to show: same shell, but no accordion, so it
   never opens onto an empty box. */
.vt-node--static > .vt-node__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1rem;
	padding: 1.4rem 1.5rem;
}
.vt-node__role {
	font-family: Fraunces, Georgia, serif;
	font-size: 1.32rem;
	color: var(--vt-text);
	line-height: 1.2;
}
.vt-node__org { color: var(--vt-accent-2); font-weight: 600; font-size: 1.02rem; }
.vt-node__meta {
	width: 100%;
	color: var(--vt-muted);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	margin-top: 0.15rem;
}
.vt-node > summary::after {
	content: "+";
	position: absolute;
	right: 1.4rem; top: 1.3rem;
	font-family: Figtree, sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--vt-accent);
	transition: transform 0.3s ease;
}
.vt-node[open] > summary::after { content: "-"; } /* plain minus marker */
/* Same easing and duration as the competency drawers, so an entry opening in
   the timeline and a panel growing under a chip read as one behaviour. The
   padding may stay on the box itself here: border-box is in force inside
   .vt-section, so a height of 0 collapses the padding with it. */
.vt-node__body {
	padding: 0 1.5rem 1.5rem 1.5rem;
	color: #DDD3C2;
	overflow: hidden;
	transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Zweite Fassung von Firma beziehungsweise Traeger, von vt-cv.js beim Laden in
   den Eintragskoerper gelegt. Erst unterhalb von 700 px sichtbar, wo sie die
   Kopfzeile verlaesst. */
.vt-node__org-copy,
.vt-edu__fact--org,
/* Kopien fuer die Druckfassung, von vt-cv.js beim Laden angelegt. */
.vt-print-links,
.vt-print-fuss { display: none; }
/* Zweite Fassung der Rolle, nur fuer den Ausdruck: dort ist die Zeile eng und
   "Kaufmann" wird zu "Kfm.". Am Bildschirm bleibt die ausgeschriebene stehen.
   Als Geschwister und nicht verschachtelt, damit sammle() ueber querySelector
   weiterhin genau einen Text liest. */
.vt-node__role--druck { display: none; }
/* Huellen fuer den Tabellenaufbau der Druckfassung. Am Bildschirm reichen sie
   ihre Kinder unveraendert nach oben durch.

   Die Breitenangaben sind NICHT ueberfluessig: WordPress begrenzt in
   .is-layout-constrained jedes direkte Kind auf die Inhaltsbreite von 820 px
   und zentriert es mit margin: auto !important. Die Huelle ist ein solches
   Kind - und Chrome legt diese Begrenzung trotz display: contents auf ihren
   Inhalt um. Ohne die Ruecknahme schnurrt die gesamte Seite unterhalb des
   Kopfbereichs auf 820 px zusammen. Nachgemessen, nicht vermutet. */
.vt-print-rumpf,
.vt-print-zeile,
.vt-print-zelle {
	display: contents;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.vt-node__org-copy {
	margin: 0 0 0.9rem;
	color: var(--vt-accent-2);
	font-weight: 600;
	font-size: 0.86rem;
}
.vt-node__body ul { margin: 0; padding-left: 1.1rem; }
.vt-node__body li { margin-bottom: 0.6rem; line-height: 1.6; }

/* Return path: added by JS to an entry that a competency pointed to, so the
   way back is never a scroll hunt. Sits beside the open/close marker; the
   summary reserves room for it so a long title wraps instead of colliding. */
.vt-back {
	position: absolute;
	top: 1.25rem;
	right: 3.4rem;
	z-index: 2;
}
/* Two classes deep on purpose: the responsive .vt-node > summary rule further
   down would otherwise win on equal specificity and drop the reserved room. */
.vt-node.vt-node--back > summary { padding-right: 9.5rem; }
/* Fachabitur und Kaufmann im Grosshandel lassen sich nicht aufklappen und
   tragen deshalb einen .vt-node__head statt eines <summary> - und keinen
   Auf-/Zu-Marker, dem der Knopf ausweichen muesste. */
.vt-node--static.vt-node--back > .vt-node__head { padding-right: 9.5rem; }
.vt-node--static .vt-back { right: 1.5rem; }
.vt-back__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--vt-accent-line);
	border-radius: 999px;
	background: rgba(14, 12, 9, 0.55);
	color: var(--vt-accent-2);
	font-family: Figtree, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}
.vt-back__btn::before { content: "\2190"; }
.vt-back__btn:hover,
.vt-back__btn:focus-visible { border-color: var(--vt-accent); color: var(--vt-text); }
.vt-back__btn:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.vt-back__btn { transition: none; }
}
.vt-node__sub {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--vt-line);
}
.vt-node__sub h4 {
	font-family: Figtree, sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--vt-text);
	margin: 0 0 0.1rem;
}
.vt-node__sub .vt-node__meta { margin: 0 0 0.5rem; width: auto; }

/* Pulse: amber glow when an evidence trigger targets this node (JS adds class).
   .vt-node__sub bekommt dieselbe Regel: die Parallelansicht kann bei SCMT auf
   eine einzelne Unterposition zeigen statt auf den ganzen Eintrag. */
.vt-node.vt-pulse,
.vt-node__sub.vt-pulse {
	border-color: var(--vt-accent);
	background: rgba(217, 164, 65, 0.07);
	box-shadow: 0 0 0 1px var(--vt-accent), 0 0 38px -4px var(--vt-accent-glow);
	animation: vt-pulse 2s ease-out 1;
}
@keyframes vt-pulse {
	0% { box-shadow: 0 0 0 1px var(--vt-accent), 0 0 0 0 var(--vt-accent-glow); }
	30% { box-shadow: 0 0 0 1px var(--vt-accent), 0 0 44px 6px var(--vt-accent-glow); }
	100% { box-shadow: 0 0 0 1px var(--vt-line), 0 0 0 0 rgba(217, 164, 65, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.vt-node.vt-pulse,
	.vt-node__sub.vt-pulse { animation: none; }
}

.vt-projekte__group-title {
	font-family: Fraunces, Georgia, serif;
	font-weight: 400;
	font-size: 1.4rem;
	color: var(--vt-accent-2);
	margin: 3rem 0 0;
}
.vt-projekte__group-title:first-of-type { margin-top: 2.6rem; }
.vt-projekte__group-title + .vt-timeline { margin-top: 1.2rem; }
/* ==================================================================
 * KOMPETENZEN
 * ================================================================== */
.vt-pm-panels {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 2.6rem;
}
.vt-pm-panel {
	padding: 1.7rem 1.9rem;
	border: 1px solid var(--vt-accent-line);
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(31, 26, 18, 0.85), rgba(14, 12, 9, 0.8));
	box-shadow: 0 0 40px -22px var(--vt-accent-glow);
}
.vt-pm-panel__title {
	font-family: Fraunces, Georgia, serif;
	font-weight: 400;
	font-size: 1.35rem;
	color: var(--vt-accent-2);
	margin: 0 0 0.35rem;
}
.vt-pm-panel__lead {
	color: var(--vt-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0 0 1.15rem;
}
.vt-pm-panel__methods { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.vt-skills { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }
.vt-pm-panels + .vt-skills { margin-top: 1.8rem; }

/* Base first, then the modifiers: at equal specificity the later rule wins, so
   .vt-chip--sub only takes effect below .vt-chip, not above it. */
.vt-chip {
	border: 1px solid var(--vt-line);
	background: rgba(23, 19, 13, 0.7);
	color: var(--vt-text);
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	font-size: 1.02rem;
	font-weight: 500;
}
.vt-chip--sub {
	border-color: var(--vt-line);
	background: rgba(14, 12, 9, 0.55);
	color: var(--vt-muted);
	padding: 0.45rem 0.95rem;
	font-size: 0.86rem;
	font-weight: 500;
}
.vt-chip--ki {
	border-color: var(--vt-accent);
	background: linear-gradient(135deg, rgba(217, 164, 65, 0.22), rgba(217, 164, 65, 0.08));
	color: var(--vt-accent-2);
	font-weight: 600;
	box-shadow: 0 0 30px -10px var(--vt-accent-glow);
}
.vt-chip--ki::before { content: "\2726"; margin-right: 0.5rem; color: var(--vt-accent); }

/* Competency chip: a <span> until JS upgrades it to a button, so these styles
   only ever apply to something that actually responds to a click. */
.vt-chip--komp {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: Figtree, sans-serif;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease,
		color 0.25s ease, box-shadow 0.25s ease;
}
.vt-chip--komp::after {
	content: "\203A";
	font-size: 1.05em;
	line-height: 1;
	color: var(--vt-accent);
	transform: rotate(90deg);
	transition: transform 0.25s ease;
}
.vt-chip--komp:hover,
.vt-chip--komp:focus-visible {
	border-color: var(--vt-accent-line);
	color: var(--vt-accent-2);
}
.vt-chip--komp:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; }
.vt-chip--komp[aria-expanded="true"] {
	border-color: var(--vt-accent);
	color: var(--vt-accent-2);
	box-shadow: 0 0 26px -12px var(--vt-accent-glow);
}
.vt-chip--komp[aria-expanded="true"]::after { transform: rotate(-90deg); }

/* The animated box carries no padding or border of its own: at height 0 those
   would stay visible as a stripe. All inset lives on __inner. */
.vt-komp {
	overflow: hidden;
	transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.vt-komp[hidden] { display: none; }
.vt-komp__inner {
	margin-top: 1.3rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--vt-line);
	display: grid;
	gap: 1.4rem;
}
.vt-komp__group-title {
	margin: 0 0 0.6rem;
	font-family: Figtree, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vt-accent);
}
.vt-komp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.vt-komp__item {
	position: relative;
	display: block;
	padding: 0.7rem 2.4rem 0.7rem 0.95rem;
	border: 1px solid var(--vt-line);
	border-radius: 10px;
	background: rgba(14, 12, 9, 0.5);
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.vt-komp__item::after {
	content: "\2197";
	position: absolute;
	right: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	color: var(--vt-accent);
}
.vt-komp__item:hover,
.vt-komp__item:focus-visible {
	border-color: var(--vt-accent-line);
	transform: translateX(2px);
}
.vt-komp__item:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; }
.vt-komp__item-label {
	display: block;
	color: var(--vt-text);
	font-size: 0.96rem;
	font-weight: 600;
	line-height: 1.35;
}
.vt-komp__item-meta {
	display: block;
	margin-top: 0.15rem;
	color: var(--vt-muted);
	font-size: 0.84rem;
}
.vt-komp__hint {
	margin: 0;
	max-width: 62ch;
	color: var(--vt-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.vt-chip--komp,
	.vt-chip--komp::after,
	.vt-komp,
	.vt-node__body,
	.vt-komp__item { transition: none; }
	.vt-komp__item:hover,
	.vt-komp__item:focus-visible { transform: none; }
}
/* Werkzeuge und Sprachen: zwei Angaben, die keine Belege in Projekten haben und
   deshalb bewusst ausserhalb der anklickbaren Panels stehen. Gleiche Trennlinie
   fuer beide, damit sie als Paar lesbar sind. */
.vt-tools,
.vt-lang {
	margin-top: 2.6rem;
	border-top: 1px solid var(--vt-line);
	padding-top: 1.6rem;
	color: var(--vt-muted);
	font-size: 1rem;
}
.vt-tools__title {
	margin: 0 0 1.2rem;
	font-family: Figtree, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--vt-accent);
}
.vt-tools__group {
	display: grid;
	grid-template-columns: 13rem 1fr;
	align-items: baseline;
	gap: 0.5rem 1.2rem;
}
.vt-tools__group + .vt-tools__group { margin-top: 0.9rem; }
.vt-tools__label {
	margin: 0;
	color: var(--vt-accent-2);
	font-size: 0.86rem;
	font-weight: 600;
}
.vt-tools__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vt-lang__items { display: flex; flex-wrap: wrap; gap: 2rem; }
.vt-lang b { color: var(--vt-text); font-weight: 600; }
@media (max-width: 700px) {
	/* Label ueber die Chips statt daneben: zwei Spalten lassen bei dieser
	   Breite weder dem Label noch den Chips genug Platz. */
	.vt-tools__group { grid-template-columns: 1fr; gap: 0.45rem; }
	.vt-tools__group + .vt-tools__group { margin-top: 1.3rem; }
}

/* ==================================================================
 * AUSBILDUNG
 * ================================================================== */
/* The section reuses the timeline shell from the career; only the fact rows
   inside an entry are specific to education. */
.vt-edu__facts { margin: 0; display: grid; gap: 0.45rem; }
.vt-edu__fact {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0.9rem;
}
.vt-edu__fact dt {
	margin: 0;
	color: var(--vt-text);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding-top: 0.05rem;
}
.vt-edu__fact dd {
	margin: 0;
	color: var(--vt-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
@media (max-width: 700px) {
	.vt-edu__fact { grid-template-columns: 1fr; gap: 0.15rem; }
}
/* ==================================================================
 * WERTE (warmest section)
 * ================================================================== */
.vt-werte .vt-bg { opacity: 0.6; }
.vt-werte .vt-scrim {
	background:
		radial-gradient(80% 70% at 50% 40%, rgba(217, 164, 65, 0.16), transparent 60%),
		linear-gradient(180deg, rgba(8, 7, 5, 0.55), rgba(8, 7, 5, 0.45));
}
.vt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.8rem; }
.vt-card {
	border: 1px solid var(--vt-accent-line);
	background: linear-gradient(160deg, rgba(31, 26, 18, 0.85), rgba(14, 12, 9, 0.8));
	border-radius: 18px;
	padding: 2.2rem;
	box-shadow: 0 0 50px -22px var(--vt-accent-glow);
}
.vt-card__role { color: var(--vt-accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; margin: 0 0 0.6rem; }
.vt-card h3 { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; color: var(--vt-text); margin: 0 0 0.3rem; line-height: 1.2; }
.vt-card__since { color: var(--vt-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.vt-card p { color: #DDD3C2; line-height: 1.7; margin: 0; font-size: 1.02rem; }

/* ==================================================================
 * KONTAKT (single CTA: click to reveal mailto)
 * ================================================================== */
.vt-contact { text-align: center; }
.vt-contact .vt-inner { max-width: 720px; }
.vt-contact .vt-h { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.vt-contact p.vt-lead { margin: 0 auto 2.4rem; }
.vt-mailwrap { min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.vt-mail-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	font-family: Figtree, sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--vt-accent-contrast, #100D08);
	background: linear-gradient(135deg, var(--vt-accent-2), var(--vt-accent));
	border-radius: 12px;
	padding: 1.05rem 2.2rem;
	box-shadow: 0 18px 44px -18px var(--vt-accent-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vt-mail-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px var(--vt-accent-glow); }
.vt-mail-btn:active { transform: translateY(0); }
.vt-mail-revealed {
	font-size: 1.25rem;
	color: var(--vt-accent-2);
	text-decoration: none;
	border-bottom: 1px solid var(--vt-accent-line);
	padding-bottom: 3px;
}
.vt-mail-revealed:hover { color: var(--vt-text); }
.vt-mail-fallback { color: var(--vt-muted); font-size: 1rem; }

.vt-contact__details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
}
.vt-contact__link {
	color: var(--vt-accent-2);
	font-size: 1.2rem;
	text-decoration: none;
	border-bottom: 1px solid var(--vt-accent-line);
	padding-bottom: 3px;
}
.vt-contact__link:hover { color: var(--vt-text); }

/* Die Kurzform der Zeitraeume ("02/2023 bis 12/2025") legt vt-cv.js beim Laden
   als zweite Angabe an. Am Bildschirm bleibt die ausgeschriebene sichtbar; im
   Druck kehrt sich das um. Da immer genau eine auf display:none steht, liest
   auch ein Screenreader nie beide. */
.vt-datum--kurz { display: none; }

/* ==================================================================
 * PARALLELANSICHT
 * Laufbahn und Ausbildung massstabsgetreu nebeneinander. Beide Listen
 * weichen dafuer; das Umschalten macht allein diese Regel, JavaScript
 * setzt nur .vt-parallel-on auf <html>.
 * ================================================================== */
.vt-parallel { display: none; }
.vt-parallel-on #ausbildung,
.vt-parallel-on #zeitstrahl .vt-timeline { display: none; }
.vt-parallel-on .vt-parallel { display: block; }

/* Traeger auf voller Breite, damit der Schalter unter der Ueberschrift steht:
   .vt-eyebrow ist inline-block und wuerde ihn sonst neben sich ziehen. Der
   Knopf selbst bleibt inline-flex und damit nur so breit wie sein Inhalt. */
.vt-parallel__switch-row { display: block; margin: -0.4rem 0 1.6rem; }
.vt-parallel__switch {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.35rem 0;
	border: none;
	background: none;
	color: var(--vt-muted);
	font-family: Figtree, sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.25s ease;
}
.vt-parallel__switch:hover,
.vt-parallel__switch:focus-visible { color: var(--vt-accent-2); }
.vt-parallel__switch:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 3px; }
.vt-parallel__track {
	position: relative;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 1.35rem;
	border: 1px solid var(--vt-line);
	border-radius: 999px;
	background: rgba(23, 19, 13, 0.72);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.vt-parallel__knob {
	position: absolute;
	top: 50%;
	left: 0.2rem;
	width: 0.85rem; height: 0.85rem;
	margin-top: -0.425rem;
	border-radius: 50%;
	background: var(--vt-muted);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
.vt-parallel__switch[aria-checked="true"] .vt-parallel__track {
	background: rgba(217, 164, 65, 0.18);
	border-color: var(--vt-accent);
}
.vt-parallel__switch[aria-checked="true"] .vt-parallel__knob {
	transform: translateX(1.1rem);
	background: var(--vt-accent);
}

.vt-parallel__chart {
	--vt-par-h: 860px;
	position: relative;
	height: var(--vt-par-h);
	margin-top: 2.6rem;
	padding-left: 3.4rem;
}
/* Jahresraster: die Marken sitzen auf demselben Prozentmassstab wie die
   Balken, deshalb tragen sie die Linie gleich mit. */
.vt-parallel__axis { position: absolute; inset: 0; }
.vt-parallel__tick {
	position: absolute;
	left: 0;
	width: 100%;
	color: var(--vt-muted);
	font-family: Figtree, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}
.vt-parallel__tick::after {
	content: "";
	position: absolute;
	left: 3.4rem; right: 0; top: 0.5em;
	border-top: 1px solid var(--vt-line);
	opacity: 0.5;
}
.vt-parallel__lanes {
	position: relative;
	height: 100%;
	display: flex;
	gap: 0.8rem;
}
.vt-parallel__lane { position: relative; flex: 1 1 0; min-width: 0; }
.vt-parallel__lane-title {
	position: absolute;
	top: -2rem; left: 0;
	margin: 0;
	font-family: Figtree, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--vt-accent);
}
/* Die Baender liegen hinter den Balken und markieren, wo beide Spuren
   gleichzeitig belegt sind - die eigentliche Aussage der Ansicht. */
.vt-parallel__band {
	position: absolute;
	left: 0; right: 0;
	background: rgba(217, 164, 65, 0.10);
	border-top: 1px solid rgba(217, 164, 65, 0.30);
	border-bottom: 1px solid rgba(217, 164, 65, 0.30);
	pointer-events: none;
}
.vt-parallel__band-value {
	position: absolute;
	right: 0.4rem; bottom: 0.3rem;
	font-family: Figtree, sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vt-accent);
}
.vt-parallel__bar {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	overflow: hidden;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--vt-line);
	border-left: 3px solid var(--vt-accent);
	border-radius: 8px;
	background: rgba(23, 19, 13, 0.88);
	color: var(--vt-text);
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.vt-parallel__lane[data-spur="ausbildung"] .vt-parallel__bar {
	border-left-color: var(--vt-accent-2);
}
/* Laufende Position: oben offen. Die gestrichelte Kante sagt, dass der Balken
   nicht dort endet, wo er gezeichnet ist - er reicht in die Zukunft. */
.vt-parallel__bar--offen {
	border-top-style: dashed;
	border-top-color: var(--vt-accent);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.vt-parallel__bar:hover,
.vt-parallel__bar:focus-visible {
	background: rgba(38, 31, 21, 0.95);
	border-color: var(--vt-accent);
}
.vt-parallel__bar:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; }
/* Rolle und Firma teilen sich einen Behaelter. Gestapelt ist er ein
   Flex-Kasten; wird der Balken zu niedrig, schaltet ihn --inline auf block und
   beide stehen in einer Zeile - getrennt durch das Leerzeichen, das vt-cv.js
   zwischen sie setzt. */
.vt-parallel__bar-kopf {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.vt-parallel__bar--inline .vt-parallel__bar-kopf { display: block; }

/* Die Position steht oberhalb der Firma, in derselben hellen Textfarbe wie
   der uebrige Balkeninhalt. Reicht der Platz nicht, wird sie zuerst einzeilig
   gesetzt und erst als letzte Rettung gestrichen. */
.vt-parallel__bar-role {
	font-family: Figtree, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--vt-text);
	overflow-wrap: anywhere;
}
.vt-parallel__bar-name {
	font-family: Figtree, sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.25;
	/* Die Firma sticht als Gold gegen die weisse Position ab - dieselbe Farbe
	   wie der Firmenname im Zeitstrahl selbst. */
	color: var(--vt-accent-2);
	/* Zusammengesetzte Firmennamen sind laenger als eine halbierte Spur breit
	   ist. Lieber trennen als aus dem Balken laufen. */
	overflow-wrap: anywhere;
	hyphens: auto;
}
/* Stufenweise gesetzt von passeBalkenAn(), sobald der Text sonst abgeschnitten
   wuerde: erst rueckt die Position in dieselbe Zeile, dann faellt der
   Zeitraum, dann wird die Schrift kleiner - und erst ganz zuletzt verschwindet
   die Position. */
.vt-parallel__bar--kurz .vt-parallel__bar-when { display: none; }
.vt-parallel__bar--winzig .vt-parallel__bar-name,
.vt-parallel__bar--winzig .vt-parallel__bar-role { font-size: 0.68rem; line-height: 1.15; }
.vt-parallel__bar--ohne-rolle .vt-parallel__bar-role { display: none; }
.vt-parallel__bar--winzig { padding-inline: 0.4rem; }
.vt-parallel__bar-when {
	color: var(--vt-muted);
	font-size: 0.7rem;
	line-height: 1.2;
}

/* ------------------------------------------------------------------
   SCMT-SONDERFALL
   Drei Positionen ohne Lücke im selben Zeitraum. Statt eines einzigen
   Balkens mit der unlesbar langen Sammelbezeichnung stehen hier "SCMT GmbH"
   einmal oben in Gold und darunter drei Segmente - je Position eines, im
   Verhältnis ihrer Monate hoch, per flex-grow statt Prozenthöhe: so bleibt
   die Aufteilung korrekt, unabhängig davon, wie viel Platz der Kopf selbst
   braucht.
   ------------------------------------------------------------------ */
.vt-parallel__bar--scmt {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
}
/* Hover/Fokus wandern sonst vom Segment auf den ganzen Kasten hoch - :hover
   gilt auch fuer Vorfahren eines gehoverten Kindes. Hier wird das wieder
   zurueckgenommen, die Segmente markieren sich selbst. */
.vt-parallel__bar--scmt:hover,
.vt-parallel__bar--scmt:focus-within {
	background: rgba(23, 19, 13, 0.88);
	border-color: var(--vt-line);
}
.vt-parallel__bar--scmt > .vt-parallel__bar-name {
	flex: 0 0 auto;
	padding: 0.4rem 0.6rem 0.3rem;
}
.vt-parallel__bar--scmt > * + * { border-top: 1px solid var(--vt-line); }
.vt-parallel__bar-segment {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	flex-basis: 0;
	min-height: 0;
	padding: 0.2rem 0.6rem;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.vt-parallel__bar-segment:hover,
.vt-parallel__bar-segment:focus-visible {
	background: rgba(217, 164, 65, 0.14);
}
.vt-parallel__bar-segment:focus-visible {
	outline: 2px solid var(--vt-accent);
	outline-offset: -2px;
}
.vt-parallel__bar-segment .vt-parallel__bar-role {
	font-size: 0.7rem;
	line-height: 1.2;
}
.vt-parallel__figure {
	margin: 2.2rem 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--vt-line);
	color: var(--vt-muted);
	font-size: 1rem;
	line-height: 1.65;
	max-width: var(--vt-read);
}
.vt-parallel__figure strong {
	color: var(--vt-accent-2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
	.vt-parallel__switch,
	.vt-parallel__track,
	.vt-parallel__knob,
	.vt-parallel__bar { transition: none; }
}
@media (max-width: 700px) {
	/* Hoeher als noetig waere hier falsch verstandene Sparsamkeit: die Hoehe
	   ist der Massstab, und zu wenig davon macht die kurzen Stationen
	   unleserlich. Gescrollt wird auf dem Telefon ohnehin. */
	.vt-parallel__chart { --vt-par-h: 740px; padding-left: 2.4rem; }
	.vt-parallel__tick::after { left: 2.4rem; }
	.vt-parallel__tick { font-size: 0.68rem; }
	.vt-parallel__lanes { gap: 0.45rem; }
	.vt-parallel__lane-title { font-size: 0.66rem; letter-spacing: 0.12em; }
	.vt-parallel__bar { padding: 0.35rem 0.45rem; border-radius: 6px; }
	.vt-parallel__bar-role { font-size: 0.64rem; }
	.vt-parallel__bar-name { font-size: 0.74rem; }
	.vt-parallel__bar-when { font-size: 0.64rem; }
	.vt-parallel__bar--scmt > .vt-parallel__bar-name { padding: 0.3rem 0.45rem 0.25rem; }
	.vt-parallel__bar-segment { padding: 0.15rem 0.45rem; }
	.vt-parallel__bar-segment .vt-parallel__bar-role { font-size: 0.62rem; }
	.vt-parallel__band-value { font-size: 0.6rem; right: 0.3rem; bottom: 0.2rem; }
	.vt-parallel__figure { font-size: 0.95rem; }
}

.vt-print-btn {
	appearance: none;
	-webkit-appearance: none;
	/* Der Knopf ist ein <a> auf das PDF - ein Inline-<a> naehme weder den
	   oberen Aussenabstand noch das senkrechte Polster an. Die
	   Knopf-Eigenschaften darueber (appearance) stammen aus der Zeit, als hier
	   ein <button> stand; sie stoeren nicht und halten die Regel brauchbar,
	   falls je wieder einer gebraucht wird. */
	display: inline-block;
	margin-top: 1.4rem;
	padding: 0.4rem 0;
	border: none;
	background: none;
	color: var(--vt-muted);
	font-family: Figtree, sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-decoration-color: var(--vt-line);
	text-underline-offset: 5px;
	cursor: pointer;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.vt-print-btn:hover,
.vt-print-btn:focus-visible {
	color: var(--vt-accent-2);
	text-decoration-color: var(--vt-accent-line);
}
.vt-print-btn:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.vt-print-btn { transition: none; }
}

.vt-contact__note {
	margin-top: 2.6rem;
	color: var(--vt-muted);
	font-size: 0.86rem;
	letter-spacing: 0.04em;
}

/* ==================================================================
 * RESPONSIVE
 * ================================================================== */
@media (max-width: 860px) {
	.vt-hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
	.vt-hero { min-height: auto; padding-block: clamp(5rem, 14vw, 7rem); }
	.vt-hero__grid { grid-template-areas: "p" "t"; }
	.vt-hero__text { grid-area: t; }
	.vt-portrait { grid-area: p; width: min(80%, 320px); }
	.vt-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.vt-section { padding-inline: 1.25rem; padding-block: 3.6rem; }

	/* Lange deutsche Komposita ("Personalentwicklungsprogramms") sind breiter
	   als eine 320-px-Spalte. Umbrechen statt ueberlaufen - greift nur, wenn
	   ein Wort sonst wirklich nicht passt. */
	.vt-section, .vt-section * { overflow-wrap: break-word; }
	/* Nach der Sammelregel oben wieder schaerfer gestellt: der Universal-
	   selektor hat dieselbe Spezifitaet und steht spaeter, wuerde das
	   "anywhere" der Balkennamen also gerade dort aufheben, wo es gebraucht
	   wird. "anywhere" wirkt anders als "break-word" auch auf die Mindest-
	   breite des Flex-Elements. */
	.vt-parallel__bar-name,
	.vt-parallel__bar-role { overflow-wrap: anywhere; }

	/* Die Zeitleiste rueckt naeher an ihre Punkte: 2,2 rem Einzug kosten auf
	   einem schmalen Display spuerbar Textbreite. Der Punkt sitzt weiterhin
	   auf der Linie, weil er am linken Rand der Leiste haengt. */
	.vt-timeline { padding-left: 1.6rem; margin-top: 2.2rem; }
	.vt-node::before { left: -1.6rem; top: 1.35rem; }

	.vt-node > summary { padding: 1.1rem 2.4rem 1.1rem 1.05rem; }
	.vt-node--static > .vt-node__head { padding: 1.1rem 1.05rem; }
	.vt-node > summary::after { right: 1rem; top: 1rem; font-size: 1.3rem; }
	.vt-node__body { padding: 0 1.05rem 1.15rem; }

	/* "Zurueck" wandert unter den Eintrag. Neben dem Marker haette es rund
	   die Haelfte der Kopfzeile beansprucht, und die Position bleibt dort
	   ohnehin nicht lange sichtbar. */
	.vt-back { position: static; padding: 0 1.05rem 1.15rem; }
	.vt-node.vt-node--back > summary { padding-right: 2.4rem; }
	/* Gleiches fuer die statischen Eintraege: der Knopf steht hier im Fluss,
	   der reservierte Platz in der Kopfzeile waere nur eine Luecke. */
	.vt-node--static.vt-node--back > .vt-node__head { padding-right: 1.05rem; }
	.vt-back__btn { width: 100%; justify-content: center; padding: 0.6rem 0.95rem; }

	.vt-pm-panel { padding: 1.3rem 1.15rem; }
	.vt-pm-panel__title { font-size: 1.2rem; }
	.vt-chip--sub { font-size: 0.82rem; padding: 0.4rem 0.8rem; }
	.vt-komp__item { padding: 0.65rem 2.1rem 0.65rem 0.8rem; }
	.vt-komp__item::after { right: 0.8rem; }
	.vt-tools__title { margin-bottom: 0.9rem; }
}

/* ==================================================================
 * KOPFZEILEN AUF SCHMALEN DISPLAYS
 *
 * Drei Zeilen je Eintrag - Bezeichnung, Firma, Zeitraum - ergeben bei
 * rund 285 px Textbreite lange, unruhige Bloecke. Die mittlere Zeile
 * verlaesst deshalb die Kopfzeile und erscheint im geoeffneten Eintrag,
 * statt ersatzlos zu verschwinden: sonst erfuehre ein Besucher am
 * Telefon nie, bei welchen Unternehmen und Hochschulen die Stationen
 * stattfanden.
 *
 * Steht bewusst hinter dem 600-px-Block: bei gleicher Spezifitaet
 * gewinnt die spaetere Regel, die Schriftgroessen stehen damit an
 * genau einer Stelle.
 * ================================================================== */
@media (max-width: 700px) {
	/* Auf summary eingegrenzt, damit die Kopie im Eintragskoerper und die
	   nicht aufklappbaren Eintraege unberuehrt bleiben. */
	.vt-node > summary .vt-node__org { display: none; }
	.vt-node__org-copy { display: block; }
	.vt-edu__fact--org { display: grid; }

	.vt-node__role { font-size: 0.88rem; }
	/* Notwendige Folge: bei 0,86 rem stuende die Zeitzeile fast gleich gross
	   neben der Bezeichnung und die Rangfolge im Eintrag waere dahin. */
	.vt-node__meta { font-size: 0.76rem; }

	/* Fachabitur und Kaufmann im Grosshandel lassen sich bewusst nicht
	   oeffnen, ihr Traeger kann also nirgends hinwandern. Er rueckt deshalb
	   in die Zeitzeile: aus drei Zeilen werden zwei. */
	.vt-node--static > .vt-node__head { column-gap: 0.4rem; }
	.vt-node--static .vt-node__role { width: 100%; }
	.vt-node--static .vt-node__org {
		color: var(--vt-muted);
		font-weight: 400;
		font-size: 0.76rem;
		letter-spacing: 0.02em;
	}
	.vt-node--static .vt-node__org::after { content: " ·"; }
	.vt-node--static .vt-node__meta { width: auto; margin-top: 0; }

	/* Kompetenzen als Ziehharmonika. Am Desktop stehen die Chips in wenigen
	   breiten Reihen und die Belege passen unter das Panel; hier brechen
	   dieselben Chips in viele schmale Reihen um, und die Liste landet weit
	   weg von dem, was angetippt wurde. Untereinander gestellt, oeffnet jede
	   Zeile ihre Belege direkt unter sich - vt-cv.js haengt die Schublade
	   dafuer unter den Chip statt unter das Panel. */
	.vt-pm-panel__methods { display: block; }
	/* Greift auf .vt-chip, nicht nur auf --komp: ein nicht aufgewerteter Chip
	   (ohne JavaScript) stuende sonst als einzige Pille zwischen Zeilen. */
	.vt-pm-panel__methods > .vt-chip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.85rem 0.1rem;
		border: none;
		border-top: 1px solid var(--vt-line);
		border-radius: 0;
		background: none;
		font-size: 0.9rem;
		text-align: left;
	}
	.vt-pm-panel__methods > .vt-chip:first-child { border-top: none; }
	/* Rahmen und Schein gehoeren zur Pillenform. Als Zeile signalisieren
	   Akzentfarbe, der gedrehte Pfeil und die Leiste unten den Zustand. */
	.vt-chip--komp[aria-expanded="true"] {
		border-color: var(--vt-line);
		box-shadow: none;
	}

	/* Die geoeffnete Kompetenz bekommt links eine goldene Leiste, die neben
	   ihrer Zeile beginnt und mit dem letzten Beleg endet - dieselbe Geste wie
	   die Leiste, an der in Laufbahn und Projekten die Eintraege haengen.
	   Ohne sie ginge der geoeffnete Bereich nahtlos in die naechste Kompetenz
	   ueber.
	   Als Pseudo-Element und nicht als border-left: ein Rahmen wuerde den
	   Zeilentext beim Oeffnen seitlich verschieben. So liegt die Leiste im
	   ohnehin vorhandenen Innenabstand des Panels und ruehrt den Textfluss
	   nicht an. */
	/* Am Panel und nicht am Methodenkasten definiert: die Schublade haengt mal
	   in ihm, mal dahinter, das Panel ist in beiden Faellen Vorfahr. */
	.vt-pm-panel { --vt-komp-luft: 2rem; }
	.vt-chip--komp[aria-expanded="true"],
	.vt-komp { position: relative; }
	.vt-chip--komp[aria-expanded="true"]::before,
	.vt-komp::before {
		content: "";
		position: absolute;
		left: -0.6rem;
		top: 0;
		width: 2px;
		background: var(--vt-accent);
	}
	.vt-chip--komp[aria-expanded="true"]::before { bottom: 0; }
	/* Endet mit dem Inhalt, nicht mit dem Kasten: die Luft darunter gehoert
	   schon zur naechsten Kompetenz, und eine Leiste bis zur Trennlinie saehe
	   aus, als reichte der Bereich dort hinein. */
	.vt-komp::before { bottom: var(--vt-komp-luft); }

	.vt-komp__inner {
		margin-top: 0;
		padding-top: 1rem;
		padding-bottom: var(--vt-komp-luft);
		padding-left: 0.9rem;
		border-top: none;
		gap: 1.1rem;
	}
	/* Trat bisher praesenter auf als der Kompetenzname darueber, dem die
	   Gruppen untergeordnet sind. */
	.vt-komp__group-title {
		font-size: 0.66rem;
		letter-spacing: 0.1em;
		color: var(--vt-muted);
	}
}

/* ==================================================================
 * PRINT / PDF
 * The screen design is deliberately dark; on paper that is either a
 * wall of toner or, with backgrounds dropped by the browser, pale grey
 * text on white. This redraws the page as a plain document: light
 * ground, dark type, no imagery, everything unfolded.
 * ================================================================== */
@media print {
	/* Repaint the palette rather than overriding rule by rule. */
	:root {
		--vt-base: #FFFFFF;
		--vt-base-rgb: 255, 255, 255;
		--vt-ink: #FFFFFF;
		--vt-surface: #FFFFFF;
		--vt-surface-2: #FFFFFF;
		--vt-text: #1A1613;
		--vt-muted: #4A4238;
		--vt-line: #C9C0B2;
		--vt-accent: #7A5A12;
		--vt-accent-2: #6B4E0F;
		--vt-accent-soft: transparent;
		--vt-accent-line: #C9C0B2;
		--vt-accent-glow: transparent;
	}

	/* Ohne size faellt Chrome auf US Letter zurueck - 216 x 279 statt
	   210 x 297 mm. Das verschiebt jede Masszahl unten.

	   Die SEITLICHEN Raender stehen bewusst auf null und werden stattdessen
	   als Innenabstand des body gesetzt. Grund: Chrome beschneidet allen
	   Inhalt auf den Satzspiegel - mit Rand im @page blieb das Kopfband auch
	   mit negativen Raendern genau an dessen Kante stehen. Waagerechter
	   Innenabstand wiederholt sich anders als senkrechter auf jeder Seite,
	   ist hier also gleichwertig. */
	@page { size: A4; margin: 0 0 14mm; }

	html, body { background: #FFFFFF !important; color: var(--vt-text) !important; }

	/* The reveal animation leaves anything never scrolled into view at
	   opacity 0 -- on paper that is a blank sheet. */
	.ae-reveal-on .ae-reveal,
	.ae-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Screen furniture that means nothing on paper. */
	.ae-site-header,
	.ae-site-footer,
	.vt-nav,
	.vt-nav-toggle,
	.vt-nav-cta,
	.vt-bg,
	.vt-scrim,
	.vt-scrollcue,
	.vt-back,
	.vt-komp,
	.vt-print-btn,
	.vt-mail-btn,
	.vt-contact__details,
	.vt-parallel,
	.vt-parallel__switch-row,
	/* Papier ist breiter als 700 px, die Kopfzeile bleibt dort also
	   vollstaendig. Die Regel verhindert nur, dass Firma und Traeger im
	   Ausdruck doppelt erscheinen. */
	.vt-node__org-copy,
	.vt-edu__fact--org,
	.vt-portrait::before { display: none !important; }

	/* Papier bekommt immer beide vollstaendigen Listen, unabhaengig davon, was
	   am Bildschirm gerade geschaltet ist. Der massstabsgetreue Zeitstrahl
	   braucht Pixelhoehe und Farbflaechen und eignet sich dafuer nicht. */
	#ausbildung,
	#zeitstrahl .vt-timeline { display: block !important; }

	.vt-section {
		background: #FFFFFF !important;
		color: var(--vt-text) !important;
		padding-block: 0 !important;
		padding-inline: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
	}
	.wp-block-post-content > section.vt-section {
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* The seam masks fade to the base colour and would print as grey bands. */
	.vt-section::after { display: none !important; }
	.vt-inner { max-width: none !important; }

	/* Sections read as chapters, each starting clear of the previous one. */
	.vt-section + .vt-section { margin-top: 13mm; }
	/* Die Auszeichnung der Vorlage: goldene Versalien, gesperrt, ohne Linie.
	   Die Benennung bleibt unsere - "Die Laufbahn", nicht "Berufserfahrung". */
	.vt-eyebrow {
		color: var(--vt-accent) !important;
		border: none !important;
		font-family: Figtree, sans-serif !important;
		font-size: 9pt !important;
		font-weight: 700 !important;
		text-transform: uppercase;
		letter-spacing: 0.16em;
		padding: 0 !important;
		margin: 0 0 2mm !important;
		break-after: avoid;
	}

	/* Timeline decoration carries no meaning without colour. */
	.vt-timeline { padding-left: 0 !important; margin-top: 0 !important; }
	.vt-timeline::before,
	.vt-node::before,
	.vt-node > summary::after { display: none !important; }

	.vt-node {
		border: none !important;
		/* Der Abstand gehoert ZWISCHEN die Eintraege, nicht in sie hinein -
		   sonst waechst auch die Luecke zwischen Position und Firma. */
		margin-bottom: 3.2mm !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		break-inside: avoid;
	}
	/* ------------------------------------------------------------------
	   ZEITSPALTE
	   Die klassische Form des tabellarischen Lebenslaufs: alle Zeitraeume
	   buendig links, rechts daneben Position und Firma. Der Blick liest die
	   Chronologie an einer Kante entlang, statt jede Zeile zu durchsuchen.

	   Die drei Felder werden ausdruecklich platziert statt der Reihenfolge im
	   Quelltext ueberlassen. Am Inhalt aendert das nichts: .vt-node__meta
	   traegt bereits "Bremerhaven · seit Oktober 2025", bei der Ausbildung den
	   Zeitraum, bei Projekten "2024 · 15 Projekttage".
	   ------------------------------------------------------------------ */
	.vt-node > summary,
	.vt-node--static > .vt-node__head {
		display: grid !important;
		grid-template-columns: 1fr auto;
		column-gap: 4mm;
		row-gap: 0;
		align-items: baseline;
		padding: 0 !important;
	}
	/* Zeitraum rechtsbuendig in der Titelzeile. Eine eigene Spalte links
	   haette von den 122 mm der rechten Spalte ein Drittel gekostet. */
	.vt-node__meta {
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		margin-top: 0 !important;
		font-size: 9pt !important;
		text-align: right;
		white-space: nowrap;
	}
	/* Der Ort traegt seinen Trennpunkt selbst, damit hier kein fuehrendes
	   "· " stehen bleibt. */
	.vt-node__ort { display: none !important; }
	/* Auf Papier die Kurzform: "02/2023 bis 12/2025". Beide Fassungen stehen
	   im Dokument, es wird nur getauscht, welche display:none traegt. */
	.vt-datum--lang { display: none !important; }
	.vt-datum--kurz { display: block !important; }
	/* Die Auszeichnung, die in der Vorlage die Berufsbezeichnung traegt:
	   gesperrte Versalien in Figtree. Bei sechs Stationen und elf Projekten
	   macht sie die Eintraege beim Ueberfliegen sofort unterscheidbar. */
	/* Stellenbezeichnung und Zeitraum sind Schrift derselben Groesse und
	   Schnittfamilie; unterschieden werden sie allein durch Fettung und
	   Ausrichtung. Gesperrte Versalien hatten die Zeile breiter gemacht als
	   noetig und den Titel bei langen Bezeichnungen umbrechen lassen. */
	.vt-node__role {
		grid-column: 1;
		grid-row: 1;
		font-family: Figtree, sans-serif !important;
		font-size: 9pt !important;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 1.35 !important;
	}
	/* Die Firma ordnet sich der Position unter: eine Stufe kleiner, mager. */
	.vt-node__org {
		grid-column: 1 / -1;
		grid-row: 2;
		color: var(--vt-text) !important;
		font-family: Figtree, sans-serif !important;
		font-size: 8.5pt !important;
		font-weight: 400 !important;
		/* Firma dicht unter die Position: die beiden gehoeren zusammen und
		   muessen enger stehen als zwei Eintraege zueinander. */
		line-height: 1.25 !important;
		margin-top: -0.3mm !important;
	}

	/* Die Aufgaben und Ergebnisse machen rund 7.500 der 12.434 Zeichen aus.
	   Sie bleiben der Webseite vorbehalten, auf die das PDF verweist. */
	.vt-node__body { display: none !important; }

	/* Ausnahme: bei Master und Bachelor gehoeren Note und Schwerpunkte in
	   einen deutschen Lebenslauf. Auslandsaufenthalte und Abschlussarbeit
	   nicht - die Auswahl haengt an Modifikatoren im Inhalt, nicht an der
	   Position: die Faktenliste enthaelt seit der Mobilansicht eine per
	   JavaScript eingehaengte Zeile, eine Auswahl ueber :nth-child haette
	   also davon abgehangen, ob das Skript gelaufen ist. */
	/* SCMT: die Firma traegt den Gesamtzeitraum, darunter stehen die drei
	   Positionen mit ihren eigenen Zeitraeumen. Sichtbar bleiben nur die
	   Ueberschriften der Unterpositionen und deren Zeitangabe - die
	   Aufzaehlungen darin fallen wie ueberall weg. */
	#zeitstrahl .vt-node__body {
		display: block !important;
		padding: 0 0 0.4mm !important;
		height: auto !important;
		overflow: visible !important;
	}
	#zeitstrahl .vt-node__body > ul,
	.vt-node__sub ul { display: none !important; }
	/* Die Sammelbezeichnung "Niederlassungsleiter, Key Account Manager,
	   Assistenz der Geschaeftsfuehrung" lief ueber drei Zeilen und wiederholte
	   nur, was direkt darunter einzeln mit eigenen Zeitraeumen steht. Die Firma
	   traegt den Gesamtzeitraum, das genuegt als Kopf. */
	#node-scmt > summary > .vt-node__role { display: none !important; }
	/* Hier traegt die Firma ausnahmsweise den Eintragstitel und bekommt
	   deshalb dessen Auszeichnung statt der schmaleren fuer Firmen. */
	#node-scmt > summary > .vt-node__org {
		grid-column: 1;
		grid-row: 1;
		font-size: 9pt !important;
		font-weight: 700 !important;
	}
	.vt-node__sub {
		padding-left: 5mm;
		margin: 0 !important;
		/* Am Bildschirm trennt eine Linie die Unterpositionen; auf Papier
		   steht der Block ohne Trennlinien wie alle anderen Eintraege. */
		border: none !important;
		padding-top: 0.4mm;
		padding-bottom: 0.4mm;
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 4mm;
		align-items: baseline;
	}
	.vt-node__sub h4 {
		margin: 0 !important;
		font-family: Figtree, sans-serif !important;
		font-size: 8.5pt !important;
		font-weight: 600;
		color: var(--vt-text) !important;
	}
	/* Die Zeitraeume der Unterpositionen ordnen sich denen der Hauptstationen
	   unter; die Bezeichnungen bleiben unveraendert. */
	.vt-node__sub .vt-node__meta {
		grid-column: 2;
		font-size: 7.5pt !important;
		margin: 0 !important;
	}

	/* Die Note soll NEBEN dem Titel stehen, sie liegt aber im Eintragskoerper
	   und damit ausserhalb der Kopfzeile. display:contents loest die Kopfzeile
	   auf, sodass Titel, Firma, Zeitraum und Koerper Felder desselben Rasters
	   werden. Beherrscht ein Browser das nicht, fallen die Angaben schlicht
	   untereinander - lesbar, nur nicht in einer Zeile. */
	/* Feste Breite der Zeitspalte statt auto: jeder Eintrag ist ein eigenes
	   Raster, sonst richtet sich die Notenspalte nach der Laenge des
	   Zeitraums und steht bei jedem Abschluss woanders. */
	#ausbildung .vt-node {
		display: grid !important;
		grid-template-columns: 1fr auto 42mm;
		column-gap: 4mm;
		align-items: baseline;
		padding: 2mm 0;
	}
	#ausbildung .vt-node > summary,
	#ausbildung .vt-node--static > .vt-node__head {
		display: contents !important;
	}
	#ausbildung .vt-node__role { grid-column: 1; grid-row: 1; }
	#ausbildung .vt-node__body { grid-column: 2; grid-row: 1; }
	#ausbildung .vt-node__meta { grid-column: 3; grid-row: 1; }
	#ausbildung .vt-node__org { grid-column: 1 / -1; grid-row: 2; }

	/* Zwei Fassungen der Rolle stehen im Inhalt; auf Papier gilt die gekuerzte
	   ("Ausbildung zum Kfm. im Grosshandel"), am Bildschirm die ausgeschriebene.
	   Nur dieser eine Eintrag hat eine zweite Fassung, deshalb ueber die Id
	   statt ueber eine Sammelregel - sonst verloeren auch Master, Bachelor und
	   Fachabitur ihre Bezeichnung.
	   Die Reihenfolge ist entscheidend: beide Selektoren haben dieselbe
	   Spezifitaet und dasselbe !important, die spaetere Regel gewinnt. */
	#edu-ausbildung .vt-node__role { display: none !important; }
	#edu-ausbildung .vt-node__role--druck { display: block !important; }

	#ausbildung .vt-node__body {
		display: block !important;
		padding: 0 !important;
		color: var(--vt-text) !important;
		height: auto !important;
		overflow: visible !important;
	}
	.vt-edu__facts { gap: 0 !important; }
	/* Ohne die Schriftfamilie stand die Note als einziger Wert in der
	   Displayschrift und in einem groesseren Grad neben den jetzt schlichten
	   Titeln - sie sprang aus der Zeile heraus. */
	.vt-edu__fact {
		display: block !important;
		font-family: Figtree, sans-serif !important;
		font-size: 9pt !important;
		font-weight: 400 !important;
	}
	.vt-edu__fact dd { font-size: 9pt !important; }
	.vt-edu__fact dt,
	.vt-edu__fact dd { display: inline !important; }
	.vt-edu__fact dt::after { content: " "; }
	.vt-edu__fact dt { color: var(--vt-text) !important; font-weight: 600; }
	/* "Abschlussnote: 1,7" waere in einer Zeile mit Titel und Zeitraum zu
	   lang - die Beschriftung wird durch ein knappes "Note" ersetzt. */
	.vt-edu__fact--note dd::before { content: "Note "; font-weight: 600; }
	/* ALLE Ausblendungen MUESSEN hinter den Sammelregeln stehen: sie tragen
	   dieselbe Spezifitaet und dasselbe !important, die spaetere gewinnt.
	   Andersherum blieben die Faktenzeilen und die Beschriftung sichtbar -
	   genau der Fehler der letzten beiden Fassungen. */
	.vt-edu__fact--note dt { display: none !important; }
	.vt-edu__fact--org,
	.vt-edu__fact--schwerpunkte,
	.vt-edu__fact--ausland,
	.vt-edu__fact--arbeit { display: none !important; }

	/* Projekte: nur der Titel. Zuordnung, Jahr und Projekttage entfallen -
	   "Intern"/"Extern" steht ohnehin schon als Gruppenueberschrift darueber. */
	#projekte .vt-node > summary {
		display: block !important;
		padding: 0.6mm 0 !important;
	}
	#projekte .vt-node__org,
	#projekte .vt-node__meta { display: none !important; }
	#projekte .vt-node__role {
		text-transform: none;
		letter-spacing: 0;
		font-weight: 500;
		font-size: 9.5pt !important;
	}
	#projekte .vt-node { break-inside: avoid; }
	/* Enger als die Laufbahn: dort traegt jeder Eintrag zwei Zeilen, hier nur
	   eine beziehungsweise zwei dicht gesetzte. */
	#ausbildung .vt-node { margin-bottom: 1.6mm !important; }
	#projekte .vt-node { margin-bottom: 1.2mm !important; }
	#projekte { break-inside: avoid; }
	/* Die Gruppentitel standen als Displayschrift im Grad einer
	   Abschnittsueberschrift und wirkten dadurch wie ein eigenes Kapitel.
	   Sie bekommen die Auszeichnung der Gruppentitel aus der Seitenspalte. */
	.vt-projekte__group-title {
		font-family: Figtree, sans-serif !important;
		font-size: 8pt !important;
		font-weight: 700 !important;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--vt-accent) !important;
		margin: 3mm 0 0.8mm !important;
		break-after: avoid;
	}
	.vt-projekte__group + .vt-projekte__group { margin-top: 0 !important; }

	.vt-node__sub { break-inside: avoid; }

	/* ------------------------------------------------------------------
	   DAS KOPFBAND

	   Die erste Seite oeffnet wie die Vorlage mit einem dunklen Band ueber
	   die volle Papierbreite: Name zweizeilig links, rundes Foto rechts.
	   Traeger ist der Hero-Abschnitt selbst - ein zusaetzliches Element
	   waere eine zweite Stelle, an der Name und Foto gepflegt werden
	   muessten.

	   Randabfallend ueber zwei Wege gleichzeitig: negative Seitenraender
	   holen es waagerecht an die Kante, @page :first senkrecht. Ein
	   gewoehnlicher Block laesst sich so herausziehen - fest positionierte
	   Kaesten beschneidet Chrome dagegen auf den Satzspiegel, daran ist der
	   randabfallende Goldstreifen der Vorgaengerfassung gescheitert.
	   ------------------------------------------------------------------ */
	html, body {
		background: #FFFFFF !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	/* Der waagerechte Satzspiegel steckt jetzt hier, nicht im @page.
	   Senkrecht bleibt er im @page, damit er sich auf jeder Seite
	   wiederholt - Innenabstand taete das oben nur einmal. */
	body { margin: 0 !important; padding: 0 13mm !important; }
	/* theme.json setzt einen globalen Seitenabstand von 1.25rem, den
	   WordPress auf den aeusseren Block legt. Das sind 5,3 mm, um die das
	   Kopfband sonst hinter der Papierkante zurueckbleibt. */
	main.wp-block-group,
	.has-global-padding,
	.wp-block-post-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Der Kopf wiederholt sich auf jeder Seite. Chrome kann das nur fuer eine
	   table-header-group - und nur diese Konstruktion reserviert dabei auch
	   den Platz. Ein fest positionierter Kasten reserviert nichts; der Inhalt
	   liefe darunter, und Chrome beschneidet ihn zudem auf den Satzspiegel. */
	.wp-block-post-content {
		display: table !important;
		width: 100% !important;
		table-layout: fixed;
	}
	.vt-hero { display: table-header-group !important; }
	.vt-print-rumpf { display: table-row-group !important; }
	.vt-print-zeile { display: table-row !important; }
	.vt-print-zelle { display: table-cell !important; vertical-align: top; }

	/* WICHTIG: Auf einer table-header-group wirken keine Raender. Polster,
	   negative Seitenraender und die goldene Haarlinie sitzen deshalb an
	   .vt-inner, nicht am Abschnitt selbst. Der Kasten reicht dadurch ueber
	   die volle Papierbreite, die Linie laeuft von 0 bis 210 mm. */
	.vt-hero {
		background: none !important;
		color: var(--vt-text) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		break-inside: avoid;
	}
	.vt-hero .vt-inner {
		border-bottom: 0.3mm solid var(--vt-accent) !important;
		/* Der negative rechte Rand hat die Breite in der Tabellenzelle NICHT
		   vergroessert, sondern nur der linke den Kasten verschoben - die
		   Linie endete bei 184 mm. Die Breite wird deshalb ausgeschrieben. */
		margin: 0 0 7mm -13mm !important;
		width: calc(100% + 26mm) !important;
		box-sizing: border-box;
		padding: 5mm 13mm 4mm !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	/* "Interaktiver Lebenslauf" waere ein Kapiteltitel ueber dem eigenen
	   Namen - auf einem Lebenslauf sinnlos. */
	.vt-hero .vt-eyebrow { display: none !important; }
	/* ACHTUNG: Die Satzbreite von 184 mm entspricht rund 695 CSS-Pixeln,
	   also greifen im Druck die Regeln aus @media (max-width: 860px). Dort
	   stapelt ein grid-template-areas Foto ueber Text. Beides muss hier
	   ausdruecklich zurueckgenommen werden, sonst steht das Foto ueber dem
	   Namen statt daneben. */
	.vt-hero .vt-hero__grid {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		grid-template-areas: none !important;
		gap: 8mm !important;
		align-items: center !important;
	}
	.vt-hero .vt-hero__text,
	.vt-hero .vt-portrait { grid-area: auto !important; }
	.vt-hero__text {
		display: block !important;
		max-width: none !important;
		margin: 0 !important;
	}
	.vt-hero__name {
		font-size: 23pt !important;
		line-height: 1.04 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		color: var(--vt-text) !important;
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	/* Die Huellen legt vt-cv.js beim Laden an; am Bildschirm bleiben sie
	   inline und aendern nichts. */
	.vt-name__wort { display: block; }
	.vt-hero__role {
		white-space: normal !important;
		font-family: Figtree, sans-serif !important;
		font-size: 10.5pt !important;
		color: var(--vt-text) !important;
		margin: 3mm 0 0 !important;
		text-align: left;
	}
	.vt-hero__role b { color: #D9A441 !important; }
	/* Rund wie in der Vorlage. Das Bild traegt am Bildschirm eine weiche
	   Federung; auf Papier braucht ein Bewerbungsfoto eine klare Kante. */
	/* 28 statt 34 mm: das Foto bestimmt die Hoehe des Bandes, und das Band
	   steht seit der Wiederholung auf jeder Seite. */
	.vt-hero__grid > .vt-portrait {
		display: block !important;
		width: 28mm !important;
		max-width: 28mm !important;
		height: 28mm !important;
		margin: 0 !important;
		border-radius: 50% !important;
		overflow: hidden !important;
	}
	.vt-portrait img {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
	.vt-hero__grid > .vt-portrait img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 50% !important;
	}

	/* ------------------------------------------------------------------
	   DIE SPALTEN

	   Ohne getoente Flaeche - die Vorlage traegt ihre Farbe im Kopfband und
	   in den Ueberschriften, eine zweite Flaeche wuerde damit konkurrieren.
	   Die Spalte bleibt ein Float, damit ihr Inhalt auf die zweite Seite
	   laufen kann; absolut positioniert waere er am Umbruch abgeschnitten.
	   Sie wird von vt-cv.js hinter das Kopfband gehaengt, sonst begaenne sie
	   auf gleicher Hoehe wie dieses.
	   ------------------------------------------------------------------ */
	.vt-print-links {
		display: block !important;
		float: left;
		width: 50mm;
		margin-right: 8mm;
	}
	#ueber-mich,
	#zeitstrahl,
	#ausbildung,
	#projekte { margin-left: 58mm !important; }

	/* Kurzprofil als eigener Abschnitt mit Ueberschrift, wie "Uebersicht"
	   in der Vorlage - frueher haing es als Klon unter dem Namen. */
	/* Buendigkeit der beiden Spalten am Seitenanfang. Die 1,2 mm sind
	   nachgemessen, nicht hergeleitet: "Kontaktdaten" steht in 7,5 pt,
	   "Ueber mich" in 9 pt, ihre Versalien beginnen deshalb an verschiedener
	   Stelle im Zeilenkasten.
	   #ueber-mich braucht die Angabe ohnehin, weil ihm im Quelltext die
	   schwebende Seitenspalte vorausgeht und .vt-section + .vt-section damit
	   nicht greift. Bei #projekte wirkt sie nur, solange der Abschnitt eine
	   Seite eroeffnet - sonst schrumpft dort schlicht der Kapitelabstand um
	   1,2 mm, was niemand sieht. */
	#ueber-mich,
	#projekte { margin-top: -1.2mm !important; }
	#ueber-mich .vt-letter__body {
		font-size: 9pt !important;
		line-height: 1.45 !important;
	}
	#ueber-mich .vt-letter__body p {
		margin: 0 0 1.6mm !important;
		font-size: 9pt !important;
		line-height: 1.45 !important;
		/* .vt-letter p setzt eine feste helle Farbe fuer den dunklen
		   Bildschirmgrund - auf Weiss waere der Absatz kaum zu lesen. */
		color: var(--vt-text) !important;
	}

	/* Die Originale stehen jetzt in der Seitenspalte. */
	#kompetenzen,
	#werte { display: none !important; }

	/* Ort und Monat am Ende, wie unter einem Anschreiben. */
	.vt-print-fuss {
		display: block !important;
		margin: 25mm 0 0 58mm !important;
		font-size: 9pt !important;
		text-align: right;
		break-inside: avoid;
	}
	.vt-print-fuss span { display: block; margin-top: 1.5mm; font-weight: 600; }

	/* Kontaktdaten als erster Block der Spalte. */
	.vt-print-kontakt p:not([class]) {
		margin: 0 0 0.6mm !important;
		font-size: 8.5pt !important;
		line-height: 1.4 !important;
	}

	/* ------------------------------------------------------------------
	   INHALT DER SEITENSPALTE
	   ------------------------------------------------------------------ */
	.vt-print-links .vt-lang,
	.vt-print-links .vt-tools,
	.vt-print-links .vt-pm-panels,
	.vt-print-links .vt-skills,
	.vt-print-links .vt-cards {
		margin-top: 0 !important;
		padding-top: 0 !important;
		border-top: none !important;
		font-size: 8.5pt !important;
	}
	/* Ohne Trennstriche gliedert der Weissraum allein. Er haengt bewusst nur
	   an der Ueberschrift: bei .vt-lang und .vt-tools steht sie IM Block und
	   ihr oberer Abstand faellt mit dessen zusammen, bei .vt-pm-panels und
	   .vt-cards davor. Ein zusaetzlicher Abstand am Block ergaebe dort das
	   Doppelte. */
	.vt-print-links .vt-tools__title {
		margin: 4mm 0 1.5mm !important;
		font-size: 7.5pt !important;
	}
	/* Goldene Haarlinie zwischen den Bloecken. Sie sitzt an der Ueberschrift,
	   weil nur die bei allen Bloecken an derselben Stelle steht. Ausgenommen
	   sind der erste Block (darueber liegt schon die Kopflinie) und das
	   Engagement - dessen Titel traegt dafuer eine eigene Klasse, weil CSS
	   keinen vorangehenden Nachbarn auswaehlen kann. */
	.vt-print-links .vt-tools__title {
		border-top: 0.25mm solid var(--vt-accent);
		padding-top: 3mm !important;
	}
	.vt-print-links .vt-print-kontakt .vt-tools__title,
	.vt-print-links .vt-tools__title--ohne-linie {
		border-top: none;
		padding-top: 0 !important;
	}
	/* "Engagement" eroeffnet Seite 2 und soll dort mit "Projekte" in der
	   rechten Spalte auf einer Hoehe stehen. Ueber padding und nicht ueber
	   margin: Raender werden am Seitenumbruch verworfen, Innenabstaende
	   nicht. Derselbe nachgemessene Betrag wie im Kopf der ersten Seite. */
	.vt-print-links .vt-tools__title--ohne-linie { padding-top: 1.2mm !important; }
	/* Erster Block: buendig mit "Ueber mich" in der rechten Spalte. */
	.vt-print-links .vt-print-kontakt .vt-tools__title { margin-top: 0 !important; }
	/* "KI-gestuetztes Arbeiten" ist der einzige Block ohne Ueberschrift. */
	/* Enger als die uebrigen Bloecke: "KI-gestuetztes Arbeiten" ist eine
	   einzige Zeile und schliesst inhaltlich an die Kompetenzen an. */
	.vt-print-links .vt-skills { margin-top: 1.5mm !important; }
	.vt-print-links .vt-lang__items { display: block !important; }
	.vt-print-links .vt-lang__items > div { margin-bottom: 0.8mm; }

	/* Werkzeuge und Kompetenzen untereinander statt fliessend: in 52 mm
	   Breite bricht eine durchlaufende Reihe an beliebiger Stelle um. */
	/* display:block auf den Chips allein genuegt nicht: die drei Behaelter
	   sind Flex-Container, in denen Flex-Elemente unabhaengig von ihrem
	   display-Wert nebeneinander bleiben. Erst wenn der Behaelter selbst kein
	   Flex mehr ist, stehen Werkzeuge und Kompetenzen untereinander. */
	.vt-print-links .vt-tools__chips,
	.vt-print-links .vt-pm-panel__methods,
	.vt-print-links .vt-skills {
		display: block !important;
	}
	.vt-print-links .vt-chip {
		display: block !important;
		font-size: 8.5pt !important;
		line-height: 1.5 !important;
	}
	/* "KI-gestuetztes Arbeiten" steht als einzige Kompetenz ohne Gruppentitel
	   am Fuss der Spalte und ginge in schwarzem Text unter. Es bekommt den
	   Goldton aus dem Kopfband, in dem dort "Projekte" und "Vertrieb" stehen.
	   Der Wert ist ausgeschrieben und NICHT var(--vt-accent): der Druckblock
	   setzt diese Variable auf das abgedunkelte #7A5A12 - genau den Ton, der
	   hier nicht gemeint ist. Zwei Selektorstufen, weil sonst die allgemeine
	   Regel .vt-chip { color: var(--vt-text) !important } gewinnt. */
	.vt-print-links .vt-chip--ki { color: #D9A441 !important; }
	.vt-print-links .vt-chip + .vt-chip::before { content: none !important; }
	/* Die Gruppentitel sollen sich farblich absetzen - die allgemeine
	   Druckregel setzt sie sonst auf die Textfarbe. */
	.vt-print-links .vt-tools__label,
	.vt-print-links .vt-pm-panel__title {
		color: var(--vt-accent) !important;
		font-family: Figtree, sans-serif !important;
		font-size: 8pt !important;
		font-weight: 700;
		margin: 2.5mm 0 1mm !important;
	}
	.vt-print-links .vt-tools__group + .vt-tools__group { margin-top: 2mm !important; }
	/* .vt-pm-panels ist am Bildschirm ein Flex-Container mit gap: 1.6rem -
	   das sind 6,8 mm, die im Druck nie zurueckgenommen waren und sich zum
	   Aussenabstand der Panels addierten. */
	.vt-print-links .vt-pm-panels {
		display: block !important;
		gap: 0 !important;
	}
	.vt-print-links .vt-pm-panel {
		border: none !important;
		padding: 0 !important;
		margin-bottom: 3mm;
	}
	/* Die Karten passen nicht in ein 42-mm-Raster, wenn die Spalte 52 mm
	   breit ist. */
	.vt-print-links .vt-card {
		display: block !important;
		border-top: none !important;
		padding: 0 0 2.5mm !important;
	}
	/* Rolle und Zeitangabe kamen fast weiss aufs Papier. Die Farbwerte werden
	   hier ausgeschrieben statt ueber die Variablen bezogen - im Ausdruck
	   zaehlt nur, dass es lesbar ist, nicht woher der Wert stammt. */
	.vt-print-links .vt-card__role {
		font-size: 8.5pt !important;
		text-transform: none;
		letter-spacing: 0;
		font-weight: 700;
		color: #7A5A12 !important;
		margin: 0 0 0.5mm !important;
	}
	.vt-print-links .vt-card h3 {
		font-family: Figtree, sans-serif !important;
		font-size: 9pt !important;
		margin: 0 !important;
		color: #1A1613 !important;
	}
	.vt-print-links .vt-card__since {
		font-size: 8pt !important;
		color: #4A4238 !important;
		margin: 0 !important;
	}
	/* Die Kontaktdaten stehen jetzt oben in der Seitenspalte; der Abschnitt
	   am Ende waere eine Dublette samt Ueberschrift und Fliesstext. */
	#kontakt { display: none !important; }

	/* Chips print as a plain list of terms; their evidence lists live in the
	   sections below anyway and would multiply the page count. */
	.vt-pm-panel {
		border: none !important;
		border-top: 1px solid var(--vt-line) !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		padding: 3mm 0 !important;
		break-inside: avoid;
	}
	/* Fliesstext gehoert nicht in einen tabellarischen Lebenslauf. */
	.vt-pm-panel__lead { display: none !important; }
	.vt-pm-panel__title { font-size: 11pt !important; margin-bottom: 1.5mm !important; }
	.vt-chip {
		border: none !important;
		background: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		color: var(--vt-text) !important;
		font-size: 0.95rem !important;
	}
	.vt-chip--komp::after,
	.vt-chip--ki::before { display: none !important; }
	.vt-chip + .vt-chip::before { content: "\00B7"; margin-right: 0.6rem; color: var(--vt-line); }
	.vt-pm-panel__methods, .vt-skills,
	.vt-tools__chips { gap: 0 0.6rem !important; }
	/* Auf Papier ist die Rasterspalte verschenkter Platz. */
	.vt-tools__group { display: block !important; }
	.vt-tools__label { color: var(--vt-text) !important; }
	.vt-tools { break-inside: avoid; }

	/* Engagement folgt demselben Muster: Zeitangabe links, Rolle und
	   Organisation rechts. Was ein Serviceclub ist, braucht ein Lebenslauf
	   nicht zu erklaeren - der beschreibende Absatz ist jeweils das letzte
	   Kind der Karte. */
	.vt-card {
		border: none !important;
		border-top: 1px solid var(--vt-line) !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		break-inside: avoid;
		display: grid !important;
		grid-template-columns: 42mm 1fr;
		column-gap: 6mm;
		align-items: baseline;
		padding: 2.5mm 0 !important;
	}
	.vt-card__since {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0 !important;
		font-size: 9.5pt !important;
	}
	.vt-card__role { grid-column: 2; grid-row: 1; margin: 0 !important; }
	.vt-card h3 {
		grid-column: 2;
		grid-row: 2;
		margin: 0 !important;
		font-size: 11pt !important;
	}
	/* Ueber das Fehlen einer Klasse statt ueber :last-child: der beschreibende
	   Absatz ist der einzige ohne Klasse. Faellt er einmal weg, verschwaende
	   :last-child sonst stillschweigend die Zeitangabe. */
	.vt-card > p:not([class]) { display: none !important; }
	/* Untereinander statt nebeneinander - sonst muesste die Zeitspalte in die
	   halbe Seitenbreite passen und braeche den Rhythmus der anderen
	   Abschnitte. */
	.vt-cards {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		margin-top: 0 !important;
	}

	/* Die Kontaktzeile wird jetzt im Briefkopf gesetzt, siehe oben. Die alte
	   Regel hier galt dem Kontaktabschnitt, der im Druck ganz entfaellt. */

	a { text-decoration: none !important; color: var(--vt-text) !important; }
}