/* =============================================================================
   „Erzähl's Veti" — Sprachnotizen (js/notiz.js). Karte ganz oben auf „Heute",
   Vollbild unter /notiz, Archiv „Deine Notizen" unter /notizen.
   ========================================================================== */

/* --- Routen: /notiz und /notizen ersetzen die Ansichten ------------------ */
.notiz-route #main { display: none; }
.notiz-seite { display: grid; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-10); }
.notiz-seite[hidden] { display: none; }
.notiz-seite__kopf { display: flex; align-items: center; min-height: 32px; }
.notiz-voll { align-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); }
.notiz-voll[hidden], .notiz-archiv[hidden] { display: none; }
.notiz-voll .notiz { width: 100%; max-width: 520px; margin: 0 auto; }
.notiz-voll .notiz__buehne { flex-direction: column; text-align: center; gap: var(--sp-4); }
.notiz-voll .notiz__knopf { width: 148px; height: 148px; }
.notiz-voll .notiz__label { font-size: 24px; line-height: 30px; }
.notiz-voll .notiz__zeit { font-size: 34px; }
.notiz-voll .notiz__steuer, .notiz-voll .notiz__links { justify-content: center; }
.notiz-voll #notiz-voll-info { width: 100%; max-width: 520px; margin: var(--sp-4) auto 0; text-align: left; }

/* --- Karte auf „Heute" ---------------------------------------------------- */
.notiz-karte[hidden] { display: none; }
.notiz { display: grid; gap: var(--sp-3); }
.notiz__buehne { display: flex; align-items: center; gap: var(--sp-4); }
.notiz__beschriftung { min-width: 0; display: grid; gap: 2px; }
.notiz__label { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--content-base-primary); }
.notiz__unter { margin: 0; font-size: 13px; line-height: 1.45; color: var(--content-base-tertiary); }
.notiz__zeit { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.5px; color: var(--content-base-primary); font-variant-numeric: tabular-nums; }
.notiz__zeit[hidden], .notiz__unter[hidden] { display: none; }

