:root {
    --flag-size: 40px; /* Standardgröße für Flaggen */
}

html {
    scroll-behavior: smooth;
}

p#welcome2 {
    font-family: 'Inknut Antiqua', Georgia, serif;
}

.heading {
	font-family: "Inknut Antiqua", serif;
	font-weight: 600;
	font-size: clamp(2.5rem, 5vw, 3rem); /* 1.5rem als Mindestgröße, 3rem als Maximalgröße */
	font-style: normal;
	line-height: 1.5em;
}

body {
	background-color: beige;
	margin: 1em;
}

main {
	max-width: 58em;
	margin: auto;
}

@font-face {
    font-family: 'DSEG7Classic';
    src: url('../fonts/DSEG7Classic-Regular.woff2') format('woff2'),
         url('../fonts/DSEG7Classic-Regular.woff') format('woff'),
         url('../fonts/DSEG7Classic-Regular.ttf') format('truetype');
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5dc; /* Beige Hintergrundfarbe */
    z-index: 9999;
    visibility: visible;		
}

.wisdom {
  font-family: "Inknut Antiqua", serif;
  font-size: 1.2rem; /* Schriftgröße */
  text-align: center; /* Zentriert alles */
  line-height: 1.5; /* Standard-Zeilenhöhe für Zitat */
  margin: 0 auto;
  padding: 1rem; /* Abstand um das Zitat */
}

.quote {
  display: inline; /* Block-Darstellung, damit es immer umbrechen kann */
  font-size: 1.2rem; /* Gleiche Schriftgröße wie der Container */
  margin-bottom: 0.2rem; /* Abstand zum Autor */
}

.quote-symbol {
  font-size: 1.2rem; /* Gleiche Schriftgröße wie das Zitat */
  display: inline; /* Verhindert Block-Darstellung */
}

.author {
  display: block; /* Block-Darstellung, um unterhalb zu erscheinen */
  font-size: 0.9rem; /* Kleinere Schrift für den Autor */
  font-style: italic; /* Kursivschrift */
  margin-top: 0.4rem; /* Etwas mehr Abstand zum Zitat */	
}

#main-content {
 		visibility: hidden; /* Versteckt, bis vollständig geladen */
		/* display: none; */
}

.section-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;
	margin-top: 1em;        
	font-family: "Inknut Antiqua", serif;
	font-weight: 400;
	line-height: 2em;
}

.section-container:nth-child(odd){
	flex-wrap: wrap-reverse;
}

/* .section-heading {
    font-variant-caps: small-caps;
} */

.section {
	min-width: 20em;
	margin-left: 1em;
	margin-right: 1em;
	flex: 3;
}

.section p {
 text-align: justify;
}

.section p.linksbuendig {
	text-align: left;
}

.section-container img {
	width: 20em; 
	flex: 2;
}

em {
	font-style: normal;
	font-weight: bold;
}

a {
    color: #0056b3; /* Dezentes Blau 
    text-decoration: underline; /* Optional */
    font-weight: 500; /* Leicht hervorgehoben */	
	
}

button {
	font-family: "Inknut Antiqua", serif;
	font-weight: 400;
	line-height: 2em;	
}

a:hover {
  background-color: rgba(0, 123, 255, 0.2); Leichte Farbe im Hover-Zustand
	color: #00408b; /* Etwas dunkler für den Hover */
}

.button-container {
	display: flex;
	justify-content: center;
	gap: 10px; /* Abstand zwischen den Buttons */
	margin-top: 40px;
}

donotapply {
.flag-button {
    --flag-size: 40px;
    background-size: var(--flag-size) var(--flag-size); /* Flaggen-Größe */
    background-repeat: no-repeat;
    background-position: center 35%; /* Flagge tiefer positionieren */
    padding: calc(var(--flag-size) + 10px) 0 5px; /* Genug Platz für die Flagge oben und kleinen Abstand unten */
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: medium;
    line-height: 1.5;
    text-align: center; /* Text zentrieren */
    display: inline-block; /* Blockdarstellung für Text unter Flagge */
    color: #333; /* Textfarbe */
    transition: background-color 0.3s ease; /* Weiche Übergänge für Hover */
}
}

