:root {
  --bg:      #000;
  --text:    #000;
  --white:   #fff;
  --muted:   #999;
  --accent:  #0ff;
  --youtube: #f00;
}

a[href*="youtube.com"]:hover {
	color: var(--youtube) !important;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	text-decoration: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

* {
	text-decoration: none;
}

button, input[type="submit"], input[type="button"] {
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
}

h1 {
	color: var(--text);
	text-transform: uppercase;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 40px;
	margin: 0;
}

h2 {
	color: var(--text);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 30px;
	margin: 0;
}

h3 {
	color: var(--muted);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 30px;
	margin: 0;
}

h4 {
	color: var(--muted);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 30px;
	margin: 0;
}

p {
	color: var(--muted);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	margin: 0;
}

a {
	color: var(--muted);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	margin: 0;
}

a:hover {
	color: var(--accent);
}

a[href*="instagram.com"]:hover {
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    background-size: 150% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ig-gradient 1.5s ease-in-out infinite alternate;
}

@keyframes ig-gradient {
    from { background-position: 0% center; }
    to   { background-position: 100% center; }
}

/* ── + Tile ── */
.tile-add {
	background: var(--accent);
	aspect-ratio: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	color: var(--bg);
	user-select: none;
}

.tile-add:hover {
	background: var(--white);
	color: var(--accent);
}

.tile-add::before {
	content: '+';
	font-size: 3rem;
	font-weight: 300;
	line-height: 1;
}

/* ── Disabled items (admin only) ── */
.disabled-item {
	opacity: 0.35;
}

/* ── Masonry ── */
.masonry-wrap {
	opacity: 0;
	transition: opacity 0.2s;
	width: 100%;
}

.masonry-wrap.masonry-ready {
	opacity: 1;
}

.masonry-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.masonry-col > * {
	display: block;
	width: 100%;
}

.masonry-col img {
	width: 100%;
	display: block;
}

.pages {
	padding-top: 100px;
}

.pages main {
	padding: 0 20px;
	padding-bottom: 20px;
}

.homepage {
	background-color: var(--bg);
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	text-align: center;
}

.logo {
	width: 100%;
	position: fixed;
	top: 26px;
}

.logo a {
	color: var(--text);
	text-transform: uppercase;
	text-decoration: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 40px;
}

.logo a:hover {
	color: var(--accent);
}

.navigation {
	background-color: var(--bg);
	position: fixed;
	display: flex;
	justify-content: center;
	place-items: center;
	bottom: 0;
	width: 100%;
	height: 34px;
	gap: 10px;
}

.navigation a {
	color: var(--accent);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	text-decoration: none;
	border-top: 4px;
}

.navigation a:hover {
	color: var(--muted);
}

.lang-dropdown {
	position: relative;
	display: inline-block;
	margin-left: 16px;
}

.lang-dropdown summary {
	list-style: none;
	cursor: pointer;
	color: var(--muted);
	font-size: 20px;
	font-family: inherit;
	text-decoration: none;
	user-select: none;
}

.lang-dropdown summary:hover { color: var(--accent); }

.lang-dropdown summary::-webkit-details-marker { display: none; }

.admin-editable {
	outline: none;
	cursor: text;
}
.admin-editable:hover,
.admin-editable:focus {
	outline: 1px dashed var(--muted);
}
.admin-editable:empty::before {
	content: attr(placeholder);
	color: #555;
	pointer-events: none;
}

.lang-dropdown ul {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	list-style: none;
	padding: 4px 0;
	margin: 0;
	background: var(--bg);
	border: 1px solid #333;
	z-index: 100;
}

.lang-dropdown ul li a {
	display: block;
	padding: 4px 14px;
	color: var(--muted);
	font-size: 1rem;
	font-family: inherit;
	text-decoration: none;
}

.lang-dropdown ul li a:hover {
	color: var(--white);
}

.lang-dropdown ul li a.current {
	text-decoration: underline;
}

.home-video-container {
	width: 100%;
	height: 100vh;
	position: relative;
	scroll-snap-align: start;
}

.home-video {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Groesse setzt layoutVideo() in index.php — das Video wird ueber das
   quadratische Maskenloch hinaus skaliert, damit es dieses fuellt. */
.home-video iframe {
	pointer-events: none;
	border: 0;
	flex: none;
}

/* Ton-Schalter: deckt als Flaeche das sichtbare Video ab, damit ein Klick
   irgendwo im Quadrat den Ton umschaltet. Position/Groesse via layoutVideo(). */
#video-toggle {
	position: absolute;
	z-index: 2;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

#video-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.home-video-frame {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	width: 100%;
	height: 100vh;
}

.home-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-main {
	display: flex;
	height: 100vh;
	scroll-snap-align: start;
}

.home-main-scroll-box {
	position: relative;
	flex: 0 0 50%;
	height: 100vh;
	overflow: hidden;
	display: block;
}

/* Titel invertiert in Graustufen: das Foto wird per background-clip in die
   Buchstaben gesampelt und dort grayscale+invert gefiltert. mix-blend-mode
   scheidet aus, weil difference pro Farbkanal rechnet und damit immer die
   Komplementaerfarbe liefert statt Schwarz/Weiss.
   Das Element deckt die ganze Box ab, damit background-size/-position exakt
   dem object-fit:cover des <img> entsprechen und der Ausschnitt passt. */
.home-main-scroll-box {
	--caption-x: 20px;
	--caption-y: 40px;
	--caption-date-lh: 18px;
}

.home-caption-title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 var(--caption-x) calc(var(--caption-y) + var(--caption-date-lh));
	background-image: var(--hero-img);
	background-size: cover;
	background-position: center;
	-webkit-background-clip: text;
	background-clip: text;
	filter: grayscale(1) invert(1) contrast(12);
	pointer-events: none;
}

