/* Blocklexi — Gestaltung
   Raster (unsichtbar): quadratisches Feld --c, Fuge --g, Aussenrand links/rechts 0,5 Feld.
   Spaltenzahl --n 2–6 nach Fensterbreite; das Feld fuellt die Breite: (n + 1) Felder + (n + 1) Fugen = Breite.
   Alles in CSS, damit die vorgerenderte Seite ohne JavaScript richtig steht; app.js setzt nur --b genau
   (Fensterbreite ohne Rollbalken). */
:root {
  --schwarz: #000; --weiss: #fff; --grau: #808080;
  /* drei Grautoene mit klarem Abstand: ganz hell (Listen, Bloecke, Knoepfe), hell (Kategorien), normal (gewaehlt) */
  --popup: #fbfbfb; --flaeche: #e9e9e9; --gewaehlt: #b5b5b5; --rahmen: #8a8a8a;
  --g: 1rem;                       /* Fuge */
  --l: 2px;                        /* Linienstaerke */
  --n: 2;
  --b: 100vw;
  --c: calc((var(--b) - (var(--n) + 1) * var(--g)) / (var(--n) + 1));
  --p: calc(var(--c) + var(--g));  /* Rasterteilung */
  --r: calc(var(--c) * 0.08);      /* Eckenradius Kachel */
  --k: max(0.8125rem, calc(var(--c) * 0.09));   /* Schrift Kopfknoepfe */
}
@media (min-width: 660px)  { :root { --n: 3; } }
@media (min-width: 880px)  { :root { --n: 4; } }
@media (min-width: 1100px) { :root { --n: 5; } }
@media (min-width: 1320px) { :root { --n: 6; } }

/* Hanken Grotesk (SIL OFL 1.1, lokal, Latein-Teilmenge als WOFF2) */
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--weiss); color: var(--schwarz);
  font-family: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: calc(var(--c) / 4) calc(var(--c) / 2);
}
a { color: inherit; text-decoration: none; }
.leise { color: var(--grau); }

/* ---------- Raster ---------- */
.raster {
  display: grid; grid-template-columns: repeat(var(--n), var(--c)); align-items: start;
  gap: var(--g); padding: var(--g); width: calc(var(--n) * var(--p) + var(--g));
}
.feld {
  position: relative; display: block; overflow: hidden; height: var(--c);
  background: var(--flaeche); border: var(--l) solid var(--rahmen); border-radius: var(--r);
  padding: calc(var(--c) * 0.08); font-size: calc(var(--c) * 0.09); line-height: 1.3;
}
.feld.breit { grid-column: 1 / -1; }
.feld.zwei { grid-column: span 2; }
.feld.gross { grid-column: span 2; grid-row: span 2; height: calc(2 * var(--c) + var(--g)); }
.feld.mitte { display: flex; align-items: center; justify-content: center; text-align: center; }
.feld.mitte b { font-size: calc(var(--c) * 0.135); }

/* Zeilen ohne Kachel: Kopf (½ Feld) und Luft (¼ Feld, die Fugen zaehlen mit) */
.kopf { grid-column: 1 / -1; height: calc(var(--c) / 2); display: flex; align-items: center; justify-content: center; }
.luft { grid-column: 1 / -1; height: max(0px, calc(var(--c) / 4 - var(--g))); }   /* Luftzeile ¼ Feld (wie bisher) */
.logo { font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-size: calc(var(--c) * 0.255); }   /* = eine Kachel breit (gemessen) */

/* ---------- Kategorien ---------- */
/* Kategorien: immer eine Reihe, gleiche Kachelbreite wie das Raster; zu schmal = seitlich scrollen */
.katreihe {
  grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: var(--c); gap: var(--g);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  /* bis an den Bildschirmrand: Kacheln werden erst vom Fenster abgeschnitten, nicht vom Raster */
  margin: 0 calc(-1 * (var(--c) / 2 + var(--g))); padding: 0 calc(var(--c) / 2 + var(--g));
  scroll-padding-inline: calc(var(--c) / 2 + var(--g));
  scrollbar-width: none;   /* kein Rollbalken ueber den Viertel-Kacheln; gescrollt wird mit Wischen/Trackpad */
}
.katreihe::-webkit-scrollbar { display: none; }
.katreihe .kat { scroll-snap-align: start; }
/* Eine Kategorie = Kachel (1 × 1) und darunter die halbe Kachel (1 × 0,5) fuer die Unterkategorie */
.kat { display: grid; gap: var(--g); }
.kat .halb { height: calc(var(--c) / 2); }
.feld.gewaehlt { background: var(--gewaehlt); }

