/* MapATrip - Custom Styles */

/* ---------- Farbe (data-theme, fest Petrol) und dunkler Modus (data-bs-theme) ----------
   Gesetzt von js/theme.js auf <html>. Die Farbe ist Corporate Identity und nicht mehr wählbar (27.10.2026). */
:root,
[data-theme="teal"] { --mt-primary: #0f766e; --mt-primary-rgb: 15, 118, 110; }
:root {
    --mt-primary-hover: color-mix(in srgb, var(--mt-primary) 85%, #000);
    --mt-primary-active: color-mix(in srgb, var(--mt-primary) 75%, #000);
    --mt-link: var(--mt-primary);
    --mt-navbar: var(--mt-primary);
    --mt-page-bg: #f8f9fa;
    --mt-surface: #fff;
    --mt-surface-2: #f1f3f5;
    --mt-hover: #e9ecef;
    --mt-glass: rgba(255, 255, 255, 0.82);

    /* Bootstrap auf das Schema umstellen */
    --bs-primary: var(--mt-primary);
    --bs-primary-rgb: var(--mt-primary-rgb);
    --bs-link-color: var(--mt-link);
    --bs-link-color-rgb: var(--mt-primary-rgb);
    --bs-link-hover-color: var(--mt-primary-hover);
    --bs-link-hover-color-rgb: var(--mt-primary-rgb);
}

/* Dunkel: dunkler Hintergrund, weiße Schrift (Bootstrap 5.3 färbt seine Bausteine selbst um) */
[data-bs-theme="dark"] {
    --mt-link: color-mix(in srgb, var(--mt-primary) 55%, #fff);
    --mt-navbar: color-mix(in srgb, var(--mt-primary) 70%, #000);
    --mt-page-bg: #121416;
    --mt-surface: #1f2327;
    --mt-surface-2: #2a2f34;
    --mt-hover: #343a40;
    --mt-glass: rgba(31, 35, 39, 0.86);
    --bs-body-color: #f8f9fa;
    --bs-body-color-rgb: 248, 249, 250;
    --bs-body-bg: #1f2327;
    --bs-secondary-color: rgba(248, 249, 250, 0.7);
    --bs-border-color: #3d444b;
}

a {
    color: var(--mt-link);
}

.btn-primary {
    --bs-btn-bg: var(--mt-primary);
    --bs-btn-border-color: var(--mt-primary);
    --bs-btn-hover-bg: var(--mt-primary-hover);
    --bs-btn-hover-border-color: var(--mt-primary-hover);
    --bs-btn-active-bg: var(--mt-primary-active);
    --bs-btn-active-border-color: var(--mt-primary-active);
    --bs-btn-disabled-bg: var(--mt-primary);
    --bs-btn-disabled-border-color: var(--mt-primary);
    --bs-btn-focus-shadow-rgb: var(--mt-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--mt-link);
    --bs-btn-border-color: var(--mt-link);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mt-primary);
    --bs-btn-hover-border-color: var(--mt-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mt-primary-active);
    --bs-btn-active-border-color: var(--mt-primary-active);
    --bs-btn-disabled-color: var(--mt-link);
    --bs-btn-disabled-border-color: var(--mt-link);
    --bs-btn-focus-shadow-rgb: var(--mt-primary-rgb);
}

.btn-link {
    --bs-btn-color: var(--mt-link);
    --bs-btn-hover-color: var(--mt-link);
    --bs-btn-active-color: var(--mt-link);
}

.form-check-input:checked {
    background-color: var(--mt-primary);
    border-color: var(--mt-primary);
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--mt-primary) 50%, #fff);
    box-shadow: 0 0 0 0.25rem rgba(var(--mt-primary-rgb), 0.25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--mt-primary);
}

[data-bs-theme="dark"] .text-primary {
    color: var(--mt-link) !important;
}

/* Karte im dunklen Modus: Kacheln abdunkeln (Farben der Nadeln bleiben), Popups dunkel */
[data-bs-theme="dark"]:not([data-light-map]) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

[data-bs-theme="dark"] .leaflet-container {
    background-color: #2b2f33;
}

[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background: var(--mt-surface);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .leaflet-bar a {
    background-color: var(--mt-surface-2);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .leaflet-control-attribution {
    background: rgba(31, 35, 39, 0.8) !important;
    color: var(--bs-secondary-color);
}

/* Allgemeine Stile */
body {
    background-color: var(--mt-page-bg);
    font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Logo und Überschriften in Baloo 2, Text in Nunito (lib/fonts, selbst ausgeliefert) */
h1, h2, h3, .navbar-brand, .home-kicker, .home-section-kicker, .home-final-kicker {
    font-family: 'Baloo 2', 'Nunito', 'Segoe UI', sans-serif;
}

/* Navigationsleiste */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--mt-navbar) !important;
}

.navbar-brand {
    font-weight: 700;
    color: white !important;
}

.navbar-toggler {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Seitenlayout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Neuigkeiten nach der Anmeldung (NewsHost) und in der Hilfe */
.news-list {
    padding-left: 1.2rem;
}

.news-list li + li {
    margin-top: 0.6rem;
}

/* Newsletter (Verwalter): Deutsch und Englisch nebeneinander, wenn Platz ist */
.newsletter-languages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.newsletter-body {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
}

/* Seitenfuß mit Impressum und Datenschutz */
.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 1rem 1rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.app-footer a {
    color: var(--bs-secondary-color);
}

/* Copyright in eigener Zeile unter den Links */
.app-footer-copyright {
    flex-basis: 100%;
    text-align: center;
}

.app-footer a:hover {
    color: var(--bs-body-color);
}

/* Impressum und Datenschutzerklärung */
.legal-page h2 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
}

.legal-page h3 {
    font-size: 1rem;
    margin-top: 1rem;
}

/* Karten-Stile */
.card {
    border: none;
    /* Weicher Schatten für einen Höheneffekt (todo 9) */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: var(--mt-surface);
}

.card-header {
    border-radius: 10px 10px 0 0 !important;
    background-color: var(--mt-primary);
    color: white;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* Tabellen */
.table {
    margin-bottom: 0;
}

.table th {
    border-top: none;
}

.table td {
    vertical-align: middle;
}

/* Buttons: rund (Pillenform); in Eingabe- und Knopfgruppen bleiben die inneren Ecken gerade (Bootstrap) */
.btn {
    border-radius: 50rem;
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* Formulare */
.form-control,
.form-select {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--mt-primary) 50%, #fff);
    box-shadow: 0 0 0 0.25rem rgba(var(--mt-primary-rgb), 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Alerts */
.alert {
    border-radius: 5px;
    border: none;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Badges */
.badge {
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
}

/* Abstände */
.mt-4 {
    margin-top: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

/* Karte (Leaflet) */
#map,
#poiMap,
#editMap,
.map-canvas {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    width: 100%;
}

.leaflet-container {
    background-color: #f8f9fa;
}

.leaflet-popup-content {
    margin: 13px 19px;
}

.leaflet-popup-content-wrapper {
    border-radius: 5px;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .navbar-nav {
        padding-left: 15px;
    }
    
    .card-body {
        padding: 1rem;
    }

    .display-4 {
        font-size: 2.5rem;
    }
}

/* Scrollbar für Tabellen */
.table-responsive {
    max-height: 500px;
    overflow-y: auto;
}

/* Hover-Effekte für Tabellenzeilen */
.table-hover tbody tr:hover {
    background-color: rgba(var(--mt-primary-rgb), 0.1);
}

/* Shadow für Karten */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Icons in Buttons */
.btn i,
.nav-link i {
    margin-right: 5px;
}

/* Knöpfe nur mit Symbol: ohne den Abstand dahinter, damit das Symbol in der Mitte sitzt */
.btn-icon i {
    margin-right: 0;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.container-fluid {
    padding: 0 15px;
}

/* Flexbox Utilities */
.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1rem;
}

.py-5 {
    padding: 3rem 0;
}

/* Card Deck */
.card-deck {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .card-deck {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card-deck .card {
        flex: 1 0 0%;
        margin-bottom: 1rem;
    }
}

/* Form Check */
.form-check {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
}

.form-check-input {
    margin-left: -1.25rem;
    margin-right: 0.5rem;
}

.form-check.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input {
    margin-left: -2.5em;
    margin-top: 0;
}

/* Nav Link */
.nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.nav-link:hover {
    color: white;
    text-decoration: none;
}

.nav-link.active {
    color: white;
    font-weight: 500;
}

/* Top Row */
.top-row {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    z-index: 1000;
}

.top-row a {
    color: #6c757d;
    text-decoration: none;
    margin-right: 1rem;
}

.top-row a:hover {
    color: #495057;
}

/* Sidebar (umschließt die Kopfzeile) */
/* Die Kopfzeile bleibt beim Scrollen oben stehen; über der Karte (Leaflet bis 1000), unter Dialogen (Bootstrap ab 1050) */
.sidebar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--mt-navbar);
    color: white;
    min-height: 60px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sprungziele nicht unter der stehenden Kopfzeile verstecken */
html {
    scroll-padding-top: 5.5rem;
}

/* Content Area */
.content {
    padding: 1rem;
    flex: 1;
}

/* Error UI */
#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-top: 1px solid #dc3545;
    color: #721c24;
    z-index: 10000;
    display: none; /* Blazor blendet die Leiste nur bei einem echten Fehler ein */
}

#blazor-error-ui a {
    color: #dc3545;
    text-decoration: underline;
    margin-left: 1rem;
    cursor: pointer;
}

#blazor-error-ui a.reload {
    margin-right: 1rem;
}

/* Loading Indicator */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Data Tables */
.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

/* Responsive Table */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* POI-Typen: farbige Abzeichen und Kartenmarker mit Symbol */
.poi-type-badge {
    font-weight: 500;
    color: #fff;
}

.poi-type-badge i {
    margin-right: 0.25em;
}

.poi-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.poi-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 13px;
}

/* Eigenes Symbol (todo 88): Bild rund in der Nadel, die Typfarbe bleibt als Rand */
.poi-pin.poi-pin-image {
    padding: 2px;
}

.poi-pin.poi-pin-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: rotate(45deg);
    display: block;
    background: #fff;
}

.poi-icon-image {
    display: inline-block;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid;
    overflow: hidden;
    background: var(--mt-surface-2);
}

.poi-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bild als Symbol wählen (POI-Ansicht) */
.image-tile-wrap {
    position: relative;
}

.image-icon-toggle {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    color: var(--bs-secondary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.image-icon-toggle.active {
    background: var(--mt-primary);
    color: #fff;
}

/* Besuchter POI: grünes Häkchen oben auf der Nadel */
.poi-pin.visited {
    position: relative;
}

.poi-pin.visited::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    background: #2e7d32;
    color: #fff;
    font-size: 8px;
    line-height: 13px;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.poi-legend .badge {
    margin: 0 0.35em 0.35em 0;
}

/* Typauswahl als Kacheln */
.poi-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

/* Alle Kacheln in der Hauptfarbe statt in der Farbe ihres Typs (todo 121) */
.poi-type-tile {
    --poi-color: rgb(var(--mt-primary-rgb));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 2px solid var(--poi-color);
    border-radius: 0.5rem;
    background: var(--mt-surface);
    color: var(--poi-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.poi-type-tile i {
    width: 1.1em;
    text-align: center;
}

.poi-type-tile:hover {
    background: color-mix(in srgb, var(--poi-color) 10%, var(--mt-surface));
}

.poi-type-tile.selected {
    background: var(--poi-color);
    color: #fff;
}

.poi-type-tile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--poi-color) 45%, transparent);
    outline-offset: 2px;
}

.required-mark {
    color: #dc3545;
}

/* Flaggen (flag-icons) */
.flag {
    margin-left: 0.3em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Sprachauswahl in der Kopfzeile */
.language-menu {
    position: relative;
}

.language-toggle .flag {
    margin-left: 0;
    margin-right: 0.35em;
}

.language-list {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1100;
    min-width: 11rem;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--mt-surface);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 1rem;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    text-align: left;
}

.language-option .flag {
    margin-left: 0;
}

.language-option:hover,
.language-option.active {
    background: var(--mt-hover);
}

/* Anzahl in den Filtern der Übersicht */
.poi-filter-count {
    min-width: 1.4em;
    padding: 0 0.35em;
    border-radius: 1em;
    background: color-mix(in srgb, var(--poi-color) 15%, var(--mt-surface));
    color: var(--poi-color);
    font-size: 0.8em;
    text-align: center;
}

/* Infofenster auf der Karte (todo 108): Text links, Foto rechts daneben */
/* „Zurück zur vorherigen Ansicht“ nach dem Heranzoomen auf einen POI (unten links auf der Karte) */
.map-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: none;
    border-radius: 2rem;
    background: var(--mt-primary);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.map-back-button:hover {
    background: var(--mt-primary-hover);
}

.map-popup {
    min-width: min(200px, 100%);
}

.map-popup-main {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.map-popup-text {
    flex: 1 1 auto;
    min-width: 0;
}

.map-popup-text h6 {
    margin-bottom: .2rem;
    padding-right: .6rem;   /* Platz für das Schließen-Kreuz */
}

.map-popup-text p {
    margin: 0 0 .25rem;
}

.map-popup-type {
    color: var(--bs-secondary-color);
    font-size: .85em;
}

.map-popup-notes {
    overflow-wrap: anywhere;
}

.map-popup-image {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 1.1rem;   /* unter dem Schließen-Kreuz */
}

/* Bilder */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.image-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--mt-surface-2);
    border: 3px solid transparent;
}

/* Ganzes Bild im Verhältnis zeigen (Hoch- und Querformat), nicht beschneiden */
.image-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.image-tile.selectable {
    cursor: pointer;
    padding: 0;
}

.image-tile.selectable:not(.selected) img {
    opacity: 0.55;
}

.image-tile.selected {
    border-color: var(--mt-primary);
}

.image-tile .image-check,
.image-tile .image-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
}

.image-tile .image-check {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #fff;
    color: var(--mt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.image-tile:not(.selected) .image-check i {
    visibility: hidden;
}

.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.image-viewer img {
    max-width: 95vw;
    max-height: 90vh;
}

/* Typauswahl als Klappliste */
.poi-type-select {
    position: relative;
    display: inline-block;
}

.poi-type-select-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--mt-surface);
}

.poi-type-select-list {
    position: absolute;
    right: 0;
    z-index: 1060;
    min-width: 100%;
    margin: 0.2rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--mt-surface);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.poi-type-select-list li {
    padding: 0.2rem 0.35rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.poi-type-select-list li:hover,
.poi-type-select-list li.active {
    background: var(--mt-hover);
}

/* Startseite: Foto der Amalfiküste (Positano, Unsplash) als Hintergrund; auf schmalen Bildschirmen ein Hochformat-Ausschnitt */
.home-hero {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1rem;
    border-radius: 1rem;
    background: #1d4e5a url("../img/home-hero-foto.webp") 75% center / cover no-repeat;
    background-image: linear-gradient(90deg, rgba(6, 30, 40, 0.7) 0%, rgba(6, 30, 40, 0.4) 45%, rgba(6, 30, 40, 0) 65%), url("../img/home-hero-foto.webp");
    text-align: center;
}

[data-bs-theme="dark"] .home-hero {
    background-color: #0f2423;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.3) 65%), url("../img/home-hero-foto.webp");
}

@media (max-width: 900px) {
    .home-hero {
        background-image: linear-gradient(rgba(6, 30, 40, 0.65), rgba(6, 30, 40, 0.45) 60%, rgba(6, 30, 40, 0.25)), url("../img/home-hero-foto-klein.webp");
    }

    [data-bs-theme="dark"] .home-hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url("../img/home-hero-foto-klein.webp");
    }
}

.home-hero-content {
    background: var(--mt-glass);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(var(--mt-primary-rgb), 0.12);
}

.home-hero-content {
    max-width: 760px;
    padding: 2.5rem 2rem;
}

/* ---------- Startseite (Index.razor): erzählt vor der Anmeldung, was MapATrip ist ---------- */
.home {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 2rem;
}

.home-hero.home-hero-split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 560px;
    text-align: left;
    gap: 2.5rem;
    padding: 3.5rem 2rem;
}

/* Weiße Schrift direkt auf dem abgedunkelten Foto, ohne Kasten */
.home-hero-split .home-hero-content {
    flex: 1 1 380px;
    max-width: 560px;
    padding: 1rem 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.home-hero-split h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.6rem);
    line-height: 1.1;
}

.home-hero-split h1,
.home-hero-split .lead,
.home-hero-split .home-trust,
.home-hero-split .home-trust i {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.home-hero-buttons .btn-lg {
    padding: 0.75rem 1.6rem;
}

.home-hero-buttons .btn-outline-primary {
    color: #fff;
    border-color: #fff;
}

.home-hero-buttons .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.home-kicker,
.home-section-kicker,
.home-final-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-kicker {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 50rem;
    margin-bottom: 1rem;
}

.home-section-kicker {
    display: block;
    text-align: center;
    color: var(--mt-primary);
    margin-bottom: 0.3rem;
}

.home-final-kicker {
    opacity: 0.9;
    margin-bottom: 0.4rem;
}

.home-accent {
    color: #5eead4;
}

/* Vorschau rechts mit dem zufälligen Ort aus der Beispielliste; die Kachel steht rechts und unten gleich weit über */
.home-hero-visual {
    position: relative;
    flex: 1 1 380px;
    max-width: 440px;
}

.home-hero-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3);
}

