/* ============================================
   Tag – Block Component
   Variants: yellow (hashtag), green (hashtag), torn (label)
   ============================================ */

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}

/* ---- Hashtag Yellow ---- */

.tag--yellow {
    background-color: var(--color-sun-yellow-30);
    color: var(--color-ink);
    border: 1px solid var(--color-sun-yellow);
    border-radius: var(--radius-hand);
    transform: rotate(2deg);
}

/* ---- Hashtag Green ---- */

.tag--green {
    background-color: var(--color-otto-green-20);
    color: var(--color-otto-dark);
    border: 1px solid var(--color-otto-green-50);
    border-radius: var(--radius-hand-alt);
    transform: rotate(-1deg);
}

/* ---- Torn Label ---- */

.tag--torn {
    background-color: var(--color-label-white);
    color: var(--color-papa-rust);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper-lift);
    transform: rotate(1deg);
}

/* ============================================
   Platztyp-Badge – Art des Ortes
   Variants: camping, ferienpark, kombi, clubhotel, freizeitpark
   (Icon + Label; auf Detailseiten-Hero und Übersichtskarten)
   ============================================ */

.platztyp-badge,
.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-hand);
}

.platztyp-badge svg,
.meta-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.platztyp--camping {
    background-color: var(--color-otto-green-20);
    color: var(--color-otto-dark);
    border-color: var(--color-otto-green-50);
}

.platztyp--ferienpark {
    background-color: var(--color-sun-yellow-30);
    color: var(--color-ink);
    border-color: var(--color-sun-yellow);
}

.platztyp--kombi {
    background-color: var(--color-papa-rust-20);
    color: var(--color-paul-brown);
    border-color: var(--color-papa-rust-40);
}

.platztyp--clubhotel {
    background-color: var(--color-map-blue-30);
    color: var(--color-ink);
    border-color: var(--color-map-blue-50);
}

.platztyp--freizeitpark {
    background-color: var(--color-map-land-30);
    color: var(--color-paul-brown);
    border-color: var(--color-map-land-40);
}

/* ============================================
   Meta-Badge – Badge-Leiste am Kartenfuß
   Variants: land, region, marke (+ die .platztyp--* Modifier von oben)
   Als <a> ist der Badge ein Filter-Link auf den passenden Hub, als <span>
   ein stummes Label (wenn es zu dem Wert keinen Hub gibt).
   ============================================ */

.meta-badge--land {
    background-color: var(--color-map-blue-30);
    color: var(--color-ink);
    border-color: var(--color-map-blue-50);
}

.meta-badge--region {
    background-color: var(--color-otto-green-20);
    color: var(--color-otto-dark);
    border-color: var(--color-otto-green-50);
}

.meta-badge--marke {
    background-color: var(--color-papa-rust-20);
    color: var(--color-paul-brown);
    border-color: var(--color-papa-rust-40);
}

/* Only the linked variant reacts to the pointer — a plain label must not
   pretend to be clickable. */
a.meta-badge {
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.meta-badge:hover,
a.meta-badge:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft-ink);
}