/* Der große runde Knopf; der Ring dahinter atmet mit dem Pegel (--pegel 0..1). */
.notiz__knopf {
  position: relative; flex: none;
  width: 88px; height: 88px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  background: var(--brand-gradient-deep);
  box-shadow: 0 10px 28px rgba(100, 80, 232, 0.32);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.notiz__knopf:hover { transform: scale(1.03); }
.notiz__knopf:active { transform: scale(0.97); }
.notiz__knopf:focus-visible { outline: 3px solid var(--c-brand-purple-400); outline-offset: 4px; }
.notiz__knopf:disabled { opacity: 0.7; cursor: progress; }
.notiz__ikon { position: relative; z-index: 1; display: grid; place-items: center; }
.notiz__pegel {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(144, 127, 255, 0.35);
  transform: scale(calc(1 + var(--pegel, 0) * 0.55));
  opacity: 0; transition: transform 90ms linear, opacity 200ms ease;
  z-index: 0; pointer-events: none;
}
.notiz__knopf.is-recording { background: linear-gradient(135deg, #E5484D 0%, #BB24FF 100%); box-shadow: 0 10px 30px rgba(229, 72, 77, 0.35); }
.notiz__knopf.is-recording .notiz__pegel { opacity: 1; }
.notiz__knopf.is-pause { background: var(--c-neutral-700); box-shadow: none; }

.notiz__steuer, .notiz__links, .notiz__nachher, .notiz__textfuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.notiz__steuer[hidden], .notiz__links [hidden], .notiz__textbox[hidden], .notiz__bestaetigung[hidden], .notiz-krise[hidden] { display: none; }
.notiz__steuer .btn { min-height: 44px; }
.notiz__verwerfen { color: var(--content-base-tertiary); }
.notiz__wach { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-yellow-700, #8A590F); }
.notiz__wach[hidden] { display: none; }
.notiz__hinweis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.notiz__hinweis:empty { display: none; }
.notiz__warte { font-size: 12px; font-weight: 600; color: var(--c-yellow-700, #8A590F); }

.notiz__textbox { display: grid; gap: var(--sp-2); }
.notiz__textbox textarea, .notizitem__feld {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: var(--sp-3); border-radius: var(--r-inner, 12px);
  border: 1px solid var(--border-base-secondary); background: var(--bg-component-primary);
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--content-base-primary);
}

.notiz__bestaetigung {
  display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--r-inner, 12px);
  background: rgba(100, 80, 232, 0.07);
}
.notiz__gehoert { margin: 0; font-size: 18px; font-weight: 700; color: var(--content-base-primary); }
.notiz__danach { margin: 0; font-size: 14px; line-height: 1.5; color: var(--content-base-secondary); }
.notiz__stand { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Krise: sofort und deutlich (Plan V4). */
.notiz-krise {
  display: grid; gap: var(--sp-3); padding: var(--sp-4);
  border-radius: var(--r-inner, 12px);
  border-left: 4px solid #E5484D; background: rgba(229, 72, 77, 0.08);
}
.notiz-krise p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--content-base-primary); white-space: pre-line; }
.notiz-krise .btn { justify-self: start; }

/* Anleitung Kurzbefehl */
.notiz-anleitung { font-size: 13px; line-height: 1.55; color: var(--content-base-secondary); }
.notiz-anleitung summary { cursor: pointer; font-weight: 600; color: var(--content-action-primary); }
.notiz-anleitung ol { margin: var(--sp-2) 0; padding-left: 1.3em; }
.notiz-anleitung code { font-size: 12px; word-break: break-all; background: var(--bg-component-hover); padding: 1px 5px; border-radius: 4px; }
.notiz-anleitung p { margin: var(--sp-2) 0 0; }
.notiz-anleitung__fair { font-weight: 600; color: var(--content-base-primary); }

/* --- Chips (Status, Bereich, Zusagen, Gemerktes) --------------------------- */
.notiz-chip--arbeit { background: rgba(100, 80, 232, 0.10); color: var(--c-brand-purple-600); }
.notiz-chip--fehler { background: rgba(229, 72, 77, 0.12); color: #B4232A; }
.notiz-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.35;
  background: var(--bg-component-hover); color: var(--content-base-secondary);
}
.notiz-chip--bereich { background: rgba(100, 80, 232, 0.10); color: var(--c-brand-purple-600); }
.notiz-chip__aktion {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--content-action-primary); text-decoration: underline;
}
.notizitem__bereichwahl { font: inherit; font-size: 12px; padding: 2px 4px; border-radius: 6px; }

/* --- Archiv „Deine Notizen" ------------------------------------------------ */
.notizen { display: grid; gap: var(--sp-3); }
.notizen__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.notizen__unter, .notizen__meldung { margin: 0; }
.notizen__meldung:empty { display: none; }
.notizen__meldung { font-size: 13px; color: var(--content-base-secondary); }
.notizen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.notizen__leer { margin: 0; }
.notizen__leer[hidden] { display: none; }
.notizitem {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4); border-radius: var(--r-inner, 12px);
  background: var(--bg-component-primary); box-shadow: inset 0 0 0 1px var(--border-base-primary);
}
.notizitem--lokal { background: rgba(184, 118, 20, 0.05); }
.notizitem__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: 13px; }
.notizitem__wann { font-weight: 600; color: var(--content-base-primary); }
.notizitem__dauer { color: var(--content-base-tertiary); }
.notizitem__status { margin-left: auto; }
.notizitem__thema { margin: 0; font-size: 15px; font-weight: 600; color: var(--content-base-primary); }
.notizitem__sensibel { margin: 0; font-size: 12px; font-weight: 600; color: var(--c-brand-cyan-700); }
.notizitem__fehler { margin: 0; font-size: 13px; color: #B4232A; }
.notizitem__frage { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.notizitem__punkte { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
.notizitem__abschrift summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--content-action-primary); }
.notizitem__abschrift-inhalt { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.notizitem__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--content-base-primary); white-space: pre-wrap; }
.notizitem__abschrift-inhalt > .linkbtn { justify-self: start; }
.notizitem__feldfuss { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.notizitem__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.notizitem__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: 13px; }
.notizitem__merken { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--content-base-primary); cursor: pointer; }
.notizitem__merken input { width: 18px; height: 18px; accent-color: var(--c-brand-purple-500); }
.notizitem__merken-info { font-size: 12px; color: var(--content-base-tertiary); }
.notizitem__aktionen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-left: auto; }
.notizitem__frage-loeschen { font-size: 13px; color: var(--content-base-primary); }
.notizitem__meldung { margin: 0; font-size: 12px; color: #B4232A; }
.notizitem__meldung:empty { display: none; }

@media (max-width: 560px) {
  .notiz__knopf { width: 76px; height: 76px; }
  .notizitem__status { margin-left: 0; }
  .notizitem__aktionen { margin-left: 0; }
}
@media (pointer: coarse) {
  .notiz-chip__aktion, .notiz__links .linkbtn { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .notiz__pegel, .notiz__knopf { transition: none; }
}
.notiz-seite a.btn, .notiz a.btn, .notiz-krise a.btn { text-decoration: none; }

/* --- Erklärung unter dem Titel (Stefan 19.10.): Desktop ganz, Handy eine Zeile + „Mehr" --- */
.notiz__unter { display: grid; gap: 4px; }
.notiz__erklaer { margin: 0; font-size: 14px; line-height: 1.5; color: var(--content-base-secondary); }
.notiz__ruhe { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--content-base-tertiary); }
.notiz__mehr { display: none; justify-self: start; font-size: 13px; }
@media (max-width: 599px) {
  .notiz-karte .notiz__unter:not(.is-offen) .notiz__erklaer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notiz-karte .notiz__unter:not(.is-offen) .notiz__erklaer-mehr,
  .notiz-karte .notiz__unter:not(.is-offen) .notiz__ruhe { display: none; }
  .notiz-karte .notiz__mehr { display: inline-flex; }
}
.notiz-voll .notiz__unter { justify-items: center; }

/* --- Einführung auf /notiz beim ersten Öffnen ----------------------------- */
.notiz-intro {
  width: 100%; max-width: 520px; margin: 0 auto var(--sp-5); padding: var(--sp-4) var(--sp-5);
  text-align: left; border-radius: 16px; background: rgba(144, 127, 255, 0.08);
  display: grid; gap: var(--sp-2);
}
.notiz-intro p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--content-base-secondary); }
.notiz-intro .notiz-intro__titel { font-weight: 700; color: var(--content-base-primary); }
.notiz-intro .notiz-intro__ruhe { font-size: 13px; color: var(--content-base-tertiary); }
.notiz-intro .btn { justify-self: start; margin-top: var(--sp-1); }

