* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Theme variables: change these to update colors globally. */
:root {
    --bg: #ffffff;
    --text: #222222;
    --nav-bg: #333333;
    --nav-text: #ffffff;
    --nav-hover: rgba(255,255,255,0.2);
    --dropdown-bg: #444444;
    --popup-overlay: rgba(0,0,0,0.8);
    --popup-meta-bg: rgba(255,255,255,0.12);
    --popup-meta-hover: rgba(255,255,255,0.2);
    --popover-bg: rgba(0,0,0,0.85);
    --popup-info-bg: #f3f3f3;
    --popup-info-text: #1f1f1f;
    --popup-info-link: #0b4fb8;
    --popup-info-link-visited: #6a2ca1;
    --popup-info-link-hover: #06398a;
    --popup-info-border: rgba(255,255,255,0.65);
    --popup-info-scroll-thumb: rgba(35,35,35,0.42);
    --popup-info-scroll-track: rgba(0,0,0,0.12);
    --popup-info-hint-bg: rgba(255,255,255,0.92);
    --popup-info-hint-bg-active: rgba(147, 186, 241, 0.98);
    --popup-info-hint-fg: rgba(22,22,22,0.9);
    --popup-info-hint-border: rgba(0,0,0,0.2);
    --active-bg: #ffffff;
    --active-text: #333333;
    --post-bg: #d1d1d1; /* light card background in light theme */
    --post-text: var(--text);
    --post-border: rgba(0,0,0,0.08);
    /* post color palette tokens (light theme) */
    --post-color-1: #0b5bd9;
    --post-color-2: #c74444;
    --post-color-3: #007744;
    --post-color-4: #8a3abf;
    --post-color-5: #d47a00;
    /* default link colors (light theme) */
    --link: #0000EE; /* standard dark-blue link for light theme */
    --link-visited: #6a2ca1; /* visited links (light theme) */
}

/* Dark mode override: add `dark-mode` class to body to enable */
body.dark-mode {
    --bg: #121212;
    --text: #e6e6e6;
    --nav-bg: #c9c9c9; /* invert nav to a light bar */
    --nav-text: #292929;
    --nav-hover: rgba(255, 255, 255, 0.308);
    --dropdown-bg: #2b2b2b;
    --popup-overlay: rgba(0,0,0,0.95);
    --popup-meta-bg: rgba(255,255,255,0.12);
    --popup-meta-hover: rgba(255,255,255,0.2);
    --popover-bg: rgba(255,255,255,0.06);
    --popup-info-bg: #1f1f1f;
    --popup-info-text: #ececec;
    --popup-info-link: #9fc8ff;
    --popup-info-link-visited: #d7a8ff;
    --popup-info-link-hover: #c5ddff;
    --popup-info-border: rgba(255,255,255,0.22);
    --popup-info-scroll-thumb: rgba(255,255,255,0.42);
    --popup-info-scroll-track: rgba(255,255,255,0.16);
    --popup-info-hint-bg: rgba(22,22,22,0.92);
    --popup-info-hint-bg-active: rgba(50,66,96,0.98);
    --popup-info-hint-fg: rgba(238,238,238,0.9);
    --popup-info-hint-border: rgba(255,255,255,0.24);
    --active-bg: #333333;
    --active-text: #ffffff;
    --post-bg: #252525; /* dark card background */
    --post-text: var(--text);
    --post-border: rgba(255,255,255,0.06);
    /* post color palette tokens (dark theme) */
    --post-color-1: #8AB4F8;
    --post-color-2: #ff9a9a;
    --post-color-3: #6fe19d;
    --post-color-4: #c8a2ff;
    --post-color-5: #ffc58a;
    /* link colors for dark mode (lighter for contrast) */
    --link: #8AB4F8; /* light blue for dark theme */
    --link-visited: #d7a8ff;
    --pre-bg: rgba(255,255,255,0.03);
    --pre-border: rgba(255,255,255,0.06);
}

