/* Mainzer Garten-Center: gemeinsames Stylesheet
   Regeln: nur Klassen (plus :hover, :focus, :active und @media), Flexbox,
   alle Werte einmal in :root. Umbruchpunkte: 1024px (Tablet) und 767px (Handy). */

@font-face {
  font-family: "Source Sans 3";
  src: url("assets/schriften/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/schriften/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --farbe-wald: #173D2A;
  --farbe-creme: #F7F5EE;
  --farbe-salbei: #E7EDE3;
  --farbe-blatt: #83A936;
  --farbe-tinte: #25312A;
  --farbe-weiss: #FFFFFF;
  --farbe-durchsichtig: transparent;
  --farbe-linie-hell: rgba(255, 255, 255, 0.3);
  --farbe-schatten: rgba(23, 61, 42, 0.12);
  --farbe-schatten-stark: rgba(23, 61, 42, 0.22);

  /* Schriften */
  --schrift-ueberschrift: "Source Serif 4";
  --schrift-text: "Source Sans 3";

  /* Schriftgrößen */
  --text-klein: 16px;
  --text-normal: 18px;
  --text-gross: 21px;
  --text-gross-mobile: 19px;
  --text-menue: 16px;
  --text-button: 17px;
  --text-logo: 24px;
  --text-logo-mobile: 21px;
  --ueberschrift-1: 50px;
  --ueberschrift-1-tablet: 42px;
  --ueberschrift-1-mobile: 34px;
  --ueberschrift-2: 36px;
  --ueberschrift-2-tablet: 32px;
  --ueberschrift-2-mobile: 28px;
  --ueberschrift-3: 26px;
  --ueberschrift-3-tablet: 24px;
  --ueberschrift-3-mobile: 22px;
  --ueberschrift-4: 20px;

  /* Schriftschnitt und Zeilen */
  --gewicht-normal: 400;
  --gewicht-mittel: 600;
  --gewicht-fett: 700;
  --zeilenhoehe-text: 1.6;
  --zeilenhoehe-titel: 1.2;
  --zeilenhoehe-eng: 1.3;
  --buchstabenabstand-titel: -0.01em;

  /* Abstände (8-Pixel-Raster) */
  --abstand-null: 0;
  --abstand-xs: 8px;
  --abstand-s: 16px;
  --abstand-m: 24px;
  --abstand-l: 32px;
  --abstand-xl: 48px;
  --abstand-xxl: 64px;
  --abstand-abschnitt: 96px;
  --abstand-abschnitt-tablet: 72px;
  --abstand-abschnitt-mobile: 48px;
  --abstand-kompakt: 56px;
  --abstand-kompakt-tablet: 48px;
  --abstand-kompakt-mobile: 32px;
  --abstand-hero-oben: 40px;
  --abstand-hero-oben-tablet: 40px;
  --abstand-hero-oben-mobile: 24px;
  --abstand-hero-unten: 80px;
  --abstand-hero-unten-tablet: 56px;
  --abstand-hero-unten-mobile: 40px;
  --abstand-innen: 32px;
  --abstand-innen-mobile: 16px;
  --abstand-inhalt: 56px;
  --abstand-inhalt-tablet: 48px;
  --abstand-inhalt-mobile: 32px;
  --abstand-spalten: 64px;
  --abstand-spalten-tablet: 40px;
  --abstand-spalten-mobile: 24px;
  --abstand-karten: 24px;
  --abstand-karten-mobile: 16px;
  --abstand-karte-innen: 24px;
  --abstand-karte-innen-mobile: 16px;

  /* Größen und Breiten */
  --breite-inhalt: 1280px;
  --breite-text: 680px;
  --spalte-basis: 480px;
  --spalte-basis-tablet: 400px;
  --spalte-basis-mobile: 100%;
  --karte-basis: 340px;
  --karte-basis-tablet: 300px;
  --karte-basis-mobile: 100%;
  --karte-bild-breite-mobile: 112px;
  --aufzaehlung-basis: 260px;
  --aufzaehlung-basis-mobile: 100%;
  --feld-basis: 240px;
  --fuss-spalte-basis: 200px;
  --fuss-spalte-basis-mobile: 140px;
  --fuss-spalte-gross: 320px;
  --kontakt-label-breite: 120px;
  --hoehe-button: 52px;
  --hoehe-feld: 52px;
  --hoehe-feld-gross: 160px;
  --punkt-groesse: 12px;
  --punkt-versatz: 9px;
  --zierstrich-breite: 56px;
  --zierstrich-hoehe: 4px;
  --nummer-groesse: 48px;
  --einblenden-weg: 24px;
  --anheben: -4px;
  --ebene-popup: 20;
  --untermenue-breite: 280px;
  --untermenue-versatz: 464px;

  /* Bildformate und Bildausschnitte */
  --verhaeltnis-quer: 4 / 3;
  --verhaeltnis-quer-mobile: 16 / 10;
  --piktogramm-klein: 24px;
  --piktogramm-karte: 48px;
  --piktogramm-gross: 120px;
  --piktogramm-gross-mobile: 64px;
  --verhaeltnis-video: 100 / 33;
  --verhaeltnis-video-mobile: 100 / 33;
  --verhaeltnis-logo: 10 / 3;
  --verhaeltnis-logo-hell: 20 / 7;
  --logo-breite: 240px;
  --logo-breite-mobile: 176px;
  --fokus-mitte: 50% 50%;
  --fokus-links: 30% 50%;
  --fokus-rechts: 75% 60%;
  --fokus-oben: 50% 25%;
  --fokus-unten: 50% 75%;

  /* Linien, Ecken, Schatten, Bewegung */
  --rand-duenn: 1px;
  --rand-mittel: 2px;
  --rand-fokus: 3px;
  --fokus-abstand: 3px;
  --unterstrich-abstand: 4px;
  --unterstrich-dick: 1px;
  --unterstrich-dick-hover: 2px;
  --radius-klein: 8px;
  --radius-mittel: 12px;
  --radius-gross: 16px;
  --radius-rund: 999px;
  --schatten-karte: 0 8px 24px var(--farbe-schatten);
  --schatten-karte-hover: 0 16px 36px var(--farbe-schatten-stark);
  --dauer-kurz: 200ms;
  --dauer-mittel: 700ms;
}

/* Grundseite */

.seite {
  margin: var(--abstand-null);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--farbe-creme);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
}

