/* Schnittfreier Herbst · gebündelt aus vorlage-1.0 (02_arbeit/website/vorlage/css). Nicht von Hand ändern, sondern in der Vorlage und neu bauen. */

/* ---- fonts.css ---- */
/* Schriften lokal (keine Verbindung zu Google). Nur latin und latin-ext.
   Kufam: Überschriften · Work Sans: Fließtext */

@font-face {
  font-family: 'Kufam';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kufam-italic-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kufam-italic-latin.woff2") format('woff2');
  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: 'Kufam';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/kufam-italic-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/kufam-italic-latin.woff2") format('woff2');
  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: 'Kufam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin.woff2") format('woff2');
  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: 'Kufam';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin.woff2") format('woff2');
  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: 'Kufam';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin.woff2") format('woff2');
  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: 'Kufam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/kufam-normal-latin.woff2") format('woff2');
  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: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin.woff2") format('woff2');
  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: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin.woff2") format('woff2');
  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: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin.woff2") format('woff2');
  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: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin-ext.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/work-sans-normal-latin.woff2") format('woff2');
  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;
}

/* ---- tokens.css ---- */
/* Design-Tokens · Schnittfreier Herbst
   Einzige Stelle für Farb- und Maßwerte. Farben folgen dem Farbsystem 1.2
   (farbsystem.html), Namen und Hex-Werte bleiben identisch (--sfh-*).
   Alles andere im Projekt nutzt Prefix --sh-. */

:root {
  /* Logo */
  --sfh-orange: #E42D00;
  --sfh-pink: #FF0076;
  --sfh-gelb: #F7AF03;
  --sfh-aubergine: #8C0041;

  /* Web */
  --sfh-aubergine-tief: #53002C;
  --sfh-tannengruen: #1C3A3A;
  --sfh-blattgruen: #4A6E2F;
  --sfh-blattgruen-dunkel: #3A5824;
  --sfh-orange-text: #C42700;
  --sfh-orange-hell: #F6DFD9;

  /* Neutral */
  --sfh-text: #24382C;
  --sfh-text-grau: #506056;
  --sfh-linie: #DEDCD3;
  --sfh-sand: #F5F4EF;
  --sfh-weiss: #FFFFFF;

  /* Ableitungen, die im freigegebenen Layout vorkommen, im Farbsystem aber nicht benannt sind */
  --sfh-orange-text-dunkel: #A82A06;   /* Link-Hover */
  --sfh-blattgruen-tief: #2F4A1C;      /* Hover Absender-Link */
  --sfh-blattgruen-hell: #E6EEDD;      /* Hover Outline-Button */
  --sfh-salbei-hell: #DEE5D9;          /* freie Monate der Zeitleiste */
  --sfh-tuerkis: #0C6B52;              /* Kicker Kommunen, Materialart */
  --sfh-smaragd: #009C5A;              /* Label im Absenderband */
  --sfh-text-tief: #243038;            /* Linie Kommunen */
  --sfh-text-zitat: #293A1C;           /* Zitatlinie Warum */
  --sfh-rahmen-knopf: #C9D3DE;         /* Rahmen Menü-Knopf */
  --sfh-linie-hell: #E6EBF1;           /* Linien im Mobilmenü */
  --sfh-karte-grund: #E8EBE4;          /* Fläche der Karte */
  --sfh-formular-grund: #F6FFF0;       /* Grund der Formularkarte (Mitmachen) */
  --sfh-video-grund: #1B2429;          /* Grund der Videovorschau */

  /* Auf dunklen Flächen */
  --sfh-pfirsich: #E8A87C;             /* Kicker Pflanzentafel */
  --sfh-himmel: #A9C8E8;               /* Kicker Mitmachen */
  --sfh-lachs: #FAC7B8;                /* Schrittnummern Mitmachen */
  --sfh-schrift-tafel: #DED6C4;
  --sfh-schrift-tafel-hell: #FBF6EA;
  --sfh-schrift-tafel-text: #C7BDA8;
  --sfh-schrift-tafel-leise: #A79C86;
  --sfh-schrift-tafel-label: #8E836E;
  --sfh-schrift-mitmachen: #C3D6EB;
  --sfh-schrift-mitmachen-grund: #DCE7F3;
  --sfh-schwarz: #000000;               /* Navigation */

  /* Schriften */
  --sh-schrift-text: "Work Sans", system-ui, sans-serif;
  --sh-schrift-titel: "Kufam", system-ui, sans-serif;
  --sh-schrift-mono: ui-monospace, Menlo, monospace;

  /* Maße */
  --sh-breite: 1180px;
  --sh-rand: 5vw;
  --sh-abstand-sektion: clamp(46px, 7vw, 88px);
  --sh-radius: 4px;
  --sh-bewegung: .38s cubic-bezier(.4, 0, .2, 1);

  /* Umbruchpunkte (für @media, hier nur zur Doku):
     --sh-bp-nav: 1380px (Navigation wird Menü-Knopf)
     --sh-bp-absender: 1100px (Text neben dgg1822.de)
     --sh-bp-mitmachen: 860px (Mitmachen einspaltig, Korrektur gegenüber Prototyp) */
}

/* ---- base.css ---- */
/* Grundlagen: Reset, Typografie, Buttons, geteilte Bausteine */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--sfh-sand);
  color: var(--sfh-text);
  font-family: var(--sh-schrift-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sfh-orange-text);
  text-decoration: none;
}

a:hover {
  color: var(--sfh-orange-text-dunkel);
}

:focus-visible {
  outline: 2.5px solid var(--sfh-orange-text);
  outline-offset: 3px;
}

h1 b, h1 strong,
h2 b, h2 strong,
h3 b, h3 strong {
  font-weight: 700;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

button {
  font: inherit;
}

.sh-visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hilfe zum Prüfen: ?ids an die Adresse hängen, header.js setzt die Klasse */
.zeige-ids [data-sek] {
  position: relative;
  outline: 2px dashed var(--sfh-pink);
  outline-offset: -2px;
}

.zeige-ids [data-sek]::before {
  content: attr(data-sek);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 50;
  background: var(--sfh-pink);
  color: var(--sfh-weiss);
  font: 600 13px/1 var(--sh-schrift-text);
  padding: 6px 10px;
  letter-spacing: .04em;
}

/* Buttons */
.sh-btn {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--sh-radius);
  background-color: var(--sfh-blattgruen);
  color: var(--sfh-weiss);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.sh-btn:hover {
  background-color: var(--sfh-blattgruen-dunkel);
  color: var(--sfh-weiss);
}

.sh-btn--klein {
  padding: 8px 14px;
  font-size: 14px;
  flex-shrink: 0;
  white-space: nowrap;
}

.sh-btn--gross {
  padding: 11px 20px;
  font-size: 15.5px;
}

.sh-btn--outline {
  padding: 10px 18px;
  border: 1px solid var(--sfh-blattgruen);
  background-color: transparent;
  color: var(--sfh-blattgruen);
  font-size: 15.5px;
}

.sh-btn--outline:hover {
  background-color: var(--sfh-blattgruen-hell);
  color: var(--sfh-blattgruen-dunkel);
}

/* Kicker: kleine Überschrift über der Headline */
.sh-kicker {
  margin-bottom: 16px;
  color: var(--sfh-orange-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.sh-kicker--text { color: var(--sfh-text); }
.sh-kicker--gruen { color: var(--sfh-blattgruen); }
.sh-kicker--tuerkis { color: var(--sfh-tuerkis); }
.sh-kicker--pfirsich { color: var(--sfh-pfirsich); }
.sh-kicker--himmel { color: var(--sfh-himmel); }
.sh-kicker--gross { margin-bottom: 18px; font-size: 12.5px; }
.sh-kicker--eng { margin-bottom: 14px; }

/* Headline (h2) und Zwischenüberschrift (h3) */
.sh-headline {
  font-family: var(--sh-schrift-titel);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.sh-zwischentitel {
  font-family: var(--sh-schrift-titel);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Foto mit Seitenverhältnis */
.sh-foto {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--sh-radius);
}

.sh-bildunterschrift {
  margin-top: 8px;
  color: var(--sfh-text-grau);
  font-size: 13.5px;
  line-height: 1.45;
}

@keyframes sh-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- layout.css ---- */
/* Gerüst: Sektion, Container, Raster */

.sh-sektion {
  padding: var(--sh-abstand-sektion) var(--sh-rand);
}

.sh-sektion--weiss { background-color: var(--sfh-weiss); }
.sh-sektion--sand { background-color: var(--sfh-sand); }

.sh-container {
  max-width: var(--sh-breite);
  margin: 0 auto;
}

/* Mehrspaltiges Raster, bricht von selbst um (Mindestbreite je Spalte per --sh-spalte, nie breiter als der Platz) */
.sh-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--sh-spalte, 300px), 100%), 1fr));
  gap: var(--sh-luecke, clamp(28px, 4vw, 52px));
  align-items: var(--sh-ausrichtung, start);
}

/* ---- components/absender.css ---- */
/* 01 Absender: DGG-Band ganz oben */
.sh-absender {
  position: relative;
  z-index: 21;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  height: 49px;
  padding: 9px var(--sh-rand);
  border-bottom: 1px solid var(--sfh-linie);
  background-color: var(--sfh-weiss);
  box-shadow: 0 4px 12px -3px rgba(36, 48, 56, .14);
  font-size: 14px;
}

