/* ============================================================================ K&F Tollhaus — Adapter SHOP (brisk/UiCore 5.0.14 + Elementor Pro) Stand 14.08.2026 ============================================================================ AUFGABE ------- Dieselben Tokens wie auf der Hauptseite, nur an ein anderes Theme angeschlossen. Damit verschwindet der Bruch, den ein Elternteil beim Klick auf „TICKET SHOP" heute spürt: ab jetzt dieselbe Palette, dieselbe Typo-Skala, derselbe Primärbutton, dieselben Radien. ⚠️ ⛔ NICHTS in dieser Datei fasst Elementor-INHALTE, Seitenlayouts oder die Datenbank an. Der Shop wird beim Cutover mit einem frischen Live-Export überschrieben — alles, was in der DB sitzt, wäre weg. Diese Datei überlebt, weil sie eine Datei ist. ⚠️ Der Shop bringt Farben aus DREI Quellen mit, die sich gegenseitig überschreiben: Elementor-Kit-Variablen (.elementor-kit-4153), UiCore-Typografie-Variablen (body) und fest verdrahtete Hexwerte in den Elementor-Widget-Stylesheets (Kopf- und Fußzeile). Deshalb steht hier beides: Variablentausch UND namentliche Überschreibung. ========================================================================== */ /* ══ 1 · Elementor-Kit ═════════════════════════════════════════════════════ html body[class] = Spezifität 0-1-2 und schlägt damit .elementor-kit-4153 (0-1-0) unabhängig von der Ladereihenfolge — Elementor hängt seine Kit-CSS nicht verlässlich vor unsere Datei. */ html body[class] { --e-global-color-uicore_primary: var(--kf-aqua); /* war #77C8C9 — Beinahe- Dublette von #85C9D1 */ --e-global-color-uicore_secondary: var(--kf-orange); /* war #00A2A3 Petrol — gab es auf der Haupt- seite gar nicht */ --e-global-color-uicore_accent: var(--kf-orange); /* war #F18706 */ --e-global-color-uicore_headline: var(--kf-ink); /* war #273583 */ --e-global-color-uicore_body: var(--kf-ink-body); /* war #6E7A84 = 4,15:1, also der GESAMTE Fließtext unter AA */ --e-global-color-uicore_light: var(--kf-sky); /* war #BCE1E9 */ --e-global-color-8feda3a: var(--kf-sky); /* war #C9E7ED — auf sky, nicht auf mist: mist ist so hell, dass die obere Servicezeile ihre Fläche verliert (nachgesehen) */ --e-global-color-uicore_white: var(--kf-paper); /* Schriftfamilien: Überschriften bleiben die Comic-Schrift (die Klammer zur Hauptseite). Der Fließtext bleibt SourceSansPro — ein Familienwechsel wäre kein Grundschicht-Eingriff mehr und würde jede Zeilenlänge verschieben. */ --e-global-typography-uicore_primary-font-weight: 400; --e-global-typography-uicore_accent-font-weight: 400; /* ── Typo-Skala: dieselbe wie Root ────────────────────────────────────── Der Shop lief auf einer eigenen Skala (H1 80px gegen 48px auf der Hauptseite). Eine Skala für beide — das ist der halbe Bruch. */ --uicore-typography--h1-s: var(--kf-fs-h1); /* 80px → 56px */ --uicore-typography--h2-s: var(--kf-fs-h2); /* 48px → 40px */ --uicore-typography--h3-s: var(--kf-fs-h3); /* 24px → 30px */ --uicore-typography--h4-s: var(--kf-fs-h4); /* 21px → 24px */ --uicore-typography--h5-s: var(--kf-fs-h5); /* 16px → 20px */ --uicore-typography--h6-s: var(--kf-fs-h6); /* 14px → 18px */ --uicore-typography--h1-h: var(--kf-lh-tight); --uicore-typography--h2-h: var(--kf-lh-tight); --uicore-typography--h3-h: var(--kf-lh-tight); --uicore-typography--h4-h: var(--kf-lh-snug); --uicore-typography--h5-h: var(--kf-lh-snug); --uicore-typography--h6-h: var(--kf-lh-snug); /* Negative Laufweite raus. −0,027em auf einer handgeschriebenen Versalien- schrift lässt die Buchstaben ineinanderlaufen — zusammen mit dem synthetischen Fettdruck war das die zweite Ursache des unscharfen Eindrucks. Der Comic-Charakter bleibt, er wird nur wieder lesbar. */ --uicore-typography--h1-ls: 0; --uicore-typography--h2-ls: 0; --uicore-typography--h3-ls: 0; --uicore-typography--h4-ls: 0; --uicore-typography--h5-ls: 0; --uicore-typography--h6-ls: 0; --uicore-typography--h1-w: var(--kf-fw-display); --uicore-typography--h2-w: var(--kf-fw-display); --uicore-typography--h3-w: var(--kf-fw-display); --uicore-typography--h4-w: var(--kf-fw-display); --uicore-typography--h5-w: var(--kf-fw-display); --uicore-typography--h6-w: var(--kf-fw-display); /* H5 trug bisher die Akzentfarbe (Orange) — auf hellem Grund 2,4:1. */ --uicore-typography--h5-c: var(--kf-ink); /* Fließtext: 16px/1,875 in Grau → 18px/1,65 in Schwarzblau */ --uicore-typography--p-s: var(--kf-fs-base); --uicore-typography--p-h: var(--kf-lh-normal); --uicore-typography--p-c: var(--kf-ink-body); /* Radien: 6px/3px war die Signatur eines Standard-Widgets. Rund gehört zum Charme. */ --ui-radius: var(--kf-r-md); --ui-radius-sm: var(--kf-r-xs); } /* ══ 2 · WooCommerce- und YITH-Variablen ═══════════════════════════════════ */ html:root { --woocommerce: var(--kf-action); /* war #7F54B3 — die Werksfarbe, ungebrandet, am Kauf-Button */ --wc-primary: var(--kf-action); --wc-primary-text: var(--kf-action-text); --wc-secondary: var(--kf-mist); --wc-secondary-text:var(--kf-ink); --wc-subtext: var(--kf-ink-muted); --wc-red: var(--kf-error); --wc-green: var(--kf-success); /* YITH Booking — das Herzstück des Shops. Nur die Primärfarbe wird auf die Marke gezogen (Kalender-Auswahl, Aktionsflächen). ⛔ Keine Struktur-, Feld- oder Verhaltensregeln, damit die Buchung unangetastet bleibt. */ --yith-wcbk-primary: var(--kf-action); --yith-wcbk-primary-light: var(--kf-action-hover); --yith-wcbk-primary-contrast: var(--kf-action-text); /* 5,20:1 ✓ */ --yith-wcbk-error: var(--kf-error); --yith-wcbk-red: var(--kf-error); --yith-wcbk-fields-font-size: var(--kf-fs-sm); } /* ══ 3 · Kopfzeile ═════════════════════════════════════════════════════════ Die orange Kopfleiste (.elementor-element-17e0065f) trug weiße Menüschrift auf #F18706 = 2,56:1 — der zweitschlechteste Wert des Auftritts. Fläche bleibt orange (jetzt CI-Ton), Schrift dreht auf Dunkelblau. ⚠️ GEMESSENE FALLE (14.08.2026): Die orange Fläche darf AUSSCHLIESSLICH auf der Sektion selbst liegen. Wird sie zusätzlich auf .elementor-container oder .elementor-widget-container gelegt, färbt sie den Kasten des Logos mit — und weil die Logo-Wolke die Kopfzeile bewusst nach unten überragt (M12), wächst die orange Fläche dann von ~150px auf ~620px. Sieht im Code richtig aus, im Bild wie ein Fehler. Belegt in shots/nachher/04_produkt_1280_top (Zwischen- stand) gegen den Endstand. */ .elementor-element-17e0065f { background-color: var(--kf-orange); } .elementor-element-17e0065f .elementor-nav-menu .elementor-item, .elementor-element-17e0065f .elementor-nav-menu a.elementor-item { color: var(--kf-ink) !important; /* 5,20:1 ✓ statt 2,56:1 */ } .elementor-element-17e0065f .elementor-nav-menu a.elementor-item:hover, .elementor-element-17e0065f .elementor-nav-menu a.elementor-item:focus, .elementor-element-17e0065f .elementor-nav-menu a.elementor-item.elementor-item-active { color: var(--kf-ink) !important; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } /* Aufklapp-Untermenü auf heller Fläche — war Petrol #00A2A3 */ .elementor-nav-menu .elementor-sub-item, .elementor-nav-menu a.elementor-sub-item { color: var(--kf-ink) !important; /* 12,24:1 ✓ */ } /* Die obere Servicezeile (Telefon, Bestellung, Warenkorb) lief in Türkis #77C8C9 auf Weiß = 1,82:1 */ header a, .uicore-header a, .elementor-location-header a { color: var(--kf-ink); } /* ══ 4 · Fußzeile ══════════════════════════════════════════════════════════ Die Copyright-Leiste war Petrol #00A2A3 mit weißer Schrift (3,14:1) — eine Farbe, die es auf der Hauptseite gar nicht gibt. Jetzt dieselbe orange Fußleiste wie dort, mit Dunkelblau darauf. */ .uicore-copyrights, .uicore-copyrights .elementor-container { background-color: var(--kf-orange) !important; color: var(--kf-ink) !important; } /* ⚠️ Der Copyright-Text steckt in einem eigenen Absatz mit fest gesetztem Weiß (.uicore-copy-content p). Ohne diese Zeile wäre der Wert nach dem Flächenwechsel Petrol→Orange auf 2,35:1 GEFALLEN — also schlechter als vorher. Nachgemessen; genau dafür ist die Nachmessung da. */ .uicore-copyrights a, .uicore-copyrights .elementor-item, .uicore-copyrights p, .uicore-copy-content, .uicore-copy-content p, .uicore-copyrights-wrapper, .uicore-copyrights-wrapper * { color: var(--kf-ink) !important; /* 5,20:1 ✓ */ } footer a, .elementor-location-footer a { color: var(--kf-ink-body); /* war #6E7A84 */ } /* ══ 5 · Der EINE Primärbutton ═════════════════════════════════════════════ Vorher im selben Kaufweg drei Farben: Übersicht „Jetzt buchen" orange #F18706 (2,56:1) Produktseite „In den Warenkorb" petrol #00807F (Notfix aus Korrekturwelle 1; davor das ungebrandete WooCommerce-Lila #7F54B3) Warenkorb „Zurück zum Shop" türkis #77C8C9 (1,93:1) Ab hier: eine Farbe, eine Form, ein Schatten — überall. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce #respond input#submit.alt, .woocommerce div.product form.cart .button, .woocommerce a.button.wc-backward, a.checkout-button.button.alt, .single_add_to_cart_button, .yith-wcbk-add-to-cart-button, .uicore-btn, .elementor-button { background-color: var(--kf-action) !important; background-image: none !important; color: var(--kf-action-text) !important; border-color: var(--kf-action) !important; border-radius: var(--kf-r-md) !important; box-shadow: var(--kf-sh-sticker) !important; font-size: var(--kf-fs-sm) !important; /* die Kachel-CTA war 12px */ font-weight: var(--kf-fw-text-bold) !important; min-height: var(--kf-tap-min); transition: background-color var(--kf-dur-fast) var(--kf-ease-out); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce div.product form.cart .button:hover, .woocommerce a.button.wc-backward:hover, a.checkout-button.button.alt:hover, .single_add_to_cart_button:hover, .yith-wcbk-add-to-cart-button:hover, .uicore-btn:hover, .elementor-button:hover { background-color: var(--kf-action-hover) !important; color: var(--kf-action-text) !important; border-color: var(--kf-action-hover) !important; } /* ══ 6 · Überschriften ═════════════════════════════════════════════════════ */ .uicore-page h1, .uicore-page h2, .uicore-page h3, .uicore-page h4, .uicore-page h5, .uicore-page h6, .uicore-title, h1, h2, h3, h4, h5, h6 { color: var(--kf-ink); } /* ══ 7 · Zeilenlänge ═══════════════════════════════════════════════════════ Die Produktbeschreibungen liefen bei 1280px über die volle Inhaltsbreite: rund 150 Zeichen pro Zeile. Lesbar sind 60–75. Reine Typografie-Begrenzung, kein Layout-Eingriff — der Block bleibt, wo er ist. */ #tab-description p, .woocommerce-product-details__short-description p, .woocommerce-Tabs-panel p { max-width: var(--kf-measure); } /* ══ 8 · Sichtbarer Tastatur-Fokus ═════════════════════════════════════════ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--kf-focus) !important; outline-offset: 2px !important; border-radius: var(--kf-r-xs); } /* ══ 9 · Buchungsformular — nur Kontrast, sonst nichts ═════════════════════ ⛔ Keine Regel, die Position, Breite, Anzeige oder Verhalten der Auswahl- felder verändert. Ausschließlich Schriftfarbe und Radius. Die Feldlogik von YITH Booking bleibt vollständig unberührt. */ .yith-wcbk-booking-form label, .yith-wcbk-booking-form .yith-wcbk-booking-form-label, .yith-wcbk-booking-form legend { color: var(--kf-ink-body); /* war #6E7A84 = 4,15:1 */ } .yith-wcbk-booking-form input, .yith-wcbk-booking-form select, .yith-wcbk-booking-form textarea { border-radius: var(--kf-r-xs); color: var(--kf-ink-body); } /* ══ 10 · Cookie-Banner ════════════════════════════════════════════════════ Der Shop-Banner war blau #1E73BE, der Root-Banner orange — zwei Farben für dieselbe Firma. Jetzt beide der Primärbutton. */ html:root { --cmplz_button_accept_background_color: var(--kf-action); --cmplz_button_accept_border_color: var(--kf-action); --cmplz_button_accept_text_color: var(--kf-action-text); --cmplz_button_border_radius: var(--kf-r-md); } /* ══ 11 · Radien auf Produktkacheln ════════════════════════════════════════ */ .woocommerce ul.products li.product img, .woocommerce ul.products li.product, .uicore-product-item, .elementor-widget-woocommerce-products .product { border-radius: var(--kf-r-lg); }