/* Check-in-Seite (checkin.sirplus.de) – baut auf main.css der Event-Seite auf.
 * Mobile-first: wird am Eingang per QR auf dem Handy geöffnet, oft mit einer Hand. */

.checkin-page .site-header__tag {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
  color: var(--tanne);
  opacity: .8;
}
.checkin { padding: 1.5rem 0 4rem; min-height: 60vh; }
.checkin__wrap { max-width: 32rem; }
.checkin-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.25; margin: 0 0 1.25rem;
}
.checkin__loading { text-align: center; padding: 3rem 0; }
.checkin__spinner {
  width: 2.4rem; height: 2.4rem; margin: 0 auto 1rem; border-radius: 50%;
  border: .35rem solid rgba(0, 75, 46, .15); border-top-color: var(--tanne);
  animation: checkin-spin .9s linear infinite;
}
@keyframes checkin-spin { to { transform: rotate(360deg); } }

/* Karten */
.card {
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.4rem 1.25rem; margin: 0 0 1rem;
}
.card--soft { background: rgba(255, 255, 255, .6); box-shadow: none; }
.card--warn { border-left: .4rem solid var(--mango); }
.card--error { border-left: .4rem solid var(--erdbeere); }
.card--success { border-left: .4rem solid var(--fruehling); }
.card p { margin: 0 0 .9rem; }
.card p:last-child { margin-bottom: 0; }
.card-sub {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.25; margin: 0 0 .6rem;
}
.hint { font-size: .92rem; opacity: .8; margin: 0 0 .75rem; }
.lead { font-size: 1.05rem; margin: 0 0 1.25rem; }

/* Formulare: große Felder, große Buttons */
.form { display: grid; gap: .75rem; margin-top: .75rem; }
.form label { font-weight: 700; font-size: .95rem; }
.form input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1.15rem; padding: .85rem 1rem;
  border-radius: .9rem; border: 2px solid rgba(0, 75, 46, .2); background: var(--weiss);
}
.form input:focus-visible { outline: 3px solid var(--fruehling); border-color: var(--tanne); }
.form input.is-invalid { border-color: var(--erdbeere); }
.form input[inputmode="numeric"] { font-size: 1.6rem; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.form input.code { text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem; letter-spacing: .06em; }
.form .btn { width: 100%; text-align: center; border: 0; cursor: pointer; font-size: 1.35rem; padding: .7em 1em; }
.btn--cta[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--outline, .form .btn--outline { background: transparent; border: 3px solid var(--tanne); color: var(--tanne); cursor: pointer; }
.btn--secondary { background: var(--tanne); color: var(--weiss); border: 0; cursor: pointer; }
.form-error { color: var(--erdbeere); font-weight: 700; margin: 0; }
.form-error[hidden] { display: none; }

/* „Oder": zweiter Weg als aufklappbare Karte */
.alt { margin-top: .25rem; }
.alt summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem;
}
.alt summary::-webkit-details-marker { display: none; }
.alt summary::after { content: "▾"; transition: transform .2s; opacity: .7; }
.alt[open] summary::after { transform: rotate(180deg); }
.alt__body { margin-top: .75rem; }
.or {
  display: flex; align-items: center; gap: .75rem; margin: 1rem 0; font-size: .85rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .7;
}
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: rgba(0, 75, 46, .15); }

/* Erfolg */
.success-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; }
.success-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.badge {
  display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: rgba(0, 75, 46, .08);
}
.badge--xxl { background: var(--mango); color: var(--tanne); }
.badge--time { background: var(--fruehling-25); }
.success-check {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 0 1rem; border-radius: 50%;
  background: var(--fruehling); color: var(--tanne); font-size: 2.6rem; font-weight: 700; line-height: 1;
}
.actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.actions .btn { width: 100%; text-align: center; box-sizing: border-box; }

/* Kamera-Scanner (Vollbild) */
.scanner { position: fixed; inset: 0; z-index: 50; background: #000; color: var(--weiss); display: flex; flex-direction: column; }
.scanner[hidden] { display: none; }
.scanner__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; font-weight: 700; }
.scanner__close { background: rgba(255, 255, 255, .15); border: 0; color: inherit; border-radius: 999px; width: 2.5rem; height: 2.5rem; font-size: 1.2rem; cursor: pointer; }
.scanner__video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.scanner__frame {
  position: absolute; left: 50%; top: 50%; width: min(70vw, 18rem); height: min(70vw, 18rem);
  transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, .85); border-radius: 1.25rem; pointer-events: none;
}
.scanner__hint { margin: 0; padding: .9rem 1rem 1.4rem; text-align: center; font-size: .95rem; opacity: .9; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 40rem) {
  .checkin-page .site-header__tag { display: none; }
  .card { padding: 1.2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .checkin__spinner { animation: none; }
  .btn:hover { transform: none; }
}