ol, ul {
        list-style: none;
    }

    .controls {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

        
        .card-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            min-height: 600px;
            position: relative;
            padding-top: 360px
        }
/*         .btn-shuffle{
            text-align: left;
            margin-bottom: 200px;
            top: 355px;
            left: 47%;
            position: absolute;
        }
 */        .card-placeholder {
            position: absolute;
            width: 120px;
            height: 180px;
            border: 2px dashed #ccc;
            border-radius: 10px;
            background-color: transparent;
            z-index: 1;
        }	

    

    .answerCard{
        text-align: -webkit-center;
        margin-bottom: 200px;
        top: 100px;
        /* left: 47%; */
        position: absolute;
    }

    .card-card span {
        position: absolute; /* Absolute Position relativ zur Karte */
        top: -30px; /* 25px oberhalb der Karte */
        left: 40%; /* Horizontal zentrieren */
        transform: translateX(-50%); /* Korrektur für zentrierte Ausrichtung */
        white-space: nowrap; /* Kein Umbruch für den Text */
        font-size: 12px; /* Schriftgröße */
        font-weight: bold; /* Fettdruck */
        color: #000; /* Textfarbe */
        text-align: center; /* Text mittig ausrichten */
    }

	.card-card {
		background-image: url('');
		background-size: contain; /* Verhindert abgeschnittene Bereiche */
		background-repeat: no-repeat; /* Wiederholungen des Hintergrunds verhindern */
		transform: rotate(0deg);
		width: 120px; /* Festgelegte Breite */
		aspect-ratio: 2 / 3; /* Hält das Seitenverhältnis konstant */
		transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
		position: absolute; /* Ermöglicht freie Positionierung */
		cursor: pointer; /* Zeigt an, dass die Karten anklickbar sind */
	}

    .card-card img {
    width: 100%; /* Dehnt das Bild auf die volle Breite des divs aus */
    height: 100%; /* Dehnt das Bild auf die volle Höhe des divs aus */
    object-fit: cover; /* Skaliert das Bild, um es passend zu machen */
}    
	.flipped {
		background-image: none !important;
		background-size: contain;
	}
	.flipped span {
		display: block;
		text-align: center;
        overflow-wrap: break-word;
	}

    .placeholder-text {
        font-size: 14px;
        color: #333;
        text-align: center;
        margin-top: 5px; /* Abstand vom Platzhalter */
    }

    #closePopupButton1, #closePopupButton2 {
        position: relative; /* Stellt sicher, dass der z-index funktioniert */
        z-index: 20; /* Höherer z-index als der der response-div */
        border: none;
        cursor: pointer;

        display: block;
        float: none;
        position: absolute;
        top: 5px;
        right: 15px;
        border: none;
        width: 40px;
        height: 30px;
        font-size: 16px;
        background-color: #7e5bef;
        color: #fff;
        border-radius: 3px;        

    }

.response-div {
    position: relative; /* Um sicherzustellen, dass der z-index im Kontext der Position funktioniert */
    z-index: 10; /* Standard-z-index für die Antwortdiv */
}


    /* Vollbild-Overlay für beide Popups, egal welche Inline-Styles existieren */
#Cpopup, #CpopupCards {
  position: fixed !important;
  inset: 0 !important;             /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100dvh !important;       /* stabil auf iOS/Android */
  display: none !important;        /* per .show sichtbar */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 2147483647 !important;  /* wirklich ganz oben */
  backdrop-filter: blur(1px);      /* optional */
}

/* Sichtbar-Status */
#Cpopup.show, #CpopupCards.show { display: flex !important; }

/* Die Boxen innen hübsch & scrollbar, ohne Layoutsprünge */
#Cpopup > div,
#CpopupCards > #CsubPopupCards {
  position: relative;
  background: #fff8f0;
  width: min(600px, 92vw);
  max-height: 90dvh;
  //overflow: auto;
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}

.starlight-card.bg-zoom {
  background-size: 240px 360px !important; /* oder 200% auto !important */
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Dunkles Overlay hinter dem großen Bild */
.cr-bg-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  z-index:2147483645;
}

