:root {
    /* Neue Basisfarben */
    --tn-trip: #7fd7be;           /* Frisches Mintgrün (Reiseplanung: inspirierend, modern) */
    --tn-travelsegment: #6a8cff;  /* Sanftes Indigo-Blau (Segment: strukturiert, vertrauensvoll) */
    --tn-destination: #ff9a7b;    /* Warmes, rötliches Orange (Destination: einladend, warm) */
    --tn-accommodation: #ffe066;  /* Sonniges Gelb (Unterkunft: freundlich, optimistisch) */
    --tn-transportation: #5ad6ff; /* Klarer Himmelblau (Transport: dynamisch, offen) */
    --tn-activity: #ff6fae;       /* Frisches Pink (Aktivität: energiegeladen, spaßig) */

    /* Starke Varianten */
    --tn-trip-strong: #2e8b6d;           /* Sattes Mintgrün */
    --tn-travelsegment-strong: #2a4d9b;  /* Tiefes Indigo */
    --tn-destination-strong: #ff7f2a;    /* Kräftiges Apricot */
    --tn-accommodation-strong: #e6b800;  /* Goldgelb */
    --tn-transportation-strong: #0099cc; /* Intensives Blau */
    --tn-activity-strong: #d72660;       /* Kräftiges Pink */

    /* Neutral */
    --tn-text-on-dark: #ffffff;
    --tn-text-on-light: #222222;

    /* Ableitungs-Intensitäten */
    --tn-soft-strength: 26%;
    --tn-border-strength: 54%;
    --tn-card-bg-strength: 16%;
}


@media (prefers-color-scheme: dark) {
    :root {
        /* Basisfarben für Dark Mode */
        --tn-trip: #3a6f5a; /* Gedämpftes Mintgrün */
        --tn-travelsegment: #31436e; /* Dunkles Indigo-Blau */
        --tn-destination: #b97a4a; /* Warmes, gedecktes Orange */
        --tn-accommodation: #bfae4e; /* Gedämpftes Goldgelb */
        --tn-transportation: #357a8a; /* Gedämpftes Himmelblau */
        --tn-activity: #98335d; /* Dunkles Pink gemäß Wunsch */
        /* Starke Varianten für Dark Mode */
        --tn-trip-strong: #23503a;
        --tn-travelsegment-strong: #1a2947;
        --tn-destination-strong: #a65c1a;
        --tn-accommodation-strong: #8c7a1a;
        --tn-transportation-strong: #185060;
        --tn-activity-strong: #98335d; /* Ebenfalls angepasst */
        /* Neutral für Dark Mode */
        --tn-text-on-dark: #f5f5f5;
        --tn-text-on-light: #222222;
        /* Intensitäten bleiben gleich */
        --tn-soft-strength: 26%;
        --tn-border-strength: 54%;
        --tn-card-bg-strength: 16%;
    }
}

/* Pastell Vollflächen */
.bg-trip {
    background-color: var(--tn-trip) !important;
}

.bg-travelsegment {
    background-color: var(--tn-travelsegment) !important;
}

.bg-destination {
    background-color: var(--tn-destination) !important;
}

.bg-accommodation {
    background-color: var(--tn-accommodation) !important;
}

.bg-transportation {
    background-color: var(--tn-transportation) !important;
}

.bg-activity {
    background-color: var(--tn-activity) !important;
}

