/* MTV 1879 München · Basketball — gemeinsames Formular-Stylesheet
   Eine Quelle für SR-Erstattung und Spielerpass: gleiche Tokens, gleiche
   Bausteine. Design System: Montserrat, Rot #C20E1A als einziger Akzent,
   warme Neutrale, Uppercase-Labels, Two-Tone-Headline (genau EIN rotes Wort). */

:root{
  --red:#c20e1a; --red-deep:#8c0f14; --ink:#181818; --paper:#f3e1d3;
  --snow:#faf7f2; --mist:#efeae3; --line:rgba(24,24,24,.12); --line-strong:rgba(24,24,24,.22);
  --soft:#6b655e; --faint:#8a847c;
}
*{box-sizing:border-box}
html{overflow-y:scroll}
body{margin:0;font-family:'Montserrat',Arial,sans-serif;background:var(--mist);color:var(--ink);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* Court-Wasserzeichen, dezent unter dem Inhalt */
body::before{content:"";position:fixed;right:-140px;bottom:-160px;width:560px;height:560px;
  background:url(/pub/court-fiba.svg) no-repeat center/contain;opacity:.05;pointer-events:none}
.bar{height:6px;background:var(--red)}
.wrap{position:relative;max-width:600px;margin:0 auto;padding:18px 16px 48px}

/* Kopf: Wappen + Two-Tone-Headline */
.brand{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.brand img{height:56px;flex:none}
.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--red)}
h1{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;margin:3px 0 0}
h1 span{color:var(--red)}

/* Karten + Schritt-Köpfe */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;margin-bottom:14px}
.step{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;
      letter-spacing:.12em;color:var(--soft);margin:0 0 14px}
.step b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;
        background:var(--ink);color:#fff;font-size:11px}
.step .info{margin-left:auto}

/* Felder */
label.f{display:block;margin-bottom:12px}
label.f>span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;
             letter-spacing:.1em;color:var(--soft);margin-bottom:5px}
input[type=text],input[type=email],input[type=date],textarea{
  width:100%;font:inherit;font-size:16px;font-weight:500;padding:12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(194,14,26,.14)}
input.bad{border-color:var(--red);background:#fff6f6}
::placeholder{color:var(--faint)}
.err{color:var(--red);font-size:12px;font-weight:600;margin-top:4px;display:none}
.err:not(:empty){display:block}
.req{color:var(--red);font-weight:800;font-style:normal}
.pflicht{color:var(--faint);font-size:11px;margin:0 0 12px}
.pflicht .req{font-size:12px}

/* Segment-Auswahl (Ja/Nein, Erster Pass/Vereinswechsel) */
.seg{display:flex;gap:8px;margin-bottom:12px}
.seg>label,.seg>button{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;
  padding:12px 8px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;background:#fff;color:var(--ink)}
.seg input{display:none}
.seg input:checked+span{color:var(--red);font-weight:700}
.seg>label:has(input:checked),.seg>button[aria-pressed="true"]{
  border-color:var(--red);background:rgba(194,14,26,.05)}
.seg>button[aria-pressed="true"]{color:var(--red);font-weight:700}

/* Info-Knopf + Dialog: Erläuterungen raus aus dem Formular */
.info{width:22px;height:22px;flex:none;border:1px solid var(--line-strong);border-radius:50%;
  background:#fff;color:var(--soft);font:inherit;font-size:12px;font-weight:700;font-style:italic;
  font-family:Georgia,serif;line-height:1;cursor:pointer;padding:0}
.info:hover{border-color:var(--red);color:var(--red)}
.tlink{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;
  color:var(--soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tlink:hover{color:var(--red)}
dialog{border:none;border-radius:14px;padding:0;max-width:min(420px,calc(100vw - 32px));
  box-shadow:0 24px 60px rgba(24,24,24,.28)}
dialog::backdrop{background:rgba(24,24,24,.45)}
.dlg-head{display:flex;align-items:center;gap:10px;padding:16px 16px 0}
.dlg-head h3{flex:1;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin:0}
.dlg-head button{width:28px;height:28px;border:none;border-radius:50%;background:var(--mist);
  color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
.dlg-body{padding:10px 16px 18px;font-size:13.5px;color:#4a4641}
.dlg-body p{margin:0 0 10px}
.dlg-body p:last-child{margin-bottom:0}
.dlg-body b{color:var(--ink)}
.dlg-body a{color:var(--red);font-weight:600}

/* Fotozone (SR) */
.fotozone{border:2px dashed var(--line-strong);border-radius:12px;padding:22px 14px;text-align:center;cursor:pointer}
.fotozone strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.fotozone em{font-style:normal;color:var(--soft);font-size:12px}
#previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:50%;
              background:var(--ink);color:#fff;font-size:13px;line-height:1;cursor:pointer}

/* Absenden + Meldungen */
.submit{width:100%;font:inherit;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;
        background:var(--red);color:#fff;border:none;border-radius:10px;padding:15px;cursor:pointer}
.submit:active{transform:scale(.98)}
.submit:disabled{opacity:.5;cursor:default}
.foot{color:var(--faint);font-size:11px;text-align:center;margin-top:16px}
.alert{background:#fff;border:1px solid rgba(194,14,26,.4);color:var(--red-deep);
       border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13px;font-weight:600}
.alert ul{margin:6px 0 0;padding-left:18px;font-weight:500}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;opacity:0}

/* Erfolg */
.done{text-align:center;padding:38px 16px}
.done .ok{font-size:44px;font-weight:800;color:var(--red)}
.done h2{font-size:20px;text-transform:uppercase;margin:8px 0 6px}
.done code{display:inline-block;background:var(--paper);border-radius:8px;padding:8px 14px;
           font-family:inherit;font-size:16px;font-weight:700;margin-top:6px}

/* Desktop / Laptop */
@media(min-width:760px){
  .wrap{max-width:640px;padding-top:36px}
  .brand img{height:68px}
  h1{font-size:32px}
  .card{padding:22px 22px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
}