/* ==========================================================================
   Ferienkalender – die Gestaltung
   --------------------------------------------------------------------------
   INHALT  Zuoberst die Hausschrift Gibson, dann alle Farben, Grössen und
           Logo-Angaben als CSS-Variablen in :root. Darunter der Zeitstrahl,
           die Kacheln, die Pop-ups, das Tutorial und die Fusszeile.
   ABLAUF  Ein Auftritt überschreibt unter :root[data-theme="…"] nur, was sich
           unterscheidet. Welcher gilt, setzt theme.js vor dem ersten Zeichnen.
   PFLEGE  Von Hand. Ein neuer Auftritt braucht einen kopierten data-theme-Block
           (Anleitung in README.md). Sonst nichts.
   ========================================================================== */

/* ──────────────────────────────── Schrift ────────────────────────────── */

/* Canada Type Gibson, die Hausschrift von Brandnamic. Die Dateien liegen in
   fonts/ und stammen aus dem Site-Package von brandnamic.com – lokal geladen,
   damit die Seite ausser für den Cookie-Banner nie ins Netz geht.
   Die Familie endet bei 500; das ist in der Marke das Fett. Darum arbeitet
   dieses Stylesheet nur mit 300, 400 und 500 und nie mit 600 oder 700 – sonst
   rechnete der Browser ein plumpes Kunstfett dazu. Der Schnitt 200 steht der
   Vollständigkeit halber da; solange ihn niemand anspricht, lädt er nicht. */

@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("fonts/Gibson_v4-Light.woff2") format("woff2");
}

@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/Gibson_v4-Light.woff2") format("woff2");
}

@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Gibson_v4-Light.woff2") format("woff2");
}

@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Gibson_v4-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Gibson_v4-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "canada-type-gibson";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Gibson_v4-Regular.woff2") format("woff2");
}

:root {
    --font: "canada-type-gibson", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --page-bg:      #f4f4f4;
    --card-bg:      #ffffff;
    --line:         #e6e6e6;
    --line-soft:    #f0f0f0;
    --ink:          #333333;
    --ink-soft:     #6b6b6b;
    --ink-mute:     #9b9b9b;
    --weekend-bg:   #fafafa;
    --nodata-bg:    #f2f2f2;   /* Band, wo ein Land keine Daten mehr hat */
    --grid-day:     #ededed;   /* leichtes Tagesgitter          */
    --grid-week:    #c4c4c4;   /* Linie je Wochenwechsel        */
    --today:        #3a3a3a;
    --today-line:   #8d8d8d;

    /* Grössen des Kalenders – hier zentral einstellbar */
    --content-max-width: 1700px;
    --label-w:      270px;
    --row1-h:       50px;   /* Hauptländer  */
    --row2-h:       31px;   /* weitere Länder */
    --bar1-h:       32px;
    --bar2-h:       15px;
    --day-w:        43px;   /* Mindestbreite einer Tagesspalte */

    --c-de: #7cc169;
    --c-it: #4ba3e0;
    --c-at: #e8494a;
    --c-ch: #b579c9;
    --c-alt-a: #f5a623;
    --c-alt-b: #fbd08a;

    /* Grundton der Legendenpunkte der Feriendichte */
    --dens-key: #8a8a8a;

    /* Akzent für das Tutorial */
    --accent:      #2f7fd0;
    --accent-dark: #2569ad;
    --accent-soft: #eef5fc;
    --accent-line: #cfe2f5;

    /* Akzent für den Excel-Export */
    --xls:      #1d7044;
    --xls-soft: #edf6f1;
    --xls-line: #cbe4d7;

    /* Logo je Auftritt: Datei, Breite und Seitenverhältnis. Die Breiten gehen
       auseinander, weil die Verhältnisse es tun – so bleiben beide gleich hoch. */
    --logo-url:   url("logo.svg");
    --logo-ratio: 284 / 75;
    --logo-w:     240px;
}

/* ==========================================================================
   Farbschemata
   --------------------------------------------------------------------------
   Ein Schema überschreibt nur, was sich unterscheidet. Wer ein drittes braucht,
   kopiert den Block, vergibt einen neuen Namen und trägt ihn mit seiner Adresse
   in THEMES (theme.js) ein. An der Kalenderlogik ändert sich nichts.
   ========================================================================== */

/* Garda Trentino: Orange und Grün im Wechsel für die grossen Länder, Blau und
   ein helles Blau für die kleinen. Orange, Grün und Blau sind die Werte aus
   dem Logo (logo-garda.svg), stammen also aus der Marke selbst. */
:root[data-theme="garda"] {
    --logo-url:   url("logo-garda.svg");
    --logo-ratio: 2466 / 796;
    --logo-w:     200px;

    --c-de: #efa032;
    --c-it: #89b233;
    --c-at: #efa032;
    --c-ch: #89b233;
    --c-alt-a: #4ba5dd;
    --c-alt-b: #d6e8f4;

    /* Das Logoblau ist für weisse Schrift zu hell – der Akzent ist dieselbe
       Farbe, nur dunkler. */
    --accent:      #2b8fc9;
    --accent-dark: #24789f;
    --accent-soft: #eaf5fb;
    --accent-line: #c9e5f4;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--page-bg);
    color: var(--ink);
    font: 300 18px/1.45 var(--font);
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ────────────────────────────── Kopfzeile ────────────────────────────── */

.topbar {
    background: var(--page-bg);
    padding: 18px 0 20px;
}

/* Gleiche Breite und Innenabstände wie .page – so steht das Logo bündig mit
   der linken Kante der Kalenderkarte. */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 30px;
}

/* Das Logo ist ein Kasten mit Hintergrundbild, kein <img>: so kommt die Datei
   aus --logo-url, steht beim ersten Zeichnen richtig, und der Browser lädt nur
   die eine. --logo-ratio hält den Platz frei, damit nichts springt. */
