/* systemmap · rahmen.css
 * ════════════════════════════════════════════════════════════════════
 * Der gemeinsame Rahmen: Grundschrift, Briefkopf, Bretter, Panels.
 *
 * AUSZUG AUS dashboard.css, maschinell herausgeloest am 15.09.2026.
 * Grund: Die 43 kB lagen auf JEDER Seite, obwohl die Arbeitsseiten
 * davon nur gut zwei Dutzend Klassen benutzen -- der Rest beschreibt
 * das Dashboard, die Programmbretter und das Firmenregister.
 *
 * DIE KOMMENTARE FEHLEN HIER ABSICHTLICH. Sie stehen vollstaendig in
 * dashboard.css, und das bleibt die dokumentierte Fassung. Diese Datei
 * ist eine Auswahl, kein Ersatz: Wer eine Regel aendert, aendert sie
 * an BEIDEN Stellen.
 *
 * Erzeugt aus: 8 Seiten, 9 Skripten, 230 benutzten Klassen.
 */

body {
  margin: 0;
  background: var(--boden);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

a:hover { text-decoration-thickness: 2px; }

/* ── Der Briefkopf ist gruen ──────────────────────────────────────────
 *
 * Bis zum 17.09.2026 war er weiss und nur index.html trug ihn dunkel,
 * ueber .lh--dark. Das hiess: auf jeder Arbeitsseite stand ein weisser
 * Streifen ueber dem gruenen Band, das direkt darunter beginnt -- zwei
 * Farben fuer eine Kopfzeile.
 *
 * Die gruene Fassung war bereits vollstaendig ausformuliert; sie ist
 * jetzt die Regel. `.lh--dark` bleibt als Alias bestehen und tut
 * nichts mehr: die Klasse steht noch in index.html und darf dort
 * stehen bleiben, statt dass eine Seite bei einer vergessenen
 * Aenderung ploetzlich dunkle Schrift auf Gruen zeigt.
 */
.lh {
  --cream: #F9F2E4;
  background: var(--green);
  color: var(--cream);
}

.lh__in {
  max-width: 1480px; margin: 0 auto;
  padding: 24px 24px 16px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.lh__logo { display: block; }

.lh__logo span {
  display: block; width: 148px; height: 33px;
  background: var(--cream);
  -webkit-mask: url(../img/werter-logo.png) no-repeat left center / contain;
  mask: url(../img/werter-logo.png) no-repeat left center / contain;
}

.lh__tag { display: block; margin-top: 8px; color: rgba(249, 242, 228, 0.62); }

.lh__contact {
  margin: 0; text-align: right;
  font-size: 0.75rem; line-height: 1.6; color: rgba(249, 242, 228, 0.82);
}

.lh__contact b { color: var(--cream); font-weight: 700; }

.lh__contact a { color: rgba(249, 242, 228, 0.82); text-decoration: none; }

.lh__contact a:hover { color: var(--cream); }

.lh__bar {
  max-width: 1480px; margin: 0 auto;
  padding: 0 24px 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  /* Terrakotta, nicht Gruen: auf gruenem Grund waere ein gruener
     Strich unsichtbar. */
  border-bottom: 2px solid var(--terra);
}

.lh__grow { flex: 1; }

.lh__nav { display: flex; gap: 16px; align-items: center; }

.lh__nav a {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(249, 242, 228, 0.72); text-decoration: none; padding: 6px 0;
}

.lh__nav a:hover { color: var(--cream); }

.lh__nav a[aria-current="page"] { color: var(--cream); border-bottom: 2px solid var(--terra); }

.lh__back { color: var(--cream); }

/* Die Bedienelemente in der Kopfleiste. Sie standen vorher auf Weiss
   und muessen jetzt auf Gruen lesbar sein. */
.lh__jump .search {
  background: var(--cream); border-color: transparent; color: var(--ink);
}

.lh__jump .search::placeholder { color: rgba(20, 24, 15, 0.55); }

.lh__bar .meta { color: rgba(249, 242, 228, 0.72); }

.lh__bar .btn-quiet {
  color: var(--cream); border-color: rgba(249, 242, 228, 0.45); background: none;
}

.lh__bar .btn-quiet:hover {
  color: var(--green); background: var(--cream); border-color: var(--cream);
}

/* Ein gruener Fokusrahmen auf gruenem Grund ist keiner. */
.lh a:focus-visible, .lh button:focus-visible { outline-color: var(--cream); }

.side__sub .meta { display: block; padding: 0 18px 4px 32px; }

.side__hits .empty { font-size: 0.75rem; }

@media (max-width: 900px) {
  .side__sub, .side__sub .meta {display: none; }
}

.home__list .meta { margin-left: 8px; }

.co-prog .meta { margin-left: 8px; }

.panel.is-idle .panel__dek,
.panel.is-idle .panel__foot { display: none; }

.panel.is-idle .panel__body .empty { margin: 4px 0 2px; }

.board {
  max-width: 1480px; margin: 0 auto;
  padding: 16px 24px 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  
  align-items: start;
}

.panel {
  grid-column: span var(--w, 6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 0 var(--line);
  min-width: 0;
  position: relative;
  display: flex; flex-direction: column;
}

.panel[hidden] { display: none; }

.panel[data-w="4"] { --w: 4; }

.panel[data-w="6"] { --w: 6; }

.panel[data-w="8"] { --w: 8; }

.panel[data-w="12"] { --w: 12; }

@media (max-width: 1100px) {
  .panel[data-w="8"], .panel[data-w="12"] {grid-column: span 12; }
  .panel[data-w="4"], .panel[data-w="6"] {grid-column: span 6; }
}

@media (max-width: 640px) {
  .panel {grid-column: span 12 !important; }
  .board {padding: 12px 16px 48px; }
  .lh__in, .lh__bar, .truth {padding-left: 16px; padding-right: 16px; }
  .lh__in {padding-top: 16px; padding-bottom: 8px; }
  .lh__contact {display: none; }
}

.panel__head {
  position: relative;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 16px 20px 0;
}

.panel--inst > .panel__head { border-top: 2px solid var(--text); }

.panel--inst > .panel__head::before {
  content: ""; position: absolute; left: 20px; top: 0;
  width: 52px; height: 8px; background: var(--terra);
}

.panel--inst > .panel__head::after {
  content: ""; position: absolute; top: 14px; right: 16px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--green); border-right: 2px solid var(--green);
}

.panel__kicker { display: block; margin-top: 8px; }

.panel__title {
  font-family: var(--serif);
  font-size: 1.3125rem; font-weight: 700; line-height: 1.2;
  margin: 2px 0 0;
}

.panel:not(.panel--inst) .panel__title { font-size: 1.125rem; }

.panel:not(.panel--inst) .panel__kicker { margin-top: 4px; }

.panel__dek { margin: 4px 0 12px; max-width: 31rem; font-size: 0.875rem; color: var(--dim); }

.panel__body { padding: 0 20px 16px; }

.panel[data-w="6"] .rec-name { font-size: 3.125rem; }

.zonedetail.is-idle .empty { font-size: 0.75rem; }

.filters .meta { margin-right: 2px; }

.panel[data-w="8"] .gaps ul { columns: 2; column-gap: 32px; }

.panel[data-w="12"] .gaps ul { columns: 3; column-gap: 32px; }

@media (max-width: 900px) {
  .panel .gaps ul {columns: 1; }
}

.risk-ctls .btn-primary { width: 100%; }

.risk-ctls .btn-quiet { margin-top: 8px; font-size: 0.625rem; }

.foot {
  max-width: 1480px; margin: 0 auto; padding: 24px;
  border-top: 1px solid var(--line);
}

.foot p { font-size: 0.75rem; color: var(--dim); max-width: 41rem; margin: 6px 0; }

@media print {
  .lh__bar, .btn-primary, .btn-quiet, .cite, .filters, .map__search {display: none !important; }
  .board {display: block; padding: 0; }
  .panel {display: block; margin: 0 0 16px; break-inside: avoid; border-radius: 0; box-shadow: none; }
  .panel[data-panel="map"] {break-inside: auto; }
  a {text-decoration: none; color: inherit; }
}

/* .lh--dark hat keine eigene Wirkung mehr -- der Briefkopf IST gruen,
   die Regeln stehen oben bei .lh. Die Klasse bleibt gueltiges Markup
   und steht noch in index.html. Wer sie in einer neuen Seite schreibt,
   bekommt dasselbe Ergebnis wie ohne sie. */

.lh__co {
  display: flex; align-items: center; gap: 16px; margin-top: 14px;
}

.lh__co__rule {
  width: 1px; align-self: stretch; min-height: 34px;
  background: rgba(249, 242, 228, 0.28);
}

.lh__co__plate {
  display: block; background: var(--cream, #F9F2E4);
  border-radius: 8px; padding: 7px 12px; line-height: 0;
}

.lh__co__plate img { display: block; height: 26px; width: auto; }

.lh__co__label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(249, 242, 228, 0.55);
}

@media (max-width: 560px) {
  .lh__co__plate img {height: 21px; }
  .lh__co__label {display: none; }
}