/* ---------------------------------------------------------------------------
   spartagirls.de
   Space Grotesk fuer alles. Rot als Flaeche, weisse Schrift, Sections.
   --------------------------------------------------------------------------- */

:root{
  --red:#a4141a;
  --ink:#fff;
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.18);
  --hair:rgba(255,255,255,.10);
  --win:#8ce0b0;
  --draw:#ffd98a;

  --gap:30px;      /* Standardabstand zwischen Gruppen */
  --gap-s:16px;    /* Abstand Überschrift zu ihrem Inhalt */

  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--red); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.5;
  font-feature-settings:'ss01','ss02';
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

.wrap{max-width:860px; margin:0 auto; padding:0 22px}

/* Kleine Wortmarke auf den Unterseiten ----------------------------------- */
.brandmark{
  display:inline-block; text-decoration:none; padding:30px 0 0;
  font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1;
  text-transform:uppercase;
}

/* STARTBILDSCHIRM -------------------------------------------------------- */
/* Ohne JavaScript oder bei reduzierter Bewegung gibt es ihn gar nicht. */
.intro{display:none}
.intro-on{overflow:hidden}
.intro-on .intro{
  display:flex; position:fixed; inset:0; z-index:120;
  align-items:center; justify-content:center;
}
/* Der rote Vorhang liegt hinter dem Spieler und blendet allein weg */
.intro-on .intro .intro-bg{
  position:absolute; inset:0; background:var(--red);
}
.intro-on .intro .intro-fly{
  position:relative; transform-origin:center center; will-change:transform;
}
.intro-on .intro .intro-logo{
  display:block; height:min(40vh,300px); width:auto; max-width:none;
  transform-origin:center center;
  /* Erst klein aufziehen, dann drei ruhige Atemzüge, wie ein Ladezeichen.
     Der Puls endet auf 1, deshalb springt beim Abflug nichts. */
  animation:sb-in .55s cubic-bezier(.2,.8,.3,1) both,
            sb-puls .9s ease-in-out .55s 3 forwards;
}
@keyframes sb-in{
  from{transform:scale(.72)}
  to  {transform:scale(1)}
}
@keyframes sb-puls{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.05)}
}
/* Solange der große Spieler fliegt, bleibt der kleine unsichtbar. Er behält
   aber seinen Platz, sonst wüsste die Animation kein Ziel. */
.intro-on .hero .mark .logo{visibility:hidden}

/* HERO ------------------------------------------------------------------- */
.hero{padding:56px 0 44px; text-align:center}

/* Die Wortmarke füllt immer die volle Inhaltsbreite, auf jedem Gerät, und
   bricht nie um. Die Größe stellt ein kleines Skript exakt ein, der Wert hier
   ist der Startwert, falls kein JavaScript läuft. */
.hero .mark{
  margin:0; font-weight:700; white-space:nowrap;
  font-size:calc((100vw - 44px) / 7.9);
  line-height:.9; letter-spacing:-.045em;
  display:flex; align-items:center; justify-content:center;
}
/* Der Spieler steht zwischen Sparta und Girls und wächst mit der Marke mit */
.hero .mark .logo{
  flex:0 0 auto; width:auto; height:1.5em; max-width:none;
  margin:0 .12em; display:block;
}
.hero .claim{
  margin:18px 0 0; font-size:clamp(8px,2.4vw,11px); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}

/* Sections tauchen beim Scrollen auf. Ohne JavaScript stehen sie sofort da,
   dafür sorgt das noscript im Kopf der Seite. */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.2,1);
}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.in{opacity:1; transform:none; transition:none}
}

/* Zeichen statt Worte: Treffen, Anpfiff, Ort ----------------------------- */
.bit{display:inline-flex; align-items:center; gap:7px}
.bit + .bit{margin-left:20px}
.ic{
  width:15px; height:15px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}

/* SPIELTAG-BLÖCKE -------------------------------------------------------- */
.matchday{
  border-radius:16px; padding:26px clamp(16px,4vw,34px) 30px;
  margin:0 0 22px;
}
/* Alle Kästen sind gleich. Dunkel wird immer der, den man gerade liest.
   Das übernimmt das Skript in inc/layout.php beim Scrollen. */
