body.dark .logo-img,
html.dark-init body .logo-img {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.1);
    transition: filter 0.3s;
}

:root {
    --bg-main: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #f9fafb;
    --border-color: #e5e7eb;
    --text-main: #000000;
    --text-muted: #6b7280;
    --accent: #000000;
    --font-main: 'Inter', sans-serif;
    --transition: all 0.3s ease;
    --timeline-marker-color: #2563eb;

    /* Spacing */
    --section-gap: 100px;
    --section-gap-mobile: 64px;
    --section-header-gap: 40px;
    --card-padding: 32px;
    --card-padding-mobile: 20px;
    --card-gap: 24px;
}

body.dark {
    --bg-main: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #111111;
    --border-color: #2a2a2a;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --accent: #ffffff;
    --timeline-marker-color: hsl(120, 80%, 40%);
}

html.dark-init body {
    --bg-main: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #111111;
    --border-color: #2a2a2a;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --accent: #ffffff;
    --timeline-marker-color: hsl(120, 80%, 40%);
    background-color: #0a0a0a;
    color: #ffffff;
}

/* Dark mode overrides for hardcoded colors */
body.dark .hero-section {
    background-color: #0a0a0a;
    background-image:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
        radial-gradient(var(--border-color) 1px, transparent 1px);
}

body.dark .contact-icon svg,
html.dark-init body .contact-icon svg {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.1);
    transition: filter 0.3s;
}

/* hero-canvas inversion handled in JS via drawKebab fill color */
body.dark .hero-overlay {
    background: radial-gradient(circle at center, transparent 20%, rgba(10, 10, 10, 0.85) 75%);
}

body.dark .header {
    background: rgba(10, 10, 10, 0.95);
}

body.dark .header-nav {
    background: rgba(10, 10, 10, 0.95);
}

body.dark .hero-btn.secondary {
    background: rgba(0, 0, 0, 0.05);
}

body.dark .latest-content {
    background: linear-gradient(to right, #111111, #0f0f0f);
}

body.dark .latest-comment {
    color: #d1d5db;
}

body.dark .chart-wrapper {
    background: #111111;
}

body.dark #radarChart,
html.dark-init body #radarChart {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.1);
    will-change: filter;
}

body.dark .toggle-label {
    background: #111111;
}

body.dark .toggle-label:hover {
    background: #1a1a1a;
}

body.dark .toggle-label.selected {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

body.dark .toggle-label.selected .toggle-name small {
    color: rgba(0, 0, 0, 0.6);
}

body.dark .spot-search-input {
    background: #1a1a1a;
    color: var(--text-main);
}

body.dark .spot-search-input:focus {
    background: #222222;
    border-color: #ffffff;
}

body.dark .review-sort-select {
    background-color: var(--bg-main);
    color: var(--text-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

body.dark .review-sort-select:hover {
    background-color: #1a1a1a;
}

body.dark .badge {
    background: #1a1a1a;
}

body.dark .bar-bg {
    background: #2a2a2a;
}

body.dark .spot-comment {
    background: #111111;
    color: #d1d5db;
    border-left-color: #3a3a3a;
}

body.dark .review-comment-item,
body.dark .community-reviews-card {
    background: #111111;
}

body.dark .review-comment-input,
body.dark .review-comment-textarea,
body.dark .community-review-form input,
body.dark .community-review-form textarea,
body.dark .community-review-form select {
    background: #1a1a1a;
    color: var(--text-main);
    border-color: var(--border-color);
}

body.dark .community-review-form input:focus,
body.dark .community-review-form textarea:focus,
body.dark .community-review-form select:focus {
    background: #222222;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

body.dark .community-review-form input[readonly] {
    background: #222222;
    color: #9ca3af;
}

body.dark .community-review-form label,
body.dark .community-score-title {
    color: var(--text-muted);
}

body.dark .community-reviews-hint {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: #3b82f6;
}

body.dark .community-score-grid label {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: var(--text-main);
}

body.dark .community-review-form input.invalid-field,
body.dark .community-review-form textarea.invalid-field,
body.dark .community-review-form select.invalid-field,
body.dark .custom-file-upload-btn.invalid-field {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

body.dark .custom-file-upload-btn.invalid-field {
    color: #fca5a5;
}

body.dark .verzehrort-field.invalid-field .verzehrort-bubbles {
    border-color: #ef4444;
}

body.dark .field-error-message {
    color: #fca5a5;
}

body.dark .community-review-actions {
    border-top-color: #2a2a2a;
}

body.dark .community-review-progress-segment {
    background: #1f2937;
}

body.dark .community-review-progress-segment.is-active {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

body.dark #community-review-back {
    background: #1f2937;
    color: #e5e7eb;
    border: 1px solid #374151;
}

body.dark .community-score-section {
    border-top-color: #2a2a2a;
}

/* Dark mode gradient border for submit modal */
body.dark .modal-container.community-submit-modal-container {
    background-image: linear-gradient(#0a0a0a, #0a0a0a),
        linear-gradient(90deg, #e63946, #f4a261, #2563eb);
}

body.dark .community-score-grid label .score-slider {
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}

body.dark .community-score-grid label .score-slider::-moz-range-track {
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}

body.dark .community-score-grid label .score-slider::-moz-range-progress {
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}


body.dark .review-comment-text,
body.dark .review-community-text,
body.dark .community-review-text {
    color: #d1d5db;
}

body.dark .contact-card {
    background: linear-gradient(145deg, #111111, #0f0f0f);
}

body.dark .review-helpful-btn {
    background: #1a1a1a;
    color: #d1d5db;
    border-color: #2a2a2a;
}

body.dark .review-share-btn {
    background: #1a1a1a;
    color: #d1d5db;
    border-color: #2a2a2a;
}

body.dark .review-helpful-btn.is-liked {
    background: #2d1515;
}

body.dark .review-comments {
    background: #111111;
}

body.dark .sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
}

:root {
    --header-h: 94px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

section {
    scroll-margin-top: var(--header-h);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: var(--header-h);
}

body.modal-open,
body.lightbox-open,
body.mobile-filter-open {
    overflow: hidden;
}

html.mobile-filter-open,
body.mobile-filter-open {
    overscroll-behavior: none;
}

.container {
    max-width: 1248px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: calc(100vh - 80px);
    min-height: calc(100svh - 80px);
    height: auto;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    /* Technical Grid Background */
    background-color: #fff;
    background-image:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
        radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px;
    background-position: center center;
    margin-top: 0;
    margin-bottom: var(--section-gap);
    border-bottom: 1px solid var(--border-color);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 20%, rgba(255, 255, 255, 0.85) 75%);
    pointer-events: none;
    z-index: 1;
}

.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Technical accents */
.hero-section::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-top: 2px solid var(--text-main);
    border-left: 2px solid var(--text-main);
    opacity: 0.3;
}

.hero-section::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-bottom: 2px solid var(--text-main);
    border-right: 2px solid var(--text-main);
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 40px;
}

.hero-title {
    font-family: var(--font-main);
    font-size: 8rem;
    line-height: 0.85;
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -4px;
    text-transform: uppercase;
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-subtitle {
    font-size: 3rem;
    color: var(--text-main);
    margin-bottom: 48px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    max-width: 800px;
    line-height: 1.1;
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.2s;
}

.hero-subtitle span {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-main);
    margin-top: 12px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
}

.hero-btn {
    padding: 16px 32px;
    border-radius: 100px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-btn.primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
}

.hero-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.hero-btn.secondary {
    border: 1px solid var(--border-color);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-main);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: fadeIn 1s ease both;
    animation-delay: 1s;
}

.hero-scroll-indicator span {
    font-size: 0.7rem;
    letter-spacing: 3px;
    font-weight: 800;
    color: var(--text-muted);
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--text-muted), transparent);
}

.hero-disclaimer {
    margin-top: 40px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: fadeIn 1.5s ease both;
    animation-delay: 0.6s;
}

@keyframes heroReveal {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: calc(100vh - 120px);
        min-height: calc(100svh - 120px);
        height: auto;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 60px 24px;
        margin-top: 0;
        margin-bottom: var(--section-gap-mobile);
    }

    .hero-subtitle {
        font-size: 1.8rem;
        margin-bottom: 32px;
    }

    .hero-subtitle span {
        font-size: 1rem;
        letter-spacing: 1.5px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-btn {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }

    .hero-glow-1,
    .hero-glow-2 {
        width: 300px;
        height: 300px;
        filter: blur(80px);
    }

    .hero-scroll-indicator {
        display: none;
    }
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.no-transition,
.no-transition * {
    transition: none !important;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: gap 0.4s ease;
}



.header-nav {
    display: flex;
    gap: 24px;
    transition: opacity 0.3s ease;
}

.header-link {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    padding: 8px 0;
}

/* Dark Mode Toggle */

.header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.darkmode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-main);
    transition: var(--transition);
    flex-shrink: 0;
    margin: 0;
}

.darkmode-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-main);
}

.darkmode-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Show sun in dark mode, moon in light mode */
.darkmode-btn .icon-moon {
    display: block;
}

.darkmode-btn .icon-sun {
    display: none;
}

body.dark .darkmode-btn .icon-moon {
    display: none;
}

body.dark .darkmode-btn .icon-sun {
    display: block;
}

/* Hamburger Button */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-btn span {
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    transition: var(--transition);
    border-radius: 2px;
}

.hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.hamburger-btn.is-active span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sidebar-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}

.header-link.active {
    color: var(--text-main);
}

.header-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-main);
    transform-origin: center;
}

.header-link:hover {
    color: var(--text-main);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.1em;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1.5rem;
    position: relative;
    z-index: 1001;
}

.logo-img {
    height: 1.8rem;
    width: auto;
    display: block;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-prefix {
    font-size: 0.75rem;
    font-weight: 800;
    background: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 1px;
    line-height: 1;
}

.logo-main {
    font-size: inherit;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-main);
    line-height: 1;
    text-transform: none;
    transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    :root {
        --header-h: 80px;
    }

    html {
        scroll-padding-top: var(--header-h);
    }

    section {
        scroll-margin-top: var(--header-h);
    }

    .header {
        padding: 20px 0;
        backdrop-filter: blur(4px);
    }

    .header .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .hamburger-btn {
        display: flex;
    }

    .header-nav {
        position: fixed;
        top: -110vh;
        top: -110svh;
        right: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 1000;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6px;
        padding: 80px 48px 60px 48px;
        transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
        overflow-x: hidden;
        overflow-y: auto;
        mask-image: none;
        -webkit-mask-image: none;
        box-shadow: none;
        border-left: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .header-nav.is-active {
        top: 0;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .header-link {
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 2px;
        padding: 8px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .header-nav.is-active .header-link {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered animation delays */
    .header-nav.is-active .header-link:nth-child(1) {
        transition-delay: 0.2s;
    }

    .header-nav.is-active .header-link:nth-child(2) {
        transition-delay: 0.25s;
    }

    .header-nav.is-active .header-link:nth-child(3) {
        transition-delay: 0.3s;
    }

    .header-nav.is-active .header-link:nth-child(4) {
        transition-delay: 0.35s;
    }

    .header-nav.is-active .header-link:nth-child(5) {
        transition-delay: 0.4s;
    }

    .header-nav.is-active .header-link:nth-child(6) {
        transition-delay: 0.45s;
    }

    .header-nav.is-active .header-link:nth-child(7) {
        transition-delay: 0.5s;
    }

    .header-link.active::after {
        display: none;
    }

    .logo-main {
        font-size: inherit;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .logo {
        font-size: 1.1rem;
    }

    .logo-img {
        height: 1.4rem;
    }

    .logo-prefix {
        font-size: 0.5rem;
        padding: 1px 4px;
    }
}

@media (max-width: 400px) {
    .logo-main {
        font-size: inherit;
    }

    .logo {
        font-size: 0.95rem;
    }

    .logo-img {
        height: 1.2rem;
    }
}



.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--text-main);
}

.footer-legal .separator {
    color: var(--border-color);
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}



/* Section Common */
section {
    margin-bottom: var(--section-gap);
}

.section-header {
    margin-bottom: var(--section-header-gap);
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.view-toggles {
    display: flex;
    gap: 8px;
}

.filters-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.mobile-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-filter-panel-backdrop,
.mobile-filter-panel-grabber,
.mobile-filter-panel-header,
.mobile-filter-toggle-btn,
.mobile-view-toggle-btn,
.mobile-filter-section-title,
.mobile-filter-reset-btn,
.mobile-filter-clear-btn,
.mobile-filter-actions {
    display: none;
}

.filter-bubble {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.62rem;
    line-height: 1.2;
}

.filter-city {
    border-radius: 4px;
}

.filter-dish {
    border-radius: 20px;
}

.filter-x {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.25;
    transition: opacity 0.2s;
    font-weight: 300;
}

.filter-bubble:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}

.filter-bubble:hover .filter-x {
    opacity: 0.6;
}

.filter-bubble.active {
    background-color: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}

.filter-bubble.active .filter-x {
    opacity: 0.75;
    color: var(--bg-main);
}

.filter-bubble:not(.active) {
    opacity: 0.6;
}

.view-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: var(--transition);
}

.view-btn.active,
.view-btn:hover {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.3);
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.section-header p {
    color: var(--text-muted);
    font-weight: 300;
}

.section-header-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
}

.toggle-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    opacity: 0.6;
    margin-left: auto;
}

