/* ============================================================
   BIOS::Collective - gemeinsames Stylesheet (general.css)
   ------------------------------------------------------------
   Dieses Stylesheet wird von ALLEN Seiten eingebunden
   (index.html, next-event.html, about.html, flyer.html,
   paypal/index.html). Seiten-spezifische Styles liegen in
   eigenen Dateien (styleevent.css, style_about.css,
   style_flyer.css) und werden NACH general.css geladen.
   ============================================================ */

/* Retro-Font: wird von allen Seiten genutzt (frueher je Seite
   als Inline-@font-face im <style>-Block, seit Runde 5 zentral).
   ACHTUNG: Pfad relativ zu DIESER Datei (css/) -> ../fonts/ */
@font-face{
    font-family: "OLD_BIOS";
    src: url("../fonts/Ac437_DTK_BIOS.ttf");
}

html {
    display: table;
    margin: auto;
}

html, body {
    height: 80%;
    width: 95%;
}

body {
    background-color: rgb(0 1 179); /*old: grell: #3733E0*/
    color: white;
    font-family: OLD_BIOS;
    display: table-cell;
    vertical-align: middle;
}

h1 {
    text-align: left;
    /* font-size: 70px; */
    font-size: clamp(20px, 4vw, 48px);
    margin-right: 1vw;
    display: inline;
}
  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    h1 {
        font-size: clamp(22px, 6vw, 40px);
    }
  }

h1 a:hover{
    background-color: #0F5CBF; /*old: */
}

#bioslogo {
    display: inline;
    height: 6vw;
    width: 6vw;
    border-radius: 5vw;
    margin-top: 5vh;
    /*margin-left: 40vw; */
    
}
  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    #bioslogo {
        height: 12vw;
        width: 12vw;
        border-radius: 6vw;
    }
  }

#instagram{
    margin-left: 30vw;
    margin-top: 10vw;
    font-size: 3em; /* Sie können den Wert nach Belieben anpassen */
}

#icon{
    font-size: 3em;
}

#abouttxt{
    padding-left: 8vw;
    padding-right: 8vw;
}

#djimg {
    height: 8vw;
    width: 8vw;
    border-radius: 6vw;
}

  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    #djimg {
        height: 22vw;
        width: 22vw;
        border-radius: 11vw;
    }
  }

#biostext{
    border-color: white;
    border-style: double;
    font-size: clamp(14px, 2vw, 24px);
    border-width: 2vw;
    padding-bottom: 45vw;
    width: 95%;
    height: 40vh;
    box-sizing: border-box;
    /* Basis fuer die absolut positionierte rote DJ-Infokarte (Note 2209) */
    position: relative;
}

/* ============================================================
   Generische, wiederverwendbare Kasten-Klasse (Note 2214)
   Gleicher Stil wie die Hauptbox der Seite (weisser Doppelrand,
   Innenabstand, Box-Sizing) - einsetzbar auf allen Seiten.
   Runde 5 (Note 2223): Doppelrand so dick wie auf der HomePage
   (border-width: 2vw, identisch zu #biostext) - vorher
   clamp(6px, 1vw, 20px).
   ============================================================ */
.panel {
    border-color: white;
    border-style: double;
    border-width: 2vw;
    padding: clamp(12px, 2vw, 32px);
    box-sizing: border-box;
    margin-bottom: clamp(16px, 2.5vw, 40px);
}

.panel:last-child {
    margin-bottom: 0;
}

  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    #biostext {
        font-size: clamp(14px, 3.5vw, 20px);
        height: auto;
        padding-bottom: 8vw;
    }
  }

.flex-container{
    display: inline-block;
}

li{
    list-style-type: none;
    padding: 0.5vw;
}

a{
    color: white;
    text-decoration: none;
}

#status{
    /*border: solid black;*/
    padding: 3vw;
}

#names{
    /*border: solid black;*/
    padding: 3vw;
    margin-left: 4vw;
}

#bioshead {

}

.list{
     
}

#info{
    visibility: hidden;
    background: darkred;
}