/* ——— Menüleiste ——— */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    background: var(--nav-bg);
    color: var(--nav-text);
    
    padding: 4px 14px 4px 4px;
    border-radius: 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.35);

    display: flex;
    align-items: center;
    z-index: 1000;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    transition: transform 360ms cubic-bezier(.22,.61,.36,1), opacity 260ms ease, background-color 200ms ease, color 200ms ease;
    will-change: transform, opacity;
}

.navbar-top.navbar-hidden {
    transform: translate3d(0, calc(-100% - 18px), 0);
    opacity: 0;
    pointer-events: none;
}

.navbar-top:not(.navbar-hidden) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Brand/logo button in the top navbar */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--nav-text);
    margin-right: 20px;
    border-radius: 8px;
    padding: 4px 6px;
}
.navbar-brand:link,
.navbar-brand:visited {
    color: var(--nav-text);
    text-decoration: none;
}
.navbar-brand:hover { background: var(--nav-hover); }
.navbar-brand:active { color: var(--nav-text); }
.navbar-brand img {
    display: block;
    height: 33px;
    width: auto;
}

.navbar-title {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: clamp(1.75rem, 1.6vw, 1.45rem);
    color: inherit;
    margin-right: 0;
    white-space: nowrap;
}

/* Base menu link styles (display as buttons) */
.menu a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--nav-text);
    text-decoration: none;
    transition: 0.2s;
}

.bottom-menu a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--nav-text);
    text-decoration: none;
    transition: 0.2s;
}

/* Improve coloring and tap behavior on mobile Chromium browsers by ensuring
   bottom navbar links use the theme variables with sufficient specificity
   and suppressing the default tap highlight which can affect perceived
   contrast on some devices. */
.navbar-bottom .bottom-menu a {
    -webkit-tap-highlight-color: transparent;
    color: var(--nav-text);
    -webkit-text-fill-color: var(--nav-text);
}
.navbar-bottom .bottom-menu a.active {
    background: var(--active-bg);
    color: var(--active-text);
    -webkit-text-fill-color: var(--active-text);
}


/* Aktiver Link */
.menu a.active {
    background: var(--active-bg);
    color: var(--active-text);
}

.navbar-top .menu a.active,
.navbar-top .menu a.active:hover,
.navbar-top .menu a.active:focus,
.navbar-top .menu a.active:focus-visible {
    background: var(--active-bg);
    color: var(--active-text);
    -webkit-text-fill-color: var(--active-text);
}

.bottom-menu a.active {
    background: var(--active-bg);
    color: var(--active-text);
}

.navbar-brand.active {
    background: var(--active-bg);
    color: var(--active-text);
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
    .menu a:hover {
        background: var(--nav-hover);
    }

    .bottom-menu a:hover {
        background: var(--nav-hover);
    }
}

/* Content link colors (use variables so themes can override) - scoped to main content only */
main a, main a:link {
    color: var(--link);
    text-decoration: underline;
}

main a:visited {
    color: var(--link-visited);
}

main a:hover, main a:active {
    color: var(--link);
    opacity: 0.95;
    text-decoration: underline;
}

/* Dropdown removed: Info is now a normal menu link */

/* ensure icons and toggle are vertically centered in the navbar */
.menu img { height: 24px; width: auto; vertical-align: middle; display: inline-block; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; height: auto; line-height: 1; padding: 6px 10px; margin-left: auto; }

/* Layout: keep menu items on a single row and vertically centered */
.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* prevent wrapping into multiple lines */
    white-space: nowrap; /* avoid internal breaks on links */
    flex: 1 1 auto; /* allow menu to take remaining space in the navbar */
    position: relative;
}

/* Desktop/wide: center links between title and right-aligned theme button */
.menu-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu a img { display: block; height: 24px; }

/* Bottom navbar mirrors top styling but is fixed at viewport bottom */
.navbar-bottom {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    border-radius: 0;
    padding: 5px 10px;
    justify-content: center;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.35);
}

.bottom-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.bottom-menu a img {
    display: block;
    height: 24px;
    width: auto;
}