.filter-utilities {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.community-submit-trigger {
    border: 1px solid #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    order: -1;
}

.review-sort-select {
    appearance: none;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 6px 32px 6px 16px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}

.review-sort-select:hover {
    border-color: var(--text-main);
    background-color: #f8fafc;
}

.review-sort-select:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.filter-search-wrapper {
    display: block;
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    flex: 1 1 auto;
    min-width: 180px;
    max-width: none;
}

.filter-search-wrapper .spot-search-input {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.mobile-review-sort-select {
    display: none;
    width: 100%;
}

.desktop-review-sort-select {
    margin-left: auto;
    flex: 0 0 auto;
}

.mobile-filter-toggle-btn {
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
}

.mobile-filter-toggle-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-main);
}

.mobile-filter-toggle-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.mobile-filter-toggle-btn[aria-expanded="true"] {
    background: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}

.mobile-view-toggle-btn {
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.35px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.mobile-view-toggle-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-main);
}

.mobile-filter-toggle-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--text-main);
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 0.6rem;
    line-height: 1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.community-submit-trigger:hover {
    background: #1e40af;
    border-color: #1e40af;
    opacity: 1;
    transform: translateY(-1px);
}

.community-submit-trigger[aria-expanded="true"] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.community-submit-trigger:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.28);
}

.toggle-all-btn:hover {
    color: var(--text-main);
    opacity: 1;
}

.toggle-all-btn:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.toggle-all-btn svg {
    transition: transform 0.3s ease;
}

/* Latest Section */
.latest-section {
    overflow: hidden;
    position: relative;
}

#spotlight-container {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    /* Fully isolate from page layout — prevents vertical shift on tile change */
    contain: layout style size;
}

.spotlight-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.latest-card {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    position: relative;
    /* No opacity/scale — off-screen cards are invisible via overflow:hidden */
    pointer-events: none;
}

.latest-card.active {
    pointer-events: auto;
}

.latest-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.latest-image-wrapper {
    flex: 1;
    position: relative;
    height: 100%;
}

.latest-image {
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.latest-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--text-main);
    color: var(--bg-main);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    z-index: 10;
}

.latest-content {
    flex: 1.2;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    /* flex-start statt center: Inhalt klebt oben, .latest-body wird per margin-top: auto ans Ende gepusht */
    justify-content: flex-start;
    background: linear-gradient(to right, #ffffff, #fafafa);
    overflow: hidden;
}

.latest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.latest-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.latest-info h3 {
    font-size: 1.8rem;
    margin-bottom: 6px;
    line-height: 1.1;
    /* Sicherheitsnetz: max. 2 Zeilen, damit lange Namen nie den Button verschieben */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-info h3 a {
    text-decoration: none;
    color: inherit;
}

.latest-info h3 a:hover {
    text-decoration: underline;
}

.latest-info .star-rating {
    margin-bottom: 8px;
}

.latest-meta {
    font-size: 1rem;
    color: var(--text-muted);
}

.latest-score-block {
    text-align: right;
    background: var(--text-main);
    color: var(--bg-main);
    padding: 12px 20px;
    border-radius: 12px;
}

.latest-score-label {
    font-size: 0.65rem;
    font-weight: 800;
    opacity: 0.7;
    margin-bottom: 4px;
}

.latest-score-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.latest-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    /* margin-top: auto pinnt den Button-Bereich ans absolute Ende des Containers */
    margin-top: auto;
}

.latest-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.latest-snippet {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 4px;
    margin-bottom: auto;
    /* Pushes the latest-body to the bottom */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 95%;
}

@media (max-width: 768px) {
    .latest-snippet {
        display: none;
    }
}

.latest-comment {
    font-size: 1rem;
    font-style: italic;
    color: #374151;
    line-height: 1.4;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-comment::before {
    content: "“";
    position: absolute;
    left: -20px;
    top: -10px;
    font-size: 3rem;
    opacity: 0.1;
    font-family: serif;
}



.spotlight-jump-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--text-main);
    color: var(--bg-main);
    border: none;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.spotlight-jump-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: #000;
}

.spotlight-jump-btn svg {
    transition: transform 0.3s ease;
}

.spotlight-jump-btn:hover svg {
    transform: translate(2px, -2px);
}

/* Spotlight Dots */
.spotlight-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background: #ccc;
}

.dot.active {
    background: var(--text-main);
    width: 24px;
    border-radius: 4px;
}

/* Comparison Section */
.comparison-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

.chart-wrapper {
    background: #fff;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    height: 480px;
    /* Fixed height to match controls */
    position: relative;
}

.controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 480px;
    /* Matching height */
}

.spot-search-wrapper {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-main);
}

.spot-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.spot-search-input:focus {
    outline: none;
    border-color: var(--text-main);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.spot-toggles-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Custom Scrollbar */
.spot-toggles-list::-webkit-scrollbar {
    width: 4px;
}

.spot-toggles-list::-webkit-scrollbar-track {
    background: transparent;
}

.spot-toggles-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.toggle-label:hover {
    border-color: var(--text-main);
    background: #f8fafc;
}

.toggle-label.selected {
    background: #000;
    color: #fff;
    border-color: #000;
}

.toggle-label.selected .toggle-name small {
    color: rgba(255, 255, 255, 0.6);
}

.toggle-label input {
    display: none;
}

.spot-color-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.toggle-name {
    font-size: 0.85rem;
}

.toggle-name strong {
    display: block;
    font-weight: 700;
}

.toggle-name small {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Unified Spot Cards (Premium List View) */
.spots-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    content-visibility: auto;
    contain-intrinsic-size: 0 120px;
}

.spots-container.spots-container--tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    contain-intrinsic-size: 0 360px;
}

.spot-tile-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.spot-tile-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}

.spot-tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spot-tile-media .slide-image-track {
    display: flex;
    width: 100%;
    height: 100%;
}

.spot-tile-media .slide-image {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s;
    pointer-events: auto;
}

.spot-tile-media .slide-image.active {
    opacity: 1;
}

.spot-tile-media .slide-dots {
    bottom: 10px;
}

.spot-tile-rank,
.spot-tile-score {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1;
    padding: 7px 11px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.34);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.spot-tile-rank {
    top: 12px;
    left: 12px;
}

.spot-tile-score {
    top: 12px;
    right: 12px;
}

.spots-container.spots-container--tiles .spot-tile-card:nth-child(1) .spot-tile-rank,
.spots-container.spots-container--tiles .spot-tile-card:nth-child(1) .spot-tile-score {
    color: #5f4200;
    background: rgba(248, 225, 146, 0.84);
    border: 1px solid rgba(182, 138, 22, 0.56);
}

.spots-container.spots-container--tiles .spot-tile-card:nth-child(2) .spot-tile-rank,
.spots-container.spots-container--tiles .spot-tile-card:nth-child(2) .spot-tile-score {
    color: #334155;
    background: rgba(226, 232, 240, 0.86);
    border: 1px solid rgba(107, 114, 128, 0.5);
}

.spots-container.spots-container--tiles .spot-tile-card:nth-child(3) .spot-tile-rank,
.spots-container.spots-container--tiles .spot-tile-card:nth-child(3) .spot-tile-score {
    color: #6b2f12;
    background: rgba(223, 166, 129, 0.84);
    border: 1px solid rgba(138, 75, 31, 0.56);
}

.spot-tile-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spot-tile-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spot-tile-body h3 {
    font-size: 1.05rem;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.spot-tile-stars .star-rating {
    display: inline-flex;
}

.spot-tile-stars .stars-outer {
    font-size: 0.92rem;
}

.spot-tile-city {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.spot-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spot-tile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.spot-tile-maps-button {
    width: 100%;
    height: 40px;
}

.spot-tile-open-btn {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition);
}

.spot-tile-open-btn:hover {
    background: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}

.load-more-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    margin-top: 4px;
}

.load-more-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-main);
    color: var(--text-main);
}

.spots-container.spots-container--tiles .load-more-btn {
    grid-column: 1 / -1;
    margin: 16px auto 0;
    max-width: 320px;
}

.spot-card {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    contain: content;
    position: relative;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spot-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.spot-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: margin 0.3s ease;
}

.spot-card.expanded .spot-card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.spot-rank {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0.3;
    line-height: 1;
    margin-right: 24px;
}

/* Medal Ranks Styling */
.spot-card:nth-child(1) .spot-rank {
    color: #D4AF37;
    /* Gold */
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.spot-card:nth-child(2) .spot-rank {
    color: #A8A8A8;
    /* Silver */
    opacity: 0.9;
}

.spot-card:nth-child(3) .spot-rank {
    color: #B08D57;
    /* Bronze */
    opacity: 0.9;
}

.spot-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spot-title-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.spot-header-text h3 {
    font-size: 1.2rem;
    line-height: 1.1;
    margin-bottom: 0;
    text-transform: none;
}

.spot-card:nth-child(1) .spot-header-text h3 {
    color: #D4AF37;
}

.spot-card:nth-child(2) .spot-header-text h3 {
    color: #A8A8A8;
}

.spot-card:nth-child(3) .spot-header-text h3 {
    color: #B08D57;
}

.spot-card.expanded .spot-header-text h3 {
    font-size: 1.5rem;
}

.star-rating {
    display: inline-block;
    vertical-align: middle;
}

.stars-outer {
    position: relative;
    display: inline-flex;
    gap: 2px;
    font-size: 1.1rem;
    color: #e2e8f0;
    /* Gray for empty */
    letter-spacing: 1px;
    cursor: help;
}

.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 2px;
    white-space: nowrap;
    overflow: hidden;
    color: #fbbf24;
    /* Gold for filled */
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.3));
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stars-outer span,
.stars-inner span {
    line-height: 1;
}

.spot-city {
    font-size: 1rem;
    color: var(--text-muted);
}

.spot-header-date,
.spot-header-reviews {
    font-size: 0.85rem;
    opacity: 0.7;
}

.spot-header-reviews {
    margin-left: 6px;
}




.spot-score-pill {
    background: var(--text-main);
    color: var(--bg-main);
    padding: 0 16px;
    border-radius: 10px;
    text-align: right;
    min-width: 100px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.spot-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.expand-icon {
    display: inline-block;
    font-size: 0.7rem;
    opacity: 0.3;
    transition: transform 0.3s ease;
}

/* Specific rotation for the main Spot Card header icon */
.spot-card.expanded>.spot-card-header .expand-icon {
    transform: rotate(180deg);
    opacity: 0.8;
}

.maps-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 44px;
}

.maps-button:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.maps-button svg {
    opacity: 0.7;
}

.maps-button:hover svg {
    opacity: 1;
}

.spot-score-pill .label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    opacity: 0.7;
    letter-spacing: 1px;
}

.spot-score-pill .value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.spot-main-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.spot-card.expanded .spot-main-content {
    grid-template-rows: 1fr;
}

/* Generic Collapsible Logic (Matches Spot Card Animation) */
.collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.collapsible-panel.expanded>.collapsible-content {
    grid-template-rows: 1fr;
}

.collapsible-inner {
    min-height: 0;
}

.collapsible-trigger {
    cursor: pointer;
    user-select: none;
}

.collapsible-trigger .expand-icon {
    transition: transform 0.3s ease;
}

/* Specific rotation for collapsible panel headers (Community Reviews) */
.collapsible-panel.expanded>.collapsible-trigger .expand-icon {
    transform: rotate(180deg) !important;
    opacity: 0.8;
}

/* Ensure icons are hidden when the panel is closed (if browser behavior varies) */
.collapsible-panel:not(.expanded)>.collapsible-trigger .expand-icon {
    transform: rotate(0deg) !important;
}



.spot-top-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    min-height: 0;
    padding-top: 24px;
    margin-top: 0;
}

.spot-card.expanded .spot-top-content {
    border-top: 1px solid var(--border-color);
}

.spot-image-container {
    width: 320px;
    height: 320px;
    flex-shrink: 0;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    overflow: hidden;
}

/* Hint for zoom */
.spot-image-container::after {
    content: "TAP TO ZOOM";
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    pointer-events: none;
    z-index: 15;
}

.spot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.spot-image:hover {
    transform: scale(1.02);
}

.spot-content {
    flex: 1;
}

.spot-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
    margin-bottom: 24px;
}

.cat-item-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cat-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
}

.cat-info span:first-child {
    color: var(--text-muted);
    font-weight: 400;
}

