/*
 * Phase 03.1 price-calculator widget styles.
 *
 * Retuned again for quick task 260809-wfx (Cowork's AUFTRAG_Claude_Code_Finale_Politur.md,
 * Teil B) to the LIVE PCG design system - navy ink, red accent, light-grey card, white
 * .pcg-box cards with a 16px radius + hairline + soft shadow, and the CF7 input pattern -
 * superseding the Phase-1/Phase-03.1 slate-ink / cool-grey card palette this file
 * previously carried (see the :root block below for the exact retired-vs-live values).
 * This :root block remains the single source of truth: ai-visualizer.css declares no
 * :root of its own and consumes these same custom-property NAMES, so retuning the values
 * here moves both tool pages at once. Layout structure, chip wrapping, touch targets and
 * the three distinct advisory styles (hint/pending/notice) are unchanged - this is a
 * value/typography retune, not a rebuild.
 */

:root {
	--pcg-color-bg: #FFFFFF;
	--pcg-color-card: #f5f5f5;
	--pcg-color-accent: #EE0000;
	/* Die Schriftfarbe AUF der Akzentflaeche. Eigener Name statt --pcg-color-bg:
	 * die beiden sind heute derselbe Wert, meinen aber Verschiedenes - wer den
	 * Seitenhintergrund einmal abtoent, soll damit nicht die Schrift im roten
	 * Knopf mit abtoenen (Quick-Task 260907-0q9). */
	--pcg-color-on-accent: #FFFFFF;
	--pcg-color-accent-hover: #D40000;
	--pcg-color-accent-active: #BA0000;
	--pcg-color-destructive: #8B2635;
	--pcg-color-ink: #142440;

	/* Added 260809-wfx: the PCG global-CSS body/lead text opacities, card hairline,
	 * field-border, radius and shadow tokens (design-exports/PCG_GlobalCSS_bereinigt.css
	 * .pcg-body/.pcg-lead/.pcg-box/CF7 pattern) - kept inside :root so the "no raw hex
	 * outside :root" guard test keeps holding. */
	--pcg-color-body: rgba(20, 36, 64, 0.65);
	--pcg-color-lead: rgba(20, 36, 64, 0.85);
	--pcg-color-hairline: rgba(20, 36, 64, 0.08);
	--pcg-color-field-border: rgba(20, 36, 64, 0.15);
	--pcg-radius-card: 16px;
	--pcg-radius-control: 8px;
	--pcg-shadow-card: 0 6px 22px rgba(20, 36, 64, 0.10), 0 1px 3px rgba(20, 36, 64, 0.06);

	--pcg-space-xs: 8px;
	--pcg-space-sm: 16px;
	--pcg-space-md: 24px;
	--pcg-space-lg: 32px;
	--pcg-space-xl: 48px;
	--pcg-space-2xl: 64px;

	--pcg-touch-min: 44px;
}

/* ---------------------------------------------------------------------------
 * Reset - only margin/font resets, no new colour or spacing scale value.
 * ------------------------------------------------------------------------- */

.pcg-calc h2,
.pcg-calc h3,
.pcg-calc p,
.pcg-calc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcg-calc button,
.pcg-calc input,
.pcg-calc textarea,
.pcg-calc label {
	font: inherit;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Layout - single vertical column, no side-by-side panel anywhere in this
 * file, because no preview exists (D-05). Root carries the same 1200px
 * centred width + 24px side padding as the global .pcg-wrap contract
 * (design-exports/PCG_GlobalCSS_bereinigt.css) so the widget lines up with
 * the rest of the site even though it renders no .pcg-wrap wrapper of its
 * own (260809-wfx).
 * ------------------------------------------------------------------------- */

.pcg-calc {
	background: transparent;
	color: var(--pcg-color-ink);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pcg-space-md);
	padding-right: var(--pcg-space-md);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--pcg-space-xl);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Title, disclaimer, prompt
 * ------------------------------------------------------------------------- */

.pcg-calc__title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 1.15;
	color: var(--pcg-color-ink);
}

.pcg-calc__disclaimer {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	color: var(--pcg-color-body);
}

.pcg-calc__prompt {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	color: var(--pcg-color-body);
}

/* ---------------------------------------------------------------------------
 * Sections - the .pcg-box white card look (radius/hairline/shadow), single-
 * column body; the customer-type and service sections additionally wrap
 * their chip rows.
 * ------------------------------------------------------------------------- */

.pcg-calc__section {
	background-color: var(--pcg-color-bg);
	border: 1px solid var(--pcg-color-hairline);
	border-radius: var(--pcg-radius-card);
	box-shadow: var(--pcg-shadow-card);
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
	gap: var(--pcg-space-sm);
}

.pcg-calc__section--customer-type,
.pcg-calc__section--service {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.pcg-calc__section--customer-type .pcg-calc__section-heading,
.pcg-calc__section--service .pcg-calc__section-heading {
	flex-basis: 100%;
	width: 100%;
}

/* Structural hooks only - core/follow-ups/uploads sections use the base
 * .pcg-calc__section column rules above and need no layout override of
 * their own; declared explicitly so every emitted class has its own rule. */
.pcg-calc__section--core,
.pcg-calc__section--followups,
.pcg-calc__section--uploads {
	flex-direction: column;
}

.pcg-calc__section-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--pcg-color-ink);
}

