/*
 * Wissen · Glade Negotiation Institute (www.glade-institut.de)
 * Eigenständige Stildatei für die statischen Seiten unter /wissen/.
 * Farben, Schrift, Maße und Abstände stammen aus der Website
 * (src/index.css, tailwind.config.ts, Header.tsx, Footer.tsx, Stand 12.10.2026).
 * Kein JavaScript, kein Tailwind zur Laufzeit, keine Datei aus dem Bau der Website.
 */

/* 1 Grundwerte ---------------------------------------------------------- */
:root {
  color-scheme: light;
  --grund: hsl(220 20% 97%);            /* --background */
  --text: hsl(220 30% 10%);             /* --foreground */
  --fliess: hsl(220 30% 10% / .84);     /* Fließtext, aus --foreground abgeleitet */
  --leise: hsl(220 10% 45%);            /* --muted-foreground */
  --karte: #fff;                        /* --card */
  --linie: hsl(220 15% 88%);            /* --border */
  --marine: hsl(220 40% 13%);           /* --primary, Fußzeile */
  --nacht: hsl(224 55% 16%);            /* --hero-bg */
  --beige: hsl(35 20% 94%);             /* --secondary */
  --gedeckt: hsl(35 15% 92%);           /* --muted */
  --gold: hsl(42 92% 56%);              /* --accent */
  --hell: hsl(0 0% 98%);                /* --hero-foreground */
  --hell-leise: hsl(220 20% 70%);       /* --hero-muted */
  --verlauf-dunkel: linear-gradient(180deg, hsl(224 55% 14%) 0%, hsl(224 50% 18%) 50%, hsl(224 45% 22%) 100%);
  --verlauf-kasten: linear-gradient(135deg, hsl(224 55% 14%) 0%, hsl(224 50% 20%) 100%);
  --verlauf-gold: linear-gradient(to right, #f59e0b, #facc15, #fcd34d);
  --schatten-karte: 0 2px 20px -5px hsl(220 30% 10% / .08);
  --schatten-hoch: 0 20px 60px -15px hsl(220 30% 10% / .15);
  --spalte: 37rem;
  --kiste: 80rem;
  --rand: 1rem;
  --z-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --z-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --z-pfeil-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --z-pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --z-menue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M4 6h16M4 18h16'/%3E%3C/svg%3E");
  --z-schliessen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --z-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Cpath d='M2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

/* 2 Grundlage ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
.seitenkopf :focus-visible, .seitenfuss :focus-visible, .wissenskopf :focus-visible,
.beitragskopf :focus-visible, .checkliste :focus-visible { outline-color: var(--gold); }

.kiste { width: 100%; max-width: var(--kiste); margin-inline: auto; padding-inline: var(--rand); }
.spalte { width: 100%; max-width: calc(var(--spalte) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.sprungverweis {
  position: absolute; left: 1rem; top: -6rem; z-index: 100;
  padding: .75rem 1.25rem; border-radius: .375rem;
  font-weight: 600; color: hsl(220 40% 10%); background: var(--gold);
}
.sprungverweis:focus { top: 1rem; outline-color: #fff; }

/* Zeichen (Lucide, wie auf der Website) als Maske in der Textfarbe */
.zeichen {
  display: inline-block; flex: none; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--z) center / contain no-repeat;
  mask: var(--z) center / contain no-repeat;
}
.zeichen-post { --z: var(--z-post); }
.zeichen-telefon { --z: var(--z-telefon); }
.zeichen-pfeil-unten { --z: var(--z-pfeil-unten); }
.zeichen-pfeil-rechts { --z: var(--z-pfeil-rechts); }
.zeichen-menue { --z: var(--z-menue); }
.zeichen-linkedin { --z: var(--z-linkedin); }

/* Knopf: Variante „hero“ der Website (goldener Verlauf mit Schein) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; max-width: 100%; padding: .5rem 1rem;
  border: 1px solid rgb(253 224 71 / .4); border-radius: .375rem;
  font-size: .875rem; font-weight: 500; line-height: 1.25rem; text-align: center; text-decoration: none;
  color: #451a03; background: var(--verlauf-gold);
  box-shadow: 0 0 20px hsl(45 95% 55% / .5);
  transition: box-shadow .3s, transform .3s, filter .3s;
}
.knopf:hover { box-shadow: 0 0 35px hsl(45 95% 55% / .7); transform: scale(1.03); filter: brightness(1.1); }
.knopf-gross { min-height: 3.5rem; padding: .75rem 1.5rem; border-radius: .5rem; font-size: 1rem; line-height: 1.5rem; }
.knopf-gross .zeichen { font-size: 1.25rem; }

/* 3 Seitenkopf ---------------------------------------------------------- */
.seitenkopf {
  position: sticky; top: -2.5rem; z-index: 50;
  margin-bottom: calc(-7rem - 1px);   /* liegt wie im Original über dem dunklen Seitenanfang */
  color: #fff;
}
.kopf-innen { max-width: 1400px; margin-inline: auto; padding-inline: 1.5rem; }
.kopfleiste { height: 2.5rem; border-bottom: 1px solid rgb(255 255 255 / .06); }
.kopfleiste .kopf-innen { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; height: 100%; font-size: .75rem; line-height: 1rem; }
.kopfleiste a { display: flex; align-items: center; gap: .375rem; color: rgb(255 255 255 / .55); transition: color .15s; }  /* Original 40 %, für den Kontrast angehoben */
.kopfleiste a:hover { color: rgb(255 255 255 / .85); }
.kopfleiste .zeichen { font-size: .875rem; }
.kopfleiste a span:not(.zeichen) { display: none; }

.kopfzeile {
  position: relative;
  background: rgb(12 26 51 / .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / .04);
}
.kopfzeile .kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.wortmarke { display: flex; align-items: center; flex: none; }
.wortmarke img { width: auto; height: 3rem; }

.menue-breit, .kopf-knopf { display: none; }
.kopf-knopf { min-height: 2.25rem; padding: 0 1.25rem; border-radius: 9999px; font-size: .8125rem; white-space: nowrap; }

/* Klappmenü (Handy und Tablet) */
.menue-schmal > details > summary {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: rgb(255 255 255 / .7); transition: color .15s;
}
.menue-schmal > details > summary:hover { color: #fff; }
.menue-schmal > details > summary .zeichen { font-size: 1.5rem; }
.menue-schmal > details[open] > summary .zeichen { --z: var(--z-schliessen); }
.menue-flaeche {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1.5rem 1.5rem;
  background: #0c1a33;             /* im Original 95 % mit Weichzeichner, hier deckend */
  border-top: 1px solid rgb(255 255 255 / .06);
}
.menue-flaeche > a:not(.knopf), .menue-flaeche details > summary {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .25rem; padding: .625rem .25rem;
  font-size: 1rem; line-height: 1.5rem; color: rgb(255 255 255 / .6); transition: color .15s;
}
.menue-flaeche > a:first-child, .menue-flaeche > details:first-child > summary { margin-top: 0; }
.menue-flaeche > a:not(.knopf):hover, .menue-flaeche details > summary:hover { color: #fff; }
.menue-flaeche a[aria-current] { color: #fff; }
.menue-flaeche summary .zeichen { transition: transform .2s; }
.menue-flaeche details[open] > summary .zeichen { transform: rotate(180deg); }
.menue-unter { margin: .25rem 0 0 .5rem; padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .08); }
.menue-unter a { display: block; margin-top: .125rem; padding: .5rem .75rem; font-size: .875rem; line-height: 1.25rem; color: rgb(255 255 255 / .5); transition: color .15s; }
.menue-unter a:first-child { margin-top: 0; }
.menue-unter a:hover { color: #fff; }
.menue-flaeche > .knopf { display: flex; width: 100%; margin-top: 1rem; border-radius: 9999px; }

/* 4 Dunkler Seitenanfang (wie die Unterseiten der Website) --------------- */
.wissenskopf, .beitragskopf {
  position: relative; overflow: hidden;
  color: var(--hell); background: var(--verlauf-dunkel);
}
/* Ruhende Fassung des bewegten Lichts aus AnimatedBackground.tsx */
.wissenskopf::before, .beitragskopf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40rem 40rem at 100% 0%, hsl(42 92% 60% / .07), transparent 70%),
    radial-gradient(36rem 36rem at 0% 100%, hsl(210 80% 60% / .06), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / .014), transparent 50%);
}
.wissenskopf > *, .beitragskopf > * { position: relative; }

.wissenskopf { padding: 9rem 0 5rem; }
.wissenskopf-text { max-width: 48rem; }
.wissenskopf h1 { margin-bottom: 1.5rem; font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.wissenskopf p { font-size: 1.125rem; line-height: 1.625; color: var(--hell-leise); }

.beitragskopf { padding: 9rem 0 8rem; }
.beitragskopf:not(:has(+ .beitragsrumpf figure)) { padding-bottom: 4rem; }
.brotkrume ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.25rem; color: var(--hell-leise); }
.brotkrume li + li::before { content: "/"; margin-right: .5rem; color: rgb(255 255 255 / .3); }
.brotkrume a { transition: color .15s; }
.brotkrume a:hover { color: var(--gold); }
.beitragskopf .meta {
  margin-top: 2rem;
  font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.meta-autor { color: var(--hell-leise); }
.meta-autor::before { content: "·"; margin: 0 .625rem; color: rgb(255 255 255 / .3); }
.beitragskopf h1 { margin-top: 1rem; font-size: 1.75rem; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.beitragskopf .einleitung { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--hell-leise); }

/* 5 Beitrag -------------------------------------------------------------- */
.beitragsrumpf { padding-bottom: 4rem; }
.beitragsbild { position: relative; z-index: 1; }
.beitragsbild figure {
  margin: -4rem 0 0;
  border-radius: .75rem; overflow: hidden;
  background: var(--nacht); box-shadow: var(--schatten-hoch);
}
.beitragsbild img { width: 100%; }

.beitrag {
  container-type: inline-size;
  margin-top: 3rem;
  font-size: 1.0625rem; line-height: 1.75; color: var(--fliess);
  overflow-wrap: break-word;
}
.beitrag > :first-child { margin-top: 0; }
.beitrag > :last-child { margin-bottom: 0; }
.beitrag p { margin: 0 0 1.5em; }
.beitrag h2 { margin: 3.5rem 0 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.beitrag h3 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; line-height: 1.4; color: var(--text); }
.beitrag h4 { margin: 2rem 0 .5rem; font-size: 1.0625rem; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }
.beitrag h2 + h3, .beitrag h3 + h4 { margin-top: 1.25rem; }
.beitrag strong { font-weight: 600; color: var(--text); }
.beitrag a {
  font-weight: 500; color: var(--marine);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .22em;
  transition: background-color .15s;
}
.beitrag a:hover { background-color: hsl(42 92% 56% / .22); }
.beitrag code { padding: .125em .375em; border-radius: .25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; background: var(--gedeckt); }
.beitrag pre { margin: 0 0 1.5em; padding: 1rem 1.25rem; overflow-x: auto; border-radius: .5rem; font-size: .875em; line-height: 1.6; background: var(--gedeckt); }
.beitrag pre code { padding: 0; font-size: 1em; background: none; }
.beitrag hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--linie); }