.matchday{
  background:transparent; box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s ease, box-shadow .4s ease;
}
.matchday.active{background:#8a1015; box-shadow:inset 0 0 0 1px transparent}

@media (prefers-reduced-motion:reduce){
  .matchday{transition:none}
}

.md-label{
  margin:0 0 12px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3);
}
.md-label span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; margin-left:10px; padding:0 6px;
  border-radius:99px; background:rgba(255,255,255,.16); color:#fff;
  font-size:11px; letter-spacing:0; font-variant-numeric:tabular-nums;
}
/* Reihenfolge im Kopf: Datum, Spieltag, Treffen und Anpfiff, dann das Tag.
   Der Platz steht unten unter dem Ergebnis. */
.matchday .when{
  margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
}
.matchday .times{
  margin:0; font-size:13px; font-weight:500;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.matchday .game-tag{margin:var(--gap-s) 0 var(--gap)}
.matchday .venue{
  margin:var(--gap) 0 0; font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.matchday .colh.centered{margin:var(--gap) 0 0}
.matchday .links{margin-top:var(--gap)}

/* SECTIONS --------------------------------------------------------------- */
.sec{padding:34px 0; border-top:1px solid var(--line)}
.sec > h2{
  margin:0 0 22px; font-size:11px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3);
}
.sec > h2.centered{margin-bottom:26px; letter-spacing:.18em}
.colh{
  margin:0 0 12px; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.colh.centered{margin:var(--gap) 0 0}
.meta{margin:14px 0 0; font-size:13px; color:var(--ink-2); line-height:1.6}
.meta a{color:#fff}
.stand{
  margin:0; padding:24px 0 54px; text-align:center;
  font-size:11px; color:var(--ink-3);
}
.stand a{color:var(--ink-2)}

/* Abo-Adresse zum Kopieren */
.calurl{
  display:inline-block; margin-top:8px; padding:6px 10px;
  border-radius:8px; background:rgba(255,255,255,.10);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:#fff; word-break:break-all; user-select:all; -webkit-user-select:all;
}

/* CURRENT GAME: Ergebnis über die volle Breite, Kader klein darunter ------ */
.board{display:flex; align-items:center; gap:clamp(14px,4vw,44px)}
/* Vereinsnamen stehen zweizeilig links und rechts vom Ergebnis. Der Umbruch
   kommt aus dem PHP, damit er an der richtigen Wortgrenze sitzt. */
.board .team{
  flex:1 1 0; min-width:0; margin:0;
  font-size:clamp(14px,2.1vw,20px); font-weight:700;
  line-height:1.15; letter-spacing:-.025em;
}
.board .team.right{text-align:right}
.board .big{
  flex:0 0 auto; margin:0;
  font-size:clamp(56px,15vw,148px); font-weight:700;
  letter-spacing:-.06em; font-variant-numeric:tabular-nums; line-height:.85;
}
.board .big.w{color:var(--win)}
.board .big.d{color:var(--draw)}
.centered{text-align:center}

.lineup-h{
  list-style:none; margin:var(--gap-s) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 22px; row-gap:8px;
}
.lineup-h li{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:13px; font-weight:500; color:var(--ink-2);
}
.lineup-h li span{
  font-size:11px; font-weight:700; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* OTHER RESULTS ---------------------------------------------------------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 34px}
.grid2.wide{gap:0 44px}

/* Die übrigen Partien, nur durch eine Linie abgesetzt */
.others{
  margin:var(--gap) 0 0; padding:var(--gap) 0 0;
  border-top:1px solid var(--line);
}
/* Der Abstand steckt schon im padding-top des Blocks, die Überschrift
   darf ihn nicht noch einmal mitbringen. */
.matchday .others .colh, .others .colh{margin:0 0 var(--gap-s)}
.others .orow:last-child, .others .grid2 > :nth-last-child(-n+2){border-bottom:none}

.orow{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--hair); font-size:13px;
}
.orow .ot{
  flex:1 1 0; min-width:0; color:var(--ink-2);
  line-height:1.3; font-weight:500;
  white-space:nowrap; /* Vereinsnamen brechen nie */
}
.orow .ot.right{text-align:right}
.orow .ores{
  flex:0 0 auto; font-weight:700; font-size:15px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* NEXT GAME -------------------------------------------------------------- */
.board .big.open{color:var(--ink-3); letter-spacing:-.02em}

.game-tag{margin:0 0 14px}
.orow .ores.quiet{color:var(--ink-3); font-weight:500}
.tag{
  display:inline-block; padding:6px 16px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.tag.heim{background:#fff; color:var(--red)}
.tag.ausw{box-shadow:inset 0 0 0 1.5px #fff}

.links{margin:20px 0 0; display:flex; gap:24px; flex-wrap:wrap}
.links.centered{justify-content:center}
.links a{
  font-size:14px; font-weight:700; text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:2px;
}
.links a:hover{color:var(--ink-2)}

/* Die Zusage ist die wichtigste Handlung auf der Seite. Deshalb eigene
   Zeile und gefuellt, nicht als Textlink neben Route und Termin. */
.cta{margin:var(--gap) 0 0}
.cta.centered{text-align:center}
.cta a{
  display:inline-block; max-width:100%;
  background:#fff; color:var(--red); text-decoration:none;
  font-size:14px; font-weight:700;
  border-radius:999px; padding:14px 26px;
}
.cta a:hover{opacity:.88}
/* Die Linkzeile folgt direkt darunter und braucht den grossen Abstand nicht */
.cta + .links{margin-top:var(--gap-s)}
.matchday .cta + .links{margin-top:var(--gap-s)}

/* TABLE und SPIELPLAN ---------------------------------------------------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:8px 4px; text-align:left; border:none}
th{
  font-size:9px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-3); font-weight:700; padding-bottom:9px;
}
tbody td{border-top:1px solid var(--hair)}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.n{color:var(--ink-2)}
td.r,th.r{width:20px; color:var(--ink-3); font-variant-numeric:tabular-nums}
tbody tr.us td{color:#fff; font-weight:700}
tbody tr.us td.r{color:#fff}

.wide-table{min-width:520px}
.wide-table td, .wide-table th{padding:9px 6px}

.plan .game{padding:11px 0}
.game{
  display:flex; align-items:baseline; gap:12px;
  padding:8px 0; border-top:1px solid var(--hair); font-size:14px;
}
.game:first-of-type{border-top:none; padding-top:0}
.game .md{flex:0 0 20px; color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.game .d{flex:0 0 76px; color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:12px}
.game .t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.game .ha{
  flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-3); border:1px solid var(--hair); border-radius:3px; padding:1px 4px;
}
.game .r{flex:0 0 42px; text-align:right; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink-2)}
.game .r.w{color:var(--win)}
.game .r.d{color:var(--draw)}
.game.now .t{font-weight:700; color:#fff}
.game.now .d, .game.now .r{color:#fff}

/* Formulare und Unterseiten ---------------------------------------------- */
.kader-head{padding:30px 0 26px}
.kader-head h1{
  margin:0; font-size:clamp(30px,7vw,44px); font-weight:700;
  line-height:1; letter-spacing:-.03em;
}
.kader-head p{margin:10px 0 0; color:var(--ink-2); font-size:13px}

.card{margin:0 0 34px}
.card > h2{
  margin:0 0 16px; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700;
}
.card .body, .card .body.tight{padding:0}

label{display:block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file],select,textarea{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:rgba(0,0,0,.2);
  color:var(--ink); font:inherit; font-size:16px;
}
select option{background:#8d1016; color:#fff}
input:focus,select:focus{outline:2px solid #fff; outline-offset:1px; border-color:transparent}

button,.btn{
  display:inline-block; padding:10px 20px; border-radius:8px; border:none;
  background:#fff; color:var(--red); font:inherit; font-weight:700; font-size:15px;
  cursor:pointer; text-decoration:none; text-align:center;
}
button:hover{background:rgba(255,255,255,.86)}
button.sec{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px var(--line)}
button.sec:hover{background:rgba(255,255,255,.12)}
button.sm{padding:6px 12px; font-size:13px}
.inline{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
form.stack{display:flex; flex-direction:column; gap:14px; max-width:400px}

.roster .row{display:flex; align-items:center; gap:10px;
  padding:8px 0; border-top:1px solid var(--hair)}
.roster .row:first-child{border-top:none}
.roster .ph{display:none}
.roster .nm{flex:1 1 auto; min-width:0; font-weight:500; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.roster input.nr{flex:none; width:46px; padding:6px 4px; text-align:center;
  font-weight:700; font-variant-numeric:tabular-nums}
.roster select{flex:none; width:150px; padding:6px 8px; font-size:14px}
.roster .nr-read{flex:none; width:26px; text-align:center; font-weight:700; color:var(--ink-2)}
.roster .po{flex:none; color:var(--ink-3); font-size:12px; text-align:right; min-width:100px}

.picks{display:grid; gap:7px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.pick{display:flex; align-items:center; gap:9px; margin:0; padding:9px 11px;
  border-radius:8px; background:rgba(0,0,0,.2); box-shadow:inset 0 0 0 1px var(--line);
  font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer}
.pick:hover{background:rgba(255,255,255,.12)}
.pick input{width:17px; height:17px; accent-color:#fff; flex:none; margin:0}
.pick span{display:flex; align-items:center; gap:6px}
.pick b{font-size:10px; font-weight:700; color:var(--red); background:#fff;
  border-radius:99px; padding:2px 6px}

.msg{padding:11px 14px; border-radius:8px; margin:0 0 18px; font-size:14px; font-weight:500}
.msg.ok{background:rgba(255,255,255,.16)}
.msg.err{background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.msg.warn{background:rgba(0,0,0,.22)}
.hint{color:var(--ink-3); font-size:12px; margin:8px 0 0}
.hint a{color:var(--ink-2)}
.empty{color:var(--ink-3); font-size:13px; padding:14px 0}
.scroller{overflow-x:auto}
code{background:rgba(0,0,0,.3); padding:2px 7px; border-radius:5px; font-size:13px}

/* FOOTER ----------------------------------------------------------------- */
.foot{
  max-width:860px; margin:0 auto; padding:28px 22px 48px;
  border-top:1px solid var(--line); color:var(--ink-3); font-size:11px;
}
.foot p{margin:4px 0}
.foot .f-links{display:flex; gap:20px; flex-wrap:wrap; margin:0 0 18px}
.foot .f-links a{font-size:13px; font-weight:700; color:var(--ink-2); text-decoration:none}
.foot .f-links a:hover{color:#fff}

@media (max-width:620px){
  .grid2, .grid2.wide{grid-template-columns:1fr; gap:0}
  .grid2.wide > div + div{margin-top:30px}
  .lineup-h{gap:0 16px; margin-top:22px}
  .sec{padding:28px 0}
  .hero{padding:40px 0 34px}
  /* Einspaltig gestapelt: die Linie gehoert unter jede Partie ausser der
     letzten. Die Regel fuer zwei Spalten wuerde hier zwei Linien schlucken. */
  .others .grid2 > :nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
  .others .grid2 > :last-child{border-bottom:none}
  /* Tabelle passt aufs Handy, wenn nur das Nötige steht: Platz, Verein,
     Spiele, Differenz, Punkte. Kein seitliches Scrollen. */
  .scroller{overflow:visible}
  .wide-table .opt{display:none}
  .wide-table{min-width:0; font-size:12px}
  .wide-table th, .wide-table td{padding:8px 2px}
  /* Eine Zeile je Partie, Ergebnis in der Mitte. Damit die langen Namen
     nicht brechen, wird die Schrift hier kleiner und der Abstand enger. */
  .orow{gap:8px; padding:9px 0}
  .orow .ot{font-size:clamp(9.5px,3vw,11px); line-height:1.2}
  .orow .ores{font-size:clamp(11px,3.4vw,13px)}
  /* Auch auf dem Handy stehen die Teams links und rechts. Schrift und
     Ergebnis schrumpfen mit, die Namen brechen auf zwei Zeilen. */
  .board{gap:8px}
  .board .team{font-size:clamp(11px,3.8vw,17px); line-height:1.2}
  .board .big{font-size:clamp(38px,11vw,80px)}
  /* Auf dem Handy laeuft der Knopf ueber die volle Breite der Box */
  .cta a{display:block; padding:14px 16px}
  /* Spielplan in derselben Groesse wie die Tabelle, dann steht jede Zeile
     vollstaendig da und nichts wird abgeschnitten. */
  .game{font-size:clamp(10px,3.2vw,12px); gap:clamp(4px,1.7vw,6px)}
  .game .md{flex:0 0 14px}
  .game .d{flex:0 0 clamp(42px,13.5vw,54px); font-size:clamp(10px,3vw,11px)}
  .game .ha{font-size:8px; padding:1px 3px}
  .game .r{flex:0 0 clamp(30px,10vw,34px)}
  .game .t{text-overflow:clip}
}

/* Sehr schmale Geräte: das Kürzel H/A weicht, damit der Vereinsname
   vollständig stehen bleibt. Heim oder auswärts steht im Spielplan ohnehin
   schon in der Paarung. */
@media (max-width:340px){
  .game .ha{display:none}
}