/* systemmap · cockpit.css
 * ════════════════════════════════════════════════════════════════════
 * Die Startseite als Anfangs-Cockpit: gruener Markenbalken, Begruessung
 * nach der Uhr, drei Blick-Kacheln (zuletzt geoeffnet, Branchenticker,
 * Mitbewerber) und darunter "Ihre Bereiche" als Fotobaender.
 *
 * Farben und Schrift kommen aus werter-tokens.css, nie als Hex hier.
 * Die Bandinnereien (.ber__*) kommen weiter aus start.css; diese Datei
 * setzt nur den Cockpit-Rahmen und die Bandgroessen.
 *
 * Gold (#816E4E = der genehmigte goldtext, 4.5:1 auf Creme) traegt genau
 * EINE Betonung: das Uhrzeit-Wort der Begruessung. Sonst Gruen und Muted.
 */

:root { --gold: #816E4E; }

body.co {
  margin: 0;
  background: var(--boden);
  color: var(--ink);
  font-family: var(--sans, "Open Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ── Kopf: gruener Markenbalken, Adresse + Identitaet + Abmelden ─────── */
.co-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 15px clamp(20px, 5vw, 56px);
  background: var(--green); color: var(--cream);
}
.co-marke { display: flex; align-items: baseline; gap: 13px; min-width: 0; }
.co-marke__w { font-family: var(--titel, "Merriweather", Georgia, serif); font-weight: 900; font-size: 24px; color: var(--cream); line-height: 1; }
.co-marke__t { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(249, 242, 228, .6); }

.co-kopf__rechts { display: flex; align-items: center; gap: 20px; text-align: right; min-width: 0; }
.co-adr { font-size: 12px; line-height: 1.5; color: rgba(249, 242, 228, .66); white-space: nowrap; }
.co-adr a { color: rgba(249, 242, 228, .66); text-decoration: none; }
.co-adr a:hover { text-decoration: underline; }
.co-ident { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .02em; color: rgba(249, 242, 228, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.co-ident:empty { display: none; }
.co-logout {
  font-size: 13px; font-weight: 600; color: var(--cream); background: transparent;
  border: 1px solid rgba(249, 242, 228, .32); border-radius: 999px;
  padding: 7px 16px; white-space: nowrap; cursor: pointer; font-family: inherit;
}
.co-logout:hover { background: rgba(249, 242, 228, .1); }
.co-logout:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ── Huelle auf Creme ────────────────────────────────────────────────── */
.co-huelle { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px) 64px; }

.co-brief { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.co-gruss {
  font-family: var(--titel, "Merriweather", Georgia, serif);
  font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.125rem); line-height: 1.15;
  letter-spacing: -.005em; margin: 6px 0 0; color: var(--green);
}
/* Das Zeichen des Mandanten nach dem Gruss, mit Strom (strom-logo.js).
   Hoehe an der Schrift ausgerichtet, damit es wie ein Wort im Satz steht. */
.strom-logo { position: relative; display: inline-block; vertical-align: -0.3em; height: 1.3em; margin-left: .18em; }
.strom-logo__bild { display: block; height: 100%; width: auto; }
.strom-logo__strom { position: absolute; pointer-events: none; }
/* Mitmarke im gruenen Kopf (seit 17.10.2026), Mass wie tor.js auf den
   anderen Seiten: kleines Wort darueber, Zeichen 30 px hoch. */
.co-marke { align-items: center; }
.co-mit { display: flex; flex-direction: column; gap: 5px; margin-left: 13px; padding-left: 22px; border-left: 1px solid rgba(249, 242, 228, .22); }
.co-mit__wort { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: rgba(249, 242, 228, .5); }
.strom-logo--kopf { height: 30px; margin-left: 0; vertical-align: baseline; display: block; }
@media (max-width: 560px) {
  .co-mit { margin-left: 6px; padding-left: 12px; }
  .co-mit__wort { display: none; }
  .strom-logo--kopf { height: 22px; }
}
.co-stand { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Blick-Kacheln ───────────────────────────────────────────────────── */
.co-glanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 14px; margin: 30px 0 0; }
.co-karte {
  border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px;
  background: var(--surface); color: var(--ink); text-decoration: none; display: block;
}
a.co-karte:hover { border-color: #CBD2C3; }
a.co-karte:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.co-karte small { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; }
.co-karte b { font-family: var(--titel, serif); font-weight: 700; font-size: 1.5rem; color: var(--green); display: block; margin-top: 6px; line-height: 1.1; }
.co-karte .co-zeile { font-size: 15px; margin-top: 8px; font-weight: 600; line-height: 1.35; }
.co-karte .co-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Ihre Bereiche: die echten Baender aus index.html, neu gerahmt ─────
   Die Spaltenzahl richtet sich nach der Anzahl der Baender, die tor.js je
   Gruppe UEBRIG laesst (cockpit.js setzt data-n). So ist die Anordnung bei
   1 bis 4 Baendern immer ausgewogen -- nie eine einzelne Kachel allein in
   einer Dreierreihe. Es gibt kein erzwungenes Riesen-Band mehr; alle
   Fotobaender sind gleichwertige Karten. */
.co-label { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 34px 0 16px; }

/* Die Fotos sind breite Banner (ca. 2400x522, 4.6:1). In schmale
   Rasterzellen gequetscht zeigen sie nur einen dunklen Mittelstreifen --
   darum liegen sie als volle, breite Reihen untereinander. Das nutzt die
   Bilder richtig und ist bei JEDER Anzahl ausgewogen: ob ein Band bleibt
   oder vier, es sind einfach N gestapelte Reihen, nie eine einzelne
   Kachel in einer Dreierreihe. */
.co-baender { display: flex; flex-direction: column; gap: 16px; }
/* flex:0 0 auto hebt das flex:1 1 0 aus start.css auf (das teilte frueher
   den ganzen Schirm in Drittel); hier gibt die aspect-ratio die Hoehe. */
.co-baender .ber {
  flex: 0 0 auto; width: 100%; border-radius: 18px; aspect-ratio: 32 / 9;
  min-height: 0; overflow: hidden; box-shadow: 0 2px 10px rgba(25, 28, 21, .10);
}
.co-baender .ber:hover { box-shadow: 0 7px 24px rgba(25, 28, 21, .18); }

/* Werkbank (ohne Foto) flach, nicht so hoch wie ein Bildband. */
.co-baender .ber--haus { aspect-ratio: auto; min-height: 98px; }

/* Anti-Flackern: Baender erst zeigen, wenn tor.js den Zuschnitt gesetzt hat. */
.co-baender .ber { visibility: hidden; }
html[data-tor="fertig"] .co-baender .ber { visibility: visible; }

@media (max-width: 880px) {
  .co-glanz { grid-template-columns: 1fr; }
  .co-baender .ber { aspect-ratio: 16 / 9; }
  .co-kopf__rechts .co-adr { display: none; }
  .co-ident { max-width: 20ch; }
}