/* Instagram icon swapped for dark mode and theme toggle support
   Uses a span with background-image so both system `prefers-color-scheme`
   and site-controlled `.dark-mode` will show the dark variant. */
.icon.icon-instagram {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('images/instagram.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Only switch the instagram icon when the site-controlled theme is active.
   Avoid reacting to system `prefers-color-scheme` because some environments
   invert browser UI colors and this could make a dark icon invisible on a
   dark navbar. The site `dark-mode` class ensures the navbar background
   provides the right contrast for the dark icon. */
body.dark-mode .icon.icon-instagram { background-image: url('images/instagram_dark.png'); }

/* Inhalt */
main {
    margin-top: 50px;
    margin-bottom: 5px;
    padding: 20px;
}

.textbar-main {
    margin: 0 -20px 14px;
    width: calc(100% + 40px);
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    background: color-mix(in srgb, var(--nav-bg) 12%, var(--bg));
}

.textbar-viewport {
    width: 100%;
    overflow: hidden;
}

.textbar-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: textbar-scroll 180s linear infinite;
    gap: 0;
    will-change: transform;
}

.textbar-content {
    white-space: nowrap;
    display: inline-block;
    padding: 8px 0 7px;
    color: var(--text);
    font-size: clamp(0.95rem, 1.35vw, 1.08rem);
    letter-spacing: 0.015em;
}

.textbar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.32em;
}

.textbar-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    min-width: 1.35em;
    flex: 0 0 1.35em;
    line-height: 1;
}

.textbar-sep {
    display: inline-block;
    margin: 0 1.25em;
    opacity: 0.75;
}

.textbar-flag-img {
    display: inline-block;
    height: 0.95em;
    width: 1.22em;
    object-fit: cover;
    vertical-align: -0.12em;
    margin-right: 0.12em;
}

@keyframes textbar-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .textbar-track { animation: none; }
}

/* ——— Burger Menü ——— */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
}

.menu-toggle.open {
    transform: rotate(90deg);
}

/* Overlay styles for cloned mobile menu */
#mobileMenuOverlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1300;
}
#mobileMenuOverlay.open { display: block; }
#mobileMenuOverlay .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.24);
}
#mobileMenuOverlay .panel {
    position: absolute;
    left: auto;
    right: 8px;
    top: 0;
    width: max-content;
    max-width: calc(100vw - 16px);
    min-width: 170px;
    box-sizing: border-box;
    background: var(--nav-bg);
    color: var(--nav-text);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px 10px;
    overflow: auto;
    text-align: right;
}
#mobileMenuOverlay .panel .menu { padding: 0; margin: 0; align-items: flex-end; width: auto; background: transparent; }
#mobileMenuOverlay .panel .menu-links {
    position: static;
    left: auto;
    transform: none;
    margin: 0;
    align-items: flex-end;
}
#mobileMenuOverlay .panel .menu a,
#mobileMenuOverlay .panel .menu button {
    justify-content: flex-end;
    text-align: right;
    width: max-content;
}

/* Prevent horizontal scrolling while overlay open */
.menu-overlay-open { overflow-x: hidden !important; }

/* Ensure burger toggle is visible above menu when present */
.menu-toggle { z-index: 1400; color: var(--nav-text); }

/* ——— Galerie Popup ——— */
html.popup-open,
body.popup-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.popup {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    background: var(--popup-overlay);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.popup-shell {
    position: relative;
    width: min(99vw, 2300px);
    height: min(97dvh, 1380px);
    --popup-bar-height: 52px;
    background: rgba(0,0,0,0.62);
    border-radius: 10px;
    display: grid;
    grid-template-rows: var(--popup-bar-height) minmax(0, 1fr) auto;
    overflow: hidden;
}

.popup-image-zone {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
}

.popup-image-zone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.popup .popup-loading {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    z-index: 2300;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    font-size: 16px;
}

.popup .popup-loading .spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.95);
    animation: popup-spin 1s linear infinite;
}

