/* Tickettafel (/tickets)

   Paul am 08.09.2026: "anstatt einfach so viel Text zu haben will ich was
   besseres haben." Deshalb ist die Tafel eine Bildtafel und keine Liste:
   Bild, eine Titelzeile, zwei Marken. Der Text erscheint erst im Detail.
   Verbindlich: docs/TICKETSYSTEM.md, Abschnitt "Die Tafel".

   Diese Datei gehoert hinter betrieb-listen.css und vor laserdance-system.css
   in die Kaskade (docs/DESIGN.md, "Ladereihenfolge"). Sie benutzt nur die
   drei Radien, die Abstandsleiter und die Markenfarben; die sieben
   Bereichsfarben unten sind aus ihnen abgeleitet und keine neuen Toene.

   Radien: die Sammellisten in laserdance-system.css kennen die tt-Klassen
   nicht, deshalb stehen die drei Tokens hier ausdruecklich an den Bausteinen.
   Es sind dieselben drei Werte, kein vierter. */

/* ---- Bereichsfarben: abgeleitet, nicht neu ----
   Sieben Bereiche, sechs vorhandene Toene plus Grau. Rot bleibt frei fuer
   Gefahr, damit die Kennzeichnung "geld" auf der Karte allein steht. */
:root {
    --tt-kundenseite: var(--acc);          /* Magenta: der Gast, die Hauptsache */
    --tt-tresen: var(--cyan);              /* Zweitfarbe: der Arbeitsplatz */
    --tt-planung: var(--lime);             /* Zustimmung, Planung, belegt */
    --tt-engine: var(--ampel-orange);      /* Rechnerei, wird knapp */
    --tt-zahlung: var(--ampel-gelb);       /* Geldfluss, wie die Ampel */
    --tt-marke: var(--acc-hell);           /* helles Magenta: Erscheinungsbild */
    --tt-technik: var(--muted);            /* grau: Unterbau, faellt bewusst ab */
}

/* ---- Filterzeile ----
   Baustein wie auf /buchungen: .bsuche, .bfilter, .grp, .glbl, .fsel. Nur die
   Breite des Suchfeldes wird genannt - .ld input hat width:100%, und wer eine
   Grundregel ueberschreiben will, muss die Eigenschaft nennen (brain/muster.md). */
.ld .ttfilter { margin: var(--s4) 0 var(--s3) }
.ld .ttfilter input[type=search] { width: 240px; max-width: 100%; border-radius: var(--r-ctl) }
.ld .ttfilter .fsel { width: auto; border-radius: var(--r-ctl) }
.ld .ttfilter .ttmitbild {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fs-12); font-weight: 700; color: var(--muted); cursor: pointer
}
.ld .ttfilter .ttmitbild:hover { color: var(--text) }
.ld .ttfilter .chip { border-radius: var(--r-chip) }
.ld .ttstand { font-size: var(--fs-12); color: var(--muted); font-weight: 600; margin-bottom: var(--s2) }
.ld .ttstand b { color: var(--cyan) }

/* ---- Die Tafel ----
   Am Schreibtisch stehen die Spalten nebeneinander und fuellen die Breite.
   Die eingeklappte Spalte schrumpft auf ihren Kopf, statt Platz zu belegen. */
.ld .tttafel {
    display: flex; align-items: flex-start; gap: var(--s3);
    margin-bottom: var(--s5)
}
.ld .ttspalte {
    flex: 1 1 0; min-width: 0;
    background: var(--p1); border: 1px solid var(--line); border-radius: var(--r-card)
}
.ld .ttspalte.zu { flex: 0 0 auto; width: 172px }

