/********************************************************
* Filename:     style.css
* Description:  css-Datei
* Author:		    Ing. Andreas Gabriel - 2024-02-21
********************************************************/


/****************************************
Debugger
****************************************/
#debugger {
  d_X_isplay:none;
  position:fixed;
  bottom:0;
  right:0;
  background-color:darkcyan;
  color:#fff;
  font-size:50%;
  padding:0 2em 0 1em;
  z-index:300;
}


/****************************************
Standardelemente
****************************************/
* { outline:none; }
html, body {
  font-family:'Roboto',sans-serif;
	font-weight:300;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  font-size: 19px;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
}
html {
	scroll-behavior:smooth;
}
body {
  margin: 0;
  padding: 0;
  color:#fff;
  background-color: #fff;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  margin-top: 0;
  margin-bottom: 1.2em;
}
h1 {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing: 0.04em;
  font-size:160%;
	line-height:1.3;
  margin-top:0;
  margin-bottom: .5em;
  text-transform: uppercase;
	color:#ff0;
}
h2 {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing: 0.04em;
  font-size:140%;
	line-height:1.3;
  margin-top:0;
  margin-bottom: .5em;
  text-transform: uppercase;
	color:#fff;
}
h3 {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing: 0.02em;
  font-size: 130%;
	line-height:1.3;
  margin-top: 0;
  margin-bottom: 1em;
	color:#fff;
}

ul {
  margin: 0;
  list-style-type: none;
	margin-left: -0.8em;
	margin-bottom: 2em;
}
ul li {
  margin-bottom: .5em;
}
ul li::before {
  content: '★';
  margin-left: -1.6em;
  margin-right: 0.8em;
  font-size: 80%;
	/* color:#1A2758; */		/* dunkelblau */
	color:#ff0;							/* gelb */
}
ul li ul li {
  margin-bottom:0;
}
ul li ul li::before {
  content: '●';
  margin-left: -1.6em;
  margin-right: 0.8em;
  font-size: 80%;
	color:#1A2758;					/* dunkelblau */
	/* color:#ff0; */				/* gelb */
}
.little li::before,
.accordion li::before {
  font-size:100%;
}

a {
	text-decoration:none;
	font-weight:400;
}


/****************************************
Schriften
****************************************/
.uc {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing:0.02em;
}
.caps {
	text-transform:uppercase;
}
.dn20 {
	font-size: 80% !important;
  line-height: initial;
}
.dn40 {
	font-size: 60% !important;
  line-height: initial;
}
.up20 {
	font-size:120% !important;
  line-height:0;
}
.up30 {
	font-size:130% !important;
  line-height:0;
}
.up40 {
	font-size:140% !important;
  line-height:0;
}
.jgu img {
	width: 12em;
  padding: 0 0.35em;
}
.hl,	/* (highlighted) Namen, Bands, Formation, etc. */
.contentwrapper a.extlnk {	/* Externe Links (neuer Tab bzw. neues Fenster) */
  font-weight:500;
  font-size: 105%;
  line-height: initial;
}
a.extlnk::after {
  content: '⬈';
  margin: -.25em .3em 0 .5em;
  border: 1.8px solid #00bfff;
  border-radius: 0.3em;
  font-size: 70%;
  padding: 0 0.15em;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

/****************************************
Farben
****************************************/
.blue {
	background-color:#1A2758;
	color:#fff;
}
.lightblue {
	background-color:#29376D;
}
.blue a,
.lightblue a {
	color:#00bfff;
}
.blue a:hover,
.lightblue a:hover {
	color:#a0e7ff;
}
.yellow {
	color:rgb(255,255,0);
}


/****************************************
Allgemeine Klassen
****************************************/
.center			{ text-align:center; }
.right			{ text-align:right; }
.clear			{ clear:both; }
.little			{ font-size:80%; }
.bold, .b, strong, b	{ font-weight:500; }
.italic			{ font-style:italic; }
.nowrap			{ white-space:nowrap; }
.pointer		{ cursor:pointer; }
.nopevents	{ pointer-events:none; }


/****************************************
Wrapping, iframes, etc.
****************************************/
.wrapper {
  max-width: 1800px;
  margin:0 auto;
}
.subwrapper {
	margin:0 1.5em; 
}
#headerwrapper {
  height:7.5em;
  padding-top:1.5em;
  padding-bottom:1em;
}
#menuwrapper.sticky {
  position: fixed;
  top: 0;
  width: 100%;
	z-index: 5;
}
#menubarlogo {
	height:.9em;
  margin-bottom:.1em;
	opacity:0;
	transition:opacity 1s;
}
#menuwrapper.sticky #menubarlogo {
	opacity:1;
}
.contentwrapper {
  padding-top: 4em;
  padding-bottom: 2em;
  max-width: 1200px;
  margin:0 auto;
}
.formwrapper {
  max-width:600px;
  padding-bottom:4em;
	margin:0 auto;
}
#terminanfrage {	/*-- iframe Terminanfrage --*/
  height:32em;
  border:none;
  width:100%;
	border-radius:.35em;
}