@keyframes popup-spin { to { transform: rotate(360deg); } }
.popup .popup-loading .loading-text { font-size: 14px; color: #fff; }

.closePopup {
    position: absolute;
    top: calc(var(--popup-bar-height) + 8px);
    right: 14px;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    z-index: 2400;
    background: rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 2px 8px;
}

.popup-control-bar {
    min-height: 52px;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-top: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.35);
    overflow: visible;
}

.popup-nav {
    position: static;
    justify-self: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    z-index: 2100;
}

.popup-nav:hover { background: rgba(0,0,0,0.7); }

.popup-series {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    position: relative;
}

.popup-series-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.popup-series-badge-btn {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.popup-series-hint {
    position: absolute;
    bottom: calc(100% - 50px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.86);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
    z-index: 2300;
}

.popup-series-hint.show {
    display: block;
}

.popup-series-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.popup-series-controls button,
.popup-series-controls select {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 3px 8px;
    border-radius: 6px;
    font: inherit;
}

.popup-series-controls select {
    font-size: 12px;
}

.popup-series-controls select option {
    background: #1f1f1f;
    color: #fff;
}

.popup-series-info {
    font-size: 14px;
    white-space: nowrap;
}

.popup-info-wrap {
    min-height: 0;
    /* block-size: var(--popup-info-height, clamp(96px, 20%, 240px)); */
    block-size: var(--popup-info-height-mobile, clamp(110px, 30%, 220px));
    max-block-size: 40dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px 44px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    column-gap: 6px;
    border-top: 1px solid var(--popup-info-border);
}

.popup-info-scroll-hint {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: center;
    width: 10px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-1px);
    transition: opacity 180ms ease;
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    background: transparent;
}

.popup-info-wrap.show-scroll-hint .popup-info-scroll-hint {
    opacity: 1;
}

.popup-info-scroll-hint::before,
.popup-info-scroll-hint::after {
    position: absolute;
    left: 0;
    right: 0;
    width: 10px;
    border-radius: 999px;
    border: 1px solid var(--popup-info-hint-border);
    background: var(--popup-info-hint-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--popup-info-hint-fg);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 180ms ease;
    animation: popup-scroll-hint-breathe 2200ms ease-in-out infinite;
}

.popup-info-scroll-hint::before {
    content: "▲";
    top: 0;
    bottom: calc(50% + 3px);
}

.popup-info-scroll-hint::after {
    content: "▼";
    top: calc(50% + 3px);
    bottom: 0;
    animation-delay: 380ms;
}

@keyframes popup-scroll-hint-breathe {
    0%, 100% {
        background: var(--popup-info-hint-bg);
        transform: scale(0.97);
    }
    50% {
        background: var(--popup-info-hint-bg-active);
        transform: scale(1);
    }
}

.popup-info-wrap.show-scroll-up .popup-info-scroll-hint::before {
    opacity: 0.95;
}

.popup-info-wrap.show-scroll-down .popup-info-scroll-hint::after {
    opacity: 0.95;
}

.popup-info-toolbar {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 6px 8px 0;
    border-bottom: none;
}

.popup-info-toggle,
.popup-text-size-controls button {
    background: rgba(255,255,255,0.14);
    color: #f3f3f3;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 4px 7px;
    font: inherit;
    cursor: pointer;
}

