@charset "UTF-8";
/* CSS Document */


.stdRespTextSize { /* Standard-Responsive-Textsize */
	font-size: min( calc(12px + 0.5vw), 24px); /* min( calc(12px + 0.5vw), 24px) */ 
}

/*
.stdRespTextSize ul {
	color: red;
}
  */

.dummyLine {
	color: white;
	margin: -5px; /* durch Dummy-Line entstehenden Abstand ausgleichen */
}

/* am Ende der "Allgemeines" Dateien */
#Home-Referenz::before {
	content: "[acaMusic.de > Impressum]";
	font-size:16px;
}  /* */


img {   /* make all images responsive */
	width: 100%;
	height: auto; /* auto */
	margin-top: 2%;   /* 20px Platz über einem Image */
	margin-bottom: 5%;  /* 20px */
}
.img-minWidth {
	min-width: 10em; /* 500px */
	/* min-height: auto;  wenn dieser Befehl dazu kommt ist daa Logo winzig klein */
}


body {
  font-family: Arial, sans-serif;
}


.pageDimension {
	padding-left: 5%;   /* 30px */
	padding-right: 5%;  /* 30px */
	max-width: min(calc(300px + 60.5vw), 1265px);   /* 1265px  min(calc(300px + 60.5vw), 1265px)   */
	margin: auto;    /*      */
}


a {
  display: inline-block;
  background: white;
  color: blue;
  padding: 3px 1px;
  text-decoration: none; 
}

a:hover { 
  background: yellow; 
}

/*
a:visited { 
  color: blue;
}
*/
/* VISITED Track-Link-CSS-Code */
/* ersetzt zusammen mit einem JavaScript den "visited"-Befehl, der z.B. von Apple(Safari) nicht unterstützt wird.
/* die zugehörige Ablaufsteuerung befindet sich in "acaMusic.js" */
/* angewendet wird dieses Features nur in acaMusic-NaviTotal.html */
.track-link { color: blue; text-decoration: none; }
.track-link.clicked { color: gray; font-style: italic; }
.track-link.clicked::after { content: " ✓"; }


/* zum Schließen der "Details"-Buttons ------------------------------- */
.button {
  	border: none;
  	color: white;
  	padding: 16px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	transition-duration: 0.4s;
  	cursor: pointer;
}

.button-green {
  	background-color: white; 
  	color: black; 
  	border: 2px solid #04AA6D;
}

.button-green:hover {
 	background-color: #04AA6D;
  	color: white;
}

.button-red {
  	background-color: white; 
  	color: black; 
  	border: 2px solid red; /* #008CBA; */
}

.button-red:hover {
  	background-color: red; /* #008CBA; */
  	color: white;
}


/* Navi-"Bar"                                             */
/* ====================================================== */
.header-nav-bar {
	background: green;
	max-width: 1265px;    /* "Desktop" */
}

@media only screen and (max-width: 768px) { /* mobile */
	.header-nav-bar {
		background: green;
		max-width: 200px;    /* "Mobile" */
	}
}

.header-nav-bar ul {
	display: flex;  /* "Desktop"*/
	list-style: none;
	color: white;
	font-size: min(calc(15px + 0.5vw), 28px); /* 24px Textgröße auf äußerer Navi-Leiste */
	/* word-wrap: anywhere;  */
}

@media only screen and (max-width: 768px) { /* 768 */
	.header-nav-bar ul {
		display: block;  /* "Mobile"*/
		list-style: none;
		color: white;
		font-size: min(calc(15px + 0.5vw), 28px); /* 24px Textgröße auf äußerer Navi-Leiste */
		/* word-wrap: anywhere;   */
	}
}

.header-nav-bar ul li {
	width: auto;    /* auto 150px Breite der Feldelemente auf Navi-Seite calc(15px + 15vw);*/
	margin: auto;   /* auto 1px */
	padding: 3px;   /* 3px ### Wichtig: optische Verbindung/Überlappung zwischen Haupt-Navi-leiste und Sub-Menue !!! */
}
.header-nav-bar ul li a {
	text-decoration: none;
	background: green;
	color: white;
}

.header-nav-bar ul li:hover {
	background: white;
	border-radius: 5px;
	color: black;
	
}
.sub-menu-1 {
	display: none;
}

.header-nav-bar ul li:hover .sub-menu-1 {
	display: block;
	position: absolute;
	background: green;
	margin-top: 3px;     /*  "Desktop" Wichtig: optische Verbindung/Überlappung zwischen Haupt-Navi-leiste und Sub-Menue !!! */
	margin-left: -15px;  /*  "Desktop" */
}

