/* ============================================
   Monvou – Choose Type Screen
   /css/choose_type.css
   ============================================ */

/* ---------- Farb- und Layout-Variablen ---------- */
:root {
  /* Hintergrund / Container */
  --ct-bg:            #f1e4d7;   /* Sand / Beige hinter dem Card-Container */
  --ct-container-bg:  #fffbf4;   /* Ivory-Card */

  /* Typo */
  --ct-text:          #493725;   /* Warmes Kaffeebraun (Headline + Titel) */
  --ct-muted:         #8a7b6a;   /* Text für Beschreibungen */

  /* Primary / Eukalyptus */
  --ct-primary:       #718879;   /* Haupt-Eukalyptus */
  --ct-primary-soft:  #e7efe9;   /* sehr helle getönte Fläche */
  --ct-primary-strong:#5f7566;   /* dunkler für Border / Hover */

  /* Linien / Border */
  --ct-border-soft:   #d5c8b9;   /* feine Rahmenlinien */

  /* Schatten */
  --ct-shadow-soft:   0 4px 14px rgba(73,55,37,0.10);
  --ct-shadow-strong: 0 10px 20px rgba(73,55,37,0.16);

  /* Reset-Button */
  --ct-reset-bg:      transparent;
  --ct-reset-bg-hover:rgba(73,55,37,.05);
  --ct-reset-text:    rgba(73,55,37,.56);
}

/* ---------- Grundlayout ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  width: 100vw;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(120% 140% at 50% -10%, #f6ede1 0%, var(--ct-bg) 55%, #e8ddcf 100%);
  color: var(--ct-text);
  display: block;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: min(6vh, 22px) 0;
}

/* ---------- Haupt-Container ---------- */
@keyframes choose-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.choose-main {
  max-width: 520px;
  width: 94vw;
  background: var(--ct-container-bg);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.35);
  padding: 36px 18px 26px;
  text-align: center;
  margin: 0 auto;
  animation: choose-fadein .6s ease-out;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  position: relative;
}

/* ---------- Back-Link ---------- */
.choose-back-link {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 1em;
  color: var(--ct-text);
  opacity: .85;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .16s, text-decoration-color .16s;
  z-index: 10;
}
.choose-back-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ---------- Headline / Subline ---------- */
.choose-title {
  font-size: 1.55em;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--ct-text);
  text-transform: none;
}
.choose-desc {
  color: var(--ct-muted);
  margin-bottom: 24px;
  font-size: 1.03em;
}

/* ---------- Hinweis / Reset-Notice ---------- */
.notice {
  background: #fffaf4;
  color: var(--ct-text);
  border: 1.3px solid var(--ct-border-soft);
  border-radius: 11px;
  padding: 10px 14px;
  margin: 0 0 14px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  font-size: 0.96em;
}


.choose-title,
.choose-desc,
.notice,
.choose-card-title,
.choose-card-desc,
.choose-card-label,
.choose-helper-copy,
.choose-preview-kicker,
.choose-preview-title,
.choose-preview-fallback,
.choose-main .confirm-title,
.choose-main .confirm-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Options-Grid ---------- */
.choose-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Karten / Buttons ---------- */
.choose-card-wrap {
  position: relative;
  flex: 0 1 210px;
  min-width: 175px;
  display: flex;
}
.choose-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  text-decoration: none;
  background: linear-gradient(180deg, #fffcf7 0%, #f7eee4 100%);
  color: var(--ct-text);
  border-radius: 14px;
  border: 1.5px solid var(--ct-border-soft);
  box-shadow: var(--ct-shadow-soft);
  padding: 20px 14px 40px;
  cursor: pointer;
  text-align: center;
  outline: none;
  transition:
    transform .14s ease-out,
    box-shadow .16s ease-out,
    border-color .16s ease-out,
    background .18s ease-out,
    filter .12s ease-out;
}

/* Standard Hover / Active (Desktop) */
.choose-card:hover {
  transform: translateY(-1px);
  border-color: rgba(113, 136, 121, 0.65);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 46%),
    linear-gradient(180deg, #fffdf9 0%, #f3e8da 100%);
  box-shadow: var(--ct-shadow-strong);
}
.choose-card:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(73,55,37,0.14);
  filter: brightness(.98);
}
.choose-card:focus-visible {
  outline: 3px solid rgba(95,117,102,.7);
  outline-offset: 3px;
  box-shadow:
    0 0 0 0.15rem rgba(113,136,121,0.6),
    var(--ct-shadow-soft);
}

