/* =====================================================================
   LUKEN — Testanstrich "LUNA"
   =====================================================================

   EIN VERSUCH, KEIN UMBAU.

   Diese Datei ÜBERSCHREIBT styles.css, sie ersetzt sie nicht. Jede
   Regel hier steht unter

       html[data-skin="luna"] …

   Ohne dieses Attribut auf <html> passiert also gar nichts — die
   Seite sieht dann aus wie immer. Genau das ist der Punkt: der
   Versuch lässt sich jederzeit abstellen, ohne dass irgendwo eine
   alte Zeile wieder eingesammelt werden muss.

   ---------------------------------------------------------------------
   AN UND AUS
   ---------------------------------------------------------------------
       mixedbyluken.com/?skin=luna     einschalten
       mixedbyluken.com/?skin=aus      ausschalten

   Die Entscheidung merkt sich der Browser (localStorage 'lk-skin'),
   sie gilt danach für alle Seiten, bis du sie wieder umstellst.
   Besucher, die den Anhang nicht kennen, sehen weiterhin die alte
   Seite.

   ---------------------------------------------------------------------
   GANZ WEG
   ---------------------------------------------------------------------
   Diese Datei löschen und in den HTML-Dateien zwei Zeilen entfernen:
   den <link> auf theme-luna.css und den Absatz "Testanstrich" im
   <script> im Kopf. Sonst ist nichts angefasst worden.

   ---------------------------------------------------------------------
   WAS DER ANSTRICH ÄNDERT
   ---------------------------------------------------------------------
   Kein einziges Element verschwindet, und keins kommt dazu. Es
   ändern sich Farbe, Kanten, Schriftgewicht und Abstände:

     Farbe      kühles Fast-Schwarz statt neutralem Schwarz,
                Minze statt Messing
     Kanten     rechtwinklig statt rund — das ist der halbe Look
     Flächen    keine abwechselnd hellen Abschnitte mehr, sondern
                eine durchgehende Fläche mit Haarlinien dazwischen
     Raster     die Preise werden zu einem Kartenraster mit Nummern
                und Kategorien, wie in der Vorlage
     Schrift    Überschriften schwerer und enger, darüber eine
                kleine Zeile in Versalien

   Laufband, Pegelbalken, Player, Formulare, Aufklapper — alles
   bleibt und tut, was es vorher tat.

   ---------------------------------------------------------------------
   NUR DUNKEL
   ---------------------------------------------------------------------
   Die Vorlage ist ein dunkles Design. Der Anstrich zieht deshalb
   auch im hellen Modus die dunklen Farben — der Hell/Dunkel-Schalter
   oben rechts wirkt bei eingeschaltetem Anstrich also nicht. Das ist
   Absicht und kein Fehler.
   ===================================================================== */


/* =====================================================================
   1. FARBEN UND MASSE
   =====================================================================
   Alles über dieselben Variablen, die styles.css ohnehin benutzt.
   Damit färbt sich fast die ganze Seite von selbst um — auch
   Formulare, Player und die Unterseiten, die hier gar nicht
   einzeln vorkommen.

   Der Doppelpunkt-Trick :root:root erhöht nur das Gewicht der
   Regel, damit sie die Paletten aus styles.css sicher schlägt —
   auch die für den hellen Modus.
   ===================================================================== */
:root:root[data-skin="luna"]{
  /* Fast schwarz, aber kühl: ein Hauch Blaugrün drin. Das ist der
     Unterschied zwischen "aus" und "teuer". */
  --bg:#0d1113;
  --bg2:#0f1416;
  --surface:#141a1d;
  --surface2:#1a2226;

  /* Trennlinien als durchscheinendes Weiß statt als eigene Farbe:
     so liegen sie auf jeder Fläche gleich leicht auf. */
  --line:rgba(255,255,255,.085);
  --line2:rgba(255,255,255,.17);

  --text:#f3f6f6;
  --muted:#9ba6a8;
  --dim:#6e7a7d;

  /* Minze. Hell genug für kleine Schrift auf dem dunklen Grund. */
  --accent:#7fd4c1;
  --accent-hi:#a7e6d9;
  --accent-big:#7fd4c1;
  --on-accent:#062019;
  --accent-dim:rgba(127,212,193,.13);
  --glow:rgba(127,212,193,.09);

  --navbg:rgba(13,17,19,.88);
  --danger:#ff8a86;

  /* DIE wichtigste Zeile der Datei: rechte Winkel. Die Vorlage
     hat keine einzige runde Ecke, und daran erkennt man sie
     schneller als an der Farbe. */
  --r:2px;
  --r-sm:2px;

  /* Weniger Korn — die Vorlage ist glatt. */
  --grain:.16;
  --shadow:0 24px 60px rgba(0,0,0,.6);
}


