:root {
  --racing-green: #19291E;
  --olive-grey: #606454;
  --almond-green: #506E55;
  --old-english-white: #EDE8D3;
  --limestone: #D9D5BA;
  --white: #FFFFFF;
  --tahoma: Tahoma, Verdana, sans-serif;
  --verdana: Verdana, Tahoma, sans-serif;
  --xs: 8px;
  --s: 16px;
  --m: 24px;
  --l: 32px;
  --xl: 48px;
  --linie: 1px solid var(--limestone);
  --akzent-b: 48px; --akzent-h: 4px;
  --fokus: 2px; --ziel: 24px;
  --text: 17px;
  --text-m: 16px;
  --title-website-min: 36px;
  --title-website-max: 56px;
  --section-website-min: 30px;
  --section-website-max: 40px;
  --subtitle-website: 22px;
  --hero-text-website: 18px;
  --menu-website: 20px;
  --menu-website-narrow: 18px;
  --button-website: 18px;
  --logo: 220px;
  --logo-narrow: 200px;
  --logo-mobile: 180px;
  --hero-min: 360px;
  --hero-max: 420px;
  --hero-mobile: 200px;
  --separator-dot: 4px;
  --content-width: 1120px;
  --reading-width: 760px;
  --hero-box: 780px;
  --link-padding: 4px;
  --normal: 400;
  --bold: 700;
  --lh-text: 1.55;
  --lh-title: 1.12;
  --lh-subtitle: 1.25;
  --lh-lead: 1.3;
  --fluid-title: 4.6vw;
  --fluid-section: 3.2vw;
  --fluid-hero: 31vw;
  --focus-offset: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--racing-green); font: var(--normal) var(--text)/var(--lh-text) var(--verdana); }
