/* ============================================================
   OLLAMA: DER EINSTIEG — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css. Hier stehen nur die Terminal-Optik (Hero-Terminal,
   Befehls-Chips in Mono auf Navy), die Befehlstabelle, das dunkle
   Modellwahl-Band und Kontextabstaende.
   ============================================================ */

/* ---- Hero: Text links, Terminal rechts ---- */
.v4-ollama .v4-ollama-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--v4-space-6);
  align-items: center;
}
/* Die globale Silbentrennung aus style.css (h1 { hyphens: auto })
   zerlegt in der schmaleren Hero-Spalte «lokale» zu «lo-kale» —
   fuer diese H1 abschalten, umbrechen reicht */
.v4-ollama h1 {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.v4-ollama .v4-ollama-intro {
  color: var(--v4-text-secondary);
  max-width: 62ch;
}
@media (max-width: 900px) {
  .v4-ollama .v4-ollama-hero { grid-template-columns: 1fr; }
}

/* ---- Terminal-Befehle: Mono auf Navy ----
   Gilt fuer alle <code>-Stellen der Seite (Anleitung, Tabelle,
   Karten, FAQ) — dieselbe Optik wie das Hero-Terminal, damit
   Befehl und Terminal als ein Ding lesbar sind. */
.v4-ollama code {
  font-family: var(--v4-font-mono);
  font-size: 0.85em;
  background: var(--v4-bg-dark);
  color: #D7E3F4; /* aufgehelltes Terminal-Blauweiss, wie im alten Hero-SVG */
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- Hero-Terminal: dieselben zwei Befehle wie frueher im SVG ---- */
.v4-ollama .ollama-terminal {
  background: var(--v4-bg-dark);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-2) var(--v4-space-3) var(--v4-space-3);
  font-family: var(--v4-font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: #D7E3F4;
}
.v4-ollama .ollama-terminal-kopf {
  display: flex;
  gap: 8px;
  margin-bottom: var(--v4-space-2);
}
.v4-ollama .ollama-terminal-kopf span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.v4-ollama .ollama-zeile { display: flex; align-items: center; gap: 10px; }
.v4-ollama .ollama-prompt { color: rgba(255, 255, 255, 0.55); }
.v4-ollama .ollama-eingabe { color: rgba(255, 255, 255, 0.8); }
.v4-ollama .ollama-dim {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}
/* Ladebalken: fuellt sich in Endlosschleife (nur ohne
   reduced-motion), sonst steht er einfach voll */
.v4-ollama .ollama-zeile-lade { padding-block: 6px; }
.v4-ollama .ollama-balken {
  display: block;
  width: 60%;
  max-width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.v4-ollama .ollama-balken > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--v4-blue);
}
/* Cursor: blinkt im Takt des Terminals */
.v4-ollama .ollama-cursor {
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 2px;
  background: #D7E3F4;
}
@media (prefers-reduced-motion: no-preference) {
  .v4-ollama .ollama-balken > span {
    animation: ollama-laden 3s linear infinite;
  }
  .v4-ollama .ollama-cursor {
    animation: ollama-blinken 1.2s steps(1) infinite;
  }
  @keyframes ollama-laden {
    from { width: 0; }
    to   { width: 100%; }
  }
  @keyframes ollama-blinken {
    0%, 50%  { opacity: 1; }
    50.1%, 100% { opacity: 0; }
  }
}
.v4-ollama .ollama-terminal-fuss {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  color: var(--v4-text-secondary);
  margin: var(--v4-space-1) 0 0;
}

/* ---- Befehlstabelle: liniengetrennte Zeilen, Befehl als Chip ---- */
.v4-ollama .ollama-tabelle-wrap {
  overflow-x: auto;
  max-width: 900px;
}
.v4-ollama .ollama-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.v4-ollama .ollama-tabelle th {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v4-text-secondary);
  text-align: left;
  padding: 0 var(--v4-space-3) var(--v4-space-1) 0;
}
.v4-ollama .ollama-tabelle td {
  border-top: 1px solid var(--v4-border);
  padding: var(--v4-space-2) var(--v4-space-3) var(--v4-space-2) 0;
  vertical-align: top;
  color: var(--v4-text-secondary);
  font-size: 15px;
}
.v4-ollama .ollama-tabelle tbody tr:last-child td {
  border-bottom: 1px solid var(--v4-border);
}
.v4-ollama .ollama-tabelle td:first-child {
  white-space: nowrap;
  color: var(--v4-text-primary);
}

/* ---- Modellwahl: das eine Navy-Band der Seite ---- */
.v4-ollama .ollama-modelle {
  background: var(--v4-bg-dark);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-4);
  margin-top: var(--v4-space-4);
  max-width: 900px;
}
.v4-ollama .ollama-modelle-label {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 var(--v4-space-2);
}
.v4-ollama .ollama-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v4-space-1);
}
.v4-ollama .ollama-chip {
  display: inline-block;
  font-family: var(--v4-font-mono);
  font-size: 13px;
  color: var(--v4-white);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--v4-radius-control);
  padding: 8px 14px;
  transition: border-color var(--v4-transition), background var(--v4-transition);
}
.v4-ollama .ollama-chip:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.v4-ollama .ollama-modelle-hinweis {
  color: var(--v4-grey);
  font-size: 15px;
  max-width: 68ch;
  margin: var(--v4-space-3) 0 0;
}
.v4-ollama .ollama-modelle-hinweis a {
  color: var(--v4-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v4-ollama .ollama-modelle a:focus-visible { outline-color: var(--v4-white); }

/* ---- Links im Fliesstext: Aktionsblau statt geerbtem Grau ---- */
.v4-ollama .v4-ollama-einordnung a,
.v4-ollama .v4-liste a,
.v4-ollama .v4-karte a,
.v4-ollama .v4-faq a,
.v4-ollama .v4-hinweis a {
  color: var(--v4-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Quellenliste unter dem FAQ ---- */
.v4-ollama .ollama-quellen li {
  color: var(--v4-text-secondary);
  font-size: 15px;
}
.v4-ollama .ollama-quellen a { font-weight: 500; }

/* ---- Kontextabstaende ---- */
.v4-ollama .v4-liste-nummeriert { margin-top: var(--v4-space-2); }
.v4-ollama .v4-ollama-praxis { margin-top: var(--v4-space-4); }
.v4-ollama .v4-ollama-einordnung { margin-top: var(--v4-space-4); }
.v4-ollama .v4-ollama-verwandt { margin-top: var(--v4-space-2); }