.sh-absender__mitte {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.sh-absender__logo {
  display: block;
  height: 33px;
  width: auto;
}

.sh-absender__text {
  font-size: clamp(12px, 1.4vw, 14px);
  white-space: nowrap;
}

.sh-absender__name {
  font-weight: 600;
}

.sh-absender__label {
  padding-left: 12px;
  border-left: 1px solid var(--sfh-linie);
  color: var(--sfh-smaragd);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sh-absender__link {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sfh-blattgruen);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.sh-absender__link:hover {
  color: var(--sfh-blattgruen-tief);
}

.sh-absender__pfeil {
  display: block;
  width: 24px;
  height: 24px;
}

@media (max-width: 1099px) {
  .sh-absender__link-text { display: none; }
}

/* Handy: Band wächst mit dem Inhalt, Label entfällt (Korrektur gegenüber dem Prototyp) */
@media (max-width: 600px) {
  .sh-absender {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 49px;
    padding: 8px 4vw;
  }

  .sh-absender__mitte {
    grid-column: 1;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .sh-absender__logo { height: 28px; flex-shrink: 0; }
  .sh-absender__text { font-size: 12px; line-height: 1.35; white-space: normal; }
  .sh-absender__label { display: none; }
  .sh-absender__link { grid-column: 2; }
}

/* ---- components/topband.css ---- */
/* 01a Top-Banner: Band unter der DGG-Zeile (nur Startseite). Seitenrand und Pfeil-Achse wie .sh-absender */
.sh-topband {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 52px;
  padding: 10px var(--sh-rand);
  background-color: var(--sfh-orange);
  color: var(--sfh-weiss);
  font-size: 14px;
}

.sh-topband__titel {
  flex: 0 1 auto;
  font-weight: 700;
}

.sh-topband__byline {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-topband__pfeil {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
}

.sh-topband:hover .sh-topband__titel {
  text-decoration: underline;
}

/* Tablet: Titel und Byline untereinander */
@media (max-width: 860px) {
  .sh-topband {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 2px;
  }

  .sh-topband__byline {
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
  }

  .sh-topband__pfeil {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Handy: Byline entfällt, Titel bis zu zwei Zeilen */
@media (max-width: 600px) {
  .sh-topband { padding: 8px 4vw; }
  .sh-topband__byline { display: none; }
}

/* ---- components/header.css ---- */
/* 02 Header: Logo-Box, Navigation, Button. Zustand „klein" setzt header.js beim Scrollen */
.sh-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
  padding: 14px var(--sh-rand) 14px 0;
  background: var(--sfh-weiss);
  transition: box-shadow var(--sh-bewegung);
}

/* WordPress wickelt den Kopf in ein div.wp-block-template-part (nur so hoch wie Absender + Header).
   sticky haftet nur innerhalb des Elternelements; ohne eigene Box ist es die ganze Seite. */
.wp-block-template-part:has(> .sh-header) {
  display: contents;
}

.sh-header--klein {
  box-shadow: 0 3px 12px -6px rgba(36, 48, 56, .16);
}

.sh-header__marke {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(130px, 15vw, 250px);
  height: 44px;
  margin-right: 28px;
}

.sh-header__logobox {
  position: absolute;
  left: 0;
  top: -14px;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 317px;
  height: 151px;
  padding: 14px 30px 16px;
  border-radius: 0 0 6px 0;
  background: var(--sfh-weiss);
  transition: all var(--sh-bewegung);
}

.sh-header--klein .sh-header__logobox {
  width: 150px;
  height: 72px;
  padding: 14px 15px;
}

.sh-header__logo {
  display: block;
  width: 100%;
  height: auto;
  transition: all var(--sh-bewegung);
}

.sh-header__nav {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  min-width: 0;
  color: var(--sfh-schwarz);
  font-size: clamp(13.5px, 1.1vw, 15px);
  font-weight: 500;
}

.sh-header__liste {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: clamp(14px, 1.45vw, 20px);
  min-width: 0;
}

.sh-header__link {
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  color: var(--sfh-schwarz);
  font-weight: 500;
  white-space: nowrap;
}

.sh-header__link:hover {
  border-bottom-color: var(--sfh-orange-text);
  color: var(--sfh-orange-text);
}

/* Untermenü: öffnet bei Hover und Tastaturfokus. Unter 1380 px zeigt das Menü die Unterpunkte eingerückt */
.sh-header__gruppe { position: relative; }

.sh-header__link--unter::after {
  content: "";
  display: inline-block;
  width: .38em;
  height: .38em;
  margin: 0 0 .2em .5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.sh-header__unter {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 21;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
  box-shadow: 0 12px 28px -10px rgba(36, 48, 56, .3);
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

.sh-header__gruppe:hover > .sh-header__unter,
.sh-header__gruppe:focus-within > .sh-header__unter {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.sh-header__unter-link {
  display: block;
  padding: 9px 18px;
  color: var(--sfh-schwarz);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.sh-header__unter-link:hover {
  background: var(--sfh-sand);
  color: var(--sfh-orange-text);
}

.sh-header__menue-wrap {
  flex: 1;
  display: none;
  justify-content: flex-end;
}

.sh-header__menue-knopf {
  padding: 7px 14px;
  border: 1px solid var(--sfh-rahmen-knopf);
  border-radius: var(--sh-radius);
  background: none;
  color: var(--sfh-text);
  font-size: 14px;
  cursor: pointer;
}

/* Aufgeklapptes Menü (unter 1380 px) */
.sh-menue {
  position: sticky;
  top: 72px;
  z-index: 19;
  padding: 4px var(--sh-rand) 18px;
  background: var(--sfh-weiss);
}

.sh-menue[hidden] { display: none; }

.sh-menue__liste {
  max-width: 420px;
  margin-left: auto;
}

.sh-menue__link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--sfh-linie-hell);
  color: var(--sfh-text);
  font-size: 16px;
}

.sh-menue__link:hover {
  border-bottom-color: var(--sfh-orange-text);
  color: var(--sfh-orange-text);
}

.sh-menue__link--unter {
  padding-left: 18px;
  color: var(--sfh-text-grau);
  font-size: 15px;
}

.sh-header__cta-kurz { display: none; }

@media (max-width: 1379px) {
  .sh-header__liste { display: none; }
  .sh-header__menue-wrap { display: flex; }
}

/* Handy: kleine Logo-Box, kurzer Button, Menü-Knopf bleibt sichtbar (Korrektur gegenüber dem Prototyp) */
@media (max-width: 600px) {
  .sh-header {
    gap: 10px;
    padding: 10px 4vw 10px 0;
  }

  .sh-header__marke {
    width: 112px;
    margin-right: 12px;
  }

  .sh-header__logobox,
  .sh-header--klein .sh-header__logobox {
    top: -10px;
    width: 112px;
    height: 62px;
    padding: 8px 10px;
  }

  .sh-header__nav { gap: 8px; }
  .sh-header__menue-knopf { padding: 6px 10px; font-size: 13.5px; }
  .sh-header__nav .sh-btn { padding: 8px 12px; font-size: 13.5px; }
  .sh-header__cta-voll { display: none; }
  .sh-header__cta-kurz { display: inline; }
  .sh-menue { top: 64px; }
}

@media (min-width: 1380px) {
  .sh-menue { display: none; }
}

/* ---- components/intro.css ---- */
/* 03 Intro: Headline, Foto, Zeitleiste */
.sh-intro {
  padding: 120px var(--sh-rand) 40px;
  background: var(--sfh-sand) url("../img/zierstengel-gras-grau.svg") no-repeat -24px bottom;
  background-size: auto 62%;
}

.sh-intro__raster {
  --sh-spalte: 320px;
  --sh-luecke: clamp(28px, 4vw, 54px);
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-intro__headline {
  margin-bottom: 20px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(46px, 7vw, 78px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.sh-intro__text {
  max-width: 52ch;
  margin-bottom: 14px;
  font-size: 16px;
}

.sh-intro__text--fett {
  margin-bottom: 30px;
  font-weight: 600;
}

.sh-intro__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.sh-intro__foto {
  aspect-ratio: 1 / 1;
}

/* Mit Aktion: Foto niedriger, Banner darunter, rechte Spalte wächst nach unten */
.sh-intro__rechts {
  display: grid;
  gap: 16px;
}

.sh-intro__foto--kurz {
  aspect-ratio: 5 / 3;
}

.sh-aktion {
  padding: 22px 24px 24px;
  border-radius: var(--sh-radius);
  background-color: var(--sfh-orange-hell);
}

.sh-aktion__kicker {
  margin-bottom: 8px;
}

.sh-aktion__headline {
  margin-bottom: 8px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.sh-aktion__text {
  max-width: 52ch;
  margin-bottom: 16px;
  font-size: 15px;
}

.sh-aktion__button {
  overflow-wrap: anywhere;
}

/* Zeitleiste: zwölf Monate */
.sh-zeitleiste {
  max-width: var(--sh-breite);
  margin: clamp(34px, 5vw, 60px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--sfh-linie);
}

.sh-zeitleiste__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.sh-zeitleiste__label {
  color: var(--sfh-text-grau);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.sh-zeitleiste__info,
.sh-zeitleiste__hinweis {
  color: var(--sfh-text-grau);
  font-size: 15px;
}

.sh-zeitleiste__info b,
.sh-zeitleiste__hinweis b {
  color: var(--sfh-text);
  font-weight: 600;
}

.sh-zeitleiste__hinweis {
  margin-top: 12px;
}

.sh-zeitleiste__monate {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}

.sh-zeitleiste__monat {
  padding: 11px 2px;
  background-color: var(--sfh-salbei-hell);
  color: var(--sfh-text-grau);
  font-size: 13px;
  text-align: center;
}

.sh-zeitleiste__monat--aktiv,
.sh-zeitleiste__monat--uebergang {
  font-weight: 500;
}

.sh-zeitleiste__monat--aktiv {
  background-color: var(--sfh-orange-text);
  color: var(--sfh-weiss);
}

.sh-zeitleiste__monat--uebergang {
  background-color: var(--sfh-orange-hell);
  color: var(--sfh-orange-text);
}

.sh-zeitleiste__monat--jetzt {
  animation: sh-puls 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sh-zeitleiste__monat--jetzt { animation: none; }
}

/* Handy: weniger Kopfraum, kleinere Monatskürzel (Korrektur gegenüber dem Prototyp) */
@media (max-width: 600px) {
  .sh-intro { padding-top: 56px; }
  .sh-zeitleiste__monat { padding: 9px 0; font-size: 11px; }
}

/* ---- components/zaehler.css ---- */
/* 04 Zähler: Kennzahlen auf Aubergine. Die Einträge liefert das Plugin sh-karte, die Klassen sind die Schnittstelle */
.sh-zaehler {
  padding: clamp(30px, 4vw, 44px) var(--sh-rand);
  background-color: var(--sfh-aubergine-tief);
}

.sh-zaehler__raster {
  --sh-spalte: 160px;
  --sh-luecke: 26px;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-zaehler__eintrag {
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, .2);
}

.sh-zaehler__icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  opacity: .5;
}

.sh-zaehler__zahl {
  display: block;
  color: var(--sfh-weiss);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1;
}

.sh-zaehler__label {
  display: block;
  margin-top: 8px;
  color: var(--sfh-weiss);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- components/warum.css ---- */
/* 05 Warum: „Anders sehen", Gegenüberstellungen, Zitat */
.sh-warum__raster {
  --sh-spalte: 300px;
  --sh-luecke: clamp(28px, 4vw, 56px);
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-warum__spalte--mitte {
  align-self: center;
}

.sh-warum__headline {
  max-width: 20ch;
  margin-bottom: 18px;
}

.sh-warum__text {
  max-width: 46ch;
  margin-bottom: 22px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-warum__bild { margin: 0; }
.sh-warum__bild--oben { margin-bottom: 28px; }

.sh-warum__foto--eins {
  aspect-ratio: 5 / 4;
  object-position: 40% 45%;
}

.sh-warum__foto--zwei {
  aspect-ratio: 16 / 9;
  object-position: 50% 50%;
}

.sh-warum__paare {
  border-top: 1px solid var(--sfh-linie);
}

.sh-warum__paar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--sfh-linie);
  font-size: 16px;
}

.sh-warum__alt {
  color: var(--sfh-text-grau);
  text-decoration: line-through;
}

.sh-warum__paare--ohne-strich .sh-warum__alt {
  text-decoration: none;
}

.sh-warum__pfeil {
  color: var(--sfh-orange-text);
}

.sh-warum__neu {
  font-weight: 500;
}

.sh-warum__zitat {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 2px solid var(--sfh-text-zitat);
  color: var(--sfh-orange-text);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(21px, 2.3vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.sh-warum__zitat b {
  font-weight: 700;
}

/* ---- components/pflanzentafel.css ---- */
/* 06 Pflanzentafel: Infografik auf Aubergine */
.sh-tafel {
  padding: clamp(40px, 6vw, 76px) var(--sh-rand);
  background-color: var(--sfh-aubergine-tief);
  color: var(--sfh-schrift-tafel);
}

.sh-tafel__headline {
  max-width: 26ch;
  margin-bottom: clamp(24px, 3.5vw, 40px);
  color: var(--sfh-schrift-tafel-hell);
}

.sh-tafel__bild {
  width: 100%;
  margin: 0;
}

.sh-tafel__grafik {
  display: block;
  width: 100%;
  height: auto;
}

.sh-tafel__unterschrift {
  margin-top: 12px;
  color: var(--sfh-schrift-tafel-label);
  font-family: var(--sh-schrift-mono);
  font-size: 11px;
  letter-spacing: .07em;
}

.sh-tafel__texte {
  --sh-spalte: 280px;
  --sh-luecke: clamp(20px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 36px);
}

.sh-tafel__text {
  margin-bottom: 14px;
  color: var(--sfh-schrift-tafel-text);
  font-size: 16.5px;
}

.sh-tafel__text--leise {
  margin-bottom: 0;
  color: var(--sfh-schrift-tafel-leise);
  font-size: 15px;
}

/* ---- components/mitmachen.css ---- */
/* 07 Mitmachen: drei Schritte plus Formularkarte. Das Formular selbst liefert das Plugin sh-karte */
.sh-mitmachen {
  padding: var(--sh-abstand-sektion) var(--sh-rand);
  background-color: var(--sfh-tannengruen);
  color: var(--sfh-schrift-mitmachen-grund);
}

.sh-mitmachen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.sh-mitmachen__schritte {
  display: grid;
  gap: 26px;
}

.sh-mitmachen__headline {
  max-width: 24ch;
  color: var(--sfh-weiss);
}

.sh-mitmachen__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border: 1.5px solid var(--sfh-lachs);
  border-radius: 50%;
  color: var(--sfh-lachs);
  font-size: 14px;
  font-weight: 600;
}

.sh-mitmachen__titel {
  display: block;
  margin-bottom: 4px;
  color: var(--sfh-weiss);
  font-size: 17px;
  font-weight: 600;
}

.sh-mitmachen__text {
  color: var(--sfh-schrift-mitmachen);
  font-size: 15.5px;
}

.sh-mitmachen__karte {
  /* Die Karte ist der Grund des Formulars: helles Grün auf Tannengrün, Schrift schwarz, die Felder darin weiß.
     Die Tafel des Plugins liegt bündig darin (siehe sh-karte, assets/css/melde.css). */
  --tafel-grund: transparent;
  --tafel-abstand: 0;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--sh-radius);
  background: var(--sfh-formular-grund);
  color: var(--sfh-schwarz);
}

.sh-mitmachen__form-titel {
  margin-bottom: 6px;
  color: var(--sfh-schwarz);
}

.sh-mitmachen__form-intro {
  margin-bottom: 22px;
  color: var(--sfh-schwarz);
  font-size: 15px;
}

.sh-mitmachen__hinweis {
  margin-top: 16px;
  color: var(--sfh-schwarz);
  font-size: 14px;
  line-height: 1.55;
}

/* Korrektur gegenüber dem Prototyp: auf schmalen Schirmen einspaltig */
@media (max-width: 860px) {
  .sh-mitmachen__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ---- components/karte.css ---- */
/* 08 Karte: Text, Rahmen mit Kopf, Kartenfläche und Legende. Rahmen und Fläche liefert das Plugin sh-karte */
.sh-karte {
  position: relative;
  overflow: hidden;
  padding: var(--sh-abstand-sektion) var(--sh-rand);
  background-color: var(--sfh-sand);
}

.sh-karte__deko {
  position: absolute;
  right: 0;
  top: clamp(20px, 3vw, 44px);
  width: clamp(300px, 40vw, 540px);
  height: auto;
  transform: translateX(50%);
  opacity: .5;
  pointer-events: none;
}

.sh-karte__inhalt {
  position: relative;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-karte__headline {
  max-width: 26ch;
  margin-bottom: 16px;
}

.sh-karte__text {
  max-width: 56ch;
  margin-bottom: 14px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-karte__text--fett {
  margin-bottom: 30px;
  color: var(--sfh-text);
  font-weight: 600;
}

.sh-karte__rahmen {
  border: 1px solid var(--sfh-linie);
  background: var(--sfh-weiss);
}

.sh-karte__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sfh-linie);
}

.sh-karte__kopf-titel {
  color: var(--sfh-text-grau);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sh-karte__marke {
  padding: 4px 9px;
  border-radius: var(--sh-radius);
  background: var(--sfh-blattgruen);
  color: var(--sfh-weiss);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sh-karte__flaeche {
  position: relative;
  z-index: 0;
  height: clamp(320px, 44vw, 480px);
  background: var(--sfh-karte-grund);
}

.sh-karte__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--sfh-linie);
  color: var(--sfh-text-grau);
  font-size: 14.5px;
}

.sh-karte__legende-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-karte__punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sfh-weiss);
  border-radius: 50%;
  background: var(--sfh-aubergine-tief);
  box-shadow: 0 0 0 1px var(--sfh-aubergine-tief);
  opacity: .85;
}

.sh-karte__punkt--mittel { width: 14px; height: 14px; }
.sh-karte__punkt--gross { width: 20px; height: 20px; }

.sh-karte__hinweis {
  max-width: 70ch;
  margin-top: 14px;
  color: var(--sfh-text-grau);
  font-size: 14px;
}

/* Seite Grüne Landkarte: Der Kartenrahmen läuft über die volle Seitenbreite, 60 px Rand links und rechts.
   Der Text darüber bleibt in der Containerbreite. Die Kante des Textes ergibt sich aus Seitenrand und
   Container, daher der Ausgleich über 50 % und 50cqw. Unter 861 px gilt der normale Seitenrand. */
.sh-karte--voll {
  container-type: inline-size;
}

/* Luft über dem Trenner-Icon darunter, wie bei .sh-trenner--oben. Der Core setzt den letzten Block im Inhalt auf
   margin-block-end: 0 (:root :where(.is-layout-flow) > :last-child), der Typ-Selektor hebt die Regel darüber. */
section.sh-karte.sh-karte--voll {
  margin-bottom: clamp(40px, 6vw, 72px);
}

@media (min-width: 861px) {
  .sh-karte--voll .sh-karte__rahmen,
  .sh-karte--voll .sh-karte__band {
    margin-inline: calc(50% - 50cqw - var(--sh-rand) + 60px);
  }
}

/* Seite Grüne Landkarte: Kopfzeile mit Byline und Button neben der Überschrift, Karte 20 % höher
   (44vw / 320 px / 480 px der Startseite mal 1,2). Unter 861 px stehen die Teile untereinander. */
.sh-karte__kopfzeile {
  display: grid;
  gap: 20px 40px;
  align-items: end;
  margin-bottom: 30px;
}

.sh-karte__kopfzeile .sh-karte__headline {
  margin-bottom: 0;
}

.sh-karte__aktion {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.sh-karte__byline {
  max-width: 28ch;
  color: var(--sfh-text);
  font-size: 16px;
  font-weight: 600;
}

/* Seite Grüne Landkarte: Band unter der Karte „Schon eingetragen?“. Links Überschrift und Text, rechts Button
   und Kurztext. Der Button führt auf /mein-eintrag/ (Plugin sh-karte), wo die Adresse eingegeben wird.
   Gleiche Breite wie der Kartenrahmen. Unter 861 px stehen die Teile untereinander. */
.sh-karte__band {
  display: grid;
  gap: 18px 40px;
  align-items: center;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--sfh-linie);
  border-left: 4px solid var(--sfh-blattgruen);
  border-radius: var(--sh-radius);
  background-color: var(--sfh-weiss);
}

.sh-karte__band-titel {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.sh-karte__band-text {
  max-width: 60ch;
  margin: 0;
  color: var(--sfh-text-grau);
  font-size: 16px;
}

.sh-karte__band-aktion {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 34ch;
}

.sh-karte__band-kurz {
  margin: 0;
  color: var(--sfh-text-grau);
  font-size: 14px;
}

@media (min-width: 861px) {
  .sh-karte__band {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.sh-karte--voll .sh-karte__flaeche {
  height: clamp(384px, 53vw, 576px);
}

@media (min-width: 861px) {
  .sh-karte__kopfzeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---- components/video.css ---- */
/* 09 Video: lädt erst nach Klick (video.js) */
.sh-video {
  position: relative;
  overflow: hidden;
  color: var(--sfh-text-grau);
}

.sh-video__raster {
  --sh-spalte: 300px;
  --sh-luecke: clamp(28px, 4vw, 52px);
  --sh-ausrichtung: center;
  position: relative;
  z-index: 1;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-video__headline {
  max-width: 24ch;
  margin-bottom: 16px;
  color: var(--sfh-text);
}

.sh-video__text {
  max-width: 44ch;
  color: var(--sfh-text-grau);
  font-size: 16.5px;
}

.sh-video__kopf,
.sh-video__breit {
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-video__kopf { margin-bottom: 28px; }

.sh-video--vollformat { padding: 0; }

.sh-video--vollformat .sh-video__figur {
  border: 0;
  border-radius: 0;
}

.sh-video__figur {
  overflow: hidden;
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
}

.sh-video__vorschau {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--sfh-video-grund) var(--sh-vorschau, url("../img/video-vorschau.jpg")) center / cover no-repeat;
  cursor: pointer;
}

.sh-video__schleier {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(20, 28, 32, .35);
}

.sh-video__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--sfh-blattgruen);
  color: var(--sfh-weiss);
  font-size: 20px;
}

.sh-video__hinweis {
  padding: 5px 10px;
  border-radius: var(--sh-radius);
  background: rgba(20, 28, 32, .6);
  color: var(--sfh-weiss);
  font-size: 13px;
}

.sh-video__rahmen {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.sh-video__unterschrift {
  padding: 11px 14px;
  border-top: 1px solid var(--sfh-linie);
  color: var(--sfh-text-grau);
  font-size: 13.5px;
}

/* ---- components/trenner.css ---- */
/* 10, 14, 18, 19 Trenner: Linie mit Icon im orangen Kreis */
.sh-trenner {
  padding: 0 var(--sh-rand);
  background: var(--sfh-weiss);
}

.sh-trenner--oben {
  padding-top: clamp(40px, 6vw, 72px);
}

.sh-trenner__innen {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-trenner__linie {
  flex: 1;
  height: 1px;
  background: var(--sfh-linie);
}

.sh-trenner__kreis {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sfh-orange-text);
}

.sh-trenner__icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* ---- components/wissen.css ---- */
/* 11 Wissen: Karten zum Nachlesen und Weitergeben */
.sh-wissen__headline {
  max-width: 26ch;
  margin-bottom: 32px;
}

.sh-wissen__raster {
  --sh-spalte: 260px;
  --sh-luecke: 20px;
  align-items: stretch;
}

.sh-wissen__aktionen {
  margin-top: 32px;
  text-align: center;
}

.sh-material {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sfh-linie);
}

.sh-material__bild {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.sh-material__bild--vogelbeere { object-position: 50% 55%; }
.sh-material__bild--karden { object-position: 60% 50%; }

/* Seite Materialien: Karten in fester Breite, eine einzelne füllt nicht die ganze Zeile */
.sh-materialien__liste { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 380px)); }
.sh-material__figur { margin: 0; }

.sh-material__koerper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.sh-material__art {
  color: var(--sfh-tuerkis);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sh-material__text {
  color: var(--sfh-text-grau);
  font-size: 15px;
}

.sh-material__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 15.5px;
  font-weight: 500;
}

/* ---- components/top-teaser.css ---- */
/* 19 Top-Teaser: ein Beitrag der Kategorie TOP als Doppelspalte. Mehrere Beiträge zeigen die Karten des Teasers (sh-material). */
/* Weißer Streifen über dem Trenner-Icon des Partnerbereichs darunter, wie bei .sh-trenner--oben. Ein Rand statt eines
   Außenabstands: Auf der Startseite hat main keinen Hintergrund, ein Abstand ließe das Sand der Seite durchscheinen. */
.sh-top {
  border-bottom: clamp(40px, 6vw, 72px) solid var(--sfh-weiss);
}

.sh-top__raster {
  --sh-spalte: 340px;
  --sh-ausrichtung: center;
}

.sh-top__headline {
  max-width: 24ch;
  margin-bottom: 16px;
}

.sh-top__text {
  max-width: 48ch;
  margin-bottom: 24px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-top__bild {
  aspect-ratio: 16 / 10;
}

/* ---- components/kommunen.css ---- */
/* 12 Kommunen */
.sh-kommunen__headline {
  max-width: 20ch;
  margin-bottom: 16px;
}

.sh-kommunen__text {
  max-width: 48ch;
  margin-bottom: 24px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-kommunen__bild {
  margin-bottom: 24px;
  aspect-ratio: 16 / 9;
}

.sh-kommunen__liste {
  display: grid;
  gap: 0;
}

.sh-kommunen__punkt {
  padding: 18px 0;
  border-top: 1px solid var(--sfh-linie);
}

.sh-kommunen__punkt:first-child { border-top: 1.5px solid var(--sfh-text-tief); }
.sh-kommunen__punkt:last-child { border-bottom: 1px solid var(--sfh-linie); }

.sh-kommunen__titel {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 600;
}

.sh-kommunen__beschreibung {
  color: var(--sfh-text-grau);
  font-size: 15.5px;
}

/* ---- components/newsletter.css ---- */
/* 13 Newsletter: Markup, Versand-Logik folgt später */
.sh-newsletter {
  padding: clamp(40px, 6vw, 72px) var(--sh-rand);
}

.sh-newsletter__headline {
  max-width: 24ch;
  margin-bottom: 14px;
}

.sh-newsletter__text {
  max-width: 46ch;
  color: var(--sfh-text-grau);
  font-size: 16.5px;
}

.sh-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
}

.sh-newsletter__feld {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
  color: var(--sfh-text);
  font: inherit;
  font-size: 15px;
}

.sh-newsletter__feld::placeholder {
  color: var(--sfh-text-grau);
  opacity: 1;
}

.sh-newsletter__hinweis {
  max-width: 56ch;
  margin-top: 14px;
  color: var(--sfh-text-grau);
  font-size: 14px;
}

.sh-newsletter__raster {
  --sh-luecke: clamp(26px, 4vw, 52px);
}

/* ---- components/dgg-band.css ---- */
/* 16 DGG-Band: Absender und Förderer unten */
.sh-band {
  padding: clamp(32px, 4vw, 52px) var(--sh-rand);
  background: var(--sfh-weiss);
}

.sh-band__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px clamp(28px, 5vw, 72px);
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.sh-band__eintrag {
  display: grid;
  gap: 14px;
  justify-items: center;
  align-content: start;
}

.sh-band__logo-link {
  display: flex;
  align-items: center;
  height: 96px;
}

.sh-band__logo {
  display: block;
  width: auto;
}

.sh-band__logo--dgg { height: 68px; }
.sh-band__logo--bfn { height: 96px; }

.sh-band__text {
  max-width: 30ch;
  color: var(--sfh-text);
  font-size: 17px;
  line-height: 1.4;
}

.sh-band__text b {
  font-weight: 600;
}

/* ---- components/partner.css ---- */
/* 15 Partner: Logos mittig */
.sh-partner {
  padding: clamp(32px, 4vw, 52px) var(--sh-rand);
  background: var(--sfh-weiss);
}

.sh-partner__titel {
  margin-bottom: 22px;
  color: var(--sfh-text-grau);
  font-size: 12px;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.sh-partner__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(24px, 4vw, 48px);
}

/* Vier Logos: ab 1280 px eine Reihe, darunter zwei mal zwei statt drei und eins allein */
@media (max-width: 1280px) {
  .sh-partner__liste {
    max-width: 580px;
    margin: 0 auto;
  }
}

.sh-partner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 120px;
  padding: 10px;
  background: var(--sfh-weiss);
}

.sh-partner__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- components/footer.css ---- */
/* 17 Footer */
.sh-footer {
  padding: clamp(40px, 6vw, 66px) var(--sh-rand) 0;
  background-color: var(--sfh-weiss);
  color: var(--sfh-text-grau);
  font-size: 15px;
}

.sh-footer__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 30px;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-footer__marke {
  grid-column: span 2;
  min-width: 0;
}

.sh-footer__logo-link {
  display: inline-block;
  margin-bottom: 16px;
}

.sh-footer__logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.sh-footer__adresse {
  line-height: 1.55;
}

.sh-footer__name {
  display: block;
  color: var(--sfh-text);
  font-weight: 600;
}

.sh-footer__adresse a {
  color: var(--sfh-blattgruen);
}

.sh-footer__adresse a:hover {
  color: var(--sfh-blattgruen-dunkel);
}

.sh-footer__social {
  display: flex;
  gap: 24px;
  justify-content: center;
  max-width: var(--sh-breite);
  margin: clamp(26px, 3vw, 40px) auto 0;
}

.sh-footer__social-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--sfh-blattgruen);
  color: var(--sfh-weiss);
  transition: background-color var(--sh-bewegung);
}

.sh-footer__social-link:hover {
  background-color: var(--sfh-aubergine);
  color: var(--sfh-weiss);
}

.sh-footer__social-link svg {
  width: 20px;
  height: 20px;
}

.sh-footer__spaltentitel {
  display: block;
  margin-bottom: 12px;
  color: var(--sfh-text);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sh-footer__link {
  display: block;
  padding: 3px 0;
  color: var(--sfh-text-grau);
}

.sh-footer__link:hover {
  color: var(--sfh-blattgruen);
}

.sh-footer__spaltentitel--link:hover {
  color: var(--sfh-blattgruen);
}

.sh-footer__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  max-width: var(--sh-breite);
  margin: clamp(26px, 3vw, 40px) auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--sfh-linie);
  font-size: 13.5px;
}

.sh-footer__zierleiste {
  height: 80px;
  margin: clamp(24px, 3vw, 36px) calc(-1 * var(--sh-rand)) 0;
  background-image: url("../img/zierleiste-pflanzen-ohne-boden.svg");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 400px 72px;
}

/* Handy: Adressblock über die volle Breite, kein Überlauf bei 320 px */
@media (max-width: 480px) {
  .sh-footer__marke { grid-column: 1 / -1; }
}

/* ---- components/plugin-platzhalter.css ---- */
/* Nur für die Vorlage: Platzhalterflächen für Inhalte, die das Plugin sh-karte liefert.
   Im Theme erscheint an dieser Stelle der Shortcode, diese Datei wird dort nicht geladen. */
.sh-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1.5px dashed var(--sfh-text-grau);
  border-radius: var(--sh-radius);
  color: var(--sfh-text-grau);
  font-size: 14px;
  text-align: center;
}

.sh-platzhalter--formular {
  min-height: 560px;
}

.sh-platzhalter--karte {
  height: 100%;
  border: 0;
  border-radius: 0;
}


/* ---- nur Theme: Unterseiten (Seitentitel und Freitext) ---- */
.sh-inhalt { padding: 48px var(--sh-rand) 80px; }
.sh-inhalt__titel { max-width: 44rem; margin: 0 auto 24px; font-family: var(--sh-schrift-titel); font-size: clamp(30px, 4vw, 50px); font-weight: 500; line-height: 1.1; }

/* ---- components/seiten.css ---- */
/* Inhaltsmodule für Unterseiten: Seitenintro, Text, Liste, Zitat, Downloads, Galerie, Banner

   Rhythmus: Jedes Modul hat oben und unten denselben Abstand (--sh-abstand-sektion).
   Zwei weiße Module hintereinander teilen sich einen Abstand statt zwei. Zwischen
   Überschrift und Inhalt stehen immer 28 px, vor einem Button ebenfalls 28 px. */

.sh-seite {
  --sh-kopf-abstand: 28px;
  background: var(--sfh-weiss);
}

.sh-seite .sh-sektion--weiss + .sh-sektion--weiss { padding-top: 0; }

.sh-seite__titel {
  max-width: calc(44rem + 2 * var(--sh-rand));
  margin: 120px auto 0;
  padding: 0 var(--sh-rand);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.1;
}

/* Seitenintro (oben Platz für das Logo, wie beim Intro der Startseite) */
.sh-seitenintro { padding-top: 120px; }

.sh-seitenintro__raster {
  --sh-spalte: 300px;
  --sh-ausrichtung: center;
}

.sh-seitenintro__headline {
  max-width: 22ch;
  margin-bottom: 16px;
}

.sh-seitenintro__text {
  max-width: 52ch;
  margin-bottom: 14px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-seitenintro__bild { aspect-ratio: 4 / 3; }

/* Text (Editor) */
.sh-freitext__innen { max-width: 44rem; }

.sh-freitext--links .sh-freitext__innen {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: start;
  max-width: var(--sh-breite);
}

.sh-freitext__headline { margin-bottom: var(--sh-kopf-abstand); }
.sh-freitext--links .sh-freitext__headline { margin: 0; }

@media (max-width: 760px) {
  .sh-freitext--links .sh-freitext__innen { grid-template-columns: 1fr; }
  .sh-freitext--links .sh-freitext__headline { margin-bottom: 12px; }
}

.sh-freitext__text > :first-child { margin-top: 0; }
.sh-freitext__text > :last-child { margin-bottom: 0; }
.sh-freitext__text p { margin: 0 0 1em; }

.sh-freitext__text h2,
.sh-freitext__text h3 {
  margin: 1.2em 0 .4em;
  font-family: var(--sh-schrift-titel);
  font-weight: 500;
}

/* H2 einheitlich wie .sh-headline */
.sh-freitext__text h2 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* H3 kleiner, wie .sh-zwischentitel */
.sh-freitext__text h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.sh-freitext__text ul,
.sh-freitext__text ol { margin: 0 0 1em; padding-left: 1.4em; }
.sh-freitext__text ul { list-style: disc; }
.sh-freitext__text ol { list-style: decimal; }
.sh-freitext__text li { margin-bottom: .35em; }
.sh-freitext__text a:not(.sh-btn) { color: var(--sfh-orange-text); text-decoration: underline; }
.sh-freitext__text a:not(.sh-btn):hover { color: var(--sfh-orange-text-dunkel); }
/* Kleines Logo im Fließtext (Impressum), Breite folgt der Höhe */
.sh-freitext__logo { display: block; width: auto; height: auto; max-height: 50px; margin: 0 0 .6em; }

.sh-freitext__text blockquote {
  margin: 1.4em 0;
  padding-left: 18px;
  border-left: 2px solid var(--sfh-text-zitat);
  font-style: italic;
}

/* Liste mit Überschrift */
.sh-liste__innen { max-width: 44rem; }
.sh-liste__headline { margin-bottom: var(--sh-kopf-abstand); }
.sh-liste__liste { counter-reset: punkt; }

.sh-liste__punkt {
  position: relative;
  padding: 12px 0 12px 34px;
  border-top: 1px solid var(--sfh-linie);
}

.sh-liste__punkt:last-child { border-bottom: 1px solid var(--sfh-linie); }

.sh-liste__liste--ul .sh-liste__punkt::before {
  content: "";
  position: absolute;
  top: 1.15em;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sfh-orange-text);
}

.sh-liste__liste--ol .sh-liste__punkt { counter-increment: punkt; }

.sh-liste__liste--ol .sh-liste__punkt::before {
  content: counter(punkt);
  position: absolute;
  left: 4px;
  color: var(--sfh-orange-text);
  font-family: var(--sh-schrift-titel);
  font-weight: 600;
}

/* Zitat */
.sh-zitat__innen { max-width: 44rem; }

.sh-zitat__text {
  padding-left: 18px;
  border-left: 2px solid var(--sfh-text-zitat);
  color: var(--sfh-orange-text);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(21px, 2.3vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.sh-zitat__text b { font-weight: 700; }

.sh-zitat__quelle {
  margin: 12px 0 0 20px;
  color: var(--sfh-text-grau);
  font-size: 14.5px;
}

/* Downloads */
.sh-download__headline { margin-bottom: var(--sh-kopf-abstand); }

.sh-download__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}

.sh-download__eintrag {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
}

.sh-download__art {
  margin-bottom: 8px;
  color: var(--sfh-tuerkis);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sh-download__titel {
  margin-bottom: 6px;
  font-family: var(--sh-schrift-titel);
  font-size: 19px;
  font-weight: 500;
}

.sh-download__text {
  margin-bottom: 14px;
  color: var(--sfh-text-grau);
  font-size: 15.5px;
}

.sh-download__link {
  margin-top: auto;
  color: var(--sfh-orange-text);
  font-weight: 600;
}

.sh-download__link:hover { color: var(--sfh-orange-text-dunkel); }

/* Bildergalerie */
.sh-galerie__headline { margin-bottom: var(--sh-kopf-abstand); }

.sh-galerie__raster {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--sh-galerie-spalten, 3), 1fr);
}

.sh-galerie__raster--2 { --sh-galerie-spalten: 2; }
.sh-galerie__raster--3 { --sh-galerie-spalten: 3; }
.sh-galerie__raster--4 { --sh-galerie-spalten: 4; }

@media (max-width: 860px) {
  .sh-galerie__raster--3,
  .sh-galerie__raster--4 { --sh-galerie-spalten: 2; }
}

@media (max-width: 520px) {
  .sh-galerie__raster { --sh-galerie-spalten: 1; }
}

.sh-galerie__figur { margin: 0; }
.sh-galerie__foto { aspect-ratio: 4 / 3; }

/* Banner, volle Breite */
.sh-banner { padding: var(--sh-abstand-sektion) var(--sh-rand); }
.sh-banner--gruen { background: var(--sfh-blattgruen); color: var(--sfh-weiss); }
.sh-banner--tanne { background: var(--sfh-tannengruen); color: var(--sfh-weiss); }
.sh-banner--aubergine { background: var(--sfh-aubergine); color: var(--sfh-weiss); }
.sh-banner--sand { background: var(--sfh-sand); color: var(--sfh-text); }

.sh-banner__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: var(--sh-breite);
  margin: 0 auto;
}

.sh-banner__text {
  max-width: 34ch;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
}

.sh-banner__text b { font-weight: 700; }

.sh-banner__unterzeile {
  margin-top: 10px;
  font-size: 17px;
  opacity: .9;
}

.sh-banner--gruen .sh-banner__link,
.sh-banner--tanne .sh-banner__link,
.sh-banner--aubergine .sh-banner__link {
  background: var(--sfh-weiss);
  color: var(--sfh-text);
}

/* Teaser-Reihe (manuell): Karten wie das Teaser-Modul, höchstens drei nebeneinander */
.sh-teaserreihe__headline { margin-bottom: var(--sh-kopf-abstand); }

.sh-teaserreihe__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .sh-teaserreihe__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .sh-teaserreihe__raster { grid-template-columns: minmax(0, 1fr); }
}

.sh-material__aktion {
  margin-top: auto;
  padding-top: 12px;
}

/* Beitragsliste (Aktuelles) */
.sh-material__titellink { color: inherit; }
.sh-material__titellink:hover { color: var(--sfh-orange-text); }
.sh-beitragsliste__leer { color: var(--sfh-text-grau); }

.sh-seitennavigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--sh-kopf-abstand, 28px);
}

.sh-seitennavigation__stand {
  color: var(--sfh-text-grau);
  font-size: 14.5px;
}

/* Optionaler Button unter einem Modul */
.sh-aktion { margin-top: var(--sh-kopf-abstand, 28px); }

/* Beitrag (Gutenberg-Inhalt): Textspalte unter dem Intro (Kopf = sh_seitenintro) */
.sh-beitrag { padding: var(--sh-abstand-sektion) var(--sh-rand); }

.sh-beitrag__inhalt,
.sh-beitrag__zurueck {
  max-width: 44rem;
  margin-right: auto;
  margin-left: auto;
}

.sh-beitrag__inhalt > * { margin-top: 0; margin-bottom: 1em; }
.sh-beitrag__inhalt h2,
.sh-beitrag__inhalt h3 {
  margin: 1.4em 0 .4em;
  font-family: var(--sh-schrift-titel);
  font-weight: 500;
}

.sh-beitrag__inhalt h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.08; letter-spacing: -.02em; }
.sh-beitrag__inhalt h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.01em; }
.sh-beitrag__inhalt ul,
.sh-beitrag__inhalt ol { padding-left: 1.4em; }
.sh-beitrag__inhalt ul { list-style: disc; }
.sh-beitrag__inhalt ol { list-style: decimal; }
.sh-beitrag__inhalt li { margin-bottom: .35em; }
.sh-beitrag__inhalt a:not(.wp-element-button) { color: var(--sfh-orange-text); text-decoration: underline; }

.sh-beitrag__inhalt blockquote {
  margin: 1.6em 0;
  padding-left: 18px;
  border-left: 2px solid var(--sfh-text-zitat);
  color: var(--sfh-orange-text);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(21px, 2.3vw, 28px);
  font-style: italic;
  line-height: 1.3;
}

.sh-beitrag__inhalt figure { margin-right: 0; margin-left: 0; }
.sh-beitrag__inhalt img { max-width: 100%; height: auto; border-radius: var(--sh-radius); }
.sh-beitrag__inhalt figcaption { margin-top: 8px; color: var(--sfh-text-grau); font-size: 13.5px; }
.sh-beitrag__zurueck { margin-top: var(--sh-abstand-sektion); }

/* ---- components/wissenseite.css ---- */
/* 20 Wissensseite: Langseite mit sechs Themen, eingebunden als statisches Include (Shortcode).
   Markup: statisch/wissen-themen.html. Nutzt die geteilten Bausteine sh-sektion, sh-container,
   sh-raster, sh-kicker, sh-headline, sh-zwischentitel, sh-foto, sh-btn und die Pflanzentafel (sh-tafel).

   Aufbau: Seitenintro mit Themenliste → Pflanzen → Pflanzentafel → sechs Themen (je Kopf mit Foto,
   darunter Abschnitte: Titel links, Text rechts). Abschnittstitel bleiben beim Lesen stehen (sticky). */

.sh-wissenseite {
  --sh-anker-abstand: 96px;    /* Höhe des fixierten Headers plus Luft */
  --sh-zeilenhoehe-text: 1.4;  /* Zeilenabstand im Fließtext, nur auf dieser Seite (global 1.6 in base.css) */
  --sh-textbreite: 42rem;      /* Zeilenlänge im Fließtext (rund 80 Zeichen) */
}

.sh-wissenseite [id] { scroll-margin-top: var(--sh-anker-abstand); }

/* width/height im HTML sichern das Seitenverhältnis vor dem Laden, die Höhe kommt aus aspect-ratio */
.sh-wissenseite .sh-foto { height: auto; }

/* Seitenüberschrift (h1): 30 % größer als .sh-headline (dort clamp(30px, 4vw, 50px)) */
.sh-wissenseite .sh-seitenintro__headline {
  font-size: clamp(39px, 5.2vw, 65px);
  text-wrap: balance;
}

/* Themenliste im Seitenintro */
.sh-themen__titel {
  margin-bottom: 12px;
  color: var(--sfh-text-grau);
  font-size: 15.5px;
}

.sh-themen__liste { border-top: 1px solid var(--sfh-linie); }

.sh-themen__link {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid var(--sfh-linie);
  color: var(--sfh-text);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.25;
}

.sh-themen__nummer {
  color: var(--sfh-orange-text);
  font-size: .8em;
  font-weight: 600;
}

.sh-themen__pfeil {
  color: var(--sfh-orange-text);
  transition: transform var(--sh-bewegung);
}

.sh-themen__link:hover { color: var(--sfh-orange-text); }
.sh-themen__link:hover .sh-themen__pfeil { transform: translateY(3px); }

/* Pflanzen-Einstieg und Themenkopf: Text links, Foto rechts */
.sh-thema__kopf {
  --sh-spalte: 320px;
  --sh-ausrichtung: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.sh-thema__titel { max-width: 18ch; }

.sh-thema__dek {
  margin-top: 16px;
  color: var(--sfh-text-grau);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(18px, 1.7vw, 21px);
  font-style: italic;
  line-height: 1.35;
}

.sh-thema__text {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--sfh-text-grau);
  font-size: 17px;
  line-height: var(--sh-zeilenhoehe-text);
}

.sh-thema__text + .sh-thema__text { margin-top: 12px; }

.sh-thema__bild { margin: 0; }
.sh-thema__foto { aspect-ratio: 4 / 3; }

.sh-thema__zurueck {
  margin-top: clamp(32px, 4vw, 52px);
  font-size: 15px;
  font-weight: 500;
}

/* Bildausschnitt, wenn die Mitte nicht trägt */
.sh-wissenseite .sh-foto--oben { object-position: 50% 25%; }
.sh-wissenseite .sh-foto--unten { object-position: 50% 80%; }
.sh-wissenseite .sh-foto--rechts { object-position: 70% 50%; }

/* Sprungmarken innerhalb eines Themas */
.sh-chips { margin-top: 24px; }

.sh-chips__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sh-chips__link {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
  color: var(--sfh-text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}

.sh-chips__link:hover {
  border-color: var(--sfh-orange-text);
  color: var(--sfh-orange-text);
}

/* Abschnitt: Titel links (bleibt stehen), Text rechts */
.sh-abschnitt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--sfh-linie);
}

.sh-abschnitt__kopf {
  position: sticky;
  top: var(--sh-anker-abstand);
  align-self: start;
}

.sh-abschnitt__titel { font-size: clamp(22px, 2.1vw, 28px); }

.sh-abschnitt__dek {
  margin-top: 8px;
  color: var(--sfh-text-grau);
  font-family: var(--sh-schrift-titel);
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .sh-abschnitt { grid-template-columns: minmax(0, 1fr); }
  .sh-abschnitt__kopf { position: static; }
}

/* Fließtext im Abschnitt */
.sh-prosa > * + * { margin-top: 1em; }

.sh-prosa p,
.sh-prosa li {
  font-size: 16.5px;
  line-height: var(--sh-zeilenhoehe-text);
}

.sh-prosa p,
.sh-prosa ul:not([class]) { max-width: var(--sh-textbreite); }

.sh-prosa ul:not([class]) {
  padding-left: 1.3em;
  list-style: disc;
}

.sh-prosa ul:not([class]) > li + li { margin-top: .35em; }
.sh-prosa ul:not([class]) > li::marker { color: var(--sfh-orange-text); }

.sh-prosa b,
.sh-prosa strong { font-weight: 600; }

.sh-prosa__titel {
  font-family: var(--sh-schrift-titel);
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.25;
}

.sh-prosa__unter {
  color: var(--sfh-text-grau);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sh-prosa > .sh-prosa__titel { margin-top: 1.9em; }
.sh-prosa > .sh-prosa__unter { margin-top: 1.6em; }
.sh-prosa > .sh-prosa__unter + * { margin-top: .4em; }
.sh-prosa > .sh-prosa__titel + * { margin-top: .5em; }

/* Blöcke im Text: etwas mehr Luft als zwischen Absätzen */
.sh-prosa > .sh-bild,
.sh-prosa > .sh-hinweis,
.sh-prosa > .sh-pflanzen,
.sh-prosa > .sh-dateilink {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}

.sh-prosa > :first-child { margin-top: 0; }
.sh-prosa > :last-child { margin-bottom: 0; }

/* Bild in Spaltenbreite */
.sh-bild { margin: 0; }
.sh-bild__foto { aspect-ratio: 3 / 2; }

/* Hinweiskasten: Tipp (grün) oder Gut zu wissen (türkis) */
.sh-hinweis {
  padding: 18px 22px 20px;
  border-left: 3px solid var(--sfh-blattgruen);
  border-radius: 0 var(--sh-radius) var(--sh-radius) 0;
  background: var(--sfh-blattgruen-hell);
}

.sh-hinweis--wissen { border-left-color: var(--sfh-tuerkis); }

.sh-hinweis__titel {
  margin-bottom: 8px;
  color: var(--sfh-blattgruen-dunkel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.sh-hinweis--wissen .sh-hinweis__titel { color: var(--sfh-tuerkis); }
.sh-hinweis > * + * { margin-top: .7em; }

/* Pflanzenliste: Name und lateinischer Name */
.sh-pflanzen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 0 28px;
  border-top: 1px solid var(--sfh-linie);
}

.sh-pflanzen__eintrag {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--sfh-linie);
}

.sh-pflanzen__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.sh-pflanzen__latein {
  color: var(--sfh-text-grau);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.4;
}

/* Datei zum Herunterladen */
.sh-dateilink {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
  color: var(--sfh-text);
}

.sh-dateilink:hover {
  border-color: var(--sfh-orange-text);
  color: var(--sfh-text);
}

.sh-dateilink__art {
  color: var(--sfh-tuerkis);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sh-dateilink__titel {
  flex: 1 1 14rem;
  font-family: var(--sh-schrift-titel);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.sh-dateilink__aktion {
  color: var(--sfh-orange-text);
  font-weight: 600;
}

/* Zahlen & Fakten, Aufruf zur Karte: Flächen innerhalb des Themas */
.sh-fakten {
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--sh-radius);
  background: var(--sfh-aubergine-tief);
  color: var(--sfh-weiss);
}

.sh-fakten__titel {
  margin-bottom: clamp(20px, 3vw, 32px);
  color: var(--sfh-pfirsich);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.sh-fakten__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 28px;
}

.sh-fakten__eintrag {
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, .2);
}

.sh-fakten__vor {
  display: block;
  margin-bottom: 4px;
  color: var(--sfh-schrift-tafel-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sh-fakten__zahl {
  display: block;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 500;
  line-height: 1;
}

.sh-fakten__text {
  display: block;
  margin-top: 10px;
  color: var(--sfh-schrift-tafel);
  font-size: 15px;
  line-height: 1.5;
}

.sh-aufruf {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: var(--sh-radius);
  background: var(--sfh-aubergine);
  color: var(--sfh-weiss);
}

.sh-aufruf__text {
  max-width: 36ch;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.25;
}

.sh-aufruf .sh-btn {
  background-color: var(--sfh-weiss);
  color: var(--sfh-text);
}

.sh-aufruf .sh-btn:hover {
  background-color: var(--sfh-sand);
  color: var(--sfh-text);
}

/* ---- components/warumseite.css ---- */
/* 21 Warum-Seite: Langseite „Warum stehen lassen“, eingebunden als statisches Include (Shortcode).
   Markup: statisch/warum-stehen-lassen.html. Läuft im Wrapper .sh-wissenseite und nutzt dessen Variablen
   sowie sh-thema__kopf, sh-abschnitt, sh-prosa, sh-hinweis, sh-aufruf aus wissenseite.css.

   Neu: sh-einstieg (Bild mit Verweis im Intro), sh-sektionskopf, sh-punkte (nummerierte Spalten),
   sh-leitsatz, sh-verweis, sh-hinweis--icon, sh-kachel(n) (Teaser mit aufklappbarem Rest), sh-aufruf (langer Text). */

/* Bild mit Verweis im Seitenintro */
.sh-einstieg__bild { margin: 0; }
.sh-einstieg__foto { aspect-ratio: 3 / 2; }

.sh-einstieg__text {
  margin: 18px 0 16px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.3;
}

/* Kopf einer Sektion: Titel und Dek */
.sh-sektionskopf { margin-bottom: clamp(28px, 4vw, 48px); }
.sh-sektionskopf .sh-thema__titel { max-width: 24ch; }

/* Nummerierte Punkte in Spalten: Phasen, Ziele, Bedeutung */
.sh-punkte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(24px, 3vw, 44px);
  counter-reset: punkt;
}

@media (min-width: 760px) {
  .sh-punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-punkte--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .sh-punkte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sh-punkte__eintrag {
  padding: 18px 0 8px;
  border-top: 1px solid var(--sfh-linie);
  counter-increment: punkt;
}

.sh-punkte__eintrag::before {
  content: counter(punkt, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--sfh-orange-text);
  font-family: var(--sh-schrift-titel);
  font-size: 15px;
  font-weight: 600;
}

.sh-punkte__titel {
  font-family: var(--sh-schrift-titel);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.25;
}

.sh-punkte__text {
  margin-top: 10px;
  font-size: 16.5px;
  line-height: var(--sh-zeilenhoehe-text);
}

/* Merksatz und Verweis unter den Zielen */
.sh-leitsatz {
  max-width: 34ch;
  margin-top: clamp(32px, 4.5vw, 56px);
  font-family: var(--sh-schrift-titel);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
}

.sh-verweis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--sfh-linie);
}

.sh-verweis__text {
  flex: 1 1 24rem;
  max-width: 42rem;
  font-size: 16.5px;
  font-weight: 500;
  line-height: var(--sh-zeilenhoehe-text);
}

/* Hinweiskasten mit Symbol */
.sh-hinweis--icon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: clamp(32px, 4vw, 52px);
}

.sh-hinweis--icon > * + * { margin-top: 0; }

.sh-hinweis--icon p {
  max-width: 48rem;
  font-size: 16.5px;
  line-height: var(--sh-zeilenhoehe-text);
}

.sh-hinweis__icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--sfh-tuerkis);
}

