: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%;
	align-content: center;
}

.home-video iframe {
	pointer-events: none;
	height: 80%;
	width: 100%;
}

.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;
}

.home-main-scroll-box div {
	position: absolute;
	bottom: 40px;
	left: 20px;
	z-index: 1;
}

.home-main-scroll-box h1 {
	color: var(--text);
	font-size: 30px;
	font-weight: normal;
	text-transform: none;
}

.home-main-scroll-box h3 {
	color: var(--muted);
	font-size: 14px;
	font-style: italic;
}

.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%;
}

.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);
}

/* ── Login Modal ── */
.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}
.login-box {
    background: var(--white);
    border: 1px solid var(--text);
    padding: 40px;
    width: 320px;
    box-sizing: border-box;
}
.login-box h2 { color: var(--text); margin-bottom: 32px; }
.login-box label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.login-box input {
    display: block; width: 100%; box-sizing: border-box;
    background: none; border: 1px solid var(--muted);
    color: var(--text); padding: 8px; font-size: 16px;
    margin-bottom: 20px; border-radius: 0; outline: none; font-family: inherit;
}
.login-box input:focus { border-color: var(--accent); }
.login-box button {
    width: 100%; background: var(--accent); color: var(--bg);
    border: none; padding: 10px; font-size: 16px;
    cursor: pointer; font-family: inherit; border-radius: 0;
}
.login-box button:hover { background: var(--text); color: var(--white); }
.login-error { color: #c00; font-size: 14px; margin-bottom: 16px; }
.login-secret {
    font-family: monospace; font-size: 17px; letter-spacing: 3px;
    padding: 10px 14px; border: 1px solid var(--muted);
    color: var(--text); text-align: center; margin-bottom: 6px;
}

/* ── 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: 1fr;
        gap: 24px;
    }
    .about-main-text-links { margin: 24px 0; }

    /* 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; }
}

/* ── Friends ── */
.friends-main { max-width: 720px; padding: 0 20px 60px; }
.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; }
.friend-links a { font-size: 16px; color: var(--muted); 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 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; }
}

/* ── 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; }