.home-been-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    max-width: 640px;
    margin: 0 auto;
    padding: 7px;
    background: var(--mt-surface);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.home-been-card:hover {
    color: inherit;
}

/* Auf dem Titelbild leicht durchscheinend wie die Vorschau */
.home-been-wide .home-been-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
}

[data-bs-theme="dark"] .home-been-wide .home-been-card {
    background: rgba(20, 30, 32, 0.78);
}

/* Leere Kachel, solange der Ort lädt; erst nach kurzer Zeit sichtbar, meist ist die Kachel bis dahin schon da */
.home-been-empty {
    display: block;
    min-height: 300px;
    animation: home-been-wait 0.2s 0.6s both;
}

@keyframes home-been-wait {
    from { opacity: 0; }
    to { opacity: 1; }
}

.home-been-wide .home-been-empty {
    min-height: 170px;
}

.home-been-card img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    border-radius: 0.6rem;
}

/* Ort ohne Foto: Symbol des Typs auf seiner Farbe */
.home-been-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    border-radius: 0.6rem;
    color: #fff;
    background: var(--bs-primary);
    font-size: 2.5rem;
}

.home-been-body {
    padding: 0.9rem 1.1rem;
}

.home-been-body h3 {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0.1rem 0 0.1rem;
}

.home-been-place {
    color: var(--bs-secondary-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.home-been-body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}


.home-been-cta {
    display: inline-block;
    margin-top: 0.7rem;
    font-weight: 700;
    color: var(--mt-link);
}

.home-been-wide,
.home-note-been,
.home-note-arrow,
.home-note-steps {
    display: none;
}

.home-been-narrow {
    margin-top: -1rem;
    text-align: center;
}

/* Handschriftliche Hinweise (Kalam) */
.home-note {
    font-family: 'Kalam', cursive;
    font-size: 1.65rem;
    line-height: 1.15;
    color: var(--mt-primary);
    transform: rotate(-7deg);
    white-space: pre-line;
    pointer-events: none;
    margin: 0 0 0.75rem;
}

/* Schmaler als 1000 px stehen die Hinweise einzeilig über ihrem Abschnitt; die Drehung braucht oben und unten Platz */
@media (max-width: 999.98px) {
    .home-note {
        white-space: normal;
        margin: 1rem 0 1.75rem;
    }
}

.home-note-light {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home-note-down {
    transform: rotate(6deg);
}

@media (min-width: 1000px) {
    .home-hero-visual {
        margin: 0 4.6rem 4.6rem 0;
    }

    .home-been-wide {
        display: block;
        position: absolute;
        right: -4.6rem;
        bottom: -4.6rem;
        width: 360px;
        z-index: 2;
    }

    .home-been-wide .home-been-card {
        grid-template-columns: 118px 1fr;
        box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.5);
    }

    .home-been-wide .home-been-body {
        padding: 0.55rem 0.8rem;
    }

    .home-been-wide .home-been-body h3 {
        font-size: 1.35rem;
        margin: 0 0 0;
    }

    .home-been-wide .home-been-place {
        font-size: 0.78rem;
        margin-bottom: 0.25rem;
    }

    .home-been-wide .home-been-body p {
        -webkit-line-clamp: 7;
        line-clamp: 7;
        font-size: 0.7rem;
        line-height: 1.35;
        margin-bottom: 0.3rem;
    }


    .home-been-wide .home-been-cta {
        font-size: 0.72rem;
        margin-top: 0.3rem;
    }

    .home-been-narrow,
    .home-note-mobile {
        display: none;
    }

    .home-note-been {
        display: block;
        position: absolute;
        top: -3.6rem;
        right: 2.5rem;
        white-space: nowrap;
    }

    .home-note-arrow {
        display: block;
        position: absolute;
        top: -2.6rem;
        right: -2.9rem;
        width: 143px;
        height: 220px;
        transform: rotate(7deg);
        fill: none;
        stroke: #fff;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        z-index: 3;
    }

    #homeSteps {
        position: relative;
    }

    .home-note-steps {
        display: block;
        position: absolute;
        top: -0.3rem;
        left: calc(50% - 400px);
    }

    .home-trip-visual .home-note-trips {
        position: absolute;
        top: -5.2rem;
        right: 3.5rem;
    }

    .home-final .home-note-share {
        position: absolute;
        top: 6rem;
        right: max(1.5rem, calc(50vw - 540px));
        margin: 0;
        text-align: right;
    }
}