/****************************************
Layout (Grids mit Spalten)
****************************************/
.grid { display:grid; }

.standardgrid { grid-gap:1.5em 3em; grid-template-columns:calc(30% - 3em) 70%; }
.headergrid 	{ grid-template-columns:50% 50%; }
.menubargrid	{ grid-template-columns:min-content auto min-content min-content; }
.menubargrid > div { align-self:center; text-align: center; }
.mainmenugrid	{ grid-gap:.2em; grid-template-columns:auto auto auto auto auto auto; width:max-content; }

.mediagrid { grid-gap:3em 2em; grid-template-columns:calc(40% - 2em) 60%; }
.mediagrid { padding-bottom:5em; }
.mediagrid .copyright { margin-bottom:1em; }

.mediaheadergrid { grid-template-columns:auto min-content; grid-gap:0 .5em; margin-bottom:.5em; }
.mediaheadergrid .info {	margin-left:.5em; }
.mediaheadergrid div:last-child { align-self:end; }
.mediaheadergrid .type {
	font-family: 'Ubuntu Condensed',sans-serif;
  border-radius: .5em;
  margin-left: auto;
  letter-spacing: 0.04em;
  background-color: #fff;
  color: #1A2758;
  font-weight: 500;
  line-height: 1;
  width: fit-content;
  font-size: 80%;
  padding: 0.35em 0.5em;
  text-transform: uppercase;
}

.archivgrid { grid-template-columns:max-content auto; grid-gap:0 2em; padding-top:2em !important; }
.archivgrid2 { grid-template-columns:5em auto; grid-gap:1em 1em; margin-bottom:1.5em; }
.musikergrid { grid-template-columns:calc(40% - 1em) 60%; grid-gap:3.5em 1em; }
.musikergrid2 { grid-template-columns:auto 5em; grid-gap:0 2em; }
.timeline {	display: grid; grid-template-columns:0 6.5em auto; }

.historygrid { grid-template-columns:calc(30% - 2em) calc(40% - 2em) 30%; grid-gap:2em 2em; }
.historygrid .stillive { border-radius:.5em; width:100%; display:block; }
.historygrid .stillive.btm { margin-bottom:2em; }
.historygrid .apoint { margin-right:.5em; color:rgba(255,255,255,.6); }

/* 3-spaltig Standard */
.footergrid { grid-template-columns:calc(33.33% - 1em) calc(33.33% - 1em) 33.33%; grid-gap:1em 1em; }


/****************************************
Header
****************************************/
#logo {
  width:12.5em;
	cursor:pointer;
}


