/* VERDINO Brand-Tokens — Quelle: Corporate Design Manual + Branding Guidelines (verbindlich, s. 30_Design-Basis.md) */
:root {
  --grau: #283941;      /* Primär: Text + dunkler Grund */
  --gelb: #FFE36C;      /* Signatur-Akzent */
  --gruen: #B5FFB2;     /* Akzent */
  --blau: #ACEFEE;      /* Akzent */
  --rosa: #FFC5DF;      /* Akzent */
  --violett: #D5BFFF;   /* Akzent */
  --weiss: #FFFFFF;

  --radius: 18px;
  --font-display: 'Atten Round New ExtraBold', 'Atten Round New', sans-serif;
  --font-body: 'Atten Round New Book', 'Atten Round New', -apple-system, BlinkMacSystemFont, sans-serif;
}

@font-face {
  font-family: 'Atten Round New Book';
  src: url('../assets/fonts/AttenRoundNew-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atten Round New ExtraBold';
  src: url('../assets/fonts/AttenRoundNew-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--weiss);
  color: var(--grau);
  font-family: var(--font-body);
}

/* Zufällige Marken-Vollfarbe als Browser-Hintergrund (per JS bei jedem Reload
   gesetzt). Prinzip von verdino.com: nie Farbe auf Farbe — die Farbe füllt den
   Hintergrund, die Namens-Box darüber ist weiß. */
body.bg-gelb    { background: var(--gelb); }
body.bg-gruen   { background: var(--gruen); }
body.bg-blau    { background: var(--blau); }
body.bg-rosa    { background: var(--rosa); }
body.bg-violett { background: var(--violett); }

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen { height: 100%; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* Der Chat ist immer weiß (auch auf Mobil, wo der farbige body sonst
   durchscheinen würde). Nur die Namensauswahl zeigt die zufällige Vollfarbe. */
.screen-chat { background: var(--weiss); }

/* --- Screen 1: Namensauswahl --- */

.screen-picker {
  justify-content: center;
  align-items: center;
  padding: 24px 20px;
  background: transparent; /* zeigt die zufällige body-Vollfarbe */
}

/* Weiße Box mit Namen — trennt Farbe (Hintergrund) und Farbe (Buttons):
   nie Farbe auf Farbe, wie auf verdino.com. */
.picker-card {
  background: var(--weiss);
  border-radius: 24px;
  padding: 32px 26px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}

.picker-header { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.logo-v { width: 44px; height: auto; }
.logo-wordmark { width: 168px; height: auto; margin-top: 2px; }

.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 40px);
  margin: 0;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grau);
  opacity: 0.75;
}

.brand-hashtags {
  display: inline-block;
  margin-top: 8px;
  font-weight: 800;
  font-family: var(--font-display);
  opacity: 0.9;
}

.name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.name-btn {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--grau);
  background: var(--weiss);
  border: 2px solid var(--grau);
  border-radius: var(--radius);
  padding: 14px 10px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.name-btn:hover,
.name-btn:focus-visible {
  transform: translateY(-2px);
}

.name-btn:active { transform: translateY(0); }

/* Buntfarben als Button-Fläche auf weißer Box (Farbe auf Weiß = ok, kein
   Farbe-auf-Farbe-Problem mehr, auch nicht bei den grünen Buttons).
   Text bleibt laut Brand-Regel immer Dunkelgrau. */
.name-btn[data-accent="gelb"]    { background: var(--gelb); border-color: var(--gelb); }
.name-btn[data-accent="gruen"]   { background: var(--gruen); border-color: var(--gruen); }
.name-btn[data-accent="blau"]    { background: var(--blau); border-color: var(--blau); }
.name-btn[data-accent="rosa"]    { background: var(--rosa); border-color: var(--rosa); }
.name-btn[data-accent="violett"] { background: var(--violett); border-color: var(--violett); }

/* --- Login per E-Mail-Code (auf der weißen picker-card) --- */
.login-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; }
#login-step-email, #login-step-code { display: flex; flex-direction: column; gap: 12px; }
.login-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--grau);
  text-align: center;
}
.login-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grau);
  background: var(--weiss);
  border: 2px solid var(--grau);
  border-radius: var(--radius);
  padding: 13px 15px;
  outline: none;
}
.login-input:focus { border-color: var(--gelb); box-shadow: 0 0 0 3px rgba(255,227,108,0.5); }
.login-code {
  text-align: center;
  letter-spacing: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
}
.login-btn {
  width: 100%;
  background: var(--gelb);
  color: var(--grau);
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.login-btn:hover { transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-secondary {
  background: none;
  border: none;
  color: var(--grau);
  opacity: 0.6;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.login-hint { font-size: 14px; color: var(--grau); opacity: 0.8; line-height: 1.5; margin: 0 0 4px; text-align: center; }
.login-hint span { font-weight: 800; opacity: 1; }
.login-error { font-size: 14px; color: #a3352d; text-align: center; }

/* --- Screen 2: Chat --- */

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 2px solid var(--grau);
  flex-shrink: 0;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--grau);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.chat-header-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 17px;
}

.chat-header-sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}

.logo-v-small { width: 22px; }

/* Aktiver "Neuer Eintrag"-Button: startet sofort einen frischen Block,
   ohne auf den Zeit-Gap zu warten. */
.btn-new {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grau);
  background: var(--gelb);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.btn-new:hover { transform: translateY(-1px); }
.btn-new:active { transform: translateY(0); }

/* Dezenter Fortschritt: 3 Punkte für die 3 Kern-Leitfragen, gefüllt nach
   Anzahl beantworteter Fragen — ersetzt das frühere "Frage N"-Label im Chat. */
.progress-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.progress-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--grau);
  background: transparent;
  transition: background 0.2s ease;
}
.progress-dots span.filled { background: var(--grau); }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.msg-user {
  align-self: flex-end;
  background: var(--gruen);
  color: var(--grau);
  border-bottom-right-radius: 4px;
}

.msg-assistant {
  align-self: flex-start;
  background: var(--weiss);
  color: var(--grau);
  border: 1.5px solid var(--grau);
  border-bottom-left-radius: 4px;
}

.typing {
  align-self: flex-start;
  margin: 0 14px 6px;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--grau);
  width: fit-content;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grau);
  opacity: 0.5;
  animation: bounce 1.1s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--grau);
  flex-shrink: 0;
  background: var(--weiss);
}

#chat-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grau);
  background: var(--weiss);
  border: 1.5px solid var(--grau);
  border-radius: var(--radius);
  padding: 11px 15px;
  resize: none;
  max-height: 120px;
  outline: none;
}

/* Schriftgröße-Stufen (per Umschalter). Skaliert die Lese-Elemente von Chat
   und Namensauswahl — Layout bleibt gleich, nur die Textgröße wächst. */
body.fs-l .msg { font-size: 18.5px; }
body.fs-l #chat-input { font-size: 18px; }
body.fs-l .chat-header-name { font-size: 19px; }
body.fs-l .brand-subtitle { font-size: 17px; }
body.fs-l .name-btn { font-size: 19px; }

body.fs-xl .msg { font-size: 21px; }
body.fs-xl #chat-input { font-size: 20px; }
body.fs-xl .chat-header-name { font-size: 21px; }
body.fs-xl .brand-subtitle { font-size: 19px; }
body.fs-xl .name-btn { font-size: 21px; }

#chat-input:focus { border-color: var(--gelb); box-shadow: 0 0 0 3px rgba(255,227,108,0.5); }

/* Schriftgröße-Umschalter (an der Stelle des früheren Mikrofons). Zykliert
   normal → groß → sehr groß. Das "A" wächst mit der aktuellen Stufe mit. */
.btn-fontsize {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--grau);
  background: var(--weiss);
  color: var(--grau);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.btn-fontsize:active { transform: scale(0.95); }
body.fs-l .btn-fontsize { font-size: 19px; }
body.fs-xl .btn-fontsize { font-size: 22px; }

.btn-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gelb);
  color: var(--grau);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-send:disabled { opacity: 0.4; cursor: default; }

/* Ab hier: großer Bildschirm. Der Chat bleibt eine schmale, lesbare Spalte, aber
   damit er auf einem breiten Monitor nicht "verloren" in viel Weißraum wirkt,
   bekommt die Seite einen sanften Hintergrund und der Inhalt eine sichtbare Karte
   mit Schatten statt nur einem dünnen Rahmen. */
/* Ab hier: großer Bildschirm. Die zufällige body-Vollfarbe bleibt der Hintergrund.
   Nur der Chat wird zur weißen Karte; der Picker zeigt die Vollfarbe und trägt
   seine weiße Box (.picker-card) selbst. */
