@charset "utf-8";
/* holzfensterrenovierung-muenchen.de — the site's ONE stylesheet.
   Generated-in-spirit from design_system 1.2: the token layer below is the approved
   122-token registry, primitive values first, semantic aliases second, component tokens
   third. There is no page-level stylesheet and no page-scoped override file; a rule that
   is unique to one page belongs to the composition or component that owns it.
   @font-face is folded in here so the document -> fonts.css -> woff2 chain of the
   reference disappears and exactly one render-blocking resource remains per page. */

@layer base, layout, components, compositions, utilities;

/* ---------------------------------------------------------------- fonts --
   Four owned, already-subset woff2 files (BASSET-009, SIL OFL), self-hosted because
   PCON-002 forbids any third-party runtime request. Each file is a VARIABLE font with a
   real wght axis of 100-900 (verified from its fvar table, TVAL-033), so every weight the
   type roles use is a genuine instance and nothing is synthesised. unicode-range keeps the
   latin-ext subsets from loading unless a character needs them. */
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-39ce20.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-ext-796716.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-567244.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-395290.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@layer base{
:root{
/* PRIMITIVE — colour (TOK-001..TOK-019) */
--color-wood-900:#2d2015;--color-wood-800:#3d2c1e;--color-wood-700:#5a4330;
--color-brass-700:#6f4a12;--color-brass-600:#5c3d0e;--color-brass-500:#b8862d;--color-brass-300:#d9a94e;
--color-cream-50:#faf6ee;--color-cream-100:#f3ecdd;--color-white:#fff;
--color-ink-900:#3a322a;--color-ink-600:#5f5449;--color-ink-400:#8a7c6c;
--color-forest-600:#4a6741;--color-forest-50:#eef2ea;--color-clay-700:#8f4335;--color-danger-700:#9b2c2c;
--color-messaging-700:#176b41;--color-messaging-glyph:#2f9e63;
/* PRIMITIVE — space (TOK-020..TOK-028) */
--space-100:.25rem;--space-200:.5rem;--space-300:.75rem;--space-400:1rem;--space-500:1.5rem;
--space-600:2rem;--space-700:3rem;--space-800:4rem;--space-900:6rem;
/* PRIMITIVE — type (TOK-029..TOK-049) */
--font-size-100:.8125rem;--font-size-200:.9375rem;--font-size-300:1.0625rem;--font-size-400:1.125rem;
--font-size-500:clamp(1.15rem,1.05rem + .5vw,1.35rem);
--font-size-600:clamp(1.5rem,1.2rem + 1.5vw,2rem);
--font-size-700:clamp(1.85rem,1.4rem + 2.2vw,2.5rem);
--font-size-800:clamp(2.1rem,1.5rem + 3vw,3.1rem);
--font-size-figure:clamp(1.25rem,1.1rem + .8vw,1.6rem);
--font-family-display:Fraunces,Georgia,"Times New Roman",serif;
--font-family-text:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;
--line-height-tight:1.2;--line-height-snug:1.35;--line-height-normal:1.5;--line-height-relaxed:1.65;
--letter-spacing-none:0;--letter-spacing-wide:.08em;
/* PRIMITIVE — shape, elevation, motion (TOK-050..TOK-061) */
--radius-100:6px;--radius-200:14px;--radius-full:999px;
--border-width-hairline:1px;--border-width-strong:2px;--border-width-focus:3px;
--elevation-subtle:0 10px 30px rgb(61 44 30 / .10);--elevation-raised:0 6px 18px rgb(61 44 30 / .16);
--duration-instant:0ms;--duration-fast:120ms;--duration-standard:220ms;
--easing-standard:cubic-bezier(.22,.61,.36,1);
/* SEMANTIC — colour (TOK-070..TOK-105) */
--color-surface-page:var(--color-cream-50);--color-surface-raised:var(--color-white);
--color-surface-sunken:var(--color-cream-100);--color-surface-inverse:var(--color-wood-800);
--color-surface-inverse-deep:var(--color-wood-900);--color-surface-affirmative:var(--color-forest-50);
--color-surface-accent-soft:var(--color-cream-100);
--color-text-primary:var(--color-ink-900);--color-text-heading:var(--color-wood-800);
--color-text-muted:var(--color-ink-600);--color-text-eyebrow:var(--color-brass-700);
--color-text-on-inverse:var(--color-cream-50);--color-text-on-accent:var(--color-wood-900);
--color-text-link:var(--color-brass-700);--color-text-link-inverse:var(--color-brass-300);
--color-text-figure:var(--color-wood-800);
--color-border-default:var(--color-ink-400);--color-border-strong:var(--color-ink-600);
--color-border-interactive:var(--color-brass-700);
--color-focus-ring:var(--color-wood-900);--color-focus-ring-inverse:var(--color-brass-300);
--color-action-primary-background:var(--color-brass-700);
--color-action-primary-background-hover:var(--color-brass-600);
--color-action-primary-text:var(--color-white);
--color-action-secondary-text:var(--color-brass-700);--color-action-secondary-border:var(--color-brass-700);
--color-action-messaging-background:var(--color-messaging-700);
--color-action-messaging-text:var(--color-white);--color-action-messaging-glyph:var(--color-messaging-glyph);
--color-feedback-error-text:var(--color-danger-700);--color-feedback-error-border:var(--color-danger-700);
--color-feedback-success-text:var(--color-forest-600);
--color-evidence-before:var(--color-clay-700);--color-evidence-after:var(--color-forest-600);
--color-accent-decorative:var(--color-brass-500);--color-accent-on-inverse:var(--color-brass-300);
/* SEMANTIC — space (TOK-110..TOK-120) */
--space-inline-tight:var(--space-200);--space-inline-default:var(--space-300);
--space-stack-tight:var(--space-300);--space-stack-default:var(--space-400);--space-stack-loose:var(--space-500);
--space-component-padding-compact:var(--space-400);--space-component-padding-default:var(--space-600);
--space-grid-gap:var(--space-500);--space-section-default:var(--space-800);--space-section-large:var(--space-900);
--space-container-gutter:var(--space-400);
/* SEMANTIC — shape, elevation, motion, border (TOK-125..TOK-142) */
--radius-control:var(--radius-100);--radius-card:var(--radius-200);--radius-media:var(--radius-200);
--radius-pill:var(--radius-full);
--elevation-card:var(--elevation-subtle);--elevation-overlay:var(--elevation-raised);
--motion-feedback:var(--duration-fast);--motion-disclosure:var(--duration-standard);
--motion-enhancement:var(--duration-standard);
--border-control:var(--border-width-hairline);--border-interactive:var(--border-width-strong);
--border-focus:var(--border-width-focus);
/* COMPONENT (TOK-150, TOK-151) */
--price-table-row-surface-alternate:var(--color-cream-100);
--site-header-surface-sticky:var(--color-cream-50);
/* layout containers CONT-001..CONT-005 */
--container-prose:68ch;--container-default:72rem;--container-narrow:52rem;
/* CONT-005 chrome container (design_system 1.3, WFIND-01). Chrome is not content and
   must not inherit a reading measure: CONT-002's 72rem exists to stop a LINE OF TEXT
   growing too long, which is why a 1920px window rendered exactly like a 1152px one. */
--container-chrome:86rem;
--header-height:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--color-surface-page);color:var(--color-text-primary);
font-family:var(--font-family-text);font-size:var(--font-size-300);
line-height:var(--line-height-relaxed);font-weight:var(--font-weight-regular)}
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote,table{margin:0}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:var(--color-text-link)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:var(--border-focus) solid var(--color-focus-ring);outline-offset:2px}
:where(a,button,input,select,textarea,summary):focus{outline:var(--border-focus) solid var(--color-focus-ring);outline-offset:2px}
:where(a,button,input,select,textarea,summary):focus:not(:focus-visible){outline:none}
:target,[id]{scroll-margin-top:calc(var(--header-height) + var(--space-400))}
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}}
.h1,h1{font-family:var(--font-family-display);font-weight:var(--font-weight-bold);
font-size:var(--font-size-700);line-height:var(--line-height-tight);color:var(--color-text-heading)}
.display{font-size:var(--font-size-800)}
.h2,h2{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-600);line-height:var(--line-height-tight);color:var(--color-text-heading)}
.h3,h3{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-500);line-height:var(--line-height-snug);color:var(--color-text-heading)}
.h4,h4{font-family:var(--font-family-text);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-300);line-height:var(--line-height-snug);color:var(--color-text-heading)}
.lead>p{font-size:var(--font-size-400);line-height:var(--line-height-relaxed);color:var(--color-text-muted)}
.eyebrow{font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);
letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-eyebrow);
margin-block-end:var(--space-stack-tight)}
.small{font-size:var(--font-size-200);line-height:var(--line-height-normal)}
.caption{font-size:var(--font-size-100);line-height:var(--line-height-normal);color:var(--color-text-muted)}
p+p,p+ul,p+ol,p+dl,ul+p,ol+p,dl+p,h2+p,h3+p,h4+p{margin-block-start:var(--space-stack-default)}
.prose-list{padding-inline-start:var(--space-500)}
.prose-list li+li{margin-block-start:var(--space-stack-tight)}
.prose-dl dt{font-weight:var(--font-weight-semibold);margin-block-start:var(--space-stack-default)}
.prose-dl dd{margin-inline-start:0}
}

