/*
 * "Der Schnitt" — the approved band system.
 *
 * The page is a sequence of bands running edge to edge. One angle, held in
 * --qv-fall, and it means something: THE CUT MARKS THE HAND-OVER. A band is
 * entered through the cut and ends straight, which is why there are two
 * diagonals on a page and not five.
 *
 * Rules this file implements are written down in design/DESIGN-RULES.md and in
 * the `web-design-quality` skill. Read those before adding to it.
 *
 * Class prefix `qv-b-` = band. Nothing here may use the transitional aliases at
 * the foot of tokens.css.
 */

/* --- shared band mechanics -------------------------------------------------- */

/* Der Seitenabstand ist der groessere von zwei Werten: dem Seitenrand, oder dem,
   was noetig ist, um den Inhalt auf --qv-inhalt zu deckeln und zu zentrieren.
   Solange der Schirm schmaler ist als das Mass, ist der zweite Wert negativ und
   `max()` nimmt den Seitenrand — deshalb aendert sich unterhalb von rund 1770px
   nichts. Ein Wrapper waere die Alternative gewesen und haette zwoelf
   Inhaltsdateien angefasst; das hier ist eine Zeile und kann nicht vergessen
   werden. Die `clip-path`-Diagonalen rechnen gegen den Rahmen des Bandes, nicht
   gegen seinen Innenraum, und bleiben davon unberuehrt. */
.qv-b {
	padding-inline: max(var(--qv-gutter), (100% - var(--qv-inhalt)) / 2);
}

/* Body copy uses the width it has. A narrow column beside empty space reads as
   a mistake, not as calm. */
.qv-b p {
	max-width: var(--qv-measure);
	text-wrap: pretty;
}

/* --- band 1: the blue field -------------------------------------------------- */
/* The cut sits only at the bottom. The dark band below needs no clip of its own:
   it shows through the triangle removed here. One edge instead of two. */

.qv-b-feld {
	position: relative;
	z-index: 2;
	background: var(--qv-blue);
	padding-block: clamp(1.8rem, 4.4vw, 3.8rem) calc(var(--qv-fall) * 0.5 + clamp(1rem, 2vw, 1.6rem));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--qv-fall)), 0 100%);
}

.qv-b-feld h1,
.qv-b-schlag {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h1);
	line-height: 0.94;
	letter-spacing: -0.04em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* Headline breaks are set in the content, not left to the viewport. */
.qv-b-schlag span {
	display: block;
}

.qv-b-feld .qv-b-lede {
	margin-top: clamp(0.9rem, 2vw, 1.6rem);
	font-size: var(--qv-text-lede);
	color: #16303F;
}

.qv-b-feld .qv-b-lede strong {
	color: var(--qv-ink);
	font-weight: 700;
}

/* The hero plays once on load, then the page stands still. */
.qv-b-an {
	opacity: 0;
	transform: translateY(0.5em);
	animation: qv-auftritt 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.qv-b-an--1 { animation-delay: 0.05s; }
.qv-b-an--2 { animation-delay: 0.5s; }
.qv-b-an--3 { animation-delay: 0.85s; }

@keyframes qv-auftritt {
	to { opacity: 1; transform: none; }
}

/* --- band 2: the action ------------------------------------------------------ */
/* Exactly one number here, the company's. Sofia's demo line lives beside the
   Sofia section — otherwise someone wanting a quote reaches the bot. */

.qv-b-tat {
	position: relative;
	margin-top: calc(var(--qv-fall) * -1);
	background: var(--qv-ink);
	color: #FFFFFF;
	padding-block: calc(var(--qv-fall) + clamp(0.8rem, 1.6vw, 1.3rem)) clamp(1rem, 2vw, 1.6rem);
}

.qv-b-posten-reihe {
	display: grid;
	gap: clamp(1.2rem, 3vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

@media (min-width: 760px) {
	.qv-b-posten-reihe {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

/* Equally important offers get the same construction: label, large figure, one
   line of explanation. A number beside a small outlined button is two shapes for
   one job, and the button looks misplaced wherever it is put. */
.qv-b-posten {
	display: block;
	color: inherit;
	text-decoration: none;
}

.qv-b-posten__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.76);
	margin-bottom: 0.4rem;
}

.qv-b-posten__gross {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	color: #FFFFFF;
	transition: color 0.15s;
}

.qv-b-posten:hover .qv-b-posten__gross,
.qv-b-posten:focus-visible .qv-b-posten__gross {
	color: var(--qv-green);
}

.qv-b-posten__dazu {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--qv-text-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.86);
}

.qv-b-posten--ruf .qv-b-posten__gross { font-size: clamp(1.85rem, 4.4vw, 3.6rem); }

/* The band used to carry the entry price beside the number. It now appears once
   on the page, on the core product's card, where it means something. What sits
   here instead is not a second offer but the explanation of this one — which is
   why it is set as running text and not as a second label-and-figure. */
/* Fliesstext auf Tinte traegt 500, nicht 400 — siehe .qv-b-karte--kern p. */
.qv-b-tat__satz {
	font-size: var(--qv-text-lede);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

/* Conditions belong under the call, not at the right edge where they related to
   nothing. A rule across the full width makes them the band's footnote. */
.qv-b .qv-b-fuss {
	margin-top: clamp(1rem, 2.2vw, 1.6rem);
	padding-top: clamp(0.7rem, 1.6vw, 1.1rem);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	font-size: var(--qv-text-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
	max-width: none;
}

.qv-b-fuss span::before {
	content: "+ ";
	color: var(--qv-green);
	font-weight: 700;
}

/* --- band 3: the proof points ------------------------------------------------ */
/* Register rows, not stat tiles: the figure sits BESIDE its statement. A big
   number over a small label is the answer every second page gives. */

.qv-b-belege {
	padding-block: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1.2rem, 2.6vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
}

@media (min-width: 900px) {
	.qv-b-belege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qv-b-beleg:nth-child(2) { border-top: 1px solid var(--qv-hair); }
}

.qv-b-beleg {
	/* --- the register-row alignment rule ---------------------------------
	 * Owner, 2026-08-18, drawing the line through the middle of the figure:
	 * the statement centres on THAT line — the whole statement, not its first
	 * line. For a one-line statement the two readings are identical; for a
	 * two-line one they are 13px apart, and it was the two-line rows that
	 * looked wrong.
	 *
	 * So the row centres its three items on one another. Box centres are ink
	 * centres here: the figure runs at line-height 1 and overflows its box
	 * evenly top and bottom, and a paragraph's half-leading is symmetric, so
	 * centring the boxes centres the ink to within a pixel. No offset to
	 * compute, and nothing that can drift with the viewport — which is what
	 * three earlier attempts at this row all failed at.
	 *
	 * History, so it is not re-litigated: `start` plus a hand-tuned
	 * `margin-top: 0.3rem` on the icon measured right at 1440 and nowhere else;
	 * `baseline` hung a 40px figure and 17px text from one line and the figure
	 * towered; `start` plus a computed half-line-box offset put the FIRST line
	 * on the figure's centre, which is the reading Owner has now corrected.
	 */
	--qv-figur: clamp(1.6rem, 2.9vw, 2.5rem);
	--qv-satz: clamp(1.02rem, 1.15vw, 1.12rem);
	--qv-satz-zeile: 1.6;
	--qv-zeichen: 1.9rem;

	display: grid;
	/* The figure column must carry the longest figure on one line, or the row
	   loses its shared baseline. */
	grid-template-columns: 1.9rem minmax(0, 11.5rem) minmax(0, 1fr);
	gap: clamp(0.5rem, 1.4vw, 1.2rem);
	align-items: center;
	/* Two rounds of Owner feedback on this one row, so the reasoning is written
	   down. `center` put a 40px figure and a two-line statement each in the
	   middle of the row, so the statement began above the figure's cap and the
	   two looked unrelated. `baseline` then hung both from one baseline, which
	   for a 30px-tall figure beside 12px-tall text means the figure towers over
	   the line — worse, not better.
	   What a register row actually wants: the figure OPTICALLY CENTRED on the
	   FIRST line of its statement, with any further lines flowing underneath.
	   That is start-alignment plus one correction, computed below, and it looks
	   identical whether a statement runs to one line or two. */
	padding-block: clamp(0.85rem, 1.8vw, 1.25rem);
	border-bottom: 1px solid var(--qv-hair);
}

.qv-b-beleg:first-child { border-top: 1px solid var(--qv-hair); }

.qv-b-beleg strong {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-figur);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--qv-green-ink);
	white-space: nowrap;
}

.qv-b-beleg:nth-child(2) strong,
.qv-b-beleg:nth-child(4) strong { color: var(--qv-blue-ink); }

.qv-b-beleg p {
	font-size: var(--qv-satz);
	line-height: var(--qv-satz-zeile);
	margin: 0;
	color: var(--qv-ink-2);
	max-width: none;
}

/* Icons are drawn to match the wordmark: same stroke weight, same round
   terminals, coloured like the figure they belong to. */
.qv-b-beleg svg {
	width: var(--qv-zeichen);
	height: var(--qv-zeichen);
	display: block;
	color: var(--qv-green-ink);
	/* No correction of its own — the row centres it with everything else. */
	margin-top: 0;
}

.qv-b-beleg:nth-child(2) svg,
.qv-b-beleg:nth-child(4) svg { color: var(--qv-blue-ink); }

.qv-b-beleg svg * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 820px) {
	.qv-b-beleg {
		grid-template-columns: 1.9rem minmax(0, 1fr);
		gap: 0.15rem 0.7rem;
		align-items: start;
	}
	.qv-b-beleg svg { grid-row: span 2; margin-top: 0.15rem; }
}

/* --- band 4: the explanation ------------------------------------------------- */
/* The page's second and last diagonal. The band ends straight at the bottom. */

.qv-b-ablauf {
	margin-top: clamp(1rem, 2.4vw, 2rem);
	background: var(--qv-mist);
	padding-block: calc(var(--qv-fall) + clamp(1rem, 2vw, 1.6rem)) clamp(1.6rem, 3.4vw, 3rem);
	clip-path: polygon(0 var(--qv-fall), 100% 0, 100% 100%, 0 100%);
}

/* Heading left, the demo line right. Two columns have a reason here: the right
   column is exactly what the left one is talking about. */
.qv-b-ablauf__kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 3rem);
	align-items: start;
}

@media (min-width: 860px) {
	.qv-b-ablauf__kopf { grid-template-columns: minmax(0, 1.25fr) minmax(0, auto); }

	/* Owner 2026-08-18, twice. The demo number sits level with the headline it
	   belongs to, and "level" means the two BASELINES, not the two optical
	   centres — centring them left the number visibly floating above the line of
	   the headline.
	   Both are set in the display face at line-height 1, so the gap between
	   centre and baseline is the same fraction of each type size, and the
	   correction is roughly 0.28 x (headline size - number size). Measured with a
	   zero-height inline probe: the number sat 9px high at 1440px and 5px high at
	   900px. -1.7rem lands inside 2px of correct across that whole range, which
	   for a 37px figure is under the threshold where anyone can see it — a clamp
	   fitted to a 4px spread would be arithmetic for its own sake. */
	.qv-b-probe { margin-top: -1.7rem; }
}

.qv-b-ablauf h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* Scoped to the band's own head, NOT to the band. `.qv-b-ablauf p` is (0,1,1),
   the same weight as `.qv-b-beleg p` and further down the file, so it silently
   captured every register row nested inside this band on /telefonservice/ —
   they lost their font size AND the computed centring offset, and the figures
   sat 5.8px high there while measuring 0.3px true on the homepage. A band rule
   that reaches into whatever is placed inside the band is the trap; the rule
   belongs to the element it was written for. */
.qv-b-ablauf__kopf p {
	margin-top: 0.8rem;
	color: var(--qv-ink-2);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
}

/* The demo line is try-it, not buy-it. Hence green, and hence the line saying
   who answers. */
.qv-b-probe {
	display: block;
	text-decoration: none;
	border-top: 3px solid var(--qv-green);
	padding-top: clamp(0.7rem, 1.4vw, 1rem);
	max-width: 22rem;
}

.qv-b-probe__kennung {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
	margin-bottom: 0.35rem;
}

.qv-b-probe__nummer {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.55rem, 3vw, 2.35rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-green-ink);
	transition: color 0.15s;
}

.qv-b-probe:hover .qv-b-probe__nummer,
.qv-b-probe:focus-visible .qv-b-probe__nummer { color: var(--qv-ink); }

.qv-b-probe__dazu {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--qv-text-sm);
	color: var(--qv-ink-2);
	max-width: none;
}

.qv-b-klingel {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	animation: qv-klingeln 1.7s infinite;
}

@keyframes qv-klingeln {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.5); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.qv-b-an { opacity: 1; transform: none; animation: none; }
	.qv-b-klingel { animation: none; }
}

/* --- band 4: the drawing ----------------------------------------------------- */
/* Ported from design/r11-schnitt-startseite.html, class names moved to the qv-b-
   prefix and every colour taken from a token instead of a literal, so the
   palette stays in one place.
   Stroke weights and type sizes are heavier than a normal diagram would use —
   otherwise the drawing falls apart beside the poster type. Every pair is
   contrast-checked against this band's ground. */