/* Spaltenkopf ist ein Knopf: Klick klappt auf und zu, auch mit der Tastatur. */
.ld .ttsk {
    display: flex; align-items: center; gap: var(--s2); width: 100%;
    background: none; border: 0; border-bottom: 1px solid var(--dim);
    padding: var(--s3); cursor: pointer; text-align: left;
    font-family: var(--font); color: var(--text)
}
.ld .ttspalte.zu .ttsk { border-bottom: 0 }
.ld .ttsk:hover { color: var(--cyan) }
.ld .ttsk b {
    font-size: var(--fs-11); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.ld .ttsk .ttzahl {
    margin-left: auto; flex: 0 0 auto;
    font-size: var(--fs-11); font-weight: 800; color: var(--muted);
    background: var(--p2); border: 1px solid var(--dim); border-radius: var(--r-chip);
    padding: 2px 7px
}
/* Der Pfeil ist hier die Aussage selbst (auf/zu), deshalb erlaubt. */
.ld .ttsk .ttpf {
    flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--muted2);
    border-bottom: 2px solid var(--muted2); transform: rotate(45deg); margin-bottom: 3px
}
.ld .ttspalte.zu .ttsk .ttpf { transform: rotate(-45deg); margin: 3px 0 0 }

/* Kartenstapel scrollt in sich, damit der Seitenkopf stehen bleibt. */
.ld .ttkarten {
    display: flex; flex-direction: column; gap: var(--s2);
    padding: var(--s2); max-height: calc(100vh - 260px);
    overflow-y: auto; overscroll-behavior: contain
}
.ld .ttspalte.zu .ttkarten { display: none }
.ld .ttleer2 { padding: var(--s3); font-size: var(--fs-12); color: var(--muted2) }

/* Beim Ziehen zeigt die Spalte unter dem Zeiger, dass sie das Ziel ist.
   Ohne Server-Ereignis je Mausbewegung: die Klasse setzt EIN Ereignis am
   Anfang des Ziehens, den Rest macht :hover. */
.ld .tttafel.zieht .ttspalte:hover { border-color: var(--acc); background: rgba(200, 27, 255, .07) }

/* ---- Die Karte ---- */
.ld .ttkarte {
    --bf: var(--tt-technik);
    /* flex:0 0 auto ist Pflicht, nicht Geschmack: der Kartenstapel ist ein
       Flex-Behaelter mit begrenzter Hoehe, und Flex-Kinder schrumpfen darin
       von selbst. Gemessen: ohne diese Zeile waren die unteren Karten am
       Schreibtisch 8 px hoch statt 155. */
    flex: 0 0 auto;
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--p2); border: 1px solid var(--dim); border-radius: var(--r-card);
    padding: 0; overflow: hidden; font-family: var(--font); color: var(--text)
}
.ld .ttkarte:hover { border-color: var(--acc) }
.ld .ttkarte:active { cursor: grabbing }

.ld .ttkarte .ttbild {
    display: block; width: 100%; height: 92px; background: var(--p1);
    border-bottom: 1px solid var(--dim); overflow: hidden
}
.ld .ttkarte .ttbild img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block
}
/* Ohne Bild: ruhige Flaeche in der Bereichsfarbe mit dem Anfangsbuchstaben.
   14 Prozent Farbe auf dem Kartengrund - erkennbar, aber kein Farbklotz. */
.ld .ttkarte .ttleer {
    display: flex; align-items: center; justify-content: center; height: 100%;
    background: color-mix(in srgb, var(--bf) 13%, var(--p1));
    font-size: var(--fs-30); font-weight: 800; letter-spacing: .04em;
    color: color-mix(in srgb, var(--bf) 70%, transparent)
}

.ld .ttkarte .tttitel {
    display: block; padding: var(--s2) var(--s3) 0;
    font-size: var(--fs-13); font-weight: 700; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.ld .ttkarte .ttmarken {
    display: flex; align-items: center; gap: var(--s1);
    padding: 6px var(--s3) var(--s2)
}
.ld .ttm {
    font-size: var(--fs-10); font-weight: 800; letter-spacing: .03em;
    border: 1px solid var(--dim); border-radius: var(--r-chip);
    padding: 2px 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis
}
.ld .ttm.bereich { color: var(--bf); border-color: color-mix(in srgb, var(--bf) 35%, transparent) }
.ld .ttm.dring { color: var(--muted2) }
.ld .ttm.dring.d-blockiert, .ld .ttm.dring.d-wichtig { color: var(--ampel-orange) }
.ld .ttm.dring.d-geld { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent) }

