/* Manuel Kerstan — Web-Visitenkarte (PROJ-5)
   Der Token-Block unten wird zur Bauzeit aus src/tokens.py eingesetzt.
   Diese Datei nicht in dist/ bearbeiten, sondern hier.

   Alle drei Layout-Richtungen liegen in dieser Datei. Ausgeliefert wird immer
   nur eine Fassung der Seite; die ungenutzten Regeln kosten wenige hundert Byte
   und ersparen weitere Dateien, die auseinanderlaufen koennen. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Markenpalette */
  --navy-900: #0A0F2F;
  --navy-800: #111838;
  --navy-700: #1A2450;
  --navy-600: #24306B;
  --azure-600: #1D4FD8;
  --azure-500: #2563EB;
  --azure-400: #4F7BF0;
  --azure-100: #DBE5FD;
  --azure-50: #EEF3FE;
  --sky-500: #38BDF6;
  --sky-400: #6BCFF9;
  --sky-100: #D6F1FD;
  --sky-50: #EBF8FE;
  --yellow-500: #E9A812;
  --yellow-400: #FABB22;
  --yellow-100: #FDEFCB;
  --yellow-50: #FEF8E9;
  /* Neutrale Toene */
  --ink-900: #0F1424;
  --ink-700: #2E3550;
  --ink-500: #5A6178;
  --ink-400: #838A9E;
  --gray-300: #C9CDD9;
  --gray-200: #DFE2EA;
  --gray-100: #EFF1F5;
  --gray-50: #F7F8FA;
  /* Weiss */
  --white: #FFFFFF;
  /* Semantik */
  --surface-page: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-900);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-inverse: #F4F6FB;
  --text-inverse-muted: #9AA3C0;
  --heading: var(--navy-900);
  --accent: var(--azure-500);
  --accent-hover: var(--azure-600);
  --accent-2: var(--sky-500);
  --accent-2-hover: #1FA9E6;
  --highlight: var(--yellow-400);
  --link: var(--azure-500);
  --link-hover: var(--azure-600);
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--azure-500);
  /* Typografie */
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: clamp(28px, 4vw, 36px);
  --fs-3xl: clamp(28px, 5vw, 46px);
  --fs-4xl: clamp(30px, 7.2vw, 58px);
  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.6;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;
  --tracking-wordmark: 0.22em;
  /* Abstaende */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --container-max: 1120px;
  --content-max: 680px;
  /* Formen und Effekte */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(12,30,51,.06), 0 4px 12px rgba(12,30,51,.05);
  --shadow-soft: 0 2px 6px rgba(12,30,51,.04), 0 12px 32px rgba(12,30,51,.08);
  --focus-ring: 0 0 0 3px rgba(37,99,235,.45);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --gradient-brand: linear-gradient(90deg, var(--navy-900) 0%, var(--azure-500) 35%, var(--sky-500) 70%, var(--yellow-400) 100%);
  --gradient-brand-diag: linear-gradient(135deg, var(--navy-900) 0%, var(--azure-500) 50%, var(--yellow-400) 100%);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--sp-7) var(--sp-4);
  background: var(--gray-100);
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  /* Silbentrennung bleibt hier bewusst aus: Auf breiten Bildschirmen ist Platz
     genug, und eine getrennte Zeile in der Kernaussage sieht nach Panne aus.
     Auf schmalen Bildschirmen wird sie weiter unten zugeschaltet, wo deutsche
     Komposita sonst ueber den Rand laufen. */
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-weight: var(--fw-bold); }

p { margin: 0; text-wrap: pretty; }
dl, dd { margin: 0; }
address { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--azure-100); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-4) * -4);
  z-index: 10;
  background: var(--navy-900);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--sp-4); color: #fff; text-decoration: none; }

