/* ====================  css/masterclass.css  ====================
   Die Shopify-Masterclass auf renekress.de (27.09.2026): Verkaufsseite
   /masterclass/ und Mitgliederbereich /masterclass/kurs/.

   Keine eigene Formensprache - dieselben Bausteine wie der Rest der Seite:
   Haarlinien statt Karten, Versalien nur in h1/h2 und Beschriftungen, der
   Logoverlauf nur dort, wo etwas als Fortschritt oder Betonung gelesen wird.
   Tafeln (Preis, Player, Anmeldung) wie die Mockups: fast deckend, eine
   Haarlinie, 10 px Rundung.

   Die Verkaufsseite erzeugt Erklaervideos/masterclass/renekress_seite.py,
   den Mitgliederbereich steuert js/masterclass-kurs.js. */

/* ---------- Knopf, solange es noch nichts zu kaufen gibt ---------- */
.knopf--aus{ opacity: .55; cursor: default }
.knopf--aus:hover{ background: transparent; color: var(--text); border-color: var(--text) }

.mc-schon{ font-size: .9rem; color: var(--text-fern) }
.mc-schon a{ color: var(--text-leise); text-underline-offset: 3px }
.mc-schon a:hover{ color: var(--text) }

/* ---------- Einstieg: ein Bild aus einer echten Lektion ---------- */
.mc-player-mock{ width: 100% }
.mc-player{
  width: 100%; border-radius: 10px; overflow: hidden;
  background: #07080d; border: 1px solid rgba(140,170,240,.30);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), 0 0 0 6px rgba(140,170,240,.05);
}
.mc-player img{ display: block; width: 100%; height: auto }
.mc-player-leiste{
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; background: rgba(9,11,20,.96); border-top: 1px solid var(--linie);
}
.mc-player-start{
  width: 10px; height: 12px; flex: none; background: var(--text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.mc-player-bahn{ flex: 1; height: 3px; border-radius: 2px; background: rgba(140,170,240,.18); overflow: hidden }
.mc-player-bahn i{ display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--blau), var(--violett)) }
.mc-player-zeit{ font-size: .72rem; color: var(--text-leise); font-variant-numeric: tabular-nums }