/* ---------------------------------------------------------------------------
 * Chips - the customer-type gate, the service selector, the condition scale
 * and every per-service follow-up option share this one control language.
 * Rows wrap; individual chip labels wrap inside the chip rather than
 * truncating; every chip carries at least --pcg-touch-min in both
 * dimensions regardless of label length.
 * ------------------------------------------------------------------------- */

.pcg-calc__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	padding: var(--pcg-space-xs) var(--pcg-space-sm);
	background-color: var(--pcg-color-bg);
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pcg-calc__chip--selected {
	border-color: var(--pcg-color-accent);
	color: var(--pcg-color-accent);
}

.pcg-calc__chip:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Fields - one .pcg-calc__field per labelled control. Direct children that
 * should always start their own line (the label, the interactive control
 * itself, the hint/error text, and a populated file row) get flex-basis:
 * 100%; chip children are deliberately excluded from that list so they wrap
 * next to one another beneath the label, satisfying the same wrap contract
 * as the customer-type/service sections above. min-width:0 (260809-wfx)
 * keeps a long value/filename from forcing horizontal overflow at narrow
 * viewports.
 * ------------------------------------------------------------------------- */

.pcg-calc__field {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pcg-space-sm);
	min-width: 0;
}

.pcg-calc__field > label,
.pcg-calc__field > input[type="text"],
.pcg-calc__field > input[type="number"],
.pcg-calc__field > input[type="email"],
.pcg-calc__field > input[type="tel"],
.pcg-calc__field > input[type="file"],
.pcg-calc__field > textarea,
.pcg-calc__field > .pcg-calc__hint,
.pcg-calc__field > .pcg-calc__error,
.pcg-calc__field > .pcg-calc__file-row {
	flex-basis: 100%;
	width: 100%;
}

.pcg-calc__field > label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
}

.pcg-calc__field input[type="text"],
.pcg-calc__field input[type="number"],
.pcg-calc__field input[type="email"],
.pcg-calc__field input[type="tel"],
.pcg-calc__field textarea {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pcg-color-ink);
	background-color: var(--pcg-color-bg);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	padding: 12px 14px;
	min-height: var(--pcg-touch-min);
	box-sizing: border-box;
}

.pcg-calc__field textarea {
	min-height: calc(var(--pcg-touch-min) * 2);
	resize: vertical;
}

/* Keyboard AND mouse users both get the site's focus language (260809-wfx):
 * the accent outline stays for accessibility, and a navy border-color is
 * added on top, matching the CF7 pattern's :focus border-color swap. */
.pcg-calc__field input[type="text"]:focus-visible,
.pcg-calc__field input[type="number"]:focus-visible,
.pcg-calc__field input[type="email"]:focus-visible,
.pcg-calc__field input[type="tel"]:focus-visible,
.pcg-calc__field textarea:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
	border-color: var(--pcg-color-ink);
}

/* D-11 field-error framing: destructive text colour plus the adjacent
 * input's border, never colour alone (the error paragraph's own presence
 * is the primary signal). Includes input[type="file"] so upload validation
 * errors (photo/document fields) get the same border treatment as the other
 * fields - note native file inputs are notoriously unstylable across
 * browsers, so this may have limited or no visible effect in some of them;
 * the destructive-coloured error text remains the primary signal there. */
.pcg-calc__field:has(> .pcg-calc__error) input[type="text"],
.pcg-calc__field:has(> .pcg-calc__error) input[type="number"],
.pcg-calc__field:has(> .pcg-calc__error) input[type="email"],
.pcg-calc__field:has(> .pcg-calc__error) input[type="tel"],
.pcg-calc__field:has(> .pcg-calc__error) input[type="file"] {
	border-color: var(--pcg-color-destructive);
}

/* ---------------------------------------------------------------------------
 * Error / hint / pending / notice - the three advisories UI-SPEC requires to
 * stay visually distinct from one another, plus the destructive inline
 * error text. Each has its own rule block and differs from the other two in
 * a property other than colour (border presence, background, padding).
 * ------------------------------------------------------------------------- */

.pcg-calc__error {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pcg-color-destructive);
}

.pcg-calc__hint {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pcg-color-body);
}

/* ===========================================================================
 * 260908-t4k: WARUM DIESE DREI REGELN `.pcg-calc` DOPPELT NENNEN
 *
 * Der Reset ganz oben in dieser Datei setzt `.pcg-calc p { padding: 0 }`. Das ist eine
 * ELEMENT-Regel innerhalb einer Klasse und damit spezifischer (0,1,1) als eine einfache
 * Klassenregel (0,1,0). Alle drei Hinweis-Kaesten unten sind `<p>`-Elemente - der Reset
 * hat ihnen also die Polsterung wieder abgenommen, und ihr Text klebte ohne Luecke am
 * farbigen Streifen. Am PC ebenso wie am Handy; der Client hat es am 2026-09-08 auf
 * seinem iPhone gemeldet („der Text klebt am Strich ohne Luecke").
 *
 * DER FEHLER WAR NICHT ZU SEHEN, WEIL BEIDE REGELN GRIFFEN: der Streifen kam aus der
 * Hinweis-Regel, die Polsterung aus dem Reset. Wer nur nachsah, ob die Regel „ankommt",
 * bekam ein Ja.
 *
 * DIE LOESUNG IST DIE VORANGESTELLTE `.pcg-calc` (0,2,0 schlaegt 0,1,1) und ausdruecklich
 * KEIN `!important`: der Reset soll weiterhin fuer jedes andere `<p>` im Widget gelten,
 * er ist nur nicht mehr staerker als eine Regel, die es ausdruecklich anders will.
 *
 * WER EINEN VIERTEN HINWEIS-KASTEN BAUT, muss ihn genauso schreiben. Ein Test in
 * `tests/price-calculator.test.cjs` prueft das und wird sonst rot.
 * =========================================================================== */
