/*
 * Tourila – die eine Quelle der Gestaltungswerte (0.643): Schrift, Farben, Größen, Abstände, Radien, Schatten,
 * Bewegung. Geladen vor jedem anderen Stylesheet – im Studio, auf der öffentlichen Website (auch im Bündel
 * assets/dist/) und auf den Seiten des Themes. Kein anderes Stylesheet definiert einen Wert auf :root.
 *
 * Eine Skala für alles (--tu-*, „Tourila UI“): Farben, Schrift, Gewichte, Abstände, Radien, Schatten – im Studio
 * und auf jeder öffentlichen Seite. Dazu wenige Werte nur der Arbeitsfläche des Studios (--ts-*: dichtere
 * Schriftskala, Fokusring, App-Maße). Lokale Werte einer Komponente (--ts-gauge, --tu-lp-gap …) bleiben bei ihrer
 * Komponente. Eine neue Farbe ist ein neues Token hier, kein Wert in einer Regel.
 */

/* Figtree (SIL Open Font License, assets/fonts/Figtree-OFL.txt), served by the plugin – no external font request. */
@font-face {
  font-display: swap;
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  src: url("../fonts/figtree-variable.woff2") format("woff2");
}

/* ------------------------------------------------------------ Die Skala: Studio und öffentliche Seiten (--tu-*) */
:root {
  /* Colour – white and one light grey, one ink, the magenta only where you act. */
  --tu-brand: #d1007c;
  --tu-brand-strong: #a8005f;
  --tu-brand-soft: #fcebf4;
  --tu-ink: #1d1d1f;
  --tu-text: #424245;
  --tu-muted: #6e6e73;
  --tu-subtle: #8e8e93;
  --tu-line: #e8e8ed;
  --tu-line-strong: #d2d2d7;
  --tu-mist: #f5f5f7;
  /* 0.643: Flächen der Arbeitsfläche des Studios (ruhige Zeilen, unter dem Zeiger) – neutral wie die Website. */
  --tu-surface-subtle: #fbfbfd;
  --tu-surface-hover: #f0f0f3;
  /* Links in running text and text buttons („Mehr lesen“) – a calm grey, darker on hover; the magenta stays for
     the main action and the active state (operator, 09.11.). #6e6e73 on white 5.0 : 1, on sand 4.6 : 1. */
  --tu-link: var(--tu-muted);
  --tu-link-hover: var(--tu-ink);
  /* Warm sand – the ground of the start page's postcard. */
  --tu-sand: #f7f3ee;
  /* Public 2.0: a deeper sand (placeholders, avatars, bands), night (at most one contrast band per page) and ocean
     (only in information graphics such as the travel seasons). */
  --tu-night: #15171a;
  --tu-ocean: #1f5a73;
  --tu-surface: #fff;
  --tu-scrim: rgb(29 29 31 / 0.42);
  --tu-success: #11774a;
  --tu-success-soft: #e6f5ed;
  --tu-warning: #925500;
  --tu-warning-soft: #fff3df;
  --tu-danger: #c11a2e;
  --tu-danger-soft: #fdebed;
  --tu-info: #1d5cc0;
  --tu-info-soft: #e9f0fd;
  /* Type – Figtree, served by the plugin (no external font request), system fonts as fallback. */
  --tu-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tu-text-xs: 12px;
  --tu-text-sm: 14px; /* Readable text is never under 14 px (12 px only for labels) */
  --tu-text-md: 15px;
  --tu-text-base: 17px;
  --tu-text-lg: 19px;
  --tu-title-card: 17px;
  --tu-title-section: clamp(24px, 0.8vw + 17px, 30px); /* 24 – 30 (before up to 38: „übermäßig groß“) */
  --tu-title-page: clamp(34px, 4.2vw + 14px, 64px);
  --tu-title-display: clamp(40px, 5.4vw + 8px, 76px);
  --tu-weight-regular: 400;
  --tu-weight-medium: 500;
  --tu-weight-semibold: 600;
  --tu-weight-bold: 700;
  --tu-weight-heavy: 800;
  --tu-tracking-display: -0.042em;
  --tu-tracking-title: -0.02em;
  --tu-leading: 1.6;
  --tu-leading-tight: 1.15;
  /* Space – a 4px grid. */
  --tu-space-1: 4px;
  --tu-space-2: 8px;
  --tu-space-3: 12px;
  --tu-space-4: 16px;
  --tu-space-5: 20px;
  --tu-space-6: 24px;
  --tu-space-8: 32px;
  --tu-space-10: 40px;
  --tu-space-12: 48px;
  --tu-space-16: 64px;
  --tu-section: clamp(56px, 6.5vw, 88px);
  /* Layout – the width and gutter of the travel page; every public page aligns to them. */
  --tu-page-max: 1440px;
  --tu-gutter: clamp(20px, 5vw, 72px);
  --tu-reading-max: 720px;
  /* One height for every bar that sticks at the top – the head, the bar of the search, the bar of the
     sections of a travel page and of a profile (phones: 56px below). Borders included. */
  --tu-bar-h: 64px;
  --tu-header-h: var(--tu-bar-h);
  /* Shape and depth */
  --tu-radius-sm: 8px;
  --tu-radius-md: 12px;
  --tu-radius-lg: 16px;
  --tu-radius-xl: 22px;
  --tu-radius-2xl: 28px; /* Public 2.0: hero and large pictures */
  --tu-radius-pill: 999px;
  --tu-shadow-sm: 0 1px 2px rgb(29 29 31 / 0.06);
  --tu-shadow-md: 0 6px 22px rgb(29 29 31 / 0.08);
  --tu-shadow-lg: 0 24px 60px rgb(29 29 31 / 0.18);
  --tu-shadow-field: 0 2px 10px rgb(29 29 31 / 0.06), 0 0 0 1px var(--tu-line);
  /* Focus – always visible on keyboard use, the brand colour. */
  --tu-focus-color: var(--tu-brand);
  --tu-focus-width: 2px;
  --tu-focus-offset: 3px;
  /* Controls – 44px touch targets. */
  --tu-control-h: 44px;
  --tu-control-h-lg: 56px;
  /* Motion – short, transform and opacity only. */
  --tu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tu-fast: 0.16s;
  --tu-base: 0.24s;
  /* Layers */
  --tu-z-sticky: 40;
  --tu-z-header: 50;
  --tu-z-popover: 70;
  --tu-z-sheet: 90;
  /* Pictures – fixed ratios, so nothing shifts while they load. */
  --tu-ratio-card: 4 / 3;
  --tu-ratio-tile: 4 / 5;
  /* 0.643: aus festen Werten der Regeln (je mindestens zweimal gebraucht; gleiche oder unsichtbar nahe Werte, ΔE < 2). */
  --tu-on-dark: #fff; /* Schrift und Zeichen auf Fotos, Marke, dunklen Flächen */
  /* 0.643 Barrierefreiheit: dunkles Glas unter weißer Schrift auf einem Foto – auch auf einem weißen Foto ≥ 4,5 : 1. */
  --tu-photo-scrim: rgb(20 21 26 / 0.7);
  /* Warme Schrift auf Sand (Postkarte) – 4,8 : 1 auf --tu-sand. */
  --tu-sand-ink: #746a5c;
  /* Kleinste Klickfläche (WCAG 2.2, 2.5.8: 24 × 24 px); Links in einer Zeile bekommen sie mit Innenabstand, ohne dass
     sich die Zeile ändert. */
  --tu-target: 24px;
  --tu-faint: #aeaeb2;
  --tu-white-a92: rgb(255 255 255 / 0.92);
  --tu-line-bold: #c7c7cc;
  --tu-ink-a06: rgb(29 29 31 / 0.06);
  --tu-white-a12: rgb(255 255 255 / 0.12);
  --tu-black-a35: rgb(0 0 0 / 0.35);
  --tu-black: #000000;
  --tu-night-glass: rgb(15 18 22 / 0.94);
  --tu-black-a62: rgb(0 0 0 / 0.62);
  --tu-black-a12: rgb(0 0 0 / 0.12);
  --tu-black-a30: rgb(0 0 0 / 0.3);
  --tu-black-a25: rgb(0 0 0 / 0.25);
  --tu-info-strong: #17437f;
  --tu-warning-strong: #7a4f00;
  --tu-white-a85: rgb(255 255 255 / 0.85);
  --tu-brand-faint: #fdf2f8;
  --tu-success-faint: #eef7f2;
  --tu-signal-green: #1a9e5c;
  --tu-signal-amber: #e08a00;
  --tu-black-a50: rgb(0 0 0 / 0.5);
  --tu-danger-strong: #9b1424;
  --tu-plum: #4a1438;
  --tu-white-a70: rgb(255 255 255 / 0.7);
  --tu-white-a22: rgb(255 255 255 / 0.22);
  --tu-white-a35: rgb(255 255 255 / 0.35);
  --tu-success-strong: #0d5f3b;
  --tu-sage-mist: #eef0ec;
  --tu-black-a20: rgb(0 0 0 / 0.2);
  --tu-attention: #b25000;
  --tu-cat-teal: #0f817c;
  --tu-cat-teal-soft: #e5f4f2;
  --tu-cat-violet: #8d43bb;
  --tu-cat-violet-soft: #f2e9f7;
  --tu-cat-rose: #ca1763;
  --tu-cat-blue: #0782b8;
  --tu-cat-blue-soft: #e7f4fa;
  --tu-brand-hover: #b0006a;
  --tu-black-a16: rgb(0 0 0 / 0.16);
  --tu-error: #b42318;
  --tu-white-a50: rgb(255 255 255 / 0.5);
  --tu-warning-text: #9a6700;
  --tu-alert: #c4161c;
  --tu-signal-red: #d70015;
  --tu-white-a25: rgb(255 255 255 / 0.25);
  --tu-gold: #e0a100;
  --tu-ink-deep-a60: rgb(20 17 21 / 0.6);
  --tu-star: #f2a516;
  --tu-lilac-mist: #ece8f1;
  --tu-brand-blush: #f7e3ee;
  --tu-sand-line: #ebe3d6;
  --tu-rose-mist: #e5dde3;
  --tu-brand-glow: rgb(159 20 95 / 0.28);
  --tu-cat-sand-soft: #f7f0df;
  --tu-sage-glass: rgb(220 229 222 / 0.72);
  --tu-scrim-deep: rgb(16 18 26 / 0.42);
  --tu-ink-a46: rgb(29 29 31 / 0.46);
  --tu-ink-deep: #141115;
  --tu-black-a38: rgb(0 0 0 / 0.38);
}

