/*
 * Webmasterware site styles. Tokens and rules follow DESIGN.md in the repository root.
 * One file, no build step. Sections: fonts · tokens · base · layout · header · footer ·
 * type helpers · buttons · components · forms · page templates · utilities.
 * Sizes scale fluidly between the mobile and desktop values of DESIGN.md (390 → 1440 px).
 */

/* ---------- Fonts: Merriweather Sans variable (300–800), self-hosted, OFL ---------- */

@font-face {
    font-family: "Merriweather Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/merriweather-sans-latin-wght-normal.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: "Merriweather Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/merriweather-sans-latin-wght-italic.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: "Merriweather Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/merriweather-sans-latin-ext-wght-normal.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: "Merriweather Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/merriweather-sans-latin-ext-wght-italic.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;
}

/* ---------- Tokens (DESIGN.md front matter) ---------- */

:root {
    color-scheme: light;

    --primary: #002B8C;
    --primary-deep: #001B5E;
    --on-primary: #FFFFFF;
    --on-primary-muted: rgb(255 255 255 / 0.78);
    --on-primary-line: rgb(255 255 255 / 0.14);
    --tertiary: #FF7F00;
    --tertiary-hover: #FF9533;
    --on-tertiary: #001B5E;
    --tertiary-ink: #B35300;
    --on-surface: #161B2E;
    --on-surface-muted: #5A6173;
    --surface: #FFFFFF;
    --neutral: #F4F5F8;
    --surface-sunken: #E6E9EF;
    --outline: #E3E6EC;
    --outline-strong: #C9CED9;
    --selected: #EEF2FA;
    --placeholder: #D9DDE6;

    --font: "Merriweather Sans", "Segoe UI", Helvetica, Arial, sans-serif;

    /* Fluid type: mobile value at 390 px, desktop value at 1440 px. */
    --fs-display: clamp(2.5rem, 1.66rem + 3.43vw, 4.75rem);   /* 40 → 76 */
    --fs-page-title: clamp(2.5rem, 1.94rem + 2.29vw, 4rem);   /* 40 → 64 */
    --fs-h2: clamp(1.875rem, 1.5rem + 1.52vw, 2.875rem);      /* 30 → 46 */
    --fs-signature: clamp(1.75rem, 1.19rem + 2.29vw, 3.25rem);/* 28 → 52 */
    --fs-numeral: clamp(2.75rem, 2.28rem + 1.9vw, 4rem);      /* 44 → 64 */
    --fs-h3: clamp(1.25rem, 1.18rem + 0.29vw, 1.4375rem);     /* 20 → 23 */
    --fs-quote: clamp(1.25rem, 1.18rem + 0.29vw, 1.4375rem);  /* 20 → 23 */
    --fs-lead: clamp(1.125rem, 1.05rem + 0.29vw, 1.3125rem);  /* 18 → 21 */
    --fs-body: 1.0625rem;  /* 17 */
    --fs-sm: 0.9375rem;    /* 15 */
    --fs-label: 0.8125rem; /* 13 */
    --fs-caption: 0.8125rem;

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 48px;
    --space-xxl: 64px;
    --space-section: clamp(56px, 38px + 7.4vw, 112px);
    --gutter: clamp(24px, 17px + 1.9vw, 48px);
    --margin: 24px;
    --content-max: 1200px;
    --text-max: 700px;
    --header-height: 64px;
    --rule: 5px;
}

@media (min-width: 1024px) {
    :root { --header-height: 92px; }
}

/* ---------- Base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--on-surface);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }

h1, h2, h3, h4 {
    font-weight: 800;
    color: var(--on-surface);
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* Long German compounds („Individualsoftware“) must not push the page wider on phones. */
@media (max-width: 599.98px) {
    h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
h1 { font-size: var(--fs-page-title); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p { text-wrap: pretty; }

/* The accent word: 300 italic, same colour as the heading. One per headline. */
em, .accent { font-style: italic; font-weight: 300; }
strong, b { font-weight: 700; }
h1 em, h2 em, h3 em { font-weight: 300; }

a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-deep); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

:focus-visible {
    outline: 3px solid var(--tertiary);
    outline-offset: 3px;
}

::selection { background: var(--tertiary); color: var(--on-tertiary); }

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

.skip-link {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 100;
    padding: 12px 18px;
    background: var(--tertiary);
    color: var(--on-tertiary);
    font-weight: 700;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--on-tertiary); }

