/* ===============================
   VAH AUSFLUGSZIELE – THEME COLORS
   =============================== */

:root {

    /* Theme-Farben (WordPress / Oxygen) */
    --vah-primary: var(--wp--preset--color--primary, #2c3e50);
    --vah-secondary: var(--wp--preset--color--secondary, #4f6d7a);
    --vah-text: var(--wp--preset--color--foreground, #222);
    --vah-bg: var(--wp--preset--color--background, #ffffff);
    --vah-border: rgba(0,0,0,0.1);
    --vah-rating: #d4af37;
	--vah-beschreibung: #fff;

    /* Statusfarben */
    --vah-success: #2ecc71;
    --vah-warning: #f39c12;
    --vah-muted: #999;
}

/* ==================================================
   VAH – Filter: Grundlayout
   ================================================== */

.vah-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 24px;
    align-items: flex-end;
}

.vah-filter label {
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

/* ==================================================
   VAH – Standard Inputs & Selects
   ================================================== */

.vah-filter select,
.vah-filter input[type="number"] {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 120px;
}

.vah-filter-input {
    height: 35px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
    width: 110px;
    box-sizing: border-box;
}

.vah-filter-input:focus,
.vah-filter-select:focus {
    outline: none;
    border-color: #999;
}

/* ==================================================
   VAH – Checkbox & Radio Basics
   ================================================== */

.vah-filter input[type="checkbox"] {
    margin-right: 6px;
}

.vah-filter-dropdown input[type="radio"] {
    margin-right: 6px;
}

.vah-filter-dropdown input[type="checkbox"] {
    margin-top: 3px;
    margin-right: 6px;
}

.vah-filter-dropdown label {
    display: flex;
    align-items: flex-start;
}

/* ==================================================
   VAH – Dropdown Container & Toggle
   ================================================== */

.vah-filter-dropdown {
    position: relative;
    width: 260px;
}

.vah-filter-toggle {
    width: 100%;
    background: #2f3b4a;
    color: #fff;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==================================================
   VAH – Dropdown Panel (Inhalt)
   ================================================== */

.vah-filter-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 320px;
    overflow-y: auto; /* Scrollbar */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    z-index: 1000;
}

/* Öffnungszustände
   (open = evtl. alt / is-open = aktuell per JS) */
.vah-filter-dropdown.open .vah-filter-panel,
.vah-filter-dropdown.is-open .vah-filter-panel {
    display: block;
}

/* ===============================
          Dropdown
   =============================== */

.vah-dropdown-toggle {
  background: #2f3e4e;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.vah-dropdown-panel {
  display: none;
  position: absolute;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  min-width: 220px;
}

.vah-dropdown.open .vah-dropdown-panel {
  display: block;
}


/* ==================================================
   VAH – Tree-Struktur (Parent / Child)
   ================================================== */

.vah-tree-parent > label {
    font-weight: 600;
    display: block;
    margin: 4px 0;
}

/* ==================================================
   VAH – Spezielle Filter
   ================================================== */

/* Dauer von / bis */
.vah-filter-range {
    display: flex;
    gap: 8px;
}

/* Noch nicht durchgeführt */
.vah-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
}

.vah-filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.vah-filter-checkbox span {
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

/* ==================================================
   VAH – Buttons
   ================================================== */

.vah-filter button {
    background: var(--vah-primary);
    padding: 7px 14px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.vah-filter button:hover {
    background: color-mix(in srgb, var(--vah-primary) 85%, black);
}

/* Submit */
.vah-filter-submit {
    background: red !important;
    color: #fff;
    border: none;
    height: 35px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.vah-filter-submit:hover {
    background: #b71c1c;
}

/* Reset */
.vah-filter-reset {
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding: 0 14px;
    background: #ffffff;
    color: red;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
}

/* ==================================================
   VAH – Aktiver Filter Indikator
   ================================================== */

.vah-filter-dropdown.has-active-filter
.vah-filter-toggle::after {
    content: ' ●';
    color: #e53935;
    font-weight: bold;
    margin-left: 4px;
}

/* ===========================================
   ***            Reset-Link               ***
   ===========================================   */

.vah-reset {
    color: var(--vah-text);
    border-color: var(--vah-border);
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
}

.vah-reset:hover {
    background: #f3f3f3;
}

/* ===========================================
   *** ITEM Gestaltung der Routenvorschau  ***
   ===========================================   */


/* Einzelnes Element */
.vah-item {
    background: var(--vah-bg);
    color: var(--vah-text);
    border: 1px solid var(--vah-border);
    /*display: block;*/
	display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
	position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vah-item:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Titel */
.vah-item h3{
  color: var(--vah-primary);
  font-size: 1.15rem;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  max-height: calc(1.2em * 2);
  overflow: hidden;
  margin-bottom: 6px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 2) Beschreibung (Excerpt) fixe Höhe -> Dauer startet immer gleich
   (Zahl "3" kannst du auf 2/4/5 ändern je nach Wunsch) */
.vah-item .vah-excerpt{
  line-height: 1.35;
  min-height: calc(1.35em * 4);
  max-height: calc(1.35em * 4);
  overflow: hidden;
  margin-bottom: 12px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* falls du den Placeholder nutzt: sicherstellen, dass er "zählt" */
.vah-item .vah-excerpt-placeholder{
  display: block;
}

/* 3) Dauer-Zeile immer reservieren (auch wenn leer) */
.vah-item .vah-duration{
  line-height: 1.35;
  min-height: 1.35em;
}

/* 4) Letzter Besuch ebenfalls eine fixe Grundhöhe */
.vah-item .vah-last-visit{
  line-height: 1.35;
  min-height: 1.35em;
}


/* ===========================================
   ***            Gallery               ***
   ===========================================   */


/* VAH – Galerie Grid */
.vah-gallery-grid {
  display: flex !important;
  flex-wrap: nowrap !important;   /* 🔥 nur 1 Zeile */
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0 14px;
  -webkit-overflow-scrolling: touch;

  /* optional: “snap” beim Scrollen */
  scroll-snap-type: x mandatory;
}

/* Jedes Item soll nicht umbrechen */
.vah-gallery-grid .vah-gallery-item {
  flex: 0 0 auto;            /* 🔥 nicht schrumpfen, nicht umbrechen */
  width: 240px;              /* Breite pro Bild-Kachel (nach Wunsch) */
  scroll-snap-align: start;
}

/* Nur 1 Bildhöhe – einheitlich */
.vah-gallery-grid .vah-gallery-image {
  height: 180px;             /* Höhe nach Wunsch */
}

/* Bild bleibt vollständig sichtbar */
.vah-gallery-grid .vah-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Galerie-Item (Gesamtrahmen) */
.vah-gallery-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;

    background: #fff;
    border-radius: 8px;

    padding: 8px;            /* 🔽 kleiner als vorher */
}

/* Fester Bildrahmen */
.vah-gallery-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;        /* ❌ kein Grau mehr */
    border-radius: 6px;
    overflow: hidden;

    margin-bottom: 6px;      /* kompakter Abstand */
}

/* Bild selbst */
.vah-gallery-image img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    background: #fff;
    padding: 6px;            /* 🔽 weniger Rand */
    border-radius: 6px;

    display: block;
}


/* Galerie-Bildbeschriftung
   IMMER 2 Zeilen Platz */
.vah-gallery-caption {
    font-size: 13px;
    line-height: 1.5em;

    min-height: calc(1.5em * 2); /* 🔥 exakt 2 Zeilen */
    max-height: calc(1.5em * 2);

    overflow: hidden;
    text-align: center;

	position: relative;

    margin-top: 4px;
}

/* Textbegrenzung (2 Zeilen!) */
.vah-gallery-caption-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

/* Tooltip */
.vah-gallery-caption::after {
   	content: attr(data-tooltip);

    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);

    width: 100%;                     /* 🔑 gleiche Breite wie Bildbox */
    box-sizing: border-box;

    padding: 10px 12px;

    background: #FFFFDD;             /* 🔑 hell wie WP */
    color: #222;

    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;

    font-size: 0.85rem;
    line-height: 1.45;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    white-space: normal;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;

    z-index: 999;
}

/* Tooltip sichtbar */
.vah-gallery-caption:hover::after {
    opacity: 1;
}

.vah-gallery {
    display: flex;
    flex-wrap: nowrap;          /* 🔴 WICHTIG: alles in einer Zeile */
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 8px;        /* Platz für Scrollbar */
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch; /* iOS smooth */
}

.vah-gallery::-webkit-scrollbar {
    height: 8px;
}

.vah-gallery::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.vah-gallery::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
}



/* ===========================================
   ***            Thumb               ***
   ===========================================   */


/* Vorschaubild – gleiche Höhe, kein Zuschneiden */
.vah-thumb {
    width: 100%;
    height: 180px;              /* Einheitliche Höhe für alle */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;        /* neutraler Hintergrund */
    border-radius: 6px;
    overflow: hidden;
	 margin-bottom: 14px;
}

.vah-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;        /* GANZES Bild anzeigen */
    display: block;
}


/* ===========================================
   ***            Badge Neu / Besucht      ***
   ===========================================   */


.vah-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.vah-badge.new {
    background: #27ae60; /* Grün */
    color: #fff;
}

.vah-badge.visited {
    background: #2980b9; /* Blau */
    color: #fff;
}


/* ===========================================
   ***            Bewertung                ***
   ===========================================   */


.vah-rating {
    color: var(--vah-rating);    
    margin-top: 6px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.vah-rating.not-rated {
    color: var(--vah-rating);
    font-style: italic;
}

.vah-rating-stars {
    font-size: 28px;
    cursor: pointer;
    user-select: none;
}

.vah-rating-stars .vah-star {
    color: #ccc;
    transition: color 0.2s ease;
}

.vah-rating-stars .vah-star.active,
.vah-rating-stars .vah-star.hover {
    color: var(--vah-rating);
}

.vah-map-rating {
    color: var(--vah-rating);
    font-size: 16px;
}

/* ⭐ Goldene Sterne im Karten-Popup */
.vah-map-popup .vah-map-rating {
    color: #f5b301;           /* Gold */
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}


/* ===========================================
   ***            Letzter Vesuch           ***
   ===========================================   */

/* Letzter Besuch */
.vah-last-visit {
    color: var(--vah-secondary);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Optional: noch nicht besucht */
.vah-last-visit.not-visited {
    color: var(--vah-muted);
    font-style: italic;
}


/* ===========================================
   ***          Links Tabelle              ***
   ===========================================   */

/* Wrapper bekommt den gleichen Look wie .vah-address-grid */
.vah-links-table-wrapper{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    margin: 30px 0;
    padding: 20px;

    background: #f6f7f9;   /* wie Adresse & Kontakt */
    border-radius: 6px;    /* wie Adresse & Kontakt */
}

/* Tabelle innen weiterhin “klassisch” */
.vah-links-table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;      /* bleibt weiss wie bisher */
    border-radius: 8px;
    overflow: hidden;
}

/* Optional: damit lange Wörter/URLs nicht die Breite sprengen */
.vah-links-table th,
.vah-links-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Kopfzeile */
.vah-links-table thead th {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    background: #f5f5f5;
    padding: 10px 14px;
    border-bottom: 1px solid #ddd;
}

/* Zellen */
.vah-links-table td {
    padding: 12px 14px;
    vertical-align: top;
    font-size: 0.9rem;
    color: #222;
    border-bottom: 1px solid #eee;
}

/* Letzte Zeile ohne Linie */
.vah-links-table tr:last-child td {
    border-bottom: none;
}

/* Link-Spalte */
.vah-link-title a {
    color: var(--vah-primary);
    font-weight: 600;
    text-decoration: none;
}

.vah-link-title a:hover {
    text-decoration: underline;
}

/* Beschreibung */
.vah-link-desc {
    color: #444;
    line-height: 1.45;
}

/* ===========================================
   Links-Box: IMMER 1-spaltig (Titel oben, Text unten)
   =========================================== */

/* Kopfzeile immer ausblenden */
.vah-links-table thead {
    display: none;
}

/* Tabelle immer als "Cards" darstellen */
.vah-links-table,
.vah-links-table tbody,
.vah-links-table tr,
.vah-links-table td {
    display: block;
    width: 100%;
}

/* Jede Zeile als eigene Card */
.vah-links-table tr {
    margin-bottom: 16px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

/* Zellen ohne Tabellen-Linien */
.vah-links-table td {
    border: none;
    padding: 10px 12px;
}

/* Titel oben kräftig + etwas Abstand */
.vah-links-table td.vah-link-title,
.vah-links-table td:first-child {
    font-weight: 600;
    padding-bottom: 6px;
}

/* Beschreibung direkt darunter */
.vah-links-table td.vah-link-desc,
.vah-links-table td:nth-child(2) {
    padding-top: 0;
    line-height: 1.45;
}

/* Lange Wörter/Links sauber umbrechen */
.vah-link-title a,
.vah-link-desc {
    word-break: break-word;
}




/* ===========================================
   ***             Route                   ***
   ===========================================   */

.vah-route-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    background: #3f6fd1;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

.vah-route-box {
    width: 100%;
    margin: 20px 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    padding: 18px 22px;
}

.vah-route-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.vah-route-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr; /* links breiter */
    gap: 2rem;
}

.vah-route-col {
    font-size: 0.95rem;
    line-height: 1.5;
}

.vah-route-section strong {
    display: inline-block;
    margin-bottom: 6px;
}

.vah-route-stats {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}




/* ===========================================
   ***     Routenstart-Marker              ***
   ===========================================   */

/* Routenstart-Marker MUSS klickbar sein */
.leaflet-pane.startPane {
    pointer-events: auto;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
    pointer-events: auto !important;
}

.leaflet-popup,
.leaflet-popup * {
    pointer-events: auto;
}

/* GPX darf KEINE Maus-Events abfangen */
.leaflet-overlay-pane svg {
    pointer-events: none !important;
}
/* GPX-Linie NICHT klickbar */
.leaflet-pane.gpxPane {
    pointer-events: none;
}

.leaflet-control.elevation {
    overflow: visible;
}


/* ===========================================
   ***              Map Popup              ***
   ===========================================   */

.vah-map-popup {
    font-size: 14px;
    line-height: 1.4;
    color: #222;
}

.vah-map-popup a {
    color: #3f6fd1;
    text-decoration: underline;
}



/* ===============================
   Lightbox
   =============================== */

.glightbox-clean .gdesc-inner {
    font-size: 15px;
    line-height: 1.4;
}


/* ===============================
   
   =============================== */

/* 🔵 Container = Flex (waagrecht) */
.vah-difficulty-dots,
.vah-kondition-dots {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* ⚪ Einzelne Punkte */
.vah-difficulty-dots .dot,
.vah-kondition-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
}

/* 🎨 Farben */
.vah-difficulty-dots .green,
.vah-kondition-dots .green {
    background: #4caf50;
}

.vah-difficulty-dots .orange,
.vah-kondition-dots .orange {
    background: #ff9800;
}

.vah-difficulty-dots .red,
.vah-kondition-dots .red {
    background: #f44336;
}

.vah-difficulty-dots .empty,
.vah-kondition-dots .empty {
    background: #e0e0e0;
}


/* ===============================
   
   =============================== */

.vah-popup-detail {
  display: inline-block;
  margin: 6px 0;
  font-weight: 600;
  color: #2e7d32;
}


/* Popup Layout */
.vah-popup-meta {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vah-popup-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===============================
   🏔 Detailseite – Text über Hero-Bild
=============================== */

/* Titel */
.vah-detail-hero h1,
.vah-detail-hero h2,
.vah-detail-hero h3 {
    color: #fff;
}

/* Besuchsdatum */
.vah-detail-hero .vah-visited,
.vah-detail-hero .vah-visited * {
    color: #fff;
}

/* Ausflugsbeschreibung */
.vah-detail-hero .vah-description,
.vah-detail-hero .vah-description p,
.vah-detail-hero .vah-description li {
    color: #fff;
}


/* ===============================
   Dots
=============================== */

.vah-metric-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 6px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.dot.green  { background: #2ecc71; }
.dot.orange { background: #f39c12; }
.dot.red    { background: #e74c3c; }

.dot.empty {
    background: #666;
    opacity: 0.6;
}

/* ===============================
   Months
=============================== */


.vah-months {
	display: flex;
	gap: 6px;
	margin: 12px 0;
}

.vah-month {
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	line-height: 22px;
	border-radius: 4px;
	background: #666;
	color: #222;
}

.vah-month.inactive {
	background: #CCC;
	color: #CCC;
}

.vah-month.januar,
.vah-month.februar,
.vah-month.dezember { background:#4a90e2; }

.vah-month.maerz,
.vah-month.april,
.vah-month.mai { background:#6bbf59; }

.vah-month.juni,
.vah-month.juli,
.vah-month.august { background:#f5a623; }

.vah-month.september,
.vah-month.oktober,
.vah-month.november { background:#d35400; }


/* ===============================
   Leerzeilen für Galeriebilder
   ohne Beschreibung
=============================== */

.vah-excerpt {
    line-height: 1.5;
    min-height: calc(1.5em * 4); /* 🔒 garantiert 4 Zeilen */
}

/* Platzhalter nimmt exakt die Höhe ein */
.vah-excerpt-placeholder {
    display: block;
    height: calc(1.5em * 4);
    visibility: hidden;
}


/* ===============================
   Dauer
=============================== */

.vah-duration {
    min-height: 1.6; /* entspricht genau einer Textzeile */
}

.vah-duration-empty {
    visibility: hidden; /* Platz da, aber unsichtbar */
}

.vah-duration-detail {
    margin: 12px 0 20px;
    font-size: 0.95rem;
    color: var(--vah-secondary);
    background: #fff;
    padding: 8px 12px;
    border-left: 4px solid var(--vah-primary);
    border-radius: 4px;
}


/* ===============================
   Textfeld Auflugsbeschreibung
=============================== */

/* Ausflugsbeschreibung – soll immer umbrechen */
.vah-ausflugsbeschreibung {
  min-width: 0;              /* wichtig, falls in Flex/Grid */
}

.vah-ausflugsbeschreibung,
.vah-ausflugsbeschreibung p,
.vah-ausflugsbeschreibung li {
  white-space: normal;
  overflow-wrap: anywhere;   /* bricht notfalls auch ohne "gute" Leerzeichen */
  word-break: break-word;    /* Safari-Fallback */
  hyphens: auto;
}


/* ===============================
   Drag & Drop in Eingabemaske
=============================== */

/* Drag & Drop Handle für Fotos */
#fotos_repeat .vah-drag-handle{
  cursor: move;
  float: right;
  font-size: 18px;
  line-height: 1;
  opacity: .65;
  user-select: none;
  padding: 2px 6px;
}

/* Platzhalter beim Ziehen */
#fotos_repeat .vah-sort-placeholder{
  border: 2px dashed #bbb;
  background: #f6f7f7;
  margin-bottom: 10px;
  height: 60px;
}

/* Drag-Handle für Links und Besuche (Fotos hast du vermutlich schon) */
#links_repeat .vah-drag-handle,
#besuche_repeat .vah-drag-handle{
  cursor: move;
  float: right;
  font-size: 18px;
  line-height: 1;
  opacity: .65;
  user-select: none;
  padding: 2px 6px;
}

/* Placeholder (falls nicht schon vorhanden) */
.vah-sort-placeholder{
  border: 2px dashed #bbb;
  background: #f6f7f7;
  margin-bottom: 10px;
  height: 60px;
}

/* ===============================
   Rechtsklick ist JS
=============================== */

/* Rechtsklick ist JS – aber Drag-Optik/Markieren zusätzlich erschweren */
.vah-thumb img,
.vah-item img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

img.vah-protect-image {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ===============================
   Anzahl Routen
=============================== */

.vah-map-wrap {
  position: relative;
  margin-bottom: 30px;
  display:flex;
  gap:16px;
  align-items:center;
}

#vah-map {
  flex:1;	
  height: 500px; /* Kartenhöhe */
}

.vah-route-count {
  transform: translateX(-10px);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none; /* Karte bleibt bedienbar */
  min-width:200px;
  text-align:right;
  font-weight:600;
  white-space:nowrap;
   
}

.vah-map-wrap{
  width: calc(100% + 10px);	
  margin-left: 0px;
  margin-right: -5px;
  display:flex;
  gap:16px;
  align-items:center;         /* vertikal zentriert zur Kartenhöhe */
  margin-bottom:30px;
}

#vah-map,
#vah-map.vah-map{
  width: 100% !important;
  display: block;
}

/* ===============================
   Links
=============================== */

.vah-links-heading{
  margin: 0 0 14px 0;
  font-size: var(--vah-links-title-size, clamp(20px, 4vw, 20px));
  font-weight: var(--vah-links-title-weight, 400);
  color: var(--vah-links-title-color, #fff);
  line-height: 1.05;
}

/* Links-Box wieder volle Breite */
.vah-links-section{
  width: 100%;
  max-width: none;
}

.vah-links-table-wrapper{
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

.vah-links-table{
  width: 100%;
  table-layout: fixed; /* optional, stabilere Spalten */
}

.vah-links-section,
.vah-links-table-wrapper{
  align-self: stretch;
  flex: 0 0 100%;
}

/* ===============================
   Besucht am
=============================== */

.vah-timeline-heading{
  margin: 0 0 16px 0;
  font-size: var(--vah-timeline-title-size, clamp(20px, 4vw, 20px));
  font-weight: var(--vah-timeline-title-weight, 400);
  color: var(--vah-timeline-title-color, #fff);
  line-height: 1.05;
}

.vah-timeline-section,
.vah-timeline,
.vah-timeline-line-wrap{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Falls Parent in Oxygen Flex ist */
.vah-timeline-section{
  align-self: stretch;
  flex: 0 0 100%;
}


/* ===============================
   Galerie
=============================== */

.vah-gallery-heading{
  margin: 0 0 16px 0;
  font-size: var(--vah-gallery-title-size, clamp(30px, 4vw, 30px));
  font-weight: var(--vah-gallery-title-weight, 400);
  color: var(--vah-gallery-title-color, #fff);
  line-height: 1.05;
  padding-top: 6px;            /* ✅ optional: etwas Luft nach oben */
  display: block;
}

.vah-gallery-section,
.vah-gallery-grid{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* gleiche Kartenhöhe: mindestens 4 Zeilen Caption */
.vah-gallery-caption{
  min-height: calc(1.35em * 2);
  line-height: 1.35;
}

/* Falls Parent in Oxygen Flex ist */
.vah-gallery-section{
  align-self: stretch;
  flex: 0 0 100%;
}

/* ===============================
   Button GPX Download
=============================== */

.vah-gpx-button{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  text-decoration:none;
  font-weight:600;
}
.vah-gpx-button:hover{
  transform: translateY(-1px);
}


/* ===============================
   Rating
=============================== */

/* Sterne-Grösse (Frontend) */
.vah-rating-front{
  font-size: 24px;   /* <-- hier die Grösse */
  line-height: 1;
}


/* ===============================
   Single Map
=============================== */

/* Single-Ausflugsziel: Höhenprofil + Stats NICHT full width ziehen */
.single-ausflugsziel .vah-map-below{
  width: min(100%, 800px);   /* << hier Wunschbreite setzen */
  margin: 0 auto;
  padding: 0 16px;            /* etwas Luft am Rand */
  box-sizing: border-box;
}

/* Inhalte sollen innerhalb des Wrappers sauber füllen */
.single-ausflugsziele .vah-map-below .vah-elevation-wrap,
.single-ausflugsziele .vah-map-below .vah-gpx-stats-wrap{
  width: 100%;
}

/* Falls Leaflet-Elevation intern ebenfalls eine fixe Breite setzt */
.single-ausflugsziele .vah-map-below .leaflet-elevation{
  width: 100% !important;
  max-width: 100% !important;
}

/* Reset-Button kompakter (falls er zu viel Abstand macht) */
.vah-map-reset-single{
  margin: 0 0 6px 0;
}

/* Leaflet-Elevation macht teils eigene Abstände → weg damit */
.vah-route-elevation .leaflet-elevation{
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ===============================
   Foto Vorschau in Eingabemaske 
=============================== */

.vah-foto-thumb-wrap { display:inline-block; margin:0 8px 0 8px; vertical-align:middle; }
.vah-foto-thumb { width:80px; height:auto; border-radius:4px; border:1px solid #ccc; }

/* ===============================
   Tooltop bei Marker in 
   der Übersichtskarte 
=============================== */

.leaflet-tooltip.vah-marker-tooltip{
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.leaflet-tooltip.vah-marker-tooltip:before{
  border-top-color: rgba(0,0,0,0.85);
}


/* ===============================
   Zusätzliche Marker auf Routenmap 
=============================== */

.vah-marker-addresses{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.vah-address-card{
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.vah-address-left{ min-width: 220px; }
.vah-address-title{ font-size:22px; font-weight:700; margin:0 0 6px; }
.vah-address-lines{ font-size:18px; line-height:1.35; }

.vah-address-right .vah-addr-row{
  margin: 4px 0;
  font-size:18px;
}

.vah-address-right a{
  text-decoration: underline;
}

@media (max-width: 600px){
  .vah-address-card{ flex-direction:column; }
}

.vah-extra-divicon {
  font-size: 22px;
  line-height: 22px;
  transform: translate(-2px, -2px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Popups immer über den Nadeln */
.leaflet-pane.leaflet-marker-pane { z-index: 600 !important; }
.leaflet-pane.leaflet-tooltip-pane { z-index: 650 !important; }
.leaflet-pane.leaflet-popup-pane  { z-index: 700 !important; }

/* optional, falls ein Theme/Plugin am Popup z-index rumspielt */
.leaflet-popup { z-index: 701 !important; }


/* ===============================
   📌 Reissnadel Einstellungen 
=============================== */
.vah-extra-divicon{
  background: transparent;
  border: 0;
}

.vah-extra-divicon .vah-extra-pin{
  display: block;
  font-size: 30px;      /* HIER ist die sichtbare Grösse */
  line-height: 30px;
}

/* ===============================
   📌 Reissnagel Adresse & Kontakt 
=============================== */

.vah-pin-divicon{
  background: transparent !important;
  border: none !important;
}

.vah-pin-divicon .vah-pin-svg{
  width: 40px;
  height: 40px;
  display: block;
}

/* Farbe zentral steuerbar */
.vah-pin-address{
  --vah-pin-color: #1e73be;
  --vah-pin-light: #7cc3ff;
  --vah-pin-dark:  #0f4f8a;
}

.vah-address-divicon { background: transparent !important; border: 0 !important; }
.vah-address-pin { font-size: 28px; line-height: 34px; display:block; }


/* Container vom divIcon */
.vah-address-divicon,
.vah-extra-divicon {
  background: transparent;
  border: 0;
}

/* Das Emoji selbst */
.vah-address-pin {
  display: inline-block;
  font-size: 28px;
  line-height: 1;

  /* ✅ X/Y Verschiebung (Pixel) */
  transform: translate(var(--vah-pin-x, 0px), var(--vah-pin-y, 0px));

  /* ✅ Rot -> Blau “umfärben” */
  filter: hue-rotate(205deg) saturate(3.5) brightness(1.05);

  /* optional etwas “knackiger” */
  /* filter: hue-rotate(205deg) saturate(4) contrast(1.05) brightness(1.05); */
}

/* Hier stellst du die Verschiebung für Adresse ein */
.vah-address-divicon { 
  --vah-pin-x: 0px; 
  --vah-pin-y: 0px; 
}

/* optional: Extra-Pins separat verschieben (falls du willst) */
.vah-extra-divicon .vah-extra-pin {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  transform: translate(var(--vah-pin-x, 0px), var(--vah-pin-y, 0px));
}
.vah-extra-divicon { 
  --vah-pin-x: 0px; 
  --vah-pin-y: 0px; 
}

/* ===============================
   Adresse-Karten: Highlight wenn Marker geklickt 
   =============================== */

.vah-address-card{
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.vah-address-card.is-active{
  background: rgba(211, 47, 47, .08);           /* leicht rot */
  box-shadow: 0 0 0 2px rgba(211, 47, 47, .35); /* Rahmen */
  transform: translateY(-1px);
}

/* kurzer “Pulse”-Effekt */
@keyframes vahAddrPulse{
  0%   { box-shadow: 0 0 0 0 rgba(211, 47, 47, .35); }
  100% { box-shadow: 0 0 0 18px rgba(211, 47, 47, 0); }
}
.vah-address-card.is-pulse{
  animation: vahAddrPulse .9s ease-out 1;
}













/* --- Liste --- */
.vah-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Beschreibung (Excerpt) */
.vah-excerpt {
    color: color-mix(in srgb, var(--vah-text) 75%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;

    /* max 4 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#vah-elevation {
    margin-top: 16px;
    border-radius: 12px;
	height: 200px;          /* vorher 140 → zu klein */
    padding-top: 16px;      /* Platz für Achsen & Tooltip */
    /*overflow: hidden;*/
	overflow: visible;      /* WICHTIG */
}

/* Icons */
.vah-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.vah-term-parent {
  margin-bottom: 6px;
}

.vah-term-children {
  margin-left: 18px;
}

.vah-dd {
  position: relative;
  display: inline-block;
}

.vah-dd-toggle {
  padding: 6px 10px;
  border-radius: 6px;
  background: #2f3e4e;
  color: #fff;
  border: none;
  cursor: pointer;
}

.vah-dd-panel {
  display: none;
  position: absolute;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.vah-dd.open .vah-dd-panel {
  display: block;
}

.vah-dd-children {
  margin-left: 18px;
}

.vah-tree-children {
    padding-left: 18px;
}

.vah-tree-children label {
    display: block;
    font-weight: normal;
}

/* Timeline: Datum + Text */
.vah-timeline,
.vah-timeline-date,
.vah-timeline-content {
    color: #fff !important;
}

/* =========================================================
   VAH – Adressen: gemeinsame Steuerung (ALT + NEU)
   -> NUR HIER Werte ändern
   ========================================================= */
:root{
  /* Schrift */
  --vah-addr-title: 14px;     /* Titel/Heading */
  --vah-addr-text:  14px;     /* linke Spalte (Adresse) */
  --vah-addr-row:   14px;     /* rechte Spalte (Kontaktzeilen) */

  /* Box */
  --vah-addr-radius: 6px;     /* Radius ALT+NEU */
  --vah-addr-gap:    10px;    /* Abstand zwischen Spalten */
  --vah-addr-rightw: 190px;   /* Breite rechte Spalte (Grid) */
  --vah-addr-pad-y:  16px;    /* Innenabstand oben/unten */
  --vah-addr-pad-x:  12px;    /* Innenabstand links/rechts */

  /* Abstände innen */
  --vah-addr-row-gap: 0px;    /* Abstand zwischen Kontaktzeilen (rechts) */
  --vah-addr-icon-gap: 6px;   /* Abstand Icon ↔ Text */
  --vah-addr-underline-offset: 2px;

  /* Look (ALT-ähnlich) */
  --vah-addr-bg: #ffffff;     /* ALT-Hintergrund */
  --vah-addr-shadow: none;    /* ALT hat i.d.R. keinen Shadow */
  --vah-addr-backdrop: none;  /* ALT: kein blur */
}

/* =========================================================
   NEU: Zusatz-Adresskarten (deine .vah-address-card)
   (Scoped: nur innerhalb .vah-marker-addresses)
   ========================================================= */
.vah-marker-addresses .vah-address-card{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,var(--vah-addr-rightw)) !important;
  column-gap: var(--vah-addr-gap) !important;
  row-gap: 6px !important;

  padding: var(--vah-addr-pad-y) var(--vah-addr-pad-x) !important;
  border-radius: var(--vah-addr-radius) !important;

  background: var(--vah-addr-bg) !important;
  box-shadow: var(--vah-addr-shadow) !important;

  backdrop-filter: var(--vah-addr-backdrop) !important;
  -webkit-backdrop-filter: var(--vah-addr-backdrop) !important;

  box-sizing: border-box !important;
}

.vah-marker-addresses .vah-address-title{
  font-size: var(--vah-addr-title) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 6px 0 !important;
}

.vah-marker-addresses .vah-address-lines{
  font-size: var(--vah-addr-text) !important;
  line-height: 1.35 !important;
}

.vah-marker-addresses .vah-address-right{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vah-addr-row-gap) !important;
}

.vah-marker-addresses .vah-addr-row{
  display: flex !important;
  align-items: center !important;
  gap: var(--vah-addr-icon-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--vah-addr-row) !important;
  line-height: 1.25 !important;
}

.vah-marker-addresses .vah-addr-ico{
  width: 26px !important;
  flex: 0 0 26px !important;
  text-align: center !important;
}

.vah-marker-addresses .vah-addr-row a{
  text-decoration: underline;
  text-underline-offset: var(--vah-addr-underline-offset);
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 650px){
  .vah-marker-addresses .vah-address-card{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ALT: Standard „Adresse & Kontakt“
   (bei dir sitzt Box-Look auf .vah-address-grid)
   ========================================================= */
#vah-marker-addresses .vah-address-grid,
.vah-address-section .vah-address-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,var(--vah-addr-rightw)) !important;
  column-gap: var(--vah-addr-gap) !important;
  row-gap: 6px !important;

  padding: var(--vah-addr-pad-y) var(--vah-addr-pad-x) !important;
  border-radius: var(--vah-addr-radius) !important;

  background: var(--vah-addr-bg) !important;
  box-shadow: var(--vah-addr-shadow) !important;

  box-sizing: border-box !important;
}

#vah-marker-addresses .vah-address-col,
.vah-address-section .vah-address-col{
  font-size: var(--vah-addr-text) !important;
  line-height: 1.35 !important;
}

#vah-marker-addresses .vah-contact-col,
.vah-address-section .vah-contact-col{
  font-size: var(--vah-addr-row) !important;
  line-height: 1.25 !important;
}

/* falls rechts Zeilen als <p> oder <div> kommen: */
#vah-marker-addresses .vah-contact-col p,
#vah-marker-addresses .vah-contact-col div,
.vah-address-section .vah-contact-col p,
.vah-address-section .vah-contact-col div{
  margin: 0 0 var(--vah-addr-row-gap) 0 !important;
}

#vah-marker-addresses .vah-contact-col a,
.vah-address-section .vah-contact-col a{
  text-decoration: underline;
  text-underline-offset: var(--vah-addr-underline-offset);
  overflow-wrap: anywhere;
}

#vah-marker-addresses .vah-address-heading,
.vah-address-section .vah-address-heading{
  font-size: var(--vah-addr-title) !important;
  line-height: 1.15 !important;
  margin: 0 0 10px 0 !important;
}

/* ALT: Titel "Adresse & Kontakt" */
#vah-marker-addresses .vah-address-heading,
.vah-address-section .vah-address-heading{
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

@media (max-width: 820px){
  #vah-marker-addresses .vah-address-grid,
  .vah-address-section .vah-address-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Host: neu (data-attr) + legacy (id) + falls du doch mal die class nutzt */
[data-vah-marker-addresses="1"] .vah-address-card,
#vah-marker-addresses .vah-address-card,
.vah-marker-addresses .vah-address-card{
  background-color: #fff !important;   /* wichtig: background-color */
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   FIX: Highlight muss stärker sein als die Karten-Basis
   (weil Basis-Regeln später mit !important kommen)
   ========================================================= */

.vah-marker-addresses .vah-address-card.is-active{
  background: rgba(250, 225, 225, 1.0) !important;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, .45) inset, 0 10px 24px rgba(0,0,0,.18) !important;
  transform: translateY(-1px);
}

.vah-marker-addresses .vah-address-card.is-pulse{
  animation: vahAddrPulse .9s ease-out 1;
}

/* =========================================================
   ✅ Highlight Adresse & Kontakt (blauer Marker)
   ========================================================= */
:root{
  --vah-addr-blue: 225,225,250;
  --vah-addr-blue1: 30,136,229;
}

.vah-address-section.is-active .vah-address-grid,
#vah-marker-addresses.is-active .vah-address-grid,
[data-vah-marker-addresses="1"].is-active .vah-address-grid{
  background: rgba(var(--vah-addr-blue), 1.0) !important;
  box-shadow: 0 0 0 3px rgba(var(--vah-addr-blue1), .65) inset !important;
  border-radius: var(--vah-addr-radius, 6px) !important;
}

/* kurzer "Pulse" */
@keyframes vahPulseBlue{
  0%   { box-shadow: 0 0 0 0 rgba(var(--vah-addr-blue), .55) inset; }
  100% { box-shadow: 0 0 0 18px rgba(var(--vah-addr-blue), 0) inset; }
}

.vah-address-section.is-pulse .vah-address-grid,
#vah-marker-addresses.is-pulse .vah-address-grid,
[data-vah-marker-addresses="1"].is-pulse .vah-address-grid{
  animation: vahPulseBlue .9s ease-out 1;
}


.vah-filter-dropdown.vah-branch-locked .vah-tree-parent.vah-branch-disabled {
  opacity: 0.45;
}

.vah-filter-dropdown.vah-branch-locked .vah-tree-parent.vah-branch-disabled label {
  cursor: not-allowed;
}


// Anzeige Fremdbild unter dem Bild
.vah-thumb-foreign-text{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:#666;
}


/* ✅ Änderungsdatum in der Übersicht unten rechts */
/* Kachel als Bezugspunkt */
.vah-item{
  position: relative;
  padding-bottom: 34px; /* Platz, damit unten rechts nichts überlappt */
}

/* Änderungsdatum unten rechts */
.vah-modified-date{
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-size: 8px;
  line-height: 1;
  opacity: .75;
  white-space: nowrap;
}