/* Kacheln: Teaser immer sichtbar, Rest klappt auf (details). Bild links, Text rechts, mobil untereinander */
.sh-kacheln {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(36px, 5vw, 64px);
}

.sh-kachel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--sfh-linie);
  border-radius: var(--sh-radius);
  background: var(--sfh-weiss);
}

@media (max-width: 760px) {
  .sh-kachel { grid-template-columns: minmax(0, 1fr); }
}

.sh-kachel__bild { margin: 0; }
.sh-kachel__foto { aspect-ratio: 4 / 3; }
.sh-kachel__titel { font-size: clamp(22px, 2.1vw, 28px); }

.sh-kachel__dek {
  margin-top: 6px;
  color: var(--sfh-text-grau);
  font-family: var(--sh-schrift-titel);
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
}

.sh-kachel__teaser {
  max-width: var(--sh-textbreite);
  margin-top: 16px;
  font-size: 16.5px;
  line-height: var(--sh-zeilenhoehe-text);
}

.sh-kachel__teaser + .sh-kachel__teaser { margin-top: .8em; }

.sh-kachel__mehr { margin-top: 22px; }

.sh-kachel__schalter {
  display: block;
  width: fit-content;
  list-style: none;
}

.sh-kachel__schalter::-webkit-details-marker { display: none; }