/* Kontaktblock (wird auch im Footer verwendet)
****************************************/
.contact {
  text-align:right;
	line-height:1.4;
}
.lettering {
	width:12.5em;
}
.slogan {
	font-weight: 500;
  font-size: 80%;
  color: rgb(255,255,0);
  letter-spacing:0.074em;
}
.address {
  margin-top:1em;
}
.address div,
.condata div {
	font-size:80%;
	line-height:1.4;
	display:inline-block;
}
.address div::after,
.condata div::after {
	content:'•';
	margin:0 .4em;
}
.address div:last-child::after,
.condata div:last-child::after {
	content:'';
	margin:0;
}


/****************************************
Emotionsbild
****************************************/
#image {
  margin: 0;
}
#imagewrapper {
	border-radius:1em;
	background-color:#1A2758;
	background-repeat:no-repeat;
  background-position:center;
  background-size:auto 100%;
}

/****************************************
Menüleiste mit Link zur Startseite (Haus-Icon) Hauptmenü und Burgermenu
****************************************/
#menubar {
	line-height:1;
}
#menubar .active {
  color:#ff0;
	pointer-events:none;
}
#menubar .active:hover {
  background-color:transparent;
  cursor:default;
}
#homebutton {
	padding:.9em 1em .9em 0;
}
#homebutton svg {
	width:1em;
	height:1em;
	fill:#00bfff;
	transition:all 0.3s;
}
#homebutton:hover svg {
  fill:#a0e7ff;
}
#homebutton.active svg {
	fill:#ff0;
}
#mainmenu {
	font-size:120%;
	margin:.4em 0;
}
#mainmenu a {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing:.04em;
	text-transform:uppercase;
  padding:.4em .8em;
  display:inline-block;
  border-radius:.3em;
  transition:all .2s;
}
#mainmenu a:hover {
  background-color:rgba(255,255,255,.2);;
}

/* Burgermenü
****************************************/
#bmwrapper {
  display:none;
}
#menubutton {
	padding:.9em .5em .9em 1em;
}
#menubutton:hover {
  cursor:pointer;
}
#menubutton > div {
	display:grid;
	grid-gap:4px;
	padding:3px 0;
	width:20px;
	height:14px;
}
#menubutton div div {
	background-color:#00bfff;
  height:2px;
  padding:0;
  border-radius:1px;
  transition:all .4s;
}
#menubutton.open #ln1 {
	-webkit-transform:	rotate(45deg); 
	-moz-transform:			rotate(45deg); 
	-o-transform:				rotate(45deg);
	-ms-transform:			rotate(45deg);
	transform:					rotate(45deg);
  margin-top:6px;
}
#menubutton.open #ln2 {
  opacity:0;
  margin-top:-6px;
}
#menubutton.open #ln3 {
	-webkit-transform:	rotate(-45deg); 
	-moz-transform:			rotate(-45deg); 
	-o-transform:				rotate(-45deg);
	-ms-transform:			rotate(-45deg);
	transform:					rotate(-45deg);
  margin-top:-10px;
}
#bmwrapper.open #burgermenu {
  opacity:1;
	pointer-events:all;
}
#burgermenu {
	opacity:0;
  right: 1em;
  position: absolute;
  width: max-content;
  border-radius: .5em;
  font-size: 120%;
  background-color: #00bfff;
  pointer-events: none;
  transition: opacity .2s ease-in-out;
  text-align: left;
	box-shadow: .1em .2em .2em rgba(0,0,0,.4);
}
#burgermenu a {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:.5em .7em;
  display:block;
	color:#1A2758;
}
#burgermenu a:first-child {
  padding-top:.7em;
}
#burgermenu a:last-child {
  padding-bottom:.8em;
}
#burgermenu a:hover {
	color:#fff;
}
#burgermenu .active {
  color:#ff0;
	pointer-events:none;
}



