Styling: Admin-Screenshot vollbreit, Karten ohne Icons, Nova-Button/Nav-Kontraste

src/content/docs/index.mdx

@@ -4,37 +4,35 @@ description: Entwickler- und Anwender-Dokumentation für Tibi-Server und Tibi-Ad
 template: splash
 hero:
   tagline: Headless-CMS mit Go-Backend und Svelte-Frontends — hier steht, wie man damit baut.
-  image:
-    file: ../../assets/favicon.svg
   actions:
     - text: Schnellstart
       link: /einstieg/schnellstart/
       icon: right-arrow
     - text: Tibi-Server
       link: /server/uebersicht/
-      icon: open-book
       variant: minimal
     - text: Tibi-Admin-Nova
       link: /nova/konzept/
-      icon: open-book
       variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
+![So sieht Tibi-Admin-Nova aus: Eintrag pflegen mit Toolbar, Formular und Rich-Text-Editor.](../../assets/admin-nova.png)
+
 ## Wo finde ich was?
 
 <CardGrid stagger>
-  <Card title="Einstieg" icon="rocket">
+  <Card title="Einstieg">
-    Was ist Tibi, Schnellstart mit Docker, Begriffe von Namespace bis Collection.
+    Was ist Tibi, Schnellstart mit Docker, Begriffe von Namespace bis Collection. [Los geht's](/einstieg/was-ist-tibi/).
   </Card>
-  <Card title="Tibi-Server" icon="server">
+  <Card title="Tibi-Server">
-    Go-Backend: Collections-YAML, Hooks, Auth, Jobs, Realtime, LLM, Deploy. Wird aus dem Server-Repo synchronisiert.
+    Go-Backend: Collections-YAML, Hooks, Auth, Jobs, Realtime, LLM, Deploy. [Zur Übersicht](/server/uebersicht/).
   </Card>
-  <Card title="Tibi-Admin-Nova" icon="pencil">
+  <Card title="Tibi-Admin-Nova">
-    Svelte-Admin: Sammlungen pflegen, Exporte, Rollen, Testpläne.
+    Svelte-Admin: Sammlungen pflegen, Exporte, Rollen, Testpläne. [Zum Konzept](/nova/konzept/).
   </Card>
-  <Card title="Referenz" icon="document">
+  <Card title="Referenz">
-    Autogeneriert: OpenAPI-Spec, Hook-JS-API, Collection-Schema. Nicht von Hand pflegen.
+    Autogeneriert: OpenAPI-Spec, Hook-JS-API, Collection-Schema. [Zur Referenz](/reference/).
   </Card>
 </CardGrid>

src/styles/custom.css

@@ -1,48 +1,37 @@
-/* Tibi Doku — an Tibi-Admin-Nova angelehntes Theme (Inter, Near-Black + Nova-Orange) */
+/* Tibi Doku — Nova-angelehnt: Inter, Near-Black-Akzent, Nova-Orange als Zweitakzent.
+   Hinweis: --sl-color-white/black/gray bewusst NICHT überschrieben (Starlight
+   dreht sie je Theme, eigenes Mapping zerstört Kontraste auf Buttons/Nav). */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 :root {
   --sl-font: 'Inter', system-ui, -apple-system, sans-serif;
 
-  /* Akzent = Nova Near-Black (Light Mode) */
+  /* Akzent-Skala: Text-Akzent muss auf Weiß lesbar sein → dunkel */
-  --sl-color-accent-low: #e5e7eb;
+  --sl-color-accent-low: #e8eaed;
-  --sl-color-accent: #111827;
+  --sl-color-accent: #374151;
-  --sl-color-accent-high: #000000;
+  --sl-color-accent-high: #111827;
-  --sl-color-white: #ffffff;
-  --sl-color-gray-1: #f8f9fa;
-  --sl-color-gray-2: #f1f3f5;
-  --sl-color-gray-3: #e5e7eb;
-  --sl-color-gray-4: #d1d5db;
-  --sl-color-gray-5: #9ca3af;
-  --sl-color-gray-6: #6b7280;
-  --sl-color-black: #111827;
 
-  /* Nova-Orange als Zweitakzent für Badges, Links-Hover, Hero
+  /* Nova-Farben nur als Deko, nie als Textfarbe auf hellem Grund */
-     (Trio: --tibi-nova Sienna, --tibi-nova-core Petrol, --tibi-nova-outer Rot) */
   --tibi-nova: #c2410c;
   --tibi-nova-core: #4da8b8;
   --tibi-nova-outer: #dc2626;
   --tibi-sidebar: #f8f9fa;
   --tibi-topbar: #ffffff;
+  --tibi-card-border: #e5e7eb;
 }
 
 :root[data-theme='dark'] {
-  --sl-color-accent-low: #2a2a2a;
+  /* Auf dunklem Grund muss Text-Akzent hell sein */
-  --sl-color-accent: #e5e7eb;
+  --sl-color-accent-low: #2b3138;
-  --sl-color-accent-high: #ffffff;
+  --sl-color-accent: #9aa4b2;
-  --sl-color-white: #1e1e1e;
+  --sl-color-accent-high: #e5e7eb;
-  --sl-color-gray-1: #2a2a2a;
+
-  --sl-color-gray-2: #151515;
+  --tibi-sidebar: #16181d;
-  --sl-color-gray-3: #333333;
+  --tibi-topbar: #16181d;
-  --sl-color-gray-4: #333333;
+  --tibi-card-border: #333a44;
-  --sl-color-gray-5: #9ca3af;
-  --sl-color-gray-6: #6b7280;
-  --sl-color-black: #e5e7eb;
-  --tibi-sidebar: #1e1e1e;
-  --tibi-topbar: #1e1e1e;
 }
 
-/* Sidebar / Topbar leicht Nova-nah */
+/* ---------- Flächen in Nova-Nähe ---------- */
 .sidebar-pane {
   background-color: var(--tibi-sidebar);
 }
@@ -50,19 +39,81 @@
   background-color: var(--tibi-topbar);
 }
 
