/* ============================================================
   international.css – Styles für die /international-Seite
   ============================================================ */

/* ---- Seitenüberschrift ---- */
.int-header {
    margin-bottom: 0.75rem;
}
.int-header h1 {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text, #333);
}
.int-count {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

/* ---- Tabs (gemeinsam für Kontinent und Sorte) ---- */
.int-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}

.int-tab {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    background: #e8efe4;
    color: #3a5a2a;
    border: 1px solid #c5d8b8;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.int-tab:hover {
    background: #d0e6c5;
}
.int-tab--active {
    background: #4e8837;
    color: #fff;
    border-color: #3a6828;
}

/* Sorte-Tabs farblich unterscheiden */
.int-tab--su  { background: #f1f8f0; color: #444; border-color: #c5d8b8; }
.int-tab--sp  { background: #e0f1de; color: #444; border-color: #b0ceae; }
.int-tab--di  { background: #cce6c7; color: #444; border-color: #9ec49a; }
.int-tab--su:hover { background: #d8edce; }
.int-tab--sp:hover { background: #c5e4c2; }
.int-tab--di:hover { background: #aedba9; }
.int-tab--su.int-tab--active { background: #4e8837; color: #fff; border-color: #3a6828; }
.int-tab--sp.int-tab--active { background: #3d7228; color: #fff; border-color: #2d5a1e; }
.int-tab--di.int-tab--active { background: #2e5e1f; color: #fff; border-color: #1f4214; }

/* ---- Toolbar (Sorte-Tabs + Konverter) ---- */
.int-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 8px;
}
.int-tabs--sorte {
    margin-bottom: 0;
}

/* ---- Währungs-/Einheitswähler ---- */
.int-converter {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.int-converter__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.int-converter__select {
    font-size: 0.8rem;
    padding: 3px 6px;
    border: 1px solid #b5cca8;
    border-radius: 3px;
    background: #f8fdf6;
    cursor: pointer;
}

/* ---- Preistabelle ---- */
.int-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.int-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.int-table thead tr {
    background: #4e8837;
    color: #fff;
}
.int-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.int-table th a {
    color: #fff;
    text-decoration: none;
}
.int-table th a:hover {
    text-decoration: underline;
}
.int-th-unit {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.85;
}

/* Körper */
.int-table tbody tr {
    background: #9acd91;   /* Standardfarbe grün (kein Besuchsland) */
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.1s;
}
.int-table tbody tr:hover {
    filter: brightness(0.95);
}

/* highlight-Farbe (gesetzt per data-kuerzel via JS oder CSS) */
.int-table tbody tr[data-highlight="1"] {
    background: #c96969 !important;
}

.int-table td {
    padding: 4px 8px;
    vertical-align: middle;
}

/* Erste Spalte: Ländername */
.int-table td.int-land {
    width: 40%;
    font-weight: 500;
}
.int-table td.int-land a.inter {
    color: #1a3d0e;
    text-decoration: none;
    font-size: 0.82rem;
}
.int-table td.int-land a.inter:hover {
    text-decoration: underline;
}

/* Preisspalten */
.int-table td.int-su { background: rgba(241,248,240,0.6); width: 15%; font-variant-numeric: tabular-nums; text-align: right; }
.int-table td.int-sp { background: rgba(224,241,222,0.6); width: 15%; font-variant-numeric: tabular-nums; text-align: right; }
.int-table td.int-di { background: rgba(204,230,199,0.6); width: 15%; font-variant-numeric: tabular-nums; text-align: right; }

/* Preis-Spaltenköpfe rechtsbündig */
.int-table th.int-th-su,
.int-table th.int-th-sp,
.int-table th.int-th-di { text-align: right; }

.int-table small {
    font-size: 0.68rem;
    color: #666;
    margin-left: 2px;
}

/* Kein Daten / Hinweise */
.int-no-data {
    padding: 1rem;
    color: #666;
    font-style: italic;
}
.int-source-note {
    font-size: 0.72rem;
    color: #888;
    margin-top: 0.5rem;
}


/* ---- Responsive ---- */
@media (max-width: 680px) {
    .int-tabs--kontinent {
        gap: 2px;
    }
    .int-tab {
        padding: 3px 7px;
        font-size: 0.75rem;
    }
    .int-table {
        font-size: 0.75rem;
    }
    .int-table td {
        padding: 3px 5px;
    }
}

/* ---- Weltkarte ---- */
.int-weltkarte {
    margin: 12px 0 16px;
    text-align: center;
}
.int-weltkarte img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: opacity 0.2s ease;
    display: block;
    margin: 0 auto;
}

/* ---- Land-Detail-Ansicht ---- */
.int-back-link {
    display: inline-block;
    margin: 8px 0 16px;
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.9rem;
}
.int-back-link:hover { text-decoration: underline; }

.int-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.int-detail-header h2 { margin: 0; }
.int-detail-flag {
    height: 80px;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.int-detail-block {
    width: 100%;
    min-width: 0; /* verhindert Überlauf im Grid */
}
.int-detail-sorte {
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 8px;
    background: #e8f0fe;
    border-left: 4px solid #1a73e8;
    margin: 0 0 6px;
}
.int-detail-table .int-th-datum  { width: 25%; }
.int-detail-table .int-th-su     { width: 25%; text-align: right; }
.int-detail-table .int-th-quelle { width: 50%; }
.int-detail-table td.int-td-preis { text-align: right; font-variant-numeric: tabular-nums; }