.pcg-calc .pcg-calc__pending {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pcg-color-body);
	border-left: 4px solid var(--pcg-color-accent);
	padding-left: var(--pcg-space-sm);
}

.pcg-calc__notice {
	display: flex;
	flex-direction: column;
	gap: var(--pcg-space-sm);
	background-color: var(--pcg-color-bg);
	border: 1px solid var(--pcg-color-hairline);
	border-radius: var(--pcg-radius-card);
	box-shadow: var(--pcg-shadow-card);
	padding: 32px 34px;
}

.pcg-calc__notice p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
}

.pcg-calc__notice ul {
	display: flex;
	flex-direction: column;
	gap: var(--pcg-space-xs);
}

.pcg-calc__notice li {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
	overflow-wrap: break-word;
	word-break: break-word;
}

.pcg-calc__notice-acknowledge {
	align-self: flex-start;
	min-height: var(--pcg-touch-min);
	padding: var(--pcg-space-xs) var(--pcg-space-sm);
	background-color: var(--pcg-color-bg);
	color: var(--pcg-color-accent);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.pcg-calc__notice-acknowledge:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Uploads - the file row list grows in place; no fixed height and no
 * vertical-scroll overflow is declared anywhere in this section, since the
 * ceiling is five rows (UI-SPEC populated consideration).
 * ------------------------------------------------------------------------- */

.pcg-calc__upload {
	/* Structural hook only - inherits .pcg-calc__field's row-wrap layout. */
}

.pcg-calc__file-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--pcg-space-sm);
	padding: var(--pcg-space-xs) 0;
	min-width: 0;
}

.pcg-calc__file-row img {
	width: var(--pcg-touch-min);
	height: var(--pcg-touch-min);
	max-width: 100%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
}

.pcg-calc__file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pcg-touch-min);
	height: var(--pcg-touch-min);
	flex-shrink: 0;
	background-color: var(--pcg-color-card);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
}

.pcg-calc__file-name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
	overflow-wrap: break-word;
	word-break: break-word;
}

.pcg-calc__file-remove {
	flex-shrink: 0;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	background-color: var(--pcg-color-bg);
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.pcg-calc__file-remove:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Price display - core content, always ink, never accent (accent stays
 * reserved for interactive/selection state).
 * ------------------------------------------------------------------------- */

/* Der Hinweis, der seit 2026-09-23 an der Stelle des Preises steht.
 *
 * WARUM ER DIE GROESSE DES PREISES ERBT und nicht die eines Fliesstextes: Er steht an
 * genau der Stelle, auf die der Besucher nach dem Klick auf „Richtpreis berechnen"
 * schaut. Waere er klein gesetzt, saehe es aus, als sei nichts passiert - der haeufigste
 * Grund, eine Seite an dieser Stelle zu verlassen.
 *
 * Etwas kleiner als der Preis ist er trotzdem: es ist eine Auskunft, keine Zahl. */
.pcg-calc__ready {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.15;
	color: var(--pcg-color-ink);
	overflow-wrap: break-word;
}

/* Der Satz darunter: was der Besucher jetzt tun muss. Er traegt die eigentliche
 * Auskunft und ist deshalb lesbar gesetzt, nicht als Kleingedrucktes. */
.pcg-calc__ready-note {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pcg-color-ink);
	margin-top: 8px;
	max-width: 56ch;
}

.pcg-calc__price {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.15;
	color: var(--pcg-color-ink);
	/* QD-03 (quick task 260822-557): the range string ("Richtpreis ca. X € – Y €") is
	 * noticeably longer than the old bare-number string it replaces and can overflow a
	 * narrow phone width without a wrap point. break-word (never a truncating-dots
	 * text-overflow treatment, which price-calculator-styles.test.cjs forbids) lets the
	 * browser wrap at a normal word boundary instead of clipping the price. */
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Primary CTA - the site-wide .pcg-btn-red geometry
 * (design-exports/PCG_GlobalCSS_bereinigt.css): solid red fill, white text,
 * 8px radius, Inter Bold 700, 14px/30px padding, brightness-dip hover
 * (matches .wpcf7-form .wpcf7-submit:hover) instead of a background-colour
 * swap (260809-wfx).
 * ------------------------------------------------------------------------- */

.pcg-calc .pcg-calc__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	padding: 14px 30px;
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-bg);
	border: none;
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: filter 150ms ease;
}

.pcg-calc .pcg-calc__cta:hover {
	filter: brightness(0.92);
}

.pcg-calc .pcg-calc__cta:active {
	background-color: var(--pcg-color-accent-active);
}

.pcg-calc .pcg-calc__cta:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

