/* =========================================================
   Reskin für das echte ttmember-Plugin (Shortcodes)
   Nur CSS – Funktionen/HTML-Struktur des Plugins bleiben unverändert.
   Schritt 1: [dc_tickets]
   ========================================================= */

/* Eigene Überschrift des Shortcodes ausblenden – Topbar/Section-Head übernehmen das */
.dc-tickets-section > h4 { display: none; }

/* "Alte Tickets anzeigen"-Checkbox als Toggle-Zeile statt nacktem Häkchen */
#display-old-tickets-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
#display-old-tickets-checkbox + label {
	/* position: relative so the thumb (::after) below positions against
	   this switch track itself, not against a distant positioned ancestor
	   such as .tt-app - same fix as #display-archived-messages-checkbox /
	   #display-old-workshops-checkbox further down in this file. Regressed
	   once already (see roadmap.txt) because this rule lives on the
	   feature/m9-veranstaltungen branch line, which forked before that
	   earlier fix commit existed on its own branch and never got it merged in. */
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text-muted);
	margin: 0 0 16px;
	cursor: pointer;
}
#display-old-tickets-checkbox + label::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 20px;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-line);
	position: relative;
	transition: background .15s ease;
	flex-shrink: 0;
}
#display-old-tickets-checkbox + label::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--tt-white);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
#display-old-tickets-checkbox:checked + label::before { background: var(--tt-magenta); }
#display-old-tickets-checkbox:checked + label::after { transform: translateX(14px); }

/* Ticket-Liste: aus dem 2-Spalten-Grid der alten Website wird eine App-Liste.
   !important auf display/flex-direction/align-items: das echte ttmember-Plugin
   bringt in seiner eigenen assets/css/custom.css eine konkurrierende Regel mit
   ("display: grid; grid-template-columns: 1fr 1fr;" fuer .dc-tickets - noch
   aus der alten 2-Spalten-Website-Optik). Gleiche Selektor-Spezifitaet, daher
   entscheidet allein die Ladereihenfolge der beiden Stylesheets, wessen Regel
   gewinnt - auf app.el-sonador.de gewann bisher zufaellig das Plugin-CSS, was
   die App-Liste wieder zum 2-Spalten-Bildraster gemacht und dabei einzelne
   .dc-ticket-Karten so schmal werden liess, dass ein langer Ticket-Titel ohne
   Leerzeichen (z. B. "Dankeschoen-Ticket") buchstabenweise umgebrochen ist
   (Miron-Meldung 06.09.2026, Screenshot "eine aktive Ticket-Karte optisch
   kaputt"). !important macht unser Listen-Layout unabhaengig von der
   Ladereihenfolge verbindlich - siehe gleiches Vorgehen weiter unten bei
   .dc-points-table (Plugin-Inline-Styles). */
.dc-tickets {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px;
	margin-top: 0;
}
.dc-tickets .dc-ticket {
	display: flex !important;
	align-items: center !important;
	gap: 14px;
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 10px 14px;
	color: var(--tt-text);
	border-left: 6px solid var(--tt-magenta);
}
.dc-tickets .dc-ticket.dc-old-ticket { border-left-color: var(--tt-text-muted); opacity: 0.72; }
.dc-tickets .dc-ticket:hover,
.dc-tickets a.dc-ticket:hover { opacity: 0.85; color: inherit; }

/* Regression (Miron-Meldung 06.09.2026, Nachmittag): der !important-Fix oben
   auf ".dc-tickets .dc-ticket" (display: flex !important) traf versehentlich
   auch .dc-old-ticket und hat damit ttmember's eigenen Ein-/Ausblenden-
   Mechanismus fuer "Alte Tickets anzeigen" ausgehebelt. Der lebt in ttmember's
   eigener assets/css/custom.css als reiner CSS-Checkbox-Hack (kein JS):
   "#display-old-tickets-checkbox + label + .dc-tickets .dc-old-ticket
   { display: none }" bzw. "...:checked... { display: block }" (beides ohne
   !important) - unsere !important-Regel oben gewann unabhaengig vom
   Checkbox-Status immer, alte Tickets blieben dauerhaft sichtbar (oder je
   nach Ladereihenfolge dauerhaft unsichtbar), der Haken hatte keine Wirkung
   mehr. Eigene Regel hier stellt den Toggle wieder her - gleiche
   Selektorkette wie ttmember's Original (damit sie nur bei tatsaechlich
   vorhandenem Checkbox+Label greift), zusaetzliche .dc-ticket-Klasse fuer
   hoehere Spezifitaet plus !important, damit sie sowohl ttmember's Regel als
   auch unsere eigene ".dc-tickets .dc-ticket"-Regel darueber zuverlaessig
   schlaegt, unabhaengig von der Stylesheet-Ladereihenfolge. */
#display-old-tickets-checkbox + label + .dc-tickets .dc-ticket.dc-old-ticket {
	display: none !important;
}
#display-old-tickets-checkbox:checked + label + .dc-tickets .dc-ticket.dc-old-ticket {
	display: flex !important;
}

/* max-width/width/height/margin-bottom als !important aus demselben Grund wie
   oben bei .dc-tickets: das Plugin-eigene custom.css setzt fuer dieselbe
   Klasse "max-width: 250px; display: block; margin-bottom: 10px;" (Bild
   ueber voller Kartenbreite, alte Website-Optik) - gleiche Spezifitaet,
   ladereihenfolge-abhaengig. border-radius eigene Theme-Regel (nicht aus dem
   Plugin): erst von 10px auf 6px reduziert (Miron-Meldung 06.09.2026:
   wirkte auf der 46px-Box fast rund), auf Miron's erneute Rueckmeldung
   06.09.2026 (immer noch fast rund, "muss viel weniger sein") jetzt auf 3px -
   auf der kleinen 46px-Box deutlich als leicht angerundetes Quadrat statt
   als rund wirkende Ecke erkennbar. */
.dc-ticket-image {
	max-width: none !important;
	width: 46px !important;
	height: 46px !important;
	object-fit: cover;
	border-radius: 3px;
	margin-bottom: 0 !important;
	flex-shrink: 0;
}

/* margin-top: 0 gegen den UA-Default-Abstand von h5 (typisch ~1.5em) - ohne
   das stand die Ticket-Ueberschrift sichtbar zu weit unten in der Karte statt
   mittig neben dem Bild (Miron-Meldung 06.09.2026, Screenshot Ticketliste).
   h1-h4 werden weiter oben in app.css global auf margin:0 zurueckgesetzt,
   h5 aber nicht - dieser Ticket-Titel ist das einzige h5 im Theme. */
