/* ============================================================
   Yorreck Wagner Solutions — Design System (CI v2)
   ============================================================

   Everything the corporate identity defines lives here: tokens,
   type, buttons, cards, panels, tags, forms, navbar, footer and
   the consent banner. Page stylesheets in pages/ only add layout
   that a single page needs, and use these tokens for every color,
   radius and shadow.

   Contents
     1. Tokens            8. Content pages (.page)
     2. Base              9. Homepage
     3. Layout           10. Legal pages
     4. Type helpers     11. Footer
     5. Navbar           12. Responsive
     6. Buttons          13. Consent banner and settings
     7. Components       14. External links
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* ---------- 1. Tokens ---------- */
:root {
    /* Corporate identity v2 — see YWS.CI, tokens/design-tokens.json. Teal is
       the only brand color, no accent. Primary (500) is for surfaces, buttons
       and large type; brand-colored text uses primary-dark (600) or darker,
       on dark backgrounds teal 200/300. */
    --teal-50: #ecfafb;
    --teal-100: #d7f3f5;
    --teal-200: #bde3e5;
    --teal-300: #81cdd1;
    --teal-400: #00a6ab;
    --teal-500: #008890;
    --teal-600: #006972;
    --teal-700: #005358;
    --teal-800: #003e41;
    --teal-900: #002a2d;
    --teal-950: #021819;

    --color-primary: var(--teal-500);
    --color-primary-dark: var(--teal-600);
    --color-primary-pressed: var(--teal-700);

    /* Neutral greys, cool and without a teal cast. */
    --ink: #111418;
    --ink-deep: #0a0c0f;
    --muted: #646b78;
    --muted-inverse: #9aa3ad;
    --border-strong: #d1d5db;
    --hairline: #e5e7eb;
    --subtle: #f4f6f8;
    --white: #ffffff;

    --color-bg: var(--white);
    --color-bg-alt: var(--subtle);
    --color-bg-darker: var(--ink-deep);

    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-text-inverse-muted: var(--muted-inverse);

    --color-border: var(--hairline);
    --color-border-strong: var(--border-strong);

    /* Status colors: base on white and on its tint, tint as background. */
    --status-info: #006972;
    --status-info-tint: #ecfafb;
    --status-success: #15803d;
    --status-success-tint: #effaf2;
    --status-warning: #b45309;
    --status-warning-tint: #fdf6ec;
    --status-error: #b42318;
    --status-error-tint: #fdf1f0;

    --gradient-logo: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-400) 100%);
    --gradient-cover: linear-gradient(155deg, var(--teal-700) 0%, var(--teal-500) 52%, var(--teal-950) 100%);
    /* Marketing hero background: greys only. */
    --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, var(--hairline), transparent 60%),
                     linear-gradient(180deg, var(--subtle) 0%, var(--white) 100%);
    /* Focus ring for inputs. */
    --focus-ring: 0 0 0 3px rgba(0, 136, 144, 0.15);

    /* Fixed set per medium, never chosen per element. */
    --radius-card: 14px;             /* cards, contact card, CTA band */
    --radius-box: 10px;              /* boxes inside cards, consent banner */
    --radius-small: 6px;             /* icon tiles, inputs, menu items */

    --shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.04), 0 2px 6px rgba(17, 20, 24, 0.04);
    --shadow-md: 0 4px 12px rgba(17, 20, 24, 0.06), 0 12px 32px rgba(17, 20, 24, 0.06);
    --shadow-lg: 0 12px 28px rgba(17, 20, 24, 0.10), 0 32px 80px rgba(17, 20, 24, 0.10);

    /* Type roles, shared with print. Inter Display (Display, H1, H2) comes
       from the variable Inter via optical sizing. */
    --font-display: clamp(40px, 5vw, 56px);
    --font-h1: clamp(34px, 4vw, 44px);
    --font-h2: clamp(26px, 3vw, 32px);
    --font-h3: 22px;
    --font-h4: 18px;
    --font-lead: 20px;
    --font-small: 14px;
    --font-eyebrow: 13px;
    --font-micro: 12px;

    --max-width: 1160px;
    --content-width: 760px;
    --gutter: 24px;

    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Belt-and-braces against horizontal overflow on narrow viewports
       (long German compounds, oversized SVGs, etc.). `clip` keeps
       position: sticky working unlike `hidden`. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Long German compounds ("Prozessreifegrad", "Datenschutzerklärung")
       don't wrap on <390 px screens with default word-break. */
    overflow-wrap: break-word;
    /* Mirror html's clip so Safari/older browsers — where clip on html
       doesn't always propagate to the viewport — also stop horizontal
       scroll without breaking position: sticky on the navbar. */
    overflow-x: clip;
    /* Sticky footer: when content is shorter than the viewport (e.g. on
       /self-assessment during loading), push the footer to the bottom
       instead of floating it up next to the content. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; display: block; }

a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-primary-pressed); }

/* Inter Display gets no extra letter-spacing; it is already tight. */
h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 0.6em;
    color: var(--color-text);
}
h1 { font-size: var(--font-h1); line-height: 1.15; }
h2 { font-size: var(--font-h2); line-height: 1.2; }
h3 { font-size: var(--font-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: var(--font-h4); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 1em; }

/* ---------- 3. Layout ---------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section {
    padding: 96px 0;
    position: relative;
}

/* Ohne Abstand verdeckt die klebende 72-px-Kopfzeile den Anfang des
   Sprungziels. Fuer "#top" ergibt sich eine negative Position, die auf 0
   begrenzt wird. */
section[id],
header[id],
article[id],
h2[id],
h3[id] { scroll-margin-top: 88px; }
section.section-alt { background: var(--color-bg-alt); }

.section-header { max-width: var(--content-width); margin: 0 auto 64px; text-align: center; }
.section-header.left { text-align: left; margin-left: 0; }

/* ---------- 4. Type helpers ---------- */
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: var(--font-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-primary-dark);
    margin-bottom: 16px;
}

