/* ============================================
   BOULDERN PAGE - CARD-TABS V3 (2026)
   Z-Layer System - Alles absolut positioniert
   ============================================ */

/* === BASE === */
.page-bouldern {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #1a1a1a;
}

/* ============================================
   LAYER 0: HINTERGRUND VIDEO/BILD
   ============================================ */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.background-layer video,
.background-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #2a2a2a 100%);
}

/* LAYER 1: Gradient Overlay */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.2) 30%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.5) 100%
    );
    z-index: 1;
}

/* ============================================
   LAYER 10: HERO CONTENT (FEST!)
   ============================================ */
.hero-layer {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 180px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(24px, 5vw, 60px);
    pointer-events: none;
}

.hero-layer * {
    pointer-events: auto;
}

.hero-label {
    color: var(--brand-orange, #F49B31);  /* Auf dunklem Video-Overlay: helles Orange behalten */
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.hero-title {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: clamp(48px, 8vw, 80px);
    color: white;
    line-height: 0.9;
    margin: 0 0 16px;
    letter-spacing: 4px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: clamp(14px, 1.5vw, 18px);
    color: white;
    max-width: 500px;
    opacity: 0.9;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    margin: 0 0 24px;
}

.hero-stats {
    display: flex;
    gap: clamp(20px, 4vw, 40px);
    flex-wrap: wrap;
}

.hero-stat {
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.hero-stat-value {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: clamp(28px, 3.5vw, 38px);
    color: var(--brand-orange, #F49B31);  /* Auf dunklem Video-Overlay: helles Orange behalten */
    display: block;
    line-height: 1;
}

.hero-stat-value sup {
    font-size: 0.5em;
}

.hero-stat-label {
    font-size: clamp(10px, 1vw, 12px);
    color: white;
    opacity: 0.8;
}

/* ============================================
   HERO NEWS OVERLAY
   ============================================ */
.hero-news {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 30;
    overflow: hidden;
    animation: newsSlideIn 0.4s ease;
}

@keyframes newsSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-news-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--brand-orange, #F49B31);
    color: white;
}

.hero-news-icon {
    display: flex;
    align-items: center;
}

.hero-news-icon svg {
    width: 16px;
    height: 16px;
}

.hero-news-title {
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 2px;
    flex: 1;
}

.hero-news-minimize {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    min-width: 28px;
    min-height: 28px;
}

.hero-news-minimize:hover {
    background: rgba(255, 255, 255, 0.35);
}

.hero-news-items {
    padding: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.hero-news-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.hero-news-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.hero-news-item + .hero-news-item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.news-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.news-type-info .news-item-icon { background: #e3f2fd; color: #1565c0; }
.news-type-umschraubung .news-item-icon { background: #fff3e0; color: #e65100; }
.news-type-gesperrt .news-item-icon { background: #fce4ec; color: #c62828; }
.news-type-event .news-item-icon { background: #e8f5e9; color: #2e7d32; }
/* Legacy (alte News-Posts) */
.news-type-neu_geschraubt .news-item-icon { background: #e8f5e9; color: #1b5e20; }
.news-type-geplant .news-item-icon { background: #e3f2fd; color: #0d47a1; }
.news-type-sperrung .news-item-icon { background: #fce4ec; color: #c62828; }
.news-type-hinweis .news-item-icon { background: #f3e5f5; color: #6a1b9a; }

.news-item-content {
    flex: 1;
    min-width: 0;
}

.news-item-content strong {
    font-size: 13px;
    color: var(--text-primary);
    display: block;
    line-height: 1.3;
}

.news-item-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
    line-height: 1.4;
}

.news-sector-badge {
    display: inline-block;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 10px;
    font-weight: 600;
    background: var(--brand-orange, #F49B31);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    border: none;
    margin-top: 2px;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1.4;
}

.news-sector-badge:hover {
    background: #c47a1a;
}

.news-item-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* === Minimiertes Badge (Bell-Icon + Count) === */
.hero-news-badge {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--brand-orange, #F49B31);
    color: white;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: newsSlideIn 0.3s ease;
}

.hero-news-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero-news-badge svg {
    width: 22px;
    height: 22px;
}

.hero-news-badge-label {
    display: none;
}

/* === Minimierter Zustand === */
.hero-news.minimized .hero-news-body {
    display: none;
}

.hero-news.minimized .hero-news-badge {
    display: flex;
}

.hero-news.minimized {
    width: auto;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* ============================================
   LAYER 50-60: CARD-TABS SYSTEM
   ============================================ */
.card-tabs-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.card-tabs-layer > * {
    pointer-events: auto;
}

/* === TAB PANEL (z-index: 60) === */
.tab-panel {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    border: 2px solid var(--brand-orange, #F49B31);
    box-shadow: 0 -10px 50px rgba(0,0,0,0.15);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60;
    margin-bottom: 16px;
}

/* Focus-Outline entfernen (panel.focus() in JS erzeugt schwarzen Browser-Rahmen) */
.tab-panel:focus {
    outline: none;
}

/* Beach: Panel immer im Sand-Farbton */
.page-beach .tab-panel {
    border-color: #d4a574;
}

.tab-panel.open {
    max-height: 70vh;
    opacity: 1;
    transform: translateY(0);
    padding: 24px 32px;
    box-shadow: 0 -8px 40px rgba(244, 155, 49, 0.15), 0 4px 20px rgba(0,0,0,0.1);
}

/* Sektoren-Panel (Desktop): Panel fast voller Hoehe, damit untere Sektoren + Tooltip nicht abschneiden */
.tab-panel.open:has([data-tab="sektoren"].active) {
    max-height: 98vh;
}

/* Beach: Panel shadow */
.page-beach .tab-panel.open {
    box-shadow: 0 -8px 40px rgba(212, 165, 116, 0.2), 0 4px 20px rgba(0,0,0,0.08);
}

/* Tab Content - nur aktiver sichtbar */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.tab-panel-title {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: clamp(22px, 2.5vw, 28px);
    color: var(--text-primary, #1a1a1a);
    letter-spacing: 1px;
    margin: 0;
}

.tab-panel-close {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary, #f5f5f5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted, #666);
    transition: all 0.2s;
}

.tab-panel-close:hover {
    background: var(--brand-orange, #F49B31);
    color: white;
}

/* === CARD-TABS NAVIGATION === */
.card-tabs-nav {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    padding: 0 12px;
    width: 100%;
    max-width: 1100px;
}

.card-tab {
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid var(--brand-orange, #F49B31);
    border-radius: var(--cardtab-radius, 14px);
    padding: 0 10px;
    height: var(--cardtab-height, 52px);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-tab:hover {
    background: white;
    border-color: var(--brand-orange, #F49B31);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.card-tab.active {
    background: var(--brand-orange, #F49B31);
    border-color: var(--brand-orange, #F49B31);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(244,155,49,0.5);
}

/* Connector Pfeil zum Panel */
.card-tab.active::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--brand-orange, #F49B31);
}

/* Beach: Warmer Connector-Pfeil */
.page-beach .card-tab.active::before {
    border-bottom-color: #d4a574;
}

/* ============================================
   BEACH: CARD-TABS IM BEACH-FARBTON
   ============================================ */

/* Beach: 6-Spalten Grid */
.page-beach .card-tabs-nav {
    grid-template-columns: repeat(6, 1fr);
    max-width: 800px;
}

/* Beach Card-Tabs: Warmer Ton statt Weiss */
.page-beach .card-tab {
    background: linear-gradient(135deg, rgba(245, 230, 211, 0.95) 0%, rgba(232, 212, 191, 0.95) 50%, rgba(240, 226, 206, 0.95) 100%);
    border-color: #d4a574;
}

.page-beach .card-tab:hover {
    background: linear-gradient(135deg, #f5e6d3 0%, #e8d4bf 50%, #f0e2ce 100%);
    border-color: #d4a574;
    box-shadow: 0 12px 30px rgba(212, 165, 116, 0.25);
}

.page-beach .card-tab.active {
    background: linear-gradient(135deg, #d4a574 0%, #c4955e 100%);
    border-color: #d4a574;
    box-shadow: 0 15px 40px rgba(212, 165, 116, 0.45);
}

.page-beach .card-tab.active .card-tab-label {
    color: #fff;
}

.page-beach .card-tab.active .card-tab-icon {
    color: #fff;
}

.card-tab-icon {
    font-size: clamp(18px, 2.5vw, 24px);
    display: var(--cardtab-icon-display, none);
    margin-bottom: var(--cardtab-icon-margin, 0);
    line-height: 1;
}

.card-tab-label {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: var(--cardtab-font-size, 19px);
    letter-spacing: 1.2px;
    color: var(--text-primary, #1a1a1a);
    display: block;
    line-height: 1.1;
}

.card-tab.active .card-tab-label {
    color: #1a1a1a;  /* BFSG: Dunkel auf Orange-BG */
}

/* ============================================
   LAYER 100: FOOTER BAR
   ============================================ */
.page-footer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px clamp(16px, 3vw, 24px);
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
    flex-wrap: wrap;
    gap: 10px;
}

.footer-contact,
.footer-legal {
    display: flex;
    gap: clamp(10px, 2vw, 20px);
    flex-wrap: wrap;
}

.footer-contact span,
.footer-legal a {
    font-size: clamp(10px, 0.9vw, 12px);
    color: var(--text-muted, #666);
    white-space: nowrap;
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--brand-orange-text, #c47a1a);
}

/* Beach Footer - Gleicher Gradient wie Header */
.footer-beach {
    background: linear-gradient(135deg, #f5e6d3 0%, #e8d4bf 50%, #f0e2ce 100%);
}

.footer-beach .footer-contact span,
.footer-beach .footer-legal a {
    color: var(--text-primary, #1a1a1a);
}

.footer-beach .footer-legal a:hover {
    color: var(--brand-orange-text, #c47a1a);
}

/* ============================================
   TAB CONTENT STYLES
   ============================================ */
.tab-content-inner {
    max-height: calc(70vh - 100px);
    overflow-y: auto;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 24px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}

/* Sektoren-Panel (Desktop): mehr Hoehe damit untere Sektoren (Double Trouble) voll sichtbar sind
   und Tooltip am unteren Rand nicht abgeschnitten wird */
[data-tab="sektoren"] .tab-content-inner {
    max-height: calc(96vh - 80px);
    padding-bottom: 24px;
}

/* Verhindere Pull-to-Refresh wenn Panel offen */
body.panel-open {
    overscroll-behavior: none;
}

/* Scrollbar */
.tab-content-inner::-webkit-scrollbar {
    width: 6px;
}

.tab-content-inner::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content-inner::-webkit-scrollbar-thumb {
    background: var(--border-color, rgba(0,0,0,0.2));
    border-radius: 3px;
}

.tab-content-inner::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange, #F49B31);
}

.tab-content-inner .intro {
    color: var(--text-secondary, #555);
    font-size: 14px;
    margin-bottom: 16px;
}

.tab-content-inner .highlight {
    color: var(--brand-orange-text, #c47a1a);
    font-weight: 600;
    margin-top: 12px;
}

.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-orange-text, #c47a1a);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-top: 16px;
}

.tab-link:hover {
    text-decoration: underline;
}

/* Beach CTA Button — prominenter Buchen-Button im Beach-Bereich (Sand-Farbschema, Bebas Neue) */
.beach-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #d4a574 0%, #c4955e 100%);
    color: #ffffff;
    padding: 16px 36px;
    border-radius: 9999px;
    border: 2px solid #d4a574;
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(212, 165, 116, 0.4);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-top: 20px;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}

.beach-cta-button:hover {
    background: linear-gradient(135deg, #c4955e 0%, #b08349 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(212, 165, 116, 0.55);
}

.beach-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.info-card {
    background: var(--bg-secondary, #f5f5f5);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.info-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.info-card h4 {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--text-primary, #1a1a1a);
}

.info-card p {
    font-size: 12px;
    color: var(--text-secondary, #555);
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   SEKTOREN MAP & GRID
   ============================================ */
.sector-map {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sector-map-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   INTERACTIVE SECTOR MAP (Polygon-basiert)
   ============================================ */
.sector-map-interactive {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: visible;
    background: #f5f3f0;
    margin-bottom: 40px;
}

.sector-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Desktop: Karte im Querformat via CSS-Rotation (wie alter Plan) */
@media (min-width: 901px) {
    .sector-map-interactive {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        aspect-ratio: 2400 / 1100;
    }
    .sector-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 52.5%;
        min-width: unset;
        height: auto;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    /* Labels counter-rotieren (lesbar auf gedrehter Karte) */
    .sector-svg .sector-label-name,
    .sector-svg .sector-label-number {
        transform: rotate(90deg) translateX(10px);
        transform-box: fill-box;
        transform-origin: center;
    }
    /* Desktop: vertikales Label anzeigen, Mobile-Label ausblenden */
    .sector-svg .sector-label-mobile-only {
        display: none;
    }
}

/* === MATTEN (Gradient-Fills via SVG defs) === */
.sector-mat {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1;
    transition: filter 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease;
}

.sector-boulder-mat  { fill: url(#grad-boulder); }
.sector-outdoor-mat  { fill: url(#grad-outdoor); }
.sector-training-mat { fill: url(#grad-training); }
.sector-infra-mat    { fill: url(#grad-infra); }
/* Durchgang / Korridor */
.sector-corridor-mat { fill: #c9c0b3; opacity: 0.7; stroke: none; }

/* === WAENDE (entsaettigte Kategorie-Farben) === */
.sector-wall {
    stroke: none;
    opacity: 0.35;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.sector-boulder-wall  { fill: #A07830; }
.sector-outdoor-wall  { fill: #5B8CB0; }
.sector-training-wall { fill: #AB47BC; }
.sector-infra-wall    { fill: #8D6E63; }

/* Transparente Hit-Area (fuer Sektoren ohne Matte) */
.sector-hit {
    pointer-events: all;
}

/* === HOVER & ACTIVE === */
.sector-area { cursor: pointer; outline: none; }

.sector-area[data-category="boulder"]  { color: #A07830; }
.sector-area[data-category="outdoor"]  { color: #5B8CB0; }
.sector-area[data-category="training"] { color: #AB47BC; }
.sector-area[data-category="infra"]    { color: #8D6E63; }
/* Durchgang: kein Hover-Effekt */
.sector-corridor:hover .sector-mat,
.sector-corridor:focus .sector-mat { filter: none; stroke: none; }
.sector-corridor { cursor: default; }

/* Hover: farbiger Glow */
.sector-area:hover .sector-mat,
.sector-area:focus .sector-mat {
    stroke: currentColor;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px currentColor);
}

/* Active: animierter Dash-Rand + pulsierender Glow */
.sector-area.active .sector-mat {
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-dasharray: 8 4;
    animation: sectorDashMarch 0.8s linear infinite, sectorBreath 2s ease-in-out infinite;
}
/* Offen + Active: gruener Dash-Rand */
.sector-area.offen.active .sector-mat {
    stroke: #22c55e;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}

.sector-area:hover .sector-wall,
.sector-area:focus .sector-wall {
    opacity: 0.5;
}

.sector-area.active .sector-wall {
    opacity: 0.6;
}

@keyframes sectorDashMarch {
    to { stroke-dashoffset: -18; }
}

@keyframes sectorBreath {
    0%, 100% { filter: drop-shadow(0 0 6px currentColor); }
    50%      { filter: drop-shadow(0 0 14px currentColor); }
}

/* === SVG LABELS === */
/* Nummern/Abkuerzungen ausgeblendet — nur Namen */
.sector-label-number {
    display: none;
}

.sector-label-name {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 28px;
    font-weight: 700;
    fill: rgba(0, 0, 0, 0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

/* Label bei Hover/Active dunkler */
.sector-area:hover .sector-label-name,
.sector-area:focus .sector-label-name,
.sector-area.active .sector-label-name {
    fill: rgba(0, 0, 0, 0.85);
}

/* === TOOLTIP (Desktop) — Glassmorphism === */
.sector-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
    min-width: 200px;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.sector-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sector-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.sector-tooltip-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--text-primary, #1a1a1a);
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.sector-tooltip-name {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.sector-tooltip-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sector-tooltip-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* === DETAIL-CARD (Klick/Mobile) — farbiger Top-Bar === */
.sector-detail-card {
    --sector-accent: #888;
    background: white;
    border-radius: 12px;
    padding: 0;
    margin-top: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: none;
    animation: fadeInUp 0.3s ease;
    overflow: hidden;
}
.sector-detail-card.visible { display: block; }

.sector-detail-card::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--sector-accent);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sector-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px 16px 0;
}

.sector-detail-number {
    display: none;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: var(--text-primary, #1a1a1a);
    color: white;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.sector-detail-name {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin: 0;
    flex: 1;
}

.sector-detail-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
}
.sector-detail-badge.badge-relaxed { background: rgba(91, 140, 111, 0.15); color: #3D6B4F; }
.sector-detail-badge.badge-power   { background: rgba(196, 91, 91, 0.15); color: #A04040; }
.sector-detail-badge.badge-mixed   { background: rgba(204, 136, 68, 0.15); color: #AA6E2E; }
.sector-detail-badge.badge-boulder  { background: rgba(160, 120, 48, 0.15); color: #8B6914; }
.sector-detail-badge.badge-outdoor  { background: rgba(91, 140, 176, 0.15); color: #3D6B8F; }
.sector-detail-badge.badge-training { background: rgba(171, 71, 188, 0.15); color: #7B1FA2; }
.sector-detail-badge.badge-infra    { background: rgba(141, 110, 99, 0.15); color: #5D4037; }

.sector-detail-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    padding: 0 16px;
}

.sector-detail-status {
    padding: 0 16px 12px;
}

/* === STATUS-BADGES (alle 6 Typen) === */
.sector-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    margin-top: 8px;
}
.sector-status-badge i,
.sector-status-badge svg { width: 14px; height: 14px; }
/* === Sector Status Banner (Prominent) === */
.sector-status-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 8px;
}
.sector-status-banner.offen {
    background: rgba(34, 197, 94, 0.10);
    border-left: 4px solid #22c55e;
}
.sector-status-banner.umschraubung {
    background: rgba(245, 124, 0, 0.10);
    border-left: 4px solid #f57c00;
}
.sector-status-banner.gesperrt {
    background: rgba(229, 57, 53, 0.10);
    border-left: 4px solid #e53935;
}
.sector-status-banner.offen .sector-status-label { color: #15803d; }
.sector-status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}
.sector-status-label i,
.sector-status-label svg { width: 16px; height: 16px; }
.sector-status-banner.umschraubung .sector-status-label { color: #e65100; }
.sector-status-banner.gesperrt .sector-status-label { color: #c62828; }
.sector-status-dates {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1a1a1a);
    letter-spacing: 0.3px;
}
.sector-status-desc {
    font-size: 12px;
    color: var(--text-secondary, #666);
}

/* === SVG-Status-Overlays (2 Typen) === */
/* Umschraubung: Orange Dash + Animation + Glow */
.sector-area.umschraubung .sector-mat {
    stroke: #f57c00;
    stroke-width: 2.5;
    stroke-dasharray: 8 4;
    animation: sectorDashMarch 0.8s linear infinite;
    filter: drop-shadow(0 0 6px rgba(245, 124, 0, 0.4));
}
/* Gesperrt: Grau + durchgezogener roter Rand + Schraffur */
.sector-area.gesperrt .sector-mat {
    fill: rgba(200, 200, 200, 0.2);
    stroke: #c0392b;
    stroke-width: 2;
    stroke-dasharray: none;
    animation: none;
    filter: none;
}
.sector-area.gesperrt .sector-wall { fill: #999; opacity: 0.10; }
.sector-area.gesperrt .sector-label-number,
.sector-area.gesperrt .sector-label-name { fill: rgba(0, 0, 0, 0.20); }
/* Gesperrt: kein Glow bei Hover */
.sector-area.gesperrt:hover .sector-mat {
    filter: none;
    stroke-width: 2;
}

/* === WALKWAYS: Gangmarkierungen === */
.walkway-floor {
    fill: #b5ad9e;
    stroke: none;
    opacity: 0.35;
    pointer-events: none;
}

/* === GESPERRT-OVERLAY: Diagonale Schraffur === */
.sector-gesperrt-overlay {
    fill: url(#pat-gesperrt);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sector-area.gesperrt .sector-gesperrt-overlay {
    opacity: 1;
}

/* Legende entfernt (2026 Redesign) */

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .sector-area.active .sector-mat,
    .sector-area.umschraubung .sector-mat,
    .sector-area.gesperrt .sector-mat {
        animation: none;
    }
    .sector-gesperrt-overlay {
        transition: none;
    }
    .sector-tooltip {
        transition: opacity 0.01s;
        transform: none;
    }
    .sector-detail-card { animation: none; }
}

/* Scroll-Hinweis (nur mobil sichtbar) */
.sector-scroll-hint {
    display: none;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #999);
    margin: 6px 0 0;
    padding: 0;
}

/* Grade Pills */
.grade-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.grade {
    padding: 6px 14px;
    border-radius: 20px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.grade-green { background: #22c55e; }
.grade-lime { background: #84cc16; }
.grade-yellow { background: #eab308; }
.grade-orange { background: #f97316; }
.grade-red { background: #ef4444; }
.grade-purple { background: #a855f7; }
.grade-black { background: #1a1a1a; }

/* Price Grid */
.price-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.price-card {
    background: var(--bg-secondary, #f5f5f5);
    padding: 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover fuer klickbare price-cards: Orange-Rahmen + leichter Lift */
a.price-card-link:hover .price-card,
a.price-card-link:focus-visible .price-card {
    border-color: var(--brand-orange, #F49B31);
    box-shadow: 0 6px 20px rgba(244, 155, 49, 0.25);
}

.price-card.featured {
    background: var(--brand-orange, #F49B31);
    color: #1a1a1a;
}

.price-value {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 24px;
    display: block;
    color: var(--brand-orange-text, #c47a1a);
}

.price-card.featured .price-value {
    color: #1a1a1a;
}

.price-label {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 14px;
    display: block;
    margin-top: 4px;
}

.price-info {
    font-size: 11px;
    color: var(--text-muted, #666);
    display: block;
    margin-top: 2px;
}

.price-card.featured .price-info {
    color: rgba(26,26,26,0.7);
}

/* Tip Box */
.tip-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(244,155,49,0.1);
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 12px;
}

.tip-icon {
    font-size: 18px;
}

/* Course Grid */
.course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.course-card {
    background: var(--bg-secondary, #f5f5f5);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--brand-orange, #F49B31);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-price {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 22px;
    color: var(--brand-orange-text, #c47a1a);
    display: block;
    margin-bottom: 6px;
}

/* Alle h4 in Panels */
.tab-content-inner h4 {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.course-card h4 {
    font-size: 22px;
    margin: 0 0 8px;
}

.course-card p {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin: 0;
}

/* Course Layout: 3 Spalten (2 grosse + 2x2 Mini-Grid) */
.course-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Buttons nach unten druecken */
.course-card .panel-btn {
    margin-top: auto;
}

.course-weitere {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}

.course-weitere .panel-btn {
    margin-top: auto;
}

.course-mini-card {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid var(--brand-orange, #F49B31);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.course-mini-card h4 {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 17px;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
}

.course-mini-card p {
    font-size: 13px;
    color: var(--text-muted, #666);
    margin: 0;
    line-height: 1.4;
}

/* Two Column Layout */
.two-col {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
}

/* Highlight Stat — dunkle Schrift auf Orange fuer Kontrast >= 4.5:1 */
.highlight-stat {
    background: var(--brand-orange, #F49B31);
    color: #1a1a1a;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
}

.highlight-stat .stat-value {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 32px;
    display: block;
    color: #1a1a1a;
}

.highlight-stat .stat-label {
    font-size: 12px;
    color: rgba(26, 26, 26, 0.75);
}

/* Highlight Stat auf dunklem Hintergrund (inline style text-primary) — weisse Schrift */
.highlight-stat[style*="text-primary"] {
    color: white;
}
.highlight-stat[style*="text-primary"] .stat-value {
    color: white;
}
.highlight-stat[style*="text-primary"] .stat-label {
    color: rgba(255, 255, 255, 0.8);
}

/* Rules List */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 10px;
    font-size: 13px;
}

/* Bistro Features */
.bistro-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.bistro-item {
    background: var(--bg-secondary, #f5f5f5);
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13px;
}

.bistro-note {
    color: var(--text-secondary, #555);
    font-size: 13px;
    font-style: italic;
}

/* ============================================
   PRICE TABLES IN PANELS
   ============================================ */
.panel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.panel-table th,
.panel-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.panel-table th {
    background: var(--bg-secondary, #f5f5f5);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-table td.highlight {
    color: var(--brand-orange-text, #c47a1a);
    font-weight: 600;
}

.panel-table tbody tr:hover {
    background: rgba(244, 155, 49, 0.05);
}

/* Klickbare Preise in Tabellen */
.panel-table a.price-link {
    color: var(--brand-orange-text, #c47a1a);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.panel-table a.price-link:hover {
    /* WCAG: Link auf hellem Panel-BG — dunkles Orange */
    color: var(--brand-orange-text, #c47a1a);
    text-decoration: underline;
}

.panel-table a.price-link::after {
    content: '\203A';
    font-size: 1.1em;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

.panel-table a.price-link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Klickbare Price-Cards (Beach) */
a.price-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

a.price-card-link:hover {
    transform: translateY(-2px);
}

a.price-card-link .price-card {
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
}

a.price-card-link:hover .price-card {
    border-color: var(--brand-orange, #F49B31);
    box-shadow: 0 4px 16px rgba(244, 155, 49, 0.2);
}

/* Panel Accordion */
.panel-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.panel-accordion details {
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 10px;
    overflow: hidden;
}

.panel-accordion summary {
    padding: 12px 16px;
    background: var(--bg-secondary, #f5f5f5);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.panel-accordion summary::-webkit-details-marker {
    display: none;
}

.panel-accordion summary::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s;
}

.panel-accordion details[open] summary::after {
    transform: rotate(180deg);
}

.panel-accordion details[open] summary {
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.panel-accordion .accordion-body {
    padding: 16px;
}

/* Panel Buttons */
.panel-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--brand-orange, #F49B31);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 12px;
    transition: all 0.2s;
}

.panel-btn:hover {
    background: #e08a20;
    transform: translateY(-2px);
}

.panel-btn-outline {
    background: transparent;
    border: 2px solid var(--brand-orange, #F49B31);
    color: var(--brand-orange-text, #c47a1a);
}

.panel-btn-outline:hover {
    background: var(--brand-orange, #F49B31);
    color: white;
}

/* Override: .info-card a setzt color auf orange-text — hier zuruecksetzen */
a.panel-btn,
.info-card a.panel-btn {
    color: #1a1a1a;
    text-decoration: none;
}

/* Anfahrt Grid: 2x2 Desktop, 1-spaltig Mobile */
.anfahrt-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 16px;
}

/* Maps Embed */
.maps-embed iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 12px;
}

.maps-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-orange-text, #c47a1a);
    text-decoration: none;
}

.maps-link:hover {
    text-decoration: underline;
}

/* Info Box */
.panel-info-box {
    background: rgba(244, 155, 49, 0.1);
    border-left: 3px solid var(--brand-orange, #F49B31);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 12px 0;
    font-size: 13px;
}

/* 2-Column Layout */
.panel-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Columns als Flex-Container, damit letztes Kind via margin-top:auto
   nach unten geschoben werden kann — beide Spalten enden buendig. */
.panel-2col > div {
    display: flex;
    flex-direction: column;
}
.panel-2col > div > .tip-box:last-child,
.panel-2col > div > .panel-info-box:last-child {
    margin-top: auto;
}

/* ============================================
   MOBILE APP-DESIGN (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {

    /* === HERO ANPASSUNGEN === */
    .hero-layer {
        top: 80px;
        bottom: auto;
        padding: 0 20px;
    }

    .hero-label {
        font-size: 14px;
    }

    .hero-title {
        font-size: 52px;
    }

    .hero-subtitle {
        display: none;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 16px;
    }

    .hero-stat {
        background: rgba(0, 0, 0, 0.35);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-radius: 10px;
        padding: 10px 14px;
    }

    .hero-stat-value {
        font-size: 30px;
    }

    .hero-stat-label {
        font-size: 13px;
    }

    /* News-Badge: Mobile — fixed Badge, immer sichtbar */
    .hero-news {
        position: fixed;
        top: 60px;
        right: 12px;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: none;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        z-index: 65;
    }

    .hero-news .hero-news-header,
    .hero-news .hero-news-body {
        display: none;
    }

    .hero-news .hero-news-badge {
        display: flex;
        border-radius: 24px;
        padding: 0 14px 0 12px;
        gap: 6px;
        width: auto;
    }

    .hero-news .hero-news-badge-label {
        display: inline;
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
    }

    /* Geoeffnet: Body als festes Overlay */
    .hero-news.expanded .hero-news-header {
        display: flex;
    }
    .hero-news.expanded .hero-news-body {
        display: block;
    }

    .hero-news.expanded {
        position: fixed;
        top: 90px;
        bottom: auto;
        right: 16px;
        left: 16px;
        max-width: 360px;
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        z-index: 65;
        animation: newsSlideIn 0.3s ease;
    }

    .hero-news.expanded .hero-news-badge {
        display: none;
    }

    /* Minimiert = zurueck zum Badge */
    .hero-news.minimized .hero-news-header,
    .hero-news.minimized .hero-news-body {
        display: none;
    }

    .hero-news.minimized .hero-news-badge {
        display: flex;
    }

    .hero-news.minimized {
        position: fixed;
        top: 60px;
        right: 12px;
        bottom: auto;
        left: auto;
        max-width: none;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        border-radius: 0;
        z-index: 65;
    }

    /* === CARD-TABS LAYER: 3x3 GRID (Boulder, 9 Tabs) === */
    .card-tabs-layer {
        bottom: 60px;
    }

    .card-tabs-nav {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 6px;
        padding: 0 10px;
        max-width: 340px;
    }

    /* Beach: 3x2 Grid auf Mobile (6 Tabs) */
    .page-beach .card-tabs-nav {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        max-width: 340px;
    }

    .card-tab {
        padding: 0 8px;
        height: var(--cardtab-height-tablet, 48px);
        border-radius: calc(var(--cardtab-radius, 14px) - 2px);
    }

    .card-tab-icon {
        font-size: 20px;
    }

    .card-tab-label {
        font-size: var(--cardtab-font-size-tablet, 11px);
    }

    /* Aktive Card: Kein Pfeil auf Mobile */
    .card-tab.active::before {
        display: none;
    }

    /* === PANEL: SLIDET VON UNTEN HOCH === */
    .tab-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 0;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        border: 2px solid var(--brand-orange, #F49B31);
        border-bottom: none;
        margin-bottom: 0;
        transform: none;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s ease;
    }

    .page-beach .tab-panel {
        border-color: #d4a574;
    }

    .tab-panel.open {
        max-height: 70vh;
        opacity: 1;
        padding: 0;
    }

    /* Drag Handle */
    .tab-panel::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border-color, rgba(0,0,0,0.2));
        border-radius: 2px;
        z-index: 10;
        transition: width 0.2s, background 0.2s;
    }

    /* Drag Handle Highlight bei Touch */
    .tab-panel.dragging::before {
        background: var(--brand-orange, #F49B31);
        width: 60px;
    }

    .tab-panel-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 5;
        padding: 12px 16px 8px;
        margin: 0;
        border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
    }

    .tab-panel-title {
        font-size: 17px;
    }

    .tab-panel-close {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .tab-content-inner .intro {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .maps-embed iframe {
        height: 300px;
    }

    .tab-content-inner {
        padding: 0 20px 20px;
        max-height: calc(70vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
        touch-action: pan-y;
        will-change: transform;
    }

    /* Verhindere Pull-to-Refresh auf dem Panel */
    .tab-panel {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* === CONTENT ANPASSUNGEN === */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .info-card {
        display: flex;
        gap: 12px;
        text-align: left;
        padding: 14px;
    }
    .panel-2col .info-card {
        flex-direction: column;
        gap: 6px;
    }

    /* Sektoren Mobile — Portrait-Karte, natuerliche Ausrichtung */
    /* Sektoren-Intro auf Mobile ausblenden */
    .sector-intro-desktop {
        display: none;
    }

    /* Sektoren-Panel: Panel fast voller Hoehe (sonst schneidet 70vh Parent die Karte ab) */
    .tab-panel.open:has([data-tab="sektoren"].active) {
        max-height: 92vh;
    }

    /* Sektoren-Panel: scrollbar, Detail-Card nicht abschneiden */
    [data-tab="sektoren"] .tab-content-inner {
        max-height: calc(92vh - 60px);
        overflow-y: auto;
        padding-bottom: 0;
    }

    /* Karte selbst soll keinen Bottom-Margin haben (sonst weisser Platz) */
    [data-tab="sektoren"] .sector-map-interactive {
        margin-bottom: 0;
    }

    /* Stats-Cards (230+ Boulder, 4.5m Wandhoehe) auf Mobile ausblenden */
    [data-tab="sektoren"] .panel-2col {
        display: none;
    }

    .sector-map-interactive {
        overflow: visible;
        max-height: none;
        border-radius: 8px;
        will-change: scroll-position;
        transform: translateZ(0);
    }
    .sector-svg {
        width: 100%;
        height: auto;
        will-change: transform;
        transform: translateZ(0);
    }

    /* Blaues Tap-Highlight auf Mobile entfernen */
    .sector-area {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        outline: none;
    }

    /* Performance: Transitions komplett deaktivieren */
    .sector-mat,
    .sector-wall,
    .sector-label-name {
        transition: none;
    }

    /* Kein Glow — wie Durchgang: nur sauberer Rand */
    .sector-area .sector-mat,
    .sector-area:hover .sector-mat,
    .sector-area:focus .sector-mat,
    .sector-area.active .sector-mat,
    .sector-area.umschraubung .sector-mat,
    .sector-area.gesperrt .sector-mat {
        filter: none;
        -webkit-filter: none;
    }

    .sector-area:hover .sector-mat,
    .sector-area:focus .sector-mat {
        stroke: currentColor;
        stroke-width: 3;
    }

    .sector-area.active .sector-mat {
        stroke: currentColor;
        stroke-width: 3.5;
        stroke-dasharray: 8 4;
        animation: sectorDashMarch 0.8s linear infinite;
    }
    .sector-area.offen.active .sector-mat {
        stroke: #22c55e;
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
    }

    /* Detail-Card: fixed am unteren Bildschirmrand */
    .sector-detail-card.visible {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 60;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        margin: 0;
        padding: 0;
        animation: none;
        max-height: 40vh;
        overflow-y: auto;
    }
    .sector-label-name {
        font-size: 40px;
    }
    /* Mobile: normales Label anzeigen, Desktop-Label ausblenden */
    .sector-svg .sector-label-desktop-only {
        display: none;
    }
    .sector-svg .sector-label-mobile-only {
        display: block;
    }
    .sector-tooltip { display: none; }
    .sector-scroll-hint { display: block; }

    .sector-detail-card.visible .sector-detail-header {
        padding: 12px 20px 0;
    }
    .sector-detail-card.visible .sector-detail-desc {
        padding: 0 20px;
    }
    .sector-detail-card.visible .sector-detail-status {
        padding: 0 20px 12px;
    }

    .info-icon {
        font-size: 28px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .info-card h4 {
        margin-bottom: 2px;
    }

    .price-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .price-card {
        padding: 14px;
    }

    .price-value {
        font-size: 22px;
    }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .course-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .course-mini-grid {
        grid-template-columns: 1fr 1fr;
    }

    .course-card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: left;
        padding: 14px;
    }

    .course-card h4 {
        font-size: 15px;
        margin: 0;
        order: -2;
    }

    .course-price {
        font-size: 20px;
        margin-bottom: 4px;
        order: -1;
    }

    .course-card p {
        font-size: 12px;
        margin: 0 0 4px;
    }

    .course-details {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        font-size: 11px;
        margin: 4px 0 0;
    }

    .course-card .panel-btn {
        align-self: flex-start;
        margin-top: 8px;
    }

    .two-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .highlight-stat {
        padding: 16px 20px;
    }

    .highlight-stat .stat-value {
        font-size: 28px;
    }

    .grade-pills {
        gap: 6px;
    }

    .grade {
        padding: 5px 10px;
        font-size: 10px;
    }

    .tip-box {
        padding: 10px 12px;
        font-size: 11px;
    }

    .bistro-features {
        gap: 8px;
    }

    .bistro-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* === PANEL RESPONSIVE === */
    .panel-2col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .panel-table {
        font-size: 12px;
    }

    .panel-table th,
    .panel-table td {
        padding: 8px 10px;
    }

    .panel-accordion summary {
        font-size: 13px;
        padding: 10px 14px;
    }

    .panel-accordion .accordion-body {
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .panel-info-box {
        font-size: 12px;
        padding: 10px 12px;
    }

    .section-title {
        font-size: 13px;
        margin: 14px 0 8px;
    }

    /* Kinder-Panel: Rules kompakter */
    .rules-list {
        gap: 6px;
    }
    .rule-item {
        padding: 10px;
        gap: 8px;
        font-size: 12px;
        align-items: flex-start;
    }
    .rule-icon {
        flex-shrink: 0;
    }

    /* === FOOTER: WEISS + VERSTECKT WENN PANEL OFFEN === */
    .page-footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,0.98);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 40;
    }

    /* Beach Footer: Gradient auch auf Mobile (hoehere Spezifitaet) */
    .page-footer-bar.footer-beach {
        background: linear-gradient(135deg, #f5e6d3 0%, #e8d4bf 50%, #f0e2ce 100%);
    }

    .page-footer-bar.footer-beach .footer-legal a {
        color: var(--text-primary, #1a1a1a);
    }

    /* Footer verstecken wenn Panel offen */
    .panel-open .page-footer-bar {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    .footer-contact {
        display: none;
    }

    .footer-legal {
        width: 100%;
        justify-content: center;
        gap: 16px;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (max-width: 600px)
   ============================================ */
@media (max-width: 600px) {
    .hero-title {
        font-size: 44px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-stats {
        gap: 8px;
    }

    .hero-stat {
        padding: 8px 10px;
    }

    .hero-stat-value {
        font-size: 22px;
    }

    .hero-stat-label {
        font-size: 10px;
    }

    .card-tab {
        padding: 0 6px;
        height: var(--cardtab-height-mobile, 44px);
    }

    .card-tab-icon {
        font-size: 18px;
    }

    .card-tab-label {
        font-size: var(--cardtab-font-size-mobile, 10px);
    }

    .tab-panel.open {
        max-height: 75vh;
    }
    .tab-panel.open:has([data-tab="sektoren"].active) {
        max-height: 92vh;
    }

    /* Tabellen-Text kuerzen auf kleinen Screens */
    .panel-table {
        font-size: 11px;
    }

    .panel-table th,
    .panel-table td {
        padding: 6px 6px;
        word-break: break-word;
    }

    .panel-table th {
        font-size: 10px;
        letter-spacing: 0;
    }

    /* Preislinks: Pfeil auf Mobile ausblenden */
    .panel-table a.price-link::after {
        display: none;
    }
}

/* ============================================
   VERY SMALL MOBILE (max-width: 400px)
   ============================================ */
@media (max-width: 400px) {
    .panel-accordion .accordion-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-table {
        font-size: 10px;
        min-width: 280px;
    }

    .panel-table th,
    .panel-table td {
        padding: 5px 4px;
    }

    .course-details {
        font-size: 10px;
    }

    .course-card h4 {
        font-size: 13px;
    }

    .course-price {
        font-size: 18px;
    }

    .panel-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .tip-box {
        font-size: 10px;
        padding: 8px 10px;
    }

    .panel-info-box {
        font-size: 11px;
        padding: 8px 10px;
    }

    .price-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .price-card {
        padding: 10px;
    }

    .price-value {
        font-size: 18px;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .hero-layer {
        top: 60px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        display: none;
    }

    .hero-stats {
        margin-top: 10px;
    }

    .card-tabs-layer {
        bottom: 50px;
    }

    .card-tabs-nav {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: 1fr;
    }

    /* Beach: 6 Spalten in Landscape */
    .page-beach .card-tabs-nav {
        grid-template-columns: repeat(6, 1fr);
    }

    .card-tab {
        padding: 0 4px;
        height: calc(var(--cardtab-height-mobile, 44px) - 2px);
    }

    .card-tab-icon {
        font-size: 16px;
    }

    .card-tab-label {
        font-size: calc(var(--cardtab-font-size-mobile, 13px) - 3px);
    }

    .tab-panel.open {
        max-height: 55vh;
    }
    .tab-panel.open:has([data-tab="sektoren"].active) {
        max-height: 92vh;
    }

    .page-footer-bar {
        padding: 6px 16px;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone Notch etc.)
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 900px) {
        .card-tabs-layer {
            bottom: calc(60px + env(safe-area-inset-bottom));
        }

        .tab-panel.open {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ============================================
   HEIGHT BREAKPOINTS
   ============================================ */
@media (max-height: 700px) {
    .hero-subtitle {
        display: none;
    }
}

@media (max-height: 600px) {
    .hero-stats {
        display: none;
    }
}

/* ============================================
   ERWEITERTE PANEL-INHALTE
   Fuer vollstaendige Inhalte auf /bouldern/
   ============================================ */

/* Section Titles innerhalb der Panels */
.section-title {
    font-family: var(--font-headline, 'Bebas Neue', sans-serif);
    font-size: 16px;
    color: var(--brand-orange-text, #c47a1a);
    letter-spacing: 1px;
    margin: 20px 0 12px;
    text-transform: uppercase;
}

.section-title:first-of-type {
    margin-top: 16px;
}

/* Kurs-Details Liste */
.course-details {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-muted, #666);
}

.course-details li {
    padding: 2px 0;
}

.course-details li::before {
    content: '✓ ';
    color: var(--brand-orange-text, #c47a1a);
}

/* Header Navigation Panel Trigger */
.nav-panel-trigger {
    background: none;
    border: none;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, rgba(0,0,0,0.7));
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.2s;
}

.nav-panel-trigger:hover {
    color: var(--brand-orange-text, #c47a1a);
}

.nav-panel-trigger.active {
    color: var(--brand-orange-text, #c47a1a);
    font-weight: 600;
}

/* Mobile Panel Trigger */
.mobile-panel-trigger {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    text-align: left;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-panel-trigger:hover {
    background: var(--bg-secondary, #f5f5f5);
}

/* Scrollbar Styling (doppelte .tab-content-inner entfernt, Basis-Styles ab Zeile 362) */

/* Mobile: Mehr Platz fuer Scroll */
@media (max-width: 900px) {
    .tab-content-inner {
        max-height: calc(70vh - 100px);
        padding: 0 20px 20px;
    }

    .section-title {
        font-size: 14px;
        margin: 16px 0 10px;
    }

    .course-details {
        font-size: 11px;
    }

    .mobile-panel-trigger {
        border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
    }
}

/* ============================================
   RUNDGANG GALERIE IM PANEL
   ============================================ */
.gallery-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 16px 0;
    padding: 0 40px;
}

.gallery-roll {
    flex: 1;
    overflow: hidden;
    cursor: grab;
    border-radius: 12px;
}

.gallery-roll:active {
    cursor: grabbing;
}

.gallery-track {
    display: flex;
    gap: 12px;
    width: max-content;
    transition: transform 0.4s ease;
}

.gallery-item {
    flex-shrink: 0;
    width: clamp(120px, 18vw, 180px);
    height: clamp(80px, 12vh, 120px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f8f8 0%, #ececec 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color, rgba(0,0,0,0.15));
    transition: border-color 0.3s ease;
}

.gallery-item:hover .gallery-placeholder {
    border-color: var(--brand-orange, #F49B31);
}

.gallery-placeholder span {
    font-size: 28px;
    margin-bottom: 4px;
}

.gallery-placeholder p {
    color: var(--text-muted, #666);
    font-size: 10px;
    font-weight: 500;
    margin: 0;
}

/* Gallery Navigation Arrows */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: white;
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.gallery-nav:hover {
    background: var(--brand-orange, #F49B31);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav-prev { left: 0; }
.gallery-nav-next { right: 0; }

.gallery-nav svg {
    width: 18px;
    height: 18px;
}

/* Gallery Dots */
.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border-color, rgba(0,0,0,0.25));
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.gallery-dot:hover {
    border-color: var(--brand-orange, #F49B31);
    background: rgba(244,155,49,0.3);
}

.gallery-dot.active {
    border-color: var(--brand-orange, #F49B31);
    background: var(--brand-orange, #F49B31);
}

/* Gallery Controls (hidden) */
.gallery-controls {
    display: none;
}

.gallery-autoplay {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    border: 2px solid var(--border-color, rgba(0,0,0,0.15));
    border-radius: 50%;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.gallery-autoplay:hover {
    border-color: var(--brand-orange, #F49B31);
    color: var(--brand-orange-text, #c47a1a);
}

/* Gallery Mobile */
@media (max-width: 900px) {
    .gallery-container {
        padding: 0 8px;
    }

    .gallery-nav {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .gallery-nav svg {
        width: 14px;
        height: 14px;
    }

    .gallery-nav-prev { left: -4px; }
    .gallery-nav-next { right: -4px; }

    .gallery-item {
        width: clamp(100px, 30vw, 140px);
        height: clamp(70px, 20vw, 100px);
    }

    .gallery-placeholder span {
        font-size: 22px;
    }

    .gallery-placeholder p {
        font-size: 9px;
    }

    .gallery-dots {
        gap: 8px;
    }

    .gallery-dot {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 600px) {
    .gallery-nav {
        display: none;
    }

    .gallery-container {
        padding: 0;
    }

    .gallery-roll {
        padding: 0 12px;
    }
}

/* ============================================
   NEWS-BANNER (oben auf Boulder/Beach-Seiten)
   ============================================ */
.news-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    background: rgba(244, 155, 49, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px 52px 10px 20px;
    display: flex;
    align-items: center;
    animation: newsBannerSlideDown 0.4s ease;
}

.page-beach .news-banner {
    background: rgba(212, 165, 116, 0.95);
}

.news-banner.hidden {
    display: none;
}

.news-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.news-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.news-banner-icon svg,
.news-banner-icon i {
    width: 18px;
    height: 18px;
    color: #1a1a1a;
}

.news-banner-text {
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
}

.news-banner-link {
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: underline;
    white-space: nowrap;
    font-size: 13px;
}

.news-banner-link:hover {
    opacity: 0.8;
}

.news-banner-close {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    cursor: pointer;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.news-banner-close:hover {
    opacity: 0.6;
}

@keyframes newsBannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* News-Banner Mobile */
@media (max-width: 900px) {
    .news-banner {
        padding: 8px 48px 8px 16px;
        /* Mobile: Banner ueber hero-news Badge (z:65) heben */
        z-index: 70;
    }

    .news-banner-text {
        font-size: 12px;
    }

    .news-banner-link {
        font-size: 12px;
    }

    .news-banner-icon svg,
    .news-banner-icon i {
        width: 16px;
        height: 16px;
    }

    /* Wenn Banner aktiv: hero-news Badge + hero-layer nach unten schieben */
    body.has-news-banner .hero-news {
        top: 104px; /* 60px (normal) + ~44px Banner-Hoehe */
    }
    body.has-news-banner .hero-layer {
        top: 124px; /* 80px (normal) + ~44px Banner-Hoehe */
    }
}

@media (max-width: 600px) {
    .news-banner-inner {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    /* Bei wrap kann der Banner ~64px hoch werden — Badge + Hero weiter runter */
    body.has-news-banner .hero-news {
        top: 124px;
    }
    body.has-news-banner .hero-layer {
        top: 144px;
    }
}

/* ============================================================
   KOOPERATIONSPARTNER
   ============================================================ */

.partner-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.partner-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}

.partner-header h4 {
    white-space: nowrap;
}

.partner-link {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.partner-link a {
    color: var(--brand-orange-text, #c47a1a);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .partner-header {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PINNWAND (Schwarzes Brett)
   ============================================================ */

/* Filter Bar */
.pinnwand-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pinnwand-filter-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #aaa);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
}

.pinnwand-filter-btn:hover,
.pinnwand-filter-btn.active {
    background: var(--brand-orange);
    color: #fff;
    border-color: var(--brand-orange);
}

.pinnwand-filter-btn svg {
    width: 14px;
    height: 14px;
}

/* Cards Grid */
.pinnwand-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Card (Light-Mode) */
.pinnwand-card {
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 16px;
    padding: 20px;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pinnwand-card:hover,
.pinnwand-card:focus-within {
    border-color: var(--brand-orange);
    box-shadow: 0 6px 20px rgba(244, 155, 49, 0.20);
    transform: translateY(-2px);
}

.pinnwand-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pinnwand-card-avatar {
    width: 44px;
    height: 44px;
    background: rgba(244, 155, 49, 0.12);
    color: var(--brand-orange-text, #c47a1a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pinnwand-card-avatar svg {
    width: 20px;
    height: 20px;
}

.pinnwand-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.05em;
}

.pinnwand-card-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.pinnwand-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.pinnwand-tag {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary, rgba(0, 0, 0, 0.7));
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
}

.pinnwand-tag.highlight {
    background: var(--brand-orange);
    color: #fff;
    font-weight: 600;
}

.pinnwand-card-text {
    color: var(--text-secondary, rgba(0, 0, 0, 0.7));
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.pinnwand-card-contact {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Modal */
.pinnwand-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pinnwand-modal.is-open {
    display: flex;
}

.pinnwand-modal-content {
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 16px;
    padding: 28px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.pinnwand-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form */
.pinnwand-form-group {
    margin-bottom: 12px;
}

.pinnwand-form-group label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.pinnwand-form-group input,
.pinnwand-form-group select,
.pinnwand-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: #f8f8f8;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.pinnwand-form-group input:focus,
.pinnwand-form-group select:focus,
.pinnwand-form-group textarea:focus {
    outline: none;
    border-color: var(--brand-orange);
}

.pinnwand-form-group select {
    appearance: auto;
}

.pinnwand-form-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.pinnwand-form-message.error {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.pinnwand-form-message.success {
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Pinnwand-Buttons: kein Rand, kein Schatten */
[data-tab="schwarzes-brett"] .panel-btn,
[data-tab="schwarzes-brett"] button,
[data-tab="schwarzes-brett"] button[type="submit"],
.pinnwand-modal .panel-btn,
.pinnwand-modal button,
.pinnwand-filter-btn {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Responsive */
@media (max-width: 600px) {
    .pinnwand-cards {
        grid-template-columns: 1fr;
    }

    .pinnwand-modal-content {
        padding: 20px;
    }

    .pinnwand-intro .info-grid {
        grid-template-columns: 1fr;
    }
}