/*
 * Bandclick – Projektseite auf nord-mind.com
 * Eigene, dunkle Optik (Anthrazit + Violett) wie in der App, damit klar ist:
 * das ist ein anderes Projekt als Feel & Act. Lädt nach styles.css und
 * überschreibt dort nur Header, Footer und Grundfarben.
 *
 * Bereichsfarben wie in der App: Band = Violett, Üben = Gold, Freunde = Blau.
 */

body.bandclick {
  --bc-bg: #121218;
  --bc-bg-2: #17171f;
  --bc-card: #1c1c26;
  --bc-border: rgba(255, 255, 255, 0.09);
  --bc-fg: #f3f2f8;
  --bc-muted: #a7a5bd;
  --bc-primary: #9b7bff;
  --bc-primary-strong: #8a66ff;
  --bc-success: #34d399;
  --bc-amber: #f5b53f;
  --bc-band: #9b7bff;
  --bc-band-on: #ffffff;
  --bc-practice: #e9b64c;
  --bc-practice-on: #2a1f08;
  --bc-friends: #4fb3ff;
  --bc-friends-on: #08213a;
  --bc-font: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  font-family: var(--bc-font);
  background-color: var(--bc-bg);
  color: var(--bc-fg);
}

body.bandclick a { color: var(--bc-primary); }
body.bandclick a:hover { color: #b9a3ff; }

/* Bereichs-Akzent: eine Klasse, die Farbe wandert in alle Bauteile */
.area-band { --accent: var(--bc-band); --accent-on: var(--bc-band-on); }
.area-practice { --accent: var(--bc-practice); --accent-on: var(--bc-practice-on); }
.area-friends { --accent: var(--bc-friends); --accent-on: var(--bc-friends-on); }

/* Inline-Icons (Lucide) */
body.bandclick .ico svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* ---------- Header auf dunklem Grund ---------- */
body.bandclick header {
  background-color: rgba(18, 18, 24, 0.8);
  border-bottom: 1px solid var(--bc-border);
}
/* Logo-Variante mit weißer Schrift (images/original_logo_dark.png) – gleiche
   Maße wie das helle Logo, damit die Icons daneben nicht springen */
body.bandclick .desktop-nav a,
body.bandclick .mobile-nav a { color: var(--bc-fg); }
body.bandclick .desktop-nav a:hover,
body.bandclick .mobile-nav a:hover { color: var(--bc-primary); }
body.bandclick .desktop-nav a::after { background-color: var(--bc-primary); }
body.bandclick .mobile-menu-btn span { background-color: var(--bc-fg); }
body.bandclick .mobile-nav {
  background-color: var(--bc-bg-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.bandclick .project-link span { color: var(--bc-fg); }
body.bandclick .project-link.active::after { background-color: var(--bc-primary); }
body.bandclick .project-switcher { border-left-color: var(--bc-border); }
body.bandclick .bc-title-only { margin-bottom: 3rem; }

/* ---------- Buttons ---------- */
body.bandclick .btn { font-family: var(--bc-font); }
body.bandclick .bc-btn-primary {
  background: linear-gradient(135deg, #a98bff 0%, var(--bc-primary-strong) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(155, 123, 255, 0.35);
}
body.bandclick .bc-btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(155, 123, 255, 0.45);
}
body.bandclick .bc-btn-outline {
  background: transparent;
  color: var(--bc-fg);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
body.bandclick .bc-btn-outline:hover {
  color: var(--bc-fg);
  border-color: var(--bc-primary);
  background: rgba(155, 123, 255, 0.1);
  transform: translateY(-2px);
}
body.bandclick .btn .ext {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.9em;
  opacity: 0.85;
}

/* ---------- Wortmarke ---------- */
.bc-wordmark {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.bc-wordmark em {
  font-style: normal;
  color: var(--bc-primary);
}

/* ---------- Hero ---------- */
/* Wie .hero auf der Feel-&-Act-Seite: erster Bildschirm, Inhalt senkrecht
   zwischen Header und Fensterrand zentriert */
.bc-hero {
  position: relative;
  min-height: min(100vh, 1000px);
  min-height: min(100svh, 1000px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 107px 0 32px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(155, 123, 255, 0.28), transparent 60%),
    radial-gradient(700px 400px at 95% 20%, rgba(233, 182, 76, 0.1), transparent 60%),
    var(--bc-bg);
}
.bc-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.bc-hero-content {
  flex: 1.2;
  max-width: 660px;
}
.bc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bc-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 26px;
}
.bc-eyebrow img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.bc-eyebrow strong {
  color: var(--bc-fg);
  font-weight: 600;
}
.bc-hero h1 {
  font-size: 3.2rem;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--bc-fg);
  margin-bottom: 18px;
}
.bc-hero h1 .bc-wordmark { display: block; margin-bottom: 6px; }
.bc-hero .bc-tagline {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--bc-primary);
  margin-bottom: 16px;
}
.bc-hero p.bc-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--bc-muted);
  margin-bottom: 32px;
}
.bc-hero p.bc-lead strong {
  color: var(--bc-fg);
  font-weight: 700;
}
.bc-hero-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.bc-hero-cta .btn {
  min-width: 210px;
  padding: 14px 30px;
  font-size: 1rem;
  font-weight: 600;
}
/* Hinweis „öffnet sich in einem neuen Tab" nur beim Drüberfahren über
   „Bandclick öffnen" (bzw. Tastaturfokus) – als kleiner Tooltip über den
   Buttons, außerhalb des Textflusses, damit nichts springt. Oben statt unten,
   weil die Buttons auf flachen Bildschirmen knapp über dem Fensterrand liegen. */
