/*
 * maklermodul.de – eigenes Erscheinungsbild „Flurkarte“
 *
 * Wird nach dem Creuva-CSS geladen (demo.yaml › design › stylesheets). Alle Creuva-Stile
 * liegen in Cascade Layers, dieses Stylesheet ist ungelayert und gewinnt daher ohne
 * Spezifitätskämpfe. Es setzt nur Design-Tokens und überschreibt Oberflächen – Markup,
 * Templates und das Creuva-Bundle bleiben unverändert, Theme-Updates bleiben einspielbar.
 *
 * Welt: Auszug aus der Liegenschaftskarte. Katasterpapier als Grund, Flurstücksgrenzen als
 * Linien, Gebäude als rötliche Schraffur, Grünflächen in Salbei, Parzellen um 14,5° geneigt
 * wie das Signet im Logo.
 */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ Tokens */

:root,
:root[data-theme] {
  /* Kartenfarben */
  --mm-paper: #f4f3ee;
  --mm-paper-deep: #e9e7df;
  --mm-ink: #333a46;
  --mm-ink-deep: #262b34;
  --mm-sage: #7abfbc;
  --mm-sage-soft: #dcebe8;
  --mm-sage-text: #2b6f6b;
  --mm-building: #c9a19a;
  --mm-signal: #b8463a;
  --mm-line: 1.5px;
  --mm-slant: 14.5deg;
  --mm-map: url("flurkarte-linien.svg");

  /* Creuva-Tokens auf die Karte abbilden */
  --scheme-primary: var(--mm-ink);
  --scheme-accent: var(--mm-sage);
  --c-primary: var(--mm-ink);
  --c-primary-contrast: #fff;
  --c-accent: var(--mm-sage);
  --c-accent-text: var(--mm-sage-text);
  --c-accent-contrast: var(--mm-ink-deep);
  --c-accent-on-primary: var(--mm-sage);
  --c-accent-soft: var(--mm-sage-soft);
  --c-accent-blob: transparent;
  --c-bg: var(--mm-paper);
  --c-surface: #fbfaf7;
  --c-surface-muted: var(--mm-paper-deep);
  --c-text: var(--mm-ink-deep);
  --c-text-muted: #545c68;
  --c-border: color-mix(in srgb, var(--mm-ink) 70%, transparent);
  --c-link: var(--mm-ink);

  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-weight-heading: 750;
  --fs-h1: clamp(2.4rem, 1.5rem + 3.2vw, 4.4rem);
  --fs-h2: clamp(1.95rem, 1.4rem + 2vw, 3.1rem);
  --lh-heading: 1.02;

  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-pill: 0;
  --shadow-s: none;
  --shadow-m: 0 18px 36px -24px rgb(38 43 52 / 0.45);
  --shadow-l: 0 28px 56px -28px rgb(38 43 52 / 0.5);
  --hover-lift: 0px;

  --card-border-width: var(--mm-line);
  --card-border: var(--mm-ink);
  --card-shadow: none;
}

/* ---------------------------------------------------------- Grund & Schrift */

html {
  background: var(--mm-paper);
  scrollbar-color: var(--mm-ink) var(--mm-paper-deep);
  accent-color: var(--mm-sage-text);
}

body {
  background: var(--mm-paper);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--mm-sage);
  color: var(--mm-ink-deep);
}

:focus-visible {
  outline: 2px solid var(--mm-signal);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  hyphens: manual;
  -webkit-hyphens: manual;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 { letter-spacing: -0.01em; }

.rte a:not([class]),
.content-text a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.rte a:not([class]):hover {
  text-decoration-color: var(--mm-signal);
}

/* Dachzeilen weglassen: die Überschriften tragen selbst (die Texte bleiben im DOM) */
.c-kicker,
.c-card__category,
.c-footer-contact__kicker,
:is(h1, h2, h3) > .first-headline.block {
  display: none;
}

/* Zweiteilige Überschriften sprechen mit einer Stimme: gleiche Farbe, gleiches Gewicht.
   Nur der Akzent im H1 der Startseite (und in Beitragstiteln) steht in Salbei-dunkel. */
.first-headline:not(.block) + .main-headline,
.first-headline:not(.block) {
  color: inherit;
  font-weight: inherit;
}

.c-hero__accent,
.c-news-header__accent {
  color: var(--mm-sage-text);
}

/* ------------------------------------------------------------------ Buttons */
/* Geneigte Parzelle: Fläche als schräg gestellte Ebene hinter dem Text */

.c-button,
.content-hyperlink:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) > a,
.content-text:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a,
.c-media .rte > p:last-child > a,
.c-price .rte > p:last-child > a {
  --btn-bg: var(--mm-ink);
  --btn-fg: #fff;
  --btn-edge: var(--mm-ink);
  position: relative;
  isolation: isolate;
  padding: 0.95em 1.7em;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--btn-fg);
  font-weight: 650;
  font-stretch: 96%;
  letter-spacing: 0.01em;
  box-shadow: none;
  transform: none;
}

