/* ============================================================
   vouillamoz.pro — gemeinsames Stylesheet
   Alle Seiten laden diese Datei. Seitenspezifische Ausnahmen
   werden über Modifier-Klassen gelöst (siehe README).
   ============================================================ */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root {
  /* Marke */
  --primary:      #2B4F82;
  --primary-d:    #1E3A62;
  --primary-tint: rgba(43,79,130,.1);
  --secondary:    #7A4F30;
  --text:         #141E30;
  --white:        #FFFFFF;
  --bg-tint:      #FAF8F4;
  --beige:        #CDC4BE;
  --cover-bg:     #E5E1D8;

  /* Flächen und Linien */
  --card-bg:      rgba(255,255,255,.4);
  --card-border:  rgba(178,169,154,.4);
  --rule:         rgba(178,169,154,.4);
  --rule-soft:    rgba(178,169,154,.2);
  --rule-invert:  rgba(249,247,242,.1);

  /* Toggle-Bar — Tokens aus der LUKB-Library */
  --toggle-border:    #8C8C8C;
  --toggle-active-bg: #E4F4FE;
  --toggle-active-fg: #0052AE;
  --toggle-radius:    2px;

  /* Chips — Tokens aus der LUKB-Library */
  --chip-info-bg:    #BCE2FE;  --chip-info-border:    #0052AE;
  --chip-warning-bg: #FFF2CB;  --chip-warning-border: #946300;
  --chip-success-bg: #AAE0CF;  --chip-success-border: #006A44;

  /* Schrift */
  --serif: 'Lora', Georgia, serif;
  --sans:  'Nunito', system-ui, sans-serif;
  --ui:    'Inter', system-ui, sans-serif;

  /* Layout */
  --maxw: 1280px;
  --px:   clamp(20px, 4vw, 32px);
}

/* ── 2. Reset und Basis ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; border-radius: 2px; }

/* ── 3. Typo-Skala (1:1 aus den Figma-Textstyles) ────────── */
.t-label {                                  /* Label 12/16, +2.4 */
  font-family: var(--sans); font-weight: 700;
  font-size: 12px; line-height: 16px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--secondary);
}
.t-h1 {                                     /* Lora Medium 72/80 */
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.5rem, 5.6vw, 72px); line-height: 1.11;
  color: var(--primary);
}
.t-h2 {                                     /* Lora Regular 32/40 */
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 32px); line-height: 1.25;
  color: var(--primary);
}
.t-h3 {                                     /* Lora Regular 21/30 */
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; line-height: 30px;
  color: var(--primary);
}
.t-h4 {                                     /* Lora Regular 18/28 */
  font-family: var(--serif); font-weight: 400;
  font-size: 18px; line-height: 28px;
  color: var(--primary);
}
.t-lead {                                   /* Nunito 22/34.5 */
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.57;
  color: var(--text);
}
.t-copy {                                   /* Nunito 18/30.5 */
  font-family: var(--sans); font-weight: 400;
  font-size: 18px; line-height: 30.5px;
  color: var(--text);
}
.t-copy + .t-copy { margin-top: 23px; }
.t-copy b, .t-copy strong { font-weight: 700; }
.t-copy-b { font-weight: 700; }
.t-copy-s {                                 /* Nunito 14/22.75 */
  font-family: var(--sans); font-weight: 400;
  font-size: 14px; line-height: 22.75px;
  color: var(--text);
}

.inline-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover { text-decoration-thickness: 2px; }

/* ── 4. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ui); font-weight: 500;
  font-size: 16px; line-height: 24px;
  border-radius: 4px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn img { width: 8.75px; height: 8.75px; flex: none; }
.btn-primary { padding: 16px 24px; background: var(--primary); color: var(--white); border: 1px solid var(--primary); }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn-secondary { padding: 16px 24px; background: rgba(255,255,255,.5); color: var(--primary); border: 1px solid var(--primary); }
.btn-secondary:hover { background: var(--primary); color: var(--white); }
.btn-sm { padding: 8px 24px; font-size: 14px; line-height: 20px; }

/* ── 5. Navigation ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--rule-soft); background: rgba(255,255,255,.95); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 24px var(--px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand svg { width: 35px; height: 40px; flex: none; }
.nav-brand span { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--text); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 20px; color: var(--primary); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav-actions { display: flex; align-items: center; gap: 16px; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 6px; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--primary); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; position: fixed; inset: 89px 0 0 0; z-index: 95;
  background: rgba(255,255,255,.98); backdrop-filter: blur(8px);
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a { font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--primary); text-decoration: none; }

/* ── 6. Startseite ───────────────────────────────────────── */
.section { width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--px); }

