/* Stylesheet für SoCF Homepage
  responsives Layout mit Flexbox ab Z. 247 */


/* ================================================  GLOBAL DEFINITION  ============================================== */

/* alternatives Boxmodell */
*, ::before, ::after {
  box-sizing: border-box;
}

/* Farbfestlegungen nur als Fallback für IE9-11
   custom properties für alle anderen!            */
body {
  max-width: 70em;
  margin: 1em auto;
  padding: 0 1em;
  font: normal 1em Arial, sans-serif;
  color: darkRed; /* wird als currentColor für die Akzentfarbe verwendet. */
  color: var(--accent3-color);
  background: 
    linear-gradient(    /* hellt den Hintergrund auf */
      rgba(245, 240, 230, 0.3),
      rgba(245, 240, 230, 0.3)
    ),
    url('icons/westernstadt_neutral.svg') no-repeat left; /* Hintergrund über die gesamte Seite */
  background-size: cover;  /* Hintergrundbild wird eingepasst auf kleinere Bildseite (=Höhe) */
  background-color: var(--background4-color); /* Hintergrundfarbe, wenn Hintergrundbild zu wenig hoch */
 
}

p, ol, ul, dl {
	color: #333;
  color: var(--font-color);
}


/* Farbendefinition: */
:root {
  --background-color: #666;         /* Farbe Hintergrund ganze Seite helles grau */
  --background2-color: transparent; /* Farbe Hintergrund Kopfbereich helles grau Org.: #666*/	
  --background3-color: #ccc;        /* Farbe Hintergrund der Textboxen und Schrift im Footer ganz helles grau*/
  --background4-color: #050505;     /* Hintergrundfarbe unterhalb Hintergrundbild */
  --accent1-color: darkred;         /* Hintergrundfarbe Fußzeile dunkelrot */
  --accent2-color: orange;          /* Farbe Symbole (Pfeile, Schalterknopf orange */	
  --accent3-color: NavajoWhite;     /* #fede9e; Farbe Symbolhintergrund, Schrift Hyperlinks in der Fußzeile helles beige */	
  --font-color: #000;               /* Farbe Fließtext schwarz*/
  --font1-color: darkred;           /* Farbe Termine schwarz*/
  --font2-color: #833c0b;           /* Überschriften im Text braun */	
  --link-color: orange;	            /* Textfabe der Hyperlinks, die nicht im Header-/Footerbereich liegen */
  --RR-color: #ff7423;              /* Fontfarbe ROUGHROAD Orange */
  --link-color: blue;     	    /* Fontfarbe Hyperlinks im Text */
}
/* blendet den Full-Screen Button im Video-Player aus, da WhatsApp Videos verdreht angezeigt werden */
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-moz-media-controls-fullscreen-button {
    display: none;
}


/* ==============================================  HEADER  =========================================== */

/* Header grid layout mit 2 Spalten für mobiles design*/

#nav-menue {
   margin: 0 0 2em 0;    erzeugt den Abstand vom header zum oberen Rand 
   position: relative;
   display: grid;
   grid-template-columns: 12fr 1fr;
   grid-template-areas:	 "logo logo"
                         "logotext logotext"
			 "leer mb" 
			 "menu menu";
   grid-gap: .5em;
   padding: 0.1em;
   border: 1px transparent;
   background-color: var(--background2-color);
}

@media screen and (max-width: 56em) {   /* bei mobilen design wird Logo links ("logo") und Logo rechts ("logo1") ausgeblendet. An dieser Stelle notwendig, da sonst rechter Baum über Rahmen hinaus wächst. */
   .logo1 {
      display: none;
   }
   .logo {
      display: none;
   }
}

#nav-menue span { 
  font-weight: bold;
}

.logo { 
   grid-area: logo;
   padding: .1em .5em .0em .5em;
   border: 1px transparent;
   height: 5em; /* fixiert die Höhe der Zelle und damit das Header-Logo */
}