:is(.c-button,
.content-hyperlink:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) > a,
.content-text:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a,
.c-media .rte > p:last-child > a,
.c-price .rte > p:last-child > a)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--mm-line) solid var(--btn-edge);
  background: var(--btn-bg);
  transform: skewX(calc(-1 * var(--mm-slant)));
  transition: background-color var(--transition), transform var(--transition-hover);
}

:is(.c-button,
.content-hyperlink:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) > a,
.content-text:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a,
.c-media .rte > p:last-child > a,
.c-price .rte > p:last-child > a):hover {
  transform: none;
  box-shadow: none;
  background: none;
}

:is(.c-button,
.content-hyperlink:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) > a,
.content-text:is(.u-button, .u-button-secondary, .u-button-accent, .u-button-outline, .u-button-outline-accent) .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a,
.c-media .rte > p:last-child > a,
.c-price .rte > p:last-child > a):hover::before {
  background: var(--btn-bg-hover, color-mix(in srgb, var(--btn-bg) 82%, #000));
  transform: skewX(calc(-1 * var(--mm-slant))) translateX(3px);
}

:is(.c-button,
.content-hyperlink > a,
.content-text .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child > a):focus-visible {
  outline: none;
}

:is(.c-button,
.content-hyperlink > a,
.content-text .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child > a):focus-visible::before {
  outline: 2px solid var(--mm-signal);
  outline-offset: 3px;
}

/* Primär: Salbei-Fläche (Grünfläche der Karte) mit dunkler Schrift */
.c-button--primary,
.content-hyperlink.u-button > a,
.content-text.u-button .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a:first-child,
.c-media .rte > p:last-child > a:first-child,
.c-price.u-featured .rte > p:last-child > a {
  --btn-bg: var(--mm-sage);
  --btn-fg: var(--mm-ink-deep);
  --btn-edge: var(--mm-ink);
  --btn-bg-hover: #6ab3b0;
}

/* Sekundär: nur die Flurstücksgrenze */
.c-button--secondary,
.content-hyperlink:is(.u-button-secondary, .u-button-outline) > a,
.content-text:is(.u-button-secondary, .u-button-outline) .rte > p:last-child > a,
.c-cta__body > .rte > p:last-child:not(:first-child) > a:not(:first-child),
.c-media .rte > p:last-child > a:not(:first-child),
.c-price:not(.u-featured) .rte > p:last-child > a {
  --btn-bg: transparent;
  --btn-fg: var(--mm-ink-deep);
  --btn-edge: var(--mm-ink);
  --btn-bg-hover: color-mix(in srgb, var(--mm-sage) 22%, transparent);
}

.content-hyperlink.u-button-accent > a,
.content-text.u-button-accent .rte > p:last-child > a {
  --btn-bg: var(--mm-ink);
  --btn-fg: #fff;
}

/* Header-Button: dunkle Parzelle */
.c-header__cta {
  --btn-bg: var(--mm-ink);
  --btn-fg: #fff;
  --btn-bg-hover: var(--mm-ink-deep);
}

/* ------------------------------------------------------------------- Header */

.l-top:has(.c-style-switcher) {
  display: none;
}

.c-style-switcher {
  display: none !important;
}

.l-header {
  background: color-mix(in srgb, var(--mm-paper) 94%, transparent);
  border-bottom: var(--mm-line) solid var(--mm-ink);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.c-brand__logo img {
  height: var(--logo-height);
  width: auto;
}

.c-header__panel .mod_navigation a,
.c-header__panel .mod_navigation strong {
  font-weight: 560;
  font-stretch: 96%;
}

.c-header__panel .level_1 > li > :is(a, strong).active,
.c-header__panel .level_1 > li > a.trail {
  box-shadow: inset 0 -2px 0 var(--mm-ink);
}

.c-header__panel .level_2 {
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  background: var(--mm-paper);
  box-shadow: none;
}

/* ------------------------------------------------------------- Abschnitte */
/* Jeder Artikel ist ein Flurstück: eine Grenzlinie trennt ihn vom nächsten */

.l-main > .mod_article + .mod_article {
  border-top: 1px solid color-mix(in srgb, var(--mm-ink) 22%, transparent);
}

.l-main > .mod_article:is(.u-bg-muted, .u-bg-accent, .u-bg-surface) {
  border-top: var(--mm-line) solid var(--mm-ink);
  border-bottom: var(--mm-line) solid var(--mm-ink);
}

.l-main > .mod_article:is(.u-bg-muted, .u-bg-accent, .u-bg-surface) + .mod_article {
  border-top: 0;
}

/* Grünfläche: Salbei mit den feinen Flurstücksgrenzen darunter */
.u-bg-muted {
  background: var(--mm-sage-soft);
}

.l-main > .mod_article.u-bg-muted {
  background:
    linear-gradient(color-mix(in srgb, var(--mm-sage-soft) 84%, transparent), color-mix(in srgb, var(--mm-sage-soft) 84%, transparent)),
    var(--mm-map) center / 1800px auto,
    var(--mm-sage-soft);
  background-blend-mode: normal;
}

.u-bg-accent {
  background: var(--mm-sage-soft);
}

.u-bg-surface {
  background: #fbfaf7;
}

/* Bebaute Fläche: dunkler Abschnitt in Schiefer */
.u-bg-primary,
.l-main > .mod_article.u-bg-primary {
  background: var(--mm-ink);
  color: #fff;
}

/* --------------------------------------------------------------------- Hero */

.c-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem);
  border-bottom: var(--mm-line) solid var(--mm-ink);
}

/* Die Karte läuft unter dem ganzen Hero weiter, zur Textseite hin ausgeblendet */
.c-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mm-map) 72% 40% / 1500px auto no-repeat;
  opacity: 0.32;
  mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
}