/* Das Bild dockt oben an die Navigation, rechts an den Fensterrand und unten
   an die nächste Sektion — wie im Figma, dort absolut positioniert. Umgesetzt
   als Cover-Bild (object-fit: cover) statt Grid-Spalte. */
.hero { position: relative; background: var(--white); overflow: hidden; }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 72px var(--px);
  min-height: 610px; display: flex; align-items: center;
}
.hero-copy { max-width: clamp(280px, 46vw, 592px); position: relative; z-index: 1; }
.hero-copy > * + * { margin-top: 40px; }
.hero-title { display: flex; flex-direction: column; gap: 24px; }
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; }
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 40%;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.profil { background: var(--bg-tint); }
.profil-inner { max-width: var(--maxw); margin: 0 auto; padding: 120px var(--px) 100px; display: flex; gap: 60px; align-items: flex-start; }
.profil-head { flex: 1 1 0; min-width: 0; }
.profil-body { width: 800px; max-width: 100%; flex: none; }

.fokus { background: var(--bg-tint); }
.fokus-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--px) 120px; display: flex; flex-direction: column; gap: 80px; }
.fokus-rule { height: 1px; background: var(--rule); border: none; }
.fokus-intro { max-width: 749px; margin-top: 16px; }
.fokus-cta { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 822px; margin-inline: auto; text-align: center; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 25px; display: flex; flex-direction: column; gap: 24px; align-items: center;
}
.card-icon { width: 100%; display: flex; align-items: center; justify-content: flex-start; color: var(--secondary); }
.card-icon svg { width: 24px; height: 24px; display: block; }
.card > .t-h3, .card > .t-copy-s { width: 100%; }

