/* Gemeinsame Gestaltung der Tiro-Seiten (Startseite, Vereinsauswahl, Bord).

   Tiro – Schießstand Digital © 2026 Fabio Wyrwich. Alle Rechte vorbehalten.

   Bewusst zurückhaltend: heller, neutraler Grund, fast schwarzer Text, das
   Grün des Logos nur für Knöpfe und aktive Zustände. Diese Seiten gehören der
   App und sollen hinter den Inhalten zurücktreten.

   Die Seiten EINER EINHEIT (verwaltung.html, liste.html, anzeige.html) sind
   davon ausgenommen – dort führt der Verein, und dort bleibt sein Rot. */

:root{
  --t-bg:#F7F8F7;          /* Grund */
  --t-card:#FFFFFF;
  --t-ink:#16181A;         /* Text */
  --t-ink2:#3E4448;
  --t-muted:#6B7378;
  --t-line:#E4E7E5;
  --t-hair:rgba(20,26,22,.07);
  --t-gruen:#1B5E3A;       /* Akzent aus dem Logo */
  --t-gruen-d:#123723;
  --t-gruen-t:#EAF2ED;
  --t-err:#A32121;
  --t-r:14px;
  --t-shadow:0 1px 2px rgba(20,26,22,.04),0 4px 16px rgba(20,26,22,.06);
  --t-shadow-lg:0 8px 24px rgba(20,26,22,.10),0 2px 6px rgba(20,26,22,.05);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:var(--f-body);background:var(--t-bg);color:var(--t-ink);
     min-height:100dvh;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;
     line-height:1.55;}

.t-wrap{max-width:940px;margin:0 auto;padding:0 20px;}

/* ── Kopfzeile ── */
.t-top{display:flex;align-items:center;gap:12px;padding:18px 0;
       border-bottom:1px solid var(--t-line);margin-bottom:26px;}
.t-top img{height:34px;width:34px;object-fit:contain;}
.t-top .t-name{font-family:var(--f-head);font-weight:700;font-size:1.05rem;
               letter-spacing:.02em;text-transform:uppercase;}
.t-top .t-rest{margin-left:auto;display:flex;align-items:center;gap:14px;
               font-size:.86rem;color:var(--t-muted);}
.t-top a{color:var(--t-muted);text-decoration:none;font-weight:600;}
.t-top a:hover{color:var(--t-gruen);}

/* ── Überschriften ── */
h1{font-family:var(--f-head);font-size:1.9rem;font-weight:700;letter-spacing:-.01em;
   line-height:1.15;}
h2{font-family:var(--f-head);font-size:1.15rem;font-weight:600;letter-spacing:.01em;}
.t-sect{font-size:.74rem;font-weight:800;color:var(--t-muted);text-transform:uppercase;
        letter-spacing:.08em;margin:30px 2px 12px;}
.t-sect:first-child{margin-top:0;}
.t-lead{color:var(--t-ink2);font-size:1.02rem;max-width:60ch;}

/* ── Karten ── */
.t-card{display:flex;align-items:center;gap:14px;background:var(--t-card);
        border:1px solid var(--t-hair);border-radius:var(--t-r);
        box-shadow:var(--t-shadow);padding:15px 17px;margin-bottom:9px;
        text-decoration:none;color:var(--t-ink);
        transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
a.t-card:hover{transform:translateY(-2px);box-shadow:var(--t-shadow-lg);
               border-color:var(--t-line);}
.t-card .t-ic{width:44px;height:44px;flex-shrink:0;border-radius:11px;background:#fff;
              border:1px solid var(--t-line);display:flex;align-items:center;
              justify-content:center;font-size:1.3rem;overflow:hidden;}
.t-card .t-ic img{max-width:82%;max-height:82%;object-fit:contain;}
.t-card .t-tx{flex:1;min-width:0;}
.t-card .t-nm{font-weight:700;font-size:1rem;}
.t-card .t-sb{font-size:.83rem;color:var(--t-muted);margin-top:1px;}
.t-card .t-ar{color:#B6BEB9;font-size:1.15rem;font-weight:700;flex-shrink:0;}
a.t-card:hover .t-ar{color:var(--t-gruen);}

/* Eingerückte Karte: ein Zug unter seinem Korps */
.t-card.t-sub{margin-left:26px;background:#FCFDFC;}
.t-card.t-sub .t-ic{width:34px;height:34px;border-radius:9px;font-size:1rem;}
.t-card.t-sub .t-nm{font-size:.94rem;}

/* ── Knöpfe ── */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
       background:var(--t-gruen);color:#fff;border:none;border-radius:11px;
       padding:13px 22px;font-family:inherit;font-size:.98rem;font-weight:700;
       cursor:pointer;text-decoration:none;white-space:nowrap;
       transition:background .16s ease;}
.t-btn:hover{background:var(--t-gruen-d);}
.t-btn.t-still{background:#fff;color:var(--t-ink);border:1px solid var(--t-line);}
.t-btn.t-still:hover{background:#F2F4F2;border-color:#D6DBD8;}
.t-btn.t-weg{background:#fff;color:var(--t-err);border:1px solid #EBD2D2;}
.t-btn.t-weg:hover{background:#FCF4F4;}
.t-btn:disabled{opacity:.5;cursor:default;}
.t-btn.t-klein{padding:8px 14px;font-size:.85rem;border-radius:9px;}

/* ── Marken (Art einer Einheit) ── */
.t-tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;
       letter-spacing:.05em;color:var(--t-muted);background:#F1F3F1;
       border-radius:99px;padding:3px 9px;}
.t-tag.t-dach{color:var(--t-gruen);background:var(--t-gruen-t);}

/* ── Felder ── */
label.t-lbl{display:block;font-size:.75rem;font-weight:800;color:var(--t-muted);
            text-transform:uppercase;letter-spacing:.05em;margin:14px 0 5px;}
input.t-in,select.t-in{width:100%;border:1px solid var(--t-line);border-radius:10px;
       padding:11px 13px;font-family:inherit;font-size:.98rem;background:#fff;
       color:var(--t-ink);}
input.t-in:focus,select.t-in:focus{outline:none;border-color:var(--t-gruen);
       box-shadow:0 0 0 3px var(--t-gruen-t);}
.t-hint{font-size:.82rem;color:var(--t-muted);margin-top:5px;}
.t-err{color:var(--t-err);font-size:.88rem;font-weight:600;margin-top:8px;min-height:1.2em;}

/* ── Fußzeile ── */
.t-foot{margin-top:44px;padding:20px 0 34px;border-top:1px solid var(--t-line);
        font-size:.78rem;color:var(--t-muted);line-height:1.65;}
.t-foot a{color:var(--t-muted);font-weight:600;}

/* ── Hinweis-/Leerzustand ── */
.t-leer{background:var(--t-card);border:1px dashed var(--t-line);border-radius:var(--t-r);
        padding:22px;text-align:center;color:var(--t-muted);font-size:.92rem;}

/* ── Meldung ── */
.t-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
         background:var(--t-ink);color:#fff;padding:12px 20px;border-radius:11px;
         font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;
         transition:opacity .2s,transform .2s;z-index:90;max-width:90vw;}
.t-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:620px){
  .t-wrap{padding:0 15px;}
  h1{font-size:1.55rem;}
  .t-card.t-sub{margin-left:14px;}
}