.hauptbereich {
  display: block;
  flex: 1 0 auto;
}

/* Einblenden beim Scrollen (JavaScript tauscht die Klassen) */

.einblenden-aus {
  opacity: 0;
  transform: translateY(var(--einblenden-weg));
}

.einblenden-an {
  opacity: 1;
  transform: none;
  transition: opacity var(--dauer-mittel), transform var(--dauer-mittel);
}

/* Abschnitte und Inhaltscontainer */

.abschnitt {
  display: block;
  padding-top: var(--abstand-abschnitt);
  padding-bottom: var(--abstand-abschnitt);
  background: var(--abschnitt-hintergrund, var(--farbe-creme));
  color: var(--textfarbe, var(--farbe-tinte));
}

.abschnitt-kopf {
  padding-top: var(--abstand-hero-oben);
  padding-bottom: var(--abstand-hero-unten);
}

.abschnitt-kompakt {
  padding-top: var(--abstand-kompakt);
  padding-bottom: var(--abstand-kompakt);
}

.abschnitt-video {
  padding-top: var(--abstand-null);
  padding-bottom: var(--abstand-null);
}

.abschnitt-salbei {
  --abschnitt-hintergrund: var(--farbe-salbei);
}

.abschnitt-weiss {
  --abschnitt-hintergrund: var(--farbe-weiss);
}

.abschnitt-dunkel {
  --abschnitt-hintergrund: var(--farbe-wald);
  --titelfarbe: var(--farbe-weiss);
  --textfarbe: var(--farbe-weiss);
  --linkfarbe: var(--farbe-weiss);
  --fokusfarbe: var(--farbe-weiss);
  --linienfarbe: var(--farbe-linie-hell);
  --button-hintergrund: var(--farbe-weiss);
  --button-text: var(--farbe-wald);
  --button-hover-hintergrund: var(--farbe-salbei);
}

.inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-inhalt);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: var(--abstand-null) auto;
  padding: var(--abstand-null) var(--abstand-innen);
}

.inhalt-zeile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s) var(--abstand-l);
}

.inhalt-kopf {
  padding-top: var(--abstand-s);
  padding-bottom: var(--abstand-s);
}

/* Zeilen und Spalten */

.zeile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-spalten);
}

.zeile-oben {
  align-items: flex-start;
}

.zeile-umgekehrt {
  flex-direction: row-reverse;
}

.reihe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s) var(--abstand-m);
}

.spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-m);
  flex: 1 1 var(--spalte-basis);
  min-width: var(--abstand-null);
}

.block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-s);
}

.block-eng {
  gap: var(--abstand-null);
}

.block-zentriert {
  align-items: center;
  text-align: center;
}

.textblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-xl);
  width: 100%;
  max-width: var(--breite-text);
}

.textblock-zentriert {
  margin: var(--abstand-null) auto;
}

.abschnittskopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-s);
  max-width: var(--breite-text);
}

/* Schrift */

.ueberschrift-1 {
  margin: var(--abstand-null);
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-ueberschrift);
  font-size: var(--ueberschrift-1);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--buchstabenabstand-titel);
}

.ueberschrift-2 {
  margin: var(--abstand-null);
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-ueberschrift);
  font-size: var(--ueberschrift-2);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--buchstabenabstand-titel);
}

.ueberschrift-3 {
  margin: var(--abstand-null);
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-ueberschrift);
  font-size: var(--ueberschrift-3);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-titel);
}

.ueberschrift-4 {
  margin: var(--abstand-null);
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--ueberschrift-4);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
}

.text {
  margin: var(--abstand-null);
  color: var(--textfarbe, var(--farbe-tinte));
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
}

.text-gross {
  margin: var(--abstand-null);
  color: var(--textfarbe, var(--farbe-tinte));
  font-family: var(--schrift-text);
  font-size: var(--text-gross);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
}

.text-klein {
  margin: var(--abstand-null);
  color: var(--textfarbe, var(--farbe-tinte));
  font-family: var(--schrift-text);
  font-size: var(--text-klein);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
}

.text-stark {
  margin: var(--abstand-null);
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-text);
}

.trenner {
  margin: var(--abstand-null);
  color: var(--textfarbe, var(--farbe-tinte));
  font-family: var(--schrift-text);
  font-size: var(--text-klein);
  line-height: var(--zeilenhoehe-text);
}

/* Links und Knöpfe */

.link-text {
  color: var(--linkfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
  text-decoration: underline;
  text-decoration-thickness: var(--unterstrich-dick);
  text-underline-offset: var(--unterstrich-abstand);
}

.link-text:hover {
  text-decoration-thickness: var(--unterstrich-dick-hover);
}

.link-text:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.link-text-klein {
  color: var(--linkfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-klein);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-text);
  text-decoration: underline;
  text-decoration-thickness: var(--unterstrich-dick);
  text-underline-offset: var(--unterstrich-abstand);
}

.link-text-klein:hover {
  text-decoration-thickness: var(--unterstrich-dick-hover);
}

.link-text-klein:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.link-pfeil {
  color: var(--linkfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-text);
  text-decoration: underline;
  text-decoration-thickness: var(--unterstrich-dick);
  text-underline-offset: var(--unterstrich-abstand);
}

.link-pfeil:hover {
  text-decoration-thickness: var(--unterstrich-dick-hover);
}

.link-pfeil:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.link-unten {
  margin-top: auto;
}

.button-primaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hoehe-button);
  padding: var(--abstand-xs) var(--abstand-l);
  border: var(--rand-mittel) solid var(--button-hintergrund, var(--farbe-wald));
  border-radius: var(--radius-mittel);
  background: var(--button-hintergrund, var(--farbe-wald));
  color: var(--button-text, var(--farbe-weiss));
  font-family: var(--schrift-text);
  font-size: var(--text-button);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer-kurz), border-color var(--dauer-kurz);
}