/* Small uppercase label in muted, for headings that sort rather than
   announce (menu groups, box labels, case-study blocks). */
.label {
    display: block;
    text-transform: uppercase;
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.lead {
    font-size: var(--font-lead);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ---------- 5. Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--color-border);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
/* Outlined CI lockup: horizontal, the short one below 700 px. */
.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.navbar-brand img { height: 30px; width: auto; }
/* Gemeinsamer Container, damit unter 700 px Liste und Aufruf zusammen ins
   Klappmenue wandern. */
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}
.navbar-nav {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-nav a {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
}
.navbar-nav a:hover { color: var(--color-primary-dark); }
.navbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--transition), transform var(--transition);
}
.navbar-cta:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.navbar-cta:active { background: var(--color-primary-pressed); }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    color: var(--color-text);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Navbar: Aufklapp-Panel ---------- */
/* Klick statt Hover: Touch-Geraete kennen kein Hover. Das Panel liegt im
   <li>, damit es unter 700 px im Burger-Menue an der richtigen Stelle
   steht. */
.nav-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.nav-panel-toggle:hover,
.nav-panel-toggle[aria-expanded="true"] { color: var(--color-primary-dark); }
.nav-panel-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition);
}
.nav-panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Bezugspunkt ist die sticky .navbar, nicht das <li> — deshalb läuft das
   Panel über die volle Breite. */
.nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}
.nav-panel[hidden] { display: none; }
.nav-panel-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 36px 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.nav-panel-label {
    display: block;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}
