/*
 * Two of Hearts — Fragebogen.
 *
 * The `.scr` block below is ported verbatim from docs/fragebogen-mockup.html
 * (the approved design reference), not re-invented — see the plan, Schritt 6.
 * Do not restyle from scratch; if the look needs to change, change the
 * reference mockup first, then re-port.
 *
 * Fonts are self-hosted (below), never linked to Google Fonts: the booth
 * runs a whole event without internet (CLAUDE.md), and a Google Fonts link
 * would also send every guest's IP to a US service before any consent
 * exists (invariant 11).
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-500.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/playfair-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/playfair-700.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-400-italic.woff2") format("woff2");
}

/* ---- page reset ------------------------------------------------------- */

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

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

body {
  /* Cream, even before .scr paints — an unstyled flash should not be white. */
  background: #F6EBDD;
  font-family: "Inter", system-ui, sans-serif;
}

/* ---- Marke: EIN Erscheinungsbild, Farben nach Funktion ---------------- */
/* Ported from docs/fragebogen-mockup.html — see the file header comment. */

.scr{
  --bg:#F6EBDD; --text:#2B2A2A;
  --text-soft:rgba(43,42,42,.56);
  --line:rgba(43,42,42,.20); --line-fine:rgba(43,42,42,.13);
  --fn:#2347A8; --fn-on:#F6EBDD; --fn-tint:rgba(35,71,168,.07);
  --emo:#C93F3A; --emo-fine:rgba(201,63,58,.28);
  --soft:rgba(230,167,181,.30);
  --sage:#788B72;

  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;
  display:flex;flex-direction:column;position:relative;
  min-height:100vh;
}
.scr .disp{font-family:'Playfair Display',Georgia,serif;}

/* Inhaltsspalte: mobil volle Breite, ab ca. 29rem zentriert mit Weissraum */
.col{width:100%;max-width:29rem;margin-inline:auto;display:flex;flex-direction:column;}

/* Das echte Logo (2 Herz, Cherry) ersetzt hier den Playfair-Platzhalter aus
   dem Mockup — deshalb keine Abblendung mehr: Referenz B erlaubt Cherry
   genau zweimal in der App, und der Kartenindex ist einer der beiden Orte. */
.index{position:absolute;top:20px;left:22px;z-index:2;}
.index img{display:block;width:30px;height:40px;}

.inner-frame::after{content:"";position:absolute;inset:20px;border:1px solid var(--line-fine);border-radius:6px;pointer-events:none;}
.inner-frame.emo::after{border-color:var(--emo-fine);}

.meta{font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-soft);}
.field-h{font-size:15px;font-weight:600;line-height:1.35;}
.soft{font-size:13px;line-height:1.5;color:var(--text-soft);}
.tiny{font-size:11px;color:var(--text-soft);}

.orn{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text);opacity:.30;}
.orn i{display:block;height:1px;width:30px;background:currentColor;}
.orn svg{width:11px;height:11px;}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
     background:var(--fn);color:var(--fn-on);border:0;border-radius:11px;
     font-family:'Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.005em;
     cursor:pointer;}

.card{display:flex;align-items:center;justify-content:space-between;gap:10px;
      background:transparent;border:1px solid var(--line);border-radius:9px;
      padding:15px 16px;min-height:54px;font-size:15px;color:var(--text);transition:border-color .12s, background .12s;
      cursor:pointer;}
.card:hover{background:var(--fn-tint);border-color:rgba(35,71,168,.35);}
.card.sel{border:2px solid var(--fn);padding:14px 15px;background:var(--soft);font-weight:500;}
.card .tick{color:var(--fn);display:none;flex:none;}
.card.sel .tick{display:block;}
.cards{display:flex;flex-direction:column;gap:9px;}
.cards.row{flex-direction:row;}
.cards.row .card{flex:1 1 0;min-width:0;justify-content:center;}

.cbrow{display:flex;gap:12px;align-items:flex-start;cursor:pointer;}
.cb{width:22px;height:22px;flex:none;border-radius:5px;border:1.5px solid var(--line);margin-top:1px;
    display:flex;align-items:center;justify-content:center;}