.button-primaer:hover {
  border-color: var(--button-hover-hintergrund, var(--farbe-tinte));
  background: var(--button-hover-hintergrund, var(--farbe-tinte));
}

.button-primaer:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.button-primaer:active {
  border-color: var(--farbe-blatt);
  background: var(--farbe-blatt);
}

.button-sekundaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hoehe-button);
  padding: var(--abstand-xs) var(--abstand-l);
  border: var(--rand-mittel) solid var(--linkfarbe, var(--farbe-wald));
  border-radius: var(--radius-mittel);
  background: var(--farbe-durchsichtig);
  color: var(--linkfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-button);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer-kurz);
}

.button-sekundaer:hover {
  background: var(--farbe-salbei);
}

.button-sekundaer:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.button-sekundaer:active {
  background: var(--farbe-blatt);
}

/* Kopfbereich und Menü */

.kopf {
  display: block;
  background: var(--farbe-creme);
  border-bottom: var(--rand-duenn) solid var(--farbe-salbei);
}

.logo {
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-logo);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--buchstabenabstand-titel);
  text-decoration: none;
}

.logo-rahmen {
  display: flex;
  box-sizing: border-box;
  width: var(--logo-breite);
  margin: var(--abstand-null);
  aspect-ratio: var(--verhaeltnis-logo);
  overflow: hidden;
  border-radius: var(--radius-klein);
}

.logo-rahmen-hell {
  padding: var(--abstand-xs);
  aspect-ratio: var(--verhaeltnis-logo-hell);
  background: var(--farbe-creme);
}

.logo:focus {
  outline: var(--rand-fokus) solid var(--fokusfarbe, var(--farbe-wald));
  outline-offset: var(--fokus-abstand);
}

.menue {
  display: block;
}

.menue-offen {
  display: block;
}

.menue-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--abstand-xs) var(--abstand-s);
}

.menue-link {
  padding: var(--abstand-xs) var(--abstand-null);
  border-bottom: var(--rand-mittel) solid var(--farbe-durchsichtig);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-menue);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
  text-decoration: none;
}

.menue-link:hover {
  border-bottom-color: var(--farbe-blatt);
}

.menue-link:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

.menue-link-aktuell {
  padding: var(--abstand-xs) var(--abstand-null);
  border-bottom: var(--rand-mittel) solid var(--farbe-wald);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-menue);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  text-decoration: none;
}

.menue-link-aktuell:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

.menue-knopf {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hoehe-button);
  padding: var(--abstand-xs) var(--abstand-m);
  border: var(--rand-mittel) solid var(--farbe-wald);
  border-radius: var(--radius-mittel);
  background: var(--farbe-durchsichtig);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-button);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
  cursor: pointer;
}

.menue-knopf:hover {
  background: var(--farbe-salbei);
}

.menue-knopf:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

/* Bilder */

.bildrahmen {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: var(--abstand-null);
  aspect-ratio: var(--verhaeltnis-quer);
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--farbe-salbei);
}

.bildrahmen-karte {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: var(--abstand-null);
  aspect-ratio: var(--verhaeltnis-quer);
  overflow: hidden;
  background: var(--farbe-salbei);
}

.bild {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: var(--abstand-null);
  height: auto;
  object-fit: cover;
  object-position: var(--bild-position, var(--fokus-mitte));
}

.fokus-links {
  --bild-position: var(--fokus-links);
}

.fokus-rechts {
  --bild-position: var(--fokus-rechts);
}

.fokus-oben {
  --bild-position: var(--fokus-oben);
}

.fokus-unten {
  --bild-position: var(--fokus-unten);
}

/* Video */

.videorahmen {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: var(--abstand-null);
  aspect-ratio: var(--verhaeltnis-video);
  overflow: hidden;
  background: var(--farbe-wald);
}

.video {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: var(--abstand-null);
  height: auto;
  object-fit: cover;
}

/* Karten */

.kartenreihe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--abstand-karten);
}

