:root {
    --primary: #0f766e;
    --primary-dark: #115e59;
    --accent: #f59e0b;
    --text: #1f2937;
    --light-bg: #f8fafc;
    --card-bg: #ffffff;
    --border: #e5e7eb;
}

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

body {
    font-family: 'Inter', system_ui, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--light-bg);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Navbar */
.navbar {
    background: #fff;
    box-shadow: 0 1px 0 #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--primary);
}

.logo-icon {
    font-size: 1.75rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-btn {
    padding: 0.5rem 1.1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: var(--primary-dark);
}

.mobile-menu {
    display: none;
}

/* Hero */
.hero {
    height: 100vh;
    min-height: 620px;
    background: linear-gradient(rgba(15, 118, 110, 0.75), rgba(15, 118, 110, 0.65)), url('/images/allgaeu-hero-generated.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.hero-content {
    max-width: 620px;
    padding: 0 2rem;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(10px);
}

.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4.1rem;
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.btn-primary {
    background: #fff;
    color: var(--primary);
    padding: 0.9rem 2rem;
    border-radius: 9999px;
    border: none;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: transparent;
    color: white;
    padding: 0.9rem 1.8rem;
    border-radius: 9999px;
    border: 2px solid rgba(255,255,255,0.75);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.stat {
    text-align: left;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Quick Filters */
.quick-filters {
    background: white;
    padding: 1.5rem 0;
    box-shadow: 0 1px 0 #e5e7eb;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.filter-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    color: #475569;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    padding: 0.45rem 1rem;
    background: #f1f5f9;
    border: none;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.chip:hover, .chip.active {
    background: var(--primary);
    color: white;
}

/* Explore */
.explore {
    padding: 4rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-size: 2.4rem;
    font-weight: 700;
}

.stats-pill {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Filters */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    background: white;
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.filter select {
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    min-width: 190px;
}

.search-box {
    flex: 1;
    min-width: 240px;
}

.search-box input {
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.95rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-weight: 500;
}

.btn-reset {
    padding: 0.6rem 1.4rem;
    background: #f1f5f9;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
}

/* Destinations Grid */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
}

.destination-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e5e7eb;
}

.destination-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-color: #0f766e;
}

.card-image {
    height: 170px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25));
}

.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #dcfce7;
    color: #166534;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.card-verified {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #dcfce7;
    color: #166534;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.card-suitability {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: .86rem;
    line-height: 1.45;
}

.card-desc {
    font-size: 0.925rem;
    color: #475569;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.card-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.card-rating span {
    color: #f59e0b;
}

/* Weather Section */
.weather-section {
    background: #0f172a;
    color: white;
    padding: 4.5rem 0;
}

.weather-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

.weather-card {
    background: #1e2937;
    border-radius: 20px;
    padding: 1.75rem;
}

.weather-card h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #94a3b8;
}

#current-weather {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.current-temp {
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
}

.current-desc {
    font-size: 1.35rem;
    margin: 0.5rem 0 1.5rem;
}

.forecast-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.forecast-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #334155;
}

.forecast-item:last-child {
    border-bottom: none;
}

.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* Map */
.map-section {
    padding: 4rem 0;
}

