/* ========================================================================== THEME: kooby — Gast-Frontend (Buchungsablauf) -------------------------------------------------------------------------- Standard-CI von Kooby, zugleich das Theme der Demo-Installation. Für einen Kunden NICHT diese Datei ändern, sondern _vorlage.css kopieren und ACTIVE_THEME in core/config.php auf den neuen Slug setzen. Diese Datei enthält ausschließlich CI-Werte (Schriften, Farben, Rundungen). Struktur und Wireframe liegen unverändert in partials/public-head.php und sind themeunabhängig. ========================================================================== */ /* Schriften gehören zum CI und stehen deshalb hier, nicht im HTML — ein Kundentheme mit anderen Schriften braucht so keine Änderung am Markup. Pfade sind relativ zu DIESER Datei (themes/). */ /* Überschriften in DM Sans statt Clash Display: Die Demo soll neutral wirken und nicht nach einer eigenen Marke aussehen — sie wird ja bei jedem Betrieb umgefärbt und umgeschriftet. Warum nicht Google Sans, wie gewünscht: Das ist Googles hauseigene Markenschrift, sie ist weder über Google Fonts noch sonst zur Einbindung freigegeben. DM Sans ist ihr im Charakter am nächsten (geometrisch, geringe Strichkontraste, offene Formen) und frei lizenziert (OFL). Der Admin-Bereich behält Clash Display — die Schriftdefinition dafür steht in themes/kooby-admin.css und ist von hier unabhängig. BEIDE SCHRIFTEN LIEGEN LOKAL (assets/fonts/), seit 15.08.2026. Vorher kamen sie per @import von fonts.googleapis.com, womit bei jedem Aufruf einer Gastseite — auch des Meldescheins — die IP des Gastes an Google ging. Genau daran hängt die Aussage in _INPUT/recht-vertrag-handout.md, Abschnitt 2.5: kooby lädt von keinem fremden Server und braucht deshalb kein Cookie-Banner. Wer den @import zurückholt, kippt diesen Satz. Siehe assets/fonts/README.md. Es sind variable Schriften: eine Datei je Subset deckt alle Schnitte ab, deshalb steht bei font-weight ein Bereich und kein einzelner Wert. Die unicode-range trennt latin von latin-ext, damit das erweiterte Subset nur geladen wird, wenn ein Zeichen daraus vorkommt (Gästenamen im Meldeschein). */ @font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-ext.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Marken-Akzent */ --accent: #2563eb; --accent-dark: #1d4ed8; /* Deutlich dunklere Stufe für "erledigt" — --accent-dark liegt zu nah am Akzent, erledigte und aktueller Schritt waren kaum zu unterscheiden. */ --accent-deep: #16307a; /* Abgeleitete Akzent-Flächen: getönte Hintergründe und Fokus-Ringe. Immer mitändern, wenn --accent wechselt (bewusst eigene Tokens statt verstreuter rgba()-Literale, sonst bleiben beim Umfärben Reste stehen). */ --accent-soft: rgba(37,99,235,.10); --accent-ring: rgba(37,99,235,.15); /* Flaeche des gewaehlten Zeitraums im Kalender. DECKEND, nicht durchscheinend: Die Tage darunter sind gruen eingefaerbt, und durch ein transparentes Blau schimmerte das Gruen hindurch — das Band war dann stellenweise graugruen statt blau. */ --accent-band: #dce6fc; /* Zweite Highlight-Farbe — sparsam (Badges). Sehr hell, deshalb IMMER mit dunkler statt weißer Schrift kombinieren. */ --highlight: #00ffe1; --highlight-text: #0a0a0a; /* Getönte Variante für Flächen, die zu mehreren nebeneinander stehen (Eckdaten-Pillen). Volles Türkis ist so kräftig, dass drei Pillen in einer Reihe die Überschrift daneben erschlagen — die Tönung liest sich als dieselbe Farbe, ohne zu schreien. Schrift bleibt dunkel. */ --highlight-soft: rgba(0,255,225,.20); --highlight-line: rgba(0,209,185,.45); /* Monogramm im Kopf der Gast-Website. Eigene Tokens statt --highlight: Das Zeichen steht für den Betrieb, nicht für kooby — ein Kundentheme soll es umfärben können, ohne die Badges mitzuziehen. Warmes Braun als Voreinstellung: neutral, passt zu Holz und Alpenraum und beißt sich nicht mit dem blauen Handlungs-Akzent. */ --brand-mark-bg: #7c5541; --brand-mark-text: #ffffff; /* Kopfzeile der Gast-Website */ --header-bg: #1c3f8f; --bg: #f4f4f4; --surface: #ffffff; --line: #e3e3e3; --text: #1a1a1a; /* Dunkler als das uebliche Mittelgrau. #6e6e6e brachte auf dem grauen Seitengrund nur 4,6:1 — knapp ueber der Mindestforderung und fuer Fliesstext zu wenig, besonders fuer aeltere Augen. Ueber #545454 (6,9:1) noch eine Stufe weiter auf #454545: 8,7:1 auf Grau, 9,6:1 auf Weiss (Seitenleiste). Der Abstand zum Haupttext bleibt deutlich — der liegt bei 15,8:1 —, die Nebentexte sind aber keine Zumutung mehr. */ --text-dim: #454545; /* Schrift auf farbigen Flächen (Akzentknöpfe, aktive Schritte). Eigenes Token, weil ein Kunden-Theme mit hellem Akzent hier Schwarz braucht. */ --on-accent: #ffffff; /* Fehlermeldungen */ --error: #8f3a3a; --error-soft: rgba(178,58,58,.08); --error-line: rgba(178,58,58,.20); --error-dim: rgba(178,58,58,.55); /* Zustandsfarben — vom Wireframe genutzt (Bestätigung, Warnhinweis). Waren vorher als rgba()-Literale im Markup verstreut; ein Kunden-Restyling hätte sie dort nicht erreicht. */ --ok: #15803d; --ok-soft: rgba(22,163,74,.06); --ok-line: rgba(22,163,74,.35); /* Kräftigere Grünflächen als --ok-soft: für Flächen, die etwas AUSSAGEN müssen (freie Tage im Kalender), nicht nur eine Meldung tönen. */ --ok-fill: rgba(22,163,74,.16); --ok-fill-hover: rgba(22,163,74,.30); --warn: #b45309; --warn-soft: rgba(217,119,6,.10); /* Sehr helle Schrift für abgeschaltete Bedienelemente (z. B. Zähler am Anschlag). */ --text-faint: #c9cdd4; /* Lightbox: dunkler Hintergrund und die hellen Flächen darauf. */ --overlay: rgba(10,10,10,.93); --on-overlay: #ffffff; --on-overlay-soft: rgba(255,255,255,.12); --on-overlay-softer: rgba(255,255,255,.24); --on-overlay-dim: rgba(255,255,255,.75); /* ---- Rundungen: EINE Skala, vier Stufen plus die Knopfform ------------- Bis 18.08.2026 standen rund 40 harte Werte im Wireframe (5, 6, 7, 8, 10, 12, 14, 16, 18 und 999 px). Den Unterschied zwischen 6 und 7 px sieht niemand, aber er machte jedes Kundentheme unmoeglich: Eine eckige Marke haette an 40 Stellen einzeln nachgezogen werden muessen. Die drei kleineren Stufen leiten sich aus der grossen ab (rund 70 / 55 / 40 %). Ein Kundentheme setzt --radius-lg und bekommt den Rest passend. --radius-knopf ist bewusst getrennt: Knopfform ist eine eigene Entscheidung — scharfe Karten mit Pillenknoepfen sind eine gaengige Kombination (so macht es prinsengut.at). */ --radius-lg: 14px; --radius-md: 10px; --radius-sm: 8px; --radius-xs: 6px; --radius-knopf: 999px; /* Freistehende Fotos: Galerie und Lightbox. EIGENER Regler, weil manche Marken Karten runden und Fotos scharf lassen — oder umgekehrt. WICHTIG, damit niemand mehr davon erwartet: Die Fotos IN den Apartmentkarten und im Bildraster sitzen in Behaeltern mit overflow:hidden und werden von deren Ecken beschnitten. Dort gewinnt immer --radius-lg, egal was hier steht. Dieser Regler wirkt an den drei freistehenden Stellen — Galerie, Lightbox — und sonst nirgends. Das Logo im Kopf folgt bewusst --radius-sm: Es ist eine Marke, kein Foto. */ --radius-bild: var(--radius-md); --shadow-card: 0 1px 4px rgba(0,0,0,.04); --shadow-hover: 0 14px 34px rgba(28,63,143,.13); /* Überschriften: DM Sans (s. Kommentar beim @import oben). DM Sans läuft von Haus aus recht weit — die Überschriften bekommen deshalb eine leichte negative Laufweite (s. --display-tracking). */ --font-display: 'DM Sans', 'Figtree', system-ui, sans-serif; --display-tracking: -.02em; --font-body: 'Figtree', system-ui, -apple-system, sans-serif; }