/* Mobile-First Teil! */ 
/*@media (max-width: 768px) { */
/*******************************************************************/
/* Allgemeine Settings */
/*******************************************************************/	
.center-wrapper {
	max-width: 100%;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
	mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
/*******************************************************************/
/* Titelzeile */
/*******************************************************************/	
.content-left {
	display: flex;
	flex: 1;
}
.tengugram-title {
	display: flex;
	flex: 0 0 auto;
	text-align: center;
	margin-bottom: 10px;
	width: 180px;
	padding: 0 10px;
	margin-top: 15px;
}
.content-right {
	display: flex;
	flex: 1;
	justify-content: flex-end;
	padding: 30px 10px 10px 0px;
	gap: 5px;
}

/*******************************************************************/
/* Das Admin-Drop-Down */
/*******************************************************************/	
.admin-menu-container {
    position: relative;
    display: inline-block;
}

/* Der Button mit den 3 Punkten */
.admin-dots-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-stars); /* Deine Wunschfarbe */
    border-radius: 50%;
	transition: background-color 0.3s ease;	
}
/* HIER NEU: Wenn der Sortier-Modus aktiv ist, schalten die Punkte um */
.admin-dots-btn.sort-mode-active .dot {
    background-color: var(--color-warn);
}

/* Das Dropdown-Menü */
.dropdown-content {
    display: none; /* Standardmäßig aus */
    position: absolute;
    right: 0;
    background-color: #ffffff;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 5px;
}

/* Links im Dropdown */
.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-family: sans-serif;
    font-size: 14px;
	text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Trennlinie */
.dropdown-content hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 4px 0;
}

/* Klasse zum Anzeigen (via JS gesteuert) */
.show {
    display: block;
}
/*******************************************************************/
/* Die Highlights */
/*******************************************************************/
.highlights-row {
 	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-width: none;
	grid-template-columns: repeat(3, 1fr);
	padding: 0px 0;
	max-width: 1200px;
}
.highlights-row::-webkit-scrollbar {
	display: none;
}
.highlight-row a {
	text-decoration: none;
}
.highlight-icon {
	width: 80px;
	height: 80px;
	border: 1px solid var(--color-stars);
	border-radius: 10%;
	padding: 0;
	cursor: pointer;
	object-fit: cover;
	margin-bottom: 5px;
    box-shadow: 5px 5px 5px 0px rgba(100,100,100,0.3);	
}
/* --- BASIS-STYLING (Für alle Geräte) --- */
.highlight-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
/* --- REINE ADMIN-SORTIER-REGELN --- */
.admin-sort-active .highlight-wrapper {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.admin-sort-active .highlight-wrapper:active {
    cursor: grabbing;
}

/* 1. Zustand: Das Element, das du gerade ANFASST / ZIEHST */
.admin-sort-active .highlight-wrapper.is-dragging {
    opacity: 0.35;
    transform: scale(0.9); /* Wird etwas kleiner, um zu zeigen, dass es "abgehoben" ist */
    border: 1px dashed #5bc0de; /* Gestrichelter Rahmen als Platzhalter-Effekt */
    box-shadow: none;
}

/* 2. Zustand: Das Element, ÜBER das du gerade drüberziehst (Die Lücke öffnet sich) */
.admin-sort-active .highlight-wrapper.drag-over {
    transform: scale(1.18); /* Deutliches Vergrößern auf dem Smartphone */
    border-color: #5bc0de;
    box-shadow: 0 4px 15px rgba(91, 192, 222, 0.4); /* Leuchtender Effekt */
    z-index: 10;
}
.hl-title {
	margin: 0;
	text-align: center;
	color: var(--color-text);
	font-weight: bold;
	text-decoration: none;
	font-size: 10px;
}
/*******************************************************************/
/* Admin Overlay (Mobile First) */
/*******************************************************************/
/* Admin Overlay Basis */
.admin-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.admin-overlay.active {
	display: flex;
}

/* Content Box */
.admin-overlay-content {
	background-color: #121212;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	width: 100%;
	max-width: 600px;
	max-height: 80vh !important;
	overflow-y: auto;
	padding: 25px;
	box-sizing: border-box;
}

.admin-overlay-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 15px;
	margin-bottom: 20px;
}