/* ---------- Layout ---------- */

.container {
    width: min(var(--content-max), 100% - 2 * var(--margin));
    margin-inline: auto;
}

.section { padding-block: var(--space-section); }
.section--stone { background: var(--neutral); }
.section > .container { display: flex; flex-direction: column; gap: clamp(32px, 24px + 2.5vw, 56px); }

/* Section head: headline left, short introduction right; stacks on mobile. */
.section-head {
    display: grid;
    gap: var(--space-md) var(--space-xxl);
    align-items: end;
}
.section-head__title { display: flex; flex-direction: column; gap: 14px; }
.section-head > p { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; font-weight: 300; color: var(--on-surface-muted); }
.section-head--stack { grid-template-columns: minmax(0, 760px); }

@media (min-width: 900px) {
    .section-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-head--stack { grid-template-columns: minmax(0, 760px); }
}

.grid { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
}

.prose { max-width: var(--text-max); }
.prose > * + * { margin-top: 0; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--tertiary); }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--primary);
    color: var(--on-primary);
}
.site-header__bar {
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 36px;
}
.site-header__logo { display: flex; flex-shrink: 0; }
.site-header__logo img { height: 36px; width: auto; }

/* :where() keeps this at element specificity, so .btn colours win (dark text on the orange button). */
:where(.site-header) a { color: var(--on-primary); text-decoration: none; }

.nav-toggle {
    margin-left: auto;
    margin-right: -12px;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--on-primary);
    cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }

.site-nav__list { display: flex; }
.site-nav__link,
.site-nav__parent {
    display: flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    color: var(--on-primary);
    background: none;
    border: 0;
    cursor: pointer;
}
.site-nav__parent svg { width: 12px; height: 12px; color: var(--tertiary); transition: transform 0.15s; }
.site-nav__parent[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-header__contact { display: flex; flex-direction: column; line-height: 1.25; }
.site-header__phone { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.site-header__hours { font-size: 0.75rem; opacity: 0.72; white-space: nowrap; }

/* Desktop: real menu items, dropdown for Leistungen. */
@media (min-width: 1024px) {
    .site-header__logo img { height: 54px; }
    .site-nav { margin-left: auto; }
    .site-nav__list { align-items: center; gap: 30px; font-size: var(--fs-sm); font-weight: 600; }
    .site-nav__item { position: relative; }
    .site-nav__link,
    .site-nav__parent { height: var(--header-height); padding: 0; box-shadow: inset 0 -3px 0 transparent; }
    .site-nav__link:hover,
    .site-nav__parent:hover { color: var(--on-primary); box-shadow: inset 0 -3px 0 var(--on-primary-line); }
    .site-nav__link[aria-current="page"],
    .site-nav__item.is-current > .site-nav__parent { box-shadow: inset 0 -3px 0 var(--tertiary); }

    .site-nav__sub {
        position: absolute;
        top: 100%;
        left: -24px;
        min-width: 280px;
        padding: 12px 0;
        background: var(--surface);
        border-top: var(--rule) solid var(--tertiary);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: 0 18px 40px rgb(0 27 94 / 0.18);
        font-weight: 400;
    }
    .site-nav__sub a {
        display: block;
        padding: 10px 24px;
        color: var(--on-surface);
        font-size: var(--fs-sm);
        font-weight: 700;
    }
    .site-nav__sub a:hover { background: var(--neutral); color: var(--primary); }
    .site-nav__sub a[aria-current="page"] { color: var(--primary); box-shadow: inset 3px 0 0 var(--tertiary); }
    .site-nav__sub a.is-quiet { font-weight: 400; color: var(--on-surface-muted); }

    /* Closed unless opened. With JS, aria-expanded is the only switch (site.js sets it on click,
       keyboard and hover), so Escape always closes and the ARIA state matches what is shown.
       Without JS, hover and focus open it. */
    .site-nav__sub { display: none; }
    html:not(.js) .site-nav__item:hover > .site-nav__sub,
    html:not(.js) .site-nav__item:focus-within > .site-nav__sub,
    .site-nav__parent[aria-expanded="true"] + .site-nav__sub { display: block; }

    .site-nav__footer { display: none; }
}

/* 1024–1279 px: no room for the phone block; tighter gaps and a smaller logo keep the bar inside the viewport. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .site-header__bar { gap: 24px; }
    .site-header__logo img { height: 44px; }
    .site-nav__list { gap: 22px; }
    .site-header__contact { display: none; }
}

/* Mobile: logo plus burger; the open menu is a full-screen blue panel. */
@media (max-width: 1023.98px) {
    .site-header__contact,
    .site-header__bar > .btn { display: none; }

    .site-header__bar { flex-wrap: wrap; height: auto; min-height: var(--header-height); column-gap: 16px; }
    .js .nav-toggle { display: inline-flex; }

    /* Without JS the menu stays visible as a plain list below the bar. */
    html:not(.js) .site-header { position: static; }
    html:not(.js) .site-nav { width: 100%; padding-bottom: var(--space-lg); }

    .js .site-nav {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 49;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
        background: var(--primary);
        border-top: 1px solid var(--on-primary-line);
    }
    .js .nav-open .site-nav { display: flex; }
    .js .nav-open .nav-toggle .icon-open { display: none; }
    .js .nav-open .nav-toggle .icon-close { display: block; }

    .site-nav__list { flex-direction: column; }
    .site-nav__item { border-bottom: 1px solid var(--on-primary-line); }
    .site-nav__link,
    .site-nav__parent {
        width: 100%;
        justify-content: space-between;
        padding: 18px 0;
        font-size: var(--fs-h3);
        font-weight: 800;
        text-align: left;
    }
    .site-nav__link[aria-current="page"] { color: var(--tertiary); }
    /* On mobile the sub-list is always shown behind an orange rule. */
    .site-nav__parent { pointer-events: none; }
    .site-nav__parent svg { display: none; }
    .site-nav__sub {
        display: flex;
        flex-direction: column;
        margin: -4px 0 18px;
        padding-left: 14px;
        border-left: 2px solid var(--tertiary);
    }
    .site-nav__sub a { padding: 10px 0; font-size: var(--fs-body); }
    .site-nav__sub a[aria-current="page"] { color: var(--tertiary); font-weight: 700; }
    .site-nav__sub a.is-quiet { opacity: 0.75; }

    .site-nav__footer {
        margin-top: auto;
        padding-top: var(--space-lg);
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .site-nav__footer .btn { width: 100%; }
    .site-nav__footer small { margin-top: 4px; font-size: var(--fs-label); opacity: 0.72; }
}

body.nav-locked { overflow: hidden; }

/* The orange rule under the header, echoing the old site. */
.rule-top { border-top: var(--rule) solid var(--tertiary); }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--primary-deep);
    color: var(--on-primary-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    padding-top: 56px;
}
.site-footer a { color: var(--on-primary-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-primary); text-decoration: underline; }
.site-footer strong { color: var(--on-primary); }
.site-footer__cols {
    display: grid;
    gap: 36px 40px;
    grid-template-columns: minmax(0, 1fr);
}
.site-footer__col { display: flex; flex-direction: column; gap: 4px; }
.site-footer__col:first-child { gap: 14px; }
.site-footer__logo { height: 44px; width: auto; align-self: flex-start; }
.site-footer__subhead { margin-top: 18px; }
.site-footer__tagline { margin-top: 10px; font-weight: 700; color: var(--on-primary); }
.site-footer__legal {
    margin-top: 44px;
    padding-block: 18px 22px;
    border-top: 1px solid var(--on-primary-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: var(--fs-label);
}
.site-footer__legal a:hover { text-decoration: underline; }
@media (min-width: 700px) {
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Type helpers ---------- */

.eyebrow {
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tertiary-ink);
}
.lead {
    max-width: var(--text-max);
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.6;
    color: var(--on-surface-muted);
}
.muted { color: var(--on-surface-muted); }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--on-surface-muted); }
.tag { font-size: 0.875rem; font-weight: 700; color: var(--tertiary-ink); }
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.02em; }