/* ---------- Für wen: zwei Spalten, Zeilen mit Haarlinien ---------- */
.mc-fuer{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); position: relative }
.mc-fuer .kapitel-nr{ margin-bottom: 12px }
.mc-fuer ul{ list-style: none; border-top: 1px solid var(--linie) }
.mc-fuer li{
  position: relative; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--linie);
  color: var(--text); line-height: 1.5;
}
.mc-fuer li::before{
  content: ""; position: absolute; left: 2px; top: 1.45em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blau);
}
.mc-fuer-nein li{ color: var(--text-leise) }
.mc-fuer-nein li::before{ width: 10px; height: 1.5px; border-radius: 0; background: var(--text-fern); top: 1.6em }
@media (max-width: 760px){ .mc-fuer{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Lehrplan ---------- */
.mc-lehrplan{ position: relative; max-width: 980px }
.mc-lehrplan::before{
  content: ""; position: absolute; inset: -4vh -4vw; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 90% at 40% 50%, rgba(5,6,12,.94) 0%, rgba(5,6,12,.82) 55%, transparent 88%);
}
/* Die Stufen tragen die Farbe ihres Platzes auf der Strecke Blau → Violett,
   wie die Zeitachse auf der Startseite. */
.mc-stufe{
  margin: 34px 0 10px; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blau); max-width: none;
}
.mc-stufe:first-child{ margin-top: 0 }
.mc-lehrplan p.mc-stufe:nth-of-type(2){ color: #1878f8 }
.mc-lehrplan p.mc-stufe:nth-of-type(3){ color: var(--blau-tief) }
.mc-lehrplan p.mc-stufe:nth-of-type(4){ color: #5048f4 }
.mc-lehrplan p.mc-stufe:nth-of-type(5){ color: #7830f8 }
.mc-lehrplan p.mc-stufe:nth-of-type(6){ color: var(--violett) }
.mc-lehrplan p.mc-stufe:nth-of-type(n+7){ color: var(--violett-h) }

.mc-kapitel{ border-top: 1px solid var(--linie) }
.mc-kapitel:last-child{ border-bottom: 1px solid var(--linie) }
.mc-kapitel summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 18px; gap: 18px; align-items: baseline;
  padding: 18px 0;
}
.mc-kapitel summary::-webkit-details-marker{ display: none }
.mc-kapitel summary::after{ content: "+"; color: var(--text-leise); text-align: right }
.mc-kapitel[open] summary::after{ content: "–" }
.mc-kapitel summary:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.mc-kap-nr{ font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-fern) }
.mc-kap-titel{ font-size: 1.04rem; color: var(--text); font-weight: 500 }
.mc-kap-meta{ font-size: .84rem; color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap }
.mc-lektionen{ list-style: none; margin: -4px 0 16px 128px; border-top: 1px solid rgba(140,170,240,.09) }
.mc-lektionen li{
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(140,170,240,.09);
  font-size: .94rem; color: var(--text-leise);
}
.mc-lek-nr{ font-variant-numeric: tabular-nums; color: var(--text-fern) }
.mc-lek-min{ font-size: .84rem; color: var(--text-fern); font-variant-numeric: tabular-nums; white-space: nowrap }
@media (max-width: 760px){
  .mc-kapitel summary{ grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 12px }
  .mc-kap-nr{ grid-column: 1; grid-row: 1 }
  .mc-kap-titel{ grid-column: 1; grid-row: 2 }
  .mc-kap-meta{ grid-column: 1; grid-row: 3 }
  .mc-kapitel summary::after{ grid-column: 2; grid-row: 1 / span 3; align-self: center }
  .mc-lektionen{ margin-left: 0 }
  .mc-lektionen li{ grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px }
}

/* ---------- Preis ---------- */
.mc-preis-raster{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
@media (max-width: 900px){ .mc-preis-raster{ grid-template-columns: minmax(0, 1fr) } }
.mc-preis{
  background: rgba(9,11,20,.94); border: 1px solid var(--linie); border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.9);
  max-width: 460px;
}
.mc-preis p{ max-width: none }
.mc-preis-kopf{ font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }
.mc-preis-wert{
  margin: 10px 0 8px; font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 600; line-height: 1;
  letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;
}
.mc-preis-zeile{ font-size: .92rem; color: var(--text-leise) }
.mc-haken{ list-style: none; margin: 20px 0 22px; border-top: 1px solid var(--linie) }
.mc-haken li{
  position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--linie);
  font-size: .92rem; color: var(--text); line-height: 1.45;
}
.mc-haken li::before{
  content: ""; position: absolute; left: 1px; top: 1.2em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blau);
}
.mc-preis .knopf{ display: block; text-align: center }
.mc-preis-fuss{ margin-top: 12px; font-size: .78rem; color: var(--text-fern) }


/* ====================  Mitgliederbereich  ==================== */

/* Kein Kapitel mit 100svh und 22vh Abstand: hier wird gearbeitet, nicht
   gescrollt. Der Rahmen beginnt direkt unter dem Schleier des Kopfes. */
.mk{
  width: var(--spalte); margin-inline: auto;
  padding: calc(var(--kopf-h) + 40px) var(--rand) 72px;
  position: relative; min-height: 80svh;
}
.mk [hidden]{ display: none !important }
.mk p{ max-width: none }
.mk h1{ font-size: clamp(2rem, 4vw, 3.2rem) }
/* Der dunkle Hof, den welt.css hinter Formulare legt (Lesbarkeit über der Punktwolke), ist hier
   ohne Wolke überflüssig - und in der scrollbaren Spalte wurde er zum sichtbaren Rechteck. */
.mk .formular::before{ content: none }