.logo {
    width: var(--logo-w);
    aspect-ratio: var(--logo-ratio);
    background: var(--logo-url) no-repeat center / contain;
    flex: 0 0 auto;
}

.topbar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.toprow {
    display: flex;
    align-items: center;
    gap: 16px;
}

.langswitch {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--ink-mute);
}

.langswitch button { color: var(--ink-mute); }
.langswitch button:hover { color: var(--ink-soft); }
.langswitch button.is-active { color: var(--ink); font-weight: 500; }
.langsep { color: #cfcfcf; }

.controls {
    display: flex;
    align-items: center;
    gap: 18px;
}

.control { position: relative; }

.control-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 268px;
    height: 48px;
    padding: 0 15px 0 19px;
    background: #fbfbfb;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    white-space: nowrap;
}

.control-btn:hover { background: #fff; border-color: #d6d6d6; }

.control-label { color: var(--ink-mute); font-size: 17px; }
.control-value { color: var(--ink); font-size: 17px; }

.chev, .cal-icon {
    width: 24px;
    height: 24px;
    margin-left: auto;
    color: #a8a8a8;
    stroke-width: 1.7;
}

.cal-icon { width: 21px; height: 21px; }

/* ─────────────────────────── Länderfilter-Menü ─────────────────────────── */

.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    min-width: 298px;
    padding: 20px 25px 23px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 33px rgba(0, 0, 0, .16);
}

.dropdown.is-right { left: auto; right: 0; }

/* Die Gruppen trennen "Alle", die gross und die klein dargestellten Länder –
   der Abstand ist der einzige Hinweis darauf, deshalb etwas grosszügiger. */
.dropdown .group + .group { margin-top: 21px; }
.dropdown .checkline + .checkline { margin-top: 13px; }

/* ── Länderfilter: Häkchen links, Darstellungsgrösse rechts ── */

.fl-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fl-row + .fl-row { margin-top: 13px; }
.fl-row .checkline { flex: 1 1 auto; min-width: 0; }

/* Kleine Ausgabe des Ansichtsschalters unter dem Kalender */
.sizeswitch {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 2px;
    background: #ededed;
    border-radius: 5px;
}

.sizeswitch button {
    padding: 3px 9px;
    font-size: 13px;
    color: #9a9a9a;
    border-radius: 3px;
}

