/* hub.css - openbi.hub, die Kundenansicht. 03.09.2026.

   MASSE UND FARBEN AUS DEM BOARD layout-main (Entwurf 01a06409). Eigene Datei
   und nicht obs.css: der Hub hat eine dunkle Kopfleiste mit Wortmarke im
   Verlauf, eine helle Seitenspalte und einen dunklen Fuss - das ist eine andere
   Oberflaeche und keine Abwandlung des Studios.

   NAMEN AUF DEUTSCH wie im CRM: hub-kopf, hub-rail, hub-inhalt. Der Entwurf
   heisst layout-main, aber im Quelltext dieses Hauses steht deutsch. */

:root{
  --hub-nacht:#0f0f1e;
  --hub-nacht-2:#1a1a2e;
  --hub-pink:#ff006e;
  --hub-cyan:#00d4ff;
  --hub-grund:#f8f9ff;
  --hub-linie:#e8e8f0;
  --hub-tinte:#1a1a1a;
  --hub-tinte-2:#666;
  --hub-tinte-3:#999;
  --hub-flaeche:#fff;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

body{
  margin:0;background:var(--hub-flaeche);color:var(--hub-tinte);
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.5;
}

.hub-app{display:flex;flex-direction:column;min-height:100vh;background:var(--hub-flaeche)}

/* ------------------------------------------------------------- Die Kopfleiste */
.hub-kopf{
  background:linear-gradient(90deg,var(--hub-nacht) 0%,var(--hub-nacht-2) 100%);
  color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);
  position:sticky;top:0;z-index:1000;
}
.hub-kopf-innen{
  max-width:1600px;margin:0 auto;padding:16px 40px;
  display:flex;justify-content:space-between;align-items:center;gap:40px;
}
.hub-marke{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;flex-shrink:0;text-decoration:none}
/* Die Wortmarke ist der Verlauf selbst - deshalb Text in Farbe schneiden und
   nicht einfaerben. Faellt background-clip aus, bleibt sie weiss lesbar. */
.hub-marke-zeichen,.hub-marke b{
  background:linear-gradient(135deg,var(--hub-pink),var(--hub-cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
}
.hub-marke-zeichen{font-size:28px;line-height:1}
.hub-marke b{font-weight:800}

.hub-nav{display:flex;gap:30px;flex:1 1 0;justify-content:center;flex-wrap:wrap}
.hub-nav a,.hub-nav span{
  color:rgba(255,255,255,.7);text-decoration:none;
  font-size:14px;font-weight:600;padding:8px 0;
  border-bottom:2px solid transparent;transition:.3s;
}
.hub-nav a:hover,.hub-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--hub-pink)}
/* Ein Punkt, den es noch nicht gibt, ist ein span und kein Link: ein Link, der
   404 liefert, ist schlimmer als ein grauer Eintrag. */
.hub-nav span{opacity:.45;cursor:default}

.hub-rechts{display:flex;align-items:center;gap:20px;flex-shrink:0}
.hub-glocke{background:none;border:0;font-size:20px;cursor:pointer;transition:transform .3s;color:inherit}
.hub-glocke:hover{transform:scale(1.1)}
.hub-konto{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;transition:background .3s;color:inherit;text-decoration:none}
.hub-konto:hover{background:rgba(255,255,255,.08)}
.hub-konto-zeichen{
  width:36px;height:36px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hub-pink),#ff3c87);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.hub-konto-name{font-size:12px;color:rgba(255,255,255,.7)}
.hub-abmelden{background:none;border:0;padding:0;font:inherit;font-size:12px;color:rgba(255,255,255,.7);text-decoration:underline;cursor:pointer}
.hub-abmelden:hover{color:#fff}

/* ------------------------------------------------------ Seitenspalte + Inhalt */
.hub-wrap{display:flex;flex:1 1 auto;max-width:1600px;width:100%;margin:0 auto}
.hub-rail{
  width:280px;flex-shrink:0;overflow-y:auto;
  background:var(--hub-grund);border-right:1px solid var(--hub-linie);
  padding:40px 24px;
}
.hub-rail-teil{margin-bottom:32px}
.hub-rail-teil:last-child{margin-bottom:0}
.hub-rail-titel{margin:0 0 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hub-tinte-3)}
.hub-rail-liste{list-style:none;margin:0;padding:0}
.hub-rail-liste a,.hub-rail-liste span{
  display:block;padding:10px 12px;margin-bottom:6px;
  color:var(--hub-tinte-2);text-decoration:none;font-size:14px;
  border-radius:8px;border-left:3px solid transparent;transition:.3s;
}
.hub-rail-liste a:hover{color:var(--hub-pink);background:rgba(255,0,110,.05);border-left-color:var(--hub-pink)}
.hub-rail-liste span{opacity:.5;cursor:default}
.hub-rail-leer{margin:0;font-size:13px;color:var(--hub-tinte-3)}

