/*
 * GBDC, zentrales Stylesheet für Kopf und Fuß.
 * Regeln unverändert aus header.html und footer.html. Selektoren sind auf die
 * Elemente von Kopf und Fuß begrenzt, damit sie keine Seite beeinflussen.
 */

body { margin: 0; }

/* Kopfbereich */
:root { --white-smoke: #f2f2f2; --jet: #323232; --hunter-green: #4b633e; --champagne: #eddcc3; --linie: 1px solid var(--jet); --linie-leicht: 1px solid rgba(50, 50, 50, .22); --linie-hell: 1px solid rgba(242, 242, 242, .26); --gedaempft: rgba(50, 50, 50, .72); --hell-gedaempft: rgba(242, 242, 242, .8); --sm: 16px; --md: 32px; --lg: 60px; --xl: 96px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) *, *:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Inter", system-ui, sans-serif; background-color: var(--white-smoke); color: var(--jet); font-size: 16.5px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) a, a:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { text-decoration: none; color: inherit; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) ul, ul:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich), :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) ol, ol:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { list-style: none; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) strong, strong:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { font-weight: 600; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) :focus-visible, :focus-visible:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { outline: 2px solid var(--hunter-green); outline-offset: 3px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) h3, h3:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { font-size: 1.35rem; margin-bottom: var(--sm); color: var(--jet); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) p, p:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { margin-bottom: var(--sm); max-width: 66ch; color: var(--gedaempft); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .container, .container:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--md); }
.skip { position: absolute; left: -9999px; background: var(--white-smoke); border: var(--linie); padding: 12px 18px; z-index: 40; }
.skip:focus { left: 14px; top: 14px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .knopf, .knopf:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; font-size: .98rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 0; touch-action: manipulation; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .knopf-voll, .knopf-voll:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { background-color: var(--hunter-green); color: var(--white-smoke); border: 1px solid var(--hunter-green); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .knopf-voll:hover, .knopf-voll:hover:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { background-color: var(--jet); border-color: var(--jet); }
.kopfzeile { background-color: var(--jet); color: var(--champagne); font-size: .85rem; border-bottom: var(--linie); }
.kopfzeile .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding: 11px var(--md); }
.kopfzeile a { border-bottom: 1px solid rgba(237, 220, 195, .4); }
.kopfzeile a:hover { border-bottom-color: var(--champagne); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) section[id], section[id]:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich), :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) div[id], div[id]:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { scroll-margin-top: 76px; }
.hauptnav { position: sticky; top: 0; z-index: 30; background-color: var(--white-smoke); border-bottom: var(--linie); }
.hauptnav .container { display: flex; align-items: center; gap: var(--md); padding-top: 10px; padding-bottom: 10px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .wortmarke, .wortmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { position: relative; display: block; flex-shrink: 0; width: 400px; height: 84px; transition: height .28s cubic-bezier(.2, .7, .3, 1); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .marke-voll, .marke-voll:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich), :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke, .kompaktmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: opacity .22s ease; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .marke-voll, .marke-voll:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: flex; align-items: center; gap: 14px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .wortmarke img { display: block; width: auto; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke img { height: 32px; flex-shrink: 0; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .bildmarke, .bildmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { height: 84px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .schriftmarke, .schriftmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { height: 52px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke, .kompaktmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; pointer-events: none; font-weight: 700; font-size: 1rem; letter-spacing: -0.03em; line-height: 1.2; max-width: 400px; }
.hauptnav.geklebt .wortmarke { height: 44px; }
.hauptnav.geklebt .marke-voll { opacity: 0; pointer-events: none; }
.hauptnav.geklebt .kompaktmarke { opacity: 1; pointer-events: auto; }
#klebepunkt { display: block; height: 1px; }
@media (max-width: 900px) {
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .wortmarke, .wortmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { width: 260px; height: 60px; }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .bildmarke, .bildmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { height: 56px; }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .schriftmarke, .schriftmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: none; }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke, .kompaktmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { font-size: .9rem; max-width: 260px; white-space: normal; }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke img { height: 28px; }
  .hauptnav.geklebt .wortmarke { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .wortmarke, .wortmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich), :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .marke-voll, .marke-voll:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich), :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .kompaktmarke, .kompaktmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { transition: none; }
}
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navliste, .navliste:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: flex; gap: 26px; margin-left: auto; font-size: .96rem; font-weight: 500; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navliste a { display: block; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .18s ease, color .18s ease; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navliste a:hover { border-bottom-color: var(--hunter-green); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navliste a[aria-current="page"] { border-bottom-color: var(--hunter-green); font-weight: 600; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navknopf, .navknopf:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { padding: 10px 18px; font-size: .92rem; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .menuschalter, .menuschalter:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: none; }
@media (max-width: 1080px) {
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navliste, .navliste:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: none; }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .menuschalter, .menuschalter:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: block; margin-left: auto; }
}
@media (max-width: 600px) {
  .hauptnav .container { gap: var(--sm); }
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .navknopf, .navknopf:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: none; }
}
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .menuschalter summary { list-style: none; cursor: pointer; padding: 8px 14px; border: var(--linie); font-size: .92rem; font-weight: 600; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .menuschalter summary::-webkit-details-marker { display: none; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .klappliste, .klappliste:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { position: absolute; left: 0; right: 0; background-color: var(--white-smoke); border-bottom: var(--linie); padding: var(--sm) var(--md) var(--md); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .klappliste li { padding: 10px 0; border-bottom: var(--linie-leicht); font-size: 1rem; }

/* Fußbereich */
.fussbereich { background-color: var(--hunter-green); color: rgba(242, 242, 242, .82); border-top: var(--linie); }
.fussbereich .container { padding-top: var(--lg); padding-bottom: var(--md); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fussraster, .fussraster:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: grid; grid-template-columns: 1.6fr 1fr 1.15fr 1.2fr; gap: var(--md); padding-bottom: var(--lg); border-bottom: 1px solid rgba(242, 242, 242, .24); }
.fussbereich h2, .fussbereich h3 { color: var(--white-smoke); }
.fussbereich h3 { font-size: .82rem; font-weight: 600; color: var(--champagne); margin-bottom: 14px; letter-spacing: 0; }
.fussbereich p { color: rgba(242, 242, 242, .8); font-size: .95rem; }
.fussbereich ul li { padding: 6px 0; font-size: .95rem; }
.fussbereich a { border-bottom: 1px solid transparent; }
.fussbereich a:hover { border-bottom-color: var(--champagne); color: var(--white-smoke); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fusslogo, .fusslogo:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: block; width: 100%; max-width: 260px; height: auto; margin-top: var(--md); opacity: .9; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fusswortmarke, .fusswortmarke:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { font-size: 1.15rem; font-weight: 700; color: var(--white-smoke); letter-spacing: -0.03em; margin-bottom: 12px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fussdaten dt { font-size: .78rem; color: var(--champagne); font-weight: 600; margin-bottom: 2px; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fussdaten dd { margin: 0 0 12px; font-size: 1rem; color: var(--white-smoke); }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fusszeile, .fusszeile:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 18px 0; font-size: .85rem; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fusszeile ul li { padding: 0; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .slogan, .slogan:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { color: var(--champagne); font-size: .95rem; font-weight: 400; line-height: 1.6; }
:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fusszeile ul { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 900px) {
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fussraster, .fussraster:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { grid-template-columns: repeat(2, 1fr); gap: var(--lg) var(--md); }
}
@media (max-width: 600px) {
  :where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) .fussraster, .fussraster:where(.skip, .kopfzeile, #klebepunkt, .hauptnav, .fussbereich) { grid-template-columns: 1fr; }
}