/* Theme Name: König Sylt (Child Theme) Theme URI: https://github.com/elementor/hello-theme/ Description: Child Theme für König Sylt – Google-Bewertungen und Karriere (Jobs mit Detailseite, Standorte/Unternehmen). Farben und Schriften kommen aus dem Elementor-Kit (Site Settings). Author: VIEREINHALB GmbH Author URI: https://www.viereinhalb.io/ Template: hello-elementor Version: 1.0.0 Requires PHP: 7.4 Text Domain: koenig-sylt-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* * Farben und Schriften kommen aus dem Elementor-Kit (Site Settings). * inc/global-style-bridge.php liest das Kit aus und stellt die Werte als * CSS-Variablen bereit (--color-brand, --color-overlay-bg, --color-text, * --color-surface, --font-body, ...) – die Regeln unten nutzen nur diese. * * Inhalt (1:1 von der König-Sylt-Immobilien-Seite übernommen): * 1. Primär-/Sekundär-Button (Elementor Button-Widget, Type Default/Warning) * 2. Karten: Bild/Titel lösen den Button-Hover aus (.koenig-card) * 3. Karussel-Karten gleich hoch (.koenig-carousel-card) * * Die Styles der Job-Fallback-Templates liegen in assets/css/karriere.css. */ /** * Primär-/Sekundär-Button für das Elementor "Button"-Widget. * (Figma: 608:28425 "CTA - primär"; Sekundär neu nach 608:28514) * * Bewusst über Elementor's eingebautes "Type"-Dropdown am Button- * Widget zweckentfremdet, statt eine eigene CSS-Klasse zu verlangen, * die Redakteure von Hand eintippen müssten: * * Primär → Type "Default" → Basis-Klasse .elementor-button * Sekundär → Type "Warning" → .elementor-button-warning * (rein als Namens-Container zweckentfremdet, hat mit * einer echten Warnung nichts zu tun) * * WICHTIG zur Selektor-Struktur: Elementor hängt die Type-Klasse * ("elementor-button-warning" etc.) an das ÄUSSERE Widget-Element * (.elementor-element), NICHT an den eigentlichen * Link — Markup ist ungefähr: *
*
*
* * * ... * * *
*
*
* Ein Selektor wie ".elementor-button-warning { padding: ... }" (ohne * Nachfahren-Kombinator) hätte deshalb live das ÄUSSERE Element * gestylt statt den Button selbst — genau das ist beim ersten Versuch * passiert (riesige weiße Pille um einen unveränderten grauen * Default-Button herum). Deshalb IMMER ".elementor-button-warning * .elementor-button" (mit Leerzeichen!) für alles, was am Button * selbst sitzen soll. * * Pfeil-Icon: NICHT von Elementor's Icon-Feld abhängig (das kann im * Editor vergessen werden — genau das ist live passiert, drei Buttons * ganz ohne Pfeil). Stattdessen wird der exakte Figma-Pfeil ("Vector 2") * per CSS-Mask automatisch als ::after an .elementor-button-content-wrapper * gehängt — via :not(:has(...)) NUR, wenn kein eigenes Icon gesetzt * wurde. Setzt ein Redakteur trotzdem bewusst ein Icon im Editor, wird * das respektiert (kein doppeltes Icon), unsere Farb-/Hover-Regeln * greifen dann stattdessen auf .elementor-button-icon. * * Live geprüft, wobei ohne Overrides schiefging: * - font-size/line-height blieben Elementors 15px/15px statt Figmas * 16px/1.6 → Button nur 37px statt ~50px hoch, dadurch wirkte die * 9999px-Pill-Rundung falsch proportioniert (zu flach). * - font-family fiel auf "Roboto" zurück statt "Mada" (Elementors * "Accent"-Typography-Rolle ist nie auf Mada gesetzt worden). * - Content-Wrapper-Gap blieb Elementors Default 5px statt Figmas 52px. * - Content-Wrapper hatte kein align-items:center → Pfeil (13.46px * hoch) stand nicht mittig zum Text (25.6px hohe Zeile). * * !important, weil Elementor's Kit-CSS (Theme Style → Buttons, die * eingebauten Type-Farben, und teils sogar Widget-spezifische * Farb-Overrides aus dem Editor) an vergleichbarer oder höherer * Selektor-Spezifität liegt — gleiches Muster wie beim * Hello-Elementor-Parent-Theme-Konflikt beim Menü. */ /* ------------------------------------------------------------------ Geltungsbereich: welche Buttons das Theme ueberhaupt anfasst ------------------------------------------------------------------ Elementors "Type"-Dropdown kennt fuenf Werte. Zwei davon sind unser Design-System, die anderen drei bleiben ABSICHTLICH unangetastet: Default -> Primaer (Regeln unten) Warning -> Sekundaer (Regeln unten) Info / Success / Danger -> kein Theme-CSS, freie Flaeche fuer Buttons, die im Editor bewusst anders aussehen sollen. Warum das noetig wurde: Vorher stand in allen Regeln schlicht ".elementor-button" — und diese Klasse traegt JEDER Elementor-Button, unabhaengig vom eingestellten Type. Zusammen mit dem weiter oben begruendeten !important hat das Theme dadurch auch die Buttons ueberschrieben, die im Editor absichtlich anders eingestellt waren: Was man im Widget unter "Stil" setzt (Farbe, Hover, Rahmen), gibt Elementor OHNE !important aus und verliert deshalb gegen unsere Regeln — der Button sah im Editor richtig aus, im Frontend aber weiter wie Primaer. Loesung ist der ":not()"-Riegel in den Selektoren unten: Primaer greift nur noch, wenn am Button-Widget KEINER der drei freien Typen gesetzt ist. Wer also einen Button braucht, der anders aussehen soll (andere Farbe, anderer Hover, eigenes Icon), stellt im Editor Type auf "Info" (oder Success/Danger) und baut ihn komplett im Stil-Tab — das Theme haelt sich dort vollstaendig raus, inklusive Pill-Form, Padding, Typo und automatischem Pfeil. Bewusste Grenze: Der Riegel haengt an ".elementor-widget-button", also am Button-WIDGET selbst (dort sitzt auch die Type-Klasse). Buttons, die andere Widgets erzeugen — etwa der Absenden-Button eines Elementor-Formulars — bekommen dadurch kein Design-System-Styling. Auf der Seite gibt es solche Buttons aktuell nicht (live ueber alle Seiten geprueft: ausschliesslich Button-Widgets). Kommt spaeter ein Formular dazu und soll dessen Button wie Primaer aussehen, genuegt es, dessen Selektor (".elementor-widget-form .elementor-button") in die Regeln unten mit aufzunehmen. Warum die :not() einzeln verkettet sind statt ":not(a, b, c)": Die Listen-Schreibweise ist neueres CSS. Versteht ein Browser den Selektor nicht, verwirft er die KOMPLETTE Regel — dann staenden die Buttons voellig ohne Styling da. Die verkettete Form versteht dagegen jeder Browser, der hier ueberhaupt in Frage kommt. ------------------------------------------------------------------ */ .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button, .elementor-button-warning .elementor-button { display: inline-flex !important; align-items: center !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; border-radius: 9999px !important; padding: 10px 30px !important; font-family: var(--font-body) !important; /* Figma: 16px am Desktop, 14px am Handy - dazwischen mitwachsend, gleiche Rechnung wie die Schriftgroessen in tailwind.config.js. */ font-size: clamp(14px, 13.30px + 0.179vw, 16px) !important; font-weight: 500 !important; line-height: 1.6 !important; } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus, .elementor-button-warning .elementor-button:hover, .elementor-button-warning .elementor-button:focus { font-weight: 500 !important; /* explizit auch im Hover, damit hier nie etwas "springt" */ } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-content-wrapper, .elementor-button-warning .elementor-button-content-wrapper { gap: 52px !important; align-items: center !important; min-height: 29px; /* Figma: Inhalt 29 px hoch -> Button 50 px */ } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-icon, .elementor-button-warning .elementor-button-icon, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-content-wrapper::after, .elementor-button-warning .elementor-button-content-wrapper::after { transition: transform 0.2s ease; } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover .elementor-button-icon, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus .elementor-button-icon, .elementor-button-warning .elementor-button:hover .elementor-button-icon, .elementor-button-warning .elementor-button:focus .elementor-button-icon, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover .elementor-button-content-wrapper::after, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus .elementor-button-content-wrapper::after, .elementor-button-warning .elementor-button:hover .elementor-button-content-wrapper::after, .elementor-button-warning .elementor-button:focus .elementor-button-content-wrapper::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button, .elementor-button-warning .elementor-button, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-icon, .elementor-button-warning .elementor-button-icon, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-content-wrapper::after, .elementor-button-warning .elementor-button-content-wrapper::after { transition-duration: 0.01ms !important; } } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-content-wrapper:not(:has(.elementor-button-icon))::after, .elementor-button-warning .elementor-button-content-wrapper:not(:has(.elementor-button-icon))::after { content: ''; display: block; flex: 0 0 auto; width: 17.63px; height: 13.46px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.337 14.166'%3E%3Cpath d='M0 7.08302H17.6299M10.9004 13.8125L17.6299 7.08302L10.9004 0.353553' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.337 14.166'%3E%3Cpath d='M0 7.08302H17.6299M10.9004 13.8125L17.6299 7.08302L10.9004 0.353553' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* Primär (Figma 1778:15999, König Sylt, 03.11.2026): König-Gold gefüllt, Rand Gold, Text + Pfeil weiß (Mada Medium 16 / 1.6, Padding 10/30, Gap 52, Pill - aus der gemeinsamen Regel oben). Hover ist im Figma nicht gezeichnet: kippt in die Optik des Sekundär- Buttons (weiß, Goldrand, Text Blau, Pfeil Gold) - Pfeil rückt 4px. */ .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button { background-color: var(--color-gold, #907947) !important; border: 1px solid var(--color-gold, #907947) !important; color: var(--color-surface, #fff) !important; } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus { background-color: var(--color-surface, #fff) !important; border-color: var(--color-gold, #907947) !important; color: var(--color-blue, #232c3c) !important; } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-icon { color: var(--color-surface, #fff); } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-content-wrapper::after { background-color: var(--color-surface, #fff); } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button .elementor-button-icon svg { fill: currentColor; } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover .elementor-button-icon, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus .elementor-button-icon { color: var(--color-gold, #907947); } .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:hover .elementor-button-content-wrapper::after, .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button:focus .elementor-button-content-wrapper::after { background-color: var(--color-gold, #907947); } /* Sekundär (Figma 608:28514 "CTA - sekundär", König Sylt): Ruhezustand weiß gefüllt, Rand und Pfeil König-Gold (#907947), Text #232C3C (Mada Medium 16px / 1.6, Padding 10/30, Gap 52 - kommen aus der gemeinsamen Regel oben). Hover ist im Figma nicht gezeichnet: gold gefüllt, Text und Pfeil weiß (gleiche Logik wie beim Primär-Button: Füllung kippt, Pfeil rückt 4px). Alles am ".elementor-button" INNERHALB von ".elementor-button-warning", siehe Erklärung oben. */ .elementor-button-warning { --cta-sek-gold: var(--color-gold, #907947); --cta-sek-text: var(--color-blue, #232c3c); /* König-Sylt-Blau */ } .elementor-button-warning .elementor-button { background-color: var(--color-surface, #fff) !important; /* weiß statt durchsichtig (Figma 1568:5437) */ border: 1px solid var(--cta-sek-gold) !important; color: var(--cta-sek-text) !important; } .elementor-button-warning .elementor-button:hover, .elementor-button-warning .elementor-button:focus { background-color: var(--cta-sek-gold) !important; border-color: var(--cta-sek-gold) !important; color: var(--color-surface, #fff) !important; } /* Eigenes Elementor-Icon: nur Farbe. Automatischer Pfeil (::after, CSS-Mask): Hintergrundfarbe = Pfeilfarbe. Getrennt, damit ein gesetztes Icon keinen gefüllten Kasten hinter sich bekommt. */ .elementor-button-warning .elementor-button-icon { color: var(--cta-sek-gold); } .elementor-button-warning .elementor-button-content-wrapper::after { background-color: var(--cta-sek-gold); } .elementor-button-warning .elementor-button-icon svg { fill: currentColor; } .elementor-button-warning .elementor-button:hover .elementor-button-icon, .elementor-button-warning .elementor-button:focus .elementor-button-icon { color: var(--color-surface, #fff); } .elementor-button-warning .elementor-button:hover .elementor-button-content-wrapper::after, .elementor-button-warning .elementor-button:focus .elementor-button-content-wrapper::after { background-color: var(--color-surface, #fff); } /* ------------------------------------------------------------------ Elementor-Karten: Bild und Titel loesen den Button-Hover aus ------------------------------------------------------------------ Gleiches Verhalten wie bei den onOffice-Karten (.oo-ziel in assets/css/onoffice.css), nur fuer Karten, die in Elementor gebaut sind (Loop-Items, News, eigene Karten-Container): Container der Karte -> CSS-Klasse koenig-card Bild-Widget (mit Link) -> CSS-Klasse koenig-card-ziel Titel-Widget (mit Link) -> CSS-Klasse koenig-card-ziel Button-Widget -> nichts, Typ wie gewohnt (Standard = Primaer, "Warnung" = Sekundaer) Faehrt man ueber Bild oder Titel, zeigt der Button der Karte seinen Hover-Zustand. Bild und Titel brauchen in Elementor KEINEN eigenen Link: assets/js/karten.js macht sie klickbar und nimmt dafuer das Ziel des Buttons der Karte. Hat ein Widget doch einen eigenen Link, gilt der. Die Karte selbst (Leerraum, Texte) bleibt nicht klickbar. Die Hover-Werte unten sind 1:1 die der Buttons weiter oben. ------------------------------------------------------------------ */ .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button { background-color: var(--color-surface, #fff) !important; border-color: var(--color-gold, #907947) !important; color: var(--color-blue, #232c3c) !important; } .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button-icon { color: var(--color-gold, #907947); transform: translateX(4px); } .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-danger):not(.elementor-button-warning) .elementor-button-content-wrapper::after { background-color: var(--color-gold, #907947); transform: translateX(4px); } .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-warning .elementor-button { background-color: var(--cta-sek-gold) !important; border-color: var(--cta-sek-gold) !important; color: var(--color-surface, #fff) !important; } .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-warning .elementor-button-icon { color: var(--color-surface, #fff); transform: translateX(4px); } .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-warning .elementor-button-content-wrapper::after { background-color: var(--color-surface, #fff); transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-icon, .koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-content-wrapper::after { transform: none; } } /* ------------------------------------------------------------------ Karussel-Karten: gleich hohe Container, Button immer unten ------------------------------------------------------------------ Für Container, die manuell in einzelne Karussel-Slides eingefügt und dann kopiert wurden (Bild + Text + Button je Karte) - anders als bei einem Loop Carousel gibt es hier keine gemeinsame Vorlage, deshalb reicht eine gemeinsame CSS-Klasse auf jedem Container statt einer Elementor-eigenen "selector"-Regel pro Widget. Anwendung in Elementor: bei JEDEM Karussel-Container (jeder Kopie) im Tab "Erweitert" -> "CSS-Klassen" die Klasse "koenig-carousel-card" eintragen. Diese eine Regel hier greift dann automatisch bei allen. height: 100% gleicht die Kartenhöhe an die höchste Karte im Karussel an (die Swiper-Slides selbst sind bereits gleich hoch, nur der Container darin füllt das ohne diese Regel nicht aus). justify-content: space-between schiebt Bild+Text nach oben und den Button nach unten - der übrige Platz wird automatisch zur Lücke zwischen Text und Button, nicht zwischen Bild und Text. */ .koenig-carousel-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /* Elementor-Karten: Bild/Titel ohne eigenen Link zeigen die Hand (Klick leitet assets/js/karten.js auf das Button-Ziel weiter). */ .koenig-card .koenig-card-ziel.ist-klickbar { cursor: pointer; }