.dc-tickets .dc-ticket h5 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14.5px;
	font-weight: 700;
	font-family: var(--tt-font-heading);
	line-height: 1.3;
	flex: 1 1 0%;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.dc-tickets .dc-ticket h5 span {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tt-text-muted);
	font-family: var(--tt-font-body);
	margin-top: 2px;
}

.dc-ticket-quantity {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--tt-success);
	flex-shrink: 0;
	flex-basis: 92px;
	text-align: right;
	padding-left: 8px;
	line-height: 1.35;
}
.dc-old-ticket .dc-ticket-quantity { color: var(--tt-text-muted); }

/* Horizontale Kartenreihe, wenn der Shortcode auf Home eingebettet wird */
.tt-ticketrow .dc-tickets-section > * { }
.tt-ticketrow .dc-tickets {
	flex-direction: row;
	overflow-x: auto;
	margin: 0 -20px;
	padding: 2px 20px 4px;
	scrollbar-width: none;
}
.tt-ticketrow .dc-tickets::-webkit-scrollbar { display: none; }
.tt-ticketrow .dc-tickets .dc-ticket {
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	width: 150px;
	border-left: none;
	border-top: 6px solid var(--tt-magenta);
}
.tt-ticketrow .dc-tickets .dc-ticket.dc-old-ticket { border-top-color: var(--tt-text-muted); }
.tt-ticketrow .dc-ticket-image { width: 100%; height: 56px; border-radius: 3px; }
.tt-ticketrow #display-old-tickets-checkbox,
.tt-ticketrow #display-old-tickets-checkbox + label { display: none !important; }

/* =========================================================
   Ticket-Detail (animatedModal-Popup)
   ========================================================= */
/* animatedModal.min.js setzt den Ueberlay-Wrapper #modal-xxx per Inline-Style
   auf position:fixed; top:0; left:0; width/height:100%; z-index:9999 (siehe
   Lib-Defaults) - unveraenderbar ohne den Plugin-Code anzufassen. Miron-
   Meldung 06.09.2026: Ticket-Detail oeffnet ganz oben im Fenster, der
   Kartenkopf (Titel/Ticket-Nummer) ist zur Haelfte nicht sichtbar. Ursache 1:
   die WP-Admin-Leiste (angemeldete Ansicht, position:fixed, WP-Standard-
   z-index 99999) liegt ueber dem Modal-Overlay (9999) und verdeckt dessen
   obere ~32/46px - !important auf z-index hier gewinnt gegen den Inline-Wert,
   da Inline-Styles ohne eigenes !important gegen ein !important im
   Stylesheet verlieren. Ursache 2: .modal-content hatte "margin-top: 0" statt
   vertikaler Zentrierung, stand also immer ganz oben im Overlay statt mittig
   im Viewport. Fix: Overlay als Flex-Container, Zentrierung ueber
   "margin: auto" auf der Karte selbst (nicht align-items/justify-content
   center auf dem Container) - so bleibt eine laengere Karte (z. B. mit
   Verlauf/History) weiterhin komplett ueber overflow-y:auto von oben an
   scrollbar, statt oben abgeschnitten zu werden (bekannter Flexbox-
   "Centering + Overflow"-Bug bei align-items/justify-content: center). */
/* IMPORTANT (0.19.4): the raised z-index must ONLY apply while a modal is
   open. animatedModal keeps every CLOSED modal in the DOM as a full-screen
   position:fixed layer (inline z-index:-9999; opacity:0) and only flips it
   to z-index:9999 on open. Forcing 100000 !important unconditionally lifted
   all those invisible closed layers above the whole page (and the WP admin
   bar) - every page rendering a [dc_*] shortcode with modals (Tickets,
   Dashboard, Profile, Messages) looked "frozen": nothing was clickable.
   Open state = class "<id>-on", closed = "<id>-off" (set by the lib). */
