/* ==========================================================================
   FONTS & ROOT VARIABLES
   ========================================================================== */
@font-face {
  font-family: 'flehradt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Flehradt Regular'), local('flehradt'), url('fonts/flehradt-400.woff2') format('woff2');
}

:root {
  /* Sitebar-Breite zentral definiert. main, .banner, .menu_card etc.
     beziehen sich alle auf diese Variable, damit der Abstand zum
     linken Rand immer zur tatsächlichen Sitebar-Breite passt. */
  --sitebar-width: min(90px, 6vw);
  --card-bg: #4F0307;
  --menu-bg: #101010;
}

/* ==========================================================================
   BASE / LAYOUT
   ========================================================================== */
body {
    background: #101010;
    margin: 0;
    padding: 0;
    font-family: 'flehradt';
    user-select: none;
}

main {
    position: absolute;
    top: 0;
    left: var(--sitebar-width);
    height: auto;
    width: calc(100% - var(--sitebar-width));
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.banner {
    text-align: center;
    pointer-events: none;
    width: 100%;
    position: absolute;
    left: 0;
    overflow: hidden;
}

/* #banner ist das <img>, das tab.js per fadeBanner() ein-/ausblendet.
   Die opacity-transition muss hier sitzen (nicht auf .banner), weil
   das Skript direkt banner.style.opacity setzt. */
#banner {
    min-width: 100%;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    transition: opacity 0.25s ease;
}

/* ==========================================================================
   SITEBAR
   ========================================================================== */
#sitebar {
    z-index: 20;
    background: #f14235;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    width: var(--sitebar-width);
    height: 100%;
    padding-top: 30px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 1px 0 104px #0003;
}

.sitebar_item {
    margin-top: 75px;
    width: 90px;
    cursor: pointer;
}

.fa-bars {
    font-size: 30px;
}

#me1 {
    margin-top: 5px;
    width: var(--sitebar-width);
}

.deg270 {
    rotate: 270deg;
    pointer-events: none;
}

/* ==========================================================================
   TAB-WECHSEL (opacity-basiert statt display)
   ========================================================================== */
.card, #menu {
    position: absolute;
    top: 0;
    left: var(--sitebar-width);
    width: calc(100% - var(--sitebar-width));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.card.active, #menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   CARD-OVERSCHRIFT (gemeinsam für alle Tabs)
   ========================================================================== */
.card h1 {
    position: absolute;
    top: 1%;
    left: var(--sitebar-width);
    font-size: 150px;
    margin: 100px;
    margin-bottom: 110px;
    width: calc(100% - var(--sitebar-width));
    color: #fff;
}

/* ==========================================================================
   MENU (Startbildschirm)
   ========================================================================== */
#menu {
    display: flex;
    height: 100vh;
    width: calc(100% - var(--sitebar-width));
}

.menu_card {
    position: relative;
    height: 250px;
    width: 125px;
    background: #fff;
    text-align: center;
    margin-left: 50px;
    transition: transform 0.5s ease;
}

.type1_menu_card {
    transform: translateY(65%);
}

.type2_menu_card {
    transform: translateY(75%);
}

.menu_card h3 {
    margin-top: 160px;
    /* Auf Touch gibt es keinen Hover-Zustand, der Text muss also von
       Anfang an sichtbar sein. Auf Maus-Geräten wird das unten (im
       hover-fähigen Media Query) wieder auf "erst bei Hover" umgestellt. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    cursor: pointer;
    color: #fff;
    text-shadow: 2px 1px #515151;
}

#menu_about,
#menu_socials,
#menu_noise_education,
#menu_events,
#menu_projects {
    /* Gleicher Gedanke wie bei .menu_card h3: ohne Hover-Fähigkeit soll
       das Bild von Anfang an klar zu sehen sein statt gedimmt/entsättigt
       hinter einem Filter zu liegen, den niemand "weghovern" kann. */
    filter: none;
    transition: 0.5s;
}