.beitrag ul, .beitrag ol { margin: 0 0 1.5em; }
.beitrag li { position: relative; margin-top: .625em; padding-left: 1.75em; }
.beitrag li:first-child { margin-top: 0; }
.beitrag li > ul, .beitrag li > ol { margin: .625em 0 0; }
.beitrag ul > li::before {
  content: ""; position: absolute; left: .375em; top: .72em;
  width: .375rem; height: .375rem; border-radius: 50%; background: var(--gold);
}
.beitrag ol { counter-reset: schritt; }
.beitrag ol > li { counter-increment: schritt; padding-left: 2.25em; }
.beitrag ol > li::before {
  content: counter(schritt); position: absolute; left: 0; top: .2em;
  display: flex; align-items: center; justify-content: center;
  width: 1.625em; height: 1.625em; border-radius: 50%;
  font-size: .8125em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--hell); background: var(--marine);
}

/* Kästen: blockquote mit fettem Titel in der ersten Zeile */
.beitrag blockquote {
  margin: 2.5rem 0; padding: 1.5rem;
  border: 1px solid var(--linie); border-radius: .75rem;
  background: var(--karte); box-shadow: var(--schatten-karte);
}
.beitrag blockquote::before { content: ""; display: block; width: 3rem; height: .25rem; margin-bottom: 1rem; border-radius: 9999px; background: var(--gold); }
.beitrag blockquote p { margin-bottom: .75em; }
.beitrag blockquote > :last-child { margin-bottom: 0; }
.beitrag blockquote > p:first-of-type > strong:only-child { display: block; font-size: 1.0625rem; letter-spacing: -.01em; }