.qv-b-szene-rahmen {
	margin-top: clamp(1.2rem, 2.6vw, 2rem);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Mindestbreite = viewBox-Breite, ohne Haltepunkt. Ein Haltepunkt war hier der
   Fehler: bei genau 1180px Schirmbreite greift die Regel nicht mehr, der
   Seitenrand zieht aber trotzdem 80px ab — die Beschriftung kam mit 13,3px
   heraus statt mit ihren gezeichneten 14,5px. Ohne Haltepunkt gibt es das
   Fenster nicht. Wo der Rahmen breiter ist als 1180, entsteht keine Scrollleiste,
   weil das Kind hineinpasst. */
.qv-b-szene {
	display: block;
	width: 100%;
	min-width: 1180px;
	height: auto;
	max-height: 360px;
}

.qv-b-szene text {
	font-family: var(--qv-font-sans);
	fill: var(--qv-ink);
}

.qv-b-szene-titel {
	font-size: 19px;
	font-weight: 700;
	fill: #0E2E4D;
}

.qv-b-szene-klein {
	font-size: 14.5px;
	fill: var(--qv-ink-2);
}

.qv-b-szene-klein--auf-blau { fill: #123A5E; }
.qv-b-szene-klein--blau { fill: var(--qv-blue-ink); font-weight: 700; }
.qv-b-szene-klein--gruen { fill: var(--qv-green-ink); font-weight: 700; }

/* Owner 2026-08-18: auf den Typboden gehoben, wie die Karte auf der Startseite
   am selben Tag. „Extern", „Ihr Haus" und „Im Hintergrund" tragen Information
   und lagen bei wirksam 13px — die Zeichnungen scrollen in ihrem eigenen Rahmen,
   der Skalierungsfaktor ist also 1,0 und die angeschriebene Groesse ist auch die
   wirksame. 14,5px wie die Schwesterklasse `.qv-b-szene-klein`. */
.qv-b-szene-marke {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	fill: #5A6461;
}

.qv-b-szene-gross {
	font-size: 16px;
	font-weight: 700;
}

.qv-b-leitung {
	stroke: var(--qv-line);
	stroke-width: 3;
	fill: none;
}

.qv-b-leitung--aktiv {
	stroke: var(--qv-green-cta);
	stroke-width: 3.5;
}

/* Outside: everyone calls at the same time. */
.qv-b-anrufer circle {
	fill: #FFFFFF;
	stroke: var(--qv-line);
	stroke-width: 2.5;
}

.qv-b-anrufer path {
	fill: var(--qv-blue-ink);
	stroke: none;
}

.qv-b-welle {
	fill: none;
	stroke: var(--qv-blue-ink);
	stroke-width: 3;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}

@keyframes qv-welle {
	0% { opacity: 0.85; transform: scale(0.55); }
	70% { opacity: 0; transform: scale(1.6); }
	100% { opacity: 0; }
}

.qv-b-anrufer--1 .qv-b-welle { animation: qv-welle 2.6s ease-out infinite; }
.qv-b-anrufer--2 .qv-b-welle { animation: qv-welle 2.6s ease-out 0.87s infinite; }
.qv-b-anrufer--3 .qv-b-welle { animation: qv-welle 2.6s ease-out 1.74s infinite; }

.qv-b-punkt {
	fill: var(--qv-blue-ink);
	/* Owner 2026-08-18: "Kugeln alignen auf dem Strich". They did not. Each dot
	   used to be translated along a straight vector while its line is a curve,
	   so the outer two drifted off their own leitung by roughly 20px in the
	   middle of the run. A motion path fixes it at the source: the dot now walks
	   the same `d` the line is drawn from, so the two cannot disagree.
	   The circles therefore sit at cx=0/cy=0 — offset-path positions them, and a
	   cx would be added on top of it. */
	offset-rotate: 0deg;
}

@keyframes qv-lauf {
	0% { offset-distance: 0%; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

.qv-b-punkt--1 {
	offset-path: path("M118 64 C 230 64, 250 150, 340 150");
	animation: qv-lauf 2.6s linear infinite;
}

.qv-b-punkt--2 {
	offset-path: path("M118 150 L340 150");
	animation: qv-lauf 2.6s linear 0.87s infinite;
}

.qv-b-punkt--3 {
	offset-path: path("M118 236 C 230 236, 250 150, 340 150");
	animation: qv-lauf 2.6s linear 1.74s infinite;
}

/* Sofia runs several conversations at once — three tracks moving independently.
   That is precisely the difference from a human, so this is the one loop the
   page is allowed to keep. */
.qv-b-sofia { fill: var(--qv-blue); }
.qv-b-spur-grund { fill: rgba(255, 255, 255, 0.5); }

.qv-b-spur {
	fill: #FFFFFF;
	transform-origin: left center;
	transform-box: fill-box;
}

@keyframes qv-reden {
	0%, 100% { transform: scaleX(0.16); }
	50% { transform: scaleX(1); }
}

.qv-b-spur--1 { animation: qv-reden 1.9s ease-in-out infinite; }
.qv-b-spur--2 { animation: qv-reden 2.6s ease-in-out 0.35s infinite; }
.qv-b-spur--3 { animation: qv-reden 2.2s ease-in-out 0.8s infinite; }

.qv-b-erledigt {
	opacity: 0;
	animation: qv-erledigt 2.6s ease-out infinite;
}

.qv-b-erledigt circle { fill: var(--qv-green-cta); }

.qv-b-erledigt path {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@keyframes qv-erledigt {
	0% { opacity: 0; transform: translate(0, 0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translate(6px, 30px); }
}

/* Same rule for the hand-over: the dot walks the green leitung's own path. */
.qv-b-weiter {
	offset-path: path("M700 150 L918 150");
	animation: qv-weiter 5.2s linear infinite;
}

@keyframes qv-weiter {
	0% { offset-distance: 0%; opacity: 0; }
	8% { opacity: 1; }
	46% { opacity: 1; }
	52% { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 100%; opacity: 0; }
}

.qv-b-mensch__kreis { fill: var(--qv-green); }
.qv-b-mensch__figur { fill: var(--qv-ink); }

.qv-b-mensch__bogen {
	fill: none;
	stroke: var(--qv-ink);
	stroke-width: 7;
	stroke-linecap: round;
}

/* The note stays put — if it vanished between cycles it would tear a hole in
   the drawing. It only speaks up more clearly once per round. */
.qv-b-assist { animation: qv-assist 5.2s ease-out infinite; }

.qv-b-assist rect,
.qv-b-assist path {
	fill: #FFFFFF;
	stroke: var(--qv-line);
	stroke-width: 2;
	stroke-linejoin: round;
}

@keyframes qv-assist {
	0%, 48% { opacity: 0.5; transform: translateY(5px); }
	60%, 92% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0.5; transform: translateY(5px); }
}

/* Shrunk to phone width the drawing would be illegible. It keeps a minimum
   width and scrolls inside its own frame — the page itself still never scrolls
   horizontally. */
/* Gemessen 2026-08-18, und es war falsch herum geloest: die Mindestbreite lag
   bei 620px, also bei 0,53 der viewBox-Breite — die 14,5px-Beschriftung kam bei
   320 bis 620px Schirmbreite mit 7,6px heraus und bei 1024px mit 11,5px. Der
   Boden dieses Projekts ist --qv-text-xs = 14,4px, Owners eigene Ansage
   ("readability is very important"). Eine Zeichnung, deren Beschriftung niemand
   lesen kann, ist keine Zeichnung.

   Die Mindestbreite ist deshalb jetzt die viewBox-Breite selbst: bei 1180px
   rendert die Beschriftung mit ihren gezeichneten 14,5px, darueber waechst sie
   mit. Wo der Schirm schmaler ist, scrollt der Rahmen — die Seite selbst
   scrollt weiterhin nie. Das ist der Handel, den die Regel in
   `web-design-quality` meint: lieber schieben als blind raten.

   Betrifft auch die Sofia-Szene auf der Startseite, die denselben Rahmen
   benutzt und dasselbe Problem hatte. Ab 1180px aendert sich nichts. */
/* Kein Haltepunkt mehr noetig — die Mindestbreite steht jetzt an der Grundregel.
   Nur die Hoehenkappe faellt schmal weg, damit die Zeichnung dort nicht zusaetzlich
   herunterskaliert und die Beschriftung doch wieder verliert. */
@media (max-width: 1179px) {
	.qv-b-szene {
		max-height: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qv-b-welle,
	.qv-b-punkt,
	.qv-b-spur,
	.qv-b-erledigt,
	.qv-b-weiter,
	.qv-b-assist { animation: none; }

	.qv-b-assist,
	.qv-b-erledigt { opacity: 1; }

	.qv-b-spur { transform: scaleX(0.7); }
}

/* --- band 5: the services ---------------------------------------------------- */
/* Owner's call, 2026-08-18: four cards, one weighted as the core product with
   the entry price and a button, the other three quiet — the pattern from
   noxtec.de. It is deliberately the one place on this site that uses cards; the
   Branchen index directly below stays a register so the page does not turn into
   a grid of boxes.
   The full price table lives on /telefonservice/ now. On the homepage the figure
   appears exactly once. */

.qv-b-leistungen {
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

.qv-b-marke-zeile {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
	margin-bottom: 0.7rem;
}

.qv-b-marke-zeile::before {
	content: "";
	width: 2.2rem;
	height: 3px;
	background: var(--qv-green-cta);
	flex: none;
}

.qv-b-karten {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.9rem, 1.8vw, 1.5rem);
	align-items: stretch;
}

@media (min-width: 620px) {
	.qv-b-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Drei Karten in einem Vierer- oder Zweierraster lassen eine Luecke: bei vier
   Spalten bleibt eine leer, bei zwei steht die dritte allein in der zweiten
   Reihe. Beides ist das Loch aus Regel 6a. `--drei` springt deshalb direkt von
   einer auf drei Spalten. Gebraucht auf /ki-loesungen/, dem Tor zu den drei
   KI-Seiten. */
@media (min-width: 820px) {
	.qv-b-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 620px) and (max-width: 819.98px) {
	.qv-b-karten--drei { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1100px) {
	.qv-b-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.qv-b-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.qv-b-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-panel);
	background: var(--qv-bg);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s;
}

.qv-b-karte:hover,
.qv-b-karte:focus-visible {
	border-color: var(--qv-green-cta);
}

.qv-b-karte__zeichen {
	width: 2.7rem;
	height: 2.7rem;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--qv-mist);
	margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}

/* Same stroke weight and round terminals as the wordmark, like the proof rows. */
.qv-b-karte__zeichen svg {
	width: 1.45rem;
	height: 1.45rem;
	display: block;
	color: var(--qv-green-ink);
}

.qv-b-karte__zeichen svg * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qv-b-karte h3 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.12rem, 1.5vw, 1.32rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	margin: 0 0 0.5rem;
	text-wrap: balance;
}

.qv-b-karte p {
	font-size: 1.02rem;
	color: var(--qv-ink-2);
	margin: 0;
	max-width: none;
}

/* Pushed to the foot so the four cards share one baseline for their link. */
.qv-b-karte__fuss {
	margin-top: auto;
	padding-top: clamp(1rem, 2vw, 1.5rem);
}

.qv-b-karte__mehr {
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--qv-green-ink);
}

.qv-b-karte:hover .qv-b-karte__mehr,
.qv-b-karte:focus-visible .qv-b-karte__mehr { color: var(--qv-ink); }

/* --- the core product ---------------------------------------------------- */
/* Ink ground, and it stands proud of the row: the one card that carries a price
   and a filled control. */

.qv-b-karte--kern {
	background: var(--qv-ink);
	border-color: var(--qv-ink);
}

@media (min-width: 1100px) {
	.qv-b-karte--kern {
		margin-block: calc(clamp(0.9rem, 1.8vw, 1.5rem) * -1);
		padding-block: calc(clamp(1.1rem, 2vw, 1.6rem) + clamp(0.9rem, 1.8vw, 1.5rem));
	}
}

.qv-b-karte--kern:hover,
.qv-b-karte--kern:focus-visible { border-color: var(--qv-green); }

.qv-b-karte--kern h3 { color: #FFFFFF; }
/* Owner 2026-08-18: "die Schrift ist zu duenn". Der Kontrast war mit 11,7:1 nie
   das Problem — helle Type auf dunklem Grund wirkt schlanker als dieselbe Type
   auf hellem. Ausgeglichen wird das mit Gewicht. Gilt fuer jeden dunklen Grund
   auf dieser Seite. */
.qv-b-karte--kern p { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.qv-b-karte--kern .qv-b-karte__zeichen { background: rgba(255, 255, 255, 0.12); }
.qv-b-karte--kern .qv-b-karte__zeichen svg { color: var(--qv-green); }

.qv-b-karte__kennzeichen {
	position: absolute;
	top: clamp(1.1rem, 2vw, 1.6rem);
	inset-inline-end: clamp(1.1rem, 2vw, 1.6rem);
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qv-ink);
	background: var(--qv-green);
	border-radius: 999px;
	padding: 0.3rem 0.6rem;
}

@media (min-width: 1100px) {
	.qv-b-karte--kern .qv-b-karte__kennzeichen {
		top: calc(clamp(1.1rem, 2vw, 1.6rem) + clamp(0.9rem, 1.8vw, 1.5rem));
	}
}

.qv-b-karte__ab {
	display: block;
	font-size: var(--qv-text-xs);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0.15rem;
}

.qv-b-karte__geld {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: #FFFFFF;
	white-space: nowrap;
}

/* Traegt Information („/ Monat"), faellt also nicht unter den Typboden. 0.44em
   sind nur oberhalb von ~1440px ueber 14,4px — max() haelt den Boden unten und
   laesst die Einheit oben mit der Zahl mitwachsen. Owner 2026-08-18. */
.qv-b-karte__geld small {
	font-size: max(var(--qv-text-xs), 0.44em);
	font-weight: 600;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.82);
}

.qv-b-karte__knopf {
	display: block;
	margin-top: clamp(0.8rem, 1.6vw, 1.1rem);
	text-align: center;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--qv-ink);
	background: var(--qv-green);
	border-radius: var(--qv-radius-control);
	padding: 0.72rem 1rem;
	min-height: 44px;
}

.qv-b-karte--kern:hover .qv-b-karte__knopf,
.qv-b-karte--kern:focus-visible .qv-b-karte__knopf { background: #A8D91F; }

/* --- band 6: the Branchen index ---------------------------------------------- */
/* An editorial index, not a three-card grid: full-width rows, names at display
   scale, the arrow only on hover. Cards would have made five equal things look
   like three plus two leftovers. */

.qv-b-branchen {
	background: var(--qv-blue);
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

.qv-b-branchen h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* Auf --qv-blue traegt Fliesstext ebenfalls 500. Der Kontrast lag mit 6,3:1
   ueber der Anforderung; duenn wirkte es trotzdem. Volle Tinte sind 8,3:1. */
.qv-b-branchen > p {
	margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
	font-size: var(--qv-text-lede);
	font-weight: 500;
	color: var(--qv-ink);
}

.qv-b-index {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 1px solid rgba(24, 23, 22, 0.34);
	/* Der Deckel von heute Vormittag ist hier RAUS und durch --qv-inhalt am Band
	   ersetzt. Er war die richtige Diagnose mit dem falschen Hebel: er stoppte die
	   wachsende Luecke, liess das Register dafuer 262px vor der Kante aller anderen
	   Elemente enden. Jetzt deckelt der Inhaltskasten die ganze Zeile, die Textspur
	   nimmt den Rest, und der Absatz darin behaelt seine Lesebreite. Damit endet die
	   Haarlinie buendig mit jedem anderen Band, und nur das letzte Wort hoert
	   frueher auf — was Text nun einmal tut. */
}

.qv-b-index__zeile {
	display: grid;
	/* Die Namen sind auf ein Wort gekuerzt, damit diese Spur schmal sein kann:
	   bei 30rem begann die Erklaerung auf breiten Schirmen erst in der Mitte und
	   die Zeile fiel auseinander (Owner: "sieht weit auseinander aus"). Der
	   Zusatz, der vorher im Namen stand, steht jetzt in der Zeile daneben. */
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 1.6rem;
	/* Die Textspur ist gedeckelt statt 1fr: bei 1920 fuellte ein 1fr-Track nur
	   60 Prozent seiner Breite — wieder eine Spalte, die breiter ist als ihr
	   Inhalt. Der Rest der Zeile geht jetzt zwischen Text und Pfeil, und der
	   Pfeil sitzt am Zeilenende, wo ein Register ihn hat. */
	justify-content: space-between;
	gap: 0.35rem clamp(0.9rem, 1.6vw, 1.6rem);
	align-items: baseline;
	padding-block: clamp(0.8rem, 1.7vw, 1.15rem);
	border-bottom: 1px solid rgba(24, 23, 22, 0.34);
	text-decoration: none;
	color: var(--qv-ink);
}

.qv-b-index__name {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3.1vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
}

/* War 0,95rem in #16303F — Bildunterschriften-Groesse fuer die einzige
   Erklaerung, die die Zeile ueberhaupt hat. Jetzt Lesegroesse, volle Tinte, 500.
   Zwei Klassen im Selektor, weil `.qv-b p` (0,1,1) sonst die Messbreite von
   72ch durchsetzt und die Zeile bei 754px statt 999px umbricht. */
.qv-b-index .qv-b-index__dazu {
	/* Die Spur fuellt die Zeile, der Absatz behaelt seine Lesebreite. */
	max-width: 62rem;
	font-size: clamp(1rem, 1.3vw, 1.24rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--qv-ink);
	margin: 0;
	max-width: none;
}

.qv-b-index__pfeil {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--qv-ink);
	opacity: 0;
	transform: translateX(-0.35rem);
	transition: opacity 0.15s, transform 0.15s;
	justify-self: end;
}

.qv-b-index__zeile:hover,
.qv-b-index__zeile:focus-visible {
	background: rgba(255, 255, 255, 0.42);
}

.qv-b-index__zeile:hover .qv-b-index__pfeil,
.qv-b-index__zeile:focus-visible .qv-b-index__pfeil {
	opacity: 1;
	transform: none;
}

@media (max-width: 760px) {
	.qv-b-index__zeile { grid-template-columns: minmax(0, 1fr) 1.6rem; }
	.qv-b-index__dazu { grid-column: 1 / -1; margin-top: 0.2rem; }
	.qv-b-index__pfeil { opacity: 1; transform: none; }
}

/* The index band, moved onto the quiet ground and entered through a cut. Used on
   /referenzen/, where the five verticals are the same five things as on the
   homepage and therefore keep the same construction — only the ground changes,
   because the band above it is white. */
.qv-b-branchen--nebel {
	background: var(--qv-mist);
	margin-top: clamp(1rem, 2.4vw, 2rem);
	padding-block: calc(var(--qv-fall) + clamp(1rem, 2vw, 1.6rem)) clamp(2rem, 4vw, 3.4rem);
	clip-path: polygon(0 var(--qv-fall), 100% 0, 100% 100%, 0 100%);
}

/* --- band 7: references and the partner ------------------------------------- */
/* Sits between the blue index and the green close, so it is white: three
   saturated bands in a row would stop reading as a sequence. It adds no
   diagonal — the page's two cuts are spent.
   The band carries exactly one partner today. It is therefore built as a panel
   that states what it is, not as a logo strip with a single logo floating in
   it, which is what an empty row of partners always looks like. When more
   logos arrive they go into .qv-b-partner__reihe and the panel keeps working. */

.qv-b-referenzen {
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

.qv-b-referenzen h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* :not(.qv-b-marke-zeile) — a bare `p` here is (0,2,1) and beats the eyebrow's
   own (0,1,0) rule wherever it sits in the file, so the label came out at lede
   size in ink-2 instead of xs in green. */
.qv-b-referenzen .qv-b-kopfzeile p:not(.qv-b-marke-zeile) {
	margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
	font-size: var(--qv-text-lede);
	color: var(--qv-ink-2);
}

.qv-b-weiter-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: clamp(0.35rem, 0.9vw, 0.7rem);
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--qv-green-ink);
	text-decoration: underline;
	text-decoration-color: var(--qv-green-cta);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.qv-b-weiter-link:hover,
.qv-b-weiter-link:focus-visible {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

/* --- the customer wall ------------------------------------------------------ */
/* Owner, 2026-08-18: pages that turn left every five seconds, in a loop. It is
   the second exception to the one-loop rule and the narrower one — a scrolling
   strip was built first and dropped. The wall stands still for four and a half
   seconds and then moves once, which is a different thing from crawling.

   Seamlessness comes from the markup, not from here: the track carries one extra
   copy of the first page, the animation ends on it, and the cycle restarts on the
   real first page. Two identical frames, so the reset cannot be seen. */

.qv-b-logowand {
	margin-top: clamp(1.4rem, 3vw, 2.2rem);
	overflow: hidden;
}

.qv-b-logowand__lauf {
	display: flex;
	/* Holds are flat keyframe pairs, so this curve only ever shapes the turn. */
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	animation-iteration-count: infinite;
	animation-duration: var(--qv-blaetter-dauer, 10s);
}

/* Stops for anyone actually looking at a logo — pointer or keyboard. */
.qv-b-logowand:hover .qv-b-logowand__lauf,
.qv-b-logowand:focus-within .qv-b-logowand__lauf {
	animation-play-state: paused;
}

.qv-b-logowand__seite {
	flex: 0 0 100%;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--qv-logo-spalten, 6), minmax(0, 1fr));
	/* The lattice is drawn with one border per cell; the page supplies the two
	   edges a cell has no border for. */
	border-top: 1px solid var(--qv-hair);
	border-left: 1px solid var(--qv-hair);
}

/* Percentages on the track resolve against the TRACK's own width, not the
   frame's — so the track has to BE as wide as all its slides, or a -33.33%
   shift moves a third of one page instead of a whole one. That was the bug on
   the first build: `flex: 0 0 100%` made the pages overflow a track that stayed
   frame-width, and the wall twitched instead of turning.
   One page therefore equals 100/slides in both places, which is also why each
   slide count needs its own pair of rules. */
.qv-b-logowand--seiten-2 .qv-b-logowand__lauf {
	width: 300%;
	animation-name: qv-blaettern-2;
}

.qv-b-logowand--seiten-2 .qv-b-logowand__seite { flex-basis: 33.3333%; }

.qv-b-logowand--seiten-3 .qv-b-logowand__lauf {
	width: 400%;
	animation-name: qv-blaettern-3;
}

.qv-b-logowand--seiten-3 .qv-b-logowand__seite { flex-basis: 25%; }

@keyframes qv-blaettern-2 {
	0%, 45% { transform: translateX(0); }
	50%, 95% { transform: translateX(-33.3333%); }
	100% { transform: translateX(-66.6666%); }
}

@keyframes qv-blaettern-3 {
	0%, 30% { transform: translateX(0); }
	33.3333%, 63.3333% { transform: translateX(-25%); }
	66.6666%, 96.6666% { transform: translateX(-50%); }
	100% { transform: translateX(-75%); }
}

.qv-b-logo {
	display: grid;
	place-items: center;
	min-width: 0;
	padding: clamp(0.9rem, 2vw, 1.5rem) clamp(0.6rem, 1.4vw, 1.1rem);
	border-right: 1px solid var(--qv-hair);
	border-bottom: 1px solid var(--qv-hair);
}

/* The marks fill the cell they are given. Each source file was trimmed to its
   own ink before import — the originals were 800x800 canvases with the logo
   small in the middle, which is why a max-height alone rendered every one of
   them at 40px inside a 220px cell. No CSS can undo padding baked into a file.

   Sizing is by WIDTH with a height ceiling: logos have wildly different
   proportions, and width is the dimension a lattice cell actually shares.
   `object-fit: contain` keeps whichever dimension binds first honest.

   Colours stay as the trademark owner drew them — greyscaling somebody else's
   logo is a change to their mark, not a design decision this project gets to
   make. */
.qv-b-logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 3.4rem;
	object-fit: contain;
}

/* An empty cell completes the lattice where the customer list does not divide
   by the column count. It carries nothing, so it needs no styling of its own —
   the borders it inherits from .qv-b-logo are the whole point of it. */

@media (max-width: 900px) {
	.qv-b-logowand__seite { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* The still wall reflows to a DIVISOR of its desktop count, supplied by the
	   shortcode, so the padded total stays a whole number of rows at every
	   width. A free number here is what leaves the bottom rule hanging. */
	.qv-b-logowand--still .qv-b-logowand__seite {
		grid-template-columns: repeat(var(--qv-logo-spalten-m, 4), minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.qv-b-logowand__seite { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.qv-b-logowand--still .qv-b-logowand__seite {
		grid-template-columns: repeat(var(--qv-logo-spalten-s, 3), minmax(0, 1fr));
	}

	.qv-b-logo img { max-height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	/* No turn at all: the pages stack and every customer stays on screen. */
	.qv-b-logowand { overflow: visible; }

	.qv-b-logowand__lauf {
		display: block;
		animation: none;
	}

	.qv-b-logowand__seite { border-top-width: 0; }
	.qv-b-logowand__seite:first-child { border-top-width: 1px; }
	.qv-b-logowand__seite[aria-hidden="true"] { display: none; }
}

/* The panel. Mist on the white band, one hairline, the same radius as every
   other panel on the site. */
.qv-b-partner {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	background: var(--qv-mist);
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-panel);
	padding: clamp(1.2rem, 2.4vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.1rem, 2.6vw, 2.6rem);
	align-items: center;
}

/* Two columns, and the reason is the strict one: the right column is what the
   left column shows. */
@media (min-width: 800px) {
	.qv-b-partner {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	}
}

.qv-b-partner__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
	margin-bottom: 0.7rem;
}

.qv-b-partner__marke {
	display: block;
	text-decoration: none;
}

/* The logo is 269×91 with its own whitespace, so it sits on a white plate that
   gives it a consistent edge instead of floating on the mist. */
.qv-b-partner__plakette {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-control);
	padding: clamp(0.9rem, 1.8vw, 1.3rem);
	min-height: 88px;
	transition: border-color 0.15s;
}

.qv-b-partner__marke:hover .qv-b-partner__plakette,
.qv-b-partner__marke:focus-visible .qv-b-partner__plakette {
	border-color: var(--qv-green-cta);
}

/* Same treatment as the customer lattice: the mark fills the plate it was
   given instead of floating small in the middle of it. */
.qv-b-partner__plakette img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 4.4rem;
	object-fit: contain;
}

.qv-b-partner__text p {
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	color: var(--qv-ink-2);
	margin: 0;
}

.qv-b-partner__text p + p { margin-top: 0.5rem; }

.qv-b-partner__text b {
	color: var(--qv-ink);
	font-weight: 700;
}

/* External link, so it says where it goes. */
.qv-b-partner__ziel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.25rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--qv-green-ink);
	text-decoration: underline;
	text-decoration-color: var(--qv-green-cta);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.qv-b-partner__ziel:hover,
.qv-b-partner__ziel:focus-visible {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

/* --- band 7: the close -------------------------------------------------------- */
/* Green is the action colour, so the page's last surface is the action itself —
   a band, not a button inside one.

   Owner flagged the left column twice: first as a hole, then as two holes. Both
   fixes added content, and content was the wrong lever — a phone number is two
   lines and a form is fifteen, so a side-by-side of the two can never come out
   level, and justifying the short column only split one gap into two.

   So the band is rows, not columns. The three ways to REACH US sit in one row
   across the full width, built identically and sized by importance; the callback
   form sits underneath, also full width, its fields in a grid so it is wide
   instead of tall. Nothing stands beside anything of a different height, so there
   is nothing left that can leave a hole. */

.qv-b-schluss {
	background: var(--qv-green);
	padding-block: clamp(2.2rem, 4.6vw, 4rem);
}

.qv-b-schluss h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 0.98;
	letter-spacing: -0.04em;
	color: var(--qv-ink);
	text-wrap: balance;
}

.qv-b-schluss > p {
	margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
	font-size: var(--qv-text-lede);
	color: #1E2B06;
	/* Owner 2026-08-19: der Vorspann lief auf drei Zeilen, waehrend rechts
	   daneben ein Drittel des Bandes frei blieb. Er steht ueber der ganzen
	   Breite, nicht ueber einer Spalte — also darf er sie auch nutzen.
	   Geaendert wird das hier und nicht im Inhalt: das Abschlussband ist in
	   allen 28 Dateien byteidentisch, und das soll es bleiben. */
	max-width: none;
}

.qv-b-wege {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 2.6vw, 2.6rem);
	align-items: start;
}

@media (min-width: 760px) {
	/* The phone gets the wider track because it carries the largest figure —
	   weight follows importance, and the track follows the weight. */
	.qv-b-wege { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.qv-b-weg {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: var(--qv-ink);
	border-top: 3px solid var(--qv-ink);
	padding-top: clamp(0.7rem, 1.4vw, 1rem);
}

/* The figure is the link, not the whole column — a register entry with one
   clickable line.
   min-height rather than padding: these links set type at line-height 1, so at
   320px the box is 32px tall and shrinks further as the clamp bottoms out. A
   minimum box holds at every width; a padding value only at one. */
.qv-b-weg__ziel {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: inherit;
}

.qv-b-weg__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1E2B06;
	margin-bottom: 0.35rem;
}

/* One shape for all three; the size says which one matters most. */
.qv-b-weg__gross {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	overflow-wrap: break-word;
}

.qv-b-weg--ruf .qv-b-weg__gross { font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1; }
.qv-b-weg--post .qv-b-weg__gross { font-size: clamp(1.3rem, 2.4vw, 2.05rem); }

/* White on --qv-green measures 2.1:1. The hover state is an underline, not a
   colour change — green is a surface on this site, never a text ground for
   anything lighter than the ink. */
.qv-b-weg__ziel:hover .qv-b-weg__gross,
.qv-b-weg__ziel:focus-visible .qv-b-weg__gross {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.qv-b-weg__dazu {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--qv-text-sm);
	color: #1E2B06;
}

/* --- the callback block --------------------------------------------------- */
/* A form and a fact list next to each other, and this time the two are NOT the
   same shape. That is the whole lesson from the earlier rounds: the gap under
   the short column read as a hole because both columns were the same width and
   the same weight, so the eye expected them to end together. A visibly narrower
   ASIDE beside a wider main column is allowed to be shorter — nobody reads a
   sidebar as an unfinished column.
   The form itself goes back to one stacked track. Laid across the full width it
   made the eye travel back after every field, and five fields spread over 1300px
   read as ten. A form is a task; tasks want a narrow column. */

.qv-b-rueckruf {
	margin-top: clamp(1.8rem, 3.6vw, 3rem);
	padding-top: clamp(0.7rem, 1.4vw, 1rem);
	border-top: 3px solid var(--qv-ink);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.6rem, 3.2vw, 3.2rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.qv-b-rueckruf { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.qv-b-rueckruf__form { min-width: 0; }

.qv-b-schluss .qv-b-rueckruf__satz {
	margin: 0;
	font-size: var(--qv-text-lede);
	color: #1E2B06;
	/* War 40rem und damit schmaler als die Formularspur, in der er steht.
	   Jetzt bis an deren Kante — weiter nicht, Regel 6c haelt das Formular
	   bewusst in einer schmalen Spur. */
	max-width: none;
}

/* --- the aside ------------------------------------------------------------ */
/* Three short facts, each answering something a visitor actually wonders at the
   moment they are about to type into a form: where does this company sit, when
   is a person there, and what happens to what I enter. All three are in
   source/FACTS.md.
   No embedded map: the Google iframe needs a consent gate (plan 05, Real Cookie
   Banner). A plain link opens Maps on the visitor's own click and sends nothing
   before that. */

.qv-b-haus {
	min-width: 0;
}

.qv-b-haus__block {
	padding-block: clamp(0.7rem, 1.4vw, 1.05rem);
	border-bottom: 1px solid rgba(24, 23, 22, 0.28);
}

/* No rule of its own at the top, and no padding either: the block's 3px rule is
   the one the whole row already carries, and a second hairline right under it
   read as a stray line. Without the padding both columns start their label on
   the same line. */
.qv-b-haus__block:first-child {
	padding-top: 0;
}

/* A STATIC excerpt, composed once from OpenStreetMap tiles and stored in the
   Media Library. Not a Google embed: that one needs a consent gate (plan 05,
   Real Cookie Banner) because it calls Google on page load. This image is served
   from our own host, so nothing leaves the visitor's browser until they click
   "Route ansehen".
   ODbL: the attribution line under the map is a licence condition, not a
   caption. It does not get removed. */
.qv-b-haus__karte {
	margin: 0 0 0.7rem;
}

.qv-b-haus__karte img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(24, 23, 22, 0.28);
	border-radius: var(--qv-radius-control);
}

/* The credit, quiet but present. "-Mitwirkende" is the licence condition, not a
   word choice: the ODbL asks for "© OpenStreetMap contributors", and "©
   OpenStreetMap" alone credits the foundation instead of the people whose data
   it is. What was shortened is the lead-in ("Kartendaten"), and it links to the
   copyright page, which is the form the attribution guidelines ask for. */
.qv-b-haus__karte figcaption {
	margin-top: 0.35rem;
	font-size: var(--qv-text-xs);
	color: #1E2B06;
}

/* Die Pflichtzeile ist ein Link und braucht daher ein 44px-Tapziel — gemessen
   waren es 18. Gewachsen wird ueber Polsterung, das negative Aussenmass gibt der
   Zeile ihren Abstand zurueck, damit die Bildunterschrift nicht hoeher wird.
   Dasselbe Muster wie bei `.qv-b-fuss--hell a` weiter oben in dieser Datei. */
.qv-b-haus__karte figcaption a {
	display: inline-block;
	padding-block: 0.82rem;
	margin-block: -0.82rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(24, 23, 22, 0.35);
	text-underline-offset: 3px;
}

.qv-b-haus__karte figcaption a:hover,
.qv-b-haus__karte figcaption a:focus-visible {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

.qv-b-haus__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1E2B06;
	margin-bottom: 0.3rem;
}

.qv-b-schluss .qv-b-haus__text {
	margin: 0;
	font-size: var(--qv-text-sm);
	line-height: 1.5;
	color: var(--qv-ink);
	max-width: none;
}

.qv-b-haus__text b {
	font-weight: 700;
}

.qv-b-haus__ziel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.15rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	color: var(--qv-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.qv-b-haus__ziel:hover,
.qv-b-haus__ziel:focus-visible {
	text-decoration-thickness: 3px;
}


/* === /telefonservice/ ========================================================
 * The same seven-band shape as the homepage — feld, tat, weiss, nebel, weiss,
 * blau, gruen — so the two pages read as one site. Bands 1 and 4 carry the
 * page's only two diagonals, exactly as on the front page.
 *
 * Everything that already exists is reused rather than re-styled: the dark
 * contact band is .qv-b-tat, the demo line is .qv-b-probe inside .qv-b-ablauf,
 * the closing band is .qv-b-schluss. Same importance, same construction — a
 * second shape for the same offer is what makes a site look assembled.
 */

/* The band's own label above the poster headline. The market term lives here so
   the h1 can stay a spoken sentence; ink rather than the green derivative,
   because --qv-green-ink on --qv-blue is under 3:1. */
.qv-b-oben {
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--qv-ink);
	/* Owner 2026-08-18: „that is very close together". Gemessen 15px bei 1440 —
	   und optisch noch weniger, weil die Schlagzeile auf line-height 0.94 laeuft
	   und ihre Versalien tiefer sitzen als die Oberkante ihres Kastens. Eine
	   14,4px-Marke braucht mehr Luft zu einer 8rem-Zeile als zu einem Absatz,
	   sonst klebt sie daran. */
	margin: 0 0 clamp(0.9rem, 2.1vw, 1.9rem);
	max-width: none;
}

/* Four elements enter here instead of the homepage's three. */
.qv-b-an--4 { animation-delay: 1.15s; }

/* Headings on the new bands take the poster setting the Branchen and Referenzen
   bands already use, not the softer default in base.css. */
.qv-b-pakete h2,
.qv-b-unterschied h2,
.qv-b-preisband h2,
.qv-b-schritte h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	text-wrap: balance;
}

.qv-b-pakete .qv-b-kopfzeile p:not(.qv-b-marke-zeile),
.qv-b-preisband .qv-b-kopfzeile p:not(.qv-b-marke-zeile),
.qv-b-unterschied .qv-b-kopfzeile p:not(.qv-b-marke-zeile) {
	margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
	font-size: var(--qv-text-lede);
	color: var(--qv-ink-2);
}

/* --- band 3: the five packages ----------------------------------------------
 * Owner, 2026-08-18: the pricing pattern from noxtec.de — cards side by side,
 * one of them lifted onto the ink ground, a check list and a control per card.
 * A hairline price register was built first and replaced on that instruction.
 *
 * Five cards do not stack into a tidy grid at any middle width — 3+2 or 4+1
 * always leaves an orphan row. So the row keeps its five columns wherever they
 * fit and becomes a strip that scrolls INSIDE ITSELF below that, which is the
 * same device the homepage drawing uses. The page itself never scrolls
 * sideways.
 */

.qv-b-pakete {
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

.qv-b-tarife {
	margin-top: clamp(1.6rem, 3.2vw, 2.6rem);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.3vw, 1.1rem);
	align-items: stretch;
}

/* The lifted card grows out of the row, so the row needs the room back. */
.qv-b-tarife {
	padding-block: clamp(0.7rem, 1.4vw, 1.2rem);
}

.qv-b-tarif {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1rem, 1.7vw, 1.45rem);
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-panel);
	background: var(--qv-bg);
}