@media only screen and (max-width: 768px) {
	.header-nav-bar ul li:hover .sub-menu-1 {
		display: block;
		position: absolute;
		background: green;
		margin-top: 0px;      /* "Mobile" */
		margin-left: 135px;   /* "Mobile" */
	} 
}

.header-nav-bar ul li:hover .sub-menu-1 ul {
	display: block;
	margin: 3px;
	font-size: min(calc(8px + 0.5vw), 24px);  /* 15px -> 24 Text-Größe im Untermenü */
}

.header-nav-bar ul li:hover .sub-menu-1 ul li {
	width: 250px;   /* Breite des Untermenues */
	padding: 5px;
	border-bottom: 1px dotted white;
	background: transparent; 
	border-radius: 0px;
	text-align: left;
}

.header-nav-bar ul li:hover .sub-menu-1 ul li:last-child { /* letzte Linie in Sub-Menue-1 unterdrücken */
	border-bottom: none; 
}

.header-nav-bar ul li:hover .sub-menu-1 ul li a:hover {
	color: yellow;
}


/* Navi-"Box"                                             */
/* ====================================================== */

.NaviTotal p {  /* Text in der Datei acaMusic-Navi-Total.html */
	color: black;
	font-size: 15px;
}


/* GEMEINSAME BASIS-STYLES & SCHRIFT */
table.Navi-Box {
	font-family: Arial;
	/* font-size: 18px; */
	font-size: min(calc(15px + 0.5vw), 28px);  /* 24px Textgröße auf äußerer Navi-Leiste  */
	
	border: none;
}


/* MOBILE Media-Screen kleiner als 768px: Umbruch aktivieren */
@media screen and (max-width: 768px) {
	
	table.Navi-Box,
  	table.Navi-Box tr {
    	display: flex;
    	flex-wrap: wrap;
  		width: 100%;
		
		gap: 2px; /* Kleiner Abstand zwischen den umgebrochenen Boxen */
		
		border-bottom: none !important;
  	}
	
	table.Navi-Box th, 
	table.Navi-Box td {	
		display: flex;
        align-items: stretch; /* Dehnt den Link auf volle Box-Höhe */
        flex: 1 1 20%; 
        box-sizing: border-box;
        padding: 0 !important; /* 0 */
        height: auto;
	}
	
	table.Navi-Box th {
		flex-direction: column !important; /* Stapelt "DIREKT-" und "LINK:" untereinander */
		justify-content: center !important; /* Vertikale Zentrierung */
		align-items: center !important;    /* Horizontale Zentrierung */
		text-align: center !important;
		
		padding: 25px 15px !important;     /* 25 15 th hat keinen Link, bekommt das Padding direkt auf die Box */
		box-sizing: border-box !important;
		line-height: 1.2 !important;      /* 1.2 */
		border-bottom: none !important;    /* Entfernt den dicken Strich unter dem th */
	
		
		/* --------------- */
		background-color: lightgreen; /* white = no Hover */
	}
	
	.NaviBox-Links a {
		display: flex !important;
        align-items: center !important;    /* Vertikale Zentrierung Mobil */
        justify-content: center !important; /* Horizontale Zentrierung Mobil */
        
		text-align: center !important;  /* Zwingt den Text im Element in die Mitte */
        margin: 0 auto !important;      /* Zentriert das Element selbst, falls nötig */
		
        width: 100%;
        
		/* ------------- */
		
		min-height: 100%;
        padding: 12px;
        box-sizing: border-box;

		background-color: green;
		color: white;
		text-decoration: none; 
}
	
    .NaviBox-NaviTotal a {
		display: flex !important;
        align-items: center !important;    /* Vertikale Zentrierung Mobil */
        justify-content: center !important; /* Horizontale Zentrierung Mobil */
        
		text-align: center !important;  /* Zwingt den Text im Element in die Mitte */
        margin: 0 auto !important;      /* Zentriert das Element selbst, falls nötig */
		
        width: 100%;
		
		/* ------------- */
        min-height: 100%;
        padding: 12px;
        box-sizing: border-box; 

        background-color: green;
        color: yellow;
        text-decoration: none;
    }
	
} /* Ende Media-Screen kleiner als 768px */