@layer layout{
.container{width:100%;max-width:var(--container-default);margin-inline:auto;
padding-inline:var(--space-container-gutter)}
.container--narrow{max-width:var(--container-narrow)}
.container--chrome{max-width:var(--container-chrome)}
.prose{max-width:var(--container-prose)}
.section{padding-block:var(--space-section-default)}
.section--large{padding-block:var(--space-section-large)}
.section--band{padding-block:var(--space-section-large);background:var(--color-surface-inverse);
color:var(--color-text-on-inverse)}
.stack>*+*{margin-block-start:var(--space-stack-loose)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-inline-default);align-items:center}
.grid{display:grid;gap:var(--space-grid-gap);
grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.split{display:grid;gap:var(--space-600)}
@media (min-width:58rem){.split{grid-template-columns:1fr 1fr;align-items:center}
.split--text-first>.split__media{order:2}.split--media-first>.split__media{order:0}}
}

@layer components{
/* CMP-009 Skip Link */
.skip-link{position:absolute;left:var(--space-400);top:var(--space-400);z-index:20;
transform:translateY(-200%);background:var(--color-surface-raised);color:var(--color-text-primary);
padding:var(--space-300) var(--space-400);border-radius:var(--radius-control);
box-shadow:var(--elevation-overlay);font-weight:var(--font-weight-semibold);text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}
/* CMP-005 Site Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--site-header-surface-sticky);
border-block-end:var(--border-control) solid var(--color-border-default);
box-shadow:var(--elevation-overlay)}
/* ONE ROW AT EVERY WIDTH (WFIND-01). The row itself never wraps: the wordmark, the call
   affordance and either the inline navigation or the disclosure control always share one
   line. Only .site-header__panel takes a line of its own, and only when it IS the panel
   — below the navigation threshold, in the EXPANDED state. */
.site-header__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-inline-default);
padding-block:var(--space-200);min-height:var(--header-height)}
.site-header__actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-inline-default);
margin-inline-start:auto}
.site-header__panel{display:flex;align-items:center;min-width:0}
/* SLOT-005-D is NOT rendered in the row at any width; it exists only inside the panel. */
.site-header__cta{display:none}
/* CMP-008 Brand Wordmark */
.wordmark{display:inline-flex;align-items:center;gap:var(--space-inline-tight);
text-decoration:none;color:var(--color-text-heading)}
.wordmark__glyph{color:var(--color-accent-decorative);display:inline-flex}
.wordmark__text{display:flex;flex-direction:column;line-height:var(--line-height-tight)}
.wordmark__name{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-400)}
.wordmark__descriptor{font-size:var(--font-size-100);color:var(--color-text-muted)}
.wordmark:hover .wordmark__name{text-decoration:underline}
.wordmark--footer{color:var(--color-text-on-inverse)}
.wordmark--footer .wordmark__descriptor{color:var(--color-text-on-inverse)}
/* CMP-003 Call Affordance */
.call{display:inline-flex;align-items:center;gap:var(--space-inline-tight);text-decoration:none;
padding:var(--space-300) var(--space-400);min-height:44px;border-radius:var(--radius-control);
color:var(--color-text-link);font-weight:var(--font-weight-semibold);font-size:var(--font-size-300)}
.call:hover{background:var(--color-surface-sunken);text-decoration:underline}
.call__number{font-variant-numeric:tabular-nums}
.call--prominent{background:var(--color-action-primary-background);color:var(--color-action-primary-text);
padding:var(--space-400) var(--space-500)}
.call--prominent:hover{background:var(--color-action-primary-background-hover)}
.call--detail{padding:0;min-height:0;font-weight:var(--font-weight-regular)}
/* CMP-007 Navigation Disclosure — not rendered until the root class exists (ICON-010) */
.nav-toggle{display:none;align-items:center;gap:var(--space-inline-tight);min-height:44px;
padding:var(--space-300) var(--space-400);font:inherit;font-weight:var(--font-weight-semibold);
font-size:var(--font-size-300);color:var(--color-text-link);cursor:pointer;
background:transparent;border:var(--border-interactive) solid var(--color-border-interactive);
border-radius:var(--radius-control)}
.nav-toggle:hover{background:var(--color-surface-sunken)}
.nav-toggle:active{background:var(--color-cream-100)}

