/* Bayeset — shared styles for all pages.
   Concept: a case file on drafting paper. Huge expanded headlines, one
   document shown before and after, ultramarine reserved for codes, the
   call to action, the menu strip and the closing band. Fonts are self-hosted: no third-party requests. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F1F2EE;
  --sheet: #FFFFFF;
  --ink: #0D0F14;
  --muted: #565B66;
  --rule: #CFD3DA;
  --accent: #2236F0;
  --accent-ink: #FFFFFF;
  --link: #2236F0;
  --field: #80858F;
  --mark: #8A5A00;
  --hl: #FBE2A0;          /* marker over identifying details in the example */

  --f-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1440px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C0E13; --sheet: #151821; --ink: #ECEEF2; --muted: #9DA3AF; --rule: #2B303C;
    --accent: #4A5CFF; --accent-ink: #FFFFFF; --link: #93A0FF; --field: #6B7180;
    --mark: #FFCF70; --hl: #5C4614;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0C0E13; --sheet: #151821; --ink: #ECEEF2; --muted: #9DA3AF; --rule: #2B303C;
  --accent: #4A5CFF; --accent-ink: #FFFFFF; --link: #93A0FF; --field: #6B7180;
  --mark: #FFCF70; --hl: #5C4614;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
html[lang="de"] body { hyphens: auto; -webkit-hyphens: auto; }
/* Big display headings break only where the copy has ­: Safari's automatic
   hyphenation otherwise ignores it (Geschäftsda-ten instead of Geschäfts-daten). */
.hero h1, .section-head h2, .contact h2, .person-name, .more h2 { hyphens: manual; -webkit-hyphens: manual; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; overflow-wrap: break-word; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--ink); color: var(--paper); padding: 8px 12px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.label {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  hyphens: manual;
}

/* Nav: the wordmark sits on paper; the menu sits on a blue strip exactly as tall as the button, starting a
   little before the first link and ending with the button (Florian, 16 October) */
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.wordmark {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 1.375rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark i { width: 14px; height: 14px; background: var(--accent); display: inline-block; }
.nav ul { list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; gap: 24px; align-items: center; background: var(--accent); }
/* Every text link in the bar has the same box: a full-height tap target with the text centred, no padding,
   so the language link (and "For companies" on /ai) sits exactly like the others */
.nav ul a:not(.btn) { color: var(--accent-ink); text-decoration: none; font-weight: 500; font-size: .9375rem; display: inline-flex; align-items: center; min-height: 44px; }
.nav ul a { white-space: nowrap; }
.nav ul a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Focus rings stay inside the strip: white around a link, paper-coloured inside the button (blue while hovered) */
.nav ul :focus-visible { outline-color: var(--accent-ink); outline-offset: -5px; }
.nav ul .btn:focus-visible { outline-color: var(--paper); outline-offset: -6px; }
.nav ul .btn:hover:focus-visible { outline-color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 600; font-size: 1rem;
  padding: 14px 22px; border-radius: 0; text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); hyphens: manual;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { border-color: var(--accent); color: var(--link); }
/* The button looks like the hero's (ink, the page's one action); on hover it turns white with a frame in the
   strip's blue, because the usual blue hover would vanish into the strip */
.nav .btn { padding: 10px 16px; font-size: .9375rem; }
.nav .btn--solid:hover { background: var(--accent-ink); color: var(--accent); border-color: var(--accent); }

/* Hero */
.hero {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 2px solid var(--ink);
}
.hero .wrap { padding-block: clamp(32px, 4vw, 48px) clamp(48px, 7vw, 88px); display: grid; gap: 24px; }
.hero h1 {
  font-stretch: 118%; font-weight: 850;
  font-size: clamp(2.1rem, min(6.4vw, 9vh), 5.25rem);
  line-height: .94; letter-spacing: -.035em; max-width: 13ch;
}
.hero .wrap > * { min-width: 0; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-main { display: grid; gap: 24px; align-content: start; }
.hero-lede { max-width: 40rem; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); }
.hero-alt { color: var(--muted); font-size: .9375rem; max-width: 40rem; }
.hero-alt a { color: var(--link); }
/* The offer at a glance. No box: the drafting grid gives way to clean paper behind the facts,
   and each lead-in uses the display face, so the four points scan like headings. */
.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; align-self: end; border-top: 6px solid var(--ink); }
.hero-facts li { padding: 18px 0 20px; border-bottom: 2px solid var(--ink); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); display: grid; gap: 6px; align-content: start; }
.hero-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-facts strong {
  color: var(--ink); font-family: var(--f-display); font-stretch: 125%; font-weight: 850;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.02; letter-spacing: -.03em;
}
/* Wide screens: the grid fades out towards the facts column */
@media (min-width: 1041px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; }
  .hero {
    background-image:
      linear-gradient(90deg, transparent 48%, var(--paper) 60%),
      linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
  }
}
/* Stacked hero: the grid stops at the thick rule; clean paper runs edge to edge below it
   down to the hero's bottom border (the clip matches .hero .wrap's bottom padding) */
