/* Theme Name: Kadence Child FGV Theme URI: https://fgv-wiedikon.ch Description: Child Theme für den Familiengartenverein Wiedikon. Enthält die Design-Tokens aus dem Layout 260610 FGVW_Website (v2) sowie die selbst gehostete Variable Font BioRhymeVar. Author: Guido Schmid Template: kadence Version: 1.15.1 Text Domain: kadence-child-fgv */ /* ========================================================================== 0 — Schriften -------------------------------------------------------------------------- Beide Familien werden selbst gehostet, siehe fonts/README.txt. Be Vietnam Pro lief bis 1.9.23 NIE als Webfont (Befund 9.10.): Die Google-Anfrage, die dieser Kommentar früher beschrieb, gab es auf der Demo nicht, der Stack fiel auf die Systemschrift zurück. Seit 1.10.0 liegen die vier Schnitte 400/500/600/700 (Latin, Fontsource 5.3.0, OFL) in fonts/, Preload für 400 und 600 in functions.php. Kursiv wird bewusst nicht geladen — V2 setzt keine Kursive (Phase 1: Italic raus). ========================================================================== */ @font-face { font-family: "BioRhymeVar"; src: url("fonts/biorhyme-variable.woff2") format("woff2-variations"), url("fonts/biorhyme-variable.woff2") format("woff2"); font-weight: 200 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 1 — Design Tokens -------------------------------------------------------------------------- Farben hängen sich an die bestehende Kadence Global Palette an, statt sie ein zweites Mal zu definieren. Änderst du eine Farbe im Customizer, wandert sie automatisch durch alle Regeln hier. Typo-Skala: Grössen aus dem V2-Artboard (1920 px / Content 1660 px), umgerechnet auf die Kadence Content Width von 1290 px — Faktor 0.777. Fliesstext ist bewusst ausgenommen und bleibt bei 18 px, weil 20 × 0.777 mit 15.5 px unter die Lesbarkeitsgrenze fiele. ========================================================================== */ :root { /* --- Farben aus der Kadence-Palette ------------------------------- */ --fgv-sage: var(--global-palette1); /* #5ab781 Buttons, Verlauf */ --fgv-cherry: var(--global-palette2); /* #e83859 Buttons, Headings */ --fgv-ebony: var(--global-palette3); /* #282727 Fliesstext */ --fgv-paper: var(--global-palette6); /* #fcfcf6 heller Grund */ --fgv-cherry-70: var(--global-palette7); /* #ef748b Wissen-Band, Footer */ --fgv-sage-60: var(--global-palette8); /* #9cd4b3 Aktuell, Newsletter */ --fgv-sunflower-25: var(--global-palette9); /* #fbf8bf Engagement-Band */ /* Fehlt in der Palette — siehe offene Punkte im Sprint-Protokoll. */ --fgv-sunflower: #efe400; --fgv-white: #ffffff; /* Drawer-Menü V2 (11.9.): eigene Off-Black/Grau/Braunschwarz-Werte, nicht in der Global Palette. */ --fgv-drawer-text: #0d0d0d; /* Black 95 % (Roman 9.10.), bis 1.10.0 #1b1b1b */ --fgv-drawer-text-hover: #8a8a8a; --fgv-drawer-divider: #2b2420; /* dunkel, ein wenig braun (Guido) */ /* Aus der V2-Palettenseite. Sage-30 ist seit 1.10.0 DAS Bandgrün (Entscheid Guido 9.10.: der Ton der Downloads-Seite gilt überall). */ --fgv-cherry-40: #f6afbc; --fgv-sage-30: #bde2cd; --fgv-sunflower-60: #f4ec4d; /* Angefordert 11.9.b: drei der vier Werte sind exakte Duplikate bestehender Tokens (cherry-light = cherry-70, cherry-pale = cherry-40, yellow-mid = sunflower-60) — als Alias verlinkt statt den Hex-Wert ein zweites Mal hinzuschreiben, sonst laufen sie bei einer Customizer-Anpassung der Palette auseinander. --fgv-green-mid ist der einzige wirklich neue Wert, in keiner bestehenden Variable enthalten. */ --fgv-cherry-light: var(--fgv-cherry-70); /* = #ef748b */ --fgv-cherry-pale: var(--fgv-cherry-40); /* = #f6afbc */ --fgv-yellow-mid: var(--fgv-sunflower-60); /* = #f4ec4d */ --fgv-green-mid: #8ccda7; /* --- Semantische Aliase ------------------------------------------- */ --fgv-text: var(--fgv-ebony); --fgv-text-invert: var(--fgv-white); --fgv-link: var(--fgv-cherry); /* Grüne Bänder bis 1.9.23 auf Sage-60 (#9cd4b3), nur Downloads auf Sage-30. Seit 1.10.0 alle auf Sage-30; --fgv-band-sage bleibt als Alias, damit .fgv-band--sage (Downloads) weiter greift. Sage-60 bleibt für Flächen wie die Mitmach-Kachel der Agenda. */ --fgv-band-green: var(--fgv-sage-30); --fgv-band-pink: var(--fgv-cherry-70); --fgv-band-yellow: var(--fgv-sunflower-25); --fgv-band-sage: var(--fgv-band-green); --fgv-footer-bg: var(--fgv-cherry-70); --fgv-btn-bg: var(--fgv-cherry); --fgv-btn-bg-alt: var(--fgv-sage); --fgv-btn-text: var(--fgv-white); /* Hover aller Buttons: Grundfarbe mit Weiss gemischt, statt brightness(1.12) (Roman 9.10.: zu schwach). 72 % Cherry ergibt fast genau Cherry-70 — dieselbe Aufhellung wie im Menü. Ein Wert für alle Buttons. */ --fgv-btn-hover-mix: 72%; --fgv-rule: var(--fgv-sage); /* --- Schriftfamilien ---------------------------------------------- V2 verwendet ZWEI BioRhyme-Instanzen aus derselben Variable Font: Display + Buttons = SemiExpanded Bold → wdth 120, wght 700 Accordion + Teaser = SemiBold, schmalste Achse → wdth 100, wght 600 Der zweite Wert war bis 1.8.3 «wdth 100, wght 800». Guido 9.9. nach Sichtvergleich mit der Vorlage: zu fett. Der Token gilt bewusst weiterhin fuer Accordion-Titel UND Teaser-Linklisten — eine Instanz im System. */ --fgv-font-display: "BioRhymeVar", Georgia, serif; --fgv-font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fgv-vf-display: "wdth" 120, "wght" 700; --fgv-vf-sub: "wdth" 100, "wght" 600; /* --- Typo-Skala ---------------------------------------------------- Kommentar zeigt: min → max (px) | V2-Original bei 1920 px */ --fgv-fs-display: clamp(2.25rem, 5.500vw, 5.25rem); /* 36 → 84 | 132 */ --fgv-fs-hero-title: clamp(2.5rem, 6.875vw, 6.4rem); /* 40 → 102 | 132 */ --fgv-fs-feature: clamp(1.625rem, 3.437vw, 3.2rem); /* 26 → 51 | 66 */ --fgv-fs-hero: clamp(1.1875rem, 2.292vw, 2.125rem); /* 19 → 34 | 44 */ --fgv-fs-sub: clamp(1.375rem, 2.500vw, 2.3125rem); /* 22 → 37 | 48 */ --fgv-fs-card-title: clamp(1.1875rem, 1.875vw, 1.75rem); /* 19 → 28 | 36 */ --fgv-fs-lead: clamp(1.0625rem, 1.875vw, 1.75rem); /* 17 → 28 | 36 */ --fgv-fs-intro: clamp(1rem, 1.250vw, 1.25rem); /* 16 → 20 | 24 */ --fgv-fs-body: clamp(1rem, 1.042vw, 1.125rem); /* 16 → 18 | 20 */ --fgv-fs-small: clamp(0.875rem, 0.937vw, 1rem); /* 14 → 16 | 18 */ --fgv-fs-btn: clamp(0.8125rem, 1.250vw, 1.1875rem); /* 13 → 19 | 24 */ --fgv-fs-btn-lg: clamp(0.9375rem, 1.667vw, 1.5625rem); /* 15 → 25 | 32 */ --fgv-fs-btn-sm: clamp(0.75rem, 0.937vw, 0.875rem); /* 12 → 14 | 18 */ --fgv-fs-menu: clamp(2rem, 4.688vw, 4.375rem); /* 32 → 70 | 90 */ --fgv-fs-menu-sub: clamp(1.125rem, 2.083vw, 1.9375rem); /* 18 → 31 | 40 */ --fgv-lh-display: 1.05; --fgv-lh-heading: 1.15; --fgv-lh-body: 1.55; --fgv-ls-button: 0.08em; --fgv-ls-label: 0.06em; /* --- Raster und Abstände ------------------------------------------- V2-Artboard: Aussenrand 130, Content 1660, 3er-Grid 496/88, 2er-Grid 780/101. Container hier auf Kadence Content Width 1290. */ --fgv-container: 1290px; --fgv-gutter: clamp(1.25rem, 6.77vw, 100px); /* Die seitliche Luft der Farbbaender. Stand bis 1.9.8 dreimal wortgleich im File (Baender, Hero/Kontakte, seit 1.9.9 auch der Header auf Home) — jetzt an einer Stelle. Das V2-Artboard laesst 130 von 1920 px stehen. */ --fgv-band-inline: clamp(24px, 6vw, 120px); --fgv-gap-grid: clamp(1.5rem, 4.58vw, 68px); --fgv-gap-cols: clamp(2rem, 5.26vw, 78px); --fgv-space-2xs: 0.5rem; --fgv-space-xs: 1rem; --fgv-space-sm: 1.5rem; --fgv-space-md: 2.5rem; --fgv-space-lg: clamp(3rem, 5vw, 5rem); --fgv-space-xl: clamp(3.5rem, 8vw, 7.75rem); /* Abstand zwischen Bändern */ /* Phase 3 (1.12.0): Abstand vom letzten Textlink («Mehr erfahren», Teaser- Linkliste) zum Button darunter — Roman: +100 % gegenüber Aktuell (25 px), in allen Sections gleich. 50 px bei 1440, 40 px mobil. */ --fgv-space-link-btn: clamp(2.5rem, 3.5vw, 3.125rem); /* Bandpolster für die «niedrigen» Bänder Mithelfen und Newsletter (Roman: Höhe minimieren). Vorlage: ca. 90 px oben/unten bei 1920 = 4.69vw. */ --fgv-space-band-compact: clamp(2.5rem, 4.69vw, 5.625rem); --fgv-radius-pill: 999px; /* Eckenradius: bis 1.9.23 eckig (V2), nur Portraits rund. Entscheid Guido 9.10.: alle Inhalts-Bildboxen tragen den Portrait-Radius. Hero-Hinter- gründe sind keine Bildboxen und bleiben eckig. */ --fgv-radius-portrait: clamp(8px, 1vw, 14px); --fgv-radius-img: var(--fgv-radius-portrait); /* Seitenverhältnis aller Inhaltsbilder (Entscheid Guido 9.10.: zwingend 4:3, unabhängig vom hochgeladenen Bild). Ausnahmen siehe 2b «Bildboxen». */ --fgv-img-ratio: 4 / 3; } /* ========================================================================== 2 — Basis-Anwendung -------------------------------------------------------------------------- Bewusst ohne !important und mit niedriger Spezifität. Das Customizer-CSS wird nach diesem Stylesheet ausgegeben und gewinnt deshalb vorerst — so bleibt die Seite in jedem Zwischenstand benutzbar und die bestehenden 44 Regeln lassen sich einzeln migrieren statt alle auf einmal. ========================================================================== */ body { font-family: var(--fgv-font-body); font-size: var(--fgv-fs-body); line-height: var(--fgv-lh-body); color: var(--fgv-text); } h1, h2 { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-display); line-height: var(--fgv-lh-display); text-wrap: balance; } /* Accordion-Titel und Teaser-Linklisten: die schmalere, fettere Instanz. */ .fgv-sub, .fgv-teaserlinks a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-sub); font-size: var(--fgv-fs-sub); line-height: var(--fgv-lh-heading); } .fgv-teaserlinks a { text-decoration: none; } /* Card- und Objekttitel sind in V2 KEIN BioRhyme, sondern Be Vietnam Pro SemiBold. Deshalb eigene Klasse statt globaler h3-Regel. */ .fgv-card-title, .fgv-card-title a { font-family: var(--fgv-font-body) !important; /* [BLOCK] gegen 3.1 h3 */ font-variation-settings: normal !important; font-weight: 600; font-size: var(--fgv-fs-card-title); line-height: var(--fgv-lh-heading); letter-spacing: 0; } /* Seitentitel im Hero sind von der Display-Groesse entkoppelt: Sektions- titel im Fliesstext duerfen kleiner werden, der Hero bleibt gross. */ .fgv-hero h1 { font-size: var(--fgv-fs-hero-title) !important; } /* [BLOCK] */ /* Schnitte laut IDML (_export/idml-typo-2026-10-09.txt): Hero-Lead SemiBold 600, Mithelfen-/Newsletter-Titel Medium 500. .fgv-intro hängt am Kontext: Home-Teaser Regular 400 (Vorlage 36/46), Mithelfen-Text Medium 500, Newsletter-Text SemiBold 600 (Regeln in 2b). Die Section-Intros der Unterseiten (SemiBold 24/34) sind .fgv-lead und tragen 600 selbst. Korrektur 1.12.0: 1.10.0 hatte .fgv-intro pauschal auf 600 gesetzt und damit die Teaser-Texte fett gemacht. */ .fgv-hero-text { font-weight: 600; font-size: var(--fgv-fs-hero); } .fgv-feature { font-weight: 500; font-size: var(--fgv-fs-feature); line-height: var(--fgv-lh-heading); } .fgv-intro { font-weight: 400; font-size: var(--fgv-fs-intro); } .fgv-lead { font-weight: 400; font-size: var(--fgv-fs-lead); } .fgv-small { font-size: var(--fgv-fs-small); } .fgv-label { font-size: var(--fgv-fs-small); letter-spacing: var(--fgv-ls-label); text-transform: uppercase; } /* --- Container und Raster --------------------------------------------- */ .fgv-container { width: 100%; max-width: calc(var(--fgv-container) + 2 * var(--fgv-gutter)); margin-inline: auto; padding-inline: var(--fgv-gutter); } .fgv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fgv-gap-grid); } .fgv-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fgv-gap-grid); } .fgv-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fgv-gap-cols); align-items: start; } @media (max-width: 1024px) { .fgv-grid-3 { grid-template-columns: repeat(2, 1fr); } .fgv-grid-5 { grid-template-columns: repeat(3, 1fr); } .fgv-cols-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .fgv-grid-3, .fgv-grid-5 { grid-template-columns: 1fr; } } /* --- Seitliche Luft in den Bändern --------------------------------------- Kadence gibt dem Row-Wrapper 24 px Content-Edge-Padding. Bei 1290 px Container heisst das: ab etwa 1338 px Viewport bleiben links und rechts genau diese 24 px stehen, darunter gar nichts mehr. Zu wenig. Dieselbe Klammer trugen bisher nur der Hero und die Kontakte-Reihen (Abschnitt 2, «Mehr Luft links und rechts»). Sie gilt ab 1.9.2 für jedes Farbband — das V2-Artboard lässt 130 von 1920 px stehen, also 6.8 %. Nebenwirkung, erwünscht: die Task-Buttons auf der Startseite fluchten damit endlich mit dem Hero-Text darüber (gemessen 10.9.: beide bei 225 px statt 162 gegen 225). */ .fgv-band > .kt-row-column-wrap { padding-inline: var(--fgv-band-inline) !important; /* [BLOCK] Kadence setzt hier 24 px */ } /* --- Eine Kante für alle Reihen (1.10.0) ------------------------------------ Baseline 9.10.: Alle Bänder standen bei 1440 px auf 161 px, aber nicht alle Reihen sind Bänder. Home «Aktuell» (alignnone, ohne Deckel) lag bei 86, die Sponsoren-Titelreihe bei 220 (Block-max-width 1000, auf Mobile ganz ohne Rand), die Logo-Reihe bei 149, der Footer bei 99. Jetzt bekommt jede Reihe direkt im Inhalt denselben Deckel und dieselbe Klammer wie die Bänder und der Header — auch Reihen, die später im Editor dazukommen. Formel: max((Viewport − 1290) / 2, 0) + --fgv-band-inline. Offen (Phase 1 Raster, Entscheid Guido): Die Klammer liegt innerhalb der 1290 px. Bei 2560 px bleiben deshalb nur 1050 px Inhalt, bei 1440 sind es 1117 — breite Bildschirme zeigen schmaleren Inhalt. */ .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap { max-width: var(--fgv-container) !important; /* [BLOCK] Block-max-width */ margin-inline: auto !important; padding-inline: var(--fgv-band-inline) !important; /* [BLOCK] */ box-sizing: border-box; } /* Footer: dieselbe Klammer wie #masthead .site-container (2b, Header). */ .site-footer .site-container { padding-inline: var(--fgv-band-inline) !important; /* [BLOCK] Kadence setzt hier 24 px */ } /* --- Spaltenabstände: zwei Tokens (1.10.0) ----------------------------------- Baseline 9.10. bei 1440: 32, 40, 66, 76 und 78 px nebeneinander. --fgv-gap-grid Karten- und Raster-Reihen (3+ Spalten): Agenda, Angebot, Aktuell, Footer --fgv-gap-cols zweispaltige Text/Bild-Layouts: Kiosk, Home-Teaser, Mithelfen, Newsletter Ausnahme bleibt die Sechserreihe der Kontakte (32 px, eigener Kommentar in 2b) bis zum 4+2-Raster in Phase 6. */ .aktuell-section .kb-posts { column-gap: var(--fgv-gap-grid) !important; /* [BLOCK] Kadence 40 px */ row-gap: var(--fgv-gap-grid) !important; } .site-footer .site-footer-row { column-gap: var(--fgv-gap-grid) !important; /* [BLOCK] Kadence 40 px */ } .fgv-engagement > .kt-row-column-wrap, .newsletter-section > .kt-row-column-wrap { column-gap: var(--fgv-gap-cols) !important; /* [BLOCK] Kadence 32 px */ } /* --- Overscroll ohne Gelb (1.10.0) ------------------------------------------- `html` war transparent, der Body-Hintergrund (Sunflower-25) wurde auf die Canvas propagiert und blitzte beim Überscrollen über dem Header auf. Mit eigenem Grund am html bleibt die Canvas weiss; Bänder tragen ihren Grund selbst. */ html { background-color: var(--fgv-white); } /* --- Farbbänder -------------------------------------------------------- Eine Klasse pro Band an den äusseren Row Layout Block, statt die Farbe pro Block über has-theme-paletteN-background-color zu setzen. */ .fgv-band { padding-block: var(--fgv-space-xl); } .fgv-band--green { background: var(--fgv-band-green); } .fgv-band--pink { background: var(--fgv-band-pink); color: var(--fgv-text-invert); } .fgv-band--yellow { background: var(--fgv-band-yellow); } .fgv-band--paper { background: var(--fgv-paper); } .fgv-band--white { background: var(--fgv-white); } .fgv-band--sage { background: var(--fgv-band-sage); } /* nicht .fgv-btn--sage */ .fgv-band--pink :is(h1, h2, h3, a, .fgv-sub) { color: var(--fgv-text-invert); } /* --- Buttons ------------------------------------------------------------ V2 kennt drei Grössen. Immer Versalien, Pill, gesperrt. */ /* Core-Button-Block: die Klasse sitzt am Wrapper, gestylt wird der Link. */ .wp-block-button.fgv-btn { padding: 0; background: transparent; border-radius: 0; } .fgv-btn, .wp-block-button.fgv-btn > .wp-block-button__link { display: inline-block; font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-btn); letter-spacing: var(--fgv-ls-button); text-transform: uppercase; text-decoration: none; line-height: 1; padding: 0.7em 1.6em; border-radius: var(--fgv-radius-pill); --fgv-btn-face: var(--fgv-btn-bg); /* Varianten setzen nur diese Variable */ background: var(--fgv-btn-face); color: var(--fgv-btn-text); transition: background-color 0.15s ease; } /* Hover für ALLE Buttons der Seite (1.10.0): Core-Buttons, Kadence-Advanced- Buttons und WPForms-Submit (Newsletter). Die Grundfarbe wird mit Weiss gemischt. Kadence-Buttons kennen --fgv-btn-face nicht, ihre Farbe steht im Block-CSS; der einzige auf der Site (Sponsor werden, Home) ist Sage — kommt ein Kadence-Button in anderer Farbe dazu, braucht er eine eigene Regel. Nur a.fgv-btn, nicht .fgv-btn: Beim Core-Button trägt auch der Wrapper div.wp-block-button die Klasse. Bis 1.13.1 färbte der Hover deshalb den eckigen Wrapper mit, an den Ecken des runden Links sichtbar (Guido 9.10., rote Quick Links; auf Pink fiel es nicht auf). */ a.fgv-btn:hover, a.fgv-btn:focus-visible, .wp-block-button.fgv-btn > .wp-block-button__link:hover, .wp-block-button.fgv-btn > .wp-block-button__link:focus-visible { background: color-mix(in srgb, var(--fgv-btn-face) var(--fgv-btn-hover-mix), var(--fgv-white)); } .entry-content .kb-button:hover, .entry-content .kb-button:focus-visible { filter: none; background: color-mix(in srgb, var(--fgv-sage) var(--fgv-btn-hover-mix), var(--fgv-white)) !important; /* [BLOCK] Kadence-Hover per Block-ID */ } /* ACHTUNG Spezifitaet: die Basisregel oben ist `.wp-block-button.fgv-btn > .wp-block-button__link` (0,3,0). Ein Modifier mit `.fgv-btn--x >` waere nur 0,2,0 und bliebe wirkungslos — deshalb hier ebenfalls zweiklassig. */ .wp-block-button.fgv-btn--sm > .wp-block-button__link, a.fgv-btn.fgv-btn--sm { font-size: var(--fgv-fs-btn-sm); } /* Noch NICHT scharfgeschaltet: --lg und --sage sind seit der V1-Umsetzung wirkungslos (0,2,0). Die Startseite ist im heutigen, korrigierten Zustand abgenommen — greifen die Regeln, werden dort vier Task-Buttons groesser und ein Button gruen. Erst nach Entscheid auf die zweiklassige Form umstellen. */ .fgv-btn--lg, .fgv-btn--lg > .wp-block-button__link { font-size: var(--fgv-fs-btn-lg); } .fgv-btn--sage, .fgv-btn--sage > .wp-block-button__link { background: var(--fgv-btn-bg-alt); } /* --- Accordion ---------------------------------------------------------- */ .fgv-accordion .kt-accordion-pane { border-top: 2px solid var(--fgv-rule); } .fgv-accordion .kt-accordion-pane:last-child { border-bottom: 2px solid var(--fgv-rule); } /* --- Keine Kursive (1.10.0) ------------------------------------------------ V2 kennt keine Kursive, die Schrift wird ohne Italic-Schnitte geladen — ein würde sonst synthetisch schräggestellt. Gilt auch für Inhalte, die Redaktoren oder The Events Calendar einsetzen. */ em, i, cite, dfn, var, address { font-style: normal; } /* --- Mail-Links (1.10.0) ---------------------------------------------------- Roman 9.10.: Mailadressen stehen in Textfarbe, Farbe erst beim Hover. Die Akzentfarbe der Sektion (Sage/Cherry) gilt nur für echte Links. Auf Pink ist der Text ohnehin Ebony, dort bleibt es beim Unterstrich als Hover. */ .entry-content a[href^="mailto:"]:not(.wp-block-button__link) { color: inherit !important; } /* [BLOCK] gegen Akzent- und Accordion-Linkfarbe */ .entry-content a[href^="mailto:"]:not(.wp-block-button__link):is(:hover, :focus-visible) { color: var(--fgv-section-accent, var(--fgv-link)) !important; } .entry-content .fgv-band--pink a[href^="mailto:"]:is(:hover, :focus-visible) { color: inherit !important; } /* --- Zugänglichkeit ----------------------------------------------------- */ :focus-visible { outline: 3px solid var(--fgv-cherry); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 2b — Pattern-Bibliothek -------------------------------------------------------------------------- Klassen, die die Patterns in patterns/ und patterns-synced/ verwenden. Sie sitzen am äusseren Row Layout (Advanced → Additional CSS Classes) oder an Core-Blöcken (Heading, Paragraph, Image, Button). ========================================================================== */ /* --- Hero Unterseite ---------------------------------------------------- */ .fgv-hero { color: var(--fgv-text-invert); } .fgv-hero :is(h1, h2, p) { color: inherit; } .fgv-hero h1 { margin-bottom: var(--fgv-space-xs); } .fgv-hero .fgv-hero-text { max-width: 40ch; margin-bottom: 0; } /* --- Farbband: Inhalt begrenzen, Abstände ------------------------------ */ .fgv-band h2 { margin-top: 0; } .fgv-band .fgv-lead { max-width: 60ch; } .fgv-band .wp-block-buttons { margin-top: var(--fgv-space-sm); } /* --- Accordion im Pattern -------------------------------------------------- Kadence gibt dem Header per Block-ID eine Palettenfarbe als Hintergrund und die Schriftgrösse «md». Hier auf das V2-Muster gezogen: kein Hinter- grund, Linie kommt von .fgv-accordion (Abschnitt 2), Titel in der schmaleren ExtraBold-Instanz. */ .fgv-accordion .kt-blocks-accordion-header { background: transparent !important; /* [BLOCK] */ border: 0 !important; padding-inline: 0 !important; padding-block: 8px !important; /* Kadence setzt 14 px als Block-Attribut */ color: var(--fgv-sage) !important; } /* Horizontale Kompression der Titel (Entscheid Guido 9.9., Variante E). Die Breitenachse von BioRhymeVar endet bei 100 % — die restlichen 10 % sind synthetisch gestaucht. Bewusst nur hier, nicht am Token: die Teaser-Linklisten der Startseite bleiben unverzerrt. Der Layoutkasten behaelt die ungestauchte Breite, das Icon rutscht deshalb minimal weiter nach rechts — ohne Folge, es sitzt ohnehin per margin-left:auto rechts. */ .fgv-accordion .kt-blocks-accordion-title { display: inline-block; transform: scaleX(0.9); transform-origin: left center; } .fgv-accordion .kt-blocks-accordion-header:hover, .fgv-accordion .kt-blocks-accordion-header:focus-visible, .fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active { color: var(--fgv-cherry) !important; } .fgv-accordion .kt-blocks-accordion-title { font-family: var(--fgv-font-display) !important; font-variation-settings: var(--fgv-vf-sub); font-size: var(--fgv-fs-sub) !important; /* [BLOCK] */ line-height: var(--fgv-lh-heading); } /* Plus/Minus auf der ersten Titelzeile statt in der Mitte des Kopfs — bei mehrzeiligen Titeln wanderte es sonst von der Linie weg (Roman 9.10., gemessen 11–49 px @390). Kadence' Icon ist 24 px hoch. */ .fgv-accordion .kt-blocks-accordion-header { align-items: flex-start !important; } /* [BLOCK] */ .fgv-accordion .kt-blocks-accordion-icon-trigger { align-self: flex-start; margin-top: calc((var(--fgv-fs-sub) * var(--fgv-lh-heading) - 24px) / 2) !important; /* [BLOCK] */ } .fgv-accordion .kt-accordion-panel-inner { background: transparent !important; } /* Plus/Minus. Kadence baut das Icon aus zwei 16x4-Balken in einem Kreis. Der Kreis kommt aus dem Block-CSS (Palette 1, offen Palette 2) mit Spezifitaet 0,5,0 — nur mit !important zu erreichen. Die Balken setzt Kadence auf :hover und im offenen Zustand auf `currentcolor`, dann verschwindet das Plus im gleichfarbigen Kreis. Deshalb hier beides fest: heller Grund = Kreis in der Sektionsfarbe, Balken immer weiss. */ .fgv-accordion .kt-blocks-accordion-icon-trigger { background-color: var(--fgv-sage) !important; /* [BLOCK] */ } .fgv-accordion .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, .fgv-accordion .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger, .fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger { background-color: var(--fgv-cherry) !important; /* [BLOCK] */ } .fgv-accordion .kt-blocks-accordion-icon-trigger::before, .fgv-accordion .kt-blocks-accordion-icon-trigger::after { background-color: var(--fgv-white) !important; /* [BLOCK] */ } /* Die Linie ueber dem offenen Pane traegt Cherry (Vorlage). :has() ist in Safari seit 15.4 und in Chrome seit 105 da; faellt es aus, bleibt die Linie Sage — kein Schaden. */ .fgv-accordion .kt-accordion-pane:has(.kt-blocks-accordion-header.kt-accordion-panel-active) { border-top-color: var(--fgv-cherry); } /* Fliesstext im Pane: Ebony, Links in Cherry. */ .fgv-accordion .kt-accordion-panel-inner { color: var(--fgv-text); } .fgv-accordion .kt-accordion-panel-inner a { color: var(--fgv-link); } /* --- Card-Grid ---------------------------------------------------------- */ .fgv-card-img img { width: 100%; aspect-ratio: var(--fgv-img-ratio); object-fit: cover; border-radius: var(--fgv-radius-img); } .fgv-card .fgv-card-img { margin-bottom: var(--fgv-space-xs); } .fgv-card .fgv-card-title { margin: 0 0 var(--fgv-space-2xs); } .fgv-card .fgv-small { margin: 0 0 var(--fgv-space-2xs); } /* --- Bildboxen: 4:3 und Radius erzwingen (1.10.0) ------------------------- Entscheid Guido 9.10.: jedes Inhaltsbild steht in 4:3, egal in welchem Format es hochgeladen wird — object-fit schneidet zu. Die Regel greift auf jedes Core-Bild und jedes Kadence-Bild in einem Farbband, also auch auf Bilder, die später im Editor dazukommen. Die bestehenden Klassen oben (.fgv-card-img, .fgv-objekt-img, .fgv-event-img) tragen dieselben Tokens. Ausgenommen: Piktogramme (Engagement, Newsletter), die Areal-Karte und die Kontakt-Portraits (1:1). Für ein künftiges Bild, das sein Format behalten soll (Logo, Plan, Grafik), im Editor die Klasse fgv-img-frei setzen. height:auto ist nötig: WordPress schreibt width/height-Attribute ans , und eine Höhe aus dem Attribut würde aspect-ratio aushebeln. !important ist nötig, weil der Core-Bildblock die im Editor gewählte Proportion als Inline-Style ans schreibt (Angebot trug so 3:2) — nur so gilt 4:3 unabhängig davon, was im Editor eingestellt wird. */ .fgv-band figure.wp-block-image:not(.fgv-img-frei, .fgv-engagement-icon, .fgv-newsletter-icon, .fgv-karte-img, .fgv-contact-img) img { height: auto !important; aspect-ratio: var(--fgv-img-ratio) !important; /* schlägt das Inline-aspect-ratio des Editors */ object-fit: cover !important; border-radius: var(--fgv-radius-img); } /* Kadence-Bildblock mit fester Ratio (Home-Teaser Angebot/Wissen standen auf «square»): Kadence baut die Ratio als padding-bottom am Wrapper, das Bild liegt absolut darin. 75 % = 4:3. */ .fgv-band .wp-block-kadence-image:not(.fgv-img-frei) .kb-is-ratio-image { padding-bottom: 75% !important; /* [BLOCK] */ border-radius: var(--fgv-radius-img); overflow: hidden; } .fgv-band .wp-block-kadence-image:not(.fgv-img-frei) img { border-radius: var(--fgv-radius-img); } /* Keine Rahmen um Bilder (Roman 9.10.): Das Angebot-Bild im Home-Teaser trug als Kadence-Block-Attribut einen 50 px breiten cremefarbenen Rahmen am — gemessen 9.10., kein Hintergrund und kein Wrapper. Gilt für alle Bilder in Bändern, auch künftige. */ .fgv-band :is(.wp-block-kadence-image, figure.wp-block-image) img { border: 0 !important; /* [BLOCK] */ } /* «Mehr lesen» – gleiche Sprache wie in .aktuell-section (3.3) */ .fgv-more a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-small); color: var(--fgv-link); text-decoration: none; } .fgv-more a:hover { text-decoration: underline; } /* --- Kontakt-Karten ----------------------------------------------------- */ .fgv-contact-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--fgv-radius-portrait); } /* Bild → erste Textzeile: bis 1.14.2 galt Kadence' 32 px (diese Regel verlor ohne !important), Roman 9.10.: −30 % → 22 px Rand, 23 px bis zur Schrift. */ .fgv-contact .fgv-contact-img { margin-bottom: 1.375rem !important; } /* [BLOCK] */ /* Infoblock wie im V2-Template: alles in Ebony, keine Farbakzente, Name in normaler Staerke knapp ueber Fliesstextgroesse, Links schlicht unterstrichen. Die Groessen sind auf die schmale Sechserkarte gerechnet (~160 px), damit das Funktions-Label einzeilig bleibt. */ .fgv-contact .fgv-label { font-size: clamp(0.6875rem, 0.85vw, 0.8125rem); /* 11 → 13 */ letter-spacing: 0.04em; font-weight: 400; } .fgv-contact .fgv-card-title { font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); /* 15 → 17 */ font-weight: 400 !important; /* [BLOCK] gegen 2 (600) */ line-height: 1.3; margin: 0 0 var(--fgv-space-2xs); } .fgv-contact .fgv-small { font-size: clamp(0.8125rem, 1vw, 0.9375rem); margin: 0; } .fgv-contact .fgv-small a { color: inherit; text-decoration: underline; } .fgv-contact .fgv-small a:hover { text-decoration: none; } /* Der Site-Hintergrund ist Sage-60. Die Kontakte-Seite kennt in V2 keine Farbbaender, also bekommen die Reihen selbst den Papier-Grund — und ihre Abstaende als padding statt margin, sonst blitzt Sage dazwischen durch. */ .fgv-contacts, .fgv-contacts-head, .fgv-contacts-note { background-color: var(--fgv-paper); } .fgv-contacts-head { padding-top: var(--fgv-space-xl); } .fgv-contacts + .fgv-contacts { padding-top: var(--fgv-gap-grid); } .fgv-contacts-note { padding-bottom: var(--fgv-space-xl); } /* Kadence setzt den Spaltenabstand fix auf 40/24/16 px. Das V2-Raster rechnet mit 88 px auf dem 1660er-Artboard, also var(--fgv-gap-grid). */ .fgv-contacts > .kt-row-column-wrap { column-gap: var(--fgv-gap-grid) !important; /* [BLOCK] gegen Kadence-Block-CSS */ row-gap: var(--fgv-gap-grid); } /* Kartenabstand unter Desktop: Kadence-Raster mit engem Abstand. Mobil (Roman 9.10.) letzte Textzeile → naechstes Bild +100 % (18 → 36 px). */ .fgv-contacts--6 > .kt-row-column-wrap { column-gap: clamp(1rem, 2.5vw, 32px) !important; /* [BLOCK] */ row-gap: clamp(1rem, 2.5vw, 32px); } @media (max-width: 767px) { .fgv-contacts--6 > .kt-row-column-wrap { row-gap: 2.125rem; } } /* Damit die Namen ueber die Reihe hinweg auf einer Linie stehen, reserviert das Label zwei Zeilen. */ .fgv-contacts--6 .fgv-label { min-height: 2.6em; line-height: 1.3; } /* 2 Zeilen = 2.6em, sonst rutscht der Name bei zweizeiligem Label */ /* Desktop 4 + 2 (Guido 9.10.): vier Spuren fuer alle Bloecke — Sechserreihen brechen als 4 + 2 um, die Arealchef-Reihe belegt drei Spuren, links angeschlagen, gleich breite Karten. Bis 1.14.2 sechs Spuren mit 32 px. Tablet und Mobile bleiben bei Kadence' Responsive-Layout. */ @media (min-width: 1025px) { .fgv-contacts--6 > .kt-row-column-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* [BLOCK] */ column-gap: var(--fgv-gap-grid) !important; /* [BLOCK] */ row-gap: var(--fgv-gap-grid); } } /* Mehr Luft links und rechts als die blosse Container-Breite hergibt: das V2-Artboard laesst 130 von 1920 px stehen (6.8 %), Kadence nur 75 von 1440. Deshalb ein zusaetzlicher Einzug auf den Reihen dieser Seite. */ .fgv-hero > .kt-row-column-wrap, .fgv-contacts > .kt-row-column-wrap, .fgv-contacts-head > .kt-row-column-wrap, .fgv-contacts-note > .kt-row-column-wrap { padding-inline: var(--fgv-band-inline) !important; /* [BLOCK] Kadence setzt hier 24 px */ } /* Sektionstitel in Cherry, wie im V2-Layout der Kontakte-Seite. */ .fgv-contacts-head h2 { color: var(--fgv-cherry); } .fgv-contact .fgv-label { margin: 0 0 var(--fgv-space-xs); color: var(--fgv-text); } /* Ohne Untertitel braucht der Titel selbst den Abstand zu den Karten. */ .fgv-contacts-head h2 { margin: 0 0 clamp(1.25rem, 2.5vw, 35px) !important; } /* [BLOCK] */ .fgv-contacts-head .fgv-lead { margin: 0 0 var(--fgv-space-md); max-width: 60ch; } .fgv-contacts-note .fgv-small { margin: var(--fgv-space-sm) 0 0; opacity: 0.75; } /* Lange Mailadressen duerfen in der schmalen Karte umbrechen (iPhone 375 px). */ .fgv-contact .fgv-small { overflow-wrap: anywhere; } /* Platzhalter, bis das Hero-Bild der Unterseite geliefert ist. */ .fgv-hero--placeholder { background-color: var(--fgv-sage-30); } /* --- Hero-Höhen (1.10.0) ----------------------------------------------------- Roman 9.10.: Heroes ca. −25 %, Desktop und Mobile. Kadence setzt die Höhe als min-height am Column-Wrap, per Block-ID und Breakpoint — deshalb hier als Token mit !important. Ausgangswerte (Baseline 9.10.) in Klammern: Unterseiten 360 / 255 / 210 (480 / 340 / 280) Downloads 270 / 210 / 165 (360 / 280 / 220) Home 540 / 420 / 450 (720 / 560 / 600) Home auf Desktop ist nach unten durch den Inhalt begrenzt: Logo-Reserve oben (2b «Lead und Logo») plus Lead plus Luft unten. Wirklich niedriger wird er erst mit dem kleineren Logo (Phase 3). Der Header der Unterseiten (284 px bei 1440) liegt über dem Hero und ist hier nicht mitgerechnet. */ :root { --fgv-hero-h: 360px; --fgv-hero-h-home: 540px; } @media (max-width: 1024px) { :root { --fgv-hero-h: 255px; --fgv-hero-h-home: 420px; } } @media (max-width: 767px) { :root { --fgv-hero-h: 210px; --fgv-hero-h-home: 450px; } } body.page-id-397 { --fgv-hero-h: 270px; } @media (max-width: 1024px) { body.page-id-397 { --fgv-hero-h: 210px; } } @media (max-width: 767px) { body.page-id-397 { --fgv-hero-h: 165px; } } .fgv-hero > .kt-row-column-wrap { min-height: var(--fgv-hero-h) !important; } /* [BLOCK] */ .fgv-hero--home > .kt-row-column-wrap { min-height: var(--fgv-hero-h-home) !important; } /* [BLOCK] */ /* --- Engagement- und Newsletter-Band (synced) ---------------------------- V2 setzt beide Baender komplett in Cherry auf den Farbgrund: Titel, Text und Icon. Layout beider Baender identisch — Icon links, Text rechts, Call-to-Action unter dem Text. */ .fgv-engagement :is(.fgv-feature, .fgv-intro, p), .newsletter-section :is(.fgv-feature, .fgv-intro, p) { color: var(--fgv-cherry); } .fgv-engagement .fgv-engagement-icon { max-width: 240px; margin: 0; } /* 1.12.0: +20 % (200) */ .fgv-engagement .fgv-feature { margin: 0 0 var(--fgv-space-2xs); } .fgv-engagement .fgv-intro { margin: 0 0 var(--fgv-space-lg) !important; max-width: 60ch; } /* [BLOCK] */ /* Der Button steht deutlich abgesetzt unter dem Text, eine Stufe kleiner. */ .fgv-engagement .wp-block-buttons { margin: 0; } /* --- Newsletter (synced) — ergänzt 3.5 ----------------------------------- */ .newsletter-section .fgv-feature { margin: 0 0 var(--fgv-space-2xs); } .newsletter-section .fgv-intro { margin: 0 0 var(--fgv-space-sm); max-width: 60ch; } .newsletter-section .fgv-newsletter-icon { max-width: 144px; margin: 0; } /* 1.12.0: +20 % (120) */ .newsletter-section .wpforms-form { max-width: 640px; } /* Text über Input, linksbündig */ /* WPForms gibt dem Container 24 px margin-bottom und dem Feld 15 px Padding oben und unten — der Button stand dadurch 154 statt 115 px über der Bandkante (Baseline 9.10., gemessen am DOM). */ .newsletter-section .wpforms-container { margin-bottom: 0 !important; } /* [BLOCK] WPForms */ .newsletter-section .wpforms-field { padding-block: 0 !important; } /* [BLOCK] WPForms */ /* --- Mithelfen und Newsletter: niedriger (Phase 3, 1.12.0) ------------------ Roman: «Höhe minimieren», Newsletter «analog Mithelfen». Vorlage: beide Bänder ca. 90 px Polster bei 1920 statt --fgv-space-xl. Das Icon steht oben bündig mit dem Titel (Roman: «an Oberkante Titel»), auch wenn der Text höher ist. Schnitte der Texte laut IDML: Mithelfen Medium 500, Newsletter SemiBold 600. */ .fgv-band.fgv-engagement, .fgv-band.newsletter-section { padding-block: var(--fgv-space-band-compact); } .fgv-engagement > .kt-row-column-wrap, .newsletter-section > .kt-row-column-wrap { align-items: start !important; } /* [BLOCK] Kadence valign */ .fgv-engagement .fgv-intro { font-weight: 500; } .newsletter-section .fgv-intro { font-weight: 600; } /* Mobil stehen die Icons über dem Text; in voller Grösse frassen sie die Einsparung auf (Mithelfen 390 px: 664 → 674). Dort halbe Grösse (1.12.1). */ @media (max-width: 767px) { .fgv-engagement .fgv-engagement-icon { max-width: 120px; } .newsletter-section .fgv-newsletter-icon { max-width: 96px; } } /* Button-Schrift weiss (Roman; WPForms setzte Sunflower-25). */ .newsletter-section .wpforms-submit-container button.wpforms-submit { color: var(--fgv-white) !important; } /* [BLOCK] WPForms */ /* --- Engagement-Band (synced, 2 Spalten) --------------------------------- */ .fgv-engagement .fgv-feature { margin: 0 0 var(--fgv-space-xs); } .fgv-engagement .fgv-intro { margin: 0; max-width: 60ch; } .fgv-engagement .wp-block-buttons { margin: 0; } @media (max-width: 767px) { .fgv-engagement .wp-block-buttons { justify-content: flex-start; margin-top: var(--fgv-space-sm); } } /* --- Wissen-Seite: Baender mit Accordion-Gruppen ------------------------- V2 S. 3: Sektionstitel, Intro, darunter die Accordion-Gruppe — gestapelt vollbreit. Drei Baender: Papier / Sage-30 / Papier. Die Klasse .fgv-wissen sitzt zusammen mit .fgv-band und .fgv-accordion am Row Layout. */ /* Die Startseite verlinkt /wissen/#reglemente-garten, /wissen/#bauen und /wissen/#gartenwissen. Ohne scroll-margin landet der Titel unter dem Header. */ .entry-content > [id] { scroll-margin-top: calc(var(--fgv-header-top) + 6rem); } /* seit 1.11.0 alle Reihen (Menü-Anker auf Kontakte) */ /* V2 S. 3: Sektionstitel und Intro tragen die Sektionsfarbe — auf Papier Sage, im Farbband invertiert. Das Intro ist die kleinere, halbfette Instanz und im Blocksatz mit Silbentrennung gesetzt (lang="de-CH" steht am ). */ .fgv-wissen { --fgv-section-accent: var(--fgv-sage); } .fgv-angebot { --fgv-section-accent: var(--fgv-cherry); } .fgv-angebot.fgv-accent--sage { --fgv-section-accent: var(--fgv-sage); } .fgv-wissen h2, .fgv-angebot h2 { color: var(--fgv-section-accent); margin: 0 0 var(--fgv-space-sm) !important; } /* [BLOCK] */ .fgv-wissen .fgv-lead, .fgv-angebot .fgv-lead { color: var(--fgv-section-accent); font-size: var(--fgv-fs-intro); font-weight: 600; text-align: left; /* bis 1.9.23 Blocksatz */ hyphens: auto; -webkit-hyphens: auto; margin: 0 0 var(--fgv-space-md) !important; max-width: 55ch; } /* [BLOCK] */ /* Fliesstext im geoeffneten Pane. Kadence setzt Absatz-Margins im Block-CSS, deshalb hier ueberschreiben. Seit 1.14.0 auf ganzer Akkordeonbreite (Roman 9.10.: bis dahin 75ch und 20 px Kadence-Padding rechts). Listen ohne Bullet und ohne Einzug, die Punkte lesen sich wie Absaetze (analog Gartenmodelle auf Über uns; Guido 10.10., IDML setzt keinen Einzug). */ .fgv-accordion .kt-accordion-panel-inner { padding-right: 0 !important; } /* [BLOCK] */ .fgv-accordion .kt-accordion-panel-inner p { margin: 0 0 var(--fgv-space-xs) !important; } /* [BLOCK] */ .fgv-accordion .kt-accordion-panel-inner ul { margin: 0 0 var(--fgv-space-xs) !important; /* [BLOCK] */ padding-left: 0; list-style: none; } .fgv-accordion .kt-accordion-panel-inner li { margin-bottom: var(--fgv-space-2xs); } .fgv-accordion .kt-accordion-panel-inner > :last-child { margin-bottom: 0 !important; } /* [BLOCK] */ /* Download-Link: gleiche Sprache wie «Mehr lesen» in den Cards (3.3). Das Guillemet kommt aus dem CSS, nicht aus dem Text. */ .fgv-pdf { margin: var(--fgv-space-sm) 0 0 !important; } /* [BLOCK] */ .fgv-pdf a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-small); color: var(--fgv-link); text-decoration: none; } .fgv-pdf a:hover { text-decoration: underline; } .fgv-pdf a::after { content: " \00BB"; } .fgv-pdf a + a { margin-left: var(--fgv-space-sm); } /* Mobil brechen die Links im Akkordeon um. Sie haengen per
im selben Absatz, Zeilen im Link und Abstand zwischen Links waren deshalb beide die Absatz-Zeilenhoehe (25 px @390). Roman 9.10.: zwischen Links +30 %, innerhalb eines Links −40 % → Links als Bloecke, 15 px / 33 px. */ @media (max-width: 767px) { .fgv-accordion .fgv-pdf br { display: none; } .fgv-accordion .fgv-pdf a { display: block; line-height: 1.07; } .fgv-accordion .fgv-pdf a ~ a { margin: 1.3em 0 0; } } /* Platzhalter, solange der Text aus dem Grobmanuskript fehlt. Bewusst sichtbar markiert, damit in der Abnahme klar ist, wo Inhalt aussteht — die Klasse faellt mit dem Text wieder weg. */ .fgv-todo { color: var(--fgv-cherry); border-left: 3px solid var(--fgv-cherry-40); padding-left: var(--fgv-space-xs); } /* --- Farbband pink ------------------------------------------------------- Entscheid Guido 9.9.: Sektionstitel und Intro bleiben weiss wie in der Vorlage, der Akkordeon-Inhalt wird schwarz — Titel, Fliesstext und Links. Links tragen auf Pink kein Cherry (unlesbar), sondern Ebony mit Unterstrich. Achtung Spezifitaet: die Basisregeln sind `.fgv-accordion .kt-blocks- accordion-header` (0,2,0) und deren `:hover` (0,3,0) — ein Override mit nur `.fgv-band--pink …` waere gleichauf bzw. schwaecher. Deshalb beide Klassen am selben Element. */ .fgv-band--pink.fgv-wissen h2, .fgv-band--pink.fgv-wissen .fgv-lead, .fgv-band--pink.fgv-angebot h2, .fgv-band--pink.fgv-angebot .fgv-lead { color: var(--fgv-text-invert); } /* Titel: weiss, nur bei Hover und im offenen Zustand Ebony (Vorlage). Nie unterstrichen — die Zustandsrueckmeldung tragen Farbe und Icon. */ .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header { color: var(--fgv-text-invert) !important; /* [BLOCK] */ } .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:hover, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:focus-visible, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active { color: var(--fgv-ebony) !important; /* [BLOCK] */ } .fgv-band--pink.fgv-accordion .kt-blocks-accordion-title { text-decoration: none; } /* Plus/Minus auf Pink (Vorlage, Korrektur Guido 9.9.): die Balken tragen in JEDEM Zustand die Bandfarbe, nie Weiss — das Zeichen ist immer aus dem Kreis ausgespart. Der Kreis wechselt: geschlossen weiss, offen und bei Hover Ebony. */ .fgv-band--pink.fgv-accordion .kt-blocks-accordion-icon-trigger { background-color: var(--fgv-white) !important; /* [BLOCK] */ } .fgv-band--pink.fgv-accordion .kt-blocks-accordion-icon-trigger::before, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-icon-trigger::after { background-color: var(--fgv-band-pink) !important; /* [BLOCK] */ } .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger { background-color: var(--fgv-ebony) !important; /* [BLOCK] */ } .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger::before, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger::after, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::before, .fgv-band--pink.fgv-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::after { background-color: var(--fgv-band-pink) !important; /* [BLOCK] */ } /* Linien und Inhalt im Pane. */ .fgv-band--pink.fgv-accordion .kt-accordion-pane, .fgv-band--pink.fgv-accordion .kt-accordion-pane:last-child { border-color: var(--fgv-text-invert); } /* Die :has()-Regel oben hat 0,4,0 und wuerde die offene Linie auch hier auf Cherry ziehen — auf Pink bleibt sie weiss. */ .fgv-band--pink.fgv-accordion .kt-accordion-pane:has(.kt-blocks-accordion-header.kt-accordion-panel-active) { border-top-color: var(--fgv-text-invert); } .fgv-band--pink.fgv-accordion .kt-accordion-panel-inner { color: var(--fgv-ebony); } .fgv-band--pink.fgv-accordion .kt-accordion-panel-inner a { color: var(--fgv-ebony); text-decoration: none; } .fgv-band--pink.fgv-accordion .kt-accordion-panel-inner a:hover, .fgv-band--pink.fgv-accordion .kt-accordion-panel-inner a:focus-visible { text-decoration: underline; } .fgv-band--pink .fgv-pdf a { color: var(--fgv-ebony); } .fgv-band--pink .fgv-todo { color: var(--fgv-ebony); border-left-color: rgba(40, 39, 39, 0.45); } .fgv-band--pink :focus-visible { outline-color: var(--fgv-ebony); } /* --- Downloads-Seite ------------------------------------------------------ Eine schlanke Liste pro Gruppe, bis die Merkblaetter vom Vorstand da sind. */ /* Eine Farbe pro Sektion fuer Titel, Linien und Eintraege (Roman 9.10., Referenz Wissen): Sage auf Papier, Cherry auf dem gruenen Band. Bis 1.14.2 waren deaktivierte Eintraege Cherry, aktive Sage, Linien Sage. */ .fgv-downloads { --fgv-dl-color: var(--fgv-sage); } .fgv-downloads.fgv-band--sage { --fgv-dl-color: var(--fgv-cherry); } .fgv-downloads h2 { color: var(--fgv-dl-color); margin: 0 0 var(--fgv-space-sm) !important; } /* [BLOCK] */ .fgv-downloads ul { list-style: none; margin: 0 !important; padding: 0; } /* [BLOCK] */ .fgv-downloads li { border-top: 2px solid var(--fgv-dl-color); padding-block: var(--fgv-space-xs); } .fgv-downloads li:last-child { border-bottom: 2px solid var(--fgv-dl-color); } .fgv-downloads li a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-sub); font-size: var(--fgv-fs-card-title); color: var(--fgv-dl-color); text-decoration: none; } .fgv-downloads li a:hover { color: var(--fgv-cherry); } .fgv-downloads.fgv-band--sage li a:hover { text-decoration: underline; } .fgv-downloads li a::after { content: " \00BB"; } .fgv-downloads li a[aria-disabled="true"] { cursor: default; } /* Auf dem pinken Band traegt auch die Downloads-Liste Weiss. */ .fgv-band--pink.fgv-downloads h2 { color: var(--fgv-text-invert); } .fgv-band--pink.fgv-downloads li a, .fgv-band--pink.fgv-downloads li a[aria-disabled="true"] { color: var(--fgv-ebony); } .fgv-band--pink.fgv-downloads li a:hover { text-decoration: underline; } .fgv-band--pink.fgv-downloads li, .fgv-band--pink.fgv-downloads li:last-child { border-color: var(--fgv-ebony); } /* --- Angebot-Seite -------------------------------------------------------- V2 S. 5. Vier Sektionen: Materialshops (Papier, Akzent Sage) · Vereinshaeuser (Sage-60) · Kiosk (Papier) · Kurse (Cherry-70). Das Kurse-Band ist baugleich zum pinken Wissen-Band und braucht keine eigenen Regeln — `.fgv-band--pink.fgv-accordion` deckt es ab. Kartenmass aus der Vorlage ausgemessen: Container 350 px, Karte 132 px, Gutter 18 px. Die Karte ist damit 37.7 % des Containers, zwei Karten plus Gutter fuellen 81 %, rechts bleibt bewusst Luft. Auf den freien Raum nach Abzug des Gutters gerechnet sind das 0.4fr je Spalte. Grid-Tracks, deren fr-Summe unter 1 liegt, stehen linksbuendig und lassen den Rest stehen — genau deshalb faellt bei den Vereinshaeusern die dritte Karte allein in die zweite Reihe, wie in der Vorlage. Das Row Layout traegt dort columns:3, die zwei Tracks kommen von hier. */ /* Eine Sektion besteht aus zwei Reihen — Kopf (h2 + Intro, einspaltig) und Koerper (Kartenraster, mehrspaltig). Beide tragen die Bandfarbe, aber nur je die halbe Luft, sonst steht in der Mitte der doppelte Abstand. */ .fgv-band.fgv-sec-head { padding-block: var(--fgv-space-xl) 0; } .fgv-band.fgv-sec-mid { padding-block: 0; } .fgv-band.fgv-sec-body { padding-block: 0 var(--fgv-space-xl); } .fgv-objekte > .kt-row-column-wrap { grid-template-columns: repeat(2, minmax(0, 0.4fr)) !important; /* [BLOCK] */ justify-content: start; column-gap: var(--fgv-gap-grid) !important; /* [BLOCK] */ row-gap: var(--fgv-space-lg); } @media (max-width: 1024px) { .fgv-objekte > .kt-row-column-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* [BLOCK] */ } } @media (max-width: 640px) { .fgv-objekte > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr) !important; /* [BLOCK] */ } } /* Objektkarte: Bild 4:3 (bis 1.9.23 3:2), Titel in Be Vietnam 600 (nicht BioRhyme — die .fgv-card-title-Regel aus Abschnitt 2 erledigt das bereits), darunter Adresse, Label/Wert-Bloecke und die Links. */ .fgv-objekt-img img { width: 100%; aspect-ratio: var(--fgv-img-ratio); object-fit: cover; border-radius: var(--fgv-radius-img); } .fgv-objekt .fgv-objekt-img { margin: 0 0 var(--fgv-space-xs) !important; } /* [BLOCK] */ .fgv-objekt .fgv-card-title { margin: 0 0 var(--fgv-space-2xs) !important; } /* [BLOCK] */ .fgv-objekt .fgv-small { margin: 0 !important; } /* [BLOCK] */ .fgv-objekt .fgv-label { margin: var(--fgv-space-xs) 0 0 !important; /* [BLOCK] */ font-weight: 400; } .fgv-objekt p + .fgv-body { margin: var(--fgv-space-xs) 0 0 !important; } /* [BLOCK] */ /* Beschriebstext in der Karte: Blocksatz mit Silbentrennung wie im Intro. */ .fgv-objekt .fgv-body { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Links in Karten (seit 1.14.0 auch Kiosk) sind in V2 dauerhaft unterstrichen — anders als `.fgv-pdf` auf der Wissen-Seite, wo der Unterstrich erst bei Hover kommt. Mehrere Links stehen untereinander, nicht nebeneinander. */ .fgv-objekt .fgv-pdf a { text-decoration: underline; } .fgv-objekt .fgv-pdf a:hover { text-decoration: none; } .fgv-objekt .fgv-pdf + .fgv-pdf { margin: var(--fgv-space-2xs) 0 0 !important; } /* [BLOCK] */ /* Akzentfarbe der Sektion faerbt auch die Links im Band. */ .fgv-angebot .fgv-pdf a { color: var(--fgv-section-accent); } /* --- Über-uns-Seite -------------------------------------------------------- V2 S. 6: Hero · Verein (Papier) · Areale (Sage-60) · Anmeldung (Papier) · Newsletter. Kein Engagement-Band — die Vorlage zeigt dort keines. Titel und Intro tragen dieselbe Sektionsfarbe wie auf Wissen und Angebot: Sage, auf dem grünen Band Cherry. (Der Cherry-Lead vom 10.9. war eine Fehllesung des Vorlagen-Screenshots, von Guido korrigiert.) Eigene Klasse statt .fgv-wissen, damit die Seite ihre Akzentlogik selbst trägt. */ .fgv-agenda { --fgv-section-accent: var(--fgv-cherry); } .fgv-agenda.fgv-accent--sage { --fgv-section-accent: var(--fgv-sage); } .fgv-agenda h2 { color: var(--fgv-section-accent); margin: 0 0 var(--fgv-space-sm) !important; } /* [BLOCK] */ .fgv-agenda .fgv-lead { color: var(--fgv-section-accent); font-size: var(--fgv-fs-intro); font-weight: 600; text-align: left; /* bis 1.9.23 Blocksatz */ hyphens: auto; -webkit-hyphens: auto; margin: 0 0 var(--fgv-space-md) !important; } /* [BLOCK] */ .fgv-ueberuns { --fgv-section-accent: var(--fgv-sage); } .fgv-ueberuns.fgv-accent--cherry { --fgv-section-accent: var(--fgv-cherry); } .fgv-ueberuns h2 { color: var(--fgv-section-accent); margin: 0 0 var(--fgv-space-sm) !important; } /* [BLOCK] */ .fgv-ueberuns .fgv-lead { color: var(--fgv-section-accent); font-size: var(--fgv-fs-intro); font-weight: 600; text-align: left; /* bis 1.9.23 Blocksatz */ hyphens: auto; -webkit-hyphens: auto; margin: 0 0 var(--fgv-space-md) !important; max-width: 55ch; } /* [BLOCK] */ /* --- Areale: Karte, Legende, Arealliste ---------------------------------- */ /* Die Google-Maps-Pille sitzt in der Vorlage in der unteren rechten Ecke der Karte. Absolut positioniert über dem Bild; unter 640 px rutscht sie darunter, sonst deckt sie auf schmalen Geräten die halbe Karte zu. */ .fgv-karte { position: relative; margin: 0 0 var(--fgv-space-md) !important; } /* [BLOCK] */ .fgv-karte .wp-block-image { margin: 0 !important; } /* [BLOCK] */ .fgv-karte img { display: block; width: 100%; height: auto; border-radius: var(--fgv-radius-img); } .fgv-karte .fgv-karte-cta { position: absolute; right: var(--fgv-space-xs); bottom: var(--fgv-space-xs); margin: 0 !important; } /* [BLOCK] */ /* Legende 1–4: Nummer als Cherry-Kreis, gezählt per CSS-Counter — dann kann Guido im Editor eine Zeile einfügen, ohne von Hand umzunummerieren. Seit 1.14.0 (Roman 9.10.) buendig mit der Kartenbox (bis dahin schob das ol-Padding des Themes sie 32 px nach rechts) und in Lead-Groesse. */ .fgv-legende { list-style: none; counter-reset: fgvleg; margin: 0 0 var(--fgv-space-sm) !important; /* [BLOCK] */ padding: 0 !important; /* [BLOCK] */ max-width: 60ch; } .fgv-legende li { counter-increment: fgvleg; position: relative; padding-left: 2.6em; margin-bottom: var(--fgv-space-2xs); font-family: var(--fgv-font-body); font-size: var(--fgv-fs-intro); color: var(--fgv-ebony); } .fgv-legende li:last-child { margin-bottom: 0; } .fgv-legende li::before { content: counter(fgvleg); position: absolute; left: 0; top: 0; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--fgv-cherry); color: var(--fgv-white); font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-sub); font-size: 0.8em; line-height: 1; display: flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .fgv-karte .fgv-karte-cta { position: static; margin-top: var(--fgv-space-xs) !important; } /* [BLOCK] */ } /* --- Homepage: Hero ---------------------------------------------------------- Bild als Row-Hintergrund, Verlauf nach Sage als Pseudo-Element (Kadence- Overlay-Attribute sind versionsabhängig, CSS ist deterministisch). Masse aus V2 (Artboard 1600 px): Logo am Content-Rand, Textblock und Task-Buttons um ~8 % eingerückt, ~72 % breit, gleiche linke Kante. Unter 768 px fällt die Einrückung weg. */ :root { /* Muss der Logo-Breite im Customizer (Header → Logo) entsprechen. Die Textkante liegt auf der Mitte des Radieschens = 20 % der Logobreite. */ --fgv-logo-width: 256px; /* 1.12.0: 320 → 256 (Roman: Desktop kleiner); Customizer gleich */ --fgv-hero-inset: calc(var(--fgv-logo-width) * 0.2); --fgv-hero-width: 82%; --fgv-header-top: clamp(1.125rem, 3vw, 3.375rem); /* Abstand Logo zur Oberkante; 1.12.0 −25 % (Roman) */ } /* --- Unterseiten: Luft um das Logo ------------------------------------- Die Startseite hat den transparenten Header und holt den Abstand nach oben aus --fgv-header-top. Auf allen anderen Seiten sitzt der Header auf weissem Grund und klebt an Oberkante und Inhalt — deshalb hier derselbe Abstand, oben wie unten. Die Logo-Breite bleibt ueberall die des Customizers. */ body:not(.home) #masthead { padding-block: var(--fgv-header-top); } /* --- Header auf die Kanten der Seite ausrichten -------------------------- Der Header-Container trug Kadence' 24 px Innenabstand, waehrend sich der ganze Rest der Seite an --fgv-band-inline ausrichtet. Ergebnis (gemessen 11.9. auf Ueber uns, 1440 px): Bandinhalt 154 bis 1271, Logo aber bei 92 und der Burger bis 1334 — beide rund 62 px ausserhalb der Kante. Dieselbe Klammer am Header loest links und rechts zugleich: Das Logo beginnt auf der Kante, an der auch h1 und Fliesstext beginnen, und der Burger endet auf der Kante, an der die Baender und die Task-Buttons enden. Auf der Startseite entsteht daraus zusaetzlich die Ausrichtung, die V2 vorgibt: Der Hero-Text sitzt dort --fgv-hero-inset weiter rechts, also 20 % der Logobreite — exakt der Abstand von der Logokante zur Mitte des Radieschens. Herzmitte und Textanfang fluchten damit von selbst, bei jeder Breite und ohne Pixelwert. Gemessen: Abweichung 0 px bei 1440 und 1920, 4 px bei 1100 (dort versetzt Kadence die vollbreite Reihe negativ). */ #masthead .site-container { padding-inline: var(--fgv-band-inline) !important; /* [BLOCK] Kadence setzt hier 24 px */ } /* --- Burger: Cherry statt Grau ------------------------------------------ Kadence setzt den Toggle per Inline-CSS auf --global-palette5 (#666), V2 zeigt ihn in Cherry. Die Basisregel ist `.mobile-toggle-open-container .menu-toggle-open` (0,2,0) und steht als Inline-CSS im Head — dagegen hilft nur !important. Hover seit 1.11.0 wie die Buttons (Roman 9.10.: «Burger- Rollover rot wie Buttons»): Cherry mit Weiss gemischt, statt Kadence' --global-palette-highlight (Sage, Entscheid 11.9. damit abgelöst). Das SVG erbt die Farbe ueber fill="currentColor". */ .menu-toggle-open, .menu-toggle-open:focus, .fgv-desktop-toggle, .fgv-desktop-toggle:focus { color: var(--fgv-cherry) !important; /* [BLOCK] Kadence-Inline-CSS */ } .menu-toggle-open:hover, .menu-toggle-open:focus-visible, .fgv-desktop-toggle:hover, .fgv-desktop-toggle:focus-visible { color: color-mix(in srgb, var(--fgv-cherry) var(--fgv-btn-hover-mix), var(--fgv-white)) !important; /* [BLOCK] */ } /* --- Desktop-Burger ------------------------------------------------------ Kadence Free bietet den Off-Canvas-Toggle nur im Mobile-Header an, in der Desktop-Zeile gibt es dafuer kein Element — das ist ein Pro-Feature. Er steht deshalb als HTML-Element im Header-Builder: ein Button mit genau den Attributen des Mobile-Toggles. Kadence bindet beim Laden alles an, was .drawer-toggle traegt (verifiziert 11.9.: der Klick setzt aria-expanded und oeffnet #mobile-drawer auch bei 1440 px). Nachtraeglich per JavaScript eingefuegte Buttons werden NICHT gebunden — es gibt keine Delegation. Das Icon kann nicht als SVG im HTML-Element stehen: wp_kses_post filtert und heraus, uebrig bleibt ein leerer Button ohne Groesse. Die drei Balken kommen deshalb aus dem CSS, die Farbe aus der Cherry-Regel weiter unten. */ .fgv-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 12px 0; background: none; border: 0; cursor: pointer; } .fgv-desktop-toggle .kadence-svg-iconset { display: none; } /* Balken 4 statt 3 px und volle Pillenrundung: Bei 3 px Hoehe ist ein Radius von 2 px rechnerisch fast schon rund, sichtbar wird es aber erst ab 4 px — vorher liest es sich als Kante (Guido 11.9.). --fgv-radius-pill ist derselbe Token wie bei den Buttons, die Rundung bleibt damit im System. */ /* Masse seit 1.12.0 aus der Vorlage (Roman: «fetter, grösser»): drei Balken 71 px lang, 6 px stark, 22 px Abstand, runde Enden bei 1920 — fluid über vw, gedeckelt bei den 1920er-Werten. Bis 1.11.0: 34 × 4, Abstand 11. */ .fgv-desktop-toggle { --fgv-burger-w: clamp(34px, 3.7vw, 71px); --fgv-burger-h: clamp(4px, 0.315vw, 6px); --fgv-burger-gap: clamp(11px, 1.146vw, 22px); padding: 0; } .fgv-desktop-toggle .menu-toggle-icon { position: relative; display: block; width: var(--fgv-burger-w); height: var(--fgv-burger-h); margin-block: var(--fgv-burger-gap); /* Platz für die äusseren Balken */ background: currentColor; border-radius: var(--fgv-radius-pill); } .fgv-desktop-toggle .menu-toggle-icon::before, .fgv-desktop-toggle .menu-toggle-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: var(--fgv-burger-h); background: currentColor; border-radius: var(--fgv-radius-pill); } .fgv-desktop-toggle .menu-toggle-icon::before { top: calc(-1 * var(--fgv-burger-gap)); } .fgv-desktop-toggle .menu-toggle-icon::after { top: var(--fgv-burger-gap); } /* Burger an die Oberkante der Logo-Schrift (Roman). Die Kadence-Zeile zentriert ihn sonst vertikal zum Logo. Die Schrift beginnt im Logo bei 9 % der Logohöhe (Vorlage: 23 von 252 px), das Logo ist 0.53 × so hoch wie breit. Gemessen und nachjustiert im Frontend. */ .site-header-main-section-right .site-header-item:has(.fgv-desktop-toggle) { align-self: flex-start; align-items: flex-start; padding-top: calc(var(--fgv-logo-width) * 0.53 * 0.09); } /* --- Burger-Drawer: ganzer Screen (Phase 2, 1.11.0) ----------------------- Entscheid Guido 9.10. (revidiert das schmale 400-px-Panel vom 11.9.): Das Menü füllt den ganzen Screen, weisser Grund, X oben rechts. Alle Ebenen stehen offen da, keine Dropdowns — Grund ist die Zielgruppe. Ab 768 px zwei Spalten: links Home/Aktuell/Wissen, rechts Angebot/Über uns/Kontakte. Die Spalten entstehen per grid-auto-flow: column über drei Zeilen, die Reihenfolge kommt aus dem WP-Menü «Hauptnavigation». Typo laut Vorlage (IDML): Hauptpunkte BioRhyme SemiExpanded Bold, Versalien, Rot, 90/88 pt bei 1920 px → --fgv-fs-menu, max 70 px (Faktor 0.777 wie die ganze Typo-Skala). Unterpunkte Be Vietnam Pro SemiBold 40/50, Black 95 % (ebenfalls IDML) → --fgv-fs-menu-sub, max 31 px. Hover: Hauptpunkt Cherry-70, Unterpunkt Grau. Desktop und Mobile bleiben derselbe Container (#mobile-drawer, #mobile-menu, Menü-Location primary) — beide Toggles zielen per data-toggle-target darauf. Kadence lädt sein Drawer-CSS vor dieser Datei; wo es per ID oder Inline-CSS gewinnt, steht [BLOCK]. */ #mobile-drawer .drawer-inner { width: 100%; max-width: none; /* bis 1.10.0: 400 px Seitenpanel */ height: 100%; background: var(--fgv-white); color: var(--fgv-drawer-text); } /* X oben rechts, auf derselben Kante wie Burger und Bänder. */ /* width:100% ist nötig: .drawer-inner ist eine Flex-Spalte, margin-inline:auto allein schrumpft den Header auf Inhaltsbreite und zentriert das X. */ #mobile-drawer .drawer-header { width: 100%; max-width: var(--fgv-container); margin-inline: auto; padding: var(--fgv-header-top) var(--fgv-band-inline) 0; box-sizing: border-box; justify-content: flex-end; } /* Desktop: X auf der Höhe des Burgers. Der Burger steht mittig zum Logo, also bei Header-Abstand + halbe Logohöhe (Seitenverhältnis 0.53, siehe 2b «Lead und Logo»); minus halbe Button-Höhe. Mobile bleibt Kadence-Lage. */ @media (min-width: 1025px) { #mobile-drawer .drawer-header { padding-top: calc(var(--fgv-header-top) + var(--fgv-logo-width) * 0.53 / 2 - 24px); } } /* X so gross und so stark wie der Burger (34 × 4 px, Pillenrundung). */ #mobile-drawer .menu-toggle-close { width: 48px !important; /* [BLOCK] Kadence-Padding */ height: 48px !important; padding: 0 !important; color: var(--fgv-cherry); } #mobile-drawer .menu-toggle-close .toggle-close-bar { width: 40px; height: 4px; margin: -2px 0 0 -20px; border-radius: var(--fgv-radius-pill); } #mobile-drawer .menu-toggle-close:is(:hover, :focus-visible) { color: color-mix(in srgb, var(--fgv-cherry) var(--fgv-btn-hover-mix), var(--fgv-white)); } #mobile-drawer .drawer-content { width: 100%; /* wie der Header: sonst schrumpft die Flex-Spalte */ max-width: var(--fgv-container); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.5rem) var(--fgv-band-inline) var(--fgv-space-xl); box-sizing: border-box; } /* container-type: Die Hauptpunkte richten ihre Grösse zusätzlich nach der Spaltenbreite. «KONTAKTE» ist 9.33 em breit (gemessen) — bei 70 px wären das 650 px, die halbe Spalte hat bei 1440 nur 520. Teiler 9.6 lässt Luft. */ #mobile-menu { width: 100%; /* Container misst sich sonst ohne Inhalt: 0 px */ container-type: inline-size; --fgv-menu-col: 100cqi; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--fgv-space-md); } @media (min-width: 768px) { #mobile-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--fgv-gap-cols); row-gap: var(--fgv-space-lg); align-items: start; --fgv-menu-col: calc((100cqi - var(--fgv-gap-cols)) / 2); } } /* Kadence zieht unter jedem Eintrag eine Linie und gibt den Links 1 em Padding — im Vollbild-Menü trägt die Typo die Gliederung. */ #mobile-menu li, #mobile-menu a, #mobile-menu .drawer-nav-drop-wrap { border: 0 !important; /* [BLOCK] */ } #mobile-menu .drawer-nav-drop-wrap { display: block; } /* Keine Dropdowns: Unterpunkte immer offen, Klapp-Button weg. Kadence blendet .sub-menu per display:none aus und erst nach dem Toggle ein. */ #mobile-menu .drawer-sub-toggle { display: none !important; } /* [BLOCK] */ #mobile-menu .sub-menu { display: block !important; /* [BLOCK] */ margin: 0.6em 0 0; padding: 0; } /* Hauptpunkte */ #mobile-menu > li > a, #mobile-menu > li > .drawer-nav-drop-wrap > a { display: inline-block; padding: 0 !important; /* [BLOCK] */ font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: min(var(--fgv-fs-menu), var(--fgv-menu-col) / 9.6); line-height: 0.98; /* 88/90 */ text-transform: uppercase; color: var(--fgv-cherry); } #mobile-menu > li > a:is(:hover, :focus-visible), #mobile-menu > li > .drawer-nav-drop-wrap > a:is(:hover, :focus-visible) { color: var(--fgv-cherry-70); } /* Unterpunkte */ #mobile-menu .sub-menu > li > a { display: inline-block; padding: 0 !important; /* [BLOCK] */ font-family: var(--fgv-font-body); font-variation-settings: normal; font-weight: 600; font-size: var(--fgv-fs-menu-sub); line-height: 1.25; /* 50/40 */ text-transform: none; color: var(--fgv-drawer-text); } #mobile-menu .sub-menu > li > a:is(:hover, :focus-visible) { color: var(--fgv-drawer-text-hover); } /* Transparenter Header über dem Hero: Logo tiefer setzen. */ .transparent-header #masthead { padding-top: var(--fgv-header-top); } /* Mobile-Header sticky, Burger bleibt beim Scrollen erreichbar (jede Seite, nicht nur Home). Erster Versuch war #mobile-header{position:sticky} — griff nicht: #mobile-header sitzt in #masthead, und #masthead ist bei Mobile-Breite nur 128px hoch (mobile-header + Padding, sonst nichts, die Desktop-Items sind display:none). Ein sticky-Element kann nur innerhalb der Hoehe seines direkten Elternelements kleben — bei 128px ist nach 128px Schluss, danach scrollt es normal weiter. Deshalb auf #masthead selbst gesetzt: dessen Elternelement #wrapper hat die volle Dokumenthoehe, also genug Raum. 1024px ist NICHT neu erfunden, sondern empirisch bestaetigt derselbe Wert, an dem #mobile-header schon von Kadence selbst auf display:block umschaltet (11.9.: 1025px → none, 1024px → block) — anders als der in lessons.md dokumentierte fehlgeschlagene Versuch, den Breakpoint selbst zu verschieben, wird hier nur derselbe bestehende Wert fuer eine zusaetzliche Regel wiederverwendet. !important noetig: auf Home setzt Kadence per Inline-CSS `.mobile-transparent-header #masthead{position:absolute}` (Spezifitaet 1 Klasse + 1 ID, hoeher als unser reines #masthead). Korrektur 11.9.e: auf Home riss "sticky" den Header in den Dokumentfluss zurueck (vorher position:absolute, ausserhalb des Flusses) — der Hero begann dadurch 104px zu tief, oben blitzte die Body-Hintergrundfarbe (Sage) statt des Hero-Fotos durch. Sticky braucht reservierten Fluss-Platz um "kleben" zu koennen, absolute/fixed nicht. Fuer die transparente Variante (nur Home) deshalb fixed statt sticky: bleibt ausserhalb des Flusses (Hero wieder bis Rand 0), UND verschwindet nicht beim Scrollen (das war ja der Ausgangsfehler, live getestet). */ @media (max-width: 1024px) { #masthead { position: sticky !important; top: 0; z-index: 100; } .mobile-transparent-header #masthead { position: fixed !important; left: 0; right: 0; } } /* Fade-Variante des Mobile-Headers (11.9.d, Korrekturen 11.9.e/f, FGV_HEADER_FADE_ON_SCROLL in functions.php) — Alternative zum immer sichtbaren Balken oben: Hintergrund und Logo faden beim Scrollen aus, nur der Burger (.mobile-toggle-open-container) bleibt stehen. 11.9.e: der erste Versuch (Klasse body.fgv-scrolled, binaer ab 4px Scroll, 0.25s CSS-Transition) faded viel zu abrupt — bei 10px Scroll bereits komplett weg. Jetzt kontinuierlich an die Scroll-Strecke gekoppelt: js/header-scroll.js setzt --fgv-header-fade auf einen Wert 1→0 ueber FADE_DISTANCE px (aktuell 140, in der JS-Datei ein einzelner Wert zum Nachjustieren). 11.9.f: ein separates ::before-Overlay fuer den Hintergrund (11.9.e-Stand) faded zwar korrekt selbst auf 0, aendert aber nichts sichtbar — darunter bleibt #masthead's EIGENES background-color:#fff von Kadence unangetastet und weiterhin voll deckend stehen. Deshalb jetzt direkt an #masthead selbst: background-color per rgba(...,var(--fgv-header-fade)) faedt die tatsaechliche Hintergrundfarbe, kein zweiter Weiss-Layer mehr noetig. Auf der transparenten Home-Variante gibt es keinen Balken zum Ausfaden (schon transparent) — deshalb ausgenommen, dort fadet nur das Logo. */ :root { --fgv-header-fade: 1; } @media (max-width: 1024px) { body:not(.mobile-transparent-header) #masthead { background-color: rgba(255, 255, 255, var(--fgv-header-fade)) !important; } .mobile-site-branding { opacity: var(--fgv-header-fade); } } .fgv-hero--home { position: relative; } .fgv-hero--home::before { content: ""; display: block; /* Kadence-Clearfix setzt display:table → 0×0 px */ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(90, 183, 129, 0) 0%, rgba(90, 183, 129, 0) 45%, /* 1.12.0: Verlauf ab 45 % (vorher 58 %) */ rgba(90, 183, 129, 0.75) 82%, var(--fgv-sage) 100%); } .fgv-hero--home > .kt-row-column-wrap { position: relative; z-index: 2; padding-bottom: clamp(3rem, 8.9vw, 10.7rem) !important; /* [BLOCK] Luft unter dem Text: V2 171 px bei 1920 = 8.9vw (bis 1.11.0 11vw) */ } .fgv-hero--home .fgv-hero-text { margin: 0 0 0 var(--fgv-hero-inset); max-width: var(--fgv-hero-width); line-height: 1.45; /* Schein nach aussen laut IDML: Multiply, Schwarz, 45 %, 15 pt bei 1920 px = 0.78vw. Im Web normaler Blend, Radius fluid. */ text-shadow: 0 0 max(6px, 0.78vw) rgba(0, 0, 0, 0.45); } /* Lead und Logo: ab rund 1400 px schiebt sich der Textblock ins Logo -------- Kadence verankert die Reihe unten (kt-row-valign-bottom) in einer auf 720 px fixierten Box. Wird der Textblock hoeher, waechst er nach oben: bei 1440 px 48 px unter die Logo-Unterkante, ab 1600 px 133 px darueber (gemessen 11.9. auf der Demo, Lead 444 px hoch bei 34 px Schrift). Zwei Korrekturen, beide erst ab 1250 px -- darunter passt der Block: 1. Die Box darf wachsen. 720 px bleiben Minimum, height auto laesst den Text unten am Verlauf verankert, statt ihn nach oben ausweichen zu lassen. 2. Ein Sicherheitsabstand oben reserviert Logohoehe plus Luft. Er haengt an --fgv-logo-width (Seitenverhaeltnis des Logos 0.53) und zieht bei einem Logowechsel automatisch nach -- kein fixer Pixelwert. Dazu der Deckel auf die Lead-Schrift, 28 statt 34 px, sonst waechst die Reihe auf 885 px. Bewusst hier und nicht auf --fgv-fs-hero, damit der Hero der Unterseiten (max-width 40ch, kein Platzproblem) bleibt wie er ist. Gemessen nach dem Fix: 1280 -> 720 px, 1440 -> 720 px, ab 1600 -> 742 px, Abstand Logo zu Lead durchgehend 40 bis 75 px. Korrektur 1.12.2 (Guido 9.10.): «darunter passt der Block» stimmte nicht. Gemessen lag der Lead unter 1250 px fast überall im Logo — 390: −34 px, 820: −14, 1024: −56, 1100: −19, 1249: −76 (nur 600 passte zufällig). Die Reserve gilt deshalb jetzt auf ALLEN Breiten. Die Formel trägt überall, weil --fgv-logo-width je Breakpoint der Customizer-Breite folgt (256 / 220 / 150) und --fgv-header-top auch im Mobile-Header greift. */ .fgv-hero--home > .kt-row-column-wrap { height: auto !important; /* [BLOCK] Kadence setzt die Reihe fix auf 720 px */ min-height: var(--fgv-hero-h-home) !important; /* [BLOCK] bis 1.9.23: 720 px */ padding-top: calc(var(--fgv-header-top) + var(--fgv-logo-width) * 0.53 + var(--fgv-space-md)) !important; /* [BLOCK] */ } @media (min-width: 1250px) { .fgv-hero--home .fgv-hero-text { font-size: 1.75rem; } } /* --- Homepage: Task-Buttons ------------------------------------------------ Gleiche linke Kante und Breite wie der Hero-Text, immer 2×2 (V2), erst unter 640 px einspaltig. Grid statt Flex (9.10.): Die Reihe ist bei 1290 px gedeckelt, ihr Padding und die Button-Schrift wachsen aber mit vw weiter. Ab ~1440 px war «Vereinshaus mieten» (nowrap) breiter als die halbe Spalte, Flex brach um, und je nach Breite standen 3 oder alle 4 Buttons untereinander. Jetzt feste zwei Spalten, die Schrift ist zusaetzlich an die Grid-Breite gebunden (cqi), damit der laengste Label immer in seine Spalte passt. */ /* Abstand letzter Button → Bandkante = --fgv-space-xl wie bei allen Bändern (1.10.0). Bis 1.9.23 kam hier noch --fgv-space-lg Innenabstand dazu, die Reihe war 543 px hoch (Roman: −33 %). */ .fgv-cta-band > .kt-row-column-wrap { padding-block: 0 !important; } /* [BLOCK] Kadence-Padding */ .wp-block-buttons.fgv-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fgv-space-md) var(--fgv-space-md); container-type: inline-size; margin-left: var(--fgv-hero-inset); max-width: var(--fgv-hero-width); } .fgv-cta-grid .wp-block-button { margin: 0; } .fgv-cta-grid .wp-block-button > .wp-block-button__link { width: 100%; text-align: center; box-sizing: border-box; white-space: nowrap; padding-block: 0.95em; /* V2: Buttons deutlich höher als Standard */ } @media (min-width: 641px) { /* 48 em ≈ zweimal «Vereinshaus mieten» inkl. Letter-Spacing und Padding. Spezifitaet 0,3,0, steht nach der Basisregel und gewinnt. */ .fgv-cta-grid .wp-block-button > .wp-block-button__link { font-size: max(0.75rem, min(var(--fgv-fs-btn), calc((100cqi - var(--fgv-space-md)) / 48))); padding-inline: 0.75em; } } @media (max-width: 1024px) { :root { --fgv-logo-width: 220px; --fgv-hero-width: 90%; } } @media (max-width: 767px) { :root { --fgv-logo-width: 150px; --fgv-hero-inset: 0px; --fgv-hero-width: 100%; } } @media (max-width: 640px) { /* Task-Buttons einspaltig: engere Abstaende, groessere Tap-Flaeche (>= 44 px). */ .wp-block-buttons.fgv-cta-grid { grid-template-columns: 1fr; } .fgv-cta-grid { gap: var(--fgv-space-xs); } /* Spezifitaet 0,3,0 - schlaegt .wp-block-button.fgv-btn > .wp-block-button__link */ .fgv-cta-grid .wp-block-button > .wp-block-button__link { white-space: normal; padding-block: 1.1em; } /* Hero: Verlauf frueher einsetzen, sonst steht der Text ueber hellem Himmel. */ .fgv-hero--home::before { background: linear-gradient(180deg, rgba(90, 183, 129, 0) 0%, rgba(90, 183, 129, 0) 30%, rgba(90, 183, 129, 0.72) 62%, var(--fgv-sage) 100%); } } /* --- Homepage: Aktuell und Teaser ------------------------------------------ */ .aktuell-section h2 { color: var(--fgv-cherry); margin-top: 0; } /* Phase 3 (1.12.0), Roman: Titel näher an den Lauftext, Lauftext-Zeilen- abstand −20 % (1.55 → 1.25), Vorschau ca. 320 Zeichen (excerptLength 42 Wörter im Posts-Block, content/homepage-v2.html). */ .aktuell-section .entry-header { margin-bottom: var(--fgv-space-2xs) !important; } /* [BLOCK] Kadence 16 px */ .aktuell-section .entry-summary, .aktuell-section .entry-summary p { line-height: 1.25 !important; } /* [BLOCK] gegen 3.3 */ /* Das Aktuell-Band trägt seinen Grund als Kadence-Palettenfarbe (palette8 = Sage-60) statt über .fgv-band--green — hier aufs Bandgrün gezogen (1.10.0). */ .aktuell-section.fgv-band { background-color: var(--fgv-band-green) !important; } /* [BLOCK] */ /* Zweiklassig: `.fgv-band .wp-block-buttons` (2b) setzt sonst 24 px. */ .aktuell-section .fgv-more-btn { margin-top: var(--fgv-space-link-btn); } /* 1.12.0: gemessen vorher 24 px */ .fgv-teaser h2 { margin-top: 0; } .fgv-teaser--sage h2, .fgv-teaser--sage .fgv-teaserlinks a { color: var(--fgv-sage); } .fgv-teaser--cherry h2, .fgv-teaser--cherry .fgv-teaserlinks a { color: var(--fgv-cherry); } .fgv-teaserlinks { margin: var(--fgv-space-sm) 0; line-height: 1.35; } /* Abstand Linkliste → Button = --fgv-space-link-btn wie in Aktuell (1.12.0). Der Absatz trägt sonst 32 px Standardabstand unten, gemessen 56 → 82 px. */ .fgv-teaser .fgv-teaserlinks { margin-bottom: 0 !important; } /* [BLOCK] */ .fgv-teaser .wp-block-buttons { margin-top: var(--fgv-space-link-btn); } /* Teaser Angebot/Wissen (Phase 3, 1.12.0). Vorlage: Titel 68 px unter der Bild-Oberkante (1920), in beiden Teasern gleich. Kadence zentrierte die Spalten vertikal — gemessen lag der Titel 154 bzw. 91 px ÜBER dem Bild. Jetzt oben bündig plus Einzug der Textspalte. Erst ab 768 px, darunter stehen Bild und Text untereinander. */ @media (min-width: 768px) { .fgv-teaser > .kt-row-column-wrap { align-items: start !important; /* [BLOCK] Kadence valign */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* [BLOCK] Roman: zweispaltig bis Tablet hoch, Kadence stapelt ab 1024 */ } /* Kadence zentriert die Spalten zusätzlich per align-self und den Inhalt der Spalte per justify-content — beides zurück auf oben. */ .fgv-teaser > .kt-row-column-wrap > .wp-block-kadence-column { align-self: start !important; } /* [BLOCK] */ .fgv-teaser .wp-block-kadence-column > .kt-inside-inner-col { justify-content: flex-start !important; } /* [BLOCK] */ .fgv-teaser .wp-block-kadence-column:not(:has(img)) > .kt-inside-inner-col { padding-top: clamp(0px, 3.54vw, 68px) !important; /* [BLOCK] */ } } /* Titel passt in seine Spalte: «Angebot» brach bei 79 px in der 520-px- Spalte als «Angebo/t». Breite des Worts ≈ 7 em → höchstens Spalte / 7.2. */ .fgv-teaser .kt-inside-inner-col { container-type: inline-size; } .fgv-teaser h2 { font-size: min(var(--fgv-fs-display), 100cqi / 7.2) !important; } /* [BLOCK] gegen 3.1 */ .fgv-teaserlinks a:hover { text-decoration: underline; } /* Wissen-Teaser auf der Startseite steht in V2 auf einem PINKEN Band, nicht auf weiss: Titel und Teaserlinks weiss (kommt aus .fgv-band--pink, Abschnitt 2), Fliesstext bleibt Ebony, Button sage. Die Klasse fgv-teaser--cherry darf dort NICHT stehen — sie faerbt h2 und Links cherry und steht im CSS nach der Weiss-Regel des Bands, gewinnt also bei gleicher Spezifitaet. Spezifitaet Button: die Basisregel ist `.wp-block-button.fgv-btn > .wp-block-button__link` (0,3,0) — der Override braucht mindestens (0,4,0). */ .fgv-teaser.fgv-band--pink .fgv-intro { color: var(--fgv-text); } .fgv-teaser.fgv-band--pink .wp-block-button.fgv-btn > .wp-block-button__link { --fgv-btn-face: var(--fgv-btn-bg-alt); } /* --- Homepage: Sponsoren (Phase 3, 1.12.0) ----------------------------------- Zwei Reihen ohne Farbband-Klasse (sonst würde die 4:3-Regel die Logos zuschneiden): .fgv-sponsoren--head (Dank-Text) und --body (Logos, Button). Vorlage: weisser Grund, Text linksbündig auf der Inhaltskante, fünf Logos in einer Reihe, darunter der Button mittig. Roman: mobil Text über die ganze Breite in Leadgrösse, mindestens zwei Logos pro Zeile, einheitliche Abstände, Button wie die übrigen. Bis 1.11.0 lag der Text 50 px eingerückt (Kadence-Spaltenpolster), die Logos standen mobil einzeln untereinander (Section 1000 px hoch bei 390). */ .fgv-sponsoren { background: var(--fgv-white); } .fgv-sponsoren--head > .kt-row-column-wrap { padding-block: var(--fgv-space-xl) 0 !important; /* [BLOCK] Kadence lg/sm */ } .fgv-sponsoren--body > .kt-row-column-wrap { padding-block: var(--fgv-space-lg) var(--fgv-space-xl) !important; /* [BLOCK] */ } .fgv-sponsoren .kt-inside-inner-col { padding-inline: 0 !important; } /* [BLOCK] */ /* Der Einzug von 50 px kam nicht aus Polstern, sondern aus 50 px breiten Rahmen (V1-Block-Attribute) an der Überschrift und an der inneren Logo- Reihe — gemessen 9.10., gleiches Muster wie der Bildrahmen im Teaser. */ .fgv-sponsoren :is(h4, .kb-row-layout-wrap) { border: 0 !important; } /* [BLOCK] */ .fgv-sponsoren h4 { font-family: var(--fgv-font-body) !important; /* [BLOCK] gegen 3.1 */ font-variation-settings: normal !important; font-weight: 400; font-size: var(--fgv-fs-lead) !important; /* [BLOCK] Roman: wie Leadtexte; Block-Grösse 22 px */ line-height: var(--fgv-lh-body) !important; text-align: left !important; max-width: 60ch; margin: 0 !important; color: var(--fgv-text); } /* Die Logo- und die Button-Reihe sind innere Kadence-Reihen: eigener Deckel (≈ 1000 px), 50 px Rand und 24 px Polster — mobil blieben so 242 px für die Logos und eine grosse Lücke vor dem Button. Hier auf volle Breite. */ .fgv-sponsoren--body .kt-inside-inner-col > .kb-row-layout-wrap { margin: 0 !important; padding: 0 !important; } /* [BLOCK] */ .fgv-sponsoren--body .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap { max-width: none !important; /* [BLOCK] */ margin: 0 !important; padding: 0 !important; } .fgv-sponsoren--body .kt-inside-inner-col > .kb-row-layout-wrap + .kb-row-layout-wrap { margin-top: var(--fgv-space-lg) !important; } /* Logos: eigenes Raster statt Kadence-Spalten (die stapeln unter 768 px einzeln). Gleicher Abstand wie alle Raster, Logos in ihrer Zelle zentriert. */ .fgv-sponsoren .kt-row-column-wrap.kt-has-5-columns { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* [BLOCK] */ gap: var(--fgv-gap-grid) !important; align-items: center; padding-inline: 0 !important; } @media (max-width: 1024px) { .fgv-sponsoren .kt-row-column-wrap.kt-has-5-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .fgv-sponsoren .kt-row-column-wrap.kt-has-5-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .fgv-sponsoren .kt-has-5-columns .wp-block-image { margin: 0; text-align: center; } .fgv-sponsoren .kt-has-5-columns img { max-height: 110px; width: auto; max-width: 100%; } /* Button «Sponsor werden»: Kadence-Advanced-Button, hier auf die Masse der übrigen Buttons gezogen (Grösse, Sperrung, Pille). Farbe bleibt Sage. */ .fgv-sponsoren .wp-block-kadence-advancedbtn { justify-content: center; } .fgv-sponsoren .kb-button { font-size: var(--fgv-fs-btn) !important; /* [BLOCK] */ letter-spacing: var(--fgv-ls-button) !important; line-height: 1 !important; padding: 0.7em 1.6em !important; border-radius: var(--fgv-radius-pill) !important; } /* ========================================================================== 3 — Migrierte Regeln -------------------------------------------------------------------------- Übernommen aus Customizer → Zusätzliches CSS (Stand 24.3.2026), auf die Tokens aus Abschnitt 1 umgestellt und entdoppelt. Nach dem Cutover ist das Customizer-Feld leer. !important bleibt nur dort, wo Kadence Block-Level-CSS (inline im , per Block-ID) eine Schriftfamilie setzt. Diese Blöcke referenzieren teilweise noch «BioRhyme» — den Google-Namen, den Safari nicht kennt. Sobald in Phase 1 die Block-Level-Fonts entfernt sind, können diese !important fallen. Sie sind mit [BLOCK] markiert. ========================================================================== */ /* --- 3.1 Headings, die Kadence-Blöcke setzen ------------------------------ h1/h2 sind in Abschnitt 2 bereits BioRhyme. Hier zusätzlich h3 sowie die Advanced-Heading-Blöcke, die per Block-CSS eine eigene Family bekommen. */ h1, h2, h3, .kt-adv-heading, .kb-adv-heading-wrap .kb-adv-heading { font-family: var(--fgv-font-display) !important; /* [BLOCK] */ font-variation-settings: var(--fgv-vf-display); } /* h3 als Zwischentitel: breiter, leichter — Bestand aus V1-Umsetzung. */ h3 { font-variation-settings: "wdth" 125, "wght" 400; } /* --- 3.2 Helfer ------------------------------------------------------------ */ .text-justify { text-align: justify !important; hyphens: auto; -webkit-hyphens: auto; word-break: break-word; } /* --- 3.3 Aktuell (Homepage, Kadence Posts Block) -------------------------- Klasse .aktuell-section am äusseren Row Layout Block. */ .aktuell-section article, .aktuell-section .loop-entry { background: transparent !important; border: none !important; box-shadow: none !important; } .aktuell-section .post-thumbnail img { border-radius: var(--fgv-radius-img); /* bis 1.9.23 fix 6 px (V1-Bestand) */ } /* Card-Titel sind Be Vietnam Pro, nicht BioRhyme — überschreibt 3.1. */ .aktuell-section h3, .aktuell-section h3 a, .aktuell-section .entry-title, .aktuell-section .entry-title a { font-family: var(--fgv-font-body) !important; /* [BLOCK] */ font-variation-settings: normal !important; font-weight: 600; font-size: var(--fgv-fs-card-title); line-height: var(--fgv-lh-heading); color: var(--fgv-text); text-decoration: none; } .aktuell-section .entry-summary, .aktuell-section .entry-content, .aktuell-section .entry-summary p { font-family: var(--fgv-font-body); font-weight: 400; font-size: var(--fgv-fs-small); line-height: var(--fgv-lh-body); color: var(--fgv-text); } /* «Mehr lesen»: BioRhyme, Cherry, Guillemet statt Kadence-SVG-Pfeil. */ .aktuell-section a.post-more-link, .aktuell-section a.kadence-read-more, .aktuell-section .entry-readmore a, .aktuell-section .entry-footer a, .aktuell-section a[class*="read-more"], .aktuell-section a[class*="more-link"] { font-family: var(--fgv-font-display) !important; /* [BLOCK] */ font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-small); color: var(--fgv-link); text-decoration: none; text-transform: none; letter-spacing: 0; } .aktuell-section a.post-more-link:hover, .aktuell-section a.kadence-read-more:hover, .aktuell-section .entry-readmore a:hover, .aktuell-section .entry-footer a:hover, .aktuell-section a[class*="read-more"]:hover, .aktuell-section a[class*="more-link"]:hover { text-decoration: underline; color: var(--fgv-link); } .aktuell-section a.post-more-link .kadence-svg-iconset { display: none; } .aktuell-section a.post-more-link::after { content: " \00BB"; margin-left: 4px; } .aktuell-section .entry-meta, .aktuell-section .post-date, .aktuell-section .posted-on { display: none; } /* --- 3.4 Accordion ------------------------------------------------------- */ .kt-blocks-accordion-header, .kt-blocks-accordion-title { font-family: var(--fgv-font-display) !important; /* [BLOCK] */ font-variation-settings: var(--fgv-vf-display); } /* Inhalt bündig mit dem Titel. */ .kt-accordion-panel-inner { padding-left: 0 !important; } /* --- 3.5 Newsletter (WPForms Lite, Modern Markup) ------------------------- Klasse .newsletter-section am äusseren Row Layout Block. WPForms steuert Radius und Border über CSS Custom Properties — deshalb die Variablen direkt am Formular überschreiben, nicht die Selektoren. */ .newsletter-section .wpforms-form { --wpforms-field-border-radius: var(--fgv-radius-pill) !important; --wpforms-field-border-size: 1px; --wpforms-field-border-color: var(--fgv-cherry) !important; --wpforms-button-border-radius: var(--fgv-radius-pill); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .newsletter-section .wpforms-field-container { flex: 1 1 60%; min-width: 200px; } .newsletter-section .wpforms-submit-container { flex: 0 0 auto; padding-top: 0 !important; margin-top: 0 !important; } .newsletter-section .wpforms-field-label { display: none !important; } .newsletter-section .wpforms-field-container input.wpforms-field-small, .newsletter-section .wpforms-field-container input.wpforms-field-medium { max-width: 100% !important; width: 100% !important; height: 35px; box-sizing: border-box; border: 1px solid var(--fgv-cherry) !important; border-radius: var(--fgv-radius-pill) !important; padding-left: 20px; color: var(--fgv-cherry) !important; } .newsletter-section .wpforms-field-container input::placeholder { color: var(--fgv-cherry) !important; opacity: 0.7; } .newsletter-section .wpforms-submit-container button.wpforms-submit { transition: background-color 0.15s ease; height: 35px; box-sizing: border-box; padding-left: 32px; padding-right: 32px; border-radius: var(--fgv-radius-pill) !important; font-family: var(--fgv-font-display) !important; font-variation-settings: var(--fgv-vf-display); letter-spacing: var(--fgv-ls-button); } /* Hover wie alle Buttons (1.10.0). WPForms setzt beim Hover eine eigene, dunklere Variante per Variable — hier dieselbe Weiss-Mischung wie bei .fgv-btn, damit der Newsletter-Button nicht als einziger abweicht. */ .newsletter-section .wpforms-submit-container button.wpforms-submit:hover, .newsletter-section .wpforms-submit-container button.wpforms-submit:focus-visible { background: color-mix(in srgb, var(--fgv-cherry) var(--fgv-btn-hover-mix), var(--fgv-white)) !important; /* [BLOCK] WPForms */ } /* --- 3.6 Footer (Widget-Areas 1–4, Kadence-Free-Workaround) --------------- */ .site-footer .footer-widget-area { color: var(--fgv-text-invert); } .site-footer .footer-widget-area a { color: var(--fgv-text-invert); text-decoration: none; } .site-footer .footer-widget-area a:is(:hover, :focus-visible) { color: var(--fgv-ebony); } /* 1.12.0 Roman: Rollover schwarz (vorher Sunflower-Tint) */ /* Phase 3 (1.12.0), Roman: Polster oben −33 % (Kadence 60 → 40 px), Schrift wie der Lauftext in Aktuell (--fgv-fs-small). */ .site-footer .site-middle-footer-inner-wrap { padding-top: 40px !important; } /* [BLOCK] Kadence-Footer-Row */ .site-footer .footer-widget-area, .site-footer .footer-widget-area :is(p, a, li) { font-size: var(--fgv-fs-small) !important; } /* [BLOCK] Kadence-Heading-Blöcke */ .site-footer .footer-widget-area a[href^="mailto:"], .site-footer .footer-widget-area a[href^="tel:"] { text-decoration: none; } .site-footer .widget p { margin-top: 0; margin-bottom: 0.5em; } .site-footer .widget .wp-block-navigation { margin-top: 0; } /* --- 3.7 Vorstand-Liste («Über uns», Custom-HTML-Block) ------------------- */ .vorstand-liste { width: 100%; } /* Seit 1.14.0 (Roman 9.10.): kein Bold, keine Linien, Name schmaler, Tel. als vierte Spalte nach Mail. Jede Zeile ist ein eigenes Grid mit derselben Spaltenvorlage, dadurch fluchten die Spalten ueber alle Zeilen. */ .vorstand-row { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 17em) 6em minmax(0, 9em); column-gap: var(--fgv-space-sm); align-items: baseline; padding: 6px 0; font-family: var(--fgv-font-body); font-size: var(--fgv-fs-small); font-weight: 400; color: var(--fgv-text); } .vorstand-mail, .vorstand-tel { color: inherit; } a.vorstand-mail { text-decoration: underline; } /* «Mail folgt» ist ein span, kein Link */ .entry-content .vorstand-tel { color: inherit !important; text-decoration: none; } /* [BLOCK] wie Mail-Links */ .entry-content .vorstand-tel:is(:hover, :focus-visible) { color: var(--fgv-section-accent, var(--fgv-link)) !important; } @media (max-width: 767px) { .vorstand-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "rolle rolle" "mail tel"; column-gap: var(--fgv-space-sm); padding: 0 0 var(--fgv-space-xs); } .vorstand-name { grid-area: name; } .vorstand-rolle { grid-area: rolle; } .vorstand-mail { grid-area: mail; } .vorstand-tel { grid-area: tel; } } /* --- 3.8 Agenda ([fgv_termine], [fgv_events_extern]) ----------------------- Markup kommt aus inc/agenda.php, beide Quellen rendern dieselbe Karte. Das Raster ist .fgv-grid-3 aus Abschnitt 2 — hier stehen nur die Karteninnereien. Der Titel muss wie in 3.3 mit !important gegen die globale h3-Regel aus 3.1 gegenhalten, sonst wird er BioRhyme. Die externe Karte (.fgv-event-card--extern) hat keinen Ort: der Gruenagenda-Feed liefert nur Titel, Datum mit Uhrzeit, Text und Link. Die Vorlage zeigt fuer «Events extern» einen Ort — das ist eine bewusste Abweichung, nicht ein Fehler, und steht so in tasks/todo.md. */ .fgv-events { align-items: stretch; } .fgv-event-card { display: flex; flex-direction: column; } .fgv-event-card .fgv-event-title, .fgv-event-card .fgv-event-title a { font-family: var(--fgv-font-body) !important; /* [BLOCK] */ font-variation-settings: normal !important; font-weight: 600; font-size: var(--fgv-fs-card-title); line-height: var(--fgv-lh-heading); color: var(--fgv-text); text-decoration: none; } .fgv-event-card .fgv-event-title { margin: 0 0 var(--fgv-space-2xs); } .fgv-event-card .fgv-event-title a:hover { color: var(--fgv-link); } /* Datum, Zeit und Ort stehen untereinander wie in der Vorlage. */ .fgv-event-meta { margin: 0 0 var(--fgv-space-2xs); font-family: var(--fgv-font-body); font-size: var(--fgv-fs-small); line-height: var(--fgv-lh-body); color: var(--fgv-text); } .fgv-event-meta > time, .fgv-event-meta > span { display: block; } .fgv-event-meta > time { font-weight: 600; } .fgv-event-ort { color: var(--fgv-text); } .fgv-event-text { margin: 0 0 var(--fgv-space-xs); font-family: var(--fgv-font-body); font-weight: 400; font-size: var(--fgv-fs-small); line-height: var(--fgv-lh-body); color: var(--fgv-text); hyphens: auto; } /* margin-top:auto haelt den Link am Kartenfuss — dadurch fluchten die Links aller Karten einer Reihe, auch bei ungleich langen Texten. */ .fgv-event-more { margin: auto 0 0; } .fgv-event-more a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-small); color: var(--fgv-link); text-decoration: none; } .fgv-event-more a:hover { text-decoration: underline; } .fgv-event-leer { font-family: var(--fgv-font-body); font-size: var(--fgv-fs-body); color: var(--fgv-text); } /* Bild oben auf der Karte — V2 zeigt auf jeder Kachel eines. Events tragen ihr Beitragsbild, Feed-Eintraege und Events ohne Bild den Theme-Platzhalter. 4:3 und Radius aus den Tokens wie alle Inhaltsbilder (Abschnitt 2b). */ .fgv-event-img { margin-bottom: var(--fgv-space-xs); } .fgv-event-img img { display: block; width: 100%; aspect-ratio: var(--fgv-img-ratio); object-fit: cover; border-radius: var(--fgv-radius-img); } /* Die Mitmach-Kachel traegt kein Foto, sondern das Piktogramm (schwarz auf transparent) auf einer Sage-Flaeche — wie die Vorlage. Zweimal falsch gebaut am 11.9., beide Male an derselben Stelle: Das Bild hing mit max-height bzw. height: 100% an der Hoehe des Elternelements, und die kam aus aspect-ratio. Eine Prozenthoehe laesst sich dagegen nicht zuverlaessig aufloesen — Safari tat es, Chrome nicht, und die Kachel wuchs ueber die ganze Kartenhoehe. Jetzt traegt das BILD das Seitenverhaeltnis und seinen eigenen Innenabstand (box-sizing: border-box, Padding schrumpft die Content-Box eines ersetzten Elements). Damit kommt keine Prozenthoehe mehr vor, der Kasten ist genau so hoch wie ein 4:3-Foto daneben, und object-fit passt die Zeichnung ein. */ .fgv-event-img--flaeche { background: var(--fgv-sage-60); border-radius: var(--fgv-radius-img); } .fgv-event-img--flaeche img { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: var(--fgv-img-ratio); padding: clamp(1rem, 3vw, 2.25rem); object-fit: contain; } /* Button unter dem Raster: V2 zentriert ihn. Abstand zum letzten «Mehr erfahren» wie überall (--fgv-space-link-btn); bis 1.12.2 gemessen 0 px — der Button klebte an der letzten Karte (ein p-Reset schlug die Regel). */ .fgv-events-more { margin: var(--fgv-space-link-btn) 0 0 !important; /* [BLOCK] */ text-align: center; } /* --- Event-Detailseite (Phase 4, 1.13.0) -------------------------------------- Template: tribe-events/single-event.php. Roman: Box und Trennlinien weg, Ränder wie die Unterseiten. Kadence setzt die Seite in einen schmalen Container (842 px) mit Box-Schatten auf dem gelben Body-Grund; hier auf Papier und dieselbe Kante wie alle Bänder. */ .single-tribe_events #inner-wrap { background: var(--fgv-paper); } .single-tribe_events .content-container.site-container { max-width: var(--fgv-container) !important; /* [BLOCK] Kadence narrow */ padding-inline: var(--fgv-band-inline) !important; } .single-tribe_events #tribe-events-pg-template { max-width: none; margin: 0; padding: 0; } .fgv-event-single { padding-block: var(--fgv-space-xl); background: transparent; box-shadow: none; border: 0; --fgv-section-accent: var(--fgv-cherry); } .fgv-event-single .tribe-events-notices { /* «hat bereits stattgefunden» */ margin: 0 0 var(--fgv-space-sm); padding: 0; background: none; border: 0; font-size: var(--fgv-fs-small); color: var(--fgv-text); opacity: 0.75; } .fgv-event-single { container-type: inline-size; } /* Titel an die Breite gebunden und mit Silbentrennung: «Baumschnitt-Kurs» lief bei 390 px rechts hinaus, «Generalversammlung» ist noch länger (1.13.1). */ .fgv-event-single-title { color: var(--fgv-cherry); font-size: min(var(--fgv-fs-display), 100cqi / 10) !important; /* [BLOCK] */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; margin: 0 0 var(--fgv-space-sm) !important; /* [BLOCK] */ text-wrap: balance; } /* Datum, Zeit, Ort, Kosten: «in Be Vietnam wie Leadtext» (Roman) — Grösse, Schnitt und Farbe der Agenda-Leads. Eine Angabe pro Zeile. */ .fgv-event-single-meta { margin: 0 0 var(--fgv-space-md); font-family: var(--fgv-font-body); font-size: var(--fgv-fs-lead); font-weight: 600; line-height: 1.35; color: var(--fgv-section-accent); } .fgv-event-single-meta > * { display: block; } .fgv-event-single-cal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fgv-space-xs) var(--fgv-space-sm); margin: 0 0 var(--fgv-space-md); } .fgv-event-single-cal .fgv-btn { white-space: nowrap; } .fgv-btn.fgv-btn--kalender { --fgv-btn-face: var(--fgv-btn-bg-alt); } /* sekundär: Sage */ .fgv-event-single-text { max-width: 60ch; } .fgv-event-single-text > :last-child { margin-bottom: 0; } .fgv-event-single-anmelden { margin: var(--fgv-space-link-btn) 0 0; } /* «Google Kalender» und «Alle Veranstaltungen»: gleiche Sprache wie «Mehr erfahren» in den Karten (BioRhyme, Cherry, Guillemet). */ .fgv-event-single-gcal, .fgv-event-single-back a { font-family: var(--fgv-font-display); font-variation-settings: var(--fgv-vf-display); font-size: var(--fgv-fs-small); color: var(--fgv-link); text-decoration: none; } .fgv-event-single-gcal::after, .fgv-event-single-back a::after { content: " \00BB"; } .fgv-event-single-gcal:hover, .fgv-event-single-back a:hover { text-decoration: underline; } .fgv-event-single-back { margin: var(--fgv-space-lg) 0 0; } /* TEC hängt seinen eigenen Kalender-Dropdown an den Inhalt — ersetzt durch den Button oben. */ .fgv-event-single .tribe-events-c-subscribe-dropdown__container, .fgv-event-single .tribe-events-cal-links { display: none !important; } /* [BLOCK] */ /* Die TODO-Zeile der Musterdaten sieht nur Angemeldete (siehe inc/agenda.php). */ .fgv-events + .fgv-todo, .fgv-todo + .fgv-events { margin-top: var(--fgv-space-xs); }