/* ══ CMP-005 WIDTH REDUCTION LADDER (design_system / component_library 1.5, WFIND-01) ══
   Thresholds derived from measurement and from nothing else. Measured gains: gaps 40px,
   telephone number 148px, short brand form 214px, descriptor 0px.
   THE ENGAGEMENT ORDER IS NORMATIVE and must survive into the built page, so the blocks are
   written here in that order — 3, then 5, then 4 — cheapest first.
   They are ALSO declared after CMP-008, CMP-003 and CMP-007, because each selector carries
   the same specificity as the component rule it reduces and source order is what decides.
   In v1.4 this block sat before those components and therefore did nothing at all; that was
   found by measuring the built page, and 1.5 records order-preservation as a requirement.
   Step 2 (navigation -> disclosure panel, below 86rem) is an order of magnitude above the
   rest and lives with CMP-006 below.
   Four reductions appear in NO step and are prohibited at every width: shrinking a control
   label's type size, abbreviating or truncating a navigation label, making the call
   affordance icon-only, and hiding the disclosure control's visible label. */

/* ORDER 1 · STEP 3 — inline gaps and control padding tighten to the compact roles.
   Below about 46rem. Gain 40px, and nothing a visitor can perceive: the 44px target is
   supplied by row height, so horizontal padding buys nothing here. Spent first because it
   is free. */