.mk-mitte{ min-height: 56svh; display: grid; place-items: center; text-align: center; gap: 16px }
.mk-tafel{
  width: min(460px, 100%); text-align: left;
  background: rgba(9,11,20,.94); border: 1px solid var(--linie); border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.9);
}
/* Schmale Tafel: kleiner als h1 im Kapitel, sonst bricht „FREIGESCHALTET“ mitten im Wort um */
.mk-tafel h1{ margin: 10px 0 12px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.08 }
.mk-tafel .formular{ margin: 22px 0 0; max-width: none }
.mk-tafel .formular .knopf{ align-self: stretch; text-align: center }
.mk-sub{ color: var(--text-leise); font-size: .95rem; line-height: 1.55 }
.mk-sub strong{ color: var(--text); font-weight: 500 }
.mk-link{
  background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; cursor: pointer;
  color: var(--text-leise); text-align: left; text-decoration: underline; text-underline-offset: 3px;
}
.mk-link:hover{ color: var(--text) }
.mk-link:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.mk-meldung{ font-size: .88rem; line-height: 1.5; color: var(--text) }
.mk-meldung:empty{ display: none }
.mk-fuss{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .88rem; color: var(--text-leise) }
.mk-fuss a{ color: var(--text) }

/* Laden: ein Ring im Logoverlauf */
.mk-lade-ring{
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--blau), var(--violett), transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: mk-dreh 1s linear infinite;
}
@keyframes mk-dreh{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .mk-lade-ring{ animation-duration: 3s } }
.mk-mitte > p{ color: var(--text-leise); font-size: .95rem }

/* Danke-Seite nach dem Kauf */
.mk-willkommen{
  margin-bottom: 28px; padding: 18px 22px; border-left: 2px solid var(--blau);
  background: rgba(9,11,20,.8);
}
.mk-willkommen strong{ display: block; font-weight: 600; color: var(--text); margin-bottom: 6px }
.mk-willkommen p{ color: var(--text-leise); font-size: .95rem; line-height: 1.55 }
.mk-willkommen-fuss{ margin-top: 8px; font-size: .82rem; color: var(--text-fern) }

/* Kopf: Fortschritt und Konto */
.mk-kopf{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap }
.mk-kopf .marke-zeile{ margin-bottom: 8px }
.mk-kopf h1{ margin-bottom: 14px }
.mk-fortschritt{ min-width: min(520px, 100%) }
.mk-fortschritt-text{ font-size: .92rem; color: var(--text-leise) }
.mk-fortschritt-text strong{ color: var(--text); font-weight: 500 }
.mk-fortschritt-bahn{ margin-top: 10px; height: 3px; border-radius: 2px; background: rgba(140,170,240,.16); overflow: hidden }
.mk-fortschritt-bahn span{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blau), var(--violett)); transition: width .4s ease-out }
.mk-konto{ display: flex; align-items: center; gap: 16px; font-size: .86rem; color: var(--text-leise) }

/* Reiter: wie der Kolumnentitel im Kopf - Text mit Haarlinie */
.mk-tabs{ display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 30px 0 22px; border-bottom: 1px solid var(--linie) }
.mk-tab{
  background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
  padding: 10px 0; font: inherit; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise); cursor: pointer;
}
.mk-tab:hover{ color: var(--text) }
.mk-tab--an{ color: var(--text); border-bottom-color: var(--papier) }
.mk-tab:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }

/* Liste links, Player rechts; auf dem Telefon der Player zuerst */
.mk-bereich{ display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start }
@media (max-width: 900px){
  .mk-bereich{ grid-template-columns: minmax(0, 1fr) }
  .mk-player{ order: -1 }
}
.mk-seite{ max-height: calc(100svh - 140px); overflow: auto; padding-right: 6px }
@media (max-width: 900px){ .mk-seite{ max-height: none; overflow: visible; padding-right: 0 } }

.mk-kap + .mk-kap{ margin-top: 20px }
.mk-kap-titel{
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-fern);
  padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.mk-kap ol{ list-style: none }