h1, h2, h3, nav, .knopf, .fuss, .sprung { font-family: var(--tahoma); }
h1, h2 { font-weight: var(--normal); line-height: var(--lh-title); margin: 0; }
h1 { font-size: clamp(var(--title-website-min), var(--fluid-title), var(--title-website-max)); }
h2 { font-size: clamp(var(--section-website-min), var(--fluid-section), var(--section-website-max)); }
h3 { font-size: var(--subtitle-website); font-weight: var(--bold); line-height: var(--lh-subtitle); margin: 0 0 var(--xs); }
p { margin: 0 0 var(--xs); }
p:last-child { margin-bottom: 0; }
main p, main li { max-width: var(--reading-width); }
a { color: var(--almond-green); }
a:focus-visible { outline: var(--fokus) solid var(--almond-green); outline-offset: var(--focus-offset); }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--m); }
.lese { max-width: var(--reading-width); }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--s); top: var(--s); background: var(--white); padding: var(--xs) var(--s); z-index: 2; }
.kopfzeile, .fusszeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xs) var(--m); padding-top: var(--s); padding-bottom: var(--s); }
.marke { display: block; min-height: var(--ziel); }
.marke img { width: var(--logo); }
nav, .fusszeile { font-size: var(--menu-website); }
nav { overflow: hidden; margin: calc(-1 * var(--link-padding)); padding: var(--link-padding); }
nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xs) 0; list-style: none; margin: 0 0 0 calc(-1 * var(--m)); padding: 0; }
nav li { position: relative; padding-left: var(--m); }
nav li::before { content: ""; position: absolute; left: calc(var(--m) / 2); top: 50%; width: var(--separator-dot); height: var(--separator-dot); transform: translate(-50%, -50%); border-radius: 50%; background: var(--olive-grey); }
nav a { display: inline-block; padding: var(--link-padding) 0; min-height: var(--ziel); color: var(--racing-green); text-decoration: none; }
nav a:hover { color: var(--almond-green); text-decoration: underline; }
.sprache { color: var(--olive-grey); }
.sprache a { color: var(--olive-grey); padding: var(--link-padding); }
.sprache a:last-child { padding-right: 0; }
.sprache a[aria-current] { color: var(--racing-green); font-weight: var(--bold); }
.held { position: relative; }
.held > img { width: 100%; height: clamp(var(--hero-min), var(--fluid-hero), var(--hero-max)); object-fit: cover; }
.held .box { position: absolute; left: max(var(--m), calc((100% - var(--content-width)) / 2 + var(--m))); bottom: var(--l); max-width: min(var(--hero-box), calc(100% - 2 * var(--m))); background: var(--white); border-left: var(--akzent-h) solid var(--almond-green); padding: var(--m) var(--l); }
.held .unter { font-size: var(--hero-text-website); color: var(--olive-grey); margin: var(--xs) 0 var(--s); }
.knopf { display: inline-block; background: var(--almond-green); color: var(--white); padding: var(--xs) var(--m); min-height: var(--ziel); font-size: var(--button-website); text-decoration: none; }
.knopf:hover { text-decoration: underline; }
section { padding: var(--l) 0; }
.hell { background: var(--old-english-white); }
.akzent { display: block; width: var(--akzent-b); height: var(--akzent-h); background: var(--almond-green); margin: var(--xs) 0 var(--s); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--m); align-items: baseline; }
.lead { font-family: var(--tahoma); font-size: var(--subtitle-website); line-height: var(--lh-lead); }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); margin-top: var(--xs); }
.breit { margin-top: var(--m); }
.raster.vier { grid-template-columns: repeat(2, 1fr); }
.themen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); margin-top: var(--s); }
.themen h4 { font-family: var(--tahoma); font-size: var(--subtitle-website); line-height: var(--lh-subtitle); color: var(--almond-green); margin: 0 0 var(--xs); }
.themen ul { list-style: none; margin: 0; padding: 0; }
.themen li { margin-bottom: var(--xs); }
.raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--xs); }
.karte { background: var(--white); border: var(--linie); padding: var(--s) var(--m); }
.schluss { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m); align-items: stretch; }
.schluss > :first-child { padding-top: var(--m); }
.hello-box { background: var(--old-english-white); padding: var(--m); }
.kontakt { list-style: none; margin: var(--xs) 0; padding: 0; }
.kontakt a { display: inline-block; min-height: var(--ziel); }
.ganz { white-space: nowrap; }
.fuss { border-top: var(--linie); color: var(--olive-grey); }
.fuss a { color: var(--olive-grey); }
.fusszeile > a { display: inline-block; padding: var(--link-padding) 0; min-height: var(--ziel); color: var(--olive-grey); text-decoration: none; }
.fusszeile > a:hover { color: var(--almond-green); text-decoration: underline; }
.recht { padding-top: var(--l); padding-bottom: var(--xl); }
.datum { color: var(--olive-grey); }
.zwischen { font-size: var(--subtitle-website); font-weight: var(--bold); line-height: var(--lh-lead); margin: var(--s) 0 var(--xs); }
@media (max-width: 1023px) {
  .schluss, .themen { grid-template-columns: 1fr; }
  .schluss > :first-child { padding-top: 0; }
}
@media (max-width: 900px) {
  nav, .fusszeile { font-size: var(--menu-website-narrow); }
  .marke img { width: var(--logo-narrow); }
}
@media (max-width: 760px) {
  body { font-size: var(--text-m); }
  .hello-box { padding: var(--s); }
  .wrap { padding-left: var(--s); padding-right: var(--s); }
  .held > img { height: var(--hero-mobile); }
  .held .box { position: static; max-width: none; border-left: 0; padding: var(--s) var(--s) var(--m); }
  section { padding: var(--m) 0; }
  .zwei, .raster, .schluss { grid-template-columns: 1fr; }
  .raster.vier { grid-template-columns: 1fr; }
  .zwei { gap: 0; }
  .marke img { width: var(--logo-mobile); }
}
@media (max-width: 350px) {
  .adresse .tr, .adresse br { display: none; }
  .adresse .ganz { display: block; }
}