.flag-button {
    --flag-width: 50px; /* Breite der Flaggen */
    --flag-height: 30px; /* Höhe der Flaggen */
    background-size: var(--flag-width) var(--flag-height); /* Rechteckige Flaggen */
    background-repeat: no-repeat;
    background-position: center 40%; /* Positioniert die Flagge mittig im oberen Bereich */
    padding: calc(var(--flag-height) + 5px) 0 5px; /* Weniger Abstand zwischen Flagge und Text */
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: small;
    line-height: 1.5;
    text-align: center; /* Text zentrieren */
    display: inline-block; /* Blockdarstellung für Text unter Flagge */
    transition: background-color 0.3s ease;  Weiche Übergänge für Hover */
    color: #333; /* Textfarbe */
		outline: none; /* Entfernt den Fokusrahmen */
    user-select: none; /* Verhindert Textauswahl beim Klicken */
    -webkit-tap-highlight-color: transparent; /* Deaktiviert das blaue Highlight bei Touch-Geräten */
}

.flag-divider {
    width: calc(var(--flag-size, 60px) * 3.5); /* 40px als Fallback */
    height: auto; /* Proportionale Höhe */
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
}

.flag-button:focus {
    outline: none; /* Deaktiviert die standardmäßige blaue Hervorhebung */
}

donotapply {
.flag-button:hover {
	background-color: rgba(0, 123, 255, 0.2); Leichte Farbe im Hover-Zustand
	/* background-color: rgba(0, 255, 188, 0.5); /* Leichte Farbe im Hover-Zustand */ */
}
}
/* Spezifische Hintergründe für die Schaltflächen */
#switchToGerman {
  background-image: url('../figures/german.webp');
}

#switchToEnglish {
  background-image: url('../figures/english.webp');
}

.info-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url('../figures/direction.png');
    background-size: contain;
    background-repeat: no-repeat;
    text-decoration: none;
    margin-left: 5px;
		margin-right: 5px;
}

.hyphenate {
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;		
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

#old-entries {
    margin-top: 20px;
    border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.collapsible-heading {
	font-family: "Inknut Antiqua", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5em;	
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	user-select: none;
}



#pageViews {
    margin-top: 20px;
    border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
    cursor: pointer;
}



#toggle-arrow {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.2rem;
    transition: transform 0.3s ease; /* Animation für Rotation */
}

#toggle-arrow.rotate {
    transform: rotate(180deg); /* Pfeil nach oben */
}

#toggle-arrow2 {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.2rem;
    transition: transform 0.3s ease; /* Animation für Rotation */
}

#toggle-arrow2.rotate {
    transform: rotate(180deg); /* Pfeil nach oben */
}


.tooltip {
    position: relative;
    cursor: pointer; /* Zeigt an, dass es interaktiv ist */
    color: #0056b3; /* Dezentes Blau */
    text-decoration: underline;
    font-weight: 500; /* Leicht hervorgehoben */	
		
}

.tooltip::after {
    content: attr(data-tooltip); /* Tooltip-Text aus data-tooltip */
    position: absolute; /* Relativ zum Tooltip-Element */
    bottom: 110%; /* Abstand zwischen Schlüsselwort und Tooltip */
    left: 50%; /* Horizontal zentrieren */
    transform: translateX(-50%); /* Exakte Zentrierung */
    max-width: 50vw; /* Begrenze die Breite auf 50% des Viewports */
    min-width: 50vw; /* Halte die Breite konstant */
    white-space: normal; /* Erlaube Umbruch für lange Texte */
    word-break: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: anywhere; /* Zusätzlicher Schutz für lange Wörter */
    background-color: #f9f9f9; /* Helleres Grau für den Hintergrund */
    color: #222; /* Dunklere Schriftfarbe */
    padding: 15px; /* Mehr Abstand innen */
    border: 1px solid #bbb; /* Dezenter Rahmen */
    border-radius: 25px; /* Stärker abgerundete Ecken für Schalenform */
    font-family: Arial, sans-serif; /* Serifenlose Schrift */
    font-size: 1rem; /* Größere Schrift */
    line-height: 1.6; /* Angenehmere Zeilenhöhe */
    text-align: left; /* Links ausrichten */
    box-shadow: 
        inset 0 12px 25px rgba(0, 0, 0, 0.3), /* Tieferer Schatten oben für Ränder */
        inset 0 -10px 15px rgba(255, 255, 255, 0.9), /* Stärkerer Glanz unten für den Boden */;
    opacity: 0; /* Unsichtbar */
    visibility: hidden; /* Unsichtbar */
    transition: opacity 0.3s ease, transform 0.2s ease; /* Weicher Übergang */
    z-index: 999; /* Tooltip im Vordergrund */
}