.logotext {
   grid-area: logotext;
   justify-self: center;   /* Secrets of Country-Folk im schmalen Design zentriert */
   padding: .1em .5em .0em .5em;
   border: 1px transparent;
   height: 5em;
   }

.bild {            /* passt das bild (Logo) in den Rahmen ein */
   object-fit: scale-down;
   height: 100%;
   width: 100%;
   object-position: 0%;
}

.akzentfarbe1 {
	color: var(--accent2-color);
}

.akzentfarbe2 {
	color: var(--accent1-color);
}

rrfarbe {
  color: var(--RR-color);
  font-weight: bold;
}	

mn { /* Farbe Musikername */
  color: var(--font2-color);
  font-weight: bold;
}


header a:hover, header a:focus {
  background-color: transparent; /*keine Hintergrundfarbe für Hyperlinks im Header*/
}
	
#steuerung {
  display: none; /* ohne diese zeile bleibt das menü immer sichtbar */
  grid-area: menu;
  justify-self: end; /* schmales menü rechtsbündig im Grid ausrichten */
}



/* =======================================  NAV  =========================================== */

/* definiert die Menü-Buttons: Hintergrundfarbe dunkelrot, Hover: hellbeige, Textfarbe weiß,
current page: orange, Biegeradius ...*/

#steuerung a {
  background-color: var(--accent1-color);
  color: white;
  text-decoration: none;
  display: inline-block;
  flex-direction: column;  /* neu dazu */
  width: 90%;
  margin: .5em 0;
  padding: .5em 1em;
  border-radius: .5em;
}

#steuerung a:hover,
#steuerung a:focus {
  background-color: var(--accent3-color);
  color: #333;
}

#steuerung a:hover::after ,
#steuerung a:focus::after {
  color: transparent;
}

#steuerung a[aria-current="page"] { 
  color: orange;
  font-weight: bold;
  background-color: var(--accent1-color);
  border: 2px solid var(--accent3-color);
}

/* Navigationselemente werden untereinander rechts ausgerichtet angezeigt  */
#steuerung > ul { 
  position: relative; 
  display: flex;
  flex-direction: column;
  margin: 1em 0 1em 0;
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 0;
  width: 13em; /* begrenzt die Menübreite auf 13em */
  border: 1px transparent;
}

#steuerung li {  /* Listen Punkte nicht sichtbar im senkrechten Menu */
    list-style: none;
}

/* ab hier von Selfhtml übernommen */

#steuerung .subtitle::after { /* bei class="subtitle" wird der Pfeil eingeblendet */
	position: sticky;  /* war absolute. Notwendig, damit im breiten Menü der Pfeil beim Menü-button bleibt. */
	content: " ▶";
	color: currentColor;
	display: inline-block;
	width: 2em;
	right: 0;
}

 /* beim überfahren mit der Maus (hover) oder Tab Taste (focus) wird das Untermenü eingeblendet */
#steuerung .subtitle:hover::after ,
#steuerung .subtitle:focus::after { 
  color: black;
  content: " ▼" ;
}

#steuerung .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

#steuerung .submenu li {
	display: block;
	/* width: 15em; */
}

/**     Show the submenu on hover, focus, active     **/
/*
#steuerung li:hover .submenu,
#steuerung li:active .submenu,
#steuerung li:focus .submenu {
	visibility: visible;
	height: auto;
}
*/
#steuerung li:focus-within .submenu {
	visibility: visible;
	height: auto;
}


/*	Menü-Button mit relative im Grid einblenden */
.menue-button {  
	grid-area: mb;
        display: inline-block;
	position: relative;
	border: 3px solid var(--accent1-color);
	border-radius: 0.3em;
	padding: .5em;
	background-color: var(--accent1-color); /*dunkelrot*/
	color: var(--accent2-color); /*helles beige*/
	font-weight: bold;
	line-height: 120%;
 	text-decoration: none;
	text-align: center;
        height: 2.5em; 
        width: 2.5em; 
}

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */

.menue-button:hover {
	background: #ffebe6;
}

/* Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
    display: block;
}

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
    display: none ; 
} 

 
/* ==========================================  CONTENT  ==================================== */

h1 {
  color: var(--font2-color);
  font-size: 1.3em;
}

h2 {
  color: var(--font-color);
  font-size: 1.3em;
  font-weight: bold;
}

h3 {
  color: var(--font-color);
  font-size: 1.1em;
}

h4 {
  color: var(--font-color);
  font-size: 1em;
  font-weight: normal;
  text-decoration-line: underline;
}

/* dieser Block erzeigt den beigen Hintergrund hinter dem Logo im Kopfbereich 
und hinter den links in der Fußzeile*/
a {		
  color: currentColor;
  color: var(--link-color);	
} 
a:hover, a:focus {
  font-weight: bold;
  background-color: var(--accent3-color); /* links werden gelb hinterlegt*/
   color: var(--accent1-color);
}
/* end Block */

/* Grid Layout für Musikerseite */
musiker {
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:	 "bild"
			 "text";
   grid-gap: 0 0 .2em 0;
   padding: 0.1em;
   border-bottom: medium solid var(--accent1-color);
}
	
/* bei LSB:
   .foto {
   max-height: 25em;
   max-width: 100%;
   justify-self: center;
}
*/

.foto {
   height: 10em;
   object-fit: contain;
}
 
p.foto {
   grid-area: bild;
}

p.text {
   grid-area: text;
}

.img {   /* macht die Bilder auf der Unterseite bei dark mode dunkler */
    filter: brightness(.8) contrast(1.2);
  }

/* Tabellendefinition */
table, tr {
   border-collapse: collapse;
   width: 100%;
}

th, td {
   display:block; /* ordnet die Tabellenelemente untereinander */
   border: none;
   color: var(--font-color);
   padding: 0.3em 0 0 0;
}

tr:nth-child(n) {
   border-bottom: thin solid var(--accent1-color);
}

td:nth-child(3) {
  font-weight: bold;
}
   
td:last-child {
   color: var(--font-color);
/*   font-size: 1em; */
   padding: 0.3em 0 1em 0;
}

/* Tabelle für "persönliches" */

.tabelle tr:nth-child(n) {
   border: none;
}

.tabelle td:nth-child(3) {
  font-weight: normal;
}

.disclamer {
   color: var(--font-color);
   font-size: 1em;
   font-weight: bold;
   text-decoration: underline;
}
.disclamer-text {
   color: var(--font-color);
   font-size: 0.8em;
}

.grid { /* Bilder im schmalen Menü untereinander (1 Spalte) */
	max-width: 65em;
  	display: grid;
	border: 1px transparent;
	grid-template-columns: 1fr;
	gap: 1em;
}

.grid img {width: 100%;}

.landscape {width: 100%;}

.portrait {height: 100%;}
/*
.normallink {
   font-color: var(--link-color);
   }
*/
/* ===========================================  FOOTER  ==================================== */
footer {
  background-color: var(--accent1-color);
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);
  margin: 2em 0;
  padding: 0.5em 1em 0em 0em;
  display: flex;
  border-radius: .5em;
}

footer ul,
footer p {
  flex: 1 1 100%;
          color: var(--background3-color);
}

footer ul {
  padding-left: 0;
  margin-left: 0;
   margin-top: 0;
}

footer li  {
  list-style-type: none;
}

footer a {
  color: var(--accent3-color);
  line-height: 1.5em;
}
footer a:hover, footer a:focus {
  color: var(--accent1-color);
}

footer li a {
  padding: 0 .5em 0 .7em;
}
footer p {
  margin: 2em 0 0 0;
  padding: 0 0 0 0;
  text-align: right;
}

/* =========================================  LAYOUT  ======================================= */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
main  {
  margin: 0 0;
  border: 1px transparent;
}

article ul li {
   padding-bottom:0.5em;
}