.cb .tick{display:none;}
.cb.on{background:var(--fn);border-color:var(--fn);color:var(--fn-on);}
.cb.on .tick{display:block;}

/* ---- Skala: Tapflaeche ist die Spalte, der Kreis nur das Sichtbare ----
   Feste Kreisbreiten laufen bei 7 Punkten auf schmalen Geraeten ueber.
   flex:1 teilt den vorhandenen Platz, der Kreis bekommt eine Obergrenze,
   damit er auf dem Desktop nicht aufblaeht. Kein Querscrollen, nie. */
.likert{display:flex;gap:6px;width:100%;}
.lk{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
    min-height:48px;padding:0;border:0;background:none;font-family:inherit;cursor:pointer;}
.lk span{width:100%;max-width:46px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
         border-radius:50%;border:1px solid var(--line);font-size:14px;color:var(--text-soft);
         transition:border-color .12s,color .12s,background .12s;}
.lk:hover span{border-color:var(--fn);color:var(--fn);}
.lk.sel span{background:var(--fn);border-color:var(--fn);color:var(--fn-on);font-weight:600;}
.lk-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--text-soft);padding:0 2px;}

.prog-top{display:flex;align-items:baseline;justify-content:space-between;}
.prog-n{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}
.prog-track{height:3px;border-radius:2px;background:rgba(43,42,42,.13);overflow:hidden;}
.prog-fill{height:100%;background:var(--fn);}
/* form.js updates the width live as items get answered; the transition is
   what makes that read as progress instead of a jump cut. */
@media (prefers-reduced-motion: no-preference){.prog-fill{transition:width .2s ease;}}

.codebox{width:100%;border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;}
/* The mockup used IBM Plex Mono here — a third font for one element that the
   plan's two-font rule (Playfair for display, Inter for everything
   functional) does not account for. Inter with tabular numerals instead of
   pulling in a webfont nobody decided to ship. */
.code{font-family:'Inter',ui-monospace,monospace;font-variant-numeric:tabular-nums;
      font-size:36px;font-weight:600;letter-spacing:0.16em;color:var(--text);}

/* ---- form-specific additions -------------------------------------------
 * Not part of the ported mockup block above: the mockup drew selected states
 * as decoration on plain <div>s. The real form needs actual <input> elements
 * so answers exist to submit, and the visual "selected" feedback has to work
 * with zero JavaScript (the plan requires the form to fully function without
 * it — the auto-scroll in form.js is the only thing JS adds).
 *
 * Markup contract for templates (Schritt 7):
 *   <label class="card">
 *     <input type="radio"|"checkbox" class="io-input" ...>
 *     Label text
 *     <span class="tick">…</span>   (cards only)
 *   </label>
 *   <label class="lk"><input type="radio" class="io-input" ...><span>1</span></label>
 *   <label class="cbrow"><input type="checkbox" class="io-input" ...><span class="cb">…</span> Text</label>
 *
 * `:has()` lets the wrapper react to its own input's checked/focus state —
 * no class ever needs to be toggled by script.
 */

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

.card:has(.io-input:checked){border:2px solid var(--fn);padding:14px 15px;background:var(--soft);font-weight:500;}
.card:has(.io-input:checked) .tick{display:block;}
.cbrow:has(.io-input:checked) .cb{background:var(--fn);border-color:var(--fn);color:var(--fn-on);}
.cbrow:has(.io-input:checked) .cb .tick{display:block;}
.lk:has(.io-input:checked) span{background:var(--fn);border-color:var(--fn);color:var(--fn-on);font-weight:600;}

.card:has(.io-input:focus-visible),
.cbrow:has(.io-input:focus-visible),
.lk:has(.io-input:focus-visible) span{outline:2px solid var(--fn);outline-offset:2px;}

/* ---- form-specific: error state, page padding -------------------------- */

.page{padding:48px 24px 40px;}

.err{color:var(--emo);font-size:12.5px;margin-top:4px;}
.card.err-field, .likert.err-field .lk span{border-color:var(--emo);}

a { color: var(--fn); }
a:hover { color: var(--emo); }