/* bereich.css — Bereichsseiten (Lage, Akteure, Newsstand, Fachthemen),
 * Neuaufbau 15.10.2026: dunkler Kopf mit Schaltplan (bereich.js), darunter
 * die Werkzeuge als Karten. Laedt nach dashboard.css und ueberschreibt nur
 * den Rahmen der Bereichsseiten; die Kacheln bleiben a.app, damit tor.js
 * sie weiter je Mandant zuschneiden kann.
 */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.brh { position: relative; background: var(--green); color: #fff; padding: 34px 0 38px; overflow: hidden; min-height: 230px; }
.brh__in {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; gap: 24px 48px; grid-template-columns: 1fr; align-items: center;
}
.brh__in { position: relative; z-index: 1; }
.brh__kicker {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(249, 242, 228, .66);
}
.brh__titel {
  margin: 8px 0 12px; font-family: var(--serif, "Merriweather", Georgia, serif);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 900; line-height: 1.05; color: #fff;
  text-wrap: balance;
}
.brh__dek { margin: 0; max-width: 32rem; font-size: 17px; line-height: 1.6; color: rgba(249, 242, 228, .84); }
.brh__zahl {
  margin: 22px 0 0; padding-top: 12px; border-top: 1px solid rgba(249, 242, 228, .25);
  display: inline-block; font-size: 13px; letter-spacing: .04em; color: rgba(249, 242, 228, .72);
}
.brh__zahl b { font-family: var(--serif, Georgia, serif); font-size: 26px; color: #fff; margin-right: 4px; vertical-align: -2px; }
/* Globus rechts unten, angeschnitten: Stimmung, kein Inhalt */
.brh__globus {
  position: absolute; z-index: 0; margin: 0; pointer-events: none;
  width: 380px; right: max(-40px, calc((100vw - 1180px) / 2 - 20px)); bottom: -150px;
}
.brh__globus canvas { display: block; }
@media (max-width: 900px) { .brh__globus { width: 300px; right: -90px; bottom: -150px; opacity: .55; } }
/* Lagetisch (Akteure): Deutschland schraeg im Raum, rechts, unten angeschnitten */
.brh__tisch {
  position: absolute; z-index: 0; margin: 0; pointer-events: none;
  width: 560px; height: 330px; right: max(-60px, calc((100vw - 1180px) / 2 - 40px)); bottom: -40px;
}
.brh__tisch canvas { display: block; }
@media (max-width: 900px) { .brh__tisch { width: 440px; height: 260px; right: -150px; bottom: -40px; opacity: .5; } }

/* ── Werkzeuge ────────────────────────────────────────────────────── */
body.bereich main.home { padding-top: 34px; }
.brh-label {
  margin: 0 0 14px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
body.bereich .apps { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 0; }
body.bereich .app {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-radius: 14px; background: #fff;
}
body.bereich .app:hover, body.bereich .app.app--an {
  border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 51, 0, .12);
}
/* Motiv je Kachel (bereich.js): Foto oder echte Karte auf Gruen */
body.bereich .app__motiv { display: block; height: 150px; background: var(--green); overflow: hidden; position: relative; }
body.bereich .app__motiv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
body.bereich .app__motiv canvas { display: block; width: 100%; height: 100%; }
body.bereich .app:hover .app__motiv img, body.bereich .app.app--an .app__motiv img { transform: scale(1.04); }
/* Kacheln mit Sinnbild (falls bereich.js nicht laeuft): gruenes Band */
body.bereich .app__icon {
  width: auto; height: 116px; border-radius: 0; background: var(--green);
}
body.bereich .app__icon svg { width: 46px; height: 46px; stroke: #F9F2E4; stroke-width: 1.4; }
body.bereich .app:hover .app__icon, body.bereich .app.app--an .app__icon { background: #00250A; }
body.bereich .app__icon .fill { fill: #C2A675; }
body.bereich .app > .app__name { margin: 16px 18px 0; }
body.bereich .app > .app__meta { margin: 6px 18px 0; }
/* Kacheln mit Bildmotiv (Lage) behalten ihr helles Motiv */
body.bereich .app__bild { height: 136px; }
body.bereich .app__k { padding: 16px 18px 0; }
/* Oeffnen als letzte Zeile jeder Karte */
body.bereich .app::after {
  content: "Öffnen \203A"; display: block; margin: auto 18px 0; padding: 14px 0 16px;
  font-size: 13px; font-weight: 700; color: var(--green);
}
/* Bildnachweis unter den Kacheln */
.br-nachweis { margin: 14px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.br-nachweis:empty { display: none; }
.br-nachweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.bereich .app > .app__kennung { margin: 8px 18px 0; align-self: flex-start; }

@media (max-width: 640px) { .brh__in { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { body.bereich .app, body.bereich .app__motiv img { transition: none; } }