/* =============================================================================
   Naturfeld erleben - Projektschicht ueber Bootstrap 5.3
   =============================================================================

   REGELN. Bitte einhalten, sonst wird daraus wieder das, was vorher hier lag:
   eine 1989 Zeilen lange Datei, in der .nav dreimal deklariert war.

   1. Reihenfolge der Abschnitte ist fest. Neues gehoert in seinen Abschnitt,
      nicht ans Dateiende.
   2. Keine Media Queries mit oberer Breitengrenze - immer von klein nach gross
      aufbauen. Pruefung: nach "@media" und "max-" suchen, es darf nur der
      Sonderfall mit max-height in Abschnitt 40 auftauchen (dort begruendet).
   3. Nur Bootstrap-Breakpoints: 576 / 768 / 992 / 1200.
   4. Media Queries stehen bei ihrer Komponente, nie in einem Sammelblock unten.
   5. Eine Klasse ist entweder eine Bootstrap-Klasse oder nf-praefigiert.
   6. Rohes Hex nur in Abschnitt 10. !important nur in Abschnitt 90.
   7. Jeder Selektor genau einmal. Pruefung: Selektoren herausziehen,
      sort | uniq -d muss leer bleiben.
   8. Budget: 950 Zeilen Regeln, ohne die Schriftdefinitionen in Abschnitt 00.
      Wird es mehr, gehoert etwas in eine Blade-Komponente oder laesst sich
      durch eine vorhandene Bootstrap-Hilfsklasse ersetzen.

   ABSCHNITTE
   00 Schriften
   10 Farbwerte und Masse
   20 Bootstrap-Variablen
   30 Grundlagen
   40 Barrierefreiheit
   50 Layout
   60 Projektkomponenten
   70 Bootstrap-Komponenten einfaerben
   90 Hilfsklassen
   99 Druck
   ========================================================================== */


/* == 00 SCHRIFTEN ========================================================= */

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bitter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/bitter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bitter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/bitter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* == 10 FARBWERTE UND MASSE ==============================================
   Der einzige Ort, an dem rohe Hexwerte stehen duerfen.
   Alle Kontraste sind nachgerechnet, die Werte stehen im Kommentar.        */

:root {
  /* Flaechen */
  --nf-paper:        #FBFAF6;
  --nf-surface:      #FFFFFF;
  --nf-soft:         #EFF3E8;
  --nf-warm:         #F7F1E7;
  --nf-sand:         #E8DCC8;
  --nf-sage:         #DBE7CF;
  --nf-on-photo:     #F0F5EC;   /* Fliesstext auf dem abgedunkelten Hero-Bild */

  /* Schrift */
  --nf-ink:          #16241B;   /* 15.4:1 auf paper */
  --nf-ink-muted:    #3F5145;   /*  8.1:1 auf paper */

  /* Gruen */
  --nf-green:        #2C6140;   /*  7.0:1 auf paper */
  --nf-green-deep:   #1B3A27;
  --nf-green-darker: #152D1E;
  --nf-green-faded:  #7E9186;   /* nur fuer deaktivierte Flaechen */

  /* Akzente */
  --nf-clay:         #8A4B12;   /*  6.5:1 auf paper */
  --nf-clay-deep:    #6B390D;
  --nf-gold:         #F0C64B;   /*  7.7:1 auf green-deep */

  /* Linien und Fokus */
  --nf-line:         #D5DCD2;   /* nur Zierlinien, nie Bedienelement-Rand */
  --nf-line-strong:  #5A6B5E;   /*  5.4:1 - Formularraender, SC 1.4.11 */
  --nf-focus:        #B4530A;   /*  4.8:1 - Fokusring auf hell */
  --nf-focus-dark:   #F0C64B;   /* Fokusring auf dunklem Band */

  /* Rueckmeldungen */
  --nf-error:        #A32617;   /*  6.6:1 auf weiss */
  --nf-error-soft:   #FDF0EE;
  --nf-success:      #1B5E38;
  --nf-success-soft: #E8F3EB;

  /* Abdunklung fuer kleine Schildchen auf Fotos. 78 Prozent Deckung reichen,
     damit heller Text selbst auf einem weissen Motiv noch 6,9:1 erreicht -
     dezent genug, um nicht ins Auge zu springen. */
  --nf-chip-scrim:   rgba(21, 45, 30, .78);

  /* Masse */
  --nf-shadow:       0 18px 46px rgba(27, 58, 39, .10);
  --nf-shadow-lift:  0 22px 54px rgba(27, 58, 39, .16);
  --nf-band-space:   clamp(3rem, 8vw, 6.5rem);
}


