/* ── Teilnehmer-Portal – Vollständiges Redesign ────────────────────────── */

/* ── Design Tokens (Aliase auf globales style.css Design-System) ──────── */
/* Beide Apps teilen ein gemeinsames Design-System aus style.css           */
:root {
  --tn-bg:          var(--bg, #f2efe8);
  --tn-surface:     var(--surface, #ffffff);
  --tn-primary:     var(--primary, #1a1626);
  --tn-accent:      var(--accent, #b8923a);
  --tn-accent-lt:   var(--accent-subtle, #fdf5e4);
  --tn-text:        var(--text, #1a1626);
  --tn-muted:       var(--text-muted, #7a7683);
  --tn-subtle:      var(--text-subtle, #b0adb8);
  --tn-border:      var(--border, #e2dcd2);
  --tn-radius:      var(--radius, 12px);
  --tn-radius-sm:   var(--radius-sm, 8px);
  --tn-shadow-sm:   var(--shadow-sm, 0 2px 8px rgba(26,22,38,.07));
  --tn-shadow:      var(--shadow, 0 4px 20px rgba(26,22,38,.10));
  --tn-shadow-lg:   var(--shadow-lg, 0 8px 32px rgba(26,22,38,.14));
  --tn-nav-h:       60px;
  --tn-font-d:      var(--font-display, 'Playfair Display', Georgia, serif);
  --tn-font-b:      var(--font-body, 'Inter', -apple-system, sans-serif);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.tn-body {
  background: var(--tn-bg);
  min-height: 100vh;
  font-family: var(--tn-font-b);
  color: var(--tn-text);
  padding-bottom: var(--tn-nav-h);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.tn-header {
  background: var(--tn-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.tn-header-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tn-logo {
  font-family: var(--tn-font-d);
  font-size: 1.45rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: -.01em;
}
/* Old horizontal nav hidden – replaced by bottom bar */
.tn-nav { display: none !important; }

.tn-header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tn-lang-toggle {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  padding: .18rem .48rem;
  cursor: pointer;
  transition: all .15s;
}
.tn-lang-toggle:hover { color: #fff; background: rgba(255,255,255,.18); }
.tn-back-link {
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
}

/* ── Bottom Navigation ────────────────────────────────────────────────── */
.tn-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tn-primary);
  height: var(--tn-nav-h);
  display: flex;
  align-items: stretch;
  z-index: 100;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -4px 16px rgba(0,0,0,.25);
}
.tn-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.42);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4rem 0 .5rem;
  transition: color .15s;
}
.tn-nav-item.active    { color: var(--tn-accent); }
.tn-nav-item:hover:not(.active) { color: rgba(255,255,255,.75); }

/* ── Screens ──────────────────────────────────────────────────────────── */
.tn-screen {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
.hidden { display: none !important; }

/* ── Auth Screen ──────────────────────────────────────────────────────── */
.tn-auth-hero {
  height: 220px;
  background-image: url('/images/auth-hero.jpg');
  background-size: cover;
  background-position: center 30%;
  border-radius: var(--tn-radius) var(--tn-radius) 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.tn-auth-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,22,38,.88) 0%, rgba(26,22,38,.3) 50%, transparent 100%);
}
.tn-auth-hero-text { position: relative; z-index: 1; color: #fff; }
.tn-auth-hero-title {
  font-family: var(--tn-font-d);
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.05;
  margin: 0 0 .25rem;
  color: #fff;
}
.tn-auth-hero-sub { font-size: .82rem; color: rgba(255,255,255,.65); margin: 0 0 .1rem; letter-spacing: .06em; text-transform: uppercase; font-size: .65rem; }
.tn-auth-hero-deco { display: none; }

.tn-card {
  background: var(--tn-surface);
  border-radius: 0 0 var(--tn-radius) var(--tn-radius);
  box-shadow: var(--tn-shadow-lg);
  padding: 1.75rem 1.5rem;
}
.tn-card-standalone {
  border-radius: var(--tn-radius);
  margin-top: 2rem;
}
.tn-auth-footer {
  text-align: center;
  font-size: .7rem;
  color: var(--tn-muted);
  margin-top: 1.5rem;
  font-style: italic;
}

/* Tabs */
.tn-tabs {
  display: flex;
  border-bottom: 1px solid var(--tn-border);
  margin-bottom: 1.6rem;
}
.tn-tab {
  flex: 1;
  padding: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tn-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tn-tab.active   { color: var(--tn-text);   border-bottom-color: var(--tn-text); }
.tn-tab:hover:not(.active) { color: var(--tn-accent); }

/* Form */
.tn-panel .form-group { margin-bottom: 1.1rem; }
.tn-panel label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tn-muted);
  margin-bottom: .38rem;
}
.tn-panel input[type="email"],
.tn-panel input[type="password"],
.tn-panel input[type="number"],
.tn-input {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.5px solid var(--tn-border);
  border-radius: var(--tn-radius-sm);
  font-size: .93rem;
  font-family: var(--tn-font-b);
  color: var(--tn-text);
  background: #faf8f5;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.tn-panel input:focus, .tn-input:focus {
  outline: none;
  border-color: var(--tn-accent);
  box-shadow: 0 0 0 3px rgba(184,146,58,.13);
  background: #fff;
}
.optional { font-weight: 400; color: var(--tn-subtle); font-size: .8em; }
.tn-dsgvo label {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .84rem;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tn-text);
}
.tn-dsgvo input[type="checkbox"] { margin-top: .2rem; flex-shrink: 0; accent-color: var(--tn-accent); }
.tn-dsgvo a { color: var(--tn-accent); }

/* CTA Button */
.btn-academy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .88rem;
  background: var(--tn-primary);
  color: #fff;
  font-family: var(--tn-font-b);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: none;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  margin-top: .5rem;
  transition: background .15s, transform .1s;
}
.btn-academy:hover  { background: #2a2438; transform: translateY(-1px); }
.btn-academy:active { transform: translateY(0); }

.tn-forgot {
  display: block;
  text-align: center;
  color: var(--tn-accent);
  font-size: .84rem;
  font-weight: 600;
  margin-top: .9rem;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.tn-forgot:hover { opacity: .75; }

/* Messages */
.tn-message {
  margin-top: 1rem;
  padding: .72rem 1rem;
  border-radius: var(--tn-radius-sm);
  font-size: .87rem;
  text-align: center;
}
.tn-message.success { background: #eaf5ee; color: #1a5c32; border: 1px solid #b7e4c7; }
.tn-message.error   { background: #fdf0ee; color: #9b2b1e; border: 1px solid #f5b7b1; }
.tn-message.info    { background: #edf3fc; color: #1a3a6e; border: 1px solid #93c5fd; }

/* ── Page Layout ──────────────────────────────────────────────────────── */
.tn-content { max-width: 680px; margin: 0 auto; }

.tn-greeting {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tn-accent);
  margin-bottom: .3rem;
}
.tn-page-title {
  font-family: var(--tn-font-d);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tn-text);
  margin: 0 0 .2rem;
  line-height: 1.15;
}
.help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.07);
  color: var(--tn-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.help-link:hover {
  background: var(--tn-accent, #b8860b);
  color: #fff;
  text-decoration: none;
}

.tn-hint {
  color: var(--tn-muted);
  font-size: .87rem;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.tn-loading {
  color: var(--tn-subtle);
  text-align: center;
  padding: 2.5rem;
  font-size: .93rem;
}
.tn-loading-sm { color: var(--tn-muted); font-size: .83rem; padding: .5rem 0; }
.tn-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--tn-muted);
  font-size: .84rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.25rem;
  text-decoration: none;
  transition: color .15s;
}
.tn-back:hover { color: var(--tn-accent); }
.tn-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  color: var(--tn-muted);
  font-size: .88rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.2rem;
  transition: color .15s;
}
.tn-back-btn:hover { color: var(--tn-accent); }

.tn-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.tn-section-label {
  font-family: var(--tn-font-d);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tn-text);
}
.tn-see-all {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tn-accent);
  background: none;
  border: none;
  cursor: pointer;
}

/* ── QR-Banner ────────────────────────────────────────────────────────── */
.tn-qr-banner {
  background: linear-gradient(130deg, #1a1626 0%, #2a1a0e 100%);
  color: #fff;
  border-radius: var(--tn-radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: var(--tn-shadow);
}
.tn-qr-icon { font-size: 1.9rem; flex-shrink: 0; opacity: .8; }
.qr-banner-inner { flex: 1; }
.tn-qr-banner h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .2rem; color: #fff; }
.tn-qr-banner p  { font-size: .8rem; margin: 0 0 .85rem; opacity: .72; }
.tn-qr-banner .btn-primary {
  background: var(--tn-accent);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .48rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}
.tn-qr-banner .btn-secondary {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2);
  margin-left: .5rem;
  font-size: .78rem;
  padding: .48rem .85rem;
  border-radius: 6px;
  cursor: pointer;
}

/* ── Kurs-Karten ──────────────────────────────────────────────────────── */
.tn-kurse-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tn-kurs-card {
  background: var(--tn-surface);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-sm);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
  border: 1px solid var(--tn-border);
}
.tn-kurs-card:hover { transform: translateY(-2px); box-shadow: var(--tn-shadow); }

/* Photo area */
.tn-kurs-photo {
  height: 155px;
  position: relative;
  overflow: hidden;
  background-image: url('/images/kurs/anfaenger.jpg');
  background-size: cover;
  background-position: center;
}
.tn-kurs-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,22,38,.80) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}


.tn-kurs-photo-deco { display: none; }

.tn-kurs-photo-deco-hidden {
  position: absolute;
  bottom: 0;
  right: 1rem;
  font-size: 5.5rem;
  opacity: .08;
  line-height: 1;
  user-select: none;
}
.tn-kurs-level {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  background: var(--tn-accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 20px;
}

/* Card per dance type */
.grad-standard { background: linear-gradient(160deg, #2a1e10 0%, #1a1426 60%, #0d0a14 100%); }
.grad-latein    { background: linear-gradient(160deg, #2a0f0f 0%, #1a0814 60%, #0d0a14 100%); }
.grad-discofox  { background: linear-gradient(160deg, #08182a 0%, #0d0a1a 60%, #14081c 100%); }
.grad-technik   { background: linear-gradient(160deg, #0e1a0e 0%, #0d1a0a 60%, #0a0a14 100%); }
.grad-default   { background: linear-gradient(160deg, #1a1626 0%, #12121f 100%); }

.tn-kurs-body { padding: .95rem 1.15rem 1.1rem; }
.tn-kurs-art {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tn-accent);
  margin-bottom: .25rem;
}
.tn-kurs-name {
  font-family: var(--tn-font-d);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tn-text);
  margin-bottom: .55rem;
  line-height: 1.25;
}
.tn-kurs-meta {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  font-size: .8rem;
  color: var(--tn-muted);
  margin-bottom: .7rem;
}
.tn-kurs-meta-row { display: flex; align-items: center; gap: .35rem; }
.tn-kurs-meta-row svg { flex-shrink: 0; color: var(--tn-subtle); }
.tn-kurs-footer { display: flex; align-items: center; justify-content: flex-end; }
.tn-kurs-details-btn {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--tn-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .42rem .95rem;
  pointer-events: none;
}

/* ── Figuren-Liste ────────────────────────────────────────────────────── */
.tn-figuren-liste { display: flex; flex-direction: column; gap: .55rem; }
.tn-figur-item {
  background: var(--tn-surface);
  border-radius: var(--tn-radius-sm);
  box-shadow: var(--tn-shadow-sm);
  padding: .8rem 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  transition: transform .12s, box-shadow .12s;
  border: 1px solid var(--tn-border);
}
.tn-figur-item:hover { transform: translateX(2px); box-shadow: var(--tn-shadow); border-color: var(--tn-accent); }

.tanz-badge {
  display: inline-block;
  background: var(--tn-primary);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tn-figur-info  { flex: 1; min-width: 0; }
.tn-figur-name  { font-weight: 600; color: var(--tn-text); font-size: .9rem; }
.tn-figur-preview { font-size: .76rem; color: var(--tn-muted); margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-figur-arrow { color: var(--tn-subtle); font-size: 1rem; flex-shrink: 0; }

/* Tanz-Gruppen */
.tn-tanz-section { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.tn-tanz-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .5rem;
  border-bottom: 1.5px solid var(--tn-border);
  margin-bottom: .05rem;
}
.tn-tanz-name { font-family: var(--tn-font-d); font-size: .92rem; font-weight: 600; color: var(--tn-text); flex: 1; }
.tn-tanz-count {
  background: var(--tn-accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 999px;
  min-width: 1.3rem;
  text-align: center;
}

/* ── Figur-Detail Hero ────────────────────────────────────────────────── */
.figur-hero {
  height: 205px;
  background:
    url('../img/dancer-standard.svg') right bottom / auto 95% no-repeat,
    linear-gradient(160deg, #2c1a0e 0%, #1a1626 55%, #0e0a18 100%);
  border-radius: var(--tn-radius) var(--tn-radius) 0 0;
  margin: -1.5rem -1rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.figur-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,22,38,.85) 0%, rgba(26,22,38,.3) 55%, transparent 100%);
}
.figur-hero-deco { display: none; }
.figur-level-chip {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  background: var(--tn-accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 20px;
}

/* ── Figur-Detail ─────────────────────────────────────────────────────── */
.figur-header { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; }
.figur-header .tanz-badge { margin-top: .35rem; flex-shrink: 0; }
.figur-header-info { flex: 1; }
.figur-header .tn-page-title { margin: 0 0 .18rem; }
.figur-niveau-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: .14rem .55rem;
  border-radius: 4px;
  background: var(--tn-accent-lt);
  color: #7a4e12;
  letter-spacing: .3px;
}
.figur-niveau-badge.hidden { display: none; }
.figur-startposition {
  font-size: .87rem;
  color: var(--tn-muted);
  margin-bottom: 1rem;
  padding: .55rem .95rem;
  background: #faf8f5;
  border-left: 3px solid var(--tn-accent);
  border-radius: 0 6px 6px 0;
}
.figur-startpos-label { font-weight: 700; color: var(--tn-text); }
.figur-beschreibung {
  background: var(--tn-surface);
  border-radius: var(--tn-radius-sm);
  box-shadow: var(--tn-shadow-sm);
  padding: 1.05rem 1.3rem;
  margin-bottom: 1.4rem;
  line-height: 1.7;
  color: #3a3550;
  font-size: .91rem;
  border: 1px solid var(--tn-border);
}
.figur-beschreibung p { margin: 0; }
.figur-media-title {
  font-family: var(--tn-font-d);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tn-text);
  margin: 1.4rem 0 .7rem;
}

/* Schritttabellen */
.figur-schritte-section { margin-bottom: 1.5rem; }
.figur-tabs { display: flex; gap: .45rem; margin-bottom: .7rem; }
.figur-tab-btn {
  padding: .42rem 1.3rem;
  border: 1.5px solid var(--tn-border);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tn-muted);
  transition: all .15s;
}
.figur-tab-btn:hover  { border-color: var(--tn-accent); color: var(--tn-accent); }
.figur-tab-btn.active { background: var(--tn-primary); color: #fff; border-color: var(--tn-primary); }

.table-responsive {
  overflow-x: auto;
  border-radius: var(--tn-radius-sm);
  box-shadow: var(--tn-shadow-sm);
  border: 1px solid var(--tn-border);
}
.figur-schritte-tabelle { width: 100%; border-collapse: collapse; background: var(--tn-surface); font-size: .86rem; }
.figur-schritte-tabelle th {
  background: #faf8f5;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  padding: .58rem .85rem;
  border-bottom: 1.5px solid var(--tn-border);
  white-space: nowrap;
  color: var(--tn-muted);
}
.figur-schritte-tabelle td { padding: .48rem .85rem; border-bottom: 1px solid #faf8f5; vertical-align: top; line-height: 1.45; color: var(--tn-text); }
.figur-schritte-tabelle tr:last-child td { border-bottom: none; }
.figur-schritte-tabelle tr:hover td { background: #faf8f5; }
.schritte-nr, .schritte-takt { font-weight: 600; white-space: nowrap; }
.schritte-leer { color: var(--tn-subtle); }

/* Hinweis */
.figur-hinweis-box {
  background: #fdf5e4;
  border: 1px solid #e8cfa0;
  border-radius: var(--tn-radius-sm);
  padding: .82rem 1.05rem;
  font-size: .87rem;
  color: #7a4e12;
  margin-bottom: 1.2rem;
  line-height: 1.55;
}

/* Verbindungen */
.figur-verbindungen { background: var(--tn-surface); border-radius: var(--tn-radius-sm); box-shadow: var(--tn-shadow-sm); padding: .95rem 1.2rem; margin-bottom: .9rem; border: 1px solid var(--tn-border); }
.figur-verbindungen h3 { font-size: .9rem; font-weight: 700; color: var(--tn-text); margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--tn-border); }
.verbindung-kontext { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tn-muted); margin: .7rem 0 .28rem; }
.verbindung-gruppe { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; flex-wrap: wrap; }
.verbindung-niveau { display: inline-block; font-size: .68rem; font-weight: 700; padding: .1rem .42rem; border-radius: 4px; background: #faf8f5; color: var(--tn-muted); }
.verbindung-liste { font-size: .87rem; color: var(--tn-text); line-height: 1.5; }

/* Media */
.figur-media-liste { display: flex; flex-direction: column; gap: .6rem; }
.figur-media-item {
  display: flex; align-items: center; gap: .72rem;
  background: var(--tn-surface);
  border-radius: var(--tn-radius-sm);
  padding: .72rem .95rem;
  box-shadow: var(--tn-shadow-sm);
  text-decoration: none;
  color: var(--tn-text);
  transition: background .12s;
  border: 1px solid var(--tn-border);
}
.figur-media-item:hover { background: #faf8f5; }
.figur-media-icon { font-size: 1.2rem; flex-shrink: 0; }
.figur-media-info { flex: 1; }
.figur-media-titel { font-weight: 600; font-size: .87rem; }
.figur-media-typ { font-size: .7rem; color: var(--tn-muted); text-transform: uppercase; letter-spacing: .4px; }
.figur-media-ext { color: var(--tn-muted); font-size: .87rem; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.tn-toast {
  position: fixed;
  bottom: calc(var(--tn-nav-h) + .85rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tn-primary);
  color: #fff;
  padding: .72rem 1.4rem;
  border-radius: var(--tn-radius-sm);
  font-size: .87rem;
  box-shadow: var(--tn-shadow-lg);
  z-index: 9999;
  pointer-events: none;
  transition: opacity .25s;
  max-width: 90vw;
  text-align: center;
}
.tn-toast.hidden { opacity: 0; }
.tn-toast.success { background: #1a5c32; }
.tn-toast.error   { background: #9b2b1e; }

/* ── Utility ──────────────────────────────────────────────────────────── */
.tn-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 1.4rem 0;
  color: var(--tn-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tn-divider::before, .tn-divider::after { content: ''; flex: 1; height: 1px; background: var(--tn-border); }

/* ── Figurenkatalog ───────────────────────────────────────────────────── */
.katalog-tanz-gruppe { margin-bottom: 1.85rem; }
.katalog-tanz-titel { font-family: var(--tn-font-d); font-size: 1.08rem; font-weight: 700; color: var(--tn-text); margin: 0 0 .7rem; display: flex; align-items: center; gap: .55rem; }
.katalog-niveau-label, .katalog-nivel-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tn-muted); margin: .7rem 0 .38rem; }
.katalog-figuren-grid { display: flex; flex-wrap: wrap; gap: .38rem; }
.katalog-figur-btn { padding: .32rem .75rem; border: 1.5px solid var(--tn-border); border-radius: 20px; background: var(--tn-surface); cursor: pointer; font-size: .8rem; color: var(--tn-text); transition: all .15s; white-space: nowrap; }
.katalog-figur-btn:hover { border-color: var(--tn-accent); color: var(--tn-accent); background: var(--tn-accent-lt); }
.katalog-extra .katalog-tanz-titel { color: var(--tn-muted); }
.katalog-extra .katalog-figur-btn { border-style: dashed; }
.katalog-figur-btn--kp { border-color: #2a7a52; color: #1a5c32; }
.katalog-figur-btn--kp:hover { background: #eaf5ee; }
.katalog-figur-en { display: block; font-size: .63rem; font-weight: 400; opacity: .6; margin-top: 1px; }

/* ── Wissensbibliothek ───────────────────────────────────────────────── */
.wissen-filter { display: flex; flex-wrap: wrap; gap: .38rem; margin-bottom: 1.35rem; }
.wissen-filter-btn { padding: .28rem .85rem; border: 1.5px solid var(--tn-border); border-radius: 20px; background: var(--tn-surface); cursor: pointer; font-size: .78rem; color: var(--tn-muted); transition: all .15s; }
.wissen-filter-btn.active, .wissen-filter-btn:hover { border-color: var(--tn-accent); color: var(--tn-accent); background: var(--tn-accent-lt); }
.wissen-karte { background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: var(--tn-radius); padding: 1.15rem 1.35rem; margin-bottom: .9rem; transition: box-shadow .15s; overflow: hidden; }
.wissen-karte:hover { box-shadow: var(--tn-shadow); }
.wissen-karte-photo { height: 90px; border-radius: 10px 10px 0 0; margin: -1.15rem -1.35rem .85rem -1.35rem; position: relative; overflow: hidden; }
.wissen-karte-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(26,22,38,.5) 100%); }
.wissen-karte-header { display: flex; gap: .45rem; align-items: center; margin-bottom: .45rem; }
.wissen-kat-badge { background: var(--tn-accent-lt); color: #7a4e12; border-radius: 4px; padding: .13rem .52rem; font-size: .7rem; font-weight: 600; }
.wissen-karte-titel { font-family: var(--tn-font-d); font-size: .98rem; font-weight: 700; color: var(--tn-text); margin: 0 0 .22rem; }
.wissen-karte-untertitel { font-size: .84rem; color: var(--tn-muted); margin: 0 0 .45rem; }
.wissen-karte-preview { font-size: .83rem; color: #4b5563; margin: 0 0 .75rem; line-height: 1.5; }
.btn-wissen-lesen { background: none; border: none; color: var(--tn-accent); font-size: .84rem; font-weight: 700; cursor: pointer; padding: 0; }
.btn-wissen-lesen:hover { text-decoration: underline; }
.tn-back-btn { display: inline-block; background: none; border: none; color: var(--tn-muted); font-size: .87rem; cursor: pointer; padding: 0; margin-bottom: 1.1rem; }
.tn-back-btn:hover { color: var(--tn-accent); }
.artikel-kopf { display: flex; gap: .45rem; align-items: center; margin-bottom: .55rem; }
.artikel-titel { font-family: var(--tn-font-d); font-size: 1.5rem; font-weight: 700; color: var(--tn-text); margin: 0 0 .28rem; }
.artikel-untertitel { font-size: .96rem; color: var(--tn-muted); margin: 0 0 1.35rem; }
.artikel-inhalt { color: var(--tn-text); line-height: 1.7; }
.artikel-h2 { font-family: var(--tn-font-d); font-size: 1.12rem; font-weight: 700; margin: 1.35rem 0 .45rem; }
.artikel-h3 { font-size: .97rem; font-weight: 700; margin: .95rem 0 .28rem; }
.artikel-inhalt p { margin: 0 0 .78rem; }
.artikel-liste { margin: 0 0 .88rem; padding-left: 1.28rem; }
.artikel-liste li { margin-bottom: .33rem; font-size: .91rem; }

/* ── Tanzlexikon ──────────────────────────────────────────────────────── */
.lexikon-suche { margin-bottom: .95rem; }
.lexikon-nav { display: flex; flex-wrap: wrap; gap: .22rem; margin-bottom: 1.1rem; }
.lexikon-az-btn { min-width: 1.95rem; padding: .22rem .45rem; border: 1px solid var(--tn-border); border-radius: 6px; background: var(--tn-surface); cursor: pointer; font-size: .78rem; color: var(--tn-muted); transition: all .12s; text-align: center; }
.lexikon-az-btn.active, .lexikon-az-btn:hover { border-color: var(--tn-accent); color: var(--tn-accent); background: var(--tn-accent-lt); }
.lexikon-eintrag { border-bottom: 1px solid var(--tn-border); padding: .85rem 0; }
.lexikon-eintrag:last-child { border-bottom: none; }
.lexikon-eintrag-kopf { display: flex; gap: .45rem; align-items: baseline; margin-bottom: .18rem; }
.lexikon-begriff { font-size: .97rem; font-weight: 700; color: var(--tn-text); }
.lexikon-kat { font-size: .68rem; color: var(--tn-muted); background: #faf8f5; border: 1px solid var(--tn-border); border-radius: 4px; padding: .1rem .38rem; }
.lexikon-synonyme { font-size: .78rem; color: var(--tn-muted); margin-bottom: .22rem; font-style: italic; }
.lexikon-erklaerung { font-size: .86rem; color: #4b5563; margin: 0; line-height: 1.55; }

/* Checklist */
.artikel-checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist-item { margin-bottom: .42rem; }
.checklist-item label { display: flex; align-items: flex-start; gap: .62rem; cursor: pointer; font-size: .91rem; color: var(--tn-text); line-height: 1.5; }
.checklist-cb { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--tn-accent); }
.checklist-item input:checked + span { text-decoration: line-through; color: var(--tn-muted); }
.btn-checklist-reset { display: inline-block; margin-bottom: 1rem; padding: .33rem .82rem; font-size: .78rem; border: 1px solid var(--tn-border); border-radius: 6px; background: #faf8f5; color: var(--tn-muted); cursor: pointer; transition: all .12s; }
.btn-checklist-reset:hover { border-color: var(--tn-accent); color: var(--tn-accent); }

/* Abbr */
abbr[title] { cursor: help; text-decoration: underline dotted var(--tn-muted); text-underline-offset: 2px; font-style: normal; }
.abbr-term { position: relative; display: inline; color: var(--tn-accent); font-weight: 600; text-decoration: underline dotted; cursor: pointer; user-select: none; }
.abbr-term:focus { outline: 2px solid var(--tn-accent); border-radius: 2px; }
.abbr-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tn-primary); color: #fff; font-size: .74rem; font-weight: 400; line-height: 1.4; white-space: nowrap; padding: .33rem .62rem; border-radius: 6px; z-index: 200; pointer-events: none; box-shadow: var(--tn-shadow-sm); }
.abbr-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tn-primary); }

/* ══════════════════════════════════════════════════════════════════════ */
/* ── FORTSCHRITT & ROADMAP ─────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════ */

/* Phase Hero Card */
.rd-hero {
  background: linear-gradient(130deg, #1a1626 0%, #2c1a0e 100%);
  color: #fff;
  border-radius: var(--tn-radius);
  padding: 1.6rem 1.4rem 1.15rem;
  margin-bottom: 1.35rem;
  box-shadow: var(--tn-shadow-lg);
  position: relative;
  overflow: hidden;
}
.rd-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: rgba(184,146,58,.08);
}
.rd-hero::after {
  content: '';
  position: absolute;
  bottom: -25px; left: -25px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(184,146,58,.05);
}
.rd-phase-eyebrow {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tn-accent);
  margin-bottom: .28rem;
  position: relative; z-index: 1;
}
.rd-phase-name {
  font-family: var(--tn-font-d);
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .18rem;
  line-height: 1.12;
  position: relative; z-index: 1;
}
.rd-phase-desc {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.15rem;
  position: relative; z-index: 1;
}
.rd-phase-track {
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  margin-bottom: 1.35rem;
  overflow: hidden;
  position: relative; z-index: 1;
}
.rd-phase-fill {
  height: 100%;
  background: var(--tn-accent);
  border-radius: 2px;
  transition: width .7s ease;
}
.rd-stats-row {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .9rem;
  position: relative; z-index: 1;
}
.rd-stat { flex: 1; text-align: center; }
.rd-stat + .rd-stat { border-left: 1px solid rgba(255,255,255,.08); }
.rd-stat-n {
  display: block;
  font-family: var(--tn-font-d);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: .18rem;
}
.rd-stat-l {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* Next Goals */
.rd-next-goals {
  background: var(--tn-surface);
  border-radius: var(--tn-radius);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-sm);
  padding: 1.15rem;
  margin-bottom: 1.35rem;
}
.rd-section-title {
  font-family: var(--tn-font-d);
  font-size: .98rem;
  font-weight: 600;
  color: var(--tn-text);
  margin: 0 0 .9rem;
  padding-bottom: .55rem;
  border-bottom: 1.5px solid var(--tn-border);
}
.rd-goal-item {
  display: flex;
  align-items: center;
  gap: .78rem;
  padding: .58rem 0;
  border-bottom: 1px solid #faf8f5;
}
.rd-goal-item:last-child { border-bottom: none; }
.rd-goal-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tn-accent-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  flex-shrink: 0;
  border: 1.5px solid #e8cfa0;
}
.rd-goal-info   { flex: 1; }
.rd-goal-label  { font-size: .86rem; font-weight: 600; color: var(--tn-text); margin-bottom: .08rem; }
.rd-goal-hint   { font-size: .76rem; color: var(--tn-accent); font-weight: 500; }

/* Badge Groups */
.rd-groups { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.35rem; }
.rd-group {
  background: var(--tn-surface);
  border-radius: var(--tn-radius);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-sm);
  padding: 1.15rem;
  overflow: hidden;
}

/* Badge grid – Coin-Style */
.rd-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .85rem .5rem;
}
.rd-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .35rem .15rem;
  background: transparent;
  border: none;
  text-align: center;
  transition: transform .18s;
  cursor: default;
}
.rd-badge-item.earned { background: transparent; }
.rd-badge-item.earned:hover { transform: translateY(-3px) scale(1.04); }
.rd-badge-item.locked { background: transparent; }
.rd-badge-coin {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.rd-badge-desc {
  font-size: .55rem;
  color: var(--tn-muted);
  line-height: 1.25;
  max-width: 86px;
}
.rd-badge-item.locked .rd-badge-desc { color: var(--tn-subtle); font-style: italic; }
.rd-badge-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-badge-item.locked .rd-badge-img { filter: grayscale(1) opacity(0.35); }

/* Tanz-Level rows */
.rd-tanz-level-section { display: flex; flex-direction: column; gap: .55rem; }
.rd-tanz-level-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem 0;
  border-bottom: 1px solid #faf8f5;
}
.rd-tanz-level-row:last-child { border-bottom: none; }
.rd-tanz-level-name {
  display: flex;
  align-items: center;
  gap: .38rem;
  width: 132px;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tn-text);
}
.rd-tanz-level-tiers { display: flex; gap: .22rem; flex: 1; flex-wrap: wrap; }
.rd-tier-pip { display: flex; flex-direction: column; align-items: center; gap: .12rem; }
.rd-tier-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  border: 1.5px solid var(--tn-border);
  background: var(--tn-surface);
  transition: all .15s;
}
.rd-tier-pip.earned .rd-tier-dot {
  background: var(--tn-accent);
  border-color: var(--tn-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(184,146,58,.28);
}
.rd-tier-pip.locked .rd-tier-dot { opacity: .35; background: #faf8f5; }
.rd-tier-lbl {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tn-muted);
  text-align: center;
  white-space: nowrap;
}
.rd-tier-pip.earned .rd-tier-lbl { color: var(--tn-accent); }

/* Tanz-Figuren bars */
.rd-tanze-uebersicht {
  background: var(--tn-surface);
  border-radius: var(--tn-radius);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-sm);
  padding: 1.15rem;
  margin-bottom: 1.35rem;
}
.rd-tanz-bars { display: flex; flex-direction: column; gap: .65rem; }
.rd-tanz-row { display: flex; align-items: center; gap: .6rem; }
.rd-tanz-row .tanz-badge { width: 26px; text-align: center; padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: center; }
.rd-tanz-name-lbl { font-size: .78rem; font-weight: 500; color: var(--tn-text); width: 108px; flex-shrink: 0; }
.rd-tanz-bar-wrap { flex: 1; height: 5px; background: var(--tn-border); border-radius: 3px; overflow: hidden; }
.rd-tanz-bar { height: 100%; background: var(--tn-accent); border-radius: 3px; transition: width .7s ease; min-width: 4px; }
.rd-tanz-cnt { font-size: .72rem; font-weight: 700; color: var(--tn-accent); width: 18px; text-align: right; }

/* ── QR-Kamera-Scanner Overlay ────────────────────────────────────────── */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}
.qr-modal {
  width: min(92vw, 380px);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.qr-modal-header {
  padding: 14px 16px;
  background: var(--tn-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qr-modal-title { color: #fff; font-weight: 600; font-size: 15px; }
.qr-close-btn {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
}
.qr-close-btn:hover { color: #fff; }
.qr-video-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #111;
  overflow: hidden;
}
.qr-video-wrap video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.qr-frame {
  position: absolute;
  inset: 18%;
  border: 3px solid var(--tn-accent);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.35);
}
.qr-frame::before, .qr-frame::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--tn-accent); border-style: solid;
}
.qr-status {
  color: rgba(255,255,255,.75); text-align: center;
  padding: 12px; font-size: 13px; margin: 0;
  background: #111;
}

/* ── Tanzpartner – Filter Chips ───────────────────────────────────────── */
.tp-filter-section {
  margin-bottom: 10px;
}
.tp-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tn-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tp-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-chip {
  background: var(--tn-surface);
  border: 1.5px solid var(--tn-border);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tn-text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
  line-height: 1.4;
}
.tp-chip:hover { border-color: var(--tn-accent); color: var(--tn-accent); }
.tp-chip.active {
  background: var(--tn-accent);
  border-color: var(--tn-accent);
  color: #fff;
}

/* ── Tanzpartner – Profil-Karte ───────────────────────────────────────── */
.tp-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  padding: 1rem 1.1rem;
  margin-bottom: .75rem;
  box-shadow: var(--tn-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.tp-card:hover { box-shadow: var(--tn-shadow); transform: translateY(-1px); }
.tp-card-top {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .5rem;
}
.tp-avatar-lg {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.tp-card-meta { flex: 1; min-width: 0; }
.tp-card-name {
  font-size: 1rem; font-weight: 700; color: var(--tn-text);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-tag-row { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-tag {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px;
  letter-spacing: .02em;
}
.tp-tag-style  { background: #e8f0fe; color: #2d5be3; }
.tp-tag-level  { background: #fef3c7; color: #92400e; }
.tp-tag-search { background: #fce7f3; color: #9d174d; }
.tp-card-desc {
  font-size: 13px; color: var(--tn-muted); line-height: 1.5;
  margin: 0; white-space: pre-wrap;
}
.tp-write-btn {
  background: var(--tn-accent); color: #fff; border: none;
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(184,146,58,.35);
  transition: background .12s, transform .12s;
}
.tp-write-btn:hover { background: var(--tn-primary); transform: scale(1.08); }
.tp-write-btn svg { width: 18px; height: 18px; }
.tp-empty-state {
  text-align: center; padding: 2.5rem 1rem; color: var(--tn-muted);
}
.tp-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; opacity: .6; }
.tp-empty-state p { font-size: 14px; margin: 0; }

/* ── Tanzpartner – Nachrichten Konversation ───────────────────────────── */
.tp-conv-list { display: flex; flex-direction: column; gap: .5rem; }
.tp-conv {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  overflow: hidden;
  box-shadow: var(--tn-shadow-sm);
}
.tp-conv-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; cursor: pointer;
  transition: background .12s;
}
.tp-conv-header:hover { background: var(--tn-bg); }
.tp-avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.tp-conv-info { flex: 1; min-width: 0; }
.tp-conv-name { font-weight: 600; font-size: 14px; color: var(--tn-text); }
.tp-conv-preview {
  font-size: 12px; color: var(--tn-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.tp-unread-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tn-accent); flex-shrink: 0;
}
.tp-conv-chevron {
  font-size: 16px; color: var(--tn-muted); transition: transform .2s;
}
.tp-conv.open .tp-conv-chevron { transform: rotate(90deg); }
.tp-thread {
  border-top: 1px solid var(--tn-border);
  background: var(--tn-bg);
  padding: .85rem 1rem;
  display: none;
}
.tp-conv.open .tp-thread { display: block; }
.tp-bubbles { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem; }
.tp-bubble {
  max-width: 82%; padding: .55rem .85rem;
  border-radius: 16px; font-size: 13px; line-height: 1.5;
  position: relative;
}
.tp-bubble.in {
  background: var(--tn-surface); border: 1px solid var(--tn-border);
  border-bottom-left-radius: 4px; align-self: flex-start; color: var(--tn-text);
}
.tp-bubble.out {
  background: var(--tn-accent); color: #fff;
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.tp-bubble-time {
  display: block; font-size: 10px; margin-top: 3px;
  opacity: .65; text-align: right;
}
.tp-reply-area { display: flex; gap: 8px; align-items: flex-end; }
.tp-reply-input {
  flex: 1; border: 1.5px solid var(--tn-border); border-radius: 10px;
  padding: .55rem .75rem; font-size: 13px; resize: none;
  background: var(--tn-surface); color: var(--tn-text);
  font-family: var(--tn-font-b);
  transition: border-color .15s;
}
.tp-reply-input:focus { outline: none; border-color: var(--tn-accent); }
.tp-reply-btn {
  background: var(--tn-accent); color: #fff; border: none;
  border-radius: 10px; padding: .55rem .9rem;
  cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .12s;
}
.tp-reply-btn:hover { background: var(--tn-primary); }
.tp-reply-ok { color: var(--tn-accent); font-size: 12px; margin-top: 5px; }

/* ── Kursleiter QR-Button für Kurszugang ──────────────────────────────── */
.tn-qr-cam-btn {
  background: var(--tn-primary); color: #fff; border: none;
  border-radius: 10px; padding: .55rem 1rem;
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background .12s;
}
.tn-qr-cam-btn:hover { background: var(--tn-accent); }
.tn-qr-cam-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Ball-Ticket-Karten ───────────────────────────────────────────────── */
.tn-ticket-card {
  background: var(--tn-surface); border: 1.5px solid var(--tn-border, #e5e0d4);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.tn-ticket-card.bezahlt  { border-color: var(--tn-accent); }
.tn-ticket-card.eingecheckt { border-color: #4caf50; }
.tn-ticket-card.storniert   { opacity: .6; }
.tn-ticket-card.abgelaufen  { opacity: .55; }
.tn-ticket-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tn-ticket-status { font-size: 12px; font-weight: 600; color: var(--tn-accent); white-space: nowrap; }
.tn-ticket-datum  { font-size: 13px; color: var(--tn-muted, #888); margin-bottom: 6px; }
.tn-ticket-karten { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.tn-ticket-buffet { font-size: 12px; color: var(--tn-muted, #888); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tn-ticket-buffet-label { font-weight: 600; color: var(--tn-text, #1a1626); }
.tn-ticket-warn { font-size: 12px; color: #e53935; font-weight: 600; margin: 4px 0; }
.tn-ticket-id   { font-size: 11px; color: var(--tn-muted, #888); margin-bottom: 6px; word-break: break-all; }

/* QR-Code-Block pro Karte */
.tn-ticket-qr-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 8px; }
.tn-ticket-qr-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tn-qr-placeholder { width: 140px; height: 140px; }
.tn-qr-placeholder canvas, .tn-qr-placeholder img { width: 140px !important; height: 140px !important; }
.tn-qr-label { font-size: 11px; font-weight: 600; color: var(--tn-muted, #888); }

/* ── Reservierungs-Modal ──────────────────────────────────────────────── */
.res-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.55); display: flex; align-items: flex-end;
}
.res-modal-overlay.hidden { display: none; }
.res-modal-box {
  background: var(--tn-surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 540px; margin: 0 auto;
  max-height: 92vh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
.res-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px 0; border-bottom: 1px solid var(--tn-border, #e5e0d4);
  padding-bottom: 14px; margin-bottom: 14px;
}
.res-modal-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; }
.res-modal-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--tn-muted, #888); line-height: 1; padding: 4px 8px;
}
.res-modal-body { padding: 0 20px 28px; }

.res-modus-toggle {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.res-modus-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--tn-border, #e5e0d4);
  background: var(--tn-bg, #f2efe8); color: var(--tn-text, #2a2438);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.res-modus-btn.active {
  background: var(--tn-accent, #b8923a); color: #fff;
  border-color: var(--tn-accent, #b8923a);
}

.res-field-group { margin-bottom: 18px; }
.res-label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 8px; }
.res-hint { font-size: 12px; color: var(--tn-muted, #888); margin-top: 6px; }
.res-msg { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-top: 12px; }
.res-msg:not(.hidden) { background: #fef2f2; color: #c62828; border: 1px solid #ef9a9a; }

.res-karten-picker { display: flex; align-items: center; gap: 16px; }
.res-picker-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--tn-accent);
  background: none; font-size: 20px; font-weight: 700; color: var(--tn-accent);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.res-picker-btn:disabled { opacity: .35; cursor: default; }
.res-picker-btn:not(:disabled):hover { background: var(--tn-accent); color: #fff; }
.res-karten-val { font-size: 2rem; font-weight: 700; min-width: 30px; text-align: center; }

.res-buffet-block { margin-bottom: 16px; }
.res-buffet-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.res-chip {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--tn-border, #e5e0d4);
  background: none; font-size: 13px; cursor: pointer; font-weight: 500;
  transition: border-color .12s, background .12s, color .12s;
}
.res-chip.active { border-color: var(--tn-accent); background: var(--tn-accent-lt, #fdf5e4); color: var(--tn-accent); }
.res-chip:hover:not(.active) { border-color: var(--tn-accent); }
/* Kursauswahl im Reservierungs-Modal */
.res-kurs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.res-kurs-chip {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1.5px solid var(--tn-border, #e5e0d4); border-radius: 10px;
  padding: 8px 14px; background: var(--tn-bg, #f2efe8); cursor: pointer;
  text-align: left; transition: border-color .12s, background .12s;
  min-width: 0; font-family: inherit;
}
.res-kurs-chip.active {
  border-color: var(--tn-accent); background: var(--tn-accent-lt, #fdf5e4);
}
.res-kurs-chip:hover:not(.active) { border-color: var(--tn-accent); }
.res-kurs-chip-day { font-size: 13px; font-weight: 700; color: var(--tn-text, #1a1626); }
.res-kurs-chip.active .res-kurs-chip-day { color: var(--tn-accent); }
.res-kurs-chip-info { font-size: 11px; color: var(--tn-muted, #888); margin-top: 2px; white-space: nowrap; }
.res-kurs-chip.active .res-kurs-chip-info { color: var(--tn-accent); opacity: .75; }
.res-kurs-none { font-size: 12px; color: var(--tn-muted, #888); font-style: italic; }
.res-freitext {
  width: 100%; padding: 8px 12px; border: 1.5px solid var(--tn-border, #e5e0d4);
  border-radius: 8px; font-size: 13px; background: var(--tn-bg, #f2efe8);
  color: var(--tn-text, #1a1626);
}
.res-freitext:focus { outline: none; border-color: var(--tn-accent); }
.res-submit-btn { width: 100%; margin-top: 8px; padding: 14px; font-size: 15px; font-weight: 700; }

/* ── Bälle-Liste (kompakte Übersichtskarte) ──────────────────────────── */
.tn-ball-card {
  background: var(--tn-surface,#fff); border: 1.5px solid var(--tn-border,#e5e0d4);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.tn-ball-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tn-ball-titel  { font-size: 1.05rem; font-weight: 700; margin: 0; }
.tn-ball-datum  { font-size: 12px; color: var(--tn-muted,#888); white-space: nowrap; }
.tn-ball-beschr { font-size: 13px; color: var(--tn-muted,#666); margin: 4px 0 10px; line-height: 1.5; }
.tn-ball-meta   { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tn-ball-meta span { font-size: 12px; background: var(--tn-bg,#f2efe8); border-radius: 6px; padding: 3px 9px; }
.tn-ball-auslastung { margin-bottom: 12px; }
.tn-ball-bar-wrap { height: 5px; background: var(--tn-border,#e5e0d4); border-radius: 3px; margin-bottom: 4px; overflow: hidden; }
.tn-ball-bar  { height: 100%; background: var(--tn-accent,#b8923a); border-radius: 3px; }
.tn-ball-frei { font-size: 12px; color: var(--tn-muted,#888); }
.tn-ball-frei.ausgebucht { color: #e53935; font-weight: 600; }

/* ── Event-Karte (Ball) ──────────────────────────────────────────────── */
.ev-card {
  border-radius: 18px; overflow: hidden;
  background: var(--tn-surface,#fff);
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  margin-bottom: 24px;
}

/* Hero */
.ev-hero {
  position: relative; height: 240px;
  background-size: cover; background-position: center top;
}
.ev-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,6,20,.25) 0%, rgba(10,6,20,.70) 55%, rgba(10,6,20,.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 20px 22px;
}
.ev-event-badge {
  display: inline-block; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--tn-accent,#b8923a); margin-bottom: 10px;
  background: rgba(184,146,58,.15); border: 1px solid rgba(184,146,58,.4);
  padding: 3px 10px; border-radius: 999px;
}
.ev-titel {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0 0 10px;
  line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ev-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.ev-hero-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: rgba(255,255,255,.82); font-weight: 500;
}

/* Body */
.ev-body { padding: 20px; }

.ev-section { margin-bottom: 16px; }
.ev-section-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--tn-text,#1a1626); }
.ev-beschr { font-size: 14px; line-height: 1.6; color: var(--tn-muted,#555); margin: 0; }

/* Details */
.ev-details-block { margin-bottom: 16px; border-top: 1px solid var(--tn-border,#e5e0d4); }
.ev-detail {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--tn-border,#e5e0d4);
}
.ev-detail-label { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--tn-muted,#888); text-transform: uppercase; }
.ev-detail-val   { font-size: 14px; font-weight: 600; color: var(--tn-text,#1a1626); }
.ev-detail-val.ev-accent { color: var(--tn-accent,#b8923a); }

/* Kapazität */
.ev-kapazitaet { margin-bottom: 16px; }
.ev-kap-bar { height: 5px; background: var(--tn-border,#e5e0d4); border-radius: 3px; margin-bottom: 5px; overflow: hidden; }
.ev-kap-fill { height: 100%; background: var(--tn-accent,#b8923a); border-radius: 3px; transition: width .4s; }
.ev-kap-label { font-size: 12px; color: var(--tn-muted,#888); }
.ev-kap-label.ev-kap-ausgebucht { color: #e53935; font-weight: 600; }

/* Ticket-Details-Button */
.ev-ticket-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  justify-content: center;
  background: #1a1626; color: #fff;
  border: none; border-radius: 12px; padding: 14px 20px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  margin-bottom: 0; transition: background .15s;
}
.ev-ticket-btn:hover { background: #2c2040; }

/* Ticket-Detail-Block */
.ev-ticket-detail { padding-top: 20px; }
.ev-qr-section { text-align: center; margin-bottom: 18px; }
.ev-qr-heading {
  font-size: 11px; letter-spacing: .12em; font-weight: 700;
  color: var(--tn-muted,#888); text-transform: uppercase; margin-bottom: 14px;
}
.ev-qr-codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ev-qr-box {
  background: #fff; border: 2px dashed var(--tn-border,#e5e0d4);
  border-radius: 10px; padding: 8px; display: inline-flex;
}
.ev-ticket-id {
  font-size: 12px; letter-spacing: .15em; color: var(--tn-muted,#888);
  margin: 10px 0 0; font-family: monospace;
}
.ev-gast-status { text-align: center; margin-bottom: 4px; }
.ev-gast-label { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--tn-text,#1a1626); }
.ev-gast-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  padding: 6px 18px; border-radius: 999px; text-transform: uppercase;
}
.ev-gast-badge.bezahlt    { background: var(--tn-accent,#b8923a); color: #fff; }
.ev-gast-badge.eingecheckt { background: #2e7d32; color: #fff; }

/* Gedimmte Karte für stornierte/abgelaufene Tickets */
.ev-card-dimmed { opacity: .6; }

/* Stornierte-Bereich: nativen Marker ausblenden, Chevron beim Öffnen drehen */
details > summary::-webkit-details-marker { display: none; }
details[open] .details-chevron { transform: rotate(180deg); }

/* Helfer-Hero (dunklere Farbe) */
.ev-hero-helfer { background-image: url('/images/tanz/ww.jpg'); }

/* Status-Badges innerhalb der Karte */
.ev-status-badge {
  font-size: 13px; font-weight: 600; padding: 8px 12px;
  border-radius: 8px; margin-bottom: 12px;
}
.ev-status-pending    { background: #fff8e1; color: #e65100; }
.ev-status-storniert  { background: #fce4ec; color: #880e4f; }
.ev-status-abgelaufen { background: #f3e8ff; color: #6b21a8; }

/* Ablauf-Warnung */
.ev-warn {
  background: #fff3e0; color: #e65100; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}

/* Restzeit-Countdown (neutral, nicht dringend) */
.ev-countdown {
  background: #f0f9ff; color: #0369a1; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 500; margin-bottom: 12px;
}

/* Abgelaufen-Hinweisblock */
.ev-abgelaufen-info {
  background: #faf5ff; border: 1.5px solid #d8b4fe; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px; font-size: 13px; color: #6b21a8;
}

/* Aktion (Reservieren / Helfer / Status) */
.ev-aktion { margin-top: 14px; }

.tn-ball-choice { }
.tn-ball-choice-label { font-size: 13px; font-weight: 600; color: var(--tn-muted,#888); margin: 0 0 10px; }
.tn-ball-choice-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tn-choice-divider { font-size: 12px; color: var(--tn-muted,#888); padding: 0 4px; }
.tn-choice-helfer-group { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-helfer-sm {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--tn-border,#e5e0d4);
  background: none; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--tn-text,#1a1626); transition: border-color .12s, background .12s;
}
.btn-helfer-sm:hover:not(:disabled) { border-color: var(--tn-accent); background: var(--tn-accent-lt,#fdf5e4); }
.btn-helfer-sm:disabled { opacity: .4; cursor: default; }

.tn-ball-meine-anmeldung {
  display: flex; align-items: center; gap: 12px;
  background: var(--tn-bg,#f2efe8); border-radius: 10px; padding: 10px 12px;
}
.tn-ball-anm-icon { font-size: 18px; flex-shrink: 0; }
.tn-ball-anm-info { flex: 1; font-size: 13px; }
.btn-storno-sm {
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid #ccc;
  background: none; font-size: 12px; cursor: pointer; color: var(--tn-muted,#888);
  white-space: nowrap; transition: border-color .12s, color .12s;
}
.btn-storno-sm:hover { border-color: #e53935; color: #e53935; }
.tn-ball-ausgebucht { font-size: 13px; color: var(--tn-muted,#888); margin: 0 0 8px; }

/* ── Kursleiter Ball-Planung ──────────────────────────────────────────── */
.kl-tabs { margin-bottom: 16px; overflow-x: auto; }

/* Balltermin-Liste */
.kl-ball-item { background: var(--tn-surface); border: 1.5px solid var(--tn-border,#e5e0d4); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.kl-ball-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.kl-ball-item-datum { font-size: 12px; color: var(--tn-muted,#888); display: block; margin-top: 2px; }
.kl-ball-item-meta { font-size: 12px; color: var(--tn-muted,#888); margin-top: 4px; }
.kl-ball-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.kl-ball-badge.aktiv { background: #e8f5e9; color: #2e7d32; }
.kl-ball-badge.inaktiv { background: #f5f5f5; color: #888; }

/* Ticket-Liste */
.kl-ticket-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 0 14px; font-size: 13px; }
.kl-ticket-stats strong { font-size: 15px; }
.kl-ticket-item { background: var(--tn-surface); border: 1.5px solid var(--tn-border,#e5e0d4); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.kl-ticket-item.bezahlt   { border-color: var(--tn-accent); }
.kl-ticket-item.eingecheckt { border-color: #4caf6e; }
.kl-ticket-item.abgelaufen { opacity: .55; }
.kl-ticket-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.kl-ticket-item-meta { font-size: 12px; color: var(--tn-muted,#888); margin-bottom: 6px; }
.kl-ticket-status-badge { font-size: 12px; font-weight: 700; color: var(--tn-accent); white-space: nowrap; }

/* Buffet-Karte (Kursleiter-Portal) */
.kl-buffet-card { background: var(--tn-bg,#f2efe8); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.kl-buffet-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.kl-buffet-total { font-size: 12px; font-weight: 400; color: var(--tn-muted,#888); }
.kl-buffet-bar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: var(--tn-border,#e5e0d4); margin-bottom: 8px; }
.kl-buffet-balance { font-size: 13px; margin-bottom: 10px; }
.kl-buffet-tip { font-size: 12px; color: var(--tn-muted,#888); font-weight: 400; }
.kl-buffet-cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.kl-buffet-cat { background: var(--tn-surface); border-radius: 8px; padding: 8px 10px; }
.kl-buffet-cat-header { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; }
.kl-buffet-list { margin: 0; padding-left: 14px; font-size: 11px; color: var(--tn-muted,#888); line-height: 1.6; }
.kl-buffet-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statistik-Boxes */
.kl-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 10px; margin-bottom: 14px; }
.kl-stat-box { background: var(--tn-surface); border: 1.5px solid var(--tn-border,#e5e0d4); border-radius: 10px; padding: 12px 10px; text-align: center; }
.kl-stat-val { font-size: 1.5rem; font-weight: 700; }
.kl-stat-label { font-size: 11px; color: var(--tn-muted,#888); margin-top: 2px; }

/* Input-Stil für Kursleiter-Formulare */
.tn-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--tn-border,#e5e0d4); border-radius: 8px; font-size: 14px; background: var(--tn-surface); color: var(--tn-text,#1a1626); box-sizing: border-box; }
.tn-input:focus { outline: none; border-color: var(--tn-accent); }
textarea.tn-input { resize: vertical; }

/* btn-sm variant for btn-academy */
.btn-academy.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-academy.btn-outline { background: transparent; color: var(--tn-accent,#b8923a); border: 1.5px solid var(--tn-accent,#b8923a); }
.btn-academy.btn-outline:hover { background: var(--tn-accent,#b8923a); color: #fff; }

/* ── Einlass-Massenscanner ────────────────────────────────────────────── */
.kl-scanner-start-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px 20px; margin-bottom: 16px;
  background: var(--tn-accent,#b8923a); color: #fff;
  border: none; border-radius: 12px; font-size: 17px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.kl-scanner-start-btn:hover { opacity: .88; }

.kl-einlass-divider {
  text-align: center; font-size: 12px; color: var(--tn-muted,#888);
  margin: 0 0 12px; letter-spacing: .05em; text-transform: uppercase;
}

/* Massenscanner overlay */
.massen-overlay {
  position: fixed; inset: 0; background: #000; z-index: 9500;
  display: flex; flex-direction: column; overflow: hidden;
}
.massen-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 15px; font-weight: 600; flex-shrink: 0;
}
.massen-topbar span { opacity: .7; font-weight: 400; font-size: 13px; }
.massen-close-btn {
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.massen-video-wrap { position: relative; flex: 1; overflow: hidden; }
.massen-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.massen-scan-frame {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.massen-scan-frame::before {
  content: ''; width: 220px; height: 220px;
  border: 3px solid rgba(255,255,255,.6); border-radius: 16px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,.45);
}
.massen-scan-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 500;
  padding: 7px 18px; border-radius: 20px; white-space: nowrap; pointer-events: none;
}

/* Result feedback overlay (shown inside video-wrap) */
.massen-result {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: inherit; pointer-events: none; opacity: 0;
  transition: opacity .2s;
}
.massen-result.visible { opacity: 1; pointer-events: auto; }
.massen-result.ok  { background: rgba(22,120,55,.93); }
.massen-result.err { background: rgba(180,28,28,.93); }
.massen-result-icon {
  font-size: 84px; line-height: 1; margin-bottom: 18px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.massen-result-name {
  font-size: 30px; font-weight: 800; color: #fff; text-align: center;
  margin-bottom: 8px; padding: 0 24px; line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.massen-result-detail {
  font-size: 16px; color: rgba(255,255,255,.85); text-align: center; padding: 0 28px;
}
.massen-result-count {
  margin-top: 20px; background: rgba(255,255,255,.22); border-radius: 30px;
  padding: 7px 22px; font-size: 15px; font-weight: 700; color: #fff;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tn-screen   { padding: 1rem .85rem; }
  .tn-page-title { font-size: 1.45rem; }
  .tn-kurs-photo { height: 135px; }
  .figur-hero  { height: 175px; margin: -1rem -.85rem 1.2rem; }
  .rd-tanz-level-name { width: 100px; font-size: .72rem; }
  .rd-badge-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .figur-schritte-tabelle th,
  .figur-schritte-tabelle td { padding: .38rem .48rem; font-size: .78rem; }
  .rd-tanz-name-lbl { width: 88px; font-size: .72rem; }
}