.home-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.home-trust i {
    color: var(--mt-primary);
    margin-right: 0.3rem;
}

/* Gezeichnete Vorschau der Übersicht (kein Screenshot, damit sie zu jedem Farbschema passt) */
.home-preview {
    flex: 1 1 380px;
    max-width: 520px;
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--mt-surface);
    text-align: left;
    box-shadow: 0 1.25rem 3rem rgba(var(--mt-primary-rgb), 0.25);
}

.home-preview-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--mt-navbar);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.home-preview-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    min-height: 260px;
}

.home-preview-map {
    position: relative;
    background: #d8efe9 url("../img/home-hero.svg") 35% 40% / 260% no-repeat;
}

.home-preview-pin {
    position: absolute;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-preview-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.7rem;
}

.home-preview-list {
    list-style: none;
    margin: 0;
    padding: 0.6rem;
    font-size: 0.8rem;
    border-left: 1px solid var(--bs-border-color);
}

.home-preview-list li {
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.home-preview-list li:last-child {
    border-bottom: 0;
}

.home-preview-list .dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.home-preview-list small {
    display: block;
    color: var(--bs-secondary-color);
    margin-left: 0.95rem;
}

.home-section {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.home-section > h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.home-section > .home-section-lead {
    text-align: center;
    color: var(--bs-secondary-color);
    margin-bottom: 1.75rem;
}

.home-steps,
.home-prices {
    display: grid;
    gap: 1rem;
}

.home-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.home-prices { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }

.home-card {
    background: var(--mt-surface);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.06);
}

.home-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--mt-primary);
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.home-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
}

.home-feature h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0.8rem 0 0.4rem;
}

.home-feature p {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    margin: 0;
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--mt-primary);
    color: #fff;
    font-size: 1.15rem;
}

.home-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.home-card p {
    margin-bottom: 0;
    color: var(--bs-secondary-color);
}

.home-card .home-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mt-link);
    margin: 0.25rem 0;
}

.home-price-amount span {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.home-card.home-price-recommended {
    border: 2px solid var(--mt-primary);
}

.home-card ul {
    padding-left: 1.1rem;
    margin: 0.75rem 0 0;
}

.home-faq {
    max-width: 760px;
    margin: 0 auto;
}

.home-faq details {
    background: var(--mt-surface);
    border-radius: 0.75rem;
    padding: 0.9rem 1.2rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
}

.home-faq summary {
    font-weight: 600;
    cursor: pointer;
}

.home-faq details p {
    margin: 0.6rem 0 0;
    color: var(--bs-secondary-color);
}

/* Startseite: Schatzkarte hinter dem Inhalt bis an die Kopfzeile, Titelbild und Küstenfoto liegen darüber.
   home-karte.webp ist eine Doppelkachel 2048 x 1024 (rechte Hälfte um eine halbe Höhe versetzt), so wiederholt sie sich
   nahtlos mit 50 % Versatz (Entwurf: project-files entwuerfe/schatzkarte/schatzkarte.py) */
article.content:has(.home-map) {
    background: #f9f5ec url("../img/home-karte.webp") center top / 2048px 1024px repeat;
}

[data-bs-theme="dark"] article.content:has(.home-map) {
    background-image: linear-gradient(rgba(18, 20, 22, 0.86), rgba(18, 20, 22, 0.86)), url("../img/home-karte.webp");
}

@media (max-width: 640px) {
    article.content:has(.home-map) {
        background-size: 1536px 768px;
    }
}

.home-map {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 0.5rem;
}

/* Abschlussband: Foto einer Küste mit Strand in voller Breite, die Fußzeile liegt unten mit auf dem Foto */
.home {
    padding-bottom: 0;
}

.home-final {
    position: relative;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45)), var(--mt-primary) url("../img/home-final-foto.webp") center 40% / cover no-repeat;
    color: #fff;
    margin: 0 calc(50% - 50vw) -1px;
    padding: 6rem 1.5rem 9rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.home-final h2 {
    font-weight: 700;
}

.home-final .btn {
    text-shadow: none;
}

.home-final .home-note-share {
    margin: 3rem 0 0;
}

/* Linksbündig (Tablet): um das linke Ende drehen, damit der Anfang nicht an den Knopf stößt */
@media (min-width: 641px) and (max-width: 999.98px) {
    .home-final .home-note-share {
        transform-origin: left center;
    }
}

.page:has(.home-final) {
    overflow-x: clip;
}

.page:has(.home-final) .app-footer {
    position: relative;
    z-index: 1;
    margin-top: -5.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.page:has(.home-final) .app-footer a {
    color: #fff;
}

@media (min-width: 641px) {
    .home-final {
        text-align: left;
        padding-left: max(1.5rem, calc(50vw - 540px));
    }
}

@media (max-width: 900px) {
    .home-final {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45)), url("../img/home-final-foto-klein.webp");
    }
}

@media (max-width: 640px) {
    .home-hero.home-hero-split { padding: 2rem 1rem; text-align: center; min-height: 0; }
    .home-note { font-size: 1.3rem; white-space: normal; }
    .home-been-card { grid-template-columns: 1fr; }
    .home-been-card img { height: 180px; }
    .home-final { padding-bottom: 12rem; }
    .page:has(.home-final) .app-footer { margin-top: -8.5rem; }
    .home-trust,
    .home-hero-buttons { justify-content: center; }
    .home-preview-body { grid-template-columns: 1fr; }
    .home-preview-map { min-height: 170px; }
    .home-preview-list { border-left: 0; border-top: 1px solid var(--bs-border-color); }
}

/*
 * Die Übersicht füllt den Platz zwischen Kopf- und Fußzeile, statt mit festen Abständen zu rechnen;
 * so bleibt die Fußzeile in jedem Browser sichtbar (todo 10).
 */
article.content:has(.overview) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.overview-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Besuche auf der POI-Seite */
.visit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.visit-list li {
    padding: 0.2rem 0;
}

.visit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 560px;
}

.visit-form #visitDate {
    width: 10.5rem;
}

.visit-form #visitNote {
    flex: 1 1 12rem;
    width: auto;
}

.visit-edit .visit-edit-date {
    width: 10.5rem;
}

.visit-edit .visit-edit-note {
    flex: 1 1 12rem;
    width: auto;
}

/* Übersicht: große Karte links, POI-Liste rechts daneben */
.overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}

.overview #map,
.overview .map-canvas {
    height: 60vh;
    min-height: 320px;
}

.overview-list {
    display: flex;
    flex-direction: column;
}

/* Breite Fenster: Seite genau so hoch wie das Fenster, Karte und Liste teilen sich den Rest */
@media (min-width: 992px) {
    .page:has(.overview) {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }

    .page:has(.overview) main {
        min-height: 0;
    }

    article.content:has(.overview) {
        overflow-y: auto;
    }

    .overview {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch;
    }

    .overview-map,
    .overview-map .card-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .overview-map .card-body {
        flex: 1 1 auto;
    }

    .overview #map,
.overview .map-canvas {
        flex: 1 1 auto;
        height: auto;
        min-height: 280px;
    }

    .overview-list {
        min-height: 0;
    }
}

.overview-list .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}


/* Karte und Liste als eine Box mit gemeinsamer Titelzeile in der Schemafarbe: über der Karte die Filter (nur Übersicht),
   über der Liste wie bisher Titel und Schalter. Nebeneinander ohne Abstand und Linie, untereinander zwei runde Karten. */
.overview:has(.overview-map-header) > .card {
    box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.08);
}

.overview:has(.overview-map-header) > .overview-map > .card-body {
    padding: 0;
}

.overview-map > .overview-map-header {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    background-color: var(--mt-primary);
    color: #fff;
}

.overview:has(.overview-map-header) > .card > .card-header {
    flex-shrink: 0; /* lange Listen dürfen die Titelzeile nicht zusammendrücken */
    box-sizing: border-box;
    min-height: 3.4rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 0;
}

.overview-map-header {
    container-type: inline-size;
}

.overview-map-header .map-toolbar,
.overview-map-header .map-filters {
    flex-wrap: nowrap;
}

.overview-map-header .map-toolbar {
    width: 100%;
    margin: 0;
}

/* Die Titelzeile ist immer genau eine Zeile: wird sie zu schmal, zeigen erst die langen Schalter, dann alle Schalter
   und zuletzt die Filter nur ihr Symbol (der Text steht im Tooltip) */
@container (max-width: 60rem) {
    #saveMapView .map-option-text,
    #fitMap .map-option-text {
        display: none;
    }
}

@container (max-width: 44rem) {
    .map-option-text {
        display: none;
    }

    .map-option-button i {
        margin-right: 0;
    }
}

@container (max-width: 34rem) {
    .filter-menu-label {
        display: none;
    }
}