/* == 20 BOOTSTRAP-VARIABLEN ==============================================
   Diese greifen tatsaechlich. Buttons, Karten und Formulare lesen sie NICHT -
   die werden in Abschnitt 70 ueber ihre eigenen Variablen eingefaerbt.      */

:root,
[data-bs-theme='light'] {
  --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--nf-ink);
  --bs-body-color-rgb: 22, 36, 27;
  --bs-body-bg: var(--nf-paper);
  --bs-body-bg-rgb: 251, 250, 246;
  --bs-emphasis-color: var(--nf-ink);
  --bs-secondary-color: var(--nf-ink-muted);
  --bs-secondary-color-rgb: 63, 81, 69;
  --bs-heading-color: var(--nf-ink);

  --bs-primary: #2C6140;
  --bs-primary-rgb: 44, 97, 64;

  --bs-link-color: #2C6140;
  --bs-link-color-rgb: 44, 97, 64;
  --bs-link-hover-color: #1B3A27;
  --bs-link-decoration: underline;
  --bs-link-underline-offset: .18em;

  --bs-border-color: var(--nf-line);
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.75rem;
  --bs-border-radius-pill: 50rem;

  --bs-focus-ring-width: .1875rem;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--nf-focus);

  --bs-box-shadow: var(--nf-shadow);
}


/* == 30 GRUNDLAGEN ======================================================== */

body {
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  text-wrap: balance;
}