/* --- Gemeinsame Bausteine ----------------------------------------------- */
.card {
  margin: 0 auto;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.eyebrow {
  font: var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.lead { color: var(--ink-700); }

.rule { display: block; height: 2px; width: 28px; background: var(--accent); }
.rule-azure  { background: var(--azure-500); }
.rule-sky    { background: var(--sky-500); }
.rule-yellow { background: var(--yellow-400); }

.btn {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 13px 28px;
  font: var(--fw-semibold) var(--fs-base)/1 var(--font-body);
  color: #fff;
  text-align: center;
  transition: background-color var(--dur-med) var(--ease-out);
}
.btn:hover { color: #fff; text-decoration: none; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-navy { background: var(--navy-900); }
.btn-navy:hover { background: var(--accent); }

.leistung dt {
  font: var(--fw-semibold) var(--fs-base)/1.4 var(--font-body);
  color: var(--heading);
}
.leistung dd {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  color: var(--ink-700);
}

/* --- Pflichtangaben ----------------------------------------------------- */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.legal-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.legal-title {
  font: var(--fw-semibold) var(--fs-xs)/var(--lh-snug) var(--font-body);
  letter-spacing: normal;
  color: var(--ink-700);
}
.legal address, .legal p {
  font: var(--fw-regular) var(--fs-xs)/1.6 var(--font-body);
  color: var(--text-muted);
}
.legal-copy { margin-top: var(--sp-2); }

.legal-details { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-4); }
.legal-details summary {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.legal-details summary::-webkit-details-marker { display: none; }
.legal-details summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.legal-details[open] summary::before { transform: rotate(90deg); }
.legal-details summary:hover { color: var(--link-hover); }
.legal-details .legal-grid { margin-top: var(--sp-4); }

/* --- Variante a: editorial geteilt -------------------------------------- */
.card-a { max-width: 960px; }

/* Die Verlaufskanten liegen ausserhalb des Rasters, damit sie ueber beide
   Spalten laufen und die Karte oben und unten einfassen. */
.card-a .card-edge { height: 6px; background: var(--gradient-brand); }

.card-a-grid {
  display: grid;
  grid-template-columns: 328px 1fr;
}

.card-a .card-aside {
  background: var(--surface-inverse);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  /* Ohne Portraet traegt die Navy-Spalte nur noch drei Bloecke. `space-between`
     verteilt die freie Hoehe gleichmaessig, statt sie als eine grosse Luecke
     zwischen Aussage und Kontakt stehen zu lassen. */
  justify-content: space-between;
  gap: var(--sp-7);
}
/* Name und Taetigkeit gehoeren zusammen und bilden einen Block. Die freie Hoehe
   entsteht dadurch zwischen Identitaet oben und Kontakt unten — zwei Ankern
   statt drei schwebenden Bloecken. */
.card-a .aside-head { display: flex; flex-direction: column; gap: var(--sp-6); }
.card-a .aside-logo { width: 196px; }
/* Ersetzt das weisse Logo im Ausdruck. Auf dem Bildschirm traegt das Logo die
   Marke, auf Papier dieser Text — siehe Druckregeln am Dateiende. */
.print-wordmark { display: none; }
.card-a .aside-tagline { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Rein dekorativ. `flex: none` verhindert, dass die Gruppe von der
   Hoehenverteilung des Flex-Containers gestaucht wird. */
.card-a .aside-figure {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.card-a .aside-bricks {
  width: 196px;
  height: auto;
}
.card-a .aside-claim {
  font: var(--fw-semibold) var(--fs-md)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
  max-width: 16ch;
}
.card-a .aside-tagline .rule { width: 44px; }
.card-a .aside-tagline p {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  color: var(--text-inverse-muted);
  max-width: 24ch;
}
.card-a .aside-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
}
.card-a .aside-contact a { color: var(--text-inverse); }
.card-a .aside-contact a:hover { color: var(--sky-400); }
.card-a .aside-place { color: var(--text-inverse-muted); }

.card-a .card-body {
  padding: 48px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.card-a .card-intro { display: flex; flex-direction: column; gap: var(--sp-4); }
.card-a h1 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  max-width: 22ch;
}
.card-a .lead { max-width: 52ch; }

.card-a .leistungen-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}
.card-a .leistung {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.card-a .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-top: auto;
}
.card-a .cta-note {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  color: var(--text-muted);
}

/* --- Variante b: Statement zuerst --------------------------------------- */
.card-b { max-width: 760px; }

.card-b .card-edge { height: 6px; background: var(--gradient-brand); }

.card-b .card-body {
  padding: 52px 52px 44px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.card-b .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
}
.card-b .top-logo { width: 300px; }
/* Nimmt den Platz ein, den vorher das Portraet hielt, und traegt dabei eine
   Information statt eines Bildes. */
.card-b .top-tagline {
  font: var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}

.card-b .card-intro { display: flex; flex-direction: column; gap: var(--sp-4); }
.card-b h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  max-width: 20ch;
}
.card-b .lead {
  font-size: var(--fs-md);
  max-width: 56ch;
}

.card-b .leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.card-b .leistung {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 22px var(--sp-5);
  border-right: 1px solid var(--border-subtle);
}
.card-b .leistung:first-child { padding-left: 0; }
.card-b .leistung:last-child { padding-right: 0; border-right: none; }
.card-b .leistung dd { font-size: var(--fs-xs); }

.card-b .card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.card-b .foot-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
}
.card-b .foot-mail { color: var(--heading); font-weight: var(--fw-semibold); }
.card-b .foot-contact a:not(.foot-mail) { color: var(--text-muted); }
.card-b .foot-contact a:hover { color: var(--link-hover); }
.card-b .foot-place { color: var(--text-muted); }

.card-b .legal-band {
  background: var(--surface-inverse);
  padding: 26px 52px;
}
.card-b .legal-band .legal-title { color: var(--text-inverse); }
.card-b .legal-band address,
.card-b .legal-band p { color: var(--text-inverse-muted); }
.card-b .legal-band a { color: var(--text-inverse); }
.card-b .legal-band a:hover { color: var(--sky-400); }

/* --- Variante c: nur Kontakt ---------------------------------------------
   Die ganze Karte liegt auf Navy. Sie hat keine zweite Spalte, an der sich
   eine Flaeche ausrichten muesste, und traegt deshalb die Marke selbst. */
.card-c {
  max-width: 560px;
  background: var(--surface-inverse);
  border-color: transparent;
}
.card-c .card-edge { height: 6px; background: var(--gradient-brand); }

.card-c .card-body {
  padding: 48px 52px 40px;
  display: flex;
  flex-direction: column;
  /* Enger als in a und b: Die Karte zeigt wenig, und grosszuegige Abstaende
     zwischen wenigen Bloecken lassen sie leer wirken statt ruhig. */
  gap: var(--sp-6);
}

.card-c .c-logo { width: 240px; }

.card-c .card-intro { display: flex; flex-direction: column; gap: var(--sp-4); }
.card-c .card-intro .rule { width: 44px; }
.card-c h1 {
  color: var(--text-inverse);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  max-width: 20ch;
}
.card-c .lead {
  color: var(--text-inverse-muted);
  font-size: var(--fs-md);
  max-width: 40ch;
}

.card-c .c-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-body);
}
.card-c .c-contact a { color: var(--text-inverse); }
.card-c .c-contact a:hover { color: var(--sky-400); }
.card-c .c-mail { font-weight: var(--fw-semibold); }
.card-c .c-place {
  color: var(--text-inverse-muted);
  font-size: var(--fs-sm);
}