.bc-hero-note {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--bc-muted);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
  pointer-events: none;
  z-index: 2;
}
.bc-hero-cta:has(.bc-btn-primary:hover) .bc-hero-note,
.bc-hero-cta:has(.bc-btn-primary:focus-visible) .bc-hero-note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bc-hero-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Telefon-Rahmen mit echtem App-Screenshot */
.bc-hero-phone {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.bc-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2a2a36, #0f0f15);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 90px rgba(155, 123, 255, 0.25);
}
.bc-phone img {
  width: 100%;
  border-radius: 30px;
  display: block;
}
.bc-phone::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  border-radius: 999px;
  background: #000;
}

/* ---------- Sektionen ---------- */
.bc-section {
  padding: 110px 0;
  position: relative;
}
.bc-section.alt { background-color: var(--bc-bg-2); }
.bc-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 87.5%);
  height: 1px;
  background: var(--bc-border);
}
body.bandclick .section-title {
  color: var(--bc-fg);
  font-weight: 800;
  letter-spacing: -0.035em;
}
body.bandclick .section-description { color: var(--bc-muted); }

/* ---------- Drei Bereiche: Band / Üben / Freunde ---------- */
.bc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
}
.bc-tile {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
.bc-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.bc-tile-media {
  position: relative;
  height: 210px;
  overflow: hidden;
}
.bc-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 6s ease-out;
}
.bc-tile:hover .bc-tile-media img { transform: scale(1.06); }
.bc-tile-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bc-card) 0%, rgba(28, 28, 38, 0) 45%);
}
.bc-tile-body {
  padding: 4px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bc-tile h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bc-fg);
  margin: 0;
}
.bc-tile h3 .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 1.3rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bc-tile ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-tile li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--bc-fg);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
}
.bc-tile li .chk {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.bc-tile li .chk svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Übe-Werkzeuge: echte Geräte aus der App ---------- */
/* Raster statt Umbruch, damit die Reihen immer symmetrisch sind:
   breit = 6 in einer Reihe, mittel = 2 × 3 (breites Gerät je Reihe in der
   Mitte), schmal = 3 × 2. Die Reihenfolge im HTML ist darauf abgestimmt. */
.bc-tools {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr 1fr 1.6fr 1fr;
  align-items: start;
  gap: 26px 18px;
  max-width: 1120px;
  margin: 0 auto;
}
.bc-tool {
  text-align: center;
  min-width: 0;
}
.bc-tool-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px;
  transition: transform var(--transition-speed);
}
.bc-tool:hover .bc-tool-art { transform: translateY(-5px); }
.bc-tool-art img {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.bc-tool h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 14px 0 4px;
  color: var(--bc-fg);
}
.bc-tool p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--bc-muted);
  margin: 0;
}
.bc-metronome-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 56px auto 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
}
.bc-metronome-note .ico {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bc-practice) 22%, transparent);
  color: var(--bc-practice);
  font-size: 1.4rem;
}
.bc-metronome-note p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--bc-muted);
}
.bc-metronome-note p strong { color: var(--bc-fg); }

