/* ==========================================================================
   BOLLWERK/X — Stylesheet der gesamten Website
   Eine Datei für alle Seiten. Keine Abhängigkeiten, kein Build-Schritt.

   Aufbau
     1  Tokens          Farben, Schrift, Maße
     2  Grundlagen      Reset, Body, Links, Fokus
     3  Layout          Wrap, Section, Bänder
     4  Typografie      Überschriften, Fließtext, Labels
     5  Listen
     6  Raster          inkl. Hairline-Raster mit Trennlinien
     7  Flächen         Karten, Kästen, Tabellen
     8  Schaltflächen
     9  Kopf & Navigation
    10  Pfadzeile
    11  Kontaktblock
    12  Fußzeile
    13  Hilfsklassen
    14  Responsive
   ========================================================================== */

/* ---------- 1  Tokens ---------------------------------------------------- */

:root {
  /* Flächen und Linien */
  --ink:      #0d0d0f;
  --panel:    #101013;
  --line:     #26262c;
  --raise:    #16161a;

  /* Text */
  --paper:    #f3f0ea;
  --mute:     #a0a09a;
  --faint:    #75756f;

  /* Akzente */
  --green:    #2fe3a0;
  --red:      #ee1122;

  /* Text auf grüner Fläche */
  --on-green-strong: rgba(13, 13, 15, 0.78);
  --on-green:        rgba(13, 13, 15, 0.72);
  --on-green-label:  rgba(13, 13, 15, 0.65);
  --on-green-faint:  rgba(13, 13, 15, 0.60);
  --on-green-line:   rgba(13, 13, 15, 0.18);

  /* Text auf roter Fläche */
  --on-red:       rgba(255, 255, 255, 0.88);
  --on-red-faint: rgba(255, 255, 255, 0.82);

  /* Schrift */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Maße */
  --wrap:       1240px;
  --wrap-text:  1000px;
  --wrap-cta:   900px;
  --gutter:     40px;
  --section-y:  88px;
  --section-lg: 96px;

  /* Füllfarbe der Zellen im Hairline-Raster, je Kontext überschrieben */
  --cell-bg: var(--ink);
}

/* ---------- 2  Grundlagen ------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd,
figure, figcaption, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { overflow-wrap: break-word; }

a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--green); }

input, select, textarea, button { font-family: inherit; }

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

/* Seiten, deren Fußzeile sonst hochrutscht (Impressum, Datenschutz) */
.page { background: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--text { max-width: var(--wrap-text); }
.wrap--cta  { max-width: var(--wrap-cta); }

.section    { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--lg{ padding-top: var(--section-lg); padding-bottom: var(--section-lg); }
.section--top-only    { padding-bottom: 0; }
.section--bottom-only { padding-top: 0; }

/* Vollbreite Farbbänder */
.band--panel {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --cell-bg: var(--panel);
}
.band--green { background: var(--green); color: var(--ink); --cell-bg: var(--green); --line: var(--on-green-line); }
.band--red   { background: var(--red); text-align: center; }
.band--ink   { background: var(--ink); --cell-bg: var(--ink); }

.rule-top    { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }

/* ---------- 4  Typografie ------------------------------------------------ */

/* Abschnittsmarke, beginnt im Text mit // */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 24px;
}
.eyebrow--red    { color: var(--red); }
.eyebrow--faint  { color: var(--faint); }
.eyebrow--ink    { color: var(--on-green-label); }
.eyebrow--flush  { margin-bottom: 0; }
.eyebrow--sm     { font-size: 10.5px; }

/* Mono-Label ohne Abstand darunter, etwa Quellenzeilen */
.mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.mono--ink { color: var(--on-green-faint); }

/* Versal-Label in Instrument Sans, Kartenköpfe */
.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.label--red { color: var(--red); }

/* Überschriften */
.h-hero, .h-section, .h-md, .h-sm {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.h-hero    { font-size: clamp(38px, 6.2vw, 82px); line-height: 0.96; max-width: 20ch; }
.h-section { font-size: clamp(30px, 4.4vw, 56px); }
.h-md      { font-size: clamp(28px, 4vw, 50px); }
.h-sm      { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.02; letter-spacing: -0.02em; }

/* Karten- und Blocküberschriften */
.h-card {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.h-card--lg { font-size: 24px; line-height: 1.08; }
.h-card--sm { font-size: 18px; line-height: 1.15; }
.h-sub      { font-size: 19px; font-weight: 600; line-height: 1.25; }
.h-sub--sm  { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.h-sub--xs  { font-size: 16px; font-weight: 600; }

/* Fließtext */
.lead {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 62ch;
  text-wrap: pretty;
}
.lead--sm { font-size: 16.5px; max-width: 70ch; }

.text     { font-size: 15px;   line-height: 1.6;  color: var(--mute); }
.text--lg { font-size: 15.5px; line-height: 1.7; }
.text--sm { font-size: 14.5px; line-height: 1.6; }
.text--xs { font-size: 12.5px; line-height: 1.55; color: var(--faint); }
.text--loose { line-height: 1.65; }

/* Kennzahl */
.stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green);
}
.stat--lg { font-size: 54px; }
.stat--sm { font-size: 34px; }

/* ---------- 5  Listen ---------------------------------------------------- */

/* Pfeilliste im Einstiegskasten */
.arrow-list { display: flex; flex-direction: column; gap: 14px; }
.arrow-list > li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
}
.arrow-list .marker { color: var(--red); }

/* Häkchenreihe unter dem Hero */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 14px;
  color: var(--mute);
}
.checks > li { display: flex; gap: 9px; }
.checks .marker { color: var(--green); }