.tooltip:hover::after,
.tooltip:focus::after {
    opacity: 1; /* Tooltip sichtbar */
    visibility: visible; /* Tooltip sichtbar */
    transform: translateX(-50%) translateY(0); /* Kein Schwebeeffekt */
}

@media (max-width: 768px) {
    .tooltip::after {
        max-width: 80vw; /* Breite auf 80% des Viewports */
        min-width: 80vw; /* Breite auf 80% des Viewports */
        left: 50%; /* Zentriere horizontal im Viewport */
        top: 25%; /* Zentriere vertikal im Viewport */
        bottom: auto; /* Deaktiviere die untere Ausrichtung */
        transform: translate(-50%, -50%); /* Exakte Zentrierung */
        position: fixed; /* Tooltip relativ zum Viewport, nicht zum Schlüsselwort */
    }
}

footer {
	 text-align: center;
	font-size: small;
}

footer p {
	margin: 0rem 0;
}

/* Alle für die Kaiser-Präsentation */
.emp-container {
    border: 2px solid #000;
    padding: 10px;
    background-color: #fff;
		background: linear-gradient(45deg, #d9c6a5, #c4a484);		
    text-align: center;
    max-width: 400px; /* Mehr Platz für größere Karten */
    width: 70%; /* Dynamisch an die Bildschirmbreite anpassen */
    margin: 0 auto; /* Zentriere den Container horizontal */		
}

.emp-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertikale Zentrierung der Inhalte */
    margin-bottom: 10px;
    font-weight: bold;
}

.emp-header .arrow {
    font-size: 18px;
}

.emp-header .title {
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
}

/* Grid-Layout für die Namen */
.emp-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Spalten */
    gap: 15px; /* Abstand zwischen den Karten */
    justify-content: center; /* Horizontale Zentrierung */
    align-content: center; /* Vertikale Zentrierung, falls notwendig */
}

/* Styling für die Karten */
.emp-grid-item {
    font-family: Arial, sans-serif;
    position: relative;
    border: 1px solid #000;
    text-align: center;
    background-color: #A9A9A9;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriere den Inhalt vertikal */
    align-items: center; /* Zentriere den Inhalt horizontal */
    font-size: 100%; /* Basisschriftgröße */
    width: 100%; /* Breite relativ zur Zelle */
    aspect-ratio: 1 / 1; /* Quadratische Form */
    height: 100%; /* Sicherstellen, dass die Karte die volle Höhe einnimmt */
		box-sizing: border-box; /* Bezieht border und padding in die Größe ein */
		overflow: hidden; /* Überschüssigen Inhalt ausblenden */
		padding: 5px; /* Etwas Innenabstand */
}

/* Größerer Buchstabe im oberen Teil */
.emp-grid-item .first-letter {
    font-size: 2em; /* Schriftgröße relativ zur Basisschriftgröße der Karte */
    font-weight: bold;
    line-height: 0.8; /* Verringert den Abstand nach unten */
		margin-bottom: 0; /* Entferne unnötigen Abstand */
		color: #8B4513; /* Braun */
}

