:root{
  --card-max: 480px;      /* max Breite der Karte */
  --radius: 18px;         /* Außenradius */
  --inner-radius: 14px;   /* Innenradius */
  --shadow: 0 12px 30px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow: hidden;}

body{
  margin:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:#111;
  /* Scroll/Zoom minimieren */
  overflow:hidden;
  touch-action:manipulation;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;
  display:flex; align-items:center; justify-content:center;
  height: auto;
  min-height: 100dvh;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #23262B;
    background-image: url("img/bg_img_transparent.png");
    color: #eee;
  }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  body {
    background: #f3f4f6;
    background-image: url("img/bg_img_transparent.png");
    color: #111;
  }
}


.wrap{ max-width:var(--card-max); width: 93vw; position:relative; }

.card-shell{
  background:#fff;
  border-radius:var(--radius);
  padding:.55rem;
  box-shadow:var(--shadow);
}

.card{
  aspect-ratio:2/3;
  border-radius:var(--inner-radius);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:1.1rem;
}
.inner{ max-width:90%; margin:auto; }
.statement{ font-size: clamp(1.75rem, 4.36vw, 2.5rem); font-weight: 600; line-height:1.35; }
.statement b, .statement strong{ font-weight: 900; }
.spice{ margin-top:.6rem; font-size:clamp(1.1rem, 2.4vw, 1.4rem) }