.qv-b-tarif__stufe {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
	margin-bottom: 0.3rem;
}

.qv-b-tarif__name {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.12rem, 1.35vw, 1.3rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.qv-b-tarif__preis {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.85rem, 2.5vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--qv-ink);
	white-space: nowrap;
}

.qv-b-tarif__takt {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--qv-text-xs);
	font-weight: 600;
	color: var(--qv-ink-2);
}

/* The included volume is the second half of the price, not a feature, so it
   sits with the figure and takes the accent colour. */
.qv-b-tarif__menge {
	display: block;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	/* "350 Gespräche und Aktionen" runs to two lines where "50 Gespräche" runs to
	   one, which started the five check lists at three different heights. Two
	   lines are reserved for all of them so the lists share a top edge. */
	line-height: 1.35;
	min-height: calc(0.7rem + 2.7em);
	border-top: 1px solid var(--qv-hair);
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	color: var(--qv-green-ink);
}

.qv-b-tarif__liste {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	font-size: var(--qv-text-sm);
	line-height: 1.4;
	color: var(--qv-ink-2);
	display: grid;
	gap: 0.42rem;
}

.qv-b-tarif__liste li {
	display: grid;
	grid-template-columns: 1.05rem minmax(0, 1fr);
	gap: 0.45rem;
	align-items: start;
}

/* Drawn, not an icon set: same round terminals and stroke weight as the
   wordmark, like every other mark on the site. --qv-green-cta is 4.8:1 on
   white, well over the 3:1 a graphic stroke needs. */
/* Drawn to the wordmark's own language — one stroke, round terminals, the same
   weight as every other icon on the site. Carried as a mask so the SAME mark can
   take the darkened green on white and the light green on the ink card. */
.qv-b-tarife {
	--qv-haken-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.qv-b-tarif__liste li::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.12rem;
	background-color: var(--qv-green-cta);
	-webkit-mask: var(--qv-haken-url) center / contain no-repeat;
	mask: var(--qv-haken-url) center / contain no-repeat;
}

.qv-b-tarif__knopf {
	display: block;
	margin-top: auto;
	padding-top: clamp(0.9rem, 1.8vw, 1.3rem);
	text-decoration: none;
}

.qv-b-tarif__knopf span {
	display: block;
	text-align: center;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--qv-ink);
	border: 1px solid var(--qv-ink);
	border-radius: var(--qv-radius-control);
	padding: 0.72rem 0.6rem;
	min-height: 44px;
	transition: background-color 0.15s, border-color 0.15s;
}

.qv-b-tarif__knopf:hover span,
.qv-b-tarif__knopf:focus-visible span {
	background: var(--qv-ink);
	color: #FFFFFF;
}

/* --- the lifted package --------------------------------------------------- */
/* Owner, 2026-08-18, after asking whether the marking made marketing sense:
   L carries it, not M.
   The first version marked M and the badge read "Ab hier 24/7". Two faults, both
   marketing rather than code. It argued against QVMed's own entry package at the
   most prominent point of the table — S is the card most visitors look at first,
   and the badge told them S cannot do this. And a dark card with a badge and a
   filled control promises a RECOMMENDATION; a specification is not what the
   reader came to that shape for. The badge now answers the question the shape
   asks.
   What it still may not say is "most popular": nobody counts what customers
   pick, and an invented figure is what section 6 of the design rules exists to
   prevent. A recommendation is an opinion the company is entitled to hold. */

.qv-b-tarif--gehoben {
	position: relative;
	background: var(--qv-ink);
	border-color: var(--qv-ink);
}

/* The lift is a wide-screen device: in the scrolling strip every card is the
   same height, or the row reads as one broken card. */
@media (min-width: 1180px) {
	.qv-b-tarif--gehoben {
		margin-block: calc(clamp(0.7rem, 1.4vw, 1.2rem) * -1);
		padding-block: calc(clamp(1rem, 1.7vw, 1.45rem) + clamp(0.7rem, 1.4vw, 1.2rem));
	}
}

/* Helle Type auf dunklem Grund wirkt schlanker als dieselbe Type auf hellem —
   ausgeglichen wird das mit Gewicht, nicht mit Helligkeit. Gilt fuer jeden
   dunklen Grund auf dieser Seite. */
.qv-b-tarif--gehoben .qv-b-tarif__stufe { color: var(--qv-green); }
.qv-b-tarif--gehoben .qv-b-tarif__name,
.qv-b-tarif--gehoben .qv-b-tarif__preis { color: #FFFFFF; }
.qv-b-tarif--gehoben .qv-b-tarif__takt { color: rgba(255, 255, 255, 0.82); }

.qv-b-tarif--gehoben .qv-b-tarif__menge {
	border-top-color: rgba(255, 255, 255, 0.22);
	color: var(--qv-green);
}

.qv-b-tarif--gehoben .qv-b-tarif__liste {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
}

.qv-b-tarif--gehoben .qv-b-tarif__liste li::before { background-color: var(--qv-green); }

.qv-b-tarif--gehoben .qv-b-tarif__knopf span {
	background: var(--qv-green);
	border-color: var(--qv-green);
	color: var(--qv-ink);
}

.qv-b-tarif--gehoben .qv-b-tarif__knopf:hover span,
.qv-b-tarif--gehoben .qv-b-tarif__knopf:focus-visible span {
	background: #A8D91F;
	border-color: #A8D91F;
	color: var(--qv-ink);
}

/* Out of the flow and across the card's own edge: in the flow it pushed this
   card's price one line below the other four, and five prices that do not sit
   on one line are five prices nobody can compare. */
.qv-b-tarif__fahne {
	position: absolute;
	top: 0;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--qv-ink);
	background: var(--qv-green);
	border-radius: 999px;
	padding: 0.28rem 0.75rem;
}

/* Below five columns the row becomes a strip that scrolls inside its own frame.
   3+2 and 4+1 both leave an orphan card, and a lone card in a second row reads
   as a mistake; a strip keeps the five comparable at any width. */
@media (max-width: 1179px) {
	.qv-b-tarife {
		display: flex;
		gap: clamp(0.7rem, 1.8vw, 1.1rem);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		/* overflow-x:auto forces overflow-y to auto as well, so the badge hanging
		   over the card's top edge needs room inside the frame or it is clipped. */
		padding-block: 1.4rem clamp(0.7rem, 1.4vw, 1.2rem);
	}

	.qv-b-tarif {
		flex: 0 0 clamp(15rem, 46vw, 17.5rem);
		scroll-snap-align: start;
	}
}

/* Owner, 2026-08-18: the prices are net and that has to be on the page wherever
   a figure is. Marked with a star at the figure and resolved at the foot of the
   same band — a star whose footnote is three bands further down is a star nobody
   reads. The star is a symbol, not running text, so it sits under the type floor
   on purpose; the sentence it points at does not. */
.qv-b-tarif__preis sup,
.qv-b-karte__geld sup {
	font-size: 0.42em;
	font-weight: 700;
	letter-spacing: 0;
	vertical-align: super;
	line-height: 0;
}

.qv-b .qv-b-fussnote {
	margin: clamp(0.9rem, 1.8vw, 1.4rem) 0 0;
	font-size: var(--qv-text-xs);
	color: var(--qv-ink-2);
	max-width: none;
}

/* On the blue field the supporting text takes the darker blue, like the lede. */
.qv-b-feld .qv-b-fussnote {
	color: #16303F;
}

/* The conditions band under the register. .qv-b-fuss is written for the dark
   band, so the light variant only swaps the two colours it sets. */
.qv-b .qv-b-fuss--hell {
	border-top-color: var(--qv-hair);
	color: var(--qv-ink-2);
}