/****************************************
Inhalt
****************************************/
.line-block { padding-bottom:1.5em; }
.pprofil { text-align:center; display:grid; grid-gap:1em; grid-template-columns:100%; height:fit-content; }
.portrait img {
	margin:0 auto;
  width:10em;
  height:10em;
  display:block;
  border-radius:50%;
  border:.35em solid #fff;
}
.zitat {
	font-family:'Roboto',sans-serif;
  font-weight:300;
  font-style:italic;
}
.zitat::before {
  content:'» ';
  font-family:'Roboto';
  font-weight:900;
}
.zitat::after {
  content:' «';
  font-family:'Roboto';
  font-weight:900;
}
.born { margin-bottom:1em; }
.ne {		/* Namenserweiterung (span) auf der Seite "Ehemalige Mitglieder und mehr" */
	font-family:'Roboto',sans-serif;
	font-size:80%;
	font-weight:300;
	margin-left:.6em;
}


/* Instrument-Icons auf der Seite "Musiker" */
.instrument_name				{ color:#00bfff; cursor:help; }
.instrument_name:hover	{ color:#a0e7ff; }
.instrument_icons {
	display:grid;
	grid-template-columns:100%;
	grid-gap:.4em;
  height:fit-content;
	color:#00bfff;
  line-height:1.2;
}
.instrument_icon svg {
	width:100%;
  height:auto;
	display:block;
	cursor:help;
}
.instrument_icon .fil0 { fill:none; } /* Hintergrund-Quadrat ohne Füllung darstellen */
.instrument_icon .fil1 { fill:#0E1943; transition:fill .4s; }
.instrument_icon:hover .fil1,
.instrument_icon.glow  .fil1 { fill:#00bfff; }
.instrument_icon::before,
.instrument_icon::after {
	opacity:0;
	position:absolute;
	transition:all .4s;
	font-size:80%;
	white-space:pre;			/* für Darstellung des Zeilenumbruchs innerhalb content (mit \A) erforderlich */
}
.instrument_icon:hover::before,
.instrument_icon:hover::after {
	opacity:1;
}

/* Namen der Instrumente (hover) und deren Positionierung zum Icon */
#sopranosax::before		{ content:'Sopran- \A saxophon \ \ \ \  '; text-align:right; margin-left:-2em; }
#altosax::after				{ content:'Altsaxophon'; margin-top:.8em; }
#doublebass::before		{ content:' Kontra- \A bass'; margin-left:-1em; }
#electricbass::before	{ content:'E-Bass'; margin-top:.7em; }
#trombone::before			{ content:'Posaune'; margin-left:-1em; }
#percussion::after		{ content:'Percussion'; margin-left:1em; margin-top:-.5em; }
#guitar::before				{ content:'Gitarre'; margin-top:.5em; }
#banjo::before				{ content:'Banjo'; margin-top:1.5em; }
#trumpet::before			{ content:'Trompete'; margin-left:-.3em; }
#flugelhorn::before		{ content:'Flügel- \A horn'; margin-left:-.7em; margin-top:.3em; }
#drumset::after				{ content:'Schlagzeug'; margin-left:2.5em; }
#piano::after					{ content:'Piano'; margin-left:2.9em; margin-top:1em; }
#voice1::after,
#voice2::after				{ content:'Gesang'; margin-left:1em; margin-top:-.5em; }

/* Sondergrößen von Instrument-Icons */
#percussion svg {
	width:60%;
  height:auto;
	padding:20%;
}
#voice1 svg, #voice2 svg {
	width:70%;
  height:auto;
	padding:15%;
}

#archiv .introTxt {
}
#archiv .toparrow {
	text-align:center;
  line-height:.5;
	align-self:end;
}
#archiv .tmline {
  font-family: 'Ubuntu Condensed',sans-serif;
  letter-spacing: 0.04em;
  font-size: 140%;
  line-height: 1;
  color: #fff;
}
#archiv .year {
	background-color:#1A2758;
	border:2px solid #fff;
  padding: .2em 0.5em;
  border-radius: 0.8em;
  height: 1em;
}
#archiv .line {
	width:50%;
	border-right:2px solid #fff;
}
#archiv .afteryearline {
	height:calc(100% - 1.4em - 4px);
}
#archiv .emptyline {
	height:100%;
}
#archiv .date {
	font-size:80%;
	line-height: 1.4;
  margin-top: .5em;
}