div[id^="modal-"] {
	display: flex;
	color: var(--tt-text);
	pointer-events: none;
}
div[id^="modal-"][class*="-on "],
div[id^="modal-"][class$="-on"] {
	z-index: 100000 !important;
	pointer-events: auto;
}
div[id^="modal-"] .modal-content {
	margin: auto;
	text-align: left;
	color: var(--tt-text);
	background: var(--tt-white);
	max-width: 380px;
	width: calc(100% - 32px);
	border-radius: var(--tt-radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
div[id^="modal-"] .dc-modal-header {
	max-width: none;
	margin: 0;
	background: linear-gradient(135deg, var(--tt-magenta) 0%, var(--tt-magenta-dark) 100%);
	color: var(--tt-white);
	padding: 18px 50px 16px 18px;
	min-height: 0;
}
div[id^="modal-"] .dc-modal-title { max-width: none; margin: 0; font-family: var(--tt-font-heading); font-weight: 700; font-size: 16px; }
div[id^="modal-"] .dc-modal-title span { font-size: 13px; opacity: .85; }
div[id^="modal-"] .dc-modal-header .ticket-number { font-size: 11px; opacity: .75; margin-top: 6px; }
div[id^="modal-"] .closebt-container { top: 16px; right: 14px; margin: 0; width: 22px; }
/* closebt.svg ships WHITE (circle + cross, stroke #FFFFFF). The generic
   invert(1) turns it black for modals on a white card; inside the magenta
   .dc-modal-header (ticket detail) it must stay white -> filter: none
   (Miron 14.09.2026). */
div[id^="modal-"] .closebt { filter: invert(1); width: 18px; }
div[id^="modal-"] .dc-modal-header .closebt { filter: none; opacity: .95; }
div[id^="modal-"] .dc-modal-memo { max-width: none; margin: 0; padding: 16px 18px 20px; font-size: 13.5px; line-height: 1.6; }

/* ---------------------------------------------------------
   Video pop-up (1.2.3) - Vimeo iframe from ttmember dashboard
   Markup (ttmember, unchanged): #modal-ID > .modal-content > .dc-modal-video
   > .dc-vimeo-header (+ .closebt-container, .dc-vimeo-title) + iframe
   (fixed width=640 height=360) + .dc-vimeo-memo.
   Problem: the generic ticket card above (max-width 380px, overflow hidden)
   also caught this pop-up, so on phones the 640px iframe was cut off on the
   right (play bar / fullscreen button gone) and the title on the left.
   Fix: wider card, responsive 16:9 iframe, header/memo styled like the ticket
   card. In landscape the card width is limited by the viewport height so the
   whole player stays visible without scrolling.
   --------------------------------------------------------- */
div[id^="modal-"] .modal-content:has(.dc-modal-video) {
	max-width: none;
	width: min(720px, calc(100% - 32px));
	width: min(720px, calc(100% - 32px), max(260px, calc((100dvh - 150px) * 16 / 9)));
}
div[id^="modal-"] .dc-modal-video iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	border: 0;
	background: #000;
}
div[id^="modal-"] .dc-vimeo-header {
	max-width: none;
	margin: 0;
	background: linear-gradient(135deg, var(--tt-magenta) 0%, var(--tt-magenta-dark) 100%);
	color: var(--tt-white);
	padding: 16px 50px 14px 18px;
	min-height: 0;
}
div[id^="modal-"] .dc-vimeo-title { max-width: none; margin: 0; font-family: var(--tt-font-heading); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
div[id^="modal-"] .dc-vimeo-header .closebt { filter: none; opacity: .95; }
div[id^="modal-"] .dc-vimeo-memo { max-width: none; margin: 0; padding: 14px 18px 18px; font-size: 13.5px; line-height: 1.6; }
div[id^="modal-"] .dc-vimeo-memo:empty { display: none; }

/* =========================================================
   Schritt 2: [dc_workshops] (Termine)
   Nur CSS - Funktionen/HTML-Struktur des Plugins bleiben unveraendert.
   Aus der Vue-Tabelle wird optisch eine Kartenliste (echtes <table> bleibt
   im DOM, damit die Vue-Bindings (v-for/v-on) unangetastet funktionieren).
   ========================================================= */

/* Eigene Ueberschrift ausblenden - Topbar uebernimmt das */
#dc-workshops-section > h4 { display: none; }

.dc-workshops { display: flex; flex-direction: column; gap: 16px; margin-top: 0; }

/* ---------------------------------------------------------
   Filter (3x vue-multiselect) - stacked full-width rows
   0.23.2: was a 3-column chip row; on phones the columns were ~100px wide,
   the dropdown got clipped to its column and the selected tag used the
   dark colour. Now each filter is its own full-width pill, tags are
   magenta, the dropdown spans the full width.
   --------------------------------------------------------- */
.dc-workshop-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.workshop-type-wrapper,
.workshop-location-wrapper,
.workshop-day-of-week-wrapper {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}
.dc-workshop-filters .multiselect {
	min-height: 0;
	font-size: 13px;
}
.dc-workshop-filters .multiselect__tags {
	min-height: 44px;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-pill);
	background: var(--tt-white);
	padding: 8px 40px 8px 14px;
	display: flex;
	align-items: center;
}
.dc-workshop-filters .multiselect__select { height: 44px; padding-right: 14px; }
.dc-workshop-filters .multiselect__select::before { border-color: var(--tt-text-muted) transparent transparent; }
.dc-workshop-filters .multiselect__placeholder,
.dc-workshop-filters .multiselect__single {
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text-muted);
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: break-word;
}
.dc-workshop-filters .multiselect__tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-workshop-filters .multiselect__tag {
	margin: 0;
	padding: 4px 24px 4px 10px;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-magenta);
	color: var(--tt-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}
.dc-workshop-filters .multiselect__tag-icon { line-height: 24px; border-radius: 0 var(--tt-radius-pill) var(--tt-radius-pill) 0; }
.dc-workshop-filters .multiselect__tag-icon::after { color: rgba(255,255,255,0.8); }
.dc-workshop-filters .multiselect__tag-icon:hover,
.dc-workshop-filters .multiselect__tag-icon:focus { background: var(--tt-magenta-dark); }
.dc-workshop-filters .multiselect__tag-icon:hover::after,
.dc-workshop-filters .multiselect__tag-icon:focus::after { color: var(--tt-white); }
.dc-workshop-filters .multiselect--active .multiselect__tags { border-color: var(--tt-magenta); border-radius: var(--tt-radius-pill); }
.dc-workshop-filters .multiselect--active .multiselect__select { transform: rotateZ(180deg); }
.dc-workshop-filters .multiselect__content-wrapper {
	width: 100%;
	border-radius: var(--tt-radius-md);
	border: 1px solid var(--tt-line);
	box-shadow: var(--tt-shadow);
	margin-top: 6px;
	overflow: hidden auto;
}
.dc-workshop-filters .multiselect__option { font-size: 13px; padding: 10px 14px; min-height: 0; white-space: normal; }
.dc-workshop-filters .multiselect__option--highlight { background: var(--tt-magenta) !important; color: var(--tt-white); }
.dc-workshop-filters .multiselect__option--selected.multiselect__option--highlight { background: var(--tt-magenta-dark) !important; }
.dc-workshop-filters .multiselect__option--highlight::after { display: none !important; }
.dc-workshop-filters .multiselect__option--selected { background: rgba(142, 22, 86, 0.08); font-weight: 600; }

/* ---------------------------------------------------------
   Termin-Tabelle -> Kartenliste
   Table/Zeilen bleiben technisch eine Tabelle (Vue braucht das DOM),
   werden aber wie App-Karten dargestellt.
   --------------------------------------------------------- */
#dc-workshops-table-wrapper table {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	border-collapse: collapse;
}
#dc-workshops-table-wrapper tbody { display: contents; }

tr.dc-workshop--item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 14px;
	color: var(--tt-text);
	max-width: 100%;
}

/* Sicherheitsnetz (04.08.2026, Bugfix Desktop-Ueberlauf):
   Flex-Kinder haben per Default min-width:auto - ein <td>, dessen Inhalt
   (z. B. ein vom Plugin evtl. zusaetzlich ausgegebenes Trainer-Foto/<img>)
   breiter ist als die verfuegbare Zeilenbreite, kann dadurch die ganze Karte
   und damit die Mobil-breite App-Huelle (.tt-app) nach rechts aufreissen.
   Auf schmalen Handy-Viewports faellt das kaum auf, auf Desktop-Breiten
   schon (sichtbarer grauer Rand rechts/links von .tt-app). min-width:0
   erlaubt jeder Zelle, auf ihre verfuegbare Breite zu schrumpfen; ein
   generisches img-Limit faengt zusaetzlich jedes Bild ab, das die
   Kartenzeile ohne eigene Groessenangabe sprengen wuerde - unabhaengig
   davon, in welcher Spalte/Klasse es das Plugin ausgibt. Nur CSS, keine
   ttmember-Aenderung. */