.qv-b-fuss--hell a {
	/* 44px tap target on a link that sits inside a sentence: the padding grows
	   the target, the matching negative margin gives the line its spacing back
	   so the footnote row does not get taller. */
	display: inline-block;
	padding-block: 0.72rem;
	margin-block: -0.72rem;
	color: var(--qv-green-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--qv-green-cta);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.qv-b-fuss--hell a:hover,
.qv-b-fuss--hell a:focus-visible {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

/* The closing band is an anchor target now, so it keeps air above it when
   someone jumps to it. */
.qv-b-schluss {
	scroll-margin-top: 1.5rem;
}

/* --- band 4: the demo line ---------------------------------------------------
 * Reuses .qv-b-ablauf whole. The three sourced figures sit underneath as the
 * same register rows the homepage uses — on --qv-mist the --qv-hair rule is
 * nearly invisible, so it takes a darker one here.
 */

.qv-b-ablauf .qv-b-belege {
	padding-bottom: 0;
}

.qv-b-ablauf .qv-b-beleg,
.qv-b-ablauf .qv-b-beleg:first-child {
	border-color: rgba(24, 23, 22, 0.16);
}

/* --- band 5: what QVMed does that a call-answering service does not ---------
 * Three points, built like every other offer on the site: a rule, a label-scale
 * heading, one paragraph. Not boxes — the page already spent its one card row
 * on the homepage.
 */

.qv-b-unterschied {
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

.qv-b-merkmale {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 2.6vw, 2.6rem);
	align-items: start;
}

@media (min-width: 820px) {
	.qv-b-merkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Zwei Karten in einem Dreierraster lassen ein Drittel leer stehen — genau
	   das Loch, das Regel 6a verbietet. Auf /downloads/ ist die Broschuere seit
	   2026-08-19 aus dem Raster heraus und steht als eigene Reihe darueber, es
	   bleiben zwei Verweise. Die teilen sich die Breite. */
	.qv-b-merkmale--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qv-b-merkmal {
	border-top: 3px solid var(--qv-ink);
	padding-top: clamp(0.7rem, 1.4vw, 1rem);
	min-width: 0;
}

.qv-b-merkmal h3 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	margin: 0 0 0.5rem;
	text-wrap: balance;
}

.qv-b-merkmale .qv-b-merkmal p {
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	color: var(--qv-ink-2);
	margin: 0;
	max-width: none;
}

/* --- Pfeilspitzen fuer die Ablauf-Zeichnung auf /ki-agent-assist/ ------------
 * Die Broschuere hat eine eigene Grafik fuer den Agent-Assist-Ablauf
 * (`Agent_assist_Ablauf.jpg`, Mediathek). Sie wird NICHT benutzt: sie traegt die
 * alten, falschen Markenfarben, ist ein Rasterbild und ihre kreuzenden Pfeile
 * liest niemand in einem Zug. Der Ablauf ist stattdessen als Inline-SVG in der
 * Zeichensprache der Startseiten-Szene neu gezeichnet — dieselben Leitungen,
 * dieselbe Menschfigur, dasselbe blaue Feld fuer die KI.
 *
 * Die Zeichnung steht still. Regel 7 der Design-Rules: die einzige Dauerbewegung
 * auf der Site sind Sofias parallele Gespraeche, weil DIESE Bewegung die Aussage
 * ist. Ein kreisender Ablaufpfeil waere Tapete.
 *
 * `fill`, weil eine Spitze eine Flaeche ist — `.qv-b-leitung` setzt `fill: none`
 * und wuerde sie unsichtbar machen.
 */

.qv-b-spitze {
	fill: var(--qv-line);
	stroke: none;
}

.qv-b-spitze--aktiv {
	fill: var(--qv-green-cta);
}

/* --- der Agent-Assist-Ablauf, als Schleife -----------------------------------
 * Owner 2026-08-18: „I want that it plays in a loop and begins with Extern
 * Anrufer icon to ring vibrate and when Ihr Mitarbeiter picks up it glows".
 *
 * Das ist bewusst die zweite Dauerbewegung der Site. Regel 7 der Design-Rules
 * liess bisher genau eine zu (Sofias parallele Gespraeche), und der Grund dafuer
 * gilt hier genauso: die Bewegung IST die Aussage. Ein Ablauf, den man einmal
 * sieht und dann nie wieder, muss beim ersten Mal sitzen — als Schleife kann man
 * ihn zweimal ansehen, und genau das will man bei einem Ablauf.
 *
 * ALLE Teile teilen sich EINE Dauer (7s) und `infinite`. Ihr Zeitfenster steckt
 * in den eigenen Prozentwerten, nicht in `animation-delay`. Mit
 * unterschiedlichen Dauern plus Verzoegerung laufen Schleifen nach ein paar
 * Runden auseinander — mit einer gemeinsamen Dauer koennen sie das nicht.
 *
 * Der Takt: 0–13 % klingelt der Anrufer · 13–26 % laeuft der Anruf zum Menschen
 * · 26–34 % nimmt er ab und leuchtet · 34–45 % geht es zur KI · 45–52 % hoert
 * die KI hin · 52–63 % kommt die Loesung zurueck · 63–70 % leuchtet er wieder ·
 * 70–84 % nennt er sie dem Anrufer · Rest ist Ruhe, damit die Schleife atmet.
 */

.qv-b-ablaufpunkt {
	fill: var(--qv-blue-ink);
	offset-rotate: 0deg;
	opacity: 0;
}

.qv-b-ablaufpunkt--2,
.qv-b-ablaufpunkt--3 { fill: var(--qv-green-cta); }

.is-laeuft .qv-b-ablaufpunkt--1 { offset-path: path("M132 126 L464 126"); animation: qv-ablauf-p1 7s linear infinite; }
.is-laeuft .qv-b-ablaufpunkt--2 { offset-path: path("M572 126 L788 126"); animation: qv-ablauf-p2 7s linear infinite; }
.is-laeuft .qv-b-ablaufpunkt--3 { offset-path: path("M796 174 L580 174"); animation: qv-ablauf-p3 7s linear infinite; }
.is-laeuft .qv-b-ablaufpunkt--4 { offset-path: path("M472 174 L147 174"); animation: qv-ablauf-p4 7s linear infinite; }

@keyframes qv-ablauf-p1 {
	0%, 13% { offset-distance: 0%; opacity: 0; }
	15% { opacity: 1; }
	24% { opacity: 1; }
	26%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes qv-ablauf-p2 {
	0%, 34% { offset-distance: 0%; opacity: 0; }
	36% { opacity: 1; }
	43% { opacity: 1; }
	45%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes qv-ablauf-p3 {
	0%, 52% { offset-distance: 0%; opacity: 0; }
	54% { opacity: 1; }
	61% { opacity: 1; }
	63%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes qv-ablauf-p4 {
	0%, 70% { offset-distance: 0%; opacity: 0; }
	72% { opacity: 1; }
	82% { opacity: 1; }
	84%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Der Hoerer wackelt, wie ein Telefon es tut. `transform-box: fill-box`, sonst
   dreht sich die Form um den Ursprung des ganzen viewBox statt um sich selbst —
   und die Gruppe darum traegt ihr `transform` als Attribut, das eine CSS-
   Transform hier ERSETZEN und die Figur wegschieben wuerde. Deshalb sitzt die
   Bewegung am Kind, nicht an der Gruppe. */
.qv-b-ablaufhoerer {
	transform-box: fill-box;
	transform-origin: center;
}

.is-laeuft .qv-b-ablaufhoerer { animation: qv-ablauf-klingel 7s ease-in-out infinite; }

@keyframes qv-ablauf-klingel {
	0% { transform: rotate(0deg); }
	2% { transform: rotate(-11deg); }
	4% { transform: rotate(10deg); }
	6% { transform: rotate(-8deg); }
	8% { transform: rotate(7deg); }
	10% { transform: rotate(-4deg); }
	12%, 100% { transform: rotate(0deg); }
}

/* Die Klingelwelle laeuft nach aussen und verschwindet. Sie liegt HINTER dem
   Anrufer, damit sie ihn nicht ueberdeckt. */
.qv-b-ablaufwelle {
	fill: none;
	stroke: var(--qv-blue-ink);
	stroke-width: 2.5;
	opacity: 0;
}

.is-laeuft .qv-b-ablaufwelle { animation: qv-ablauf-welle 7s ease-out infinite; }

@keyframes qv-ablauf-welle {
	0% { r: 34; opacity: 0.6; }
	11% { r: 56; opacity: 0; }
	11.1%, 100% { r: 34; opacity: 0; }
}

/* Das Aufleuchten beim Abnehmen — zweimal je Runde: einmal, wenn der Anruf
   ankommt, einmal, wenn die Loesung da ist. Ein Ring, der aufgeht und vergeht,
   statt eines Schattens: er bleibt bei jeder Schirmgroesse gleich lesbar. */
.qv-b-ablaufglanz {
	fill: none;
	stroke: var(--qv-green-cta);
	stroke-width: 3;
	opacity: 0;
}

.is-laeuft .qv-b-ablaufglanz { animation: qv-ablauf-glanz 7s ease-out infinite; }

@keyframes qv-ablauf-glanz {
	0%, 26% { r: 46; opacity: 0; }
	29% { r: 56; opacity: 0.85; }
	34% { r: 68; opacity: 0; }
	34.1%, 63% { r: 46; opacity: 0; }
	66% { r: 56; opacity: 0.85; }
	70% { r: 68; opacity: 0; }
	70.1%, 100% { r: 46; opacity: 0; }
}

/* Das Zeichen fuer die KI: eine Schallkurve, keine Gluehbirne und kein Funke.
   Die KI auf dieser Seite HOERT MIT — das ist ihre Aussage, und eine Schallkurve
   sagt sie in der Strichsprache der Wortmarke: runde Enden, gleiche Staerke wie
   die uebrigen Zeichen der Site. Waehrend Schritt 2 schlaegt sie aus. */
.qv-b-ki-welle line {
	stroke: #FFFFFF;
	stroke-width: 3.5;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: center;
}

.is-laeuft .qv-b-ki-welle line { animation: qv-ablauf-ki 7s ease-in-out infinite; }

.qv-b-ki-welle line:nth-child(1) { --qv-ki-f: 2.1; }
.qv-b-ki-welle line:nth-child(2) { --qv-ki-f: 0.55; }
.qv-b-ki-welle line:nth-child(3) { --qv-ki-f: 1.5; }
.qv-b-ki-welle line:nth-child(4) { --qv-ki-f: 0.6; }
.qv-b-ki-welle line:nth-child(5) { --qv-ki-f: 1.9; }

@keyframes qv-ablauf-ki {
	0%, 44% { transform: scaleY(1); }
	47% { transform: scaleY(var(--qv-ki-f, 1.5)); }
	50% { transform: scaleY(calc(1 / var(--qv-ki-f, 1.5))); }
	53%, 100% { transform: scaleY(1); }
}

/* Die Beschriftung des Schritts hebt sich, waehrend ihr Punkt laeuft. Sie faellt
   danach auf ihren Grundwert zurueck statt zu verschwinden — ein Element, das
   ganz weggeht, reisst ein Loch in die Zeichnung. */
.qv-b-ablaufmarke { opacity: 0.45; }

.is-laeuft .qv-b-ablaufmarke--1 { animation: qv-ablauf-m1 7s ease-out infinite; }
.is-laeuft .qv-b-ablaufmarke--2 { animation: qv-ablauf-m2 7s ease-out infinite; }
.is-laeuft .qv-b-ablaufmarke--3 { animation: qv-ablauf-m3 7s ease-out infinite; }
.is-laeuft .qv-b-ablaufmarke--4 { animation: qv-ablauf-m4 7s ease-out infinite; }

@keyframes qv-ablauf-m1 { 0%, 12% { opacity: 0.45; } 15%, 30% { opacity: 1; } 40%, 100% { opacity: 0.45; } }
@keyframes qv-ablauf-m2 { 0%, 33% { opacity: 0.45; } 36%, 48% { opacity: 1; } 58%, 100% { opacity: 0.45; } }
@keyframes qv-ablauf-m3 { 0%, 51% { opacity: 0.45; } 54%, 66% { opacity: 1; } 76%, 100% { opacity: 0.45; } }
@keyframes qv-ablauf-m4 { 0%, 69% { opacity: 0.45; } 72%, 86% { opacity: 1; } 94%, 100% { opacity: 0.45; } }

/* Ohne Bewegung steht die fertige Zeichnung: alle Marken lesbar, nichts laeuft. */
@media (prefers-reduced-motion: reduce) {
	.qv-b-ablaufmarke { opacity: 1; }
	.qv-b-ablaufpunkt,
	.qv-b-ablaufwelle,
	.qv-b-ablaufglanz { display: none; }
}

/* --- der Brotkrumen -----------------------------------------------------------
 * Steht nur auf Seiten mit Elternseite — heute die fuenf Branchen-Seiten.
 *
 * Owner 2026-08-18: „breadcrumb looks alien". Er stand auf Weiss ueber dem
 * blauen Feld — ein Streifen, den es sonst nirgends auf der Site gibt, und damit
 * sichtbar angeklebt. Jetzt traegt er denselben Grund wie das Feld darunter. Das
 * obere Ende des Feldes ist gerade geschnitten (die Diagonale sitzt unten), also
 * gehen beide nahtlos ineinander ueber, und der Pfad steht in derselben Spur wie
 * die Oberzeile.
 *
 * ACHTUNG: das gilt, solange Unterseiten mit `.qv-b-feld` beginnen. Heute tun das
 * alle fuenf. Faengt eine kuenftige Unterseite mit einem anderen Band an, muss der
 * Grund hier mitwandern.
 */

.qv-krume {
	background: var(--qv-blue);
	padding-inline: max(var(--qv-gutter), (100% - var(--qv-inhalt)) / 2);
	padding-block: clamp(0.8rem, 1.6vw, 1.3rem) 0;
	font-size: var(--qv-text-xs);
	/* Auf --qv-blue traegt Text volle Tinte und 500 — dieselbe Regel wie im
	   Branchen- und Schritte-Band. --qv-ink-2 sah dort duenn aus. */
	color: var(--qv-ink);
	font-weight: 500;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem;
}

.qv-krume a {
	/* 44px Tapziel ohne die Zeile hoeher zu machen — dasselbe Muster wie bei
	   `.qv-b-fuss--hell a` und der OSM-Pflichtzeile. `inline-block` ist noetig,
	   weil ein `inline` keine senkrechte Polsterung in die Hoehe rechnet. */
	display: inline-block;
	padding-block: 0.8rem;
	margin-block: -0.8rem;
	color: #16303F;
	text-decoration: underline;
	text-decoration-color: rgba(22, 48, 63, 0.4);
	text-underline-offset: 3px;
}

.qv-krume a:hover,
.qv-krume a:focus-visible {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

.qv-krume [aria-current="page"] {
	color: var(--qv-ink);
	font-weight: 700;
}

.qv-krume__teiler {
	color: rgba(22, 48, 63, 0.55);
}

/* --- die Preisreihe -----------------------------------------------------------
 * Owner 2026-08-18 zu „S 149 €* · M 399 €* · L 799 €* …" mitten im Fliesstext:
 * „hard to read or?". Ja. Fuenf Preise hintereinander sind eine Liste, die so
 * tut, als waere sie ein Satz — das Auge sucht sie einzeln und findet sie nicht,
 * weil nichts sie trennt ausser einem Mittelpunkt.
 *
 * Also eine echte Reihe: jedes Paket ein eigener Posten, Buchstabe und Preis
 * verbunden, und sie darf umbrechen statt zu quetschen.
 */

.qv-b-preisreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem clamp(0.9rem, 1.8vw, 1.6rem);
	margin: clamp(0.6rem, 1.2vw, 0.9rem) 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.qv-b-preisreihe li {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	font-weight: 500;
	color: var(--qv-ink);
	white-space: nowrap;
}

/* Der Paketbuchstabe ist die Marke, nicht der Preis — er traegt die Displayschrift
   und die Farbe, damit die Reihe von links nach rechts gelesen wird und nicht als
   Zahlenkolonne. */
.qv-b-preisreihe b {
	font-family: var(--qv-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--qv-green-ink);
}

/* --- die zwei Stimmen auf /voicebots-im-kundenservice/ -----------------------
 * Sofia und Liam sind zwei gleich wichtige Dinge, also tragen sie dieselbe
 * Konstruktion und dieselbe Breite (Regel 5 und 6a). Zwei gleich breite Spalten
 * muessen zusammen enden — deshalb `align-items: stretch` (der Vorgabewert, hier
 * nur nicht ueberschrieben) und eine Grundlinie an jeder Tafel, damit sie es
 * sichtbar tun. Das ist derselbe Fix, der auf `.qv-b-merkmale` bewusst NICHT
 * gemacht wurde, weil er dort das abgenommene /telefonservice/ veraendert haette;
 * hier ist die Konstruktion neu, also kostet er nichts.
 *
 * Die Portraits sind Attachment 2981 und 2980. Ihr gruener Ring ist gemessen
 * exakt --qv-green, sie brauchen also keinen eigenen Rahmen.
 */

.qv-b-stimmen {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 2.6vw, 2.6rem);
}

@media (min-width: 760px) {
	.qv-b-stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qv-b-stimme {
	display: flex;
	flex-direction: column;
	gap: clamp(0.7rem, 1.4vw, 1rem);
	min-width: 0;
	border-top: 3px solid var(--qv-ink);
	border-bottom: 1px solid rgba(24, 23, 22, 0.16);
	padding-block: clamp(0.9rem, 1.8vw, 1.3rem);
}

.qv-b-stimme__kopf {
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

.qv-b-stimme__bild {
	flex: 0 0 auto;
	width: clamp(4.4rem, 7vw, 6rem);
}

.qv-b-stimme__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.qv-b-stimme__name {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
}

.qv-b-stimme__rolle {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
}

/* Zwei Klassen im Selektor, sonst setzt `.qv-b p` (0,1,1) die 72ch-Messbreite
   durch und das Zitat bricht mitten in der Spalte um. `margin-top: auto`
   schiebt nichts — die Tafeln sind ueber die Grundlinie schon gleich hoch. */
/* Owner 2026-08-18: „maybe the quote is in a speaking bubble". Ja — Sofia und
   Liam SIND Stimmen, ihr Zitat ist gesprochen, und eine Blase sagt das ohne ein
   Wort. Der Zipfel zeigt nach oben links auf das Portraet, von dem die Stimme
   kommt.

   Nicht animiert, und das ist Absicht: ein Zitat ist kein laufender Vorgang.
   Regel 7 laesst genau eine Dauerbewegung auf der Site zu, und die gehoert
   Sofias parallelen Gespraechen auf der Startseite. Eine pulsierende Sprechblase
   waere die zweite und damit Tapete. */
.qv-b-stimme .qv-b-stimme__zitat {
	position: relative;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	line-height: 1.5;
	color: var(--qv-ink-2);
	margin: 0;
	max-width: none;
	background: #FFFFFF;
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-panel);
	padding: clamp(0.85rem, 1.7vw, 1.2rem) clamp(0.95rem, 1.9vw, 1.35rem);
}

/* Der Zipfel ist zweimal gezeichnet: einmal in der Randfarbe, einmal 1px tiefer
   in Weiss darueber. Ein einzelnes Dreieck koennte den Rand nicht fortsetzen und
   die Blase saehe aufgeschnitten aus. */
.qv-b-stimme__zitat::before,
.qv-b-stimme__zitat::after {
	content: "";
	position: absolute;
	left: clamp(1.6rem, 3vw, 2.4rem);
	width: 0;
	height: 0;
	border-inline: 9px solid transparent;
}

.qv-b-stimme__zitat::before {
	top: -9px;
	border-bottom: 9px solid var(--qv-hair);
}

.qv-b-stimme__zitat::after {
	top: -8px;
	border-bottom: 9px solid #FFFFFF;
}

/* --- das Preisband auf den Branchen-Seiten -----------------------------------
 * Owner 2026-08-18: `kosten` steht im bestaetigten Long Tail, also beantwortet
 * die Seite die Frage selbst statt sie hinter einen Klick zu legen.
 *
 * Es ist NICHT die Kartentafel von /telefonservice/ — vier fast identische
 * Preisbloecke waeren doppelter Inhalt, und /telefonservice/ waere ueberfluessig.
 * Stattdessen dieselben Registerzeilen wie „So fangen wir an": Preis als Figur,
 * Paketname daneben, Inhalt in der zweiten Spur. `.qv-b-stufe` ist an keine Band-
 * klasse gebunden, deshalb braucht dieses Band nur seinen eigenen Innenabstand.
 *
 * Eigene Klasse statt `.qv-b-unterschied` mitzubenutzen: der Name muesste sonst
 * luegen, und die naechste Person raeumt ihn weg.
 */

.qv-b-preisband {
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

/* --- band 6: how it starts --------------------------------------------------
 * The blue band, and a register again: three numbered rows at display scale.
 * Same shape as the Branchen index one band lower on the homepage, so the two
 * blue bands on the site behave the same way.
 */

.qv-b-schritte {
	background: var(--qv-blue);
	padding-block: clamp(2.2rem, 4.6vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}

/* Fliesstext auf --qv-blue traegt 500 und volle Tinte — dieselbe Regel wie im
   Branchen-Band. */
.qv-b-schritte > p {
	margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
	font-size: var(--qv-text-lede);
	font-weight: 500;
	color: var(--qv-ink);
}

.qv-b-stufen {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 1px solid rgba(24, 23, 22, 0.34);
	/* Der Deckel von heute Vormittag ist hier RAUS und durch --qv-inhalt am Band
	   ersetzt. Er war die richtige Diagnose mit dem falschen Hebel: er stoppte die
	   wachsende Luecke, liess das Register dafuer 262px vor der Kante aller anderen
	   Elemente enden. Jetzt deckelt der Inhaltskasten die ganze Zeile, die Textspur
	   nimmt den Rest, und der Absatz darin behaelt seine Lesebreite. Damit endet die
	   Haarlinie buendig mit jedem anderen Band, und nur das letzte Wort hoert
	   frueher auf — was Text nun einmal tut. */
}

.qv-b-stufe {
	display: grid;
	/* `auto` and not a fixed track: a one-glyph column pinned at 4rem is a
	   column wider than its content. */
	/* Two tracks, the Branchen index's shape: the step's mark on the left, what
	   happens in it on the right, and the free width in the gap between them so
	   the row reads to the band's right edge.
	   Three tries, each one measured, because each fixed one fault and made
	   another. `space-between` over [numeral | text] put 329px between a numeral
	   and its own sentence at 1440. `start` closed that but left the hairline
	   running 700px past the last word at 1920 — the "column fills 60 % of
	   itself" fault from the index band. Splitting the numeral and the heading
	   into separate tracks filled the row but floated the numeral 262px from the
	   heading it numbers. The numeral and the heading are ONE thing, so they
	   share one track, and only the gap that should open, opens. */
	/* 20 → 22 → 25rem. Owner sah bei „1 Bestellung, / Buchung, Auskunft" eine
	   Ueberschrift, die neben der Ziffer umbricht, waehrend die Zeile darunter
	   einzeilig blieb — ein Register, dessen Zeilen unterschiedlich hoch bauen,
	   sieht unabsichtlich aus. Zwei Hebel zusammen: die Spur bekommt Platz, und
	   die sechs zu langen Marken sind gekuerzt. Eine Registermarke ist ein Etikett,
	   kein Satz. */
	grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
	justify-content: space-between;
	gap: 0.35rem clamp(0.9rem, 1.8vw, 1.6rem);
	align-items: baseline;
	padding-block: clamp(0.9rem, 1.9vw, 1.35rem);
	border-bottom: 1px solid rgba(24, 23, 22, 0.34);
}

/* Numeral and heading on one baseline, side by side — the numeral is a label
   on the heading, not a column of its own. */
.qv-b-stufe__marke {
	display: flex;
	align-items: baseline;
	gap: clamp(0.6rem, 1.1vw, 0.95rem);
	min-width: 0;
	/* Zwei Anlaeufe, beide von Owner gesehen.
	   `flex-wrap: wrap` war der erste und war falsch: es loeste zwar das
	   Ueberlaufen von „auf Anfrage", warf dafuer aber bei „1 Bestellung, Buchung,
	   Auskunft" die Ziffer auf eine eigene Zeile ueber die Ueberschrift — und das
	   auch nur in manchen Zeilen, je nach Textlaenge. Ein Register, dessen Zeilen
	   unterschiedlich gebaut aussehen, wirkt kaputt.
	   Richtig ist: das Paar bleibt IMMER nebeneinander, und die Ueberschrift bricht
	   ihren eigenen Text um, statt die Ziffer wegzudruecken. Dafuer braucht sie
	   `min-width: 0` — ohne das weigert sich ein Flex-Kind, unter seine
	   Inhaltsbreite zu schrumpfen, und schiebt stattdessen. */
	flex-wrap: nowrap;
}

/* Nur die Ueberschrift darf schrumpfen. Die Angabe links traegt `nowrap`; gibt
   man IHR `min-width: 0`, schrumpft ihr Kasten unter die Textbreite, der Text
   laeuft heraus und frisst den Spaltenabstand — „auf AnfrageUmfang und
   Anbindung" klebte genau deshalb zusammen. Sie behaelt also ihre Eigenbreite,
   und was fehlt, nimmt die Ueberschrift sich durch Umbruch. */
/* Owner 2026-08-18, zur Ausrichtung: „auf Anfrage / Nach Aufwand" und
   „kostenfrei / Das erste Gespräch" fingen an verschiedenen Linien an, weil
   Angabe und Ueberschrift sich EINE Spur teilen und die Angabe unterschiedlich
   breit ist. In einem Register muss die zweite Spalte auf einer Linie beginnen —
   sonst franst genau das aus, was das Register zusammenhalten soll.

   `display: contents` loest die Marke auf, ihre zwei Kinder werden selbst zu
   Gitterzellen, und eine `auto`-Spur misst sich an der BREITESTEN Angabe aller
   Zeilen. Damit richten sich die Ueberschriften von allein aneinander aus.

   Nur fuer Zeilen MIT Angabe (`:has()`): das Achsen-Register auf
   /ki-als-trainingsassistent/ hat nur Ueberschriften und bleibt zweispurig.
   Frueher scheiterte dieser Weg an `justify-content: space-between`, das die
   Ziffer von ihrer Ueberschrift wegtrieb — das ist seit dem Inhaltsdeckel raus. */
/* Owner 2026-08-18: die Ueberschriften standen bis zu 31px versetzt.
 *
 * Ursache war nicht der Abstand, sondern dass JEDE ZEILE EIN EIGENES GITTER war.
 * Eine `auto`-Spur misst sich dann nur an ihrer eigenen Zeile — also hing jede
 * Ueberschrift daran, wie breit die Angabe links zufaellig ausfiel. Ein Register,
 * dessen zweite Spalte in jeder Zeile woanders anfaengt, ist kein Register.
 *
 * Erster Anlauf war `display: contents` an der Zeile. Das richtete die Spalten
 * zwar aus, loeste aber die Zeile als Element auf — und mit ihr das, was die
 * Haarlinie trug. Die Linie sass danach an den drei Zellen, und weil jede Zelle
 * nur so hoch ist wie ihr Inhalt, lag sie in drei verschiedenen Hoehen. Getauscht:
 * ein Versatz gegen einen Treppenstrich.
 *
 * `subgrid` ist das Werkzeug, das beides kann: der Behaelter legt die Spuren fest,
 * die Zeile BLEIBT ein Element und uebernimmt sie. Damit stehen alle Spalten auf
 * einer Linie UND die Zeile traegt ihre Haarlinie ueber die volle Breite.
 *
 * Nur ab 861px — darunter stapelt das Register. Und nur mit `@supports`: ohne
 * subgrid bleibt das alte Verhalten, das versetzt ist, aber nicht kaputt.
 */
@media (min-width: 861px) {
	@supports (grid-template-columns: subgrid) {
		.qv-b-stufen:has(.qv-b-stufe__zahl) {
			display: grid;
			grid-template-columns: auto minmax(0, 16rem) minmax(0, 1fr);
			column-gap: clamp(0.9rem, 1.8vw, 1.6rem);
		}

		.qv-b-stufen:has(.qv-b-stufe__zahl) > .qv-b-stufe {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
		}

		/* Die Marke loest sich auf, damit Angabe und Ueberschrift eigene Spalten
		   der Zeile werden — die Zeile selbst bleibt und behaelt ihre Linie. */
		.qv-b-stufen:has(.qv-b-stufe__zahl) .qv-b-stufe__marke {
			display: contents;
		}

		.qv-b-stufen:has(.qv-b-stufe__zahl) .qv-b-stufe__marke h3 {
			margin-bottom: 0;
		}
	}
}
.qv-b-stufe__marke .qv-b-stufe__zahl {
	flex: 0 0 auto;
}

.qv-b-stufe__marke h3 {
	overflow-wrap: break-word;
}

/* Eine Wortangabe traegt nicht die Ziffernggroesse. „auf Anfrage" bei 40px ist
   keine Figur mehr, sondern eine zweite Ueberschrift, die mit der echten um den
   Platz kaempft. Etwas groesser als die Ueberschrift daneben reicht, damit sie
   als Angabe gelesen wird — und `nowrap`, weil „auf / Anfrage" nie umbrechen darf. */
.qv-b-stufe__zahl--wort {
	font-size: clamp(1.25rem, 2.1vw, 1.75rem);
	white-space: nowrap;
}

.qv-b-stufe__zahl {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3.1vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	font-variant-numeric: tabular-nums;
}

.qv-b-stufe h3 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 1.9vw, 1.55rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	margin: 0 0 0.3rem;
	text-wrap: balance;
}

/* Zwei Klassen im Selektor, sonst setzt `.qv-b p` (0,1,1) die 72ch-Messbreite
   durch und die Zeile bricht mitten im Track um. */
.qv-b-stufe .qv-b-stufe__text {
	/* Die Spur fuellt die Zeile, der Absatz behaelt seine Lesebreite. */
	max-width: 62rem;
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--qv-ink);
	margin: 0;
	max-width: none;
}

/* Below the register the mark sits over its text instead of beside it. */
@media (max-width: 860px) {
	.qv-b-stufe {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}
}

/* --- the callback form ------------------------------------------------------
 * The callback stays inside the green band rather than getting a band of its own
 * below it: that would give the page three closing blocks and take green off the
 * bottom, which is a decision already made.
 *
 * The form runs the full width and lays its fields out in a grid. Stacked in one
 * narrow column it measured 690px tall, and that height is what forced the
 * side-by-side that left the hole. Three tracks make it wide instead of deep.
 *
 * WPForms ships wpforms-full.min.css and it loads before this file, but loading
 * order does not settle it: its rules run
 * `div.wpforms-container-full .wpforms-form button[type=submit]` — (0,3,2), and
 * a three-class chain of ours is (0,3,1) and loses. Measured, not guessed: the
 * submit button kept the plugin's #EEE and its body font while matching our
 * selector. Every rule below therefore carries `.wpforms-form` as well, which
 * puts it at (0,4,x) and above the plugin without a single !important.
 */

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	/* One readable column. Vorname/Nachname still share a line — that pair is a
	   single field, not two questions. */
	max-width: 38rem;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form {
	margin: 0;
}

/* The grid goes on .wpforms-field-container, NOT on the form: the form's own
   children are a <noscript>, this container and the submit container, so a grid
   on the form would lay out three boxes and leave the fields stacked inside one
   of them. Read out of the DOM rather than assumed. */
/* The honeypot wrappers are position:absolute and therefore out of flow — they
   take no grid cell. Noted so nobody "fixes" that later. */

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field {
	min-width: 0;
	padding: 0 0 clamp(0.55rem, 1.1vw, 0.8rem);
}

/* Labels are labels, not captions: the site's type floor applies inside the
   form too. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-label {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	line-height: 1.3;
	color: var(--qv-ink);
	margin: 0 0 0.3rem;
}

/* The plugin paints the asterisk pure red (#F00) — 2.3:1 on this band, and a
   red star next to a label is decoration, not information. It stays as the ink,
   and the variable is set too because newer WPForms reads the colour from
   there. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container {
	--wpforms-label-error-color: #5C0F0F;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--qv-ink);
	font-weight: 700;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-sublabel {
	font-size: var(--qv-text-xs);
	font-weight: 500;
	color: #1E2B06;
	margin-top: 0.2rem;
}

/* White surfaces on the green ground, the same control radius as every other
   control on the site, and 44px minimum so a thumb can hit them. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input[type="text"],
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input[type="email"],
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input[type="tel"],
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input[type="url"],
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input[type="number"],
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form select,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font-family: var(--qv-font-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--qv-ink);
	background: #FFFFFF;
	border: 1px solid rgba(24, 23, 22, 0.32);
	border-radius: var(--qv-radius-control);
	box-shadow: none;
	transition: border-color 0.15s;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form textarea {
	min-height: 5.5rem;
	resize: vertical;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input::placeholder,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form textarea::placeholder {
	color: #5A6461;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input:focus,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form select:focus,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form textarea:focus {
	/* --qv-green-cta is the focus ring everywhere else on the site, but this
	   band IS green — the ring has to be the ink to be seen at all. */
	border-color: var(--qv-ink);
	outline: 3px solid var(--qv-ink);
	outline-offset: 1px;
}

/* The plugin sizes fields by class — .wpforms-field-medium is 60 % of its
   container, .wpforms-one-half is 48 % of that again. In a column that is
   already the right width, those percentages just make the controls small and
   ragged, so every one of them goes back to full width. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field .wpforms-field-small,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field .wpforms-field-medium,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field .wpforms-field-large {
	width: 100%;
	max-width: 100%;
}

/* The plugin clears its floats with ::before/::after on this row. Those pseudo
   elements become GRID ITEMS the moment the row is a grid, and they took cell 1
   and cell 4 — which is why the first name field sat in the right column and the
   second dropped to a second line. Measured, not guessed: both pseudos compute
   content: "". */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-row::before,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-row::after {
	content: none;
}

/* Vorname / Nachname sit side by side once there is room for them. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem;
}

@media (min-width: 520px) {
	:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-row-block {
	width: 100%;
	max-width: 100%;
	float: none;
	padding: 0;
	margin: 0;
}

/* The filled control on this band is ink, not green: green on green is not a
   button. White on --qv-ink measures 17.9:1. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-submit-container {
	padding: clamp(0.3rem, 0.8vw, 0.6rem) 0 0;
}

/* Not full width any more: across the whole band that would be a 1300px button.
   It takes the width a control needs. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form button[type="submit"] {
	display: block;
	width: 100%;
	max-width: 22rem;
	min-height: 48px;
	padding: 0.78rem 1.2rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: #FFFFFF;
	background: var(--qv-ink);
	border: 1px solid var(--qv-ink);
	border-radius: var(--qv-radius-control);
	cursor: pointer;
	transition: background-color 0.15s;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form button[type="submit"]:hover,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form button[type="submit"]:focus-visible {
	background: #000000;
}

/* The plugin's red is 2.6:1 on this band. This one measures 6.3:1. */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form label.wpforms-error,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form em.wpforms-error {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--qv-text-xs);
	font-weight: 600;
	color: #5C0F0F;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form input.wpforms-error,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form select.wpforms-error,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form textarea.wpforms-error {
	border-color: #5C0F0F;
	border-width: 2px;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-confirmation-container-full {
	margin: 0;
	padding: clamp(0.9rem, 1.8vw, 1.3rem);
	background: #FFFFFF;
	border: 1px solid var(--qv-ink);
	border-radius: var(--qv-radius-panel);
	color: var(--qv-ink);
}

/* === furniture: header and footer ==========================================
 * Both are bands too. They use --qv-gutter, never the shell: with the shell the
 * logo sat ~70px further in than the hero headline directly below it, which is
 * the kind of misalignment that reads as "unfinished" without anyone being able
 * to name it.
 *
 * Neither adds a diagonal. The page's two cuts are spent on band 1 and band 4,
 * and the rule is two per page.
 */

/* --- header ------------------------------------------------------------- */

/* Der Fuehler ist 1px hoch und liegt vor dem Kopf. Solange er im Bild ist, steht
   der Kopf gross; sobald er oben rausgescrollt ist, schrumpft der Kopf. Im
   klebenden Element selbst koennte ein Fuehler das nie melden — es verlaesst den
   Bildrand ja nicht. */
.qv-kopf__fuehler {
	height: 1px;
}

.qv-kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--qv-bg);
	padding-inline: max(var(--qv-gutter), (100% - var(--qv-inhalt)) / 2);
	transition: box-shadow 0.2s ease;
}

/* Die schmale Leiste. Nur Polsterung und Wortmarkengroesse aendern sich — die
   Punkte bleiben, wo sie waren, damit der Kopf beim Umschalten nicht springt.
   Der Schatten trennt die Leiste vom Band darunter; ohne ihn schwimmt weisse
   Schrift auf weissem Grund, sobald ein helles Band vorbeizieht. */
.qv-kopf.is-schmal {
	box-shadow: 0 1px 0 var(--qv-hair), 0 10px 24px -20px rgba(24, 23, 22, 0.5);
}

.qv-kopf.is-schmal .qv-kopf__innen {
	padding-block: clamp(0.3rem, 0.6vw, 0.5rem);
}

.qv-kopf.is-schmal .custom-logo {
	height: clamp(2rem, 2.6vw, 2.4rem);
}

/* Der Ort steht nur da, wo das Menue eingeklappt ist. Auf dem Schirm markiert
   das Menue die aktuelle Seite selbst. */
.qv-kopf__ort {
	display: none;
	order: 1;
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	letter-spacing: -0.01em;
	color: var(--qv-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sprungziele muessen unter der klebenden Leiste hervorkommen, sonst landet ein
   Klick auf #kontakt hinter dem Kopf. */
.qv-b-schluss,
.qv-page [id] {
	scroll-margin-top: clamp(4.2rem, 7vw, 5.6rem);
}

.qv-kopf__innen {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 2.2rem);
	padding-block: clamp(0.55rem, 1.1vw, 0.9rem);
}

/* `min-height` statt Innenabstand: im geschrumpften Kopf faellt das Logo bei
   320px auf 32px, plus 2x4,8px Abstand waren das 41,6px — zwei Pixel unter dem
   Tapziel, und nur im geklebten Zustand sichtbar. Ein Innenabstand stimmt immer
   nur bei einer Logohoehe; ein Mindestkasten bei jeder. */
.custom-logo-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	flex: none;
	order: 1;
	padding-block: 0.3rem;
}

/* The source file is 750×232, sized by height so a future vector version drops
   in without a CSS change. */
.custom-logo {
	display: block;
	height: clamp(2.53rem, 3.52vw, 3.25rem);
	width: auto;
}

.qv-kopf .qv-brand {
	order: 1;
	flex: none;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: -0.03em;
	text-decoration: none;
	padding-block: 0.4rem;
}

.qv-brand__q { color: var(--qv-blue-ink); }
.qv-brand__d { color: var(--qv-green-ink); }

/* The menu is set in the display face, at reading size. It was 0.92rem in a
   grey — caption weight for the site's primary navigation. */
.qv-kopf__navi {
	order: 2;
	margin-inline-start: auto;
	min-width: 0;
}

.qv-kopf__liste {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(0.1rem, 1.1vw, 1.05rem);
}

.qv-kopf__liste a {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 600;
	/* Owner 2026-08-18: „Menu font a little bigger". War 16,3px bis 18,9px —
	   fuer die einzige dauerhaft sichtbare Navigation der Site zu leise.

	   Gewachsen ist der FAKTOR und der Deckel, nicht der Mindestwert. Der erste
	   Anlauf hob den Mindestwert auf 1.12rem mit — und damit lief die Leiste bei
	   1280px um 63px ueber, weil dort der Mindestwert gewinnt und zwoelf Punkte
	   plus Wortmarke plus Handlungsaufruf keinen Millimeter uebrig haben. Der
	   Mindestwert gehoert also da hin, wo es eng ist, und das Wachstum dorthin,
	   wo Platz ist: 16,4px bei 1280 wie bisher, 18,4px bei 1440, 21,1px bei 1920. */
	font-size: clamp(1.02rem, 1.28vw, 1.32rem);
	letter-spacing: -0.014em;
	color: var(--qv-ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.85rem 0.15rem;
	/* The green rule is the site's accent device, not a filled pill. */
	border-bottom: 3px solid transparent;
}

.qv-kopf__liste a:hover,
.qv-kopf__liste .current-menu-item > a,
.qv-kopf__liste .current-menu-ancestor > a {
	/* --qv-green is 2.1:1 on white. This rule is the only marker of the current
	   page, so it takes the darkened derivative and clears 3:1. */
	border-bottom-color: var(--qv-green-cta);
}

.qv-kopf__liste > li {
	position: relative;
}

/* Sub-menus open on hover and on focus-within, so keyboard users get them too. */
.qv-kopf__liste .sub-menu {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	min-width: 15rem;
	background: var(--qv-bg);
	border: 1px solid var(--qv-hair);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.qv-kopf__liste > li:hover > .sub-menu,
.qv-kopf__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.qv-kopf__liste .sub-menu a {
	padding: 0.55rem 1rem;
	border-bottom: 0;
	border-inline-start: 3px solid transparent;
	white-space: normal;
}

.qv-kopf__liste .sub-menu a:hover {
	border-inline-start-color: var(--qv-green-cta);
}

/* The header call is the OFFICE number, and it is built like every other offer
   on the site: label, figure, nothing else. Green because calling is the
   action. */
.qv-kopf__ruf {
	order: 3;
	flex: none;
	display: block;
	text-decoration: none;
	padding-block: 0.3rem;
	padding-inline-start: clamp(0.8rem, 1.6vw, 1.5rem);
	border-inline-start: 1px solid var(--qv-hair);
}

.qv-kopf__ruf-kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--qv-ink-2);
}

.qv-kopf__ruf-nummer {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.02rem, 1.45vw, 1.28rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--qv-green-ink);
	white-space: nowrap;
	transition: color 0.15s;
}

.qv-kopf__ruf:hover .qv-kopf__ruf-nummer,
.qv-kopf__ruf:focus-visible .qv-kopf__ruf-nummer {
	color: var(--qv-ink);
}

.qv-kopf__schalter {
	display: none;
	order: 2;
	margin-inline-start: auto;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--qv-hair);
	border-radius: var(--qv-radius-control);
	cursor: pointer;
	padding: 0;
}

.qv-kopf__balken,
.qv-kopf__balken::before,
.qv-kopf__balken::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--qv-ink);
	border-radius: 2px;
	content: "";
}