.card-c .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.card-c .cta-note {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  color: var(--text-inverse-muted);
}

.card-c .legal-band {
  background: var(--surface-inverse);
  padding: 26px 52px 32px;
  /* Die Karte ist durchgehend navy — ohne Linie liefe der Fuss in den Inhalt. */
  border-top: 1px solid rgba(255, 255, 255, .14);
}
/* Die Karte ist schmal. Zwei Spalten pressen den Datenschutzhinweis auf
   Wortbreite; einspaltig liest er sich. */
.card-c .legal-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.card-c .legal-band .legal-title { color: var(--text-inverse); }
.card-c .legal-band address,
.card-c .legal-band p { color: var(--text-inverse-muted); }
.card-c .legal-band a { color: var(--text-inverse); }
.card-c .legal-band a:hover { color: var(--sky-400); }

/* --- Schmale Anzeigen ---------------------------------------------------
   Umbruchpunkte richten sich nach dem Inhalt, nicht nach Geraeteklassen:
   Ab hier reissen die mehrspaltigen Raster den Satz auseinander. */

@media (max-width: 860px) {
  .card-a-grid { grid-template-columns: 1fr; }
  /* Einspaltig gibt es keine zweite Spalte, an deren Hoehe sich die Navy-Flaeche
     ausrichten muesste. Der Inhalt bestimmt sie jetzt selbst. */
  .card-a .card-aside {
    padding: var(--sp-6) var(--sp-5);
    justify-content: flex-start;
    gap: var(--sp-6);
  }
  .card-a .card-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }

  .card-b .card-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .card-b .legal-band { padding: var(--sp-5); }

  .card-c .card-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .card-c .legal-band { padding: var(--sp-5); }
  .card-b .leistungen-grid { grid-template-columns: 1fr; }
  .card-b .leistung {
    padding: var(--sp-4) 0;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .card-b .leistung:last-child { border-bottom: none; }
}