tr.dc-workshop--item > td {
	min-width: 0;
	max-width: 100%;
}
tr.dc-workshop--item img {
	max-width: 40px;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Zeile 1: Datum-Badge links, Button rechts */
tr.dc-workshop--item .dc-workshop-date {
	order: 1;
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--tt-magenta);
	background: rgba(142, 22, 86, 0.09);
	padding: 4px 10px;
	border-radius: var(--tt-radius-pill);
}
tr.dc-workshop--item .dc-workshop-register {
	order: 2;
	margin-left: auto;
}

/* Zeile 2: Titel, volle Breite -> erzwingt Zeilenumbruch im Flex-Wrap */
tr.dc-workshop--item .dc-workshop-title {
	order: 3;
	flex: 0 0 100%;
	font-family: var(--tt-font-heading);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	margin-top: 4px;
}

/* Zeile 3: Ort · Uhrzeit · Trainer, als Meta-Zeile */
tr.dc-workshop--item .dc-workshop-location,
tr.dc-workshop--item .dc-workshop-time,
tr.dc-workshop--item .dc-workshop-trainer {
	font-size: 12.5px;
	color: var(--tt-text-muted);
}
tr.dc-workshop--item .dc-workshop-location { order: 4; }
tr.dc-workshop--item .dc-workshop-time { order: 5; }
tr.dc-workshop--item .dc-workshop-trainer { order: 6; }
tr.dc-workshop--item .dc-workshop-time::before,
tr.dc-workshop--item .dc-workshop-trainer::before {
	content: "·";
	margin: 0 6px;
	color: var(--tt-line);
}

/* Anmelden/Cancel-Button */
tr.dc-workshop--item .dc-workshop-register button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 9px 16px;
	border-radius: var(--tt-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	background: var(--tt-magenta);
	color: var(--tt-white);
}
tr.dc-workshop--item .dc-workshop-register button.dc-cancel-workshop {
	background: var(--tt-white);
	color: #B3413B;
	border: 1.5px solid #B3413B;
}
tr.dc-workshop--item .dc-workshop-register button.dc-hidden-cancel-workshop {
	display: none;
}
tr.dc-workshop--item .dc-workshop-register button.dc-workshop-started {
	background: var(--tt-line);
	color: var(--tt-text-muted);
	pointer-events: none;
}

/* =========================================================
   Schritt 3: [dc_messages] (Mitteilungen, M4)
   Card list, tap-to-expand chat thread. Only theme CSS - plugin
   HTML/JS (jQuery slideToggle, AJAX send/read/archive) untouched.
   ========================================================= */

/* Own heading hidden - the page topbar already shows "Mitteilungen" */
.dc-messages > h4 { display: none; }

/* "Archivierte Nachrichten anzeigen" toggle, same pill-switch pattern as
   #display-old-tickets-checkbox above. Unlike that one, the label here
   gets its own "position: relative" so the thumb (::after) is positioned
   against the switch track itself, not against a distant positioned
   ancestor such as .tt-app. */
#display-archived-messages-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
#display-archived-messages-checkbox + label {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text-muted);
	margin: 0 0 16px;
	cursor: pointer;
}
#display-archived-messages-checkbox + label::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 20px;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-line);
	transition: background .15s ease;
	flex-shrink: 0;
}
#display-archived-messages-checkbox + label::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tt-white);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
#display-archived-messages-checkbox:checked + label::before { background: var(--tt-magenta); }
#display-archived-messages-checkbox:checked + label::after { transform: translateX(14px); }

.dc-messages { position: relative; }
.dc-messages-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 0;
}

/* Message card. Left accent border marks a thread with an unread reply
   (:has() - safe to rely on, all target browsers support it). */
.dc-messages .dc-message.dc-message-main-wrapper {
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 14px 16px;
	border-left: 4px solid transparent;
	border-bottom: none;
}
.dc-messages .dc-message.dc-message-main-wrapper:has(.dc-message-body.unread) {
	border-left-color: var(--tt-magenta);
}
.dc-messages .dc-message-main-wrapper.dc-message-archived {
	opacity: 0.68;
}

/* Card head: subject + date + chevron, click target for the plugin's own
   expand/collapse (jQuery toggles "expanded" and slideToggle()s
   .dc-answers). The plugin's own "+"/"-" text indicator is replaced by a
   small CSS chevron, right-aligned like the app's other list rows. */
.dc-messages .dc-message-main {
	padding-left: 0;
	padding-right: 24px;
}
.dc-messages .dc-message-main::before {
	content: "";
	top: 6px;
	left: auto;
	right: 2px;
	width: 8px;
	height: 8px;
	background: none;
	border-right: 2px solid var(--tt-text-muted);
	border-bottom: 2px solid var(--tt-text-muted);
	transform: rotate(45deg);
	transition: transform .2s ease, top .2s ease;
}
.dc-messages .expanded .dc-message-main::before {
	content: "";
	top: 10px;
	transform: rotate(225deg);
}
.dc-messages .dc-message-subject {
	margin: 0 0 3px;
	font-family: var(--tt-font-heading);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--tt-text);
}
.dc-messages .dc-message-date {
	opacity: 1;
	font-size: 11px;
	color: var(--tt-text-muted);
}
.dc-messages .expanded .dc-message-body {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tt-text);
}

/* Reply thread: plain block flow. jQuery's slideToggle() forces an inline
   display:block while animating, so the container itself can't rely on
   CSS flex - left/right alignment happens per bubble via
   margin-left/margin-right:auto instead. */
.dc-messages .dc-answers {
	padding-left: 0;
	margin-top: 4px;
}
.dc-messages .dc-answers .dc-answer {
	max-width: 82%;
	padding: 8px 12px;
	margin-top: 8px;
	border-radius: var(--tt-radius-md);
	background: var(--tt-cream);
	font-size: 13px;
}
.dc-messages .dc-answers .dc-answer .dc-message-date {
	display: block;
	font-size: 10.5px;
	margin-bottom: 2px;
}
.dc-messages .dc-answers .dc-answer .dc-message-body {
	font-size: 13px;
	line-height: 1.5;
}
/* Team reply (mes_answer_wername set -> subject h5 present): left bubble */
.dc-messages .dc-answers .dc-answer:has(.dc-message-subject) {
	margin-right: auto;
	border-bottom-left-radius: 4px;
}
.dc-messages .dc-answers .dc-answer .dc-message-subject {
	display: block;
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tt-magenta);
}
/* Own reply (no subject) -> right bubble, brand color */
.dc-messages .dc-answers .dc-answer:not(:has(.dc-message-subject)) {
	margin-left: auto;
	background: var(--tt-magenta);
	color: var(--tt-white);
	border-bottom-right-radius: 4px;
}
.dc-messages .dc-answers .dc-answer:not(:has(.dc-message-subject)) .dc-message-date {
	color: rgba(255,255,255,0.75);
}

