@charset "UTF-8";
/* Farbschema + Kopf-/Fußzeilen-Optik für Design "hero" (großformatiges Foto hinter
   Logo/Titel/Navigation - für die Band-Seite gedacht, siehe templates/hero/header.php).

   Farbwerte hier sind direkt von der echten Seite (takes2.de) abgelesen - per Code
   geprüft (CSS-Regeln + tatsächliche Pixelfarben des Logos), nicht nach Augenmaß: die
   Seite nutzt bewusst KEIN farbiges Markenschema, sondern reines Schwarz/Weiß/Grau (das
   Logo selbst ist zu 100% Graustufen). Bei Bedarf einfach die Hex-Werte unten anpassen,
   die Rollennamen (--fs-akzent, --fs-text, ...) bleiben dabei unverändert.

   AUSNAHME: reines Schwarz/Weiß mit Transparenz (rgba(0,0,0,...)/rgba(255,255,255,...))
   für generische Schatten/Glas-Effekte bleibt in style.css UND hier fest eingetragen -
   das ist keine Marken-/Designfarbe, sondern ein neutraler UI-Effekt.

   style.css bringt im eigenen :root sicherheitshalber die Werte von Design "standard"
   mit (falls eine theme.css mal fehlt/nicht passt) - diese Datei hier überschreibt sie
   für "hero" ganz normal, solange sie korrekt hochgeladen ist. */

:root {
    --fs-text: #1a1a1d;            /* Haupt-Fließtext (auf hellem Grund) */
    --fs-text-muted: #5a5d63;      /* sekundärer Fließtext (unverändert neutral) */
    --fs-hintergrund: #ffffff;     /* Seitenhintergrund - bleibt hell, wie bei den
                                       Textabschnitten auf takes2.de */
    --fs-hintergrund-hell: #eef1f6; /* sehr helle, leicht blaustichige Fläche für Karten/
                                       Formularfelder - bewusst NICHT das echte Grau von
                                       takes2.de, sondern beibehalten: hebt sich im Admin-
                                       Bereich angenehm von der grünen SKWalsrode-Installation
                                       ab, macht auf einen Blick klar, in welcher der beiden
                                       Installationen man gerade arbeitet */
    --fs-hell: #ffffff;            /* heller Kontrast-Ton für Text/Icons/Rahmen auf
                                       dunklem oder farbigem Grund */
    --fs-rahmen: #e5e5e5;          /* helle Rahmen-/Trennlinienfarbe (unverändert neutral) */

    --fs-akzent: #767676;          /* Haupt-Akzent: Hover/Fokus/Buttons/Editor-Werkzeuge -
                                       exakt die Navigations-/Hover-Grautöne der echten Seite */
    --fs-akzent-text: #222222;     /* Akzent für Überschriften/Links auf hellem Grund -
                                       exakt die Link-/Textfarbe der echten Seite */
    --fs-akzent-dunkel: #0a0a0c;   /* dunkelster Akzent-Ton: Verlauf-Ende, dunkle Flächen -
                                       passend zum fast schwarzen Logo der echten Seite */
    --fs-flaeche-akzent: #ccd7f4;  /* helle, blaustichige Fläche: Tabellen-Hervorhebung,
                                       Kopfbereich-Fallback (bevor das Foto lädt) - aus
                                       demselben Grund wie --fs-hintergrund-hell bewusst
                                       blaustichig statt echtem Grau beibehalten */
    --fs-warnung: #990000;         /* Warn-/Auffälligkeits-Akzent - unverändert, bewusst
                                       unabhängig vom übrigen Farbschema */
    --fs-link: #222222;            /* Standard-Linkfarbe im Fließtext - exakt die Linkfarbe
                                       der echten Seite (dort nur durch Unterstreichung von
                                       normalem Text unterschieden, keine Signalfarbe) */
    --fs-orange-echt: #e2790d;     /* Kontrast-Akzent für "Hier musst du was tun"-Stellen
                                       im Admin-/Bearbeiten-Bereich - unverändert, bewusst
                                       unabhängig vom Design-Farbschema */

    --fs-verlauf: linear-gradient(90deg, var(--fs-akzent-dunkel), var(--fs-akzent), var(--fs-akzent-text));

    /* --- Dieselben Farben nochmal als "R, G, B"-Tripel - siehe ausführlichen Kommentar
       dazu in templates/standard/theme.css. Bei einer Farbänderung oben IMMER auch das
       passende Tripel hier mit anpassen. */
    --fs-akzent-rgb: 118, 118, 118;
    --fs-akzent-text-rgb: 34, 34, 34;
    --fs-akzent-dunkel-rgb: 10, 10, 12;
    --fs-text-rgb: 26, 26, 29;
    --fs-orange-echt-rgb: 226, 121, 13;
}