/* Kleinerer Rest des Namens im unteren Teil */
.emp-grid-item .remaining-name {
    display: flex; /* Flexbox zur zentrierten Ausrichtung */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    /* font-size: min(3vw, 1em); Schriftgröße passt sich dynamisch an */
		font-size: clamp(0.5rem, 2vw, 1rem); /* Dynamisch skalierend zwischen 0.8rem und 1rem */
    white-space: nowrap; /* Kein Zeilenumbruch */
    overflow: hidden; /* Überschüssigen Text ausblenden */
    text-align: center; /* Text zentrieren */
    max-width: 100%; /* Fülle die Karte aus */
    max-height: 100%; /* Nutze den gesamten Platz */
    line-height: normal; /* Kein zusätzlicher Abstand */
		color: #FFFFF0; /* Elfenbein */
}

/* Styling für runde Pfeil-Schaltflächen */
.arrow {
    display: flex;
    justify-content: center;
    align-items: center; /* Perfekte Zentrierung im Kreis */
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 18px;
    background-color: #eaeaea;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
    -webkit-user-select: none; /* Für ältere Browser */
    -ms-user-select: none;     /* Für ältere IE-Versionen */		
}

.arrow:hover {
    background-color: #d4d4d4;
}

.emperor-spot {
    position: relative;
    border: 3px solid gold;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    background-color: rgba(255, 255, 255, 0.5); /* Weniger deckender Overlay-Hintergrund */
    color: black; /* Text bleibt klar lesbar */
    overflow: hidden; /* Für das Pseudo-Element */
}

.emperor-spot::before {
    content: ""; /* Erstelle ein leeres Pseudo-Element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../figures/crown.webp'); /* Bild einfügen */
    background-size: cover; /* Skaliert das Bild */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Wiederhole das Bild nicht */
    filter: opacity(20%) brightness(90%); /* Sichtbarer und leicht abgedunkelter Effekt */
    z-index: 0; /* Bild liegt hinter dem Text */
}

.emperor-spot .first-letter,
.emperor-spot .remaining-name {
    position: relative;
    z-index: 1; /* Text bleibt vor dem Hintergrund */
}

.emperor-spot .remaining-name {
	color: black;
}

.thumb-symbol {
    position: absolute;
    top: -6px; /* Näher an den oberen Rand */
    right: 1px; /* Näher an die rechte Ecke */
    font-size: 0.8em; /* Reduzierte Größe des Daumen-Symbols */
    color: green; /* Farbe des Symbols bleibt grün */
    visibility: hidden; /* Standardmäßig ausgeblendet */
		/*transform: translateY(-10%);  Verschiebe das Symbol etwas nach oben */
}

.thumb-symbol.visible {
    visibility: visible; /* Sichtbar, wenn aktiviert */
}

@media (max-width: 600px) {
    .emp-grid-item {
        padding: 1px; /* Reduziere den Abstand */
        margin: 1px;
    }
}

.hover-image {
	display: none;
	position: absolute;
	z-index: 100;
	padding: 2px;
	background: #C19A6B;
	border: 2px solid #8B5A2B;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
	.image-container {		
		display: flex;
    justify-content: center;
	}
}

.hover-image img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.num {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	user-select: none;
}

.display-container {
    display: flex;
    flex-direction: column;
		container-type: size;
}

.chess-clock {
	display: flex;
  justify-content: center;
}

.dgt-clock {	
	display: flex;  
	width: 40%;
	height: auto;	
	max-width: 40%;
	justify-content: center;
}

@media (max-width: 768px) {
	.dgt-clock {	
		width: 75%;
		max-width: 75%;
	}
}


.display {
    /* border: 1px solid red; */
		display: flex;
		height: 100%;
    justify-content: center;
		align-items: center;
    font-weight: bold;		
    text-align: center;
		container-type: size;
		color: #333333;
}

.display p {
	font-size: 60cqh; /* 90% der Containerhöhe */
	font-family: 'DSEG7Classic', sans-serif;
	transform: skewX(-10deg);	
	margin: 0; /* Damit kein unnötiger Abstand entsteht */
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.display1 {
	z-index: 101;
}

.display2 {
		z-index: 101;
}