@media (min-width: 700px) {
  #app {
    height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
  }

  .screen-chat {
    height: auto;
    max-height: calc(100dvh - 72px);
    width: 100%;
    max-width: 640px;
    background: var(--weiss);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(40, 57, 65, 0.16);
    overflow: hidden;
  }

  .picker-card {
    max-width: 460px;
    padding: 44px 40px;
    box-shadow: 0 24px 60px rgba(40, 57, 65, 0.16);
  }

  .brand-title { font-size: clamp(32px, 3.2vw, 48px); }
  .logo-wordmark { width: 200px; }

  .chat-header { padding: 18px 26px; }
  .messages { padding: 22px 26px; gap: 12px; }
  .chat-input-row { padding: 16px 26px calc(16px + env(safe-area-inset-bottom)); }
  .msg { font-size: 15.5px; }
}

@media (min-width: 1200px) {
  .screen-chat { max-width: 700px; }
  .msg { font-size: 16px; }
}

/* --- Screen 1.5: Persönliche Übersicht (Einstiegsseite) ---
   Ruhiger Sandgrund, weiße Karten, klar durch Abstand getrennt — keine Outlines
   (Rahmenlinien), wie auf verdino.com. Kopf trägt die Farbe der Person. */
.screen-overview { background: #F5F3EE; }

.ov-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
}

.ov-head {
  border-radius: 20px;
  padding: 18px 20px;
  background: var(--gelb);
}
.ov-head[data-accent="gelb"]    { background: var(--gelb); }
.ov-head[data-accent="gruen"]   { background: var(--gruen); }
.ov-head[data-accent="blau"]    { background: var(--blau); }
.ov-head[data-accent="rosa"]    { background: var(--rosa); }
.ov-head[data-accent="violett"] { background: var(--violett); }

.ov-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--grau);
  opacity: 0.65;
}
.ov-hello {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--grau);
  margin-top: 4px;
}
.ov-greeting { margin: 3px 0 0; font-size: 14px; color: var(--grau); opacity: 0.72; }