h1, .h1 {
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

h2, .h2 {
  font-weight: 600;
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

h3, .h3 {
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.3;
}

h4, .h4 {
  font-weight: 600;
  font-size: 1.1rem;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--nf-ink-muted);
}

img {
  max-width: 100%;
  height: auto;
}

strong, b {
  font-weight: 600;
}

::selection {
  background: var(--nf-sage);
  color: var(--nf-green-darker);
}


/* == 40 BARRIEREFREIHEIT =================================================
   Alle Regeln, die die frueheren WCAG-Verstoesse beheben, stehen hier
   zusammen - damit sie beim naechsten Umbau nicht einzeln verlorengehen.   */

/* Frueher stand hier outline:none mit einer kaum sichtbaren Ersatzwirkung. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nf-focus);
  outline-offset: 2px;
  border-radius: .35rem;
  box-shadow: none;
}

.nf-band--deep :where(a, button):focus-visible,
.nf-hero :where(a, button):focus-visible {
  outline-color: var(--nf-focus-dark);
}

/* Fliesstextlinks muessen auch ohne Farbwahrnehmung erkennbar sein (SC 1.4.1). */
main p a,
main li a,
main dd a,
.nf-prose a {
  color: var(--nf-green);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

main p a:hover,
main li a:hover,
main dd a:hover {
  color: var(--nf-green-deep);
  text-decoration-thickness: .14em;
}

.nf-skip {
  position: absolute;
  z-index: 1080;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  background: var(--nf-green-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* Sprungziele duerfen nicht unter der klebenden Kopfzeile landen. */
[id] {
  scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .offcanvas {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .nf-imagelabel,
  .card {
    border: 1px solid;
  }
}

/* Ausnahme von der min-width-Regel: Auf niedrigen Fenstern (Landscape-Handy,
   400 % Zoom) darf die Kopfzeile nicht den halben Bildschirm belegen - SC 1.4.10. */
@media (max-height: 500px) {
  .nf-header {
    position: static;
  }
}


/* == 50 LAYOUT ============================================================ */

.container {
  --bs-gutter-x: 1.5rem;
  max-width: 1180px;
}

.nf-band {
  padding-block: var(--nf-band-space);
}

.nf-band--tight {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.nf-band--soft {
  background: var(--nf-soft);
}

.nf-band--warm {
  background: var(--nf-warm);
}

.nf-band--deep {
  background: var(--nf-green-deep);
  color: var(--nf-sage);
}

.nf-band--deep h1,
.nf-band--deep h2,
.nf-band--deep h3,
.nf-band--deep .h2 {
  color: #fff;
}

.nf-band--deep .lead,
.nf-band--deep p {
  color: var(--nf-sage);
}

.nf-narrow {
  max-width: 46rem;
}

.nf-measure {
  max-width: 62ch;
}


/* == 60 PROJEKTKOMPONENTEN ===============================================
   Nur, wofuer Bootstrap kein Gegenstueck hat.                              */

/* -- Kicker ------------------------------------------------------------- */
.nf-kicker {
  display: block;
  margin-bottom: .6rem;
  color: var(--nf-clay);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nf-band--deep .nf-kicker {
  color: var(--nf-gold);
}

/* -- Kopfzeile ---------------------------------------------------------- */
.nf-header {
  background: rgba(251, 250, 246, .92);
  border-bottom: 1px solid var(--nf-line);
  backdrop-filter: blur(14px);
}

.nf-header--scrolled {
  box-shadow: 0 6px 24px rgba(27, 58, 39, .09);
}

.nf-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.nf-brand__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--nf-sage);
  color: var(--nf-green-deep);
  font-size: 1.15rem;
}

.nf-brand__name {
  display: block;
  color: var(--nf-ink);
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
}

.nf-brand__claim {
  display: block;
  color: var(--nf-ink-muted);
  font-size: .8rem;
  line-height: 1.3;
}

/* -- Hero --------------------------------------------------------------- */
.nf-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 26rem;
  overflow: hidden;
  background: var(--nf-green-deep);
}

.nf-hero__media,
.nf-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 45, 30, .30) 0%, rgba(21, 45, 30, .55) 45%, rgba(21, 45, 30, .88) 100%);
}

.nf-hero__inner {
  position: relative;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.nf-hero__copy {
  max-width: 44rem;
  color: #fff;
}

.nf-hero__copy h1 {
  color: #fff;
}

.nf-hero__copy .lead,
.nf-hero__copy p {
  color: var(--nf-on-photo);
}

.nf-hero .nf-kicker {
  color: var(--nf-gold);
}

.nf-hero__statement {
  font-family: 'Bitter', Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 600;
}

@media (min-width: 768px) {
  .nf-hero {
    min-height: 34rem;
  }
}

/* -- Seitenkopf der Unterseiten ----------------------------------------- */
.nf-pagehead {
  background: var(--nf-soft);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.nf-pagehead h1 {
  color: var(--nf-green-deep);
}

/* -- Bild mit Bildunterschrift ------------------------------------------ */
.nf-figure {
  margin: 0;
}

.nf-figure__frame {
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--nf-shadow);
}

.nf-figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-figure__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .7rem;
  color: var(--nf-ink-muted);
  font-size: .9rem;
}

/* -- Kennzeichnung KI-generierter Bilder --------------------------------
   Der Hinweis gehoert ans Bild, nicht unter den Fliesstext - dort liest er
   sich sonst wie eine Aussage ueber den Text.
   Gleichzeitig soll er nicht ins Auge springen: kleines Schildchen in der
   Bildecke statt Plakette. Die 78 Prozent Abdunklung sind der Kompromiss -
   dezent, aber selbst auf einem weissen Motiv noch 6,6:1 Kontrast.          */

.nf-media {
  position: relative;
}

/* Grundform: steht im Textfluss, etwa in einer Bildunterschrift.
   Bewusst nur kleine, zurueckhaltende Schrift - keine Plakette. */
.nf-imagelabel {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--nf-ink-muted);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Direkt auf dem Foto, in der unteren rechten Ecke. Kleines Schildchen mit
   leichter Abdunklung: lesbar auf jedem Motiv, ohne den Blick zu ziehen. */
.nf-imagelabel--onphoto {
  position: absolute;
  z-index: 2;
  inset-block-end: .5rem;
  inset-inline-end: .5rem;
  padding: .1rem .5rem;
  border-radius: 50rem;
  background: var(--nf-chip-scrim);
  color: var(--nf-on-photo);
  font-size: .72rem;
  backdrop-filter: blur(2px);
}

/* Im Hero nach oben: unten stehen Ueberschrift und Schaltflaechen. */
.nf-hero .nf-imagelabel--onphoto {
  inset-block-start: 1rem;
  inset-block-end: auto;
}

/* -- Wechselseitige Bild-Text-Abschnitte -------------------------------- */
.nf-story {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.nf-story + .nf-story {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.nf-story__number {
  display: block;
  color: var(--nf-clay);
  font-family: 'Bitter', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.nf-story__prompt {
  display: block;
  margin: .4rem 0 .2rem;
  color: var(--nf-green);
  font-weight: 600;
}

@media (min-width: 768px) {
  .nf-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .nf-story--reverse > :first-child {
    order: 2;
  }
}

/* -- Plakat-Link (ersetzt die eingebetteten PDF-Objekte) ---------------- */
.nf-poster {
  display: block;
  text-decoration: none;
}

.nf-poster__frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--nf-line);
  border-radius: var(--bs-border-radius-lg);
  background: var(--nf-surface);
  box-shadow: var(--nf-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nf-poster__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-poster:hover .nf-poster__frame,
.nf-poster:focus-visible .nf-poster__frame {
  transform: translateY(-3px);
  box-shadow: var(--nf-shadow-lift);
}

/* Ersatzflaeche, solange noch kein Vorschaubild exportiert wurde. */
.nf-poster__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  background: var(--nf-soft);
  color: var(--nf-green-deep);
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.nf-poster__placeholder i {
  font-size: 2.5rem;
  color: var(--nf-green);
}

/* -- Kompakte Spielkarte ------------------------------------------------
   Belegbild des Spielbogens links, Text rechts. Der Bogen ist erkennbar,
   nimmt aber nur eine Handbreit ein. */
.nf-gamecard {
  display: flex;
  gap: 1rem;
}

.nf-gamecard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nf-gamecard__sheet {
  flex: 0 0 5.5rem;
  align-self: flex-start;
  overflow: hidden;
  border: 1px solid var(--nf-line);
  border-radius: .5rem;
  background: var(--nf-surface);
  line-height: 0;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nf-gamecard__sheet img {
  width: 100%;
  height: auto;
}

/* Die Stempelkarte fuehrt durch die Spiele und darf deshalb etwas groesser
   sein als die einzelnen Spielboegen - aber nur etwas. */
.nf-startcard {
  border-color: var(--nf-green);
  border-width: 2px;
}

.nf-gamecard__sheet--lead {
  flex-basis: 8rem;
}

@media (min-width: 576px) {
  .nf-gamecard__sheet--lead {
    flex-basis: 11rem;
  }
}

.nf-gamecard__sheet:hover,
.nf-gamecard__sheet:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--nf-shadow);
}

/* Schlichter Textlink auf einen Spielbogen. Die Boegen selbst sind Beiwerk -
   sie brauchen keine sechsfache Bildflaeche. */
.nf-poster__textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--nf-green);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.nf-poster__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  color: var(--nf-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* -- Nummerierte Ablaufschritte ----------------------------------------- */
.nf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nf-step;
}

.nf-steps li {
  position: relative;
  counter-increment: nf-step;
  padding-inline-start: 3rem;
  padding-block: .35rem;
}

.nf-steps li + li {
  margin-top: .9rem;
}

.nf-steps li::before {
  content: counter(nf-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--nf-sage);
  color: var(--nf-green-darker);
  font-family: 'Bitter', Georgia, serif;
  font-size: .95rem;
  font-weight: 700;
}

/* -- Merkmalsliste (Aufwand, Material, Kosten, Jahreszeit) -------------- */
.nf-meta {
  display: grid;
  gap: .75rem 1.5rem;
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--nf-line);
  border-radius: var(--bs-border-radius-lg);
  background: var(--nf-surface);
}

.nf-meta dt {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--nf-ink-muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nf-meta dd {
  margin: .1rem 0 0;
  font-weight: 600;
}

@media (min-width: 576px) {
  .nf-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .nf-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -- Hinweiskasten ------------------------------------------------------ */
.nf-note {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--nf-clay);
  border-radius: .5rem;
  background: var(--nf-warm);
}

.nf-note__icon {
  flex: none;
  color: var(--nf-clay);
  font-size: 1.1rem;
  line-height: 1.5;
}

.nf-note p:last-child {
  margin-bottom: 0;
}

/* -- Wortwolke ---------------------------------------------------------- */
.nf-words {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 1.25rem 0;
  list-style: none;
}

.nf-words li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--nf-line);
  border-radius: 50rem;
  background: var(--nf-surface);
  font-size: .95rem;
  font-weight: 600;
}