@media (max-width: 1040px) {
  .hero-facts {
    background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper);
    clip-path: inset(0 -100vmax calc(-1 * clamp(48px, 7vw, 88px)));
  }
}
/* Tablets: the hero stacks, so the four facts sit in two columns instead of one long list */
@media (min-width: 761px) and (max-width: 1040px) {
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 48px); }
  .hero-facts li:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
}
/* Scannable points: a bold lead-in and one or two short lines each, in columns on wide screens */
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); border-top: 2px solid var(--ink); }
.points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; align-content: start; color: var(--muted); min-width: 0; }
.points strong { color: var(--ink); font-size: 1.0625rem; }
@media (max-width: 960px) { .points--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Exactly three points: one column instead of two plus an orphan; longer lists keep two columns */
@media (max-width: 960px) { .points--3:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .points, .points--3 { grid-template-columns: minmax(0, 1fr); } }
/* Short facts as a list instead of one long paragraph */
.facts { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--muted); max-width: 68ch; }
/* A bulleted list inside a point (e.g. "Never included" on /en): plain bullets, not rows */
.points .facts { list-style: disc; gap: 4px; }
.points .facts li { display: list-item; padding: 0; border-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections */
.section { border-bottom: 2px solid var(--ink); }
.section > .wrap { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: clamp(28px, 4vw, 48px); }
.section-head { display: grid; gap: 14px; max-width: 64ch; }
.section-head h2 {
  font-stretch: 110%; font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.03em;
}
.section-head p { color: var(--muted); max-width: 38rem; }
.faq .a, .rows dd, .contact p { max-width: 38rem; }

/* Columns with big headings */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.cols > div { padding: 28px 28px 8px 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.cols > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.cols h3 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.05; letter-spacing: -.025em; }
.cols p { color: var(--muted); }

/* Two terms side by side */
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One plain line under a section's main content, e.g. what decides the price */
.note { max-width: 52rem; color: var(--muted); }
.note strong { color: var(--ink); font-weight: 600; }

/* Before/after example: one email shown twice, side by side. Rows are shared
   through subgrid, so each line of the left email sits level with the same line
   on the right; without subgrid the rows simply stop lining up. */
.ba-intro { max-width: 52rem; }
.ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: clamp(16px, 2.4vw, 32px);
}
.ba-card {
  grid-row: 1 / span 5;
  display: grid; grid-template-rows: subgrid;
  margin: 0; min-width: 0;
  background: var(--sheet); border: 1px solid var(--rule);
}
.ba-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 14px clamp(16px, 2vw, 24px) 12px;
  border-bottom: 2px solid var(--ink);
}
.ba-card--after .ba-head { border-bottom-color: var(--accent); }
.ba-title {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.1; letter-spacing: -.02em;
}
.ba-sub { color: var(--muted); font-size: .9375rem; }

.em-meta, .em-subj, .em-body, .em-sign { padding-inline: clamp(16px, 2vw, 24px); min-width: 0; }
.em-meta { margin: 0; padding-block: 14px 10px; display: grid; gap: 4px; font-size: .9375rem; }
.em-meta > div { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 8px; }
.em-meta dt { color: var(--muted); }
.em-meta dd { margin: 0; }
.em-subj { font-weight: 600; padding-block: 10px 14px; border-bottom: 1px solid var(--rule); }
.em-body { padding-block: 16px 0; display: grid; gap: 12px; align-content: start; }
.em-sign { padding-block: 16px 20px; }