/* "geld" heisst: hier kann Geld falsch laufen. Eine Kante links, kein
   roter Kasten - deutlich, aber nicht schreiend. */
.ld .ttkarte.geld { border-left: 3px solid var(--red) }

/* Abgelehnt steht in der Erledigt-Spalte, damit nichts spurlos verschwindet. */
.ld .ttkarte.abgelehnt { opacity: .55 }
.ld .ttkarte.abgelehnt .tttitel { text-decoration: line-through }

/* Bereichsfarbe je Karte. Eine Variable, sieben Zeilen - die Regeln oben
   bleiben davon unberuehrt. */
.ld .ttkarte.b-kundenseite { --bf: var(--tt-kundenseite) }
.ld .ttkarte.b-tresen { --bf: var(--tt-tresen) }
.ld .ttkarte.b-planung { --bf: var(--tt-planung) }
.ld .ttkarte.b-engine { --bf: var(--tt-engine) }
.ld .ttkarte.b-zahlung { --bf: var(--tt-zahlung) }
.ld .ttkarte.b-marke { --bf: var(--tt-marke) }
.ld .ttkarte.b-technik { --bf: var(--tt-technik) }

/* ---- Detailfenster: der vorhandene Panel-Baustein ---- */
.ld .panel.ttdetail { width: min(760px, calc(100vw - 24px)); border-radius: var(--r-card) }
.ld .ttdetail .ttkopfmarken { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3) }
.ld .ttdetail .ttwer { font-size: var(--fs-12); color: var(--muted2); margin-bottom: var(--s3) }
.ld .ttdetail .tttext {
    white-space: pre-wrap; font-size: var(--fs-14); line-height: 1.5; color: var(--text);
    margin-bottom: var(--s4)
}
.ld .ttdetail h3 {
    font-size: var(--fs-11); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted2); margin: var(--s4) 0 var(--s2);
    padding-top: var(--s3); border-top: 1px solid var(--dim)
}
.ld .ttdetail .ttbilder { display: flex; flex-wrap: wrap; gap: var(--s2) }
.ld .ttdetail .ttbilder button {
    padding: 0; background: none; border: 1px solid var(--dim); border-radius: var(--r-ctl);
    cursor: pointer; overflow: hidden; line-height: 0
}
.ld .ttdetail .ttbilder button:hover { border-color: var(--acc) }
.ld .ttdetail .ttbilder img { width: 168px; height: 104px; object-fit: cover; object-position: top center }
.ld .ttdetail .ttbezug { font-size: var(--fs-12); color: var(--muted); line-height: 1.6; word-break: break-all }
.ld .ttdetail .ttbezug b { color: var(--text); font-weight: 700 }
.ld .ttdetail .ttverlauf { font-size: var(--fs-13); color: var(--muted); line-height: 1.5 }
.ld .ttdetail .ttverlauf p { margin: 0 0 var(--s2) }
.ld .ttdetail .ttverlauf ul { margin: 0 0 var(--s2); padding-left: 18px }
.ld .ttdetail .ttverlauf .beanst { color: var(--ampel-orange) }

/* Wahlzeilen: Beschriftung links, Knoepfe rechts. Der Knopf ist der
   vorhandene .minibtn, nur der aktive Zustand kommt dazu. */
