/* Theme Name: Hof alla Cava Theme URI: https://hofallacava.com/ Description: Eigenes Theme von Hof alla Cava & Elektro Laimer (T58). Ersetzt das gekaufte Theme Solene samt Solene Core. Seiteninhalte bleiben in Elementor; Kopf, Footer, Blog, Archive, Suche und 404 baut dieses Theme. Enthaelt ausserdem Partner, Produkte, Team, Downloads und die eigenen Elementor-Bausteine. Author: Tim Respondek Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.1 Text Domain: hac */ /* ============================================================ HOF ALLA CAVA – Eigene Anpassungen Diese Datei wird auf JEDER Seite geladen. Hier alle eigenen CSS-Regeln eintragen – es muss nur diese eine Datei ausgetauscht werden. ============================================================ */ /* ------------------------------------------------------------ Header-/Hero-Bilder: oberen Abstand entfernen (alle Geräte) Der obere Weißraum stammt vom Seitenrahmen (.hac-inhalt__innen, padding-top: 70px). Wir entfernen ihn NUR, wenn die Seite mit einem Hero-Bild beginnt – auf normalen Seiten bleibt der Abstand erhalten. ------------------------------------------------------------ */ .hac-inhalt__innen:has(> .elementor > .elementor-top-section:first-child .elementor-background-overlay) { padding-top: 0 !important; } /* ------------------------------------------------------------ MOBILE: Header-/Hero-Bilder komplett vollbreit & randlos Greift bei JEDEM Elementor-Element mit Hintergrundbild + Overlay (.elementor-background-overlay). Das Bild wird über die volle Bildschirmbreite gezogen. ------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-element:has(> .elementor-background-overlay) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; } .elementor-element:has(> .elementor-background-overlay) > .elementor-background-overlay { border-radius: 0 !important; } } /* =========================================================================== AUS DEM CUSTOMIZER UEBERNOMMEN · 03.09.2026 · Ticket T16 --------------------------------------------------------------------------- Diese Regeln lagen bis hierher unter Design → Customizer → Zusaetzliches CSS, also in der Datenbank. Damit waren sie nicht versioniert, nicht deploybar und mussten auf jeder Umgebung von Hand gepflegt werden. Ein hineinkopierter Markdown-Codeblock hatte dort unbemerkt eine Regel ausser Kraft gesetzt (Ticket T15) – im Git-Diff waere das sofort aufgefallen. Der Umzug erfolgte inhaltlich unveraendert. Das Aufraeumen kam als eigener Schritt hinterher (T17, 04.09.2026): eine Akzentschrift, die nirgends benutzt wurde und deren Datei gar nicht existierte, eine erfundene CSS-Eigenschaft, eine Regel an falscher Stelle, ein leerer Block und eine Farbangabe, die von einem spezifischeren eigenen Modul ohnehin ueberstimmt wurde. Der Customizer ist auf allen drei Umgebungen geleert. Stilaenderungen laufen ab jetzt ueber diese Datei und den Deploy. =========================================================================== */ /* ========================= Hof alla Cava – vereinheitlichte Typo Fonts: Trebuchet MS (Body + Ueberschriften), Systemschrift, kein Webfont ========================= */ /* Farben / Tokens ------------------------------------------------------------------------- Das Farbsystem der Seite (README 6.1). Alle eigenen Dateien lesen von hier; Werte bitte nur hier aendern. Drei Schrifttoene reichen fuer die ganze Seite: Fliesstext, Ueberschriften/Namen, gedaempfte Angaben (Datum, Kategorie). Gruen und Blau als SCHRIFT haben eigene, dunklere Toene. Das Markengruen #bac6ae kommt als Schrift auf Weiss nur auf 1,8:1 und ist damit unlesbar, das Laimer-Blau #1d89f6 auf 3,5:1. Beide bleiben Flaechenfarben. "Gruen tief" statt "Gruen dunkel" fuer Schrift: #667d4f reicht auf reinem Weiss (4,6:1), aber nicht auf dem Seitengrund #faf9f6 (4,3:1) oder auf Hellgruen (4,2:1). #4d5f3b schafft auf allen drei ueber 6:1. ------------------------------------------------------------------------- */ :root{ --hac-farbe-text: #333333; /* Fliesstext – 12,6:1 auf Weiss */ --hac-farbe-text-dunkel: #1a1a1a; /* Ueberschriften, Namen – 17,4:1 */ --hac-farbe-text-leise: #6b6b6b; /* Datum, Kategorie, Hinweise – 5,3:1 */ --hac-farbe-gruen: #bac6ae; /* Marke – nur Flaeche, nie Schrift */ --hac-farbe-gruen-dunkel: #667d4f; /* Flaeche mit weisser Schrift – 4,6:1 */ --hac-farbe-gruen-tief: #4d5f3b; /* Gruen als Schrift – ueberall >6:1 */ --hac-farbe-gruen-hell: #f4f6f2; /* Sektionsgrund */ --hac-farbe-blau: #1d89f6; /* Elektro Laimer – nur Flaeche */ --hac-farbe-blau-dunkel: #0363c3; /* Blau als Schrift, Flaeche mit weisser Schrift – 5,9:1 */ /* Alte Namen, zeigen jetzt auf das System */ --brand: var(--hac-farbe-gruen); --ink: var(--hac-schrift-stark, var(--hac-farbe-text-dunkel)); --muted: var(--hac-schrift-leise, var(--hac-farbe-text-leise)); --link-hover-glow: var(--hac-schrift-blau, var(--hac-farbe-blau)); /* Link-Hover (Leuchtschatten) */ } /* Farbmodus: Rollen fuer Hell und Dunkel · Ticket T71 ------------------------------------------------------------------------- Die Farben oben (--hac-farbe-…) sind die MARKENPALETTE. Sie bleiben in beiden Modi gleich, weil sie auch als Knopfflaeche dienen (Gruen mit #333333, Blau mit Weiss). Was im Dunkelmodus umschaltet, sind ROLLEN: --hac-grund ............ Seitengrund --hac-flaeche .......... Sektionen, Karten auf hellgruenem Grund --hac-flaeche-erhoeht .. weisse Karten, Menue-Panel, Chat, Formularfelder --hac-linie ............ Trennlinien (nur Zierde) --hac-feld-grund ....... Grund von Eingabefeldern --hac-feld-rand ........ Rand von Feldern und Bedienelementen (>= 3:1) --hac-schrift .......... Fliesstext --hac-schrift-stark .... Ueberschriften, Namen --hac-schrift-leise .... Datum, Kategorie, Hinweise --hac-schrift-gruen .... Gruen als Schrift --hac-schrift-blau ..... Blau als Schrift, Links im Elektro-Bereich --hac-fokus ............ Fokusrahmen --hac-schatten ......... Schatten von Karten und Panels --hac-invers-grund ..... dunkle Flaeche mit heller Schrift (Hover „Jetzt lesen“) --hac-invers-schrift ... Schrift darauf Im Hellmodus sind die Rollen ABSICHTLICH NICHT gesetzt. Jede Datei schreibt ihren bisherigen Wert als Rueckfall dazu, z. B. color: var(--hac-schrift-stark, #1a1a1a); Hell bleibt damit exakt wie vorher, auch dort, wo ein Grauton vom System abweicht. Gesetzt werden die Rollen nur im Block darunter. Neue Regeln: jede Farbe als Rolle mit Rueckfall, nie fest. Feste Werte nur fuer Flaechen, die in beiden Modi gleich bleiben (Markenknoepfe, Schrift auf Fotos, Social-Markenfarben) – dann mit Kommentar „fest“. Pruefung: wp hac-theme farben (meldet feste Werte ohne Rolle). Dunkle Palette: von Tim freigegeben am 18.10.2026 (README 6.1). ------------------------------------------------------------------------- */ :root[data-hac-farbmodus="dunkel"] { color-scheme: dark; --hac-grund: #161b17; --hac-flaeche: #1f2620; /* = Footer */ --hac-flaeche-erhoeht: #283029; --hac-linie: #3a463b; /* 1,8:1 – nur Zierlinien */ --hac-feld-grund: #283029; --hac-feld-rand: #737f70; /* 4,2:1 auf Grund, 3,2:1 auf erhoeht */ --hac-schrift: #e7ece2; /* 14,5:1 auf Grund, 11,3:1 auf erhoeht */ --hac-schrift-stark: #ffffff; /* 17,5:1 */ --hac-schrift-leise: #a9b3a3; /* 8,0:1 / 6,3:1 */ --hac-schrift-gruen: #bac6ae; /* 9,8:1 / 7,6:1 */ --hac-schrift-blau: #6cb2f9; /* 7,8:1 / 6,1:1 */ --hac-fokus: #e7ece2; --hac-invers-grund: #ffffff; --hac-invers-schrift: #161b17; /* Schatten: auf dunklem Grund kraeftiger, sonst unsichtbar. */ --hac-schatten: 0 14px 34px rgba(0,0,0,.45); } /* Druck immer hell – die Rollen gelten dort nicht. */ @media print { :root[data-hac-farbmodus="dunkel"] { color-scheme: light; --hac-grund: initial; --hac-flaeche: initial; --hac-flaeche-erhoeht: initial; --hac-linie: initial; --hac-feld-grund: initial; --hac-feld-rand: initial; --hac-schrift: initial; --hac-schrift-stark: initial; --hac-schrift-leise: initial; --hac-schrift-gruen: initial; --hac-schrift-blau: initial; --hac-fokus: initial; --hac-invers-grund: initial; --hac-invers-schrift: initial; --hac-schatten: initial; } } /* Grundschrift */ html, body { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; color: var(--ink); line-height: 1.6; font-weight: 400; } /* Überschriften */ h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; color: var(--ink); font-weight: 700; letter-spacing: -0.005em; } h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); } h2 { font-size: clamp(1.7rem, 4.2vw, 2.2rem); } /* Blog Seiten-Titel weiß */ h1.eltdf-page-title.entry-title { color: #ffffff !important; /* fest: auf Foto */ } /* ========================= Interne Text-Links ========================= */ /* Selektoren erweitert für Page Builder & !important hinzugefügt */ p a, li a, .wpb_text_column a, .elementor-text-editor a { color: inherit !important; text-decoration: underline !important; text-decoration-color: var(--brand) !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; transition: all 0.3s ease !important; } /* Subtilerer Hover-Effekt */ p a:hover, li a:hover, .wpb_text_column a:hover, .elementor-text-editor a:hover { color: var(--link-hover-glow) !important; text-decoration-color: var(--link-hover-glow) !important; /* Glow stark reduziert für einen eleganteren Look */ text-shadow: 0 0 3px rgba(29, 137, 246, 0.2) !important; } /* ========================= Akzent & Formatierungen ========================= */ /* Großbuchstaben-Style */ .caps { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } /* Muted Text */ .muted { color: var(--muted); } /* Divider */ .divider { width: 90px; height: 3px; background: var(--brand); border-radius: 2px; margin: .9rem 0 1.2rem; } /* Buttons (Kontaktformular) */ .wpcf7-form-control.wpcf7-submit.eltdf-btn { /* Textfarbe kommt aus mu-plugins/hac-formulare/formulare.css (--hcf-on-brand, spezifischer). Dort steht #333333 - der Wert, den CLAUDE.md fuer Text auf Gruen vorschreibt. */ background-color: var(--brand) !important; border: none; padding: 10px 20px; font-size: 16px; font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; cursor: pointer; transition: background-color .3s ease; } .wpcf7-form-control.wpcf7-submit.eltdf-btn:hover { background-color: var(--brand) !important; } /* Instagram-Widget Balken */ div.widget.widget_eltdf_instagram_widget::before { background-color: var(--brand) !important; } /* Mobile Überschriften & Silbentrennung */ @media (max-width: 767px) { h1.elementor-heading-title.elementor-size-default { white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; display: block !important; font-size: 30px !important; line-height: 1.2 !important; } } @media (max-width: 600px) { h1, h2 { hyphens: auto; } } /* ========================= Sonstiges & Fixes ========================= */ strong { font-weight: 700 !important; } .eltdf-social-share-holder { display: none !important; } a.eltdf-post-info-author-link { pointer-events: none; cursor: default; text-decoration: none; color: inherit; } .tribe-events-event-categories-label { hyphens: auto; word-break: break-word; } /* verhindert Großbuchstaben im Kontaktformular */ .eltdf-custom-cf input, .eltdf-custom-cf select, .eltdf-custom-cf textarea, .eltdf-custom-cf label { text-transform: none !important; } @media (max-width: 767px) { .tribe-events-cost:before { content: " "; white-space: pre; } } /* Deaktiviert den Blur-Effekt und setzt das Bild zurück */ .main-image { filter: none !important; transform: none !important; opacity: 1 !important; } /* Partner Card: Name & Kategorie responsiv umbrechen */ .hac-partner-card__body { width: 100%; min-width: 0; box-sizing: border-box; } .hac-partner-card__name, .hac-partner-card__kat { display: block; white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; } .long-list-item { content-visibility: auto; contain-intrinsic-size: auto; } /* verhindert Großbuchstaben im Kontaktformular (Elated & HAC-Form) */ .eltdf-custom-cf input, .eltdf-custom-cf select, .eltdf-custom-cf textarea, .eltdf-custom-cf label, .hac-form input, .hac-form select, .hac-form textarea, .hac-form label { text-transform: none !important; } .gp-container dd a, .gp-container .gp-footer a { color: inherit !important; text-decoration: underline !important; text-decoration-color: var(--brand) !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; transition: all 0.3s ease !important; } .gp-container dd a:hover, .gp-container .gp-footer a:hover { color: var(--link-hover-glow) !important; text-decoration-color: var(--link-hover-glow) !important; text-shadow: 0 0 3px rgba(29, 137, 246, 0.2) !important; } /* ========================= Tribe Events – Kalender abonnieren + Nav (HAC-Design) ========================= */ .tribe-events-c-subscribe-dropdown__button { background: var(--brand) !important; border: none !important; border-radius: 8px !important; /* T42: Marken-Standard statt 4px */ color: var(--hac-farbe-text-dunkel) !important; /* T42: TEC setzte #BAC6AE = Knopfgrund, Symbol unsichtbar */ padding: 10px 20px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: opacity .3s ease !important; } .tribe-events-c-subscribe-dropdown__button:hover { opacity: .85 !important; } .tribe-events-c-subscribe-dropdown__button-text { font: 700 16px "Trebuchet MS", "Segoe UI", Arial, sans-serif !important; color: var(--hac-farbe-text-dunkel) !important; text-transform: none !important; padding: 0 !important; } .tribe-events-c-subscribe-dropdown__button-icon path { fill: var(--hac-farbe-text-dunkel) !important; } /* T42: Kalender-Symbol links im Knopf. Pfad 1 = Kalenderblatt (gefuellte Form), Pfad 2 = Pfeil (nur Linie). Ohne diese Regeln wird der Pfeil schwarz gefuellt und die Linien haben die Farbe des Knopfgrunds. */ .tribe-events-c-subscribe-dropdown__export-icon { color: var(--hac-farbe-text-dunkel) !important; } .tribe-events-c-subscribe-dropdown__export-icon path:nth-of-type(1) { fill: currentColor !important; stroke: none !important; } .tribe-events-c-subscribe-dropdown__export-icon path:nth-of-type(2) { fill: none !important; stroke: currentColor !important; } .tribe-events-c-subscribe-dropdown__list { border-radius: 8px !important; } /* T42: wie der Knopf */ .tribe-events-c-nav__next-label { font-weight: 700 !important; color: var(--hac-schrift-gruen, var(--hac-farbe-gruen-tief)) !important; /* T25: #bac6ae lag bei 1,8:1 */ } .tribe-events-c-nav__next-icon-svg path { fill: var(--hac-schrift-gruen, var(--hac-farbe-gruen-tief)) !important; } /* =========================================================================== SEITENUEBERGAENGE (View Transitions) · Ticket T18 --------------------------------------------------------------------------- Der Browser blendet beim Wechsel zwischen zwei Seiten weich um, statt hart umzuschalten. Rein nativ – kein JavaScript, keine Bibliothek, keine externe Ressource. Die Regel MUSS auf oberster Ebene stehen. In eine Media Query verschachtelt bleibt sie wirkungslos – genau so stand sie frueher im Customizer-CSS und hat nie gewirkt (siehe T17). Voraussetzungen laut Chrome-Dokumentation: Navigation innerhalb derselben Domain, und beide Seiten muessen die Regel tragen. Da sie hier im Stylesheet des Themes steht, gilt sie fuer jede Seite. Browser ohne Unterstuetzung (aktuell Firefox) ignorieren die Regel vollstaendig und navigieren wie bisher. Es geht also nichts kaputt. =========================================================================== */ @view-transition { navigation: auto; } /* Barrierefreiheit: Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt keine Animation. Bewegte Uebergaenge koennen bei vestibulaeren Beschwerden Schwindel ausloesen. Die Regel selbst bleibt aktiv, nur die Animation wird auf null gesetzt – das ist der vorgesehene Weg, denn @view-transition laesst sich nicht per Media Query abschalten. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* =========================================================================== BLOG: Brotkrume, Kategorien, weiterfuehrende Beitraege · Ticket T22 --------------------------------------------------------------------------- Der Kopfbereich des Themes ist auf Einzelbeitraegen abgeschaltet (mu-plugins/hac-blog.php). Was hier steht, ersetzt ihn: eine schlanke Brotkrume ueber dem Artikel, Kategorien und weiterfuehrende Beitraege darunter. =========================================================================== */ /* --- Brotkrume ------------------------------------------------------------ */ .hac-brotkrume { max-width: 1100px; /* Wenig Abstand nach oben: Das Theme setzt oberhalb des Inhalts bereits rund 40 Pixel. Zusammen mit den frueheren 2rem stand die Brotkrume zu weit unten und der Weissraum wirkte groesser als auf anderen Seiten. */ margin: 0 auto; /* Innenabstand statt Aussenabstand: So hat die Zeile Luft nach oben und unten, ohne den Block nach unten zu schieben. */ padding: 1rem 20px 1.25rem; font-size: 0.85rem; } .hac-brotkrume__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .hac-brotkrume__punkt { display: flex; align-items: center; color: var(--muted); } /* Trenner als Pseudo-Element: steht nicht im Text und wird von Screenreadern nicht mitgelesen. */ .hac-brotkrume__punkt + .hac-brotkrume__punkt::before { content: "›"; margin-right: 0.5rem; color: var(--brand); } .hac-brotkrume__punkt a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .hac-brotkrume__punkt a:hover { color: var(--ink); border-bottom-color: var(--brand); } .hac-brotkrume__punkt [aria-current="page"] { color: var(--ink); } /* --- BLOG: Infozeile unter dem Titel · Ticket T50 ------------------------ „Von Hof alla Cava · 24. August 2026“ – gleich gross, normal statt kursiv, gedaempftes Grau, zentriert zum Titel. Darunter die kurze Markenlinie wie im Seitenkopf (T49). Template: framework/modules/blog/templates/singles/ standard/post.php */ /* Beitragstitel in normaler Schreibweise wie im Entwurf (Tim, 09.10.2026). Das Theme setzt alle Ueberschriften in Grossbuchstaben – nur hier aus. */ body .eltdf-blog-holder.eltdf-blog-single .eltdf-post-info-top > .eltdf-post-title { text-transform: none; } /* Das Theme setzt ".eltdf-post-info-top > div" auf inline-block und 13 px – deshalb dieselbe Tiefe plus body. */ body .eltdf-blog-holder.eltdf-blog-single .eltdf-post-info-top > .hac-beitrag-info { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 22px 0 0; font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 1.5; color: var(--hac-schrift-leise, var(--hac-farbe-text-leise)); text-align: center; } body .eltdf-blog-holder.eltdf-blog-single .eltdf-post-info-top > .hac-beitrag-info > * { font: inherit; color: inherit; } body .eltdf-blog-holder.eltdf-blog-single .eltdf-post-info-top > .hac-beitrag-linie { display: block; width: 48px; height: 3px; margin: 24px auto 0; border-radius: 2px; background: var(--hac-farbe-gruen); } /* --- Kategorien unter dem Beitrag ----------------------------------------- */ .hac-beitrag-kategorien { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hac-linie, rgba(15, 15, 15, .1)); font-size: .9rem; } .hac-beitrag-kategorien__titel { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .78rem; color: var(--muted); margin-right: .35rem; } .hac-beitrag-kategorien a { display: inline-block; padding: .2rem .7rem; margin: .15rem .2rem .15rem 0; border-radius: 999px; background: var(--brand); color: #333333; /* fest: Schrift auf Gruen */ text-decoration: none; transition: opacity .2s ease; } .hac-beitrag-kategorien a:hover { opacity: .8; } /* --- Weiterfuehrende Beitraege -------------------------------------------- */ .hac-weitere-beitraege { margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--hac-linie, rgba(15, 15, 15, .1)); } .hac-weitere-beitraege__titel { font-size: 1.35rem; margin: 0 0 1.5rem; } .hac-weitere-beitraege__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .hac-weitere-beitraege__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .hac-weitere-beitraege__bild { display: block; overflow: hidden; border-radius: 4px; margin-bottom: .75rem; aspect-ratio: 3 / 2; } .hac-weitere-beitraege__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .hac-weitere-beitraege__link:hover .hac-weitere-beitraege__bild img { transform: scale(1.04); } .hac-weitere-beitraege__name { display: block; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; } .hac-weitere-beitraege__link:hover .hac-weitere-beitraege__name { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; } .hac-weitere-beitraege__datum { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); } @media (max-width: 767px) { .hac-weitere-beitraege__liste { grid-template-columns: 1fr; gap: 1.25rem; } .hac-weitere-beitraege__link { flex-direction: row; gap: .9rem; align-items: flex-start; } .hac-weitere-beitraege__bild { flex: 0 0 110px; margin-bottom: 0; } } /* Bewegung nur, wenn der Nutzer sie zulaesst. */ @media (prefers-reduced-motion: reduce) { .hac-weitere-beitraege__bild img { transition: none; } .hac-weitere-beitraege__link:hover .hac-weitere-beitraege__bild img { transform: none; } } /* Menue-Oeffner im Handykopf (T29): jetzt ein echter