@media (max-width:45.99rem){
.site-header__row{gap:var(--space-inline-tight)}
.call--header{padding-inline:var(--space-inline-tight)}
.nav-toggle{padding-inline:var(--space-inline-tight)}
.wordmark--header{gap:var(--space-100)}
}

/* ORDER 2 · STEP 5 — the telephone NUMBER drops. The action LABEL never drops, at any width.
   Below about 43rem. Gain 148px. Deliberately NOT raised to ~45rem: tightening alone carries
   688-736px, and spending a visible number there would pay a real cost while a free
   reduction was still available. */
@media (max-width:42.99rem){.call--header .call__number{display:none}}

/* ORDER 3 · STEP 4 — the header wordmark shows the brand's short form. Below about 34rem.
   Gain 214px, the most expensive step, therefore the last one spent. The remainder of the
   name is hidden VISUALLY ONLY: it stays in the accessibility tree, so the link's accessible
   name is still the full published name and the visible text is contained within it. No
   aria-label exists here — an aria-label could let the visible and the programmatic label
   disagree, which is the defect this technique avoids. */
@media (max-width:33.99rem){
.wordmark--header .wordmark__name-rest{position:absolute;width:1px;height:1px;margin:-1px;
padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* NOT A LADDER STEP — the wordmark descriptor. Removed from the width ladder in v1.5 because
   its measured width gain is ZERO: it sits beneath the name inside a flex column and never
   participated in the row's width. It is kept as a HEIGHT rule — it governs the wordmark's
   height against the header's ~4.5rem budget — and it is deliberately written outside the
   ladder so nothing reads it as a step in a mechanism defined as "reduce until the row fits". */
@media (max-width:45.99rem){.wordmark--header .wordmark__descriptor{display:none}}
/* CMP-006 Primary Navigation List — the SAME list at every width */
.site-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:var(--space-inline-tight)}
.site-nav__link{display:flex;align-items:center;min-height:44px;padding:var(--space-300) var(--space-300);
text-decoration:none;color:var(--color-text-link);font-weight:var(--font-weight-medium);
font-size:var(--font-size-300);border-radius:var(--radius-control);border-inline-start:var(--border-interactive) solid transparent}
.site-nav__link:hover{background:var(--color-surface-sunken);text-decoration:underline}
.site-nav__link.is-current{font-weight:var(--font-weight-bold);
border-inline-start-color:var(--color-border-interactive)}
/* Navigation threshold: 86rem, not 62rem (design_system 1.3, WFIND-01). Derived from the
   measured inline set — wordmark 300px + call 273px + navigation + two 12px gaps — which
   must fit inside CONT-005's inner width. Below it the navigation collapses to the
   disclosure panel; it is never deleted, and the call affordance never moves into it. */
@media (max-width:85.99rem){
.site-header__panel{flex-basis:100%;order:5;display:block}
.site-nav__list{flex-direction:column;gap:0}
.site-nav__item+.site-nav__item{border-block-start:var(--border-control) solid var(--color-border-default)}
.site-nav__link{padding-block:var(--space-400)}
.site-header__cta{display:block;padding-block:var(--space-400)}
.site-header__cta .btn{width:100%}
html.js .nav-toggle{display:inline-flex}
html.js .nav-toggle[aria-expanded=false]+.site-header__panel{display:none}
}
/* CMP-001 Action Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-inline-tight);
min-height:44px;padding:var(--space-300) var(--space-500);border-radius:var(--radius-control);
font-family:var(--font-family-text);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-300);line-height:var(--line-height-snug);text-align:center;
text-decoration:none;cursor:pointer;border:var(--border-interactive) solid transparent;
transition:background-color var(--motion-feedback) var(--easing-standard)}
.btn--primary{background:var(--color-action-primary-background);color:var(--color-action-primary-text)}
.btn--primary:hover{background:var(--color-action-primary-background-hover)}
.btn--primary:active{background:var(--color-brass-600)}
.btn--secondary{background:transparent;color:var(--color-action-secondary-text);
border-color:var(--color-action-secondary-border)}
.btn--secondary:hover{background:var(--color-surface-sunken)}
.btn--inverse{background:var(--color-accent-on-inverse);color:var(--color-text-on-accent)}
.btn--inverse:hover{background:var(--color-brass-500)}
.btn--inverse-secondary{background:transparent;color:var(--color-text-on-inverse);
border-color:var(--color-text-on-inverse)}
.btn:disabled{background:var(--color-surface-sunken);color:var(--color-text-muted);cursor:default}
@media (max-width:39.99rem){.section .btn{width:100%}}
/* CMP-002 Text Link */
.link{color:var(--color-text-link);text-decoration:underline;text-underline-offset:.15em}
.link:hover{text-decoration-thickness:.16em}
.link--standalone{display:inline-flex;align-items:center;min-height:44px;
font-weight:var(--font-weight-semibold);gap:var(--space-inline-tight)}
.link--inverse{color:var(--color-text-link-inverse)}
.link__external{font-size:var(--font-size-100);color:var(--color-text-muted)}
.link--inverse .link__external{color:var(--color-text-on-inverse)}
/* CMP-004 Messaging Link */
.messaging{display:inline-flex;align-items:center;gap:var(--space-inline-tight);min-height:44px;
padding:var(--space-300) var(--space-500);border-radius:var(--radius-control);text-decoration:none;
font-weight:var(--font-weight-semibold)}
.messaging--filled{background:var(--color-action-messaging-background);color:var(--color-action-messaging-text)}
.messaging--quiet{color:var(--color-text-link);padding-inline:0}
.messaging--quiet .icon{color:var(--color-action-messaging-glyph)}
.messaging:hover{text-decoration:underline}
/* CMP-035 Icon */
.icon{width:1em;height:1em;fill:none;color:inherit}
.icon--inline{width:1.1em;height:1.1em}
.icon--feature{width:2.2em;height:2.2em}
.icon-sheet{position:absolute;width:0;height:0;overflow:hidden}
/* CMP-010 Breadcrumb Trail */
.breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:var(--space-inline-tight);font-size:var(--font-size-200)}
.breadcrumb__link{color:var(--color-text-link)}
.breadcrumb__sep{margin-inline-start:var(--space-inline-tight);color:var(--color-text-muted)}
.breadcrumb__current{color:var(--color-text-muted)}
.breadcrumb{margin-block-end:var(--space-stack-loose)}
/* CMP-011 Site Footer */
.site-footer{background:var(--color-surface-inverse-deep);color:var(--color-text-on-inverse);
padding-block:var(--space-section-default);margin-block-start:var(--space-section-default)}
.site-footer__grid{display:grid;gap:var(--space-600);
grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.site-footer__address{font-style:normal;margin-block-start:var(--space-stack-default)}
.site-footer__list{list-style:none;margin:0;padding:0}
.site-footer__link{display:inline-flex;align-items:center;min-height:44px;
color:var(--color-text-link-inverse);text-decoration:underline;text-underline-offset:.15em;
border-inline-start:var(--border-interactive) solid transparent;padding-inline-start:var(--space-200)}
.site-footer__link.is-current{font-weight:var(--font-weight-bold);
border-inline-start-color:var(--color-accent-on-inverse)}
.site-footer__contact-line{margin-block-end:var(--space-stack-tight)}
/* CMP-012 Section Header */
.section-header{margin-block-end:var(--space-stack-loose)}
.section-header--centred{text-align:center;margin-inline:auto;max-width:var(--container-prose)}
.section-header .lead{margin-block-start:var(--space-stack-tight);max-width:var(--container-prose)}
/* CMP-013 Service Card */
.card{background:var(--color-surface-raised);border:var(--border-control) solid var(--color-border-default);
border-radius:var(--radius-card);padding:var(--space-component-padding-default);
box-shadow:var(--elevation-card);display:flex;flex-direction:column;gap:var(--space-stack-tight)}
.card__icon{color:var(--color-accent-decorative)}
.card__link{margin-block-start:auto;padding-block-start:var(--space-stack-tight)}
/* CMP-014 Process Step List */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-grid-gap);
grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));counter-reset:none}
.step{background:var(--color-surface-raised);border:var(--border-control) solid var(--color-border-default);
border-radius:var(--radius-card);padding:var(--space-component-padding-default)}
.step__number{font-family:var(--font-family-display);font-size:var(--font-size-figure);
font-weight:var(--font-weight-medium);color:var(--color-text-figure);display:block}
.step__title{margin-block:var(--space-stack-tight)}
/* CMP-015 Decision Comparison */
.compare{display:grid;gap:var(--space-grid-gap)}
@media (min-width:58rem){.compare{grid-template-columns:1fr 1fr;align-items:start}}
.panel{border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default)}
.panel--affirmative{background:var(--color-surface-affirmative)}
.panel--alternative{background:var(--color-surface-raised)}
.panel__points{list-style:none;margin:var(--space-stack-default) 0 0;padding:0}
.panel__points li{display:flex;gap:var(--space-inline-tight);align-items:flex-start}
.panel__points li+li{margin-block-start:var(--space-stack-tight)}
.panel--affirmative .panel__points .icon{color:var(--color-evidence-after)}
.panel--alternative .panel__points .icon{color:var(--color-evidence-before)}
.panel__anchor{margin-block-start:var(--space-stack-default);color:var(--color-text-muted)}
/* CMP-016 Price Table */
.price-table{width:100%;border-collapse:collapse;background:var(--color-surface-raised);
border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card)}
.price-table caption{text-align:start;font-weight:var(--font-weight-semibold);
margin-block-end:var(--space-stack-tight)}
.price-table th,.price-table td{padding:var(--space-component-padding-compact);text-align:start;
border-block-end:var(--border-control) solid var(--color-border-default);vertical-align:top}
.price-table thead th{border-block-end:var(--border-interactive) solid var(--color-border-strong)}
.price-table tbody tr:nth-child(even){background:var(--price-table-row-surface-alternate)}
.price-table__value{font-family:var(--font-family-display);font-size:var(--font-size-figure);
color:var(--color-text-figure);white-space:nowrap}
.price-table__includes{display:block;font-size:var(--font-size-200);color:var(--color-text-muted);
margin-block-start:var(--space-100)}
.price-table__label{display:none;font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);
color:var(--color-text-muted)}
.price-qualifier{margin-block-start:var(--space-stack-default);font-size:var(--font-size-200);
color:var(--color-text-muted)}
.price-table__comparison{font-style:normal;background:var(--color-surface-sunken)}
@media (max-width:39.99rem){
.price-table,.price-table thead,.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block}
.price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.price-table tr{border-block-end:var(--border-interactive) solid var(--color-border-default);
padding-block:var(--space-300)}
.price-table th,.price-table td{border:0;padding-block:var(--space-200)}
.price-table__label{display:block}
}
/* CMP-017 FAQ Disclosure List */
.faq{list-style:none;margin:0;padding:0}
.faq__entry{background:var(--color-surface-raised);border:var(--border-control) solid var(--color-border-default);
border-radius:var(--radius-card);padding:var(--space-component-padding-compact) var(--space-component-padding-default)}
.faq__entry+.faq__entry{margin-block-start:var(--space-stack-tight)}
.faq__question{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);
font-size:var(--font-size-500);color:var(--color-text-heading);cursor:pointer;
padding-block:var(--space-200);min-height:44px;display:flex;align-items:center}
.faq__answer{padding-block-start:var(--space-stack-tight);max-width:var(--container-prose)}
/* CMP-018 Before/After Evidence Figure */
.evidence{margin:0;background:var(--color-surface-raised);
border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default)}
.evidence__pair{display:grid;gap:var(--space-grid-gap);
grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.evidence__side{display:flex;flex-direction:column;gap:var(--space-stack-tight)}
.evidence__frame{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
background:var(--color-surface-sunken);border-radius:var(--radius-media);overflow:hidden}
.evidence__frame img{max-height:100%;width:auto;object-fit:contain}
.evidence__state{align-self:flex-start;border-radius:var(--radius-pill);
padding:var(--space-100) var(--space-300);font-size:var(--font-size-200);
font-weight:var(--font-weight-semibold);border:var(--border-interactive) solid currentColor}
.evidence__state--before{color:var(--color-evidence-before)}
.evidence__state--after{color:var(--color-evidence-after)}
.evidence__caption{margin-block-start:var(--space-stack-default);font-size:var(--font-size-200);
color:var(--color-text-muted)}
/* CMP-019 Testimonial Card */
.quote{margin:0;background:var(--color-surface-raised);
border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default)}
.quote blockquote{margin:0}
.quote figcaption{margin-block-start:var(--space-stack-tight);font-size:var(--font-size-200);
color:var(--color-text-muted)}
/* CMP-020 Content Figure */
.figure{margin:0}
.figure img{width:100%;border-radius:var(--radius-media);
border:var(--border-control) solid var(--color-border-default)}
.figure figcaption{margin-block-start:var(--space-stack-tight);font-size:var(--font-size-200);
color:var(--color-text-muted)}
/* CMP-021 Explanatory Diagram */
.diagram{margin:0;background:var(--color-surface-raised);
border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default)}
.diagram svg{width:100%;height:auto}
/* CMP-022 Notice Box */
.notice{border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default);display:flex;gap:var(--space-inline-default);
align-items:flex-start;flex-wrap:wrap}
.notice--informational{background:var(--color-surface-accent-soft)}
.notice--affirmative{background:var(--color-surface-affirmative)}
.notice__icon{color:var(--color-accent-decorative)}
/* CMP-023..CMP-025 Form */
/* WFIND-20 (second contributor, found by measuring after the first fix): the form's own
   min-content was 321px — the consent label's longest unbreakable run plus the component
   padding — which overflowed a 320px viewport just as the contact block did.
   `overflow-wrap: anywhere` here is the behaviour the contract already asks for:
   technical_policy validation_requirements[23] expects "German compounds break rather than
   overflow", and accessibility_policy states that long compounds must be allowed to break.
   It only breaks a word that genuinely cannot fit, so nothing breaks at 320px today; what it
   changes is the INTRINSIC min-content, which is the measurement that was overflowing, and
   it keeps holding at 200% zoom and increased text size. Scoped to the form — deliberately
   NOT global, because the header row sizes flex items from their min-content and a
   site-wide rule would let the wordmark shrink and wrap instead of the row collapsing. */