.popup-text-size-controls {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

#popupTextPlus { order: 1; }
#popupTextMinus { order: 2; }

.popup-info-toggle {
    order: 0;
}

/* popup-info-body and popup-info-content are not to be refactored outside of only a complete gallery overhaul */
/* current state was the only option to be found for a stable grid view on text resizes */
.popup-info-body {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 8px 10px 10px 10px;
    background: var(--popup-info-bg);
    border: 1px solid var(--popup-info-border);
    border-radius: 8px;
    color: var(--popup-info-text);
    scrollbar-width: auto;
    scrollbar-color: var(--popup-info-scroll-thumb) var(--popup-info-scroll-track);
}

.popup-info-body::-webkit-scrollbar {
    width: 12px;
}

.popup-info-body::-webkit-scrollbar-track {
    background: var(--popup-info-scroll-track);
    border-radius: 8px;
}

.popup-info-body::-webkit-scrollbar-thumb {
    background: var(--popup-info-scroll-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.popup-info-body::-webkit-scrollbar-thumb:hover {
    background: var(--popup-info-link);
    background-clip: content-box;
}

.popup-info-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--popup-info-text);
    line-height: 1.35;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    max-height: 80px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.popup-info-row strong {
    font-weight: 700;
}

.popup-info-row--split {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.popup-info-row--split .popup-info-left {
    text-align: left;
    min-width: 0;
}

.popup-info-row--split .popup-info-right {
    text-align: right;
    margin-left: auto;
    min-width: 0;
}

.popup-info-content a,
.popup-info-content a:link,
.popup-info-content .popup-themed-link {
    color: var(--popup-info-link);
    text-decoration: underline;
}

.popup-info-content a:visited,
.popup-info-content .popup-themed-link:visited {
    color: var(--popup-info-link-visited);
}

.popup-info-content a:hover,
.popup-info-content a:focus,
.popup-info-content a:active,
.popup-info-content .popup-themed-link:hover,
.popup-info-content .popup-themed-link:focus,
.popup-info-content .popup-themed-link:active {
    color: var(--popup-info-link-hover);
}

.popup-extra-link {
    color: var(--link);
    text-decoration: underline;
    cursor: pointer;
}

.popup-extra-link:visited {
    color: var(--link-visited);
}

.popup-extra-link:hover,
.popup-extra-link:focus {
    color: var(--link);
}

.popup-extra-popover {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2800;
    background: rgba(0,0,0,0.92);
    padding: 12px;
    gap: 10px;
    align-items: stretch;
    justify-content: stretch;
    grid-template-rows: auto minmax(0, 1fr);
}

.popup-extra-popover.is-open {
    display: grid;
}

.popup-extra-close {
    justify-self: start;
    align-self: start;
    background: rgba(255,255,255,0.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 6px 11px;
    font: inherit;
    cursor: pointer;
}

.popup-extra-body {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.popup-extra-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup-extra-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.popup-info-wrap.is-collapsed .popup-info-body {
    display: none;
}

.popup-info-wrap.is-collapsed .popup-info-scroll-hint {
    display: none;
}

.popup-info-wrap.is-collapsed {
    block-size: 34px;
    max-block-size: 34px;
}

.popup-info-wrap.is-collapsed .popup-text-size-controls {
    display: none;
}

.popup-info-wrap.is-collapsed .popup-info-toolbar {
    padding-top: 5px;
    padding-right: 6px;
}

.popup-info-wrap.is-collapsed .popup-info-toggle {
    min-width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
}

.popup-info-empty {
    opacity: 0.8;
    font-style: italic;
}

/* Theme toggle button (small icon next to Instagram) */
.theme-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    font-size: 18px;
    padding: 6px 10px;
    height: auto;
    border-radius: 6px;
}

.theme-toggle:hover { background: var(--nav-hover); }

/* Smooth transition for colors when toggling theme */
body, .menu a, .bottom-menu a, main { transition: background-color 200ms ease, color 200ms ease; }

/* Reset margins on elements in main content to prevent growing space */
main h1, main h2, main h3, main p, main pre, main div {
    margin-top: 0;
}

main h1:first-child, main > *:first-child {
    margin-top: 0;
}

/* Blog post cards */
article.post {
    background: var(--post-bg);
    color: var(--post-text);
    border: 1px solid var(--post-border);
    padding: 18px;
    margin: 20px 5%; /* add a little horizontal spacing on left/right */
    border-radius: 8px;
    box-sizing: border-box;
}

/* Keep dynamic post content inside its card, including very long URLs */
.aktuell .post .content,
article.post .content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.aktuell .post .content a,
article.post .content a {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.aktuell .post .content img,
.aktuell .post .content video,
.aktuell .post .content iframe,
article.post .content img,
article.post .content video,
article.post .content iframe {
    max-width: 100%;
    height: auto;
}

/* Blockquote styling inside public posts (Aktuell) */
.aktuell .post .content blockquote,
article.post .content blockquote {
    border-left: 4px solid var(--post-color-1);
    background: rgba(0,0,0,0.03);
    padding: 10px 14px;
    margin: 12px 0;
    color: var(--text);
    border-radius: 4px;
}
.aktuell .post .content blockquote cite,
article.post .content blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
    color: rgba(0,0,0,0.6);
}

/* Dark mode variant for public blockquotes */
body.dark-mode .aktuell .post .content blockquote,
body.dark-mode article.post .content blockquote {
    border-left-color: var(--post-color-1);
    background: rgba(255,255,255,0.03);
    color: var(--text);
}
body.dark-mode .aktuell .post .content blockquote cite,
body.dark-mode article.post .content blockquote cite { color: rgba(255,255,255,0.7); }

/* Separator element inserted between posts */
.post-sep {
    display: block;
    width: 80%; /* centered: leaves 10% margin on each side */
    height: 1px;
    background: var(--post-text);
    margin: 20px auto;
    border: none;
}

/* Color classes authors may use inside posts (mapped to theme-aware variables) */
.post-color--1 { color: var(--post-color-1); }
.post-color--2 { color: var(--post-color-2); }
.post-color--3 { color: var(--post-color-3); }
.post-color--4 { color: var(--post-color-4); }
.post-color--5 { color: var(--post-color-5); }

/* --- Public page fragments: centralized former inline styles --- */

/* Shared heading block used in info/kontakt cards */
.info-page .part-head,
.kontakt-page .part-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.info-page .part-head {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.kontakt-page .part-head {
    justify-content: flex-start;
}

.info-page .part-head h2,
.kontakt-page .part-head h2 {
    margin: 0;
}

.info-page p,
.kontakt-page p,
.impressum p {
    margin: 0 0 10px 0;
    line-height: 1.45;
}

/* Info page specific */
.info-page .info-part {
    margin-bottom: 12px;
}

.info-page .part-stamp {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
    min-height: 28px;
    border: 1px dashed var(--post-border);
    border-radius: 6px;
    background: rgba(127,127,127,0.08);
    margin-left: auto;
    text-align: end;
    padding: 7px 15px;
}

.info-page .info-image {
    width: 100%;
    max-width: 682px;
    height: auto;
    margin: 2px 0 10px 0;
    display: block;
}

/* Kontakt page specific */
.kontakt-page label {
    display: block;
    margin: 10px 0 6px;
}

.kontakt-page input[type="text"],
.kontakt-page input[type="password"],
.kontakt-page textarea,
.kontakt-page input[type="file"] {
    font: inherit;
}

.kontakt-page #kontaktImageInput {
    color: transparent;
}

.kontakt-page #kontaktImageInput::file-selector-button,
.kontakt-page #kontaktImageInput::-webkit-file-upload-button {
    color: var(--text) !important;
    padding: 6px 12px;
    border-radius: 6px;
    appearance: none;
    background: rgba(127,127,127,0.35);
    border: 1px solid var(--post-border);
    font: inherit;
    cursor: pointer;
}

#kontaktUploadForm {
    display: none;
    margin-top: 12px;
}

#text1_plain {
    width: 100%;
    max-width: 460px;
}

#text2_plain {
    width: 100%;
}