/* ---------- So funktioniert Bandclick: zwei Wege ---------- */
.bc-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.bc-path {
  position: relative;
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-top: 3px solid var(--accent);
  border-radius: 22px;
  padding: 26px 26px 22px;
}
.bc-path-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bc-border);
}
.bc-path-head .ico {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 1.5rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bc-path-head h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bc-fg);
  margin: 0;
}
.bc-path-head p {
  margin: 2px 0 0;
  font-size: 0.95rem;
  color: var(--bc-muted);
}
.bc-path ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bc-path li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.bc-path .num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
  margin-top: 1px;
}
.bc-path h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bc-fg);
  margin: 0 0 4px;
}
.bc-path li p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bc-muted);
  margin: 0;
}
.bc-path .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bc-path .chips span {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
}
.bc-path .chips span.ok { background: rgba(52, 211, 153, 0.15); color: var(--bc-success); }
.bc-path .chips span.learn { background: rgba(245, 181, 63, 0.15); color: var(--bc-amber); }
.bc-path .chips span.new { background: rgba(155, 123, 255, 0.2); color: #cfc4ff; }

.bc-bridge {
  max-width: 1080px;
  margin: 22px auto 0;
  padding: 20px 26px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc-practice) 14%, transparent), color-mix(in srgb, var(--bc-band) 16%, transparent));
  border: 1px solid var(--bc-border);
}
.bc-bridge p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bc-muted);
}
.bc-bridge p strong { color: var(--bc-fg); }

/* ---------- Abschluss-CTA ---------- */
.bc-cta {
  text-align: center;
  padding: 100px 0;
  background:
    radial-gradient(700px 360px at 50% 110%, rgba(155, 123, 255, 0.3), transparent 65%),
    var(--bc-bg);
}
.bc-cta .icon-wrap {
  display: block;
  width: 84px;
  margin: 0 auto 22px;
  filter: drop-shadow(0 20px 30px rgba(155, 123, 255, 0.35));
}
.bc-cta .icon {
  width: 84px;
  height: 84px;
  clip-path: var(--squircle);
  display: block;
}
.bc-cta h2 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--bc-fg);
  margin-bottom: 14px;
}
.bc-cta p {
  color: var(--bc-muted);
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 1.1rem;
}
.bc-cta .bc-hero-cta { justify-content: center; }

