/*
 * Gestaltungssystem, Teil 2: Grundlagen (Paket R).
 * Schriften, Reset, Typografie, Fließtext (.fliesstext) für alle Blöcke aus lib/bloecke.php,
 * Quellenkasten, Eintragsseite, gemeinsame Bausteine (Hülle, Knopf, Chip, Kachel).
 * Farben, Maße und Schatten kommen aus tokens.css. Kopf, Menü, Leiste, Fußzeile: rahmen.css.
 */

/* ---- Schriften (selbst gehostet, nur Latein, variabel) ---- */
@font-face {
  font-family: "Literata Variable";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../schrift/literata-latin-wght-normal.woff2") format("woff2-variations");
  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: "Literata Variable";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../schrift/literata-latin-wght-italic.woff2") format("woff2-variations");
  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: "Hanken Grotesk Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../schrift/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  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: "Hanken Grotesk Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../schrift/hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations");
  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;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Grundschrift 18 px (112,5 % von 16), skaliert mit Schriftgröße und Leichter Sprache */
  font-size: calc(112.5% * var(--schrift) * var(--leicht));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-gesamt, var(--kopf-h)) + 1rem);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-basis);
  line-height: var(--zeilenhoehe);
  font-weight: 420;
  font-kerning: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
body > main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; }
img, video { height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--kopf-gesamt, var(--kopf-h)) + 1rem); }
::selection { background: var(--akzent-fl); color: var(--auf-akzent); }

/* ---- Überschriften ---- */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 620;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;      /* lange Wörter (Dorferneuerungsprogramm) dürfen eine schmale Spalte nicht aufweiten */
  hyphens: auto;
  margin: 0 0 var(--r-3);
  color: var(--tinte);
}
h1 { font-size: var(--t-h1); font-weight: 650; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-mittel); font-family: var(--schrift-text); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--r-4); text-wrap: pretty; }
strong, b { font-weight: 700; }
small { font-size: var(--t-klein); }
hr { border: 0; border-top: var(--linienstaerke) solid var(--rand); margin: var(--r-6) 0; }

/* ---- Links und Fokus ---- */
a {
  overflow-wrap: anywhere;      /* Adressen und Kürzel brechen um */
  color: var(--akzent);
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
a:hover { text-decoration-color: currentColor; text-decoration-thickness: .13em; }
.link-allein { display: inline-flex; align-items: center; min-height: 44px; }   /* ein Link, der einen ganzen Absatz füllt (handy.js), ist ein Tippziel */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--rad-s);
}
.sprung {
  position: absolute;
  left: var(--r-3);
  top: -6rem;
  z-index: 200;
  min-height: var(--tipp);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--r-4);
  background: var(--akzent-fl);
  color: var(--auf-akzent);
  border-radius: var(--rad-m);
  font-weight: 700;
  text-decoration: none;
}
.sprung:focus { top: var(--r-3); }
.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Gemeinsame Bausteine ---- */
.huelle {
  width: min(var(--huelle), 100% - 2 * var(--rand-seite));
  margin-inline: auto;
}
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-alt { background: var(--papier-2); }
.abschnitt-kopf { margin-bottom: var(--r-6); max-width: 40rem; }
.abschnitt-kopf p { color: var(--tinte-2); font-size: var(--t-mittel); margin: 0; }
.ueberzeile {
  display: block;
  margin-bottom: var(--r-2);
  font-family: var(--schrift-text);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--akzent);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  min-height: var(--tipp);
  padding: .5rem 1.25rem;
  border: 2px solid var(--linie);
  border-radius: var(--rad-pille);
  background: transparent;
  color: var(--tinte);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.knopf:hover { background: var(--papier-2); }