-/* Hero-Akzent: Nova-Flamme als dezenter Verlauf */
+/* ---------- Hero ---------- */
 .hero {
   background:
-    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.12), transparent),
+    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.1), transparent),
-    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.08), transparent),
+    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.07), transparent),
-    radial-gradient(ellipse 25% 20% at 70% 0%, rgba(220, 38, 38, 0.06), transparent);
+    radial-gradient(ellipse 25% 20% at 70% 0%, rgba(220, 38, 38, 0.05), transparent);
+}
+:root[data-theme='dark'] .hero {
+  background:
+    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.16), transparent),
+    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.1), transparent);
+}
+.hero img {
+  border: 1px solid var(--tibi-card-border);
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 50px -20px rgba(17, 24, 39, 0.35);
+  max-width: min(100%, 45rem);
 }
 
-/* Externe Nova-Links / primäre Aktionen in Nova-Orange */
+/* Inhaltsbilder (z. B. Startseiten-Screenshot): gerahmt, zentriert */
+.sl-markdown-content p > img:only-child {
+  border: 1px solid var(--tibi-card-border);
+  border-radius: 0.75rem;
+  box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.4);
+  display: block;
+  margin: 0 auto;
+  max-width: min(100%, 58rem);
+}
+
+/* ---------- Buttons: immer lesbar, Nova-Nähe ---------- */
+.sl-link-button.primary {
+  background: #111827;
+  border-color: #111827;
+  color: #ffffff;
+}
+.sl-link-button.primary:hover {
+  background: #000000;
+  border-color: #000000;
+  color: #ffffff;
+}
+.sl-link-button.minimal,
+.sl-link-button.secondary {
+  color: #111827;
+}
+.sl-link-button.minimal:hover,
+.sl-link-button.secondary:hover {
+  color: #c2410c;
+}
+:root[data-theme='dark'] .sl-link-button.primary {
+  background: #e5e7eb;
+  border-color: #e5e7eb;
+  color: #111827;
+}
+:root[data-theme='dark'] .sl-link-button.primary:hover {
+  background: #ffffff;
+  border-color: #ffffff;
+  color: #111827;
+}
+:root[data-theme='dark'] .sl-link-button.minimal,
+:root[data-theme='dark'] .sl-link-button.secondary {
+  color: #e5e7eb;
+}
+:root[data-theme='dark'] .sl-link-button.minimal:hover,
+:root[data-theme='dark'] .sl-link-button.secondary:hover {
+  color: #fbbf24;
+}
+
+/* ---------- Karten: ruhig, Nova-Rahmen, Orange nur bei Hover ---------- */
+.sl-link-card,
+.card {
+  border-color: var(--tibi-card-border);
+}
 .sl-link-card:hover {
   border-color: var(--tibi-nova);
 }
-a[href*='tibi-admin-nova'],
+.card .icon {
-a[href*='tibicms'] {
+  display: none;
-  text-decoration-color: var(--tibi-nova);
 }