/* wir-in — Oberfläche der DorfApp.
   Bewusst ohne Framework: eine Datei, keine Build-Kette, sofort ladbar auch
   auf schwacher Verbindung. */

:root {
  --gruen: #2f6b4f;
  --gruen-hell: #e8f2ec;
  --grund: #ffffff;
  --flaeche: #f6f7f5;
  --rand: #dfe3dd;
  --text: #1d2420;
  --text-leise: #5d6b62;
  --radius: 14px;
  --schatten: 0 1px 2px rgb(29 36 32 / 6%), 0 4px 12px rgb(29 36 32 / 5%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen: #7ec4a0;
    --gruen-hell: #1e2b25;
    --grund: #121613;
    --flaeche: #1a201c;
    --rand: #2c352f;
    --text: #e9efea;
    --text-leise: #9aa9a0;
    --schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
  }
}

* { box-sizing: border-box; }

/* Muss vor allen Klassen stehen, die display setzen: sonst gewinnt etwa
   `.knopf-mehr { display: block }` gegen das hidden-Attribut und die
   Schaltfläche bleibt sichtbar, obwohl sie versteckt sein soll. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -9999px;
  padding: .6rem 1rem;
  background: var(--gruen);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* --- Kopf --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
  padding-top: env(safe-area-inset-top);
}

.kopf-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.marke { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }

.marke-logo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--gruen-hell);
  color: var(--gruen);
  font-size: 1.15rem;
}

.marke-titel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marke-untertitel {
  margin: 0;
  font-size: .78rem;
  color: var(--text-leise);
}

.knopf-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--grund);
  color: var(--text-leise);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  cursor: pointer;
}
.knopf-icon:hover { background: var(--gruen-hell); color: var(--gruen); }
.knopf-icon[aria-expanded="true"] { background: var(--gruen); color: #fff; border-color: var(--gruen); }

/* --- Info --- */

.info {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
  font-size: .9rem;
  color: var(--text-leise);
  white-space: pre-line;
}
.info p { margin: 0 0 .6rem; }
.info-link a { color: var(--gruen); }

/* --- Filter --- */

.filter {
  position: sticky;
  top: 65px;
  z-index: 15;
  background: var(--flaeche);
  padding: .6rem 0 .3rem;
}

.filter-zeile {
  max-width: 720px;
  margin: 0 auto .35rem;
  padding: 0 1rem;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-zeile::-webkit-scrollbar { display: none; }
.filter-zeile:empty { display: none; }

.chip {
  flex-shrink: 0;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--grund);
  color: var(--text-leise);
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--gruen); color: var(--gruen); }
.chip[aria-pressed="true"] {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
  font-weight: 550;
}

/* --- Liste --- */

main { max-width: 720px; margin: 0 auto; padding: .5rem 1rem 3rem; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.karte {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.karte-bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--flaeche);
}

.karte-inhalt { padding: .9rem 1rem 1rem; }

.karte-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  flex-wrap: wrap;
}

.badge {
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--gruen-hell);
  color: var(--gruen);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.karte-meta { font-size: .78rem; color: var(--text-leise); }

.karte-titel {
  margin: 0 0 .35rem;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.35;
}

/* Formatierter Inhalt aus dem Rich-Text-Editor. Anriss auf fünf Zeilen — der
   volle Text kommt mit der Detailansicht. */
.karte-text {
  margin: 0;
  font-size: .9rem;
  color: var(--text-leise);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Außenabstände der ersten und letzten Zeile weg, sonst reißt der Anriss
   oben und unten auf. */
.karte-text > :first-child { margin-top: 0; }
.karte-text > :last-child  { margin-bottom: 0; }
.karte-text p { margin: 0 0 .5em; }
.karte-text h1, .karte-text h2, .karte-text h3,
.karte-text h4, .karte-text h5, .karte-text h6 {
  margin: .6em 0 .3em;
  font-size: 1em;
  font-weight: 650;
  color: var(--text);
}
.karte-text ul, .karte-text ol { margin: 0 0 .5em; padding-left: 1.3em; }
.karte-text li { margin-bottom: .2em; }
.karte-text a { color: var(--gruen); }
.karte-text strong, .karte-text b { color: var(--text); font-weight: 620; }
.karte-text blockquote {
  margin: .5em 0;
  padding-left: .8em;
  border-left: 3px solid var(--rand);
}
/* Bilder im Fließtext dürfen die Karte nicht sprengen. */
.karte-text img { max-width: 100%; height: auto; border-radius: 8px; }
.karte-text table { width: 100%; border-collapse: collapse; font-size: .95em; }
.karte-text th, .karte-text td {
  border: 1px solid var(--rand);
  padding: .25em .5em;
  text-align: left;
}
.karte-text hr { border: 0; border-top: 1px solid var(--rand); margin: .6em 0; }
.karte-text pre { white-space: pre-wrap; overflow-x: auto; }

.karte-fuss {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--rand);
  display: flex;
  gap: .75rem;
  font-size: .78rem;
  color: var(--text-leise);
  flex-wrap: wrap;
}

