:root{
      --akzent:#8200CD;
      
      --text:#1c1c1c;

      --schatten-dunkel: rgba(0,0,0,.18);
      --schatten-hell: rgba(255,255,255,.9);

      --spieler1:#8200CD;   /* User */
      --spieler2:url(/assets/content/img/bg-leistung1.webp);   /* Bot */
      --leer:#dcdcdc;
    }

    :root {
    /*========== Colors ==========*/
    --font-display: "Nasalization", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --body-color: #e8e8e8;
    --header-shadow: #00000025 0px 0.2rem 0.8rem;
    --acent-color: #8200cd;
    --title-color: hsl(var(--hue-color), 53%, 15%);
    --text-color: #313131;
    --box-shadow-card: 10px 10px 15px #d1d9e6, -10px -10px 15px #ffffffde;
    --box-shadow-lila:  15px 15px 25px #7444d4e3, -10px -10px 20px #9967fece;
    --box-shadow-lila-btn: 3px 3px 5px #410066, -3px -3px 5px #a200ff;
    --box-shadow-form: inset 4px 4px 3px hsl(217, 30%, 85%) ,inset 4px -4px 3px hsl(0, 0%, 100%); 
    --box-shadow-btn: 3px 3px 5px #d1d9e6, -2px -2px 5px #ffffffde;
    --box-shadow-btn-hover:inset 4px 4px 3px #d1d9e6 ,inset -4px -4px 3px #ffffff9d;
    --drop-shadow: 2px 2px 3px #000;
    --t-btn-shadow: -3px -3px 5px #ffffffde, 3px 3px 5px #d1d9e6; 
    --t-btn-shadow-hover: inset -2px -2px 3px #ffffffde, inset 2px 2px 3px #d1d9e6;
    --bg-color-dark: #212121;
    --font-s:  70px;
    --font-space: .15em;
    --font-rand: optimizeLegibility;
    --font-pad: 0px 50px;
    --font-shadow: 1px 2px 1px #767676;   
    --gold: linear-gradient( to right bottom,
    #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%);  
    --filter-shadow:drop-shadow(0px 3px 4px #00000035);
   
    --inter: Inter 24pt, "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
  /*========== Variables Dark theme ==========*/
  body.dark-theme {
    --font-display: "Nasalization", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --box-shadow-card: 8px 8px 12px hsl(240, 50%, 3%), -8px -8px 12px hsl(240, 53%, 17%);
    --text-color: #e8e8e8;
    --body-color: #0c0c2c;
    --header-shadow: hsl(0, 0%, 2%) 0px 0.3rem 0.5rem;
    --box-shadow-form:inset 2px 3px 8px hsl(240, 50%, 3%), inset -2px -3px 8px hsl(240, 51%, 25%);
    --box-shadow-btn: 3px 3px 5px hsl(240, 50%, 3%), -3px -3px 5px hsl(240, 53%, 18%);
    --box-shadow-btn-hover: inset 4px 4px 3px #030309 ,inset -4px -4px 3px #12123b;
    --t-btn-shadow:  3px 3px 5px #030309, -3px -3px 5px #12123b; 
    --t-btn-shadow-hover: inset 4px 4px 3px #030309 ,inset -4px -4px 3px #12123b;
    --font-s: 50px;
    --font-space: .1em;
    --font-rand: optimizeLegibility;
    --font-pad: 0px 50px;
    --font-shadow: -2px -2px 1px #151515, 2px 2px 1px #434343;
    --var-font: 1.2rem;
    --font-desk:1.2rem;
    --font-tab:1.1rem;
    --font-phone:1rem;
    --filter-shadow:drop-shadow(0px 5px 5px #000000);
  }

    *{box-sizing:border-box}

    html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{     
      margin:0;
      min-height:100vh;
      display:grid;
      place-items:center;
      width: 100%;
      color: hsla(0, 0%, 100%, 0.904);
       
      background-position: center; 
      background-size: cover;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.game-body {
    background: url(/assets/content/img/bg-leistung1.webp); 
}

.game-logo {
  max-width: 300px;

}

.rahmen{
    width:min(860px, 92vw);
    display:grid;
     
    padding:0 1rem;
    width: 100%;
    max-width: 700px;
    min-width: 0;   
}

.karte{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 15px 30px rgba(0,0,0,.35),
                inset 3px 3px 8px rgba(255,255,255,.30),
                inset  -3px  -3px 10px rgba(0,0,0,.50);
                border: 1px solid #fffffff1;
                letter-spacing: -0.1px;
    padding:2rem;
    position:relative;
    overflow:hidden;
    width: auto;
    margin: 1rem 0;
}

.kopf{
    width: 100%; 
    height: auto;
    display:flex;
    gap:0.2rem;
    flex-wrap:wrap;
    align-items:center;
    justify-content: space-around;
    }

.btn-frame {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items:center;
    justify-content: center;
    padding: 12px 22px;
    border-radius:10px;
    backdrop-filter: blur(0px) saturate(10%);
    -webkit-backdrop-filter: blur(0px) saturate(10%);
    box-shadow: inset -4px -4px 3px rgba(255,255,255,.15),
                inset  5px  5px 5px rgba(0,0,0,.45);
                border: 1px solid #ffffff01;
}

.titel{ 
    font-family: Nasalization;
    color: #ffffffc7;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
    letter-spacing:.2px;
}

.akzentpunkt{
      width:12px;height:12px;border-radius:50%;
      background:var(--acent-color);  
}

.statuszeile{
    font-family: Nasalization;
    color: #ffffffc7;
    display:flex;
    align-items:center;
    justify-content: center;
    gap:10px;
    font-size: .8rem;
    opacity:.95;
    flex-wrap:wrap;
  }
    .spielchip {
      width:12px;height:12px;border-radius:50%;
     
      box-shadow: inset 4px 4px 9px rgba(0,0,0,.18), inset -4px -4px 9px rgba(255,255,255,.7);
    }

    .bedienleiste{
    
      display:flex;
      align-items:center;
      justify-content: center;
      gap:10px;
      flex-wrap:wrap;
      
    }

    .plakette{
      font-family: Nasalization;
      color: #ffffffc7;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 11px;
      border-radius:999px;
      
      font-weight:1000;
      font-size:12px;
      user-select:none;
      white-space:nowrap;
      
    }
    .plakettenpunkt{
      width:12px;height:12px;border-radius:50%;
      box-shadow: inset 3px 3px 7px rgba(0,0,0,.16), inset -3px -3px 7px rgba(255,255,255,.85);
    }
    .plakettenpunkt.spieler1{ background: var(--spieler1); }
    .plakettenpunkt.spieler2{ background: var(--spieler2); }

    .knopf{
        display: flex;
        text-decoration: none;
        align-items: center;
        justify-content: baseline;
        flex-direction: column;
        cursor:pointer;
        border:none;
        padding:8px 12px;
        border-radius:10px;
        font-weight:500;
        color: hsla(0, 0%, 100%, 0.8);  
        transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
        user-select:none;
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.08));
        backdrop-filter: blur(1px) saturate(140%);
        -webkit-backdrop-filter: blur(1px) saturate(140%);  
        box-shadow: 5px 5px 8px rgba(0,0,0,.10),
                inset 3px 3px 5px rgba(255,255,255,.30),
                inset  -4px  -4px 8px rgba(0,0,0,.40);
                border: 1px solid #ffffff05;
    }
    .knopf:active{
      transform: translateY(1px);
      box-shadow: inset 2px 2px 5px rgba(0,0,0,.58), inset -2px -2px 5px rgba(255, 255, 255, 0.30);
      
    }
    .knopf:disabled{
      cursor:not-allowed;
      opacity:.85;
    }

.umschalter{
    display:flex;
    gap:1rem;
    align-items:center;
    padding: 12px 22px;
    border-radius:10px;
  
    backdrop-filter: blur(0px) saturate(10%);
    -webkit-backdrop-filter: blur(0px) saturate(10%);
    box-shadow: inset -4px -4px 3px rgba(255,255,255,.15),
                inset  5px  5px 5px rgba(0,0,0,.45);
                border: 1px solid #ffffff01;
                
                

    }
    .umschalter .knopf{
      padding:10px 22px;
      border-radius:10px;
    
    }
    .knopf.aktiv{
      
      box-shadow: inset 2px 2px 5px rgba(0,0,0,.56), inset -2px -2px 4px rgba(255,255,255,.35);
     
    }

    .spielbrett{
      width:min(560px, 85vw);
      aspect-ratio: 7 / 6;
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap:10px;
      padding:14px;
      border-radius:22px;
     
      box-shadow: inset 5px 5px 8px rgba(0,0,0,.50), inset -5px -5px 8px rgba(255,255,255,.25);
      position:relative;
      touch-action:manipulation;
      margin-top:12px;
      outline:2px solid transparent;
      
    }

    .feld{
      border-radius:999px;
      background:transparent;
       box-shadow:
    inset 4px 4px 5px rgba(0,0,0,.30),
    inset -4px -4px 5px rgba(255,255,255,.16);
      position:relative;
      overflow:hidden;
      outline:1px dashed transparent;
      transition: outline-color .12s ease;
   
      background-position: center;

    }

    .feld.spaltenhighlight{
      outline-color: #ffffff65;
    }

    .stein{
      position:absolute;
      inset:0;
      border-radius:999px;
      transform: translateY(-140%);
      transition: transform .28s cubic-bezier(.18,.9,.2,1.15);
          box-shadow:
    inset -8px -8px 16px rgba(0,0,0,.55),
    inset 8px 8px 16px rgba(255,255,255,.35);
      will-change: transform;
        inset: 12%;
        background-position: center;
        background-size: contain;
        
        
    }
    .stein.spieler1{ background: radial-gradient(circle at 30% 30%, #ffffff99, transparent 40%), var(--spieler1); }
    .stein.spieler2{ background: radial-gradient(circle at 30% 30%, #ffffff69, transparent 40%), var(--spieler2); }
    .stein.gefallen{ transform: translateY(0%); }

    /* Gewinn-Effekt */
    .spielbrett.gewonnen{
      animation: gewinnPuls 900ms ease-in-out infinite;
    }
    .spielbrett.gewonnen::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:18px;
      pointer-events:none;
      outline: 2px solid color-mix(in oklab, var(--acent-color) 75%, #fff 25%);
      filter: drop-shadow(0 0 10px color-mix(in oklab, var(--acent-color) 55%, #fff 45%));
      opacity:.92;
       
    }
    @keyframes gewinnPuls{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-1px); }
    }

    /* Mini-Konfetti */
    .konfetti{
      position:absolute;
      top:-12px;
      width:10px;height:14px;
      border-radius:4px;
      opacity:.95;
      animation: konfettiFall 2s ease-out forwards;
      pointer-events:none;
      box-shadow: 6px 6px 14px rgba(0,0,0,.14), -6px -6px 14px rgba(255,255,255,.6);
      transform: translateY(-20px) rotate(0deg);
    }
    @keyframes konfettiFall{
      0%{ transform: translateY(-20px) rotate(0deg); opacity:0; }
      10%{ opacity:1; }
      100%{ transform: translateY(260px) rotate(240deg); opacity:0; }
    }

    /* Gutschein-Modal */
    .modalhintergrund{
      position:fixed; inset:0;
      background:rgba(0,0,0,.25);
      display:none;
      place-items:center;
      padding:18px;
    }
    .modalhintergrund.sichtbar{ display:grid; }

    .modalfenster{
      color: #ffffffc5;
      width:min(520px, 92vw);
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
    
    box-shadow: 0 15px 30px rgba(0,0,0,.35),
                inset 3px 3px 8px rgba(255,255,255,.30),
                inset  -3px  -3px 10px rgba(0,0,0,.50);
                border: 1px solid #ffffff01;
                letter-spacing: -0.1px;

      padding:16px;
    }
    .modalfenster h3{ margin:0 0 8px 0; }
    .modalfenster p{ margin:0 0 12px 0; opacity:.85; line-height:1.45; }

    .codebox{
      display:flex;
      gap:10px;
      align-items:center;
      padding:12px;
      border-radius:16px;
      color: #ffffff95;
      box-shadow: inset 8px 8px 12px rgba(0,0,0,.52), inset -8px -8px 12px rgba(255,255,255,.25);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-weight:600;
      overflow:auto;
    }
    .abstandhalter{ flex:1; }

    .kleintext{
      font-size:12px;
      opacity:.7;
      margin:10px 0;
      line-height:1.35;
      color: #fffffff3;
      text-shadow: 1px 1px 1px #00000030;
    }

    .web-link {
      padding: 0.5rem;
      font-size: 1.8rem;
      font-family: Nasalization;
      color: #ffffffd5;
      text-shadow: 1px 1px 2px #00000070;
    }

    .b {
        border: 3px solid #8200cd;
    }

    .exit-box {
      display: flex;
      align-items: center;
      justify-content: center; 
      width: 320px;
      text-decoration: none;
      gap: 1rem;
    }