/* =====================================================================
   membership-home.css
   Der Mitgliedschaftsbereich auf der Startseite. Angelegt am
   23.09.2026.

   Aufbau: links eine grosse Ausweiskarte, rechts drei Reiter, der
   Preis, die Vorteile und der Knopf. Dieselben Karten wie auf
   membership-checkout.php, nur kleiner. Wer hier eine Karte
   anklickt, sieht sie auf der naechsten Seite gross wieder.

   Der Rest der Startseite bleibt unberuehrt. Alles hier ist auf
   #membership begrenzt, damit nichts nach aussen faerbt.

   Wichtig, das war vorher ein Fehler: die Marke "Beliebt" steht
   NEBEN dem Namen der Stufe, nicht an seiner Stelle. Vorher las die
   mittlere Spalte "Beliebt" und die Stufe Familie war verschwunden.

   Ohne Javascript werden alle drei Stufen untereinander gezeigt,
   also genau wie frueher. Es geht also nichts verloren.
   ===================================================================== */

#membership{
  --mh-linie:rgba(255,255,255,.13);
  --mh-schnee:#F2F0EC;
  --mh-leise:#ABA79F;
  --mh-stumm:#77746E;
  --mh-schild:'Oswald',Impact,"Archivo",sans-serif;
  --mh-mono:'IBM Plex Mono',ui-monospace,monospace;

  --mh-fan:#8FC4E8;   --mh-fan-1:#1A2432;  --mh-fan-2:#101822;  --mh-fan-glanz:.04;
  --mh-fam:#2FE6CE;   --mh-fam-1:#0F2028;  --mh-fam-2:#08151B;  --mh-fam-glanz:.10;
  --mh-vip:#FFD166;   --mh-vip-1:#241B0C;  --mh-vip-2:#120D05;  --mh-vip-glanz:.20;
}

/* =====================================================================
   Das Raster: Karte links, Auswahl rechts
   ===================================================================== */
#membership .mh-raster{
  display:grid;
  grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
  margin-top:clamp(20px,3vw,34px);
}
#membership .mh-raster *{box-sizing:border-box}

#membership .mh-kartenfeld{position:relative}

/* =====================================================================
   Die Ausweiskarte
   ===================================================================== */
#membership .mh-karte{
  position:relative;
  width:100%;
  aspect-ratio:5/7;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(160deg, var(--k1) 0%, var(--k2) 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 40px -16px var(--ton);
}
#membership .mh-karte[data-stufe="fan"]    {--ton:var(--mh-fan);--k1:var(--mh-fan-1);--k2:var(--mh-fan-2);--glanz:var(--mh-fan-glanz)}
#membership .mh-karte[data-stufe="familie"]{--ton:var(--mh-fam);--k1:var(--mh-fam-1);--k2:var(--mh-fam-2);--glanz:var(--mh-fam-glanz)}
#membership .mh-karte[data-stufe="vip"]    {--ton:var(--mh-vip);--k1:var(--mh-vip-1);--k2:var(--mh-vip-2);--glanz:var(--mh-vip-glanz)}

/* Lichtschimmer, folgt der Maus */
#membership .mh-karte::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)) 47%,
    rgba(255,255,255,calc(var(--glanz) * 1.7)) 50%,
    rgba(255,255,255,var(--glanz)) 53%,
    rgba(255,255,255,0) 68%);
  mix-blend-mode:screen;
  transition:background .12s linear;
}
/* Feines Muster im Karton, bei VIP als Goldpraegung */
#membership .mh-karte::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);
}
#membership .mh-karte[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);
}

#membership .mh-innen{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;
  padding:clamp(15px,5%,22px);
}
/* Auf der Startseite ist noch niemand angemeldet, die Karte ist
   darum immer ein Muster. Der Aufdruck kommt aus der Sprachdatei. */
#membership .mh-innen::after{
  content:var(--mh-muster-wort, "MUSTER");
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mh-schild);
  font-size:clamp(1.4rem,16%,2.6rem);
  font-weight:700;letter-spacing:.3em;
  color:var(--ton);opacity:.15;
  transform:rotate(-24deg);
  pointer-events:none;white-space:nowrap;
}

#membership .mh-schlitz{
  width:54px;height:8px;border-radius:4px;
  margin:0 auto clamp(12px,4%,20px);
  background:#04070C;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07);
  flex-shrink:0;
}
#membership .mh-kkopf{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);
}
#membership .mh-kmarke{
  font-family:var(--mh-schild);font-weight:700;
  font-size:.92rem;letter-spacing:.14em;color:var(--mh-schnee);
}
#membership .mh-kstufe{
  font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#0A0A0A;background:var(--ton);
  padding:.22rem .5rem;border-radius:4px;white-space:nowrap;
}
#membership .mh-kmitte{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;padding:10px 0;
}
#membership .mh-klabel{
  font-size:.52rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mh-stumm);margin:0 0 5px;
}
#membership .mh-kname{
  font-family:var(--mh-schild);
  font-size:1.2rem;font-weight:500;line-height:1.1;
  margin:0 0 10px;color:var(--mh-leise);
}
#membership .mh-kzeile{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--mh-mono);font-size:.58rem;
  color:var(--mh-leise);
  padding:4px 0;border-top:1px solid rgba(255,255,255,.07);
}
#membership .mh-kzeile span:last-child{color:var(--ton);font-weight:600}
#membership .mh-kfuss{
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.1);
}
#membership .mh-kpreis{
  font-family:var(--mh-schild);font-size:1.2rem;font-weight:700;line-height:1;
  color:var(--ton);font-variant-numeric:tabular-nums;
}
#membership .mh-kpreis small{
  display:block;font-size:.48rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mh-stumm);margin-top:4px;
}
#membership .mh-knummer{
  font-family:var(--mh-mono);font-size:.52rem;
  color:var(--mh-stumm);text-align:right;
}