.bar-bg {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 10px;
    width: 0;
    transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spot-card.expanded .bar-fill {
    width: var(--target-width);
}

.spot-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.badge {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.badge:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.badge-tooltip {
    position: relative;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.badge-tooltip .tooltip-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 12px;
    border-radius: 8px;
    width: 220px;
    line-height: 1.5;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.badge-tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
}

.badge-tooltip:hover .tooltip-text {
    display: block;
}

.spot-comment {
    font-size: 1rem;
    font-style: italic;
    color: #4b5563;
    line-height: 1.6;
    background: #f9fafb;
    padding: 18px 22px;
    border-radius: 12px;
    border-left: 4px solid var(--border-color);
}

.spot-comment-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-feedback-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.review-feedback-row--inline {
    justify-content: flex-start;
}

.review-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.review-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.review-share-btn:hover {
    border-color: #111827;
    color: #111827;
}

.review-share-btn.is-copied {
    border-color: #14532d;
    background: #dcfce7;
    color: #14532d;
}

.review-share-btn.is-error {
    border-color: #b91c1c;
    background: #fef2f2;
    color: #b91c1c;
}

.review-share-icon {
    font-size: 0.78rem;
    line-height: 1;
}

.review-helpful-btn:hover {
    border-color: #111827;
    color: #111827;
}

.review-helpful-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.review-helpful-btn.is-liked {
    border-color: #b91c1c;
    background: #fef2f2;
    color: #b91c1c;
}

.review-helpful-icon {
    font-size: 0.78rem;
    line-height: 1;
}

.review-helpful-count {
    min-width: 16px;
    text-align: center;
}

.review-community-modal-card .review-feedback-row--inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.review-community-modal-card .review-helpful-btn,
.review-community-modal-card .review-share-btn {
    width: 100%;
    justify-content: center;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #0f172a;
}

.review-community-modal-card .review-helpful-btn.is-liked {
    border-color: #14532d;
    background: #dcfce7;
    color: #14532d;
}

body.dark .review-community-modal-card .review-helpful-btn,
body.dark .review-community-modal-card .review-share-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f8fafc;
}

body.dark .review-community-modal-card .review-helpful-btn.is-liked {
    background: rgba(20, 83, 45, 0.5);
    border-color: rgba(74, 222, 128, 0.5);
    color: #bbf7d0;
}

.review-comments {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.review-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-comments-header h4 {
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

.review-comments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.review-comments-state,
.review-comments-empty {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.review-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.review-comment-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #f9fafb;
    padding: 10px 12px;
}

.review-comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.review-comment-author {
    font-size: 0.8rem;
    font-weight: 700;
}

.review-comment-date {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.review-comment-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #1f2937;
    text-align: justify;
    text-align-last: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.review-comments-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.review-comment-input,
.review-comment-textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-main);
    padding: 10px 12px;
    font-family: var(--font-main);
    font-size: 0.82rem;
}

.review-comment-textarea {
    min-height: 84px;
    resize: vertical;
}

.review-comment-input:focus,
.review-comment-textarea:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.review-comments-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.review-comment-submit {
    border: 1px solid #111827;
    background: #111827;
    color: #ffffff;
    border-radius: 9px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.review-comment-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.comment-form-status {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Review Modal Comments ──────────────────────────────────────── */

.review-modal-comments {
    margin-top: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.review-modal-comments .review-comments-list {
    max-height: 180px;
}

/* Name row: input + inline error */
.review-comment-name-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-comment-name-error {
    font-size: 0.73rem;
    color: #b91c1c;
    min-height: 1em;
}

/* Required / invalid state */
.review-comment-name-input.is-invalid {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.review-comment-name-input.is-invalid:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

/* Optimistic new comment: subtle entrance animation */
@keyframes reviewCommentSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-comment-item--new {
    animation: reviewCommentSlideIn 0.28s ease forwards;
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.05);
}

/* Dark mode */
body.dark .review-modal-comments {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark .review-comment-item--new {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.07);
}

body.dark .review-comment-name-input,
body.dark .review-comment-name-input.is-invalid {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.review-community-panel {
    margin-top: 14px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 250, 0.92));
    padding: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.review-community-panel .review-community-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-main);
}

.review-community-panel-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(17, 24, 39, 0.06);
    color: var(--text-muted);
    font-size: 0.64rem;
}

.review-community-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.review-community-preview-btn {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.review-community-preview-btn:hover,
.review-community-preview-btn:focus-visible,
.review-community-preview-btn.is-active {
    transform: translateY(-2px);
    border-color: rgba(17, 24, 39, 0.25);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.12);
    outline: none;
}

.review-community-preview-topline,
.review-community-preview-main,
.review-community-preview-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.review-community-preview-main {
    align-items: baseline;
}

.review-community-preview-copy {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}


.review-community-meta,
.review-community-empty {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.review-community-pattern-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.review-community-pattern-line--summary {
    margin-bottom: 0;
}

.review-community-pattern-line .star-rating {
    display: inline-flex;
}

.review-community-pattern-author,
.review-community-pattern-date,
.review-community-pattern-price {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.review-community-pattern-score {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.3;
}

.review-community-pattern-author {
    color: var(--text-main);
    font-weight: 700;
}

.review-community-top-content {
    gap: 20px;
    padding-top: 12px;
}

.review-community-image-container {
    width: 220px;
    height: 220px;
}

.modal-container.community-review-modal-container {
    width: min(1248px, calc(100vw - 40px));
    max-width: 1248px;
    max-height: min(88vh, 920px);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 28%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.community-review-modal-content {
    padding: 36px;
}

.review-community-modal-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.review-community-modal-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 44px;
}

.review-community-modal-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 620px;
}

.review-community-modal-copy h2 {
    margin: 0;
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    line-height: 0.98;
}

.review-community-modal-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.review-community-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.review-community-modal-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.review-community-modal-image-container {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.18);
}

.review-community-modal-image-container .review-community-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    border: none;
    border-radius: 0;
}

.review-community-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.review-community-modal-categories {
    gap: 10px;
}

.review-community-modal-categories .bar-fill {
    width: var(--target-width);
}

.review-community-modal-comment {
    margin: 0;
}

.review-community-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.review-community-score-badge {
    white-space: nowrap;
}

.review-community-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

body.dark .review-community-panel {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(25, 25, 25, 0.96), rgba(16, 16, 16, 0.96));
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
}

body.dark .review-community-panel-kicker,
body.dark .review-community-preview-btn {
    background: rgba(255, 255, 255, 0.04);
}

body.dark .review-community-preview-btn {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .review-community-preview-btn:hover,
body.dark .review-community-preview-btn:focus-visible,
body.dark .review-community-preview-btn.is-active {
    border-color: rgba(255, 255, 255, 0.18);
}

body.dark .community-review-modal-container {
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.2), transparent 28%),
        linear-gradient(160deg, rgba(24, 24, 24, 0.98), rgba(12, 12, 12, 0.98));
}

body.dark .review-community-modal-image-container {
    background: rgba(255, 255, 255, 0.04);
}

.review-community-meta {
    margin: 0 0 8px;
}

.review-community-image-link {
    display: block;
}

.review-community-image {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.review-community-text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    text-align: justify;
    text-align-last: left;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1f2937;
}

.community-reviews-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #ffffff;
    padding: 20px;
}

.community-submit-card {
    margin-top: 20px;
}

.modal-container.community-submit-modal-container {
    width: min(1248px, calc(100vw - 40px));
    max-width: 1248px;
    max-height: 88vh;
    border-radius: 28px;
    overflow: hidden;
    /* Gradient top accent bar */
    border-top: 3px solid transparent;
    background-image: linear-gradient(var(--bg-main, #fff), var(--bg-main, #fff)),
        linear-gradient(90deg, #e63946, #f4a261, #2563eb);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.community-submit-modal-content {
    padding: 32px 36px;
}

/* Modal header section */
.community-submit-modal-content .community-submit-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--text-main);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-submit-modal-content .community-submit-card h3::before {
    content: '✍️';
    font-size: 1.1rem;
    line-height: 1;
}

.community-submit-modal-content .community-submit-card {
    margin-top: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.community-reviews-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.community-reviews-hint {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.86rem;
    padding: 10px 14px;
    background: rgba(37, 99, 235, 0.06);
    border-left: 3px solid #2563eb;
    border-radius: 0 8px 8px 0;
}

.community-modal-divider {
    border-top: 1px solid var(--border-color);
}

.community-review-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.community-review-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 4px;
}

.community-review-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#community-form-step-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
}

.community-review-progress-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.community-review-progress-segment {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #dbe3ef;
    transition: background 0.2s ease;
}

.community-review-progress-segment.is-active {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
}

.community-form-step {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 12px;
}

.community-form-step.is-active {
    display: flex;
}

.community-form-step.is-active.is-transition-forward {
    animation: communityStepSlideInForward 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.community-form-step.is-active.is-transition-backward {
    animation: communityStepSlideInBackward 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes communityStepSlideInForward {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes communityStepSlideInBackward {
    from {
        opacity: 0;
        transform: translateX(-36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .community-form-step.is-active.is-transition-forward,
    .community-form-step.is-active.is-transition-backward {
        animation: none;
    }
}

/* KI Magic Sparkle animations */
.ki-magic-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0deg);
    animation: sparkleFloatFade 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.ki-magic-sparkle svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

@keyframes sparkleFloatFade {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0) rotate(0deg);
    }

    15% {
        opacity: 0.9;
        transform: translate(0, 0) scale(1.2) rotate(45deg);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--drift-x, 0px), var(--drift-y, -150px)) scale(0.3) rotate(var(--rotation, 360deg));
    }
}

.community-step-two-layout {
    align-items: stretch;
}

.community-review-grid {
    display: grid;
    gap: 10px;
}

.community-review-grid.two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Spot-Name / Stadt wrapper – sanfte Ein-/Ausblendung */
#spot-name-city-wrapper {
    animation: spotFieldsReveal 0.25s ease both;
}

/* Enforce hidden attribute even when display:grid is set by parent class */
#spot-name-city-wrapper[hidden] {
    display: none !important;
}

@keyframes spotFieldsReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Verzehrort Bubble Picker ─────────────────────────────────────── */
.verzehrort-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.verzehrort-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    text-align: center;
    /* Center label */
}

.verzehrort-bubbles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
    justify-content: center;
    /* Center bubbles */
}

.verzehrort-bubble {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.verzehrort-bubble input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.verzehrort-bubble span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary, #f9fafb);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    user-select: none;
    text-transform: none;
    letter-spacing: 0;
}

.verzehrort-bubble:hover span {
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.verzehrort-bubble input[type="radio"]:checked+span {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

body.dark .verzehrort-bubble span {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: var(--text-muted);
}

body.dark .verzehrort-bubble:hover span {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

body.dark .verzehrort-bubble input[type="radio"]:checked+span {
    border-color: #3b82f6;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.community-review-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.community-review-form input,
.community-review-form textarea,
.community-review-form select {
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-main);
    background: var(--bg-secondary, #f9fafb);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.community-review-form input[readonly] {
    background: #f3f4f6;
    color: #374151;
}

.community-review-form input:focus,
.community-review-form textarea:focus,
.community-review-form select:focus {
    outline: none;
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.community-review-form textarea {
    min-height: 120px;
    resize: vertical;
}

.community-score-section {
    margin-top: -6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.community-score-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.community-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.community-score-grid label {
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary, #f9fafb);
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 1fr 46px;
    align-items: start;
    gap: 6px 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-main);
    transition: border-color 0.2s ease, background 0.2s ease;
    text-transform: none;
    letter-spacing: 0;
}

.community-score-grid label .score-label-title {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.community-score-grid label .score-description {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
}

.community-score-grid label .score-slider {
    -webkit-appearance: none;
    grid-column: 1;
    width: 100%;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 8px;
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
    border-radius: 4px;
    outline: none;
}

.community-score-grid label .score-slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}

.community-score-grid label .score-slider::-moz-range-progress {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}

.community-score-grid label .score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
}

.community-score-grid label .score-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: none;
}

.community-score-grid label .score-number {
    grid-column: 2;
    align-self: center;
    text-align: center;
    padding: 4px;
    font-size: 0.8rem;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-appearance: textfield;
    pointer-events: none;
    user-select: none;
}

.community-score-grid label .score-number::-webkit-outer-spin-button,
.community-score-grid label .score-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.community-score-hint {
    margin: -2px 0 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.community-comment-counter {
    margin: -2px 0 2px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.community-comment-counter.is-over-limit {
    color: #b91c1c;
    font-weight: 700;
}

.community-review-form input.invalid-score {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08);
}

.community-review-form input.invalid-field,
.community-review-form textarea.invalid-field,
.community-review-form select.invalid-field,
.custom-file-upload-btn.invalid-field {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08);
}

.custom-file-upload-btn.invalid-field {
    color: #b91c1c;
}

.verzehrort-field.invalid-field .verzehrort-bubbles {
    border: 1.5px solid #b91c1c;
    border-radius: 10px;
    padding: 6px;
}

.field-error-message {
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    display: none;
    text-transform: none;
    letter-spacing: 0;
}

.field-error-message.is-visible {
    display: block;
}

.community-review-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.community-review-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.community-review-actions button {
    border: none;
    background: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.community-review-actions button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}

.community-review-actions button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.community-review-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

#community-review-back {
    background: #e2e8f0;
    color: #0f172a;
    box-shadow: none;
}

#community-review-back:hover:not(:disabled) {
    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.35);
}

