/* Giveaway-seitiges Layout — nur Struktur/Anordnung. Aussehen + Fundament (body,
   Sticky-Footer, Tokens, Buttons, Karten, Navbar, Footer) = geteilter gsv2_core-
   Layer (gsv2.css). Akzentfarbe kommt vom Chamaeleon (Kern hat keine eigene). */
/* Reset + Inhaltsspalte kommen aus dem Layer. Giveaways sind ein WERKZEUG →
   .gsv2-container-wide (1180px). Hier KEINE eigene Breite setzen: diese Datei
   laedt nach gsv2.css und wuerde die Stufe still ueberschreiben. */

.gw-main { padding-block: 2rem 3rem; }

/* Aktionsleiste. Rechtsbuendig, weil der Knopf eine Nebenhandlung ist — die
   Verlosungen selbst sind der Inhalt der Seite. */
.gw-bar {
    display: flex;
    justify-content: flex-end;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}

.gw-section + .gw-section { margin-top: 3rem; }
.gw-section h2 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    color: var(--gsv2-text);
}

/* Auto-fill statt fester Spaltenzahl: bei einem einzigen laufenden Giveaway
   soll die Karte nicht auf Drittelbreite schrumpfen und verloren wirken. */
.gw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ---------- Karte ----------
   Die Karte traegt eine Rangfolge: Titel (was), Preis (wofuer), Daten (Rahmen),
   Aktion (was jetzt). Die Aktion sitzt unten und wird per margin-top:auto an den
   Fuss gedrueckt, damit die Knoepfe benachbarter Karten auf einer Linie liegen —
   auch wenn eine Beschreibung laenger ist als die andere. */
.gw-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
}
.gw-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gsv2-text);
}
/* Der Preis ist die Antwort auf "was bekomme ich" und darum farbig hervorgehoben —
   die einzige Stelle der Karte, die den Akzent traegt. */
.gw-card-prize {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gsv2-accent);
}
.gw-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gsv2-text-muted);
}

.gw-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.85rem;
    color: var(--gsv2-text-dim);
}
.gw-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
/* Icons folgen der Textfarbe (currentColor) und sitzen auf der Schriftlinie. */
.gw-icon {
    display: inline-flex;
    width: 0.95em;
    height: 0.95em;
}
.gw-icon svg { width: 100%; height: 100%; }

.gw-action { margin-top: auto; align-self: flex-start; }
.gw-signin {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--gsv2-text-dim);
}

/* Beendete eigene Giveaways sind Nachschlagewerk, kein Angebot — gedaempft,
   damit sie den laufenden nicht die Aufmerksamkeit nehmen. */
.gw-card-past { opacity: 0.75; }

.gw-empty {
    text-align: center;
    padding-block: 3rem;
    color: var(--gsv2-text-dim);
}

/* ---------- Formular im Modal ---------- */
.gw-create-box { max-width: 520px; text-align: left; }

.gw-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}
.gw-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.gw-field > span {
    font-size: 0.85rem;
    color: var(--gsv2-text-muted);
}
/* Zwei Felder nebeneinander, solange Platz ist. Laufzeit und Bedingung gehoeren
   optisch zusammen: beide beschreiben den Rahmen, nicht den Preis. */
.gw-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.gw-duration {
    display: flex;
    gap: 0.5rem;
}
.gw-duration input { flex: 1; min-width: 0; }

.gw-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gsv2-text-muted);
}

/* Die Fehlermeldung des Servers steht ueber den Knoepfen, nicht als Toast:
   sie beantwortet, warum der Knopf gleich wieder nichts tun wuerde. */
.gw-status:empty { display: none; }
.gw-status {
    font-size: 0.85rem;
    color: var(--gsv2-danger);
    margin-top: 0.25rem;
}