/* Read button (main message + team replies), small pill */
.dc-message-button,
.dc-message-read-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	min-width: 0;
	margin-left: 8px;
	padding: 4px 12px;
	border: none;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-magenta);
	color: var(--tt-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: middle;
}

/* Archive action: quiet text-link row under the card instead of the
   plugin default (absolute, pinned top-right, overlaps the subject) */
.dc-message-archive-button {
	position: static;
	display: block;
	z-index: auto;
	width: fit-content;
	margin: 8px 0 0 auto;
	padding: 0;
	background: none;
	border: none;
	color: var(--tt-text-muted);
	font-size: 11px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dc-message-archive-button:disabled {
	opacity: 0.55;
	text-decoration: none;
	cursor: default;
}

/* Reply input row (send-answer-form) */
.dc-messages .send-answer-form {
	margin: 10px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.dc-messages .send-answer-form [name="answer_text"] {
	flex: 1;
	max-width: none;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-pill);
	padding: 9px 16px;
	font-family: inherit;
	font-size: 13px;
	color: var(--tt-text);
	background: var(--tt-white);
}
.dc-messages .send-answer-form [name="answer_text"]:focus {
	outline: none;
	border-color: var(--tt-magenta);
}
.dc-message-archived .send-answer-form { display: none; }

.dc-messages .send-answer-btn {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	margin-left: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--tt-magenta);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dc-messages .send-answer-btn svg {
	max-width: 15px;
	max-height: 15px;
	padding-top: 0;
	margin-left: 2px;
}

/* "+ Neue Nachricht" -> dashed outline pill below the message list */
#send-message-modal-btn {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	padding: 12px;
	background: var(--tt-white);
	border: 1.5px dashed var(--tt-magenta);
	border-radius: var(--tt-radius-pill);
	color: var(--tt-magenta);
	font-size: 13px;
	font-weight: 700;
}

/* New-message modal - reuses the generic div[id^="modal-"] card shell
   (see [dc_tickets] section above), only header/form need own styles. */
#modal-send-message-form .dc-send-message-form-header {
	max-width: none;
	margin: 0;
	min-height: 0;
	padding: 20px 0;
	position: relative;
}
#modal-send-message-form h5 {
	margin: 0 0 14px;
	color: var(--tt-dark);
	text-align: left;
	font-family: var(--tt-font-heading);
	font-weight: 700;
	font-size: 16px;
}
#modal-send-message-form .closebt-container {
	top: 2px;
	right: 0;
	width: 22px;
	margin: 0;
}
#modal-send-message-form .closebt {
	filter: none;
	opacity: 0.5;
	width: 16px;
}
#modal-send-message-form .dc-send-message-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	padding-bottom: 20px;
}
#modal-send-message-form .dc-send-message-form input[type="text"],
#modal-send-message-form .dc-send-message-form textarea {
	width: 100%;
	margin-bottom: 0;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-md);
	padding: 11px 14px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--tt-text);
	background: var(--tt-white);
	resize: vertical;
}
#modal-send-message-form .dc-send-message-form input[type="text"]:focus,
#modal-send-message-form .dc-send-message-form textarea:focus {
	outline: none;
	border-color: var(--tt-magenta);
}
#modal-send-message-form .dc-send-message-btn {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--tt-magenta);
	display: flex;
	align-items: center;
	justify-content: center;
}
#modal-send-message-form .dc-send-message-btn svg {
	max-width: 16px;
	max-height: 16px;
	padding-top: 0;
	margin-left: 2px;
}

/* Stray closing <hr> the shortcode always appends */
.dc-messages + hr { display: none; }

/* =========================================================
   Schritt 4: M5 Profil/Account (Login, Registrierung, Passwort,
   Profil loeschen, Bestaetigungs-Meldungen)
   Nur CSS - Funktionen/HTML-Struktur des Plugins bleiben unveraendert.
   Jedes <form> ist bereits das oberste Element des Shortcodes, wird hier
   direkt als Karte gestylt (kein zusaetzlicher Wrapper noetig).
   ========================================================= */
.dc-login-form,
.dc-self-registration-form,
.dc-registration-form,
.dc-change-password-form,
.dc-reset-password-form,
.dc-set-new-password-form,
.dc-delete-profile-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--tt-white);
	border-radius: var(--tt-radius-lg);
	box-shadow: var(--tt-shadow);
	padding: 20px;
	margin: 0;
}

/* Eingabefelder – einheitlich pillenfoermig wie die Nachrichten-Eingabe */
.dc-login-form input[type="text"],
.dc-login-form input[type="password"],
.dc-self-registration-form input[type="text"],
.dc-self-registration-form input[type="tel"],
.dc-self-registration-form input[type="email"],
.dc-self-registration-form input[type="password"],
.dc-registration-form input[type="email"],
.dc-registration-form input[type="text"],
.dc-change-password-form input[type="password"],
.dc-reset-password-form input[type="email"],
.dc-reset-password-form input[type="text"],
.dc-set-new-password-form input[type="password"] {
	width: 100%;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-md);
	padding: 12px 16px;
	font-family: inherit;
	font-size: 14px;
	color: var(--tt-text);
	background: var(--tt-white);
}
.dc-login-form input:focus,
.dc-self-registration-form input:focus,
.dc-registration-form input:focus,
.dc-change-password-form input:focus,
.dc-reset-password-form input:focus,
.dc-set-new-password-form input:focus {
	outline: none;
	border-color: var(--tt-magenta);
}
/* Plugin bricht Felder teils mit <br> um (dc-login-form etc.) - im Flex-Layout ueberfluessig */
.dc-login-form br,
.dc-registration-form br,
.dc-change-password-form br,
.dc-reset-password-form br { display: none; }
/* Self-Registration wrapt jedes Feld zusaetzlich in ein <div> - kein Eigenstyling noetig */
.dc-self-registration-form > div { margin: 0; }