.nav-panel-item {
    display: block;
    margin: 0 -16px;
    padding: 14px 16px;
    border-radius: var(--radius-small);
    transition: background var(--transition);
}
.nav-panel-item:hover { background: var(--color-bg-alt); }
.nav-panel-item strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    transition: color var(--transition);
}
.nav-panel-item:hover strong { color: var(--color-primary-dark); }
.nav-panel-item span {
    display: block;
    margin-top: 2px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.nav-panel-item svg { width: 14px; height: 14px; transition: transform var(--transition); }
.nav-panel-item:hover svg { transform: translateX(3px); }
.nav-panel-note {
    margin: 12px 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

/* ---------- 9. Homepage: Einstieg, Band und Hero auf einem Bildschirm ---------- */
/* Band und Hero zusammen genau die sichtbare Flaeche unter der Kopfzeile.
   dvh statt vh wegen der ein- und ausfahrenden Adressleiste; die
   vh-Zeile davor ist der Rueckfall. */
.intro {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
}

/* ---------- Claim-Band ---------- */
.claim-band {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 56px 0;
    background: var(--gradient-cover);
    overflow: hidden;
}
/* Wabenmuster in der Ausrichtung des Logos. Die Maske blendet es zur Mitte
   hin aus, damit der Satz nicht auf Gitterlinien liegt. */
.claim-band::before {
    content: '';
    position: absolute;
    inset: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='51.96' viewBox='0 0 90 51.96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M30 0L15 25.98L-15 25.98L-30 0L-15 -25.98L15 -25.98Z'/%3E%3Cpath d='M120 0L105 25.98L75 25.98L60 0L75 -25.98L105 -25.98Z'/%3E%3Cpath d='M30 51.96L15 77.94L-15 77.94L-30 51.96L-15 25.98L15 25.98Z'/%3E%3Cpath d='M120 51.96L105 77.94L75 77.94L60 51.96L75 25.98L105 25.98Z'/%3E%3Cpath d='M75 25.98L60 51.96L30 51.96L15 25.98L30 0L60 0Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 51.96px;
    -webkit-mask-image: radial-gradient(ellipse 80% 105% at 50% 50%, transparent 6%, #000 60%);
    mask-image: radial-gradient(ellipse 80% 105% at 50% 50%, transparent 6%, #000 60%);
    pointer-events: none;
}
/* Flex-Item ohne width: die Breite kommt vom Inhalt, nicht von der Spalte.
   margin: 0 auto setzt den Block mittig ins Band. */
.claim-band .container { position: relative; }
.claim {
    margin: 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    /* The CI sets the claim in the Display role, SemiBold. */
    font-size: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    /* Rechtsbuendig staffelt die kuerzere Antwort von selbst gegen die Frage. */
    text-align: right;
}
.claim-q,
.claim-a { display: block; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 56px 0;
    /* Greys only: the headline carries the color. */
    background: var(--gradient-hero);
    overflow: hidden;
}
.hero-inner {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.hero-title {
    font-size: var(--font-h1);
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 24px;
}
/* One sentence per line: the second statement always starts on its own. */
.hero-title-line { display: block; }
.hero-tagline {
    font-size: var(--font-lead);
    color: var(--color-text-muted);
    max-width: 660px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 6. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    transition: all var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-primary-pressed); }
.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-arrow svg { transition: transform var(--transition); }
.btn-arrow:hover svg { transform: translateX(3px); }
/* Same arrow, pointing back. */
.btn-back svg { transform: rotate(180deg); transition: transform var(--transition); }
.btn-back:hover svg { transform: rotate(180deg) translateX(3px); }
.btn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---------- Wiedererkennung ---------- */
/* Weder Aufzaehlungspunkte noch Trennlinien: als Liste gesetzt laese es
   sich wie eine Merkmalstabelle. */
.recognition {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.recognition li {
    margin-bottom: 22px;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.recognition li:last-child { margin-bottom: 0; }
.recognition-answer {
    max-width: var(--content-width);
    margin: 40px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--color-border-strong);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* ---------- 7. Components ---------- */

/* Cards grid */
.grid {
    display: grid;
    gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 36px 32px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-small);
    background: var(--teal-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-dark);
    margin-bottom: 22px;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 12px; font-size: var(--font-h4); line-height: 1.4; letter-spacing: 0; }
.card p { color: var(--color-text-muted); font-size: 0.97rem; margin-bottom: 0; }
/* Der letzte Absatz füllt die Karte aus, damit gleich hohe Karten entstehen. */
.card p:last-of-type { flex-grow: 1; }
.card p + p { margin-top: 14px; }

/* Der letzte Absatz fuellt die Karte, deshalb sitzen die Boxen bei allen
   drei Karten auf gleicher Hoehe. */
.card-tip {
    display: block;
    margin-top: 22px;
    padding: 12px 14px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-box);
    transition: border-color var(--transition), background var(--transition);
}
.card-tip:hover { border-color: var(--color-primary); background: #fff; }
.card-tip-label {
    display: block;
    margin-bottom: 3px;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

/* Panel: a highlighted surface on a page (FAQ, notes, settings). */
.panel {
    padding: 32px 34px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--color-text); font-weight: 600; }
.panel-small {
    padding: 24px 26px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* Tags: pill, teal 100 with teal 700 text. As a list (.tags > li) or
   single elements (.tag). */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tag,
.tags > li {
    padding: 4px 12px;
    background: var(--teal-100);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--teal-700);
}

/* Form fields: label over input. */
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}
.field .hint {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 400;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.field textarea {
    resize: vertical;
    min-height: 100px;
}

/* Inline error message. */
.alert-error {
    padding: 12px 16px;
    border-radius: var(--radius-box);
    background: var(--status-error-tint);
    color: var(--status-error);
    font-size: 0.9rem;
    border: 1px solid rgba(180, 35, 24, 0.2);
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card-tip-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-dark);
}
.card-tip-text svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    transition: transform var(--transition);
}
.card-tip:hover .card-tip-text svg { transform: translateX(3px); }

/* ---------- 9. Homepage: contact ---------- */
.contact-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--gradient-cover);
    color: #fff;
    border-radius: var(--radius-card);
    padding: 56px 48px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.contact-card .eyebrow { position: relative; color: var(--white); opacity: 0.85; }
.contact-card h2 { color: #fff; position: relative; }
.contact-card p { color: rgba(255, 255, 255, 0.85); position: relative; font-size: 1.05rem; }
.contact-details {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 32px 0;
    align-items: center;
}
.contact-details a { color: #fff; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; }
.contact-details a:hover { color: #fff; border-bottom-color: #fff; }
.contact-card .btn-primary {
    position: relative;
    background: #fff;
    color: var(--color-primary-dark);
}
.contact-card .btn-primary:hover { background: var(--teal-50); color: var(--color-primary-pressed); }

/* ---------- 11. Footer ---------- */
.site-footer {
    padding: 48px 0 32px;
    background: var(--color-bg-darker);
    color: var(--color-text-inverse-muted);
    font-size: 0.9rem;
    /* Pair with body's flex-column + min-height:100vh — auto top margin
       absorbs all leftover space, pinning the footer to the viewport
       bottom on short pages. */
    margin-top: auto;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-brand { display: flex; align-items: center; }
.footer-brand img { height: 30px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; align-items: center; }
.footer-links a { color: var(--color-text-inverse-muted); }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.82rem;
}

/* ---------- 9. Homepage: CTA band (e.g. self-assessment teaser) ---------- */
.cta-band { padding: 64px 0; }
.cta-band-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 44px;
    background: linear-gradient(135deg, var(--white) 0%, var(--teal-50) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.cta-band-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(0, 136, 144, 0.08), transparent 55%);
    pointer-events: none;
}
.cta-band-text { flex: 1; min-width: 0; position: relative; }
.cta-band-text h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    margin-bottom: 10px;
}
.cta-band-text p {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    margin-bottom: 0;
    max-width: 56ch;
}
.cta-band-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
}
.cta-band-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
@media (max-width: 760px) {
    .cta-band-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 24px; }
    .cta-band-action { align-items: flex-start; width: 100%; }
    .cta-band-action .btn { width: 100%; justify-content: center; }
}

/* ---------- 3. Layout: reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 8. Content pages ---------- */

/* One reading column, top to bottom (product page, case studies).
   Sections are divided by hairlines, not by tiles or color. */
.page {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gutter) 24px;
}
.page-head { padding: 28px 0 44px; }
/* Sized for one line: at 42 characters and the 712 px column the heading
   fits up to about 2.1 rem; 2 rem leaves room for other font metrics. The
   vw part shrinks it early enough on narrow windows that it only wraps on
   small phones. */