.kontakt-page .unlock-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.kontakt-page .upload-msg {
    min-height: 22px;
    margin-top: 6px;
    color: var(--text);
}

.kontakt-page .upload-msg.error {
    color: #c74444;
}

.kontakt-page .upload-msg.ok {
    color: #007744;
}

.kontakt-page .upload-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.kontakt-page .upload-actions button,
.kontakt-page .unlock-row button {
    padding: 4px 8px;
    border-radius: 6px;
    appearance: none;
    background: rgba(127,127,127,0.35);
    border: 1px solid var(--post-border);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.kontakt-page .kontakt-image {
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--post-border);
    margin: 6px 0 10px;
    display: block;
}

.kontakt-page .kontakt-contact-trigger {
    appearance: none;
    background: rgba(127,127,127,0.35);
    border: 1px solid var(--post-border);
    color: inherit;
    font: inherit;
    line-height: 1.1;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.kontakt-page .kontakt-contact-trigger:hover,
.kontakt-page .kontakt-contact-trigger:focus-visible {
    background: rgba(127,127,127,0.22);
}

.kontakt-page .kontakt-contact-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.45);
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.kontakt-page .kontakt-contact-popup.is-open {
    display: flex;
}

.kontakt-page .kontakt-contact-dialog {
    position: relative;
    width: min(560px, 96vw);
    background: var(--post-bg);
    color: var(--post-text);
    border: 1px solid var(--post-border);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.25);
    padding: 16px 16px 14px;
}

