/* =====================================================================
   membership.css
   Die Mitgliedschaft. Angelegt am 23.09.2026.

   Aus dem Abo wird ein Gegenstand: eine Karte, die auf den Namen des
   Mitglieds ausgestellt ist. Drei Stufen, dasselbe Objekt in
   steigender Machart. Fan ist matter Karton, Familie hat einen
   leichten Schimmer, VIP ist Goldfolie, die beim Bewegen laeuft.

   Wer nicht angemeldet ist, sieht eine Musterkarte mit dem Namen
   Erika Mustermann und einem Musteraufdruck quer darueber, so wie
   der amtliche Musterpersonalausweis. Die Anmeldung ist damit kein
   Hindernis mehr vor dem Kauf, sondern der Grund: man meldet sich an,
   damit der eigene Name auf der Karte steht.

   Links und rechts liegen die beiden anderen Stufen halb abgeblendet
   und sind Links auf dieselbe Seite mit anderem tier.

   An Preisen, an der Anmeldepruefung und am Stripe-Aufruf wurde
   nichts geaendert.

   Die alte Gestaltung steht in membership-checkout.php weiter drin,
   ist dort aber mit if (false) abgeschaltet.
   ===================================================================== */

:root{
  --ms-nacht:#05080E;
  --ms-nacht-2:#0A111A;
  --ms-schnee:#F1F5FA;
  --ms-frost:#A9BACD;
  --ms-stumm:#78899E;
  --ms-linie:rgba(255,255,255,.12);
  --ms-schrift:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ms-schild:'Oswald',Impact,"Archivo",sans-serif;
  --ms-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Die drei Stufen. Jede hat einen Ton und zwei Kartenfarben, alles
     andere ist gleich, damit man sie wirklich vergleichen kann. */
  --ms-fan-ton:#8FC4E8;   --ms-fan-1:#1A2432;  --ms-fan-2:#101822;
  --ms-fam-ton:#2FE6CE;   --ms-fam-1:#0F2028;  --ms-fam-2:#08151B;
  --ms-vip-ton:#FFD166;   --ms-vip-1:#241B0C;  --ms-vip-2:#120D05;
}

/* =====================================================================
   Die Buehne
   main kommt aus style.css als Flex-Kasten mit align-items:center,
   2rem Polster und content-box. Das macht main breiter als das
   Fenster und laesst Kinder auf Inhaltsbreite schrumpfen. Beides wird
   hier abgeschaltet, die Klasse setzt ein Skript am Seitenende.
   ===================================================================== */
main.ms-main{
  box-sizing:border-box;
  width:100%;
  padding:0;
  align-items:stretch;
}

.membership-checkout{
  box-sizing:border-box;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(28px,5vw,56px) 16px clamp(40px,6vw,72px);
  font-family:var(--ms-schrift);
  color:var(--ms-schnee);
  font-size:16px;line-height:1.65;text-align:left;letter-spacing:normal;
}
.membership-checkout *{box-sizing:border-box;letter-spacing:normal}

/* Der alte Rahmen um die ganze Seite faellt weg, der Inhalt steht
   jetzt frei auf dem dunklen Grund. */
.checkout-card{
  background:none;border:none;border-radius:0;padding:0;box-shadow:none;
}

/* =====================================================================
   Kopf
   ===================================================================== */
.ms-kopf{text-align:center;margin-bottom:clamp(22px,4vw,38px)}
.ms-oben{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ms-stumm);margin:0 0 10px;
}
.membership-checkout h1{
  font-family:var(--ms-schild) !important;
  font-size:clamp(1.9rem,5vw,2.9rem) !important;
  font-weight:700;line-height:1.05;
  text-transform:uppercase !important;
  color:var(--ms-schnee) !important;
  -webkit-text-fill-color:var(--ms-schnee) !important;
  background:none !important;
  animation:none !important;
  text-shadow:none !important;
  text-align:center;
  margin:0 0 8px;
  text-wrap:balance;
}
.ms-unter{
  color:var(--ms-frost);font-size:1rem;line-height:1.6;
  margin:0 auto;max-width:46ch;
}

/* =====================================================================
   Das Regal mit den drei Karten
   ===================================================================== */
