@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · SACHLICHE CONTENT-SEITEN
   ---------------------------------------------------------------------
   Gemeinsame, mobile-first Schicht für Impressum, Datenschutz, AGB,
   FAQ und Kontakt. Die Seiten bleiben bewusst textgeführt: Hier schafft
   Typografie die Orientierung, nicht ein Raster aus Dekokarten.

   Erwartete Hülle:
     body.public-page.public-content
     main#inhalt.content-main
     .content-hero
     .content-body > .wrap > .content-layout
   ===================================================================== */

.public-content {
  --content-copy: 66ch;
  --content-wide: 1080px;
  /* Nur noch die zwei Fehlerrollen bleiben seitenlokal, weil die Marke
     dafür keine Rolle führt. --content-success war nirgends benannt und
     hätte als dritte, unkontrollierte Grünstufe neben --gc-green-deep
     gestanden. */
  --content-error: oklch(0.48 0.14 27);
  --content-error-bg: oklch(0.955 0.025 27);
  background: var(--gc-canvas);
}

.public-content.menu-is-open {
  overflow: hidden;
}

.public-content .content-main {
  min-width: 0;
  padding-top: var(--kopf-h-mobil);
}

/* Hero ---------------------------------------------------------------- */

/* Die fünf Content-Seiten teilen Geometrie und Textstapel mit dem Blog.
   Der vollständige Vertrag steht in public-hero.css. Hier bleibt keine
   zweite, leicht abweichende Abstands- oder Typografieskala zurück. */

/* Seitenraster -------------------------------------------------------- */

/* Sektionsmaß aus der Markenebene statt eigener Kurve. Die lokale Kurve
   endete bei 104 px, die Referenz liegt bei 110 bis 140 px. */
.public-content :is(.content-body, .content-band) {
  padding-block: var(--gc-section-y);
}

.public-content .content-layout {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
}

.public-content .content-layout--with-nav,
.public-content .content-layout:has(> .content-aside) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 8vw, 76px);
}

.public-content .content-layout__main {
  min-width: 0;
  max-width: var(--content-copy);
}

.public-content .content-layout:not(.content-layout--with-nav) .content-layout__main,
.public-content .content-layout > .content-prose:only-child {
  margin-inline: auto;
}

/* Inhaltsnavigation. Als details ist sie mobil kompakt; ab Desktop
   wird der Inhalt auch ohne open-Attribut sichtbar und klebt unter dem
   Kopf. Als nav ohne details bleibt dieselbe Klasse direkt nutzbar. */

.public-content .content-toc {
  align-self: start;
  border-block: 1px solid var(--gc-line);
  padding-block: 10px;
}

.public-content .content-toc__summary,
.public-content .content-toc__title {
  color: var(--gc-ink);
  font-family: var(--gc-font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.public-content .content-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  list-style: none;
  cursor: pointer;
}

.public-content .content-toc__summary::-webkit-details-marker {
  display: none;
}

.public-content .content-toc__summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-basis) var(--gc-ease);
}