.sh-kachel__zu,
.sh-kachel__mehr[open] .sh-kachel__auf { display: none; }

.sh-kachel__mehr[open] .sh-kachel__zu { display: inline; }

.sh-kachel__inhalt {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--sfh-linie);
}

.sh-prosa > .sh-kachel__ende { margin-top: 1.8em; }

/* Aufruf mit Überschrift und zwei Absätzen (Variante von sh-aufruf aus wissenseite.css) */
.sh-aufruf__inhalt { max-width: 46rem; }

.sh-aufruf__titel {
  font-family: var(--sh-schrift-titel);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.15;
}

.sh-aufruf__fliess {
  margin-top: 14px;
  color: var(--sfh-schrift-tafel-hell);
  font-size: 17px;
  line-height: 1.5;
}

/* ---- components/kommunenseite.css ---- */
/* 22 Kommunen-Seite: Langseite „Für Kommunen“, eingebunden als statisches Include (Shortcode).
   Markup: sections/punkte.php, box-aufruf.php, faq-thema.php (ACF); die Mitmachen-Seiten nutzen es als statisches Include im Wrapper .sh-wissenseite mit sh-punkte, sh-sektionskopf,
   sh-aufruf (auch --aubergine) aus wissenseite.css und warumseite.css.

   Neu: sh-box (Karte mit Titel und Text), sh-zweiteilig (zwei Karten nebeneinander), sh-faq (Akkordeon). */