.ms-regal{
  /* Ein weicher dunkler Fleck hinter den Karten. Der blaue
     Seitenverlauf bleibt sichtbar, die Karten bekommen aber eine
     Buehne und stehen nicht im Hellen. */
  background:radial-gradient(62% 74% at 50% 50%, rgba(3,6,12,.74) 0%, rgba(3,6,12,.34) 46%, rgba(3,6,12,0) 74%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(14px,3vw,40px);
  margin-bottom:clamp(26px,4vw,44px);
}
.ms-seitlich{display:flex}
.ms-seitlich.links{justify-content:flex-end}
.ms-seitlich.rechts{justify-content:flex-start}
.ms-mitte{display:flex;justify-content:center}

/* --- Die Karte --- */
.ms-ausweis{
  position:relative;
  display:block;
  width:min(360px,80vw);
  aspect-ratio:5/7;
  border:none;border-radius:18px;padding:0;
  text-align:left;text-decoration:none;
  font-family:var(--ms-schrift);
  color:var(--ms-schnee);
  background:linear-gradient(160deg, var(--k1) 0%, var(--k2) 100%);
  box-shadow:
    0 38px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 44px -14px var(--ton);
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .3s ease, opacity .3s ease, filter .3s ease;
}
.ms-ausweis[data-stufe="fan"]    {--ton:var(--ms-fan-ton);--k1:var(--ms-fan-1);--k2:var(--ms-fan-2);--glanz:.035}
.ms-ausweis[data-stufe="familie"]{--ton:var(--ms-fam-ton);--k1:var(--ms-fam-1);--k2:var(--ms-fam-2);--glanz:.09}
.ms-ausweis[data-stufe="vip"]    {--ton:var(--ms-vip-ton);--k1:var(--ms-vip-1);--k2:var(--ms-vip-2);--glanz:.20}

/* Der Lichtschimmer. Er folgt der Maus, der Winkel kommt aus dem
   Skript und wird aus derselben Position gerechnet wie die Neigung,
   sonst passt das Licht nicht zur Schraege. */
.ms-ausweis::before{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    calc(var(--winkel,120) * 1deg),
    rgba(255,255,255,0) 32%,
    rgba(255,255,255,var(--glanz,.05)) 47%,
    rgba(255,255,255,calc(var(--glanz,.05) * 1.7)) 50%,
    rgba(255,255,255,var(--glanz,.05)) 53%,
    rgba(255,255,255,0) 68%);
  mix-blend-mode:screen;
  transition:background .12s linear;
}

/* Feines Muster im Karton, bei VIP als Goldpraegung */
.ms-ausweis::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 9px);
}
.ms-ausweis[data-stufe="vip"]::after{
  opacity:.9;
  background-image:
    repeating-linear-gradient(72deg, rgba(255,209,102,.10) 0 1px, rgba(255,209,102,0) 1px 5px),
    repeating-linear-gradient(-72deg, rgba(0,0,0,.14) 0 1px, rgba(0,0,0,0) 1px 6px);
}

.ms-inhalt{
  position:relative;z-index:3;
  height:100%;
  display:flex;flex-direction:column;
  padding:clamp(18px,4%,26px);
}

/* Solange niemand angemeldet ist, ist die Karte ein Muster und sagt
   das auch. Der Aufdruck liegt unter dem Lichtschimmer, damit er
   mitglaenzt und nicht aufgeklebt wirkt. */
.ms-ausweis[data-muster="ja"] .ms-inhalt::after{
  /* Das Wort kommt aus der Sprachdatei und wird von der PHP-Seite an
     der Karte gesetzt. MUSTER ist nur der Notfall, falls die
     Variable fehlt. */
  content:var(--ms-muster-wort, "MUSTER");
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ms-schild);
  font-size:clamp(2rem,17%,3.4rem);
  font-weight:700;letter-spacing:.3em;
  color:var(--ton);opacity:.17;
  transform:rotate(-24deg);
  pointer-events:none;white-space:nowrap;
}
.ms-ausweis[data-muster="ja"] .ms-name{color:var(--ms-frost)}

/* Der Schlitz fuer das Band */
.ms-schlitz{
  width:62px;height:9px;border-radius:5px;
  margin:2px auto clamp(16px,4%,26px);
  background:#04070C;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07);
  flex-shrink:0;
}

.ms-kartenkopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ms-marke{
  font-family:var(--ms-schild);font-weight:700;
  font-size:1.05rem;letter-spacing:.14em;
  color:var(--ms-schnee);
}
.ms-stufe{
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#0A0A0A;background:var(--ton);
  padding:.26rem .55rem;border-radius:4px;
  white-space:nowrap;
}