.kontakt-page .kontakt-contact-dialog h3 {
    margin: 0 0 8px 0;
}

.kontakt-page .kontakt-contact-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.kontakt-page .kontakt-contact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.kontakt-page .kontakt-contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127,127,127,0.12);
    border: 1px solid var(--post-border);
    color: inherit;
    text-decoration: none;
    font: inherit;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.kontakt-page .kontakt-staged-list {
    margin-top: 8px;
}

.kontakt-page .kontakt-staged-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(180,110,0,.45);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, rgba(255,205,112,.45), rgba(255,183,64,.45));
    color: #3b2a00;
    font-weight: 600;
}

.kontakt-page .kontakt-staged-remove {
    border: 1px solid rgba(120,0,0,.35);
    background: #fff;
    color: #8f0000;
    border-radius: 5px;
    padding: 1px 8px;
    cursor: pointer;
}

.kontakt-page .kontakt-crop-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    z-index: 3100;
    padding: 14px;
}

.kontakt-page .kontakt-crop-modal.is-open {
    display: flex;
}

.kontakt-page .kontakt-crop-dialog {
    width: min(980px, 96vw);
    max-height: 94dvh;
    overflow: auto;
    background: var(--post-bg);
    color: var(--post-text);
    border-radius: 10px;
    border: 1px solid var(--post-border);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    padding: 12px;
}

.kontakt-page .kontakt-crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.kontakt-page .kontakt-crop-canvas-wrap {
    position: relative;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 8px;
    background: #121212;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.kontakt-page #kontaktCropCanvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 78dvh;
    margin: 0 auto;
    cursor: crosshair;
}

@media (orientation: landscape) and (max-height: 540px) {
    .kontakt-page .kontakt-crop-modal {
        padding: 8px;
    }

    .kontakt-page .kontakt-crop-dialog {
        width: min(980px, calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        padding: 10px;
    }

    .kontakt-page #kontaktCropCanvas {
        max-height: 44dvh;
    }

    .kontakt-page .kontakt-crop-actions {
        margin-top: 8px;
        gap: 8px;
    }
}

.kontakt-page .kontakt-crop-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.kontakt-page .kontakt-crop-actions > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kontakt-page .kontakt-crop-actions button {
    padding: 6px 12px;
    border-radius: 6px;
    appearance: none;
    background: rgba(127,127,127,0.35);
    border: 1px solid var(--post-border);
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-height: 38px;
}

.kontakt-page .kontakt-crop-actions button:hover,
.kontakt-page .kontakt-crop-actions button:focus-visible {
    background: rgba(127,127,127,0.22);
}

/* Aktuell page fragment styling (moved from inline style in page) */
.aktuell .post {
    background: var(--post-bg);
    color: var(--post-text);
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--post-border);
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.aktuell .post h2 {
    margin: 0 0 6px 0;
}

.aktuell .post .meta {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.aktuell .post .content {
    color: var(--post-text);
}

.aktuell .post img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--post-border);
    margin-top: 8px;
    display: block;
}