/* Tabellen: eigener Rahmen, rollen seitlich, wenn sie nicht passen */
.beitrag table {
  display: block; width: fit-content; max-width: 100%; overflow-x: auto;
  margin: 2.5rem 0; border-collapse: collapse; border-spacing: 0;
  border: 1px solid var(--linie); border-radius: .75rem;
  font-size: .9375rem; line-height: 1.55; background: var(--karte);
  -webkit-overflow-scrolling: touch;
}
.beitrag th, .beitrag td { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; min-width: 8.5rem; padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.beitrag th { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--hell); background: var(--marine); border-bottom: 0; }
.beitrag tbody tr:last-child td { border-bottom: 0; }
.beitrag tbody tr:nth-child(even) td { background: hsl(220 20% 97% / .7); }
.beitrag td:first-child { font-weight: 500; color: var(--text); }
/* Bis vier Spalten füllen die volle Breite, sofern das Gerät es kann */
@supports (width: 1cqw) {
  .beitrag table:has(tr > :nth-child(1):last-child) :is(th, td) { width: calc(100cqw - 2px); }
  .beitrag table:has(tr > :nth-child(2):last-child) :is(th, td) { width: calc((100cqw - 2px) / 2); }
  .beitrag table:has(tr > :nth-child(3):last-child) :is(th, td) { width: calc((100cqw - 2px) / 3); }
  .beitrag table:has(tr > :nth-child(4):last-child) :is(th, td) { width: calc((100cqw - 2px) / 4); }
}