.public-content .content-toc__summary span {
  margin-left: auto;
  color: var(--gc-ink-muted);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.public-content details.content-toc[open] > .content-toc__summary::after {
  transform: translateY(2px) rotate(225deg);
}

.public-content .content-toc__title {
  margin: 8px 0 12px;
}

.public-content .content-toc__list {
  min-width: 0;
  max-width: 100%;
  list-style: none;
  padding: 4px 0 8px;
  max-height: min(50svh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.public-content .content-toc__list a {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  min-height: 48px;
  padding: 7px 8px;
  border-radius: var(--gc-radius-sm);
  color: var(--gc-ink-muted);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: background var(--t-basis) var(--gc-ease),
              color var(--t-basis) var(--gc-ease);
}

.public-content .content-toc__list a:hover {
  background: var(--gc-canvas-2);
  color: var(--gc-ink);
}

.public-content .content-toc__list a:is([aria-current="location"], [aria-current="true"]) {
  /* War ein freistehender oklch-Wert und damit ein vierter Grünton neben
     Mint, Signalgrün und Tiefgrün. Jetzt aus Mint und Sand gemischt. */
  background: color-mix(in srgb, var(--gc-mint) 34%, var(--gc-canvas));
  color: var(--gc-dark);
  font-weight: 650;
}

/* Fließtext ---------------------------------------------------------- */

.public-content .content-prose {
  min-width: 0;
  max-width: var(--content-copy);
  color: var(--gc-ink-soft);
  overflow-wrap: anywhere;
}

.public-content .content-prose > :first-child,
.public-content .content-prose section > :first-child {
  margin-top: 0;
}

.public-content .content-prose :is(p, ul, ol, dl, address, blockquote, table) {
  max-width: var(--content-copy);
  margin-top: 1.15em;
}

.public-content .content-prose p,
.public-content .content-prose li,
.public-content .content-prose dd,
.public-content .content-prose address {
  font-size: clamp(1.04rem, 1rem + 0.18vw, 1.16rem);
  line-height: 1.72;
}

/* Die Seitenschicht hatte eine eigene, flachere Leiter gezogen (Grad 2
   auf 37,6 px, Grad 3 auf 25,6 px). Gegen eine Schlagzeile auf
   --gc-fs-page stand Grad 2 damit im Verhältnis 2,3 zu 1 und wirkte
   nicht mehr wie derselbe Satz. Größe, Zeilenhöhe und Laufweite kommen
   jetzt aus der Markenebene; lokal bleiben nur Abstand, Umbruch und
   Trennung, weil Rechtstext-Überschriften wie „20. Änderungen dieser
   Datenschutzerklärung“ sonst aus der Lesespalte laufen. */
.public-content .content-prose h2 {
  margin-top: clamp(46px, 8vw, 72px);
  color: var(--gc-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.public-content .content-prose h3 {
  margin-top: clamp(32px, 6vw, 48px);
  color: var(--gc-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.public-content .content-prose h4 {
  margin-top: 28px;
  color: var(--gc-ink);
  font-family: var(--gc-font-body);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.public-content .content-prose .content-section > :first-child {
  margin-top: 0;
}

.public-content .content-prose > .content-lead {
  color: var(--gc-ink-strong);
  font-size: clamp(1.16rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.65;
}

.public-content .content-prose section + section,
.public-content .content-section + .content-section {
  margin-top: clamp(52px, 9vw, 84px);
  padding-top: clamp(48px, 8vw, 72px);
  border-top: 1px solid var(--gc-line);
}

.public-content .content-prose section + section > h2,
.public-content .content-prose section + section > h3,
.public-content .content-section + .content-section > h2,
.public-content .content-section + .content-section > h3 {
  margin-top: 0;
}

.public-content .content-prose :is(ul, ol) {
  padding-left: 1.35em;
}

.public-content .content-prose ul {
  list-style: disc;
}

.public-content .content-prose ol {
  list-style: decimal;
}

.public-content .content-prose li {
  padding-left: 0.24em;
}

.public-content .content-prose li + li {
  margin-top: 0.55em;
}

.public-content .content-prose li::marker {
  color: var(--gc-green-deep);
  font-weight: 700;
}

.public-content .content-prose :is(ul, ol) :is(ul, ol) {
  margin-top: 0.55em;
}

.public-content .content-prose a:not(.btn) {
  color: var(--gc-link);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--t-basis) var(--gc-ease),
              text-decoration-thickness var(--t-basis) var(--gc-ease);
}

.public-content .content-prose a:not(.btn):hover {
  color: var(--gc-ink);
  text-decoration-thickness: 2px;
}

.public-content .content-prose address {
  font-style: normal;
}

.public-content .content-prose strong {
  color: var(--gc-ink);
  font-weight: 700;
}

.public-content .content-prose blockquote,
.public-content .content-note {
  padding: clamp(18px, 4vw, 26px);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-strong);
}

.public-content .content-prose blockquote > :first-child,
.public-content .content-note > :first-child {
  margin-top: 0;
}

.public-content .content-note__title {
  color: var(--gc-ink);
  font-weight: 700;
}

/* Der Warnton stand als freier oklch-Wert im Blatt. Die Marke führt für
   Aufmerksamkeit genau eine warme Rolle (--gc-star); der Hinweis mischt
   sie jetzt in den Sand, statt eine zweite Gelbfamilie aufzumachen. */
.public-content .content-note--important {
  background: color-mix(in srgb, var(--gc-star) 18%, var(--gc-canvas));
}

.public-content .content-review-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  margin-bottom: clamp(34px, 7vw, 56px);
  padding: clamp(17px, 3vw, 22px);
  border-radius: var(--gc-radius-control);
  background: color-mix(in srgb, var(--gc-star) 18%, var(--gc-canvas));
  color: var(--gc-ink-strong);
  font-size: 1rem;
  line-height: 1.58;
}

.public-content .content-review-note strong {
  color: var(--gc-ink);
}

.public-content .content-prose .content-review-note > * {
  margin: 0;
}

.public-content .content-prose :target {
  scroll-margin-top: calc(var(--kopf-h-mobil) + 24px);
}

/* Rechtliche Daten als ruhige Zeilen, nicht als Karten. */

.public-content .legal-data {
  width: 100%;
  margin-top: 28px;
  border-top: 1px solid var(--gc-line);
}

.public-content .legal-data__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-block: 17px;
  border-bottom: 1px solid var(--gc-line);
}

.public-content .legal-data dt {
  color: var(--gc-ink);
  font-weight: 700;
}

.public-content .legal-data dd {
  min-width: 0;
  margin: 0;
}

.public-content .legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: clamp(32px, 7vw, 54px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-ink-muted);
  font-size: 1rem;
}

/* Dunkler Abbinder ---------------------------------------------------- */

/* Die Rechtstextseiten hatten zwischen Kopf und Fuß keine einzige
   Tiefgrün-Fläche im Fluss: der Hero klebt am ebenfalls dunklen Kopf,
   danach lief alles bis zum Fuß auf Sand. Die Referenz wechselt
   Sand, Tiefgrün, Sand. Der Abbinder nimmt deshalb den SCHLUSSABSCHNITT
   der Seite auf, den es ohnehin schon gibt (Urheberrecht, Stand der AGB,
   Änderungen der Erklärung). Es kommt kein Wort Text hinzu, die
   Lesereihenfolge des Rechtstextes bleibt unverändert. Form wie das
   Abschlussband auf blog.html: dunkle Insel mit Kartenradius, nicht
   vollflächig, damit zwischen ihr und dem dunklen Fuß Sand stehen
   bleibt. */
.public-content .content-prose .content-abbinder {
  margin-top: clamp(56px, 9vw, 96px);
  padding: clamp(26px, 5vw, 48px);
  border: 0;
  border-radius: var(--gc-radius-card);
  background: var(--gc-dark-2);
  color: var(--gc-on-dark-soft);
  box-shadow: var(--gc-shadow-frame-dark);
}

.public-content .content-prose .content-abbinder > :first-child {
  margin-top: 0;
}

/* Die Fließtextregeln oben binden Überschriften, Auszeichnungen, Marken
   und Links auf die hellen Rollen. Auf der dunklen Insel müssen sie
   zurückgedreht werden, sonst steht Tiefgrün auf Tiefgrün. */
.public-content .content-prose .content-abbinder :is(h2, h3, h4) {
  color: var(--gc-on-dark);
}

.public-content .content-prose .content-abbinder strong {
  color: var(--gc-on-dark);
}

.public-content .content-prose .content-abbinder li::marker {
  color: var(--gc-mint);
}

/* --gc-link ist für helle Flächen gerechnet und hielte auf Tiefgrün
   nur rund 2:1. Mint hält gegen --gc-dark-2 über 10:1. */
.public-content .content-prose .content-abbinder a:not(.btn) {
  color: var(--gc-mint);
}

.public-content .content-prose .content-abbinder a:not(.btn):hover {
  color: var(--gc-on-dark);
}

/* FAQ ----------------------------------------------------------------- */

.public-content .content-faq {
  width: 100%;
  max-width: var(--content-copy);
  border-top: 1px solid var(--gc-line-strong);
}

.public-content .content-faq__item {
  border-bottom: 1px solid var(--gc-line-strong);
}

.public-content .content-faq__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 68px;
  padding-block: 17px;
  list-style: none;
  cursor: pointer;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  font-weight: 650;
  line-height: 1.4;
  transition: color var(--t-basis) var(--gc-ease);
}

.public-content .content-faq__question::-webkit-details-marker {
  display: none;
}

.public-content .content-faq__question::after {
  content: "";
  width: 10px;
  height: 10px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-basis) var(--gc-ease),
              color var(--t-basis) var(--gc-ease);
}

.public-content .content-faq__question:hover {
  color: var(--gc-green-deep);
}

.public-content .content-faq__item[open] > .content-faq__question {
  color: var(--gc-ink);
}

.public-content .content-faq__item[open] > .content-faq__question::after {
  color: var(--gc-link);
  transform: translateY(2px) rotate(225deg);
}

.public-content .content-faq__answer {
  max-width: 65ch;
  padding: 0 0 24px;
  color: var(--gc-ink-soft);
}

.public-content .content-faq__answer > :first-child {
  margin-top: 0;
}

.public-content .content-faq__answer :is(p, li) {
  font-size: clamp(1.04rem, 1rem + 0.18vw, 1.16rem);
  line-height: 1.7;
}

.public-content .content-faq__answer p + p {
  margin-top: 0.9em;
}

.public-content .content-faq__answer :is(ul, ol) {
  margin-top: 0.9em;
  padding-left: 1.3em;
}

.public-content .content-faq__answer ul {
  list-style: disc;
}

.public-content .content-faq__answer ol {
  list-style: decimal;
}

.public-content .content-faq__answer li + li {
  margin-top: 0.45em;
}

.public-content .content-faq__answer li::marker {
  color: var(--gc-green-deep);
}

/* Die FAQ ist die einzige Content-Seite ohne seitliche Inhaltsnavigation.
   Sie darf deshalb denselben ruhigen Seitenrahmen wie die Marken-Seiten
   nutzen, ohne die lesbare Zeilenlänge der Antworten aufzugeben. */

.public-content.public-faq {
  /* FAQ hat keine Seitennavigation und darf den gesamten gemeinsamen
     Inhaltsrahmen nutzen. So stehen Suche und Akkordeon exakt auf den
     Kanten von Kopf und Fuß. */
  --content-wide: var(--breite);
  --content-copy: 66ch;
}

.public-content.public-faq .content-body {
  padding-block: var(--gc-section-y) var(--gc-section-y-wide);
}

/* Die Suche steht im Creme-Abschnitt direkt vor der Fragenliste. */
.public-content.public-faq .faq-search {
  max-width: 34rem;
  margin: 0 0 var(--sp-10);
}

.public-content.public-faq .content-layout__main {
  width: 100%;
  max-width: 100%;
}

.public-content.public-faq .content-faq {
  max-width: 100%;
}

.public-content.public-faq .content-faq__question {
  min-height: 72px;
  padding-block: 19px;
}

.public-content.public-faq .content-faq__answer {
  padding-bottom: clamp(24px, 4vw, 32px);
}

/* Kontakt ------------------------------------------------------------- */

.public-content :is(.contact-layout, .contact-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.public-content .contact-layout {
  gap: clamp(48px, 10vw, 96px);
}

.public-content .contact-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

/* Kartensprache der Referenz: Radius 22 px und der weite, flache
   Schatten statt einer harten Kontur mit 12-px-Radius. */
.public-content .contact-card {
  min-width: 0;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

.public-content :is(.contact-card__title, .contact-card > h2, .contact-card > h3) {
  color: var(--gc-ink);
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  line-height: 1.3;
}

.public-content :is(.contact-card__text, .contact-card > p) {
  margin-top: 9px;
  color: var(--gc-ink-muted);
  font-size: 1rem;
  line-height: 1.58;
}

.public-content .contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 18px;
}

.public-content .contact-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gc-link);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.public-content .contact-note {
  margin-top: clamp(28px, 6vw, 48px);
  padding: clamp(18px, 4vw, 24px);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-strong);
  line-height: 1.6;
}

.public-content .contact-note > :first-child {
  margin-top: 0;
}

.public-content .contact-intro {
  max-width: 54ch;
}

.public-content .contact-options {
  margin-top: 32px;
  border-top: 1px solid var(--gc-line-strong);
}

.public-content .contact-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--gc-line-strong);
}