.ms-kartenmitte{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,3%,20px) 0;
}
.ms-label{
  font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ms-stumm);margin:0 0 6px;
}
.ms-name{
  font-family:var(--ms-schild);
  font-size:clamp(1.5rem,4.4vw,2rem);font-weight:500;
  line-height:1.1;margin:0 0 14px;
  color:var(--ms-schnee);
  overflow-wrap:break-word;
}
.ms-zeile{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--ms-mono);font-size:.72rem;
  color:var(--ms-frost);
  padding:5px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.ms-zeile span:last-child{color:var(--ton);font-weight:600}

.ms-kartenfuss{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);
}
.ms-preis{
  font-family:var(--ms-schild);
  font-size:1.5rem;font-weight:700;line-height:1;
  color:var(--ton);
  font-variant-numeric:tabular-nums;
}
.ms-preis small{
  display:block;
  font-family:var(--ms-schrift);
  font-size:.58rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ms-stumm);margin-top:5px;
}
.ms-nummer{
  font-family:var(--ms-mono);font-size:.66rem;
  color:var(--ms-stumm);text-align:right;letter-spacing:.04em;
}

/* --- Die beiden kleinen Karten daneben --- */
.ms-ausweis.ms-klein{
  width:min(190px,40vw);
  opacity:.44;filter:saturate(.75);
  box-shadow:0 20px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.ms-ausweis.ms-klein:hover,
.ms-ausweis.ms-klein:focus-visible{
  opacity:.95;filter:none;
  transform:translateY(-5px);
  box-shadow:0 26px 52px rgba(0,0,0,.6), 0 0 34px -12px var(--ton);
}
.ms-ausweis.ms-klein .ms-kartenmitte{padding:6px 0}
.ms-ausweis.ms-klein .ms-name{font-size:1rem;margin-bottom:8px}
.ms-ausweis.ms-klein .ms-zeile{font-size:.58rem;padding:3px 0}
/* Auf den kleinen Karten reicht die erste Zeile, die zweite bricht
   dort ohnehin um und macht nur Unruhe. */
.ms-ausweis.ms-klein .ms-zeile + .ms-zeile{display:none}
.ms-ausweis.ms-klein .ms-marke{font-size:.8rem}
.ms-ausweis.ms-klein .ms-stufe{font-size:.5rem;padding:.2rem .4rem}
.ms-ausweis.ms-klein .ms-preis{font-size:1.05rem}
.ms-ausweis.ms-klein .ms-preis small{font-size:.48rem}
.ms-ausweis.ms-klein .ms-nummer{font-size:.52rem}
.ms-ausweis.ms-klein .ms-schlitz{width:42px;height:7px;margin-bottom:12px}
.ms-ausweis.ms-klein .ms-label{font-size:.5rem}
.ms-ausweis:focus-visible{outline:2px solid var(--ton);outline-offset:4px}

/* =====================================================================
   Die Tafel darunter
   ===================================================================== */
.ms-tafel{
  max-width:720px;margin:0 auto;
  background:linear-gradient(180deg, rgba(10,16,28,.72) 0%, rgba(6,10,18,.84) 100%);
  border:1px solid var(--ms-linie);
  border-radius:20px;
  padding:clamp(22px,4vw,34px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.membership-checkout .ms-tafel h2{
  font-family:var(--ms-schild) !important;
  font-size:1.2rem !important;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase !important;
  color:var(--ms-schnee) !important;
  -webkit-text-fill-color:var(--ms-schnee) !important;
  text-shadow:none !important;background:none !important;
  margin:0 0 18px;
}

.ms-vorteile{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ms-vorteile li{
  display:flex;align-items:flex-start;gap:12px;
  color:var(--ms-schnee);font-size:.98rem;line-height:1.5;
}
.ms-haken{
  flex-shrink:0;width:22px;height:22px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--akt-rand);
  color:var(--akt-ton);
  font-size:.7rem;font-weight:700;line-height:1;
}

/* Die Erklaerung zum Sternchen an den Rabattzeilen. Klein, aber sie
   muss lesbar bleiben, es geht um die Buchpreisbindung. */
.ms-stern{
  margin:14px 0 0;
  font-size:.76rem;line-height:1.55;
  color:var(--ms-stumm);
}

.ms-dazu{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.14)}
.ms-dazu > p{
  margin:0 0 12px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ms-stumm);
}
.ms-dazu .ms-vorteile li{color:var(--ms-frost);font-size:.92rem}
.ms-dazu .ms-haken{
  background:transparent;border-style:dashed;
  color:var(--ms-stumm);border-color:rgba(255,255,255,.2);
}

/* =====================================================================
   Knopf, Anmeldung, Meldungen
   ===================================================================== */
.ms-aktion{margin-top:26px;display:grid;gap:12px}

.membership-checkout .submit-btn{
  width:100%;
  padding:16px 26px;
  border:none;border-radius:14px;
  background:linear-gradient(135deg, var(--akt-hell) 0%, var(--akt-ton) 42%, var(--akt-tief) 100%);
  color:#0B0A06;
  font-family:var(--ms-schrift);font-size:1.02rem;font-weight:700;
  text-transform:none;letter-spacing:normal;
  cursor:pointer;
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 30px -10px var(--akt-ton);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.membership-checkout .submit-btn:hover{
  transform:translateY(-2px);filter:brightness(1.05);
}
.membership-checkout .submit-btn:active{transform:translateY(0)}

.ms-hinweis{
  margin:0 0 4px;
  color:var(--ms-frost);font-size:.95rem;line-height:1.55;
}
.membership-checkout .auth-btn{
  display:block;text-align:center;text-decoration:none;
  padding:14px 22px;border-radius:12px;
  font-family:var(--ms-schrift);font-size:.98rem;font-weight:700;
  background:linear-gradient(135deg, var(--akt-hell) 0%, var(--akt-ton) 42%, var(--akt-tief) 100%);
  color:#0B0A06;
  box-shadow:0 14px 32px rgba(0,0,0,.48), 0 0 26px -12px var(--akt-ton);
  transition:transform .15s ease, filter .3s ease;
}
.membership-checkout .auth-btn:hover{transform:translateY(-2px);filter:brightness(1.05);text-decoration:none}
.membership-checkout .auth-btn.secondary{
  background:transparent;
  border:1px solid var(--ms-linie);
  color:var(--ms-schnee);font-weight:500;
  box-shadow:none;
}
.membership-checkout .auth-btn.secondary:hover{
  border-color:var(--akt-ton);color:var(--akt-ton);transform:none;
}

.ms-fussnote{
  text-align:center;
  font-size:.8rem;color:var(--ms-stumm);
  margin:2px 0 0;
}

.error-box{
  margin:0 0 16px;
  padding:14px 16px;
  background:rgba(255,107,107,.09);
  border:1px solid rgba(255,107,107,.32);
  border-radius:12px;
  color:#FF9E9E;
  font-size:.92rem;line-height:1.5;
}

.membership-checkout .back-link{
  display:block;text-align:center;
  margin-top:20px;
  color:var(--ms-stumm);font-size:.86rem;
  text-decoration:none;
  transition:color .2s;
}
.membership-checkout .back-link:hover{color:var(--akt-ton);text-decoration:none}

/* =====================================================================
   Schmale Fenster
   ===================================================================== */
@media (max-width:820px){
  /* Die grosse Karte oben, die beiden kleinen nebeneinander darunter.
     Auch am Handy nebeneinander, sonst wird die Seite doppelt so lang
     und man scrollt an der Tafel vorbei. */
  .ms-regal{
    grid-template-columns:auto auto;
    justify-content:center;justify-items:center;
    gap:20px 14px;
  }
  .ms-mitte{grid-column:1 / -1;order:1}
  .ms-seitlich{order:2}
  .ms-ausweis.ms-klein{width:min(168px,42vw);opacity:.62;filter:none}
}

@media (prefers-reduced-motion:reduce){
  .ms-ausweis{transition:none}
  .ms-ausweis.ms-klein:hover,
  .membership-checkout .submit-btn:hover,
  .membership-checkout .auth-btn:hover{transform:none}
}

/* =====================================================================
   Der Seitenkopf bleibt oben stehen. overflow-x:hidden auf html oder
   body hebelt position:sticky aus, clip nicht.
   ===================================================================== */
html.ms-clip{overflow-x:clip !important}
body.ms-seite{overflow-x:clip !important}
body.ms-seite > header{position:sticky !important;top:0 !important;z-index:1000 !important}