.knopf-primaer {
  background: var(--akzent-fl);
  border-color: var(--akzent-fl);
  color: var(--auf-akzent);
}
.knopf-primaer:hover { background: color-mix(in srgb, var(--akzent-fl) 86%, black); }
html[data-theme="kontrast"] .knopf-primaer:hover { background: var(--tinte); }
.symbol { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 1.75rem;
  padding: 0 .75rem;
  border: var(--linienstaerke) solid var(--rand);
  border-radius: var(--rad-pille);
  background: var(--karte);
  color: var(--tinte-2);
  font-size: var(--t-klein);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-station { background: var(--gruen-fl); border-color: var(--gruen-fl); color: var(--auf-gruen); }
.chip-zeit { font-family: var(--schrift-titel); font-weight: 650; color: var(--ocker); }

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding: var(--r-5);
  background: var(--karte);
  border: var(--linienstaerke) solid var(--rand);
  border-radius: var(--rad-l);
  box-shadow: var(--schatten-1);
  color: var(--tinte);
  text-decoration: none;
}
a.kachel:hover { border-color: var(--linie); }
@media (hover: hover) {
  a.kachel { transition: transform var(--d-beruehrung) var(--kurve-schieben), box-shadow var(--d-beruehrung) var(--kurve-schieben); }
  a.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
}
.kachel h3 { margin: 0; }
.kachel p { margin: 0; color: var(--tinte-2); }
.kachelraster { display: grid; gap: var(--r-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.brotkrumen { margin: 0 0 var(--r-4); font-size: var(--t-klein); color: var(--tinte-2); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin: 0; padding: 0; list-style: none; }
.brotkrumen li { display: inline-flex; align-items: center; }
.brotkrumen li + li::before { content: "›"; margin-inline: .45em .25em; color: var(--tinte-2); }
.brotkrumen a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tipp); min-height: var(--tipp); color: var(--tinte-2); }
.brotkrumen [aria-current] { color: var(--tinte); font-weight: 600; }

/* Inhaltsspalte für Seiten anderer Pakete (Chronik, Pfad, Termine, Medien, Mitmachen, Suche); eigene Rahmen setzen meta['voll'] */
.seite-rahmen { width: min(64rem, 100% - 2 * var(--rand-seite)); margin-inline: auto; padding-block: var(--r-6) var(--r-7); }
.seite-chronik .seite-rahmen, .seite-pfad .seite-rahmen { width: min(70rem, 100% - 2 * var(--rand-seite)); }
.seite-rahmen > article > header:first-child h1, .seite-rahmen > section > h1:first-child { margin-bottom: var(--r-3); }

/* Seitenkopf fester Seiten */
.seitenkopf { padding-block: var(--r-7) var(--r-5); }
.seitenkopf h1 { margin-bottom: var(--r-3); }
.seitenkopf .einleitung { font-size: var(--t-gross); line-height: 1.5; color: var(--tinte-2); max-width: 38rem; margin: 0; }

/* ---- Spaltenraster: Lesespalte in der Mitte, breite Blöcke dürfen ausbrechen ---- */
.spaltenraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--spalte)) minmax(0, 1fr);
}
.spaltenraster > * { grid-column: 2; }
.spaltenraster > .breit { grid-column: 1 / -1; }

/* ---- Fließtext: alle Blöcke aus lib/bloecke.php und KONZEPT.md 3.2 ---- */
.fliesstext {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--spalte)) minmax(0, 1fr);
  font-size: var(--t-mittel);
  line-height: var(--zeilenhoehe);
}
.fliesstext > * { grid-column: 2; margin-block: 0; }
.fliesstext > .block { margin-bottom: var(--r-4); min-width: 0; }
.fliesstext > .block:has(> .bild-breit),
.fliesstext > .block-galerie,
.fliesstext > .block-vorher-nachher,
.fliesstext > .block-zeitstrahl,
.fliesstext > .block-karte,
.fliesstext > .block-video { grid-column: 1 / -1; }
.fliesstext p { margin-bottom: var(--r-4); }
.fliesstext .block > p:last-child { margin-bottom: 0; }

/* Zwischenüberschriften mit Ankern */
.fliesstext h2, .fliesstext h3 { position: relative; }
.fliesstext .block-ueberschrift { margin-top: var(--r-6); margin-bottom: var(--r-3); }
.fliesstext h2 { margin-bottom: 0; }
.fliesstext h3 { margin-bottom: 0; }
.fliesstext .block-ueberschrift:first-child { margin-top: 0; }
.anker {
  position: absolute;
  inset-block: 0;
  right: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tipp);
  margin-right: -.25rem;
  color: var(--tinte-2);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
}
h2:hover > .anker, h3:hover > .anker, .anker:focus-visible { opacity: 1; }
@media (max-width: 70rem) { .anker { display: none; } }

/* Links im Text */
.fliesstext a { font-weight: 560; }
.fliesstext a.link-tot { color: var(--tinte-2); text-decoration-style: dotted; }
.fliesstext a.link-entwurf { text-decoration-style: dashed; }
mark {
  background: var(--markierung);
  color: var(--auf-markierung);
  padding: 0 .15em;
  border-radius: .2em;
}

/* Listen */
.fliesstext ul, .fliesstext ol { margin: 0; padding-left: 1.4em; }
.fliesstext li { margin-bottom: var(--r-2); padding-left: .2em; }
.fliesstext li::marker { color: var(--akzent); font-weight: 700; }
.fliesstext ul { list-style: square; }
.fliesstext .block-liste { margin-bottom: var(--r-5); }

