/* ============================================ 02-variables.css Global CSS Variables (Design System) ============================================ */ :root { /* ========================================= GRID & LAYOUT ========================================= */ --grid-gutter: 20px; --container-max-width: 1500px; /* ========================================= COLORS Braun-Skala = Abstufungen von --color-primary, vorher als Literale in Nav-Caret, Agenda-Button und im CookieConsent-Block verstreut. ========================================= */ --color-primary: #6F524D; --color-primary-mid: #91746F; --color-primary-faded: #B29691; --color-primary-mid: #a18f8b; /* 7x: Caret-Kreis, cc-Toggle-Off, cc-Buttons */ --color-primary-dark: #847572; /* 4x: Hover-Zustände der cc-Buttons */ --color-primary-deep: #59423e; /* 3x: cc-Secondary-Hover, .agenda-btn:active */ --color-primary-tint: rgb(209, 203, 203); /* .btn-white:hover */ /* Secondary — Basis: hsl(25, 100%, 70%) */ --color-secondary: rgba(255, 165, 101, 1.00); /* #FFA565 */ --color-secondary-faded: #FECBA7; /* hsl(25,97%,82%) – Pendant zu -faded */ --color-secondary-mid: #EAC8B0; /* hsl(25,58%,80%) – Toggle-Off, Buttons */ --color-secondary-dark: #D9BCA6; /* hsl(25,40%,75%) – Hover-Zustände */ --color-secondary-deep: #FE7C20; /* hsl(25,99%,56%) – Active / Secondary-Hover */ --color-secondary-tint: rgb(240, 230, 224); /* hsl(25,34%,91%) – btn-white:hover */ --color-secondary-tint-hover: rgb(240, 230, 224); /* hsl(25,34%,91%) – btn-white:hover */ /* Bestehende, bleiben nutzbar */ --color-secondary-muted: rgba(253, 188, 136, 1.00); /* #FDBC88 – liegt zwischen Basis und -faded */ --color-secondary-muted-ultra: rgba(251, 235, 223, 1.00); /* #FBEBDF – minimal heller als -tint */ --color-secondary-muted-super-ultra: rgba(251,235,223,0.40); --color-text-main: #000; --color-text-muted: #555; --color-text-strong: #111; /* 5x: Nav-Primärlinks, Mobile-Kacheln */ --color-text-white: #FFFFFF; --color-bg-light: #f9f9f9; --color-bg-lighter: #fdfdfd; --color-bg-light-max: #FFFFFF; --color-border: #e0e0e0; --color-border-light: #eee; --color-border-subtle: rgba(195, 195, 195, 0.3); --color-border-nav: #E7E7E7; /* .MainNav border-bottom */ --color-border-faint: rgba(1, 1, 1, 0.13); /* .agenda-btn */ --color-surface-form: #f8f5f4; /* Formularfläche: Hauch von --color-primary */ --color-border-form: #e8e1df; /* Rahmen der Formularfläche */ /* Selection */ --color-selection: #B3D7FF; /* standart */ --color-selection-dark: #0085A1; /* türkis */ --color-selection-hover: #006B84; /* manuell dunkler berechnet */ /* Link States */ --color-link-default: #030303; --color-link-hover: #6F524D; /* CACHE BUSTING BUTTON */ --modal-color-selection: #007bff; --modal-color-selection-hover: #0069d9; /* ~10% dunkler, Hover/Active */ /* ========================================= DIALOG: TICKET INFO (Ticket-Session-Hinweis) Für Casino Theater, Fauteuil & Schauspielhaus Tickets ========================================= */ --modal-overlay-bg: rgba(0, 0, 0, 0.7); --modal-highlight-bg: #fde775; /* Warnfarbe der Hervorhebung */ --modal-color-selection: #007bff; --dialog-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* etwas stärker als --shadow-sticky */ --dialog-radius: 8px; /* etwas runder als --border-radius-sm */ /* ========================================= TYPOGRAPHY - FONTS ========================================= */ /* Serif Fonts (Sabon) */ --font-serif: 'Sabon Roman', 'Sabon Roman fallback', 'Times New Roman', serif; --font-serif-bold: 'Sabon Bold', 'Sabon Bold fallback', 'Times New Roman', serif; /* Sans-Serif Fonts (Hermes) */ --font-sans-thin: 'Hermes Thin', 'Hermes Thin fallback', 'Helvetica Neue', 'Arial', sans-serif; --font-sans-regular: 'Hermes Regular', 'Hermes Regular fallback', 'Helvetica Neue', 'Arial', sans-serif; --font-sans-semibold: 'Hermes Semibold', 'Hermes Semibold fallback', 'Helvetica Neue', 'Arial', sans-serif; --font-sans-bold: 'Hermes Bold', 'Hermes Bold fallback', 'Helvetica Neue', 'Arial', sans-serif; /* Font Styles */ --font-style-normal: normal; --font-style-italic: italic; --font-style-bold: bold; --font-style-oblique: oblique; /* ========================================= TYPOGRAPHY - SIZES & LINE HEIGHTS ========================================= */ /* Base */ --font-size-base: 18px; --line-height-base: 1.3; /* Zwischengrösse (01.11.): zwischen base und small. Text im Spotlight («Aktuell») auf Startseite und Künstlerseiten. */ --font-size-basesmall: 16px; /* Small Text */ --font-size-verysmall: 11px; --line-height-verysmall: 1; --font-size-small: 14px; --line-height-small: 1.1; /* Big Text */ --font-size-big: 22px; --line-height-big: 1.4; --line-height-verybig: 1.8; /* Headings Verkleinert am 19.09.2026, auf Desktop wie auf Mobile -- vorher 30 / 28 / 24 / 24 / 24. Der Anlass war die Kalenderseite, auf der Titel und Teaser ein Drittel des Bildes gefressen haben, bevor der erste Termin kam; die kleinere Skala gefiel dann überall besser. Betroffen ist alles, was diese Variablen nutzt: --font-size-h1 h1, .post-heading --font-size-h2 h2, h3 (03-typography.css), damit auch .post-title und jede Überschrift mit .heading-accent -- die Klasse setzt nur die Farbe --font-size-subtitle h4, .post-subtitle, .post-lead, .inquiry-lead, .heading-sub --font-size-h3 und -h4 nutzt heute niemand (h3 läuft über --font-size-h2, h4 über --subtitle); sie werden trotzdem mitgeführt, damit sie stimmen, sobald sie gebraucht werden. Grösser haben wollen: hier ändern, nicht an den Verwendungsstellen -- und daran denken, dass dieselben Werte im Critical CSS stehen (partials/critical.css). */ --font-size-h1: 26px; --font-size-h2: 24px; --font-size-h3: 22px; --font-size-h4: 20px; --font-size-subtitle: 22px; --font-size-subtitle-mobile: 20px; /* Article Specifics */ --font-article-heading: var(--font-sans-semibold); --font-article-subtitle: var(--font-serif); --font-article-text: var(--font-serif); /* Event Specifics */ --font-event: var(--font-sans-thin); /* ========================================= EVENT COMPONENT STYLES ========================================= */ --color-event-text: var(--color-text-main); /* Beide nur noch am Monatsbalken -- die Event-Zeilen selbst haben seit dem Umbau weder Rahmen noch Schatten. */ /*--border-event: 0.2px solid var(--color-secondary-muted-ultra); --shadow-event: var(--color-secondary-muted-ultra) 4px 3px 8px 0px;*/ --border-event: 1px solid var(--color-border-form); --shadow-event: 0 2px 6px rgba(111, 82, 77, 0.08); /* zarter Braun-Schatten */ /* Datumsblock: Wochentag, Tag, Monat und Uhrzeit -- auch die Uhrzeiten in der Sendeliste -- sowie die Trennlinien zwischen den Einträgen. */ --color-event-date: #555; /* Schrift von Datum und Uhrzeit. Auf var(--font-serif) umstellen für Sabon. */ --font-event-date: var(--font-event); /* Premiere / Derniere. Ersetzt #319C46 mit #007535 (5.83 : 1). */ --color-event-highlight: #007535; /* Abgesagt, verschoben, ausverkauft, wenige Plätze. Ersetzt indianred (3,3:1). */ --color-event-warning: #B22222; /* ========================================= SPACING & MARGINS ========================================= */ --spacing-hr-margin: 20px; --border-color-hr: #D4D4D4; --margin-top-verysmall: 5px; --margin-top-small: 10px; --margin-top-base: 20px; --margin-top-big: 25px; --margin-top-verybig: 30px; --margin-top-max: 50px; --margin-bottom-verysmall: 5px; --margin-bottom-small: 10px; --margin-bottom-base: 20px; --margin-bottom-big: 25px; --margin-bottom-verybig: 30px; --margin-bottom-max: 50px; /* ========================================= RADIEN ========================================= */ --border-radius-sm: 2px; --border-radius-btn: 4px; /* 6x: alle Button-Klassen + Dialog-Button */ --border-radius-md: 4px; /* 5x: Audio-Player, Media-Wrapper, Karten */ /* ========================================= FLÄCHEN ========================================= */ --nav-mobile-bg: rgba(253, 253, 253, 0.97); /* .nav-mobile + Critical CSS */ --overlay-scrim: rgba(0, 0, 0, 0.55); /* 4x: Abdunkelung der Media-Platzhalter */ /* ========================================= NAVBAR ========================================= */ /* --nav-height wird auch von 02-navigation.js gelesen (Sticky-Abstand) -> nur hier pflegen. Rechnung: Höhe = Randbalken + 2 x Innenabstand + Logo + 1px Linie Desktop: 120 = 20 + 2x15 + 70 (+ Rest) */ --nav-height: 120px; --nav-border-width: 20px; --nav-border-top: var(--nav-border-width) solid var(--color-primary); --nav-padding-y: 15px; --nav-logo-height: 70px; --nav-bg: rgba(253, 253, 253, 0.95); /* ========================================= BUTTONS (gemeinsame Geometrie aller Varianten) ========================================= */ --btn-font-size: 14px; --btn-font-size-lg: 15px; /* nur .btn-kult */ --btn-line-height: 32px; --btn-padding: 0 15px; --btn-margin: 0 5px 10px 0; --transition-btn: all 0.23s ease-in-out; /* ========================================= ICONS Chevron im Stil von Burger/Kreuz: runde Enden und Ecken (stroke-linecap/linejoin: round). Als Maske genutzt, die Farbe kommt dann über background: currentColor. ========================================= */ --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); /* Gleiche Form, fest in --color-primary: für