.hub-inhalt{flex:1 1 auto;min-width:0;background:linear-gradient(180deg,#f5f0ff 0%,#fff 100%)}
.hub-seite{max-width:1100px;margin:0 auto;padding:40px}
.hub-seite h1{margin:0 0 .4rem;font-size:28px;font-weight:700}
.hub-seite-unter{margin:0 0 2rem;color:var(--hub-tinte-2);font-size:15px}

.hub-karte{
  background:var(--hub-flaeche);border:1px solid var(--hub-linie);
  border-radius:12px;padding:24px;margin-bottom:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.hub-karte h2{margin:0 0 16px;font-size:16px;font-weight:700}

/* -------------------------------------------------------------------- Der Fuss */
.hub-fuss{
  background:var(--hub-nacht);color:rgba(255,255,255,.6);
  padding:24px 40px;border-top:1px solid var(--hub-nacht-2);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:auto;
}
.hub-fuss p{margin:0;font-size:13px}
.hub-fuss-punkte{display:flex;gap:20px}
.hub-fuss a{color:rgba(255,255,255,.6);text-decoration:none;font-size:13px;transition:color .3s}
.hub-fuss a:hover{color:#fff}

@media (max-width:900px){
  .hub-kopf-innen{flex-wrap:wrap;gap:16px;padding:12px 20px}
  .hub-nav{order:3;flex:1 0 100%;justify-content:flex-start;gap:18px}
  .hub-wrap{flex-direction:column}
  .hub-rail{width:auto;border-right:0;border-bottom:1px solid var(--hub-linie);padding:24px 20px}
  .hub-seite{padding:24px 20px}
}

/* ============================================================================
   DASHBOARD "Meine Projekte" nach dem Board collab-dashboard. 03.09.2026.
   Masse und Farben aus dem Entwurf; Namen deutsch wie im Rest des Hauses.
   ========================================================================= */

.hub-kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.hub-kopfzeile h1{font-size:40px;font-weight:800;margin:0 0 8px;color:var(--hub-nacht);line-height:1.1}
.hub-kopfzeile p{margin:0;font-size:16px;color:var(--hub-tinte-2)}

.hub-werkzeuge{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.hub-filter{
  padding:10px 18px;background:var(--hub-flaeche);
  border:2px solid var(--hub-linie);border-radius:20px;
  font:inherit;font-size:14px;font-weight:600;color:var(--hub-tinte-2);cursor:pointer;transition:.3s;
}
.hub-filter:hover,.hub-filter[aria-pressed="true"]{border-color:var(--hub-pink);color:var(--hub-pink);background:rgba(255,0,110,.05)}
.hub-suche{
  padding:10px 16px;background:var(--hub-flaeche);
  border:2px solid var(--hub-linie);border-radius:12px;
  font:inherit;font-size:14px;min-width:220px;transition:.3s;
}
.hub-suche:focus{outline:none;border-color:var(--hub-pink)}

.hub-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:28px}

.hub-pjk{
  background:var(--hub-flaeche);border-radius:20px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  border-left:6px solid var(--hub-linie);
  display:flex;flex-direction:column;transition:.3s;
}
.hub-pjk:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.1)}
/* Die Farbe links ist der Stand: laufend cyan, fertig gruen, alles andere
   bleibt neutral. Ein eigener Ton fuer "geplant" wuerde eine Dringlichkeit
   behaupten, die es nicht gibt. */
.hub-pjk.ist-laufend{border-left-color:var(--hub-cyan)}
.hub-pjk.ist-fertig{border-left-color:#4caf50}
.hub-pjk.ist-verzug{border-left-color:#ffd60a}

.hub-pjk-kopf{padding:22px 24px;border-bottom:1px solid #f0f0f5;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hub-pjk-wer{display:flex;gap:12px;align-items:center;min-width:0}
.hub-pjk-zeichen{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hub-pink),#ff3c87);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;
}
.hub-pjk-wer b{display:block;font-size:14px;font-weight:700;color:var(--hub-nacht)}
.hub-pjk-wer small{display:block;font-size:12px;color:var(--hub-tinte-3)}
.hub-pjk-stand{
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;
  background:var(--hub-linie);color:var(--hub-tinte-2);
}
.hub-pjk-stand.ist-laufend{background:rgba(0,212,255,.1);color:#00a8cc}
.hub-pjk-stand.ist-fertig{background:rgba(76,175,80,.1);color:#388e3c}
.hub-pjk-stand.ist-verzug{background:rgba(255,214,10,.15);color:#ffa500}

.hub-pjk-koerper{padding:24px;flex:1 1 auto;display:flex;flex-direction:column;gap:20px}
.hub-pjk-name{font-size:18px;font-weight:700;color:var(--hub-nacht);margin:0}
.hub-pjk-text{font-size:14px;color:var(--hub-tinte-2);margin:8px 0 0;line-height:1.5}
.hub-pjk-stufe{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px}
.hub-pjk-bahn{width:100%;height:8px;background:var(--hub-linie);border-radius:4px;overflow:hidden}
.hub-pjk-fuellung{display:block;height:100%;width:var(--wert,0%);border-radius:4px;background:linear-gradient(90deg,var(--hub-pink),var(--hub-cyan))}

.hub-pjk-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:var(--hub-grund);border-radius:12px}
.hub-pjk-raster span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hub-tinte-3)}
.hub-pjk-raster b{display:block;font-size:14px;font-weight:600;color:var(--hub-nacht);margin-top:2px}
.hub-pjk-raster b.ist-spaet{color:var(--hub-pink)}

.hub-pjk-fuss{padding:16px 24px;border-top:1px solid #f0f0f5;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hub-pjk-fuss small{font-size:13px;color:var(--hub-tinte-3)}
.hub-pjk-oeffnen{font-size:14px;font-weight:700;color:var(--hub-pink);text-decoration:none}
.hub-pjk-oeffnen[aria-disabled="true"]{color:var(--hub-tinte-3);cursor:default}

.hub-leer{
  padding:40px 24px;text-align:center;color:var(--hub-tinte-2);
  background:var(--hub-flaeche);border:1px dashed var(--hub-linie);border-radius:20px;
}
.hub-leer b{display:block;font-size:16px;color:var(--hub-nacht);margin-bottom:6px}

/* ============================================================================
   PROJEKTSEITE DES HUB nach dem Board collab-detail. 03.09.2026.
   ========================================================================= */

.hub-zurueck{
  display:inline-block;margin-bottom:24px;padding:10px 16px;
  background:var(--hub-flaeche);border:2px solid var(--hub-linie);border-radius:12px;
  font-size:13px;font-weight:600;color:var(--hub-tinte-2);text-decoration:none;transition:.3s;
}
.hub-zurueck:hover{border-color:var(--hub-pink);color:var(--hub-pink)}

.hub-pj-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.hub-pj-kopf h1{font-size:36px;font-weight:800;margin:0 0 8px;color:var(--hub-nacht);line-height:1.15}
.hub-pj-kopf p{margin:0;font-size:16px;color:var(--hub-tinte-2);line-height:1.5}
.hub-pj-tat{display:flex;gap:12px;flex-wrap:wrap}
.hub-pj-tat span{
  padding:12px 24px;background:var(--hub-flaeche);border:2px solid var(--hub-linie);
  border-radius:12px;font-size:14px;font-weight:600;color:var(--hub-tinte-3);cursor:default;
}

.hub-pj-raum{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.hub-pj-karte{background:var(--hub-flaeche);border-radius:20px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:28px}
.hub-pj-karte:last-child{margin-bottom:0}
.hub-pj-karte h2{font-size:18px;font-weight:700;color:var(--hub-nacht);margin:0 0 20px}

.hub-pj-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.hub-pj-reihe span{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hub-tinte-3)}
.hub-pj-reihe b{display:block;font-size:16px;font-weight:600;color:var(--hub-nacht);margin-top:4px}
.hub-pj-reihe b.ist-spaet{color:var(--hub-pink)}

.hub-pj-gesamt{font-size:14px;font-weight:600;color:var(--hub-tinte-2);margin:0 0 8px}

/* Die Schritte: nur die geteilten. Die Kachel links traegt den Stand -
   gruen fertig, cyan laeuft, grau offen. */
.hub-pj-schritte{margin-top:24px;padding-top:24px;border-top:1px solid #f0f0f5;display:flex;flex-direction:column;gap:16px}
.hub-pj-schritt{display:flex;gap:12px;padding:12px;background:var(--hub-grund);border-radius:12px;align-items:flex-start}
.hub-pj-haken{
  width:24px;height:24px;min-width:24px;border-radius:6px;flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--hub-linie);color:var(--hub-tinte-2);
}
.hub-pj-haken.ist-fertig{background:#4caf50;color:#fff}
.hub-pj-haken.ist-laufend{background:var(--hub-cyan);color:#fff}
.hub-pj-schritt b{display:block;font-size:14px;font-weight:600;color:var(--hub-nacht)}
.hub-pj-schritt small{display:block;font-size:13px;color:var(--hub-tinte-2);margin-top:2px}
.hub-pj-schritt .hub-pj-raute{color:var(--hub-pink);font-weight:700}

.hub-pj-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hub-pj-liste li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--hub-tinte-2)}
.hub-pj-liste li b{color:var(--hub-nacht)}

@media (max-width:1000px){
  .hub-pj-raum{grid-template-columns:minmax(0,1fr)}
}


/* ==========================================================================
   NACHTRAG 03.09.2026 - Freigaben und Verlauf.

   ZWEI NEUE FARBEN: gruen fuer eine erteilte Freigabe, gelb fuer eine, die
   wartet. Pink ist im Hub der Verzug und darf nicht auch die Ablehnung sein -
   sonst sieht ein abgelehnter Schritt aus wie ein verspaeteter.
   ========================================================================== */

:root{
  --hub-gruen:#00a06a;
  --hub-gelb:#b06d00;
  --hub-gelb-flaeche:#fff8e8;
  --hub-gruen-flaeche:#eafaf3;
}

/* Der Knopf des Hub. Es gab noch keinen - der Hub war bis heute nur zu lesen. */
.hub-btn{
  font:inherit;font-weight:600;font-size:13px;line-height:1;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hub-linie);background:var(--hub-flaeche);color:var(--hub-tinte-2);
}

.hub-btn:hover:not(:disabled){border-color:var(--hub-tinte-3);color:var(--hub-tinte)}
.hub-btn:disabled{opacity:.55;cursor:default}

.hub-btn-ja{background:var(--hub-gruen);border-color:var(--hub-gruen);color:#fff}
.hub-btn-ja:hover:not(:disabled){filter:brightness(1.08);color:#fff}

.hub-btn-nein{background:var(--hub-flaeche);border-color:var(--hub-pink);color:var(--hub-pink)}
.hub-btn-nein:hover:not(:disabled){background:var(--hub-pink);color:#fff;border-color:var(--hub-pink)}

/* Der Freigabekasten am Schritt. GELB UND EINGERUECKT: er gehoert zum Schritt
   darueber und ist zugleich das Einzige auf dieser Seite, das eine Handlung
   verlangt - beides muss man auf einen Blick sehen. */
.hub-pj-fg{
  margin:12px 0 4px;padding:14px 16px;border-radius:14px;
  background:var(--hub-gelb-flaeche);border:1px solid #f0e2c0;
}

.hub-pj-fg-frage{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--hub-gelb)}
.hub-pj-fg-reihe{display:flex;flex-wrap:wrap;gap:8px}
.hub-pj-fg-reihe[hidden]{display:none!important}

.hub-pj-fg-feld{
  display:block;width:100%;margin:10px 0;padding:10px 12px;
  font:inherit;font-size:13px;border-radius:12px;
  border:1px solid var(--hub-linie);background:var(--hub-flaeche);color:var(--hub-tinte);
  resize:vertical;
}

.hub-pj-fg-fehler{margin:10px 0 0;font-size:12px;color:var(--hub-pink)}

/* Eine Entscheidung, die schon gefallen ist: nur noch eine Marke, kein Kasten. */
.hub-pj-fg-marke{
  display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:600;
  background:var(--hub-gruen-flaeche);color:var(--hub-gruen);
}

.hub-pj-fg-marke.ist-abgelehnt{background:#fff0f5;color:var(--hub-pink)}

/* Der Verlauf in der Seitenspalte. */
.hub-pj-strahl{display:flex;flex-direction:column;gap:14px}

.hub-pj-strahl-zeile{
  padding-left:14px;border-left:2px solid var(--hub-linie);
}

.hub-pj-strahl-zeile.ist-kommentar{border-left-color:var(--hub-cyan)}
.hub-pj-strahl-zeile b{display:block;font-size:13px;color:var(--hub-nacht)}
.hub-pj-strahl-zeile small{color:var(--hub-tinte-3);font-size:11px}

.hub-pj-strahl-satz{margin:0 0 2px;font-size:13px;color:var(--hub-tinte-2)}
.hub-pj-strahl-zitat{margin:2px 0;font-size:13px;color:var(--hub-tinte);white-space:pre-wrap}

.hub-pj-antwort{display:flex;flex-direction:column;gap:10px;margin-top:20px}

.hub-pj-antwort-feld{
  padding:10px 12px;font:inherit;font-size:13px;border-radius:12px;
  border:1px solid var(--hub-linie);background:var(--hub-grund);color:var(--hub-tinte);
  resize:vertical;
}

.hub-pj-antwort .hub-btn{align-self:flex-start}

/* Der Hinweis auf der Projektkarte. Gelb wie der Freigabekasten in der Akte -
   derselbe Zustand soll auf beiden Seiten dieselbe Farbe haben. */
.hub-pjk-warten{
  margin:12px 0 0;padding:8px 12px;border-radius:10px;
  background:var(--hub-gelb-flaeche);color:var(--hub-gelb);
  font-size:13px;font-weight:600;
}

/* ==========================================================================
   Der Betrachter - eine Lage ueber der Seite. 03.09.2026.
   ========================================================================== */

.hub-lage{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,15,30,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
}

.hub-lage-kasten{
  display:flex;flex-direction:column;
  width:min(1160px,100%);max-height:100%;
  background:var(--hub-flaeche);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}

.hub-lage-kopf{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--hub-linie);
}

.hub-lage-kopf b{font-size:16px;color:var(--hub-nacht)}
.hub-lage-blaetter{display:flex;gap:6px;flex:1 1 auto;flex-wrap:wrap}

.hub-lage-reiter{
  font:inherit;font-size:12px;padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hub-linie);background:var(--hub-flaeche);color:var(--hub-tinte-2);
}

.hub-lage-reiter.ist-an{
  border-color:var(--hub-nacht);background:var(--hub-nacht);color:#fff;
}

/* DIE BUEHNE ROLLT, nicht die Seite darunter: ein Artboard ist hoeher als jeder
   Bildschirm, und ein Betrachter, der die Seite mitscrollt, verliert seinen Kopf. */
.hub-lage-buehne{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:16px 22px;background:var(--hub-grund);
}

/* Die Huelle traegt die skalierte Groesse - der Rahmen selbst steht in seiner
   eigenen Breite und wird nur gemalt kleiner. Ohne sie stuende unter dem Blatt
   der Leerraum der ungeskalierten Hoehe. */
.hub-lage-huelle{position:relative;overflow:hidden;margin:0 auto}

.hub-lage-blatt{
  display:block;border:0;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06);
}

/* Der Wirt des Schattenbaums traegt die Blattbreite und wird gemalt skaliert;
   seine gemessene Hoehe steht im Layout und darf deshalb nicht begrenzt werden. */
.hub-lage-huelle > .hub-lage-blatt{max-width:none}

.hub-lage-fuss{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--hub-linie);
  background:var(--hub-gelb-flaeche);
}

.hub-lage-fuss span{flex:1 1 auto;font-size:13px;font-weight:600;color:var(--hub-gelb)}

/* Der kleine Verweis an einer schon entschiedenen Freigabe. */
.hub-pj-fg-sehen{
  display:inline-block;margin:8px 8px 0 0;padding:4px 10px;border-radius:999px;
  font:inherit;font-size:12px;cursor:pointer;
  border:1px solid var(--hub-linie);background:var(--hub-flaeche);color:var(--hub-tinte-2);
}

.hub-pj-fg-sehen:hover{border-color:var(--hub-cyan);color:var(--hub-nacht)}

/* Die Freigabe am Projekt steht ueber allem anderen - deshalb etwas Luft nach
   unten und dieselbe gelbe Sprache wie der Kasten am Schritt. */
.hub-pj-fg-oben{margin:0 0 24px;padding:18px 22px;border-radius:16px}

.hub-pj-entschieden{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px}

.hub-pj-entschieden .hub-pj-fg-marke{margin-top:0}
.hub-pj-entschieden .hub-pj-fg-sehen{margin:0}