@media (max-width: 620px) {
  body { padding: var(--sp-4) var(--sp-3); }
  .card { border-radius: var(--radius-xl); }

  /* Ab hier ist der Satzspiegel schmaler als das laengste deutsche Kompositum
     der Ueberschriften. Jetzt ist Trennen das kleinere Uebel. */
  h1, h2 { hyphens: auto; }

  .card-a .leistung { grid-template-columns: 1fr; gap: var(--sp-2); }

  .card-b .card-top { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .card-b .top-logo { width: min(260px, 100%); }
  .card-b .top-tagline { text-align: left; }

  .legal-grid { grid-template-columns: 1fr; }
}

/* --- Bewegung ------------------------------------------------------------
   Diese Seite animiert nichts; die einzigen Uebergaenge liegen auf
   Schaltflaechen- und Aufklapp-Zustaenden. Die Regel steht trotzdem: Sie ist
   die Zusage, dass eine spaetere Ergaenzung sie nicht umgeht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Druck ---------------------------------------------------------------
   Ziel ist ein Schwarz-Weiss-Laserdrucker. Navy-Flaechen wuerden als grauer
   Block drucken, Toner kosten und die Lesbarkeit senken — deshalb werden sie
   fuer den Druck auf Weiss zurueckgesetzt. Die Hierarchie traegt dann ueber
   Schriftgrad und Linien, nicht ueber Farbe. */
@media print {
  @page { margin: 14mm; }

  body {
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .skip-link { display: none; }

  .card {
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .card-a-grid { display: block; }
  .card-a .card-aside,
  .card-b .legal-band,
  .card-c,
  .card-c .legal-band {
    background: #fff;
    padding: 0 0 var(--sp-4);
    border-bottom: 1px solid #000;
  }
  .card-c .legal-band { border-top: 1px solid #000; padding-top: var(--sp-4); }
  .card-a .card-body,
  .card-b .card-body,
  .card-c .card-body { padding: var(--sp-5) 0 0; }

  /* Auf Papier wird jede Navy-Flaeche weiss. Alles, was darauf hell gesetzt
     war, muss deshalb auf Schwarz zurueck — sonst steht Weiss auf Weiss. */
  .card-a .aside-contact a,
  .card-a .aside-place,
  .card-a .aside-tagline p,
  .card-a .aside-claim,
  .card-a .cta-note,
  .card-b .legal-band .legal-title,
  .card-b .legal-band address,
  .card-b .legal-band p,
  .card-b .legal-band a,
  .card-c h1,
  .card-c .lead,
  .card-c .c-contact a,
  .card-c .c-place,
  .card-c .cta-note,
  .card-c .legal-band .legal-title,
  .card-c .legal-band address,
  .card-c .legal-band p,
  .card-c .legal-band a { color: #000; }

  /* Das weisse Logo waere auf Papier unsichtbar. In Variante b steht ohnehin
     die dunkle Fassung; in a tritt der Wortlaut aus content/card.json an seine
     Stelle. Der Text steht im Markup, nicht in dieser Datei. */
  .card-a .aside-logo,
  .card-c .c-logo { display: none; }
  .print-wordmark {
    display: block;
    font: var(--fw-bold) var(--fs-lg)/var(--lh-snug) var(--font-display);
    color: #000;
  }

  .card-a .card-edge,
  .card-b .card-edge,
  .card-c .card-edge,
  .card-a .aside-figure { display: none; }

  a { color: #000; text-decoration: underline; }
  .btn {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
    padding: 8px 16px;
  }

  /* Eingeklappte Pflichtangaben duerfen im Ausdruck nicht fehlen. Die beiden
     Regeln decken die alte und die neue Browser-Umsetzung von <details> ab. */
  .legal-details > *:not(summary) { display: block !important; }
  .legal-details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  .legal-details summary::before { display: none; }

  .card-intro, .leistung, .legal-col { break-inside: avoid; }
}