.qv-kopf__balken::before { transform: translateY(-6px); }
.qv-kopf__balken::after { transform: translateY(4px); }

/* Six German menu labels plus a logo plus the number stop fitting on one line
   well before the usual tablet breakpoint. */
@media (max-width: 1200px) {
	.qv-kopf__innen {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	/* Der Schalter steht ganz rechts, die Nummer davor. Vorher trug er
	   `margin-inline-start: auto` und landete damit ZWISCHEN Wortmarke und
	   Nummer — Owner-Screenshot vom 2026-08-26: er las sich dort als
	   verrutscht. Auf dem Telefon liegt der Daumen an der rechten Kante. */
	.qv-kopf__schalter {
		display: block;
		order: 4;
		margin-inline-start: 0;
	}

	.qv-kopf__ruf {
		order: 3;
		margin-inline-start: auto;
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.qv-kopf__navi {
		order: 5;
		display: none;
		flex: 1 1 100%;
		margin-inline-start: 0;
	}

	/* Das offene Menue ist die zweite Zeile des KLEBENDEN Kopfes und darf ihn
	   nicht ueber den Schirm hinauswachsen lassen. Gemessen am 2026-08-26:
	   aufgeklappt war der Kopf 1208px hoch bei 844px Schirmhoehe — die unteren
	   Menuepunkte waren nur erreichbar, indem man die Seite darunter
	   wegscrollte. Jetzt scrollt das Blatt in sich.
	   `svh` ist die kleine Schirmhoehe: die Leiste des Browsers zaehlt mit,
	   sonst steht der letzte Punkt unter der Adresszeile. `vh` bleibt als
	   Rueckfall fuer Browser ohne die Einheit stehen. */
	.qv-kopf__navi.is-open {
		display: block;
		max-height: calc(100vh - 7rem);
		max-height: calc(100svh - 7rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.qv-kopf__liste {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--qv-hair);
		padding-block: 0.3rem;
	}

	.qv-kopf__liste a {
		border-bottom: 0;
		border-inline-start: 3px solid transparent;
		padding: 0.72rem 0.7rem;
	}

	.qv-kopf__liste a:hover,
	.qv-kopf__liste .current-menu-item > a {
		border-inline-start-color: var(--qv-green-cta);
	}

	.qv-kopf.is-schmal .qv-kopf__ort {
		display: block;
	}

	.qv-kopf__liste .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		min-width: 0;
		padding: 0;
		padding-inline-start: 0.7rem;
	}
}

/* Aufgeklappt ist der Schalter ein Kreuz. Ohne diesen Zustand bleibt der
   Burger stehen, waehrend das Menue offen ist, und die einzige Rueckmeldung
   ist `aria-expanded` — die sieht niemand. Gerechnet, nicht geraten: die
   Pseudo-Elemente fliessen im 2px hohen Balken, ihre Mitten liegen natuerlich
   bei 1px und 3px. Fuer ein Kreuz muessen beide auf 1px. */
.qv-kopf__balken,
.qv-kopf__balken::before,
.qv-kopf__balken::after {
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.qv-kopf__schalter[aria-expanded="true"] .qv-kopf__balken {
	background: transparent;
}

.qv-kopf__schalter[aria-expanded="true"] .qv-kopf__balken::before {
	transform: rotate(45deg);
}

.qv-kopf__schalter[aria-expanded="true"] .qv-kopf__balken::after {
	transform: translateY(-2px) rotate(-45deg);
}

/* Der Ort braucht Platz, den ein Telefon nicht hat. Er traegt `flex: 1 1 auto`
   und nimmt sich die Breite seines vollen Titels — bei 500px waren das 443px,
   und der Kopf brach auf DREI Zeilen um (gemessen: 146px hoch im
   geschrumpften Zustand). Auf dem Telefon steht die Schlagzeile ohnehin einen
   Daumen weiter unten; zwischen 700 und 1200px ist Platz fuer beides. */
@media (max-width: 700px) {
	.qv-kopf.is-schmal .qv-kopf__ort { display: none; }
}

/* Und auf dem Telefon faellt auch die Beschriftung ueber der Nummer weg.
   Gerechnet bei 375px: 343px stehen zur Verfuegung, Wortmarke 129 plus Schalter
   44 plus zwei Abstaende 32 lassen 138 — „ANGEBOT & BERATUNG" misst gesperrt
   rund 130 und kippt die Zeile. Die Nummer allein misst 95.
   Sie verliert dabei nichts: sie steht in Markengruen, sie ist ein `tel:`-Link,
   und sie ist das einzige Element im Kopf, das nach einer Rufnummer aussieht.
   Gemessen ohne die Beschriftung: eine Zeile, 61px, 43px Luft. */
@media (max-width: 560px) {
	.qv-kopf__ruf-kennung { display: none; }

	.qv-kopf__ruf-nummer { font-size: 1.12rem; }
}

/* --- footer ------------------------------------------------------------- */
/* Ink, not the old deep blue: blue is the KI's colour on this site, and a blue
   field at the foot argued with the blue hero. The page closes on the same dark
   the contact band opens with. */

.qv-fuss {
	background: var(--qv-ink);
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
	padding-inline: max(var(--qv-gutter), (100% - var(--qv-inhalt)) / 2);
	padding-block: clamp(2rem, 4vw, 3.4rem) clamp(1.1rem, 2.2vw, 1.7rem);
}

.qv-fuss__innen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.6rem, 3.4vw, 4rem);
	align-items: start;
}

@media (min-width: 760px) {
	.qv-fuss__innen {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr);
	}
}