.overview-map-header .filter-menu-button {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

/* Auch gefiltert bleibt der Knopf hohl; nur das Symbol zeigt den Zustand */
.overview-map-header .filter-menu-button.filtered {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
}

.overview-map-header .filter-menu-button:hover,
.overview-map-header .filter-menu.open .filter-menu-button {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.overview-map-header .filter-menu-button > .fas:first-child,
.overview-map-header .filter-menu-button > .fa-solid {
    color: #fff;
}

/* Filter wie die Schalter daneben: hohles Filtersymbol = nichts ausgefiltert, ausgefülltes = Typen oder Länder
   gefiltert. Der Besuchsfilter zeigt stattdessen das Symbol der gewählten Option. */
#poiFilter .filter-menu-button:not(.filtered) > .fas:first-child {
    color: transparent;
    -webkit-text-stroke: 1.3px #fff;
}

/* In der Titelzeile öffnet die Auswahl nach unten über die Karte, der Pfeil zeigt entsprechend */
.overview-map-header .filter-menu-panel {
    top: calc(100% + 0.4rem);
    bottom: auto;
    color: var(--bs-body-color);
}

.overview-map-header .filter-menu-caret {
    transform: rotate(180deg);
}

.overview-map-header .filter-menu.open .filter-menu-caret {
    transform: none;
}

.overview-map-header .map-options,
.overview-map-header .map-options > * {
    color: #fff;
}

.overview-map-header .map-option-button {
    border: 0;
    padding: 0.2rem 0.3rem;
    color: #fff;
}

.overview-map-header .map-options .form-check-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.75);
}

.overview-map-header .map-options .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
}

.overview:has(.overview-map-header) #map,
.overview:has(.overview-map-header) .map-canvas {
    border: 0;
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}

.overview-map > .card-body > .map-hint {
    margin: 0.4rem 0.75rem 0.6rem;
}

@media (min-width: 992px) {
    .overview:has(.overview-map-header) {
        gap: 0;
        border-radius: var(--bs-card-border-radius);
        box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.08);
    }

    .overview:has(.overview-map-header) > .card {
        border: 0;
        box-shadow: none;
    }

    .overview:has(.overview-map-header) > .overview-map {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .overview:has(.overview-map-header) > .overview-list {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .overview:has(.overview-map-header) > .card > .card-header {
        height: 3.4rem;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0 !important; /* .card-header rundet sonst mit !important beide oberen Ecken */
    }

    .overview:has(.overview-map-header) > .overview-map > .card-header {
        border-top-left-radius: 10px !important;
    }

    .overview:has(.overview-map-header) > .overview-list > .card-header {
        border-top-right-radius: 10px !important;
    }

    .overview:has(.overview-map-header) #map,
    .overview:has(.overview-map-header) .map-canvas {
        border-radius: 0 0 0 var(--bs-card-border-radius);
    }
}
.poi-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
}

.poi-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    text-align: left;
}

.poi-list-item:hover {
    background: rgba(var(--mt-primary-rgb), 0.08);
}

.poi-list-item.active {
    background: rgba(var(--mt-primary-rgb), 0.16);
}

.poi-list-name {
    flex: 1 1 auto;
    min-width: 0;
}

.poi-list-item .poi-type-badge {
    flex-shrink: 0;
}

/* Übersicht: Stift zum Bearbeiten erst beim gewählten POI (todo 114) */
.poi-list-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.poi-list-row .poi-list-item {
    flex: 1 1 auto;
    min-width: 0;
}

.poi-list-edit {
    display: none;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.poi-list-item.active + .poi-list-edit {
    display: inline-flex;
    align-items: center;
}

/* Symbol vor dem Listentitel klappt die Liste ein und aus, nur wenn sie unter der Karte steht (todo 67) */
.list-toggle {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    pointer-events: none;
}

.list-toggle-caret {
    display: none;
    width: 0.7em;
}

/* Reise (todo 86): die Stoppliste hat mehr zu zeigen (Termine, Wege, Tag, Kosten). Sie ist breiter und per Griff
   verstellbar (--list-w, js/map.js enableSplitter); die Karte bleibt mindestens 600 px breit, sonst steht die Liste darunter. */
@media (min-width: 992px) {
    .overview.trip-overview {
        position: relative;
        grid-template-columns: minmax(0, 1fr) minmax(360px, var(--list-w, 560px));
    }

    .overview.trip-overview:not(.splitter-on) {
        grid-template-columns: minmax(0, 1fr) 440px;
    }
}

@media (min-width: 992px) {
    .overview.trip-overview.splitter-stacked {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}

.overview-splitter {
    display: none;
}

.overview.splitter-on > .overview-splitter {
    display: flex;
    position: absolute;
    top: 3.4rem;
    bottom: 0;
    width: 14px;
    z-index: 500;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
}

.overview-splitter::before {
    content: "";
    width: 5px;
    height: 56px;
    border-radius: 999px;
    background: #cbd5d3;
}

.overview-splitter:hover::before,
.overview-splitter.active::before {
    background: var(--mt-primary);
}

/* Aktionen im Balken über der Karte (Reise, Sammlung): weiße Umrisse, Löschen ganz rechts, bei wenig Platz nur Symbole */
.map-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    width: 100%;
}

.map-actions .btn {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    white-space: nowrap;
}

.map-actions .btn:hover,
.map-actions .btn:focus-visible,
.map-actions .map-menu.open > .btn {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.map-actions .btn:disabled {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.35);
}

.map-actions .btn.map-action-main {
    background: #fff;
    color: var(--mt-primary);
    border-color: #fff;
    font-weight: 700;
}

.map-actions .map-action-danger {
    margin-left: auto;
}

.map-actions .btn > i:first-child {
    margin-right: 0;
}

.map-actions .map-action-text {
    margin-left: 0.35rem;
}

@container (max-width: 40rem) {
    .map-actions .map-action-text {
        display: none;
    }
}

.map-menu {
    position: relative;
}

.map-menu-caret {
    font-size: 0.75em;
}

.map-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.map-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1100;
    min-width: 15rem;
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.map-menu-panel button {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--bs-body-color);
}

.map-menu-panel button:hover {
    background: rgba(var(--mt-primary-rgb), 0.1);
}

.map-menu-panel button > i {
    color: var(--mt-primary);
    width: 1rem;
}

.map-menu-panel small {
    display: block;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .list-toggle {
        pointer-events: auto;
        cursor: pointer;
        padding: 0.15rem 0.35rem;
        margin: -0.15rem 0 -0.15rem -0.35rem;
        border-radius: 0.375rem;
    }

    .list-toggle:hover, .list-toggle:focus-visible {
        background: rgba(255, 255, 255, 0.18);
    }

    .list-toggle-caret {
        display: inline-block;
    }

    .overview-list.list-collapsed > .card-body {
        display: none;
    }

    /* Wenig Platz: aufgeklappt reicht das Symbol als Titel, die Knöpfe passen daneben; zugeklappt nur der Titel */
    .overview-list:not(.list-collapsed) .list-head-title {
        display: none;
    }

    .overview-list.list-collapsed .list-head-action {
        display: none;
    }

    .overview #map,
.overview .map-canvas {
        height: 60vh;
    }
}

/* Knopf "Details" im Kartenpopup: Leaflet färbt Links sonst blau auf blau */
.leaflet-popup-content a.btn-primary {
    color: #fff;
}

/* Blazor setzt nach dem Seitenwechsel den Fokus auf die Überschrift; ohne Rahmen */
h1:focus {
    outline: none;
}

/* ---------- Kopfzeile: MapATrip immer sichtbar; auf schmalen Bildschirmen nur Symbole ---------- */
.app-navbar {
    padding: 0;
    box-shadow: none;
}