.home-caption-title h1 {
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.home-caption-date {
	position: absolute;
	bottom: var(--caption-y);
	left: var(--caption-x);
	z-index: 1;
}

.home-caption-date h3 {
	color: var(--muted);
	font-size: 14px;
	font-style: italic;
	line-height: var(--caption-date-lh);
}

.home-main-scroll-about {
	flex: 0 0 50%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.home-main-scroll-about h3, .home-main-scroll-about h1 {
	color: var(--white);
}

.home-main-scroll-about:hover {
	background-color: var(--accent);
}

.home-main-scroll-about:hover h1 {
	color: var(--text);
}

.home-main-scroll-about:hover h3 {
	color: var(--text);
}

.home-slideshow {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: var(--bg);
	cursor: pointer;
	scroll-snap-align: start;
}

.home-slideshow-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease;
	display: block;
}

.home-slideshow-slide.active {
	opacity: 1;
}

.home-slideshow-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.index-main {
}

.index-main div {
	width: 100%;
	display: block;
	margin-bottom: 20px;
}

.index-main-masonry {
	width: 100%;
	padding: 20px 0;
}

.index-main-masonry img {
	width: 100%;
	margin-bottom: 10px;
}

.index-main-masonry h2 {
	margin: 0;
}

.index-main-masonry h3 {
	font-size: 14px;
	font-style: italic;
	margin: 0 0 14px;
}

.index-main-masonry .masonry-col {
	gap: 28px;
	padding: 0 7px;
}

.series-tile.drag-over { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile-add.drag-over { background: var(--text); color: var(--accent); }

.index-main-masonry .masonry-col:first-child {
	padding-left: 0;
}

.index-main-masonry .masonry-col:last-child {
	padding-right: 0;
}

.gallery-main {
	padding: 0 20px;
}

.gallery-main-title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.gallery-main-title h4 {
	font-size: 14px;
	white-space: nowrap;
}

.gallery-main-title h1 {
	font-size: 30px;
	font-weight: normal;
	text-transform: none;
}

.gallery-main-caption {
	padding: 0;
}

.gallery-main-caption h3,
.gallery-main-caption p {
	font-size: 16px;
	font-weight: normal;
	color: var(--muted);
	margin: 0;
}

.gallery-main-caption a {
	font-size: 16px;
	font-weight: normal;
	color: var(--accent);
	text-decoration: none;
}

.gallery-main-caption a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.gallery-main-masonry {
	width: 100%;
	padding: 20px 0;
}

.gallery-main-masonry-elements {
	overflow: hidden;
}

.gallery-main-masonry-elements img {
	width: 100%;
}

.gallery-main-masonry .masonry-col {
	gap: 12px;
	padding: 0 6px;
}

.gallery-main-masonry .masonry-col:first-child {
	padding-left: 0;
}

.gallery-main-masonry .masonry-col:last-child {
	padding-right: 0;
}

.about-main {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	overflow: hidden;
}

.about-main img {
	width: 100%;
	display: block;
}

.about-main-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.about-main-text-links {
	margin: 60px 0;
	display: flex;
	flex-direction: column;
}

.about-main-text-links a {
	color: var(--muted);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 30px;
	margin: 0;
	text-decoration: none;
}

.about-main-text-links a:hover {
	color: var(--accent);
}

.preview {
	display: grid;
	grid-template-columns: 1fr 3fr;
	background-color: var(--bg);
}

.preview-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 25%;
	z-index: 1000;
	text-align: center;
}

.preview-logo {
	width: 25%;
	position: fixed;
	top: 26px;
	left: 0;
}

.preview-logo a {
	color: var(--text);
	text-transform: uppercase;
	text-decoration: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 40px;
}

.preview-logo a:hover {
	color: var(--accent);
}

.preview-navigation {
	background-color: var(--bg);
	position: fixed;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	overflow-x: auto;
	bottom: 0;
	left: 0;
	width: 25%;
	height: 34px;
	gap: 10px;
	padding: 0 12px;
	scrollbar-width: none;
}

.preview-navigation::-webkit-scrollbar {
	display: none;
}

.preview-navigation a {
	color: var(--accent);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.preview-navigation a:hover {
	color: var(--muted);
}

.preview-sidebar {
	width: 100%;
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.preview-sidebar footer {
    height: auto;
    min-height: 68px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 44px;
}

.preview-sidebar footer .footer-impressum {
    margin-left: 0;
}

.preview-main {
	margin: 100px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex: 1;
}

.preview-main img {
	width: 100%;
	padding: 0;
}

.preview-thumb.active img {
	outline: 2px solid var(--accent);
}

.preview-image {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
}

.preview-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

footer {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 6px;
	background-color: var(--bg);
	height: 68px;
	margin-top: auto;
}

.footer-impressum {
	margin-left: 16px;
	color: var(--muted);
}

/* ── About: bildschirmfuellend, ohne Scrollen ─────────────────────────────
   Die Seite ist genau so hoch wie das Fenster und scrollt nicht. Das Raster aus
   .about-main bleibt dabei bestehen: erstes Drittel Bild, die zwei restlichen
   Text.

   Der Rahmen ist also die Rasterspalte mal die verfuegbare Hoehe, und das Bild
   fuellt ihn vollstaendig — object-fit: cover schneidet weg, was nicht
   hineinpasst. Das ist bewusst so: der Rahmen richtet sich nach dem Layout der
   Seite, nicht nach dem Seitenverhaeltnis des Bildes.

   Nur ab 769px. Darunter stehen Bild und Text untereinander, das passt nicht
   ohne Scrollen auf eine Fensterhoehe; dort gilt die Regel im Mobile-Block. */
@media (min-width: 769px) {
	body.about {
		height: 100vh;
		overflow: hidden;
	}

	/* flex:1 fuellt den Rest zwischen Kopfabstand und Fusszeile; min-height:0
	   erlaubt dem Element, unter seine Inhaltshoehe zu schrumpfen — ohne das
	   waechst es ueber das Fenster hinaus und das Scrollen waere zurueck.
	   display bleibt das Raster aus .about-main. */
	body.about main.about-main {
		flex: 1;
		min-height: 0;
		box-sizing: border-box;
		/* Ohne diese Zeile bestimmt die natuerliche Bildhoehe die Rasterzeile: das
		   Bild wurde dann nur auf Spaltenbreite skaliert und unten abgeschnitten
		   (height: 100% laeuft bei einer inhaltsbestimmten Zeile ins Leere), und die
		   Textspalte streckte sich auf dieselbe Hoehe — wodurch die unten
		   ausgerichteten Links weit unterhalb des sichtbaren Bereichs landeten.
		   minmax(0, 1fr) macht die Zeile definit: sie fuellt die verfuegbare Hoehe
		   und darf darunter schrumpfen. */
		grid-template-rows: minmax(0, 1fr);
	}

	body.about .about-main img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Sicherheitsventil fuer lange Biografien: die Seite scrollt nicht, die
	   Textspalte notfalls schon — sonst waere der Text unsichtbar abgeschnitten. */
	body.about .about-main-text {
		min-height: 0;
		overflow-y: auto;
		scrollbar-width: none;
		/* space-between aus der Grundregel schiebt bei zu wenig Platz den unteren
		   Block ueber den Rand hinaus. Der auto-Abstand unten macht dasselbe, wenn
		   Platz da ist, faellt aber auf null zurueck, wenn keiner da ist — die Links
		   ruecken dann einfach an den Text heran, statt zu verschwinden. */
		justify-content: flex-start;
	}

	body.about .about-main-text-links {
		margin-top: auto;
	}
	body.about .about-main-text::-webkit-scrollbar {
		display: none;
	}
}

/* ── Seitentitel: H1 im Markup, H2 im Aussehen ────────────────────────────
   Diese Ueberschriften waren bis anhin H2. Sie benennen das Thema ihrer Seite
   und gehoeren damit in die H1 — sichtbar aendern soll sich dabei nichts, also
   erben sie hier ausdruecklich Groesse und Gewicht einer H2.

   Der Name auf der About-Seite steht bewusst NICHT in dieser Liste: dort ist die
   volle H1-Optik gewuenscht (40px, fett, Versalien wie im Rest der Seite). */
.gallery-main .gallery-main-title h1,
.friends-main h1,
.impressum h1 {
	font-size: 30px;
	font-weight: normal;
	text-transform: none;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {

    h1 { font-size: 26px; }
    h2 { font-size: 20px; }
    h3 { font-size: 16px; }
    h4 { font-size: 16px; }
    p, a { font-size: 16px; }

    /* Header & Nav */
    .logo { top: 12px; }
    .logo a { font-size: 26px; }
    .navigation {
        height: 44px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 16px;
    }
    .navigation::-webkit-scrollbar { display: none; }
    .navigation a { flex-shrink: 0; }
    /* Auto-Margin-Trick: zentriert wenn Platz vorhanden, scrollt von links wenn Überlauf */
    .navigation > :first-child { margin-left: auto; }
    .navigation > :last-child  { margin-right: auto; }
    .pages { padding-top: 68px; }
    .pages main { padding: 0 12px 12px; }

    /* Homepage */
/*    .home-video-container { display: none; }*/
    .home-main { flex-direction: column; height: auto; }
    .home-main-scroll-box {
        flex: 0 0 auto;
        height: 100vw;
        width: 100%;
    }

    .home-main-scroll-about {
        flex: 0 0 auto;
        height: 100vw;
        width: 100%;
    }

    /* Index masonry columns */
    .index-main-masonry .masonry-col { gap: 10px; padding: 0 5px; }

    /* Gallery */
    .gallery-main { padding: 0 12px; }
    .gallery-main-title { flex-wrap: wrap; }
    .gallery-main-masonry .masonry-col { gap: 8px; padding: 0 4px; }

    /* Preview: nicht verfügbar auf Mobile */
    body.preview { display: none; }

    /* About */
    .about-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    /* Wird es eng, wird das Bild beschnitten statt immer laenger zu werden —
       oben und unten, und an den Seiten sobald die Spalte schmaler wird als
       das Seitenverhaeltnis des Bildes. */
    /* Ganzes Bild, Hoehe gedeckelt, horizontal zentriert. */
    .about-main img { max-height: 55vh; width: auto; max-width: 100%; margin: 0 auto; }
    .about-main-text-links { margin: 24px 0; }
    .about-main-text-links a { font-size: 16px; }

    /* Von H2 zu H1 gewechselte Seitentitel behalten ihre bisherige Groesse. */
    .gallery-main .gallery-main-title h1,
    .friends-main h1,
    .impressum h1 { font-size: 20px; }

    /* Bild auf der Friends-Seite unter den Text statt daneben. */
    .friends-main.has-photo {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .friends-photo { max-height: 55vh; }

    /* Footer */
    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto;
        padding: 12px 16px 50px;
        font-size: 13px;
    }
    .footer-impressum { margin-left: 0; margin-top: 4px; }
    .lang-dropdown summary { font-size: 16px; }
}

/* ── Friends ── */
/* Ohne Bild bleibt die Seite genau wie zuvor — eine schmale Textspalte.
   .has-photo stellt zwei Spalten daneben; die Textspalte behaelt dabei ihre
   bisherige Maximalbreite, damit sich am Textbild nichts aendert. */
.friends-main { max-width: 720px; padding: 0 20px 60px; }

.friends-main.has-photo {
	max-width: none;
	display: grid;
	/* Die Namensliste braucht keine 720px — mit 520 bleibt sie gut lesbar und
	   das Bild bekommt den deutlich groesseren Teil der Breite. */
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
}

.friends-photo {
	width: 100%;
	display: block;
	/* Deckel, damit ein hochformatiges Foto die Seite nicht dominiert; cover
	   beschneidet dann, statt das Bild zu verzerren. */
	max-height: 70vh;
	object-fit: cover;
}

/* Die "+"-Kachel sieht nur der Admin; sie ersetzt das fehlende Bild. */
.friends-photo-add {
	max-width: 320px;
}
.friends-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.friends-list li { display: block; }
.friend-info { display: flex; flex-direction: column; gap: 4px; }
.friend-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.friend-name { font-size: 20px; color: var(--text); }
.friend-links { display: flex; gap: 12px; flex-wrap: wrap; }
/* Website-Links in Akzentfarbe. Instagram und YouTube behalten ihre
   Markenfarben — die Attribut-Selektoren darunter sind spezifischer. */
.friend-links a { font-size: 16px; color: var(--accent); text-decoration: none; }
.friend-links a[href*="instagram.com"] { color: #C13584; }
.friend-links a[href*="youtube.com"] { color: var(--youtube); }
.friend-links a:hover { text-decoration: underline; }
.friend-links a[href*="instagram.com"]:hover { color: #C13584; }
.friend-links a[href*="youtube.com"]:hover { color: var(--youtube); }
.friend-actions { display: none; gap: 8px; margin-left: auto; }

/* ── Impressum ── */
.impressum { max-width: 720px; padding: 0 20px 60px; }
.impressum h1, .impressum h2 { margin-top: 40px; margin-bottom: 8px; }
.impressum h3 { margin-top: 28px; margin-bottom: 6px; font-size: 20px; }
.impressum p, .impressum a { font-size: 16px; line-height: 1.6; }
.impressum p + p { margin-top: 8px; }

@media (min-width: 769px) and (max-width: 1024px) {
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }

    .gallery-main .gallery-main-title h1,
    .friends-main h1,
    .impressum h1 { font-size: 24px; }
    .about-main-text-links a { font-size: 20px; }
}

/* ── Progressive image loading ── */
.masonry-wrap img { opacity: 0; transition: opacity 0.25s; }
.masonry-wrap img.img-loaded { opacity: 1; }

/* ── Gallery reorder mode ── */
.reorder-mode .img-tile { cursor: grab; user-select: none; }
.reorder-mode .img-tile.dragging { opacity: 0.35; }
.img-tile.drop-target { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ── 404 ── */
.error-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60vh;
    padding: 0 20px 60px;
    text-align: center;
}
.error-main h1 { color: var(--white); }
.error-main p { color: var(--muted); font-size: 18px; margin: 0; }
.error-main a { color: var(--accent); font-size: 16px; margin-top: 12px; }

/* ── Upload: fehlgeschlagene Dateien ── */
.upload-file-item.failed { color: var(--youtube); }