/* Links with a trailing chevron: "Mehr zu Shopware ›" */
.link-more { font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* List with orange dashes. */
.dash-list { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; }
.dash-list li { display: flex; gap: 10px; }
.dash-list--lg { max-width: var(--text-max); gap: 12px; font-size: var(--fs-body); }
.dash-list li::before { content: "–"; color: var(--tertiary); font-weight: 800; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 26px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--tertiary); color: var(--on-tertiary); }
.btn--primary:hover { background: var(--tertiary-hover); color: var(--on-tertiary); }
.btn--secondary { border-color: var(--on-surface); color: var(--on-surface); background: transparent; }
.btn--secondary:hover { background: var(--on-surface); color: var(--surface); }
.btn--on-primary { border-color: rgb(255 255 255 / 0.7); color: var(--on-primary); }
.btn--on-primary:hover { background: var(--on-primary); color: var(--primary); }
.btn--sm { padding: 11px 18px; font-size: var(--fs-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 599.98px) {
    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }
}

/* ---------- Hero ---------- */

.hero {
    background: var(--neutral);
    border-top: var(--rule) solid var(--tertiary);
    padding-block: clamp(40px, 16px + 6.2vw, 104px) var(--space-section);
}
.hero__grid {
    display: grid;
    gap: var(--space-xl) 72px;
    align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: clamp(18px, 14px + 0.8vw, 26px); min-width: 0; }
.hero__text h1 { font-size: var(--fs-page-title); }
.hero--home .hero__text h1 { font-size: var(--fs-display); line-height: 1.04; }
.hero__prompt { font-size: var(--fs-lead); line-height: 1.4; font-weight: 700; }
.hero__note { font-size: 0.875rem; color: var(--on-surface-muted); }
.hero__media { margin: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; }
.hero__media figcaption { font-size: var(--fs-caption); color: var(--on-surface-muted); text-align: center; }
@media (min-width: 1024px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) 460px; }
    .hero__grid--aside { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
}
.hero .breadcrumb { margin-bottom: clamp(24px, 16px + 2vw, 48px); }

/* Hero areas: the three tagline areas as entry points (light prefix, bold name, motto, two service links). */
.areas { gap: 0; background: var(--surface); border-radius: var(--radius-md); }
.areas__item { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 17px + 0.6vw, 26px) clamp(22px, 20px + 0.76vw, 30px); }
.areas__item + .areas__item { border-top: 1px solid var(--outline); }
.areas__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--on-surface);
    font-size: min(clamp(1.625rem, 1.44rem + 0.76vw, 2.125rem), 6.6vw); /* 26 → 34; below 394 px it shrinks so „softwareSchmiede“ fits */
    overflow-wrap: anywhere;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.areas__prefix { font-weight: 300; }
.areas__chevron { color: var(--tertiary); font-weight: 300; transition: transform 0.15s ease; }
.areas__title:hover { color: var(--primary); }
.areas__title:hover .areas__chevron { transform: translateX(3px); }
.areas__motto { font-size: var(--fs-sm); line-height: 1.45; color: var(--on-surface-muted); }
.areas__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.areas__links .link-more { font-size: 0.875rem; padding-block: 6px; }
@media (max-width: 1023.98px) { .areas { max-width: none; } }
@media (max-width: 599.98px) { .areas__motto { display: none; } .areas__item { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .areas__chevron { transition: none; } }

/* ---------- Breadcrumb ---------- */

.breadcrumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.875rem; }
.breadcrumb li { display: flex; gap: 10px; }
.breadcrumb li + li::before { content: "›"; color: var(--tertiary); }
.breadcrumb a { color: var(--on-surface-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { font-weight: 700; }

/* ---------- Situation quote (customer voice) ---------- */

.quote-grid { display: grid; gap: 8px var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .quote-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block: 26px 30px;
    border-top: 2px solid var(--on-surface);
}
.quote p { font-size: var(--fs-quote); line-height: 1.35; font-weight: 300; font-style: italic; }

/* ---------- Cards ---------- */

.card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 28px 32px;
    background: var(--surface);
    border-radius: var(--radius-md);
    min-width: 0;
}
.card h3 { font-size: var(--fs-h3); hyphens: auto; }
.card > p:not([class]) { font-size: 1rem; line-height: 1.6; color: var(--on-surface-muted); }
.card .link-more { margin-top: auto; padding-top: 4px; }
.section:not(.section--stone) .card { background: var(--neutral); }

/* Reference card (mini case study) */
.ref-card { padding: 0; gap: 0; overflow: hidden; }
.ref-card__media {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
    color: var(--on-surface-muted);
    font-size: var(--fs-caption);
    overflow: hidden;
}
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ref-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; flex: 1; }
.ref-card__meta { font-size: var(--fs-label); font-weight: 700; color: var(--on-surface-muted); }
.ref-card h3 { font-size: clamp(1.1875rem, 1.15rem + 0.15vw, 1.3125rem); }
.ref-card dl {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--outline);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ref-card dl > div { display: flex; flex-direction: column; gap: 2px; }
.ref-card dt,
.label-caps {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface-muted);
}
.ref-card dd { font-size: var(--fs-sm); line-height: 1.5; }