.werdegang { background: var(--white); }
.werdegang-inner { max-width: var(--maxw); margin: 0 auto; padding: 80px var(--px); display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.werdegang-head { width: 384px; flex: none; }
.werdegang-body { width: 800px; max-width: 100%; flex: none; display: flex; flex-direction: column; gap: 40px; }

.employer + .employer { margin-top: 40px; }
.employer-roles { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.role { display: grid; grid-template-columns: 107px minmax(0,1fr); gap: 40px; align-items: start; }
.role-year { font-family: var(--serif); font-size: 14px; line-height: 22.75px; color: var(--secondary); }
.role-title { font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 22.75px; color: var(--text); }

.meta { border-top: 1px solid var(--rule-soft); padding-top: 61px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; align-items: start; }
.meta-col { display: flex; flex-direction: column; gap: 40px; }
.meta-group { display: flex; flex-direction: column; gap: 32px; }
.meta-list { display: flex; flex-direction: column; gap: 24px; }
.meta-note { font-family: var(--ui); font-size: 14px; line-height: 20px; color: var(--text); }
.meta-sub { padding-left: 16px; display: flex; flex-direction: column; gap: 16px; }
.meta-sub .meta-item > :first-child { font-family: var(--sans); font-size: 14px; line-height: 22.75px; color: var(--primary); }

/* ── 7. Cases-Übersicht ──────────────────────────────────── */
.cases-hero { max-width: var(--maxw); margin: 0 auto; padding: 136px var(--px) 0; }
.cases-hero .t-h1 { max-width: 1216px; }

.groups { margin-top: 120px; }
.group { background: var(--bg-tint); }
.group-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 80px var(--px) 60px;
  display: grid; grid-template-columns: minmax(0, 356px) minmax(0, 800px);
  gap: clamp(32px, 5vw, 60px); align-items: start;
}
.group-head { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.group-cards { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.group-rule { height: 1px; background: var(--rule); border: none; width: 100%; }

.case-card {
  background: var(--white); border: 1px solid var(--card-border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.case-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(43,79,130,.35); }
.case-card img { width: 100%; height: 170px; object-fit: cover; object-position: top center; }
.case-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.case-card--soon { opacity: .5; pointer-events: none; }
.case-card--soon .t-h4 { color: var(--text); }   /* Titel nicht blau, wenn die Kachel inaktiv ist */

/* ── 8. Case-Detailseiten ────────────────────────────────── */
.case-hero { max-width: var(--maxw); margin: 0 auto; padding: 136px var(--px) 0; }
/* Titelbild links (Figma: 502×376), Text rechts, 80 px dazwischen. Das Bild
   behält seine Proportion (kein fixes Höhen-Cropping) und schrumpft mit. */
.case-hero-inner {
  display: grid; grid-template-columns: minmax(0, 502px) minmax(0, 1fr);
  gap: clamp(32px, 6.5vw, 80px); align-items: center;
}
.case-cover {
  background: var(--cover-bg); aspect-ratio: 502 / 376; border-radius: 8px; overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-hero-copy { display: flex; flex-direction: column; gap: 24px; }

.chapters { margin-top: 120px; }
.chapter { background: var(--bg-tint); }
/* Kopf links (bis 356 breit), Textspalte rechts füllt den Rest — nie breiter
   als 800 (Figma). ALLES in der zweiten Spalte (Text und Bild-Karten)
   richtet sich an dieser Breite aus; nur .slide-card--wide bricht aus. */
.chapter-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 80px var(--px) 60px;
  display: grid;
  grid-template-columns: minmax(0, 356px) minmax(0, 800px);
  column-gap: clamp(32px, 5vw, 60px); row-gap: 60px; align-content: start;
}
.chapter-cols { display: contents; }
.chapter-head { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chapter-body { grid-column: 2; min-width: 0; }
.chapter-inner > .slide-card { grid-column: 2; }
.chapter-inner > .slide-card--wide { grid-column: 1 / -1; }
.chapter-body--stack { display: flex; flex-direction: column; gap: 24px; }
.chapter-body--stack-lg { display: flex; flex-direction: column; gap: 40px; }
.chapter-rule { height: 1px; background: var(--rule); border: none; width: 100%; }

.slide-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 25px; width: 100%; display: flex; flex-direction: column; gap: 40px; align-items: center;
}
.slide-card > * { width: 100%; }
/* Volle Containerbreite statt Textspalte. Als direktes Kind von .chapter-inner
   platzieren (Geschwister von .chapter-cols), sonst wirkt es nicht. */
.slide-card--wide { align-self: stretch; }
.slide-figure { display: flex; flex-direction: column; gap: 10px; margin: 0; width: 100%; }
.slide-figure img { width: 100%; height: auto; }
.slide-lead { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; width: 100%; }

/* ── 9. Toggle-Bar ───────────────────────────────────────── */
.toggle-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.toggle-row-label { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 30.5px; }
.toggle-bar { display: flex; align-items: center; }
.toggle-bar button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 16px; background: transparent;
  border: 1px solid var(--toggle-border);
  font-family: var(--sans); font-size: 18px; line-height: 26px; font-weight: 400;
  color: var(--text); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.toggle-bar button:not(:last-child) { margin-right: -1px; }
.toggle-bar button:first-child { border-radius: var(--toggle-radius) 0 0 var(--toggle-radius); }
.toggle-bar button:last-child  { border-radius: 0 var(--toggle-radius) var(--toggle-radius) 0; }
.toggle-bar button:hover { background: var(--toggle-active-bg); }
.toggle-bar button[aria-selected="true"] { background: var(--toggle-active-bg); color: var(--toggle-active-fg); position: relative; z-index: 1; }
.toggle-check { width: 24px; height: 24px; flex: none; display: none; }
.toggle-bar button[aria-selected="true"] .toggle-check { display: block; }
[role="tabpanel"][hidden] { display: none; }

/* ── 10. Chips ───────────────────────────────────────────── */
.chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 2px; border: 1px solid;
  font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 22.75px;
  color: var(--text);
}
.chip--info    { background: var(--chip-info-bg);    border-color: var(--chip-info-border); }
.chip--warning { background: var(--chip-warning-bg); border-color: var(--chip-warning-border); }
.chip--success { background: var(--chip-success-bg); border-color: var(--chip-success-border); }
.chip-arrow { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 30.5px; color: var(--text); }

/* ── 11. Kontakt und Wirkung (blaue Flächen) ─────────────── */
.kontakt { background: var(--primary); overflow: hidden; }
.kontakt-inner { max-width: 1024px; margin: 0 auto; padding: 80px var(--px); display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.kontakt .t-label { color: var(--beige); }
.kontakt h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.25rem, 5.6vw, 72px); line-height: 1.11; color: var(--white); }
.kontakt-contact { padding-top: 32px; display: flex; flex-direction: column; gap: 48px; align-items: center; width: 100%; }
.kontakt-mail {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 4.5vw, 48px); line-height: 1.05;
  color: var(--beige); text-decoration: none; word-break: break-word; transition: opacity .2s;
}
.kontakt-mail:hover { opacity: .75; text-decoration: underline; text-underline-offset: 6px; }
.kontakt-links { border-top: 1px solid var(--rule-invert); padding-top: 32px; display: flex; gap: 40px; }

.wirkung { background: var(--primary); }
.wirkung-inner { max-width: var(--maxw); margin: 0 auto; padding: 120px var(--px); display: flex; flex-direction: column; gap: 60px; align-items: center; }
.wirkung-head { max-width: 1024px; text-align: center; display: flex; flex-direction: column; gap: 32px; }
.wirkung-head .t-label, .wirkung .t-label { color: var(--beige); }
.wirkung-head h2, .wirkung h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 36px); line-height: 1.25; color: var(--white); }
.wirkung-head p { font-family: var(--sans); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.57; color: var(--white); }
.wirkung-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; width: 100%; }