#community-review-status,
.community-reviews-state {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

#community-review-status.is-error {
    color: #b91c1c;
    font-weight: 700;
}

body.dark #community-review-status.is-error {
    color: #fca5a5;
}

.community-reviews-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#community-review-count {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.community-reviews-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.community-review-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

.community-review-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.community-review-body {
    padding: 12px;
}

.community-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.community-review-head h4 {
    margin: 0;
    font-size: 0.96rem;
}

.community-review-head p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.community-review-score {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.community-review-meta {
    margin: 8px 0 6px;
    font-size: 0.77rem;
    color: var(--text-muted);
}

.community-review-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #1f2937;
    text-align: justify;
    text-align-last: left;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 680px) {

    /* Mobile-only expanded spot cards: keep every inner block inside the outer card. */
    .spot-card {
        overflow: hidden;
    }

    .spot-card.expanded {
        padding: 14px 12px 16px;
        border-radius: 18px;
        background:
            radial-gradient(circle at 85% -20%, rgba(37, 99, 235, 0.05), transparent 52%),
            linear-gradient(180deg, rgba(250, 252, 255, 0.92), rgba(255, 255, 255, 0.97));
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    }

    .spot-card.expanded .spot-card-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
        gap: 10px;
        align-items: flex-start;
    }

    .spot-card.expanded .spot-rank {
        font-size: 1.15rem;
        margin-right: 8px;
        opacity: 0.85;
    }

    .spot-card.expanded .spot-header-text h3 {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .spot-card.expanded .spot-city {
        font-size: 0.9rem;
    }

    .spot-card.expanded .spot-header-actions {
        width: 100%;
        gap: 8px;
    }

    .spot-card.expanded .spot-score-pill,
    .spot-card.expanded .maps-button {
        min-width: 0;
        height: 40px;
    }

    .spot-card.expanded .spot-score-pill .value {
        font-size: 1.25rem;
    }

    .spot-card.expanded .spot-top-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 14px;
    }

    .spot-card.expanded .spot-image-container {
        width: 100%;
        max-width: 100%;
        height: 200px;
        border-radius: 14px;
    }

    .spot-card.expanded .spot-content,
    .spot-card.expanded .spot-categories,
    .spot-card.expanded .spot-details,
    .spot-card.expanded .spot-comment-area,
    .spot-card.expanded .review-community-panel,
    .spot-card.expanded .review-feedback-row,
    .spot-card.expanded .review-community-preview-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .spot-card.expanded .spot-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        margin-bottom: 18px;
        padding: 10px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.62);
    }

    .spot-card.expanded .cat-item-bar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .spot-card.expanded .cat-info {
        gap: 6px;
        min-width: 0;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .spot-card.expanded .cat-info span {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .spot-card.expanded .cat-info span:last-child {
        margin-left: auto;
    }

    .spot-card.expanded .spot-details {
        gap: 8px;
        margin-bottom: 18px;
        padding-top: 12px;
    }

    .spot-card.expanded .badge,
    .spot-card.expanded .spot-comment,
    .spot-card.expanded .review-community-preview-copy,
    .spot-card.expanded .review-community-pattern-author,
    .spot-card.expanded .review-community-pattern-date,
    .spot-card.expanded .review-community-pattern-score,
    .spot-card.expanded .slide-author-info {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .spot-card.expanded .spot-comment {
        padding: 14px;
        font-size: 0.92rem;
        border-radius: 12px;
    }

    .spot-card.expanded .review-community-panel {
        padding: 12px;
        border-radius: 14px;
        overflow: hidden;
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.9));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .spot-card.expanded .review-community-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .spot-card.expanded .review-community-preview-btn {
        padding: 12px;
        border-radius: 12px;
        border-color: rgba(15, 23, 42, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }

    .spot-card.expanded .review-community-preview-topline,
    .spot-card.expanded .review-community-preview-main,
    .spot-card.expanded .review-community-preview-footer {
        min-width: 0;
    }

    .spot-card.expanded .review-feedback-row {
        margin-top: 8px;
        justify-content: stretch;
        padding-top: 8px;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .spot-card.expanded .review-helpful-btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        border-radius: 11px;
    }

    body.dark .spot-card.expanded {
        background:
            radial-gradient(circle at 85% -20%, rgba(96, 165, 250, 0.08), transparent 52%),
            linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(11, 16, 29, 0.96));
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    }

    body.dark .spot-card.expanded .spot-categories {
        border-color: rgba(148, 163, 184, 0.2);
        background: rgba(15, 23, 42, 0.48);
    }

    body.dark .spot-card.expanded .review-community-panel {
        border-color: rgba(148, 163, 184, 0.18);
        background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(15, 23, 42, 0.85));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    body.dark .spot-card.expanded .review-community-preview-btn {
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(17, 24, 39, 0.82);
    }

    body.dark .spot-card.expanded .review-feedback-row {
        border-top-color: rgba(148, 163, 184, 0.22);
    }

    /* Prevent iOS auto-zoom on input focus: font-size must be >= 16px. */
    .community-review-form input,
    .community-review-form textarea,
    .community-review-form select,
    .review-comments-form input,
    .review-comments-form textarea,
    .review-comments-form select {
        font-size: 16px;
        line-height: 1.35;
    }

    .filter-utilities {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
    }

    .filter-search-wrapper {
        display: block;
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }

    .view-toggles {
        display: none;
    }

    .mobile-view-toggle-btn {
        display: inline-flex;
        grid-column: 2;
    }

    .desktop-review-sort-select {
        display: none;
    }

    .mobile-filter-toggle-btn {
        display: inline-flex;
        grid-column: 3;
    }

    .toggle-all-btn,
    .community-submit-trigger {
        grid-column: 1 / -1;
    }

    .community-submit-trigger {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .toggle-all-btn {
        margin-left: 0;
        justify-self: center;
    }

    .mobile-filter-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1800;
    }

    .mobile-filter-panel-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-filter-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1900;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px 20px 0 0;
        border-top: 1px solid var(--border-color);
        background: var(--bg-main);
        box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.22);
        transform: translateY(calc(100% + 24px));
        transition: transform 0.3s ease;
        max-height: 72vh;
        overflow-y: auto;
    }

    .mobile-filter-panel.is-open {
        transform: translateY(0);
    }

    .mobile-filter-panel.is-dragging {
        transition: none;
    }

    .mobile-filter-panel-grabber {
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-color);
        margin: 0 auto 8px;
        touch-action: none;
        cursor: ns-resize;
    }

    .mobile-filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .mobile-filter-panel-header h3 {
        margin: 0;
        font-size: 0.86rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .mobile-filter-close-btn {
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-main);
        border-radius: 999px;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        font-weight: 700;
        padding: 6px 10px;
        cursor: pointer;
    }

    .mobile-filter-section-title {
        display: block;
        margin: 10px 0 6px;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        font-weight: 700;
    }

    .mobile-review-sort-select {
        display: block;
    }

    .mobile-filter-panel .filter-group {
        padding: 0;
    }

    .mobile-filter-reset-btn {
        display: block;
        margin-top: 0;
        width: 100%;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-main);
        border-radius: 10px;
        padding: 11px 14px;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-filter-reset-btn:hover {
        border-color: var(--text-main);
        background: #eef2f7;
    }

    .mobile-filter-clear-btn {
        display: block;
        width: 100%;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-main);
        border-radius: 10px;
        padding: 11px 14px;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-filter-clear-btn:hover {
        border-color: var(--text-main);
        background: #eef2f7;
    }

    .mobile-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    .community-review-grid.two-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-score-grid {
        grid-template-columns: 1fr;
    }

    .community-reviews-card {
        padding: 16px;
    }

    .community-review-form {
        gap: 10px;
    }

    .community-review-form textarea {
        min-height: 150px;
    }

    .community-score-grid label {
        grid-template-columns: 1fr 45px;
        padding: 6px 7px;
    }

    .community-score-grid label .score-label-title,
    .community-score-grid label .score-description {
        grid-column: 1 / -1;
    }

    .community-score-grid label .score-description {
        font-size: 0.68rem;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .community-score-grid label .score-slider {
        grid-column: 1;
        margin: 0;
    }

    .community-score-grid label .score-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .community-score-grid label .score-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    .community-score-grid label .score-number {
        grid-column: 2;
    }

    .community-score-panel {
        padding: 7px 8px 8px;
    }

    .community-review-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .community-review-nav-buttons {
        width: 100%;
    }

    .community-review-nav-buttons button {
        flex: 1 1 120px;
    }

    .review-community-list {
        grid-template-columns: 1fr;
    }

    .community-review-modal-content {
        padding: 22px 18px 18px;
    }

    .community-submit-modal-content {
        padding: 22px 18px 18px;
    }

    .community-review-progress-track {
        gap: 6px;
    }

    .community-photo-section .custom-file-upload-btn {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .modal {
        padding: 12px;
    }

    .modal-container.community-review-modal-container {
        width: min(1248px, calc(100vw - 24px));
        max-height: calc(100svh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 22px;
    }

    .modal-container.community-submit-modal-container {
        width: min(1248px, calc(100vw - 24px));
        max-height: calc(100svh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 22px;
    }

    .review-community-modal-hero {
        padding-right: 32px;
    }

    .review-community-modal-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .review-community-modal-image-container {
        height: 220px;
    }
}

body.dark .mobile-filter-panel {
    background: #111111;
    border-top-color: #2a2a2a;
}

body.dark .mobile-filter-toggle-count {
    background: #111111;
    border-color: #ffffff;
    color: #ffffff;
}

body.dark .mobile-filter-reset-btn:hover {
    background: #1a1a1a;
}

body.dark .mobile-filter-clear-btn:hover {
    background: #1a1a1a;
}

@media (max-width: 420px) {

    .community-review-grid.two-cols {
        grid-template-columns: 1fr;
    }
}

/* Weightings & Footer & Responsive Reset */
.weightings-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.weightings-text {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: justify;
}

.weightings-visual {
    width: 100%;
    max-width: 1200px;
    margin: 32px auto 24px auto;
}

.stacked-bar {
    display: flex;
    height: 12px;
    width: 100%;
    border-radius: 100px;
    overflow: hidden;
    background: var(--bg-secondary);
    margin-bottom: 24px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.segment {
    height: 100%;
    width: 0;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.weightings-visual.animate .segment {
    width: var(--w);
}

/* Staggered animation delays */
.segment:nth-child(1) {
    transition-delay: 0.1s;
}

.segment:nth-child(2) {
    transition-delay: 0.2s;
}

.segment:nth-child(3) {
    transition-delay: 0.3s;
}

.segment:nth-child(4) {
    transition-delay: 0.4s;
}

.segment:nth-child(5) {
    transition-delay: 0.5s;
}

.segment:nth-child(6) {
    transition-delay: 0.6s;
}

.segment:nth-child(7) {
    transition-delay: 0.7s;
}

.segment:nth-child(8) {
    transition-delay: 0.8s;
}

.segment:nth-child(9) {
    transition-delay: 0.9s;
}

.segment:hover {
    transform: scaleY(1.3);
    z-index: 10;
}

.labels-container {
    display: flex;
    width: 100%;
    height: 60px;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.weightings-visual.animate .labels-container {
    opacity: 1;
}

.label-wrapper {
    width: var(--w);
    position: relative;
    display: flex;
    justify-content: center;
}

.label-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
}

.labels-container.top .label-content {
    bottom: 0;
}

.labels-container.bottom .label-content {
    top: 0;
}

.label-text {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-line {
    width: 1px;
    height: 30px;
    background: var(--border-color);
}

.labels-container.top .label-line {
    margin-top: 4px;
}

.labels-container.bottom .label-line {
    margin-bottom: 4px;
}

.mobile-only {
    display: none !important;
}

.stacked-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 24px;
    justify-items: center;
    margin-top: 32px;
}

.legend-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stacked-bar {
    display: flex;
    height: 24px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-secondary);
    margin: 12px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}



.contact-section {
    min-height: calc(100vh - 240px);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.contact-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.contact-image-wrapper {
    flex: 1.5;
    max-width: 600px;
    display: flex;
    justify-content: center;
}

.contact-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.contact-card {
    flex: 1;
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px 24px;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .spot-top-content {
        flex-direction: column;
        gap: 24px;
    }

    .spot-image-container {
        width: 100%;
        height: 180px;
        /* Reduced height for mobile */
    }

    .spot-image {
        border-radius: 12px;
    }

    .spot-comment {
        padding: 16px;
        font-size: 0.9rem;
    }


    .spot-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .spot-card {
        padding: 16px;
    }

    .comparison-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .chart-wrapper {
        padding: 16px;
    }

    .spot-toggles-list {
        max-height: 300px;
    }

    .filter-utilities {
        justify-content: center;
        margin-top: 12px;
    }

    .labels-container {
        display: none;
    }

    .mobile-only {
        display: grid !important;
    }

    .weightings-visual {
        margin-top: 0;
    }

    .weightings-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
    }

    .stacked-legend {
        margin-top: 16px;
    }

    .weightings-visual {
        order: 1;
        width: 100%;
    }

    .weightings-text {
        order: 2;
        width: 100% !important;
        text-align: left;
    }

    .stacked-legend {
        justify-items: start;
    }

    .legend-item {
        justify-content: flex-start;
    }

    .certificate-container {
        order: 3;
        width: 100% !important;
        margin-top: 8px;
        padding-top: 12px;
    }

    .chart-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 400px;
    }

    .controls-wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        height: auto !important;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    section {
        margin-bottom: var(--section-gap-mobile);
    }

    .chart-wrapper {
        max-height: 320px;
        padding: 20px !important;
    }

    /* Spotlight Mobile Optimization */
    #spotlight-container {
        height: 450px;
        /* Fixed height for mobile stability */
    }

    .latest-card {
        flex-direction: column;
        height: 100%;
    }

    .latest-image-wrapper {
        width: 100%;
        height: 180px;
        flex: none;
    }

    .latest-content {
        padding: 20px 24px;
        flex: none;
    }

    .latest-info h3 {
        font-size: 1.4rem;
    }

    .latest-score-block {
        padding: 8px 14px;
        border-radius: 8px;
    }

    .latest-score-value {
        font-size: 1.4rem;
    }

    .latest-comment {
        -webkit-line-clamp: 4;
    }

    .spot-header-reviews,
    .latest-meta-reviews {
        display: inline-block;
        margin-left: 6px;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .spot-card-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .spot-rank {
        display: block;
        font-size: 1.4rem;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .spot-header-text {
        flex: 1;
        min-width: 0;
    }

    .spot-header-text h3 {
        font-size: 1.1rem;
    }

    .stars-outer {
        font-size: 0.9rem;
        letter-spacing: 0;
    }

    .spot-title-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 4px;
    }

    .spot-header-actions {
        width: 100%;
        flex-direction: row;
        gap: 10px;
    }

    .spot-score-pill,
    .maps-button {
        flex: 1;
        height: 38px;
        min-width: unset;
        padding: 0 12px;
        font-size: 0.75rem;
        text-align: center;
        justify-content: center;
    }

    .spot-score-pill .value {
        font-size: 1.4rem;
        line-height: 1;
    }

    .spot-score-pill .label {
        font-size: 0.6rem;
    }

}

/* ── Analytics Section ──────────────────────────────────────────────── */

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap);
    width: 100%;
}

.analytics-card--wide {
    grid-column: 1 / -1;
}

.analytics-card {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--card-padding);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.analytics-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.analytics-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-main);
}