/* „Auf einen Blick“ card (service hero) */
.glance { gap: 18px; padding: 30px 30px 32px; }
.glance__title { font-size: var(--fs-body); font-weight: 800; }
.glance dl { display: flex; flex-direction: column; gap: 14px; }
.glance dl > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--outline);
}
.glance dt { font-size: var(--fs-label); font-weight: 700; color: var(--on-surface-muted); }
.glance dd { font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: break-word; }
/* Narrow phones: label above value, the 120 px label column leaves too little room. */
@media (max-width: 419.98px) { .glance dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* „Eher nicht, wenn …“ panel */
.panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px;
    background: var(--neutral);
    border-radius: var(--radius-md);
    align-self: start;
}
.section--stone .panel { background: var(--surface); }
.panel__title { font-size: var(--fs-body); font-weight: 800; }
.panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--on-surface-muted); }

/* Note callout with orange left rule („Gut zu wissen“) */
.callout {
    padding: 20px 22px;
    background: var(--neutral);
    border-left: 3px solid var(--tertiary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--on-surface-muted);
}
.section--stone .callout { background: var(--surface); }
.callout strong { color: var(--on-surface); }

/* ---------- Steps (real sequences only) ---------- */

.steps { display: grid; gap: 32px 40px; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps > li { display: flex; flex-direction: column; gap: 12px; counter-increment: step; }
.steps > li::before {
    content: counter(step);
    font-size: var(--fs-numeral);
    font-weight: 300;
    line-height: 1;
    color: var(--tertiary);
}
.steps h3 { font-size: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem); }
.steps p { font-size: 1rem; line-height: 1.6; color: var(--on-surface-muted); }

/* Compact numbered list (contact page „Was danach passiert“) */
.steps-compact { display: flex; flex-direction: column; gap: 18px; counter-reset: step; }
.steps-compact > li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--on-surface-muted);
    counter-increment: step;
}
.steps-compact > li::before { content: counter(step); font-size: 1.875rem; line-height: 1; font-weight: 300; color: var(--tertiary); }
.steps-compact strong { color: var(--on-surface); }

/* ---------- Signature: one statement framed by the brackets ---------- */

/* The brackets mark the corners of the text block: left bracket bottom-left, right bracket
   top-right. They do not follow the individual lines, so wrapping can never misplace them. */
.signature { padding-block: clamp(64px, 40px + 7vw, 128px); }
.signature__inner {
    display: grid;
    grid-template-columns: auto minmax(0, max-content) auto;
    justify-content: center;
    gap: clamp(8px, 2px + 1.6vw, 28px);
}
.signature__bracket { width: auto; height: clamp(36px, 22px + 5vw, 96px); }
.signature__bracket--left { align-self: end; }
.signature__bracket--right { align-self: start; }
.signature p {
    max-width: 13.5em;
    align-self: center;
    font-size: var(--fs-signature);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
.signature strong { font-weight: 800; }
.signature em { font-weight: inherit; }

/* ---------- Fact figures (case study) ---------- */

.facts {
    display: grid;
    gap: 24px var(--gutter);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 32px;
    border-top: 1px solid var(--outline);
}
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { display: flex; flex-direction: column; gap: 6px; }
.facts__value { font-size: var(--fs-signature); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.facts__label { font-size: var(--fs-sm); color: var(--on-surface-muted); }

/* Ruled rows: Ausgangslage / Unser Beitrag / Ergebnis */
.ruled-rows > div {
    display: grid;
    gap: 8px var(--space-xl);
    padding-block: 28px;
    border-top: 1px solid var(--outline);
}
.ruled-rows > div:last-child { border-bottom: 1px solid var(--outline); }
.ruled-rows dt { font-size: var(--fs-h3); font-weight: 800; line-height: 1.3; }
.ruled-rows dd { max-width: var(--text-max); color: var(--on-surface-muted); }
@media (min-width: 900px) { .ruled-rows > div { grid-template-columns: 280px minmax(0, 1fr); } }

/* Area tiles („Was verbunden ist“) */
.area-tile { gap: 8px; padding: 22px; }
.area-tile h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); }
.area-tile h3::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tertiary); }
.area-tile p { font-size: var(--fs-sm); line-height: 1.5; color: var(--on-surface-muted); }
.area-bar {
    padding: 18px 24px;
    border: 2px solid var(--on-surface);
    border-radius: var(--radius-md);
    font-weight: 800;
    text-align: center;
}

