/* Seite Audios mit den Reitern Nachrichten und Abfolgen, Abfolgen im Audio-Panel und der Lauf-Hinweis im Chat
   (Marcel, 23.10.2026). Baut auf den Audio-Klassen in style.css auf: audio-zeile, aufnahme, f-zeile, form-knoepfe. */

/* Reiter unter dem Seitenkopf: ruhige Unterstreichung wie bei den Kommentaren */
.au-reiter { display: flex; margin: 0 0 var(--abst-24); padding: 0; border-bottom: var(--haar) solid var(--linie); }
.au-reiter a { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 var(--abst-2); margin-right: var(--abst-16);
  font: 500 var(--sg-14)/1 var(--schrift-marke); color: var(--text-3); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .au-reiter a:hover { color: var(--text); } }
.au-reiter a[aria-selected="true"] { color: var(--text); }
.au-reiter a[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--rund-mini); background: var(--text); }
.au-reiter a:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: var(--rund-mini); }
.au-seite [data-na-neu][hidden], .au-seite [data-ab-neu][hidden] { display: none; }

/* Nachrichten: Titel und die ersten zwei Zeilen Text */
.na-zeile { align-items: flex-start; }
.na-zeile .audio-aktionen { margin-top: calc(var(--abst-4) * -1); }
.na-text { margin-top: var(--abst-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.na-form { margin: var(--abst-8) 0 var(--abst-16); }
.audio-liste .na-form { margin: var(--abst-8) 0; }
.na-form .aufnahme-felder .f-zeile:last-child { margin-bottom: var(--abst-12); }
.na-form textarea, .ab-schritt textarea { resize: vertical; min-height: 84px; font: inherit; font-size: var(--sg-14); line-height: 1.45; }
.na-zeichen { margin-top: calc(var(--abst-4) * -1); }

/* Abfolgen: Liste und Editor als einfache Schrittliste */
.ab-editor h2 { margin-bottom: var(--abst-16); }
.ab-editor { max-width: 680px; }
.ab-titel { max-width: 420px; }
.ab-schritte { list-style: none; margin: 0; padding: 0; border-top: var(--haar) solid var(--linie); }
.ab-schritt { display: grid; gap: var(--abst-8); padding: var(--abst-12) 0 var(--abst-16); border-bottom: var(--haar) solid var(--linie); }
.ab-schritt.fehlt { box-shadow: inset 2px 0 0 var(--koralle-p); padding-left: var(--abst-12); }
.ab-schritt-kopf { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; min-width: 0; }
.ab-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--flaeche-2); color: var(--text-2);
  font: 500 var(--sg-12)/1 var(--schrift-marke); flex: none; }