.app-navbar-inner {
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.app-navbar .navbar-brand {
    white-space: nowrap;
    margin-right: 0.75rem;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* Logo als Grafik: viewBox in Tausendstel em von Baloo 2, Grundlinie 0,79 em unter der Oberkante */
.brand-logo {
    display: inline-block;
    height: 1.127em;
    width: auto;
    vertical-align: -0.337em;
}

.app-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible,
.app-navbar .nav-link.active {
    color: #fff;
}

.app-navbar .nav-link.active {
    font-weight: 500;
}

.app-navbar .nav-label {
    margin-left: 0.15rem;
}

.user-menu-toggle i {
    margin-right: 0;
    font-size: 1.1rem;
}

.app-navbar .dropdown-menu .dropdown-item i {
    width: 1.25em;
    margin-right: 0.4rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .app-navbar .nav-label,
    .app-navbar .language-code {
        display: none;
    }

    .app-navbar .nav-link {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .app-navbar .nav-link i {
        margin-right: 0;
        font-size: 1.1rem;
    }

    .app-navbar .navbar-nav {
        padding-left: 0;
    }

    .sidebar {
        padding: 0.5rem 0.25rem;
    }
}

/* Neuer POI am Desktop als weißer Knopf rechts neben dem Konto */
.app-navbar .nav-new .nav-link {
    background: #fff;
    color: var(--mt-primary);
    border-radius: 50rem;
    padding: 0.3rem 0.85rem;
    margin-right: 0.35rem;
    font-weight: 700;
}

.app-navbar .nav-new .nav-link:hover,
.app-navbar .nav-new .nav-link:focus-visible,
.app-navbar .nav-new .nav-link.active {
    color: var(--mt-primary-hover);
    background: #fff;
}

/* ---------- Handy und Tablet hochkant (unter 992 px): Seiten in der Leiste unten, oben nur Logo und Konto ---------- */
.bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .app-navbar .nav-main,
    .app-navbar .nav-new {
        display: none;
    }

    /* Kopfzeile etwas flacher, damit die Leiste unten nicht so viel Platz kostet */
    .sidebar {
        min-height: 52px;
        padding: 0.3rem 0.25rem;
    }

    .app-navbar .navbar-brand {
        font-size: 1.6rem;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: flex-end;
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
        background: var(--mt-surface);
        border-top: 1px solid var(--bs-border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    .bottom-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        color: var(--bs-secondary-color);
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .bottom-nav a > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav a > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 1.9rem;
        border-radius: 50rem;
        font-size: 1.2rem;
    }

    .bottom-nav a.active {
        color: var(--mt-primary);
    }

    [data-bs-theme="dark"] .bottom-nav a.active {
        color: var(--mt-link);
    }

    .bottom-nav a.active > i {
        background: rgba(var(--mt-primary-rgb), 0.13);
    }

    /* Neuer POI als runder Knopf, der etwas über die Leiste ragt */
    .bottom-nav a.bottom-nav-new > i {
        width: 3rem;
        height: 3rem;
        margin-top: -1.1rem;
        border-radius: 50%;
        background: var(--mt-primary);
        color: #fff;
        font-size: 1.3rem;
        box-shadow: 0 3px 8px rgba(var(--mt-primary-rgb), 0.4);
    }

    /* Titelzeilen über Karte und Liste etwas flacher */
    .overview:has(.overview-map-header) > .card > .card-header {
        min-height: 2.9rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Bootstrap-Zeilen (.row) ragen mit ihrem Rand ein paar Pixel über px-2 hinaus; dann zoomt der Handy-Browser
       die Seite kleiner und die Leiste unten sitzt tiefer als auf anderen Seiten */
    article.content {
        overflow-x: clip;
    }

    /* Platz unter dem Inhalt, damit die Leiste nichts verdeckt */
    .page:has(.bottom-nav) main {
        padding-bottom: calc(3.9rem + env(safe-area-inset-bottom));
    }
}

/* ---------- Übersicht: eine Zeile unter der Karte, links Filter, rechts Schalter der Karte ---------- */
.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.map-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.map-options {
    display: flex;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-left: auto;
}

.map-options .form-switch {
    min-height: 0;
}

.map-option-button {
    padding: 0.1rem 0.3rem;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.map-option-button:hover {
    text-decoration: underline;
}

.map-option-button i {
    margin-right: 0.15rem;
}

/* Ein/Aus ohne Schieber (todo 109): ausgefülltes Symbol = an, nur Umriss = aus */
.map-toggle:not(.on) i {
    color: transparent;
    -webkit-text-stroke: 1.3px currentColor;
}

.map-toggle:not(.on) {
    opacity: .85;
}

.overview-map-header .map-toggle:not(.on) i {
    -webkit-text-stroke-color: #fff;
}

/* Kleine Bildschirme: Schalter nur mit Symbol (todo 50), der Text steht im Tooltip */
@media (max-width: 767.98px) {
    .map-option-text {
        display: none;
    }

    .map-option-button i {
        margin-right: 0;
    }
}

/* Sehr schmal (Handy): auch die Filter nur mit Symbol, damit alles in eine Zeile passt */
@media (max-width: 575.98px) {
    .filter-menu-label {
        display: none;
    }

    .filter-menu-button {
        padding: 0.3rem 0.65rem;
    }
}

/* Filter als Auswahlliste (todo 47): runder Knopf, die Auswahl öffnet sich darüber auf der Karte */
.filter-menu {
    position: relative;
}

.filter-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--mt-surface, var(--bs-body-bg));
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.filter-menu-button:hover,
.filter-menu.open .filter-menu-button {
    border-color: var(--mt-primary);
}

.filter-menu-button > .fa-solid,
.filter-menu-button > .fas:first-child {
    color: var(--mt-primary);
}

/* Etwas ausgefiltert: Knopf in der Schemafarbe */
.filter-menu-button.filtered {
    border-color: var(--mt-primary);
    background: var(--mt-primary);
    color: #fff;
}

.filter-menu-button.filtered > .fas:first-child {
    color: #fff;
}

.filter-menu-summary {
    padding: 0 0.45em;
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.85);
    color: var(--mt-primary);
    font-size: 0.8em;
}

.filter-menu-caret {
    font-size: 0.7em;
    opacity: 0.7;
    transition: transform 0.15s;
}

.filter-menu.open .filter-menu-caret {
    transform: rotate(180deg);
}

.filter-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.filter-menu-panel {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    z-index: 1100;
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: min(26rem, 60vh);
    overflow-y: auto;
    padding: 0.3rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

/* Gemeinsamer Filter (todo 110): oben die Ebenen Typen und Länder */
.filter-menu-tabs {
    display: flex;
    gap: .35rem;
    padding: .25rem .6rem .45rem;
}

.filter-menu-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: none;
    color: var(--bs-body-color);
    font-size: .9rem;
    white-space: nowrap;
}

.filter-menu-tab.active {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: #fff;
}

.filter-menu-tab-count {
    font-size: .75rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
}

.filter-menu-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 0.6rem 0.2rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.2rem;
}

.filter-menu-actions .btn {
    text-decoration: none;
}

.filter-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.9rem;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    text-align: left;
    cursor: pointer;
}

.filter-menu-item:hover {
    background: var(--mt-hover);
}

.filter-menu-item .form-check-input {
    flex: none;
    margin: 0;
}

.filter-menu-item .flag {
    margin-left: 0;
}

.filter-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--poi-color, var(--mt-primary));
    color: #fff;
    font-size: 0.8rem;
}

.visit-filter-item,
.filter-menu-action {
    --poi-color: #2e7d32;
}

[data-bs-theme="dark"] .visit-filter-item,
[data-bs-theme="dark"] .filter-menu-action {
    --poi-color: #4caf50;
}

.filter-menu-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-menu-item .poi-filter-count {
    background: var(--mt-surface-2);
    color: var(--bs-secondary-color);
}

.overview-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Sortierung und Schalter „Alle“ rechts im Titel der Liste */
.overview-list-tools {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 0.6rem;
}

/* Sortierknopf auf dem farbigen Titel: hohl und weiß wie die Filter über der Karte, nur mit Symbol */
.overview-list-header .filter-menu-button {
    padding: 0.15rem 0.6rem;
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.overview-list-header .filter-menu-button:hover,
.overview-list-header .filter-menu.open .filter-menu-button {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.overview-list-header .filter-menu-button > .fas:first-child {
    color: #fff;
}

.overview-list-header .filter-menu-label,
.overview-list-header .filter-menu-caret {
    display: none;
}

/* Die Auswahl öffnet nach unten über die Liste, rechtsbündig am Rand der Liste (nicht am Knopf), damit sie auch auf
   schmalen Handys ganz im Bild bleibt */
.overview-list-header {
    position: relative;
}

.overview-list-header .filter-menu {
    position: static;
}

.overview-list-header .filter-menu-panel {
    top: calc(100% + 0.2rem);
    bottom: auto;
    left: auto;
    right: 0.5rem;
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    color: var(--bs-body-color);
    font-size: 0.95rem;
}

/* Schalter auf dem farbigen Titel: weiß statt in der Schemafarbe */
.list-scope {
    min-height: 0;
}

/* „x POIs“ links neben dem Listensymbol, so groß wie die Beschriftung „Alle“ */
.overview-list-count {
    margin-right: auto;
    white-space: nowrap;
}

.list-scope .form-check-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.85%29'/%3e%3c/svg%3e");
}

.list-scope .form-check-input:checked {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: #fff;
}

.list-scope .form-check-input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

/* ---------- Einstellungen ---------- */
.profile-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .profile-grid {
        grid-template-columns: 2fr 2fr 1fr;
    }
}

/* E-Mail ist der Anmeldename und nicht änderbar: gesperrt, Schrift heller */
.profile-grid .email-locked {
    color: #8a9199;
    background-color: var(--mt-surface-2);
    cursor: not-allowed;
}

.profile-grid .form-text {
    margin-bottom: 0;
}

/* E-Mail-Adresse ändern: neue Adresse und Passwort nebeneinander, wenn Platz ist */
.email-change-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .email-change-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.appearance-switches {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 0.5rem;
}

.appearance-switches .form-check-input {
    flex-shrink: 0;
}

/* Mensch-Erkennung bei der Registrierung */
.human-check { min-height: 2.75rem; cursor: default; }
.human-check .form-check-input { width: 1.4em; height: 1.4em; flex-shrink: 0; cursor: pointer; }
.human-check.human-check-done { border-color: var(--bs-success); }

/* Handy: schmale Ränder, damit Formulare die Breite nutzen */
@media (max-width: 575.98px) {
    .content {
        padding-top: 0.5rem;
    }

    .content > .container,
    .content > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.75rem;
    }
}

/* Typauswahl auf dem Handy als Auswahlliste mit bunten Symbolen statt Kacheln (PoiTypePicker; nicht die
   kleine Klappliste PoiTypeSelect, die ohne .dropdown immer sichtbar ist) */
.dropdown.poi-type-select {
    display: none;
}

.poi-type-select-toggle {
    line-height: 1.5;
}

.poi-type-select i {
    width: 1.3em;
    margin-right: 0.4rem;
    text-align: center;
}

.poi-type-select-menu {
    max-height: 60vh;
    overflow-y: auto;
}

.poi-type-select-menu .dropdown-item.active {
    background: color-mix(in srgb, var(--mt-primary) 18%, transparent);
    color: inherit;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .poi-type-picker {
        display: none;
    }

    .dropdown.poi-type-select {
        display: block;
    }
}

/* Benutzerverwaltung */
.admin-search { max-width: 16rem; }
.admin-email { overflow-wrap: anywhere; }
.admin-until { min-width: 10.5rem; max-width: 12rem; }

/* Preisseite */
.pricing-amount { font-size: 2rem; font-weight: 700; margin-bottom: .75rem; }
.pricing-unit { font-size: 1rem; font-weight: 400; color: var(--bs-secondary-color); }
.pricing-list { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.pricing-list li { margin-bottom: .35rem; }
.pricing-recommended { border-width: 2px; }

/* ---------- In der Nähe ---------- */
/* Auswahl „Was suchen?“: aktive Kategorie im Menü hervorheben */
.nearby-category-panel button.active {
    font-weight: 700;
    background: rgba(var(--mt-primary-rgb), 0.08);
}

/* Umkreise im Petrol-Balken: Knopfreihe, bei wenig Platz ein Menü */
.nearby-radius {
    display: flex;
    flex-wrap: nowrap;
    margin-left: auto;
}

.map-actions .nearby-radius .btn {
    border-radius: 0;
    margin-left: -1px;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.map-actions .nearby-radius .btn:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    margin-left: 0;
}

.map-actions .nearby-radius .btn:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.map-actions .nearby-radius .btn.active {
    background: #fff;
    color: var(--mt-primary);
    border-color: #fff;
    font-weight: 700;
    position: relative;
}

.nearby-radius-select {
    display: none;
    margin-left: auto;
}

/* Liste rechtsbündig unter dem Knopf, damit sie am rechten Rand im Bild bleibt */
.nearby-radius-panel {
    left: auto;
    right: 0;
    min-width: 7rem;
}

.nearby-radius-panel button.active {
    font-weight: 700;
    background: rgba(var(--mt-primary-rgb), 0.08);
}

@container (max-width: 34rem) {
    .map-actions .nearby-radius {
        display: none;
    }

    .nearby-radius-select {
        display: block;
    }
}

.nearby-center-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mt-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--mt-primary), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.nearby-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
}

.nearby-item.selected {
    background: rgba(var(--mt-primary-rgb), 0.07);
}

.nearby-item-body {
    min-width: 0;
    flex: 1 1 auto;
}