/* Kasten zur Checkliste */
.checkliste {
  position: relative; overflow: hidden;
  margin-top: 3.5rem; padding: 2rem 1.5rem;
  border-radius: 1rem; color: var(--hell); background: var(--verlauf-kasten);
}
.checkliste::before {
  content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%;
  background: radial-gradient(circle, hsl(42 92% 56% / .16), transparent 70%); pointer-events: none;
}
.checkliste > * { position: relative; }
.checkliste h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.checkliste h2::before { content: ""; display: block; width: 3rem; height: .25rem; margin-bottom: 1.25rem; border-radius: 9999px; background: var(--gold); }
.checkliste p { margin-top: 1.5rem; }
.checkliste .knopf { min-height: 3rem; padding: .625rem 1.5rem; font-size: 1rem; line-height: 1.5rem; }

/* Weitere Beiträge */
.verwandte { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.verwandte h2 { font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.verwandte ul { margin-top: .75rem; }
.verwandte li { border-bottom: 1px solid var(--linie); }
.verwandte a {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
  transition: color .15s;
}
.verwandte a::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem;
  background-color: var(--gold);
  -webkit-mask: var(--z-pfeil-rechts) center / contain no-repeat; mask: var(--z-pfeil-rechts) center / contain no-repeat;
  transition: transform .2s;
}
.verwandte a:hover { color: hsl(220 40% 13% / .7); }
.verwandte a:hover::after { transform: translateX(.25rem); }

.zurueck { margin-top: 2rem; font-size: .9375rem; }
.zurueck a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--leise); transition: color .15s; }
.zurueck a::before {
  content: ""; width: 1rem; height: 1rem; background-color: currentColor; transform: rotate(180deg);
  -webkit-mask: var(--z-pfeil-rechts) center / contain no-repeat; mask: var(--z-pfeil-rechts) center / contain no-repeat;
}
.zurueck a:hover { color: var(--text); }