.pcg-calc .pcg-calc__cta:disabled {
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-bg);
	opacity: 0.55;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Schaltknopf "Richtpreis berechnen", Lade- und Serverhinweis-Zustand
 * (Quick-Task 260825-4an, Task 1 Teil D, D-C).
 *
 * Bewusst KEINE neue Klassenfamilie: der Schaltknopf erbt die Form des bestehenden
 * .pcg-calc__cta (gleiche Höhe, gleicher Radius, gleiche Typo) und unterscheidet sich nur
 * in der Farbgebung - der Absende-Knopf bleibt der eine kräftige Akzent auf der Seite,
 * der Rechenknopf ist die ruhigere Vorstufe davor. Der Fehlerzustand benutzt die bereits
 * vorhandene .pcg-calc__error, es wird keine zweite Fehlerdarstellung erfunden.
 * ------------------------------------------------------------------------- */

.pcg-calc .pcg-calc__calculate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	margin-top: 8px;
	padding: 14px 30px;
	background-color: transparent;
	color: var(--pcg-color-accent);
	border: 1px solid var(--pcg-color-accent);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.pcg-calc .pcg-calc__calculate:hover {
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-bg);
}

.pcg-calc .pcg-calc__calculate:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

.pcg-calc .pcg-calc__calculate:disabled {
	opacity: 0.55;
	pointer-events: none;
}

.pcg-calc__loading {
	margin: 12px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pcg-color-body);
}

.pcg-calc__contact-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pcg-touch-min);
	margin-top: 12px;
	padding: 12px 26px;
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-bg);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
}

.pcg-calc__contact-link:hover {
	filter: brightness(0.92);
}

.pcg-calc__contact-link:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

.pcg-calc .pcg-calc__estimate-notice {
	margin: 12px 0 0;
	padding: 14px 18px;
	border-left: 3px solid var(--pcg-color-accent);
	background-color: var(--pcg-color-card);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pcg-color-lead);
}

/* ---------------------------------------------------------------------------
 * Mobile - mirrors the global .pcg-wrap/.pcg-box/.pcg-h2 breakpoints
 * (design-exports/PCG_GlobalCSS_bereinigt.css) so the widget shrinks in
 * lockstep with the rest of the site (260809-wfx).
 * ------------------------------------------------------------------------- */

@media (max-width: 820px) {
	.pcg-calc {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pcg-calc__section,
	.pcg-calc__notice {
		padding: 26px 22px;
	}

	.pcg-calc__title {
		font-size: 28px;
	}

	/* QD-03: the longer range string needs the same step-down the title already gets at
	 * this breakpoint, so it keeps fitting a tablet-width container. */
	.pcg-calc__price {
		font-size: 28px;
	}

	.pcg-calc__ready {
		font-size: 24px;
	}
}

@media (max-width: 520px) {
	.pcg-calc__title {
		font-size: 24px;
	}

	.pcg-calc__ready {
		font-size: 21px;
	}

	.pcg-calc__price {
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Der Angebots-Abschnitt (Quick-Task 260825-jt8, Teil B1).
 *
 * ER TRITT AN DIE STELLE DER UMLEITUNG: vorher führten der Knopf „Verbindliches Angebot
 * anfordern" und der Verweis „Zum Kontaktformular" auf eine andere Seite. Jetzt endet der
 * Weg hier - Adresse, Einwilligung, Knopf, Bestätigung.
 *
 * Bewusst KEINE neue Farb- oder Abstandsskala: der Abschnitt benutzt dieselbe Kartenform
 * wie die Abschnitte darüber, das Feld erbt die vorhandene .pcg-calc__field-Form, und der
 * Absende-Knopf erbt die Gestalt von .pcg-calc__cta - er IST der eine kräftige Akzent, den
 * dieser Knopf vorher war.
 * ------------------------------------------------------------------------- */

.pcg-calc__offer {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pcg-space-sm);
	margin-top: var(--pcg-space-md);
	padding: var(--pcg-space-md);
	background-color: var(--pcg-color-bg);
	border: 1px solid var(--pcg-color-hairline);
	border-radius: var(--pcg-radius-card);
	box-shadow: var(--pcg-shadow-card);
}

.pcg-calc__offer > .pcg-calc__field,
.pcg-calc__offer > .pcg-calc__hint {
	width: 100%;
}

/* Quick-Task 261005-n2q / 261005-r4x: die Anrede (Herr / Frau / keine Angabe) als
 * Auswahlliste. Nur ein Strukturhaken - Beschriftung und Dropdown erben alles von
 * .pcg-calc__field und .pcg-calc__select, genau wie die Detailfragen. */
.pcg-calc__field--salutation {
	/* Structural hook only - inherits .pcg-calc__field's row-wrap layout. */
}

/* Vor- und Nachname. MOBIL ZUERST: am Handy untereinander (volle Breite, nichts
 * gequetscht), ab der 520px-Stufe dieser Datei nebeneinander in zwei gleich breiten
 * Spalten. Bewusst Flexbox, kein Raster - ein Vertragstest verbietet Rasterlayouts in
 * dieser Datei (D-05). `min-width: 0` an den Spalten, damit ein langer Name das Feld
 * nicht über den Rand drückt. */
.pcg-calc__name-row {
	display: flex;
	flex-direction: column;
	gap: var(--pcg-space-sm);
	width: 100%;
	min-width: 0;
}

@media (min-width: 521px) {
	.pcg-calc__name-row {
		flex-direction: row;
	}

	.pcg-calc__name-row > .pcg-calc__field {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Die Einwilligungszeile: Ankreuzfeld und Text nebeneinander, der Text umbrechend.
 * `align-items: flex-start` hält das Kästchen auf der ersten Textzeile, auch wenn der
 * Wortlaut über mehrere Zeilen läuft. */
.pcg-calc__consent {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--pcg-space-xs);
	width: 100%;
}

.pcg-calc__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	min-width: 20px;
	margin-top: 3px;
	accent-color: var(--pcg-color-accent);
}

.pcg-calc__consent label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pcg-color-lead);
	cursor: pointer;
}