.admin-overlay-header h3 {
	margin: 0;
	color: #ffffff;
	font-size: 1.2rem;
}

.admin-close-btn {
	background: none;
	border: none;
	color: #ffffff;
	font-size: 28px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
}

/* Formular-Elemente */
.admin-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 15px;
}

.admin-form label {
	color: #cccccc;
	font-size: 0.9rem;
}

.admin-form input[type="text"] {
	background-color: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	padding: 10px;
	border-radius: 3px;
	font-size: 0.95rem;
}

.admin-form input[type="text"]:focus {
	border-color: var(--color-accent);
	outline: none;
}

.admin-form-divider {
	border: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.1);
	margin: 20px 0;
}

/* Dynamische Reihen */
.image-upload-row {
	display: flex;
	gap: 10px;
	align-items: center;
	background-color: #181818;
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 10px;
	border-left: 3px solid var(--color-stars); /* Kleiner Akzentbalken links */
}

.row-inputs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.image-upload-row input[type="file"] {
	color: #cccccc;
	font-size: 0.85rem;
}

.remove-row-btn {
	background: none;
	border: none;
	color: #ff5c5c;
	font-size: 24px;
	cursor: pointer;
	padding: 0 5px;
}
.admin-overlay-content.dashboard-wide {
	max-width: 750px;
}

.table-responsive {
	width: 100%;
	overflow-x: auto;
	margin-top: 10px;
}

/* Edle, minimalistische Admin-Tabelle */
.admin-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.95rem;
}

.admin-table th, 
.admin-table td {
	padding: 12px 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-table th {
	background-color: #161616;
	color: #999999;
	font-weight: 500;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.admin-table tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

/* Custom Checkboxen Style-Anpassung für den Dark-Mode */
.admin-table input[type="checkbox"] {
	accent-color: var(--color-stars);
	transform: scale(1.1);
	cursor: pointer;
}
.admin-table input[type="text"] {
	width: 150px; 
	background:rgba(0,0,0,0.3); 
	color: var(--color-text); 
	border: 1px solid var(--color-border2);
	padding:5px; 
	font-size:13px;"
}
.admin-table-thumb {
	width: 50px;
	height: 50px;
	border-radius: 3px;
	overflow: hidden;
	background-color: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.admin-table-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Schneidet das Bild sauber quadratisch zu */
}
#existing-media-container img,
#existing-media-container video {
    max-width: 60px;
    max-height: 60px;
    object-fit: cover;
    border-radius: 4px;
}
/* Platzhalter, falls kein Bild existiert */
.thumb-placeholder {
	color: #444444;
	font-size: 1.2rem;
	font-weight: bold;
}

/* Vertikale Zentrierung des Titels neben dem Bild */
.admin-table td {
	vertical-align: middle;
}

.admin-table-title {
	font-weight: bold;
	color: #ffffff;
	font-size: 1rem;
}
/* Roter Löschbutton */
.btn-danger {
	background-color: #bc3a3a;
	color: #ffffff;
	border: none;
	padding: 10px 25px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.95rem;
	transition: background 0.2s;
}

.btn-danger:hover {
	background-color: #a32f2f;
}
/* Buttons */
.add-row-btn {
	background: none;
	border: 1px dashed var(--color-stars);
	color: var(--color-stars);
	padding: 10px;
	width: 100%;
	border-radius: 3px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background 0.2s;
}

.add-row-btn:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	margin-top: 20px;
}

.btn-cancel {
	text-decoration: none;
	color: #cccccc;
	padding: 10px 20px;
	font-size: 0.95rem;
	line-height: 2;
}