/* Zwei Karten nebeneinander, gleiche Höhe */
.sh-zweiteilig {
  --sh-spalte: 340px;
  --sh-ausrichtung: stretch;
}

.sh-box {
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--sh-radius);
  background: var(--sfh-sand);
}

.sh-box__titel {
  margin-bottom: 14px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.2;
}

/* Im Raster steht der Aufruf ohne Abstand nach oben */
.sh-zweiteilig > .sh-aufruf {
  align-content: center;
  margin-top: 0;
}

/* Häufige Fragen: Frage bleibt sichtbar, Antwort klappt auf, Plus und Minus statt Browser-Pfeil */
.sh-faq { border-top: 1px solid var(--sfh-linie); }

.sh-faq__eintrag { border-bottom: 1px solid var(--sfh-linie); }

.sh-faq__frage {
  position: relative;
  display: block;
  padding: 18px 48px 18px 2px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.sh-faq__frage::-webkit-details-marker { display: none; }

.sh-faq__frage::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--sfh-orange-text);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.sh-faq__eintrag[open] > .sh-faq__frage::after { content: "\2013"; }
.sh-faq__frage:hover { color: var(--sfh-orange-text); }

.sh-faq__antwort { padding: 0 48px 22px 2px; }

/* Hero: Abstand zwischen Untertitel und Einleitung */
.sh-thema__dek + .sh-seitenintro__text { margin-top: 16px; }