.form{background:var(--color-surface-raised);border:var(--border-control) solid var(--color-border-default);
border-radius:var(--radius-card);padding:var(--space-component-padding-default);
display:grid;gap:var(--space-stack-default);overflow-wrap:anywhere}
.form input,.form select,.form textarea{min-width:0}
.field{display:grid;gap:var(--space-100)}
.field__label{font-weight:var(--font-weight-semibold);font-size:var(--font-size-200)}
.field__hint{font-size:var(--font-size-200);color:var(--color-text-muted)}
.field__required{font-weight:var(--font-weight-regular);color:var(--color-text-muted)}
.field input,.field select,.field textarea{width:100%;min-height:44px;font:inherit;
padding:var(--space-300);color:var(--color-text-primary);background:var(--color-surface-raised);
border:var(--border-interactive) solid var(--color-border-interactive);border-radius:var(--radius-control)}
.field textarea{min-height:8rem;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-border-strong)}
.field [aria-invalid=true]{border-color:var(--color-feedback-error-border)}
.field__error{font-size:var(--font-size-200);color:var(--color-feedback-error-text)}
.consent{display:flex;gap:var(--space-inline-tight);align-items:flex-start}
.consent input{margin-block-start:.35em;width:1.25rem;height:1.25rem;flex:none;
accent-color:var(--color-action-primary-background)}
.form__trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (min-width:40rem){.form__pair{display:grid;gap:var(--space-stack-default);grid-template-columns:1fr 1fr}}
/* CMP-026 Submission Outcome */
.outcome{border-radius:var(--radius-card);padding:var(--space-component-padding-default);
border:var(--border-control) solid var(--color-border-default)}
.outcome--success{background:var(--color-surface-affirmative);color:var(--color-feedback-success-text)}
.outcome--error{border-color:var(--color-feedback-error-border);color:var(--color-feedback-error-text)}
.outcome h1,.outcome h2{color:inherit}
.outcome__body{color:var(--color-text-primary);margin-block-start:var(--space-stack-default)}
/* CMP-027 Contact Details Block / CMP-028 Map Route Link */
.contact-details{background:var(--color-surface-raised);
border:var(--border-control) solid var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-default)}
.contact-details__address{font-style:normal;margin-block-end:var(--space-stack-default)}
.contact-details dt{font-weight:var(--font-weight-semibold);font-size:var(--font-size-200);
color:var(--color-text-muted);margin-block-start:var(--space-stack-default)}
/* WFIND-20: the published e-mail address is one unbreakable 41-character token, and at a
   320px viewport it set .contact-details' min-content width to 321px and forced the page to
   scroll horizontally — which the 320px reflow requirement (technical_policy
   validation_requirements[23], accessibility_policy.text_reflow_requirements) forbids.
   `anywhere` rather than `break-word` on purpose: only `anywhere` lets the break count
   toward the intrinsic MIN-CONTENT size, which is the measurement that was overflowing.
   Scoped to the definition values, so no running text elsewhere can break mid-word. */