.page-head h1 {
    font-size: clamp(1.45rem, 3.9vw, 2rem);
    margin-bottom: 20px;
}
.page-intro {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}
.page-intro:last-child { margin-bottom: 0; }

.page > section,
.page > article {
    padding: 44px 0;
    border-top: 1px solid var(--color-border);
}
.page > .no-rule { border-top: none; padding-top: 0; }
/* A head that already ends on a rule needs no second one directly below,
   it would read as an empty extra item. */
.page-head + section { border-top: none; }

.page h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    margin-bottom: 16px;
}
.page h3:not(.label) {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 28px;
    margin-bottom: 10px;
}
.page p { color: var(--color-text-muted); }
.page p:last-child { margin-bottom: 0; }
.page .panel h2 { margin-bottom: 14px; }

/* Breadcrumbs */
/* Kennzeichnet eine Unterseite als solche. Entspricht der BreadcrumbList in
   den strukturierten Daten der jeweiligen Seite. */
.crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-primary-dark); }
.crumbs-sep { color: var(--color-border-strong); }

/* ---------- 10. Legal pages (Impressum, Datenschutz, 404) ---------- */
.legal {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 80px 24px;
}
.legal h1 { margin-bottom: 32px; }
.legal h2 { font-size: var(--font-h4); font-weight: 600; line-height: 1.4; margin-top: 32px; margin-bottom: 8px; }
.legal h3 { font-size: 1rem; letter-spacing: 0; margin-top: 24px; margin-bottom: 6px; }
.legal p { color: var(--color-text-muted); }
.legal ul {
    color: var(--color-text-muted);
    padding-left: 24px;
    margin-bottom: 16px;
}
.legal li { margin-bottom: 4px; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
    section { padding: 72px 0; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .navbar-menu { display: none; }
    .nav-toggle { display: block; }
    .navbar.is-open .navbar-menu {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        padding: 24px;
        gap: 18px;
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
    }
    .navbar.is-open .navbar-nav { flex-direction: column; gap: 18px; }
    .navbar.is-open .navbar-cta { justify-content: center; }
    /* Im Burger-Menue kein Overlay, sonst laege es ueber der Liste, aus der es
       stammt. */
    .nav-panel {
        position: static;
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
    }
    .nav-panel-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 14px 0 2px;
    }
    .nav-panel-item { margin: 0; padding: 9px 0; }
    .nav-panel-item:hover { background: transparent; }
    /* Auf dem Telefon kein gemeinsamer Bildschirm: das presst beide Bloecke
       zusammen. */
    .intro { min-height: 0; display: block; }
    .claim-band { padding: 56px 0; }
    .claim { font-size: clamp(30px, 8vw, 40px); }
    .hero { padding: 64px 0; }
    .contact-card { padding: 40px 24px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .card { padding: 28px 22px; }
    .page { padding: 0 20px 16px; }
    .page-head { padding: 40px 0 36px; }
    .page > section,
    .page > article { padding: 36px 0; }
    .panel { padding: 26px 22px; }
    .panel-small { padding: 20px 18px; }
}

/* ---------- 13. Consent banner ---------- */
/* Injected by consent.js. Anchored bottom-left rather than covering the
   viewport: the visitor can read the page (incl. the Datenschutzerklärung)
   before deciding, which a modal overlay would prevent. */
.consent-banner {
    position: fixed;
    z-index: 1000;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 520px;
    padding: 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-lg);
    animation: consent-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes consent-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .consent-banner { animation: none; }
}