/* DESKTOP Screen/Bildschirm größer als 768px: einzeiliges Box-Layout (reiner Desktop-Modus) */
@media screen and (min-width: 769px) {

    table.Navi-Box {
		display: block !important; 
		width: 100% !important;
		max-width: 100% !important;
		border-bottom: none !important; /* Entfernt den unteren grauen Strich */
    }
	
	table.Navi-Box tr {
		display: grid !important;       /* Grid zwingt alle Zellen nebeneinander */
		grid-auto-flow: column;
		/* Die folgende Zeile ist völlig ok, nur Dreamweaver versteht sie nicht. */
		grid-template-columns: repeat(7, minmax(min-content, 1fr));  /* Teilt den Platz flexibel nach Textlänge (7 Felder) auf */
		/* Die folgende Zeile ist völlig ok, nur Dreamweaver versteht sie nicht. */
		/* grid-template-columns: repeat(7, 1fr); */
		align-items: stretch !important; /* Zwingt alle Zellen auf exakt dieselbe Zeilenhöhe */
		width: 100% !important;
		border-bottom: none !important;
    }
	
	table.Navi-Box th {
		
		flex-direction: column !important; /* Stapelt "DIREKT-" und "LINK:" untereinander */
		justify-content: center !important; /* Vertikale Zentrierung */
		align-items: center !important;    /* Horizontale Zentrierung */
		text-align: center !important;
		
		/* padding: 25px 15px !important;     25 15 th bekommt das Padding direkt auf die Box */
		box-sizing: border-box !important;
		line-height: 1.2 !important;
		border-bottom: none !important; 

		
		/* ------------------ */
		background-color: lightgreen; /* white = no Hover */
	}

	table.Navi-Box th:hover {
		background-color: lightgreen; /* white = no Hover */
	}

	table.Navi-Box td {
    
  		text-align: center;
		color: white; /* */
	
		border: 1px solid #b3adad; /* Querstriche in Tabelle */
		background-color: green;
	}

	table.Navi-Box th, 
    table.Navi-Box td {	
        display: flex !important;       /* Erlaubt dem Inhalt maximale Ausdehnung */
		padding: 0 !important;          /* Kein Padding in der Zelle -> löst den toten Rand */
		margin: 0 !important;
		box-sizing: border-box !important;
    }

	/* VOLLFLÄCHIGES HOVERN FÜR DIE LINKS IN DEN TD-ELEMENTEN */
	table.Navi-Box td a,
	.NaviBox-Links a,
	.NaviBox-NaviTotal a {
		display: flex !important;       /* Aktiviert perfekte Zentrierung im Link selbst */
		align-items: center !important;  /* Vertikale Zentrierung des Textes */
		justify-content: center !important; /* Horizontale Zentrierung des Textes */
		text-align: center !important;
		
		width: 100% !important;
		height: 100% !important;       /* Zwingt den Link dank Grid auf die volle Zeilenhöhe */
		box-sizing: border-box !important;
		
		padding: 15px 15px !important;  /* 15 15 Wenn eine dieser Zahlen verändert wird, muss das "UNTEN" auch gemacht werden, sondern gibt es beim Hovern einen Größensprung */
		margin: 0 !important;
		text-decoration: none;
		line-height: 1.2 !important;
		white-space: nowrap !important; /* Verhindert ungewollte automatische Wortumbrüche */
	}
	
	/* VERHINDERT DAS ZUSAMMENZIEHEN BEIM HOVERN */
	table.Navi-Box td a:hover,
	.NaviBox-Links a:hover,
	.NaviBox-NaviTotal a:hover {
		padding: 12px 15px !important;  /*12 15 Hier ist "UNTEN"  --- ACHTUNG: die 12 muss bleiben, obwohl oben 15 steht!!! */
	}
	
	.NaviBox-Links a {
		display: flex; 
        align-items: center;    /* Text perfekt vertikal zentrieren */
        justify-content: center;/* Text perfekt horizontal zentrieren */
        
        width: 100%;
        height: 100%;           /* Zwingt den Link auf die volle Höhe der Zelle */
        
       	padding: 12px;           /* 12 Innenabstand direkt im Link */
        box-sizing: border-box;
        text-align: center;

    	background-color: green;
    	color: white;
    	/* text-decoration: none; */
	}

	.NaviBox-NaviTotal a {
		display: flex;          /* wie bei NaviBox-Links */
        align-items: center;    
        justify-content: center;
        
        width: 100%;
        height: 100%;
        
        padding: 12px;          /* 12 Innenabstand direkt im Link */
        box-sizing: border-box;
    	text-align: center;
	
		background-color: green;
  		color: yellow;
	}

} /* Ende Media-Screen größer als 768px */