.analytics-badge {
    background: var(--text-main);
    color: var(--bg-main);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
}

.analytics-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 400;
}

.analytics-card--credibility {
    position: relative;
}

.credibility-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.credibility-kpi {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.75), rgba(246, 247, 250, 0.95));
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.credibility-kpi-copy {
    min-width: 0;
    flex: 1;
}

.credibility-kpi-label {
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
    margin: 0;
}

.credibility-kpi-value {
    font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--text-main);
    margin: 8px 0 6px;
}

.credibility-kpi-detail {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.credibility-kpi-trend {
    width: 96px;
    min-width: 96px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.credibility-kpi-sparkline {
    width: 94px;
    height: 36px;
    overflow: visible;
}

.credibility-kpi-sparkline-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 2;
    opacity: 0.5;
}

.credibility-kpi-sparkline-line {
    fill: none;
    stroke: var(--sparkline-color, var(--text-main));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: left center;
    transform-box: fill-box;
}

.credibility-kpi-sparkline-dot {
    fill: var(--sparkline-color, var(--text-main));
    transform-origin: center center;
    transform-box: fill-box;
}

.credibility-kpis-animate .credibility-kpi-sparkline-line {
    animation: kpiSparklineDraw 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--spark-delay, 0ms);
    will-change: transform, opacity;
}

.credibility-kpis-animate .credibility-kpi-sparkline-dot {
    animation: kpiSparklineDot 0.45s ease-out both;
    animation-delay: calc(var(--spark-delay, 0ms) + 0.28s);
    will-change: transform, opacity;
}

@keyframes kpiSparklineDraw {
    from {
        transform: scaleX(0.02);
        opacity: 0.2;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes kpiSparklineDot {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .credibility-kpis-animate .credibility-kpi-sparkline-line,
    .credibility-kpis-animate .credibility-kpi-sparkline-dot {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

body.dark .credibility-kpi {
    background: linear-gradient(155deg, rgba(29, 31, 36, 0.92), rgba(22, 24, 29, 0.95));
}

.analytics-badge--tooltip {
    position: relative;
    cursor: help;
}

.analytics-tooltip-text {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 10px;
    width: 260px;
    z-index: 20;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    white-space: normal;
}

.analytics-tooltip-text::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-bottom-color: #1a1a1a;
}

.analytics-badge--tooltip:hover .analytics-tooltip-text {
    display: block;
}

/* P/L Bar Chart */
.pl-chart-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    justify-content: space-between;
}

.pl-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease calc(var(--pl-delay) + 0s),
        transform 0.4s ease calc(var(--pl-delay) + 0s);
}

.pl-animate .pl-row {
    opacity: 1;
    transform: translateX(0);
}

.pl-rank {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0.25;
    line-height: 1;
    text-align: center;
}

.pl-row:nth-child(1) .pl-rank {
    color: #D4AF37;
    opacity: 0.9;
}

.pl-row:nth-child(2) .pl-rank {
    color: #A8A8A8;
    opacity: 0.9;
}

.pl-row:nth-child(3) .pl-rank {
    color: #B08D57;
    opacity: 0.9;
}

.pl-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pl-name-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.pl-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease;
}

.pl-row:nth-child(1) .pl-name {
    color: #D4AF37;
}

.pl-row:nth-child(2) .pl-name {
    color: #A8A8A8;
}

.pl-row:nth-child(3) .pl-name {
    color: #B08D57;
}

.pl-name:hover {
    opacity: 0.6;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pl-city {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
}

.pl-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-bar-track {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 100px;
    overflow: hidden;
}

.pl-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--text-main);
    width: 0;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--pl-delay);
}

.pl-animate .pl-bar-fill {
    width: var(--pl-width);
}

/* Rank 1-3 bar colors: Gold, Silver, Bronze */
.pl-row:nth-child(1) .pl-bar-fill {
    background: #D4AF37;
}

.pl-row:nth-child(2) .pl-bar-fill {
    background: #A8A8A8;
}

.pl-row:nth-child(3) .pl-bar-fill {
    background: #B08D57;
}

.pl-value {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

/* Rank 1-3 value colors: Gold, Silver, Bronze */
.pl-row:nth-child(1) .pl-value {
    color: #D4AF37;
}

.pl-row:nth-child(2) .pl-value {
    color: #A8A8A8;
}

.pl-row:nth-child(3) .pl-value {
    color: #B08D57;
}

.pl-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pl-meta-score,
.pl-meta-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.pl-meta-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: 0.7;
}

.pl-meta-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.pl-maps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.pl-maps-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* Divider between rows */
.pl-row+.pl-row {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

/* ── Kategorie-Awards ─────────────────────────── */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
    align-content: stretch;
}

.award-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    justify-content: flex-start;
}

.award-tile:hover {
    background: var(--text-main);
    border-color: var(--text-main);
}

.award-tile:hover .award-cat,
.award-tile:hover .award-name,
.award-tile:hover .award-val {
    color: var(--bg-main);
}

.award-cat {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.award-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.award-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-top: 2px;
    transition: color 0.2s ease;
}

/* ── Kriterien-Heatmap ───────────────────────── */
.heatmap-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hm-header,
.hm-row {
    display: grid;
    grid-template-columns: 110px repeat(4, 1fr);
    gap: 3px;
    align-items: center;
}

.hm-header {
    margin-bottom: 3px;
}

.hm-col-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    padding: 0 2px;
}

.hm-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hm-body.hm-animate {
    opacity: 1;
}

.hm-row {
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}

.hm-row:hover .hm-cell {
    filter: brightness(1.12);
}

.hm-row-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.hm-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 4px;
    transition: filter 0.2s ease;
    cursor: pointer;
}

.hm-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.hm-legend-bar {
    flex: 1;
    height: 6px;
    border-radius: 100px;
    background: linear-gradient(to right, hsl(0, 80%, 42%), hsl(45, 80%, 42%));
}

.hm-legend-bar--upper {
    background: linear-gradient(to right, hsl(45, 80%, 42%), hsl(120, 80%, 42%));
}

.hm-legend-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Analytics mobile */
@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .credibility-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .credibility-kpi {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .credibility-kpi-trend {
        width: 100%;
        min-width: 0;
        margin-top: 0;
        justify-content: flex-start;
    }

    .credibility-kpi-sparkline {
        width: 80px;
        height: 32px;
    }

    .analytics-card {
        padding: var(--card-padding-mobile);
        border-radius: 14px;
    }

    .analytics-card-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .analytics-title {
        font-size: 1rem;
    }

    /* P/L Chart */
    .pl-row {
        grid-template-columns: 24px 1fr;
        gap: 10px;
        position: relative;
    }

    .pl-meta {
        display: none;
    }

    .pl-value {
        font-size: 0.72rem;
        min-width: 40px;
    }

    .pl-rank {
        font-size: 1.1rem;
    }

    /* Awards */
    .awards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .award-tile {
        padding: 8px;
        border-radius: 8px;
    }

    .award-cat {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }

    .award-name {
        font-size: 0.68rem;
    }

    .award-val {
        font-size: 0.95rem;
    }

    /* Heatmap: make cells smaller, ensure horizontal scroll */
    .heatmap-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hm-header,
    .hm-row {
        grid-template-columns: 72px repeat(4, minmax(40px, 1fr));
        gap: 2px;
        min-width: 0;
    }

    .hm-cell {
        height: 24px;
        font-size: 0.58rem;
    }

    .hm-row-label {
        font-size: 0.6rem;
    }

    .hm-col-label {
        font-size: 0.48rem;
    }
}

@media (max-width: 480px) {
    .credibility-kpis {
        grid-template-columns: 1fr;
    }

    .credibility-kpi {
        align-items: center;
    }
}

/* Contact Section */
.contact-section {
    min-height: calc(100vh - 240px);
    min-height: calc(100svh - 240px);
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
}

.contact-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}

.contact-image-wrapper {
    flex: 2;
    max-width: 800px;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

.contact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.contact-card {
    flex: 2;
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 60px 40px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-content {
    width: 100%;
}

.contact-icon {
    margin-bottom: 24px;
    color: var(--text-main);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contact-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.contact-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 32px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--text-main);
    color: var(--bg-main);
    text-decoration: none;
    padding: 18px 48px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.contact-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    background: #000;
}

.contact-button svg {
    transition: transform 0.3s ease;
}

.contact-button:hover svg {
    transform: translate(3px, -3px);
}

@media (max-width: 768px) {
    .contact-card {
        padding: 40px 24px;
    }

    .contact-container {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .contact-image-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .contact-section {
        min-height: auto;
    }

    .contact-content h3 {
        font-size: 1.4rem;
    }

    .contact-content p {
        font-size: 1rem;
    }

    .contact-button {
        padding: 16px 32px;
        font-size: 0.8rem;
    }
}

.weightings-text p {
    margin-bottom: 16px;
}

.weightings-text strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox.active {
    display: flex;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
}

.lightbox-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 4001;
}

.lightbox.active .lightbox-content {
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

body.modal-open {
    overflow: hidden;
}

/* Modal System */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.modal-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    z-index: 3001;
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3002;
    padding: 0;
    transition: var(--transition);
}

.modal-close:focus,
.modal-close:focus-visible,
.modal-close:active {
    outline: none !important;
    box-shadow: none !important;
}

.modal-close span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: var(--transition);
    position: absolute;
}

.modal-close span:nth-child(1) {
    transform: rotate(45deg);
}

.modal-close span:nth-child(2) {
    transform: rotate(-45deg);
}

.modal-close:hover {
    opacity: 0.6;
}

.modal-close:hover span {
    background-color: var(--text-main);
}

.modal-content {
    padding: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--text-main);
    line-height: 1.6;
}

.modal-content h2 {
    margin-bottom: 24px;
    font-weight: 800;
}

.modal-content h3 {
    margin: 24px 0 12px;
    font-size: 1.1rem;
}

.modal-content p {
    margin-bottom: 16px;
    color: var(--text-muted);
}

.comment-feedback-modal-container {
    max-width: 560px;
}

.comment-feedback-content {
    text-align: center;
    padding: 56px 40px 40px;
}

.comment-feedback-content p {
    color: var(--text-main);
    opacity: 0.86;
}

.comment-feedback-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-main);
}

body.dark .comment-feedback-eyebrow,
html.dark-init body .comment-feedback-eyebrow {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.comment-feedback-content h2 {
    margin-bottom: 16px;
}

.comment-feedback-confirm {
    margin-top: 8px;
    border: 1px solid #111827;
    background: #111827;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 22px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.comment-feedback-confirm:hover {
    opacity: 1;
    background: #0b1220;
    border-color: #0b1220;
    transform: translateY(-1px);
}

.comment-feedback-confirm:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22);
}