.pcg-calc__consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* Der Honigtopf. Er MUSS für Menschen unsichtbar bleiben und trotzdem im Baum stehen -
 * `display: none` würde von manchen Ausfüllskripten erkannt und übersprungen, deshalb
 * wird er stattdessen aus dem sichtbaren Bereich geschoben. Er ist zusätzlich
 * aria-hidden und tabindex="-1", ist also weder vorlesbar noch mit der Tabulatortaste
 * erreichbar. */
.pcg-calc__honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.pcg-calc .pcg-calc__offer-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	padding: 14px 30px;
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-bg);
	border: none;
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}

.pcg-calc .pcg-calc__offer-submit:hover {
	filter: brightness(0.92);
}

.pcg-calc .pcg-calc__offer-submit:active {
	background-color: var(--pcg-color-accent-active);
}

.pcg-calc .pcg-calc__offer-submit:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

.pcg-calc .pcg-calc__offer-submit:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Die Bestätigung nach dem Absenden. Ruhig, nicht laut: ein linker Akzentstreifen wie
 * beim Serverhinweis, aber in Ruhefarbe statt im Warnrot - hier ist alles gut gegangen. */
.pcg-calc .pcg-calc__offer-status {
	width: 100%;
	margin: 0;
	padding: 14px 18px;
	border-left: 3px solid var(--pcg-color-ink);
	background-color: var(--pcg-color-card);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pcg-color-lead);
}

/* ---------------------------------------------------------------------------
 * Schritt-Schicht (Quick-Task 260907-0q9, Kundenwunsch „eine Frage nach der anderen")
 *
 * Der Kalkulator schaltet die Abschnitte nacheinander frei: erledigte bleiben stehen und
 * bedienbar, der naechste taucht erst auf, wenn der Besucher „Weiter" drueckt. Alles hier
 * bedient nur diese Fuehrung - kein bestehender Abschnitt aendert sein Aussehen.
 * --------------------------------------------------------------------------- */

/* „Schritt 2 von 6", direkt unter der Ueberschrift. Bewusst leise: eine Orientierung,
 * keine Ansage. Sie steht bei JEDEM Aufbau an derselben Stelle, damit sie nie eine
 * Hoehenaenderung verursacht - ein Element, das mal da ist und mal nicht, schoebe den
 * Inhalt darunter bei jedem Klick um seine eigene Hoehe. */
.pcg-calc__step-progress {
	margin: 0 0 var(--pcg-space-sm);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pcg-color-lead);
}

/* Die Fusszeile eines offenen Schrittes. */
.pcg-calc__step-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pcg-space-xs);
	width: 100%;
	margin-top: var(--pcg-space-sm);
}

/* Zurueckhaltender als der Haupt-Aufruf (.pcg-calc__cta): „Weiter" ist ein Zwischenschritt,
 * nicht das Ziel. Umrandet statt gefuellt, damit der spaetere Absende-Knopf der einzige
 * gefuellte Knopf auf der Seite bleibt. 44px Mindesthoehe wie jedes andere Bedienelement
 * hier (WCAG 2.5.5). */
.pcg-calc .pcg-calc__step-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	padding: 12px 26px;
	background-color: transparent;
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-ink);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}


.pcg-calc .pcg-calc__step-next:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* Gesperrt, weil der Schritt noch nicht vollstaendig ist. Bewusst SICHTBAR und nicht
 * ausgeblendet: ein Knopf, der verschwindet, laesst den Besucher raten, ob es ueberhaupt
 * weitergeht - und sein Verschwinden wuerde den Inhalt darunter verschieben. */


/* Sagt, WARUM es nicht weitergeht. Steht neben dem gesperrten Knopf, nicht statt seiner. */
.pcg-calc__step-hint {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pcg-color-lead);
}

/* Der Weg zum zweiten Schritt (Quick-Task 260907-0q9, Trichter). Steht NUR unter der
 * Bestaetigung, also erst wenn die unverbindliche Schaetzung draussen ist. Ruhig gehalten:
 * er ist ein Angebot, keine Aufforderung - wer nur den Richtpreis wollte, ist hier fertig. */
.pcg-calc__next-step {
	width: 100%;
	margin: var(--pcg-space-sm) 0 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pcg-color-lead);
}