.sizeswitch button:hover { color: #6a6a6a; }

.sizeswitch button.is-active {
    color: #3d3d3d;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

/* ──────────────────────────── Monatsauswahl ──────────────────────────── */

#goto-menu { min-width: 323px; padding: 15px 18px 18px; }

.mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px 13px;
}

.mp-head .mp-year { font-size: 18px; font-weight: 500; color: #3a3a3a; }

.mp-head button {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a8a8a8;
}

.mp-head button svg { width: 23px; height: 23px; }
.mp-head button:hover { color: #5f5f5f; }

.mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.mp-grid button {
    padding: 10px 5px;
    font-size: 15px;
    letter-spacing: .03em;
    color: #5a5a5a;
    border-radius: 4px;
}

.mp-grid button:hover { background: #f2f2f2; color: #2f2f2f; }

/* Monate vor der Ein-Jahres-Grenze */
.mp-grid button:disabled { color: #cfcfcf; cursor: default; }
.mp-grid button:disabled:hover { background: none; color: #cfcfcf; }

.mp-grid button.is-active {
    background: #3d3d3d;
    color: #fff;
}

.mp-today {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.mp-today button { font-size: 16px; color: #6f6f6f; }
.mp-today button:hover { color: #2f2f2f; }

/* ────────────────────────── Checkbox (eigene Optik) ──────────────────── */

.checkline {
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    user-select: none;
}

.checkline input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkline .box {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkline .box svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
    color: #3d3d3d;
    opacity: 0;
}

.checkline input:checked ~ .box svg { opacity: 1; }
.checkline:hover .box { border-color: #8f8f8f; }

.checkline .name { font-size: 17px; color: var(--ink); }
.checkline.is-main .name,
.checkline.is-all .name { font-weight: 500; }

/* ──────────────────────────────── Seite ──────────────────────────────── */

.page {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 30px 75px;
}

.card {
    background: var(--card-bg);
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 26px 38px 28px;
}

.card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.card-title {
    margin: 0;
    font-size: 29px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #2f2f2f;
    text-align: center;
}

.card-nav {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    gap: 18px;
}

.nav {
    width: 38px;
    height: 43px;
    color: #b4b4b4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav svg { width: 33px; height: 33px; stroke-width: 1.7; }
.nav:hover { color: #6f6f6f; }

/* Am Ende des Wegs zurück: sichtbar da, aber blass und ohne Reaktion. Ganz
   ausblenden würde die Kopfzeile springen lassen. */
.nav:disabled { color: #e2e2e2; cursor: default; }
.nav:disabled:hover { color: #e2e2e2; }

.card-body { overflow-x: auto; }

/* ───────────────────── Legende der Ansicht "Feriendichte" ─────────────── */

.card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 13px 33px;
    padding: 17px 3px 0;
}

.dens-note {
    margin-right: auto;
    font-size: 15px;
    color: #c07a30;
}

.dens-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    color: var(--ink-soft);
}

.dens-legend .dens-title { color: var(--ink-mute); }

.dens-key {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.dens-key i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dens-key);
}

/* ──────────────────────────── Kalendergitter ──────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: var(--label-w) repeat(var(--days), minmax(var(--day-w), 1fr));
    min-width: 1363px;
    margin-top: 14px;
}

.grid > * { min-width: 0; }

/* Wochenkopf ------------------------------------------------------------- */

.wk {
    grid-column: span 7;
    padding: 9px 0 10px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--ink-mute);
    text-align: center;
    white-space: nowrap;
}

/* Tageskopf -------------------------------------------------------------- */

.dh {
    padding: 3px 0 9px;
    text-align: center;
    line-height: 1.25;
}

/* Werktage normal, Samstag und Sonntag fett */
.dh .dow  { display: block; font-size: 15px; font-weight: 400; color: var(--ink-mute); letter-spacing: .03em; }
.dh .dnum { display: block; font-size: 19px; font-weight: 400; color: #4a4a4a; }

.dh.is-weekend .dow  { font-weight: 500; color: #6f6f6f; }
.dh.is-weekend .dnum { font-weight: 500; color: #2f2f2f; }

.dh.is-out .dow  { color: #c3c3c3; }
.dh.is-out .dnum { color: #bdbdbd; }

/* Heute: hervorgehobener Punkt mit Ring */
.dh .dot {
    display: block;
    width: 9px;
    height: 9px;
    margin: 3px auto 0;
    border-radius: 50%;
    background: var(--today);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(58, 58, 58, .35);
}

.dh.is-today .dow  { color: var(--today); font-weight: 500; }
.dh.is-today .dnum { color: var(--today); font-weight: 500; }

/* Zellen und Gitter ------------------------------------------------------ */

.cell { position: relative; }
.cell.is-weekend { background: var(--weekend-bg); }

/* leichtes Tagesgitter – liegt hinter den Balken */
.cell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: var(--grid-day);
    z-index: 0;
}

/* deutlichere Linie am Wochenwechsel – liegt über den Balken,
   links am Wochenbeginn … */
.cell.is-wstart::before { background: var(--grid-week); z-index: 3; }

/* … und rechts am Wochenende bzw. am Ende des Zeitraums */
.cell.is-wend::after,
.cell.is-lastcol::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: var(--grid-week);
    z-index: 3;
}

/* Heute-Spalte: leichter Grundton plus durchgehende Umrandung über den Balken */
.cell.is-today { background: rgba(58, 58, 58, .05); }
.cell.is-today.is-weekend { background: rgba(58, 58, 58, .08); }

.cell.is-today::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    background: none;
    border-left: 1px solid var(--today-line);
    border-right: 1px solid var(--today-line);
    z-index: 3;
    pointer-events: none;
}

.dh.is-today::after { border-top: 1px solid var(--today-line); }

/* Abstand zwischen Haupt- und weiteren Ländern – das Gitter läuft durch */
.spacer { height: 20px; }

/* Zeilenbeschriftung ---------------------------------------------------- */

.rowlabel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30px;
    cursor: pointer;
    white-space: nowrap;
}

.rowlabel.t1 { height: var(--row1-h); font-size: 21px; color: #3a3a3a; }
.rowlabel.t2 { height: var(--row2-h); font-size: 18px; color: #5a5a5a; }
.rowlabel:hover,
.rowlabel.is-hover { color: #000; }

/* Balken ---------------------------------------------------------------- */

.day { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.day.t1 { height: var(--row1-h); }
.day.t2 { height: var(--row2-h); }

.bar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    background: var(--c);
}

.day.t1 .bar { height: var(--bar1-h); }
.day.t2 .bar { height: var(--bar2-h); }

.bar.is-first { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.bar.is-last  { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.bar.is-out   { opacity: .48; }

/* Feiertagsmarker ------------------------------------------------------- */

.fmark {
    position: relative;
    z-index: 4;
    /* grössere Hover-Fläche, ohne das Zeichen zu verschieben */
    padding: 8px 10px;
    margin: -6px -8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    cursor: default;
}

.day.t2 .fmark { font-size: 13px; padding: 5px 9px; margin: -4px -7px; }
/* Heller Balken – weiss wäre darauf nicht zu sehen (siehe isLight in app.js) */
.fmark.is-dark { color: #4c4c4c; }
.day:not(.has-bar) .fmark { color: var(--c); }

/* Jenseits der Daten ----------------------------------------------------- */

/* Ein Band über die ganze Zeile statt einer leeren Zeile. Es hängt im ERSTEN
   Tagesfeld und ist über alle Tage gezogen – die Spalten sind gleich breit,
   eine Zeile ist also `--days` mal 100 % eines Feldes. Es liegt über dem
   Tagesgitter, aber unter den Wochenlinien, und nimmt keine Klicks an, damit
   die Zeile weiter das Detailpanel öffnet. */
.day.is-nodata .nodata-band,
.day.is-nodata .nodata-text {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--days) * 100%);
    pointer-events: none;
}

.day.is-nodata .nodata-band {
    z-index: 1;
    background: var(--nodata-bg);
}

.day.is-nodata .nodata-text {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ink-soft);
}

/* Die Schrift sitzt auf einem eigenen Stück Bandgrund – sonst kreuzt sie die
   Wochenlinie, die über dem Band liegt. */
.day.is-nodata .nodata-text > span {
    padding: 0 12px;
    background: var(--nodata-bg);
}

/* In der schmalen Zeile der kleinen Länder wäre der Satz zu gross. */
.day.t2.is-nodata .nodata-text { font-size: 13px; }

/* ─────────────────────────── Kachelansicht ───────────────────────────── */

/* Dieselbe Fläche wie der Zeitstrahl, anders gefüllt: Monatskacheln
   nebeneinander, die umbrechen. Deshalb fallen Mindestbreite und
   Spaltenvorgabe des Zeitstrahls weg. Die Kachelbreite steht in --tile-w und
   kommt von app.js – vom Schalter S/M/L oder vom Ziehen an der Ecke. */
.grid.is-tiles {
    display: block;
    grid-template-columns: none;
    min-width: 0;
    padding: 4px 2px 6px;
    --tile-gap: 22px;
}

/* Zwei Reihen, nicht ein durchgehender Fluss: oben die gross dargestellten
   Länder, darunter die kleinen. Sonst rutschte eine kleine Kachel in die Lücke
   am Ende der oberen Reihe. */
.tile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px var(--tile-gap);
}

.tile-row + .tile-row { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

/* `flex: none` ist wesentlich: ohne das schrumpft der Flexsatz alle Kacheln
   auf dieselbe Breite, sobald eine Reihe eng wird. */
.tile {
    position: relative;
    flex: none;
    width: min(var(--tile-w, 246px), 100%);
    padding: 14px 15px 16px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
}

/* Die Hauptländer teilen sich ihre Reihe zu gleichen Teilen: gemeinsam so
   breit wie die Karte, ohne eine Zahl, die zu einer bestimmten Fensterbreite
   passt. Wird es eng, bricht die Reihe von selbst um. */
.tile.is-big {
    flex: 1 1 min(320px, 100%);
    width: auto;
    /* Die Obergrenze fängt den Ausreisser ab: eine einzelne Kachel in der
       letzten Reihe soll nicht über die ganze Karte laufen. */
    max-width: min(560px, 100%);
}

.tile-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 11px;
    font-size: 17px;
    font-weight: 500;
    color: #3a3a3a;
    text-align: left;
}

.tile.is-big .tile-head { font-size: 19px; }
.tile-head:hover .tile-name { color: #000; }
.tile-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }

.tile-dows,
.tile-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

/* Bezugsgrösse für die Tageszahlen: sie richten sich nach der Rasterbreite,
   nicht nach einer festen Punktzahl. So kann auch kein Inhalt die Spalten
   auseinanderdrücken. */
.tile-grid { container-type: inline-size; }

/* Jenseits der Daten: derselbe Hinweis wie das Band im Zeitstrahl, nur auf die
   Kachel gelegt. Die Höhe entspricht ungefähr einem Monatsraster, damit die
   Reihe nicht in sich zusammenfällt, wenn mehrere Länder nichts mehr haben. */
.tile-nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    padding: 12px 16px;
    border-radius: 5px;
    background: var(--nodata-bg);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
    color: var(--ink-soft);
}

.tile-dows span {
    padding-bottom: 7px;
    font-size: 12px;
    letter-spacing: .03em;
    text-align: center;
    color: var(--ink-mute);
}

.tile-dows span.is-weekend { font-weight: 500; color: #8f8f8f; }

/* Etwas breiter als hoch, damit ein Monat mit sechs Wochen kompakt bleibt.
   `min-width: 0` ist nicht kosmetisch: ohne das zieht ein einziges zu grosses
   Element im Feld alle sieben Spalten mit auf, und die Kopfzeile Mo–So steht
   versetzt über den Zahlen. */
.tday {
    position: relative;
    aspect-ratio: 1 / .88;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tday.is-weekend { background: var(--weekend-bg); }

.tbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 9%;
    bottom: 9%;
    z-index: 1;
    background: var(--c);
}

/* Nur am Anfang und Ende eines Ferienblocks gerundet, dazwischen läuft er
   durch – ein zusammenhängender Zeitraum soll auch wie einer aussehen. */
.tbar.is-first { margin-left: 2px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.tbar.is-last  { margin-right: 2px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

/* Die Zahl wächst mit dem Raster statt in festen Stufen. Der Grund ist der
   Ring um den heutigen Tag: er kann höchstens so gross werden wie ein
   Tagesfeld, und um feste 14-px-Ziffern bliebe in einer kleinen Kachel gut ein
   Pixel Luft – dort fällt eine halbe Pixelrundung als schiefer Ring auf. */
.tnum {
    position: relative;
    z-index: 2;
    flex: none;
    font-size: clamp(11px, 7.3cqw, 16px);
    color: #4a4a4a;
    font-variant-numeric: tabular-nums;

    /* OPTISCHE MITTE, NICHT GEOMETRISCHE. Zentriert wird sonst die Zeilenbox, und
       die reicht bis zur Unterlänge, die eine Ziffer nicht hat – die Zahl sitzt
       dadurch sichtbar zu hoch. `line-height: 1` macht den Versatz von der
       Zeilenhöhe unabhängig, die Polsterung oben gleicht ihn aus. Beides gehört
       zusammen: wer eines ändert, muss das andere nachrechnen. Der Wert ist
       gemessen, nicht geschätzt. */
    line-height: 1;
    padding-top: .12em;
}

/* Unter etwa 14 px rundet der Browser die Versalhöhe auf ganze Pixel auf: die
   Ziffer wird gemessen höher, als sie gezeichnet ist, und braucht mehr
   Ausgleich. Betrifft nur die kleinste Kachelstufe. */
@container (max-width: 190px) {
    .tnum { padding-top: .24em; }
}
.tday.has-bar .tnum { font-weight: 500; color: #fff; }
.tday.is-lightbar .tnum { color: #3f3f3f; }
.tday.is-out:not(.has-bar) .tnum { color: #c6c6c6; }

/* Heute: ein Ring um die Zahl, nicht die ganze Fläche – der Balken darunter
   soll durchlaufen. 88 % der Feldbreite ist genau die Feldhöhe (aspect-ratio
   oben), der Ring passt damit in jeder Kachelgrösse hinein. */
.tday.is-today .tnum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(25px, 88%);
    aspect-ratio: 1;
    border-radius: 50%;
    font-weight: 500;
    color: var(--today);
    box-shadow: inset 0 0 0 1.5px var(--today);
}

.tday.is-today.has-bar .tnum { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.tday.is-today.is-lightbar .tnum { color: #3f3f3f; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .45); }

/* Feiertag: hier ein Punkt in der Ecke, für ein „F" ist neben der Tageszahl
   kein Platz. Die Farbe kommt aus den Regeln des Zeitstrahls, deshalb
   currentColor. */
.tile .fmark {
    position: absolute;
    z-index: 4;
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    font-size: 0;
    /* Der Punkt ist reine Anzeige. Gefragt wird das ganze Tagesfeld – sonst
       müsste man auf fünf Pixel zielen, um den Namen des Feiertags zu lesen. */
    pointer-events: none;
}

.tile .fmark::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: currentColor;
}

/* Der Griff zum Aufziehen. Er zeigt sich erst, wenn die Maus auf der Kachel
   ist – sonst stünden auf jeder Kachel dauerhaft drei Striche ohne Anlass. */
.tile-grip {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity .12s;
    touch-action: none;
}

.tile:hover .tile-grip,
body.is-resizing .tile-grip { opacity: 1; }

.tile-grip::after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #c9c9c9;
    border-bottom: 2px solid #c9c9c9;
    border-bottom-right-radius: 3px;
}

/* Während des Ziehens soll nichts markiert werden und der Zeiger überall
   gleich aussehen – auch dort, wo er die Kachel längst verlassen hat. */
body.is-resizing { cursor: nwse-resize; user-select: none; }

/* Auf einem Telefon passt ohnehin nur eine Kachel nebeneinander. Dann soll sie
   die Karte auch ausfüllen, statt schmal am linken Rand zu kleben – und die
   Abstände dürfen enger sein, der Platz wird anderswo gebraucht. */
@media (max-width: 560px) {
    .grid.is-tiles { --tile-gap: 14px; }
    .tile-row { gap: 16px var(--tile-gap); }
    .tile-row + .tile-row { margin-top: 20px; padding-top: 20px; }

    .tile,
    .tile.is-big {
        flex: 1 1 var(--tile-w, 246px);
        width: auto;
        max-width: 100%;
    }

    /* Wer mit dem Finger bedient, kann keine 18-px-Ecke treffen – und braucht
       sie auch nicht: die Kachel ist so breit wie die Karte. */
    .tile-grip { display: none; }
}

/* ───────────────────────────── Einstellungen ─────────────────────────── */

.settings {
    display: flex;
    align-items: center;
    gap: 33px;
    flex-wrap: wrap;
    padding: 25px 5px 5px;
}

.setting {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.setting-text { font-size: 16px; color: var(--ink-soft); }

/* `display: flex` oben schlägt sonst das hidden-Attribut – der Wochenschieber
   und der Kachelschalter blenden einander aber gegenseitig aus. */
.setting[hidden] { display: none; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 273px;
    height: 20px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 3px;
    background: #d8d8d8;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #9d9d9d;
}

input[type="range"]::-moz-range-track { height: 4px; border-radius: 3px; background: #d8d8d8; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #9d9d9d; }

.segmented {
    display: inline-flex;
    background: #ededed;
    border-radius: 5px;
    padding: 3px;
}

.segmented button {
    padding: 9px 21px;
    font-size: 16px;
    color: #9a9a9a;
    border-radius: 4px;
}

.segmented button.is-active {
    background: #fff;
    color: #3d3d3d;
    border: 1px solid #dcdcdc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.segmented button[disabled] { color: #bfbfbf; cursor: not-allowed; }

/* S/M/L: drei Buchstaben brauchen keine Knopfbreite für ein ganzes Wort. */
.segmented.is-mini button { padding: 8px 13px; font-size: 15px; font-weight: 500; }

/* ─────────────────────────────── Klappboxen ──────────────────────────── */

.accordion { margin-top: 50px; }

.acc-item {
    margin-bottom: 13px;
    background: #fff;
    border: 1px solid #ececec;
    border-left: 4px solid var(--fc, #d8d8d8);
    border-radius: 8px;
    overflow: hidden;
}

.acc-head {
    display: flex;
    align-items: center;
    gap: 19px;
    width: 100%;
    padding: 20px 25px;
    text-align: left;
}

.acc-sign {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--fc, #a79b90);
    stroke-width: 2.2;
}

.acc-name { font-size: 19px; font-weight: 500; color: #3a3a3a; }

.acc-preview {
    margin-left: auto;
    font-size: 16px;
    color: var(--ink-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-head:hover .acc-name { color: #000; }
.acc-item.is-open .acc-head { border-bottom: 1px solid var(--line-soft); }

.acc-tabs {
    display: flex;
    justify-content: flex-end;
    padding: 20px 28px 0;
}

/* ═══════════════════════════════ Tutorial ═════════════════════════════ */

/* Tutorial und Excel-Export stehen rechts in der Einstellungszeile */
.settings-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px 9px 14px;
    font-size: 15px;
    white-space: nowrap;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 5px;
}

.action svg { width: 20px; height: 20px; stroke-width: 1.8; }

.action:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.action.is-export {
    color: var(--xls);
    background: var(--xls-soft);
    border-color: var(--xls-line);
}

.action.is-export:hover {
    color: #fff;
    background: var(--xls);
    border-color: var(--xls);
}

.action[disabled] { opacity: .6; cursor: progress; }

/* Abdunkelung: Streifen rund um die erklärten Bereiche, die selbst frei
   bleiben. So wird nichts überlagert – das Element leuchtet in seiner echten
   Farbe. Ein Schritt kann mehrere getrennte Bereiche hell lassen. */
/* Die Rahmen fangen keine Klicks ab – nur die abgedunkelten Flächen und
   die Erklärbox. Im hellen Bereich bleibt die Seite bedienbar. */
.tour { position: fixed; inset: 0; z-index: 500; pointer-events: none; }

.tour-dims,
.tour-rings { position: fixed; inset: 0; pointer-events: none; }

/* Die Deckkraft sitzt am Behälter, nicht an den einzelnen Flächen. Beim
   Überblenden zweier Ebenen bleibt die Abdunkelung dadurch überall gleich
   stark – deckungsgleiche Flächen wären sonst kurz doppelt so dunkel. */
.tour-dims { opacity: .55; }

.tour-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    transition: opacity .34s ease;
}

.tour-dim {
    position: fixed;
    background: #1c1e22;
    pointer-events: auto;
    transition: left .38s cubic-bezier(.4, 0, .2, 1), top .38s cubic-bezier(.4, 0, .2, 1),
                width .38s cubic-bezier(.4, 0, .2, 1), height .38s cubic-bezier(.4, 0, .2, 1);
}

.tour-ring {
    position: fixed;
    border: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 0 5px rgba(47, 127, 208, .22), 0 0 26px 6px rgba(47, 127, 208, .45);
    pointer-events: none;
    transition: all .38s cubic-bezier(.4, 0, .2, 1);
}

/* Beim Rollen und bei Grössenänderung müssen Rahmen und Flächen sofort am
   Element kleben – ein Nachziehen würde verschmieren. */
.tour.is-still .tour-dim,
.tour.is-still .tour-ring,
.tour.is-still .tour-box { transition: none; }

.tour-box {
    position: fixed;
    pointer-events: auto;
    width: 430px;
    max-width: calc(100vw - 32px);
    padding: 24px 26px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 48px rgba(0, 0, 0, .3);
    transition: left .38s cubic-bezier(.4, 0, .2, 1), top .38s cubic-bezier(.4, 0, .2, 1);
}

/* Sprechblasen-Spitze zum erklärten Bereich */
.tour-box::before {
    content: "";
    position: absolute;
    left: var(--arrow, 50%);
    width: 18px;
    height: 18px;
    margin-left: -9px;
    background: #fff;
    transform: rotate(45deg);
}

.tour-box[data-place="below"]::before { top: -9px; }
.tour-box[data-place="above"]::before { bottom: -9px; }

.tour-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #3a3a3a;
    animation: tour-text-in .34s ease;
}

@keyframes tour-text-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Wer Bewegung reduziert haben will, bekommt die Tour ohne Übergänge. */
@media (prefers-reduced-motion: reduce) {
    .tour-layer, .tour-dim, .tour-ring, .tour-box { transition: none; }
    .tour-text { animation: none; }
}

.tour-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.tour-count { font-size: 14px; color: var(--ink-mute); }

.tour-back {
    font-size: 14px;
    color: var(--ink-mute);
    border-bottom: 1px solid transparent;
}

.tour-back:hover { color: var(--ink-soft); border-bottom-color: #cfcfcf; }
.tour-back[hidden] { display: none; }

.tour-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 5px;
}

.tour-btn.is-primary { color: #fff; background: var(--accent); }
.tour-btn.is-primary:hover { background: var(--accent-dark); }
.tour-btn.is-ghost { color: var(--ink-soft); background: #f1f1f1; margin-left: auto; }
.tour-btn.is-ghost:hover { color: var(--ink); background: #e7e7e7; }

/* ────────────────────────────── Quellenangabe ─────────────────────────── */

.sources {
    margin-top: 50px;
    padding-top: 23px;
    border-top: 1px solid var(--line);
}

.sources p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-mute);
}

.sources p:last-child { margin-bottom: 0; }

/* Die Quellennennung steht in derselben Zeile wie der Datenstand, nur eine
   Spur leiser – sie muss dastehen, sie muss aber nichts betonen. Auf schmalen
   Fenstern rutscht sie von allein in die nächste Zeile. */
.src-credit { color: #a5a5a5; }

.sources a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid #d8d8d8;
}

.sources a:hover { color: var(--ink); border-bottom-color: #a8a8a8; }

/* Fusszeile: Rechtstexte links, „powered by" ganz rechts. */
.foot-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 27px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.foot-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

/* Trennstriche zwischen Copyright und den Links – wie im Brandnamic-Footer. */
.foot-legal > * + *::before {
    content: '|';
    margin-right: 8px;
    color: var(--line);
}

.sources .foot-legal a {
    border-bottom: 0;
    color: var(--ink-mute);
}

.sources .foot-legal a:hover { color: var(--ink); text-decoration: underline; }

/* „powered by brandnamic" – ein einzelnes Logo, gleiche Grösse wie auf
   ferienkalender.brandnamic.com. */
.sources .foot-powered {
    display: block;
    flex: none;
    border-bottom: 0;
}

.foot-powered img {
    display: block;
    width: 128px;
    height: 80px;
}

/* ────────────────────── Detailpanel (Overlay + inline) ────────────────── */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(40, 40, 40, .32);
    overflow: auto;
}

.overlay-scroll {
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 58px 28px;
}

.panel {
    width: 100%;
    max-width: 1875px;
    background: #fff;
    border-radius: 5px;
}

.overlay .panel { box-shadow: 0 20px 75px rgba(0, 0, 0, .22); }

.panel-head {
    display: flex;
    align-items: center;
    gap: 23px;
    padding: 25px 35px;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--fc, #d8d8d8);
}

.panel-close {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #3a3a3a;
}

.panel-close svg { width: 19px; height: 19px; stroke-width: 2; color: #9b9b9b; }
.panel-close:hover svg { color: #4a4a4a; }

.panel-tabs { margin-left: auto; }

/* Kopfleiste des Inhalts: Titel links, Jahreswahl rechts ---------------- */

.panel-bar {
    display: flex;
    align-items: baseline;
    gap: 25px;
    flex-wrap: wrap;
    padding: 30px 35px 0;
}

.panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a3a3a3;
}

.panel-title strong { color: #4a4a4a; font-weight: 500; }

.panel-years {
    display: flex;
    margin-left: auto;
    gap: 5px;
    padding: 3px;
    background: #f1f1f1;
    border-radius: 5px;
}

.panel-years button {
    padding: 6px 16px;
    font-size: 16px;
    color: #8f8f8f;
    border-radius: 4px;
}

.panel-years button.is-active { background: #fff; color: #2f2f2f; font-weight: 500; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.panel-years button:hover { color: #4a4a4a; }

.panel-content { padding: 30px 35px 43px; }
.panel-empty { margin: 13px 0 0; font-size: 16px; color: var(--ink-mute); }

.panel-sub {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9d9d9d;
}

/* Zusammenfassung je Ferienart ------------------------------------------ */

.sum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 13px;
    margin-bottom: 43px;
}

.sum-card {
    padding: 16px 19px 18px;
    background: #fafafa;
    border-radius: 6px;
    border-left: 4px solid var(--fc, #d8d8d8);
}

.sum-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #939393;
}

.sum-span { display: block; margin-top: 8px; font-size: 18px; font-weight: 500; color: #2f2f2f; }
.sum-meta { display: block; margin-top: 4px; font-size: 15px; color: #858585; }

/* Terminmatrix je Region ------------------------------------------------ */

/* Die Tabelle steht als eigene Karte in der Klappbox: gerahmt, mit gedecktem
   Kopf und abwechselnd getönten Zeilen. Beim seitlichen Rollen bleibt die
   Regionsspalte stehen; ihr Grundton muss deshalb je Zeile derselbe sein wie
   der der Zeile, sonst schiene der Inhalt durch. */

.table-wrap {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
}

table.hol {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

table.hol th,
table.hol td {
    padding: 12px 26px 12px 0;
    text-align: left;
    white-space: nowrap;
}

table.hol th:first-child,
table.hol td:first-child { padding-left: 22px; }

table.hol th:last-child,
table.hol td:last-child { padding-right: 22px; }

table.hol th {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8f8f8f;
    vertical-align: middle;
    background: #f7f7f7;
    border-bottom: 1px solid var(--line);
}

table.hol td {
    color: #4f4f4f;
    vertical-align: top;
    background: var(--card-bg);
    border-bottom: 1px solid var(--line-soft);
}

table.hol tbody tr:nth-child(even) td { background: #f9f9f9; }
table.hol tbody tr:last-child td { border-bottom: 0; }

table.hol td.region {
    padding-right: 33px;
    font-weight: 500;
    color: #333;
}

/* Haarlinie und weicher Schatten gehören zur stehenden Spalte und wandern
   deshalb nicht mit, wenn der Rest der Tabelle rollt. Ohne sie liefen die
   Termine beim Rollen scheinbar in den Regionsnamen hinein. */
table.hol th.th-region,
table.hol td.region {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--line), 7px 0 9px -7px rgba(0, 0, 0, .13);
}

.reg-code {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 7px 3px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .04em;
    color: #8f8f8f;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: help;
}

table.hol td.empty { color: #cfcfcf; }
table.hol .stack > span { display: block; }
table.hol .stack > span + span { margin-top: 7px; }

.len {
    margin-left: 9px;
    font-size: 14px;
    font-style: normal;
    color: #a8a8a8;
}

table.hol tbody tr:hover td,
table.hol tbody tr:hover td.region { background: #f4f7f4; }

/* Feiertage nach Monat -------------------------------------------------- */

.pub-stats {
    margin: 0 0 28px;
    font-size: 16px;
    color: var(--ink-soft);
}

.pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(388px, 1fr));
    gap: 5px 50px;
    align-items: start;
}

.pub-month h4 {
    margin: 15px 0 5px;
    padding-bottom: 9px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9d9d9d;
    border-bottom: 1px solid #eeeeee;
}

.pub-row {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid #f7f7f7;
}

.pub-date {
    flex: 0 0 73px;
    font-size: 16px;
    color: #8f8f8f;
    font-variant-numeric: tabular-nums;
}

.pub-name { flex: 1; font-size: 16px; color: #3f3f3f; }

.pub-scope {
    flex: 0 0 auto;
    max-width: 42%;
    padding: 3px 9px 4px;
    font-size: 14px;
    color: #5a4b42;
    background: #f6f2ef;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pub-scope.is-national { color: #6f6f6f; background: #f2f2f2; }

/* ─────────────────────────────── Tooltip ─────────────────────────────── */

.tooltip {
    position: absolute;
    z-index: 300;
    max-width: 363px;
    padding: 14px 20px 15px;
    background: #f1f1f1;
    border-radius: 5px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
    pointer-events: none;
}

.tooltip .tt-name { font-size: 17px; font-weight: 500; color: #3a3a3a; }

/* Nur der volle Name hinter einem Kürzel: kleiner und dunkel, damit er sich
   von der hellen Tabelle abhebt, unter der er steht. */
.tooltip.is-name {
    padding: 9px 15px 10px;
    background: #3a3a3a;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
}

.tooltip.is-name .tt-name { font-size: 15px; color: #ffffff; }
.tooltip .tt-date { margin-top: 3px; font-size: 16px; color: #6f6f6f; }
.tooltip .tt-item + .tt-item { margin-top: 11px; }

/* Tooltip der Feriendichte -------------------------------------------- */

/* Bewusst schmaler und flacher als das Detail-Pop-up: es erscheint beim
   blossen Überfahren und soll den Kalender nicht zudecken. Wer die Breite
   ändert, zieht die Innenabstände mit. */
.tooltip.is-density {
    width: 430px;
    max-width: calc(100vw - 30px);
    padding: 0;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 8px 34px rgba(0, 0, 0, .16);
}

.tt-head {
    padding: 16px 22px 14px;
    font-size: 17px;
    font-weight: 500;
    color: #2f2f2f;
    border-bottom: 1px solid #efefef;
}

.tt-head .tt-country { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; color: var(--ink-mute); }

.tt-block { padding: 16px 22px 18px; }
.tt-block + .tt-block { border-top: 1px solid #f2f2f2; }

.tt-share {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.tt-pct { font-size: 25px; font-weight: 500; line-height: 1; color: #2f2f2f; }
.tt-what { font-size: 15px; color: #5c5c5c; }

.tt-meter {
    height: 5px;
    margin: 12px 0 0;
    border-radius: 3px;
    background: #eeeeee;
    overflow: hidden;
}

.tt-meter span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--c, #9a9a9a);
}

.tt-sub {
    margin-top: 11px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.tt-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.tt-regions span {
    padding: 4px 9px 5px;
    font-size: 14px;
    color: #5a4b42;
    background: #f7f3f0;
    border: 1px solid #f0eae5;
    border-radius: 5px;
}

.tt-none { margin-top: 8px; font-size: 14px; color: var(--ink-mute); }

/* ────────────────────────────── Kleine Screens ───────────────────────── */

/* Fünf Wochen brauchen bei dieser Grösse viel Platz. Damit auf schmaleren
   Bildschirmen kein waagrechter Scrollbalken entsteht, wird der Kalender in
   zwei Stufen kompakter – die volle Grösse greift ab etwa 1920 px. */
@media (max-width: 1920px) {
    :root {
        --label-w: 230px;
        --row1-h:  46px;
        --row2-h:  28px;
        --bar1-h:  29px;
        --bar2-h:  14px;
        --day-w:   34px;
    }

    .grid { min-width: 1175px; }
    .card-title { font-size: 26px; }
    .rowlabel.t1 { font-size: 20px; }
    .rowlabel.t2 { font-size: 16px; }
}

@media (max-width: 1550px) {
    :root {
        --label-w: 188px;
        --row1-h:  42px;
        --row2-h:  26px;
        --bar1-h:  27px;
        --bar2-h:  13px;
        --day-w:   28px;
    }

    .grid { min-width: 1000px; }
    .page { padding: 0 24px 60px; }
    .topbar-inner { padding: 0 24px; }
    .card { padding: 22px 20px 22px; }
    .card-title { font-size: 23px; }
    .rowlabel.t1 { font-size: 18px; }
    .rowlabel.t2 { font-size: 15px; }
    .dh .dow  { font-size: 13px; }
    .dh .dnum { font-size: 16px; }
    .wk { font-size: 13px; }
}

@media (max-width: 1000px) {
    .topbar-inner { flex-direction: column; align-items: stretch; }
    .topbar-right { align-items: flex-start; }
    .controls { flex-wrap: wrap; }
    .control-btn { min-width: 238px; }
    .card { padding: 20px 18px 20px; }
    .panel-content, .panel-bar, .panel-head { padding-left: 23px; padding-right: 23px; }
    .foot-bar { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 767px) {
    :root {
        --label-w: 150px;
        --row1-h: 34px;
        --row2-h: 25px;
        --bar1-h: 26px;
        --bar2-h: 13px;
    }

    .card {
        padding: 18px;
    }
    .card-title {
        width: calc(100% - 90px);
        font-size: 22px;
    }
    .card-nav {
        justify-content: space-between;
        width: 100%;
        top: unset;
    }
    .setting {
        gap: 10px;
    }

    .acc-head {
        padding: 10px 15px
    }
    .acc-tabs {
        padding: 15px 15px 0;
    }
    .panel-bar {
        padding: 20px 15px 0;
    }
    .panel-title,
    .panel-sub {
        font-size: 15px;
    }
    .sum-span {
        font-size: 15px;
    }
    .sum-card {
        padding: 15px;
    }

    /* Die stehende Spalte trug den vollen Regionsnamen. Auf einem Telefon blieb
       daneben kein Platz für auch nur eine Spalte Termine – die Tabelle rollte,
       aber zu sehen war nichts als der Name. Hier steht darum nur das Kürzel.
       Es reicht, um die Zeile wiederzufinden, und lässt Raum für die Termine.
       Der Name bleibt im Dokument und wird vorgelesen, er nimmt nur keine
       Fläche mehr ein. Eine Region ohne Kürzel behält ihren Namen – lieber eine
       breite Spalte als eine leere Zelle. */
    table.hol td.region.has-code .reg-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    table.hol td.region.has-code .reg-code {
        margin-left: 0;
        font-size: 15px;
        color: #4a4a4a;
        background: #ededed;
    }

    /* Sonst gäbe die Überschrift die Spaltenbreite vor: „Bundesländer" ist
       breiter als jedes Kürzel darunter. */
    table.hol th.th-region {
        font-size: 11px;
        letter-spacing: 0;
    }

    /* Die Tabelle greift über die Innenabstände der Klappbox hinaus, bis an
       deren Kante. Die 46 Pixel, die sonst links und rechts leer blieben, sind
       auf einem Telefon ein Viertel der Terminspalte – hier entscheiden sie
       darüber, ob die erste Spalte ganz zu sehen ist. Seitliche Rahmen und
       runde Ecken fallen dabei weg, sonst schnitte die Klappbox sie ab. */
    .panel-content .table-wrap {
        margin-left: -23px;
        margin-right: -23px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    table.hol th,
    table.hol td { padding-right: 18px; }

    table.hol th:first-child,
    table.hol td:first-child { padding-left: 14px; }

    table.hol th:last-child,
    table.hol td:last-child { padding-right: 14px; }

    table.hol td.region { padding-right: 14px; }

    .sources .foot-powered {
        margin-left: auto;
    }
}