/* Hover: Rahmen innerhalb des Rahmens, konzentrisch (Radius = aussen - Rahmen - Abstand) */
a.feld.mitte::after {
  content: ""; position: absolute; inset: calc(var(--c) * 0.04); pointer-events: none;
  border: var(--l) solid var(--rahmen); opacity: 0;
  border-radius: max(0px, calc(var(--r) - var(--l) - var(--c) * 0.04));
}
a.feld.mitte:hover::after, a.feld.mitte:focus-visible::after { opacity: 1; }
a.feld:focus-visible { outline: none; }

/* Unterwahl: nur unter der gewaehlten Kategorie. Die halbe Kachel ist geteilt:
   oben die Ansicht (Liste klappt nach oben), unten die Unterkategorie (Liste klappt nach unten). */
.halb.unterwahl { display: grid; grid-template-rows: 1fr 1fr; gap: calc(var(--g) / 2); height: calc(var(--c) / 2); position: relative; z-index: 3; }
.wahl { position: relative; min-height: 0; }
.halb.unterwahl.leer { z-index: auto; }
.halb.unterwahl.leer .feld { height: auto; padding: 0; border-radius: calc(var(--r) * 0.75); }
.halb.unterwahl.leer .feld::after { inset: calc(var(--c) * 0.025); border-radius: max(0px, calc(var(--r) * 0.75 - var(--l) - var(--c) * 0.025)); }   /* leere Viertel-Kacheln unter den anderen Kategorien */
.wahl > button {
  position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: max(0.75rem, calc(var(--c) * 0.085)); color: var(--schwarz);
  background: var(--gewaehlt); border: var(--l) solid var(--rahmen); border-radius: calc(var(--r) * 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.4em;
}
.wahl > button::after {
  content: ""; position: absolute; inset: calc(var(--c) * 0.025); pointer-events: none; opacity: 0;
  border: var(--l) solid var(--rahmen); border-radius: max(0px, calc(var(--r) * 0.75 - var(--l) - var(--c) * 0.025));
}
.wahl > button:hover::after { opacity: 1; }
.wahl .liste {
  position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 0.2em;
  background: var(--popup); border: var(--l) solid var(--rahmen);
}
.wahl .liste[hidden] { display: none; }
.wahl .liste.fix { position: fixed; z-index: 30; }
.wahl > button { z-index: 31; }   /* Kachel liegt immer ueber ihrer Liste, die Liste dockt dahinter an */   /* offen: ueber allem, nicht vom Scrollbereich abgeschnitten */
/* nach unten: beginnt eckig hinter der runden Kachel */
.wahl.unten .liste { top: calc(100% - var(--r)); padding: calc(var(--r) + 0.4em) 0.3em 0.3em; border-radius: 0 0 var(--r) var(--r); }
/* nach oben: endet eckig hinter der runden Kachel */
.wahl.oben .liste { bottom: calc(100% - var(--r)); padding: 0.3em 0.3em calc(var(--r) + 0.4em); border-radius: var(--r) var(--r) 0 0; }
.wahl .liste a {
  display: block; padding: 0.3em 0.5em; text-align: center;   /* Eintraege zentriert */
  font-size: max(0.8125rem, calc(var(--c) * 0.085)); border-radius: calc(var(--c) * 0.04);
}
.wahl .liste a:hover, .wahl .liste a.an { background: var(--gewaehlt); }

/* ---------- Bloecke ---------- */
.feld.block { background: var(--popup); }
.feld img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.feld.gross img { inset: 8%; width: 84%; height: 84%; }
.blockname {   /* beim Darueberfahren nur der Name, das Bild verschwindet */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0.6em; text-align: center;
  font-weight: 700; font-size: max(0.875rem, calc(var(--c) * 0.1)); line-height: 1.2; opacity: 0;   /* ohne Ueberblendung: Name oder Bild, nie beides */
}
a.block:hover .blockname, a.block:focus-visible .blockname { opacity: 1; }
a.block:hover img, a.block:focus-visible img { opacity: 0; }
.leer { grid-column: 1 / -1; color: var(--grau); font-size: calc(var(--c) * 0.09); }

/* Blockseite */
.feld.info { display: flex; flex-direction: column; justify-content: space-between; background: var(--popup); }
.feld.info b { font-size: calc(var(--c) * 0.1); }
.feld.info .infoname { font-size: calc(var(--c) * 0.12); line-height: 1.15; }
.feld.info .ansichten { font-size: calc(var(--c) * 0.1); }
.feld.info .ansichten a:hover { color: var(--schwarz); }
.feld.download { background: var(--popup); }
.feld.download b { font-size: calc(var(--c) * 0.11); }
.vorschau .flaeche { opacity: 0; }
.vorschau:hover .flaeche { opacity: 1; }
.vorschau:hover img:not(.flaeche) { opacity: 0; }

/* Textseiten (Impressum, Datenschutz) */
.text { grid-column: 1 / -1; justify-self: center; max-width: 40rem; font-size: 1rem; line-height: 1.55; text-align: center; }
.text h1 { font-size: 1.6rem; margin-bottom: 1rem; }
.text h2 { font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.text p { margin-bottom: 0.7rem; }

/* ---------- Kopfknoepfe: Suche/Zurueck links, Sprache rechts, gleiche Masse, auf Titelhoehe ---------- */
.kopfknopf, .sprachwahl, .suchleiste {
  position: absolute; z-index: 4; top: calc(var(--c) / 2 + var(--g)); font-size: var(--k); width: max(calc(var(--c) / 2), 6.5em);
}
.kopfknopf, .suchleiste { left: calc(var(--c) / 2 + var(--g)); transform: translateY(-50%); }
.sprachwahl { left: calc(var(--c) / 2 + var(--n) * var(--p)); transform: translate(-100%, -50%); }   /* rechte Kante = letzte Kachel */
.kopfknopf, .sprachwahl > button {
  display: flex; align-items: center; justify-content: center; height: 2.35em; cursor: pointer;
  font-family: inherit; font-size: var(--k); font-weight: 700; color: var(--schwarz);
  background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: calc(var(--c) * 0.05);
}
.kopfknopf:hover, .sprachwahl > button:hover { background: var(--gewaehlt); }
.kopfknopf[hidden] { display: none; }
.kopfknopf svg { width: 1.6em; height: 0.8em; fill: none; stroke: var(--schwarz); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sprachwahl > button { position: relative; z-index: 1; width: 100%; }
.sprachliste {
  position: absolute; left: 0; right: 0; top: calc(100% - var(--c) * 0.05);
  display: flex; flex-direction: column; gap: 0.2em; padding: calc(var(--c) * 0.05 + 0.3em) 0.3em 0.3em;
  background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: 0 0 calc(var(--c) * 0.05) calc(var(--c) * 0.05);
}
.sprachliste[hidden] { display: none; }
.sprachliste a { padding: 0.25em 0.5em; white-space: nowrap; border-radius: calc(var(--c) * 0.03); }
.sprachliste a:hover, .sprachliste a.an { background: var(--gewaehlt); }

/* ---------- Suche: weisser Grund, Leiste waechst vom Suchknopf nach rechts auf zwei Kacheln ---------- */
.suche { position: fixed; inset: 0; z-index: 20; overflow: auto; background: var(--weiss); padding: 0 calc(var(--c) / 2) calc(var(--c) / 4); }
.suche[hidden] { display: none; }
.suchleiste {
  display: flex; align-items: center; gap: 0.3em; padding: 0.25em; height: 2.35em;
  background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: calc(var(--c) * 0.05);
  transition: width 0.25s ease;
}
.suchleiste.weit { width: calc(2 * var(--c) + var(--g)); }
.suchleiste:focus-within { border-color: var(--schwarz); }
.suchzu {   /* kleine quadratische Kachel mit X */
  flex: none; display: flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; padding: 0; cursor: pointer;
  background: var(--flaeche); border: var(--l) solid var(--rahmen); border-radius: calc(var(--c) * 0.03);
}
.suchzu:hover { background: var(--gewaehlt); }
.suchzu svg { width: 45%; height: 45%; stroke: var(--schwarz); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.suchfeld { flex: 1; min-width: 0; font: inherit; padding: 0.2em 0.3em; background: none; color: var(--schwarz); border: 0; outline: none; -webkit-appearance: none; appearance: none; }
.treffer { margin-top: calc(var(--c) * 0.75 + var(--g)); }

/* ---------- Rechtliches: am unteren Seitenrand, zentriert ---------- */
.recht {
  margin-top: auto; padding-top: calc(var(--c) / 4 - var(--g)); width: calc(var(--n) * var(--p) + var(--g));
  text-align: center; font-size: 0.6875rem; color: var(--grau);
}
.recht a { text-decoration: underline; text-decoration-color: var(--rahmen); }

/* ---------- Schmal (2 Spalten): Knoepfe im Rand ueber dem Logo ---------- */
@media (max-width: 659px) {
  body { padding-top: calc(var(--c) / 2); }
  .kopfknopf, .sprachwahl, .suchleiste { top: calc(var(--c) / 4); }
}
.seotext { margin-bottom: 0.35em; }   /* Satz ueber dem Rechtlichen, gleiche dezente Schrift */

/* Text und Querverweise auf der Blockseite */
.blocktext { grid-column: 1 / -1; justify-self: center; max-width: 65ch; padding-top: var(--g); text-align: center; }
.blocktext h2, .bloecketitel { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5em; }
.blocktext p { line-height: 1.5; margin-bottom: 0.75em; }
.bloecketitel { grid-column: 1 / -1; padding-top: var(--g); margin-bottom: 0; text-align: center; }
.blockreihe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.blockreihe .feld { flex: 0 0 var(--c); }

/* Kategorie-Pfad auf der Blockseite: deutlicher Unterstrich beim Darueberfahren, ohne Animation */
.pfadlink { color: inherit; text-decoration: none; }
.pfadlink:hover, .pfadlink:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}

/* Vorschlag-Knopf: nur auf Blockseiten, am Seitenende direkt ueber der Fusszeile */
.wunschknopf {
  display: inline-block; margin: var(--g) 0 calc(var(--g) * 2); padding: 0.7em 1.4em;
  font-size: 0.875rem; font-weight: 700; color: var(--schwarz);
  background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: 0.5rem;
}
.recht a.wunschknopf { text-decoration: none; }
.wunschknopf:hover, .wunschknopf:focus-visible { background: var(--gewaehlt); }
/* Formular Kontakt und Vorschlag */
.formular form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; text-align: left; }
.formular label { font-size: 0.875rem; font-weight: 700; margin-top: 0.6rem; }
.formular textarea, .formular input { width: 100%; box-sizing: border-box; font: inherit; padding: 0.6em 0.7em; background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: 0.5rem; color: var(--schwarz); }
.formular textarea { resize: vertical; }
.f-lock { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.f-senden { align-self: center; margin-top: 0.6rem; padding: 0.7em 1.6em; font: inherit; font-weight: 700; cursor: pointer; background: var(--popup); border: var(--l) solid var(--rahmen); border-radius: 0.5rem; color: var(--schwarz); }
.f-senden:hover { background: var(--gewaehlt); }
.f-senden:disabled { opacity: 0.5; cursor: default; }
.f-meldung { min-height: 1.4em; text-align: center; font-size: 0.875rem; color: #a11; margin: 0.4rem 0 0; }
.f-meldung.ok { color: var(--schwarz); font-weight: 700; }
.f-hinweis { font-size: 0.75rem; line-height: 1.4; color: var(--grau); margin: 0.6rem 0 0; text-align: center; }