.pcg-calc__next-step-link {
	color: var(--pcg-color-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pcg-calc__next-step-link:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Terminbuchung (Quick-Task 260908-p49)
 *
 * Der Termin-Knopf steht neben dem bestehenden Weg zum Kontaktformular, nicht an
 * seiner Stelle - er ist der schnellere Weg, nicht der einzige. Damit die beiden
 * Zeilen nicht gleich aussehen und der Besucher sieht, welche gemeint ist, ist
 * diese hier ein Knopf und die andere bleibt ein Textlink.
 *
 * Reine WERT-Variante von `.pcg-calc__next-step-link`, keine zweite Basisklasse -
 * dieselbe Regel wie bei den Glas-Varianten aus 260824-w5e. Wer die Grundfarbe
 * aendert, aendert beide mit.
 *
 * `min-height` liegt auf --pcg-touch-min, weil das hier auf dem Handy der
 * wichtigste Fingertipp der ganzen Seite ist.
 * --------------------------------------------------------------------------- */
.pcg-calc__next-step-link--primary {
	display: inline-flex;
	align-items: center;
	min-height: var(--pcg-touch-min);
	padding: 10px 22px;
	margin: 4px 0;
	border-radius: 2px;
	background: var(--pcg-color-accent);
	color: var(--pcg-color-on-accent);
	text-decoration: none;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 14px;
}

.pcg-calc__next-step-link--primary:hover {
	background: var(--pcg-color-accent-hover);
}

.pcg-calc__next-step-link--primary:active {
	background: var(--pcg-color-accent-active);
}

/* ---------------------------------------------------------------------------
 * Auswahlfeld (Quick-Task 260907-0q9, Kundenentscheidung 2026-09-07)
 *
 * Gewerk, Zustand und die 34 Einfachauswahl-Detailfragen sind jetzt Dropdowns. Kacheln
 * bleiben nur dort, wo ein Dropdown nicht taugt: Kundenart (Kundenwunsch), Mehrfachauswahl
 * (ein <select multiple> verbirgt, dass mehr als eine Antwort erlaubt ist) und Zahlenfelder
 * (dort wird getippt, es gibt keine Optionsliste).
 * --------------------------------------------------------------------------- */
.pcg-calc__select {
	display: block;
	width: 100%;
	max-width: 460px;
	min-height: var(--pcg-touch-min);
	padding: 12px 40px 12px 14px;
	background-color: var(--pcg-color-bg);
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;

	/* Der eigene Pfeil: die Voreinstellungen der Browser sehen auf jedem System anders
	 * aus. Als data-URI eingebettet, weil ein externes Bild eine zusaetzliche Anfrage
	 * waere - fuer ein 12x8-Dreieck. `currentColor` geht in einer data-URI nicht, deshalb
	 * die feste Tinte; im Dunkelmodus setzt die Regel darunter sie neu. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232B2622' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

/* 16px Schriftgroesse ist auf dem iPhone kein Geschmack, sondern Pflicht: darunter zoomt
 * Safari beim Antippen eines Formularfeldes automatisch hinein, und der Besucher steht
 * danach auf einer verschobenen Seite. */
.pcg-calc__select:hover {
	border-color: var(--pcg-color-ink);
}

.pcg-calc__select:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* Die Beschriftung ueber dem Auswahlfeld - gleiche Sprache wie die bestehenden
 * Feldbeschriftungen, damit Dropdowns und Eingabefelder nicht auseinanderfallen. */
.pcg-calc__label {
	display: block;
	margin-bottom: var(--pcg-space-xs);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
}

/* ===========================================================================
 * KNOPF-ANGLEICHUNG AN DIE SEITE (Quick-Task 260907-0q9, Kundenmeldung 2026-09-07)
 *
 * DER BEFUND: „Richtpreis berechnen" stand als dunkler Text auf durchsichtigem Grund mit
 * rotem Rahmen da - 8px Ecken, Schriftdicke 400, nicht gesperrt, nicht großgeschrieben.
 * Der Knopf auf dem Rest der Seite (.pcg-btn-red) ist weiß auf dem Akzentrot, 5px Ecken,
 * halbfett, 1,5px Sperrung, GROSSGESCHRIEBEN. Zwei verschiedene Sprachen auf einer Seite.
 *
 * DIE WERTE UNTEN SIND LIVE ABGEMESSEN, nicht abgeschrieben: getComputedStyle auf einem
 * echten `.pcg-btn-red` auf /ueber-uns/ am 2026-09-07. Der Grund fuer das Abmessen statt
 * Nachschlagen ist, dass die Knopf-Optik NICHT in diesem Repository liegt, sondern im
 * Bricks-CSS - eine abgeschriebene Zahl waere ein Ratewert gewesen.
 *
 * WARUM DIESER BLOCK GANZ AM DATEIENDE STEHT: er ueberschreibt die urspruenglichen
 * Knopf-Regeln weiter oben. Bei gleicher Spezifitaet entscheidet allein die Reihenfolge.
 *
 * WARUM JEDER SELEKTOR `.pcg-calc ` VORANGESTELLT BEKOMMT - das war die eigentliche
 * Ursache des gemeldeten Fehlers, und sie ist aelter als dieser Task:
 * Zeile 65 dieser Datei raeumt die Browser-Voreinstellungen ab:
 *   `.pcg-calc button, .pcg-calc input, .pcg-calc textarea, .pcg-calc label
 *    { font: inherit; color: inherit; }`
 * Diese Regel hat die Spezifitaet (0,1,1) - eine Klasse UND einen Elementtyp - und
 * schlaegt damit jede blosse `.pcg-calc__…`-Regel (0,1,0), egal wie weit unten sie steht.
 * `font` ist zudem die KURZFORM: sie setzt Dicke, Groesse UND Familie in einem Rutsch
 * zurueck. Genau deshalb erschien der Knopf mit der geerbten Tintenfarbe des Widgets
 * (navy) auf rotem Grund statt weiss, mit Schriftdicke 400 statt 600 und 16px statt 15px.
 * Live nachgemessen am 2026-09-07.
 * Mit dem vorangestellten `.pcg-calc ` steht hier (0,2,0) und gewinnt sauber.
 *
 * Kein `!important` - und keins noetig. Ein Test haelt diese Verschachtelung fest, damit
 * die Regel nicht bei der naechsten Umformatierung still wieder verliert.
 *
 * `pcg-gesch-btn` aus der Kundenmeldung ist bewusst NICHT nachgebaut: die Klasse steht nur
 * einmal auf der Startseite und regelt dort ausschliesslich die POSITION im Kasten
 * (`margin-top:auto`, `padding-top:24px`, `align-self:flex-start`) - siehe
 * design-exports/PCG_Startseite_FINAL.json. Sie traegt keine einzige Farbe oder
 * Schrifteigenschaft. Die Optik kommt allein aus `pcg-btn-red`, und die ist es, die hier
 * uebernommen wird.
 * =========================================================================== */

/* Die beiden Haupt-Aufrufe: „Richtpreis berechnen" und „Angebot anfordern". Beide sind
 * jetzt gefuellte rote Knoepfe wie ueberall sonst auf der Seite. */
.pcg-calc .pcg-calc__calculate,
.pcg-calc .pcg-calc__offer-submit,
.pcg-calc .pcg-calc__cta,
.pcg-calc .pcg-calc__step-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	/* 10px/20px ist der Seitenwert. min-height haelt zusaetzlich die 44px Tippflaeche
	 * (WCAG 2.5.5) - der Seiten-Knopf kommt ohne sie auf 43px, hier steht mehr auf dem
	 * Spiel, weil ein Fehlgriff eine halb ausgefuellte Anfrage kostet. */
	padding: 10px 20px;
	min-height: var(--pcg-touch-min);
	min-width: var(--pcg-touch-min);

	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-on-accent);
	border: none;
	border-radius: 5px;

	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 1.5px;
	text-transform: uppercase;

	cursor: pointer;
	transition: filter 250ms ease, transform 250ms ease;
}

/* Der Seiten-Knopf dunkelt beim Zeigen ab, statt die Farbe zu wechseln. Genauso hier -
 * ein Farbwechsel waere eine zweite Hover-Sprache auf derselben Seite. */
.pcg-calc .pcg-calc__calculate:hover,
.pcg-calc .pcg-calc__offer-submit:hover,
.pcg-calc .pcg-calc__cta:hover,
.pcg-calc .pcg-calc__step-next:hover {
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-on-accent);
	filter: brightness(0.92);
}