.nearby-check,
.nearby-check-done {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.nearby-item .nearby-check {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    cursor: pointer;
}

.nearby-check-done {
    width: 1.15rem;
    text-align: center;
}

/* „Alle“ rechts in der Titelzeile der Liste */
.overview-list-header .nearby-select-all {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0 auto;
    cursor: pointer;
    white-space: nowrap;
}

.nearby-select-all .form-check-input {
    margin: 0;
    border-color: #fff;
    background-color: transparent;
}

.nearby-select-all .form-check-input:checked {
    background-color: #fff;
    /* Häkchen in Petrol auf Weiß */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f766e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Unten an der Liste: Auswahl übernehmen */
.nearby-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.nearby-footer-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.nearby-item.active {
    background: rgba(var(--mt-primary-rgb), 0.16);
}

.nearby-item-name {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: inherit;
    font-weight: 600;
}

.nearby-item-name:hover {
    text-decoration: underline;
}

.nearby-item-links a {
    margin-right: 0.75rem;
}

/* ---------- Einführung: Hinweis-Blasen (js/tour.js) ---------- */
.tour-hint {
    position: fixed;
    z-index: 2000;
    width: min(320px, calc(100vw - 16px));
    padding: 0.85rem 1rem 0.6rem;
    border-radius: 0.6rem;
    background: var(--mt-surface);
    color: var(--bs-body-color);
    border: 2px solid var(--mt-primary);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
}

.tour-hint p {
    margin-bottom: 0.5rem;
}

.tour-hint-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-hint-end {
    padding-left: 0;
    color: var(--bs-secondary-color);
}

.tour-hint-arrow {
    position: absolute;
    top: -9px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: var(--mt-surface);
    border-left: 2px solid var(--mt-primary);
    border-top: 2px solid var(--mt-primary);
    transform: rotate(45deg);
}

.tour-hint.above .tour-hint-arrow {
    top: auto;
    bottom: -9px;
    transform: rotate(225deg);
}

.tour-target {
    border-radius: 0.4rem;
    animation: tour-pulse 1.6s ease-out infinite;
}

@keyframes tour-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mt-primary) 60%, transparent); }
    100% { box-shadow: 0 0 0 12px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .tour-target {
        animation: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-primary) 60%, transparent);
    }
}

/* Hilfe */
.help-page details {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.6rem 0;
}

.help-page summary {
    font-weight: 600;
    cursor: pointer;
}

/* Symbolliste in der Hilfe: Symbol in fester Breite vor dem Text */
.help-page .help-symbols {
    list-style: none;
    padding-left: 0;
}

.help-page .help-symbols li {
    margin-bottom: .4rem;
}

.help-page .help-symbols i {
    width: 1.4rem;
    text-align: center;
    color: var(--bs-primary);
}

.help-page details p,
.help-page details ul {
    margin: 0.5rem 0 0.25rem;
}

/* ---------- Einstellungen als Akkordeon (todo 51): Kopf klappt den Abschnitt auf und zu ---------- */
.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    color: white;   /* wie die anderen Kartenköpfe; ein Knopf erbt sonst die dunkle Schrift */
    text-align: left;
    cursor: pointer;
}

.settings-section:not(.open) > .settings-section-header {
    border-bottom: 0;
    border-radius: 10px !important;   /* zugeklappt ganz rund; .card-header rundet sonst nur oben */
}

.settings-section-header:hover {
    filter: brightness(1.08);
}

.settings-section-caret {
    font-size: 0.8em;
    opacity: 0.7;
    transition: transform 0.15s;
}

.settings-section.open .settings-section-caret {
    transform: rotate(180deg);
}

.settings-section:not(.open) > .settings-section-body {
    display: none !important;
}

/* Webadressen in Texten (LinkedText): lange Adressen umbrechen */
.linked-text a {
    overflow-wrap: anywhere;
}

/* Fester Text in index.html, sichtbar bis Blazor geladen ist (Suchmaschinen sehen nur diesen) */
.app-splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-page-bg, #f6f8f8);
}

.app-splash img {
    animation: app-splash-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes app-splash-pulse {
    from { opacity: 0.35; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* Text vor dem Start von Blazor nur für Suchmaschinen und Vorleseprogramme */
.static-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Lasso (todo 6) ---------- */
/* Handy: Hinweis „zwei Finger“, wenn ein Finger über die Karte wischt (map.js addTwoFingerHint) */
.map-two-finger-hint {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.15rem;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}

.map-two-finger-hint.show {
    opacity: 1;
}

.map-two-finger-hint .fas {
    font-size: 2.4rem;
}

.map-two-finger-hint span {
    max-width: 16rem;
}

/* Verschiebbare Nadeln (neuer POI, Ort wählen) lassen sich auch auf dem Handy mit einem Finger ziehen */
.leaflet-marker-draggable {
    touch-action: none;
}

.lasso-active,
.lasso-active .leaflet-interactive {
    cursor: crosshair !important;
    touch-action: none;
}

/* Weg auf der Karte zeichnen (Reise): Leiste oben (am Handy unten), Punkte zum Ziehen, übrige Linien blass */
.path-drawing {
    cursor: crosshair;
}

.path-drawing .leaflet-overlay-pane path:not(.path-draw-line) {
    opacity: 0.3;
}

.path-draw-point {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--mt-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: move;
}

/* Kleiner Punkt zwischen zwei Punkten: ziehen oder antippen fügt einen ein (Fläche zum Treffen bleibt groß) */
.path-draw-point.mid {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

.path-draw-point.mid::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mt-primary);
    opacity: 0.8;
}

.path-drawing-badge {
    background: var(--mt-primary);
    font-weight: 600;
}

.path-draw-bar {
    position: absolute;
    top: 10px;
    left: 60px;
    right: 10px;
    z-index: 1000;
    background: var(--mt-primary);
    color: #fff;
    border-radius: 1rem;
    padding: 0.55rem 0.8rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: default;
}

.path-draw-bar.bottom {
    top: auto;
    bottom: 10px;
    left: 10px;
}

.path-draw-title {
    font-weight: 700;
}

.path-draw-bar.bottom .path-draw-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.path-draw-bar.bottom .path-draw-hint {
    font-size: 0.8rem;
}

.path-draw-bar.bottom .path-draw-sum {
    flex-basis: 100%;
}

.path-draw-bar.bottom .path-draw-done {
    margin-left: auto;
}

.path-draw-hint {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0.1rem 0 0.4rem;
}

.path-draw-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.path-draw-sum {
    font-weight: 700;
    margin-right: auto;
}

.path-draw-bar .btn {
    border-radius: 999px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
}

.path-draw-bar .btn:disabled {
    opacity: 0.5;
}

.path-draw-bar .path-draw-done {
    background: #fff;
    color: var(--mt-primary);
    font-weight: 700;
    border-color: #fff;
}

.map-option-button.active {
    background: rgba(var(--mt-primary-rgb), 0.16);
    border-radius: 0.4rem;
}

.map-hint {
    margin-top: 0.4rem;
}

.lasso-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--mt-primary-rgb), 0.06);
}

.lasso-bar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.lasso-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lasso-bar-actions .form-control,
.lasso-bar-actions .form-select {
    flex: 1 1 10rem;
    width: auto;
}

/* ---------- Knöpfe im Kartenpopup (todo 64): nur Symbole, Erklärung als Tooltip ---------- */
.map-popup-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
}

.map-popup-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--mt-primary);
}

/* ohne den Abstand nach dem Symbol, den .btn i sonst bekommt: Symbol genau in der Mitte des Kreises */
.map-popup-action i {
    margin: 0;
}

.map-popup-action:hover,
.map-popup-action:focus-visible {
    color: #fff;
    filter: brightness(1.15);
}

.map-popup-action.visited {
    background: #2e7d32;
}

.map-popup-action.selected {
    background: #b45309;
}

.map-popup-action.cancel {
    background: var(--bs-secondary);
}

.map-popup-actions.asking-date {
    align-items: flex-end;
}

.map-popup-date-label {
    flex: 1 1 auto;
    font-size: 0.8rem;
    margin: 0;
}

.map-popup-date {
    margin-top: 0.15rem;
}

.map-popup-action.danger {
    background: var(--bs-danger);
    margin-left: auto;
}

/* Nummer an der Nadel: Reihenfolge der POIs in einer Liste */
.poi-pin-number {
    position: absolute;
    top: -8px;
    left: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    border: 1.5px solid #fff;
    background: #212529;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    transform: rotate(45deg);
}

.poi-pin:has(.poi-pin-number) {
    position: relative;
}

/* ---------- Listen (todo 22) ---------- */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Kartenbild oben auf der Kachel (todo 69), vom Server erzeugt */
.preview-map {
    display: block;
    width: 100%;
    aspect-ratio: 480 / 225;   /* Größe des Bilds aus MapPreviewService, damit nichts abgeschnitten wird */
    border-radius: 10px 10px 0 0;
    background: var(--bs-tertiary-bg);
}

.preview-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--bs-secondary-color);
}

.collection-card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.collection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

/* Kachel „Neue Reise/Sammlung anlegen“ hinter den Kacheln: öffnet den Dialog */
.new-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 240px;
    padding: 1.5rem;
    border: 2px dashed rgba(15, 118, 110, 0.45);
    background: rgba(15, 118, 110, 0.04);
    color: var(--bs-primary);
    cursor: pointer;
}

.new-tile:hover,
.new-tile:focus-visible {
    border-color: var(--bs-primary);
    background: rgba(15, 118, 110, 0.08);
}

.new-tile-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-size: 2rem;
}

@media (max-width: 575.98px) {
    .new-tile { min-height: 150px; }
}

.new-tile-label {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
}

.collection-description {
    white-space: pre-line;
}

.collection-head {
    margin-bottom: 0.75rem;
}

/* Teilen als Hauptknopf einer Liste (todo 96) */
.collection-share-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
}

.collection-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.collection-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 560px;
    margin-bottom: 0.5rem;
}

.collection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.share-box {
    margin-top: 0.6rem;
    max-width: 720px;
}

.collection-poi {
    display: flex;
    align-items: center;
}

.collection-poi .poi-list-item {
    flex: 1 1 auto;
    min-width: 0;
}

.collection-poi.dragging {
    position: relative;
    z-index: 2;
    background: var(--bs-body-bg);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    opacity: 0.95;
}

.collection-poi.drop-before {
    box-shadow: inset 0 3px 0 var(--mt-primary);
}

.collection-poi.drop-after {
    box-shadow: inset 0 -3px 0 var(--mt-primary);
}