.nf-words li i {
  color: var(--nf-green);
}

/* -- Handlungsaufforderung am Seitenende -------------------------------- */
.nf-cta {
  background: var(--nf-green-deep);
  color: var(--nf-sage);
}

.nf-cta h2 {
  color: #fff;
}

/* -- Fusszeile ---------------------------------------------------------- */
.nf-footer {
  background: var(--nf-green-darker);
  color: var(--nf-sage);
}

.nf-footer h2 {
  color: #fff;
  font-size: 1.05rem;
}

.nf-footer a {
  color: var(--nf-sage);
  text-decoration: none;
}

.nf-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.nf-footer__legal {
  border-top: 1px solid rgba(219, 231, 207, .22);
}

/* -- Honigtopf: sichtbar fuer Bots, unsichtbar fuer Menschen ------------
   Bewusst kein display:none - das ueberspringen viele Bots gezielt.        */
.nf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* == 70 BOOTSTRAP-KOMPONENTEN EINFAERBEN =================================
   Diese lesen --bs-primary NICHT. Bootstrap kompiliert dort feste Hexwerte,
   deshalb muss jede Komponente ueber ihre eigenen Variablen gesetzt werden. */

.btn {
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.btn-primary {
  --bs-btn-bg: #2C6140;
  --bs-btn-border-color: #2C6140;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1B3A27;
  --bs-btn-hover-border-color: #1B3A27;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #152D1E;
  --bs-btn-active-border-color: #152D1E;
  --bs-btn-disabled-bg: #7E9186;
  --bs-btn-disabled-border-color: #7E9186;
}

.btn-outline-primary {
  --bs-btn-color: #2C6140;
  --bs-btn-border-color: #2C6140;
  --bs-btn-hover-bg: #2C6140;
  --bs-btn-hover-border-color: #2C6140;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1B3A27;
  --bs-btn-active-border-color: #1B3A27;
}

.btn-clay {
  --bs-btn-bg: #8A4B12;
  --bs-btn-border-color: #8A4B12;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #6B390D;
  --bs-btn-hover-border-color: #6B390D;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #6B390D;
}

/* Auf dunklem Grund braucht der Zweitbutton hellen Rand und Text. */
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .7);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #1B3A27;
}