/* Großes Bild: als Pseudo-Element über allem, nur BG – Karte bleibt unverändert */
.starlight-card.cr-bg-zoom::after{
  content:"";
  position:fixed; left:50%; top:50%;
  translate:-50% -50%;
  width: var(--zoom-w, 480px);
  height: var(--zoom-h, 720px);
  background-image: var(--bg);
  background-repeat:no-repeat;
  background-position:center;
  background-size: cover; /* oder 'contain' wenn du alles sehen willst */
  z-index:2147483646;
  box-shadow:0 20px 80px rgba(0,0,0,.45);
  border-radius:8px;
}

/* --- Cards Core (gemeinsames Styling) --- */
.cr-build-btn, .topup-btn,
#shuffleButton, #shuffleButton2, #openPopupButton, #createAnswerButton {
  padding: 12px 24px;
  background-color: #7e5bef;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.cr-build-btn:hover, .topup-btn:hover,
#shuffleButton:hover, #shuffleButton2:hover, #openPopupButton:hover, #createAnswerButton:hover {
 filter: brightness(0.95); 
}

.cr-status-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin:16px 0 12px}
.cr-statusbar{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid #e0cfa3;background:#fffaf4;border-radius:9999px;font-size:12px;flex-wrap:wrap}
.cr-pill{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #eed9c4;background:#fff;line-height:1}
.cr-pill-user{background:#e7f7ff;border-color:#bfe7ff}
.cr-pill-guest{background:#fff3e0;border-color:#ffd7a6}
.cr-statusbar.is-blocked .cr-pill:first-child{background:#ffe5e5}

.cr-cta-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.cr-cta{padding:6px 10px;border:1px solid #e0cfa3;background:#fff;border-radius:8px;font-size:12px;cursor:pointer;text-decoration:none}
.cr-cta:hover{background:#fffaf4}

/* Overlay/Popup */
.cr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:10000}
.cr-popup{background:#fffaf4;color:#3c2c1d;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:min(960px,95vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.cr-pop-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #efdcc8}
.cr-pop-ttl{font-weight:600;font-size:16px}
.cr-pop-x{background:none;border:0;font-size:22px;cursor:pointer;line-height:1;padding:4px}
.cr-pop-bd{padding:12px 16px;overflow:auto}

.cr-spreads{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cr-spreads label{display:flex;gap:6px;align-items:center;border:1px solid #efdcc8;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.cr-selected-info{font-size:13px;margin:6px 0 12px}

/* Karten-Grid */
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(72px,1fr));gap:10px}
.cr-card{position:relative;width:100%;padding-bottom:160px;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);background-size:cover;background-position:center}
.cr-card.sel::after{content:"✓";position:absolute;top:6px;right:6px;background:#7e5bef;color:#fff;border-radius:999px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px}

/* Auswahlleiste */
.cr-picked{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.cr-thumb{width:66px;height:110px;border-radius:6px;background-size:cover;background-position:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Spinner */
.cr-spinner{width:48px;height:48px;border:5px solid #ddd;border-top:5px solid #7e5bef;border-radius:50%;animation:crspin 1s linear infinite;margin:12px auto}
@keyframes crspin{to{transform:rotate(360deg)}}


  /* SweetAlert2 größer machen */
  .swal2-container{ padding: 2vh !important; }
  .swal2-popup{ width: min(96vw, 520px) !important; }

  /* Unser Kartenbereich im Popup */
  .swal2-html-container .cr-card-stack{
    width: min(92vw, 1000px);
    height: min(72vh, 720px);
    margin: 0 auto;
    position: relative;
  }

  /* Kartengröße (responsive) */
  .cr-shuffle-card{
    width: clamp(84px, 10vw, 130px);
    height: clamp(130px, 15vw, 200px);
    background-size: cover;
    background-position: center;
  }
  /* SweetAlert2 immer über allen eigenen Overlays anzeigen */
.swal2-container { z-index: 2147483647 !important; }

.cr-swal-in  { animation: crSwalIn .22s ease both; }
.cr-swal-out { animation: crSwalOut .18s ease both; }
@keyframes crSwalIn  { from{transform:translateY(8px) scale(.98);opacity:0} to{transform:none;opacity:1} }
@keyframes crSwalOut { from{transform:none;opacity:1} to{transform:translateY(6px) scale(.98);opacity:0} }

/* Karten-Panels schmaler auf Desktop */
#CsubPopupCards, #subPopupCards {
  width: min(92%, 820px);
  margin: 0 auto 40px;
  border-radius: 12px;
  padding: 16px 20px;
}
@media (min-width: 1200px) {
  #CsubPopupCards, #subPopupCards { width: min(88%, 760px); }
}
/* Damit der weiße Block nicht Bildschirmbreite annimmt */
#CpopupCards, #Cpopup {
  display: flex;               /* falls nicht schon so */
  justify-content: center;
  align-items: flex-start;
}
.card-container {
  max-width: 720px;            /* optional: Kartendeck selber schmaler */
  margin: 10px;
}
#CpopupCards.show { display: flex !important; }
#Cpopup.show      { display: flex !important; }
#Cpopup.show, #CpopupCards.show { display: flex !important; }
#CpopupCards { align-items: center; justify-content: center; }
.card-container .card-card,
.card-container .lenormand-card,
.card-container .starlight-card {
  display: block;
  will-change: transform;
}

#cardContainer{
  position: relative;
  width: 100%;
  min-width: 450px;
  min-height: 480px;
  overflow: visible;
}

@media (max-width: 768px){
  #cardContainer{
    min-height: 360px;
    /* Optional: wenn auf Mobile kein Horizontal-Scroll gewünscht ist */
    /* min-width: 0; */
  }
}


.card-card, .lenormand-card, .starlight-card { position:absolute; left:0; top:0; }

/* Overlay-Panel */
#CpopupCards{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:20px;           /* etwas Luft zum Rand */
}

/* Inhaltspanel: mobil flexibel, Desktop capped */
#CsubPopupCards{
  /* überschreibt das inline width:95% */
  width: min(95vw, 920px) !important;  /* <= hier max-width für Desktop */
  margin: 0 auto 40px;
  box-sizing: border-box;
  border-radius: 12px;
}

/* Parent des cardContainers mittig ausrichten */
#CsubPopupCards{
  display: flex;              /* falls nicht schon so */
  flex-direction: column;
  align-items: center;        /* <— zentriert #cardContainer horizontal */
}

/* Optional: auf sehr kleinen Screens fast Vollbreite */
@media (max-width: 768px){
  #CsubPopupCards{
    width: 96vw !important;
  }
}

/* Wrapper oben im Kartenpanel */
#CsubPopupCards .chat-statuswrap,
#subPopupCards .chat-statuswrap {
  margin: 0 auto 10px;
  width: 100%;
  max-width: 980px; /* oder was zu deinem Panel passt */
}

/* Leiste */
#CsubPopupCards .chat-statusbar,
#subPopupCards .chat-statusbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #efdcc8;
  background: #fffaf4;
  border-radius: 9999px;
  margin: 4px auto;
}

/* Pills */
#CsubPopupCards .chat-pill,
#subPopupCards .chat-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #eed9c4;
  background: #fff;
  line-height: 1;
  font-size: 12px;
}
#CsubPopupCards .pill-guest,
#subPopupCards .pill-guest {
  background: #e7f7ff;
  border-color: #bfe7ff;
}
#CsubPopupCards .is-blocked .chat-pill:first-child,
#subPopupCards .is-blocked .chat-pill:first-child {
  background: #ffe5e5;
}

/* CTA-Reihe */
#CsubPopupCards .chat-cta-row,
#subPopupCards .chat-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 6px;
}
#CsubPopupCards .chat-cta,
#subPopupCards .chat-cta {
  padding: 6px 10px;
  border: 1px solid #e0cfa3;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}
#CsubPopupCards .chat-cta:hover,
#subPopupCards .chat-cta:hover {
  background: #fffaf4;
}