/* ---------- FAQ ---------- */

.faq { max-width: 960px; }
.faq details { padding-block: 22px; border-top: 1px solid var(--outline); }
.faq details:last-child { border-bottom: 1px solid var(--outline); }
.faq summary {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.625rem; font-weight: 300; line-height: 1; color: var(--tertiary); }
.faq details[open] summary::after { content: "–"; }
.faq details > :not(summary) { margin-top: 12px; max-width: 760px; font-size: 1rem; line-height: 1.65; color: var(--on-surface-muted); }

/* ---------- Person (contact) ---------- */

.person { display: flex; gap: 20px; align-items: center; }
.person__photo {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--placeholder);
    object-fit: cover;
}
.person__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person__role { font-size: var(--fs-label); color: var(--on-surface-muted); }
.person__name { font-size: 1.375rem; font-weight: 800; line-height: 1.3; }
.person__phone { margin-top: 6px; font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); font-weight: 800; line-height: 1.3; color: var(--primary); text-decoration: none; }
.person__meta { font-size: 0.875rem; color: var(--on-surface-muted); }

/* ---------- Contact block ---------- */

.section > .contact-block,
.contact-block { display: grid; gap: var(--space-xl) 80px; align-items: start; }
.contact-block__intro { display: flex; flex-direction: column; gap: 22px; }
.contact-block__intro .person { margin-top: 14px; }
@media (min-width: 1024px) { .section > .contact-block, .contact-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Forms ---------- */

.form-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(24px, 18px + 1.5vw, 40px);
    background: var(--surface);
    border-radius: var(--radius-lg);
    min-width: 0;
}
.form-card fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-card legend,
.form-step__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    font-size: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
    font-weight: 800;
    color: var(--on-surface);
}
.form-step__num { font-size: 1.625rem; font-weight: 300; line-height: 1; color: var(--tertiary); }

.field-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-grid .field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); font-weight: 700; color: var(--on-surface-muted); }
.field__label { display: flex; justify-content: space-between; gap: 12px; }
.field__optional { font-weight: 400; }
.field__error { font-weight: 400; color: #A3250F; }

.input,
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 12px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--on-surface);
    background: var(--surface);
    border: 2px solid var(--outline);
    border-radius: var(--radius-md);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--outline-strong); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--primary); }
.field [aria-invalid="true"] { border-color: #A3250F; }

/* Chips: radio/checkbox inputs styled as pills. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
    display: inline-block;
    padding: 9px 16px;
    border: 2px solid var(--outline);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.3;
    background: var(--surface);
}
.chip:hover span { border-color: var(--outline-strong); }
.chip input:checked + span {
    border-color: var(--primary);
    background: var(--selected);
    color: var(--primary);
    font-weight: 700;
}
.chip input:focus-visible + span { outline: 3px solid var(--tertiary); outline-offset: 2px; }

.form-note { font-size: 0.75rem; line-height: 1.6; color: var(--on-surface-muted); }
.form-card .btn { align-self: flex-start; }
.form-card__intro { color: var(--on-surface-muted); }
/* Confirmation after a sent enquiry, in place of the form (contact.php). */
.form-sent { gap: 14px; border-top: 4px solid var(--tertiary); scroll-margin-top: 24px; }
.form-sent__title { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-h3); line-height: 1.3; }
.form-sent__title::before {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--tertiary) url("img/check.svg") center / 16px no-repeat;
}
.form-sent p { color: var(--on-surface-muted); }
.form-sent__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 6px; }
@media (max-width: 599.98px) { .form-card .btn { align-self: stretch; } }