/* ---- components/mitmachenseite.css ---- */
/* 23 Mitmachen-Seite und vier Unterseiten (privat, Unternehmen, Wohnungswirtschaft, Vereine).
   Markup: statisch/mitmachen*.html. Läuft im Wrapper .sh-wissenseite und nutzt sh-mitmachen (mitmachen.css),
   sh-punkte, sh-sektionskopf, sh-box, sh-zweiteilig, sh-fakten, sh-hinweis--icon, sh-aufruf und sh-leitsatz
   aus wissenseite.css, warumseite.css und kommunenseite.css.

   Neu: sh-mitmachen--seite (Abschnitt Mitmachen als Hero ohne Foto), sh-zielgruppen, sh-box--weiss, sh-box__aktion,
   sh-bildtext, sh-bildband. Die Formularkarte kommt aus sh_meldeformular_karte() (Theme) bzw. index.html (Vorschau). */

/* Abschnitt Mitmachen als Hero ohne Foto: oben Platz für das Logo wie beim Seitenintro */
.sh-mitmachen--seite { padding-top: 120px; }

/* Absätze unter dem Hero, in Lesebreite */
.sh-lesetext { max-width: var(--sh-textbreite); }
.sh-lesetext > * + * { margin-top: 1em; }

.sh-lesetext p {
  font-size: 17px;
  line-height: var(--sh-zeilenhoehe-text);
}