a:hover{
    text-decoration: underline;
    background-color: darkred;
}

#about{
    border-color: white;
}
/*position relative as a base for non-static elements*/
#outerDiv{
    /*border: solid black;*/
    justify-content: center;
    height: 25vw;
}

/*every direct child positioned absolute*/
#outerDiv > div {
    position: absolute;
    /* Note 2209: roter Kasten zentriert (mehr in die Mitte),
       kein Ueberlappen mit der doppelten Umrundung mehr */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #E04942;
    visibility: hidden;
    width: 27vw;
    font-size: clamp(12px, 1.5vw, 18px);
    text-align: center;
    /*border: solid 0.5px white; /*evtl ohne border?*/
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
    /* Mobile: Navigation und Listen untereinander stapeln */
    #names, #status {
        display: block;
        margin-left: 0;
        padding: 2vw;
    }

    /* Mobile: groessere Touch-Targets fuer die Links */
    #names li, #status li {
        padding: 12px 6px;
    }

    /* NEU (Note 2208): Mobile-Layout als Zeilen-Grid
       Name | Infobereich | [ENABLED]
       Tippen auf einen DJay oeffnet den roten Infobereich
       zwischen den weissen Labels (statt Hover). */
    #biostext {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: start;
        gap: 4px 10px;
    }

    /* Container aufloesen, damit die Eintraege direkt im Grid liegen */
    #names, #status, #outerDiv,
    #names ul, #status ul {
        display: contents;
    }

    /* Kopfzeilen: NEXT EVENT / About us + [ENABLED] / [DISABLED] */
    #names ul.list li:nth-child(1) { grid-row: 1; grid-column: 1; }
    #status ul.list li:nth-child(1) { grid-row: 1; grid-column: 3; }
    #names ul.list li:nth-child(2) { grid-row: 2; grid-column: 1; }
    #status ul.list li:nth-child(2) { grid-row: 2; grid-column: 3; }

    /* DJ-Zeilen (beatMacho auskommentiert, daher 4 Eintraege) */
    #names ul:nth-child(2) li:nth-child(1) { grid-row: 3; grid-column: 1; }
    #status ul:nth-child(2) li:nth-child(1) { grid-row: 3; grid-column: 3; }
    #outerDiv > div:nth-child(1) { grid-row: 3; grid-column: 2; }

    #names ul:nth-child(2) li:nth-child(2) { grid-row: 4; grid-column: 1; }
    #status ul:nth-child(2) li:nth-child(2) { grid-row: 4; grid-column: 3; }
    #outerDiv > div:nth-child(2) { grid-row: 4; grid-column: 2; }

    #names ul:nth-child(2) li:nth-child(3) { grid-row: 5; grid-column: 1; }
    #status ul:nth-child(2) li:nth-child(3) { grid-row: 5; grid-column: 3; }
    #outerDiv > div:nth-child(3) { grid-row: 5; grid-column: 2; }

    #names ul:nth-child(2) li:nth-child(4) { grid-row: 6; grid-column: 1; }
    #status ul:nth-child(2) li:nth-child(4) { grid-row: 6; grid-column: 3; }
    #outerDiv > div:nth-child(4) { grid-row: 6; grid-column: 2; }

    /* Infobereich: standardmaessig versteckt, per Tippen geoeffnet */
    #outerDiv > div {
        position: static;
        top: auto;
        right: auto;
        display: none;
        width: auto;
        font-size: clamp(13px, 3.5vw, 18px);
    }

    /* Geoeffneter Infobereich: sichtbar + leicht rot hervorgehoben,
       solange der DJay angezeigt wird */
    #outerDiv > div.open {
        display: block;
        background: #f0554f; /* leicht helleres Rot */
        box-shadow: 0 0 0 3px rgba(224, 73, 66, 0.4);
    }

    /* Mobile: About-Seite - Icons zentrieren */
    #instagram {
        margin-left: 0;
        display: block;
        text-align: center;
    }

    #icon {
        display: inline-block;
        padding: 10px;
    }

    #abouttxt {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}