.ld .ttdetail .ttwahl { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap }
.ld .ttdetail .ttwahl .k {
    flex: 0 0 96px; font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted2)
}
.ld .ttdetail .ttwahl .kn { display: flex; flex-wrap: wrap; gap: var(--s1) }
.ld .ttdetail .ttwahl .minibtn { font-size: var(--fs-12); padding: 5px 10px; border-radius: var(--r-ctl) }
.ld .ttdetail .ttwahl .minibtn.on { background: var(--acc); border-color: var(--acc); color: #fff }
.ld .ttdetail .ttpruef { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3) }
.ld .ttdetail .ttpruef .minibtn { min-height: var(--ctl-h); padding-inline: 16px; border-radius: var(--r-ctl) }
.ld .ttdetail textarea.ttgrund {
    width: 100%; margin-top: var(--s2); min-height: 76px;
    font-size: var(--fs-14); border-radius: var(--r-ctl)
}

/* Grosses Bild: eigene Ebene ueber dem Detailfenster. */
.ld .ttgross {
    position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .88);
    display: flex; align-items: center; justify-content: center; padding: var(--s4);
    border: 0; cursor: zoom-out
}
.ld .ttgross img { max-width: 100%; max-height: 100%; object-fit: contain }

/* ---- iPad: zwei bis drei Spalten, waagrecht rollbar ----
   Der Rollbereich ist die Tafel selbst, nicht die Seite: die Seite darf sich
   nie waagrecht bewegen. */
@media (max-width: 1180px) and (min-width: 701px) {
    .ld .tttafel { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s2) }
    .ld .ttspalte { flex: 0 0 260px }
    .ld .ttspalte.zu { flex: 0 0 172px }
    .ld .ttkarten { max-height: calc(100vh - 300px) }
}

/* ---- Telefon: Spalten untereinander, jede ein Abschnitt zum Aufklappen ----
   Kein Nebeneinander und kein Querscrollen: die Tafel wird zur Liste von
   Abschnitten. Die Kartenstapel scrollen hier NICHT in sich, sonst gaebe es
   einen Rollbereich im Rollbereich. */
@media (max-width: 700px) {
    .ld .tttafel { flex-direction: column; overflow-x: visible; gap: var(--s2) }
    .ld .ttspalte, .ld .ttspalte.zu { flex: 0 0 auto; width: 100% }
    .ld .ttkarten { max-height: none; overflow: visible }
    .ld .ttfilter input[type=search] { width: 100% }
    .ld .ttfilter .fsel { flex: 1 1 auto }
    .ld .ttdetail .ttbilder img { width: 100%; height: auto }
    .ld .ttdetail .ttbilder button { width: 100% }
    .ld .ttdetail .ttwahl .k { flex: 1 1 100% }
}

/* =========================================================================
   FRAGENKATALOG (08.09.2026)
   Die Gegenrichtung zur Nachfrage: hier fragt die Assistenz, Paul antwortet.
   Eigene Ansicht neben der Tafel, weil eine offene Frage kein Zustand des
   Tickets ist, sondern eine Stelle darin - ein Ticket kann laufen UND eine
   Frage offen haben. Verbindlich: docs/TICKETSYSTEM.md, "Fragenkatalog".
   Leitfarbe ist durchgehend Cyan: Magenta ist auf dieser Seite die Karte,
   Gelb und Orange sind die Dringlichkeit.
   ========================================================================= */

