/* Schriftarten einbinden */
@import url('https://fonts.cdnfonts.com/css/lovelo');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');

:root {
    --neon-pink: #f752e0;
    --neon-blue: #3dd8f5;
    --anthrazit-bg: #222222; /* Klares, dunkles Anthrazit */
    --black-header: #141414; /* Etwas dunkleres Anthrazit für Header/Footer zum Absetzen */
}

/* Grundlegendes Layout-Verhalten */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--anthrazit-bg);
    color: var(--neon-blue); /* Normaler Text standardmäßig im Blau */
    font-family: 'Quicksand', sans-serif;
    font-weight: 500; /* Halbfett für normalen Text */
    margin: 0;
}

/* Hauptinhalt füllt den Raum zwischen Header und Footer */
main {
    flex: 1;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Header & Brand-Bereich */
header {
    background-color: var(--black-header);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #2d2d2d;
}

.brand {
    margin-bottom: 15px;
}

/* Der Bar-Name */
.bar-title {
    font-family: 'Lovelo', sans-serif; /* Nutzen die Lovelo Line ohne Bold-Effekt */
    font-weight: 400; /* Immer normal, nicht fett */
    color: var(--neon-pink);
    text-shadow: 0 0 10px rgba(247, 82, 224, 0.4); /* Subtiler Neon-Effekt */
    font-size: 3.5rem;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 3px;
}

/* Der Claim */
.bar-claim {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700; /* Fett im Claim */
    color: var(--neon-blue);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 5px 0 0 0;
}

/* Navigation */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.main-nav a {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--neon-blue);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    padding: 5px 10px;
}

.main-nav a:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 8px rgba(247, 82, 224, 0.6);
}

/* Footer */
footer {
    background-color: var(--black-header);
    padding: 20px;
    text-align: center;
    border-top: 2px solid #2d2d2d;
    font-size: 0.9rem;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: var(--neon-blue);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--neon-pink);
}