/* 6 Liste ---------------------------------------------------------------- */
.wissensliste { padding: 3.5rem 0 4rem; }
.beitragsliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.beitragsliste:empty::before { content: "Hier erscheinen in Kürze die ersten Beiträge."; color: var(--leise); }
.beitragskarte {
  position: relative; display: flex; flex-direction: column;
  padding-bottom: 1.5rem; overflow: hidden;
  border: 1px solid var(--linie); border-radius: .75rem;
  background: var(--karte); box-shadow: var(--schatten-karte);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.beitragskarte:hover { transform: translateY(-.25rem); box-shadow: var(--schatten-hoch); border-color: hsl(220 40% 13% / .25); }
.beitragskarte:focus-within { border-color: var(--marine); }
.beitragskarte > a:first-child { display: block; background: var(--nacht); }
.beitragskarte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Karte ohne Bild: dunkle Fläche mit der Wortmarke */
.beitragskarte:not(:has(img))::before {
  content: ""; display: block; aspect-ratio: 16 / 9;
  background: url("/wissen/gni-logo-white.svg") center / 42% auto no-repeat, var(--verlauf-kasten);
}
.beitragskarte time {
  margin: 1.5rem 1.5rem 0;
  font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise);
}
.beitragskarte h2 { margin: .625rem 1.5rem 0; font-size: 1.25rem; line-height: 1.3; text-wrap: balance; }
.beitragskarte h2 a::after { content: ""; position: absolute; inset: 0; }
.beitragskarte h2 a:focus-visible { outline: none; }
.beitragskarte:has(h2 a:focus-visible) { outline: 2px solid var(--marine); outline-offset: 3px; }
.beitragskarte p { margin: .75rem 1.5rem 0; font-size: .9375rem; line-height: 1.6; color: var(--leise); }

/* 7 Aufruf am Ende (wie FinalCTA.tsx) ------------------------------------ */
.aufruf { position: relative; overflow: hidden; padding: 4.5rem 0; text-align: center; background: var(--beige); }
.aufruf::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 37.5rem; height: 37.5rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, hsl(42 92% 56% / .1), transparent 65%); pointer-events: none;
}
.aufruf-text { position: relative; max-width: 48rem; margin-inline: auto; }
.aufruf h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.aufruf p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: hsl(220 30% 10% / .72); }  /* --leise läge auf Beige nur bei knapp 4,5 zu 1 */
.aufruf p.aufruf-knopf { margin-top: 2.25rem; }

/* 8 Seitenfuß ------------------------------------------------------------ */
.seitenfuss { padding: 4rem 0; color: var(--hell); background: var(--marine); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-bottom: 3rem; }
.fuss-marke > * + * { margin-top: 1.5rem; }
.fuss-marke img { width: auto; height: 4rem; }
.fuss-name { font-size: .875rem; font-weight: 600; line-height: 1.25rem; color: hsl(0 0% 98% / .9); }
.fuss-punkte li { display: flex; align-items: center; gap: .5rem; color: hsl(0 0% 98% / .8); }
.fuss-punkte li + li { margin-top: .25rem; }
.fuss-punkte li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--gold); }
.fuss-kontakt a { display: flex; align-items: center; gap: .5rem; }
.fuss-kontakt a + a { margin-top: .75rem; }
.seitenfuss a { color: hsl(0 0% 98% / .7); transition: color .15s; }
.seitenfuss a:hover { color: var(--hell); }
.fuss-titel { margin-bottom: 1rem; font-size: 1rem; font-weight: 600; line-height: 1.5rem; color: hsl(0 0% 98% / .9); }
.fuss-titel-zwei { margin-top: 2rem; }
.fuss-liste li + li { margin-top: .75rem; }
.fuss-liste-klein a { font-size: .875rem; line-height: 1.25rem; }
.fuss-sozial { display: inline-flex; align-items: center; gap: .5rem; }
.fuss-sozial .zeichen { font-size: 1.25rem; }
.fuss-ueber { margin-bottom: 3rem; padding: 1.5rem; border: 1px solid hsl(0 0% 98% / .1); border-radius: .75rem; background: hsl(0 0% 98% / .05); }
.fuss-ueber h2 { margin-bottom: .5rem; font-size: 1rem; line-height: 1.5rem; }
.fuss-ueber p { max-width: 56rem; font-size: .875rem; line-height: 1.625; color: hsl(0 0% 98% / .7); }
.fuss-ueber-verweise { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .875rem; line-height: 1.25rem; }
.seitenfuss .fuss-ueber-verweise a { color: var(--gold); }
.seitenfuss .fuss-ueber-verweise a:hover { text-decoration: underline; }
.fuss-unten { padding-top: 2rem; border-top: 1px solid hsl(0 0% 98% / .1); font-size: .875rem; line-height: 1.25rem; color: hsl(0 0% 98% / .5); }