/* =====================================================================
   Die drei Reiter
   ===================================================================== */
#membership .mh-reiter{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 20px;padding:0;border:none;
}
#membership .mh-reiter button{
  flex:1 1 95px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--mh-linie);background:transparent;
  color:var(--mh-leise);
  font-family:inherit;font-size:.92rem;font-weight:600;
  padding:12px 12px;border-radius:10px;cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
#membership .mh-reiter button .mh-rpreis{
  font-family:var(--mh-mono);font-size:.72rem;color:var(--mh-stumm);
}
#membership .mh-reiter button:hover{border-color:var(--mh-schnee);color:var(--mh-schnee)}
#membership .mh-reiter button[aria-selected="true"]{
  border-color:var(--ton-lokal);
  color:var(--mh-schnee);
  background:rgba(255,255,255,.05);
}
#membership .mh-reiter button[aria-selected="true"] .mh-rpreis{color:var(--ton-lokal)}

/* =====================================================================
   Die Angaben zur gewaehlten Stufe
   ===================================================================== */
#membership .mh-name{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 8px;
}
#membership .mh-name h3{
  font-family:var(--mh-schild);
  font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  margin:0;color:var(--mh-schnee);
}
/* Die Marke steht NEBEN dem Namen. Das war der Fehler vorher. */
#membership .mh-beliebt{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#06231D;background:var(--mh-fam);
  padding:.3rem .64rem;border-radius:99px;
  box-shadow:0 8px 22px rgba(47,230,206,.26);
  white-space:nowrap;
}

#membership .mh-preiszeile{
  display:flex;align-items:baseline;gap:10px;margin:0 0 18px;
}
#membership .mh-zahl{
  font-family:var(--mh-schild);
  font-size:clamp(2.1rem,4.4vw,3rem);font-weight:700;line-height:1;
  color:var(--mh-schnee);letter-spacing:-.01em;
}
#membership .mh-takt{font-family:var(--mh-mono);font-size:.82rem;color:var(--mh-stumm)}

#membership .mh-vorteile{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;gap:10px;
}
#membership .mh-vorteile li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:1.02rem;line-height:1.5;color:#D8D4CC;
}
#membership .mh-punkt{
  flex-shrink:0;width:18px;height:18px;margin-top:3px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--ton-lokal);color:var(--ton-lokal);
  font-size:.58rem;font-weight:700;line-height:1;
}

#membership .mh-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:12px;border:none;
  background:var(--ton-lokal);color:#0A0A0C;
  font-family:inherit;font-size:1rem;font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:transform .15s ease, filter .3s ease;
}
#membership .mh-knopf:hover{transform:translateY(-2px);filter:brightness(1.07)}
#membership .mh-knopf:active{transform:translateY(0)}

/* =====================================================================
   Die Cola als eigener Streifen darunter
   ===================================================================== */
#membership .mh-cola{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(24px,3.5vw,38px);
  padding:18px 22px;
  border:1px dashed var(--mh-linie);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
#membership .mh-cola-preis{
  font-family:var(--mh-schild);font-size:1.7rem;font-weight:700;line-height:1;
  color:#FFB648;flex-shrink:0;
}
#membership .mh-cola-preis small{
  display:block;font-family:var(--mh-mono);font-size:.6rem;
  letter-spacing:.12em;color:var(--mh-stumm);margin-top:5px;
}
#membership .mh-cola-text{flex:1 1 300px;min-width:0}
#membership .mh-cola-text h4{
  font-family:var(--mh-schild);font-size:1.05rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 5px;color:var(--mh-schnee);
}
#membership .mh-cola-text p{margin:0;color:var(--mh-leise);font-size:.94rem;line-height:1.55}
#membership .mh-cola-text p.mh-danke{color:#FFB648;margin-top:5px}
#membership .mh-cola .mh-knopf{--ton-lokal:#FFB648;flex-shrink:0}

/* =====================================================================
   Ohne Javascript wirken die Reiter nicht, sie bleiben darum weg.
   Die drei Stufen stehen dann untereinander, also wie frueher. Das
   hidden aus dem Quelltext hebt ein noscript-Block in home.php wieder
   auf, hier stehen nur die Abstaende dafuer.
   Das Skript setzt mh-bereit, sobald es laeuft.
   ===================================================================== */
#membership .mh-reiter{display:none}
#membership.mh-bereit .mh-reiter{display:flex}
#membership .mh-feld + .mh-feld{margin-top:28px;padding-top:28px;border-top:1px solid var(--mh-linie)}
#membership.mh-bereit .mh-feld + .mh-feld{margin-top:0;padding-top:0;border-top:none}
#membership .mh-kartenfeld .mh-karte + .mh-karte{margin-top:18px}
#membership.mh-bereit .mh-kartenfeld .mh-karte + .mh-karte{margin-top:0}

/* =====================================================================
   Schmale Fenster
   ===================================================================== */
@media (max-width:860px){
  #membership .mh-raster{grid-template-columns:1fr;gap:24px}
  #membership .mh-kartenfeld{max-width:250px;margin:0 auto}
  #membership .mh-knopf{width:100%}
  #membership .mh-cola .mh-knopf{width:100%}
}

@media (prefers-reduced-motion:reduce){
  #membership .mh-knopf{transition:none}
  #membership .mh-knopf:hover{transform:none}
}