.btn-submit {
	background-color: var(--color-accent);
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.95rem;
}

.btn-submit:hover {
	opacity: 0.9;
}

.admin-error {
	color: #ff5c5c;
	background-color: rgba(255, 92, 92, 0.1);
	padding: 10px;
	border-radius: 3px;
	font-size: 0.9rem;
}
/*******************************************************************/
/* Story Overlay (Mobile First) */
/*******************************************************************/
/* Verhindert die blaue Markierung/Überlagerung beim Halten */
.story-overlay,
.story-content-wrapper,
.story-tap-zone,
.story-image {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none;     /* IE 10+ und Edge */
	user-select: none;         /* Standard (Chrome, Firefox, etc.) */
	
	/* Speziell für mobile Browser (Verhindert das standardmäßige Highlight beim Tappen) */
	-webkit-tap-highlight-color: transparent;
}
.story-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* dvh (dynamic visual height) verhindert Probleme mit mobilen Browser-Leisten */
	height: 100dvh; 
	background-color: #000000;
	z-index: 9999;
	display: none; /* Standardmäßig unsichtbar */
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

/* Wird via JS getriggert */
.story-overlay.active {
	display: flex;
}

/* 1. Indicators-Leiste ganz oben */
.story-indicators {
	display: flex;
	width: 100%;
	gap: 5px;
	padding: 10px 15px 5px 15px;
	box-sizing: border-box;
	z-index: 10;
}
.story-highlight-title {
	color: var(--color-text);
	font-size: 0.9rem;
	font-weight: bold;
	padding: 5px 15px 0 15px;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	line-height: 1.2;
	min-height: 1.2rem;	
}
/* Der graue, transparente Hintergrund des leeren Balkens */
.indicator-bar {
	height: 3px;
	flex: 1;
	background-color: rgba(255, 255, 255, 0.25); /* Leicht sichtbar auf dunklem Grund */
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

/* Das innere Element, das den Fortschritt darstellt */
.progress-fill {
	height: 100%;
	width: 0%; /* Standardmäßig leer */
	display: block;
}

/* Zustand: Bild wurde bereits komplett gesehen -> Statisch gefüllt in Orange */
.progress-fill.completed {
	width: 100% !important;
	background-color: var(--color-stars) !important;
	animation: none !important;
}

/* Zustand: Aktuelles Bild wird gerade abgespielt -> Animation in Akzentfarbe */
.progress-fill.animating {
	background-color: var(--color-accent);
	animation-name: playStory;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

/* Wenn gedrückt gehalten wird: Animation einfrieren */
.progress-fill.paused {
	animation-play-state: paused !important;
}

/* Die reine Breiten-Animation von 0 auf 100% */
@keyframes playStory {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

/* 2. Schließen-Kreuz */
.story-close {
	position: absolute;
	top: 25px;
	right: 15px;
	background: none;
	border: none;
	color: var(--color-text);
	font-size: 35px;
	line-height: 1;
	cursor: pointer;
	z-index: 11;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 3. Bildbereich (ca. 70% Höhe) */
.story-content-wrapper {
	position: relative;
	width: 100%;
	max-height: 70dvh;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #050505; /* Subtiler Kontrast zum tiefen Schwarz */
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;	
}
/* Container für Leiste und Titel gemeinsam */
.story-header {
	width: 100%;
	display: flex;
	flex-direction: column;
	/* Erzeugt den gewünschten Abstand von 35px zum darunterliegenden Bild */
	padding-bottom: 35px; 
	box-sizing: border-box;
}
.story-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Verhindert das Beschneiden des Bildes */
	z-index:2;
	-webkit-user-drag: none;
	user-drag: none;	
	transition: opacity 0.2s ease-in-out;
	opacity: 1;	
}
.story-image.fade {
	opacity: 0;
}
/* Hilkklasse: Setzt die Deckkraft sofort auf 0, ohne Animation */
.story-image.instant-hide {
	transition: none !important;
	opacity: 0 !important;
}
/* Unsichtbare Klick-Zonen für links/rechts Navigation */
.story-tap-zone {
	position: absolute;
	top: 0;
	height: 100%;
	width: 25%; /* Die äußeren 25% des Bildschirms reagieren auf Taps */
	z-index: 5;
	-webkit-tap-highlight-color: transparent;
}
.story-tap-zone.left { left: 0; }
.story-tap-zone.right { right: 0; width: 75%; } /* Größere Zone rechts zum Weiterklicken */

/* 4. Textbereich unten (Restliche Höhe) */
.story-caption-wrapper {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 15px 20px 30px 20px;
	box-sizing: border-box;
	overflow-y: auto; /* Falls der Text mal länger sein sollte */
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.story-caption-content {
	width: 100%;
	max-width: 500px; /* Zentrierte Box für optimale Lesbarkeit */
}

/* Zarte Trennlinie zwischen Bild und Text */
.story-divider {
	border: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.15); 
	margin: 0 0 15px 0; /* 15px Abstand zum Text darunter */
	width: 100%;
	visibility: visible;
}
.story-text {
	color: var(--color-text);
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	height: 80px;
	text-align: center;
	width: 100%;
	max-width: 500px; /* Begrenzung für bessere Lesbarkeit auf Tablets */
}
/*******************************************************************/
/* Die Beiträge */
/*******************************************************************/
/* --- ANIMATIONEN --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lbSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes highlightFade {
    0% { background-color: #F0EAD6; color: #000; }
    30% { background-color: rgba(240, 234, 214, 0.4); color: #F0EAD6; }
    100% { background-color: transparent; }
}
.tengugram-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	padding: 0px 0;
	max-width: 1200px;
}
.grid-item {
	position: relative;
	aspect-ratio: 3 / 4;
	cursor: pointer;
	overflow: hidden;
	background: #222;
	opacity: 0;
	animation: fadeInScale 0.7s ease-out forwards;
	border-radius: 8px;
}
.delete-btn-overlay {
	position: absolute;
	top: 5px;
	left: 5px;
	background: rgba(255, 0, 0, 0.8);
	color: white;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.2s;
	font-weight: bold;
	font-family: Arial, sans-serif;
}
.grid-item:hover .delete-btn-overlay {
	opacity: 1;
}
.grid-item img, .grid-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.grid-item-overlay, .multi-image-indicator {
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
	padding: 3px 6px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #F0EAD6;
	animation: fadeInUp 0.6s ease-out forwards;
	pointer-events: none;
}
.multi-image-indicator {
	top: 8px;
	right: 8px;
	z-index: 5;
}
.grid-item-overlay {
	bottom: 8px;
	left: 8px;
}
.grid-item-overlay .icon-svg, .multi-image-indicator .icon-svg {
	width: 10px !important;
	height: 10px !important;
	stroke: #F0EAD6 !important;
	fill: none !important;
	stroke-width: 2;
}
.grid-item-overlay span, .image-number {
	color: #F0EAD6;
	font-size: 10px;
	font-weight: 300;
	font-family: sans-serif;
}
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 9999;
	overflow: hidden;
	backdrop-filter: blur(8px);
	align-items: center;
	justify-content: center;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.lightbox::-webkit-scrollbar {
	display: none;
}
/*******************************************************************/
/*******************************************************************/

/* Desktop Teil */
@media (min-width: 769px) {
.highlights-row {
	max-width: 800px;
}	
.highlight-icon {
	width: 120px;
	height: 120px;
	border-radius: 15%;
}
.hl-title {
	font-weight: bold;
	font-size: 12px;
}
.admin-table input[type="text"] {
	width: 400px; 
}
#existing-media-container img,
#existing-media-container video {
    max-width: 180px;
    max-height: 180px;
}	
}
/* 4K Desktop Teil */
@media (min-width: 2048px) {
}