/* Schlichte gestapelte Liste */
.stack     { display: flex; flex-direction: column; gap: 14px; }
.stack--sm { gap: 9px; }
.stack--lg { gap: 20px; }

/* ---------- 6  Raster ---------------------------------------------------- */

.grid { display: grid; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--sidebar { grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.grid--footer  { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }

/* Raster mit durchgehenden Haarlinien statt einzelner Zellränder.
   Der 1px-Spalt zeigt den Rasterhintergrund und bildet so die Trennlinie —
   bricht das Raster auf eine Spalte um, bleiben automatisch nur die
   waagerechten Linien übrig. */
.grid--hairline {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid--hairline > * { background: var(--cell-bg); padding: 34px 30px; }
.grid--hairline.is-roomy > * { padding: 38px 34px; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-all { grid-column: 1 / -1; }

/* ---------- 7  Flächen --------------------------------------------------- */

.card { background: var(--ink); padding: 32px 30px; }
.card--bordered { border: 1px solid var(--line); padding: 28px 26px; }
.card--red   { border: 1px solid var(--red); }
.card--green { border: 1px solid var(--green); }
.card--panel { background: var(--panel); border: 1px solid var(--line); padding: 22px 24px; }

/* Rot gerahmter Einstiegskasten */
.box-red { border: 1px solid var(--red); padding: 44px 40px; }
.box-green { border: 1px solid var(--green); padding: 38px 34px; }

/* Hervorgehobener Satz mit rotem Balken links */
.strip {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--ink);
  padding: 26px 28px;
}

/* Frage-und-Antwort-Liste */
.faq > div { border-top: 1px solid var(--line); padding: 26px 0; }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 16.5px; font-weight: 600; }
.faq p  { font-size: 14.5px; line-height: 1.65; color: var(--mute); margin-top: 12px; max-width: 86ch; }

/* Tabelle (Meldepflichten) */
.table-scroll { overflow-x: auto; background: var(--ink); }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 20px 24px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.table td:first-child { font-size: 15px; font-weight: 600; color: var(--paper); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

/* Notfallleiste ganz oben auf der Akutfall-Seite */
.alert-bar { background: var(--red); }
.alert-bar .wrap {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 8  Schaltflächen --------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 15px;
  padding: 19px 30px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { color: #fff; opacity: 0.92; }
.btn--dark { background: var(--ink); color: #fff; padding: 20px 34px; }
.btn--dark:hover { color: #fff; opacity: 0.88; }
.btn--ghost {
  background: none;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14.5px;
  padding: 18px 26px;
}
.btn--ghost:hover { background: var(--green); color: var(--ink); }
.btn--sm { font-size: 14.5px; padding: 18px 28px; }

/* Textlink mit Versalien, etwa „Mehr erfahren" */
.link-more {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

/* ---------- 9  Kopf & Navigation ----------------------------------------- */

.site-header { border-bottom: 1px solid var(--line); }
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(10px);
}
.header-row {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.header-row--slim { height: 70px; gap: 24px; }

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.logo .mark { color: var(--green); }

/* Rückweg und Direktdraht auf den Landingpages */
.header-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
  color: var(--mute);
}
.header-meta a { color: var(--mute); }
.header-meta .tel { font-weight: 600; color: var(--paper); }

.nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.nav a { color: var(--mute); }
.nav a:hover { color: var(--green); }

.menu { position: relative; }
.menu-btn {
  background: none;
  border: 0;
  font: inherit;
  color: var(--mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
}
.menu-btn:hover { color: var(--green); }
.menu-caret { font-size: 10px; display: inline-block; transition: transform 0.18s ease; }
.menu-btn[aria-expanded="true"] { color: var(--green); }
.menu-btn[aria-expanded="true"] .menu-caret { transform: rotate(180deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 26px);
  left: -18px;
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
  z-index: 40;
}
.menu-panel[hidden] { display: none; }
.menu-item { display: block; padding: 13px 16px; }
.menu-item:hover { background: var(--raise); }
.menu-item .title { display: block; font-weight: 600; font-size: 15px; color: var(--paper); }
.menu-item .desc  { display: block; font-size: 13.5px; color: var(--mute); line-height: 1.45; margin-top: 4px; }
.menu-sub { display: grid; padding: 2px 0 8px 16px; margin-left: 16px; border-left: 1px solid var(--line); }
.menu-sub a { padding: 9px 14px; font-size: 14px; color: var(--mute); }
.menu-sub a:hover { background: var(--raise); }

/* ---------- 10  Pfadzeile ------------------------------------------------ */

.crumbs { border-bottom: 1px solid var(--line); }
.crumbs .wrap {
  padding-top: 13px;
  padding-bottom: 13px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.crumbs a { color: var(--faint); }
.crumbs .current { color: var(--mute); }

/* ---------- 11  Kontaktblock --------------------------------------------- */
/* Ersetzt die früheren Formulare. Die Website verarbeitet keine Eingaben,
   der Kontakt läuft über Telefon und E-Mail. */

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }

.contact-card {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 34px 32px;
}
.contact-line { display: flex; flex-direction: column; gap: 4px; }
.contact-line + .contact-line { margin-top: 24px; }
.contact-line .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-line .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.contact-line .v:hover { color: var(--green); }
.contact-line .v--sm { font-size: 20px; }

/* ---------- 12  Fußzeile ------------------------------------------------- */

.site-footer { background: var(--ink); border-top: 1px solid var(--line); }
.site-footer .wrap {
  padding-top: 44px;
  padding-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer p { font-size: 14px; line-height: 1.7; color: var(--mute); }
.site-footer a { color: var(--mute); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }

/* Große Fußzeile der Startseite */
.footer-wide .wrap { padding-top: 64px; padding-bottom: 64px; display: block; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
.footer-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--mute); }

/* ---------- 13  Hilfsklassen --------------------------------------------- */

.t-mute   { color: var(--mute); }
.t-green  { color: var(--green); }
.t-red    { color: var(--red); }
.t-faint  { color: var(--faint); }
.t-paper  { color: var(--paper); }
.t-white  { color: #fff; }
.t-ink    { color: var(--ink); }
.t-on-green { color: var(--on-green); }
.t-on-green-strong { color: var(--on-green-strong); }
.t-on-red { color: var(--on-red); }
.t-strong { color: var(--paper); font-weight: 600; }
.t-green-strong { color: var(--green); font-weight: 600; }
.t-red-strong { color: var(--red); font-weight: 600; }
.t-underline { text-decoration: underline; }

.center { text-align: center; margin-left: auto; margin-right: auto; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-32 { margin-top: 32px; }
.mt-38 { margin-top: 38px; }
.mt-44 { margin-top: 44px; }
.mt-52 { margin-top: 52px; }
.mt-64 { margin-top: 64px; }
.mb-24 { margin-bottom: 24px; }

.mw-60 { max-width: 60ch; }
.mw-62 { max-width: 62ch; }
.mw-66 { max-width: 66ch; }
.mw-70 { max-width: 70ch; }
.mw-72 { max-width: 72ch; }
.mw-74 { max-width: 74ch; }
.mw-76 { max-width: 76ch; }
.mw-78 { max-width: 78ch; }
.mw-80 { max-width: 80ch; }
.mw-82 { max-width: 82ch; }
.mw-86 { max-width: 86ch; }
.mw-19c { max-width: 19ch; }
.mw-20c { max-width: 20ch; }
.mw-22c { max-width: 22ch; }
.mw-24c { max-width: 24ch; }
.mw-26c { max-width: 26ch; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.row--lg { gap: 28px; }

/* ---------- 14  Responsive ----------------------------------------------- */

@media (max-width: 1024px) {
  .nav { gap: 18px; font-size: 13.5px; }
}

@media (max-width: 980px) {
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--footer { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6,
  .grid--sidebar,
  .grid--footer,
  .contact-grid { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-all { grid-column: auto; }
  .h-hero { max-width: none; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --section-y: 64px; --section-lg: 68px; }
  .header-row { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 12px; }
  .nav { width: 100%; flex-wrap: wrap; gap: 16px; font-size: 13.5px; }
  .menu { position: static; }
  .menu-panel { position: static; width: 100%; margin-top: 10px; }
  .grid--hairline > * { padding: 26px 22px; }
  .box-red { padding: 30px 24px; }
  .contact-card { padding: 26px 22px; }
}

@media (max-width: 520px) {
  .h-hero { font-size: clamp(30px, 8.6vw, 44px); }
  .header-meta { flex-wrap: wrap; gap: 8px 16px; }
  .contact-line .v { font-size: 22px; }
}

/* ==========================================================================
   15  Hilfsklassen aus der Überführung
   Feinabstimmung einzelner Stellen. Für neue Seiten zuerst die benannten
   Klassen weiter oben verwenden — diese hier nur, wo wirklich eine
   Ausnahme nötig ist.
   ========================================================================== */

/* ---------- Ausrichtung und Anzeige ---------- */
.inline-row { display: flex; }
.items-baseline { align-items: baseline; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.rel { position: relative; }
.block { display: block; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }

/* ---------- Einzelne Bausteine ---------- */
.eyebrow--paper { color: var(--paper); }
.bg-ink { background: var(--ink); }
.bg-red { background: var(--red); }
.h-card--xs { font-size: 20px; }
.eyebrow--mute { color: var(--mute); }
.nav-cta {
  border: 1px solid var(--green); color: var(--green); border-radius: 4px;
  font-weight: 600; font-size: 13.5px; padding: 11px 20px;
}
.btn-label {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em;
}
.mono--th { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; }
.stat--md { font-size: 40px; }
.bordered { border: 1px solid var(--line); }
.cta-lead {
  font-size: 17px; line-height: 1.6; color: var(--on-red);
  margin-left: auto; margin-right: auto;
}
.text--14 { font-size: 14px; line-height: 1.7; color: var(--mute); }
.eyebrow--16 { letter-spacing: 0.16em; }
.mono--16 { font-weight: 500; letter-spacing: 0.16em; }
.h-sub--17 { font-size: 17px; font-weight: 600; color: var(--paper); }
.h-sub--18 { font-size: 18px; font-weight: 600; }

/* ---------- Aussenabstand oben ---------- */
.mt-4 { margin-top: 4px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }

/* ---------- Aussenabstand unten ---------- */
.mb-20 { margin-bottom: 20px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-40 { margin-bottom: 40px; }

/* ---------- Spaltenabstand ---------- */
.gap-4 { gap: 4px; }
.gap-9 { gap: 9px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-20-40 { gap: 20px 40px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
.gap-26 { gap: 26px; }
.gap-28 { gap: 28px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-44 { gap: 44px; }
.gap-48 { gap: 48px; }

/* ---------- Innenabstand ---------- */
.p-9-14 { padding: 9px 14px; }
.py-13 { padding-top: 13px; padding-bottom: 13px; }
.p-13-16 { padding: 13px 16px; }
.py-14 { padding-top: 14px; padding-bottom: 14px; }
.p-18-24 { padding: 18px 24px; }
.p-18-28 { padding: 18px 28px; }
.p-19-26 { padding: 19px 26px; }
.p-19-30 { padding: 19px 30px; }
.p-20-24 { padding: 20px 24px; }
.p-20-32 { padding: 20px 32px; }
.p-20-34 { padding: 20px 34px; }
.p-22-24 { padding: 22px 24px; }
.p-26-28 { padding: 26px 28px; }
.p-28-26 { padding: 28px 26px; }
.p-30-28 { padding: 30px 28px; }
.p-32-30 { padding: 32px 30px; }
.p-34-30 { padding: 34px 30px; }
.py-36 { padding-top: 36px; padding-bottom: 36px; }
.p-36-32 { padding: 36px 32px; }
.p-38-34 { padding: 38px 34px; }
.py-44 { padding-top: 44px; padding-bottom: 44px; }
.p-44-40 { padding: 44px 40px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }

/* ---------- Schriftgrad und -schnitt ---------- */
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; }
.fs-19 { font-size: 19px; }
.fs-135 { font-size: 13.5px; }
.fs-145 { font-size: 14.5px; }
.fs-155 { font-size: 15.5px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ---------- Zeilenhoehe ---------- */
.lh-15 { line-height: 1.5; }
.lh-145 { line-height: 1.45; }
.lh-155 { line-height: 1.55; }

/* ---------- Zeilenhöhen zuletzt, damit sie Textklassen überschreiben ---------- */
.text--relaxed { line-height: 1.7; }
.text--snug { line-height: 1.55; }
.text--tight { line-height: 1.6; }

/* ---------- Nachtrag aus der Feinbereinigung ---------- */
.th-34 { width: 34%; }
.gap-12-28 { gap: 12px 28px; }
.pb-96 { padding-bottom: 96px; }
.no-rule-top { border-top: 0; }
.radius-4 { border-radius: 4px; }