/* Absenden-Buttons (input[type=submit] + button.gdlr-button bei Self-Registration) */
.dc-login-form input[type="submit"],
.dc-self-registration-form button.gdlr-button,
.dc-registration-form input[type="submit"],
.dc-change-password-form input[type="submit"],
.dc-reset-password-form input[type="submit"],
.dc-set-new-password-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 13px 18px;
	border-radius: var(--tt-radius-pill);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	background: var(--tt-magenta);
	color: var(--tt-white);
	margin-top: 4px;
	cursor: pointer;
}

/* Profil loeschen - destruktive Aktion, eigener Rot-Ton wie .tt-menu-row--danger */
.dc-delete-profile-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #B3413B;
	padding: 13px 18px;
	border-radius: var(--tt-radius-pill);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	background: var(--tt-white);
	color: #B3413B;
	cursor: pointer;
}

/* Status-/Fehlermeldungen (Login, Registrierung, Passwort aendern, Self-Registration) */
.dc-login-message,
.dc-registration-message,
.dc-change-password-message,
.dc-self-registration-message:not(:empty),
.dc-set-new-password-message:not(:empty) {
	background: var(--tt-cream);
	border-left: 4px solid var(--tt-magenta);
	border-radius: var(--tt-radius-sm);
	padding: 12px 14px;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tt-text);
}
.dc-login-message p,
.dc-registration-message p { margin: 0; }

/* "Eingeloggt"-Anzeige von [dc_login_form], falls es ausserhalb von
   [tt_member_card] eingebunden wird (z. B. direkt auf /mitgliederbereich/) */
.dc-login-user-name,
.dc-login-user-id {
	font-size: 14px;
	color: var(--tt-text);
}
.dc-login-user-name { font-weight: 700; }

/* [dc_confirmation_message] - Bestaetigungsseite nach Self-Registration */
.dc-confirmation-message {
	background: var(--tt-white);
	border-radius: var(--tt-radius-lg);
	box-shadow: var(--tt-shadow);
	padding: 20px;
	border-left: 5px solid var(--tt-magenta);
}
.dc-confirmation-message h3 {
	margin: 0 0 8px;
	font-family: var(--tt-font-heading);
	font-size: 16px;
}
.dc-confirmation-message p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--tt-text); }
.dc-confirmation-message p:last-child { margin-bottom: 0; }
.dc-confirmation-success { border-left-color: var(--tt-success); }
.dc-confirmation-error { border-left-color: #B3413B; }
.dc-confirmation-info { border-left-color: var(--tt-magenta); }

/* =========================================================
   Schritt 5: M6 Punkte/Tanzschritte (dc_points)
   Nur CSS - Funktionen/HTML-Struktur des Plugins bleiben unveraendert.
   Die Tabellen-Zellen tragen feste Inline-Styles (style="padding:…" usw.)
   direkt im Plugin-HTML - Inline-Styles schlagen jede externe Regel, daher
   hier bewusst !important, wie schon in PROJEKT-STATUS.md als Vorgehen bei
   hartnaeckigen Plugin-Stilen dokumentiert.
   ========================================================= */
.dc-points-section { display: flex; flex-direction: column; gap: 16px; }

/* Eigene Ueberschrift ausblenden - die Topbar zeigt bereits "Punkte" */
.dc-points-section > h4 { display: none; }

/* Stand-Karte: aktueller Punktestand + Verfalls-Hinweis am Monatsende */
.dc-list-wrap { margin: 0; }
.dc-steps-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(135deg, var(--tt-magenta) 0%, var(--tt-magenta-dark) 100%);
	color: var(--tt-white);
	border-radius: var(--tt-radius-lg);
	box-shadow: var(--tt-shadow-hero);
	padding: 20px;
}
.dc-steps-total {
	font-family: var(--tt-font-heading);
	font-size: 14px;
	font-weight: 600;
}
.dc-steps-total strong {
	font-size: 24px;
	font-weight: 800;
	margin: 0 3px;
}
.dc-steps-expiring {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}
.dc-steps-expiring strong { color: var(--tt-white); }

/* Verlaufstabelle -> Karte mit schlanken Zeilen (echtes <table> bleibt im
   DOM). th/td tragen feste Inline-Styles aus dem Plugin (Padding,
   border-top, text-align) - Ausrichtung passt bereits (Datum/Info links,
   Punkte rechts), Optik wird per !important ueberschrieben. */
.dc-points-history {
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	overflow: hidden;
}
.dc-points-history table.dc-points-table { width: 100%; border-collapse: collapse; }
.dc-points-table thead th {
	padding: 10px 14px !important;
	background: var(--tt-cream);
	font-size: 10.5px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--tt-text-muted);
	border-top: none !important;
}
.dc-points-table tbody td {
	padding: 11px 14px !important;
	border-top: 1px solid var(--tt-line) !important;
	font-size: 13px;
	color: var(--tt-text);
}
.dc-points-table tbody tr:first-child td { border-top: none !important; }
.dc-points-table tbody td:last-child strong { color: var(--tt-magenta); font-weight: 700; }

/* Leer-/Gastzustand ("Bitte logge dich ein" / "noch keine Tanzschritte") */
.dc-points-section .dc-empty-note {
	background: var(--tt-cream);
	border-left: 4px solid var(--tt-magenta);
	border-radius: var(--tt-radius-sm);
	padding: 12px 14px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tt-text);
}

/* [dc_registration_link]/[dc_change_password_link]/[dc_reset_password_link]/
   [dc_delete_profile_link] geben bewusst nur ein nacktes <a href="…">…</a>
   ohne eigene Klasse zurueck - kein Selektor noetig, sie erben bereits die
   allgemeine Link-Optik aus .tt-page-content a (assets/css/app.css). Nur
   [dc_logout_button] traegt eine eigene Klasse: */
a.dc-logout-btn {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-magenta);
}

/* =========================================================
   Schritt 6: M8 Dashboard ([dc_dashboard] + optional eingebettete
   [dc_dashboard_workshops]/[dc_dashboard_packages]/[dc_dashboard_steps] -
   Miron bettet die gewuenschten Shortcodes selbst in die Textbin-Inhalte
   "mitglied_logout"/"mitglied_login" ein, siehe
   Textbin-Inhalte-was-wir-brauchen.md). Nur CSS - Funktionen/HTML-Struktur
   des Plugins bleiben unveraendert.
   ========================================================= */

/* [dc_dashboard] selbst ist nur ein duenner Wrapper um den Textbin-Inhalt
   (Willkommenstext + ggf. eingebettete Shortcodes). Statt der vielen
   einzelnen <hr>, die jeder [dc_dashboard_*]-Unterblock selbst anhaengt,
   sorgt hier Flex/Gap fuer einheitliche Abstaende. */