/* Honeypot: hidden from people, visible to naive bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Page templates ---------- */

/* Two columns with a sidebar (service fit, contact page). */
.section > .split,
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-xxl); align-items: start; }
@media (min-width: 1024px) {
    .section > .split,
    .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .section > .split--form,
    .split--form { grid-template-columns: minmax(0, 1fr) 420px; }
}
.aside-stack { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Contact band at the end of inner pages. */
.section > .contact-band,
.contact-band { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.contact-band__text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }

/* „Nächste Referenz“ between two ink rules. */
.next-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    padding-block: 28px;
    border-block: 2px solid var(--on-surface);
    color: var(--on-surface);
    text-decoration: none;
}
.next-link:hover { color: var(--primary); }
.next-link strong { font-size: var(--fs-h3); font-weight: 800; }

/* Quiet line under the service cards („Ausgewählt auch: …“). */
.section-note { max-width: 900px; font-size: 1rem; line-height: 1.6; color: var(--on-surface-muted); }
.section-note strong { color: var(--on-surface); }

/* Service fit: „Wir passen gut, wenn …“ quotes beside the „Eher nicht“ panel. */
.fit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fit__title { font-weight: 800; }

/* Capabilities: six items under ink rules, 3 × 2 on desktop. */
.capabilities { display: grid; gap: 12px var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.capabilities > div { display: flex; flex-direction: column; gap: 10px; padding-block: 24px 28px; border-top: 2px solid var(--on-surface); min-width: 0; }
.capabilities h3 { font-size: var(--fs-h3); hyphens: auto; }
.capabilities p { font-size: 1rem; line-height: 1.6; color: var(--on-surface-muted); }
@media (min-width: 700px) { .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contact-band__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }

/* Preview host only: says that the copy is placeholder (layout.php). */
.preview-note { padding: 8px var(--margin); background: var(--selected); color: var(--primary); font-size: var(--fs-caption); text-align: center; }

/* Plain inner pages (legal, placeholders, errors). */
.page-body { padding-block: var(--space-section); }

/* ---------- Utilities ---------- */

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }
.text-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
    body { color: #000; }
}

/* Inner pages extend DESIGN.md components using the same tokens. */
.prose { max-width: var(--text-max); display: flex; flex-direction: column; gap: 16px; }
.case-media { display: grid; gap: 16px; margin: 0 0 48px; }
.case-media figcaption { color: var(--on-surface-muted); font-size: var(--fs-sm); }
.media-placeholder { min-height: 260px; display: grid; place-items: center; background: var(--surface-sunken); padding: 30px; text-align: center; color: var(--on-surface-muted); }
.next-reference { display: block; margin-top: 48px; padding: 24px 0; border-top: 2px solid var(--on-surface); border-bottom: 2px solid var(--on-surface); font-weight: 700; text-decoration: none; }
.next-reference:hover { text-decoration: underline; }
.contact-page__aside { display: flex; flex-direction: column; gap: 24px; }
.contact-page__aside h2 { font-size: var(--fs-h3); }
.form-errors { border-left: 4px solid var(--tertiary); padding: 20px; background: var(--neutral); }
.contact-page__call { align-self: flex-start; }
.contact-page__form { min-width: 0; }
@media (max-width: 899.98px) { .contact-page__aside { order: -1; } }