.karte {
  --titelfarbe: var(--farbe-wald);
  --textfarbe: var(--farbe-tinte);
  --linkfarbe: var(--farbe-wald);
  --fokusfarbe: var(--farbe-wald);
  --button-hintergrund: var(--farbe-wald);
  --button-text: var(--farbe-weiss);
  --button-hover-hintergrund: var(--farbe-tinte);
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--karte-basis);
  min-width: var(--abstand-null);
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-karte);
  transition: box-shadow var(--dauer-kurz), opacity var(--dauer-mittel), transform var(--dauer-mittel);
}

.karte:hover {
  box-shadow: var(--schatten-karte-hover);
}

.karte-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: var(--abstand-null);
  align-items: flex-start;
  gap: var(--abstand-s);
  padding: var(--abstand-karte-innen);
}

.nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nummer-groesse);
  height: var(--nummer-groesse);
  margin: var(--abstand-null);
  border-radius: var(--radius-rund);
  background: var(--farbe-wald);
  color: var(--farbe-weiss);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--ueberschrift-3);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
}

/* Zierelemente, Aufzählungen, Platzhalter */

.zierstrich {
  width: var(--zierstrich-breite);
  height: var(--zierstrich-hoehe);
  border-radius: var(--radius-rund);
  background: var(--farbe-blatt);
}

.aufzaehlung {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--abstand-s) var(--abstand-m);
  width: 100%;
}

.aufzaehlung-zeile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--abstand-s);
  flex: 1 1 var(--aufzaehlung-basis);
  min-width: var(--abstand-null);
}

.aufzaehlung-punkt {
  flex: 0 0 var(--punkt-groesse);
  width: var(--punkt-groesse);
  height: var(--punkt-groesse);
  margin-top: var(--punkt-versatz);
  border-radius: var(--radius-klein);
  background: var(--farbe-blatt);
}

.platzhalter {
  box-sizing: border-box;
  margin: var(--abstand-null);
  padding: var(--abstand-s) var(--abstand-m);
  border: var(--rand-mittel) dashed var(--farbe-wald);
  border-radius: var(--radius-mittel);
  background: var(--farbe-salbei);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-text);
}

.brotkrumen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs);
}

.faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--breite-text);
}

.faq-eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-xs);
  padding: var(--abstand-m) var(--abstand-null);
  border-bottom: var(--rand-duenn) solid var(--linienfarbe, var(--farbe-blatt));
}

/* Kontakt */

.kontaktzeile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-xs) var(--abstand-s);
}

.kontakt-label {
  flex: 0 0 var(--kontakt-label-breite);
  margin: var(--abstand-null);
  color: var(--titelfarbe, var(--farbe-wald));
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-text);
}

.formular {
  --titelfarbe: var(--farbe-wald);
  --textfarbe: var(--farbe-tinte);
  --linkfarbe: var(--farbe-wald);
  --fokusfarbe: var(--farbe-wald);
  --button-hintergrund: var(--farbe-wald);
  --button-text: var(--farbe-weiss);
  --button-hover-hintergrund: var(--farbe-tinte);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-m);
  box-sizing: border-box;
  width: 100%;
  padding: var(--abstand-l);
  border-radius: var(--radius-gross);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-karte);
}

.feld-zeile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  width: 100%;
}

.feld-gruppe {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--feld-basis);
  gap: var(--abstand-xs);
  min-width: var(--abstand-null);
}

.feld-label {
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-klein);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
}

.feld {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--hoehe-feld);
  padding: var(--abstand-xs) var(--abstand-s);
  border: var(--rand-duenn) solid var(--farbe-wald);
  border-radius: var(--radius-klein);
  background: var(--farbe-creme);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  line-height: var(--zeilenhoehe-text);
}

.feld:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

.feld-gross {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--hoehe-feld-gross);
  padding: var(--abstand-s);
  border: var(--rand-duenn) solid var(--farbe-wald);
  border-radius: var(--radius-klein);
  background: var(--farbe-creme);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  line-height: var(--zeilenhoehe-text);
  resize: vertical;
}

.feld-gross:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

/* Fußbereich */