body.dark .comment-feedback-confirm,
html.dark-init body .comment-feedback-confirm {
    background: #e5e7eb;
    border-color: #e5e7eb;
    color: #111827;
}

body.dark .comment-feedback-confirm:hover,
html.dark-init body .comment-feedback-confirm:hover {
    background: #f3f4f6;
    border-color: #f3f4f6;
}

body.dark .comment-feedback-confirm:focus-visible,
html.dark-init body .comment-feedback-confirm:focus-visible {
    outline-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.24);
}

/* ── KI-Schreibhilfe – Notice Modal ───────────────────────────────── */
#ki-score-notice-modal {
    z-index: 3100;
}

.ki-score-modal-container {
    max-width: 500px;
}

.ki-score-modal-content {
    text-align: center;
    padding: 56px 40px 40px;
}

.ki-score-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.18);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7c3aed;
}

body.dark .ki-score-eyebrow {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.25);
    color: #a78bfa;
}

.ki-score-modal-content h2 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    font-weight: 800;
}

.ki-score-confirm {
    margin-top: 16px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 26px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ki-score-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

body.dark .ki-score-confirm {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: #121214;
}

/* ── KI-Schreibhilfe – Inline Notice ──────────────────────────────── */
.ki-score-inline-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    animation: inlineNoticeReveal 0.3s ease both;
}

body.dark .ki-score-inline-notice {
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.20);
}

.ki-score-inline-notice p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #6d28d9;
}

body.dark .ki-score-inline-notice p {
    color: #c084fc;
}

.ki-score-inline-icon {
    font-size: 1rem;
    line-height: 1;
    margin-top: 1px;
}

@keyframes inlineNoticeReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.review-share-modal-container {
    max-width: 840px;
    max-height: calc(100svh - 40px);
    max-height: calc(100dvh - 40px);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.98));
}

.review-share-modal-container.is-photo-focus-mode {
    max-height: calc(100svh - 8px);
    max-height: calc(100dvh - 8px);
}

.review-share-modal-content {
    padding: clamp(16px, 2.2vh, 30px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    transition: padding 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.review-share-modal-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
}

.review-share-actions-shell {
    margin-top: auto;
    padding-top: 12px;
    overflow: hidden;
    opacity: 1;
    max-height: 260px;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.28s ease,
        max-height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
        margin-top 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
        padding-top 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.review-share-panel-toggle {
    align-self: flex-end;
    margin-top: 10px;
    border: 1px dashed rgba(15, 23, 42, 0.38);
    background: rgba(255, 255, 255, 0.56);
    color: rgba(15, 23, 42, 0.78);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.76rem;
    letter-spacing: 0.2px;
    text-transform: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.review-share-panel-toggle::before {
    content: '\25B2';
    font-size: 0.65rem;
    opacity: 0.8;
}

.review-share-panel-toggle:hover {
    border-color: rgba(15, 23, 42, 0.72);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    transform: translateY(-1px);
}

.review-share-panel-toggle[aria-pressed='true'] {
    border-style: solid;
    border-color: rgba(20, 83, 45, 0.55);
    background: rgba(220, 252, 231, 0.82);
    color: #14532d;
}

.review-share-panel-toggle[aria-pressed='true']::before {
    content: '\25BC';
}

.review-share-download-btn {
    display: block;
    opacity: 1;
    max-height: none;
    margin-top: 0;
    align-self: stretch;
    pointer-events: auto;
    transform: none;
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.review-share-download-btn:hover {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

.review-share-modal-content.is-photo-focus-mode .review-share-actions-shell {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.review-share-modal-content.is-photo-focus-mode .review-share-download-btn {
    margin-top: 0;
}

.review-share-modal-content.is-photo-focus-mode {
    padding: 8px;
    gap: 6px;
}

.review-share-modal-content.is-photo-focus-mode .review-share-modal-layout {
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.review-share-modal-content.is-photo-focus-mode .review-share-story-card {
    aspect-ratio: 9 / 16;
    width: auto;
    height: 62vh;
    height: 62dvh;
    max-height: 622px;
    max-width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    transform: none;
}

.review-share-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    flex: 1;
    color: var(--text-main);
    text-align: left;
}

.review-share-sidebar-header h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 10px 0;
    color: var(--text-main);
}

.review-share-sidebar-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.review-share-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-share-story-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: clamp(320px, 56svh, 640px);
    min-height: clamp(320px, 56dvh, 640px);
    border-radius: 26px;
    overflow: hidden;
    contain: paint;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 52px rgba(15, 23, 42, 0.3);
    background: #1C1917;
    display: flex;
    align-items: flex-end;
    transition: min-height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.34s ease;
    --story-accent: #FF9F1C;
    --story-bg: #1C1917;
    --story-text: #ffffff;
}

/* Top brand ribbon */
.review-share-story-card::before {
    content: 'CHECK OUT THIS REVIEW!';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    background: var(--story-accent);
    color: var(--story-bg);
    font-weight: 900;
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-align: center;
    z-index: 4;
    text-transform: uppercase;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Hide raw HTML story preview elements by default to prevent visual flickering before image is rendered */
.review-share-story-card::before,
.review-share-story-card .review-share-story-image,
.review-share-story-card .review-share-story-overlay,
.review-share-story-card .review-share-story-qr,
.review-share-story-card .review-share-story-content {
    opacity: 0;
    pointer-events: none;
}

/* Ensure they are fully visible for high-res rendering/export */
.review-share-story-card.is-export::before,
.review-share-story-card.is-export .review-share-story-image,
.review-share-story-card.is-export .review-share-story-overlay,
.review-share-story-card.is-export .review-share-story-qr,
.review-share-story-card.is-export .review-share-story-content {
    opacity: 1 !important;
}

.review-share-story-rendered-preview {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.35s ease-in-out;
    opacity: 0;
}

.review-share-story-rendered-preview.is-visible {
    opacity: 1;
}

.review-share-story-rendered-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

.review-share-story-loading {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: inherit;
    transition: opacity 0.3s ease-in-out;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: all;
}

.review-share-story-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.review-share-story-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: review-share-spin 0.8s linear infinite;
}

@keyframes review-share-spin {
    to {
        transform: rotate(360deg);
    }
}

.review-share-copy-btn,
.review-share-download-btn {
    width: 100%;
}

.review-share-story-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1f2937;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Yellow diagonal accent bar at the photo/text seam */
.review-share-story-overlay {
    position: absolute;
    top: 44%;
    left: -8%;
    right: -8%;
    height: 6%;
    background: var(--story-accent);
    transform: rotate(-3.5deg);
    transform-origin: center;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 0;
}

.review-share-story-qr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 3;
    width: clamp(60px, 18%, 100px);
    height: clamp(60px, 18%, 100px);
    aspect-ratio: 1 / 1;
    padding: 5px;
    border-radius: 8px;
    background: #ffffff;
    border: 2px solid var(--story-accent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
}

.review-share-story-qr-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    mix-blend-mode: normal;
    border-radius: 4px;
    filter: invert(1);
    background: #ffffff;
}

.review-share-story-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 52%;
    padding: 38px 22px 18px;
    color: var(--story-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    background: transparent;
}

.review-share-story-content h3 {
    margin: 0;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 0.95;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--story-accent);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
    word-break: break-word;
}

.review-share-story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
    align-items: center;
    margin-top: -2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.review-share-story-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    margin-right: clamp(80px, 24%, 120px);
}

.review-share-story-pill {
    border-radius: 0;
    padding: 4px 10px;
    font-size: 0.66rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--story-text);
    background: transparent;
    border: 1.5px solid var(--story-accent);
}

.review-share-story-pill--accent {
    background: var(--story-accent);
    border-color: var(--story-accent);
    color: var(--story-bg);
}

.review-share-story-score {
    margin-top: -6px;
    margin-bottom: 4px;
    display: block;
}

.review-share-story-score .stars-outer {
    font-size: 1.55rem !important;
}

.review-share-story-footer {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
    font-style: italic;
    padding-left: 10px;
    border-left: 3px solid var(--story-accent);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: clamp(80px, 24%, 120px);
}

.review-share-story-cta {
    position: absolute;
    bottom: 16px;
    left: 22px;
    right: clamp(90px, 24%, 130px);
    font-size: 0.6rem;
    line-height: 1.15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--story-bg);
    background: var(--story-accent);
    padding: 6px 10px;
    border-radius: 0;
    text-align: left;
    margin-top: 0;
    align-self: auto;
    white-space: normal;
    word-break: break-word;
}

.review-share-actions {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.review-share-actions h3 {
    margin: 0;
    font-size: 1rem;
}

.review-share-actions p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.review-share-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.review-share-action-btn {
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: #0f172a;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.review-share-action-btn:hover {
    border-color: #111827;
    transform: translateY(-1px);
}

.review-share-action-btn.review-share-download-btn,
.review-share-action-btn.review-share-download-btn:hover {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

.review-share-action-btn.is-success {
    border-color: #14532d;
    background: #dcfce7;
    color: #14532d;
}

.review-share-action-btn.is-error {
    border-color: #991b1b;
    background: #fef2f2;
    color: #991b1b;
}

body.dark .review-share-modal-container {
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.2), transparent 30%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.22), transparent 34%),
        linear-gradient(150deg, rgba(20, 20, 20, 0.99), rgba(10, 10, 10, 0.99));
}

body.dark .review-share-actions {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark .review-share-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f8fafc;
}

body.dark .review-share-action-btn.review-share-download-btn,
body.dark .review-share-action-btn.review-share-download-btn:hover {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

body.dark .review-share-action-btn.is-success {
    background: rgba(20, 83, 45, 0.5);
    border-color: rgba(74, 222, 128, 0.5);
    color: #bbf7d0;
}

body.dark .review-share-action-btn.is-error {
    background: rgba(153, 27, 27, 0.5);
    border-color: rgba(248, 113, 113, 0.48);
    color: #fecaca;
}

body.dark .review-share-panel-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.26);
    color: rgba(248, 250, 252, 0.86);
}

body.dark .review-share-panel-toggle:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

body.dark .review-share-panel-toggle[aria-pressed='true'] {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(20, 83, 45, 0.4);
    color: #bbf7d0;
}

@media (max-width: 768px) {
    .review-share-modal-content {
        padding: 16px;
        height: 100%;
        min-height: 0;
    }

    .review-share-story-qr {
        top: 10px;
        right: 10px;
        width: clamp(82px, 25%, 120px);
        height: clamp(82px, 25%, 120px);
        aspect-ratio: 1 / 1;
        padding: 6px;
        border-radius: 10px;
    }

    .review-share-story-qr-image {
        border-radius: 6px;
    }

    .review-share-actions-shell {
        margin-top: 12px;
        padding-top: 0;
    }

    .review-share-panel-toggle {
        width: 100%;
        align-self: stretch;
        margin-top: 12px;
        position: sticky;
        bottom: 8px;
        z-index: 4;
        backdrop-filter: blur(6px);
    }

    .review-share-story-card {
        min-height: clamp(300px, 50svh, 520px);
        min-height: clamp(300px, 50dvh, 520px);
        border-radius: 20px;
    }

    .review-share-modal-content.is-photo-focus-mode .review-share-modal-layout {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .review-share-modal-content.is-photo-focus-mode .review-share-story-card {
        aspect-ratio: 9 / 16;
        width: auto;
        height: 52vh;
        height: 52dvh;
        max-width: 100%;
        margin: 0 auto;
        flex: 0 1 auto;
        min-height: 0;
    }

    .review-share-sidebar {
        gap: 12px;
        width: 100%;
    }

    .review-share-sidebar-header {
        display: none;
    }

    .review-share-sidebar-actions {
        gap: 8px;
    }

    .review-share-modal-container.is-photo-focus-mode {
        max-height: calc(100svh - 4px);
        max-height: calc(100dvh - 4px);
    }

    .review-share-modal-content.is-photo-focus-mode {
        padding: 8px;
    }

    .review-share-actions-row {
        grid-template-columns: 1fr;
    }
}

.legal-section {
    margin-bottom: 32px;
}

.contact-section {
    min-height: calc(100vh - 240px);
    min-height: calc(100svh - 240px);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.back-to-top-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.back-to-top-btn {
    padding: 12px 24px !important;
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Next up Subsection - Sleek Ticker Bar */
.next-up-ticker-bar {
    display: flex;
    align-items: center;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    height: 52px;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.next-up-ticker-label {
    background: var(--text-main);
    color: var(--bg-main);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    flex-shrink: 0;
    z-index: 10;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-breathing 1.5s infinite ease-in-out;
}

@keyframes pulse-breathing {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
        transform: scale(0.95);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
        transform: scale(1.2);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
        transform: scale(0.95);
    }
}

.next-up-ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--bg-main);
}

/* Masking gradients for smooth entry/exit */
.next-up-ticker-wrapper::before,
.next-up-ticker-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.next-up-ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-main), transparent);
}

.next-up-ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-main), transparent);
}