.product-title { font-size: var(--fs-h3); }
.product-filters { padding-block: var(--space-lg); }
.product-filters:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.product-filters__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.product-filters .btn { min-height: 44px; }
.product-filters [aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.person__photo { display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; color: var(--on-surface-muted); }
.facts__value { overflow-wrap: anywhere; }
.person__meta { overflow-wrap: anywhere; }
.person__meta a { text-decoration: none; }
.person__meta a:hover { text-decoration: underline; }

.screen-collage { display: grid; gap: var(--gutter); }
.screen-collage .media-placeholder:first-child { min-height: 360px; }
.ref-card__media { flex-direction: column; gap: 12px; font-weight: 700; }
@media (min-width: 900px) { .screen-collage { grid-template-columns: 2fr 1fr; } .screen-collage .media-placeholder:first-child { grid-row: span 2; } }

.contact-page__person, .contact-page__details { display: flex; flex-direction: column; gap: 24px; }
.contact-page .field__label { justify-content: flex-start; gap: 10px; }
@media (max-width: 899.98px) {
    .contact-page__aside { display: contents; }
    .contact-page__person { order: -1; }
    .contact-page__form { order: 0; }
    .contact-page__details { order: 1; }
}

/* Referenzen library: filter rows as link chips, solution cards, draft badge.
   Layout lives on an inner wrapper: browsers ignore flex/gap on <details> content. */
.ref-filters__rows { display: flex; flex-direction: column; gap: 14px; }
.ref-filters > summary { display: none; list-style: none; }
.ref-filters > summary::-webkit-details-marker { display: none; }
.ref-filters__row { display: grid; gap: 8px; align-items: baseline; }
@media (min-width: 900px) { .ref-filters__row { grid-template-columns: 110px minmax(0, 1fr); } }
@media (max-width: 899.98px) {
    .ref-filters > summary { display: inline-flex; }
    .ref-filters[open] > summary { margin-bottom: 14px; }
}
a.chip { text-decoration: none; color: inherit; }
.chip--link span { border-color: var(--outline-strong); color: var(--primary); }
.chip--link:hover span { border-color: var(--primary); }
.chip[aria-current] span { border-color: var(--primary); background: var(--selected); color: var(--primary); font-weight: 700; }
.chip small { font-size: var(--fs-caption); color: var(--on-surface-muted); }
.ref-filters__summary { display: flex; flex-direction: column; gap: 10px; }
.ref-count { font-weight: 700; }
.ref-filters__summary p { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ref-card h3 { hyphens: manual; }
.ref-card h3 a { color: inherit; text-decoration: none; }
.ref-card h3 a:hover { text-decoration: underline; }
.ref-card__teaser { font-size: var(--fs-sm); line-height: 1.5; color: var(--on-surface-muted); }
.ref-card__customer { font-size: var(--fs-sm); color: var(--on-surface-muted); }
.ref-card__links { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.link-more--secondary { font-weight: 400; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ref-customer { color: var(--on-surface-muted); }
.badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--on-surface); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.hero--library { padding-bottom: var(--space-xl); }
.hero--entry h1 { font-size: var(--fs-h2); line-height: 1.1; hyphens: manual; }
.hero__text .link-more { align-self: flex-start; }

/* A stone section right after the stone hero continues it: one gap, not two paddings. */
.hero + .section--stone { padding-top: 0; }
/* Case hero: the fact row keeps distance from the lead. */
.hero__text + .facts { margin-top: var(--space-xl); }
/* Phones: the breadcrumb stays on one line; the current page is shortened with an ellipsis. */
@media (max-width: 599.98px) {
    .breadcrumb ol { flex-wrap: nowrap; }
    .breadcrumb li { flex: none; }
    .breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; }
    .breadcrumb [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.ref-note { max-width: var(--text-max); color: var(--on-surface-muted); font-size: var(--fs-sm); }
.service-links { margin-top: var(--space-xl); }

/* ---------- Praxisberichte ---------- */

.article-meta { font-size: var(--fs-sm); color: var(--on-surface-muted); }
.article-body { gap: 0; font-size: var(--fs-body); line-height: 1.7; }
.article-body > * + * { margin-top: 20px; }
.article-body > h2 { margin-top: 56px; }
.article-body > h2:first-child { margin-top: 0; }
.article-body > h2 + * { margin-top: 16px; }
.article-body ul,
.article-body ol { display: flex; flex-direction: column; gap: 10px; padding-left: 1.3em; }
.article-body ol li::marker { color: var(--tertiary-ink); font-weight: 700; }
.article-body a:not(.link-more) { font-weight: 700; text-decoration: none; }
.article-body a:not(.link-more):hover { text-decoration: underline; }
.article-body .article-sources a { font-weight: 400; }
.article-body > .article-links { margin-top: 56px; }
.article-body .callout { font-size: var(--fs-sm); }
.article-sources { display: flex; flex-direction: column; gap: 12px; }
.article-sources h2 { margin-top: 0; font-size: var(--fs-h3); }
.article-sources ol { gap: 6px; font-size: var(--fs-caption); color: var(--on-surface-muted); }
.article-sources a { overflow-wrap: anywhere; }
.article-card h3 a { color: inherit; text-decoration: none; }
.article-card h3 a:hover { text-decoration: underline; }