/* Variante ohne Karten: nur zentrierter Text */
.wirkung-inner--narrow { max-width: 1024px; gap: 32px; text-align: center; }
.wirkung-lead { font-family: var(--sans); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.57; color: var(--white); max-width: 704px; }
.wirkung-copy { font-family: var(--sans); font-size: 18px; line-height: 30.5px; color: var(--white); max-width: 704px; }

/* ── 12. Footer ──────────────────────────────────────────── */
.footer { background: var(--primary); border-top: 1px solid var(--rule-invert); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-family: var(--sans); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--beige); }
.footer-links { display: flex; gap: 48px; }
.link-caps {
  font-family: var(--ui); font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--beige);
  text-decoration: none; transition: opacity .2s;
}
.link-caps:hover { opacity: .7; text-decoration: underline; text-underline-offset: 5px; }

/* ── 13. Responsive ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profil-inner { flex-direction: column; gap: 32px; padding-top: 88px; padding-bottom: 72px; }
  .profil-body { width: 100%; }
  .fokus-inner { gap: 56px; padding-bottom: 88px; }
  .werdegang-head, .werdegang-body { width: 100%; }
  .werdegang-inner { padding-block: 64px; }

  /* Kopf-und-Textspalte stapeln: darunter wird die Textspalte (und ihre
     Bilder) zu schmal. */
  .case-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .case-cover { max-width: 640px; }
  .chapter-inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .chapter-head, .chapter-body, .chapter-inner > .slide-card { grid-column: 1; }
  .group-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* Hero: Bild stapelt über den Text statt rechts anzudocken */
  .hero-inner { flex-direction: column; align-items: stretch; padding: 48px var(--px) 56px; gap: 40px; min-height: 0; }
  .hero-copy { max-width: none; order: 1; }
  .hero-media { position: static; width: 100%; order: 0; }
  .hero-media img { aspect-ratio: 4 / 3; max-height: 420px; }
  .meta { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; }

  .cases-hero, .case-hero { padding-top: 56px; }

  .groups { margin-top: 64px; }
  .group-inner { padding: 56px var(--px) 48px; }
  .group-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .chapters { margin-top: 72px; }
  .chapter-inner { padding: 56px var(--px) 48px; }
  .figure-pair { grid-template-columns: 1fr; gap: 32px; }

  .wirkung-inner { padding-block: 80px; gap: 48px; }
  .wirkung-cards { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .cards, .group-cards { grid-template-columns: 1fr; }
  .nav-brand span { display: none; }
  .role { grid-template-columns: 1fr; gap: 2px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .kontakt-links { flex-direction: column; gap: 20px; align-items: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { gap: 24px; flex-wrap: wrap; }
  .slide-card { padding: 16px; gap: 28px; }
  .toggle-bar { width: 100%; }
  .toggle-bar button { flex: 1 1 0; justify-content: center; font-size: 15px; padding-inline: 8px; }
  /* Lesbarkeit kleiner Texte auf Mobile */
  .card .t-copy-s, .case-card .t-copy-s, .meta-note { font-size: 16px; line-height: 1.6; }
}