/* Impressum integration: give legal content the same content-box language */
.impressum h1 {
    border-bottom: 1px solid darkgrey;
    margin-bottom: 12px;
}

.impressum .impressum-box address {
    font-style: normal;
    margin: 0 0 12px;
}

.impressum .impressum-box h2 {
    margin: 14px 0 8px;
}

.impressum .impressum-box h2:first-child {
    margin-top: 0;
}

/* --- Responsive Rules --- */

/* Desktop / wide view (>= 701px) */
@media (min-width: 701px) {
    .navbar {
        top: 10px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        border-radius: 10px;
        padding: 4px 10px 4px 4px;
        height: auto;
    }

    .navbar-top {
        top: 10px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        border-radius: 10px;
        padding: 4px 10px 4px 4px;
        height: auto;
    }

    .navbar-bottom {
        margin: 0 10px 20px;
        left: auto;
        right: auto;
        width: calc(100% - 20px);
        border-radius: 10px;
        padding: 5px 10px;
    }

    main {
        margin-top: 50px;
        margin-bottom: -20px;
    }
}

/* Mobile / narrow view (<= 700px) */
@media (max-width: 700px) {
    main {
        margin-top: 40px;
        margin-bottom: 0px;
    }

    .menu {
        display: none;
        flex-direction: column;
        width: auto;
        background: var(--nav-bg);
        margin-top: 0;
        border-radius: 0;
        padding: 10px 8px;
        align-items: flex-end;
        text-align: right;
    }

    .menu-links {
        position: static;
        left: auto;
        transform: none;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    /* Ensure Aktuell post images occupy full width on mobile views only */
    .aktuell .post img,
    .aktuell .post .content img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    .menu a,
    .menu button {
        justify-content: flex-end;
        text-align: right;
    }

    .menu.mobile-open {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        top: var(--menu-top, 60px);
        z-index: 1100;
        box-shadow: none;
        box-sizing: border-box;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .bottom-menu {
        justify-content: center;
        gap: 8px;
    }

    .popup-shell {
        --popup-bar-height: 46px;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        grid-template-rows: var(--popup-bar-height) minmax(0, 1fr) auto;
    }

    .closePopup {
        top: calc(var(--popup-bar-height) + 6px);
        right: 10px;
        font-size: 32px;
    }

    .popup-image-zone {
        padding: 8px;
    }

    .popup-control-bar {
        min-height: 46px;
        grid-template-columns: 44px 1fr 44px;
        padding: 0 6px;
    }

    .popup-series {
        gap: 6px;
        overflow: visible;
        justify-content: center;
    }

    .popup-info-wrap { min-height: 0; }

    .popup-info-wrap {
        block-size: var(--popup-info-height-mobile, clamp(110px, 30%, 220px));
    }

    .popup-info-body {
        padding: 8px 10px 12px 10px;
    }

    .theme-toggle {
        margin-left: 0;
        align-self: flex-end;
        padding: 6px 8px;
    }
}

@media (max-height: 560px) {
    .popup-shell {
        /* grid-template-rows: 44px minmax(0, 1fr) auto; */
        grid-template-rows: var(--popup-bar-height) minmax(0, 1fr) auto;
    }

    .popup-info-wrap {
        /* block-size: var(--popup-info-height-short, clamp(78px, 22%, 150px)); */
        block-size: var(--popup-info-height-mobile, clamp(110px, 30%, 220px));
    }
}

@media (max-width: 640px) {
    .info-page .part-head,
    .kontakt-page .part-head {
        align-items: flex-start;
    }

    .kontakt-page .part-head {
        flex-direction: column;
    }

    .info-page .part-stamp {
        width: 148px;
        min-width: 148px;
        max-width: 148px;
        align-self: flex-start;
        margin-left: auto;
    }
}

/* Slightly reduce horizontal margins on very small screens */
@media (max-width: 420px) {
    article.post { margin: 16px 4%; padding: 14px; }
    .post-sep { width: 84%; }
}