/* --- „Heute" oben: Handy Karte über dem Hero, Desktop rechts daneben ---------- */
@media (max-width: 959px) {
  .ansicht--heute > .heute-oben { display: contents; }
}
@media (min-width: 960px) {
  .ansicht--heute > .heute-oben {
    display: grid; gap: 22px; align-items: stretch;   /* gleiche Höhe (Stefan 19.10., e89ea9) */
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
  .heute-oben > .heute-hero { grid-column: 1; grid-row: 1; }
  .heute-oben > .notiz-karte { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
  .heute-oben > .notiz-karte[hidden] { display: none; }
  .heute-oben:has(> .notiz-karte[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .heute-oben > .notiz-karte .notiz__buehne { flex-direction: column; align-items: flex-start; }
  .heute-oben > .notiz-karte .notiz__knopf { width: 96px; height: 96px; }
}
/* Solange die Einführung steht, nicht dieselbe Erklärung noch einmal unter dem Knopf. */
.notiz-voll:has(#notiz-intro) .notiz__erklaer,
.notiz-voll:has(#notiz-intro) .notiz__ruhe { display: none; }
.notiz-chip--link { text-decoration: none; color: var(--c-brand-purple-500); font-weight: 600; }   /* INU-880: „Aufgaben sortieren" */

/* --- Wahl am großen Knopf (Stefan 30.10.): Sprachnachricht oder direkt sprechen --- */
.notiz-wahl { z-index: 120; }
.notiz-wahl__panel { width: min(460px, 100%); }
.notiz-wahl__body { gap: var(--sp-3); }
.notiz-wahl__option {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 72px; padding: var(--sp-4);
  text-align: left; font: inherit; cursor: pointer;
  border-radius: var(--r-inner, 12px);
  border: 1px solid var(--border-base-secondary, rgba(28, 28, 30, 0.12));
  background: var(--bg-component-primary, #fff);
  color: var(--content-base-primary);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.notiz-wahl__option:hover:not(:disabled) { border-color: var(--c-brand-purple-400, #907FFF); box-shadow: 0 6px 18px rgba(100, 80, 232, 0.14); }
.notiz-wahl__option:active:not(:disabled) { transform: scale(0.99); }
.notiz-wahl__option:focus-visible { outline: 3px solid var(--c-brand-purple-400, #907FFF); outline-offset: 2px; }
.notiz-wahl__option:disabled { opacity: 0.55; cursor: not-allowed; }
.notiz-wahl__ikon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--brand-gradient-deep, linear-gradient(135deg, #6450E8 0%, #BB24FF 100%));
}
.notiz-wahl__option--gespraech .notiz-wahl__ikon { background: linear-gradient(135deg, #007A96 0%, #6450E8 100%); }
.notiz-wahl__text { display: grid; gap: 2px; min-width: 0; }
.notiz-wahl__name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.notiz-wahl__info { font-size: 13px; line-height: 1.45; color: var(--content-base-tertiary); }
.notiz-wahl__sperre { margin: 0; font-size: 13px; line-height: 1.45; color: var(--c-yellow-700, #8A590F); }
.notiz-wahl__fuss { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
@media (max-width: 599px) {
  .notiz-wahl { align-items: end; place-items: end center; padding: var(--sp-3); }
  .notiz-wahl__panel { width: 100%; }
}

.notiz__gespraech { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.notiz__gespraech[hidden] { display: none; }