/* ==========================================================================
   Future Rock – Theme
   Aufbau: Bootstrap 5.3 (/css/bootstrap.min.css) + diese Datei.
   Alle Farben/Abstände sind CSS-Variablen -> zentral hier anpassen.
   ========================================================================== */

:root {
    /* Markenfarben (Gold stammt aus der alten Site: #977132) */
    --fr-gold: #c99a44;
    --fr-gold-dark: #977132;
    --fr-gold-light: #e8c583;

    --fr-bg: #0d0c0b;
    --fr-bg-elevated: #171512;
    --fr-bg-soft: #1f1c18;
    --fr-border: #2e2822;

    --fr-text: #ece7df;
    --fr-text-muted: #a49c90;

    --fr-radius: 6px;
    --fr-nav-height: 72px;

    /* Bootstrap-Variablen überschreiben, damit Komponenten mitziehen */
    --bs-body-bg: var(--fr-bg);
    --bs-body-color: var(--fr-text);
    --bs-link-color: var(--fr-gold);
    --bs-link-hover-color: var(--fr-gold-light);
    --bs-border-color: var(--fr-border);
    --bs-emphasis-color: var(--fr-text);
}

/* --------------------------------------------------------------- Basis -- */

body {
    background-color: var(--fr-bg);
    color: var(--fr-text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.fr-display {
    font-weight: 700;
    letter-spacing: 0.02em;
}

a {
    color: var(--fr-gold);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover,
a:focus-visible {
    color: var(--fr-gold-light);
}

:focus-visible {
    outline: 2px solid var(--fr-gold);
    outline-offset: 3px;
}

/* Sprungmarke für Tastatur-/Screenreader-Nutzer */
.fr-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--fr-gold);
    color: #000;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
}

.fr-skip-link:focus {
    left: 0;
}

/* ------------------------------------------------------------ Elemente -- */

.fr-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: var(--fr-text-muted);
}

.fr-rule {
    width: 56px;
    height: 3px;
    background: var(--fr-gold);
    border: 0;
    opacity: 1;
    margin: 1.25rem 0 2rem;
}

.fr-rule--center {
    margin-left: auto;
    margin-right: auto;
}

.fr-section {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

/* Der erste Inhaltsblock direkt unter dem Hero braucht oben nur den halben
   Abstand -- der Hero bringt mit seiner Innenkante schon Luft mit. */
.fr-hero + .fr-section {
    padding-top: clamp(1.5rem, 3.5vw, 2.75rem);
}

.fr-section--alt {
    background: var(--fr-bg-elevated);
    border-top: 1px solid var(--fr-border);
    border-bottom: 1px solid var(--fr-border);
}

.fr-prose p {
    color: var(--fr-text-muted);
    line-height: 1.85;
    font-size: 1.02rem;
}

.fr-prose p + p {
    margin-top: 1.35rem;
}

.fr-prose strong {
    color: var(--fr-text);
}

/* ---------------------------------------------------------- Navigation -- */

.fr-navbar {
    background: rgba(13, 12, 11, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fr-border);
    min-height: var(--fr-nav-height);
}

.fr-navbar .nav-link {
    color: var(--fr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.6rem 0.95rem;
}

.fr-navbar .nav-link:hover,
.fr-navbar .nav-link:focus {
    color: var(--fr-gold-light);
}

.fr-navbar .nav-link.active {
    color: var(--fr-gold);
}

.fr-navbar .navbar-toggler {
    border-color: var(--fr-border);
    padding: 0.35rem 0.6rem;
}

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

/* ------------------------------------------------------- Sprachumschalter */

.fr-lang {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 1.1rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--fr-border);
}

.fr-lang .nav-link {
    padding: 0.6rem 0.4rem;
    font-size: 0.72rem;
}

/* Die aktuelle Sprache wird als Text ohne Link dargestellt. */
.fr-lang__aktiv {
    padding: 0.6rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-gold);
}

.fr-lang__trenner {
    color: var(--fr-border);
    font-size: 0.72rem;
}

/* Der Umschalter steht im Markup ausserhalb von #hauptnavigation, sonst waere
   er auf Telefonen hinter dem Hamburger-Symbol verborgen. Dadurch steht er in
   der Quelltext-Reihenfolge vor dem Klappmenue -- auf breiten Schirmen holt
   ihn `order` zurueck an seinen Platz rechts neben die Navigation. */
@media (min-width: 992px) {
    .fr-navbar .container {
        justify-content: center;
    }

    .fr-navbar .navbar-collapse {
        /* Bootstrap setzt flex-grow: 1; das wuerde den Umschalter an den
           rechten Rand druecken statt ihn mittig an die Links zu haengen. */
        flex-grow: 0;
        order: 1;
    }

    .fr-lang {
        order: 2;
    }
}