/* Optionale starke Vollflächen */
.bg-strong-trip {
    background-color: var(--tn-trip-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.bg-strong-travelsegment {
    background-color: var(--tn-travelsegment-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.bg-strong-destination {
    background-color: var(--tn-destination-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.bg-strong-accommodation {
    background-color: var(--tn-accommodation-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.bg-strong-transportation {
    background-color: var(--tn-transportation-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.bg-strong-activity {
    background-color: var(--tn-activity-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

/* Soft (tinted) – Tönung aus starken Varianten */
.bg-soft-trip {
    background-color: color-mix(in srgb, var(--tn-trip-strong) var(--tn-soft-strength), transparent) !important;
}

.bg-soft-travelsegment {
    background-color: color-mix(in srgb, var(--tn-travelsegment-strong) var(--tn-soft-strength), transparent) !important;
}

.bg-soft-destination {
    background-color: color-mix(in srgb, var(--tn-destination-strong) var(--tn-soft-strength), transparent) !important;
}

.bg-soft-accommodation {
    background-color: color-mix(in srgb, var(--tn-accommodation-strong) var(--tn-soft-strength), transparent) !important;
}

.bg-soft-transportation {
    background-color: color-mix(in srgb, var(--tn-transportation-strong) var(--tn-soft-strength), transparent) !important;
}

.bg-soft-activity {
    background-color: color-mix(in srgb, var(--tn-activity-strong) var(--tn-soft-strength), transparent) !important;
}

/* Textfarben */
.text-trip {
    color: var(--tn-trip-strong) !important;
}

.text-travelsegment {
    color: var(--tn-travelsegment-strong) !important;
}

.text-destination {
    color: var(--tn-destination-strong) !important;
}

.text-accommodation {
    color: var(--tn-accommodation-strong) !important;
}

.text-transportation {
    color: var(--tn-transportation-strong) !important;
}

.text-activity {
    color: var(--tn-activity-strong) !important;
}

/* Invertierte Textfarben für helle/dunkle Hintergründe */
.text-trip-inverted {
    color: var(--tn-text-on-dark) !important;
}
.text-travelsegment-inverted {
    color: var(--tn-text-on-dark) !important;
}
.text-destination-inverted {
    color: var(--tn-text-on-dark) !important;
}
.text-accommodation-inverted {
    color: var(--tn-text-on-dark) !important;
}
.text-transportation-inverted {
    color: var(--tn-text-on-dark) !important;
}
.text-activity-inverted {
    color: var(--tn-text-on-dark) !important;
}

/* Akzent-Hintergrund + Weiß */
.text-bg-trip {
    background-color: var(--tn-trip-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.text-bg-travelsegment {
    background-color: var(--tn-travelsegment-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.text-bg-destination {
    background-color: var(--tn-destination-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.text-bg-accommodation {
    background-color: var(--tn-accommodation-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.text-bg-transportation {
    background-color: var(--tn-transportation-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

.text-bg-activity {
    background-color: var(--tn-activity-strong) !important;
    color: var(--tn-text-on-dark) !important;
}

/* Border */
.border-trip {
    border: 1px solid var(--tn-trip-strong) !important;
}

.border-travelsegment {
    border: 1px solid var(--tn-travelsegment-strong) !important;
}

.border-destination {
    border: 1px solid var(--tn-destination-strong) !important;
}

.border-destination-bottom {
    border-bottom: 2px solid var(--tn-destination-strong) !important;
}

.border-accommodation {
    border: 1px solid var(--tn-accommodation-strong) !important;
}

.border-accommodation-bottom {
    border-bottom: 2px solid var(--tn-accommodation-strong) !important;
}

.border-transportation {
    border: 1px solid var(--tn-transportation-strong) !important;
}

.border-activity {
    border: 1px solid var(--tn-activity-strong) !important;
}

.border-activity-bottom {
    border-bottom: 2px solid var(--tn-activity-strong) !important;
}

/* Badges */
.badge-trip {
    background: var(--tn-trip-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

.badge-travelsegment {
    background: var(--tn-travelsegment-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

.badge-destination {
    background: var(--tn-destination-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

.badge-accommodation {
    background: var(--tn-accommodation-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

.badge-transportation {
    background: var(--tn-transportation-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

.badge-activity {
    background: var(--tn-activity-strong);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .75rem;
}

/* Karten / Panels */
.card-trip {
    border: 1px solid color-mix(in srgb, var(--tn-trip-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-trip) var(--tn-card-bg-strength), #ffffff);
}

.card-destination {
    border: 1px solid color-mix(in srgb, var(--tn-destination-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-destination) var(--tn-card-bg-strength), #ffffff);
}

.card-travelsegment {
    border: 1px solid color-mix(in srgb, var(--tn-travelsegment-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-travelsegment) var(--tn-card-bg-strength), #ffffff);
}

.card-accommodation {
    border: 1px solid color-mix(in srgb, var(--tn-accommodation-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-accommodation) var(--tn-card-bg-strength), #ffffff);
}

.card-transportation {
    border: 1px solid color-mix(in srgb, var(--tn-transportation-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-transportation) var(--tn-card-bg-strength), #ffffff);
}

.card-activity {
    border: 1px solid color-mix(in srgb, var(--tn-activity-strong) var(--tn-border-strength), #ffffff);
    background: color-mix(in srgb, var(--tn-activity) var(--tn-card-bg-strength), #ffffff);
}