.next-up-ticker {
    display: inline-flex;
    align-items: center;
    animation: ticker-scroll 25s linear infinite;
    gap: 32px;
    padding-left: 20px;
    height: 100%;
    will-change: transform;
    -webkit-transform: translateZ(0);
}

.next-up-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    flex-shrink: 0;
}

.next-up-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.next-up-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.next-up-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-main);
    white-space: nowrap;
}

.next-up-city {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    white-space: nowrap;
}

.next-up-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    opacity: 0.8;
}

.next-up-separator {
    color: var(--border-color);
    font-weight: 300;
}

@keyframes ticker-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Hover to pause for readability */
@media (hover: hover) {
    .next-up-ticker-wrapper:hover .next-up-ticker {
        animation-play-state: paused;
    }
}

.doner-news-subsection {
    margin-top: 32px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 22px 18px;
    background: var(--bg-main);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.doner-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.doner-news-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.doner-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--text-main);
    color: var(--bg-main);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.doner-news-badge .pulse-dot {
    width: 6px;
    height: 6px;
}

.doner-news-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--text-main);
}

.doner-news-refresh-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.doner-news-refresh-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--bg-secondary);
}

.doner-news-refresh-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.doner-news-status {
    margin: 0 0 14px 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.doner-news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 720px) {
    .doner-news-list {
        grid-template-columns: 1fr 1fr;
    }
}

.doner-news-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px 16px 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.015);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    overflow: hidden;
    animation: doner-news-fade-in 0.35s ease both;
}

.doner-news-item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.doner-news-item-media {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark .doner-news-item-media {
    background: rgba(255, 255, 255, 0.05);
}

.doner-news-item-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doner-news-item-thumb-favicon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .doner-news-item-media {
        width: 56px;
        min-width: 56px;
        height: 56px;
        min-height: 56px;
        border-radius: 6px;
    }

    .doner-news-item-thumb-favicon {
        width: 24px;
        height: 24px;
    }
}

.doner-news-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--text-main);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.doner-news-item:hover {
    transform: translateY(-1px);
    border-color: var(--text-main);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    background: var(--bg-main);
}

.doner-news-item:hover::before {
    opacity: 1;
}

body.dark .doner-news-item {
    background: rgba(255, 255, 255, 0.03);
}

body.dark .doner-news-item:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.doner-news-item-title {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doner-news-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.doner-news-item-source {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    font-size: 0.68rem;
}

.doner-news-item-meta-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.6;
}

.doner-news-item-date {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.doner-news-skeleton {
    height: 64px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%);
    background-size: 200% 100%;
    animation: doner-news-shimmer 1.4s ease-in-out infinite;
}

body.dark .doner-news-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
}

@media (max-width: 768px) {
    .doner-news-list[aria-busy="true"] .doner-news-skeleton:nth-child(n+4) {
        display: none;
    }
}

@keyframes doner-news-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes doner-news-fade-in {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.doner-news-expand-btn {
    margin-top: 12px;
}

.doner-news-expand-btn:disabled {
    cursor: default;
    opacity: 0.75;
}

.doner-news-item-collapsing {
    animation: doner-news-fade-out 0.22s ease forwards;
    pointer-events: none;
}

@keyframes doner-news-fade-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

body.low-perf-mode .doner-news-skeleton {
    animation: none;
}

/*
/* Next Up Map */
.next-up-map-container {
    margin-top: 20px;
    width: 100%;
}

/* Grayscale Map Filter for Blueprint look */
.leaflet-tile-pane {
    filter: grayscale(100%) invert(5%) contrast(1.1);
}

#next-up-map {
    height: 400px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #f8f9fa;
    z-index: 1;
}

.map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.marker-inner.planned {
    background: #fbbf24;
    border-style: dashed;
}

.marker-inner.tested {
    background: #000;
}

.map-popup .leaflet-popup-content-wrapper {
    background: #000;
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
}

.map-popup .leaflet-popup-tip {
    background: #000;
}

.map-popup-title {
    font-weight: 800;
    margin-bottom: 4px;
    display: block;
}

.map-popup-meta {
    opacity: 0.7;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.map-reset-btn {
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.2s;
}

.map-reset-btn:hover {
    background: #f4f4f4;
}

@media (max-width: 900px) {
    .next-up-ticker {
        animation-duration: 20s;
    }
}

@media (max-width: 600px) {
    #next-up-map {
        height: 300px;
    }
}

*/
/* Accessibility: disable heavy animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .bar-fill {
        transition: none !important;
        width: var(--target-width) !important;
    }

    .segment {
        transition: none !important;
        width: var(--w) !important;
    }

    #kebab-canvas {
        display: none;
    }
}

/* --- Slideshow Styles --- */

/* Slide image track for sliding animation */
.slide-image-track {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    height: 100%;
}

.spot-image-container .slide-image {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    opacity: 0.6;
    transition: opacity 0.3s;
    pointer-events: auto;
}

.spot-image-container .slide-image.active {
    opacity: 1;
}

/* Dot indicators at bottom of image container */
.slide-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.slide-dots--comments {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 8px;
}

.slide-dots--comments .slide-dot {
    background: var(--text-muted);
    opacity: 0.3;
}

.slide-dots--comments .slide-dot.active {
    background: var(--text-main);
    opacity: 1;
}

.slide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 0;
}

.slide-dot.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

.spot-comment-area {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    touch-action: pan-y;
    user-select: none;
}

.slide-comment-track {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

/* Comment fade/slide: each item uses spot-comment style */
.slide-comment-item {
    flex: 0 0 100%;
    width: 100%;
    opacity: 0.4;
    transform: scale(0.95);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.slide-comment-item.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.slide-author-info {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
    padding-left: 22px;
}

@media (max-width: 768px) {
    .spot-image-container .slide-image {
        border-radius: 12px;
    }
}

/* --- Page Loader --- */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    z-index: 10000;
    /* Back to top priority */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease-out, visibility 0.6s;
    background-image:
        radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 32px 32px;
}


#page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    max-width: 300px;
    width: 90%;
}

.loader-logo {
    margin-bottom: 24px;
    animation: loaderPulse 1.5s infinite ease-in-out;
}

.loader-logo img {
    height: 80px;
    width: auto;
}

@keyframes loaderPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
}

.loader-status {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.loader-bar {
    height: 2px;
    width: 100%;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    animation: loaderProgress 2s infinite ease-in-out;
}

@keyframes loaderProgress {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

body.dark #page-loader {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

body.dark .loader-logo img,
html.dark-init body .loader-logo img {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.1);
}

/* ── Hero Timeline Styles ─────────────────────────────────────────── */
.hero-timeline-container {
    margin-top: 40px;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 24px 28px 24px;
    background: rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.5s;
    position: relative;
    z-index: 100;
}

body.dark .hero-timeline-container {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.hero-timeline-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    opacity: 0.8;
}

.hero-timeline-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    height: 36px;
}

.hero-timeline-axis-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-timeline-axis {
    position: relative;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 1px;
}

body.dark .hero-timeline-line {
    background: rgba(255, 255, 255, 0.1);
}

.hero-timeline-markers {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

/* Entrance animation for timeline markers */
@keyframes timeline-marker-drop {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - var(--stack-offset, 0px) - 18px)) scale(0.2);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - var(--stack-offset, 0px) + 4px)) scale(1.25);
    }
    80% {
        transform: translate(-50%, calc(-50% - var(--stack-offset, 0px) - 2px)) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - var(--stack-offset, 0px))) scale(var(--scale, 1));
    }
}

/* Continuous pulse ring */
@keyframes timeline-marker-ping {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    75%, 100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* Glowing dot markers */
.hero-timeline-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, calc(-50% - var(--stack-offset, 0px))) scale(var(--scale, 1));
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-main);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    background-color: var(--timeline-marker-color);
    color: var(--timeline-marker-color);
    opacity: 0;
}

.hero-timeline-container.animate .hero-timeline-marker {
    animation: timeline-marker-drop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--marker-delay, 0ms) both;
}

.hero-timeline-container.animate .hero-timeline-marker::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--timeline-marker-color);
    opacity: 0;
    animation: timeline-marker-ping 2.6s calc(var(--marker-delay, 0ms) + 600ms) ease-out infinite;
    pointer-events: none;
}

.hero-timeline-marker:hover,
.hero-timeline-marker.active {
    --scale: 1.4;
    box-shadow: 0 0 10px currentColor;
    z-index: 10;
}

/* Axis ticks */
.hero-timeline-tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 8px;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

body.dark .hero-timeline-tick {
    background: rgba(255, 255, 255, 0.15);
}