/* Die Hovers werden von beiden Medias gemeinsam verwendet */
.NaviBox-Links a:hover { 
  	background-color: lightgreen;
	color: black;
	
	/* Schrift mit einem weißen Rahmen versehen */
	border: 3px solid white; /* 3 */
  	border-radius: 10px; 
	padding: 5px;   /* 10 */
}
	
.NaviBox-NaviTotal a:hover {
	background-color: lightgreen; /* lightgreen */
  	color: black;
	
	/* Schrift mit einem weißen Rahmen versehen */
	border: 3px solid white; 
  	border-radius: 10px; 
	padding: 5px;  /* 10 */
}


/* Audio-Player  OLD                                         */
/* ====================================================== 

.player {
  	preload: none;
	width: 100%;
	max-width: 100%;
}
*/


/* Audio-Player  "lazy-audio"                             */
/* ====================================================== */ 

/* Styling für alle Audio-Player */
.lazy-audio {
    display: block;      /* Verhält sich wie ein Block-Element */
    width: 100%;         /* Nutzt die volle Breite des übergeordneten Containers */
    max-width: 600px;    /* OPTIONAL: Verhindert, dass der Player auf riesigen Bildschirmen zu lang gezogen wird */
    margin: 0px auto;    /* 15px --- Zentriert den Player und sorgt für Abstand nach oben/unten */
    
    /* Vorbereitung für das Einblenden */
    opacity: 0;
    transform: translateY(10px); /* Schiebt den Player für den Effekt minimal nach unten */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Steuert die Animationsdauer */
}

/* Diese Klasse wird per JavaScript hinzugefügt, wenn der Player geladen ist */
.lazy-audio.is-visible {
    opacity: 1;
    transform: translateY(0); /* Bewegt den Player an seine echte Position */
}


/* Details                                                */
/* ====================================================== */

details {
	font-family: Arial, sans-serif;
	font-style: normal;
	font-size: 30px;
	background-color: white;
	padding: 13px 11px;	
	/* outline: 1px solid green; */
}

details[open] summary { /* details[open] zusammenschreiben */
	/* font-style: italic;    */
	/* font-weight: bolder;      */
	/* text-decoration: underline;   */
	color: red;
}

details.info summary { 
	font-family: Arial, sans-serif;
	color: black;   /* green */
	font-size: 25px;
}

details[open].info summary { /* mit "summary" beziehen sich die Attribute NUR auf die Überschrift, ansonsten auf den ganzen Text */
	/* font-style: italic; */
	/* font-weight: bold;  */
	/* text-decoration: underline; */
	color: red;
}

/*
details summary:hover {
	background-color: yellow;
}
NICHT bei Mobile Geräten zu empfehlen */

/*
summary:focus {
	background-color: black;
}
*/


/* "Tables" der Index-Seite                               */
/* ====================================================== */
table.index { 
	font-family: Arial;
	font-size: 18px;
	/* border: hidden; */
    width: 100%; /* 100vw ??? */
}
	
table.index tr:hover {
	background-color: white; /* white = no Hover */
}

table.index td {
	border: hidden;
	/* border:1px solid #b3adad; Querstriche in Tabelle */
	/* border-bottom: 1px solid #ddd; */
	width: 50vw; /* !!! 50% funktioniert nicht!!! */
	text-align:left;
	padding-right:  4%; /* */
	color: black; /* */
}

/* "Tables" der Inhaltsseiten: obere Table mit Deckblatt  */
/* ====================================================== */
/* obere Table mit dem Deckblatt in der rechten Spalte  */
table.cover { /* Deckblatt Table */
	margin-top: 0px;
	font-family: Arial, sans-serif;
	font-size: 18px;
	border:1px solid #b3adad;
	padding:5px;
	table-layout: auto;
    width: 100%;	     
}

table.cover td {
	border: hidden;
	/* border:1px solid #b3adad; Querstriche in Tabelle */
	/* border-bottom: 1px solid #ddd; */
	text-align:left;
	padding:1px;
	/* background: #ffffff; */
	color: black;
}

table.cover tr:hover {
	background-color: white; /* white = no Hover */
}

/* untere Table bei den Übungen, Liedern usw. */
table { 
	font-family: Arial, sans-serif;
	font-size: 18px;
	border:1px solid #b3adad;
	border-collapse:collapse;
	padding:5px;
	table-layout: auto;
    width: 100%;
}

