/* ==========================================================================
   start.css — Startseite fuer Ausgeloggte (login.php / login.twig)

   Wird nur auf dieser einen Seite geladen (feature_css). Token-only, keine
   Dark-Regeln noetig: die Tokens aus eus.css schalten selbst um.

   Ausnahme sind die rgba(255,255,255,…) im Hero-Band. Das ist kein Verstoss
   gegen die Token-Regel, sondern ihr Zweck: das Band traegt IMMER die dunkle
   Markenflaeche, in beiden Themes. Eine Aufhellung darauf ist deshalb
   themeunabhaengig und braucht keinen umschaltenden Token.
   ========================================================================== */

.start-hero {
    background: linear-gradient(135deg,
                var(--primary-solid) 0%,
                color-mix(in srgb, var(--primary-solid) 70%, #000) 100%);
    color: var(--text-white);
    /* Rundum, nicht nur unten: der Block sitzt nicht buendig unter der
       Navigation, sondern mit dem Abstand des Inhaltsbereichs darunter. Mit
       eckiger Oberkante sah er abgeschnitten aus. */
    border-radius: 18px;
    padding: 2.5rem 1.5rem 3rem;
    margin-bottom: 1.5rem;
}

.start-hero h1 {
    font-weight: 700;
    /* Waechst mit dem Fenster. Die Obergrenze ist bewusst niedrig: die
       Begruessung ist ein langer Satz, und mit 2.4rem stand sie in der
       Textspalte dreizeilig und erschlug alles daneben. */
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    margin-bottom: 0.5rem;
}

.start-claim {
    color: rgba(255, 255, 255, 0.85);
    /* Zeilenlaenge begrenzen: ueber ~50 Zeichen findet das Auge den
       Zeilenanfang schlechter wieder. */
    max-width: 60ch;
    margin-bottom: 1.5rem;
}

/* ----- Merkmale im Hero ----- */
.start-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
}

.start-merkmal .bi {
    font-size: 1.4rem;
    /* Orange als Leuchtfarbe auf der blauen Flaeche - dieselbe Rolle wie beim
       Maskottchen. Sie traegt hier keine Schrift, die Kontrastregel fuer
       Textflaechen greift also nicht. */
    color: var(--accent-orange);
    display: block;
    margin-bottom: 0.35rem;
}

.start-merkmal h6 {
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.start-merkmal p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ----- Zahlenkacheln im Hero ----- */
.start-zahl {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    text-align: center;
    height: 100%;
}

.start-zahl .wert {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.start-zahl .titel {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
}

/* ----- Maskottchen im Hero ----- */
.start-held {
    /* Schmuck, kein Inhalt. Unter md faellt es weg (Klasse im Template), damit
       auf dem Telefon nicht erst ein halber Bildschirm Bild kommt, bevor der
       erste Satz anfaengt. */
    max-height: 180px;
    max-width: 100%;
    width: auto;
    filter: drop-shadow(0 0 24px rgba(255, 165, 0, 0.5));
}

/* ----- Karussell freier Vereine ----- */
.start-karussell {
    background: var(--gray-100);
    border-radius: 12px;
    /* Platz fuer die Pfeile links und rechts und fuer die Punkte unten - sonst
       liegen sie auf dem Vereinsnamen. */
    padding: 0.75rem 2.75rem 2rem;
}

.start-verein {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* Alle Folien gleich hoch: sonst springt die Kartenhoehe bei jedem
       Wechsel, und die Knoepfe darunter wandern mit. */
    min-height: 64px;
}

/* Schmal bricht die Zeile mit Marktwert und Alter je nach Laenge der Zahl um.
   Ohne hoeheren Boden waere der Sprung zwischen zwei Folien sichtbar. */
@media (max-width: 575.98px) {
    .start-verein {
        min-height: 96px;
    }
}

.start-verein-wappen {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

.start-verein-wappen-ersatz {
    font-size: 2rem;
    color: var(--gray-400);
    flex: 0 0 auto;
    width: 48px;
    text-align: center;
}

.start-verein-text {
    min-width: 0;
}

.start-verein-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.start-verein-name {
    font-weight: 700;
}

/* Bootstraps Pfeile sind weisse Hintergrundbilder, gedacht fuer Fotos. Auf der
   hellen Karte waeren sie unsichtbar - deshalb Bootstrap-Icons in Textfarbe. */
.start-karussell .carousel-control-prev,
.start-karussell .carousel-control-next {
    width: 2.5rem;
    opacity: 1;
    color: var(--text-secondary);
    /* Bootstrap legt im Dunkelmodus filter: invert(1) grayscale(1) auf die
       Bedienelemente - richtig fuer seine weissen Hintergrundbilder, falsch
       fuer Schrift-Icons in Textfarbe: die wurden dadurch dunkel auf dunklem
       Grund. Der uicheck faellt darauf nicht an, weil die Pfeile keinen Text
       tragen und nur Text gemessen wird. */
    filter: none;
}

.start-karussell .carousel-control-prev:hover,
.start-karussell .carousel-control-next:hover {
    color: var(--primary);
}

.start-karussell .carousel-control-prev .bi,
.start-karussell .carousel-control-next .bi {
    font-size: 1.5rem;
}

/* Die Punkte liegen sonst als weisse Striche auf hellem Grund. */
.start-karussell .carousel-indicators {
    margin-bottom: 0.25rem;
}

.start-karussell .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: var(--gray-400);
    opacity: 1;
}

.start-karussell .carousel-indicators .active {
    background-color: var(--primary);
}

/* ----- Leitfaden: nummerierte Schritte ----- */
.start-leitfaden {
    /* Eine echte <ol>: die Reihenfolge ist die Aussage, und ein Screenreader
       sagt dann "1 von 4". Die Bootstrap-Spalten kommen an die <li>, deshalb
       muessen nur Punkte und Einzug weg. */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    counter-reset: leitfaden;
}

.start-leitfaden > li {
    counter-increment: leitfaden;
}

.start-leitfaden > li::before {
    content: counter(leitfaden);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    /* --primary-solid ist die einzige Blauflaeche, auf der Weiss traegt
       (4.95 hell / 8.22 dunkel) - --primary kaeme auf 2.92 im Dunkelmodus. */
    background: var(--primary-solid);
    color: var(--text-white);
    font-weight: 700;
    font-size: 0.95rem;
}