.c-hero__title {
  font-size: var(--fs-h1);
  font-weight: 780;
  font-stretch: 80%;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.c-hero__text {
  max-width: 33rem;
  font-size: 1.125rem;
  color: #3e4652;
}

.c-hero__actions {
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.c-hero__media::before {
  display: none;
}

.c-hero--rounded .c-hero__media img,
.c-hero--organic .c-hero__media img {
  border: var(--mm-line) solid var(--mm-ink);
}

.c-hero__media img {
  border-radius: 0;
  box-shadow: none;
}

/* Badge als Kartenlegende */
.c-hero__badge {
  left: auto;
  right: var(--space-s);
  bottom: auto;
  top: calc(100% - 1.25rem);
  padding: 0.7rem 1rem 0.7rem 0.9rem;
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  background: var(--mm-ink);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
  font-stretch: 94%;
}

.c-hero__badge li::before {
  background: var(--mm-sage);
}

@container (min-width: 56rem) {
  .c-hero__badge {
    left: auto;
    right: calc(-1 * var(--space-s));
  }
}

/* Weitere Seiten-Heroes ohne Bild: Karte rechts als Fläche */
.c-hero:not(:has(.c-hero__media)) .c-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* Entrance: die Karte wird einmal von links nach rechts „aufgetragen“ */
@media (prefers-reduced-motion: no-preference) {
  .c-hero__media img {
    animation: mm-plot 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }

  @keyframes mm-plot {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ------------------------------------------------------- Karten & Kacheln */

.c-feature,
.c-card,
.c-price,
.content-box,
.teaser-box {
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  background: #fbfaf7;
  box-shadow: none;
  transform: none;
  transition: background-color var(--transition);
}

.c-feature:hover,
.c-card:hover,
.c-price:hover {
  transform: none;
  box-shadow: none;
  background:
    linear-gradient(#fbfaf7, #fbfaf7) padding-box,
    #fbfaf7;
}

/* Raster aus Flurstücken: Nachbarkarten teilen sich die Grenzlinie */
.u-grid-3:has(> .c-feature),
.u-grid-3:has(> .c-card) {
  gap: 0;
}

.u-grid-3:has(> .c-feature) > .c-feature,
.u-grid-3:has(> .c-card) > .c-card {
  margin: 0 calc(-1 * var(--mm-line)) calc(-1 * var(--mm-line)) 0;
}

/* Flurstücksverzeichnis: statt Icons trägt jede Zelle ihre Flurstücksnummer in Signalrot */
.u-grid-3:has(> .c-feature) {
  counter-reset: flst;
}

.u-grid-3 > .c-feature:not(.u-feature-plain, .u-feature-inline) {
  counter-increment: flst;
}

.u-grid-3 > .c-feature:not(.u-feature-plain, .u-feature-inline) > .c-feature__icon {
  display: none;
}

.u-grid-3 > .c-feature:not(.u-feature-plain, .u-feature-inline)::before {
  content: "Flst. " counter(flst);
  display: block;
  margin-bottom: var(--space-s);
  color: var(--mm-signal);
  font-size: var(--fs-small);
  font-weight: 600;
  font-stretch: 88%;
  font-variant-numeric: tabular-nums;
}

/* Icon im Signet-Parallelogramm (Icon-Boxen außerhalb der Raster) */
.c-feature__icon {
  width: 3.4rem;
  height: 2.6rem;
  border-radius: 0;
  background: var(--mm-ink);
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  transition: background-color var(--transition);
}

.c-feature__icon img {
  filter: brightness(0) invert(1);
}

.c-feature:hover .c-feature__icon {
  background: var(--mm-sage-text);
  transform: none;
}

.c-feature h3 {
  font-stretch: 94%;
}

/* Bildkarten: Foto oben, Grenzlinie darunter */
.c-card__media {
  border-bottom: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
}

.c-card__media img {
  border-radius: 0;
}

.c-card:hover .c-card__media img {
  transform: none;
}

.c-card__title {
  font-stretch: 94%;
}

/* Preise: die empfohlene Lizenz als Grünfläche */
.c-price {
  background: #fbfaf7;
}

.c-price.u-featured {
  background: var(--mm-sage-soft);
  border-width: 2px;
}

.c-price.u-featured::before {
  border-radius: 0;
  background: var(--mm-ink);
  color: #fff;
  transform: translateX(-50%) skewX(calc(-1 * var(--mm-slant)));
}

.c-price__amount {
  font-stretch: 84%;
  font-weight: 760;
  letter-spacing: -0.03em;
}

/* Häkchen in Listen: kleine Parzelle statt Haken-Icon */
.c-price .rte li::before,
.c-hero__badge li::before,
.c-footer-contact__facts li::before {
  mask: none;
  width: 0.8em;
  height: 0.55em;
  top: 0.48em;
  background: var(--mm-sage-text);
  transform: skewX(calc(-1 * var(--mm-slant)));
}

.c-hero__badge li::before {
  background: var(--mm-sage);
}

/* --------------------------------------------------- Schritte (Maßkette) */

.c-steps dl {
  position: relative;
}

.c-steps dt,
.c-steps__item dt {
  font-stretch: 94%;
}

.c-steps__item::before {
  border-radius: 0 !important;
  background: var(--mm-ink) !important;
  color: #fff !important;
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  width: 3.2rem !important;
  font-stretch: 90%;
}

.c-steps__item::after {
  height: 0 !important;
  border-top: 1px solid var(--mm-ink) !important;
  background: none !important;
}

/* ----------------------------------------------------- Kennzahlen (Maße) */
/* Keine Kennzahlenleiste: die Werte stehen als Maße auf einer durchgehenden Maßkette */

.c-stats,
.c-stats.u-bg-accent,
.c-stats.u-bg-muted,
.c-stats.u-bg-primary {
  background: transparent;
  color: var(--c-text);
}

.c-stats::before {
  display: none;
}

.c-stats > :is(h2, h3) {
  color: var(--c-text);
}

.c-stats dl {
  gap: 0;
}

/* Die Maßkette läuft direkt unter den Zahlen: jeder Wert hat sein Segment mit Endstrichen,
   nebeneinander ergeben die Segmente eine durchgehende Kette, gestapelt (mobil) je ein Maß. */
.c-stats__item {
  position: relative;
  padding: var(--space-s) var(--space-m) 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.c-stats dd {
  position: relative;
  align-self: stretch;
  padding-top: 0.9rem;
}

.c-stats dd::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--space-m));
  right: calc(-1 * var(--space-m));
  height: 13px;
  margin-top: -6px;
  border-inline: 1px solid var(--mm-ink);
  background: linear-gradient(var(--mm-ink), var(--mm-ink)) center / 100% 1px no-repeat;
}

.c-stats__item + .c-stats__item dd::before {
  border-left: 0;
}

.c-stats__item:hover {
  transform: none;
  box-shadow: none;
}

.c-stats__icon {
  display: none;
}

.c-stats dt {
  color: var(--mm-ink-deep);
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: -0.02em;
}

.c-stats__unit {
  color: var(--mm-signal);
}

.c-stats dd {
  color: var(--c-text-muted);
}

/* ------------------------------------------------- Call to Action (Bauplatz) */

.c-cta {
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--mm-ink) 93%, transparent), color-mix(in srgb, var(--mm-ink) 93%, transparent)),
    url("flurkarte.svg") 60% 40% / 900px auto,
    var(--mm-ink);
  box-shadow: none;
}