/* Der Schriftzug traegt seine Unterzeile, so wie die echte Wortmarke im Kopf.
   Ohne sie liest der Footer wie eine andere Firma als der Header. */
.qv-brand__sub {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--qv-font-sans);
	font-weight: 500;
	font-size: 0.84rem;
	letter-spacing: 0.22em;
	color: var(--qv-ink-2);
}

.qv-fuss .qv-brand__sub { color: rgba(255, 255, 255, 0.74); }

.qv-fuss .qv-brand {
	display: inline-block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 3vw, 2.35rem);
	letter-spacing: -0.035em;
	text-decoration: none;
}

.qv-fuss .qv-brand__q { color: var(--qv-blue); }
.qv-fuss .qv-brand__d { color: var(--qv-green); }

.qv-fuss__ruf {
	display: block;
	margin-top: clamp(0.9rem, 2vw, 1.4rem);
	text-decoration: none;
}

.qv-fuss__satz {
	margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
	font-size: 1.04rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: 34ch;
}

.qv-fuss__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
	margin-bottom: 0.3rem;
}

.qv-fuss__nummer {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: #FFFFFF;
	white-space: nowrap;
	transition: color 0.15s;
}

.qv-fuss__ruf:hover .qv-fuss__nummer,
.qv-fuss__ruf:focus-visible .qv-fuss__nummer { color: var(--qv-green); }

.qv-fuss__kontakt p {
	margin: 0 0 0.35rem;
	font-size: 1.04rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: var(--qv-measure);
}

.qv-fuss__kontakt a {
	/* Same treatment as the two footer menus: the address widget's e-mail link
	   measured 23px tall and was the last target on the site under 44. */
	display: inline-block;
	padding-block: 0.62rem;
	margin-block: -0.62rem;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.qv-fuss__kontakt a:hover {
	color: #FFFFFF;
	border-bottom-color: var(--qv-green);
}

.qv-fuss__widget-title,
.qv-fuss__kontakt h2 {
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
	margin: 0 0 0.6rem;
}

.qv-fuss__liste,
.qv-fuss__rechtliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qv-fuss__liste a,
.qv-fuss__rechtliste a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	/* 44px tap target: 0.6rem above and below a 1.5 line-height. */
	padding-block: 0.6rem;
	border-bottom: 2px solid transparent;
}

.qv-fuss__liste a:hover,
.qv-fuss__rechtliste a:hover {
	color: #FFFFFF;
	border-bottom-color: var(--qv-green);
}

.qv-fuss__recht {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(1.6rem, 3vw, 2.6rem);
	padding-top: clamp(0.9rem, 1.8vw, 1.3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--qv-text-sm);
	color: rgba(255, 255, 255, 0.76);
}

.qv-fuss__rechtliste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.6rem;
}

.qv-fuss__copy { margin: 0; }

/* --- /ueber-uns/: die zwei Gesichter ----------------------------------------
 * Portraets im Hochformat, nicht als runde Avatare. `.qv-b-stimme` ist fuer
 * Sofia und Liam gebaut — 393x393, kreisrund beschnitten. Die zwei Portraets
 * hier sind 440x550 Halbfiguren; ein Kreisschnitt haette Uwe Buerder das Gesicht
 * abgeschnitten, weil es im oberen Drittel des Bildes sitzt.
 *
 * ZEILEN, keine Spalten. Zwei Personen nebeneinander waeren zwei gleich breite
 * Spalten, und die muessen nach Regel 6a zusammen enden — was sie nicht koennen,
 * weil die eine ein Zitat traegt und die andere nicht. Als Register mit
 * Haarlinie darf jede Zeile ihre eigene Hoehe haben, und es entsteht kein Loch.
 */
.qv-b-gesichter {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 1px solid rgba(24, 23, 22, 0.34);
}

.qv-b-gesicht {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.9rem, 2vw, 1.4rem);
	padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
	border-bottom: 1px solid rgba(24, 23, 22, 0.34);
}

@media (min-width: 620px) {
	/* Feste Bildspur, der Text nimmt den Rest — eine `1fr`-Spur fuer ein Bild
	   mit 440px Eigenbreite waere eine Spur, die breiter ist als ihr Inhalt.
	   `start` und nicht `center`: die Regel „die ganze Aussage auf die Figur
	   zentrieren" gilt fuer eine Ziffer auf line-height 1 neben einem Satz. Ein
	   4:5-Portraet ist so hoch wie sein Text; zentriert saesse der Name nicht
	   mehr auf Augenhoehe. */
	.qv-b-gesicht {
		grid-template-columns: clamp(8rem, 15vw, 13rem) minmax(0, 1fr);
		gap: clamp(1.2rem, 2.6vw, 2.2rem);
		align-items: start;
	}
}

.qv-b-gesicht__bild {
	display: block;
	/* Gestapelt steht das Bild ueber dem Text und darf die Seite nicht fuellen —
	   ein Portraet in Bildschirmbreite ist ein Plakat, kein Portraet. */
	max-width: 11rem;
}

.qv-b-gesicht__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--qv-radius-panel);
}

.qv-b-gesicht__text {
	min-width: 0;
}

.qv-b-gesicht__name {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
}

.qv-b-gesicht__rolle {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--qv-green-ink);
}

/* Kindselektor `>`, nicht Nachfahre: sonst greift diese Regel auch in das
   Zitat hinein, das im selben Kasten steht, und macht aus dem Gesprochenen
   wieder Fliesstext. `max-width: none`, weil `.qv-b p` (0,1,1) sonst 72ch in
   eine Spur legt, die ohnehin schmaler ist — ein zweiter Deckel, und die Spur
   endet vor ihrer eigenen Kante. */
.qv-b-gesicht .qv-b-gesicht__text > p {
	margin: clamp(0.7rem, 1.4vw, 1rem) 0 0;
	max-width: none;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	color: var(--qv-ink-2);
}

/* --- das Zitat --------------------------------------------------------------
 * Gesprochenes, also groesser gesetzt und mit einer gruenen Kante links statt
 * kursiv: Gabarito hat keinen kursiven Schnitt, und ein schraeg gestellter
 * Grotesk waere ein gefaelschter.
 */
.qv-b-zitat {
	margin: clamp(0.9rem, 1.8vw, 1.3rem) 0 0;
	padding-left: clamp(0.9rem, 1.8vw, 1.3rem);
	border-left: 3px solid var(--qv-green-cta);
}

.qv-b .qv-b-zitat p {
	margin: 0;
	max-width: 46ch;
	font-family: var(--qv-font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--qv-ink);
}

/* Die freistehende Fassung im Nebelband: sie gehoert keiner Spalte, also nimmt
   sie die Lesebreite des Bandes und traegt ihren Sprecher darunter. */
.qv-b-zitat--breit {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
}

.qv-b .qv-b-zitat--breit p {
	max-width: var(--qv-measure);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.qv-b-zitat cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--qv-font-display);
	font-style: normal;
	font-weight: 700;
	font-size: var(--qv-text-sm);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--qv-ink-2);
}

/* --- Zielzeile in einer Merkmalspalte ---------------------------------------
 * Auf /kontakt/ hat jede Spalte ein Ziel: die Jobseite, die
 * Datenschutzerklaerung, die Nummer der Verwaltung. Als Link IM Satz waeren das
 * Tapziele von 18px Hoehe — WCAG nimmt Links im Fliesstext davon zwar aus, aber
 * auf dieser Site ist bisher kein Ziel unter 44px, und eine Ausnahme faellt
 * genau dann auf, wenn sie die einzige ist.
 *
 * Also steht das Ziel unter seinem Absatz, als eigene Zeile mit eigener Hoehe.
 * `min-height` statt `padding`: die Zeile ist im Anzeigeschnitt gesetzt und
 * baut je nach Breite unterschiedlich hoch — ein Mindestkasten haelt bei jeder,
 * ein Innenabstand nur bei einer.
 */
.qv-b-merkmal__ziel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: clamp(0.4rem, 0.9vw, 0.7rem);
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	color: var(--qv-ink);
	text-decoration: underline;
	text-decoration-color: var(--qv-green-cta);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
	overflow-wrap: break-word;
}

.qv-b-merkmal__ziel:hover,
.qv-b-merkmal__ziel:focus-visible {
	text-decoration-color: var(--qv-ink);
}

/* --- Zeichen fuer Untermenues -----------------------------------------------
 * Owner 2026-08-18: „how can visitor visually see that menu entry has sub
 * entries right now?" — Gar nicht. Das Untermenue klappte nur beim Ueberfahren
 * auf, und bis zu diesem Tag hatte genau EIN Punkt Unterpunkte. Jetzt sind es
 * fuenf von sieben, und wer nicht zufaellig darueberfaehrt, sieht zwoelf Seiten
 * nicht.
 *
 * Gezeichnet und nicht aus einem Symbolsatz: zwei Kanten in der Strichstaerke
 * der Wortmarke, mit weicher Ecke. Beim Aufklappen dreht der Winkel nach oben,
 * damit der Zustand sichtbar ist und nicht nur der Hinweis.
 *
 * Auf dem Telefon steht das Untermenue ohnehin offen — dort waere ein Winkel
 * die Zusage auf ein Aufklappen, das es nicht gibt. Also bleibt er dort weg.
 */
.qv-kopf__liste .menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.34em;
}

.qv-kopf__liste .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 0.36em;
	height: 0.36em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 0 0 2px 0;
	transform: translateY(-0.11em) rotate(45deg);
	transition: transform 0.15s ease;
}

.qv-kopf__liste > .menu-item-has-children:hover > a::after,
.qv-kopf__liste > .menu-item-has-children:focus-within > a::after {
	transform: translateY(0.07em) rotate(-135deg);
}

@media (max-width: 1200px) {
	.qv-kopf__liste .menu-item-has-children > a::after { display: none; }
	.qv-kopf__liste .menu-item-has-children > a { display: block; }
}

/* Ein kurzes Wort in der Fusszeile ist ein schmales Ziel: „Jobs" mass 37px
   breit bei 48px Hoehe, weil ein Inline-Block nur so breit ist wie sein Text.
   Die Hoehe war ueber den Innenabstand geloest, die Breite gar nicht — bei
   „Telefonservice" faellt das nicht auf, bei einem Vierbuchstabenwort schon. */
.qv-fuss__liste a,
.qv-fuss__rechtliste a {
	min-width: 44px;
}

/* Zwei Weiterwege in einem Band: der erste bleibt in derselben Tuer, der zweite
   benennt den Wechsel („Sie suchen die ausgelagerte Telefonannahme?"). Als
   Inline-Elemente stiessen sie ohne Abstand aneinander und lasen sich wie ein
   Satz. Untereinander, sobald es zwei sind. */
.qv-b-weiter-link:has(+ .qv-b-weiter-link),
.qv-b-weiter-link + .qv-b-weiter-link {
	display: flex;
	/* Ohne das ist der gestapelte Link so breit wie das Band — 1304px anklickbare
	   Flaeche fuer 350px Text. Man traefe ihn weit rechts, wo gar nichts steht. */
	width: max-content;
	max-width: 100%;
}

/* --- Formularspur ausserhalb des Abschlussbandes ----------------------------
 * Die Stellenanzeigen tragen ihr eigenes Bewerbungsformular. Die WPForms-Regeln
 * hingen bis dahin alle an `.qv-b-schluss` — ein Formular anderswo waere in
 * WPForms' eigenem Blau erschienen. Die Regeln tragen jetzt
 * `:is(.qv-b-schluss, .qv-b-formular)`; `:is()` zaehlt so viel wie sein
 * staerkstes Argument, die Spezifitaet bleibt also genau wie vorher.
 *
 * Design-Regel 6c: ein Formular ist eine Aufgabe und braucht eine schmale Spur.
 * Ueber die volle Bandbreite zwingt es das Auge nach jedem Feld quer zurueck.
 */
.qv-b-formular {
	max-width: 38rem;
	margin-top: clamp(1.2rem, 2.6vw, 2rem);
}

/* --- Film in einem Band ------------------------------------------------------
 * Die Teleagent-Anzeige hat einen 25-Sekunden-Clip in 960x540. `controls` und
 * `preload="metadata"`: er laeuft nur, wenn jemand ihn startet — damit ist er
 * keine Dauerbewegung und faellt nicht unter Regel 7. Und er laedt nicht 4 MB,
 * bevor jemand ihn sehen will.
 *
 * Gedeckelt auf die Eigenbreite der Datei: hochskaliert waere er unscharf, und
 * eine Spalte, die breiter ist als ihr Inhalt, ist eine falsch gesetzte Spalte.
 */
.qv-b-film {
	margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
	max-width: 60rem;
}

.qv-b-film video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--qv-ink);
	border-radius: var(--qv-radius-panel);
}

.qv-b-film figcaption {
	margin-top: 0.55rem;
	font-size: var(--qv-text-xs);
	color: var(--qv-ink-2);
}

/* --- Ankreuzfelder im Formular ----------------------------------------------
 * Das Formular im Abschlussband hat keine, die drei Stellenanzeigen haben neun.
 * Ungestylt waren die Auswahlzeilen 21px hoch und das Kaestchen 14x14 — wer sich
 * auf dem Telefon bewirbt, muesste neunmal auf 21px treffen.
 *
 * Die Zeile wird zur Reihe, das Label traegt den Mindestkasten von 44px und
 * nimmt die Restbreite: bei einem Ankreuzfeld ist die ganze Zeile das Ziel, und
 * bei „Ja" waere ein nur textbreites Label 20px breit.
 *
 * NUR `li label` — die Feldueberschrift („Welche Erfahrungen hast Du?") ist
 * ebenfalls ein `label`, aber `.wpforms-field-label` und liegt nicht in einem
 * `li`. Sie ist eine Ueberschrift und braucht keinen Tapkasten.
 */
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-checkbox ul,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-radio ul {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-checkbox li,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-radio li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-checkbox li input,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-radio li input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--qv-ink);
}

:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-checkbox li label,
:is(.qv-b-schluss, .qv-b-formular) .wpforms-container .wpforms-form .wpforms-field-radio li label {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	font-family: var(--qv-font-sans);
	font-size: var(--qv-text-sm);
	font-weight: 400;
	color: var(--qv-ink);
	cursor: pointer;
}

/* --- Langtext: Impressum, Datenschutz, AGB -----------------------------------
 * Rechtsseiten sind Dokumente, keine Verkaufsseiten. Sie bekommen deshalb kein
 * Register und keine Karten, sondern eine Lesespalte auf dem gemeinsamen Mass.
 *
 * Die Bandfolge bleibt: Feld (blau, Schnitt unten) - Tat (Tinte) - Dokument
 * (weiss) - Nebel (Schnitt oben) - Abschluss (gruen). Zwei Diagonalen, Nachbarn
 * wechseln den Grund. Nur der Inhalt des weissen Bandes ist ein anderer.
 *
 * Die Haarlinie ueber jedem Abschnitt ist das, was einen langen Rechtstext
 * ueberhaupt ueberblickbar macht — sie ersetzt das Inhaltsverzeichnis, das diese
 * Seiten nie hatten.
 */
.qv-b-dokument {
	margin-top: clamp(1.2rem, 2.6vw, 2rem);
}

.qv-b-dokument > h2 {
	margin: clamp(2rem, 4vw, 3.2rem) 0 clamp(0.7rem, 1.4vw, 1rem);
	padding-top: clamp(0.9rem, 1.8vw, 1.3rem);
	border-top: 1px solid rgba(24, 23, 22, 0.34);
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	text-wrap: balance;
}

.qv-b-dokument > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.qv-b-dokument h3 {
	margin: clamp(1.4rem, 2.8vw, 2.1rem) 0 0.45rem;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--qv-ink);
}

.qv-b-dokument h4 {
	margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0.35rem;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-base);
	letter-spacing: 0.01em;
	color: var(--qv-ink);
}

/* Zwei Klassen, sonst deckelt `.qv-b p` (0,1,1) zwar auf dasselbe Mass, setzt
   aber die Zeilenhoehe nicht — und ein Rechtstext wird laenger gelesen als eine
   Bandzeile. */
.qv-b .qv-b-dokument p,
.qv-b .qv-b-dokument li {
	max-width: var(--qv-measure);
	font-size: var(--qv-text-base);
	line-height: 1.62;
	color: var(--qv-ink-2);
}

.qv-b-dokument p {
	margin: 0 0 0.85rem;
}

.qv-b-dokument ul,
.qv-b-dokument ol {
	margin: 0 0 0.95rem;
	padding-inline-start: 1.35rem;
}

.qv-b-dokument li {
	margin-bottom: 0.3rem;
}

.qv-b-dokument strong {
	font-weight: 700;
	color: var(--qv-ink);
}

/* Ein Link im Fliesstext ist nach WCAG 2.5.8 vom Tapziel ausgenommen, und in
   einem Rechtstext ist er unvermeidbar — eine Aufsichtsbehoerde wird verlinkt,
   wo sie genannt wird, nicht in einer Knopfzeile darunter. Dafuer traegt er eine
   deutliche Unterstreichung. */
.qv-b-dokument a {
	color: var(--qv-green-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.qv-b-dokument a:hover,
.qv-b-dokument a:focus-visible {
	color: var(--qv-ink);
}

.qv-b-dokument img {
	display: block;
	height: auto;
	max-width: 150px;
	margin: 0 0 0.85rem;
}

/* Die Schlagzeile trennt nur da, wo es im Inhalt steht ---------------------
 * Owner-Screenshot vom AGB-Titel: „Geschäfts­bed / ingungen." Die globale
 * Ueberschriftenregel setzt `hyphens: auto`, der Browser sucht sich die Fuge
 * also selbst — und bei einem 21-Zeichen-Kompositum in Plakatgroesse auf 320px
 * findet er eine falsche.
 *
 * `manual` heisst: getrennt wird ausschliesslich an einem `&shy;` im Text. Damit
 * liegt die Entscheidung wieder da, wo die Regel „Umbrueche werden im Inhalt
 * gesetzt" sie haben will. Dieselbe Korrektur steht in components.css:200 fuer
 * den Hero, aus demselben Grund („Je-mand").
 */
.qv-b-feld h1,
.qv-b-schlag {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Dieselbe Regel fuer die Bandueberschriften ------------------------------
 * Nachgezogen 2026-08-19, als die Ueberschriften auf Suchsprache umgeschrieben
 * wurden: „Was der KI-Telefonassistent uebernimmt." brach auf 320px als
 * „KI-Telefonas- / sistent". Das ist genau der Fall, fuer den die Regel oben
 * schon existiert — ein deutsches Kompositum in Displaygroesse auf einer
 * schmalen Spur, und der Browser sucht sich die Fuge selbst.
 *
 * Getrennt wird ab jetzt auch hier nur an einem gesetzten `&shy;`. Geprueft,
 * dass keine Ueberschrift dadurch ueberlaeuft: 34 Seiten auf 320px, kein
 * horizontaler Ueberlauf, keine h2/h3 breiter als ihre Spur.
 */
.qv-b h2,
.qv-b h3 {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* === Blog: Archiv, Beitrag, Suche, 404 ======================================
 * Die vier Vorlagen ohne eigene Seite im Backend. Sie tragen dieselbe Bandfolge
 * wie die 27 Inhaltsseiten — Feld, Tat, Register — und damit dieselben zwei
 * Diagonalen: der Schnitt unten am blauen Feld, der Schnitt oben am Register.
 *
 * Der zweite Schnitt ist hier gegen das TINTENBAND gesetzt, nicht gegen ein
 * weisses. Die Konstruktion ist dieselbe wie zwischen Feld und Tat, nur
 * umgekehrt: das Register rutscht um --qv-fall nach oben und nimmt sich seine
 * eigene obere Ecke weg, sodass die Tinte durch das Dreieck steht. Ein
 * dazwischengeschobenes weisses Band waere ein Band ohne Inhalt gewesen.
 */

/* Das Tintenband muss den Ueberlappungsbetrag zusaetzlich unten polstern, sonst
   schiebt sich das Register ueber seinen Text. */
.qv-b-tat--tief {
	padding-bottom: calc(var(--qv-fall) + clamp(1rem, 2vw, 1.6rem));
}

.qv-b-liste {
	position: relative;
	margin-top: calc(var(--qv-fall) * -1);
	background: var(--qv-mist);
	padding-block: calc(var(--qv-fall) + clamp(0.6rem, 1.4vw, 1.2rem)) clamp(2rem, 4vw, 3.4rem);
	clip-path: polygon(0 var(--qv-fall), 100% 0, 100% 100%, 0 100%);
}

.qv-b-liste h2,
.qv-b-weitere h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* --- die Kopfzeile EINES BEITRAGS -------------------------------------------
 * Owner am 2026-08-26, Screenshot von 1440px: „the whole screen just for the
 * headline."
 *
 * Gemessen in der alten Fassung: `--qv-h1` steht bei 1440px auf 119px, die
 * Schlagzeile lief vierzeilig auf 449px, das Band mass 648px — und darunter kam
 * noch das Tintenband, bevor der erste Satz begann. Das ist auf einer
 * Inhaltsseite richtig: dort IST die Schlagzeile das Angebot, sie hat einen
 * gesetzten Umbruch und hoechstens acht Woerter. Ein Beitragstitel hat achtzig
 * Zeichen, ist in der Redaktion fuer die Suchergebnisliste geschrieben und
 * traegt keinen gesetzten Umbruch.
 *
 * Also: Artikelgroesse statt Plakatgroesse, und ein Deckel auf der Spur. Der
 * Titel bleibt die groesste Schrift der Seite, nur nicht mehr die einzige, die
 * ins Bild passt. Gemessen danach: 2 Zeilen, Band 341px, der Text beginnt eine
 * halbe Bildschirmseite frueher.
 *
 * Die Diagonale, die Farbe und der Vorspann bleiben, wie sie sind — gebrochen
 * wird die GROESSE, nicht das System.
 */

.qv-b-feld--beitrag {
	padding-block: clamp(1.4rem, 3vw, 2.6rem) calc(var(--qv-fall) * 0.5 + clamp(1rem, 2vw, 1.6rem));
}

.qv-b-feld--beitrag h1 {
	/* 30px bis 58px statt 33px bis 134px. Der Deckel faellt, der Mindestwert
	   bleibt fast stehen: auf 320px war die Schlagzeile nie das Problem. */
	font-size: clamp(1.85rem, 4.1vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	/* KEIN Deckel auf der Spur. Ein Anlauf lang stand hier `max-width: 26ch`,
	   damit ein Titel bei 1920px nicht einzeilig ueber 1600px laeuft. Owner am
	   2026-08-26, mit Screenshot der halbleeren rechten Bandhaelfte: „use the
	   full width for the headline." Das ist auch die Regel des Hauses —
	   DESIGN-RULES 6a: eine schmale Saeule neben leerer Flaeche ist ein Loch,
	   und die Schlagzeile ist das Einzige, was dieses Band zu fuellen hat. */
}

.qv-b-feld--beitrag .qv-b-lede {
	margin-top: clamp(0.7rem, 1.4vw, 1.1rem);
}

/* Unter der Kopfzeile steht jetzt WEISS statt Tinte, und das weisse Band muss
   das Dreieck der Diagonale selbst freihalten — vorher tat das die zusaetzliche
   Polsterung des Tintenbandes. Der Schnitt ist rechts am tiefsten, der Text
   steht links, aber das Beitragsbild laeuft bis in die Spur hinein. */
.qv-b-unterschied--beitrag {
	/* Owner am 2026-08-26: „this does look strange." Zwischen dem blauen Feld
	   und der ersten Zeile standen 137px Weiss — die halbe Diagonale plus die
	   Polsterung des Bandes plus der Aussenabstand des Lesesatzes, dreimal
	   derselbe Abstand hintereinander. Die Diagonale ist bereits IM Kasten des
	   blauen Bandes; darunter braucht es nur noch den normalen Bandabstand. */
	padding-top: clamp(1rem, 2vw, 1.6rem);
}

/* --- das Angebot in der Randspalte ------------------------------------------
 * Owner am 2026-08-26: „use this space also to show what we sell?"
 *
 * Es ist KEIN Werbekasten. Die Spur ist 20rem breit und traegt darueber schon
 * drei Bloecke aus Marke und Wert; ein Rahmen mit Knopf waere die zweite
 * Formsprache in derselben Spalte. Also dieselbe Marke, dieselben Haarlinien —
 * nur die Zeilen selbst stehen in der Displayschrift, weil sie Ziele sind und
 * keine Angaben.
 *
 * Getrennt wird mit derselben Haarlinie wie zwischen den Bloecken darueber —
 * die traegt `.qv-b-rand__block + .qv-b-rand__block` bereits. Eine zweite
 * 3px-Linie stand einen Anlauf lang hier und las sich als ein zweiter Anfang
 * derselben Spalte: die Spur hat oben schon eine.
 */

/* Unter 1080px steht die Randspalte NICHT daneben, sondern davor — und damit
   staenden vier Produktlinks zwischen Schlagzeile und erstem Satz. Genau der
   Werbeblock im Lesefluss, wegen dem das Tintenband ans Ende gewandert ist.
   Auf dem Telefon traegt das Anschlussband hinter dem Artikel denselben Weg,
   an der Stelle, an der er hingehoert. */
@media (max-width: 1079px) {
	.qv-b-rand__angebot { display: none; }
}

.qv-b-rand__angebotsliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qv-b-rand__angebotsliste li + li {
	border-top: 1px solid var(--qv-hair);
}

/* 44px in beiden Achsen — dieselbe Rechnung wie beim Verzeichnis daneben:
   `display: flex` auf einem Blockelement nimmt die volle Spurbreite. */
.qv-b-rand__angebotsliste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	min-height: 44px;
	padding-block: 0.6rem;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.05rem, 1.25vw, 1.18rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--qv-ink);
	text-decoration: none;
}

/* Der Pfeil steht im Inhalt nirgends — er gehoert der Zeile, nicht dem
   Menuepunkt, und wuerde im Backend sonst mitgetippt. `aria-hidden` geht bei
   einem Pseudo-Element nicht; deshalb ein Zeichen, das Screenreader ohnehin
   ueberspringen, und der Linktext bleibt der Seitenname. */
.qv-b-rand__angebotsliste a::after {
	content: "→";
	flex: none;
	color: var(--qv-green-ink);
	opacity: 0;
	transform: translateX(-0.3rem);
	transition: opacity 0.15s, transform 0.15s;
}

.qv-b-rand__angebotsliste a:hover,
.qv-b-rand__angebotsliste a:focus-visible {
	color: var(--qv-green-ink);
}

.qv-b-rand__angebotsliste a:hover::after,
.qv-b-rand__angebotsliste a:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* --- das Anschlussband: die Geldseite unter dem Beitrag ----------------------
 * Owner am 2026-08-26: jeder Beitrag soll auf die Produktseite fuehren.
 *
 * Nebelgrund, KEINE Diagonale — die Seite hat ihre zwei bereits. Dieselbe
 * Begruendung wie beim FAQ-Band, DESIGN-RULES 6g.
 *
 * Die zusaetzliche Polsterung unten ist kein Geschmackswert: das Tintenband
 * darunter traegt `margin-top: calc(var(--qv-fall) * -1)` und zieht sich um
 * --qv-fall nach oben. Auf einer Inhaltsseite ist das gewollt, dort steht ueber
 * ihm das geschnittene blaue Feld. Hier steht ein gerade abschliessendes Band,
 * also muss dieses den Betrag selbst wieder auffuellen, sonst schiebt sich die
 * Tinte ueber die letzte Zeile des Registers.
 */
.qv-b-anschluss {
	background: var(--qv-mist);
	padding-block: clamp(2.2rem, 4.6vw, 3.8rem) calc(var(--qv-fall) + clamp(2rem, 4vw, 3.4rem));
}

.qv-b-anschluss h2 {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: var(--qv-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* --- die Beitragszeilen ------------------------------------------------------
 * Ein Register, keine Kartenwand: die Ueberschrift ist das, was jemand auf einer
 * Beitragsliste liest, also traegt sie die Displaygroesse und das Datum bleibt
 * die Marke daneben. Umgekehrt — Datum gross, Ueberschrift klein — waere die
 * Kachelform, die auf dieser Seite nirgends vorkommt.
 *
 * Das Datum steht bewusst NICHT in der Ziffernspur der Belegzeilen: „17. August
 * 2026" ist ein Wort in einer Spur, die fuer Zahlen gebaut ist, und laeuft dort
 * bei Plakatgroesse in die Nachbarspalte. Es bleibt auf Marken-Groesse.
 */

.qv-b-register {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 1px solid rgba(24, 23, 22, 0.22);
}

/* Ohne Ueberschrift ueber sich braucht das Register keinen Abstand nach oben —
   der Schnitt darueber ist schon Luft genug. Mit Ueberschrift (der Beitragsfuss
   unter einem Artikel) gilt weiter der Wert oben. */
.qv-b-register:first-child {
	margin-top: 0;
}

.qv-b-eintrag {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 62rem) 1.6rem;
	justify-content: space-between;
	gap: 0.3rem clamp(0.9rem, 1.6vw, 1.6rem);
	align-items: baseline;
	padding-block: clamp(0.9rem, 1.9vw, 1.3rem);
	border-bottom: 1px solid rgba(24, 23, 22, 0.22);
	text-decoration: none;
	color: var(--qv-ink);
}

.qv-b-eintrag__datum {
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qv-ink-2);
	white-space: nowrap;
}

.qv-b-eintrag__text {
	display: block;
	min-width: 0;
}

.qv-b-eintrag__titel {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.25rem, 2.3vw, 1.95rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	text-wrap: balance;
	/* Blogtitel sind lang und stehen so, wie die Redaktion sie geschrieben hat.
	   Getrennt wird nur an einem gesetzten &shy; — dieselbe Regel wie bei der
	   Schlagzeile, aus demselben Grund. */
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Zwei Klassen im Selektor, sonst setzt `.qv-b p` (0,1,1) die 72ch-Messbreite
   durch und die Zeile bricht vor dem Ende ihrer eigenen Spur um. */
.qv-b .qv-b-eintrag__dazu {
	display: block;
	margin: 0.35rem 0 0;
	max-width: none;
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	line-height: 1.5;
	color: var(--qv-ink-2);
}

.qv-b-eintrag__pfeil {
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--qv-ink);
	opacity: 0;
	transform: translateX(-0.35rem);
	transition: opacity 0.15s, transform 0.15s;
	justify-self: end;
}

.qv-b-eintrag:hover,
.qv-b-eintrag:focus-visible {
	background: rgba(255, 255, 255, 0.7);
}

.qv-b-eintrag:hover .qv-b-eintrag__pfeil,
.qv-b-eintrag:focus-visible .qv-b-eintrag__pfeil {
	opacity: 1;
	transform: none;
}

/* Auf dem Telefon steht das Datum ueber der Ueberschrift, und der Pfeil gehoert
   NEBEN das Datum, nicht unter die Ueberschrift. Ohne die vier Rasterplaetze
   setzt die automatische Verteilung ihn hinter die ueber beide Spalten
   laufende Ueberschrift — also allein in eine dritte Zeile, wo er wie ein
   uebriggebliebenes Zeichen aussieht. Gemessen bei 390px. */
@media (max-width: 760px) {
	.qv-b-eintrag { grid-template-columns: minmax(0, 1fr) 1.6rem; }
	.qv-b-eintrag__datum { grid-area: 1 / 1 / 2 / 2; }
	.qv-b-eintrag__pfeil { grid-area: 1 / 2 / 2 / 3; opacity: 1; transform: none; }
	.qv-b-eintrag__text { grid-area: 2 / 1 / 3 / 3; }
}

/* --- die Blaetterung ---------------------------------------------------------
 * WordPress liefert `.navigation.pagination > .nav-links > a|span.page-numbers`.
 * Die Zahlen sind Ziele: 44px in BEIDEN Achsen, auch die einstelligen — eine
 * kurze Beschriftung ist ein schmales Tapziel, und das ist hier der Normalfall.
 */

.qv-b-liste .pagination {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
}

.qv-b-liste .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.qv-b-liste .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid rgba(24, 23, 22, 0.28);
	border-radius: var(--qv-radius-control);
	background: #FFFFFF;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	color: var(--qv-ink);
	text-decoration: none;
}

.qv-b-liste a.page-numbers:hover,
.qv-b-liste a.page-numbers:focus-visible {
	background: var(--qv-ink);
	border-color: var(--qv-ink);
	color: #FFFFFF;
}

.qv-b-liste .page-numbers.current {
	background: var(--qv-ink);
	border-color: var(--qv-ink);
	color: #FFFFFF;
}

.qv-b-liste .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
}

/* --- das Suchfeld ------------------------------------------------------------
 * Steht auf der Suchseite und auf der 404. Eine Spur, kein Band-breites Feld:
 * ein Formular ist eine Aufgabe (DESIGN-RULES 6c).
 */

.qv-b-suche {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 34rem;
	margin-top: clamp(1rem, 2.2vw, 1.6rem);
}

.qv-b-suche__feld {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	border: 1px solid rgba(24, 23, 22, 0.34);
	border-radius: var(--qv-radius-control);
	background: #FFFFFF;
	font-family: var(--qv-font-sans);
	font-size: var(--qv-text-base);
	color: var(--qv-ink);
}

.qv-b-suche__knopf {
	min-height: 48px;
	padding-inline: 1.3rem;
	border: 0;
	border-radius: var(--qv-radius-control);
	background: var(--qv-ink);
	color: #FFFFFF;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	cursor: pointer;
}

.qv-b-suche__knopf:hover,
.qv-b-suche__knopf:focus-visible {
	background: var(--qv-green-cta);
}

/* Auf dem Tintenband kehrt sich das um: der gefuellte Knopf ist dort gruen,
   weil Tinte auf Tinte kein Knopf ist. */
.qv-b-tat .qv-b-suche__knopf {
	background: var(--qv-green);
	color: var(--qv-ink);
}

.qv-b-tat .qv-b-suche__knopf:hover,
.qv-b-tat .qv-b-suche__knopf:focus-visible {
	background: #A8D91F;
}

/* --- weitere Beitraege unter einem Artikel ---------------------------------- */
/* Uebernimmt .qv-b-ablauf ganz: Nebelgrund, Schnitt oben gegen das weisse
   Dokumentband darueber. Nur die Haarlinien des Registers werden dort dunkler,
   wie bei den Belegzeilen auf demselben Grund. */

.qv-b-weitere .qv-b-register {
	border-top-color: rgba(24, 23, 22, 0.22);
}

/* --- die Wege auf der 404 ---------------------------------------------------- */
/* Das Hauptmenue, als Register ausgegeben. Nichts davon steht in der Vorlage:
   wer im Backend einen Menuepunkt umbenennt, benennt ihn hier mit um. */

.qv-b-wegweiser {
	margin-top: clamp(1.2rem, 2.6vw, 2rem);
	border-top: 1px solid rgba(24, 23, 22, 0.22);
	list-style: none;
	padding: 0;
}

.qv-b-wegweiser li {
	border-bottom: 1px solid rgba(24, 23, 22, 0.22);
}

/* Nur die oberste Ebene. Ein Untermenue wuerde hier zu einer zweiten,
   ungleichgewichtigen Liste in derselben Spur. */
.qv-b-wegweiser .sub-menu {
	display: none;
}

.qv-b-wegweiser a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding-block: 0.6rem;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--qv-ink);
	text-decoration: none;
}