/* Beim Ziehen: Tag, in dem der Stopp beim Loslassen landet */
#stopList .drop-section {
    background: rgba(var(--mt-primary-rgb), 0.08);
}

#stopList .trip-day-row.drop-section .trip-day-head {
    background: rgba(var(--mt-primary-rgb), 0.18);
    box-shadow: inset 4px 0 0 var(--day-color);
}

/* Griff zum Ziehen; touch-action: none, damit der Finger zieht statt die Seite zu scrollen */
.drag-handle {
    flex: 0 0 auto;
    padding: 0.25rem 0.35rem;
    color: var(--bs-secondary-color);
    cursor: grab;
    touch-action: none;
}

.collection-poi.dragging .drag-handle {
    cursor: grabbing;
}

.collection-poi-number {
    flex: 0 0 auto;
    min-width: 1.6rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
    text-align: right;
}

.collection-poi-tools {
    display: flex;
    gap: 0.4rem;
    padding-right: 0.4rem;
}

.collection-poi-list {
    padding-left: 0.5rem;
}

.collection-add {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
}

.collection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.collection-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    background: rgba(var(--mt-primary-rgb), 0.1);
}

/* ---------- Datei-Import (todo 44) ---------- */
.import-table th:first-child,
.import-table td:first-child {
    padding-left: 0.75rem;
}

.import-table td:nth-child(2) {
    min-width: 12rem;
}

.import-duplicate {
    opacity: 0.75;
}

.import-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.import-footer #importListName {
    flex: 0 1 18rem;
}

/* Registrierung: Pflicht-Häkchen für AGB und Datenschutz (todo 62) */
.accept-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.accept-terms .form-check-input {
    flex-shrink: 0;
    width: 1.3em;
    height: 1.3em;
    margin: 0.1rem 0 0;
    cursor: pointer;
}

/* Reisen: Zeitraum im Bearbeiten-Formular */
.trip-dates-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.trip-dates-edit input {
    width: auto;
}

/* Reisen: Verkehrsmittel für die ganze Reise (todo 82) */
.trip-mode-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.trip-mode-line select {
    padding-top: .1rem;
    padding-bottom: .1rem;
}

/* Vor dem Ändern: was sich ändert und was bleibt */
.trip-mode-confirm {
    border: 1px solid var(--bs-primary);
    border-radius: .75rem;
    background: rgba(15, 118, 110, .06);
    padding: .5rem .75rem;
    margin: .25rem 0 .5rem;
    max-width: 36rem;
}

.trip-mode-confirm .small + .small {
    margin-top: .2rem;
}

/* Reisen: Tage */
.trip-days {
    display: flex;
    flex-shrink: 0;
    gap: .35rem;
    overflow-x: auto;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.trip-days .btn {
    white-space: nowrap;
}

.trip-day-tab {
    border: 1px solid var(--day-color);
    color: var(--day-color);
}

.trip-day-tab.active,
.trip-day-tab:hover {
    background: var(--day-color);
    color: #fff;
}

.trip-day-count {
    opacity: .75;
    font-size: .8em;
}

.trip-day-title {
    flex-shrink: 0;
    color: var(--day-color);
    font-weight: 600;
}

.collection-poi-number.has-day {
    background: var(--day-color);
    color: #fff;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}

.stop-day {
    width: auto;
    padding: .1rem 1.6rem .1rem .4rem;
    font-size: .8rem;
}

.collection-poi-tools {
    align-items: center;
}

.map-popup-done {
    color: var(--bs-success);
    font-size: .85rem;
}

/* Reisen: Termine */
.trip-events {
    border-bottom: 1px solid var(--bs-border-color);
    padding: .25rem 0;
}

.trip-event {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .4rem .75rem;
}

.trip-event-icon {
    color: var(--bs-primary);
    width: 1.25rem;
    text-align: center;
    margin-top: .2rem;
}

.trip-event-text {
    flex: 1 1 auto;
    min-width: 0;
}

.trip-event-date {
    white-space: nowrap;
    color: var(--day-color);
    font-weight: 600;
    margin-right: .35rem;
}

.trip-event-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-right: .35rem;
}

.trip-event-title {
    display: block;
    overflow-wrap: anywhere;
}

/* Termine beim Stopp ihres Orts */
.stop-events .trip-event {
    padding: .2rem 0;
    gap: .45rem;
}

.stop-events .trip-event-title {
    font-size: .95rem;
}

.stop-events .trip-event-icon {
    width: 1rem;
    margin-top: .15rem;
}

/* Trennlinie zwischen den Orten der Reise und den übrigen in der Auswahl */
option.option-separator {
    color: var(--bs-secondary-color);
}

.trip-event-note {
    white-space: pre-line;
}

.trip-event-form {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .75rem;
}

.trip-event-cost {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    margin-top: .1rem;
}

.trip-cost-input {
    max-width: 7rem;
}

/* Währungsauswahl (todo 90): schmal, der Name steht in der aufgeklappten Liste */
.trip-currency-select {
    width: 6rem;
    flex: 0 0 auto;
}

.currency-pick {
    position: relative;
    display: inline-block;
}

.currency-pick-label {
    display: block;
    white-space: nowrap;
}

/* Die echte Auswahl liegt unsichtbar darüber: Tippen öffnet die Liste mit den vollen Namen */
.currency-pick-select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.currency-pick:has(.currency-pick-select:focus-visible) .currency-pick-label {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--mt-primary-rgb), 0.25);
}

/* Summe der Wege je Verkehrsmittel */
.trip-mode-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    margin-top: 0.15rem;
    color: var(--bs-secondary-color);
}

.trip-mode-total {
    white-space: nowrap;
}

.trip-mode-total i {
    width: 1.1rem;
    text-align: center;
}

/* Hinweis „Tag hier ändern“ nach dem Versuch, eine Unterkunft mit mehreren Nächten zu ziehen */
.stop-day.attention {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--mt-primary-rgb), 0.35);
}

.currency-pick.is-invalid .currency-pick-label {
    border-color: var(--bs-form-invalid-border-color);
}

/* Kleine Zahl mit −/+ (Nächte, Zimmer, Personen) */
.num-step {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
}

.num-step-btn {
    border: 0;
    padding: 0.15rem 0.3rem;
    color: var(--mt-primary);
    font-size: 0.75rem;
}

.num-step-btn:disabled {
    color: var(--bs-secondary-color);
}

.num-step-input {
    width: 1.7rem;
    padding: 0.2rem 0;
    border: 0;
    text-align: center;
    background: transparent;
    -moz-appearance: textfield;
}

.num-step-input::-webkit-outer-spin-button,
.num-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-step-input:focus {
    box-shadow: none;
}

.num-step:focus-within {
    border-color: var(--bs-primary);
}

/* „× 3 Nächte“ bleibt zusammen */
/* Sehr schmale Handys: lieber umbrechen als über den Rand ragen */
.stay-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stay-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.trip-budget-form .num-step {
    display: flex;
    width: fit-content;
}

.trip-budget-form .trip-currency-select {
    width: 100%;
}

.trip-costs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .4rem;
    padding: .4rem .75rem;
    border-top: 1px dashed var(--bs-border-color);
}

.trip-costs > .fa-coins {
    color: var(--bs-primary);
}

.trip-costs-kinds {
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.collection-poi.has-leg {
    flex-wrap: wrap;
}

.collection-poi.has-stay {
    flex-wrap: wrap;
}

/* Mit Weg darüber nicht umbrechen: Name nimmt nur den freien Platz */
.collection-poi.has-stay .poi-list-item,
.collection-poi.has-leg .poi-list-item {
    flex-basis: 0;
}

.stop-leg {
    order: -1;
    flex-basis: 100%;
    padding-left: 2.25rem;
    border-left: 2px dotted var(--bs-border-color);
    margin-left: 1.6rem;
}

.stop-leg-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .1rem .25rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.stop-leg-toggle:hover {
    color: var(--bs-primary);
}

.stop-leg-text {
    font-variant-numeric: tabular-nums;
}

/* Neuer POI per Kartenklick (Reise todo 89, Übersicht todo 122) */
.poi-draft .poi-draft-name {
    flex: 1 1 12rem;
    width: auto;
}

/* Übersicht: das Fenster für den neuen POI liegt unten über der Karte */
.map-with-draft {
    position: relative;
}

.map-draft {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 1000;
    max-width: 34rem;
}

/* nicht wie die Kartenfläche strecken (.overview-map .card-body) */
.overview-map .map-draft > .card-body {
    flex: 0 0 auto;
    flex-direction: row;
}

.poi-draft-marker .poi-pin {
    outline: 3px dashed var(--mt-primary);
    outline-offset: 2px;
}

/* Übernachtung an einer Unterkunft: unter dem Namen */
.stop-stay {
    flex-basis: 100%;
    padding-left: 4.1rem;
    padding-bottom: .25rem;
}

.stop-stay-toggle .fa-bed {
    color: #8E24AA;
}

.stop-stay-cost {
    margin-left: .35rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

/* Sternwanderung: Unterkunft mit Tagesausflügen als Kopf ihrer Tage, Tage und Unterkünfte klappbar */
.collection-poi.stop-base {
    margin: 0.5rem 0.25rem 0.25rem 0;
    border-radius: 0.75rem;
    background: rgba(var(--mt-primary-rgb), 0.1);
    padding-top: 0.25rem;
}

.collection-poi.stop-base .drag-handle {
    visibility: hidden;
}

.trip-row-toggle {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--mt-primary);
    padding: 0 0.25rem;
    width: 1.6rem;
}

.trip-row-toggle i,
.trip-day-head > i {
    transition: transform 0.15s;
}

.closed > .trip-row-toggle i,
.trip-day-row.closed .trip-day-head > i {
    transform: rotate(-90deg);
}

.trip-chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    background: var(--mt-primary);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
}

.trip-base-summary {
    flex-basis: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 0.75rem 0.4rem 4.1rem;
}

.trip-day-row {
    border-top: 1px solid var(--bs-border-color-translucent);
    margin-top: 0.25rem;
}

.trip-day-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    border: 0;
    background: none;
    text-align: left;
    padding: 0.5rem 0.5rem 0.25rem;
    color: var(--bs-body-color);
}

.trip-day-head > i {
    color: var(--day-color);
    width: 1rem;
}

.trip-day-head strong {
    color: var(--day-color);
    font-family: "Baloo 2", sans-serif;
    font-size: 1.05rem;
}