.c-cta::before,
.c-cta::after {
  display: none;
}

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

.c-cta h2 .main-headline {
  color: #fff;
}

.c-cta .rte {
  color: rgb(255 255 255 / 0.82);
}

.c-cta__body > .rte > p:last-child:not(:first-child) > a:not(:first-child) {
  --btn-fg: #fff;
  --btn-edge: rgb(255 255 255 / 0.7);
  --btn-bg-hover: rgb(255 255 255 / 0.1);
}

.c-cta.u-card-white,
.c-cta.u-card-muted,
.c-cta.u-card-soft {
  background: var(--mm-sage-soft);
}

.c-cta:is(.u-card-white, .u-card-muted, .u-card-soft) :is(h2, h2 .main-headline) {
  color: var(--mm-ink-deep);
}

.c-cta:is(.u-card-white, .u-card-muted, .u-card-soft) .rte {
  color: var(--c-text);
}

/* --------------------------------------------------------- Akkordeon (FAQ) */

.c-accordion__item {
  border: 0;
  border-top: 1px solid var(--mm-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.c-accordion__item:last-child {
  border-bottom: 1px solid var(--mm-ink);
}

.handorgel__header__button {
  font-weight: 650;
  font-stretch: 96%;
}

.content-accordion:is(.u-accordion-icon, .u-accordion-info, .u-accordion-chat) .handorgel__header__button::before {
  border-radius: 0;
  background: var(--mm-sage-text);
}

/* --------------------------------------------------------- Tabellen & Fakten */

.content-table table {
  border-radius: 0;
  border: var(--mm-line) solid var(--mm-ink);
}

.content-table :is(th, td) {
  border-color: color-mix(in srgb, var(--mm-ink) 30%, transparent);
}

.content-table thead th {
  background: var(--mm-ink);
  color: #fff;
  font-stretch: 94%;
}

/* ------------------------------------------------------------ Logos & Medien */

.c-logos__item img {
  filter: grayscale(1) contrast(1.1);
  opacity: 0.8;
  transition: filter var(--transition), opacity var(--transition);
}

.c-logos__item:hover img {
  filter: none;
  opacity: 1;
}

.content-gallery img,
.content-image img,
.c-media img {
  border-radius: 0;
}

.content-image figure,
.content-gallery figure {
  border: var(--mm-line) solid var(--mm-ink);
}

/* ----------------------------------------------------------------- Ratgeber */

.c-news-header__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-news-header__text > h1 {
  margin-block: var(--space-xs) var(--space-s);
}

.c-news-header__text > .c-news-header__kicker + * {
  margin-top: 0;
}

.c-news-header__kicker > span:first-child {
  display: none;
}

.c-news-header__kicker > span:first-child + *::before {
  content: none;
  display: none;
}

.c-news-header__text > .info,
.c-news-header__text > .c-news-header__kicker {
  order: 1;
  margin-block: 0 !important;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.c-news-header__lead {
  margin: 0 0 var(--space-m);
}

.c-news-header__text > .info {
  margin-top: var(--space-2xs) !important;
}

.c-news-header__kicker {
  order: 1;
  margin-top: var(--space-s);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.c-news-header__kicker > * {
  color: inherit;
}

.c-news-header__media img {
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  box-shadow: none;
}

.rte :is(h2, h3) {
  margin-top: 1.6em;
  margin-bottom: 0.45em;
}

.mod_newsreader .content-text + .content-text > :is(h2, h3):first-child,
.mod_newsreader :is(.content-text, .content-description-list) > h2:first-child {
  margin-top: 1.4em;
}


.layout_latest,
.layout_teaser,
.c-news-card {
  border: var(--mm-line) solid var(--mm-ink);
  border-radius: 0;
  background: #fbfaf7;
  box-shadow: none;
}

.layout_latest,
.layout_teaser {
  display: flex;
  flex-direction: column;
}

.layout_latest > .image_container,
.layout_teaser > .image_container { order: -2; }

.layout_latest > h2,
.layout_teaser > h2 {
  order: -1;
  margin-bottom: 0.3em;
}

.layout_latest > .more,
.layout_teaser > .more { order: 1; }

.layout_latest .info,
.layout_teaser .info {
  margin: 0 var(--space-m) 0.6em;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.layout_latest .image_container img,
.layout_teaser .image_container img {
  border-radius: 0;
}

/* -------------------------------------------------------------------- Footer */

.l-footer {
  background:
    linear-gradient(color-mix(in srgb, var(--mm-ink-deep) 95%, transparent), color-mix(in srgb, var(--mm-ink-deep) 95%, transparent)),
    url("flurkarte-linien.svg") 30% 20% / 1400px auto,
    var(--mm-ink-deep);
  color: rgb(255 255 255 / 0.82);
  border-top: 0;
}

.l-footer :is(h2, h3, h4) {
  color: #fff;
  font-stretch: 94%;
}

.l-footer a {
  color: rgb(255 255 255 / 0.82);
}

.l-footer a:hover {
  color: #fff;
}

.c-footer-brand__claim {
  color: rgb(255 255 255 / 0.7);
}

.c-social__link {
  border-radius: 0;
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}

/* Kontakt-Streifen als Grünfläche im dunklen Footer */
.c-footer-contact {
  border: var(--mm-line) solid var(--mm-sage);
  border-radius: 0;
  background: var(--mm-sage);
  color: var(--mm-ink-deep);
}

.c-footer-contact__title {
  color: var(--mm-ink-deep);
  font-stretch: 90%;
}

.c-footer-contact :is(p, li) {
  color: var(--mm-ink-deep);
}

.c-footer-contact__facts li::before {
  background: var(--mm-ink);
}

.c-footer-contact .c-button--primary {
  --btn-bg: var(--mm-ink);
  --btn-fg: #fff;
  --btn-edge: var(--mm-ink);
  --btn-bg-hover: var(--mm-ink-deep);
}

.l-bottom {
  background: #1d2128;
  color: rgb(255 255 255 / 0.62);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.l-bottom a {
  color: rgb(255 255 255 / 0.72);
}

/* ------------------------------------------------------------------ Formular */

input:not([type="checkbox"], [type="radio"], [type="submit"]),
select,
textarea {
  border: var(--mm-line) solid var(--mm-ink) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mm-sage-text);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------- Mobil */

@media (max-width: 47.99rem) {
  .c-hero::before {
    mask-image: linear-gradient(180deg, transparent 30%, #000 70%);
    background-position: 50% 100%;
  }

  .c-stats__item + .c-stats__item dd::before {
    border-left: 1px solid var(--mm-ink);
  }

  .c-stats__item {
    padding-bottom: var(--space-m);
  }

  .c-hero__badge {
    right: var(--space-xs);
  }
}