/* Schmale Schirme: Umschalter links, Hamburger rechts, beide immer sichtbar. */
@media (max-width: 991.98px) {
    .fr-navbar .container {
        justify-content: space-between;
    }

    .fr-lang {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* --------------------------------------------------------------- Hero -- */

.fr-hero {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
    text-align: center;
    overflow: hidden;
    /* Gleiches Dunkelgrau wie .fr-section--alt */
    background: var(--fr-bg-elevated);
    border-bottom: 1px solid var(--fr-border);
}

/* Optionales Hintergrundbild. Wird nur wirksam, wenn im Hero ein
   <div class="fr-hero__bg" style="background-image: url('pics/…jpg');"></div>
   als erstes Kind eingefuegt wird. Der url()-Pfad steht bewusst im HTML,
   damit er relativ zur Seite und nicht zu dieser CSS-Datei aufgeloest wird. */
.fr-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: saturate(0.7);
    z-index: 0;
}

/* Abdunkelnder Verlauf ueber dem Bild, damit die weisse Wortmarke lesbar
   bleibt. Faerbt zum Grundton des Hero hin aus. */
.fr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(23, 21, 18, 0.55) 0%,
        rgba(23, 21, 18, 0.75) 60%,
        rgba(23, 21, 18, 0.9) 100%);
    z-index: 0;
}

/* Nur den Inhalt anheben -- NICHT alle Kinder, sonst wuerde das
   absolut positionierte .fr-hero__bg mit position:relative ueberschrieben. */
.fr-hero > .container {
    position: relative;
    z-index: 1;
}

.fr-hero__logo {
    width: min(610px, 88vw);
    height: auto;
    /* Die Wortmarke liegt als schwarze PNG-Grafik vor. brightness(0) invert(1)
       faerbt sie unabhaengig von den Quellfarben rein weiss (Transparenz bleibt
       erhalten). Bei einer bereits hellen Logo-Datei entfernen. */
    filter: brightness(0) invert(1);
}

.fr-hero__claim {
    color: var(--fr-gold);
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 600;
    margin-top: 1.75rem;
}

/* Kleiner Hero für Unterseiten */
.fr-hero--page {
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1rem, 2vw, 1.5rem);
}

.fr-hero--page .fr-hero__logo {
    width: min(380px, 70vw);
}

/* ------------------------------------------------------------- Presenter */

.fr-presenter {
    padding: 0 0 2rem;
    text-align: center;
}

.fr-presenter img {
    height: 54px;
    width: auto;
    opacity: 0.65;
    /* Quelldatei ist ein schwarz-weisser Verlauf -> auf dem dunklen Grund
       flach weiss einfaerben, damit sie ueberhaupt lesbar ist. */
    filter: brightness(0) invert(1);
    transition: opacity 0.15s ease-in-out;
}

.fr-presenter a:hover img {
    opacity: 1;
}

.fr-presenter span {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fr-text-muted);
}

/* ------------------------------------------------------------- Releases */

.fr-release {
    display: block;
    position: relative;
    background: var(--fr-bg-elevated);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s ease-out, border-color 0.2s ease-out;
}

.fr-release:hover,
.fr-release:focus-visible {
    transform: translateY(-4px);
    border-color: var(--fr-gold-dark);
}

/* Release mit "flag" (z. B. "Out now") wird hervorgehoben. */
.fr-release--flagged {
    border-color: var(--fr-gold-dark);
    box-shadow: 0 0 0 1px rgba(201, 154, 68, 0.25);
}

.fr-release__cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--fr-bg-soft);
}

.fr-release__body {
    display: block;
    padding: 1rem 1.15rem 1.25rem;
}

.fr-release__title {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--fr-text);
    margin: 0;
    line-height: 1.35;
}

.fr-release__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--fr-text-muted);
    margin: 0.35rem 0 0;
}

.fr-release__formats {
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fr-badge {
    display: inline-block;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--fr-border);
    border-radius: 999px;
    color: var(--fr-text-muted);
}

.fr-badge--highlight {
    border-color: var(--fr-gold-dark);
    color: var(--fr-gold);
}

.fr-release__flag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--fr-gold);
    color: #0d0c0b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
}

/* --------------------------------------------------------------- Listen */

.fr-taglist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fr-taglist li {
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    padding: 0.45rem 0.85rem;
    font-size: 0.88rem;
    color: var(--fr-text);
    background: var(--fr-bg-elevated);
}

/* Chips mit Link (z. B. Spotify-Profile): ganze Chip-Fläche klickbar */
.fr-taglist li:has(a) {
    padding: 0;
}

.fr-taglist li a {
    display: block;
    padding: 0.45rem 0.85rem;
    color: inherit;
}

.fr-taglist li:has(a):hover,
.fr-taglist li:has(a):focus-within {
    border-color: var(--fr-gold);
}

.fr-taglist li a:hover,
.fr-taglist li a:focus-visible {
    color: var(--fr-gold);
}

/* -------------------------------------------------------------- Timeline */