/* ---------- HERVORGEHOBENE Karte: erste Karte (Digitale Karte) ---------- */
.choose-card--primary {
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.85) 0, transparent 45%),
    linear-gradient(180deg, var(--ct-primary-soft) 0%, #f3ece4 100%);
  border-color: var(--ct-primary);
  box-shadow:
    0 18px 34px rgba(73,55,37,0.22),
    0 0 0 1px rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* Beim Hover der Primary-Karte noch etwas „reicher“ */
.choose-card--primary:hover {
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, transparent 50%),
    linear-gradient(180deg, #e4efe7 0%, #f1e7da 100%);
  border-color: var(--ct-primary-strong);
}

/* ---------- Icon-Badge ---------- */
.choose-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.95) 0, transparent 55%),
    #eef5ef;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.95) 0, transparent 55%),
    color-mix(in srgb, #ffffff 70%, var(--ct-primary-soft) 30%);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.choose-icon img {
  width: 37px;
  height: 37px;
  display: block;
}

/* ---------- Titel & Beschreibung in der Karte ---------- */
.choose-card-title {
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: .1px;
  margin-bottom: 5px;
  color: var(--ct-text);
}
.choose-card-desc {
  color: var(--ct-muted);
  opacity: .96;
  font-size: .96em;
  line-height: 1.34;
  min-height: 30px;
}