.ov-tiles { display: flex; gap: 10px; margin-top: 14px; }
.ov-tile {
  flex: 1;
  background: var(--weiss);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(40, 57, 65, 0.07);
}
.ov-tile-label { font-size: 12px; font-weight: 700; color: #6a7b82; }
.ov-tile-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--grau);
}
.ov-check { color: #3b9c6e; }
.ov-tile-sub { font-size: 12px; color: #8a5a00; font-weight: 700; }
.ov-tile-link {
  align-self: flex-start;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #1c6f7a;
  cursor: pointer;
}

.ov-cta {
  width: 100%;
  margin-top: 12px;
  background: var(--gelb);
  color: var(--grau);
  border: none;
  border-radius: 16px;
  padding: 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.ov-cta:hover { transform: translateY(-1px); }
.ov-cta:active { transform: translateY(0); }

/* Info-Umschalter "Was ist eine Session?" unter dem Haupt-Button */
.ov-info-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 10px auto 0;
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #1c6f7a;
  cursor: pointer;
}
.ov-info-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #1c6f7a;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}
.ov-info {
  margin: 10px 0 0;
  background: #F5F3EE;
  border-radius: 14px;
  padding: 14px 16px;
}
.ov-info p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #41555e; }
.ov-info p:last-child { margin-bottom: 0; }
body.fs-l .ov-info p { font-size: 16px; }
body.fs-xl .ov-info p { font-size: 18px; }

.ov-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ov-card {
  background: var(--weiss);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(40, 57, 65, 0.07);
}
.ov-card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--grau);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ov-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ov-dot-blau  { background: #5ab6d6; }
.ov-dot-gelb  { background: #f0b400; }
.ov-dot-gruen { background: #59b56a; }
.ov-dot-rosa  { background: #e56b98; }
.ov-card-text { margin: 0; font-size: 15px; line-height: 1.55; color: #41555e; }
.ov-muted { opacity: 0.7; }

.ov-list { margin: 0; padding: 0; list-style: none; }
.ov-list li {
  font-size: 15px;
  line-height: 1.5;
  color: #41555e;
  padding: 5px 0 5px 18px;
  position: relative;
}
.ov-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grau);
  opacity: 0.35;
}
.ov-list li.ov-more { display: none; }
.ov-list.expanded li.ov-more { display: block; }
.ov-toggle {
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #1c6f7a;
  cursor: pointer;
}
.ov-card-muted p { margin: 0; font-size: 15px; color: #41555e; line-height: 1.5; }

/* Eigene Ergänzung/Korrektur pro Kachel */
.ov-notes { margin-top: 10px; }
.ov-note {
  background: #F5F3EE;
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #41555e;
}
.ov-note-label { font-weight: 800; color: var(--grau); }
.ov-note-date { font-weight: 800; color: #8a8570; font-size: 12px; }
.ov-add {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #1c6f7a;
  cursor: pointer;
}
.ov-note-form { margin-top: 4px; }
.ov-note-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--grau);
  background: var(--weiss);
  border: 1.5px solid var(--grau);
  border-radius: 12px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.ov-note-input:focus { border-color: var(--gelb); box-shadow: 0 0 0 3px rgba(255,227,108,0.5); }
.ov-note-actions { display: flex; gap: 8px; margin-top: 8px; }
.ov-note-save {
  background: var(--gelb);
  color: var(--grau);
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.ov-note-save:disabled { opacity: 0.5; cursor: default; }
.ov-note-cancel {
  background: none;
  border: none;
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grau);
  opacity: 0.6;
  cursor: pointer;
}
.ov-note-error { margin-top: 6px; font-size: 13px; color: #a3352d; }
body.fs-l .ov-note, body.fs-xl .ov-note { font-size: 16px; }

.ov-foot {
  text-align: center;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #b3aa93;
}
.ov-switch {
  display: block;
  margin: 12px auto 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grau);
  opacity: 0.55;
  cursor: pointer;
  text-decoration: underline;
}

/* Schriftgröße-Stufen greifen auch auf der Übersicht (bleibt über body-Klasse
   erhalten, sobald sie im Chat gesetzt wurde). */
body.fs-l .ov-card-text,
body.fs-l .ov-list li,
body.fs-l .ov-card-muted p { font-size: 17px; }
body.fs-l .ov-hello { font-size: 27px; }
body.fs-xl .ov-card-text,
body.fs-xl .ov-list li,
body.fs-xl .ov-card-muted p { font-size: 19px; }
body.fs-xl .ov-hello { font-size: 30px; }

@media (min-width: 700px) {
  .screen-overview {
    height: auto;
    max-height: calc(100dvh - 72px);
    width: 100%;
    max-width: 560px;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(40, 57, 65, 0.16);
    overflow: hidden;
  }
  .ov-scroll { padding: 22px 24px calc(24px + env(safe-area-inset-bottom)); }
}

/* ===================================================================
   myAIDino (dunkler persönlicher Modus) + Leads-+-Needs-Board (hell)
   + Eck-Laschen zum Wechseln + Session-(i)
   =================================================================== */

.screen-overview, .screen-board { position: relative; }

/* Platz oben für die Ecke-Lasche */
.ov-scroll, .bd-scroll { padding-top: 46px; }

/* Eck-Lasche */
.corner-tab {
  position: absolute;
  top: 10px;
  z-index: 6;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.12s ease;
}
.corner-tab:active { transform: scale(0.96); }
.corner-tab-right { right: 12px; background: var(--gelb); color: var(--grau); }
.corner-tab-left  { left: 12px; background: var(--grau); color: #fff; }

/* --- Dunkler myAIDino-Modus --- */
.screen-overview { background: var(--grau); }
.screen-overview .ov-tile { background: #32454e; box-shadow: none; }
.screen-overview .ov-tile-label { color: #9fb0b6; }
.screen-overview .ov-tile-value { color: #eef3f4; }
.screen-overview .ov-tile-sub { color: #f0c674; }
.screen-overview .ov-tile-link { color: #6fb8c9; }
.screen-overview .ov-check { color: #7fd6a0; }
.screen-overview .ov-card { background: #32454e; box-shadow: none; }
.screen-overview .ov-card-title { color: #eef3f4; }
.screen-overview .ov-card-text { color: #c4d0d4; }
.screen-overview .ov-muted { color: #9fb0b6; }
.screen-overview .ov-list li { color: #c4d0d4; }
.screen-overview .ov-list li:before { background: #eef3f4; opacity: 0.45; }
.screen-overview .ov-toggle, .screen-overview .ov-add { color: #6fb8c9; }
.screen-overview .ov-card-muted p { color: #c4d0d4; }
.screen-overview .ov-note { background: #283941; color: #c4d0d4; }
.screen-overview .ov-note-label { color: #eef3f4; }
.screen-overview .ov-foot { color: #5f7178; }
.screen-overview .ov-switch { color: #9fb0b6; }
.screen-overview .ov-info { background: #32454e; }
.screen-overview .ov-info p { color: #c4d0d4; }

/* Session-(i) im Tile-Label */
.ov-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 5px;
  border: 1.5px solid #9fb0b6;
  background: transparent;
  color: #9fb0b6;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

/* Seiten-Punkte */
.ov-pager { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.ov-pager span { width: 8px; height: 8px; border-radius: 50%; }
.screen-overview .ov-pager span { background: #4a5c64; }
.screen-overview .ov-pager span.on { background: var(--blau); }
.screen-board .ov-pager span { background: #c9c1ad; }
.screen-board .ov-pager span.on { background: var(--grau); }

/* --- Leads + Needs Board (hell) --- */
.screen-board { background: #F5F3EE; }
.bd-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 46px 16px calc(22px + env(safe-area-inset-bottom));
}
.bd-head { border-radius: 20px; padding: 18px 20px; background: var(--violett); }
.bd-brand { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 2px; color: #4b3a7a; opacity: 0.8; }
.bd-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--grau); margin-top: 4px; }
.bd-greeting { margin: 3px 0 0; font-size: 14px; color: #4b3a7a; }

.bd-card { background: var(--weiss); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(40,57,65,0.07); margin-top: 12px; }
.bd-h { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--grau); display: flex; align-items: center; gap: 8px; }
.bd-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.bd-dot-lead { background: #59b56a; }
.bd-dot-need { background: #e56b98; }
.bd-sub { margin: 0 0 6px; font-size: 12px; color: #6a7b82; }

.bd-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #efece4; }
.bd-item:first-child { border-top: 0; }
.bd-itxt { flex: 1; font-size: 14px; line-height: 1.45; color: #31424a; }
.bd-who { font-size: 12px; font-weight: 800; color: #8a5a00; }
.bd-mine-tag { font-size: 11px; font-weight: 800; color: #1c6f7a; }
.bd-act {
  flex: 0 0 auto; font-family: var(--font-body); font-size: 12px; font-weight: 800;
  border: 1.5px solid var(--grau); background: #fff; color: var(--grau);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.bd-check {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid #b8c0c4; background: #fff;
  flex: 0 0 auto; margin-top: 1px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800;
}
.bd-check.done { background: #59b56a; border-color: #59b56a; }
.bd-add { margin-top: 8px; background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 800; color: #1c6f7a; cursor: pointer; }
.bd-empty { font-size: 14px; color: #9aa4a8; padding: 6px 0; }

/* KI-Vorschläge */
.bd-suggest { background: #EDE7FA; border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.bd-suggest-h { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #4b3a7a; margin: 0 0 4px; }
.bd-sug-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid #ddd2f2; }
.bd-sug-item:first-of-type { border-top: 0; }
.bd-sug-txt { flex: 1; font-size: 13.5px; line-height: 1.4; color: #3a2f5c; }
.bd-sug-tag { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; color: #6a5a9a; margin-bottom: 2px; }
.bd-mini { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.bd-mini.take { color: #1c6f7a; }
.bd-mini.skip { color: #9aa1a4; margin-left: 8px; }

/* Eingabe-Formular fürs Hinzufügen */
.bd-form { margin-top: 8px; }
.bd-input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--grau);
  background: #fff; border: 1.5px solid var(--grau); border-radius: 12px; padding: 10px 12px; resize: vertical; outline: none;
}
.bd-input:focus { border-color: var(--gelb); box-shadow: 0 0 0 3px rgba(255,227,108,0.5); }
.bd-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.bd-save { background: var(--gelb); color: var(--grau); border: none; border-radius: 999px; padding: 7px 16px; font-family: var(--font-body); font-weight: 800; font-size: 13px; cursor: pointer; }
.bd-cancel { background: none; border: none; font-size: 13px; color: var(--grau); opacity: 0.6; cursor: pointer; }
.bd-foot { text-align: center; margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.5px; color: #b3aa93; }

body.fs-l .bd-itxt, body.fs-l .bd-sug-txt { font-size: 16px; }
body.fs-xl .bd-itxt, body.fs-xl .bd-sug-txt { font-size: 18px; }

@media (min-width: 700px) {
  .screen-board {
    height: auto;
    max-height: calc(100dvh - 72px);
    width: 100%;
    max-width: 560px;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(40, 57, 65, 0.16);
    overflow: hidden;
  }
}

/* ===== Feedback-Runde: Header-Nav-Tab, CTA-(i), Board blau, Ausblenden, Desktop ===== */

.ov-head, .bd-head { display: flex; flex-direction: column; }
.mode-tab {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(40, 57, 65, 0.12); color: var(--grau);
  border: none; border-radius: 999px;
  font-family: var(--font-body); font-weight: 800; font-size: 13px;
  padding: 6px 13px; cursor: pointer; margin-bottom: 12px;
  transition: transform 0.12s ease, background 0.12s ease;
}
.mode-tab:hover { background: rgba(40, 57, 65, 0.18); }
.mode-tab:active { transform: scale(0.97); }
.mode-tab-l { align-self: flex-start; }
.mode-tab-r { align-self: flex-end; }

/* Lasche ist jetzt im Header → oben kein reservierter Platz mehr */
.ov-scroll, .bd-scroll { padding-top: 16px; }

/* Session-(i) direkt neben "Neue Session starten" */
.ov-cta-row { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.ov-cta-row .ov-cta { flex: 1; margin-top: 0; }
.ov-cta-i {
  flex: 0 0 auto; width: 50px; border-radius: 16px;
  background: #32454e; color: #9fb0b6; border: none;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; cursor: pointer;
}
.ov-cta-i:active { transform: scale(0.96); }

/* Board: gleiche Highlight-Farbe wie myAIDino (blau), heller Hintergrund */
.bd-head { background: var(--blau); }
.bd-brand { color: #1c5f6a; }
.bd-title { color: var(--grau); }
.bd-greeting { color: #2f5f68; }
.bd-suggest { background: #E1F0FB; }
.bd-suggest-h { color: #1c5f6a; }
.bd-sug-txt { color: #29424a; }
.bd-sug-tag { color: #3a7a8a; }
.bd-sug-item { border-top-color: #cfe3f2; }

/* Listenpunkt mit Ausblenden-× */
.ov-list li { display: flex; align-items: flex-start; gap: 8px; }
.ov-li-txt { flex: 1; }
.ov-x { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; color: #7f9299; }
.ov-x:hover { color: #e56b98; }

/* Desktop: oben andocken statt vertikal zentrieren → Karte bleibt oben buendig und waechst nach unten (kein Sprung). */
@media (min-width: 700px) {
  #app { justify-content: flex-start; }
}

/* ===== Vertikale Seiten-Lasche (Modus-Wechsel) — Farbe zeigt das Ziel ===== */
.side-tab {
  position: absolute; top: 16px; z-index: 7;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.4px;
  border: none; cursor: pointer; padding: 22px 11px;
  box-shadow: 0 4px 14px rgba(40, 57, 65, 0.25);
}
.side-tab:active { transform: scale(0.97); }
/* Oben bündig mit dem ersten Block, Oberkante eckig (mehr Dynamik),
   nur die untere innere Ecke gerundet. */
.side-tab-right { right: 0; border-radius: 0 0 0 16px; background: #F5F3EE; color: var(--grau); }
.side-tab-left  { left: 0;  border-radius: 0 0 16px 0; background: var(--grau); color: #eef3f4; }
/* Platz am Rand freihalten, damit die Lasche keine Inhalte/× überdeckt */
.screen-overview .ov-scroll { padding-right: 30px; }
.screen-board .bd-scroll { padding-left: 30px; }

/* ===== Schriftgröße-Wähler im Header (klein / mittel=Standard / groß) ===== */
.fs-switch { display: inline-flex; align-items: baseline; gap: 2px; margin-bottom: 12px; }
.fs-a {
  border: none; background: transparent; cursor: pointer; border-radius: 8px;
  font-family: var(--font-display); font-weight: 800; color: var(--grau);
  line-height: 1; padding: 5px 9px; opacity: 0.45;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.fs-a.on { opacity: 1; background: rgba(40, 57, 65, 0.12); }

/* Neue GROSSE Stufe (fs-xxl) — über der bisherigen größten */
body.fs-xxl .msg { font-size: 24px; }
body.fs-xxl #chat-input { font-size: 22px; }
body.fs-xxl .chat-header-name { font-size: 23px; }
body.fs-xxl .brand-subtitle { font-size: 21px; }
body.fs-xxl .ov-card-text, body.fs-xxl .ov-list li, body.fs-xxl .ov-card-muted p { font-size: 22px; }
body.fs-xxl .ov-hello { font-size: 33px; }
body.fs-xxl .ov-info p { font-size: 20px; }
body.fs-xxl .ov-note { font-size: 18px; }
body.fs-xxl .bd-itxt, body.fs-xxl .bd-sug-txt { font-size: 21px; }

/* Vorschlag-Icons ✓ / × etwas größer */
.bd-mini { font-size: 17px; padding: 2px 5px; line-height: 1; }
.bd-mini.take { color: #1c8a5a; }

/* Reihenfolge-Pfeile (Priorisierung) in den Listen */
.ov-ctr { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.ov-move { background: none; border: none; cursor: pointer; color: #7f9299; font-size: 14px; line-height: 1; padding: 0 2px; }
.ov-move:hover { color: #eef3f4; }
.ov-move:disabled { opacity: 0.25; cursor: default; }

/* Aufgeklappte Listenpunkte als Flex (sonst brechen Text + Pfeile um) */
.ov-list.expanded li.ov-more { display: flex; }

/* === Lasche sauber am Block andocken (statt im Rand zu schweben) === */
/* Weniger Rand-Abstand → die Lasche überlappt die leere Ecke des Kopf-Blocks
   und wirkt dadurch angedockt (kein dunkler Spalt mehr). */
.screen-overview .ov-scroll { padding-right: 16px; }
.screen-board .bd-scroll { padding-left: 16px; }
/* Auf dem Board sitzt die Lasche links → Kopf-Inhalt links einrücken, damit der
   Titel frei bleibt, und Schriftwähler nach rechts. */
.bd-head { padding-left: 46px; }
.bd-head .fs-switch { align-self: flex-end; }
/* Weicherer, sauberer Schatten */
.side-tab { box-shadow: -3px 3px 10px rgba(40, 57, 65, 0.16); }
.side-tab-left { box-shadow: 3px 3px 10px rgba(40, 57, 65, 0.16); }

/* ============================================================
   Register-Lasche v2: schaut HINTER dem Kopf-Block hervor
   (Kopf liegt drüber und deckt die innere Kante ab)
   ============================================================ */
.head-dock { position: relative; }
.screen-overview .head-dock { margin-right: 14px; }  /* Raum rechts, in den die Lasche hervorschaut */
.screen-board .head-dock { margin-left: 14px; }       /* Raum links */

.side-tab {
  position: absolute;
  top: 12px;
  z-index: 0;                       /* HINTER dem Kopf (z-index 1) */
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.4px;
  border: none; cursor: pointer;
  padding: 20px 13px;
}
.side-tab:active { transform: scale(0.98); }
.side-tab-right {
  right: -26px; left: auto;
  border-radius: 0 16px 16px 0;     /* außen (rechts) rund, innen (unter Kopf) eckig */
  background: #F5F3EE; color: var(--grau);
  box-shadow: 4px 3px 10px rgba(40, 57, 65, 0.13);
}
.side-tab-left {
  left: -26px; right: auto;
  border-radius: 16px 0 0 16px;     /* außen (links) rund */
  background: var(--grau); color: #eef3f4;
  box-shadow: -4px 3px 10px rgba(40, 57, 65, 0.13);
}
/* Kopf-Block deckt die innere Kante der Lasche ab → Register-Effekt */
.ov-head, .bd-head { position: relative; z-index: 1; }

/* frühere Sonder-Anpassungen zurücknehmen (nicht mehr nötig) */
.screen-overview .ov-scroll { padding-right: 16px; }
.screen-board .bd-scroll { padding-left: 16px; }
.bd-head { padding-left: 20px; }
.bd-head .fs-switch { align-self: flex-start; }

/* Feinjustierung: Lasche weiter herausschauen lassen (Text ganz lesbar) */
.screen-overview .head-dock { margin-right: 18px; }
.screen-board .head-dock { margin-left: 18px; }
.side-tab { top: 12px; font-size: 14px; padding: 18px 12px; z-index: 5; }
.side-tab-right { right: -32px; }
.side-tab-left { left: -32px; }
.ov-head, .bd-head { z-index: 6; }

/* ================= Polish-Pass: Animationen, Micro-Interactions, Skeletons ================= */

@keyframes slideInRight { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInLeft  { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cardIn       { from { transform: translateY(9px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeSlideDown{ from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmerMove  { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* 1. Modus-Wechsel: Screen gleitet seitlich rein */
.anim-in-right { animation: slideInRight 0.30s cubic-bezier(0.22, 0.61, 0.36, 1); }
.anim-in-left  { animation: slideInLeft  0.30s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* 2. Micro-Interactions */
.ov-cards .ov-card, .bd-card, .bd-suggest:not(.hidden) { animation: cardIn 0.34s ease backwards; }
.ov-cards .ov-card:nth-child(2) { animation-delay: 0.04s; }
.ov-cards .ov-card:nth-child(3) { animation-delay: 0.08s; }
.ov-cards .ov-card:nth-child(4) { animation-delay: 0.12s; }
.ov-cards .ov-card:nth-child(5) { animation-delay: 0.16s; }
.bd-card:nth-child(3) { animation-delay: 0.05s; }
.ov-info:not(.hidden) { animation: fadeSlideDown 0.24s ease; }
.ov-note-form, .bd-form { animation: fadeSlideDown 0.22s ease; }
.bd-item, .ov-note { animation: fadeSlideDown 0.2s ease; }

.bd-act, .ov-cta-i, .fs-a, .bd-save, .ov-x, .ov-move, .bd-mini, .bd-add, .ov-add, .ov-toggle, .side-tab, .btn-new, .btn-send {
  transition: transform 0.11s ease, background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}
.bd-act:active, .ov-cta-i:active, .fs-a:active, .bd-save:active, .ov-move:active, .ov-x:active, .bd-mini:active { transform: scale(0.92); }

/* Ruhige Standard-Übergänge für die Modus-Screens (nur transform/opacity) */
.side-tab, .ov-cta, .login-btn, .bd-save, .ov-tile, .ov-card, .bd-card { will-change: auto; }

/* 3. Skeleton-Ladezustände (Shimmer) */
.skel { position: relative; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.07); }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); animation: shimmerMove 1.4s ease-in-out infinite; }
.skel-title { height: 14px; width: 42%; margin-bottom: 13px; }
.skel-line { height: 12px; width: 92%; margin-bottom: 9px; }
.skel-line.short { width: 58%; margin-bottom: 0; }
/* Heller Kontext (Board) → dunkler Shimmer */
.screen-board .skel { background: rgba(40, 57, 65, 0.09); }
.screen-board .skel::after { background: linear-gradient(90deg, transparent, rgba(40, 57, 65, 0.10), transparent); }
.skel-card { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-in-right, .anim-in-left, .ov-cards .ov-card, .bd-card, .ov-info:not(.hidden), .ov-note-form, .bd-form, .bd-item, .ov-note, .bd-suggest:not(.hidden) { animation: none; }
  .skel::after { animation: none; }
}

/* ===== Schrift-Wähler: ein „A" oben rechts in der Kopf-Box, klappt nach links aus ===== */
.fs-switch { position: absolute; top: 12px; right: 12px; z-index: 7; display: flex; align-items: center; gap: 4px; margin: 0; }
.fs-opts { display: flex; align-items: center; gap: 2px; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.30s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease; }
.fs-switch.fs-open .fs-opts { max-width: 130px; opacity: 1; }
.fs-opts .fs-a { padding: 4px 6px; }
.fs-opts .fs-a:nth-child(1) { font-size: 13px; }
.fs-opts .fs-a:nth-child(2) { font-size: 16px; }
.fs-opts .fs-a:nth-child(3) { font-size: 19px; }
.fs-toggle {
  border: none; cursor: pointer; border-radius: 9px;
  background: rgba(40, 57, 65, 0.13); color: var(--grau);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
  padding: 6px 10px; transition: transform 0.11s ease, background 0.14s ease;
}
.fs-switch.fs-open .fs-toggle { background: rgba(40, 57, 65, 0.22); }
.fs-toggle:active { transform: scale(0.93); }

/* ===== Session-Block einheitlich gelb/hell: (i) gelb + Info-Box hellgelb, dunkle Schrift ===== */
.ov-cta-i { background: var(--gelb); color: var(--grau); }
.ov-cta-i:active { transform: scale(0.95); }
.screen-overview .ov-info { background: #FBF3C9; }
.screen-overview .ov-info p { color: var(--grau); }

/* ===== 5. Lasche: kleine Peek-Bewegung beim Screen-Wechsel ===== */
@keyframes tabPeekR { 0% { transform: translateX(-15px); } 62% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes tabPeekL { 0% { transform: translateX(15px); } 62% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
.side-tab-right { animation: tabPeekR 0.5s cubic-bezier(0.34, 1.3, 0.5, 1) 0.1s backwards; }
.side-tab-left  { animation: tabPeekL 0.5s cubic-bezier(0.34, 1.3, 0.5, 1) 0.1s backwards; }
@media (prefers-reduced-motion: reduce) { .side-tab-right, .side-tab-left { animation: none; } }

/* Beim Ausklappen nur die 3 Größen zeigen (Toggle-A ausblenden) */
.fs-switch.fs-open .fs-toggle { display: none; }
.fs-switch.fs-open { background: rgba(40,57,65,0.10); border-radius: 10px; padding: 0 2px; }

/* ===== (i) sitzt in der Ecke des gelben Session-Buttons — genau wie das (A) in der blauen Box ===== */
.ov-cta-wrap { position: relative; margin-top: 14px; }
.ov-cta-wrap .ov-cta { width: 100%; margin-top: 0; }
.ov-cta-i {
  position: absolute; top: 9px; right: 10px; z-index: 2;
  width: auto; border: none; cursor: pointer; border-radius: 9px;
  background: rgba(40, 57, 65, 0.13); color: var(--grau);
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1;
  padding: 5px 9px; transition: transform 0.11s ease, background 0.14s ease;
}
.ov-cta-i:hover { background: rgba(40, 57, 65, 0.20); }
.ov-cta-i:active { transform: scale(0.93); }

/* ===== 4. Typo- & Abstands-Feinschliff: ruhiger, edler Rhythmus ===== */
.ov-cards { gap: 12px; margin-top: 16px; }
.ov-card { padding: 16px 18px; }
.ov-card-title { margin: 0 0 10px; letter-spacing: 0.2px; }
.ov-card-text { line-height: 1.62; }
.ov-list li { padding: 6px 0 6px 18px; line-height: 1.55; }
.ov-list li:before { top: 13px; }
.ov-tiles { gap: 12px; }
.ov-tile { padding: 13px 15px; }
.ov-hello { margin-top: 5px; letter-spacing: -0.01em; }
.ov-greeting { margin-top: 4px; }
.ov-info { padding: 15px 17px; }
.ov-info p { line-height: 1.6; margin-bottom: 9px; }
.bd-card { padding: 16px 18px; margin-top: 12px; }
.bd-item { padding: 10px 0; }
.bd-itxt { line-height: 1.5; }
.bd-head, .ov-head { padding: 18px 20px 17px; }
/* Dunkelmodus: etwas mehr Kontrast bei Fließtext */
.screen-overview .ov-card-text { color: #cdd8dc; }
.screen-overview .ov-list li { color: #cdd8dc; }

/* ===== Laschen bündig: beide Header gleich hoch, Lasche exakt so hoch wie der Kopf-Block ===== */
.ov-head, .bd-head { min-height: 150px; box-sizing: border-box; justify-content: center; }
.side-tab {
  top: 0; height: 100%;
  padding: 0 12px;
  display: grid; place-items: center;
  font-size: 12px; letter-spacing: 0.5px;
}

/* ===== Laschen: herausragende Außenecken abrunden (nicht mehr eckig) ===== */
.side-tab-right { border-radius: 0 14px 14px 0; }  /* rechts raus → rechte Ecken rund */
.side-tab-left  { border-radius: 14px 0 0 14px; }  /* links raus  → linke Ecken rund  */

/* ===== Innere Laschen-Ecken: tiefer unter den gerundeten Header schieben,
   damit keine eckige "Schulter" im Header-Eck stehen bleibt (wirkte wie "zu kurz").
   Zusätzliches Padding auf der INNEN-Seite = mehr Überlappung; alle Ecken rund. ===== */
.side-tab-right { border-radius: 16px; padding-left: 26px; padding-right: 12px; }
.side-tab-left  { border-radius: 16px; padding-right: 26px; padding-left: 12px; }

/* Hashtags in der Board-Kopfzeile (aus der Fußzeile nach oben geholt) */
.bd-hashtags {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #2f5f68;
  opacity: 0.85;
}

/* ===== Lasche optisch: oben 20px absetzen, unten bündig (Höhe ist exakt gleich,
   wirkte durch den Schatten aber länger). Ergibt eine klar "hängende" Lasche. ===== */
.side-tab { top: 20px; height: calc(100% - 20px); }

/* ===== Papierkorb / Backlog (verworfene Vorschläge & ausgeblendete Punkte) ===== */

/* Board (hell) */
.bd-backlog { margin-top: 12px; }
.bd-backlog-toggle {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 2px; font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.3px; color: #8a8570;
  display: flex; align-items: center; gap: 8px;
}
.bd-backlog-toggle:hover { color: #5f5b48; }
.bd-backlog-caret { display: inline-block; font-size: 10px; width: 10px; }
.bd-backlog-body { margin-top: 4px; }
.bd-backlog-body.hidden { display: none; }
.bd-backlog-item {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 12px;
  background: rgba(40, 57, 65, 0.05);
}
.bd-backlog-item .bd-sug-txt { color: #5f6b70; font-size: 14px; }
.bd-mini.restore { color: var(--grau); }

/* myAIDino (dunkel) */
.ov-backlog { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.ov-backlog-toggle {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 4px 2px; font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.3px; color: #8ea0a6;
  display: flex; align-items: center; gap: 8px;
}
.ov-backlog-toggle:hover { color: #b9c7cc; }
.ov-backlog-caret { display: inline-block; font-size: 10px; width: 10px; }
.ov-backlog-body { margin-top: 8px; }
.ov-backlog-body.hidden { display: none; }
.ov-backlog-item {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.ov-backlog-txt { color: #cdd8dc; font-size: 14px; line-height: 1.45; }
.ov-backlog-tag {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: #9fb0b6;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.3px; vertical-align: middle;
}
.ov-backlog-restore {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06);
  color: #cdd8dc; font-size: 15px; line-height: 1;
}
.ov-backlog-restore:hover { background: rgba(255,255,255,0.12); }

/* ===== Intro-Rundgang (Coach-Marks) ===== */
.tour-overlay { position: fixed; inset: 0; z-index: 1000; }
.tour-overlay.hidden { display: none; }
.tour-hole {
  position: fixed; top: -9999px; left: -9999px; width: 0; height: 0;
  border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20, 28, 32, 0.74);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.tour-bubble {
  position: fixed; width: min(320px, calc(100vw - 24px));
  background: #F5F3EE; color: #283941; border-radius: 16px;
  padding: 16px 16px 14px; box-sizing: border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.tour-skip {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #8a8570; font-size: 12px; cursor: pointer; padding: 4px;
  font-family: var(--font-display); font-weight: 800;
}
.tour-skip:hover { color: #5f5b48; }
.tour-count {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #b08d00;
  font-family: var(--font-display); margin-bottom: 6px; padding-right: 76px;
}
.tour-title { font-size: 17px; font-weight: 800; font-family: var(--font-display); margin-bottom: 6px; line-height: 1.25; }
.tour-text { font-size: 13.5px; line-height: 1.55; color: #4a5960; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
.tour-dots { display: flex; gap: 5px; align-items: center; }
.tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: #cfc9ba; transition: width .2s, background .2s; }
.tour-dots span.on { width: 16px; border-radius: 3px; background: #283941; }
.tour-btns { display: flex; gap: 6px; align-items: center; }
.tour-back { background: none; border: none; color: #6a7880; font-size: 13px; cursor: pointer; padding: 8px 6px; font-family: var(--font-display); font-weight: 800; }
.tour-next {
  background: #283941; color: #fff; border: none; border-radius: 999px;
  font-size: 13px; font-weight: 800; cursor: pointer; padding: 9px 20px;
  font-family: var(--font-display);
}
.tour-next:active { transform: scale(0.97); }

/* Replay-Link in der Info-Box (dunkler myAIDino-Screen) */
.ov-tour-replay {
  display: inline-block; margin-top: 12px; background: none;
  border: 1px solid rgba(255, 255, 255, 0.18); color: #cdd8dc;
  border-radius: 999px; padding: 7px 14px; font-size: 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
}
.ov-tour-replay:hover { background: rgba(255, 255, 255, 0.07); }

@media (prefers-reduced-motion: reduce) {
  .tour-hole { transition: none; }
  .tour-dots span { transition: none; }
}

/* ===== Hilfe-Icon (Rundgang jederzeit starten) — oben rechts, neben dem „A“ ===== */
.fs-switch { right: 50px; }               /* „A“ nach links versetzen, „?“ bekommt die Ecke */
.help-btn {
  position: absolute; top: 12px; right: 12px; z-index: 7;
  border: none; cursor: pointer; border-radius: 9px;
  background: rgba(40, 57, 65, 0.13); color: var(--grau);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
  padding: 6px 11px; transition: transform 0.11s ease, background 0.14s ease;
}
.help-btn:hover { background: rgba(40, 57, 65, 0.20); }
.help-btn:active { transform: scale(0.93); }

/* ===== Papierkorb: endgültig löschen (neben Zurückholen) ===== */
/* Board (hell) */
.bd-backlog-actions { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.bd-mini.purge { color: #a32d2d; }
.bd-mini.purge:hover { background: rgba(163, 45, 45, 0.12); }

/* myAIDino (dunkel) */
.ov-backlog-actions { display: inline-flex; gap: 8px; align-items: center; flex: none; }
.ov-backlog-del {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(240, 149, 149, 0.28); background: rgba(226, 75, 74, 0.12);
  color: #f09595; font-size: 14px; line-height: 1;
}
.ov-backlog-del:hover { background: rgba(226, 75, 74, 0.22); }

/* ===== Ergänzungen: einklappbar + löschbar ===== */
.ov-notes-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 2px 0 6px; margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  letter-spacing: 0.2px; color: #8ea0a6;
}
.ov-notes-toggle:hover { color: #b9c7cc; }
.ov-notes-toggle.hidden { display: none; }
.ov-notes-caret { display: inline-block; font-size: 10px; width: 10px; }
.ov-notes-body.hidden { display: none; }
/* Ergänzung als Zeile mit Text + Löschen-× */
.ov-note { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.ov-note-txt { flex: 1; }
.ov-note-del {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(40,57,65,0.14); background: rgba(40,57,65,0.05);
  color: #a3352d; font-size: 15px; line-height: 1;
}
.ov-note-del:hover { background: rgba(163,45,45,0.12); }
.ov-note-del:disabled { opacity: 0.5; cursor: default; }

/* AIDino-Wünsche = drittes Board-Element (violett) */
.bd-dot-wish { background: #8b7bd8; }

/* ===== "Erledigt"-Bereich je Board-Kachel (Checkbox = erledigt, nicht weg) ===== */
.bd-done { margin-top: 8px; border-top: 1px solid #efece4; padding-top: 4px; }
.bd-done-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 6px 0;
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: #9aa4a8;
}
.bd-done-toggle:hover { color: #6f7b80; }
.bd-done-caret { display: inline-block; font-size: 10px; width: 10px; }
.bd-done-body.hidden { display: none; }
.bd-item-done { border-top: 1px solid #f3f0e9; }
.bd-item-done:first-child { border-top: 0; }
.bd-itxt-done { color: #9aa4a8; text-decoration: line-through; text-decoration-color: rgba(154,164,168,0.6); }
.bd-itxt-done .bd-who, .bd-itxt-done .bd-mine-tag { text-decoration: none; }
.bd-check-static {
  width: 18px; height: 18px; border-radius: 5px; background: #cfd6d9;
  flex: 0 0 auto; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800;
}
.bd-item-del {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(163,45,45,0.22); background: rgba(226,75,74,0.08);
  color: #a3352d; font-size: 15px; line-height: 1; align-self: center;
}
.bd-item-del:hover { background: rgba(226,75,74,0.16); }
.bd-item-del:disabled { opacity: 0.5; cursor: default; }

/* ===== Team-Nutzung (Analytics, nur Admin) ===== */
.ov-admin {
  display: block; margin: 8px auto 2px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: #cdd8dc; border-radius: 999px; padding: 8px 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
}
.ov-admin.hidden { display: none; }
.ov-admin:hover { background: rgba(255,255,255,0.1); }

.screen-analytics { background: var(--grau); position: relative; }
.an-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.an-head { padding: 6px 4px 14px; }
.an-back {
  background: rgba(255,255,255,0.08); border: none; color: #cdd8dc;
  width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; line-height: 1;
}
.an-back:hover { background: rgba(255,255,255,0.14); }
.an-export { margin: 0 0 14px; }
.an-export-btn { background: rgba(255,255,255,0.08); border: none; color: #cdd8dc; font-family: var(--font-display); font-weight: 800; font-size: 13px; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.an-export-btn:hover { background: rgba(255,255,255,0.14); }
.an-export-btn:disabled { opacity: 0.6; cursor: default; }
.an-export-note { color: #8ea0a6; font-size: 12px; margin-top: 6px; line-height: 1.5; }
.an-brand { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #fff; margin-top: 12px; letter-spacing: -0.01em; }
.an-sub { color: #8ea0a6; font-size: 13px; margin-top: 4px; line-height: 1.5; }
.an-summary { color: #cdd8dc; font-family: var(--font-display); font-weight: 800; font-size: 13px; margin: 2px 0 12px; }
.an-person { background: #32454e; border-radius: 14px; padding: 13px 15px; margin-bottom: 10px; }
.an-person-off { opacity: 0.85; }
.an-person-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.an-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }
.an-badge { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.an-badge.on { background: rgba(89,181,106,0.20); color: #8fe0a0; }
.an-badge.off { background: rgba(255,255,255,0.08); color: #9fb0b6; }
.an-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.an-stat { flex: 1; min-width: 92px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 10px; }
.an-stat-l { display: block; font-size: 11px; color: #8ea0a6; }
.an-stat-v { display: block; font-size: 15px; font-weight: 800; color: #e6eef0; margin-top: 2px; }
.an-empty { color: #9aa4a8; font-size: 14px; padding: 8px 0; }


/* =====================================================================
   AIDino 2.0, Stufe 1 (CLAUDE.md, Nachtrag 11)
   Teil A: Desktop ab 1024 px, Reiter im Kopf
   Teil B: AI-IDEAS, gebaut aus den Bausteinen von verdino-ui (Fassung 1.2),
           Werte aus verdino-farben (Fassung 1.5). Alles unter .vui, damit
           die Gestaltung von v1 unberührt bleibt. Hell, wie Leads + Needs.
   ===================================================================== */

/* ---------- Reiter ab 760 px, Menü darunter (Nachtrag 14.17) ---------- */
.reiter { display: none; }
@media (min-width: 760px) {
  .reiter:not(.hidden) {
    display: flex; gap: 6px; justify-content: center; width: 100%;
    max-width: 1180px; margin: 0 auto 12px;
  }
  .reiter button {
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.72); color: #1E2A30;
  }
  .reiter button:hover { background: #FFFFFF; }
  .reiter button[aria-pressed="true"] { background: #283941; color: #FFFFFF; }
  .reiter button:focus-visible { outline: 2px solid #1E2A30; outline-offset: 2px; }
  .screen-overview, .screen-board, .screen-ideas, .screen-analytics { max-height: calc(100dvh - 124px) !important; }
}
/* Die Laschen gibt es nicht mehr: unter 760 px wechselt das Menü die Ansicht,
   darüber die Reiter. Wischen und Seiten-Punkte bleiben. */
.screen-overview .side-tab, .screen-board .side-tab, .screen-ideas .side-tab { display: none !important; }
.screen-overview .head-dock, .screen-board .head-dock, .screen-ideas .head-dock { margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 1024px) {

  /* Breite Ansicht für die drei Hauptansichten und die Team-Nutzung */
  .screen-overview, .screen-board, .screen-ideas, .screen-analytics {
    max-width: 1180px !important;
    max-height: calc(100dvh - 124px) !important;
  }
  /* Laschen und Seiten-Punkte übernimmt am Desktop der Reiter */
  .screen-overview .side-tab, .screen-board .side-tab, .screen-ideas .side-tab { display: none; }
  .screen-overview .head-dock, .screen-board .head-dock, .screen-ideas .head-dock { margin-left: 0; margin-right: 0; }
  .screen-overview .ov-pager, .screen-board .ov-pager, .screen-ideas .ov-pager { display: none; }

  /* myAIDino: Kacheln zweispaltig */
  .ov-cards { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start; }
  .ov-scroll { padding: 26px 32px 32px !important; }

  /* Leads + Needs: drei Kacheln nebeneinander */
  .bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
  .bd-grid .bd-card { margin-top: 12px; }
  .bd-scroll { padding: 26px 32px 32px !important; }

  /* Team-Nutzung: Personen als Raster */
  .an-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
  .an-body .an-person { margin-bottom: 0; }
  .an-scroll { padding: 26px 32px 32px !important; }

  /* Chat: lesbare Spalte */
  .screen-chat { max-width: 760px; }
}

/* ---------- AI-IDEAS: Tokens (verdino-ui, helle Ansicht) ---------- */
.vui {
  --v-text: #1E2A30; --v-akzent: #FFFF00;
  --v-n-pale: #F9F9F9; --v-n-light: #F2F2F2; --v-n: #E6E6E6; --v-n-strong: #8C9599;
  --v-grund: #F2F2F2; --v-flaeche: #FFFFFF; --v-linie: #E6E6E6;
  --v-ink: #1E2A30; --v-leise: #69777E; --v-onfill: #1E2A30;
  --v-r-gross: 22px; --v-r-feld: 14px; --v-r-zeile: 8px; --v-r-marke: 10px; --v-r-pille: 999px;
  --v-lasche: 14px;
  color: var(--v-ink);
}
.vui .v-green  {--c:#B5FFB2;--c-dark:#2B5B2B;--c-strong:#55A454;--c-light:#DAFFD9;--c-pale:#EFFFEF}
.vui .v-cyan   {--c:#ACEFEE;--c-dark:#2C5757;--c-strong:#579F9F;--c-light:#D7F6F6;--c-pale:#EEFBFB}
.vui .v-blue   {--c:#95D4FA;--c-dark:#2C556C;--c-strong:#559BC2;--c-light:#CEE9FC;--c-pale:#EAF5FE}
.vui .v-violet, .vui.v-violet {--c:#D5BFFF;--c-dark:#64399D;--c-strong:#A583DC;--c-light:#E9DFFF;--c-pale:#F5F1FF}
.vui .v-peach  {--c:#FABB90;--c-dark:#704729;--c-strong:#C98351;--c-light:#FCDDCC;--c-pale:#FEF0EA}
.vui .v-yellow {--c:#FFE36C;--c-dark:#5A5029;--c-strong:#A39351;--c-light:#FFF0C1;--c-pale:#FFF8E6}
.vui .v-rose   {--c:#FFC5DF;--c-dark:#84335E;--c-strong:#E06BA8;--c-light:#FFE2EE;--c-pale:#FFF2F8}
.vui .v-grau   {--c:#E6E6E6;--c-dark:#283941;--c-strong:#8C9599;--c-light:#F2F2F2;--c-pale:#F9F9F9}
.vui .v-green, .vui .v-cyan, .vui .v-blue, .vui .v-violet, .vui.v-violet, .vui .v-peach, .vui .v-yellow, .vui .v-rose, .vui .v-grau {
  --ton: var(--c-dark); --tonbg: var(--c-light); --flach: var(--c-pale);
  --voll: var(--c-dark); --vollink: #FFFFFF; --chip: var(--c-light); --chipink: var(--c-dark); --bar: var(--c-strong);
}

/* ---------- AI-IDEAS: Ansicht ---------- */
.screen-ideas { background: #F2F2F2; position: relative; }
.screen-ideas .head-dock { margin-left: 18px; }
@media (min-width: 700px) {
  .screen-ideas {
    height: auto; max-height: calc(100dvh - 72px); width: 100%; max-width: 560px;
    border-radius: 28px; box-shadow: 0 24px 60px rgba(40, 57, 65, 0.16); overflow: hidden;
  }
}
.id-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%;
  padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .id-scroll { padding: 26px 32px 32px; } }
.id-head { position: relative; z-index: 6; border-radius: 20px; padding: 18px 20px; background: #D5BFFF; display: flex; flex-direction: column; }
.id-head .fs-switch { align-self: flex-start; }
.id-brand { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 2px; color: #1E2A30; opacity: 0.75; }
.id-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #1E2A30; margin-top: 4px; }
.id-greeting { margin: 3px 0 0; font-size: 14px; color: #1E2A30; line-height: 1.5; }
.screen-ideas .ov-pager span { background: #c9c1ad; }
.screen-ideas .ov-pager span.on { background: var(--grau); }

.vui .v-band { background: var(--flach, var(--v-n-pale)); border-radius: var(--v-r-feld); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 12px; font-size: 14px; }
.vui .v-band b { font-family: var(--font-display); font-weight: 800; }
.vui .v-karte { background: var(--v-flaeche); border-radius: var(--v-r-gross); padding: 18px 20px; margin-top: 12px; }
.vui .v-text { font-size: 15px; line-height: 1.6; margin: 0; }
.vui .v-meta { font-size: 12.5px; color: var(--v-leise); line-height: 1.5; }
.vui .v-h2 { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 22px 4px 4px; }
.vui .v-h2-sub { font-size: 13.5px; color: var(--v-leise); margin: 0 4px 8px; line-height: 1.5; }

.vui .v-liste { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) {
  .vui .v-liste.v-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
}
.vui .v-zeile { position: relative; overflow: hidden; border-radius: var(--v-r-zeile); background: var(--v-flaeche); padding: 14px 16px 14px 26px; }
.vui .v-zeile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v-lasche); background: var(--bar, var(--v-n)); }
.vui .v-zeile.v-laut { background: var(--tonbg); }
.vui .v-zeile.v-laut::before { background: var(--voll); }
.vui .v-zeile.v-mittel { background: var(--flach); }
.vui .v-zeile.v-aus { background: var(--v-n-pale); }
.vui .v-zeile.v-aus::before { background: var(--v-n-strong); }
.vui .v-zeile-kopf { display: flex; align-items: flex-start; gap: 10px; }
.vui .v-titel { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.35; }
.vui .v-kenn { font-family: var(--font-display); font-weight: 800; color: var(--ton); margin-right: 6px; }

.vui .v-marke { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; font-family: var(--font-display); padding: 3px 9px; border-radius: var(--v-r-marke); background: var(--v-n); color: var(--v-ink); white-space: nowrap; }
.vui .v-marke.v-leise { background: var(--v-n-light); color: var(--v-leise); }
.vui .v-marke.v-ton { background: var(--tonbg); color: var(--ton); }

.vui .v-btn { font-family: var(--font-body); font-size: 13px; font-weight: 800; padding: 7px 15px; border: 0; border-radius: var(--v-r-pille); background: var(--v-n-light); color: var(--v-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vui .v-btn:hover { background: var(--v-n); }
.vui .v-btn.v-prim { background: var(--v-ink); color: #FFFFFF; }
.vui .v-btn:disabled { opacity: 0.5; cursor: default; }
.vui .v-link { background: none; border: 0; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 800; color: var(--ton, #2C556C); cursor: pointer; }
.vui .v-link:hover { text-decoration: underline; }

.vui .v-seg { display: inline-flex; flex-wrap: wrap; background: var(--v-n-light); border-radius: var(--v-r-feld); padding: 2px; gap: 2px; }
.vui .v-seg button { font-family: var(--font-body); font-size: 13px; font-weight: 800; border: 0; background: none; color: var(--v-leise); padding: 6px 12px; min-width: 34px; border-radius: var(--v-r-pille); cursor: pointer; }
.vui .v-seg button[aria-pressed="true"] { background: var(--v-ink); color: #FFFFFF; }
.vui .v-seg button:disabled { cursor: default; opacity: 0.55; }
.vui .v-seg button:focus-visible, .vui .v-btn:focus-visible, .vui .v-link:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }

.vui .v-feld { font-family: var(--font-body); font-size: 15px; padding: 10px 14px; border: 0; border-radius: var(--v-r-feld); background: var(--v-n-light); color: var(--v-ink); width: 100%; }
.vui .v-feld::placeholder { color: var(--v-leise); }
.vui .v-feld:focus { outline: 2px solid var(--v-ink); outline-offset: -2px; background: var(--v-flaeche); }
.vui textarea.v-feld { min-height: 70px; resize: vertical; line-height: 1.55; }

.vui .id-bewertung { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vui .id-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vui .id-reihe-l { font-size: 12.5px; color: var(--v-leise); min-width: 100%; }
@media (min-width: 560px) { .vui .id-reihe-l { min-width: 0; } }
.vui .id-fehler { font-size: 13px; color: #84335E; }
.vui .id-mehr { margin-top: 10px; }
.vui .id-karten { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.vui .id-karten li { font-size: 14px; line-height: 1.45; }
.vui .id-karten .v-kenn { font-size: 12px; }
.vui .id-einschaetzung { margin-top: 10px; background: var(--v-n-pale); border-radius: var(--v-r-feld); padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.vui .id-pl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vui .id-kommentare { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.vui .id-kommentar { background: var(--v-flaeche); border-radius: var(--v-r-zeile); padding: 8px 12px; font-size: 14px; line-height: 1.5; }
.vui .v-zeile.v-mittel .id-kommentar, .vui .v-zeile.v-laut .id-kommentar { background: rgba(255, 255, 255, 0.75); }
.vui .id-kommentar .v-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.vui .id-formular { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.vui .id-formular .id-reihe { justify-content: flex-start; }
.vui .id-unter { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(30, 42, 48, 0.08); }
.vui .id-tool-adresse { font-size: 13px; }
.vui .id-tool-adresse a { color: var(--ton, #2C556C); font-weight: 800; }

body.fs-l .vui .v-text, body.fs-l .vui .id-karten li, body.fs-l .vui .id-kommentar { font-size: 16.5px; }
body.fs-xl .vui .v-text, body.fs-xl .vui .id-karten li, body.fs-xl .vui .id-kommentar { font-size: 18px; }
body.fs-xl .vui .v-titel { font-size: 18px; }

/* ---------- AI-IDEAS: Admin-Bereich in der Team-Nutzung (dunkel) ---------- */
.an-ideas { background: #32454e; border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; color: #e6eef0; }
.an-ideas h3 { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin: 0 0 6px; color: #FFFFFF; }
.an-ideas h4 { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; margin: 14px 0 6px; color: #FFFFFF; }
.an-ideas p { margin: 4px 0; font-size: 13px; line-height: 1.5; color: #cdd8dc; }
.an-ideas .an-i-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.an-ideas button { background: rgba(255,255,255,0.10); border: 0; color: #e6eef0; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.an-ideas button:hover { background: rgba(255,255,255,0.18); }
.an-ideas button:disabled { opacity: 0.5; cursor: default; }
.an-ideas button.an-i-warn { background: #FFC5DF; color: #1E2A30; }
.an-ideas input, .an-ideas select { font-family: var(--font-body); font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 0; background: #e6eef0; color: #1E2A30; }
.an-ideas table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-ideas th { text-align: left; font-family: var(--font-display); font-weight: 800; color: #9fb0b6; padding: 5px 6px; font-size: 11.5px; }
.an-ideas td { padding: 6px; border-top: 1px solid rgba(255,255,255,0.06); vertical-align: top; color: #e6eef0; }
.an-ideas td.zahl, .an-ideas th.zahl { text-align: right; white-space: nowrap; }
.an-ideas .an-i-namen { color: #9fb0b6; font-size: 12px; margin-top: 3px; }
.an-ideas .an-i-tabelle { overflow-x: auto; }
.an-ideas .an-i-status { font-size: 12.5px; color: #8fe0a0; }
.an-ideas .an-i-fehler { font-size: 12.5px; color: #FFC5DF; }

/* ---------- Laschen zu und von AI-IDEAS ----------
   Die Regel »Farbe = Ziel-Hintergrund« ergäbe hier Hell auf Hell (#F2F2F2 auf
   #F5F3EE). Deshalb trägt die Lasche die Kopffarbe des Ziels: violet für
   AI-IDEAS, cyan (#ACEFEE, v1 --blau) für Leads + Needs. */
.screen-board .head-dock { margin-right: 18px; }
.side-tab-ideas { background: #D5BFFF !important; color: #1E2A30 !important; }
.screen-ideas .side-tab-to-board { background: #ACEFEE !important; color: #1E2A30 !important; }

/* ---------- Ideen je Themenfeld, Struktur bearbeiten (Nachtrag 12) ---------- */
.vui .id-ebene { margin-top: 10px; font-size: 12.5px; font-weight: 800; font-family: var(--font-display); color: var(--ton); }
.vui .id-ideen { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .vui .id-ideen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } }
.vui .id-idee { background: rgba(255, 255, 255, 0.82); border-radius: var(--v-r-zeile); padding: 12px 14px; margin: 0; border-top: 0; }
.vui .id-idee .v-titel { font-size: 15px; }
.vui .id-idee .id-bewertung { margin-top: 8px; }
.vui .id-bewertung.id-erledigt .v-seg { box-shadow: none; }
.vui .id-kompakt .v-seg button { padding: 5px 10px; min-width: 30px; }
.vui .id-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.vui .id-bearbeiten { margin-top: 10px; padding: 10px 12px; border-radius: var(--v-r-feld); background: #FFF8E6; display: flex; flex-direction: column; gap: 8px; }
.vui .id-check { background: #FFF8E6; }
.vui .id-check .id-reihe + .id-reihe { margin-top: 10px; }
.vui .id-feld-kurz { width: auto; flex: 1 1 220px; min-width: 0; }
.vui select.v-feld { padding: 8px 12px; }
.vui .id-status { font-size: 13px; color: var(--v-leise); }
.vui .id-auswahl { font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.vui .id-protokoll { margin-top: 10px; }
.vui .id-protokoll summary { cursor: pointer; }
.vui .id-bearbeiten .v-btn.v-prim { background: var(--v-ink); color: #FFFFFF; }

/* ---------- AI-IDEAS, Stufe 1b: Durchgänge und Herkunft (Nachtrag 14) ---------- */
.vui .id-herkunft-schalter { align-self: flex-start; margin-top: 12px; }
.vui .id-herkunft-schalter[aria-pressed="true"] { background: var(--v-ink); color: #FFFFFF; }
.vui .id-herkunft { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.vui .id-herkunft .v-link { font-size: inherit; }
.vui .id-herkunft > .v-link { align-self: flex-start; font-size: 12.5px; }
.vui .id-name { font-size: inherit; }
.vui .id-praes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.vui .id-praes-eintrag { background: var(--v-n-pale); border-radius: var(--v-r-feld); padding: 8px 12px; }
.vui .id-praes-eintrag .v-text { font-size: 14px; }
.vui .id-karten li .id-herkunft { margin: 2px 0 6px; }
.vui .id-klapp { margin-top: 10px; }
.vui .id-klapp > .v-liste, .vui .id-klapp > .id-ideen, .vui .id-klapp > .id-karten { margin-top: 10px; }
.vui .id-sperre { margin-top: 8px; }
.vui .id-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(30, 42, 48, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
.vui .id-overlay-panel { background: var(--v-flaeche); border-radius: var(--v-r-gross); padding: 18px 20px; width: 100%; max-width: 760px; margin: auto 0; }
.vui .id-overlay-panel .v-zeile-kopf { align-items: center; }
.vui .id-overlay-panel .v-h2 { margin: 0; flex: 1; }
.vui .id-overlay-panel h3.v-h2 { margin-top: 18px; }
.vui .id-overlay-panel .v-h2:focus { outline: none; }
.vui .id-praes-inhalt { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vui .id-praes-karte { background: var(--v-n-pale); border-radius: var(--v-r-feld); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.vui .id-praes-karte .v-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.vui .id-praes-karte .v-titel { font-size: 15px; }
body.fs-l .vui .id-praes-karte .v-text, body.fs-l .vui .id-praes-eintrag .v-text { font-size: 16.5px; }
body.fs-xl .vui .id-praes-karte .v-text, body.fs-xl .vui .id-praes-eintrag .v-text { font-size: 18px; }

.an-ideas .an-i-dg { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.an-ideas .an-i-dg h4 { margin-top: 0; }
.an-ideas .an-i-dg input[type="text"] { flex: 1 1 260px; }
.an-ideas button[aria-pressed="true"] { background: #FFFFFF; color: #1E2A30; }
.an-ideas .an-i-felder { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
@media (min-width: 760px) { .an-ideas .an-i-felder { grid-template-columns: 1fr 1fr; } }
.an-ideas .an-i-haken { font-size: 13px; color: #e6eef0; display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer; }
.an-ideas .an-i-haken input { padding: 0; }

/* ---------- Kopf mit Menü unter 760 px (Nachtrag 14.17) ----------
   Gebaut aus verdino-ui 1.2: v-kopf (Kopf über dem Inhalt, kein Platzhalter),
   v-fach (Fach, das nur auf Klick aufgeht), v-btn (Pillen), v-marke.
   Der Kopf steht im #app vor den Ansichten und scrollt nicht mit, weil jede
   Ansicht ihren eigenen Scrollbereich hat; deshalb weder sticky noch Platzhalter.
   Nicht in verdino-ui und deshalb benannt statt geschätzt: das Zeichen mit drei
   Strichen (Maße unten), die Ebene über dem Inhalt (z-index) und die Fläche, die
   den Inhalt hinter dem offenen Fach abdunkelt (derselbe vorläufige Wert wie bei
   der Präsentation, Nachtrag 14.6). */
.mkopf { display: none; }
@media (max-width: 759px) {
  .mkopf:not(.hidden) {
    display: block; position: relative; z-index: 31; flex: none;
    background: var(--v-grund); padding: var(--v-s2) var(--v-s3) var(--v-s2);
  }
  #app > .screen { min-height: 0; }
  #app > .screen:not(.hidden) { flex: 1 1 auto; }
  body.mkopf-da #app > .screen { height: auto; }
}
@media (min-width: 700px) and (max-width: 759px) {
  .mkopf:not(.hidden) { width: 100%; max-width: 560px; border-radius: var(--v-r-gross) var(--v-r-gross) 0 0; }
  body.mkopf-da .screen-overview, body.mkopf-da .screen-board, body.mkopf-da .screen-ideas, body.mkopf-da .screen-analytics { max-height: calc(100dvh - 140px) !important; }
}
.vui.mkopf { --v-s1: 4px; --v-s2: 8px; --v-s3: 12px; --v-s4: 16px; }
.mkopf-zeile {
  display: flex; align-items: center; gap: var(--v-s3);
  background: var(--v-flaeche); border-radius: var(--v-r-gross); padding: var(--v-s2) var(--v-s2) var(--v-s2) var(--v-s4);
}
.mkopf.offen .mkopf-zeile { border-radius: var(--v-r-gross) var(--v-r-gross) 0 0; }
.mkopf-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mkopf-marke { font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--v-leise); }
.mkopf-ansicht { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkopf-knopf { flex: none; gap: var(--v-s2); }
.vui.mkopf .mkopf-knopf[aria-expanded="true"], .vui.mkopf .mkopf-knopf[aria-expanded="true"]:hover { background: var(--v-ink); color: #FFFFFF; }
/* Drei Striche: 16 × 2 px, Abstand 3 px, Farbe aus der Schrift. Kein Wert aus verdino-ui. */
.mkopf-striche { display: inline-flex; flex-direction: column; gap: 3px; }
.mkopf-striche span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.mkopf-fach {
  position: absolute; left: var(--v-s3); right: var(--v-s3); top: calc(100% - var(--v-s2));
  background: var(--v-flaeche); border-radius: 0 0 var(--v-r-gross) var(--v-r-gross);
  padding: var(--v-s2) var(--v-s2) var(--v-s3); display: flex; flex-direction: column; gap: var(--v-s1);
}
.mkopf-fach:not(.hidden) { border-top: 1px solid var(--v-linie); }
.mkopf-fach .v-btn { justify-content: flex-start; width: 100%; font-size: 15px; padding: var(--v-s3) var(--v-s4); background: transparent; }
.mkopf-fach .v-btn:hover { background: var(--v-n-light); }
.vui.mkopf .mkopf-fach .v-btn[aria-current="page"], .vui.mkopf .mkopf-fach .v-btn[aria-current="page"]:hover { background: var(--v-ink); color: #FFFFFF; }
.mkopf-fach .mkopf-abmelden { margin-top: var(--v-s2); background: var(--v-n-light); }
.mkopf .v-btn:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }
.mkopf-dunkel { position: fixed; inset: 0; z-index: 30; background: rgba(30, 42, 48, 0.45); }
@media (min-width: 760px) { .mkopf-dunkel { display: none !important; } }