/* Controls */
.controls{ margin:.8rem auto 0; display:flex; gap:.6rem; justify-content:center }
button{
  border:0; background:#111; color:#fff; cursor:pointer; border-radius:12px;
  padding:.7rem 1rem; box-shadow:0 6px 18px rgba(0,0,0,.14);
  font:inherit;
}
button.secondary{ background:#fff; color:#111; border:1px solid #e5e7eb }

.hiddenbutton {visibility: hidden;}

.controls { position: relative; z-index: 01; }
 
/* Farbklassen */
.card_pink{background: #ef2e78/*#e91e63*/}
.card_red{background: #f48862 /*#f44336*/}
.card_green{background: #7be276 /*#22c55e*/}
.card_blue{background: #4cc8e5 /*#3b82f6*/}
.card_purple{background: #814df4/*#7c3aed*/}
.card_orange{background: #f7cf61 /*#fb923c*/}
.card_black{background: #333333;}

/* Meta */
.meta{ margin-top:.6rem; text-align:center; color:#6b7280; font-size:.95rem }

/* Tap-Zonen zum Vor/Zurück (unsichtbar, full-screen) */
.tap-zone{ position:fixed; top:0; bottom:0; width:30vw; z-index:5; background:transparent; }
.tap-left{ left:0; }
.tap-right{ right:0; }

/* Optional: Fokus sichtbarer für A11y */
button:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* --- Kartenstapel v2 --- */
.pile { position: relative; }
.stack { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.card-shell.current { position: relative; z-index: 3; will-change: transform; transition: transform 600ms ease-out; }
.card-shell.impressum { position: fixed; z-index: 300; will-change: transform; transition: transform 600ms ease-out; visibility: hidden; }

.card-shell.ghost {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: .96;
  /* ein Ticken matter, damit die Top-Karte klar bleibt */
  filter: saturate(.98) brightness(.98) contrast(.99);
  /* kleine Schatten, damit Kanten sichtbar sind */
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Falls Dein .card in Geisterkarten etwas „stiller“ sein soll */
.card-shell.ghost .card { opacity: .98; }


/* Startkarten-Branding */
.brand{
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:clamp(1.2rem, 3.6vw, 1.7rem);
  margin-bottom:.6rem;
}

/* Form-Layout in der Karte */
.form-card{
  display: flex; flex-direction:column; align-items:center; gap:.6rem;
  margin:0; /* reset */
}

/* Code-Feld gut lesbar in farbiger Karte */
.input-code{
  padding:.65rem .8rem;
  border-radius:12px;
  border:1px solid #ffffffcc;
  background:#fff;
  color:#111;
 /* width:12ch;*/
  text-align:center;
  text-transform:uppercase;
  font:inherit;
}

/* Abstand zwischen „Neue Runde“ und „Wieder da?“ */
.gap-lg{ height:1.1rem; }

/* Fehlertext */
.error-msg{
  margin-top:.6rem;
  color:#ffe4e6; /* zartes Rosa auf Blau */
  text-align:center;
  font-size:.95rem;
}



/* --- Startscreen / Index --- */
.brand{
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:clamp(1.2rem, 3.6vw, 1.7rem);
  margin-bottom:.6rem;
}

.form-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;   /* Abstand zwischen Feld/Buttons */
  margin:0;    /* Reset */
}

.input-code{
  padding:.65rem .8rem;
  border-radius:12px;
  border:1px solid #ffffffcc;  /* heller Rand auf farbiger Karte */
  background:#fff;
  color:#111;
  width:12ch;
  text-align:center;
  text-transform:uppercase;
  font:inherit;
}

.gap-lg{ height:1.1rem; }       /* Abstand zwischen „Neue Runde“ und „Wieder da?“ */

.error-msg{
  margin-top:.6rem;
  color:#ffe4e6;                /* zartes Rosa auf blau/violett gut lesbar */
  text-align:center;
  font-size:.95rem;
}

/* Button-Feedback, wenn gesperrt (bis 5 Buchstaben eingegeben sind) */
button[disabled]{ opacity:.6; filter:saturate(.75); cursor:not-allowed; }

/* Einheitliche, größere Controls nur auf der Startseite */
:root{
  --control-w: 20rem;   /* Breite ~320px, gern anpassen */
  --control-h: 3.25rem; /* Höhe */
}

.page-index .form-card .input-code,
.page-index .form-card button{
  width: min(90vw, var(--control-w));
  height: var(--control-h);
  padding: 0 1rem;
  font-size: clamp(1rem, 3.2vw, 1.1rem);
  /* sicheres zentrieren */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Input-Feinschliff */
.page-index .form-card .input-code{
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  text-transform: uppercase;
}

/* Optional: Buttons optisch gleich, auch wenn .secondary eine Border hat */
.page-index .form-card button.secondary{
  border-width: 1px; /* ist eh gesetzt, hier nur der Vollständigkeit halber */
}

/* Disabled-Optik beibehalten */
.page-index .form-card button[disabled]{
  opacity:.6; filter:saturate(.75); cursor:not-allowed;
}


/* Startseite: Karte mit pinkem BG + zartem Bild-Overlay */
.page-index .card.card_pink{
  position: relative;
  overflow: hidden; /* damit das Overlay sauber im Radius bleibt */
}

/* Inhalt über das Overlay legen */
.page-index .card.card_pink .inner{
  position: relative;
  z-index: 1;
}

/* Bild-Overlay mit ~10% Deckkraft */
.page-index .card.card_pink::after{
  content: "";
  position: absolute;
  inset: 0;
  background: url("emoji-ff2f92-960x540@2x.png") center / cover no-repeat;
  opacity: 0.50;              /* 10% */
  pointer-events: none;
  z-index: 0;
  /* optional: leicht weichzeichnen, falls das Motiv zu „hart“ wirkt */
  /* filter: blur(1px); */
}

/* Emoji-Zeile unter dem Statement */
.statement-emoji{
  margin-top: 1em;                 /* ≈ „Leerzeile“ unter dem Text */
  font-size: 3.5em;
  line-height: 1.2;
  text-align: center;
}

/* Buttons in den Karten-Formularen angleichen */
.form-card :is(button, input[type="submit"], input[type="button"]) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  /*max-width: 420px;   /* optional */
  min-width: 220px;   /* optional */
  height: 56px;       /* fixe Höhe (48–56px passt gut) */
  margin: 0;
  padding: 0 16px;    /* seitliches Padding */
  border-radius: 12px;
  font-weight: 800;
  text-align: center;
  line-height: normal; /* falls global was anderes gesetzt ist */
}

/* Disabled-Zustand konsistent lassen */
.form-card :is(button, input[type="submit"], input[type="button"]):disabled {
  opacity: .6;
  cursor: not-allowed;
}

.form-card .input-code {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

/* Auf sehr schmalen Screens etwas breiter */
@media (max-width: 420px) {
  .form-card :is(button, input[type="submit"], input[type="button"]),
  .form-card .input-code {
    width: 90%;
  }
}