.hero-timeline-tick-label {
    position: absolute;
    top: 28px;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* Tooltip styles */
.hero-timeline-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    width: 250px;
    color: #000000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}

.hero-timeline-tooltip.interactive {
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease, box-shadow 0.2s ease;
}

.hero-timeline-tooltip.interactive:active {
    transform: translate(-50%, -100%) translateY(-8px) scale(0.97) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

body.dark .hero-timeline-tooltip.interactive:active {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

body.dark .hero-timeline-tooltip {
    background: rgba(17, 17, 17, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

.hero-timeline-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
}

body.dark .hero-timeline-tooltip::after {
    border-color: rgba(17, 17, 17, 0.95) transparent transparent transparent;
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

body.dark .tooltip-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.tooltip-title {
    font-weight: 800;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.tooltip-score {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
}

.tooltip-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.tooltip-comment {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-style: italic;
}

body.dark .tooltip-comment {
    color: #b3b3b3;
}

.tooltip-action-hint {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-align: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    padding-top: 4px;
    font-weight: 700;
}

body.dark .tooltip-action-hint {
    border-top-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
    .hero-timeline-container {
        margin-top: 30px;
        padding: 12px 16px 20px 16px;
    }

    .hero-timeline-tooltip {
        width: 220px;
    }
}

/* Cluster Markers and Tooltip styling */
.hero-timeline-marker.cluster {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 850;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.tooltip-cluster-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 6px;
}

/* Custom scrollbar for tooltip cluster list */
.tooltip-cluster-list::-webkit-scrollbar {
    width: 3px;
}

.tooltip-cluster-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* Adaptive fallback for weaker devices */
body.low-perf-mode .header,
body.low-perf-mode .modal-overlay,
body.low-perf-mode .review-share-modal-overlay,
body.low-perf-mode .sidebar-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.low-perf-mode .hero-glow-1,
body.low-perf-mode .hero-glow-2 {
    filter: blur(36px);
}

body.low-perf-mode .next-up-ticker {
    animation: none;
    transform: none;
}

body.dark .tooltip-cluster-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.tooltip-cluster-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.tooltip-cluster-row:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.97);
}

body.dark .tooltip-cluster-row:active {
    background-color: rgba(255, 255, 255, 0.1);
}

.tooltip-cluster-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    min-width: 24px;
    text-align: center;
}

.tooltip-cluster-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Responsive adjustment for extra small screens */
@media (max-width: 480px) {
    .hero-timeline-wrapper {
        gap: 8px;
    }

    .hero-timeline-axis-label {
        font-size: 0.6rem;
    }

    .hero-timeline-tick-label {
        font-size: 0.55rem;
    }
}

.review-share-story-cta {
    /* keep alignment from main rule (left + auto-width pill) */
}

/* --- High-Resolution 1080x1920 Story Export Card Styling (Optimized for Instagram Stories) --- */
.review-share-story-card.is-export {
    width: 1080px !important;
    height: 1920px !important;
    min-height: 1920px !important;
    border-radius: 40px !important;
    border: 0 !important;
    box-shadow: none !important;
    contain: paint !important;
}

.review-share-story-card.is-export::before {
    padding: 26px 40px !important;
    font-size: 32px !important;
    letter-spacing: 0.22em !important;
}

.review-share-story-card.is-export .review-share-story-image {
    height: 48% !important;
}

.review-share-story-card.is-export .review-share-story-overlay {
    top: 44% !important;
    height: 6% !important;
    left: -8% !important;
    right: -8% !important;
}

.review-share-story-card.is-export .review-share-story-qr {
    top: auto !important;
    bottom: 80px !important;
    right: 60px !important;
    width: 260px !important;
    height: 260px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 8px solid var(--story-accent) !important;
}

.review-share-story-card.is-export .review-share-story-qr-image {
    border-radius: 8px !important;
}

.review-share-story-card.is-export .review-share-story-content {
    height: 52% !important;
    padding: 110px 80px 80px 80px !important;
    gap: 24px !important;
    justify-content: flex-start !important;
}

.review-share-story-card.is-export .review-share-story-content h3 {
    font-size: 110px !important;
    line-height: 0.92 !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: var(--story-accent) !important;
    text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.01em !important;
}

.review-share-story-card.is-export .review-share-story-meta {
    font-size: 28px !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.12em !important;
}

.review-share-story-card.is-export .review-share-story-badges {
    gap: 14px !important;
    margin-bottom: 12px !important;
    margin-right: 320px !important;
}

.review-share-story-card.is-export .review-share-story-pill {
    font-size: 24px !important;
    padding: 12px 22px !important;
    border-radius: 0 !important;
    border-width: 3px !important;
    letter-spacing: 0.14em !important;
}

.review-share-story-card.is-export .review-share-story-score {
    margin-top: -24px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

.review-share-story-card.is-export .review-share-story-score .stars-outer {
    font-size: 58px !important;
}

.review-share-story-card.is-export .review-share-story-footer {
    font-size: 36px !important;
    line-height: 1.4 !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
    padding-left: 22px !important;
    border-left-width: 8px !important;
    -webkit-line-clamp: 4 !important;
    margin-right: 320px !important;
}

.review-share-story-card.is-export .review-share-story-cta {
    font-size: 26px !important;
    letter-spacing: 0.22em !important;
    padding: 16px 26px !important;
    bottom: 80px !important;
    left: 80px !important;
    right: 380px !important;
    margin-top: 0 !important;
    align-self: auto !important;
    margin-right: 0 !important;
}

.review-share-story-card.is-export .review-share-story-loading {
    display: none !important;
}

/* Kebab Spot Trend Chart Styles */
.review-community-trend-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.review-community-trend-header {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.review-community-trend-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-main, #f8fafc);
}

.review-community-trend-chart-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
    overflow: visible;
}

.review-community-trend-svg {
    overflow: visible;
}

.trend-dot {
    fill: var(--color-primary, #f59e0b);
    stroke: var(--bg-main, #0f172a);
    stroke-width: 2px;
    transition: r 0.2s ease, fill 0.2s ease;
}

.trend-dot-hover-area {
    fill: transparent;
    cursor: pointer;
}

.trend-dot-group:hover .trend-dot {
    r: 7px;
    fill: #ffffff;
}

.trend-dot-group:hover .trend-tooltip {
    display: block !important;
}

.trend-tooltip {
    pointer-events: none;
    z-index: 10;
}

.trend-tooltip-rect {
    fill: var(--bg-secondary, #f9fafb);
    stroke: var(--border-color, #e5e7eb);
    stroke-width: 1px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

body.dark .trend-tooltip-rect,
html.dark-init body .trend-tooltip-rect {
    fill: rgba(15, 23, 42, 0.95);
    stroke: rgba(255, 255, 255, 0.15);
}

.trend-tooltip-text-reviewer {
    fill: var(--text-main, #000000);
}

.trend-tooltip-text-date {
    fill: var(--text-muted, #6b7280);
}

/* Trend Arrow Indicator Badge */
.trend-arrow-indicator {
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 0.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}

.trend-arrow-indicator.up {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: 1.5px solid rgba(34, 197, 94, 0.2);
}

.trend-arrow-indicator.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.2);
}

.trend-arrow-indicator.neutral {
    color: var(--text-main, #000000);
    background: rgba(148, 163, 184, 0.1);
    border: 1.5px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

/* Community Image Preview Styles */
.community-photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally! */
    gap: 8px;
}

.community-photo-section .photo-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    text-align: center;
}

/* Visually hide default file input */
.community-photo-section input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Custom upload button */
.custom-file-upload-btn {
    display: inline-block;
    background-color: transparent;
    color: var(--text-muted, #6b7280);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.custom-file-upload-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background-color: rgba(37, 99, 235, 0.04);
}

/* Focus outline for keyboard navigation */
.community-photo-section input[type="file"]:focus+.custom-file-upload-btn {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

body.dark .custom-file-upload-btn {
    background-color: transparent;
    color: var(--text-muted, #94a3b8);
    border-color: #334155;
}

body.dark .custom-file-upload-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.06);
}

body.dark .community-photo-section input[type="file"]:focus+.custom-file-upload-btn {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.community-photo-preview-wrapper[hidden] {
    display: none !important;
}

.community-image-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* 16:9 aspect ratio */
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary, #f9fafb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    animation: previewReveal 0.2s ease both;
}

.community-image-preview-container[hidden] {
    display: none !important;
}

.community-image-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-image-preview-container .remove-preview-btn {
    position: absolute;
    top: 2px;
    right: 6px;
    background: transparent;
    color: #000000;
    border: none;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-shadow: 0 0 3px #ffffff, 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    padding: 0;
    width: auto;
    height: auto;
}

.community-image-preview-container .remove-preview-btn:hover {
    color: #dc2626;
    transform: scale(1.15);
}

@keyframes previewReveal {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Community Submit Modal Layout (Desktop & Mobile) ─────────────── */
.community-desktop-two-cols {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.community-desktop-col-left,
.community-desktop-col-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.community-desktop-col-right,
.community-desktop-comment-wrapper,
.comment-main-layout,
.comment-textarea-container,
.ki-helper-info {
    width: 100%;
}

.community-desktop-comment-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media (min-width: 769px) {
    .community-desktop-two-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }

    .community-step-two-layout {
        align-items: start;
    }
}

/* ── Feature Notes Button & Modal Styles ────────────────────────── */
.feature-notes-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-main);
    transition: var(--transition);
    flex-shrink: 0;
    margin: 0;
}

.feature-notes-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-main);
}

.feature-notes-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Red Pulsing Badge for Notifications */
.feature-notes-btn .notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    border: 1.5px solid var(--bg-main, #ffffff);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.feature-notes-modal-container {
    max-width: 580px !important;
}

.feature-notes-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px !important;
}

.feature-notes-header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
}

.feature-notes-eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    padding: 4px 12px;
    border-radius: 99px;
    display: inline-block;
    margin-bottom: 8px;
}

body.dark .feature-notes-eyebrow {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

.feature-notes-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--text-main);
}

.feature-notes-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

.feature-notes-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-notes-section.upcoming {
    border-top: 1px dashed var(--border-color);
    padding-top: 16px;
}

.feature-notes-section h3 {
    font-size: 0.88rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 2px;
    color: var(--text-main);
}

.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.changelog-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.changelog-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

.changelog-item.roadmap {
    border-style: dashed;
    background: transparent;
}

.changelog-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 5px;
    height: fit-content;
    white-space: nowrap;
}

.changelog-badge.recent {
    background-color: #10b981;
    color: #ffffff;
}

.changelog-badge.blueprint {
    background-color: #8b5cf6;
    color: #ffffff;
}

.changelog-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.changelog-details h4 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
}

.changelog-details p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.changelog-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.changelog-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
    display: inline-block;
}

.changelog-actions .community-submit-trigger {
    padding: 6px 12px;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    border-radius: 6px;
    text-transform: none;
    order: 0;
    width: auto;
}

.feature-notes-footer {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.feature-notes-confirm-btn {
    display: inline-block;
    width: 100%;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}

.feature-notes-confirm-btn:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
}

/* ── KI-Schreibhilfe – Layout & Rows ──────────────────────────────── */
.comment-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.comment-header-row .comment-helper-btn {
    display: none;
}

@media (min-width: 769px) {
    .comment-header-row .comment-helper-btn {
        display: none;
    }
}

.comment-main-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 769px) {
    .comment-main-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
}

.comment-textarea-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-textarea-container textarea {
    width: 100%;
    box-sizing: border-box;
}

.comment-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.comment-footer-row .comment-helper-btn {
    display: inline-flex;
}

@media (min-width: 769px) {
    .comment-footer-row .comment-helper-btn {
        display: inline-flex;
    }
}

.comment-footer-row .community-comment-counter {
    margin: 0;
    text-align: right;
    margin-left: auto;
}

.comment-label-text {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.comment-helper-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #7c3aed;
    cursor: pointer;
    transition: var(--transition);
}

body.dark .comment-helper-btn {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.25);
    color: #a78bfa;
}

.comment-helper-btn .icon-sparkle {
    color: #7c3aed;
    transition: transform 0.3s ease;
}

body.dark .comment-helper-btn .icon-sparkle {
    color: #a78bfa;
}

.comment-helper-btn:hover {
    color: #6d28d9;
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
}

.comment-helper-btn:hover .icon-sparkle {
    transform: scale(1.2) rotate(15deg);
    color: #6d28d9;
}

body.dark .comment-helper-btn:hover {
    color: #c084fc;
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.4);
}

body.dark .comment-helper-btn:hover .icon-sparkle {
    color: #c084fc;
}

.comment-helper-btn.active {
    color: #fff;
    background: #7c3aed;
    border-color: #6d28d9;
}

.comment-helper-btn.active .icon-sparkle {
    color: #fff;
}

body.dark .comment-helper-btn.active {
    color: #121214;
    background: #a78bfa;
    border-color: #8b5cf6;
}

body.dark .comment-helper-btn.active .icon-sparkle {
    color: #121214;
}

/* ── KI-Schreibhilfe – Info Panel ─────────────────────────────────── */
.ki-helper-info {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-bottom: 0;
}

.ki-helper-info:not([hidden]) {
    max-height: 500px;
    opacity: 1;
    margin-bottom: 12px;
}

.ki-helper-info-content {
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    padding: 18px 20px;
}

body.dark .ki-helper-info-content {
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.15);
}

@media (min-width: 769px) {
    .ki-helper-info:not([hidden]) {
        max-height: none;
        margin-bottom: 0;
        height: 100%;
    }

    .ki-helper-info-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
}

.ki-helper-steps {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ki-helper-steps li {
    margin-bottom: 4px;
}

.ki-helper-steps li::marker {
    color: #8b5cf6;
    font-weight: 700;
}

body.dark .ki-helper-steps li::marker {
    color: #a78bfa;
}

/* ── KI-Schreibhilfe – Direkt-Generator ───────────────────────────── */
.ki-direct-generator {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.ki-section-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

.ki-direct-generator textarea {
    width: 100%;
    min-height: 72px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}

.ki-direct-generator textarea::placeholder {
    font-size: 0.88rem;
    line-height: 1.4;
}

.ki-direct-generator textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

body.dark .ki-direct-generator textarea:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

.ki-direct-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ki-limit-display {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--transition);
    white-space: nowrap;
}

.ki-submit-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    height: 34px;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
    white-space: nowrap;
    width: 155px;
}

.ki-submit-generate-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
}

.ki-submit-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.ki-generator-status {
    font-size: 0.72rem;
    font-weight: 600;
    margin: 2px 0 0;
}

.ki-generator-status.error {
    color: #ef4444;
}

.ki-generator-status.loading {
    color: #8b5cf6;
}

body.dark .ki-generator-status.loading {
    color: #a78bfa;
}

.ki-generator-status.success {
    color: #10b981;
}

/* ── KI-Schreibhilfe – Mobile Optimierungen ───────────────────────── */
@media (max-width: 768px) {
    .ki-helper-info-content {
        padding: 16px;
    }

    .ki-direct-generator textarea {
        min-height: 68px;
        font-size: 16px;
        padding: 10px 12px;
    }

    .ki-direct-generator textarea::placeholder {
        font-size: 16px;
    }

    .ki-submit-generate-btn {
        height: 36px;
        padding: 0 14px;
        font-size: 0.76rem;
        flex: 0 0 calc(50% - 4px);
        justify-content: center;
    }

    .ki-section-desc {
        font-size: 0.76rem;
    }

    .ki-limit-display {
        font-size: 0.7rem;
    }

    .ki-divider {
        margin: 12px 0;
    }
}

/* ── KI-Schreibhilfe – Desktop Optimierungen ──────────────────────── */
@media (min-width: 769px) {
    .ki-direct-generator {
        flex: 1;
    }
}

/* Ensure textarea label has no extra styling issues */
.comment-textarea-label {
    display: block;
}


/* ── Anti-Zoom: Prevent iOS Safari auto-zoom on input focus ──────────────────
   iOS/iPadOS Safari zooms in whenever a focused input has font-size < 16px.
   Setting font-size >= 16px on touch devices is the only accessibility-safe
   solution (user-scalable=no is an a11y violation and blocked by WCAG 1.4.4).
   This rule targets all interactive form fields site-wide.
──────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

body.dark .spot-tile-card {
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

body.dark .spot-tile-rank,
body.dark .spot-tile-score {
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.4);
}

body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(1) .spot-tile-rank,
body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(1) .spot-tile-score {
    color: #f2d37a;
    background: rgba(111, 82, 15, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.58);
}

body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(2) .spot-tile-rank,
body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(2) .spot-tile-score {
    color: #e2e8f0;
    background: rgba(71, 85, 105, 0.4);
    border: 1px solid rgba(203, 213, 225, 0.5);
}

body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(3) .spot-tile-rank,
body.dark .spots-container.spots-container--tiles .spot-tile-card:nth-child(3) .spot-tile-score {
    color: #e7b08a;
    background: rgba(122, 63, 33, 0.4);
    border: 1px solid rgba(201, 125, 75, 0.52);
}

body.dark .spot-tile-open-btn {
    border-color: #334155;
    background: #111827;
    color: #e5e7eb;
}

body.dark .spot-tile-open-btn:hover {
    border-color: #93c5fd;
    background: #1d4ed8;
    color: #ffffff;
}

@media (max-width: 980px) {
    .spots-container.spots-container--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .spots-container.spots-container--tiles {
        grid-template-columns: 1fr;
    }

    .spot-tile-body {
        padding: 12px;
    }
}