.fuss-spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-xs);
  flex: 1 1 var(--fuss-spalte-basis);
  min-width: var(--abstand-null);
}

.fuss-spalte-gross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-s);
  flex: 2 1 var(--fuss-spalte-gross);
  min-width: var(--abstand-null);
}

.fuss-leiste {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s) var(--abstand-m);
  padding-top: var(--abstand-m);
  border-top: var(--rand-duenn) solid var(--linienfarbe, var(--farbe-blatt));
}

/* Piktogramme */

.piktogramm-klein {
  display: block;
  flex: 0 0 var(--piktogramm-klein);
  width: var(--piktogramm-klein);
  height: var(--piktogramm-klein);
}

.piktogramm-karte {
  display: block;
  width: var(--piktogramm-karte);
  height: var(--piktogramm-karte);
}

.piktogramm-gross {
  display: block;
  width: var(--piktogramm-gross);
  height: var(--piktogramm-gross);
}

.bildrahmen-mitte {
  align-items: center;
  justify-content: center;
}

/* Untermenü Dienstleistungen */

.menue-gruppe {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-xs);
}

.untermenue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hoehe-feld);
  min-height: var(--hoehe-feld);
  padding: var(--abstand-null);
  border: var(--rand-duenn) solid var(--farbe-durchsichtig);
  border-radius: var(--radius-mittel);
  background: var(--farbe-durchsichtig);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-button);
  line-height: var(--zeilenhoehe-eng);
  cursor: pointer;
}

.untermenue-knopf:hover {
  background: var(--farbe-salbei);
}

.untermenue-knopf:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

.untermenue {
  display: none;
}

.untermenue-offen {
  display: block;
  position: relative;
  z-index: var(--ebene-popup);
  height: var(--abstand-null);
}

.untermenue-zeile {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  box-sizing: border-box;
  width: var(--untermenue-breite);
  margin-right: var(--untermenue-versatz);
  padding: var(--abstand-xs);
  border-radius: var(--radius-gross);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-karte-hover);
}

.untermenue-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-s);
  border-radius: var(--radius-mittel);
  color: var(--farbe-wald);
  font-family: var(--schrift-text);
  font-size: var(--text-normal);
  font-weight: var(--gewicht-mittel);
  line-height: var(--zeilenhoehe-eng);
  text-decoration: none;
}

.untermenue-link:hover {
  background: var(--farbe-salbei);
}

.untermenue-link:focus {
  outline: var(--rand-fokus) solid var(--farbe-wald);
  outline-offset: var(--fokus-abstand);
}

.untermenue-mobil {
  display: none;
}

.untermenue-mobil-offen {
  display: none;
}

/* Tablet */

@media (max-width: 1024px) {
  .abschnitt {
    padding-top: var(--abstand-abschnitt-tablet);
    padding-bottom: var(--abstand-abschnitt-tablet);
  }

  .abschnitt-kopf {
    padding-top: var(--abstand-hero-oben-tablet);
    padding-bottom: var(--abstand-hero-unten-tablet);
  }

  .abschnitt-kompakt {
    padding-top: var(--abstand-kompakt-tablet);
    padding-bottom: var(--abstand-kompakt-tablet);
  }

  .inhalt {
    gap: var(--abstand-inhalt-tablet);
  }

  .zeile {
    gap: var(--abstand-spalten-tablet);
  }

  .spalte {
    flex-basis: var(--spalte-basis-tablet);
  }

  .karte {
    flex-basis: var(--karte-basis-tablet);
  }

  .ueberschrift-1 {
    font-size: var(--ueberschrift-1-tablet);
  }

  .ueberschrift-2 {
    font-size: var(--ueberschrift-2-tablet);
  }

  .ueberschrift-3 {
    font-size: var(--ueberschrift-3-tablet);
  }

  .inhalt-zeile {
    align-items: center;
    gap: var(--abstand-null) var(--abstand-l);
  }

  .menue-knopf {
    display: inline-flex;
  }

  .menue {
    display: none;
    flex-basis: 100%;
  }

  .menue-offen {
    display: block;
    position: relative;
    z-index: var(--ebene-popup);
    flex-basis: 100%;
    height: var(--abstand-null);
  }

  .menue-panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: var(--abstand-xs) var(--abstand-m) var(--abstand-m);
    border-radius: var(--radius-gross);
    background: var(--farbe-creme);
    box-shadow: var(--schatten-karte-hover);
  }

  .menue-gruppe {
    justify-content: space-between;
  }

  .untermenue-offen {
    display: none;
  }

  .untermenue-mobil-offen {
    display: flex;
    flex-direction: column;
    padding-left: var(--abstand-m);
  }

  .untermenue-link {
    padding: var(--abstand-s) var(--abstand-null);
    border-radius: var(--abstand-null);
    border-bottom: var(--rand-duenn) solid var(--farbe-salbei);
  }

  .menue-link {
    padding: var(--abstand-s) var(--abstand-null);
    border-bottom: var(--rand-duenn) solid var(--farbe-salbei);
  }

  .menue-link-aktuell {
    padding: var(--abstand-s) var(--abstand-null);
  }
}