/* =====================================================================
   2. SCHRIFT
   =====================================================================
   Überschriften schwerer und enger, kleine Zeilen weiter gesperrt.
   Mehr passiert nicht — die Schriften selbst bleiben Switzer und
   Fragment Mono.
   ===================================================================== */
[data-skin="luna"] h1,
[data-skin="luna"] h2,
[data-skin="luna"] h3{letter-spacing:-.042em}

[data-skin="luna"] .sh__h,
[data-skin="luna"] .close__h,
[data-skin="luna"] .submit__title{font-weight:800;letter-spacing:-.045em}

[data-skin="luna"] .mono{letter-spacing:.2em;font-size:.68rem}


/* =====================================================================
   3. KNÖPFE
   =====================================================================
   Aus der Pille wird ein Block. Der Lichtstreif beim Überfahren
   bleibt — er passt auch hier, nur ohne die runde Kante.
   ===================================================================== */
[data-skin="luna"] .btn{
  border-radius:2px;font-weight:600;letter-spacing:.01em;
}
[data-skin="luna"] .btn--accent:hover{
  box-shadow:0 12px 30px rgba(127,212,193,.18);
}
[data-skin="luna"] .btn--ghost,
[data-skin="luna"] .btn--line{border-color:var(--line2)}


/* =====================================================================
   4. KOPFLEISTE
   ===================================================================== */
[data-skin="luna"] .nav.scrolled,
[data-skin="luna"] .nav--solid{border-bottom-color:var(--line)}

[data-skin="luna"] .brand__name{font-weight:700;letter-spacing:-.03em}
/* Die drei Balken der Wortmarke sind der kleine Bruder der
   Pegelbalken unten im Hero. Beide bleiben, beide werden Minze. */
[data-skin="luna"] .brand__mark i{border-radius:0}

[data-skin="luna"] .nav__links a{font-size:.9rem;letter-spacing:-.01em}


/* =====================================================================
   5. HERO
   =====================================================================
   Die Vorlage stellt alles nach LINKS an eine Kante, nicht in die
   Mitte. Das ist die zweite Sache, an der man sie erkennt.

   Die Wortmarke selbst bleibt, wie sie ist — samt Neigung unter dem
   Mauszeiger und Leuchten. Nur ihre Farbe wechselt: in der Vorlage
   steht der Name in der Akzentfarbe und alles andere in Weiß.
   ===================================================================== */
[data-skin="luna"] .hero{
  align-items:flex-start;text-align:left;
  min-height:92vh;min-height:92lvh;
  padding-top:calc(var(--navh) + clamp(40px,9vh,110px));
}
[data-skin="luna"] .hero__mark,
[data-skin="luna"] .hero__tilt{align-items:flex-start}

[data-skin="luna"] .hero__by{
  margin-left:0;color:var(--accent);letter-spacing:.28em;
  text-transform:uppercase;
}
[data-skin="luna"] .hero__word{
  color:var(--accent-big);
  letter-spacing:-.05em;font-size:clamp(3.4rem,14.5vw,11rem);
}
[data-skin="luna"] .hero__claim--gold{
  color:var(--muted);letter-spacing:.2em;
}
[data-skin="luna"] .hero__cta{justify-content:flex-start}

/* Der Schein wandert nach rechts oben, wie in der Vorlage — links
   steht jetzt die Schrift, dort hat er nichts zu suchen. */