.ld .ttansicht { display: flex; gap: var(--s2); margin-bottom: var(--s2) }
.ld .ttansicht .minibtn {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fs-12); padding: 6px 12px; border-radius: var(--r-ctl)
}
.ld .ttansicht .minibtn.on { background: var(--acc); border-color: var(--acc); color: #fff }
.ld .ttansicht .ttzahl {
    font-size: var(--fs-11); font-weight: 800; line-height: 1;
    background: var(--cyan); color: var(--p1);
    border-radius: var(--r-chip); padding: 3px 7px
}
.ld .ttansicht .minibtn.on .ttzahl { background: #fff; color: var(--acc) }

/* Marke auf der Karte: so viele Fragen warten in diesem Ticket. */
.ld .ttkarte .ttm.fragen {
    background: rgba(2, 255, 255, .14); border-color: rgba(2, 255, 255, .45); color: var(--cyan)
}

/* ---- Der Katalog: eine Spalte, Ticket fuer Ticket ---- */
.ld .ttkatalog { display: flex; flex-direction: column; gap: var(--s3); max-width: 860px }
.ld .ttkgrp {
    background: var(--p2); border: 1px solid var(--dim); border-left: 3px solid var(--bf, var(--tt-technik));
    border-radius: var(--r-card); padding: var(--s3)
}
.ld .ttkgrp.b-kundenseite { --bf: var(--tt-kundenseite) }
.ld .ttkgrp.b-tresen { --bf: var(--tt-tresen) }
.ld .ttkgrp.b-planung { --bf: var(--tt-planung) }
.ld .ttkgrp.b-engine { --bf: var(--tt-engine) }
.ld .ttkgrp.b-zahlung { --bf: var(--tt-zahlung) }
.ld .ttkgrp.b-marke { --bf: var(--tt-marke) }
.ld .ttkgrp.b-technik { --bf: var(--tt-technik) }
.ld .ttkgrp > header {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
    margin-bottom: var(--s3)
}
.ld .ttktitel {
    flex: 1 1 240px; min-width: 0; text-align: left;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font); font-size: var(--fs-14); font-weight: 700; color: var(--text)
}
.ld .ttktitel:hover { color: var(--cyan) }

/* ---- Eine Frage ---- */
.ld .ttfragen { display: flex; flex-direction: column; gap: var(--s2) }
.ld .ttfrage {
    display: flex; gap: var(--s2); align-items: flex-start;
    padding: var(--s2); border-radius: var(--r-ctl);
    background: var(--field); border: 1px solid var(--dim)
}
.ld .ttfrage.offen { border-color: rgba(2, 255, 255, .30) }
.ld .ttfrage.fertig { opacity: .78 }
/* Die Nummer ist die Verbindung zum Ticket: dort steht "3." in der Liste
   und "## Frage-Antwort 3" beim Verlauf. Ohne sie waere nach dem Antworten
   nicht mehr zu erkennen, worauf sich die Antwort bezieht. */
.ld .ttfnr {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
    display: grid; place-items: center; border-radius: 999px;
    font-size: var(--fs-11); font-weight: 800; line-height: 1;
    background: var(--p2); border: 1px solid var(--dim); color: var(--muted)
}
.ld .ttfrage.offen .ttfnr { background: var(--cyan); border-color: var(--cyan); color: var(--p1) }
.ld .ttfleib { flex: 1 1 auto; min-width: 0 }
.ld .ttftext { font-size: var(--fs-13); line-height: 1.5; color: var(--text) }
.ld .ttfrage.fertig .ttftext { color: var(--muted) }
.ld .ttfstart { margin-top: var(--s2); font-size: var(--fs-12); padding: 5px 12px; border-radius: var(--r-ctl) }
.ld .ttfkn { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2) }
.ld .ttfkn .minibtn { font-size: var(--fs-12); padding: 6px 12px; border-radius: var(--r-ctl) }
.ld .ttfragen textarea.ttgrund {
    width: 100%; margin-top: var(--s2); min-height: 68px;
    font-size: var(--fs-14); border-radius: var(--r-ctl)
}
.ld .ttfantwort {
    margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--dim);
    font-size: var(--fs-13); color: var(--muted); line-height: 1.5
}
.ld .ttfantwort b {
    font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lime)
}
.ld .ttfantwort .ttfzeit { margin-left: var(--s2); font-size: var(--fs-11); color: var(--muted2) }
.ld .ttfantwort p { margin: 4px 0 0; white-space: pre-wrap; color: var(--text) }

/* Am Telefon steht die Nummer ueber der Frage statt daneben: 20 px Badge
   plus Text nebeneinander laesst auf 360 px Breite keine lesbare Zeile. */
@media (max-width: 560px) {
    .ld .ttfrage { flex-direction: column; gap: var(--s1) }
    .ld .ttkatalog { max-width: none }
}