/* ============================================================
   taktik.css – Taktiktrainer (VPC-Designsystem, wie Winterliga)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0a1f44;--navy-mid:#1a3a6e;--gold:#c9a84c;--gold-lt:#e8c96a;
  --cream:#faf7f2;--sand:#e8dece;--sand-dk:#d4c4a8;
  --text:#1a1a2e;--muted:#6b7080;--white:#fff;
  --green:#1a7a4a;--red:#c0392b;--orange:#d4660a;--r:12px;
}
body{background:var(--cream);font-family:"Source Sans 3",sans-serif;color:var(--text);min-height:100vh;line-height:1.45}
a{color:var(--navy-mid)}

/* Navigation */
.nav{background:var(--navy);padding:.7rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.nav .brand{color:var(--gold-lt);font-family:"Playfair Display",serif;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.nav .brand img{height:28px;width:auto}
.nav .links{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.nav .links a{color:rgba(255,255,255,.8);font-size:.85rem;padding:.3rem .7rem;border-radius:6px;text-decoration:none}
.nav .links a:hover{background:rgba(255,255,255,.12);color:#fff}

/* Layout */
.wrap{max-width:1180px;margin:0 auto;padding:1.5rem 1rem 4rem}
.wrap.schmal{max-width:640px}
.page-title{font-family:"Playfair Display",serif;color:var(--navy);font-size:1.7rem;margin-bottom:.3rem}
.untertitel{color:var(--muted);font-size:.9rem;margin-bottom:1.25rem}
.section-title{font-family:"Playfair Display",serif;color:var(--navy);font-size:1.15rem;margin-bottom:.9rem}
.card{background:var(--white);border-radius:var(--r);box-shadow:0 6px 28px rgba(10,31,68,.09);padding:1.25rem;margin-bottom:1.25rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.hint{font-size:.8rem;color:var(--muted)}
.leer{color:var(--muted);text-align:center;padding:1.5rem}

/* Formulare */
.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}
.field label{font-size:.8rem;font-weight:600;color:var(--navy)}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;padding:.5rem .7rem;border:1.5px solid var(--sand-dk);border-radius:7px;
  font-size:.92rem;font-family:inherit;background:var(--white);color:var(--text)}
textarea{min-height:4.2rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(26,58,110,.12)}
.check{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;margin:.6rem 0}
.check input{margin-top:.2rem}
.tt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem 1.1rem;border-radius:7px;
  font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;
  transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,31,68,.18)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-p{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#fff}
.btn-g{background:linear-gradient(135deg,#0d5c30,var(--green));color:#fff}
.btn-d{background:linear-gradient(135deg,#6b1212,var(--red));color:#fff}
.btn-s{background:#fff;color:var(--navy);border:1.5px solid var(--sand-dk)}
.btn-sm{padding:.28rem .65rem;font-size:.78rem;border-radius:5px}
.btn-block{width:100%}
.aktionen{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem}

/* Meldungen */
.msg{padding:.75rem 1rem;border-radius:0 8px 8px 0;font-size:.9rem;margin-bottom:1rem}
.msg.success{background:#e8f5ee;border-left:3px solid var(--green);color:#0d5c30}
.msg.error{background:#fdf0f0;border-left:3px solid var(--red);color:var(--red)}
.msg.warn{background:#fff3eb;border-left:3px solid var(--orange);color:#8a3f00}
.msg.info{background:#eef3fb;border-left:3px solid var(--navy-mid);color:var(--navy)}
.msg ul{margin:.35rem 0 0 1.1rem}

/* Tabs */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.tab{padding:.45rem .9rem;border-radius:7px;font-size:.86rem;font-weight:600;border:1.5px solid var(--sand-dk);
  background:#fff;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.tab.aktiv{background:var(--navy);color:#fff;border-color:var(--navy)}
.zahl{background:var(--orange);color:#fff;border-radius:20px;font-size:.72rem;padding:0 .45rem;line-height:1.4}
.pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.pill{padding:.3rem .8rem;border-radius:20px;font-size:.8rem;border:1.5px solid var(--sand-dk);background:#fff;color:var(--muted);text-decoration:none}
.pill.aktiv{background:var(--navy-mid);border-color:var(--navy-mid);color:#fff}

/* Badges */
.badge{display:inline-block;padding:.08rem .5rem;border-radius:20px;font-size:.72rem;font-weight:700}
.badge.frei{background:#e8f5ee;color:#0d5c30}
.badge.entwurf{background:#f1f0ee;color:var(--muted)}
.badge.hinweis{background:#fff3eb;color:var(--orange)}
.badge.info{background:#e8eef8;color:var(--navy-mid)}
.wbadge{display:inline-block;padding:.1rem .55rem;border-radius:6px;font-size:.75rem;font-weight:700;white-space:nowrap}
.wbadge.w5,.wbadge.w4{background:#e8f5ee;color:#0d5c30}
.wbadge.w3,.wbadge.w2{background:#fff3eb;color:#8a3f00}
.wbadge.w1{background:#fdf0f0;color:var(--red)}
.wbadge.w0{background:#f1f0ee;color:var(--muted)}

/* Grafik */
.tt-grafik{width:100%;max-width:560px;margin:0 auto}
.tt-grafik svg{display:block;width:100%;height:auto;border-radius:10px}
.tt-grafik.klein{width:96px;max-width:96px;flex-shrink:0;margin:0}
.tt-grafik.klein svg{border-radius:6px;border:1px solid var(--sand)}
.legende{display:flex;gap:1rem;justify-content:center;font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.legende i{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;vertical-align:-1px;margin-right:.3rem}

/* Trainer */
.kontext{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.kx{background:var(--cream);border-radius:8px;padding:.45rem .7rem}
.kx span{display:block;font-size:.72rem;color:var(--muted)}
.kx b{font-size:.92rem;color:var(--navy)}
.frage{font-weight:700;font-size:1.05rem;color:var(--navy);margin:1rem 0 .75rem}
.optionen{display:flex;flex-direction:column;gap:.5rem}
.opt-btn{width:100%;text-align:left;padding:.85rem 1rem;border:1.5px solid var(--sand-dk);border-radius:9px;background:#fff;
  font-family:inherit;font-size:.98rem;color:var(--text);cursor:pointer;transition:border-color .12s,background .12s}
.opt-btn:hover{border-color:var(--navy-mid);background:#f6f8fc}
.ergebnis{border-radius:10px;padding:.9rem 1rem;margin:1rem 0;background:var(--cream)}
.ergebnis .kopf{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}
.aufl{border-top:1px solid var(--sand);padding:.75rem 0}
.aufl .kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.aufl .kopf b{color:var(--navy)}
.aufl.gewaehlt .kopf b::after{content:" ← deine Wahl";font-weight:400;color:var(--muted);font-size:.8rem}
.aufl dl{font-size:.88rem;margin-top:.35rem;display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem}
.aufl dt{color:var(--muted)}
.nachher{display:flex;gap:1rem;flex-wrap:wrap;font-size:.88rem;margin-top:.5rem}
details.rm summary{cursor:pointer;color:var(--navy-mid);font-size:.88rem}
details.rm[open] summary{margin-bottom:.6rem}

/* Admin: Übersicht */
.sit-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.9rem}
@media(max-width:420px){.sit-liste{grid-template-columns:1fr}}
.sit-karte{background:#fff;border-radius:var(--r);box-shadow:0 4px 18px rgba(10,31,68,.08);padding:.8rem;display:flex;gap:.8rem}
.sit-karte .inhalt{flex:1;min-width:0}
.sit-karte .zeile1{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.sit-karte .titel{font-weight:700;color:var(--navy);text-decoration:none}
.sit-karte .titel:hover{text-decoration:underline}
.sit-karte .frage-kurz{font-size:.84rem;color:var(--muted);margin:.2rem 0 .4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sit-karte .meta{font-size:.76rem;color:var(--muted);display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.freigabe{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;white-space:nowrap;cursor:pointer}
.freigabe input{width:1.05rem;height:1.05rem;cursor:pointer}
.freigabe.an{color:var(--green)}
.freigabe.aus{color:var(--muted)}
.freigabe-meldung{font-size:.78rem;color:var(--red);margin-top:.35rem}

/* Admin: Bearbeiten */
.kugel-tabelle{width:100%;border-collapse:collapse;font-size:.86rem}
.kugel-tabelle th{background:var(--navy);color:#fff;padding:.4rem .5rem;text-align:left;font-size:.75rem}
.kugel-tabelle td{padding:.3rem .35rem;border-bottom:1px solid var(--sand)}
.kugel-tabelle input,.kugel-tabelle select{padding:.3rem .4rem;font-size:.86rem}
.kugel-tabelle .nr{color:var(--muted);width:2.5rem}
.opt-karte{border:1.5px solid var(--sand);border-radius:10px;margin-bottom:.6rem}
.opt-karte summary{padding:.6rem .8rem;cursor:pointer;display:flex;gap:.5rem;align-items:center;list-style:none}
.opt-karte summary::-webkit-details-marker{display:none}
.opt-karte summary .t{flex:1}
.opt-karte .koerper{padding:0 .8rem .8rem}
.herkunft{font-size:.7rem;color:var(--muted)}
.inline-form{display:inline}

/* Tabellen */
table.liste{width:100%;border-collapse:collapse}
table.liste th{background:var(--navy);color:#fff;padding:.45rem .6rem;font-size:.76rem;text-align:left}
table.liste td{padding:.5rem .6rem;border-bottom:1px solid var(--sand);font-size:.88rem;vertical-align:top}
.scroll{overflow-x:auto}
.vergleich{background:#eef3fb;border-radius:8px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:1rem}
.vergleich b{color:var(--navy)}

/* Einstiegsseite */
.willkommen{text-align:center;padding:2rem 1.5rem}
.willkommen p{margin:.6rem auto;max-width:30rem}
.willkommen .page-title{font-size:1.55rem;margin-bottom:1rem}
.willkommen-logo{height:64px;width:auto;margin-bottom:.75rem}
.btn-start{font-size:1.05rem;padding:.8rem 2rem;margin:1.2rem 0 .6rem}

/* Blättern zwischen Situationen */
.blaettern{display:flex;justify-content:space-between;gap:.5rem;margin:-.1rem 0 .9rem}