.dc-dashboard { display: flex; flex-direction: column; gap: 20px; }
.dc-dashboard hr { display: none; }

/* Ueberschriften der Unterbloecke ("Tanztermine"/"Monatspakete"/
   "Tanzschritte") BLEIBEN sichtbar (anders als bei den Einzelseiten oben) -
   auf dem Dashboard koennen mehrere Bloecke gleichzeitig auf einer Seite
   stehen, die Topbar-Ueberschrift der jeweiligen Einzelseite fehlt hier. */
.dc-dashboard-section > h4 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
}

/* ---------------------------------------------------------
   [dc_dashboard_workshops] - gebuchte Tanztermine (Dashboard).
   Reworked 14.09.2026 (theme 0.23.4): the plugin's custom.css (<782px)
   ships its own mobile rules for these rows (.dc-dashboard
   .dc-workshop--item { padding: 10px 0; border-bottom }, td:last-child
   { padding-bottom: 20px; border-bottom }, td.dc-workshop-date
   { margin-top: 10px }, .dc-workshops-wrap { margin/padding 20px }).
   Those beat the generic tr.dc-workshop--item card rules from M1 by
   specificity, which produced: text glued to the left card edge, a
   stray rule + white gap below "Absagen", too much air around the
   toggle. All selectors below are therefore scoped to
   .dc-dashboard-workshops .dc-list-of-workshops to outrank the plugin.
   Plugin (ttmember) untouched.

   Card layout (flex-wrap, order):
     row 1: date pill + time
     row 2: title (100%)
     row 3: location · teacher, empty td acts as line break
     row 4: action buttons "Kalender" + "Absagen", right aligned
   --------------------------------------------------------- */
.dc-dashboard-workshops .dc-workshops-wrap { display: block; margin: 0; padding: 0; }
.dc-dashboard-workshops .dc-list-of-workshops table {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	border-collapse: collapse;
}
.dc-dashboard-workshops .dc-list-of-workshops tbody { display: contents; }

.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 0;
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 14px;
	border: none;
	color: var(--tt-text);
	max-width: 100%;
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item:last-child { border: none; }
/* Plugin toggles old rows back to display:block - keep the flex card. */
#display-old-workshops-checkbox:checked + label + .dc-workshops-wrap tr.dc-old-workshop { display: flex; }

.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	overflow: visible;
	text-align: left;
}

/* row 1: date pill + time */
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-date {
	order: 1;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--tt-magenta);
	background: rgba(142, 22, 86, 0.09);
	padding: 4px 10px;
	border-radius: var(--tt-radius-pill);
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-time {
	order: 2;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text);
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-time::before {
	content: "";
	margin: 0;
}

/* row 2: title */
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-title {
	order: 3;
	flex: 0 0 100%;
	font-family: var(--tt-font-heading);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	margin-top: 8px;
}

/* row 3: location · teacher */
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-location,
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-teacher {
	font-size: 12.5px;
	color: var(--tt-text-muted);
	margin-top: 2px;
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-location { order: 4; }
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-teacher { order: 5; }
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-teacher::before {
	content: "·";
	margin: 0 6px;
	color: var(--tt-line);
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-teacher:empty::before { content: none; }
/* empty spacer td from the plugin -> forces the action row onto its own line */
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-teacher + td {
	order: 6;
	flex: 0 0 100%;
	height: 0;
}

/* row 4: action buttons */
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-calendar { order: 7; margin-left: auto; }
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-cancel { order: 8; flex: 0 0 auto; }
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-calendar:empty,
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-cancel:empty { display: none; }
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-calendar a,
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-cancel a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 7px 14px;
	min-height: 34px;
	border-radius: var(--tt-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	background: var(--tt-white);
	border: 1.5px solid var(--tt-magenta);
	color: var(--tt-magenta);
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-calendar a::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat;
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-cancel a {
	border-color: #B3413B;
	color: #B3413B;
}
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-calendar a:active,
.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item > td.dc-workshop-cancel a:active { opacity: 0.75; }

.dc-dashboard-workshops .dc-list-of-workshops tr.dc-workshop--item.dc-old-workshop { opacity: 0.6; }

/* "Alte Termine anzeigen" / "Alte Monatspakete anzeigen" - gleiches
   Pill-Switch-Muster wie #display-old-tickets-checkbox /
   #display-archived-messages-checkbox oben. Das Ein-/Ausblenden der alten
   Eintraege selbst erledigt bereits das Plugin per eigenem CSS
   (Sibling-Selektoren in dessen custom.css) - hier geht es nur um die
   Optik des Schalters. position:relative auf dem Label, damit der
   Schalter-Punkt (::after) gegen die eigene Schaltflaeche positioniert
   wird (gleicher Fix wie beim Mitteilungen-Archiv-Toggle, M4). */
#display-old-workshops-checkbox,
#display-old-packages-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
#display-old-workshops-checkbox + label,
#display-old-packages-checkbox + label {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text-muted);
	margin: 0 0 12px;
	cursor: pointer;
}
#display-old-workshops-checkbox + label::before,
#display-old-packages-checkbox + label::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 20px;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-line);
	transition: background .15s ease;
	flex-shrink: 0;
}
#display-old-workshops-checkbox + label::after,
#display-old-packages-checkbox + label::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tt-white);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
#display-old-workshops-checkbox:checked + label::before,
#display-old-packages-checkbox:checked + label::before { background: var(--tt-magenta); }
#display-old-workshops-checkbox:checked + label::after,
#display-old-packages-checkbox:checked + label::after { transform: translateX(14px); }

/* ---------------------------------------------------------
   [dc_dashboard_packages] (Monatspakete) + [dc_dashboard_package_details]
   (Detailseite, ueber den "Details"-Button verlinkt - teilt sich dieselbe
   Wrapper-Klasse .dc-dashboard-packages, daher hier mitgestylt). Das
   Plugin schaltet .dc-package--item-row unterhalb 782px bereits selbst auf
   Block-Layout um und zeigt die .label-mobile-only-Spans (unsere App ist
   immer schmal, das greift also immer) - wir muessen nur noch die Karten-
   Optik (Farben/Radius/Schatten/Buttons) daruebersetzen.
   --------------------------------------------------------- */
.dc-package-wrap { margin-top: 0; }
.dc-list-of-packages { display: flex; flex-direction: column; gap: 10px; }
.dc-package--item {
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 14px 16px !important;
}
.dc-dashboard .dc-package--item,
.dc-dashboard .dc-package--item:last-child { border-bottom: none !important; }
.dc-package--item.dc-old-package { opacity: 0.65; }
.dc-package--item-titles { display: none !important; }
.dc-package-name { font-family: var(--tt-font-heading); font-weight: 700; font-size: 14.5px; color: var(--tt-text); }
.dc-package-startdate,
.dc-package-quantity,
.dc-package-initalterm,
.dc-package-enddate {
	font-size: 12.5px;
	color: var(--tt-text-muted);
	margin-top: 2px;
}
.label-mobile-only { font-weight: 600; color: var(--tt-text-muted); }

.dc-dashboard-packages .gdlr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tt-radius-pill) !important;
	font-family: inherit;
	font-size: 12.5px !important;
	font-weight: 600;
	padding: 8px 14px !important;
	background: var(--tt-magenta);
	color: var(--tt-white);
	border: none;
	margin-top: 6px;
}
.dc-dashboard-packages .gdlr-button.outlined-btn {
	background: var(--tt-white);
	color: var(--tt-magenta);
	border: 1.5px solid var(--tt-magenta);
}
.dc-dashboard-packages .gdlr-button.dc-package-disabled-extend-btn {
	background: var(--tt-line);
	color: var(--tt-text-muted);
	border: none;
}

