/* R4X Mein Bereich: Cluster-Gliederung v2
   v2: Overflow-Fix. Der Cockpit-Container ist ein Grid; seine direkten Kinder
   erben kein min-width:0, wodurch breite Inhalte (Ticker, Kompass-Strip,
   Status-Zeile) die Spalte sprengten und die Seite horizontal ueberlief.
   Loesung: min-width:0 auf den Clustern und minmax(0,1fr)-Grid im Cluster-Body,
   damit alle Bloecke sauber in der Inhaltsspalte bleiben, auch mobil.
   ---
   Fuenf thematische Cluster mit leichten Koepfen und klarer Trennung.
   Ziel: keine "Wurst" - jeder Bereich kuendigt sich sichtbar an, auch mobil.
   Trennung entsteht aus drei Signalen zusammen: goldener Eyebrow mit Akzent,
   Trennlinie oben und grosszuegiger Abstand. */

.cockpit-cluster{
  min-width: 0;
  padding-top: var(--r4x-space-6);
  margin-top: var(--r4x-space-6);
  border-top: 1px solid var(--r4x-border-default);
}

.cockpit-cluster--start,
.cockpit-cluster:first-of-type{
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.cockpit-cluster:last-of-type{
  margin-bottom: var(--r4x-space-7);
}

.cockpit-cluster__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4x-space-3);
  margin-bottom: var(--r4x-space-4);
}

.cockpit-cluster__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--r4x-size-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--r4x-gold);
}

.cockpit-cluster__eyebrow::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--r4x-gold);
  flex: 0 0 auto;
}

.cockpit-cluster__body{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--r4x-space-5);
  min-width: 0;
}

/* Jeder Block innerhalb eines Clusters bleibt in der Spaltenbreite geklammert,
   damit breite Inhalte (Ticker, Kompass-Strip, Status-Zeile) nicht ueberlaufen. */
.cockpit-cluster__body > *,
.cockpit-cluster__item,
.cockpit-cluster .cockpit-personal-status{
  min-width: 0;
}

/* Untergeordnete Bloecke innerhalb eines Clusters (z.B. Marktimpulse, Features,
   Meine Daten) behalten einen eigenen, leichteren Kopf. */
.cockpit-cluster__item-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r4x-space-3);
  margin-bottom: var(--r4x-space-3);
}

.cockpit-cluster__item-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--r4x-size-base);
  font-weight: 500;
  margin: 0;
  color: var(--r4x-text-primary);
}

/* Mobil: Trennung bewusst deutlich halten, damit nichts zur Wurst wird.
   Die Trennlinie bleibt, der Kopf bekommt etwas Luft nach oben. */
@media (max-width: 640px){
  .cockpit-cluster{
    padding-top: var(--r4x-space-5);
    margin-top: var(--r4x-space-5);
  }
  .cockpit-cluster__body{
    gap: var(--r4x-space-4);
  }
  .cockpit-cluster__header{
    margin-bottom: var(--r4x-space-3);
  }
}