.contact-details dd{margin-inline-start:0;overflow-wrap:anywhere}
.route-link{display:block;margin-block-start:var(--space-stack-default);
padding:var(--space-component-padding-compact);border-radius:var(--radius-card);
border:var(--border-control) solid var(--color-border-default);color:var(--color-text-link)}
.route-link__preview{display:block;font-size:var(--font-size-200);color:var(--color-text-muted)}
/* WFIND-18: the no-map explanation is a SIBLING of the route link, not SLOT-028-B content.
   Same muted treatment, but it is body text and carries no link colour or underline. */
.route-note{margin-block-start:var(--space-stack-tight);font-size:var(--font-size-200);
color:var(--color-text-muted)}
/* CMP-029 Conversion Band */
.band{background:var(--color-surface-inverse);color:var(--color-text-on-inverse);
padding-block:var(--space-section-large)}
.band h2,.band .h2{color:var(--color-text-on-inverse)}
.band .lead>p{color:var(--color-text-on-inverse)}
.band .cluster{margin-block-start:var(--space-stack-loose)}
.band :where(a,button):focus-visible,.band :where(a,button):focus{outline-color:var(--color-focus-ring-inverse)}
/* CMP-030 Cross-Page Pointer */
.pointer{border-radius:var(--radius-card);padding:var(--space-component-padding-default);
background:var(--color-surface-sunken)}
.pointer--inline{background:none;padding:0}
/* CMP-031 Company Statement List */
.statements{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:var(--space-inline-default) var(--space-grid-gap)}
.statements li{display:flex;gap:var(--space-inline-tight);align-items:center}
.statements .icon{color:var(--color-accent-decorative)}
/* CMP-032 Declared Gap Notice */
.gap-notice{background:var(--color-surface-accent-soft);
border:var(--border-interactive) dashed var(--color-border-default);border-radius:var(--radius-card);
padding:var(--space-component-padding-compact);color:var(--color-text-muted)}
.gap-notice__label{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
/* CMP-034 Error Recovery Block */
.recovery__routes{list-style:none;margin:var(--space-stack-default) 0 0;padding:0}
.recovery__routes li+li{margin-block-start:var(--space-stack-tight)}
}

@layer compositions{
.section--intro{padding-block:var(--space-section-default) var(--space-600)}
.hero{padding-block:var(--space-section-large)}
.hero__actions{margin-block-start:var(--space-stack-loose)}
.hero__media img{width:100%;border-radius:var(--radius-media)}
.section--evidence .evidence+.evidence{margin-block-start:var(--space-grid-gap)}
.section--faq .container{max-width:var(--container-narrow)}
.section--legal .container{max-width:var(--container-narrow)}
.section--contact .split{align-items:start}
.section--confirmation .container{max-width:var(--container-narrow)}
.section--recovery .container{max-width:var(--container-narrow)}
.section--statements{padding-block:var(--space-600)}
.section--statements .container>*{background:var(--color-surface-sunken);border-radius:var(--radius-card);padding:var(--space-component-padding-default)}
}

@layer utilities{
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
.flow>*+*{margin-block-start:var(--space-stack-default)}
.anchor-alias{display:block;height:0;overflow:hidden}
}