[data-skin="luna"] .hero__glow{
  top:34%;left:76%;width:min(900px,110vw);height:min(620px,72vh);
}

/* ---- Die Pegelbalken unten ----
   Bleiben, wie sie sind: dieselbe Zahl, dieselbe Bewegung. Sie
   werden nur schmaler, ruhiger und rechtwinklig — statt eines
   Farbverlaufs eine gleichmäßig durchscheinende Minze. */
[data-skin="luna"] .wave{opacity:.5;gap:4px;height:88px}
[data-skin="luna"] .wave i{
  border-radius:0;
  background:linear-gradient(180deg,rgba(127,212,193,.85),rgba(127,212,193,.06));
}


/* =====================================================================
   6. LAUFBAND MIT DEN ARTISTS
   =====================================================================
   Läuft weiter wie bisher. Aus den großen Namen werden kleine
   gesperrte Versalien — dieselbe Bauart wie die Zeilen "EXPLORE 11
   FEATURES" in der Vorlage.
   ===================================================================== */
[data-skin="luna"] .strip{
  background:transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;
}
[data-skin="luna"] .strip__track{gap:30px}
[data-skin="luna"] .strip__track span{
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);
}
[data-skin="luna"] .strip:hover .strip__track span{color:var(--text)}
[data-skin="luna"] .strip__track i{font-size:.4rem;opacity:.8}


/* =====================================================================
   7. ABSCHNITTE
   =====================================================================
   Die Vorlage hat keine abwechselnd hellen und dunklen Streifen,
   sondern EINE durchgehende Fläche. Getrennt wird mit einer
   Haarlinie, die links in der Akzentfarbe anfängt und nach rechts
   ausläuft — der Strich unter dem Kopfbereich im ersten Bild.
   ===================================================================== */
[data-skin="luna"] .sec--alt{
  background:transparent;border-block:0;
}
[data-skin="luna"] .sec{position:relative}
[data-skin="luna"] .sec + .sec::before,
[data-skin="luna"] .sec--alt::before{
  content:'';position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.09) 34%,rgba(255,255,255,.05));
  opacity:.65;
}

/* ---- Die kleine Zeile über jeder Überschrift ----
   In der Vorlage steht über jedem Kapitel eine gesperrte Zeile in
   der Akzentfarbe: "FEATURE PREVIEW 01".

   Hier entsteht sie ohne eine einzige Änderung am HTML: die
   Abschnitte zählen sich selbst hoch (counter), und die Ziffer
   wandert per ::before über die Überschrift. Schaltest du den
   Anstrich ab, ist die Zeile weg — es steht ja nichts im Text. */
[data-skin="luna"] body{counter-reset:lunasec}
[data-skin="luna"] .sec{counter-increment:lunasec}
[data-skin="luna"] .sh__h::before{
  content:"Luken · " counter(lunasec,decimal-leading-zero);
  display:block;margin-bottom:clamp(14px,1.6vw,22px);
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}

/* Die Überschrift selbst steht in der Vorlage WEISS da, nicht in
   der Akzentfarbe — die ist der kleinen Zeile darüber vorbehalten.
   Genau dieser Wechsel macht den ruhigen Eindruck. */
[data-skin="luna"] .sh__h{color:var(--text);font-size:clamp(2.2rem,4.6vw,3.6rem)}

/* Der Text rechts neben der Überschrift bleibt, wo er ist. */
[data-skin="luna"] .sh__note{color:var(--muted)}
[data-skin="luna"] .sh__all{
  border-bottom-color:var(--line2);
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}


/* =====================================================================
   8. PREISE ALS KARTENRASTER
   =====================================================================
   Das Herzstück der Vorlage: zwei Spalten, dünne Linien dazwischen,
   oben links eine Nummer, oben rechts die Kategorie.

   Aus den vier Preiszeilen wird genau so ein Raster. Aufklappen
   funktioniert unverändert — es wird nur die Karte höher, in der
   geklickt wurde.

   Die Kategorien stehen NICHT im HTML, sondern kommen hier aus der
   Reihenfolge. Ändert sich die Reihenfolge der vier Zeilen, müssen
   die vier Wörter hier mitwandern.
   ===================================================================== */