/* Vorher: identifying details under a marker */
.pii {
  background: var(--hl); color: var(--ink);
  padding: 0 .12em;
  box-shadow: inset 0 -2px 0 var(--mark);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  hyphens: manual;
}
/* Nachher: filled chips are codes; the outlined one is a coarsened value */
.code {
  font-family: var(--f-mono); font-weight: 500; font-size: .875em;
  background: var(--accent); color: var(--accent-ink);
  padding: 1px 6px; border-radius: 2px;
  white-space: nowrap; hyphens: manual;
}
.code--text {
  font-family: var(--f-body); font-size: 1em; font-weight: 400; padding-inline: 5px;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent);
}

/* The one sentence under it, and the fine print */
.ba-link {
  max-width: 52rem; padding-left: 18px; border-left: 4px solid var(--accent);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.45; font-weight: 500;
}

/* Steps: four short steps sit in columns; one column below 961px */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); min-width: 0; }
/* Number, heading and text share rows, so every text starts level */
.steps { grid-template-rows: repeat(3, auto); }
.steps li { grid-row: span 3; grid-template-rows: subgrid; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 850; font-size: 2.5rem;
  line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.steps h3 { font-family: var(--f-body); font-size: 1.125rem; font-weight: 600; }
.steps p { color: var(--muted); font-size: 1rem; }

/* Definition rows (EN privacy) */
.rows { margin: 0; border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px 32px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.rows dt { font-weight: 600; }
.rows dd { margin: 0; color: var(--muted); max-width: 60ch; }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 600; font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 22px; color: var(--muted); max-width: 68ch; display: grid; gap: 10px; }
.faq .a strong { color: var(--ink); font-weight: 600; }

/* Person */
.person-card { display: grid; grid-template-columns: minmax(0, 1fr); }
.person-text { display: grid; gap: 12px; }
/* Text stays at reading width; the logo row may use the full width */
.person-text > :not(.stations) { max-width: 64ch; }
.person-name { font-stretch: 112%; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.025em; line-height: 1.05; }
.person-text > p:not(.label) { color: var(--muted); }
/* The quiet row of names under "Über Bayeset": plain text, no logos */
/* Background row: the logos as silhouettes in the muted text colour, so they suit light and dark mode */
.stations { display: grid; gap: 12px; margin-top: 4px; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; color: var(--muted); }
.logo { display: block; height: var(--h); aspect-ratio: var(--ar); background-color: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo--sap { --logo: url(/assets/logos/sap.svg); --ar: 24 / 11.872; --h: 26px; }
.logo--deloitte { --logo: url(/assets/logos/deloitte.svg); --ar: 892.4 / 170.5; --h: 20px; }
.logo--tacto { --logo: url(/assets/logos/tacto.svg); --ar: 125 / 42; --h: 34px; }
.logo--mannheim { --logo: url(/assets/logos/mannheim.svg); --ar: 462.7 / 119.6; --h: 44px; }
.logo--standrews { --logo: url(/assets/logos/st-andrews.svg); --ar: 405.9 / 113.9; --h: 42px; }
@media (forced-colors: active) { .logo { background-color: CanvasText; forced-color-adjust: none; } }
.person-card--wide { gap: 24px; }
.person-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 1rem; hyphens: manual; }
.person-links a { color: var(--link); display: inline-block; padding-block: 6px; }

/* Contact */
.contact { background: var(--accent); color: var(--accent-ink); }
.contact .wrap { padding-block: clamp(64px, 10vw, 128px); display: grid; gap: 28px; }
.contact h2 {
  font-stretch: 118%; font-weight: 850; font-size: clamp(1.75rem, min(5vw, 7.5vh), 4.25rem);
  line-height: .95; letter-spacing: -.035em; max-width: 18ch;
}
.contact p { max-width: 58ch; font-size: 1.125rem; }
.contact .label { color: inherit; }
.contact a:not(.btn) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The safety note under the buttons: same colour, one step quieter than the offer */
.contact .wrap > p:last-child { font-size: .9375rem; max-width: 52ch; }
.contact .btn { border-color: var(--accent-ink); min-height: 48px; }
.contact .btn--solid { background: var(--accent-ink); color: var(--accent); }
.contact .btn--solid:hover { background: transparent; color: var(--accent-ink); }
.contact .btn--line { color: var(--accent-ink); }
.contact .btn--line:hover { background: var(--accent-ink); color: var(--accent); }
.mail { display: flex; flex-wrap: wrap; align-items: stretch; width: fit-content; max-width: 100%; border: 2px solid var(--accent-ink); }
.mail button { font: 600 1rem var(--f-body); padding: 14px 20px; cursor: pointer; background: transparent; color: var(--accent-ink); border: 0; border-left: 2px solid var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Email button and copy button as one outlined unit */
.contact-actions .mail { flex-wrap: nowrap; }
.mail > .btn { border: 0; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-content: center; gap: 0 .3em; }
.mail > .btn span { overflow-wrap: anywhere; }
.contact :focus-visible { outline-color: var(--accent-ink); }

/* Short notes for other readers, after the contact block */
.more { border-bottom: 2px solid var(--ink); }
.more .wrap { padding-block: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.more section { display: grid; gap: 14px; align-content: start; min-width: 0; padding-right: clamp(24px, 4vw, 56px); }
.more section + section { padding: 0 0 0 clamp(24px, 4vw, 56px); border-left: 1px solid var(--rule); }
.more h2 { font-stretch: 110%; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -.025em; }
.more p { color: var(--muted); max-width: 38rem; }
/* One note alone: heading left, text right on wide screens */
.more section:only-child { grid-column: 1 / -1; padding-right: 0; }
.more-text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.more-text > p, .more-text > .facts { max-width: 44rem; }
@media (min-width: 961px) {
  .more section:only-child { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(28px, 4vw, 64px); }
}

/* Valuation page (/value): the offer on the left, our own one-page form on the right. */
.value { border-bottom: 2px solid var(--ink); }
.value .wrap { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 8vw, 104px); display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
.value .wrap > * { min-width: 0; }
.value-intro { display: grid; gap: 20px; align-content: start; }
.value h1 {
  font-stretch: 118%; font-weight: 850; hyphens: manual;
  font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: .96; letter-spacing: -.035em; max-width: 13ch;
}
.value-lede { max-width: 34rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.value-intro .points { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
/* Form: quiet labels above the fields, one-tap option tiles, square fields whose borders keep 3:1 contrast */
.vform { display: grid; gap: 28px; border-top: 2px solid var(--ink); padding-top: 24px; }
.vq { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vq legend, .vq > label { padding: 0; color: var(--muted); font-size: 1rem; }
.vq legend { margin-bottom: 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 8px; }
.tiles--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.tile { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 16px; background: var(--sheet); border: 1px solid var(--field); cursor: pointer; }
.tile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tile:hover { border-color: var(--ink); }
.tile:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tile:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.vq input:not([type="radio"]) {
  width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: max(1rem, 16px); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--field); border-radius: 0;
}
.vq input:not([type="radio"]):hover { border-color: var(--ink); }
.vq input:not([type="radio"]):focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--ink); }
.vform .hint { color: var(--muted); font-size: .9375rem; margin: 0; }
.vform-end { display: grid; gap: 12px; justify-items: start; padding-top: 4px; }
.vform-end .btn:disabled { opacity: .6; cursor: progress; }
/* /thanks: one short message in the page's first column */
.value--done .wrap { min-height: 50vh; align-content: start; }
.form-fallback { color: var(--muted); font-size: .9375rem; }
@media (min-width: 961px) {
  .value .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .value-intro { position: sticky; top: 24px; }
}
/* Below 961px the page is one column: heading, lede and the email line, then the form straight away, then the three points */
@media (max-width: 960px) {
  .value .wrap { row-gap: 20px; }
  .value-intro { display: contents; }
  .value-intro > * { min-width: 0; }
  .value-form { order: 1; margin-top: 8px; }
  .value-intro .points { order: 2; margin-top: 28px; }
  .value-guide { order: 3; }
}
@media (max-width: 600px) { .vform-end .btn { width: 100%; justify-content: center; } }

/* Footer */
.foot .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; font-size: .875rem; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { display: inline-block; padding-block: 10px; }
.foot a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.foot a { color: var(--muted); }

/* Legal pages */
.legal .wrap { padding-block: clamp(48px, 7vw, 88px); }
.legal h1 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.6rem, 5vw, 3.25rem); letter-spacing: -.03em; line-height: 1.02; margin-bottom: 32px; }
.legal article { max-width: 40rem; display: grid; gap: 14px; }
.legal h2 { font-family: var(--f-body); font-weight: 600; font-size: 1.25rem; margin-top: 18px; }
.legal p, .legal li { color: var(--ink); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
/* A quiet line of further reading under a section's points */
.section-more { margin-top: 24px; color: var(--muted); }
/* The guide's answers to a section's questions, one per line */
.section-more p { margin: 0; }
.section-more ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }

/* Guides (/en/guide, /ratgeber): a sourced explainer on the legal-page layout */
.guide-meta { color: var(--muted); font-size: .9375rem; }
.guide h2 { margin-top: 28px; }
.guide .ref { font-size: .8125rem; text-decoration: none; white-space: nowrap; }
.guide .ref:hover, .guide .ref:focus-visible { text-decoration: underline; }
.guide-table { border-collapse: collapse; width: 100%; max-width: 28rem; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); }
.guide-table th { font-weight: 600; border-bottom-color: var(--ink); }
.guide-table td:last-child, .guide-table th:last-child { text-align: right; padding-right: 0; }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.guide .sources { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: .9375rem; }
.guide .sources li { color: var(--muted); overflow-wrap: anywhere; }
.guide .sources li:target { color: var(--ink); }
/* The questions on a guide, listed at the top so a busy reader can jump straight to theirs */
.guide-toc { display: grid; gap: 8px; padding-block: 14px 16px; margin-block: 4px 8px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.guide-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.guide-toc li { color: var(--muted); }
.guide h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.125rem; margin-top: 10px; }
.guide h2[id], .guide h3[id] { scroll-margin-top: 16px; }

