/* Schrift und Farben aus dem Website-Projekt (../website/css/styles.css) uebernommen. */
@font-face { font-family: 'Mulish'; src: url('fonts/mulish-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('fonts/mulish-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('fonts/mulish-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('fonts/mulish-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --bg:        #f1f0ee;
    --karte:     #ffffff;
    --rand:      rgba(13, 17, 23, .08);
    --text:      #000000;
    --dunkel:    #0A0A0A;
    --gedimmt:   #5c5c5c;
    --leer:      #f1f0ee;
    --leer-text: #9ca3af;
    --akzent:    #2a77d5;
    --akzent-hover: #2262b8;
    --schatten:  0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);

    /* Flaechen, die sich nicht aus den Grundfarben ableiten lassen */
    --leiste-bg:     rgba(255, 255, 255, .85);
    --leiste-rand:   rgba(0, 0, 0, .09);
    --leiste-schatten: 0 4px 24px rgba(0, 0, 0, .04);
    --menue-bg:      #ffffff;
    --menue-text:    #374151;
    --menue-schatten: 0 8px 40px rgba(0, 0, 0, .10);
    --fuss-bg:       #ffffff;
    --fuss-rand:     rgba(0, 0, 0, .1);
    --fuss-text:     rgba(0, 0, 0, .6);
    --fuss-hover:    #111827;
    --tip-bg:        #0A0A0A;
    --tip-text:      #ffffff;
    --chevron:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* DUNKLE DARSTELLUNG — folgt der Systemeinstellung. Die Website selbst hat keine
   dunkle Palette; diese hier ist aus denselben Grundfarben abgeleitet. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #15181d;
        --karte:     #1c2027;
        --rand:      rgba(255, 255, 255, .10);
        --text:      #e6e9ee;
        --dunkel:    #f4f6f9;
        --gedimmt:   #9aa3af;
        --leer:      #20252d;
        --leer-text: #5c6470;
        --akzent:    #4d90e0;
        --akzent-hover: #6ba6ea;
        --schatten:  0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.28);

        --leiste-bg:     rgba(28, 32, 39, .85);
        --leiste-rand:   rgba(255, 255, 255, .10);
        --leiste-schatten: 0 4px 24px rgba(0, 0, 0, .35);
        --menue-bg:      #232830;
        --menue-text:    #c3cad6;
        --menue-schatten: 0 8px 40px rgba(0, 0, 0, .45);
        --fuss-bg:       #1c2027;
        --fuss-rand:     rgba(255, 255, 255, .1);
        --fuss-text:     rgba(255, 255, 255, .62);
        --fuss-hover:    #ffffff;
        --tip-bg:        #2b313a;
        --tip-text:      #f4f6f9;
        --chevron:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cad6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0 1.5rem;
    background: var(--bg);
    color: var(--text);
    font: 400 15px/1.6 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* KOPFLEISTE — Nav-Pill-Leiste aus ../website/css/styles.css */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -1.5rem;
    padding: 0 20px;
    background: transparent;
    pointer-events: none;
}
.nav-inner {
    max-width: 1400px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 30px;
    background: var(--leiste-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--leiste-rand);
    border-radius: 50px;
    box-shadow: var(--leiste-schatten);
    pointer-events: all;
    flex-wrap: wrap;
}
.nav-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--dunkel);
    text-decoration: none;
}
.nav-logo-img {
    height: 30px;
    width: auto;
    display: block;
    margin-right: 10px;
}
.nav-logo .tld { font-size: .72em; font-weight: 400; color: var(--gedimmt); }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--dunkel); background: var(--bg); }

/* Sprungmarken in die Auswertung — von der Jahreswahl abgesetzt */
.nav-links .sprung {
    margin-left: 6px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--gedimmt);
}
.nav-links .sprung:hover { color: var(--akzent); background: var(--bg); }