/* Zielgruppen: vier Karten in zwei Spalten */
.sh-zielgruppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}

@media (min-width: 760px) {
  .sh-zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sh-box--weiss {
  border: 1px solid var(--sfh-linie);
  background: var(--sfh-weiss);
}

/* Karten mit Knöpfen am Ende: Knöpfe sitzen unten, auch bei unterschiedlich langen Texten */
.sh-box--spalte {
  display: flex;
  flex-direction: column;
}

.sh-box__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

/* Text neben Bild: zwei Spalten, mobil untereinander. Bild links mit --links */
.sh-bildtext {
  --sh-spalte: 320px;
  --sh-ausrichtung: center;
}

.sh-bildtext__bild { margin: 0; }
.sh-bildtext__foto { aspect-ratio: 4 / 3; }
.sh-bildtext__foto--hoch { aspect-ratio: 4 / 5; }

@media (min-width: 760px) {
  .sh-bildtext--links > .sh-bildtext__bild { order: -1; }
}

/* Breites Bild über die Containerbreite */
.sh-bildband { margin: 0; }
.sh-bildband__foto { aspect-ratio: 16 / 7; }

/* Abstand zwischen Blöcken innerhalb einer Sektion */
.sh-folge { margin-top: clamp(32px, 4.5vw, 56px); }

/* Überschrift über einem Textblock in einer Box oder Spalte */
.sh-prosa > .sh-prosa__haupt {
  margin-top: 1.9em;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.2;
}

.sh-prosa > .sh-prosa__haupt:first-child { margin-top: 0; }

/* Lange Wörter in der Seitenüberschrift (Wohnungswirtschaft, Bildungseinrichtungen) trennen statt überlaufen */
.sh-wissenseite .sh-seitenintro__headline {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- components/kontaktseite.css ---- */
/* 21 Kontaktseite: Intro, darunter zwei Ansprechpersonen und die Newsletter-Anmeldung nebeneinander
   (je ein Drittel), ohne Kasten, grauer Strich zwischen den Personen.
   Markup: sections/ansprechpersonen.php (ACF). Nutzt sh-foto, sh-newsletter__text, sh-newsletter__form, sh-newsletter__feld
   und sh-btn aus den vorhandenen Bausteinen.

   Breiten: ab 1000 px drei Spalten, ab 640 px die Personen nebeneinander und der Newsletter darunter,
   darunter alles untereinander (dann liegt der Strich waagerecht). Der Strich sitzt in der Mitte der Lücke,
   deshalb sind die Spalten und die Fotos gleich breit. */

.sh-kontakt {
  --sh-kontakt-abstand: clamp(20px, 2.4vw, 36px);  /* halbe Lücke zwischen den Spalten */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--sh-kontakt-abstand) * 2);
}