/* Narrow screens */
@media (max-width: 1040px) {
  .nav ul li.opt { display: none; }
}
@media (max-width: 960px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > div, .cols > div + div { padding: 24px 0; border-left: 0; }
  .cols > div + div { border-top: 1px solid var(--rule); }
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .steps li { grid-row: auto; grid-template-rows: none; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 16px; padding-block: 18px; border-top: 1px solid var(--rule); }
  .steps li:first-child { border-top: 2px solid var(--ink); }
  .steps li::before { grid-row: span 2; font-size: 2rem; }
  .more .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .more section, .more section + section { padding: 0; border-left: 0; }
  .more section + section { padding-top: 32px; border-top: 1px solid var(--rule); }
}
/* Phones and narrow tablets: the example stacks and the cards tighten */
@media (max-width: 760px) {
  .ba { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .ba-card { grid-row: auto; grid-template-rows: none; }
  .ba-head, .em-meta, .em-subj, .em-body, .em-sign { padding-inline: 14px; }
  .ba-head { padding-block: 12px 10px; }
  .em-meta { gap: 2px; padding-block: 12px 8px; }
  .em-subj { padding-block: 8px 12px; }
  .em-body { padding-block: 12px 0; gap: 10px; }
  .em-sign { padding-block: 12px 14px; }
  .steps li { grid-template-columns: 3.25rem minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .rows > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .contact-actions > *, .hero-actions > * { flex: 1 1 100%; }
  .section .wrap > p > .btn { display: flex; }
}
/* Small phones: wordmark, language link and button must fit inside the page margins in one row */
@media (max-width: 400px) {
  .nav .wrap { gap: 8px; }
  .nav ul { gap: 6px; padding-left: 6px; }
  .nav .btn { padding: 10px 8px; font-size: .875rem; }
  .nav ul a.lang { font-size: .875rem; }
  .wordmark { font-size: 1.125rem; gap: 8px; }
  .mail button, .mail > .btn { padding-inline: 14px; }
}
/* The smallest phones: the nav button may take two lines rather than push the page sideways */
@media (max-width: 359px) {
  .nav .btn { white-space: normal; }
}
@media (forced-colors: active) {
  .pii { forced-color-adjust: none; background: Mark; color: MarkText; box-shadow: none; }
  .code { border: 1px solid CanvasText; }
  .code--text { border-style: dashed; }
  .ba-card--after { border-style: double; border-width: 4px; }
  .tile:has(input:checked) { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; outline-color: CanvasText; }
}
@media print {
  .pii, .code { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}