/* Die Leiste klebt oben — sonst verschwindet das Sprungziel darunter */
#feriendichte, #mietpreise { scroll-margin-top: 96px; }
.nav-links a.aktiv {
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
}
.nav-links a.aktiv:hover { background: var(--akzent-hover); color: #fff; }

.nav-actions { display: flex; gap: 16px; align-items: center; margin-left: auto; }
.powered {
    color: var(--gedimmt);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.nav-partner-img { height: 38px; width: auto; display: block; position: relative; top: -3px; }

/* EINLEITUNG — Hero-Typografie aus ../website/css/styles.css */
.kopf {
    max-width: 1400px;
    margin: 3rem auto 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.kopf-text { min-width: 0; }
@media (max-width: 900px) {
    .kopf { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.kopf-label {
    display: inline-block;
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.kopf h1 {
    margin: 0 0 20px;
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--dunkel);
}
.kopf h1 em { font-style: italic; font-weight: 400; }
.kopf .sub {
    margin: 0;
    color: var(--gedimmt);
    max-width: min(68ch, 100%);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.7;
}

.legende {
    max-width: 1400px;
    margin: 0 auto 1.2rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.legende-text { color: var(--gedimmt); margin-right: .5rem; font-size: .9rem; font-weight: 600; }
.legende-feld {
    width: 2.2rem;
    text-align: center;
    padding: .2rem 0;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kalender {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.monat {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 16px;
    padding: .6rem .8rem;
    box-shadow: var(--schatten);
}
.monat h2 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--dunkel); }
.raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wt { text-align: center; font-size: .7rem; font-weight: 700; color: var(--gedimmt); padding-bottom: .2rem; }
.tag {
    aspect-ratio: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.tag--leer { background: transparent; cursor: default; }

.auswertung {
    max-width: 1400px;
    margin: 1.5rem auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}
/* Nie mehr als zwei Panels nebeneinander: drei oder vier in einer Reihe werden so schmal,
   dass die Tabellen darin umbrechen. Drei Panels stehen damit als 2 + 1, vier als 2x2. */
@media (min-width: 900px) {
    .auswertung { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Bei genau drei Panels bleibt sonst eine halbe Reihe leer — das dritte nimmt
       stattdessen die volle Breite. Bei vier bleibt es beim 2x2. */
    .auswertung:has(> .panel:nth-child(3)):not(:has(> .panel:nth-child(4))) > .panel:nth-child(3) {
        grid-column: 1 / -1;
    }
}
.panel {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 16px;
    padding: 1.2rem;
    overflow-x: auto;
    box-shadow: var(--schatten);
}
.panel h2 { margin: 0 0 .8rem; font-size: 1rem; font-weight: 700; color: var(--dunkel); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--rand); }
th { color: var(--gedimmt); font-weight: 700; }
tr:last-child td { border-bottom: none; }
td:last-child, th:last-child { text-align: right; }
.leer { color: var(--gedimmt); font-style: italic; }
.code {
    display: inline-block;
    min-width: 2.1rem;
    font-weight: 700;
    color: var(--gedimmt);
    font-size: .8rem;
}
.pill {
    display: inline-block;
    min-width: 1.9rem;
    padding: .1rem .4rem;
    border-radius: 100px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Heatmap — sequentielle Skala aus dem Akzentblau #2a77d5 = hsl(213 67% 50%) */
.d0  { background: var(--leer);            color: var(--leer-text); }
.d1  { background: hsl(213 55% 93%);       color: #10315a; }
.d2  { background: hsl(213 56% 89%);       color: #10315a; }
.d3  { background: hsl(213 57% 85%);       color: #10315a; }
.d4  { background: hsl(213 58% 80%);       color: #10315a; }
.d5  { background: hsl(213 59% 76%);       color: #10315a; }
.d6  { background: hsl(213 60% 72%);       color: #10315a; }
.d7  { background: hsl(213 61% 68%);       color: #10315a; }
.d8  { background: hsl(213 62% 64%);       color: #10315a; }
.d9  { background: hsl(213 64% 59%);       color: #10315a; }
.d10 { background: hsl(213 65% 55%);       color: #fff; }
.d11 { background: hsl(213 66% 51%);       color: #fff; }
.d12 { background: hsl(213 67% 47%);       color: #fff; }
.d13 { background: hsl(213 68% 43%);       color: #fff; }
.d14 { background: hsl(213 70% 38%);       color: #fff; }
.d15 { background: hsl(213 71% 34%);       color: #fff; }
.d16 { background: hsl(213 72% 30%);       color: #fff; }

/* FUSSZEILE — schmale Variante von .footer-bottom aus ../website/css/styles.css */
footer {
    margin: 3.5rem -1.5rem 0;
    padding: 24px 1.5rem;
    background: var(--fuss-bg);
    border-top: 1px solid var(--fuss-rand);
    color: var(--fuss-text);
    font-size: .92rem;
}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.footer-herz { white-space: nowrap; }
.footer-links { display: flex; gap: 20px; }
/* Rot des Partnerlogos, damit das Herz nicht als Fremdkoerper wirkt */
.footer-herz .herz { color: #d43f3f; }
footer a { color: var(--fuss-text); text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--fuss-hover); text-decoration: underline; }

/* BUNDESLAND-WOLKE — Badges neben der Einleitung, je Land eine eigene Adresse */
.land-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.land-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 14px;
    border: 1px solid var(--rand);
    border-radius: 100px;
    background: var(--karte);
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: var(--schatten);
    transition: border-color .2s, transform .2s, background .2s, color .2s;
}
.land-badge:hover { border-color: var(--akzent); transform: translateY(-1px); }
.land-badge .zahl {
    min-width: 2.1rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--bg);
    color: var(--gedimmt);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.land-badge.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.land-badge.aktiv .zahl { background: rgba(255, 255, 255, .22); color: #fff; }

/* BUNDESLAND-DROPDOWN in der Kopfleiste */
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: color .2s, background .2s;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after {
    content: '';
    width: 14px;
    height: 14px;
    background-image: var(--chevron);
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform .2s;
}
.nav-dropdown[open] > summary { background: var(--bg); }
.nav-dropdown[open] > summary::after { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    background: var(--menue-bg);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 8px;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--menue-schatten);
}
.nav-dropdown-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 400;
    color: var(--menue-text);
    text-decoration: none;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--bg); color: var(--dunkel); }
.nav-dropdown-menu a.aktiv { color: var(--akzent); font-weight: 700; }
.nav-dropdown-menu hr { border: none; border-top: 1px solid var(--rand); margin: 8px 4px; }

/* SCHWELLENWAHL — Links statt Formular, damit jede Stufe eine Adresse hat */
.schwelle-wahl {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: var(--gedimmt);
    font-size: .88rem;
}
.schwelle-pill {
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid var(--rand);
    color: var(--text);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .2s, border-color .2s, color .2s;
}
.schwelle-pill:hover { border-color: var(--akzent); color: var(--akzent); }
.schwelle-pill.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Ferienzeitraeume: die Rohbezeichnung des Landes hinter der Saison */
.rohname { color: var(--gedimmt); font-weight: 400; font-size: .82rem; }
tr.summe td { font-weight: 700; border-top: 1px solid var(--rand); }

/* Kurze Einordnung unter jeder Tabelle */
.panel-hinweis {
    margin: .9rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--rand);
    color: var(--gedimmt);
    font-size: .82rem;
    line-height: 1.6;
}
.panel-hinweis b { font-weight: 700; color: var(--text); }

/* MOBIL — die Kopfleiste bricht in zwei Zeilen: Marke und Partnerlogo oben,
   Jahres- und Landwahl darunter. Body-Rand, Leiste und Fusszeile haengen zusammen:
   der negative Rand von nav/footer muss den Rand des Body ausgleichen. */
@media (max-width: 780px) {
    body { padding: 0 1rem; }
    nav { margin: 0 -1rem; padding: 0 10px; }
    footer { margin: 2.5rem -1rem 0; padding: 20px 1rem; }

    .nav-inner {
        gap: 10px 12px;
        padding: 12px 16px;
        border-radius: 24px;
    }
    .nav-logo { font-size: 1.15rem; }
    .nav-logo-img { height: 27px; margin-right: 8px; }

    /* dritte Position erzwingt den Umbruch in die zweite Zeile */
    .nav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 4px; }
    .nav-links a { padding: 7px 14px; font-size: .92rem; }

    .nav-actions { gap: 8px; }
    .powered { font-size: .66rem; }
    .nav-partner-img { height: 30px; top: 0; }

    .nav-dropdown > summary { padding: 7px 14px; font-size: .92rem; }
    /* nach links ausrichten, sonst laeuft das Menue aus dem Bild */
    .nav-dropdown-menu {
        left: 0;
        right: auto;
        min-width: 0;
        width: calc(100vw - 72px);
        max-width: 320px;
    }

    .kopf { margin: 2rem auto; }
    .monat, .panel { border-radius: 14px; }
}

@media (max-width: 420px) {
    .nav-logo { font-size: 1.05rem; }
    .nav-logo-img { height: 24px; }
    .nav-partner-img { height: 26px; }
    .powered { display: none; }
}

/* PREISLISTEN-VORSCHLAG */
.preisliste {
    max-width: 1400px;
    margin: 1rem auto 0;
    display: grid;
    gap: 1rem;
}
.preisliste table { font-size: .98rem; }
.preisliste th { font-size: .9rem; }
.preisliste td, .preisliste th { vertical-align: top; padding: .6rem .4rem; }
.preisliste td:last-child, .preisliste th:last-child { text-align: left; }
.saison-punkt {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: baseline;
}
.saison-punkt.haupt    { background: hsl(213 72% 30%); }
.saison-punkt.zwischen { background: hsl(213 65% 55%); }
.saison-punkt.neben    { background: hsl(213 55% 93%); border: 1px solid var(--rand); }
.zeitraum {
    display: block;
    width: fit-content;
    margin: 0 0 4px;
    padding: 3px 11px;
    border-radius: 100px;
    background: var(--bg);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.preisliste .chrono td:first-child { white-space: nowrap; }
.preisliste .chrono td:last-child, .preisliste .chrono th:last-child { text-align: right; }

@media (max-width: 620px) {
    .preisliste th.zeitraeume, .preisliste td.zeitraeume { display: none; }
}

/* TEILEN-MENUE in der Kopfleiste */
.teilen > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 100px;
    border: 1px solid var(--rand);
    background: var(--karte);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s;
}
.teilen > summary::-webkit-details-marker { display: none; }
.teilen > summary:hover { border-color: var(--akzent); color: var(--akzent); }
.teilen[open] > summary { border-color: var(--akzent); color: var(--akzent); }
.teilen > summary svg { width: 15px; height: 15px; flex-shrink: 0; }
.teilen .nav-dropdown-menu { min-width: 210px; }
.teilen .nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; }
.teilen .nav-dropdown-menu svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }

/* TOOLTIPS — ersetzen die title-Attribute: der native Tooltip erscheint traege,
   ist unformatiert und laesst sich nicht an die Heatmap angleichen.
   Beide Pseudo-Elemente sind immer da, damit sich das Einblenden animieren laesst. */
[data-tip] { position: relative; }
[data-tip]::after,
[data-tip]::before {
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
    z-index: 60;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: 232px;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--tip-bg);
    color: var(--tip-text);
    font: 500 .76rem/1.5 'Mulish', sans-serif;
    letter-spacing: .1px;
    text-align: left;
    white-space: pre-line;   /* die Zeilenumbrueche aus dem Attribut bleiben erhalten */
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translate(-50%, 4px);
    border: 6px solid transparent;
    border-top-color: var(--tip-bg);
}
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: .05s;
}

/* In der ersten Kalenderzeile ist oben kein Platz — dort klappt der Tooltip nach unten */
.raster .tag:nth-child(-n+14)[data-tip]::after {
    bottom: auto;
    top: calc(100% + 9px);
}
.raster .tag:nth-child(-n+14)[data-tip]::before {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: var(--tip-bg);
}

/* Am Zeilenrand wuerde die Blase aus der Monatskarte laufen */
.raster .tag:nth-child(7n+1)[data-tip]::after { left: 0; transform: translate(0, 4px); }
.raster .tag:nth-child(7n+1)[data-tip]:hover::after { transform: translate(0, 0); }
.raster .tag:nth-child(7n)[data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.raster .tag:nth-child(7n)[data-tip]:hover::after { transform: translate(0, 0); }

/* Beruehrung kennt kein Hover — dort bleibt der Tooltip aus */
@media (hover: none) {
    [data-tip]::after, [data-tip]::before { display: none; }
}

/* FEIERTAGE — die Laenderkette ist der breiteste Teil und muss umbrechen duerfen,
   sonst schiebt sie die ganze Tabelle in den waagerechten Bildlauf. */
.gilt-in { text-align: left !important; }
.codes { display: flex; flex-wrap: wrap; gap: 3px; }
.codes .code {
    min-width: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bg);
    color: var(--gedimmt);
    font-size: .72rem;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.codes .code:hover { background: var(--akzent); color: #fff; }
td.datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bundesweit, .regional {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: .76rem;
    font-weight: 700;
}
.bundesweit { background: hsl(213 55% 93%); color: hsl(213 72% 30%); }
.regional   { background: var(--bg); color: var(--gedimmt); }

/* Heatmap in der dunklen Darstellung: die Richtung bleibt (wenig Ferien = ruhig,
   viele = kraeftig), nur laeuft die Helligkeit andersherum — auf dunklem Grund
   wuerden die hellen Stufen der Tagansicht blenden. */
@media (prefers-color-scheme: dark) {
    .d0  { background: var(--leer); color: var(--leer-text); }
    .d1   { background: hsl(213 45% 20.0%); color: #cfe0f5; }
    .d2   { background: hsl(213 47% 22.8%); color: #cfe0f5; }
    .d3   { background: hsl(213 48% 25.6%); color: #cfe0f5; }
    .d4   { background: hsl(213 50% 28.4%); color: #cfe0f5; }
    .d5   { background: hsl(213 52% 31.2%); color: #cfe0f5; }
    .d6   { background: hsl(213 53% 34.0%); color: #cfe0f5; }
    .d7   { background: hsl(213 55% 36.8%); color: #cfe0f5; }
    .d8   { background: hsl(213 57% 39.6%); color: #cfe0f5; }
    .d9   { background: hsl(213 58% 42.4%); color: #cfe0f5; }
    .d10  { background: hsl(213 60% 45.2%); color: #07131f; }
    .d11  { background: hsl(213 62% 48.0%); color: #07131f; }
    .d12  { background: hsl(213 63% 50.8%); color: #07131f; }
    .d13  { background: hsl(213 65% 53.6%); color: #07131f; }
    .d14  { background: hsl(213 67% 56.4%); color: #07131f; }
    .d15  { background: hsl(213 68% 59.2%); color: #07131f; }
    .d16  { background: hsl(213 70% 62.0%); color: #07131f; }

    .saison-punkt.haupt    { background: hsl(213 70% 62%); }
    .saison-punkt.zwischen { background: hsl(213 58% 42%); }
    .saison-punkt.neben    { background: hsl(213 45% 22%); }

    .bundesweit { background: hsl(213 45% 24%); color: hsl(213 70% 78%); }
}