.fr-card {
    background: var(--fr-bg-elevated);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* ------------------------------------------------------------ Buttons -- */

.btn-fr {
    background: var(--fr-gold);
    border: 1px solid var(--fr-gold);
    color: #0d0c0b;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.7rem 1.6rem;
    border-radius: var(--fr-radius);
}

.btn-fr:hover,
.btn-fr:focus {
    background: var(--fr-gold-light);
    border-color: var(--fr-gold-light);
    color: #0d0c0b;
}

.btn-fr-outline {
    background: transparent;
    border: 1px solid var(--fr-gold-dark);
    color: var(--fr-gold);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.7rem 1.6rem;
    border-radius: var(--fr-radius);
}

.btn-fr-outline:hover,
.btn-fr-outline:focus {
    background: var(--fr-gold);
    border-color: var(--fr-gold);
    color: #0d0c0b;
}

/* ------------------------------------------------------- Kontaktformular */

.fr-form .form-label {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fr-text-muted);
    margin-bottom: 0.45rem;
}

.fr-form .form-control {
    background: var(--fr-bg-elevated);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    color: var(--fr-text);
    padding: 0.7rem 0.9rem;
    font-size: 0.98rem;
}

.fr-form .form-control::placeholder {
    color: #6b6459;
}

.fr-form .form-control:focus {
    background: var(--fr-bg-elevated);
    border-color: var(--fr-gold-dark);
    color: var(--fr-text);
    box-shadow: 0 0 0 3px rgba(201, 154, 68, 0.18);
}

/* Bootstrap faerbt ungueltige Felder rot -- hier nur der Rahmen, ohne Icon */
.fr-form .form-control.is-invalid,
.fr-form .form-check-input.is-invalid {
    border-color: #b5453f;
    background-image: none;
}

.fr-form textarea.form-control {
    min-height: 10rem;
    resize: vertical;
}

.fr-form .form-check-input {
    background-color: var(--fr-bg-elevated);
    border-color: var(--fr-border);
    margin-top: 0.25rem;
}

.fr-form .form-check-input:checked {
    background-color: var(--fr-gold);
    border-color: var(--fr-gold);
}

.fr-form .form-check-input:focus {
    border-color: var(--fr-gold-dark);
    box-shadow: 0 0 0 3px rgba(201, 154, 68, 0.18);
}

.fr-form .form-check-label {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--fr-text-muted);
}

/* Feldbezogene Fehlermeldung */
.fr-feedback {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #e08a84;
}

/* Meldung ueber dem Formular */
.fr-alert {
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.75rem;
    font-size: 0.92rem;
}

.fr-alert--fehler {
    border-color: #7d302c;
    background: rgba(125, 48, 44, 0.18);
    color: #eba9a4;
}

/* Honeypot: fuer Menschen unsichtbar, aber nicht display:none --
   manche Bots ignorieren ausgeblendete Felder. */
.fr-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------------------------------------------- Footer -- */

.fr-footer {
    background: #0a0908;
    border-top: 1px solid var(--fr-border);
    padding: 3rem 0 2rem;
    margin-top: auto;
}

.fr-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.fr-social a {
    text-align: center;
    display: block;
}

.fr-social img {
    height: 32px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.15s ease-in-out;
}

.fr-social a:hover img {
    opacity: 1;
}

.fr-social span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--fr-text-muted);
    max-width: 12rem;
}

.fr-footer__meta {
    text-align: center;
    font-size: 0.78rem;
    color: var(--fr-text-muted);
    border-top: 1px solid var(--fr-border);
    padding-top: 1.5rem;
}

.fr-footer__meta a {
    color: var(--fr-text-muted);
}

.fr-footer__meta a:hover {
    color: var(--fr-gold);
}

/* ------------------------------------------------------------- Impressum */

.fr-legal h2 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
    color: var(--fr-gold);
}

.fr-legal h2:first-child {
    margin-top: 0;
}

.fr-legal p {
    color: var(--fr-text-muted);
    line-height: 1.8;
    font-size: 0.94rem;
}

/* Anschrift und E-Mail liegen als Grafik vor (Schutz vor Adress-Sammlern).
   Beide PNGs haben dunkle Schrift auf transparentem Grund; die Transparenz
   bleibt erhalten, die Grafik steht also ohne Kasten auf dem Seitengrund.
   brightness(0) legt alle Glyphen auf Schwarz, invert(0.58) hebt sie auf ein
   mittleres Grau und sepia(0.33) waermt dieses Grau ein -- zusammen ergibt
   das ~#a49c90, also exakt --fr-text-muted, die Farbe der Absaetze daneben.
   Wird --fr-text-muted geaendert, muss invert() mitwandern.

   Die PNGs sind in 2x-Aufloesung mit derselben Schrift, Groesse und Laufweite
   gesetzt wie .fr-legal p (Helvetica Neue 15.04px / 27.072px Zeilenabstand).
   Die halbe Anzeigegroesse steht als width/height am img-Tag -- das haelt das
   Layout beim Laden stabil und ueberlebt Cache-Buster in der URL, anders als
   ein Selektor auf den Dateinamen. Wer die Texte aendert, rendert beide
   Dateien neu, statt in der Grafik zu retuschieren. */
.fr-legal img {
    max-width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) invert(0.58) sepia(0.33);
}

/* --------------------------------------------------- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}