/* ==========================================
   GV Horpund – Styles (einfach & robust)
   ========================================== */
:root{
  --club-bordeaux:#5b0000;
  --club-yellow:#F0EC74;
  --bg:#f6f7f9;
  --card:#ffffff;
  --border:#d0d7de;
  --text:#111;
  --dim:#475569;
}

/* Reset/Box */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--text)}

/* Header */
.site-header{
  display:flex;align-items:center;gap:10px;
  background:var(--club-bordeaux);color:#fff;padding:12px 16px;
  border-bottom:4px solid var(--club-yellow);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:40px;height:40px;object-fit:contain;border-radius:4px;display:block}
.brand-title{font-weight:700;white-space:nowrap}
.brand-sub{opacity:.9;white-space:nowrap}

/* Container / Card */
.container{max-width:900px;margin:18px auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.heading{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
h1{margin:0;font-size:1.35rem}
.lead{color:var(--dim);margin:.4rem 0}

/* Jahr-Auswahl */
.year-form select{
  padding:6px 10px;border:1px solid #C7C9C7;border-radius:8px;background:#fff
}
.btn{background:#f9fafb;color:#222;border:1px solid #C7C9C7;border-radius:8px;padding:6px 12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Call-to-Action (Anmeldung) */
.cta{
  display:inline-block;background:var(--club-yellow);color:#222223;
  text-decoration:none;border-radius:999px;padding:8px 14px;font-weight:600;
  box-shadow:0 2px 4px rgba(0,0,0,.1);transition:.15s ease-in-out;
}
.cta:hover{background:#fff;color:var(--club-bordeaux);transform:translateY(-1px)}

/* Dokument-Liste */
.doc-list{list-style:none;margin:12px 0 0 0;padding:0}
.doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 8px;border-top:1px dashed var(--border)}
.doc-row:first-child{border-top:none}
.doc-title{font-weight:600}
.doc-actions{display:flex;gap:8px;flex-wrap:wrap}
.doc-btn{
  text-decoration:none;font-weight:600;color:#1d4ed8;
  border:1px solid #dbeafe;background:#eff6ff;border-radius:999px;padding:6px 10px
}
.doc-btn:hover{background:#dbeafe}
.doc-btn.secondary{color:#166534;border-color:#bbf7d0;background:#dcfce7}
.doc-btn.secondary:hover{background:#bbf7d0}

/* Hinweis */
.note{
  background:#fffde7;border:1px dashed var(--club-yellow);
  border-radius:8px;padding:10px 12px;color:#222
}

/* Archiv */
.archive-list{list-style:none;margin:10px 0 0 0;padding:0}
.archive-list li{padding:6px 0}
.archive-link{text-decoration:none;color:#1f2937;border-bottom:1px dotted #9ca3af}
.archive-link:hover{color:#5b0000;border-bottom-color:#5b0000}

/* Footer */
.footer{text-align:center;color:#6b7280;font-size:12px;padding:12px}

/* Responsive */
@media (max-width:700px){
  .doc-actions{justify-content:flex-start}
}

/* --- Buttons in der Dokumentzeile rechtsbündig, auch mobil --- */


/* Dokument-Zeile: Titel links, Buttons rechts */
.doc-row {
  display: grid;
  grid-template-columns: 1fr auto; /* Titel nimmt Rest, Buttons kompakt */
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-top: 1px dashed var(--border);
}


/* Der Titel bekommt den „freien Raum“ links */

.doc-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Actions immer rechtsbündig in der Zeile */

.doc-actions {
  display: flex;
  flex-direction: column; /* Buttons untereinander */
  align-items: flex-end;  /* Rechtsbündig */
  gap: 6px;
}


/* Mobile-Feinschliff: trotzdem rechtsbündig, aber sauberer Umbruch */

/* Buttons gleich breit für ruhiges Layout */
.doc-btn {
  min-width: 140px;
  text-align: center;
}


@media (min-width: 700px) {
  .doc-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}


/* --- CTA-Bereich (Anmeldung) nebeneinander / mobil untereinander, rechtsbündig --- */
.cta-wrap{
  display:flex;
  gap:10px;
  justify-content:flex-start; /* unterhalb der Überschrift links; wenn du rechts willst -> flex-end */
  flex-wrap:wrap;
  margin: 6px 0 10px;
}

.cta{
  display:inline-block;
  background:var(--club-yellow);
  color:#222223;
  text-decoration:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:.15s ease-in-out;
}
.cta:hover{ background:#fff; color:var(--club-bordeaux); transform:translateY(-1px) }

/* Zweiter Button – visuell differenzieren, aber im Brand bleiben */
.cta.alt{
  background:#fff;            /* heller Hintergrund */
  color:var(--club-bordeaux); /* rote Schrift */
  border:2px solid var(--club-bordeaux);
}
.cta.alt:hover{
  background:var(--club-bordeaux);
  color:#fff;
}

/* Falls du die CTA-Gruppe auf kleinen Displays rechtsbündig möchtest: */
@media (max-width:700px){
  .cta-wrap{ justify-content:flex-start; } /* auf Wunsch 'flex-end' setzen */
}

/* --- (falls noch nicht drin) Dokumentliste: Grid-Layout + Actions rechtsbündig --- */
.doc-row {
  display: grid;
  grid-template-columns: 1fr auto; /* Titel links, Buttons rechts */
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-top: 1px dashed var(--border);
}
.doc-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.doc-actions {
  display:flex;
  flex-direction:column;   /* Buttons untereinander auf Mobile */
  align-items:flex-end;    /* rechtsbündig */
  gap:6px;
}
@media (min-width:700px){
  .doc-actions { flex-direction:row; } /* Desktop: nebeneinander */
}
.doc-btn { min-width:140px; text-align:center; }