/* 9 Schwebende Kontaktknöpfe (FloatingContactButtons.tsx) ---------------- */
.schnellkontakt { position: fixed; right: 0; bottom: 6rem; z-index: 40; display: flex; flex-direction: column; gap: .25rem; }
.schnellkontakt a {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  color: hsl(220 40% 10%); background: var(--gold);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  transition: background-color .3s, box-shadow .3s;
}
.schnellkontakt a:hover { background: hsl(42 92% 56% / .9); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.schnellkontakt .zeichen { font-size: 1.25rem; }
.schnellkontakt a:focus-visible { outline-color: var(--marine); outline-offset: -4px; }

/* 10 Breiten -------------------------------------------------------------- */
@media (min-width: 40rem) {
  :root { --rand: 1.5rem; }
  .kopfleiste a span:not(.zeichen) { display: inline; }
  .beitragsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knopf-gross { padding-inline: 2.5rem; font-size: 1.125rem; line-height: 1.75rem; }
  .beitrag blockquote { padding: 2rem; }
  .checkliste { padding: 2.5rem; }
}
@media (min-width: 48rem) {
  h1, h2, h3, h4 { -webkit-hyphens: manual; hyphens: manual; }
  .wortmarke img { height: 3.5rem; }
  .wissenskopf h1 { font-size: 3rem; }
  .beitragskopf h1 { font-size: 2.25rem; }
  .beitragskopf .einleitung { font-size: 1.25rem; }
  .beitrag { font-size: 1.125rem; }
  .beitrag h2 { font-size: 1.875rem; line-height: 1.2; }
  .beitrag h3 { font-size: 1.375rem; }
  .beitrag h4 { font-size: 1.125rem; }
  .aufruf { padding: 6rem 0; }
  .aufruf h2 { font-size: 2.25rem; }
  .aufruf p { font-size: 1.25rem; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke img { height: 5rem; }
  .fuss-ueber { padding: 2rem; }
  .schnellkontakt { bottom: auto; top: 50%; transform: translateY(-50%); }
  .schnellkontakt a { width: 3.5rem; height: 3.5rem; }
  .schnellkontakt .zeichen { font-size: 1.5rem; }
}
@media (min-width: 64rem) {
  :root { --rand: 2rem; }
  .kopf-innen { padding-inline: 2.5rem; }
  .wissenskopf { padding: 13rem 0 7rem; }
  .wissenskopf h1 { font-size: 3.75rem; line-height: 1; }
  .beitragskopf { padding: 11rem 0 9rem; }
  .beitragskopf:not(:has(+ .beitragsrumpf figure)) { padding-bottom: 5rem; }
  .beitragskopf h1 { margin-right: -6rem; font-size: 2.75rem; line-height: 1.12; }
  .beitragsrumpf { padding-bottom: 6rem; }
  .beitragsbild figure { margin: -5rem -6rem 0; border-radius: 1rem; }
  .beitrag { margin-top: 4rem; }
  .wissensliste { padding: 5rem 0 6rem; }
  .beitragsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Breites Menü ab 1280 px, darunter das Klappmenü: dieselbe Stufe wie auf der Website (xl in Header.tsx) */
@media (min-width: 80rem) {
  .menue-schmal { display: none; }
  .kopf-knopf { display: inline-flex; flex: none; }
  .menue-breit { display: flex; align-items: center; gap: 1.5rem; }
  .menue-breit > a, .menue-gruppe > button {
    display: flex; align-items: center; gap: .375rem; padding: .5rem .25rem;
    font-size: .9375rem; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; white-space: nowrap;
    color: rgb(255 255 255 / .6); transition: color .2s;
  }
  .menue-breit > a:hover, .menue-breit > a[aria-current],
  .menue-gruppe:hover > button, .menue-gruppe:focus-within > button { color: var(--gold); }
  .menue-gruppe { position: relative; }
  .menue-gruppe > button { position: relative; z-index: 1; }
  .menue-gruppe > button .zeichen { font-size: .875rem; transition: transform .2s; }
  .menue-gruppe:hover > button .zeichen, .menue-gruppe:focus-within > button .zeichen { transform: rotate(180deg); }
  .menue-aufklapp {
    position: absolute; top: 0; left: 50%; width: 15rem; padding-top: 2.375rem; transform: translateX(-50%);
    visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s;
  }
  .menue-gruppe:hover > .menue-aufklapp, .menue-gruppe:focus-within > .menue-aufklapp { visibility: visible; opacity: 1; }
  .menue-aufklapp > div { padding: .5rem 0; border: 1px solid rgb(255 255 255 / .08); border-radius: .75rem; background: #111d38; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
  .menue-aufklapp a { display: block; padding: .625rem 1.25rem; font-size: .8125rem; line-height: 1.5; color: rgb(255 255 255 / .6); transition: color .15s, background-color .15s; }
  .menue-aufklapp a:hover, .menue-aufklapp a:focus-visible { color: #fff; background: rgb(255 255 255 / .04); }
}

/* 11 Bewegung ------------------------------------------------------------- */
/* Kopfzeile: am Seitenanfang durchsichtig, beim Rollen dunkel (im Original per JavaScript) */
@supports (animation-timeline: scroll()) {
  .kopfzeile { animation: kopf-abdunkeln linear both; animation-timeline: scroll(root block); animation-range: 0 2.5rem; }
  @keyframes kopf-abdunkeln {
    from { background-color: rgb(12 26 51 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); border-bottom-color: rgb(255 255 255 / 0); }
    to { background-color: rgb(12 26 51 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgb(255 255 255 / .04); }
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .knopf:hover, .beitragskarte:hover, .verwandte a:hover::after { transform: none; }
  .kopfzeile { animation: none; }
}

/* 12 Druck ---------------------------------------------------------------- */
@media print {
  @page { margin: 18mm 16mm; }
  html { font-size: 11pt; }
  body { color: #000; background: #fff; }
  .seitenkopf, .seitenfuss, .schnellkontakt, .sprungverweis, .aufruf, .brotkrume, .zurueck, .checkliste .knopf { display: none !important; }
  .wissenskopf, .beitragskopf { padding: 0 0 1.5rem !important; color: #000; background: none; }
  .wissenskopf::before, .beitragskopf::before, .checkliste::before { display: none; }
  .beitragskopf .meta, .meta-autor, .beitragskopf .einleitung, .wissenskopf p { color: #333; }
  .beitragskopf .meta { margin-top: 0; }
  .spalte, .kiste { max-width: none; padding-inline: 0; }
  .beitragsrumpf, .wissensliste { padding: 0; }
  .beitragsbild figure { margin: 0 0 1.5rem; border-radius: 0; box-shadow: none; background: none; }
  .beitragsbild img { max-height: 90mm; object-fit: cover; }
  .beitrag { margin-top: 0; color: #000; }
  .beitrag a { color: #000; text-decoration-color: #000; text-decoration-thickness: 1px; }
  .beitrag a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; word-break: break-all; }
  .beitrag h2, .beitrag h3, .beitrag h4 { break-after: avoid; }
  .beitrag blockquote, .beitrag tr, .beitrag li, .beitragskarte, figure { break-inside: avoid; }
  .beitrag blockquote, .beitragskarte { box-shadow: none; }
  .beitrag table { display: table; width: 100%; overflow: visible; }
  .beitrag th, .beitrag td { width: auto !important; min-width: 0; }
  .beitrag th { color: #000; background: #eee; border-bottom: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .beitrag ol > li::before { color: #000; background: none; border: 1px solid #000; }
  .beitrag ul > li::before { background: #000; }
  .checkliste { padding: 1rem 0 0; color: #000; background: none; border-top: 1px solid #999; border-radius: 0; }
  .beitragsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beitragskarte:not(:has(img))::before { display: none; }
}