.sh-kontakt__person + .sh-kontakt__person {
  position: relative;
}

.sh-kontakt__person + .sh-kontakt__person::before {
  content: "";
  position: absolute;
  top: calc(var(--sh-kontakt-abstand) * -1);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--sfh-linie);
}

@media (min-width: 640px) {
  .sh-kontakt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-kontakt__person + .sh-kontakt__person::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: calc(var(--sh-kontakt-abstand) * -1);
    width: 1px;
    height: auto;
  }

  .sh-kontakt__newsletter {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .sh-kontakt {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh-kontakt__newsletter {
    grid-column: auto;
  }
}

.sh-kontakt__bild {
  margin-bottom: 22px;
}

/* width/height im HTML sichern das Seitenverhältnis vor dem Laden */
.sh-kontakt__foto {
  aspect-ratio: 4 / 3;
}

.sh-kontakt__titel {
  margin-bottom: 4px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.2;
}

.sh-kontakt__funktion {
  margin-bottom: 20px;
  color: var(--sfh-text-grau);
  font-size: 17px;
}

.sh-kontakt__daten {
  font-style: normal;
}

.sh-kontakt__daten p {
  font-size: 16.5px;
  line-height: 1.5;
}

.sh-kontakt__daten p + p {
  margin-top: 1em;
}

.sh-kontakt__newsletter .sh-kontakt__titel {
  margin-bottom: 14px;
}

.sh-kontakt__newsletter .sh-newsletter__text {
  margin-bottom: 20px;
}

/* ---- components/bildnachweis.css ---- */
/* Bildnachweis: Der Urheber steht als Marke im Foto, unten rechts.
   Statische Seiten: <figcaption class="sh-marke"> im Fragment, die Figure ist der Rahmen.
   Startseite: <span class="sh-foto-rahmen"> um das Bild, die Marke kommt aus sh_marke() (inc/bildnachweis.php). */
.sh-foto-rahmen,
.sh-thema__bild,
.sh-bild,
.sh-kachel__bild,
.sh-bildtext__bild,
.sh-kontakt__bild,
.sh-einstieg__bild,
.sh-bildband {
  position: relative;
}

.sh-foto-rahmen { display: block; }

.sh-marke {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 3px 9px 4px;
  border-radius: 6px;
  background: rgb(26 31 26 / .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .01em;
  pointer-events: none;
}

/* Nachweisliste im Impressum */
.sh-bildnachweis {
  columns: 2 220px;
  column-gap: 32px;
}

/* Seite Bildnachweise: Fotos nach Urheber, kleine Vorschaubilder */
.sh-bildnachweise__autor {
  padding: 26px 0;
  border-top: 1px solid var(--sfh-linie);
}

.sh-bildnachweise__autor:first-child {
  padding-top: 0;
  border-top: 0;
}

.sh-bildnachweise__name {
  margin: 0 0 14px;
  font-family: var(--sh-schrift-titel);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
}

.sh-bildnachweise__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-bildnachweise__bild img {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 6px;
  object-fit: cover;
}

/* ---- nur Theme: ACF-Module FAQ-Thema und Aufruf ---- */
/* FAQ-Thema, Punkte und Box und Aufruf laufen ohne Wrapper .sh-wissenseite und bringen dessen Werte für Fließtext und Sprungmarke selbst mit */
.sh-sektion--faq,
.sh-sektion--punkte,
.sh-sektion--zweiteilig {
  --sh-anker-abstand: 96px;
  --sh-zeilenhoehe-text: 1.4;
  --sh-textbreite: 42rem;
  scroll-margin-top: var(--sh-anker-abstand);
}

/* Aufruf: Aubergine ist der Standard von .sh-aufruf, die übrigen Farben wie beim Banner */
.sh-aufruf--gruen { background: var(--sfh-blattgruen); }
.sh-aufruf--tanne { background: var(--sfh-tannengruen); }

.sh-aufruf--sand {
  background: var(--sfh-sand);
  color: var(--sfh-text);
}

.sh-aufruf--sand .sh-aufruf__fliess { color: inherit; }

.sh-aufruf--sand .sh-btn,
.sh-aufruf--sand .sh-btn:hover {
  background-color: var(--sfh-blattgruen);
  color: var(--sfh-weiss);
}

.sh-aufruf--sand .sh-btn:hover { background-color: var(--sfh-blattgruen-dunkel); }

/* Ansprechpersonen: das Porträt behält sein Seitenverhältnis (im statischen Kontakt kam height: auto vom Wrapper .sh-wissenseite) */
.sh-kontakt__foto { height: auto; }