.public-content .contact-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-mint) 42%, var(--gc-canvas));
  color: var(--gc-dark);
}

.public-content .contact-option__icon svg {
  width: 21px;
  height: 21px;
}

.public-content .contact-option__title {
  color: var(--gc-ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.public-content .contact-option__text {
  margin-top: 3px;
  color: var(--gc-ink-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.public-content .contact-option a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 3px;
  color: var(--gc-link);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.public-content .contact-form {
  min-width: 0;
  padding-top: 28px;
  border-top: 1px solid var(--gc-line-strong);
}

.public-content .contact-form__title {
  color: var(--gc-ink);
  font-size: clamp(1.65rem, 1.4rem + 1vw, 2.2rem);
  line-height: 1.18;
}

.public-content .contact-form__intro {
  margin-top: 12px;
  color: var(--gc-ink-muted);
  line-height: 1.65;
}

.public-content .contact-form__note {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-strong);
  font-size: 1rem;
  line-height: 1.55;
}

.public-content .content-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.public-content .content-field {
  min-width: 0;
}

.public-content .content-field--full {
  grid-column: 1 / -1;
}

.public-content .content-field__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--gc-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.public-content .content-field__required {
  color: var(--content-error);
}

.public-content .content-field__control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink);
  line-height: 1.45;
  transition: border-color var(--t-basis) var(--gc-ease),
              background var(--t-basis) var(--gc-ease);
}

.public-content textarea.content-field__control {
  min-height: 154px;
  resize: vertical;
}

.public-content .content-field__control::placeholder {
  color: var(--gc-ink-muted);
  opacity: 1;
}

.public-content .content-field__control:hover {
  border-color: var(--gc-ink-soft);
}

.public-content .content-field__control:focus-visible {
  border-color: var(--gc-dark);
}

.public-content .content-field__control[aria-invalid="true"] {
  border-color: var(--content-error);
  background: var(--content-error-bg);
}

.public-content .content-field__hint,
.public-content .content-field__error {
  margin-top: 7px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.public-content .content-field__hint {
  color: var(--gc-ink-muted);
}

.public-content .content-field__error {
  color: var(--content-error);
  font-weight: 600;
}

.public-content .contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 26px;
}

.public-content .contact-form__actions .btn {
  min-height: 50px;
}

.public-content .contact-form__actions :disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.public-content .contact-form__privacy {
  max-width: 52ch;
  color: var(--gc-ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .public-content .legal-data__row {
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1.55fr);
    gap: 28px;
  }

  .public-content .content-faq__answer {
    padding-right: 52px;
  }

  .public-content .content-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .public-content .contact-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .public-content .content-main {
    padding-top: var(--kopf-h);
  }

  .public-content .content-layout--with-nav,
  .public-content .content-layout:has(> .content-aside) {
    grid-template-columns: minmax(190px, 240px) minmax(0, var(--content-copy));
    align-items: start;
  }

  .public-content :is(.content-layout__aside, .content-aside),
  .public-content .content-toc {
    position: sticky;
    top: calc(var(--kopf-h) + 28px);
  }

  .public-content .content-aside .content-toc {
    position: static;
  }

  .public-content details.content-toc > .content-toc__summary {
    display: none;
  }

  .public-content details.content-toc::details-content {
    display: block;
    content-visibility: visible;
  }

  .public-content details.content-toc:not([open]) > :not(summary) {
    display: block;
  }

  .public-content .content-toc__list {
    padding-block: 0 8px;
    max-height: calc(100svh - var(--kopf-h) - 112px);
  }

  .public-content .content-prose :target {
    scroll-margin-top: calc(var(--kopf-h) + 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-content .content-breadcrumb a,
  .public-content .content-toc__summary::after,
  .public-content .content-toc__list a,
  .public-content .content-prose a,
  .public-content .content-faq__question,
  .public-content .content-faq__question::after,
  .public-content .content-field__control {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .public-content {
    background: #fff;
    color: #111;
  }

  .public-content :is(.kopf, .footer, .skip-link, .content-breadcrumb, .content-breadcrumbs, .content-toc) {
    display: none !important;
  }

  .public-content .content-main {
    padding-top: 0;
  }

  .public-content .content-hero {
    padding-block: 0 28px;
    background: #fff;
    color: #111;
  }

  .public-content .content-hero__title,
  .public-content .content-hero__lede,
  .public-content .content-hero__meta,
  .public-content .content-prose,
  .public-content .content-prose :is(h2, h3, h4, p, li, dt, dd, address) {
    color: #111;
  }

  .public-content :is(.content-body, .content-band) {
    padding-block: 0;
  }

  .public-content .content-layout--with-nav {
    display: block;
  }

  .public-content .content-prose {
    max-width: none;
  }

  .public-content .content-prose .content-abbinder {
    background: #fff;
    color: #111;
    box-shadow: none;
    border: 1px solid var(--gc-line-strong);
  }

  .public-content .content-prose .content-abbinder :is(h2, h3, h4, strong, a, a:not(.btn)) {
    color: #111;
  }

  .public-content .content-prose section,
  .public-content .content-faq__item,
  .public-content .legal-data__row {
    break-inside: avoid;
  }
}

/* D5a, 17.09.2026: Rückholregel entfernt, wirkungslos geworden. public-brand.css
   senkt .gc-label unter 340 px nicht mehr auf 11 px, sondern hält 12 px global
   (AUFTRAG_D5.md, D5a Punkt 1). kontakt.html (Brotkrumen- und Abschnittskicker)
   sowie impressum.html, datenschutz.html und agb.html (Brotkrumenkicker), die
   diese Regel hier auffing, stehen jetzt schon durch die Markenebene bei
   12 px. */