.map-container {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.map-placeholder {
    padding: 2rem;
}

.map-visual {
    margin: 1.25rem 0;
    background: #f1e7ff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Leaflet map styling */
#leaflet-map {
    border-radius: 16px;
}

.custom-marker {
    transition: transform 0.2s ease;
}

.custom-marker:hover {
    transform: scale(1.3);
}

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

.map-pin {
    cursor: pointer;
    transition: transform 0.2s;
}

.map-pin:hover {
    transform: scale(1.3);
}

/* Events */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.event-card {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-left: 5px solid #0f766e;
}

/* Recommendations */
.recommendations {
    padding: 4rem 0;
    background: white;
}

.rec-header {
    margin-bottom: 2rem;
}

.rec-form {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.rec-form select {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    width: 100%;
}

/* Footer */
footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 3.5rem 0 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-links {
    display: flex;
    gap: 3.5rem;
}

.footer-links a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-top: 0.5rem;
}

.footer-bottom {
    border-top: 1px solid #334155;
    padding-top: 1.5rem;
    font-size: 0.875rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    width: 92%;
    max-width: 780px;
    border-radius: 20px;
    padding: 2rem;
    position: relative;
}

.modal-content.small {
    max-width: 380px;
}

.close-modal {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .weather-grid {
        grid-template-columns: 1fr;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .destinations-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== SENIOR MODE ==================== */
.senior-mode {
    font-size: 1.25rem !important;
}

.senior-mode .destination-card {
    font-size: 1.15rem;
}

.senior-mode .card-title {
    font-size: 1.45rem !important;
    line-height: 1.3;
}

.senior-mode .nav-links a,
.senior-mode .nav-btn {
    font-size: 1.15rem !important;
    padding: 0.75rem 1.25rem;
}

.senior-mode .section-header h2 {
    font-size: 2.8rem !important;
}

.senior-mode .destination-card .card-body {
    padding: 1.5rem;
}

.senior-mode .filters select,
.senior-mode .search-box input {
    font-size: 1.2rem !important;
    padding: 1rem 1.25rem;
}

.senior-mode .chip {
    font-size: 1.05rem;
    padding: 0.65rem 1.2rem;
}

.senior-mode .btn-primary,
.senior-mode .btn-secondary {
    font-size: 1.2rem;
    padding: 1rem 2.2rem;
}

.senior-mode .card-footer {
    font-size: 1.1rem;
}

.senior-mode .senior-btn {
    background: #f59e0b;
    color: white;
}

/* ==================== MUSIC CONTROL ==================== */
.music-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.music-btn {
    background: #0f766e;
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-btn:hover {
    background: #115e59;
    transform: scale(1.1);
}

.music-btn.active {
    background: #f59e0b;
    animation: music-pulse 2s infinite;
}

@keyframes music-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

#volume-slider {
    accent-color: #0f766e;
    cursor: pointer;
}

/* Senior Mode Music Button */
.senior-mode .music-btn {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
}

.detail-sections {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

.detail-sections section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem;
}

.detail-sections h3 { margin: 0 0 .75rem; }
.detail-sections p { line-height: 1.75; white-space: pre-line; }
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.detail-facts div { display: flex; flex-direction: column; gap: .25rem; padding: .8rem; background: white; border-radius: 10px; }
.detail-facts span { color: #475569; line-height: 1.5; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.editorial-meta { color: #64748b; font-size: .85rem; padding: .75rem 0; }

@media (max-width: 640px) {
  .detail-facts { grid-template-columns: 1fr; }
  .detail-actions button { width: 100%; min-height: 48px; }
}

.guide-page { background:#f8fafc; }
.guide-header { background:linear-gradient(110deg,#0f766e,#115e59); color:white; padding:1.25rem 0; }
.guide-header-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.guide-header h1 { margin:0; }
.guide-header p { margin:.3rem 0 0; opacity:.9; }
.guide-main { padding-top:1.5rem; padding-bottom:3rem; }
.guide-controls { background:white; border:1px solid #edf2f7; border-radius:16px; padding:1rem; box-shadow:0 6px 22px rgb(15 23 42 / .07); }
#guide-search { width:100%; padding:.9rem 1rem; border:1px solid #cbd5e1; border-radius:10px; font-size:1rem; }
.guide-filter-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.guide-filter { border:0; border-radius:999px; padding:.7rem 1rem; background:#e2e8f0; cursor:pointer; font-weight:700; }
.guide-filter.active { background:#0f766e; color:white; }
.guide-personal-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.8rem; }
.guide-personal-actions button { min-height:42px; padding:.55rem .9rem; border:1px solid #b8d3cc; border-radius:999px; background:white; color:#0f766e; font-weight:850; cursor:pointer; }
.guide-personal-actions button.active { background:#fff1f2; border-color:#fda4af; color:#be123c; }
.guide-personal-actions button:disabled { opacity:.45; cursor:not-allowed; }
#favorites-status { color:#64748b; font-size:.9rem; font-weight:700; }
.guide-count { margin:1.2rem 0; font-weight:700; color:#475569; }
.guide-card { position:relative; cursor:default; }
.favorite-button { position:absolute; z-index:5; top:12px; right:12px; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgb(255 255 255 / .8); border-radius:50%; background:rgb(255 255 255 / .94); color:#9f1239; font-size:1.55rem; cursor:pointer; box-shadow:0 4px 12px rgb(15 23 42 / .18); }
.favorite-button.active { background:#fff1f2; }
.guide-card-link { color:inherit; text-decoration:none; display:block; height:100%; }
.guide-card-link:focus-visible { outline:3px solid #f59e0b; outline-offset:3px; border-radius:14px; }
.guide-shorttext { color:#475569; line-height:1.55; margin:.75rem 0; }
.guide-detail-cta { display:block; margin-top:1rem; padding:.75rem 1rem; color:#0f766e; background:#e7f5f2; border-radius:10px; text-align:center; font-weight:800; }
.guide-category-sign { position:absolute; z-index:2; left:12px; top:12px; display:inline-flex; align-items:center; gap:.45rem; max-width:calc(100% - 24px); padding:.5rem .85rem; border:1px solid rgb(255 255 255 / .65); border-radius:10px; background:rgb(15 118 110 / .94); color:white; box-shadow:0 4px 12px rgb(15 23 42 / .22); font-size:.82rem; font-weight:900; line-height:1.1; letter-spacing:.015em; }
.guide-category-sign span { font-size:1.05rem; }
.guide-setting { position:absolute; z-index:2; left:12px; bottom:12px; background:rgb(255 255 255 / .94); border-radius:999px; padding:.3rem .7rem; font-weight:700; box-shadow:0 2px 8px rgb(15 23 42 / .16); }
.guide-card .card-badge { z-index:2; left:auto; right:12px; top:auto; bottom:12px; }
.guide-card .image-pending { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#dbece7,#8fb5aa); }
.guide-card .image-pending::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 76% 25%,rgb(255 255 255 / .46) 0 16px,transparent 17px),linear-gradient(145deg,transparent 0 54%,rgb(255 255 255 / .24) 54% 64%,transparent 64%),linear-gradient(35deg,transparent 0 57%,rgb(15 78 67 / .14) 57% 69%,transparent 69%); }
.guide-card-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.guide-card .category-tile::after { background:linear-gradient(145deg,rgb(255 255 255 / .12),rgb(15 23 42 / .14)); }
.guide-card .category-tile.category-wanderungen { background:linear-gradient(135deg,#dcecdf,#74a486); }
.guide-card .category-tile.category-museen_kultur { background:linear-gradient(135deg,#e9e1f4,#9d87bd); }
.guide-card .category-tile.category-baeder_thermen { background:linear-gradient(135deg,#d9edf6,#70a9c5); }
.guide-card .category-tile.category-attraktionen_freizeitparks { background:linear-gradient(135deg,#f7e4d5,#d69668); }
.guide-card .category-tile.category-sehenswuerdigkeiten { background:linear-gradient(135deg,#f0e5d4,#bb9361); }
.guide-card .category-tile.category-sport_aktiv { background:linear-gradient(135deg,#f5dce8,#c8769b); }
.guide-card .category-tile.category-tiererlebnisse { background:linear-gradient(135deg,#e8ecd7,#98a66b); }
.guide-card .category-tile.category-veranstaltungen { background:linear-gradient(135deg,#ede0f6,#ac7dcc); }
.guide-card .category-wanderungen .guide-category-sign { background:rgb(47 111 78 / .95); }
.guide-card .category-museen_kultur .guide-category-sign { background:rgb(91 67 140 / .95); }
.guide-card .category-baeder_thermen .guide-category-sign { background:rgb(3 105 161 / .95); }
.guide-card .category-attraktionen_freizeitparks .guide-category-sign { background:rgb(194 65 12 / .95); }
.guide-card .category-sehenswuerdigkeiten .guide-category-sign { background:rgb(146 64 14 / .95); }
.guide-card .category-sport_aktiv .guide-category-sign { background:rgb(190 24 93 / .95); }
.guide-card .category-tiererlebnisse .guide-category-sign { background:rgb(77 91 32 / .95); }
.guide-card .category-veranstaltungen .guide-category-sign { background:rgb(126 34 206 / .95); }
.guide-link { display:block; margin-top:1rem; padding:.8rem 1rem; background:#0f766e; color:white; border-radius:10px; text-align:center; text-decoration:none; font-weight:700; }
.guide-no-link { margin-top:1rem; color:#64748b; font-size:.9rem; }
.guide-category { color:#0f766e; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.45rem; }
.guide-own-description { margin-top:1rem; padding:1rem; border-radius:10px; background:#eef7f5; color:#334155; }
.guide-own-description p { margin:.4rem 0 0; line-height:1.55; }
.detail-back { color:white; font-weight:800; text-decoration:none; }
.public-detail { max-width:900px; padding-top:2rem; padding-bottom:4rem; }
.public-detail article { background:white; border-radius:18px; padding:clamp(1rem,3vw,2rem); box-shadow:0 8px 30px rgb(15 23 42 / .1); }
.public-detail-image { width:100%; height:min(280px,32vw); object-fit:cover; border-radius:14px; margin-bottom:1.5rem; }
.public-detail .category-tile { position:relative; display:flex; align-items:center; justify-content:center; min-height:210px; background:linear-gradient(135deg,#dbece7,#8fb5aa); overflow:hidden; }
.public-detail .category-tile::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 76% 23%,rgb(255 255 255 / .52) 0 29px,transparent 30px),linear-gradient(145deg,transparent 0 53%,rgb(255 255 255 / .25) 53% 64%,transparent 64%),linear-gradient(35deg,transparent 0 56%,rgb(15 78 67 / .14) 56% 69%,transparent 69%); }
.public-detail .category-tile.has-photo::before { display:none; }
.public-detail-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.public-detail-image-credit { margin:-1rem 0 1rem; color:#64748b; font-size:.82rem; text-align:right; }
.public-detail-sign { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.7rem; padding:.85rem 1.25rem; border:1px solid rgb(255 255 255 / .7); border-radius:12px; background:rgb(15 118 110 / .95); color:white; box-shadow:0 6px 18px rgb(15 23 42 / .25); font-size:clamp(1rem,3vw,1.35rem); font-weight:900; }
.public-detail-sign span { font-size:1.35em; }
.public-detail .category-wanderungen { background:linear-gradient(135deg,#dcecdf,#74a486); }
.public-detail .category-museen_kultur { background:linear-gradient(135deg,#e9e1f4,#9d87bd); }
.public-detail .category-baeder_thermen { background:linear-gradient(135deg,#d9edf6,#70a9c5); }
.public-detail .category-attraktionen_freizeitparks { background:linear-gradient(135deg,#f7e4d5,#d69668); }
.public-detail .category-sehenswuerdigkeiten { background:linear-gradient(135deg,#f0e5d4,#bb9361); }
.public-detail .category-sport_aktiv { background:linear-gradient(135deg,#f5dce8,#c8769b); }
.public-detail .category-tiererlebnisse { background:linear-gradient(135deg,#e8ecd7,#98a66b); }
.public-detail .category-veranstaltungen { background:linear-gradient(135deg,#ede0f6,#ac7dcc); }
.image-pending { background:linear-gradient(135deg,#dfe9e4,#9bb7aa); }
.public-detail h1 { margin:.35rem 0; font-size:clamp(2rem,5vw,3rem); }
.public-detail-place { color:#64748b; }
.public-detail-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.public-detail-tags span { background:#eef2f6; padding:.45rem .75rem; border-radius:999px; font-weight:700; }
.public-detail-suitable { background:#eef7f5; padding:1rem; border-radius:10px; }
.planning-review-badge { position:absolute; left:.75rem; bottom:.75rem; max-width:calc(100% - 1.5rem); padding:.4rem .65rem; border-radius:999px; background:#fff7ed; color:#9a3412; font-size:.75rem; font-weight:900; box-shadow:0 2px 8px rgb(15 23 42 / .2); }
.planning-review-notice { display:grid; gap:.35rem; margin:1rem 0; padding:1rem 1.1rem; border:2px solid #fdba74; border-radius:12px; background:#fff7ed; color:#7c2d12; }
.planning-review-notice strong { font-size:1.05rem; }
.detail-route-map { margin:2rem 0; }
.detail-route-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.detail-route-heading span { color:#0f766e; font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.detail-route-heading h2 { margin:.2rem 0 0; }
.detail-route-heading a { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.7rem 1rem; border-radius:10px; background:#0f766e; color:white; font-weight:850; text-decoration:none; }
#detail-map { width:100%; height:420px; border:1px solid #cbd5e1; border-radius:16px; background:#e2e8f0; overflow:hidden; }
.detail-route-map > p { margin:.75rem 0 0; padding:.9rem 1rem; border-radius:10px; background:#f1f5f9; }
@media(max-width:700px){.detail-route-heading{align-items:stretch;flex-direction:column}#detail-map{height:330px}}
.public-detail section p { white-space:pre-line; line-height:1.75; }
.public-detail-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin:1.5rem 0; }
.public-detail-facts div { background:#f8fafc; border-radius:10px; padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.editorial-trust { margin-top:1rem; padding:.75rem 1rem; border-left:4px solid #0f766e; background:#eef7f5; color:#475569; font-size:.9rem; }
.detail-user-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1rem; }
.detail-user-actions .guide-link { margin-top:0; }
#detail-favorite { min-height:46px; padding:.75rem 1rem; border:1px solid #fda4af; border-radius:10px; background:#fff1f2; color:#9f1239; font:inherit; font-weight:850; cursor:pointer; }
#detail-day-plan { min-height:46px; padding:.75rem 1rem; border:0; border-radius:10px; background:#0f766e; color:white; font:inherit; font-weight:850; cursor:pointer; }
#detail-day-plan:disabled { opacity:.65; cursor:default; }
#detail-share { min-height:46px; padding:.75rem 1rem; border:1px solid #94a3b8; border-radius:10px; background:white; color:#334155; font:inherit; font-weight:850; cursor:pointer; }
#detail-action-status { flex-basis:100%; color:#0f766e; font-weight:750; }
.detail-planning { margin-top:1.5rem; }
.detail-planning > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.75rem; }
.detail-planning p { display:flex; flex-direction:column; gap:.35rem; margin:0; padding:1rem; border-left:4px solid #0f766e; border-radius:10px; background:#f8fafc; }
.detail-planning span { color:#475569; line-height:1.5; }
.detail-related { margin-top:2rem; padding-top:1.5rem; border-top:1px solid #e2e8f0; }
.detail-related > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.detail-related a { display:flex; flex-direction:column; gap:.35rem; padding:1rem; border:1px solid #d9e7e3; border-radius:12px; background:#f8fafc; color:#1e293b; text-decoration:none; }
.detail-related a:hover { border-color:#0f766e; background:#eef7f5; }
.detail-related a span { color:#0f766e; font-size:.72rem; font-weight:850; text-transform:uppercase; }
.detail-related a small { color:#64748b; }
@media(max-width:700px){.detail-related > div{grid-template-columns:1fr}}
.content-report { margin-top:1.5rem; padding:1rem; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.content-report summary { color:#475569; font-weight:800; cursor:pointer; }
.content-report form { display:grid; gap:.8rem; margin-top:1rem; }
.content-report label { display:grid; gap:.35rem; font-weight:750; }
.content-report select,.content-report textarea { width:100%; padding:.7rem; border:1px solid #cbd5e1; border-radius:8px; background:white; font:inherit; }
.content-report textarea { min-height:90px; resize:vertical; }
.content-report button { justify-self:start; min-height:44px; padding:.65rem 1rem; border:0; border-radius:9px; background:#0f766e; color:white; font-weight:850; cursor:pointer; }
#content-report-status { color:#0f766e; font-weight:750; }
.senior-mode { font-size:125%; }
@media(max-width:640px){
  .container{padding-left:1rem;padding-right:1rem}
  .guide-header{padding:.9rem 0}
  .guide-header-inner{align-items:center;flex-direction:row}
  .guide-header h1{font-size:1.45rem;line-height:1.15}
  .guide-header p{font-size:.86rem;line-height:1.35}
  #senior-mode-button{flex:0 0 auto;min-height:42px;padding:.55rem .7rem;font-size:.78rem}
  .guide-main{padding-top:1rem}
  .guide-controls{padding:.8rem}
  .guide-filter-row{flex-wrap:nowrap;overflow-x:auto;margin-left:-.8rem;margin-right:-.8rem;padding:.05rem .8rem .45rem;scrollbar-width:none}
  .guide-filter-row::-webkit-scrollbar{display:none}
  .guide-filter-row .guide-filter{flex:0 0 auto;min-height:42px;padding:.55rem .85rem}
  .guide-weather{display:block;margin:.75rem 0;padding:.8rem 1rem;font-size:.9rem}
  #weather-details{display:block;margin-top:.2rem;font-size:.82rem}
  .public-detail{padding-top:1rem}
  .public-detail-image,.public-detail .category-tile{height:180px;min-height:180px;margin-bottom:1rem}
  .public-detail h1{font-size:clamp(1.8rem,9vw,2.35rem);line-height:1.15}
}
.site-footer { display:flex; justify-content:center; gap:1.5rem; padding:1.5rem; background:#0f172a; color:white; }
.site-footer a { color:white; font-weight:700; }
.legal-page { max-width:820px; padding-top:2rem; padding-bottom:4rem; }
.legal-page article { background:white; padding:clamp(1.25rem,4vw,2.5rem); border-radius:18px; box-shadow:0 8px 30px rgb(15 23 42 / .08); }
.legal-page h1 { margin-top:0; }
.legal-page h2 { margin-top:2rem; }
.legal-placeholder { padding:1rem; border:2px solid #f59e0b; border-radius:10px; background:#fffbeb; }

.guide-weather { display:flex; justify-content:space-between; gap:1rem; margin:1rem 0 1.5rem; padding:1rem 1.25rem; border-radius:14px; background:#e6fffb; color:#115e59; }
.guide-weather span:last-child { color:#475569; }
@media (max-width: 640px) { .guide-weather { align-items:flex-start; flex-direction:column; } }

.guide-webcam-entry { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem; min-height:70px; margin:-.5rem 0 1.5rem; padding:1rem 1.25rem; border:1px solid #bae6fd; border-radius:14px; background:#f0f9ff; color:#0c4a6e; text-decoration:none; }
.guide-webcam-entry > span:first-child { font-size:1.8rem; }
.guide-webcam-entry strong,.guide-webcam-entry small { display:block; }
.guide-webcam-entry small { margin-top:.2rem; color:#475569; }
.guide-webcam-entry > span:last-child { font-size:1.4rem; font-weight:900; }
.guide-webcam-entry:hover,.guide-webcam-entry:focus-visible { border-color:#0284c7; background:#e0f2fe; }

.guide-home-link { display:inline-block; margin-bottom:.2rem; color:#ccfbf1; font-size:.78rem; font-weight:850; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.guide-home-link:hover { color:white; text-decoration:underline; }
.guide-view-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:1rem; padding-top:1rem; border-top:1px solid #e2e8f0; }
.guide-view-tools label { color:#475569; font-size:.88rem; font-weight:800; }
.guide-view-tools select,.guide-view-tools button { min-height:42px; padding:.55rem .8rem; border:1px solid #cbd5e1; border-radius:9px; background:white; color:#334155; font:inherit; font-weight:750; }
.guide-view-tools button { margin-left:auto; cursor:pointer; }
.guide-view-tools button:hover { border-color:#0f766e; color:#0f766e; }
.guide-empty-state { grid-column:1/-1; padding:clamp(2rem,6vw,4rem); border:1px dashed #94a3b8; border-radius:18px; background:white; color:#475569; text-align:center; }
.guide-empty-state > span { display:block; color:#0f766e; font-size:2.5rem; }
.guide-empty-state h2 { margin:.4rem 0; color:#1e293b; }
.guide-empty-state p { margin:.4rem 0 1rem; }
.guide-empty-state button { min-height:44px; padding:.65rem 1rem; border:0; border-radius:999px; background:#0f766e; color:white; font:inherit; font-weight:850; cursor:pointer; }
.guide-load-more-wrap { display:flex; justify-content:center; margin:1.5rem 0 2.5rem; }
.guide-load-more-wrap button { min-height:48px; padding:.75rem 1.35rem; border:1px solid #0f766e; border-radius:999px; background:white; color:#0f766e; font:inherit; font-weight:850; cursor:pointer; }
.guide-load-more-wrap button:hover { background:#eef7f5; }
.guide-load-more-wrap button[hidden] { display:none; }
@media(max-width:640px){
  .guide-view-tools{align-items:stretch;display:grid;grid-template-columns:1fr}
  .guide-view-tools label{grid-column:auto}
  .guide-view-tools select,.guide-view-tools button{width:100%;margin-left:0}
}

.trip-finder-disclosure { margin:1rem 0 1.5rem; border-radius:18px; background:linear-gradient(135deg,#0f766e,#164e63); color:white; box-shadow:0 12px 30px rgb(15 118 110 / .18); overflow:hidden; }
.trip-finder-disclosure > summary { display:flex; align-items:center; gap:.75rem; min-height:66px; padding:1rem 1.25rem; cursor:pointer; list-style:none; }
.trip-finder-disclosure > summary::-webkit-details-marker { display:none; }
.trip-finder-disclosure > summary strong { font-size:1.05rem; }
.trip-finder-disclosure > summary span:last-child { margin-left:auto; color:#d9f5ee; font-size:.88rem; font-weight:750; }
.trip-finder-disclosure > summary::after { content:'＋'; margin-left:.2rem; font-size:1.3rem; }
.trip-finder-disclosure[open] > summary::after { content:'−'; }
.trip-finder-disclosure[open] > summary { border-bottom:1px solid rgb(255 255 255 / .2); }
.trip-finder { margin:0; padding:clamp(1.2rem,3vw,2rem); color:white; }
.trip-finder-intro { max-width:760px; }
.trip-finder-eyebrow { display:inline-block; margin-bottom:.45rem; color:#fef3c7; font-size:.82rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.trip-finder h2 { margin:0; font-size:clamp(1.8rem,4vw,2.6rem); }
.trip-finder-intro p { margin:.45rem 0 1.4rem; color:#d9f5ee; }
.trip-finder-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.trip-field { min-width:0; min-height:142px; padding:1.15rem; border:1px solid rgb(255 255 255 / .25); border-radius:14px; background:rgb(255 255 255 / .1); }
.trip-field > span,.trip-field legend { display:block; margin-bottom:.65rem; color:white; font-weight:850; }
.trip-field input[type="text"],.trip-field input:not([type]),.trip-field select { width:100%; min-height:48px; padding:.7rem .8rem; border:1px solid rgb(255 255 255 / .35); border-radius:10px; background:white; color:#0f172a; font:inherit; }
.trip-field fieldset { border:0; }
.trip-party,.trip-needs { position:relative; display:flex; flex-wrap:wrap; align-content:flex-start; gap:.75rem 1.15rem; padding-top:3.35rem; }
.trip-party legend,.trip-needs legend { position:absolute; top:1.15rem; left:1.15rem; width:auto; margin:0; padding:0; }
.trip-party label,.trip-needs label { display:flex; align-items:center; min-height:28px; gap:.5rem; cursor:pointer; white-space:nowrap; }
.trip-party input,.trip-needs input { width:19px; height:19px; accent-color:#f59e0b; }
.trip-finder-submit { grid-column:1/-1; min-height:54px; border:0; border-radius:999px; background:#f59e0b; color:#172554; font-size:1.05rem; font-weight:900; cursor:pointer; box-shadow:0 8px 20px rgb(15 23 42 / .2); }
.trip-finder-submit:hover { background:#fbbf24; transform:translateY(-1px); }
.trip-finder-submit:disabled { cursor:wait; opacity:.7; }
.trip-finder-status { margin-top:1rem; font-weight:800; }
.trip-finder-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; color:#1e293b; }
.trip-result { position:relative; display:flex; gap:.8rem; padding:1rem; border-radius:16px; background:white; box-shadow:0 7px 20px rgb(15 23 42 / .16); }
.trip-result-rank { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#0f766e; color:white; font-weight:900; }
.trip-result-category { color:#0f766e; font-size:.76rem; font-weight:900; text-transform:uppercase; }
.trip-result h3 { margin:.25rem 0; line-height:1.25; }
.trip-result p { margin:.45rem 0; color:#475569; line-height:1.45; }
.trip-result-place { font-size:.88rem; font-weight:750; }
.trip-result ul { margin:.35rem 0 .8rem 1.1rem; color:#334155; font-size:.9rem; }
.trip-result a { display:block; margin-top:.8rem; padding:.65rem .8rem; border-radius:9px; background:#e7f5f2; color:#0f766e; text-align:center; text-decoration:none; font-weight:850; }
.trip-result .add-to-day-plan { width:100%; margin-top:.5rem; padding:.65rem .8rem; border:0; border-radius:9px; background:#0f766e; color:white; font:inherit; font-weight:850; cursor:pointer; }
.data-error { grid-column:1/-1; padding:clamp(1.25rem,4vw,2rem); border:1px solid #fed7aa; border-radius:16px; background:#fff7ed; color:#9a3412; text-align:center; }
.data-error h1, .data-error h2 { margin:0 0 .5rem; color:#7c2d12; }
.data-error p { margin:.5rem 0 1rem; }
.data-error button, .data-error a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:.25rem; padding:.65rem 1rem; border:0; border-radius:999px; background:#0f766e; color:white; font:inherit; font-weight:850; text-decoration:none; cursor:pointer; }
.data-error button:hover, .data-error button:focus-visible, .data-error a:hover, .data-error a:focus-visible { background:#115e59; }
.event-link { display:inline-block; margin-top:.8rem; color:#0f766e; font-weight:800; }
@media(max-width:900px){.trip-finder-results{grid-template-columns:1fr}.trip-finder-form{grid-template-columns:1fr}.trip-finder-submit{grid-column:auto}}

.day-planner { margin:0 0 2rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid #d9e7e3; border-radius:22px; background:white; box-shadow:0 10px 30px rgb(15 23 42 / .08); }
.day-planner[hidden] { display:none; }
.day-planner-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.day-planner-eyebrow { color:#0f766e; font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.day-planner h2 { margin:.15rem 0 0; font-size:clamp(1.6rem,4vw,2.2rem); }
.day-planner-header label { display:flex; align-items:center; gap:.65rem; font-weight:800; }
.day-planner-header input { min-height:44px; padding:.5rem .7rem; border:1px solid #cbd5e1; border-radius:9px; font:inherit; }
.day-plan-items { display:grid; gap:.75rem; }
.day-plan-item { display:grid; grid-template-columns:145px 1fr auto; align-items:center; gap:1rem; padding:1rem; border-radius:14px; background:#f8fafc; border-left:5px solid #0f766e; }
.day-plan-time { display:flex; flex-direction:column; color:#0f766e; }
.day-plan-time span { color:#64748b; font-size:.82rem; font-weight:750; }
.day-plan-item h3 { margin:0; }
.day-plan-item p { margin:.25rem 0 0; color:#64748b; }
.day-plan-remove { border:0; background:transparent; color:#b91c1c; font-weight:800; cursor:pointer; }
.day-plan-item-actions { display:flex; align-items:center; justify-content:flex-end; gap:.3rem; }
.day-plan-item-actions button { min-width:36px; min-height:36px; border:1px solid #cbd5e1; border-radius:8px; background:white; color:#334155; font:inherit; font-weight:850; cursor:pointer; }
.day-plan-item-actions button:disabled { opacity:.35; cursor:default; }
.day-plan-item-actions .day-plan-remove { width:auto; padding:0 .55rem; border-color:#fecaca; color:#b91c1c; }
.day-plan-summary { margin-top:1rem; padding:1rem; border-radius:12px; background:#eef7f5; color:#334155; }
.day-plan-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.day-plan-actions button { min-height:44px; padding:.65rem 1rem; border:0; border-radius:999px; background:#0f766e; color:white; font-weight:850; cursor:pointer; }
.day-plan-actions button:last-child { background:#e2e8f0; color:#334155; }
.day-plan-actions button:disabled { opacity:.45; cursor:not-allowed; }
#day-plan-message { margin:.65rem 0 0; color:#0f766e; font-weight:750; }
@media(max-width:700px){.day-planner-header{align-items:flex-start;flex-direction:column}.day-plan-item{grid-template-columns:1fr}.day-plan-item-actions{justify-content:flex-start}}

@media(max-width:640px){
  .trip-finder-disclosure{margin:.75rem 0 1rem}
  .trip-finder-disclosure > summary{min-height:58px;padding:.8rem 1rem;gap:.55rem}
  .trip-finder-disclosure > summary strong{font-size:.95rem}
  .trip-finder-disclosure > summary span:last-child{font-size:.76rem}
  .trip-finder{padding:1rem}
  .trip-finder-intro p{margin-bottom:1rem}
  .trip-field{padding:.8rem}
  .guide-count{margin:.85rem 0}
  .destinations-grid{gap:1rem}
  .card-image{height:145px}
}