/* Zitat mit Herkunft */
.zitat {
  position: relative;
  margin: var(--r-5) 0;
  padding: var(--r-3) 0 var(--r-3) var(--r-5);
  border-left: 4px solid var(--akzent);
}
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: var(--t-gross);
  line-height: 1.45;
  font-weight: 460;
  color: var(--tinte);
}
.zitat blockquote p::before { content: "\201E"; color: var(--akzent); }
.zitat blockquote p::after { content: "\201C"; color: var(--akzent); }
.zitat figcaption {
  margin-top: var(--r-3);
  font-size: var(--t-klein);
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--tinte-2);
}

/* Steckbrief (Datenfelder) */
.steckbrief {
  margin: var(--r-5) 0;
  padding: var(--r-2) var(--r-4);
  background: var(--karte);
  border: var(--linienstaerke) solid var(--rand);
  border-top: 4px solid var(--ocker-fl);
  border-radius: var(--rad-m);
  box-shadow: var(--schatten-1);
  font-size: var(--t-basis);
}
.steckbrief > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--r-1) var(--r-4);
  padding: var(--r-3) 0;
  border-bottom: 1px dotted var(--linie);
}
.steckbrief > div:last-child { border-bottom: 0; }
.steckbrief dt { overflow-wrap: anywhere; font-size: var(--t-klein); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); padding-top: .2em; }
.steckbrief dd { margin: 0; font-weight: 520; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 30rem) { .steckbrief > div { grid-template-columns: 1fr; } }

/* Hinweiskasten */
.hinweis {
  position: relative;
  margin: var(--r-5) 0;
  padding: var(--r-4) var(--r-4) var(--r-4) 3.4rem;
  border-radius: var(--rad-m);
  border: var(--linienstaerke) solid var(--rand);
  border-left: 5px solid var(--gruen);
  background: var(--info-bg);
  font-size: var(--t-basis);
}
.hinweis p { margin: 0; }
.hinweis::before {
  content: "i";
  position: absolute;
  left: var(--r-4);
  top: var(--r-4);
  display: grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--gruen-fl);
  color: var(--auf-gruen);
  font-family: var(--schrift-titel);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.hinweis-achtung { border-left-color: var(--akzent-fl); background: var(--achtung-bg); }
.hinweis-achtung::before { content: "!"; background: var(--akzent-fl); color: var(--auf-akzent); font-style: normal; }

/* Bild mit Bildunterschrift und Nachweis. Fotos werden nie beschnitten. */
.bild { margin: var(--r-5) 0; }
.bild a { display: block; line-height: 0; }
.bild img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--karte-2);
  border-radius: var(--rad-s);
  box-shadow: var(--schatten-1);
}
.bild figcaption {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: var(--r-2) .15rem 0;
  font-size: var(--t-klein);
  line-height: 1.4;
  color: var(--tinte-2);
}
.bild figcaption small { font-size: var(--t-klein); color: var(--tinte-2); letter-spacing: .01em; }
.bild-breit { width: min(62rem, 100%); margin-inline: auto; }
.bild-breit img { border-radius: var(--rad-m); }
.fliesstext .block:has(> .bild-breit) { padding-inline: 0; }
a[data-lightbox] { cursor: zoom-in; }

/* Rechtstexte (Impressum, Datenschutz): Überschriften direkt im Fließtext */
.rechtstext { padding-bottom: var(--r-7); }
.rechtstext > h2 { margin-top: var(--r-7); margin-bottom: var(--r-3); }
.rechtstext > h3 { margin-top: var(--r-5); margin-bottom: var(--r-2); font-size: 1.2rem; }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext > ul { margin-bottom: var(--r-4); }
.rechtstext > p { margin-bottom: var(--r-4); }

/* Medienblöcke ohne eigene Gestaltung (Paket B ergänzt) */
.fliesstext figure { max-width: 100%; }
.fliesstext iframe, .fliesstext video { max-width: 100%; border-radius: var(--rad-m); }
.fliesstext table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: var(--t-basis); margin-bottom: var(--r-4); }
.fliesstext th, .fliesstext td { overflow-wrap: anywhere; padding: var(--r-2) var(--r-3); border-bottom: var(--linienstaerke) solid var(--rand); text-align: left; vertical-align: top; }
.fliesstext th { font-weight: 700; }
.hinweis-vorschau { padding: var(--r-3); border: 2px dashed var(--linie); border-radius: var(--rad-m); color: var(--tinte-2); font-size: var(--t-klein); }