.trip-day-head span {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* Termine und Kosten im Tageskopf (todo 142): Kosten rechts, Termine in eigener Zeile darunter */
.trip-day-head .trip-day-cost {
    margin-left: auto;
    font-weight: 700;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.trip-day-head .trip-day-events {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    padding-left: 1.6rem;
}

.trip-day-head .trip-day-event i {
    color: var(--day-color);
}

.trip-base-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.75rem 0.25rem 2.35rem;
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
}

.trip-base-row .stop-leg {
    margin-left: -0.75rem;
}

.trip-base-row .stop-leg-text {
    color: var(--day-color);
}

.trip-base-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid #8E24AA;
    color: #8E24AA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    background: var(--bs-body-bg);
}

.trip-base-row.next .trip-base-icon {
    border-style: dashed;
}

/* Unterkunft: Preis und Währung so flach wie die −/+-Felder, Hinweise hinter dem Info-Symbol */
.stop-stay #stayCost,
.stop-stay .currency-pick-label {
    min-height: 0;
    height: auto;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.3;
}

.base-info-btn {
    margin-left: 0.25rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.base-info-btn[aria-expanded="true"],
.base-info-btn:hover {
    color: var(--bs-primary);
}

/* Knöpfe in der Titelleiste der Liste bleiben einzeilig */
.overview-list-header .btn {
    white-space: nowrap;
}

#stayCost::-webkit-outer-spin-button,
#stayCost::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stay-info-btn {
    color: var(--bs-secondary-color);
}

.stay-info-btn[aria-expanded="true"] {
    color: var(--bs-primary);
}

.stay-info {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Reise: in einer schmalen Liste (Handy) bekommt der Name eine eigene Zeile, darunter Symbol, Tag und Knöpfe */
.trip-overview .overview-list > .card-body {
    container: trip-list / inline-size;
}

.stop-type {
    display: inline-flex;
    flex-shrink: 0;
}

.stop-type-narrow {
    display: none;
}

@container trip-list (max-width: 30rem) {
    /* Unterkunftsformular und Info unter dem Namen weniger eingerückt, damit Nächte/Zimmer in eine Zeile passen */
    #stopList .stop-stay {
        padding-left: 2.4rem;
    }

    #stopList .collection-poi {
        flex-wrap: wrap;
    }

    #stopList .collection-poi .poi-list-item {
        flex: 1 1 calc(100% - 2.5rem);
    }

    #stopList .stop-type-wide {
        display: none;
    }

    #stopList .stop-type-narrow {
        display: inline-flex;
    }

    #stopList .collection-poi-tools {
        flex-basis: 100%;
        align-items: center;
        padding: 0 0.4rem 0.35rem 4.1rem;
        margin-top: -0.35rem;
    }

    /* Termin beim Stopp: Knöpfe bleiben rechts neben dem Text */
    #stopList .stop-events .collection-poi-tools {
        flex-basis: auto;
        padding: 0;
        margin-top: 0;
    }

    #stopList .stop-type-narrow {
        margin-right: auto;
    }
}

/* Fahrtkosten des Wegs (todo 83) */
.stop-leg-cost {
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.stop-leg-manual {
    font-size: .65rem;
}

.stop-leg-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .3rem 0;
}

.stop-leg-number {
    max-width: 5.5rem;
}

/* Leer gelassen = wird berechnet: gestrichelt, grau hinterlegt, Vorschlag kursiv mit ≈ */
.stop-leg-number:placeholder-shown {
    border-style: dashed;
    background: var(--bs-tertiary-bg);
}

.stop-leg-number::placeholder {
    font-style: italic;
    color: var(--bs-secondary-color);
    opacity: 0.85;
}

.trip-travel .fa-route {
    color: var(--bs-primary);
}

/* Startseite: Reiseplanung mit gezeichneter Reise */
.home-trips {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.home-trip-features {
    flex: 1 1 360px;
    display: grid;
    gap: 1.1rem;
}

.home-trip-feature {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.home-trip-feature h3 {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.home-trip-feature p {
    margin: 0;
    color: var(--bs-secondary-color);
}

.home-trip-feature-icon {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mt-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.1rem;
}

.home-trip-visual {
    position: relative;
    flex: 1 1 340px;
    max-width: 420px;
}

.home-trip-preview {
    font-size: 0.85rem;
}

.home-trip-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem 0.3rem;
    flex-wrap: wrap;
}

.home-trip-tabs span {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.home-trip-tabs span.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.home-trip-list {
    list-style: none;
    margin: 0;
    padding: 0.3rem 0.75rem;
}

.home-trip-event,
.home-trip-stop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.home-trip-event i {
    color: var(--bs-primary);
    width: 1.1rem;
    text-align: center;
}

.home-trip-event span {
    flex: 1 1 auto;
}

.home-trip-stop {
    font-weight: 600;
}

.home-trip-number {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-trip-leg {
    margin-left: 0.65rem;
    padding: 0.15rem 0 0.15rem 1.2rem;
    border-left: 2px dotted var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.home-trip-total {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-top: 1px dashed var(--bs-border-color);
}

.home-trip-total i {
    color: var(--bs-primary);
}

/* Kostenübersicht einer Reise (wie im Reisekosten-Planer) */
.trip-budget {
    margin-top: 1rem;
}

.trip-budget-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: flex-end;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.trip-budget-form label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 11rem;
    color: var(--bs-secondary-color);
}


.trip-budget-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem 2rem;
    margin-bottom: .75rem;
}

.trip-budget-total {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.trip-budget-other {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trip-budget-kpis {
    display: flex;
    gap: 1.5rem;
}

.trip-budget-kpis span {
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.trip-budget-kpis b {
    font-variant-numeric: tabular-nums;
}

.trip-budget-lines {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .6rem 2rem;
}

.trip-budget-line {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9rem;
}

.trip-budget-line i {
    color: var(--bs-primary);
    width: 1.1rem;
    text-align: center;
}

.trip-budget-line b {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trip-budget-track {
    height: 5px;
    margin-top: 4px;
    border-radius: 3px;
    background: rgba(var(--mt-primary-rgb), .12);
    overflow: hidden;
}

.trip-budget-track i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--bs-primary);
}

.trip-budget-warn {
    color: var(--bs-warning-text-emphasis);
}

/* Reise: Karte und Liste behalten ihre Höhe, die Kostenübersicht folgt darunter (Seite scrollt) */
.overview-page > .trip-budget {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .overview-page:has(> .trip-budget) .overview {
        flex: 0 0 auto;
        height: max(480px, calc(100dvh - 15rem));
    }
}

/*
 * Druckansicht einer Reise (todo 66): Kopf, Karte und der Plan Tag für Tag (#tripPrint, nur beim Drucken eingeblendet).
 * html.printing setzt die Karte schon vor dem Druckdialog auf Papiergröße, damit Leaflet die passenden Kacheln lädt.
 */
.trip-print {
    display: none;
}

html.printing .overview-map .map-canvas {
    width: 18cm !important;
    height: 11cm !important;
    min-height: 0 !important;
    flex: none !important;
}

@media print {
    @page {
        size: A4;
        margin: 1.5cm;
    }

    html, body, .page, main, article.content, .overview-page {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
    }

    article.content {
        padding: 0 !important;
    }

    .sidebar, .app-footer, .collection-actions, .map-actions, .overview-splitter, .trip-row-toggle, .overview-page > .alert, .overview-list, .trip-budget,
    #editTrip, .legal-print, .collection-title > a, .leaflet-control-container, .tour-hint, .modal, .modal-backdrop {
        display: none !important;
    }

    .overview {
        display: block !important;
    }

    .overview-map, .overview-map .card-body {
        display: block !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .overview-map .map-canvas {
        width: 18cm !important;
        height: 11cm !important;
        min-height: 0 !important;
        break-inside: avoid;
    }

    .trip-print {
        display: block;
        margin-top: 0.6cm;
        font-size: 10.5pt;
    }
}

.trip-print h3 {
    font-size: 13pt;
    margin: 0.5cm 0 0.2cm;
    padding-left: 0.25cm;
    border-left: 4px solid var(--day-color, #0f766e);
    break-after: avoid;
}

.trip-print-day {
    break-inside: avoid-page;
}

.trip-print-events {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0.2cm;
}

.trip-print-events li {
    padding: 0.05cm 0;
}

.trip-print-time {
    font-variant-numeric: tabular-nums;
    margin: 0 0.2cm;
}

.trip-print-cost {
    float: right;
}

.trip-print-stops {
    margin: 0;
    padding-left: 0.8cm;
}

.trip-print-stops li {
    padding: 0.08cm 0;
    break-inside: avoid;
}

.trip-print-leg {
    font-size: 9pt;
    color: #555;
}

.trip-print-base {
    margin: 0.05cm 0 0.05cm 0.8cm;
    font-style: italic;
}

.trip-print-notes {
    white-space: pre-line;
    color: #444;
}

.trip-print-budget {
    width: 100%;
    border-collapse: collapse;
}

.trip-print-budget td {
    padding: 0.05cm 0;
    border-bottom: 1px solid #ddd;
}

.trip-print-budget td:last-child {
    text-align: right;
    white-space: nowrap;
}

.trip-print-sum td {
    font-weight: 700;
}

.trip-print-footer {
    margin-top: 0.6cm;
    font-size: 8.5pt;
    color: #666;
}

/* Preis pro Nacht: schmal, schrumpft nicht neben Speichern/Abbrechen/Info */
#stayCost {
    flex: 0 0 6rem;
    -moz-appearance: textfield;
    max-width: none;
    padding-left: 0.5rem;
    padding-right: 0.4rem;
}

.stop-stay .stay-row {
    gap: 0.3rem;
}

.stop-stay .trip-currency-select {
    width: 5.2rem;
}

/* Reisen: Eintritt am Stopp (todo 105), abgewählt oder anderweitig gezählt blass */
.stop-fee .fee-off span {
    text-decoration: line-through;
    opacity: .7;
}

.stop-fee .fee-muted {
    opacity: .7;
}

/* Reisen: Höhenprofil eines Wegs (todo 143) */
.elevation-profile {
    margin: .2rem 0 .4rem;
    max-width: 30rem;
}

.elevation-profile svg {
    display: block;
    width: 100%;
    height: 70px;
}

.elevation-profile polygon {
    fill: rgba(var(--mt-primary-rgb), 0.18);
}

.elevation-profile polyline {
    fill: none;
    stroke: var(--mt-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.elevation-profile-legend {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}