@charset "utf-8";
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./roboto-v51-latin-regular.woff2') format('woff2');
}

/*
 * CSS Initialisierung (generell)
 */
* {
	margin: 0;
	padding: 0;
	hyphens: auto;
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
	box-sizing: border-box;
	font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}
html {
	scroll-behavior: smooth;
}
body {
	background: #f4f4f4;
	color: #222;
}

/*
 * Allgemeine Formatierungen
 */
 /* Hinweistext, der sich über die Breite des einschließenden DIV ausdehnt
  * Entspricht auch der Formatierung eines Tagebucheintrags. */
.hint {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 15px;
  padding: 12px 18px;
  border-radius: 6px;
  color: #34345E;
  background: #DEDEDE;
  text-align: justify;
}
/* Kopfzeile mit Burger-Button - Text als <h1> */
.burgerHeader {
	position: relative;
	display: flex;
    justify-content: space-between;
    align-items: center;
	width: 100%;
}
/* Der Burger-Button */
.burgerButton {
    font-size: clamp(1rem, 4vw, 2rem);
    background: #DEDEDE;
	color: #07819C;
    border: none;
	margin-left: 20px;
	padding: 0px 6px 4px;
	border-radius: 6px;
    cursor: pointer;
}

.burgerButton:hover {
	background-color: #A9A9A9;
}
/* Burger Pop-Up */
.burgerPopup {
	display: none;
	position: absolute;
	top: calc(100% + 5px);
	right: 20px;
	min-width: 120px;
	background-color: #E7FAFE;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	overflow: hidden;
}
/* Burger Pop-Up Visible */
.burgerPopup.open {
	display: block;
}
/* Burger Pop-Up Menu */
.burgerPopup a {
	display: block;
	padding: 4px 8px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
}
.burgerPopup a:hover {
	background-color: #DEDEDE;
}

/*
 * Tagebucheintrag ("diaryEntry") und Auswahleintrag ("choiceEntry")
 * - der Eintrag selbst folgt der Formatierung für "hint" (siehe dort)
 */
.diaryEntry, .choiceEntry {
  width: 100%;
  min-height: 7lh;
  box-sizing: border-box;
  margin: 0 0 15px;
  padding: 12px 18px;
  border-radius: 6px;
  color: #34345E;
  background: #DEDEDE;
  text-align: justify;
}
 .diaryEntry img, .choiceEntry img {
	 float: left;
	 height: 6lh;
	 width: auto;
	 margin-right: 0.5em;
 }
 .chatText, .chatForm {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 15px;
  padding: 12px 18px;
  border-radius: 6px;
  color: #07819C;
  background: #E7FAFE;
  text-align: justify;
}
.chatForm input,
.chatForm textarea {
    width: 100%;
    box-sizing: border-box;
}
.chatFormButton {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}


/*
 * Bildergalerie ("gallery") oder Tagebuch ("diary")
 */
.gallery, .diary, .choice {
	width: min(1200px, 94%);
	margin: 40px auto;
}
.gallery h1, .diary h1,.choice h1 {
	margin: 0 0 12px;
	padding-left: 6px;
	text-align: center;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 600;
}
/* Das Vorschauraster */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
/* Einzelnes Vorschaubild */
.gallery-item {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: #ddd;
	border-radius: 6px;
}
.gallery-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img, .gallery-item:focus-visible img {
	transform: scale(1.05);
	filter: brightness(0.85);
}
/* Tastatur-Fokus */
.gallery-item:focus-visible {
	outline: 3px solid #2675d9;
	outline-offset: 3px;
}
/* Text im Vorschaubild (links oben) */
.gallery-item-overlay {
	position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 6px;
}

/*
 * Lightbox (Großansicht der Bilder)
 */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	background: rgba(0, 0, 0, 0.92);
	align-items: center;
	justify-content: center;
}
.lightbox.open {
	display: flex;
}
/* Der eigentliche Inhalt. Die Größe wird durch den verfügbaren Bildschirm egrenzt. */
.lightbox-content {
	position: relative;
	width: min(94vw, 1400px);
	height: min(94vh, 1000px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 70px;
}
/* Großes Bild */
.lightbox-image {
	max-width: 100%;
	max-height: calc(100% - 84px);
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: 3px;
	/* Wichtig für das sichtbare Mitziehen. */
	will-change: transform;
	transition: transform 0.25s ease;
}
/* Bildunterschrift */
.lightbox-caption {
	width: 100%;
	margin-top: 4px;
	color: white;
	text-align: center;
	font-size: 1rem;
	line-height: 1.4;
}

/*
 * Lightbox - Navigation
 */
.lightbox-button {
	position: absolute;
	border: 0;
	padding: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-button:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.08);
}
.lightbox-button:focus-visible {
	outline: 3px solid white;
	outline-offset: 3px;
}
.lightbox-prev {
	left: 10px;
}
.lightbox-next {
	right: 10px;
}
.lightbox-close {
	position: absolute;
	top: 40px;
	right: 12px;
	width: 48px;
	height: 48px;
	border: 0;
	background: transparent;
	color: white;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
}
.lightbox-close:hover {
	color: #ddd;
/}
.lightbox-close:focus-visible {
	outline: 3px solid white;
	outline-offset: 3px;
}
/* Nummerierung */
.lightbox-counter {
	position: absolute;
	top: 48px;
	left: 20px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
}

/*
 * Lightbox - Smartphone
 */
@media (max-width: 600px) {
	.gallery {
		width: 96%;
		margin: 20px auto;
	}
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.lightbox-content {
		width: 100%;
		height: 100%;
		padding: 55px 8px 30px;
	}
	.lightbox-image {
		max-width: 100%;
		max-height: calc(100% - 70px);
	}
	/* Auf Smartphones sind die Pfeile etwas kleiner. */
	.lightbox-button {
		width: 42px;
		height: 42px;
		font-size: 1.6rem;
		background: rgba(255, 255, 255, 0.12);
	}
	.lightbox-prev {
		left: 5px;
	}
	.lightbox-next {
		right: 5px;
	}
	.lightbox-caption {
		font-size: 0.9rem;
		padding: 0 10px;
	}
}

/*
 * Reduzierte Animationen
 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}