/* ---- Quellenkasten ---- */
.quellen {
  margin-top: var(--r-7);
  padding: var(--r-5);
  background: var(--papier-2);
  border: var(--linienstaerke) solid var(--rand);
  border-left: 5px solid var(--ocker-fl);
  border-radius: var(--rad-m);
  font-size: var(--t-basis);
}
.quellen h2 { font-size: var(--t-h3); margin-bottom: var(--r-3); }
.quellen ul, .quellen ol { margin: 0 0 var(--r-4); padding-left: 1.2em; }
.quellen ol { padding-left: 1.7em; }
.quellen li { margin-bottom: var(--r-3); min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.5; }
.quellen li::marker { color: var(--ocker); font-variant-numeric: tabular-nums; font-weight: 600; }
.quellen .quelle-autor { font-weight: 600; }
.quellen .quelle-titel { font-style: italic; }
.quellen a.quelle-titel { text-decoration: underline; text-underline-offset: .15em; }
.quellen .quelle-nachweis { color: var(--tinte-2); font-size: max(16px, .94em); }
.quellen-hinweis {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding-top: var(--r-3);
  border-top: 1px dotted var(--linie);
  width: 100%;
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tinte-2);
}
.quellen-hinweis::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--akzent-fl); flex: none; }

/* ---- Eintragsseite ---- */
.eintrag { padding-bottom: var(--r-7); }
.eintrag-kopf { padding-top: var(--r-6); }
.eintrag-kopf .brotkrumen { margin-bottom: var(--r-4); }
.eintrag-meta { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-bottom: var(--r-3); }
.eintrag-kopf h1 { margin-bottom: var(--r-5); font-size: var(--t-h1); }
.eintrag-titelbild { margin: 0 0 var(--r-6); display: flex; flex-direction: column; align-items: center; }
.eintrag-titelbild img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(68vh, 40rem);
  height: auto;
  background: var(--karte-2);
  border: .5rem solid var(--karte-2);
  border-radius: var(--rad-s);
  box-shadow: var(--schatten-2);
}
.eintrag-titelbild a { display: block; line-height: 0; max-width: 100%; }
.eintrag-titelbild figcaption { margin-top: var(--r-2); font-size: var(--t-klein); color: var(--tinte-2); text-align: center; max-width: 40rem; }
.eintrag-titelbild figcaption small { display: block; font-size: var(--t-klein); }
.eintrag .quellen { margin-top: var(--r-6); }
.eintrag-fuss { margin-top: var(--r-7); }
.eintrag-fuss:empty { display: none; }

/* ---- Formulare (Grundstil für alle Pakete) ---- */
label { font-weight: 650; }
input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--tipp);
  padding: .5rem var(--r-3);
  background: var(--karte-2);
  color: var(--tinte);
  border: 2px solid var(--linie);
  border-radius: var(--rad-m);
}
textarea { min-height: 8rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tinte-2); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.3rem; height: 1.3rem; accent-color: var(--akzent-fl); }

/* ---- Fehlerseite ---- */
.fehlerseite { width: min(var(--spalte), 100% - 2 * var(--rand-seite)); margin: var(--r-8) auto; }

/* ---- Leichte Sprache ---- */
.ls-nur { display: none; }
html[data-leichte-sprache] .ls-nur { display: block; }
html[data-leichte-sprache] .ls-hide { display: none; }
html[data-leichte-sprache] .zier { display: none !important; }
html[data-leichte-sprache] body { font-weight: 480; letter-spacing: .01em; }

/* ---- Drucken ---- */
@media print {
  html { font-size: 12pt; }
  body { background: var(--papier); color: var(--tinte); }
  .kopf, .leiste, .menue, .anzeige, .hinweis, .kapitel-spalte, .kapitel-klein, .sprung, .lightbox { display: none !important; }
  .fuss { border: 0; background: none; color: var(--tinte); padding: 0; }
  a { color: var(--tinte); text-decoration: underline; }
  .fliesstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .bild img, .eintrag-titelbild img { box-shadow: none; }
}

/* Seite /dorfkarte: Legende und Ortsliste */
.dorfkarte-legende { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.dorfkarte-legende .punkt { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--farbe-papier, #fff); vertical-align: -.1rem; }
.dorfkarte-legende .punkt-ort { background: #7a2e1f; }
.dorfkarte-legende .punkt-pfad { background: #2f6f6a; }
.dorfkarte-liste { columns: 2 12rem; padding-left: 1.1rem; }
.dorfkarte-liste li { break-inside: avoid; padding: .2rem 0; }
.dorfkarte-liste a { display: inline-block; min-height: 44px; line-height: 44px; }
.dorfkarte-liste small { color: var(--farbe-text-leise, #5b544a); }