/* Gestaltung nach Design.md. Mobil zuerst; nur zwei Breakpoints (min-width 700px und 1100px). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: block;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

a:hover {
  opacity: .8;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Bedienelemente ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accentInk);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.eingabe {
  display: block;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.feld-label {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.icon-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.icon-knopf:hover {
  color: var(--ink);
}

.symbol {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Symbole der Navigation und Schalter der Seitenleiste gibt es nur ab 1100 px (dort gezeigt, siehe unten). */
.nav-link .symbol,
.aktionen .leiste {
  display: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* "Zurueck zu <Location>" (A-049, K3): der Name der Location hat bis zu 80 Zeichen, auch ohne Leerzeichen; er bricht an beliebiger Stelle um, die Flex-Box darf schmaler werden als ihr Inhalt. Hoehe und Schrift kommen weiter aus .text-link. */
.zurueck-ort {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Beschriftung nur fuer Hilfsmittel, solange der Platz fehlt (der zugaengliche Name bleibt). */
.beschriftung {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Logo ---------- */
.logo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.logo:hover {
  opacity: 1;
}

.logo-ring {
  width: 22px;
  height: 22px;
  border: 5px solid var(--accent);
  border-radius: 50%;
}

.logo-name {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.logo-intern {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
}

/* ---------- Seitentitel und Text ---------- */
.seitentitel {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.erklaerung,
.leer {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
}

.vorgang {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}

.meldung {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accentSoft);
  font-size: 15px;
}

/* A-036: die Erfolgsmeldung der Seite Deaktiviert nennt den Namen einer Location oder eines Raums (bis 80 Zeichen ohne Leerzeichen): Umbruch an beliebiger Stelle, nichts abgeschnitten. */
.meldung-lang {
  overflow-wrap: anywhere;
}

.karte {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.karte .knopf {
  width: 100%;
  margin-top: 20px;
}

/* ---------- Profil: Daten und Abschnitt "Zugang" ---------- */
.daten {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.daten dt {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.daten dd {
  margin: 2px 0 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.abschnitt {
  max-width: 480px;
  margin-top: 24px;
}

.abschnitt-titel {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}

.bereich {
  margin-bottom: 24px;
}

.bereich-titel {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.wartet {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.wartet-text {
  margin: 0 0 8px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.wartet form {
  margin: 0;
}

.knopf.zweit {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}

/* ---------- Mitglied einladen (A-012): zwei Spalten ohne Medienabfrage (Design.md Abschnitt 4: Hauptspalte 2 1 520px, Seitenleiste 1 1 280px) ---------- */
.zweispaltig {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.hauptspalte {
  flex: 2 1 520px;
  min-width: 0;
  max-width: 720px;
}

.seitenspalte {
  flex: 1 1 280px;
  min-width: 0;
}

.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}

.schritt.aktuell {
  color: var(--ink);
  font-weight: 700;
}

.kontingent {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 600;
}

.einladungen {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.einladung {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.einladung-name,
.einladung-vorname,
.einladung-mail {
  overflow-wrap: anywhere;
}

.einladung-name {
  font-size: 16px;
  font-weight: 600;
}

.einladung-vorname,
.einladung-mail,
.einladung-frist {
  color: var(--muted);
  font-size: 14px;
}

.einladung form {
  margin: 8px 0 0;
}

textarea.eingabe {
  height: auto;
  min-height: 160px;
  padding: 12px 14px;
  resize: vertical;
}

.karte .knopf.zweit {
  margin-top: 12px;
}

/* Der Einstieg "Mitglied einladen" unten in der Seitenleiste gibt es nur ab 1100 px (siehe unten). */
.aktionen .einladen {
  display: none;
  text-decoration: none;
}

/* Der Einstieg "Verwaltung" (A-033b, nur Admins) hat die Bauart von "Mitglied einladen" und gibt es ebenfalls nur ab 1100 px; unter 1100 px steht der Knopf oben im Profil (.verwaltung-profil). */
.aktionen .verwaltung {
  display: none;
  text-decoration: none;
}

/* ---------- Gaeste: Anmeldung, abgemeldet, schlichte Fehlerseite ---------- */
.gast {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px;
}

.gast-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 24px;
}

.gast-kopf form {
  margin: 0;
}

.gast-inhalt {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.gast .seitentitel {
  font-size: 28px;
}

/* ---------- Rahmen, mobil: Kopfzeile oben, feste Tab-Leiste unten ---------- */
.rahmen {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo aktionen"
    "inhalt inhalt";
  align-content: start;
  min-height: 100vh;
}

.rahmen > .logo {
  grid-area: logo;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.aktionen {
  grid-area: aktionen;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.aktionen form {
  margin: 0;
}

.inhalt {
  grid-area: inhalt;
  padding: clamp(16px, 3.5vw, 40px);
  padding-bottom: 104px;
}

.haupt {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-liste {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.nav-link.aktiv {
  color: var(--ink);
}

.nav-link.aktiv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 3px;
  margin-left: -9px;
  background: var(--accent);
}

/* ---------- Tablet: Kopfzeile mit Navigation in der Zeile ---------- */
@media (min-width: 700px) {
  .rahmen {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo haupt aktionen"
      "inhalt inhalt inhalt";
  }

  .rahmen > .logo,
  .haupt,
  .aktionen {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 56px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  /* Sprung zum Abschnitt (A-027): die klebende Kopfzeile (56 px + 1 Linie) verdeckt sonst die Ueberschrift. */
  .abschnitt,
  .bereich {
    scroll-margin-top: 72px;
  }

  /* Sprung zur Meldung im Stift der Fotos eines Raums (A-045): dieselbe Kopfzeile, derselbe Abstand; eigene Regel, damit die Regel der Abschnitte unveraendert bleibt. */
  .foto-meldung-liste {
    scroll-margin-top: 72px;
  }

  .haupt {
    grid-area: haupt;
    padding-bottom: 0;
  }

  .nav-liste {
    display: flex;
    gap: 2px;
    padding: 0 8px;
  }

  .nav-link {
    min-height: 44px;
    margin: 6px 0;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 15px;
  }

  .nav-link.aktiv {
    background: var(--surface2);
    font-weight: 650;
  }

  .nav-link.aktiv::before {
    display: none;
  }

  .inhalt {
    padding-bottom: 56px;
  }
}

/* ---------- Desktop: Seitenleiste links, 272 px (Abweichung von Design.md:90, siehe eigenheiten.md Regel 19) ---------- */
@media (min-width: 1100px) {
  .rahmen {
    grid-template-columns: 272px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "logo inhalt"
      "haupt inhalt"
      "aktionen inhalt";
    height: 100vh;
    min-height: 0;
  }

  .rahmen > .logo,
  .haupt,
  .aktionen {
    position: static;
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  /* Ab 1100 px ist die Kopfzeile statisch (Seitenleiste): kein Abstand fuer den Sprung zum Abschnitt. */
  .abschnitt,
  .bereich {
    scroll-margin-top: 0;
  }

  .foto-meldung-liste {
    scroll-margin-top: 0;
  }

  /* Logo-Block: gleiche Hoehe ausgefahren und eingefahren (16 + 17 * 1,55 + 16 = 58,35 px), damit die Symbole darunter nicht springen. */
  .rahmen > .logo {
    min-height: 58.35px;
    padding: 16px 20px;
  }

  .haupt {
    overflow-y: auto;
  }

  .nav-liste {
    flex-direction: column;
    gap: 2px;
    padding: 4px 12px;
  }

  .nav-link {
    justify-content: flex-start;
    margin: 0;
    padding: 10px 12px;
  }

  .nav-link.aktiv::before {
    display: block;
    top: 50%;
    left: 0;
    width: 3px;
    height: 16px;
    margin: -8px 0 0;
  }

  .aktionen {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid var(--line);
  }

  .aktionen .icon-knopf {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .darstellung .icon-knopf {
    border-color: var(--line);
  }

  .beschriftung {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .inhalt {
    overflow-y: auto;
    padding-bottom: 56px;
  }

  .nav-link {
    gap: 12px;
  }

  .nav-link .symbol {
    display: block;
  }

  .aktionen .leiste {
    display: block;
  }

  .aktionen .einladen {
    display: inline-flex;
  }

  .aktionen .verwaltung {
    display: inline-flex;
  }

  /* Ab 1100 px steht die Verwaltung in der Leiste; der Knopf im Profil entfaellt. */
  .verwaltung-profil {
    display: none;
  }

  /* Eingefahren: nur Symbole, 72 px (Mindestbreite 69 px, 3 px Luft); die Symbole stehen wie ausgefahren 24 px vom linken Rand, nicht zentriert (A-009). Alle Regeln mit .leiste-ein stehen nur hier. */
  .rahmen.leiste-ein {
    grid-template-columns: 72px 1fr;
  }

  /* Texte nur noch fuer Hilfsmittel, nach dem Muster von .beschriftung (nie display: none oder visibility). */
  .leiste-ein .beschriftung,
  .leiste-ein .nav-text,
  .leiste-ein .logo-name,
  .leiste-ein .logo-intern {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rahmen.leiste-ein > .logo {
    justify-content: center;
    padding: 16px 0;
  }
}

/* ---------- Profilbild (A-015): rund, feste Masse, Flex-Zeile mit Umbruch ohne Medienabfrage ---------- */
.bild-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

.avatar {
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  /* Rand in der Linienfarbe: ein Bild mit weissem Hintergrund bleibt im hellen Farbschema sichtbar begrenzt */
  border: 1px solid var(--line);
}

/* Abstand nach unten wie bei .bereich (24px), damit nichts an die folgende Datenzeile stoesst */
.bild-abschnitt {
  margin-bottom: 24px;
}

.avatar-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 48px;
  font-weight: 700;
}

.bild-formulare {
  flex: 1 1 240px;
  min-width: 0;
}

.bild-formulare .karte + .karte {
  margin-top: 12px;
}

.hinweis {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Profil: eigene Angaben (A-020) ---------- */
.angaben-liste {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.angaben-name {
  display: block;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.angaben-wert {
  display: block;
  margin: 2px 0 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* ---------- Profil: DJ-Angaben (A-021) ---------- */
.abschnitt-breit {
  max-width: 880px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.kurztext {
  white-space: pre-line;
}

/* ---------- DJ-Liste und fremdes Profil (A-023a) ---------- */
/* Karten: ohne Medienabfrage, so viele Spalten wie passen (360 px: 1, 800 px: 2, 1280 px: 3). Alle Schriften mindestens 11 px. */
.verzeichnis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.verzeichnis > li {
  min-width: 0;
}

.dj-karte {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.bild-klein {
  grid-row: 1 / span 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.bild-klein-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

/* Name als Verweis: 60 Zeichen ohne Leerzeichen brechen um (die Spalte ist minmax(0, 1fr), overflow-wrap anywhere senkt die Mindestbreite). */
.karte-name {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
}

.karte-gebiet,
.karte-genres {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}

.blaettern-stand {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- DJ-Liste: Filter und Suche (A-023b) ---------- */
/* Unter 700 px sind die Filter eingeklappt: ein Ankreuzfeld ohne Namen (wird nicht gesendet) mit Beschriftung schaltet sie ohne Skript. Ab 700 px stehen sie offen. */
.filter {
  position: relative;
  margin: 0 0 16px;
}

.filter-suche {
  margin: 0 0 8px;
}

.filter-schalter {
  position: absolute;
  opacity: 0;
}

.filter-auf {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.filter-schalter:focus-visible + .filter-auf {
  box-shadow: 0 0 0 2px var(--accent);
}

.filter-schalter:checked + .filter-auf {
  background: var(--accentSoft);
}

.filter-feld {
  display: none;
  margin: 8px 0 0;
}

.filter-schalter:checked ~ .filter-feld {
  display: block;
}

.filter .knopf {
  margin: 8px 0 0;
}

.filter-ergebnis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 16px;
}

.treffer {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 700px) {
  .filter-feld {
    display: block;
  }

  .filter-auf,
  .filter-schalter {
    display: none;
  }
}

/* Fremdes Profil: Bild und Name nebeneinander, Umbruch fuer lange Namen; die Freitexte sind begrenzt (PS27.13). */
.fremd-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
}

.fremd-kopf .avatar {
  flex: 0 0 128px;
}

.fremdname {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.fremdwert {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Kurzvorstellung und Werdegang: feste Hoechsthoehe in px mit eigenem Rollbalken (zehn Zeilen zu 24,8 px = 248 px werden ganz gezeigt). */
.fremdtext {
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.wahl,
.wahl-gruppe {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.wahl-titel {
  padding: 0;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wahl-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.wahl-zeile {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.wahl-kaestchen {
  flex: none;
  align-self: center;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
}

.wahl-label {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* ---------- Profil: Werdegang, zehn Zeilen Eckdaten (A-022a); nur Anordnung, keine neue Schrift ---------- */
.eckdatum {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.eckdatum-felder {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 8px;
}

/* ---------- Location-Wiki (A-029a): Liste, Detail, Reiter, Verlauf, Formular. Keine neue Medienabfrage; lange Zeichenfolgen brechen um. ---------- */
.wiki-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.wiki-kopfzeile .treffer {
  margin: 0;
}

a.knopf {
  text-decoration: none;
}

.location-eintrag {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

/* A-046: unter 700 px steht das Foto (oder der Platzhalter) klein links (96 x 64 px), der Text in der zweiten Spalte; ab 700 px (Regeln unten) wieder eine Spalte. */
.location-eintrag > * {
  grid-column: 2;
}

.location-eintrag > .karte-bild-link,
.location-eintrag > .location-eintrag-platzhalter {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
}

/* Foto auf der Karte der Liste (A-042b): unter 700 px 96 px breit (A-046), ab 700 px 3:2, so breit wie die Karte, mittig beschnitten (ein altes quadratisches Foto erscheint beschnitten); ohne Foto ein ruhiger Platzhalter derselben Form. height: auto, damit die Hoehe aus dem Verhaeltnis kommt und nicht aus dem Attribut height des Bilds. */
.location-eintrag-bild {
  display: block;
  box-sizing: border-box;
  width: 96px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.karte-bild-link {
  display: block;
  min-width: 0;
}

@media (min-width: 700px) {
  .location-eintrag {
    grid-template-columns: none;
    column-gap: 0;
  }

  .location-eintrag > * {
    grid-column: auto;
  }

  .location-eintrag > .karte-bild-link,
  .location-eintrag > .location-eintrag-platzhalter {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  .location-eintrag-bild {
    width: 100%;
  }
}

.location-kopf {
  min-width: 0;
  margin: 0 0 16px;
}

.location-kopf p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.location-typ {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.location-anschrift {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
}

/* Kachel der Anschrift (A-032): Symbol links, drei Zeilen rechts; Rand, Rundung und Hintergrund wie die Schnellinfos; nicht breiter als der Inhalt. */
.location-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  width: fit-content;
  padding: 12px 16px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}

.location-karte .symbol {
  flex: none;
  color: var(--accent);
}

.location-karte-zeilen {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.location-karte-zeile {
  display: block;
}

.location-karte-text {
  color: var(--accent);
  font-weight: 600;
}

/* Kacheln der Raeume auf der Seite der Location (A-034c, 141.1): vorhandene Bausteine (Karte nach Design.md, die Kachel .location-karte), keine neue Farbe. Die Kachel ist die
   Klickflaeche: mindestens 44 px hoch, ein langer Name bricht um und weitet sie nicht ueber den Inhalt hinaus. */
.raum-kacheln {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.raum-kacheln li {
  min-width: 0;
  max-width: 100%;
}

.raum-kachel {
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  /* A-037: Bildkachel. Foto oder Platzhalter oben, der Name darunter; 192 px breit, innen 158 px (192 - 2 x 16 Innenabstand - 2 x 1 Rand). */
  flex-direction: column;
  align-items: stretch;
  width: 192px;
}

.raum-kachel:hover {
  border-color: var(--accent);
}

.raum-kachel-bild {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 158px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--line);
}

/* Fotos des Wikis (A-037): ruhiger Platzhalter ohne neue Farbe (Flaeche --surface2 und Rand --line wie .avatar), quadratisch wie das Foto (Teil a). */
.foto-abschnitt {
  margin: 0 0 24px;
}

.foto-abschnitt-kasten {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.foto-titel {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.foto-bild {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 512px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--line);
  margin: 0 0 16px;
}

/* Foto eines Raums (A-042a): Querformat 3:2, hoechstens 768 px breit; nur das Fragment raum traegt diese Klasse, Kastenfotos und Raum zum Vorbereiten bleiben quadratisch (.foto-bild allein). */
.foto-bild.foto-bild-quer {
  max-width: 768px;
  aspect-ratio: 3 / 2;
}

/* Galerie eines Raums (A-042b): bis zu fuenf Fotos in einer waagerechten Reihe, die nur per CSS blaettert (Einrasten je Foto, kein Skript, kein style); die Reihe rollt, nie die Seite. Jedes Foto ist so breit wie die Reihe, hoechstens 768 px, 3:2 (.foto-bild-quer). */
.foto-galerie {
  display: flex;
  max-width: 768px;
  margin: 0 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.foto-galerie-teil {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.foto-galerie-teil .foto-bild {
  margin: 0 0 4px;
}

.foto-nummer {
  color: var(--muted);
  font-size: 13px;
}

/* Zeile je Foto hinter dem Stift: Vorschau 144 x 96, Nummer und die Knoepfe Nach vorn, Nach hinten, Entfernen; bricht um, rollt nie. */
.foto-verwalten-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 12px;
}

.foto-vorschau.foto-vorschau-quer {
  flex: 0 0 144px;
  width: 144px;
  height: 96px;
}

.foto-zeile-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.foto-formular {
  max-width: 512px;
  margin: 0 0 12px;
}

/* Foto bearbeiten (A-039): die Formulare stehen hinter einem aufklappbaren details ohne Skript; unter 700 px zeigt das summary nur den Stift, der Text bleibt fuer Hilfsmittel (wie .beschriftung). */
.foto-bearbeiten {
  max-width: 512px;
  margin: 0 0 12px;
}

.foto-bearbeiten-kopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.foto-bearbeiten-kopf::-webkit-details-marker {
  display: none;
}

.foto-bearbeiten-kopf:hover {
  color: var(--ink);
}

.foto-bearbeiten[open] > .foto-bearbeiten-kopf {
  margin: 0 0 12px;
}

.foto-bearbeiten-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .foto-bearbeiten-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* Verwaltung der Fotos (A-037, EP37.5): lange Namen von Raeumen und Locations brechen um, nichts laeuft ueber; Vorschau, Angaben und Knopf stehen in einer Zeile, die umbricht. */
.foto-ziel-titel {
  min-width: 0;
  overflow-wrap: anywhere;
}

.foto-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.foto-zeile-text {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.foto-vorschau {
  display: block;
  box-sizing: border-box;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.reiter {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.reiter-link {
  gap: 6px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.reiter-link.aktiv {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.reiter-zahl {
  color: var(--muted);
  font-size: 13px;
}

/* Schnellinfos im Kopf der Detailseite (A-029b, Design.md Kennzahlen-Raster): Haarlinien durch gap 1px auf dem Hintergrund --line; 2 Spalten, ab 700 px 4 Spalten. */
.location-schnell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}

.location-schnell-zelle {
  min-width: 0;
  margin: 0;
  padding: 14px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.location-schnell-name {
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Hoechstens sechs Zeilen (6 x 1,4em); was darueber liegt, wird abgeschnitten und mit Auslassungszeichen gekennzeichnet. Der ganze Wert steht im Dokument und in der Gruppe darunter. */
.location-schnell-wert {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  max-height: 8.4em;
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
}

.location-schnell-leer {
  color: var(--muted);
  font-weight: 400;
}

/* Aufklappbare Gruppen (A-029b): die Ueberschrift ist die Zeile zum Auf- und Zuklappen, mindestens 44 px hoch, ohne Skript. */
.location-gruppe {
  border-top: 1px solid var(--line);
}

.location-gruppe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 12px;
  list-style: none;
  cursor: pointer;
}

.location-gruppe-kopf::-webkit-details-marker {
  display: none;
}

.location-gruppe-kopf .abschnitt-titel {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.location-gruppe-kopf::after {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  content: "";
  transform: rotate(45deg);
}

.location-gruppe[open] > .location-gruppe-kopf::after {
  transform: rotate(-135deg);
}

@media (min-width: 700px) {
  .location-schnell {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.aktualitaet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
}

.aktualitaet-symbol {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.aktualitaet-1 {
  opacity: 1;
}

.aktualitaet-2 {
  opacity: .6;
}

.aktualitaet-3 {
  opacity: .35;
}

.location-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.location-aktionen form {
  margin: 0;
}

.verlauf {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.verlauf-zeile {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.verlauf-wer {
  font-weight: 600;
}

.verlauf-wann {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.wiki-formular {
  max-width: 640px;
}

.wiki-formular .eingabe,
.wiki-formular .meldung {
  margin-top: 6px;
}

.wiki-formular .knopf {
  width: 100%;
}

/* ---------- Verwaltung: Seite Schlagworte (A-033b): Zeilen als Raster mit einer Spalte, ab 700 px zwei; lange Texte brechen um ---------- */
.admin-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.admin-text,
.admin-kennung,
.admin-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-text {
  font-weight: 600;
}

.admin-kennung {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}

.admin-label,
.admin-zahl,
.admin-aus,
.admin-name {
  color: var(--muted);
  font-size: 14px;
}

.admin-aus {
  font-weight: 600;
}

/* Formulare in der Verwaltung (A-033b): eine Spalte, Felder und Knoepfe so breit wie die Zeile; die Meldung steht an dem Formular, das gesendet wurde. */
.admin-form {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.admin-form .feld-label {
  margin: 6px 0 0;
}

.admin-form .knopf {
  width: 100%;
  margin-top: 8px;
}

.admin-form .meldung {
  margin: 0;
}

/* Zeile eines Schlagworts (A-035): Kennung, Zahl und "ausgeblendet" in einer Textzeile; Textfeld und "Text aendern" nebeneinander (die Beschriftung bleibt fuer Vorleseprogramme); "Ausblenden"/"Einblenden" als schlichter Knopf mit eigener Breite. */
.admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
}

.admin-form .admin-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-zeile-wort {
  position: relative;
}

.admin-form-text {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
}

.admin-form-text .meldung {
  grid-column: 1 / -1;
}

.admin-zeile-wort .admin-form .knopf {
  width: auto;
  margin-top: 0;
}

.admin-form-sicht .knopf {
  justify-self: start;
  font-weight: 600;
}

@media (min-width: 700px) {
  .admin-zeile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-zeile-wort > .admin-text {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .admin-zeile-wort > .admin-meta {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .admin-zeile-wort > .admin-form-text {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-zeile-wort > .admin-form-sicht {
    grid-column: 2;
    grid-row: 2;
  }
}