/* ---------- Zurück zu Feel & Act ---------- */
.bc-crosslink {
  padding: 70px 0;
  background: var(--bc-bg-2);
}
.bc-crosslink .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bc-crosslink .text h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bc-fg);
  margin-bottom: 4px;
}
.bc-crosslink .text p { color: var(--bc-muted); margin: 0; font-size: 1rem; }
.bc-crosslink .fa-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--dark-gray);
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.bc-crosslink .fa-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  color: var(--dark-gray);
}
.bc-crosslink .fa-link img { width: 40px; height: 40px; clip-path: var(--squircle); }
.bc-crosslink .fa-link small { display: block; font-weight: 500; color: #6e6e73; font-size: 0.8rem; }

/* ---------- Footer dunkel ---------- */
body.bandclick footer {
  background-color: var(--bc-bg);
  color: var(--bc-muted);
}
body.bandclick footer::before,
body.bandclick .footer-nav { border-color: var(--bc-border); background-color: transparent; }
body.bandclick footer::before { background-color: var(--bc-border); }
body.bandclick .footer-nav a,
body.bandclick .footer-bottom p,
body.bandclick .footer-bottom a { color: var(--bc-muted); }
body.bandclick .footer-nav a:hover,
body.bandclick .footer-bottom a:hover { color: var(--bc-fg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bc-hero h1 { font-size: 2.7rem; }
  .bc-tiles { gap: 16px; }
  .bc-tile h3 { font-size: 1.5rem; }
  .bc-tools { grid-template-columns: 1fr 1.6fr 1fr; max-width: 720px; gap: 30px 22px; }
}
@media (max-width: 900px) {
  .bc-hero h1 { font-size: 2.4rem; }
  .bc-tiles { grid-template-columns: 1fr; max-width: 520px; }
  .bc-tile-media { height: 190px; }
  .bc-paths { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 800px) {
  .bc-hero { padding: 120px 0 70px; }
  .bc-hero .container { flex-direction: column; text-align: center; }
  .bc-hero-content { max-width: 100%; }
  .bc-hero-cta { justify-content: center; }
  .bc-hero-cta .btn { width: 100%; min-width: 0; }
  .bc-hero-note { left: 50%; transform: translate(-50%, 4px); white-space: normal; width: max-content; max-width: 100%; }
  .bc-hero-cta:has(.bc-btn-primary:hover) .bc-hero-note,
  .bc-hero-cta:has(.bc-btn-primary:focus-visible) .bc-hero-note { transform: translate(-50%, 0); }
  .bc-phone { max-width: 250px; }
  .bc-section { padding: 80px 0; }
  .bc-cta h2 { font-size: 2rem; }
  .bc-metronome-note { flex-direction: column; text-align: center; }
}
@media (max-width: 576px) {
  .bc-hero h1 { font-size: 2rem; }
  .bc-hero p.bc-lead { font-size: 1rem; }
  .bc-tools { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .bc-tool-art { height: 180px; }
  .bc-tool-art img { max-height: 180px; }
  .bc-path { padding: 20px 18px 18px; }
}

/* ==========================================================================
   Präsentationsmodus (Bandclick) – dunkle Variante der Beamer-Folie.
   Gerüst, Maße und Verhalten kommen aus styles.css (.present …); hier nur
   Farben, Schrift, Telefonrahmen und das Übe-Gerät hinter dem Telefon.
   Einstieg: Pfeil im Footer + PIN oder /bandclick/#present.
   ========================================================================== */

/* Versteckter Einstieg im dunklen Footer */
body.bandclick .present-trigger { color: var(--bc-muted); }
body.bandclick .present-trigger:hover,
body.bandclick .present-trigger:focus-visible { background: rgba(255, 255, 255, 0.08); }
body.bandclick .present-pin {
  background: var(--bc-card);
  border-color: var(--bc-border);
  color: var(--bc-fg);
}
body.bandclick .present-pin:focus {
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.25);
}

/* Die Folie: Anthrazit mit violettem und goldenem Schein wie der Hero */
body.bandclick .present {
  background:
    radial-gradient(60vw calc(var(--u) * 60) at 80% 45%, rgba(155, 123, 255, 0.22), transparent 65%),
    radial-gradient(50vw calc(var(--u) * 45) at 5% 5%, rgba(233, 182, 76, 0.1), transparent 60%),
    var(--bc-bg);
  color: var(--bc-fg);
  font-family: var(--bc-font);
}

/* Kopfzeile */
body.bandclick .present-app-icon {
  border-radius: 22%;
  box-shadow: 0 6px 24px rgba(155, 123, 255, 0.35);
}
body.bandclick .present-app-name { color: var(--bc-fg); }
body.bandclick .present-by { color: var(--bc-muted); }
body.bandclick .present-platform {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--bc-border);
  color: var(--bc-fg);
}
body.bandclick .present-platform svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Headline und Untertitel */
body.bandclick .present-intro h1 {
  color: var(--bc-fg);
  font-weight: 800;
  letter-spacing: -0.035em;
}
body.bandclick .present-sub { color: #cbc9dd; }
/* Betonung „ein Zuhause": weiß und unterstrichen */
body.bandclick .present-em {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* Finden – Üben – Zusammen spielen: Bereichsfarben der App
   (Quellen/Freunde = Blau, Üben = Gold, Band = Violett) */
body.bandclick .present-steps { border-bottom-color: var(--bc-border); }
body.bandclick .present-steps strong { color: var(--bc-fg); }
body.bandclick .present-step-text { color: #c3c1d6; }
body.bandclick .step-find .present-icon {
  --icon-color: var(--bc-friends);
  --icon-bg: rgba(79, 179, 255, 0.18);
}
body.bandclick .step-practice .present-icon {
  --icon-color: var(--bc-practice);
  --icon-bg: rgba(233, 182, 76, 0.18);
}
body.bandclick .step-band .present-icon {
  --icon-color: #b9a3ff;
  --icon-bg: rgba(155, 123, 255, 0.22);
}

/* Merkmale */
body.bandclick .present-features li { color: #c3c1d6; }
body.bandclick .present-features .present-icon {
  --icon-color: #e6e4f2;
  --icon-bg: rgba(255, 255, 255, 0.08);
}
body.bandclick .present-feature-text strong { color: var(--bc-fg); }

/* Telefon: der dunkle Rahmen der Bandclick-Seite in Folienmaßen. Das Gerät
   (Looper) lugt unten links hervor – Band-Screenshot und Übe-Werkzeug in
   einem Bild. */
body.bandclick .present-phone {
  position: relative;
  width: var(--present-phone-w);
}
body.bandclick .present-phone .bc-phone {
  width: var(--present-phone-w);
  height: var(--present-phone-h);
  max-width: none;
  padding: calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 4.2);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 90px rgba(155, 123, 255, 0.3);
}
body.bandclick .present-phone .bc-phone img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--u) * 3.4);
}
body.bandclick .present-phone .bc-phone::after {
  top: calc(var(--u) * 2);
  width: calc(var(--present-phone-w) * 0.3);
  height: calc(var(--u) * 2);
}
body.bandclick .present-device {
  position: absolute;
  /* Ragt nur in die Spaltenlücke, nicht in die Textspalte (Lücke = 4vw) */
  left: calc(var(--present-phone-w) * -0.18);
  bottom: calc(var(--u) * -0.5);
  width: calc(var(--present-phone-w) * 0.46);
  height: auto;
  /* Die Grafik hat keine Transparenz: schwarze Ecken um ein Gerät mit
     ~14 % Eckenradius (50 px bei 354 px Breite). Der Beschnitt muss genau
     dieser Rundung folgen, sonst bleiben schwarze Zwickel bzw. die
     Rahmenlinien werden angeschnitten. Deshalb Radius aus der Breite
     ableiten und kein 1-px-Ring. */
  border-radius: calc(var(--present-phone-w) * 0.46 * 0.145);
  transform: rotate(-8deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* QR-Code: bleibt weiß (Kontrast fürs Scannen), Text in Folienfarben */
body.bandclick .present-qr-img { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
body.bandclick .present-qr-cta { color: var(--bc-fg); }
body.bandclick .present-url {
  color: var(--bc-fg);
  border-bottom-color: var(--bc-primary);
}

/* Fußzeile, Bedienelemente, Vortragender */
body.bandclick .present-foot { color: var(--bc-muted); }
body.bandclick .present-controls button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--bc-fg);
}
body.bandclick .present-controls button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--bc-primary);
}
body.bandclick .present-presenter { color: var(--bc-fg); }
body.bandclick .present-presenter-text { color: var(--bc-muted); }
body.bandclick .present-presenter-text strong { color: var(--bc-fg); }
body.bandclick .present-avatar {
  background: linear-gradient(145deg, #a98bff, var(--bc-primary-strong));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--bc-bg);
}
body.bandclick .present-toast {
  background: rgba(243, 242, 248, 0.94);
  color: var(--bc-bg);
}

/* Hochkant: Gerät hinter dem Telefon würde in den Text ragen – ausblenden */
@media (max-aspect-ratio: 4/3) {
  body.bandclick .present-device { display: none; }
}