.ab-art { font-size: var(--sg-14); font-weight: 500; }
.ab-warten { display: inline-flex; align-items: center; gap: var(--abst-8); margin-left: var(--abst-8); }
.ab-warten .feld { width: auto; height: 32px; padding: 0 var(--abst-8); font-size: var(--sg-13); }
.ab-wert { width: 64px !important; }
.ab-wert[hidden] { display: none; }
.ab-schieben { display: inline-flex; align-items: center; margin-left: auto; }
.ab-schieben .icon-knopf:disabled { opacity: .3; }
.ab-text-unten { display: flex; align-items: center; gap: var(--abst-12); justify-content: space-between; min-width: 0; }
.ab-fuellen { width: auto; max-width: 100%; min-width: 0; height: 32px; padding: 0 var(--abst-8); font-size: var(--sg-13); color: var(--text-2); }
.ab-zeichen { white-space: nowrap; flex: none; }
.ab-audio { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.ab-audio select { flex: 1; min-width: 0; max-width: 420px; }
.ab-audio .spiel-knopf:disabled { opacity: .4; }
.ab-kein-audio { margin: 0; }
.ab-leer { margin: 0; padding: var(--abst-12) 0; }
.ab-hinzu { display: flex; flex-wrap: wrap; gap: var(--abst-8); margin: var(--abst-16) 0 var(--abst-24); }
.ab-hinzu .ic { width: 15px; height: 15px; }
.ab-editor .form-fehler[hidden] { display: none; }

/* Schritt Nachricht (24.10.2026): Teile als Vorschau wie im Chat, Bild klein, Audio als Abspieler, Buttons als Liste */
.ab-nachricht { display: grid; gap: var(--abst-8); min-width: 0; }
.ab-teil { display: grid; gap: var(--abst-4); min-width: 0; }
.ab-teil-medium { padding: var(--abst-8); border: var(--haar) solid var(--linie); border-radius: var(--rund); background: var(--flaeche); }
.ab-teil-kopf { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; font-size: var(--sg-13); }
.ab-teil-kopf > .ic { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.ab-teil-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-teil-weg { margin-left: auto; width: 28px; height: 28px; flex: none; }
.ab-teil-weg .ic { width: 14px; height: 14px; }
.ab-bild { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--rund-mini); background: var(--flaeche-2); }
.ab-audio-spieler { width: 100%; max-width: 360px; height: 36px; }
.ab-video { display: block; width: 160px; max-width: 100%; border-radius: var(--rund-mini); background: var(--flaeche-2); }
.ab-zeichen.zuviel { color: var(--koralle-t); }
.ab-knoepfe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-4); }
.ab-knopf-zeile { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.ab-knopf-zeile > .ic { flex: none; color: var(--text-3); }
.ab-knopf-titel { width: 200px; max-width: 100%; height: 32px; padding: 0 var(--abst-8); font-size: var(--sg-13); flex: none; }
.ab-knopf-ziel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-knopf-hinweis, .ab-tag-hinweis { margin: 0; }
.ab-nachricht-unten { display: flex; flex-wrap: wrap; gap: var(--abst-8); }
.ab-bild-knopf { position: relative; display: inline-flex; align-items: center; gap: var(--abst-4); cursor: pointer; }
.ab-bild-knopf .ic { width: 15px; height: 15px; }
.ab-bild-knopf.gesperrt { opacity: .6; cursor: default; }
.ab-datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ab-bild-knopf:focus-within { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: var(--rund-mini); }
.ab-tag { display: flex; flex-wrap: wrap; gap: var(--abst-8); min-width: 0; }
.ab-tag input { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.ab-tag-quelle { width: auto; flex: none; }

/* Bedingung und Ende (25.10.2026): Wenn, Dann, Sonst als ruhige Zeilen mit festem Wort links */
.ab-bedingung { display: grid; gap: var(--abst-8); min-width: 0; padding: var(--abst-8) var(--abst-12); border-left: 2px solid var(--linie); }
.ab-bed-zeile { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; min-width: 0; }
.ab-bed-wort { width: 44px; flex: none; font: 500 var(--sg-13)/1 var(--schrift-marke); color: var(--text-2); }
.ab-bed-zeile .feld { width: auto; height: 32px; padding: 0 var(--abst-8); font-size: var(--sg-13); min-width: 0; }
.ab-wenn, .ab-ziel { flex: 0 1 auto; max-width: 100%; }
.ab-bed-zeile input.ab-wenn-wert { flex: 1 1 180px; max-width: 260px; }
.ab-bed-zeile select.ab-wenn-wert { flex: 0 1 auto; max-width: 100%; }
.ab-wenn-leer { flex: 1 1 220px; }
.ab-frueher { display: flex; align-items: center; gap: var(--abst-8); margin-left: calc(44px + var(--abst-8)); color: var(--text-2); cursor: pointer; }
.ab-frueher input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--text); }
.ab-bed-hilfe, .ab-ende-hinweis, .ab-antwort-hinweis { margin: 0; }
.ab-bed-hilfe { margin-left: calc(44px + var(--abst-8)); }
.ab-antwort-hinweis { margin: calc(var(--abst-8) * -1) 0 var(--abst-16); max-width: 560px; }
.ab-auswahl-dazu { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-13); }
.ab-auswahl-dazu .ic { width: 14px; height: 14px; }
.ab-text-unten .ab-auswahl-dazu { margin-left: auto; }
.ab-knopf-weg { width: 28px; height: 28px; flex: none; }
.ab-knopf-weg .ic { width: 14px; height: 14px; }

/* Abfolgen im Audio-Panel des Chats */
.au-abfolgen { margin-top: var(--abst-8); border-top: var(--haar) solid var(--linie); padding-top: var(--abst-4); }
.au-abf-hinweis { margin: 0; padding: 0 var(--abst-16) var(--abst-4); }
.au-abfolgen .au-leer { padding-top: var(--abst-4); }