[data-skin="luna"] .rates{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  counter-reset:lunarate;
}
[data-skin="luna"] .rate{
  position:relative;overflow:hidden;
  border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;
  counter-increment:lunarate;
  transition:background .35s var(--ease);
}
[data-skin="luna"] .rate:hover{background:var(--surface)}
[data-skin="luna"] .rate.is-open{background:var(--surface)}

/* Der große, blasse Bogen unten rechts in der Karte. In der
   Vorlage schneidet dort ein Kreis durch die Ecke — er nimmt der
   leeren Fläche die Leere, ohne etwas zu sagen. Reine Verzierung,
   deshalb per ::after und ohne Bedeutung für Vorleseprogramme.

   Ein Buchstabe stand hier zuerst; er las sich aus dem Augenwinkel
   wie ein zweiter Rahmen mitten in der Karte. */
[data-skin="luna"] .rate::after{
  content:'';position:absolute;right:-88px;bottom:-132px;
  width:280px;height:280px;border:1px solid var(--line2);border-radius:50%;
  opacity:.5;pointer-events:none;
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
[data-skin="luna"] .rate:hover::after{opacity:.9;transform:translate(-6px,-6px)}

/* Nummer oben links, Kategorie oben rechts. Beides sitzt im
   Innenabstand der Zeile, damit nichts verrutscht. */
[data-skin="luna"] .rate__row{
  position:relative;z-index:1;
  grid-template-columns:1fr;
  grid-template-areas:
    "name"
    "meta"
    "price";
  gap:14px;
  padding:clamp(60px,6vw,74px) clamp(24px,2.6vw,34px) clamp(28px,3vw,38px);
}
[data-skin="luna"] .rate__row::before{
  content:counter(lunarate,decimal-leading-zero);
  position:absolute;left:clamp(24px,2.6vw,34px);top:clamp(24px,2.6vw,30px);
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.2em;color:var(--accent);
}
[data-skin="luna"] .rate__row::after{
  position:absolute;right:clamp(24px,2.6vw,34px);top:clamp(24px,2.6vw,30px);
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
[data-skin="luna"] .rate:nth-child(1) .rate__row::after{content:"Mix"}
[data-skin="luna"] .rate:nth-child(2) .rate__row::after{content:"Master"}
[data-skin="luna"] .rate:nth-child(3) .rate__row::after{content:"Studio"}
[data-skin="luna"] .rate:nth-child(4) .rate__row::after{content:"Beratung"}
/* Drei der vier Wörter stehen in beiden Sprachen gleich da. Nur
   dieses eine nicht. */
[data-skin="luna"][lang="en"] .rate:nth-child(4) .rate__row::after{content:"Advice"}

[data-skin="luna"] .rate__name{
  font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.04em;
}
[data-skin="luna"] .rate__meta{max-width:44ch}
[data-skin="luna"] .rate__price{
  justify-self:start;color:var(--accent);
  font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;
}
/* Der Pfeil zum Aufklappen sitzt jetzt unten rechts statt mittig
   rechts — mittig stünde er im Kartenraster mitten im Text. */
[data-skin="luna"] .rate__chev{
  position:absolute;right:clamp(24px,2.6vw,34px);bottom:clamp(30px,3vw,40px);
  align-self:auto;justify-self:auto;
}
[data-skin="luna"] .rate__inner>*:first-child:not(.btn){border-top-color:var(--line)}

/* Ab hier ist für zwei Spalten kein Platz mehr. */
@media (max-width:820px){
  [data-skin="luna"] .rates{grid-template-columns:1fr}
  [data-skin="luna"] .rate::after{width:200px;height:200px;right:-70px;bottom:-104px}
}


/* =====================================================================
   9. RELEASES
   =====================================================================
   Die Schiene bleibt eine Schiene, die Cover bleiben Cover. Nur die
   Rundungen fallen weg und die Beschriftungen werden ruhiger.
   ===================================================================== */
[data-skin="luna"] .rel__cover{border-radius:0}
[data-skin="luna"] .rel__pl{border-radius:0}
[data-skin="luna"] .rel__title{font-weight:700;letter-spacing:-.038em}
[data-skin="luna"] .rel__kind{border-radius:0;letter-spacing:.2em}
[data-skin="luna"] .rel__row{border-radius:0}
[data-skin="luna"] .rel__ico{border-radius:0}
[data-skin="luna"] .rel__eq i{border-radius:0}
[data-skin="luna"] .rail__nav{border-radius:0}
[data-skin="luna"] .rel.is-current .rel__cover{box-shadow:0 0 0 1px var(--accent)}


/* =====================================================================
   10. ABLAUF, EQUIPMENT, FRAGEN
   =====================================================================
   Drei Listen, die alle schon aus Haarlinien bestehen — sie sind
   dem Vorbild ohnehin am nächsten. Hier ändern sich nur Kanten und
   Gewichte.
   ===================================================================== */
[data-skin="luna"] .chain::before{
  background:linear-gradient(180deg,var(--accent),rgba(255,255,255,.06) 62%);
}
[data-skin="luna"] .node__dot{border-radius:0;background:var(--bg);border-width:1px}
[data-skin="luna"] .node__idx{letter-spacing:.2em}
[data-skin="luna"] .node__h{font-weight:700;letter-spacing:-.035em;font-size:1.32rem}

[data-skin="luna"] .kit>div{padding:19px 0}
[data-skin="luna"] .kit dt{letter-spacing:.2em}

[data-skin="luna"] .qa summary{font-weight:600;letter-spacing:-.03em}
[data-skin="luna"] .faq{max-width:none}
[data-skin="luna"] .qa__a{max-width:80ch}


/* =====================================================================
   11. BEWERTUNGEN, FOTOS, KONTAKT
   ===================================================================== */
[data-skin="luna"] .bew{border-radius:0;background:var(--surface)}
[data-skin="luna"] .fotos__f{border-radius:0}
[data-skin="luna"] .kontakt{max-width:720px}


/* =====================================================================
   12. FORMULARE
   =====================================================================
   Gilt auch für submit, booking und files — dieselben Bausteine.
   ===================================================================== */
[data-skin="luna"] .fld input,
[data-skin="luna"] .fld select,
[data-skin="luna"] .fld textarea,
[data-skin="luna"] .qty,
[data-skin="luna"] .code__feld{border-radius:2px}
[data-skin="luna"] .fld label:not(.check),
[data-skin="luna"] .fld__lbl{letter-spacing:.2em}
[data-skin="luna"] .up{border-radius:2px}
[data-skin="luna"] .upf{border-radius:2px}
[data-skin="luna"] .pick__box,
[data-skin="luna"] .specbox,
[data-skin="luna"] .summary,
[data-skin="luna"] .est,
[data-skin="luna"] .seg>span,
[data-skin="luna"] .opts,
[data-skin="luna"] .side{border-radius:2px}
[data-skin="luna"] .check input{border-radius:2px}
[data-skin="luna"] .done__mark{border-radius:0}


/* =====================================================================
   13. SCHLUSSAUFRUF UND FUSSZEILE
   ===================================================================== */
[data-skin="luna"] .close{
  background:transparent;border-top:1px solid var(--line);
}
[data-skin="luna"] .close__h{font-size:clamp(2.4rem,5.4vw,4.2rem)}
[data-skin="luna"] .close__p{color:var(--muted)}

[data-skin="luna"] .footer{background:transparent;border-top:1px solid var(--line)}
[data-skin="luna"] .footer__ct{letter-spacing:.2em;color:var(--accent)}
[data-skin="luna"] .footer__col a{font-size:.9rem}


/* =====================================================================
   14. PLAYER-LEISTE
   ===================================================================== */
[data-skin="luna"] .pl{border-top-color:var(--line)}
[data-skin="luna"] .pl__seek{background:rgba(255,255,255,.07)}
[data-skin="luna"] .pl__fill b{border-radius:0}