.mk-lek{
  position: relative; width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px;
  align-items: baseline; text-align: left; padding: 11px 8px 11px 10px;
  background: none; border: 0; border-bottom: 1px solid rgba(140,170,240,.09); border-left: 1px solid transparent;
  font: inherit; font-size: .92rem; color: var(--text-leise); cursor: pointer;
}
.mk-lek:hover{ color: var(--text) }
.mk-lek:focus-visible{ outline: 2px solid var(--papier); outline-offset: -2px }
.mk-lek--aktiv{ color: var(--text); border-left-color: var(--blau); background: rgba(48,96,240,.08) }
.mk-lek--bald{ cursor: default; color: var(--text-fern) }
.mk-lek--bald:hover{ color: var(--text-fern) }
.mk-lek-nr{ color: var(--text-fern); font-variant-numeric: tabular-nums; margin-right: 4px }
.mk-lek-min{ font-size: .8rem; color: var(--text-fern); font-variant-numeric: tabular-nums; white-space: nowrap }
/* Zustand: leerer Ring = neu, halber = angefangen, voller Punkt im Verlauf = fertig */
.mk-lek-zeichen{
  width: 10px; height: 10px; border-radius: 50%; align-self: center;
  border: 1.5px solid var(--text-fern);
}
.mk-lek--angefangen .mk-lek-zeichen{ border-color: var(--blau); background: linear-gradient(90deg, var(--blau) 50%, transparent 50%) }
.mk-lek--fertig .mk-lek-zeichen{ border-color: transparent; background: linear-gradient(135deg, var(--blau), var(--violett)) }
.mk-lek--bald .mk-lek-zeichen{ border-style: dashed; opacity: .6 }
.mk-lek-balken{ position: absolute; left: 10px; right: 8px; bottom: 3px; height: 2px; background: rgba(140,170,240,.12) }
.mk-lek-balken span{ display: block; height: 100%; background: var(--blau) }
.mk-stern{ color: var(--violett-h); margin-left: 6px }
.mk-leer{ color: var(--text-leise); font-size: .92rem; padding: 14px 0 }

/* Player */
.mk-buehne{
  aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 10px;
  background: #000; border: 1px solid rgba(140,170,240,.26);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.95);
  display: grid; place-items: center;
}
.mk-buehne video{ width: 100%; height: 100%; display: block; background: #000 }
/* Bunny-Stream-Player (seit 28.09.2026): füllt die Bühne, die 16:9 vorgibt */
.mk-buehne iframe{ width: 100%; height: 100%; display: block; border: 0; background: #000 }
.mk-buehne-laden{ color: var(--text-leise); font-size: .92rem; padding: 20px; text-align: center }
.mk-player-kopf{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px }
.mk-player-kopf h2{ font-size: clamp(1.1rem, 1.6vw, 1.4rem); text-transform: none; letter-spacing: -.01em; line-height: 1.3 }
.mk-fav{
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 1px solid var(--linie); color: var(--text-fern);
  font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color .14s, border-color .14s;
}
.mk-fav:hover{ color: var(--text); border-color: var(--papier) }
.mk-fav--an{ color: var(--violett-h); border-color: rgba(168,96,240,.6) }
.mk-fav:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }

/* Unterlagen unter dem Player */
.mk-unterlagen{ margin-top: 22px; border-top: 1px solid var(--linie) }
.mk-unterlagen-titel{ padding: 14px 0 6px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }
.mk-unterlage{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.mk-unterlage-name{ color: var(--text); font-size: .96rem }
.mk-unterlage-art{ color: var(--text-fern); font-size: .82rem; margin-top: 2px }
.mk-unterlage .knopf{ flex: none }
.mk-unterlage .knopf:disabled{ opacity: .6; cursor: wait }
.mk-unterlagen-meldung{ margin-top: 10px }

/* Fragen */
.mk-frageform{ margin: 0 0 22px; max-width: none }
.mk-frageform textarea{
  width: 100%; padding: 12px 14px; resize: vertical; min-height: 110px;
  background: rgba(9,11,20,.7); border: 1px solid var(--linie); border-radius: 2px;
  color: var(--text); font: inherit; font-size: .95rem; line-height: 1.5;
}
.mk-frageform textarea::placeholder{ color: var(--text-fern) }
.mk-frageform textarea:focus{ outline: none; border-color: var(--papier) }
.mk-haken-feld{ display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-leise); cursor: pointer }
.mk-haken-feld input{ accent-color: var(--blau); width: 16px; height: 16px }
.mk-frage{ padding: 14px 0; border-bottom: 1px solid var(--linie) }
.mk-frage-kopf{ font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-fern) }
.mk-frage--beantwortet .mk-frage-kopf{ color: var(--blau) }
.mk-frage-text{ margin-top: 6px; color: var(--text); font-size: .95rem; line-height: 1.5; white-space: pre-line }
.mk-antwort{ margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--violett) }
.mk-antwort strong{ display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); font-weight: 500 }
.mk-antwort p{ margin-top: 4px; color: var(--text-leise); font-size: .94rem; line-height: 1.55; white-space: pre-line }