/* "Neues Monatspaket buchen" - gleicher gestrichelter Pill-Button wie
   "+ Neue Nachricht" (M4) / #add-package-modal-btn */
#add-package-modal-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 12px;
	background: var(--tt-white);
	border: 1.5px dashed var(--tt-magenta);
	border-radius: var(--tt-radius-pill);
	color: var(--tt-magenta);
	font-size: 13px;
	font-weight: 700;
}
.dc-add-package-dropdown,
.dc-package-terminate-date-dropdown {
	width: 100%;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-md);
	padding: 11px 14px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--tt-text);
	background: var(--tt-white);
	margin-bottom: 10px;
}

/* ttmember 7.2.0 package dialogs ("Monatspaket buchen" / "Monatspaket
   kuendigen"): #modal-add-package-form / #modal-terminate-package-form now
   carry .dc-package-modal + BEM children (__card/__title/__close/__summary/
   __actions/__cancel). They still run on animatedModal, so the generic
   div[id^="modal-"] shell above applies. Plugin CSS (custom.css) ships a
   plain look (3px radius, grey borders, system font) - restyle to the app
   card look. Same specificity as the plugin rules, theme wins by source
   order (theme assets enqueued on priority 40, see functions.php). */
.dc-package-modal .dc-package-modal__card {
	margin: auto;
	max-width: 380px;
	width: calc(100% - 32px);
	padding: 22px 18px 18px;
	border-radius: var(--tt-radius-lg);
	box-shadow: 0 20px 50px rgba(0,0,0,.35);
	background: var(--tt-white);
	color: var(--tt-text);
	/* keep a tall card scrollable inside its max-height (plugin sets
	   overflow-y:auto; the generic .modal-content rule sets overflow:hidden) */
	overflow-y: auto;
}
.dc-package-modal__title {
	margin: 0 40px 14px 0;
	font-family: var(--tt-font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--tt-text);
}
.dc-package-modal__close {
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	line-height: 32px;
	font-size: 26px;
	color: var(--tt-text-muted);
}
.dc-package-modal__close:hover,
.dc-package-modal__close:focus { background: var(--tt-line); color: var(--tt-text); }
.dc-package-modal label { font-size: 13px; font-weight: 600; color: var(--tt-text-muted); margin-bottom: 6px; }
.dc-package-modal__summary {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--tt-magenta);
	border-radius: 0 var(--tt-radius-md) var(--tt-radius-md) 0;
	background: var(--tt-card);
	font-size: 13px;
	line-height: 1.5;
	color: var(--tt-text);
}
.dc-package-modal .dc-add-package-dropdown,
.dc-package-modal .dc-package-terminate-date-dropdown {
	height: 44px;
	margin: 0 0 14px;
	padding: 0 14px;
	border: 1.5px solid var(--tt-line);
	border-radius: var(--tt-radius-md);
	font-family: inherit;
	font-size: 14px;
	color: var(--tt-text);
	background: var(--tt-white);
}
.dc-package-modal__actions { gap: 8px; }
.dc-package-modal .dc-add-package-btn,
.dc-package-modal .dc-terminate-package-btn,
.dc-package-modal__cancel {
	min-height: 42px;
	padding: 10px 16px;
	border-radius: var(--tt-radius-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}
/* plugin forces border/background/color with !important on the two action
   buttons (brand border / danger red) - keep them, only shape is ours */
.dc-package-modal__cancel {
	border: 1.5px solid var(--tt-line);
	background: var(--tt-white);
	color: var(--tt-text-muted);
}
.dc-package-modal__cancel:hover,
.dc-package-modal__cancel:focus { color: var(--tt-text); border-color: var(--tt-text-muted); }
@media only screen and (max-width: 600px) {
	.dc-package-modal .dc-package-modal__card { padding: 22px 16px 16px; }
}

/* [dc_dashboard_package_details] - Detailseite als Karte, Zeilen bleiben
   die vom Plugin gelieferte div-Struktur (dc-package-name/-start-date/…),
   das "<span>Label:</span>"-Muster ist bereits im Plugin-HTML enthalten. */
.dc-package-details {
	background: var(--tt-white);
	border-radius: var(--tt-radius-md);
	box-shadow: var(--tt-shadow);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dc-package-details > div { font-size: 13.5px; color: var(--tt-text); }
.dc-package-details > div > span { color: var(--tt-text-muted); font-weight: 600; }

/* Hinweis: [dc_dashboard_courses] und [dc_dashboard_groups] (Kurse/Gruppen)
   sind bewusst NOCH NICHT reskinnt - laut Textbin-Inhalte-was-wir-brauchen.md
   werden fuer das Dashboard nur _workshops/_packages/_steps empfohlen. Falls
   Miron doch Kurse/Gruppen auf dem Dashboard braucht: kurze Rueckmeldung,
   dann holen wir das nach (PROJEKT-STATUS.md).
   [dc_dashboard_steps] braucht KEIN eigenes CSS - nutzt exakt dieselben
   Klassen wie [dc_points] (M6, .dc-steps-summary/.dc-steps-total/
   .dc-list-wrap) und ist dadurch bereits vollstaendig gestylt. */