#menu_about {
    background-image: url('images/menu_about.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#menu_socials {
    background-image: url('images/menu_socials.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#menu_noise_education {
    background-image: url('images/menu_noise_education.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#menu_events {
    background-image: url('images/menu_events.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#menu_projects {
    background-image: url('images/menu_projects.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ==========================================================================
   HOVER-EFFEKTE NUR FÜR GERÄTE MIT ECHTER MAUS
   ========================================================================== */
/* (hover: hover) and (pointer: fine) trifft auf Geräte zu, die tatsächlich
   einen Mauszeiger haben (Desktop/Laptop mit Maus oder Trackpad). Handys
   und Tablets (pointer: coarse, kein echtes hover) bekommen diese Effekte
   nicht, damit nichts "stuck" hängen bleibt oder unsichtbar wird, nur weil
   ein Hover-Zustand technisch nie verlassen werden kann. */
@media (hover: hover) and (pointer: fine) {
    .type1_menu_card:hover {
        transform: translateY(45%);
    }

    .type2_menu_card:hover {
        transform: translateY(48%);
    }

    .menu_card h3 {
        opacity: 0;
        transform: translateY(15px);
    }

    .menu_card:hover h3 {
        opacity: 1;
        transform: translateY(0);
    }

    #menu_about,
    #menu_socials,
    #menu_noise_education,
    #menu_events,
    #menu_projects {
        filter: brightness(60%) grayscale(50%);
    }
    #menu_about:hover,
    #menu_socials:hover,
    #menu_noise_education:hover,
    #menu_events:hover,
    #menu_projects:hover {
        filter: none;
    }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
#about p {
    text-align: justify;
    margin-left: 200px;
    margin-top: 100px;
    margin-bottom: 50px;
    width: 60%;
    font-size: 25px;
}

/* ==========================================================================
   SOCIALS
   ========================================================================== */
#socials.card,
#noise_education.card,
#events.card,
#projects.card,
#about.card {
  display: flex;
  flex-direction: column;
  padding-top: 28%;
}
#noise_education h3, p {
    margin-left: 50px;
}
.link .image {
  margin-right: 10px;
  transition: 0.5s;
  width: 25px;
  font-size: 25px;
}

.link {
  color: #fff;
  text-decoration: none;
  margin-bottom: 5px;
  font-size: 25px;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.1);
  padding: 2px;
  border-radius: 5px;
  justify-content: space-between;
  display: flex;
  max-width: 90%;
  align-items: center;
  margin-left: 50px;
}

.link i {
  font-size: 25px;
  position: relative;
  right: 0;
  transition: 0.5s;
}

/* Schriftgröße bei Hover wachsen lassen ist ein reiner Maus-Effekt -
   auf Touch bliebe das nach einem Tap optisch "stecken", bis woanders
   getippt wird. Daher hier raus und unten in den Maus-Media-Query. */
@media (hover: hover) and (pointer: fine) {
    .link:hover {
        font-size: 30px;
    }
    .link:hover .image {
        width: 30px;
    }
    .link:hover .fa-solid {
        font-size: 30px;
    }
}

/* ==========================================================================
   NOISE EDUCATION
   ========================================================================== */
.card h3, .card p {
    margin-right: 50px;
    color: #fff;
    font-size: 20px;
}

hr {
    margin-top: 50px;
    margin-bottom: 50px;
}

.noise_education_image {
    width: 70%;
    margin-bottom: 50px;
    margin-left: 200px;
}

#noise_education h1 {
    margin-left: 0;
}

.band {
    display: flex;
    width: 60%;
    justify-content: space-between;
    margin-left: 100px;
    background: linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125));
    padding: 15px;
    border-radius: 10px;
}

.band_part {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   EVENTS
   ========================================================================== */
#events h3 {
    margin-left: 100px;
    margin-top: 100px;
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
#projects p a {
    color: #fff;
    font-size: 18px;
    transition: 0.5s;
}

#projects p {
    font-size: 18px;
    transition: 0.5s;
}

#projects img {
    transition: 0.5s;
}

.project_head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#project_div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0 50px 50px 50px;
}

.project {
    text-align: left;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.5s, box-shadow 0.5s, background-color 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#bot_invite {
    background-color: #7289da;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    transition: 0.5s;
}

@media (hover: hover) and (pointer: fine) {
    .project:hover {
        transform: scale(1.03);
        background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
    .project:hover p {
        font-size: 21px;
    }
    .project:hover a {
        font-size: 21px;
    }
    .project:hover img {
        transform: scale(1.06);
    }

    #bot_invite:hover {
        padding: 8px;
        font-size: 24px;
    }
}