@media (max-width: 759px) {
  :root {
    /* Every bar that sticks at the top of a phone has the same height – the head (logo and search), the jump
       bar of a page (theme) and the bar of the search – borders included. */
    --tu-bar-h: 56px;
    --tu-header-h: var(--tu-bar-h);
    --tu-text-base: 16px;
  }
}

/* --------------------------------------------------------------- Nur die Arbeitsfläche des Studios (--ts-*) */
/* Farben, Schrift, Gewichte, Abstände, Radien und Schatten kommen seit 0.643 aus der Skala oben (Entscheidung des
   Inhabers 12.11.2026: das Studio mit den Grautönen und Gewichten der Website). Hier steht nur, was es nur im
   Studio gibt: die dichtere Schriftskala der Arbeitsfläche, der Fokusring, die App-Maße. */
:root {
  --ts-text-xs: 12px;
  --ts-text-sm: 13.5px;
  --ts-text-md: 15px;
  --ts-text-lg: 17px;
  --ts-text-xl: 21px;
  --ts-text-2xl: 30px;
  --ts-radius-xl: 20px;
  --ts-color-focus: rgb(29 29 31 / 0.24);
  --ts-ring: 0 0 0 3px var(--ts-color-focus);
  /* Text fields in focus: a calm grey frame (the brand colour stays for actions). */
  --ts-ring-field: 0 0 0 3px rgb(29 29 31 / 0.07);
  --ts-control-h-sm: 34px;
  --ts-transition: 0.16s ease;
  --ts-sidebar-w: 256px;
  --ts-sidebar-w-collapsed: 72px;
  --ts-header-h: 60px;
  --ts-content-max: 1180px;
  --ts-gutter: 32px;
}

@media (max-width: 1099px) {
  :root {
    --ts-gutter: 24px;
  }
}
@media (max-width: 759px) {
  :root {
    --ts-gutter: 16px;
    --ts-header-h: 56px;
    --ts-tabbar-h: calc(64px + env(safe-area-inset-bottom));
  }
}