/* Handy */

@media (max-width: 767px) {
  .abschnitt {
    padding-top: var(--abstand-abschnitt-mobile);
    padding-bottom: var(--abstand-abschnitt-mobile);
  }

  .abschnitt-kopf {
    padding-top: var(--abstand-hero-oben-mobile);
    padding-bottom: var(--abstand-hero-unten-mobile);
  }

  .abschnitt-kompakt {
    padding-top: var(--abstand-kompakt-mobile);
    padding-bottom: var(--abstand-kompakt-mobile);
  }

  .videorahmen {
    aspect-ratio: var(--verhaeltnis-video-mobile);
  }

  .inhalt {
    gap: var(--abstand-inhalt-mobile);
    padding-left: var(--abstand-innen-mobile);
    padding-right: var(--abstand-innen-mobile);
  }

  .inhalt-zeile {
    gap: var(--abstand-null) var(--abstand-s);
  }

  .zeile {
    gap: var(--abstand-spalten-mobile);
  }

  .spalte {
    flex-basis: var(--spalte-basis-mobile);
  }

  .kartenreihe {
    gap: var(--abstand-karten-mobile);
  }

  .karte {
    flex-basis: var(--karte-basis-mobile);
    flex-direction: row;
  }

  .karte-inhalt {
    gap: var(--abstand-xs);
    padding: var(--abstand-karte-innen-mobile);
  }

  .karte-kurztext {
    display: none;
  }

  .bildrahmen {
    aspect-ratio: var(--verhaeltnis-quer-mobile);
  }

  .bildrahmen-karte {
    flex: 0 0 var(--karte-bild-breite-mobile);
    width: auto;
    aspect-ratio: auto;
  }

  .aufzaehlung-zeile {
    flex-basis: var(--aufzaehlung-basis-mobile);
  }

  .ueberschrift-1 {
    font-size: var(--ueberschrift-1-mobile);
  }

  .ueberschrift-2 {
    font-size: var(--ueberschrift-2-mobile);
  }

  .ueberschrift-3 {
    font-size: var(--ueberschrift-3-mobile);
  }

  .text-gross {
    font-size: var(--text-gross-mobile);
  }

  .logo-rahmen {
    width: var(--logo-breite-mobile);
  }

  .piktogramm-karte {
    display: none;
  }

  .piktogramm-gross {
    width: var(--piktogramm-gross-mobile);
    height: var(--piktogramm-gross-mobile);
  }

  .button-primaer {
    width: 100%;
  }

  .button-sekundaer {
    width: 100%;
  }

  .kontakt-label {
    flex-basis: 100%;
  }

  .formular {
    padding: var(--abstand-karte-innen-mobile);
  }

  .fuss-spalte {
    flex-basis: var(--fuss-spalte-basis-mobile);
  }

  .fuss-spalte-gross {
    flex-basis: 100%;
  }

  .fuss-spalte-optional {
    display: none;
  }
}

/* Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  .einblenden-aus {
    opacity: 1;
    transform: none;
  }

  .einblenden-an {
    transition: none;
  }
}