/* Live-Calls */
.mk-live{
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--linie);
}
.mk-live-zeit{ color: var(--text); font-size: .95rem }
.mk-live-titel{ color: var(--text-leise); font-size: .86rem; margin-top: 2px }
.mk-live .knopf{ flex: none }


/* ====================  Admin (/masterclass/admin/)  ====================
   Dieselben Bausteine wie der Mitgliederbereich: Zeilen mit Haarlinien, kleine
   Versal-Beschriftungen, Knöpfe als Rahmen. Farbe nur für den Zustand. */

.mk-wartet{
  margin-left: 8px; padding: 1px 7px; border: 1px solid rgba(168,96,240,.45); border-radius: 2px;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violett-h);
}

.knopf--gefahr{ border-color: rgba(224,72,58,.6); color: #ff9a8d }
.knopf--gefahr:hover{ background: var(--rot); border-color: var(--rot); color: #fff }

.amc-titel{ font-size: clamp(1.8rem, 3vw, 2.6rem) }
.amc-zahlen{
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  margin-top: 26px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.amc-kachel{ padding: 16px 16px 16px 0 }
.amc-kachel + .amc-kachel{ padding-left: 16px; border-left: 1px solid var(--linie) }
.amc-kachel-wert{ font-size: 1.5rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.amc-kachel-name{ margin-top: 4px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }
.amc-kachel-fuss{ margin-top: 2px; font-size: .8rem; color: var(--text-fern) }
@media (max-width: 900px){
  .amc-zahlen{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .amc-kachel, .amc-kachel + .amc-kachel{ padding: 14px 12px 14px 0; border-left: 0; border-bottom: 1px solid var(--linie) }
}
.amc-reiter-zahl{ margin-left: 4px; color: var(--text-fern) }

.amc-fehler{ color: #ffb4a8; font-size: .88rem; line-height: 1.5 }
.amc-fehler--oben{ margin: 0 0 18px; padding: 10px 14px; border: 1px solid rgba(224,72,58,.5); background: rgba(224,72,58,.08); border-radius: 2px }
.amc-hinweis{ margin-bottom: 18px; padding: 10px 14px; border-left: 2px solid var(--violett-h); color: var(--text-leise); font-size: .9rem }
.amc-erklaerung{ color: var(--text-fern); font-size: .86rem; line-height: 1.55; margin-bottom: 14px }
.amc-meldung{ font-size: .86rem; color: var(--text-leise) }
.amc-abschnitt{ margin: 28px 0 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }

/* Lektionen */
.amc-kapitel + .amc-kapitel{ margin-top: 26px }
.amc-kapitel-titel{
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--linie);
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise);
}
.amc-kapitel-stand{ color: var(--text-fern); letter-spacing: .08em }
.amc-lek{
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(140,170,240,.09);
}
.amc-lek-nr{ color: var(--text-fern); font-variant-numeric: tabular-nums }
.amc-lek-titel{ color: var(--text); font-size: .96rem }
.amc-lek--geplant .amc-lek-titel{ color: var(--text-leise) }
.amc-meta{ display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: .8rem; color: var(--text-fern) }
.amc-warnungen{ margin-top: 6px; font-size: .82rem; color: var(--text-leise) }
.amc-warnungen summary{ cursor: pointer }
.amc-warnungen ul{ margin: 6px 0 0 18px }
.amc-aktionen{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
@media (max-width: 760px){
  .amc-lek{ grid-template-columns: 40px minmax(0, 1fr) }
  .amc-lek > .amc-marke, .amc-lek > .amc-aktionen{ grid-column: 2 }
}

/* Zustandsmarken */
.amc-marke{
  display: inline-block; padding: 2px 8px; border: 1px solid var(--linie); border-radius: 2px; white-space: nowrap;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-fern);
}
.amc-marke--arbeit{ color: var(--text-leise) }
.amc-marke--wartet{ color: var(--violett-h); border-color: rgba(168,96,240,.45) }
.amc-marke--frei{ color: var(--blau); border-color: rgba(0,144,252,.45) }
.amc-marke--fehler{ color: #ff9a8d; border-color: rgba(224,72,58,.5) }

/* Fragen */
.amc-filter{ display: flex; gap: 8px; margin-bottom: 14px }
.amc-filter-knopf{
  background: none; border: 1px solid var(--linie); border-radius: 2px; padding: 5px 12px; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--text-leise);
}
.amc-filter-knopf span{ color: var(--text-fern); margin-left: 4px }
.amc-filter-knopf--an{ color: var(--text); border-color: var(--papier) }
.amc-frage{ padding: 16px 0; border-bottom: 1px solid var(--linie) }
.amc-frage-kopf{ display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.amc-frage-kopf strong{ font-weight: 500; color: var(--text) }
.amc-frage-text{ margin: 8px 0 12px; color: var(--text); line-height: 1.55; white-space: pre-line }
.amc-feld{ margin-bottom: 10px }
.amc-feld textarea, .amc-form select{
  width: 100%; padding: 10px 12px; background: rgba(9,11,20,.7); border: 1px solid var(--linie); border-radius: 2px;
  color: var(--text); font: inherit; font-size: .92rem; line-height: 1.5;
}
.amc-feld textarea:focus, .amc-form select:focus{ outline: none; border-color: var(--papier) }
.amc-frage--fertig .amc-frage-text{ color: var(--text-leise) }

/* Formulare: Live-Termin, Zugang von Hand */
.amc-form{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; align-items: end;
  margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: 10px; background: rgba(9,11,20,.6);
}
.amc-form-titel{ grid-column: 1 / -1; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise) }
.amc-breit{ grid-column: 1 / -1 }
.amc-form .feld input{ padding: 9px 0 }
@media (max-width: 760px){ .amc-form{ grid-template-columns: minmax(0, 1fr) } }

/* Live-Termine und Zugänge */
.amc-live, .amc-kunde{ padding: 14px 0; border-bottom: 1px solid var(--linie) }
.amc-live{ display: flex; justify-content: space-between; align-items: center; gap: 14px }
.amc-live strong, .amc-kunde strong{ font-weight: 500; color: var(--text) }
.amc-live-link{ font-size: .82rem; color: var(--text-fern); overflow-wrap: anywhere }
.amc-live-link a{ color: var(--text-leise) }
.amc-live--vorbei{ opacity: .6 }
.amc-vorbei{ margin-top: 18px }
.amc-vorbei summary{ cursor: pointer; font-size: .86rem; color: var(--text-leise) }
.amc-kunde-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px }
.amc-kunde--aus strong{ color: var(--text-leise) }
.amc-bestellungen{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 }
.amc-bestellung{ padding: 2px 8px; border: 1px solid var(--linie); border-radius: 2px; font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums }
.amc-kunde .amc-aktionen{ margin-top: 8px }