.card {
  --bs-card-border-color: var(--nf-line);
  --bs-card-border-radius: 1.25rem;
  --bs-card-inner-border-radius: 1.15rem;
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-bg: var(--nf-surface);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--nf-shadow-lift);
}

.card-title {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 600;
}

.nf-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--nf-soft);
  color: var(--nf-green);
  font-size: 1.15rem;
}

.accordion {
  --bs-accordion-border-color: var(--nf-line);
  --bs-accordion-btn-padding-y: 1.1rem;
  --bs-accordion-btn-color: var(--nf-ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: var(--nf-soft);
  --bs-accordion-active-color: var(--nf-green-deep);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-y: .5rem;
}

.accordion-button {
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
}

.form-control,
.form-select {
  --bs-border-color: var(--nf-line-strong);
  --bs-border-radius: .75rem;
  padding: .7rem .9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nf-green);
  box-shadow: 0 0 0 .1875rem rgba(180, 83, 10, .35);
}

.form-label {
  margin-bottom: .35rem;
  font-weight: 600;
}

.form-text {
  color: var(--nf-ink-muted);
}

.invalid-feedback {
  color: var(--nf-error);
  font-weight: 600;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: var(--nf-error);
}

.form-check-input:checked {
  background-color: var(--nf-green);
  border-color: var(--nf-green);
}

.alert-success {
  --bs-alert-bg: var(--nf-success-soft);
  --bs-alert-border-color: var(--nf-success);
  --bs-alert-color: var(--nf-success);
}

.alert-danger {
  --bs-alert-bg: var(--nf-error-soft);
  --bs-alert-border-color: var(--nf-error);
  --bs-alert-color: var(--nf-error);
}

.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: .8em;
  --bs-badge-padding-y: .45em;
}

.nf-badge--ready {
  background: var(--nf-sage);
  color: var(--nf-green-darker);
}

.nf-badge--planned {
  background: var(--nf-sand);
  color: var(--nf-clay-deep);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--nf-ink-muted);
  --bs-breadcrumb-item-active-color: var(--nf-ink-muted);
  --bs-breadcrumb-font-size: .9rem;
  --bs-breadcrumb-margin-bottom: 0;
}

.navbar {
  --bs-navbar-color: var(--nf-ink-muted);
  --bs-navbar-hover-color: var(--nf-green);
  --bs-navbar-active-color: var(--nf-green-deep);
  --bs-navbar-padding-y: .85rem;
}

.navbar-nav .nav-link {
  font-weight: 600;
}

.navbar-nav .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .35em;
}

.offcanvas {
  --bs-offcanvas-bg: var(--nf-paper);
  --bs-offcanvas-width: 20rem;
}

.table {
  --bs-table-bg: transparent;
}


/* == 90 HILFSKLASSEN =====================================================
   Einziger Abschnitt, in dem !important erlaubt ist.                       */

.nf-text-muted {
  color: var(--nf-ink-muted) !important;
}

.nf-bg-surface {
  background: var(--nf-surface) !important;
}


/* == 99 DRUCK ============================================================= */

@media print {
  .nf-header,
  .nf-footer,
  .nf-cta,
  .nf-skip,
  .btn {
    display: none !important;
  }
  .fa-solid,
  .fa-brands,
  .fa-regular {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }
}