.pcg-calc .pcg-calc__calculate:active,
.pcg-calc .pcg-calc__offer-submit:active,
.pcg-calc .pcg-calc__cta:active,
.pcg-calc .pcg-calc__step-next:active {
	background-color: var(--pcg-color-accent-active);
	color: var(--pcg-color-on-accent);
}

.pcg-calc .pcg-calc__calculate:focus-visible,
.pcg-calc .pcg-calc__offer-submit:focus-visible,
.pcg-calc .pcg-calc__cta:focus-visible,
.pcg-calc .pcg-calc__step-next:focus-visible {
	outline: 2px solid var(--pcg-color-ink);
	outline-offset: 3px;
}

/* Gesperrt bleibt ROT und WEISS, nur blasser. Ein gesperrter Knopf, der auch noch die
 * Farbe wechselt, sieht aus wie ein anderer Knopf. */
.pcg-calc .pcg-calc__calculate:disabled,
.pcg-calc .pcg-calc__offer-submit:disabled,
.pcg-calc .pcg-calc__cta:disabled,
.pcg-calc .pcg-calc__step-next:disabled,
.pcg-calc .pcg-calc__step-next--disabled {
	background-color: var(--pcg-color-accent);
	color: var(--pcg-color-on-accent);
	opacity: 0.55;
	pointer-events: none;
}

/* KORREKTUR 2026-09-07 (zweite Kundenmeldung): „Weiter"/„Überspringen" sieht jetzt aus
 * wie jeder andere Knopf der Seite - weiss auf Rot.
 *
 * Vorher stand er hier bewusst als ruhigerer, nur umrandeter Knopf, damit nicht zwei
 * gleich laute rote Flaechen uebereinander stehen. Diese Begruendung war schlicht falsch:
 * „Weiter" gehoert zu den Schritten 1 bis 5, „Richtpreis berechnen" erscheint erst in
 * Schritt 6 - sie sind NIE gleichzeitig zu sehen. Es gab also gar nichts zu entzerren, nur
 * einen Knopf, der aus der Reihe fiel. Er steht deshalb jetzt in derselben Gruppe wie die
 * uebrigen Aufrufe (siehe oben) und braucht keine eigene Regel mehr.
 *
 * Die Kacheln (Privat-/Gewerbekunde und Mehrfachauswahl) bleiben bewusst weiss: sie sind
 * eine AUSWAHL, kein Aufruf zum Handeln. Waeren sie rot, saehe jede unbeantwortete Frage
 * aus wie mehrere konkurrierende Absende-Knoepfe. Die getroffene Wahl markiert sich
 * stattdessen mit rotem Rand und roter Schrift. */