table th {
	position: sticky; /* Tabellen-Header bleibt am oberen Bildschirmrand kleben */
  	top: 0;
	
	border:1px solid #b3adad; /* Querstriche in Tabelle */
	border-bottom: 10px solid #ddd;
	text-align: left;
	padding:10px;
	background: #fff9bb; /* #f0f0f0;*/
	color:  #313030;
}
table td {
	/* border:1px solid #b3adad; Querstriche in Tabelle */
	/* border-bottom: 1px solid #ddd; */
	text-align:left;
	padding:10px;
	/* background: #ffffff; wenn dieser Befehl drin ist, funktioniert Hover nicht mehr; s. auch "th" */
	color: #313030;	
}
table tr {
	border-bottom: 5px solid #ddd;
}

table tr:hover {
	background-color: #f0f0f0;
}


/* HOME-Button, um zur acaMusic.de-Startseite zu kommen */
/* ==================================================== */
p.home {
	background-color: transparent; /* Entfernt das eckige Grün im Hintergrund */
    font-size: 20px;
    padding: 0; /* Padding hier auf 0 setzen, damit der Link den Platz voll ausfüllt */
    margin: 0;
}
p.home a {
  	display: block;
    width: 100%;
    padding: 5px;
    color: white;            /* Standard: Weißer Text */
    background-color: green; /* Garantiert den grünen Hintergrund für den Link */
    text-decoration: none;
	
	/* HIER WIRD DIE RUNDUNG HINZUGEFÜGT */
    border-radius: 8px; /* 8px sorgt für eine dezente, moderne Rundung */
    
    transition: background-color 0.2s ease; /* Macht den Hover-Effekt geschmeidig */
}
p.home a:hover {
  	background-color: lightgreen;
    color: black;
}

/* Sorgt für etwas Platz zwischen dem Icon und dem Text */
p.home a::first-letter {
    margin-right: 8px;
}

/* SMARTPHONE-OPTIMIERUNG (wird nur auf Bildschirmen unter 480px Breite aktiv) */
@media screen and (max-width: 480px) {
    p.home a {
        padding: 10px 5px; /* Macht den Button nach oben und unten dicker (10px statt 5px) -> leichter zu tippen! */
        font-size: 18px;   /* Macht den Text minimal kleiner, um Zeilenumbrüche zu verhindern */
    }
}

/* Sonstige                              */
/* ===================================== */

p {
  font-family: Arial, sans-serif;  
  text-align: left;
  background-color: white;
  color: black;
  font-size: 20px;
}

p.small { 
	font-family: Arial, sans-serif;
	color: black;
	font-size: 15px;
}

p.tiny { 
	font-family: Arial, sans-serif;
	color: black;
	font-size: 12px;
}

h1 { 
  font-family: Arial, sans-serif;
  text-align: left;
  background-color: white;
  color: black;
  font-size: min( calc(32px + 1.5vw), 70px);
}

h2 {
  font-family: Arial, sans-serif;
  text-align: left;
  background-color: white;
  color: black;
  font-size: min( calc(22px + 1.0vw), 30px);  /* 24px; min( calc(26px + 0.5vw), 32px); */
}

h3 {
  font-family: Arial, sans-serif;
  text-align: left;
  background-color: white;
  color: black;
  font-size: min( calc(18px + 0.5vw), 22px);  /* 21px; min( calc(18px + 0.5vw), 22px); */
}

h4 {
  font-family: Arial, sans-serif;
  text-align: left;
  background-color: white;
  color: black;
  font-size: min( calc(15px + 0.5vw), 20px);  /* 16px; min( calc(15px + 0.5vw), 20px); */
}


ul  {
  font-family: Arial, sans-serif;
  /* list-style-type: disc;  "\1f44d"; Daumen nach oben */
  
}

li {
  font-family: Arial, sans-serif;
  /* padding: 25px; */
}

ul.details { /* Listen in aufklappbare "Details" in den Inhaltsseiten */
	font-size: min( calc(15px + 0.5vw), 20px); /* min( calc(15px + 0.5vw), 20px) */
}

/* Kurs aCP */
/* ======================================= */
.chordsSize{
   width:300px;
   height:auto;
}
 
.scalesSize{      /* scale = Tonleiter */
   width:700px;
   height:auto;
}

.stepNumbers{      /* stepnumber = Stufennummer */
   width:600px;
   height:auto;
}