/* Modul Start (01.11.2026), Aufbau siehe start.js. Farben kommen aus dem Look
   Neon Soft (look-neon.css), die Seite gibt es nur mit diesem Look. Karten, Knöpfe,
   Chips, Größe (Segment), Veränderung und Anteile kommen aus der Bibliothek (ui/bausteine.css). */
.view-start { display: none; flex: 1; min-height: 0; overflow-y: auto; }
body[data-nav="start"] .view-start { display: block; }
body[data-nav="start"] :is(.sb-search-top, .sidebar-section, .header, .chat-tabs, .chat, .composer) { display: none !important; }

#start-inhalt { max-width: 1040px; margin: 0 auto; padding: 56px 32px 64px; color: var(--text); }

/* Begrüßung mit Eingabefeld, wie die Kopfzeile von Otto */
.st-held { display: grid; justify-items: center; gap: 10px; margin-bottom: 44px; text-align: center; }
.st-datum { font-size: var(--fs-1); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.st-held h1 { margin: 0; font: 600 clamp(28px, 4vw, 40px)/1.1 var(--ne-font-titel, var(--font)); letter-spacing: -.03em; }
/* Eingabefeld wie im Chat (.compose-card in look-neon.css): umlaufende Lichtkante,
   darunter Modell, Diktieren und Senden */
.st-eingabe {
  position: relative; width: min(680px, 100%); margin-top: 18px; text-align: left;
  border: 2px solid transparent; border-radius: 26px;
  background: var(--ne-composer-fl, var(--surface)) padding-box,
    conic-gradient(from var(--ne-winkel, 0deg), var(--c-warm), var(--c-warm-blass) 12%, var(--ne-comp-a) 30%,
      rgba(var(--ne-comp-a-rgb), .25) 48%, var(--c-warm) 62%, var(--c-warm-hell) 75%, var(--ne-comp-b) 88%, var(--c-warm)) border-box;
  box-shadow: var(--ne-composer-schatten, var(--ne-schatten-2, none));
  animation: ne-drehen 10s linear infinite;
}
.st-eingabe textarea {
  display: block; width: 100%; min-height: 56px; max-height: 220px; resize: none; padding: 18px 20px 6px;
  border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-4); line-height: 1.45;
}
.st-eingabe-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 10px 10px 12px; }
.st-status { flex: 1; min-width: 0; font-size: var(--fs-2); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modell-ort { position: relative; }
.st-modell {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--accent-2, var(--accent)); font: inherit; font-size: var(--fs-2); font-weight: 600; cursor: pointer;
}
.st-modell:hover { background: var(--overlay-hover); }
.st-modell svg { width: 14px; height: 14px; fill: currentColor; }
.st-modell .pfeil { fill: none; stroke: var(--text-dim); stroke-width: 2; }
.st-menue { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; }
.st-mikro, .st-senden {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
}
.st-mikro { background: transparent; color: var(--text-mid); }
.st-mikro:hover { background: var(--overlay-hover); color: var(--text); }
.st-mikro.an { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.st-senden { color: var(--ne-knopf-text, #fff); background: var(--ne-knopf-fl, var(--accent)); }
.st-senden:disabled { opacity: .35; cursor: default; }
.st-mikro svg, .st-senden svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .st-eingabe { animation: none; } }

.st-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.st-leiste h2 { margin: 0; font-size: var(--fs-5); font-weight: 600; letter-spacing: -.02em; }

/* Raster: 3 Spalten, breit = 2, voll = alle (HomeCardGrid in Otto) */
.st-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-karte { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.st-karte[data-breite="breit"] { grid-column: span 2; }
.st-karte[data-breite="voll"] { grid-column: 1 / -1; }
.st-karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st-karte h3 { margin: 0; font-size: var(--fs-4); font-weight: 600; letter-spacing: -.01em; }
.st-karte h3 small { margin-left: 4px; font-size: var(--fs-2); font-weight: 600; color: var(--text-dim); }
.st-leer { margin: 0; color: var(--text-dim); font-size: var(--fs-3); }

/* Inhalte */
.st-tag { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; }
.st-tag small, .st-neu small { display: block; margin-bottom: 8px; font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-liste li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: var(--fs-3); }
.st-liste li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-liste time { flex: none; width: 64px; color: var(--c-warm, var(--accent)); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-liste em { flex: none; font-style: normal; font-size: var(--fs-2); color: var(--text-dim); }
.st-haken { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--text-dim); border-radius: 50%; transform: translateY(2px); }
.st-chats li { display: block; }
.st-chats button {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-chats button:hover { color: var(--accent-2, var(--accent)); }
.st-notiz { min-height: 72px; outline: none; font-size: var(--fs-3); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.st-notiz:empty::before { content: attr(data-platzhalter); color: var(--text-dim); }

/* Anpassen: gestrichelter Rand, Griff, Größe und Entfernen (wie editBar in Otto) */
.st-bearbeiten .st-karte { border-style: dashed; border-color: var(--border-strong); }
.st-bearbeiten .st-karte[draggable="true"] { cursor: grab; }
.st-werkzeug { display: flex; align-items: center; gap: 8px; }
.st-griff { color: var(--text-dim); font-size: 18px; line-height: 1; }
/* Nur auf der Startseite: der Eingang nutzt st-weg als Zustand „Zuletzt erledigt“ */
.view-start .st-weg {
  margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer;
}
.view-start .st-weg:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.st-zieht { opacity: .45; }
.st-ziel { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .st-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #start-inhalt { padding: 28px 16px 96px; }
  .st-raster { grid-template-columns: minmax(0, 1fr); }
  .st-karte[data-breite] { grid-column: auto; }
}