.qv-b-wegweiser a:hover,
.qv-b-wegweiser a:focus-visible {
	color: var(--qv-green-ink);
}

/* --- das Beitragsbild -------------------------------------------------------- */
/* Auf derselben Spur wie der Text, nicht ueber die volle Bandbreite. Ein Bild,
   das bis an den Rand laeuft, und ein Absatz, der bei 72ch aufhoert, sind zwei
   rechte Kanten in einem Band — genau das, was auf der Startseite als
   „unfertig" gelesen wurde (siehe --qv-inhalt in tokens.css). Ein Rand neben
   einem Dokument ist Luft; ein Rand neben zwei verschiedenen Kanten ist ein
   Loch. */

.qv-b-beitragsbild {
	max-width: var(--qv-measure);
	margin: 0 0 clamp(1.2rem, 2.6vw, 2rem);
}

.qv-b-beitragsbild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--qv-radius-panel);
}

/* === Der Lesesatz: Randspalte statt leerer Flaeche ===========================
 * Owner am 2026-08-18, mit rotem Rahmen auf dem leeren Drittel neben einem
 * Beitrag — und demselben Fund auf Impressum, Datenschutz und AGB. Die
 * Lesespalte laeuft auf --qv-measure und hoerte bei rund 700px auf; die
 * restlichen 600px des Bandes waren nichts.
 *
 * DESIGN-RULES 6a sagt, womit man das NICHT loest: Inhalt in die Luecke legen.
 * Das war dort zweimal der falsche Hebel. Die Regel darunter ist die richtige:
 * „Zwei gleich breite Spalten muessen zusammen enden, eine schmalere Randspalte
 * nicht." Also wird aus einer Spalte mit Loch ein Satz aus zwei Spalten
 * ungleichen Gewichts — 17rem Rand, daneben die Lesespalte.
 *
 * Die Lesebreite bleibt, wie sie ist. Sie ist der Grund, dass ein Rechtstext
 * ueberhaupt lesbar ist; sie aufzuziehen waere Fuellen statt Komponieren.
 */

.qv-b-lesesatz {
	margin-top: clamp(1.2rem, 2.6vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.4rem, 3vw, 2.4rem);
	align-items: start;
}

/* Die Randspalte steht LINKS. Owner am 2026-08-18, nachdem er beide Seiten
   gesehen hat: „switch positions."

   Rechts stand sie einen Anlauf lang, weil dort das Loch war. Das war die
   Diagnose, nicht die Loesung — was die rechte Seite fuellt, sind die
   Abschnittslinien des Dokuments, und die laufen bis an die Bandkante,
   gleichgueltig auf welcher Seite das Verzeichnis steht. Links gelesen ist es
   ausserdem das, was es ist: die Uebersicht VOR dem Text, nicht ein Anhang
   daneben.

   Damit stimmt die Rasterreihenfolge jetzt auch mit der Quelltextreihenfolge
   ueberein — ein Screenreader las das Verzeichnis ohnehin zuerst.

   Der Haltepunkt ist die Summe der beiden Spuren plus Abstand plus zweimal
   Seitenrand, nicht eine gerundete Geraetebreite. Darunter stehen sie
   untereinander, das Verzeichnis oben. */
@media (min-width: 1080px) {
	.qv-b-lesesatz {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.qv-b-lesesatz > .qv-b-rand {
		grid-area: 1 / 1 / 2 / 2;
	}

	.qv-b-lesesatz > :not(.qv-b-rand) {
		grid-area: 1 / 2 / 2 / 3;
	}
}

/* Im Lesesatz hat das Dokument keinen eigenen Abstand nach oben mehr — den
   traegt jetzt der Rahmen, sonst stuenden Rand und Text um denselben Wert
   versetzt. */
.qv-b-lesesatz .qv-b-dokument {
	margin-top: 0;
	min-width: 0;
}

/* --- die Randspalte ---------------------------------------------------------- */
/* Sie klebt, weil ein Verzeichnis, das oben stehen bleibt, waehrend man in der
   Datenschutzerklaerung auf Seite vier ist, kein Verzeichnis mehr ist. Der
   Abstand nach oben ist derselbe, den auch die Sprungziele halten — die Leiste
   im Kopf klebt ebenfalls. */

.qv-b-rand {
	min-width: 0;
	border-top: 3px solid var(--qv-ink);
	padding-top: clamp(0.7rem, 1.4vw, 1rem);
}

@media (min-width: 1080px) {
	.qv-b-rand {
		position: sticky;
		top: calc(clamp(4.2rem, 7vw, 5.6rem) + 1rem);
		/* Ein Verzeichnis, das laenger ist als der Schirm, muss in sich selbst
		   rollen — sonst ist sein Ende nie erreichbar. Die Datenschutzerklaerung
		   hat sechs Abschnitte, die Telemarketing-Fassung zehn. */
		max-height: calc(100vh - clamp(4.2rem, 7vw, 5.6rem) - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.qv-b-rand__kennung {
	display: block;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qv-ink-2);
	margin-bottom: 0.6rem;
}

.qv-b-rand__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: qv-rand;
}

.qv-b-rand__liste li {
	counter-increment: qv-rand;
	border-bottom: 1px solid var(--qv-hair);
}

.qv-b-rand__liste li:last-child {
	border-bottom: 0;
}

/* 44px in BEIDER Achse: ein Verzeichniseintrag ist oft ein kurzes Wort, und ein
   kurzes Wort ist ein schmales Tapziel. `display: flex` auf einem Blockelement
   nimmt die volle Spurbreite, damit ist die Breite erledigt. */
.qv-b-rand__liste a {
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
	min-height: 44px;
	padding-block: 0.55rem;
	font-family: var(--qv-font-sans);
	font-size: var(--qv-text-sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--qv-ink-2);
	text-decoration: none;
}

.qv-b-rand__liste a::before {
	content: counter(qv-rand);
	flex: none;
	font-family: var(--qv-font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--qv-green-ink);
}

.qv-b-rand__liste a:hover,
.qv-b-rand__liste a:focus-visible {
	color: var(--qv-ink);
}

/* --- die Randspalte eines Beitrags -------------------------------------------- */
/* Ein Beitrag hat keine Abschnitte — der von Owner markierte hat nicht eine
   einzige Zwischenueberschrift. Also traegt die Spur dort, was ein Beitrag an
   Angaben wirklich hat: wann er erschien, wo er abgelegt ist, und der Weg
   zurueck in die Liste. Alles drei kommt aus der Datenbank. */

.qv-b-rand__block + .qv-b-rand__block {
	margin-top: clamp(1rem, 2vw, 1.4rem);
	padding-top: clamp(0.8rem, 1.6vw, 1.1rem);
	border-top: 1px solid var(--qv-hair);
}

.qv-b-rand .qv-b-rand__wert {
	margin: 0;
	max-width: none;
	font-size: var(--qv-text-sm);
	line-height: 1.45;
	color: var(--qv-ink);
}

/* Die Kategorie ist ein Link in einer Angabenliste, nicht im Fliesstext — die
   WCAG-Ausnahme fuer Links im Satz gilt hier nicht. Gemessen waren 66x21px. */
.qv-b-rand__wert a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--qv-green-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.qv-b-rand__wert a:hover,
.qv-b-rand__wert a:focus-visible {
	color: var(--qv-ink);
}

.qv-b-rand__zurueck {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--qv-font-display);
	font-weight: 700;
	font-size: var(--qv-text-sm);
	color: var(--qv-ink);
	text-decoration: underline;
	text-decoration-color: var(--qv-green-cta);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.qv-b-rand__zurueck:hover,
.qv-b-rand__zurueck:focus-visible {
	text-decoration-color: var(--qv-ink);
}

/* Das Beitragsbild sitzt im Lesesatz auf der Spur des Textes und darf jetzt
   deren volle Breite nehmen — die Spur ist gedeckelt, also ist es das Bild
   auch. Der frueher hier gesetzte Deckel auf --qv-measure ist damit doppelt. */
.qv-b-lesesatz .qv-b-beitragsbild {
	max-width: none;
}

/* Ein Dokument ohne Verzeichnis bekommt keine zweite Spalte — `agb-telemarketing`
   ist eine numerierte Klauselliste ohne Abschnittsueberschriften, und ein
   Verzeichnis aus „1. 2. 3." ohne Titel waere Fuellung statt Orientierung.
   Dort steht die Lesespalte stattdessen mittig im Band. Gleiche Raender links
   und rechts lesen sich als Satzspiegel; ein Rand nur rechts als Loch. Das ist
   dieselbe Diagnose wie bei den anderen vier, nur mit dem Mittel, das ohne
   zweite Spalte uebrig bleibt.

   Direktes Kind: im Lesesatz ist das Dokument in einen Rahmen gefasst und diese
   Regel greift dort nicht. */
.qv-b-unterschied > .qv-b-dokument {
	max-width: var(--qv-measure);
	margin-inline: auto;
}

/* Der Weiterlink auf dem blauen Band ------------------------------------------
 * `.qv-b-weiter-link` traegt --qv-green-ink, und das misst auf --qv-blue 2,98:1
 * — es ist fuer Weiss und Nebel gerechnet. Auf dem Schritte-Band traegt er
 * deshalb volle Tinte, in Text UND Unterstreichung.
 */
.qv-b-schritte .qv-b-weiter-link {
	color: var(--qv-ink);
	text-decoration-color: var(--qv-ink);
}

.qv-b-schritte .qv-b-weiter-link:hover,
.qv-b-schritte .qv-b-weiter-link:focus-visible {
	text-decoration-color: rgba(24, 23, 22, 0.4);
}

/* === Haeufige Fragen ========================================================
 * Owner 2026-08-19: „das ist sehr wichtig fuer SEO und GEO". Ein FAQ-Band auf
 * den fuenf Branchen- und den drei KI-Seiten.
 *
 * Grund ist `--qv-mist`. Das Band sitzt zwischen `schritte` (blau) bzw.
 * `referenzen` (weiss) und `schluss` (gruen), wechselt also zu beiden Nachbarn —
 * Abschnitt 4 der DESIGN-RULES. **Es traegt keine Diagonale**, sonst haette die
 * Seite drei statt der erlaubten zwei.
 *
 * **Einklappbar, auf Owners Entscheidung.** Fuer Google und fuer KI-Assistenten
 * macht das keinen Unterschied: zugeklappter Text wird indexiert, und fuer
 * FAQ-Rich-Results erlaubt Google Akkordeons ausdruecklich. Es ist eine reine
 * Bedienfrage — das Band mass aufgeklappt 2,6 Bildschirme auf dem Telefon.
 *
 * Natives `<details>`/`<summary>`, kein JavaScript. Die Frage bleibt ein `h3`
 * im Inneren des `summary` (das erlaubt die Spezifikation und haelt die
 * Ueberschriftengliederung intakt). Die erste Frage steht offen, damit das Band
 * nicht als Reihe zugeklappter Kaesten beginnt.
 */
.qv-b-fragen {
	background: var(--qv-mist);
	padding-block: clamp(2.2rem, 4.6vw, 3.8rem);
}

.qv-b-frageliste {
	margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
	border-bottom: 1px solid var(--qv-hair);
}

.qv-b-frage {
	border-top: 1px solid var(--qv-hair);
}

/* Der eingebaute Dreieckszeiger muss in beiden Schreibweisen weg. */
.qv-b-frage > summary {
	list-style: none;
}

.qv-b-frage > summary::-webkit-details-marker {
	display: none;
}

.qv-b-frage > summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	padding-block: clamp(0.9rem, 1.8vw, 1.3rem);
	cursor: pointer;
}

.qv-b-frage > summary:focus-visible {
	outline: 2px solid var(--qv-blue-ink);
	outline-offset: 3px;
}

.qv-b-frage > summary h3 {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--qv-font-display);
	font-size: var(--qv-text-lede);
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var(--qv-ink);
	text-wrap: balance;
}

/* Der Winkel ist derselbe wie am Menuepunkt — zwei Rahmenkanten, gedreht, mit
   weicher Ecke. Kein SVG: dann bleibt das Inhalts-HTML frei davon, und der
   Winkel ist eine Sache des Themes, nicht des Textes. */
.qv-b-frage > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	border-right: 2px solid var(--qv-line);
	border-bottom: 2px solid var(--qv-line);
	border-radius: 0 0 2px 0;
	transform: translateY(-0.14em) rotate(45deg);
	transition: transform 0.18s ease;
}

.qv-b-frage[open] > summary::after {
	transform: translateY(0.09em) rotate(-135deg);
}

.qv-b-frage__text {
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.qv-b-frage__text p {
	margin: 0;
	/* Owner 2026-08-19, mit Screenshot: die Antwort stand auf 685px in einem
	   1304px breiten Band. Eine Antwort ist kein Fliesstext-Kapitel, sondern
	   ein kurzer Block unter seiner Frage — und die Frage laeuft ueber die
	   volle Breite. Gedeckelt bleibt sie trotzdem, sonst reisst sie auf einem
	   sehr breiten Schirm auf. */
	max-width: min(100%, 104ch);
	color: var(--qv-ink-2);
}

.qv-b-frage__text p + p {
	margin-top: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
	.qv-b-frage > summary::after {
		transition: none;
	}
}

/* === Breite Textspur ========================================================
 * Owner 2026-08-19, mit einer Liste konkreter Stellen: mehrere Absaetze brachen
 * auf drei bis sechs Zeilen um, waehrend rechts daneben Platz frei war.
 *
 * `.qv-b p` deckelt auf `--qv-measure` (72ch). Das ist die richtige Vorgabe fuer
 * Fliesstext und bleibt es. Die DESIGN-RULES sagen dazu aber ausdruecklich, das
 * Mass werde „benutzt, nicht als Decke behandelt" — und ein Absatz, der als
 * schmale Saeule neben leerer Flaeche steht, ist genau der Fall, den Regel 6a
 * meint.
 *
 * Diese Klasse hebt den Deckel fuer einzelne, benannte Absaetze auf. Sie wird im
 * Inhalt gesetzt, nicht pauschal im Band — welcher Absatz breit laufen soll, ist
 * eine Entscheidung je Satz, keine je Bandtyp.
 */
.qv-b p.qv-b-weit {
	max-width: none;
}

/* === Das Heft ===============================================================
 * Owner 2026-08-19: „ich moechte bitte die erste Seite davon sehen als
 * klickbaren Link, sie versteckt sich ziemlich hinter einem Link."
 *
 * Die Broschuere stand als eine von drei gleichen Karten im Merkmalsraster. Die
 * anderen zwei sind aber gar keine Downloads, sondern Verweise auf andere
 * Seiten — und die Bandueberschrift sagt „Ein PDF, und ZWEI Seiten, die es nicht
 * ersetzt", waehrend darunter drei Karten standen. Sie bekommt jetzt eine eigene
 * Reihe darueber, und die Ueberschrift stimmt wieder.
 *
 * Das Titelbild liegt in einer eigenen Spur und traegt eine Haarlinie plus einen
 * flachen Schatten — es soll als Blatt lesbar sein, nicht als Bildkachel. Kein
 * gedrehtes Heft, keine gestapelten Seiten: die Seite hat ihre eine Diagonale
 * schon, ein zweiter schraeger Gegenstand waere Dekor.
 */
.qv-b-heft {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: start;
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
	padding-bottom: clamp(1.8rem, 3.4vw, 2.8rem);
	border-bottom: 1px solid var(--qv-hair);
}

@media (min-width: 820px) {
	.qv-b-heft {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		/* Das Blatt ist hoch, der Text daneben kurz. Bei `start` steht der Text
		   oben und darunter klafft die Haelfte der Reihe leer — das Loch aus
		   Regel 6a, nur andersherum als dort beschrieben. Zentriert gelesen
		   sitzt der Text gegen das Blatt statt darueber. */
		align-items: center;
	}
}

/* Der Link ist das Blatt. Deshalb liegt der Rahmen an ihm, nicht am Bild. */
.qv-b-heft__blatt {
	display: block;
	max-width: 17rem;
	border: 1px solid var(--qv-hair);
	box-shadow: 0 1px 0 var(--qv-hair), 0 10px 26px rgb(24 23 22 / 0.13);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.qv-b-heft__blatt img {
	display: block;
	width: 100%;
	height: auto;
}

.qv-b-heft__blatt:hover,
.qv-b-heft__blatt:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 var(--qv-hair), 0 16px 34px rgb(24 23 22 / 0.18);
}

.qv-b-heft__blatt:focus-visible {
	outline: 2px solid var(--qv-blue-ink);
	outline-offset: 4px;
}

.qv-b-heft__text h3 {
	margin: 0;
	font-family: var(--qv-font-display);
	/* Nicht `--qv-h2`: damit stand der Titel des Hefts auf denselben 64px wie die
	   Bandueberschrift darueber, und eine h3 so gross wie ihre h2 kippt die
	   Rangfolge. Er liegt jetzt dazwischen — groesser als eine Kartenzeile
	   (22px), deutlich unter der Bandueberschrift. */
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--qv-ink);
	text-wrap: balance;
}

.qv-b-heft__text p {
	margin-top: clamp(0.6rem, 1.4vw, 0.9rem);
	max-width: none;
	color: var(--qv-ink-2);
}

/* Die Angaben zur Datei, damit niemand blind auf ein PDF klickt. */
.qv-b-heft__fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin-top: clamp(0.8rem, 1.6vw, 1.1rem);
	font-family: var(--qv-font-display);
	font-size: var(--qv-text-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--qv-line);
}

.qv-b-heft__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin-top: clamp(1rem, 2vw, 1.4rem);
	padding: 0.7rem 1.3rem;
	background: var(--qv-ink);
	color: #fff;
	font-family: var(--qv-font-display);
	font-size: var(--qv-text-sm);
	text-decoration: none;
	border-radius: var(--qv-radius-control);
}

.qv-b-heft__knopf:hover,
.qv-b-heft__knopf:focus-visible {
	background: var(--qv-green-cta);
	color: var(--qv-ink);
}

@media (prefers-reduced-motion: reduce) {
	.qv-b-heft__blatt {
		transition: none;
	}
	.qv-b-heft__blatt:hover,
	.qv-b-heft__blatt:focus-visible {
		transform: none;
	}
}