@charset "utf-8"; 
/* history:
2026-01-14/Felix: Schriftgrad <button>. Angaben zu h3 entfernt.
2025-11-21/Felix: Schriftgrößen neu verteilt. "em": Schriftgröße des Eltern-Elements für Eigenschaft font-size.
                  body-Tag hat als maximale Schrifthöhe 3% der Viewport-Breite defniert.
2025-11-12/Felix: Grid-Layout Gallery um Zeile mit Bildunterschrift (p#imgTagging) erweitert.
2025-11-05/Felix: Grid-Layout mit CSS. --n ist ein Variablenname! (Beispiel SELFTHTML: --blue: #337599;)
2025-10-30/Felix: Anpassungen Gesamt-layout
2024-01-06/Felix: new
*/

/* ----- HTML elements ----- */
body {
  background-color:black;
  margin:5px;
  padding:5px;
  /* font-family:TimesRoman,Verdana,Arial,Helvetica,sans-serif; /* welche Schrift ist Standard in den verschiedenen browsern? */
  font-family:serif;
  color:white;
  font-size:3vw; /* 3% der Viewport-Breite */
}
div { /* alle Abschnitte, die aufgeklappt werden können */
  background-color:rgb(32,32,32);
  padding:4px;
  /* border:1px solid rgb(48,48,48); /* Anzeige Container-Grenze */

}
h1 {
  font-size:1em;
  font-weight:normal;
  padding-top:0ex;
  padding-bottom:0px;
  margin-bottom:0px;
}
h2 {
  font-size:0.8em;
  font-weight:normal;
  padding-top:0ex;
  padding-bottom:0px;
  margin-top:4ex;
  margin-bottom:0px;
  /* border:1px solid rgb(48,48,48); /* Anzeige Container-Grenze */
}
/* bisher nicht benötigt
h3 {
  font-size:0.7em;
  font-weight:bold;
  margin-top:4ex;
  margin-bottom:0px;
}
*/
p {
  /* body: font-size:3vw; = 3% der Viewport-Breite */
  font-size:0.7em;
}
td {
  font-size:0.7em;
}
ul li {
  font-size:0.7em;
}
button{
  font-size:1em;
  font-family:serif;
  border-radius:10px;
}
img { /* keinerlei Rahmen, Innen- und Außen-Abstand */
  margin:0px;
  border:0px;
  padding:0px;
}
em { /* Standard ohne weitere Angabe: italic */
  /* color:rgb(255,16,32); */
  font-style:italic; /* scheint Standard in Browsern -> Angabe überflüssig? */
}

/* ----- links inside text ----- */
a { /* Standard ohne weitere Angabe: Farbe blau */
  text-decoration:underline; /* Standard in allen Browsern */
  /* background-color:rgb(128,128,128); /* rgb(32,32,32);*/
  color:white;
}

/* ----- classes ----- */
.Motto{ /* rechtsbündiger Text im <Header> */
  text-align:right;
  font-size:1em;
  margin:0px;
}
/*
.link{
  text-decoration:underline;	
}
*/
	
/* ----- unique elements (with ID) ----- */
/* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#display:_grid
   im folgenden explizite Erzeugung des Rasters mit CSS */
   
Header { /* Layout mit Gitter "grid" mit drei Zeilen und 2 Spalten. 
            Zeilen 1 und 2 für Logo und zweizeiliges Motto
            Die 3. Zeile geht über die gesamte Breite fürs Bandfoto */
  display:grid;
  grid-template-columns: 1fr 4fr; /* fr steht für fraction */
  grid-template-rows: 1fr min-content min-content; /* min-content: Die Reihe ist gerade nur so hoch wie ihr Inhalt */
  /* gap:1em; */
  margin-bottom:0em;
  font-size:3vw; /* 3% der Viewport-Breite */
}

Header img:first-child { /* das erste img-Kindelement im Parent "Header" = Logo */
  grid-row: 1 / 3; /* Logo vertikal von erster bis dritter Linie */
  padding-top:5px; /* Leerraum oben so groß, dass obere Kante Logo und Motto auf derselben Höhe sind */
  /* max-width:20vw; */
  max-height:20vw;
  /* border:1px dashed white; /* Anzeige Container-Grenze */
}
Header img:last-child { /* das letzte img-Kindelement (Köpfe der Band) im Parent "Header" */
  grid-column: 1 / -1; /* Bandbild belegt eine Zeile und alle Spalten */
  max-width: 100%; /* Bild nimmt 100& Breite des Elternelements ein */
  /* max-height:20vw; /* genauso hoch wie das Logo */
  /* border:1px dashed yellow; /* Anzeige Container-Grenze */
}

  /* --n:3; CSS-Variable */
Gallery { /* Grid-Layout-Container für Fotos 
             Drei Zeilen: Zeile oben für vegrößertes Bild, Zeile für Bild-unterschrift, Zeile unten für 8 Thumnails */
  display:grid;
  grid-template-columns: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr min-content; /* Felder "min-content" für Bedienelement */
  /* grid-template-rows: 1fr min-content; /* Bild oben in 4-facher Höhe, unten nur 1/5 Thumbnails */
  grid-template-rows: 2fr min-content min-content; /* Bild oben in voller Höhe, Zeile mit alt-Text, unten Thumbnails */
  gap:10px; /* Abstand zwischen den Feldern */
  /* border: thin solid yellow; /* Anzeige Container-Grenze */
  /* margin-bottom: 1em; */
}

Gallery img:first-child { /* das erste img-Kindelement (ausgewähltes Bild) im Parent-Knoten <Gallery> */
  /* grid-column: 1 / -1; /* erstes Bild nimmt sämtliche Spalten des grids ein */
  grid-column: 2 / 10;
  /* border:1px dashed red; /* Anzeige Container-Grenze */
  max-width:100%;
  /* max-height:100%; */
  max-height:500px;
  margin:0px;
  padding:0px;
}
Gallery img { /* alle anderen img-Kindelemente im Parent "Gallery" */
  /* grid-area: span var(--n) / span var(--n); */
  /*min-width:110px; */
  max-width:100%;
  max-height:100%;
  /* border:1px dashed white; /* Anzeige Container-Grenze */
  margin:0px;
  padding:0px;
}
Gallery p#imgTag { /* <p>für Bildunterschrift im Parent "Gallery" */
  grid-column: 1 / -1; /* belegt eine Zeile und alle Spalten */
  max-width:100%;
  max-height:100%;
  /*border:1px dashed yellow; /* Anzeige Container-Grenze */
  margin:0px;
  padding:0px;
}