/* ==========================================================================
   Kopfbereich: Vollbild-Foto, Logo/Titel/Navigation mittig übereinander
   ========================================================================== */

.fs-hero-kopf {
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--fs-akzent-dunkel);
    /* Vom jeweiligen Verein/der Band per FTP hochzuladen (gibt es standardmäßig nicht im
       Repo, da eigenes Bildmaterial) - ohne die Datei bleibt es bei der obigen
       Fallback-Farbe, nichts bricht. */
    background-image: url("/assets/img/hero-hintergrund.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem 1rem 1.5rem;
}

/* Abdunkelung fürs Foto, wie beim Design "standard" über die vorhandene
   "Kopfzeile-Deckkraft"-Einstellung steuerbar (siehe includes/header.php,
   --fs-navbar-deckkraft wird dort schon site-weit auf den body geschrieben). */
.fs-hero-kopf::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, calc(var(--fs-navbar-deckkraft) * 0.55));
    pointer-events: none;
}

.fs-hero-kopf-inhalt,
.fs-hero-kopf .fs-hero-nav {
    position: relative;
    z-index: 10;
}

.fs-hero-logo img {
    max-height: 140px;
    width: auto;
    border-radius: 50%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    margin-bottom: 1rem;
}

.fs-hero-titel {
    color: var(--fs-hell);
    font-size: 2.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

.fs-hero-untertitel {
    color: var(--fs-hell);
    font-size: 1.05rem;
    margin: 0.5rem 0 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.fs-hero-nav {
    margin-top: 2rem;
}

.fs-hero-nav .navbar-nav {
    gap: 1.5rem;
}

.fs-hero-nav .nav-link,
.fs-hero-nav .nav-link:visited {
    color: var(--fs-hell) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.fs-hero-nav .nav-link:hover {
    color: var(--fs-akzent) !important;
}

.fs-hero-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

.fs-hero-nav .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.fs-hero-nav .navbar-collapse.show,
.fs-hero-nav .navbar-collapse.collapsing {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Fußzeile: HELL statt dunkel - anders als beim Design "standard" (dessen .fs-footer in
   style.css von einem dunklen Grund ausgeht: heller Text, dunkle Eingabefelder usw.).
   takes2.de hat eine helle Fußzeile (#f9f9f9), deshalb hier die komplette Umkehrung -
   jede Stelle in style.css, die "hell auf dunkel" annimmt, wird hier gezielt auf
   "dunkel auf hell" zurückgedreht. Auch der bunte Verlaufs-Rand (--fs-verlauf, käme
   sonst in Grautönen) wird durch eine schlichte, dezente Linie ersetzt - passt besser
   zum reduzierten Foto-Look dieses Designs.
   ========================================================================== */

.fs-footer {
    background-color: #f9f9f9;
    color: var(--fs-text);
    border-image: none;
    border-top: 1px solid var(--fs-rahmen);
}

.fs-footer a,
.fs-footer a:visited {
    color: var(--fs-akzent-text);
}

.fs-footer .form-label,
.fs-footer .form-check-label {
    color: var(--fs-text);
}

.fs-footer .form-control,
.fs-footer .form-select,
.fs-footer .form-control:focus,
.fs-footer .form-select:focus {
    background-color: var(--fs-hell);
    color: var(--fs-text);
    border-color: var(--fs-rahmen);
}

.fs-footer .form-control::placeholder {
    color: var(--fs-text-muted);
}

.fs-footer-oben h3 {
    color: var(--fs-text);
    border-bottom-color: var(--fs-rahmen);
}

.fs-footer-oben .fs-text-block br + a {
    border-top-color: var(--fs-rahmen);
}

.fs-footer-unten {
    border-top-color: var(--fs-rahmen);
}