.termin {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 550;
  color: var(--gruen);
}

/* --- Zustände --- */

.status {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-leise);
  font-size: .92rem;
}
.status[hidden] { display: none; }

.status-gross { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }

.knopf-mehr {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.knopf-mehr:hover { border-color: var(--gruen); color: var(--gruen); }

.fuss {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .78rem;
  color: var(--text-leise);
}

.offline {
  position: fixed;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-width: 690px;
  margin: 0 auto;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--grund);
  font-size: .85rem;
  text-align: center;
  box-shadow: var(--schatten);
  z-index: 50;
}

@media (prefers-reduced-motion: no-preference) {
  .karte { transition: box-shadow .15s ease; }
  .karte:hover { box-shadow: 0 2px 4px rgb(29 36 32 / 8%), 0 8px 20px rgb(29 36 32 / 8%); }
}

/* --- Karte als Link --- */

.karte-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.karte-link:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* --- Vollbildansicht eines Beitrags --- */

/* Hintergrund festhalten, solange der Beitrag offen ist — sonst scrollt beim
   Wischen die Liste darunter mit. */
body.detail-offen { overflow: hidden; }

.detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--grund);
}

.detail-kopf {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem 1rem;
  padding-top: calc(.6rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--rand);
  background: var(--grund);
}

.knopf-zurueck {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem .45rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.knopf-zurueck:hover { border-color: var(--gruen); color: var(--gruen); }

.detail-inhalt {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(3rem + env(safe-area-inset-bottom));
}
.detail-inhalt:focus { outline: none; }

/* Innenabstand für alles außer dem randlosen Aufmacherbild. */
.detail-inhalt > *:not(.detail-bild) {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.detail-bild {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
  display: block;
  background: var(--flaeche);
  margin-bottom: 1rem;
}

.detail-inhalt .karte-kopf { margin-bottom: .5rem; }

.detail-titel {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 680;
  letter-spacing: -.015em;
}

/* Termin, Ort und Hinweise als Wertetabelle statt im Fließtext. */
.detail-fakten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .9rem;
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  background: var(--gruen-hell);
  border-radius: var(--radius);
  font-size: .9rem;
}
.detail-fakten dt { color: var(--gruen); font-weight: 600; }
.detail-fakten dd { margin: 0; }

/* Volltext — dieselben Regeln wie der Anriss, nur ohne Kürzung. */
.detail-text { font-size: 1rem; line-height: 1.65; }
.detail-text > :first-child { margin-top: 0; }
.detail-text p { margin: 0 0 1em; }
.detail-text h1, .detail-text h2, .detail-text h3,
.detail-text h4, .detail-text h5, .detail-text h6 {
  margin: 1.4em 0 .5em;
  font-size: 1.15em;
  font-weight: 650;
  line-height: 1.3;
}
.detail-text ul, .detail-text ol { margin: 0 0 1em; padding-left: 1.4em; }
.detail-text li { margin-bottom: .3em; }
.detail-text a { color: var(--gruen); }
.detail-text img { max-width: 100%; height: auto; border-radius: 10px; margin: .5em 0; }
.detail-text blockquote {
  margin: 1em 0;
  padding: .2em 0 .2em 1em;
  border-left: 3px solid var(--gruen);
  color: var(--text-leise);
}
.detail-text table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.detail-text th, .detail-text td { border: 1px solid var(--rand); padding: .4em .6em; text-align: left; }
.detail-text hr { border: 0; border-top: 1px solid var(--rand); margin: 1.5em 0; }
.detail-text pre { white-space: pre-wrap; overflow-x: auto; }

.detail-dokument {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .6rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--gruen);
  text-decoration: none;
  font-size: .9rem;
}
.detail-dokument:hover { border-color: var(--gruen); background: var(--gruen-hell); }

.detail-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-size: .82rem;
  color: var(--text-leise);
}

/* Ab Tablet: der Beitrag muss nicht die volle Breite einnehmen. */
@media (min-width: 900px) {
  .detail-bild { max-height: 55vh; }
  .detail-titel { font-size: 1.8rem; }
}