/* Keine Animation am Auswahlfeld (Kundenmeldung 2026-09-07).
 *
 * WOHER SIE KAM: nicht von uns. Das Bricks-Frontend-CSS legt `transition:
 * var(--bricks-transition)` auf JEDES `select` der Seite (frontend-layer.min.css,
 * Selektor `select`). Beim Auf- und Zuklappen animiert das die Zustandswechsel des
 * Feldes mit - auf dem Handy sichtbar und vom Kunden ausdruecklich abgelehnt.
 *
 * `.pcg-calc .pcg-calc__select` hat (0,2,0) und schlaegt den blossen Elementselektor
 * (0,0,1) muehelos - kein `!important` noetig. Bewusst nur INNERHALB des Kalkulators:
 * die Auswahlfelder des Kontaktformulars und alles andere auf der Seite bleiben, wie
 * Bricks sie vorsieht. */
.pcg-calc .pcg-calc__select {
	transition: none;
}

/* ===========================================================================
 * NICHTS DARF DIE SEITE BREITER MACHEN ALS DEN BILDSCHIRM
 * (Quick-Task 260907-0q9, Kundenmeldung vom iPhone, 2026-09-07)
 *
 * DER GEMELDETE FEHLER: nach der Wahl eines Eintrags mit langer Beschriftung
 * („Mehrfamilienhaus (3–5 Geschosse)", „Höher als 5 Geschosse (> 22 m Höhe)") wuchs die
 * Seite ueber den Bildschirmrand hinaus - der dunkle Kopfbereich hoerte vor dem rechten
 * Rand auf, und der Kalkulator wirkte geschrumpft.
 *
 * DIE URSACHE: die Abschnitte und Felder sind Flex-Behaelter, und ein Flex-Kind hat von
 * sich aus `min-width: auto`. Das bedeutet woertlich: „werde niemals schmaler als dein
 * Inhalt es mindestens braucht". Fuer ein `<select>` ist dieses Mindestmass auf iOS
 * Safari die Breite seines LAENGSTEN Eintrags. Ein langer Eintrag macht das Feld damit
 * unschrumpfbar, und weil die Abschnitte darueber dieselbe Voreinstellung haben, reicht
 * das Ergebnis bis zum Seitenrand durch. `width: 100%` hilft dagegen NICHT - `min-width`
 * gewinnt. Live nachgemessen: 43 Elemente im Widget waren betroffen, darunter alle zehn
 * Auswahlfelder.
 *
 * WARUM DIE LISTE UNTEN EINZELN AUFGEZAEHLT IST statt `.pcg-calc__section > *`:
 * die Kacheln und Knoepfe stehen ebenfalls in diesen Behaeltern, und sie tragen
 * `min-width: var(--pcg-touch-min)` - die 44px-Mindesttippflaeche aus WCAG 2.5.5. Eine
 * Sammelregel haette sie mit abgeraeumt und Menschen mit weniger treffsicheren Fingern
 * ausgesperrt, um ein Umbruchproblem zu loesen. Deshalb sind hier nur die Elemente
 * genannt, die tatsaechlich langen Inhalt tragen koennen.
 *
 * NICHT `overflow-x: hidden` auf der Seite: das haette den Ueberlauf nur unsichtbar
 * gemacht, nicht beseitigt - der Inhalt waere weiterhin abgeschnitten, nur ohne
 * Scrollbalken, und niemand haette je gemerkt, dass etwas fehlt.
 * =========================================================================== */

.pcg-calc .pcg-calc__section,
.pcg-calc .pcg-calc__field,
.pcg-calc .pcg-calc__select,
.pcg-calc .pcg-calc__field input,
.pcg-calc .pcg-calc__field textarea,
.pcg-calc .pcg-calc__label,
.pcg-calc .pcg-calc__hint,
.pcg-calc .pcg-calc__error,
.pcg-calc .pcg-calc__pending,
.pcg-calc .pcg-calc__title,
.pcg-calc .pcg-calc__disclaimer,
.pcg-calc .pcg-calc__step-progress,
.pcg-calc .pcg-calc__section-heading {
	min-width: 0;
}

/* Und keins von ihnen darf breiter werden als der Platz, den es hat.
 *
 * BEWUSST OHNE ABKUERZUNG mit drei Punkten am Auswahlfeld: ein bestehender Vertragstest
 * verbietet das in dieser Datei, weil es bei Kacheln und Dateinamen Inhalt verstecken
 * wuerde, den der Besucher braucht - und er durchsucht dafuer den ganzen Quelltext, auch
 * die Kommentare. Fuer den Ueberlauf-Fix ist die Kuerzung ohnehin nicht noetig:
 * `min-width: 0` allein loest ihn. Der Browser schneidet den zu langen Eintrag im
 * geschlossenen Auswahlfeld von sich aus ab; beim Aufklappen steht er vollstaendig da. */
.pcg-calc,
.pcg-calc .pcg-calc__select,
.pcg-calc .pcg-calc__field input,
.pcg-calc .pcg-calc__field textarea {
	max-width: 100%;
}