/* Interner Bereich (web/intern.php): Anmeldung und Leiste ueber der
   Sponsorenmappe. */
.intern-karte { max-width: 440px; display: grid; gap: var(--s6); padding: clamp(var(--s7), 3vw, var(--s9)); }
.intern-form { display: grid; gap: var(--s6); justify-items: start; }
.intern-feld { display: grid; gap: var(--s2); width: 100%; }
.intern-feld label { font-size: var(--t-sm); font-weight: 600; color: var(--fg-1); }
/* Rand wie die Felder im Antrag (antrag.css): mindestens 4,5:1 auf der
   Karte, auch dunkel auf #191919. --border-strong erreichte 2,2:1 und
   1,6:1. */
.intern-feld input { width: 100%; min-height: 44px; padding: 0 var(--s4); font: inherit; color: var(--fg-1);
                     background: var(--bg-body); border: 1px solid light-dark(var(--fg-3), color-mix(in srgb, var(--fg-3) 85%, var(--fg-2))); border-radius: var(--r-md); }
.intern-feld input:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.intern-meldung { width: 100%; padding: var(--s5) var(--s6); font-weight: 600; color: var(--danger);
                  background: var(--danger-tint); border-left: 3px solid var(--danger); border-radius: 0 var(--r-md) var(--r-md) 0; }
.intern-leiste { padding-block: var(--s5); border-bottom: 1px solid var(--border-subtle); }
.intern-leiste__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.intern-leiste__innen p { margin: 0; font-size: var(--t-sm); color: var(--fg-3); }
@media print { .intern-leiste { display: none !important; } }

/* Uebersicht: Kacheln zu den Unterseiten. */
.intern-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6);
                  margin: var(--p-sp-oben) 0 0; padding: 0; list-style: none; }
.intern-kachel { height: 100%; gap: var(--s4); color: inherit; text-decoration: none;
                 transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.intern-kachel:hover { transform: translateY(-2px); border-color: var(--accent-500); text-decoration: none; }
.intern-kachel .p-display { font-size: var(--p-t-h3); }
.intern-kachel p { color: var(--fg-2); }
.intern-kachel__weiter { margin-top: auto; font-weight: 600; color: var(--accent-text); }
.intern-leiste__innen a { color: var(--accent-text); }
@media (max-width: 1000px) { .intern-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .intern-kacheln { grid-template-columns: minmax(0, 1fr); } }

/* Spielerfotos (Bild hochladen, app/bausteine/spielerfoto.php): eine Karte
   je Bild - Vorschau links, Angaben rechts, Knoepfe darunter. Spalten wie
   die Kacheln der Uebersicht. */
.sf-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6);
            margin: var(--p-sp-oben) 0 0; padding: 0; list-style: none; }
.sf-karte { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.sf-bild { display: block; width: 96px; height: 128px; overflow: hidden; border-radius: var(--r-md);
           border: 1px solid var(--border-subtle); background: var(--bg-body); }
.sf-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-angaben { display: grid; gap: var(--s4); margin: 0; min-width: 0; }
.sf-angaben dt { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
                 text-transform: uppercase; color: var(--fg-3); }
.sf-angaben dd { margin: var(--s1) 0 0; color: var(--fg-1); overflow-wrap: anywhere; }
.sf-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s4); }
.sf-knoepfe form { margin: 0; }
@media (max-width: 1000px) { .sf-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sf-liste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .sf-karte { padding: var(--s6); } }