@media (max-width: 899px) {
    /* --sitebar-width wird hier zur NAV-HÖHE (statt Breite), weil die
       Sitebar auf Handys oben liegt statt links. Der Name bleibt aus
       Kompatibilität mit den anderen Breakpoints, der Wert ist aber
       jetzt eine Höhe und wird unten entsprechend verwendet. */
    :root {
        --sitebar-width: 56px;
    }

    /* ---- Sitebar: von links auf oben, von Spalte auf Reihe ---- */
    #sitebar {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        width: 100%;
        height: var(--sitebar-width);
        padding: 0 12px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
    }
    .sitebar_item, #me1 {
        width: 32px;
        margin-top: 0;
    }
    .fa-bars {
        font-size: 20px;
    }
    /* "Fabian"-Schriftzug stand auf der vertikalen Bar quer (270deg).
       Auf der horizontalen Bar liest sich das nur noch normal. */
    .deg270 {
        rotate: 0deg;
        font-size: 18px;
        margin: 0;
    }

    /* ---- Grundlayout: Offset per margin-top statt left ----
       main/.card/#menu sind hier position: static, daher wirkt "left"
       nicht mehr als Versatz zur fixed Sitebar - das war der Bug, durch
       den der Inhalt unter/in der Nav lag. margin-top schiebt den
       Content stattdessen sauber unter die jetzt horizontale Bar. */
    main {
        position: static;
        left: 0;
        width: 100%;
        height: auto;
        min-height: calc(100vh - var(--sitebar-width));
        margin-top: var(--sitebar-width);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* ---- Tabs: nur die aktive Card wird angezeigt ----
       display:none entfernt inaktive Cards komplett aus dem Layout,
       statt sie nur unsichtbar zu machen - das verhinderte vorher,
       dass mehrere Inhalte gleichzeitig sichtbar/übereinander lagen. */
    .card, #menu {
        position: static;
        opacity: 1;
        left: 0;
        visibility: visible;
        pointer-events: auto;
        display: none;
        width: 100%;
    }
    .card.active {
        display: block;
    }

    .banner {
        position: static;
        width: 100%;
    }
    #banner {
        width: 100%;
        max-height: 35vh;
        object-fit: cover;
    }
    .card h1 {
        position: static;
        font-size: 42px;
        margin: 25px 20px 20px 20px;
        width: auto;
    }
    #menu {
        display: none;
        flex-direction: column;
        height: auto;
        width: 100%;
        left: 0;
        padding: 20px;
        gap: 15px;
        box-sizing: border-box;
    }
    #menu.active {
        display: flex;
    }
    .menu_card {
        width: 100%;
        height: 70px;
        margin-left: 0;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .type1_menu_card, .type2_menu_card {
        transform: none;
    }
    .type1_menu_card:hover, .type2_menu_card:hover {
        transform: none;
    }
    .menu_card h3 {
        margin-top: 0;
        opacity: 1;
        transform: none;
        font-size: 22px;
    }
    /* WICHTIG: #id.card hat höhere Spezifität (ID+Klasse) als .card.active
       (zwei Klassen). Die Desktop-Regel (Zeile ~262) setzt hier
       display:flex fest, das sonst IMMER gewinnt - auch ohne .active.
       Genau das war der Grund, warum auf dem Handy alle Cards gleichzeitig
       sichtbar waren. Deshalb hier display explizit pro Zustand erneut
       mit gleicher Spezifität setzen. */
    #socials.card,
    #noise_education.card,
    #events.card,
    #projects.card,
    #about.card {
        display: none;
        padding-top: 0;
        left: 0;
    }
    #socials.card.active,
    #noise_education.card.active,
    #events.card.active,
    #projects.card.active,
    #about.card.active {
        display: block;
    }
    #about p {
        margin: 20px;
        width: auto;
        font-size: 20px;
        line-height: 1.5;
        box-sizing: border-box;
    }
    .link {
        margin-left: 20px;
        font-size: 20px;
        max-width: calc(100% - 40px);
    }
    .card h3, .card p {
        margin: 0 20px;
        font-size: 18px;
        line-height: 1.5;
        box-sizing: border-box;
    }
    .noise_education_image {
        width: 90%;
        margin: 0 auto 30px auto;
        display: block;
    }
    .band {
        flex-direction: column;
        width: auto;
        margin: 0 20px 20px 20px;
        gap: 10px;
        box-sizing: border-box;
    }
    #noise_education h1 {
        margin-left: 20px;
    }
    #events h3 {
        margin: 25px 20px;
        font-size: 18px;
    }
    #project_div {
        grid-template-columns: 1fr;
        margin: 0 20px 30px 20px;
        gap: 20px;
        box-sizing: border-box;
    }
    #projects p, #projects p a {
        font-size: 18px;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .card h1 {
        font-size: 110px;
    }
    #about p {
        margin-left: 120px;
        width: 65%;
    }
    .noise_education_image {
        margin-left: 120px;
    }
    .band {
        margin-left: 70px;
    }
}

@media (min-width: 1920px) {
    :root {
        --sitebar-width: 110px;
    }
    .sitebar_item, #me1 {
        width: 100px;
    }
    .card h1 {
        font-size: 190px;
    }
    #about p {
        font-size: 30px;
        width: 55%;
    }
    .noise_education_image {
        width: 60%;
    }
    .band {
        width: 50%;
    }
    #project_div {
        grid-template-columns: repeat(3, 1fr);
    }
}