.choose-card-label{
  position:absolute;
  top:10px;
  right:10px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(113,136,121,.12);
  color:rgba(73,55,37,.68);
  font-size:.70rem;
  font-weight:700;
  letter-spacing:.01em;
}
.choose-card-label--soft{
  background:rgba(171,160,143,.13);
}
.choose-card--quiet{
  opacity:.92;
}
.choose-helper{
  margin:18px auto 2px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(113,136,121,.18);
  background:rgba(255,255,255,.44);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.choose-helper-copy{ display:flex; flex-direction:column; gap:2px; color:var(--ct-text); }
.choose-helper-copy strong{ font-size:.96rem; }
.choose-helper-copy span{ font-size:.88rem; color:var(--ct-muted); line-height:1.35; }
.choose-helper-btn{
  flex:0 0 auto;
  text-decoration:none;
  color:var(--ct-text);
  border:1px solid rgba(73,55,37,.16);
  border-radius:999px;
  padding:8px 12px;
  font-size:.88rem;
  font-weight:700;
  background:rgba(255,252,247,.76);
}
.choose-helper-btn:hover{ background:#fffdf9; }
.choose-helper-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.choose-helper-btn--quiet{background:transparent!important;color:var(--ct-text)!important;border-color:rgba(73,55,37,.16)!important;}


/* ---------- Dezente Vorschau-Buttons ---------- */
.choose-preview-trigger{
  position:absolute;
  left:50%;
  bottom:9px;
  z-index:4;
  transform:translateX(-50%);
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(113,136,121,.18);
  background:rgba(255,252,247,.48);
  color:rgba(73,55,37,.62);
  font:inherit;
  font-size:.72rem;
  font-weight:720;
  line-height:1.1;
  cursor:pointer;
  box-shadow:none;
  transition:background .16s ease-out, color .16s ease-out, border-color .16s ease-out, transform .16s ease-out;
}
.choose-preview-trigger:hover,
.choose-preview-trigger:focus-visible{
  background:rgba(255,252,247,.86);
  color:var(--ct-text);
  border-color:rgba(113,136,121,.36);
  outline:none;
  transform:translateX(-50%) translateY(-1px);
}
.choose-preview-trigger:active{ transform:translateX(-50%) translateY(0) scale(.98); }

.choose-preview-modal[hidden]{ display:none!important; }
.choose-preview-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.choose-preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(33,25,19,.38);
  backdrop-filter:blur(5px);
}
.choose-preview-dialog{
  position:relative;
  width:min(92vw, 430px);
  max-height:min(86vh, 720px);
  overflow:auto;
  border-radius:22px;
  background:#fffcf7;
  border:1px solid rgba(213,200,185,.88);
  box-shadow:0 24px 70px rgba(33,25,19,.26);
  padding:22px 18px 18px;
  color:var(--ct-text);
  text-align:left;
}
.choose-preview-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(73,55,37,.12);
  background:rgba(255,255,255,.74);
  color:rgba(73,55,37,.72);
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.choose-preview-close:hover,
.choose-preview-close:focus-visible{
  outline:none;
  border-color:rgba(113,136,121,.42);
  color:var(--ct-text);
}
.choose-preview-kicker{
  margin:0 42px 6px 0;
  color:var(--ct-primary-strong);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.choose-preview-title{
  margin:0 42px 14px 0;
  color:var(--ct-text);
  font-size:1.22rem;
  line-height:1.2;
}
.choose-preview-video{
  display:block;
  width:100%;
  max-height:62vh;
  border-radius:16px;
  background:#f1e4d7;
  border:1px solid rgba(213,200,185,.72);
}
.choose-preview-video[hidden]{ display:none!important; }
.choose-preview-fallback{
  border-radius:16px;
  background:#f6eee5;
  border:1px solid rgba(213,200,185,.72);
  padding:18px;
  color:var(--ct-muted);
  line-height:1.45;
  font-size:.95rem;
}
html.choose-preview-open body{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .choose-preview-trigger,
  .choose-card{ transition:none!important; }
}

/* ---------- Reset-/Danger-Buttons (aus reset_qr.php) ---------- */
.choose-main .reset-btn,
.choose-main .danger-btn,
.choose-main button.reset,
.choose-main [data-variant="danger"] {
  background: transparent !important;
  color: rgba(73,55,37,.54) !important;
  border: 1px solid rgba(73,55,37,.14) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
  width: auto !important;
  margin: 16px auto 2px !important;
  display: inline-flex !important;
}
.choose-main .reset-btn:hover,
.choose-main .danger-btn:hover,
.choose-main button.reset:hover,
.choose-main [data-variant="danger"]:hover {
  background: rgba(73,55,37,.05) !important;
  color: rgba(73,55,37,.72) !important;
  filter: none !important;
  transform: none;
}
.choose-main .reset-btn:active,
.choose-main .btn-danger:active,
.choose-main .danger-btn:active,
.choose-main button.reset:active,
.choose-main [data-variant="danger"]:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 5px 12px rgba(73,55,37,0.16) !important;
}

/* Bestätigungs-Fenster / Dialoge */
.choose-main .confirm-wrap,
.choose-main .reset-confirm,
.choose-main .confirm-dialog,
.choose-main .modal-confirm {
  background: #fffaf4 !important;
  border: 1.5px solid var(--ct-border-soft) !important;
  color: var(--ct-text) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
  border-radius: 14px !important;
}
.choose-main .confirm-title {
  color: var(--ct-text) !important;
  font-weight: 700 !important;
}
.choose-main .confirm-text {
  color: var(--ct-text) !important;
  opacity: .96;
}
.choose-main .confirm-actions .btn-danger {
  background: var(--ct-reset-bg) !important;
  color: var(--ct-reset-text) !important;
  border: none !important;
}
.choose-main .confirm-actions .btn-danger:hover {
  background: var(--ct-reset-bg-hover) !important;
}
.choose-main .confirm-actions .btn-cancel {
  background: #f3e7da !important;
  color: var(--ct-text) !important;
  border: 1px solid var(--ct-border-soft) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  body {
    padding: 12px 0 !important;
  }
  .choose-main {
    padding: 17vw 3vw 9vw;
    max-height: 92vh;
  }
  .choose-options {
    gap: 12px;
  }
  .choose-card-wrap {
    min-width: 96%;
  }
  .choose-card {
    padding: 18px 13px 38px;
  }
  .choose-preview-trigger{
    min-height:30px;
    font-size:.74rem;
  }
  .choose-helper{ flex-direction:column; text-align:center; align-items:center; }
  .choose-helper-actions{justify-content:center;}
  .choose-back-link {
    left: 4vw;
    top: 13px;
    font-size: .98em;
  }
  .choose-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .choose-icon img {
    width: 34px;
    height: 34px;
  }
}

@media (max-height: 580px) {
  body {
    padding: 8px 0 !important;
  }
  .choose-main {
    padding: 14px 4vw 10px;
    max-height: 90vh;
  }
}