.consent-banner-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}
.consent-banner-title:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.consent-banner-text {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.consent-banner-text a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* One toggle per purpose, each naming its tool — set apart from the ask above
   them, since this is what carries the "informed" part of the consent. Stacked
   with a narrow gap so the two read as one block of choices, not as two
   competing asks. */
.consent-banner-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
}

.consent-banner-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    background: var(--color-bg-alt);
    border-radius: var(--radius-small);
}
.consent-banner-choice input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.consent-banner-choice label {
    color: var(--color-text-muted);
    cursor: pointer;
}
.consent-banner-choice label strong { color: var(--color-text); font-weight: 600; }

.consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.consent-banner-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 18px;
    font-size: 0.88rem;
}

@media (max-width: 560px) {
    .consent-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 22px 20px;
    }
    .consent-banner-actions { flex-direction: column; }
}

/* ---------- 13. Consent controls on the privacy page ---------- */
/* Opens datenschutz.html, ahead of the page heading: Art. 7 Abs. 3 DSGVO wants
   withdrawal to be as easy as consent, and consent costs one banner click — so
   this must not sit behind ten sections of scrolling. Set off as a panel so it
   reads as an action rather than more legal prose. */
.consent-settings { margin: 0 0 40px; }
/* Looks like a heading, isn't one — see the note in datenschutz.html. */
.consent-settings-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
}

.consent-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* ---------- 14. External links ---------- */
/* Keyed on the href rather than on target="_blank", so a link added later is
   marked without anyone remembering the attribute. Icon-only links (the social
   link in the footer) are excluded — an arrow next to a glyph reads as noise.
   The mark is drawn as a mask in currentColor, so it inherits the link colour
   and stays invisible to screen readers, which already get the real cue from
   the link text and target. */
a[href^="http"]:not([href*="yw-solutions.de"]):not(:has(svg))::after {
    content: "";
    display: inline-block;
    width: 0.68em;
    height: 0.68em;
    margin-left: 0.28em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M21 3 12 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M21 3 12 12'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}