/* Lauf-Hinweis über dem Eingabefeld: gleiche Form wie die Pause-Leiste, ruhige Farbe je Ausgang */
.abfolge-leiste { background: var(--meer-g); color: var(--meer-t); }
.abfolge-leiste[data-art="fertig"] { background: var(--salbei-g); color: var(--salbei-t); }
.abfolge-leiste[data-art="gestoppt"] { background: var(--flaeche); color: var(--text-2); }
.abfolge-leiste[data-art="fehler"] { background: var(--koralle-g); color: var(--koralle-t); }
.abfolge-leiste .icon-knopf { width: 28px; height: 28px; color: inherit; }
.abfolge-leiste .icon-knopf .ic { width: 14px; height: 14px; }

@media (max-width: 759px) {
  .au-reiter { margin-bottom: var(--abst-20); }
  .au-reiter a { height: var(--ziel); margin-right: var(--abst-12); }
  .audio-aktionen:has([data-na-ja], [data-ab-ja]) > .icon-knopf { display: none; }
  /* Schritt am Handy: Kopf mit Nummer, Art und Schieben, darunter die Wartezeit */
  .ab-warten { order: 3; flex: 1 1 100%; margin-left: 0; }
  .ab-warten .feld { height: var(--ziel); }
  .ab-schieben .icon-knopf { width: var(--ziel); height: var(--ziel); }
  .ab-text-unten { flex-wrap: wrap; }
  .ab-fuellen { height: var(--ziel); flex: 1 1 auto; }
  .ab-hinzu .knopf { flex: 1 1 calc(50% - var(--abst-8)); min-height: var(--ziel); justify-content: center; }
  .ab-knopf-titel { flex: 1 1 auto; width: auto; height: var(--ziel); }
  .ab-knopf-ziel { display: none; }
  .ab-teil-weg { width: var(--ziel); height: var(--ziel); }
  .ab-tag input, .ab-tag-quelle { flex: 1 1 100%; max-width: none; height: var(--ziel); }
  .ab-editor .form-knoepfe .knopf { flex: 1; min-height: var(--ziel); }
  .ab-editor .form-knoepfe .raum { display: none; }
  .abfolge-leiste .icon-knopf { width: var(--ziel); height: var(--ziel); }
  .ab-bedingung { padding: var(--abst-4) 0 var(--abst-4) var(--abst-12); }
  .ab-bed-zeile { flex-wrap: nowrap; align-items: flex-start; }
  .ab-bed-zeile:first-child { flex-wrap: wrap; }
  .ab-bed-wort { line-height: var(--ziel); }
  .ab-bed-zeile .feld, .ab-bed-zeile input.ab-wenn-wert { flex: 1 1 0; height: var(--ziel); max-width: none; }
  .ab-bed-zeile:first-child .ab-wenn-wert, .ab-bed-zeile:first-child .ab-wenn-leer { flex: 1 1 100%; margin-left: calc(44px + var(--abst-8)); }
  .ab-frueher { margin-left: 0; min-height: var(--ziel); }
  .ab-bed-hilfe { margin-left: 0; }
  .ab-auswahl-dazu { min-height: var(--ziel); }
  .ab-knopf-weg { width: var(--ziel); height: var(--ziel); }
}

/* Abfolgen im Chat: eigener Knopf und eigenes Panel (Marcel, 23.10.2026 abends) */
.ab-panel .audio-zeile { padding: var(--abst-8) var(--abst-16); border-bottom: 0; }
@media (hover: hover) { .ab-panel .audio-zeile:hover { background: var(--flaeche); } }
.ab-panel .au-abfolgen { margin-top: 0; border-top: 0; }
@media (max-width: 759px) { .ab-panel .audio-zeile { gap: var(--abst-8); padding: var(--abst-8); } }

/* Nachrichten: Suche über der Liste, Hinweis bei Bausteinen nur für ein Konto */
.na-suche { margin: var(--abst-4) 0 var(--abst-12); border: var(--haar) solid var(--linie); border-radius: var(--rund); }
.na-konto { margin-top: var(--abst-2); }