/* Diverses */
#nextAppearances { text-align:right; }
#musiker details { grid-column:1/span 2; }
#geschichte #gruppenbild {grid-column:2/span 2; }


/****************************************
Veranstaltungen
****************************************/
#eventswrapper {
	background-color:#41508A;
  border-radius:.5em;
	display:grid;
  grid-template-columns:auto auto auto;
	margin-bottom:4em;
}
#eventswrapper > div {
	padding: 1em 1.2em;
}
#eventswrapper .odd { background-color:#0E1A48; }
#eventswrapper .even { background-color:#1A2758; }
#eventswrapper h2,
#eventswrapper h3 {
	margin:0;
}
#eventswrapper h2 {
	text-transform:none;
}
#eventswrapper .eventHint {
	grid-column:1/span 3;
	text-align:center;
	padding:.5em 1.2em !important;
}


/****************************************
Akkordeon (details)
****************************************/
details .accordion {
	font-size:80%;
  background:#41508A;
	padding:1em;
	margin-top:.5em;
	border-radius:.35em;
	overflow: hidden;
}
summary {
	font-family: 'Ubuntu Condensed',sans-serif;
  font-weight: 400;
  font-style: normal;
	color:#00bfff;
	padding:.2em .8em;
  padding-right: 2.2em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
	background-color:#1A2758;
  cursor: pointer;
	border-radius:.35em;
	width:fit-content;
	
	/* wichtig */
  display: block;
  position: relative;
}
summary:after {
  content:'';
  border-width:.4rem;
  border-style:solid;
  border-color:transparent transparent transparent #00bfff;
  position:absolute;
  top:.7em;
  right:.5em;
  transform:rotate(0);
  transform-origin:.2rem 50%;
  transition:.25s transform ease;
}
summary:hover {
	background-color:rgba(255,255,255,.2);
	color:#a0e7ff;
}
summary:hover:after {
  border-color:transparent transparent transparent #a0e7ff;
}
details ul:last-child {
  margin-bottom:0;
}

/* THE MAGIC */
details[open] > summary:after {
  transform:rotate(90deg);
}
details summary::-webkit-details-marker {
  display:none;
}


/****************************************
Hörproben (Audio und Video)
****************************************/
audio {
  border-radius:.5em;
  width:100%;
}
audio:focus {
	background-color:#000;
}
.audiotitle h2 {
	margin-top:1.35em;
}

video {
	border-radius:.5em;
	width:100%;
}
.videotitle h2 {
	margin-top:0;
}


/****************************************
Fußbereich
****************************************/
#footer {
  padding-top: 1em;
  padding-bottom: 2em;
}
#footer #centerblock {
	width:max-content;
	margin:0 auto;
}
#copyright {
	padding-bottom: 3em;
  font-size: 60%;
}


/****************************************
Menüs in der Fußzeile
****************************************/
#footermenu a.active {
  color:#ff0;
	pointer-events: none;
}
#footermenu a.active:hover {
  background-color: transparent;
  cursor: default;
}

#links {
	margin-top:.5em;
}


/****************************************
Cookie Popup
****************************************/
#cookie-popup { 
  text-align: center;
	color:#1A2758;
  background-color:rgba(255,255,255,.95);
  position:fixed;
  bottom: 0; 
  left: 0;
  right: 0;
  z-index: 9999;
  line-height:1.4;
  padding: 20px;
}
#cookie-popup.hidden { display:none; }
#cookie-popup a { color:#00bfff; }
#cookie-popup a:hover { color:#0098CB; }


/****************************************
Buttons
****************************************/
#cookie-popup input[type=button] {
  padding:.6em 1em;
  cursor:pointer;
	border:none;
	border-radius:5px;
  background-color:#1A2758;
  color:#00bfff;
}
#cookie-popup input:hover[type=button] {
  background-color:#1A2758;
  color:#a0e7ff;
}


/* END
****************************************/