/* ==================  2-Spaltenlayout mit breiterem aside ====================== */

@media screen and (min-width: 56em) {

   #nav-menue {      /*breites design */
   grid-template-columns: 2fr 3fr 2fr;
   grid-template-areas:  "logo logotext logo1"
			 "menu menu menu";
   }

 .grid { 
	max-height: 25em;
  	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
     justify-items: center;
  }

  .logo1 { 
      grid-area: logo1;
      padding: .1em .5em .0em .5em;
      border: 1px transparent;
      height: 5em; /* fixiert die Höhe der Zelle und damit das Header-Logo */
   }

   .logotext {     /* Secrets of Country-Folk zentriert */
     justify-self: center;
   } 

 /* Grid Layout für Musikerseite */
musiker { 
   position: relative;
   grid-template-columns: 1fr  12fr 1fr;
   grid-template-areas:	 "bild text text";
   grid-gap: 0; 
   padding: 0 .3em 0 .3em;
   border-bottom: 1px transparent;
   width: 100%;
}

musiker:nth-child(odd) {
   grid-template-areas:	"text text bild";
}

p.text:nth-child(odd) {
   padding: 0 0 0 1em;
}

p.text:nth-child(even) {
   padding: 0 1em 0 0;
}

   #steuerung { /* breites menü wird über ganzes menu Grid ausgerichtet */
   grid-area: menu;
   width:100%;
   display: block;    /* blendet das breite Menü immer ein */
   }

  /* Navigation wird nebeneinander ausgerichtet. */
  #steuerung a { /* die menüpunkte */
  background-color: var(--accent1-color);
  color: white;
  text-decoration: none;
  display: inline-block;
  width: 90%; 
  margin: .5em 0;
  padding: .5em 1em;
  border-radius: .5em;
  }

  .menue-button {  /* Menu Button ausblenden bei breiterem aside */
        display: none;
  } 

   #steuerung > ul { /* oberes Menü: nebeneinander, Abstand von oben ... */
   position: relative;
   display: flex;
   flex-direction: row;
   background-color: var(--accent1-color);    /* Hintergrundfarbe oberes Menü */
   margin-top: .1em;
   border-radius: .5em;
   width: 100%; 
   height: 3.2em; /* begrenzt Höhe vom Menübalken im breiten Menü, sonst wird beim Aufklappen der gesamte Bereich dunkelrot */
   }

  #steuerung li {
    margin: 0;
    flex: 1;  /* auto; */
    max-width: 11em; /* begrenzt die Menüpunktbreite auf 11em im breiten Menü */
 /*   white-space: nowrap;    Menütexte werden nicht umgebrochen */
  }

  /* Main wird zum Flex-Container */
  main {
    display: flex;
    flex-flow: row wrap;
  }

  main > * {
    flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
  }

   /* Tabellendefinition für breites Layout: */
   tr {
      display: flex;
   }

   table, th, td {
      border: none;
      color: var(--font1-color);
      font-size: 1.2em;
      padding: 1em;
   } 

   td:first-child {
      width: 22%;
   }

   td:nth-child(2) {
      width: 10%;
   }

   td:nth-child(3) {
      width: 42%;
   } 

   td:last-child {
      width: 26%;
      font-size: 0.8em;
   }
   

.tabelle td:first-child {
      width: 5%;
   }

.tabelle td:nth-child(2) {
      width: 55%;
   }

.tabelle td:nth-child(3) {
      width: 40%;
   }

     section {
       flex: 1 48%;  /* Diese Elemente erhalten eine halbe Breite */
       margin: 1%;
     }

   footer ul {
     margin-top: 1em;
   }

   footer li  { /* Trennstriche zwischen Footer Links im breiten Menü */
     list-style-type: none;
     display: inline-block;
     border-left: .2em solid #ccc;
   }

   footer li:first-child  {
     border-left-color: transparent;
   }
footer p {
  margin: 1em 0 0 0;
}

} /* End media */