/* findd public website theme. Per-customer colours/fonts come from CSS vars * injected by SiteSettings::cssVars(): --c-primary, --c-secondary, --font-body. */ /* Self-hosted Rajdhani (DSGVO, no CDN) so the "Rajdhani" font choice also renders * on the live site, not just in the admin editor (app.css). Same woff2 files. */ @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/rajdhani-400.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/rajdhani-500.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/rajdhani-600.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/rajdhani-700.woff2') format('woff2'); } /* THE chevron — same geometry as app.css and icon('chevron'); see the note there. Duplicated on purpose: tenant pages never load app.css. */ .chev { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--chev-mask); mask: var(--chev-mask); } .chev-down { transform: rotate(90deg); } .chev-left { transform: rotate(180deg); } .chev-up { transform: rotate(-90deg); } :root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 9 9-9 9'/%3E%3C/svg%3E"); --chev-mask: var(--chev) center / contain no-repeat; --c-primary: #19BCB9; --c-secondary: #18D6BA; /* THE brand gradient of the FILLED controls — a button and the active gallery category are the same affordance in two shapes, so the value lives once. 15deg like the gallery category, not the 135deg of the decorative gradients (section background, document/payment icon tiles): on a control one line high a steep diagonal reads as a colour shift ALONG the label, which is the effect that was asked for; 135deg on a 40px-tall box is nearly a vertical fade. */ --grad-brand: linear-gradient(15deg, var(--c-primary) 0%, var(--c-secondary) 100%); --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ink: #1c2530; --ink-soft: #5a6675; /* Hairlines: card borders, dividers, input borders, the switch track. Was #e6e9ee = 1.22:1 on white — a line that faint reads as a rendering artefact rather than a boundary, and it disappeared entirely on the muted footer (1.13:1). The new value matches the presence the DARK mode always had (#2b333d on its page background is 1.44:1), so the two modes now draw the same weight of line instead of light mode being the quiet outlier. */ --line: #d0d7e0; /* 1.45:1 on white, 1.35:1 on --muted-bg */ --muted-bg: #f5f7f9; --page-bg: #fff; /* page background */ --surface: #fff; /* cards / header / inputs */ /* Scrollbar thumb of the dialogs that scroll inside themselves (see "dialog scrollbars"). Not a hairline and not text: a control that should be findable without competing with the content — 1.63:1 on the sheet, 2.45:1 under the pointer. The dark pair is measured to the same two ratios so both modes draw the same weight of bar (contrast_ratio(), i.e. WCAG, not the brightness approximation of hex_is_light()). */ --scroll-thumb: #c2ccd6; --scroll-thumb-hover: #9aa7b4; --radius: 6px; --maxw: 1120px; --gutter: 22px; /* single horizontal page gutter — applied once at the outermost content level */ /* Height of a wide stage inside the content column: the big Events/Jobs/News box (.fb-feat-big) and the teaser banner (.fb-tl-overlay). One decision, one place — a page carrying both looks ragged the moment the two drift apart. Deliberately flat: 16/9 would be 720px on a 1280 column and push everything below the fold. */ --fb-banner-h: 340px; /* Height of an OVERLAYING header (the "transparent over hero" option), measured and published by findd-public.js on the live page and by builder.js on the canvas — it depends on the variant, the utility bar and the breakpoint, so it cannot be a constant. 0 means "no header covers anything", which is both the safe no-JS fallback and the value on every non-hero page. Consumed via the inherited --hero-offset, see "hero under an overlaying header". */ --header-h: 0px; } /* Dark theme — remap the neutral tokens; accent colours stay tenant-defined. Applied to by an early head script (no flash) + the header toggle. */ html.theme-dark { --ink: #e7ecf2; --ink-soft: #9aa6b3; --line: #2b333d; --muted-bg: #161c23; --page-bg: #10151a; --surface: #1a212a; --scroll-thumb: #39434f; /* 1.61:1 on --surface */ --scroll-thumb-hover: #525e6b; /* 2.45:1 */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Onepager: offset anchored sections so a (sticky) header doesn't cover them. */ .fb-section[id] { scroll-margin-top: 90px; } body.findd-site { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--page-bg); line-height: 1.6; } .findd-site img { max-width: 100%; height: auto; display: block; } /* Content links. --c-link is only emitted once the customer picks one (SiteSettings::cssVars), so the fallback here is the single place that decides what "no own link colour" means. Every context that needs a different colour for contrast — footer, utility bar, coloured sections, header CTA, 404 — still out-specifies this rule the way it always did; the setting is about links in the CONTENT, not about repainting white-on-primary text. */ .findd-site a:not(.fb-btn) { color: var(--c-link, var(--c-primary)); } /* --- shell ---------------------------------------------------------------- */ /* Editor notices (draft / maintenance) as fixed top-right badges, stacked and layered above the header (which may overlay the page when transparent). */ .site-notices { position: fixed; top: 12px; right: 12px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; } .site-notice { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: min(320px, 70vw); } .site-notice--draft { background: #ffce4d; color: #5a4500; } .site-notice--maint { background: #f97316; color: #fff; } /* Header shell carries scroll behavior (sticky); the inner .site-header is the centered bar; variant classes change its layout; options compose on top. */ .site-header-wrap { background: var(--surface); } .site-header-wrap.is-sticky { position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 var(--line); } /* Transparent-over-hero header: a frosted-glass bar floating over the hero. It follows the theme — white in light mode (dark brand text and nav) and a dark bar in dark mode (light text; the nav rides --ink, which flips with the theme, so it needs no dark-mode override). Nearly solid at the top, a bit more translucent once scrolled (JS toggles .is-scrolled). Only applied on pages that open with a hero. */ /* --hdr-op / --hdr-op-scrolled are set on the element by Header::opacityStyle() ONLY when the owner moved the sliders. Unset keeps the per-theme defaults below, which deliberately differ: light gets more see-through on scroll, dark gets more solid. A set value is one number for both themes. */ .site-header-wrap.is-transparent { position: fixed; top: 0; left: 0; width: 100%; z-index: 40; background: rgba(255, 255, 255, var(--hdr-op, .92)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .5s ease, box-shadow .5s ease, -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease; } .site-header-wrap.is-transparent :is(.site-brand, .site-brand-name) { color: var(--ink); } .site-header-wrap.is-transparent .site-brand-sub { color: var(--ink-soft); } .site-header-wrap.is-transparent .site-nav a, .site-header-wrap.is-transparent .site-nav a:hover, .site-header-wrap.is-transparent .site-nav a.active { color: var(--ink); } .site-header-wrap.is-transparent .site-burger span { background: var(--ink); } .site-header-wrap.is-transparent :is(.site-theme, .site-share-btn) { color: var(--ink); } /* scrolled → a bit more see-through (the content behind shimmers through more). */ .site-header-wrap.is-transparent.is-scrolled { background: rgba(255, 255, 255, var(--hdr-op-scrolled, .78)); box-shadow: 0 6px 22px rgba(0, 0, 0, .10); } /* dark mode: restore the dark frosted bar with light text. */ html.theme-dark .site-header-wrap.is-transparent { background: rgba(15, 20, 26, var(--hdr-op, .62)); } html.theme-dark .site-header-wrap.is-transparent :is(.site-brand, .site-brand-name) { color: #fff; } html.theme-dark .site-header-wrap.is-transparent .site-brand-sub { color: rgba(255, 255, 255, .85); } html.theme-dark .site-header-wrap.is-transparent .site-burger span { background: #fff; } html.theme-dark .site-header-wrap.is-transparent :is(.site-theme, .site-share-btn) { color: #fff; } html.theme-dark .site-header-wrap.is-transparent.is-scrolled { background: rgba(15, 20, 26, var(--hdr-op-scrolled, .72)); box-shadow: 0 6px 22px rgba(0, 0, 0, .18); } /* --- hero under an overlaying header --------------------------------------- The overlaying bar sits ON TOP of the first block: that block starts at y=0 and its top --header-h is behind the bar. Two things follow — the height that was set reads short (part of it is covered) and vertically centred content sits too high, because it centres in the WHOLE box while visitors only see the part below the bar. On a content-sized hero section it is worse than cosmetic: the headline can end up behind the header. So the first block grows by the header's height and pads the same amount back in. What survives is the VISIBLE hero: exactly the height that was set, content centred in what people actually see, background bleeding up behind the bar. The offset travels as an INHERITED custom property rather than through sibling selectors, because the first block is wrapped differently depending on context — bare on the public page, in a .fb-vis visibility wrapper when hide_on is set, in the editor's .fb-eb frame on the canvas, or both. Handing it down means the blocks themselves stay wrapper-agnostic and one rule covers every case. --header-h is 0 unless a header actually overlays (findd-public.js / builder.js publish it), so these rules are inert everywhere else — no gating class needed. The hook is .site-page — the element that HOLDS the blocks. Not .site-main: on the public page
wraps them in
, so the offset landed on that wrapper and inherited into EVERY section (52px padding became 204px, live only — the editor's canvas holds the blocks directly and looked right). Both shapes now carry .site-page, so a rule written once matches in both. */ .site-page > :first-child { --hero-offset: var(--header-h); } /* A container ends the inheritance of every value a section reads off itself. It already consumed them at this point, and a NESTED section must not pick them up: --hero-offset would offset a second time, and --fb-mh/--fb-pad would hand it the OUTER section's height/padding whenever its own class defines none — which is exactly the default case (`Mindesthöhe: Automatisch` renders .fb-mh-auto, a class with no rule). That is a real trap of moving these onto .fb-section: as long as min-height sat on .fb-mh-l itself it could not leak; as an inherited property it can. Every nested section sits in a .fb-container or a grid .fb-col. */ .fb-container, .fb-col { --hero-offset: 0px; --fb-mh: 0px; --fb-mh-grow: initial; --fb-pad: 0px; } /* …and say it outright where the markup already says it. */ .fb-mh-auto { --fb-mh: 0px; --fb-mh-grow: initial; } .site-header { /* --hpad is the bar's vertical padding; the menu items reach back through it (negative block margin below) so their top line meets the bar's edge. */ --hpad: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--maxw); margin: 0 auto; padding: var(--hpad) var(--gutter); } .site-header-end { display: flex; align-items: center; gap: 14px; } .site-brand { font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: .5px; } /* The site name is a link, so `.findd-site a:not(.fb-btn)` (0-2-1) beats the --ink above (0-1-0) and has always painted it in the brand colour — the rule two lines up never won a day in its life. Harmless while that colour WAS the brand colour; with an own link colour the company name in the header suddenly followed it (measured: the wordmark turned link-red). Pinned to what every live site renders today, at the same 0-2-1 so the transparent-header rules (0-3-0) still win. */ .findd-site a.site-brand { color: var(--c-primary); } /* Definite height (not just a max) so a logo with no intrinsic width — e.g. an SVG that carries only a viewBox — can derive its width from the aspect ratio. With `max-height` such an SVG resolves to 0 width and collapses .site-brand to 0×0 (it's a flex item). max-width + contain guard a very wide logo. */ .site-brand img { height: 46px; width: auto; max-width: 260px; object-fit: contain; } .site-nav { display: flex; flex-wrap: wrap; gap: 6px; } /* Menu items: no box behind them — a hairline primary-colour rule rides the top edge and, on hover/active, grows out from the centre to the item's full width (like the old TYPO3 #pagemenu). The label itself stays --ink (black in light mode, white in dark) — the line alone carries the accent. The item spans the bar's FULL height: it eats back into the header padding (negative block margin) and pays it back as padding, so the label doesn't move but the rule lands on the bar's very top edge — i.e. at the top of the window for a header sitting at the top of the page. Also enlarges the click target. Skipped for `centered`, whose menu is a second row, not the top edge. */ .site-nav a { position: relative; display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; padding: 10px 12px; cursor: pointer; } .site-header:not(.site-header--centered) :is(.site-header-end, .site-nav) { align-self: stretch; } .site-header:not(.site-header--centered) .site-nav a { /* stretched to the bar's content height, then pushed back out through its padding: border box = full bar, so ::before lands on the bar's top edge. */ margin-block: calc(-1 * var(--hpad)); padding-block: 0; } .site-nav a::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--c-primary); transition: width .25s ease; } /* The site-wide link colour (.findd-site a:not(.fb-btn), 0-2-1) outranks a bare .site-nav a (0-1-1) — match its specificity, or the menu goes primary again. */ .findd-site .site-nav a, .site-nav a:hover, .findd-site .site-nav a:hover, .site-nav a.active, .findd-site .site-nav a.active { color: var(--ink); } .site-nav a:hover::before, .site-nav a.active::before { width: 100%; } /* Icon-only call/contact button — same 40px square as share/theme, with which it now shares the .site-chrome group (see Header::ctaHtml). Primary-coloured so the one action a visitor came for still reads as the primary one. */ /* The :not(.fb-btn) is not decoration: the global link colour `.findd-site a:not(.fb-btn)` (0-2-1) outranks a plain .site-header-cta, so currentColor came out primary-on-primary and the handset was invisible. Matching its specificity (and sitting later in the file) is what wins. */ .findd-site .site-header-cta:not(.fb-btn) { color: #fff; } /* The header's call/mail button is a filled button too, so it wears the same gradient — transparent border and border-box origin for the same reasons as .fb-btn-primary (see the note there; without the origin the 1px ring shows the gradient repeated in the wrong colour). */ .site-header-cta { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; flex: none; border: 1px solid transparent; border-radius: var(--radius); background: var(--grad-brand); background-origin: border-box; } .site-header-cta svg { width: 19px; height: 19px; } .site-header-cta:hover { filter: brightness(.95); } /* hamburger toggle — hidden by default; shown on small screens once JS is active */ .site-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .site-burger span { display: block; width: 20px; height: 2px; border-radius: 6px; background: var(--ink); transition: transform .2s, opacity .2s; } .site-header.nav-open .site-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header.nav-open .site-burger span:nth-child(2) { opacity: 0; } .site-header.nav-open .site-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* variant: centered — logo on top, nav (and CTA) centered below */ .site-header--centered { flex-direction: column; gap: 10px; text-align: center; } .site-header--centered .site-nav { justify-content: center; } /* variant: minimal — slim bar, smaller logo */ .site-header--minimal { --hpad: 10px; } .site-header--minimal .site-brand { font-size: 19px; } .site-header--minimal .site-brand img { height: 36px; } /* variant: badge — slim single-row bar whose oversized round logo on the left overhangs below it (into the content/hero). For badge-shaped logos that need room; nods to the migrated TYPO3 look without a hero image. The logo IS the brand here — no company name beside it (the text only appears as a fallback when no logo is set). The negative bottom margin keeps the bar slim while the circle hangs below; --badge-size drives the circle. */ .site-header--badge { --hpad: 8px; overflow: visible; --badge-size: 112px; --badge-gap: 14px; } .site-header--badge .site-brand--badge { display: flex; align-items: center; gap: var(--badge-gap); text-decoration: none; overflow: visible; } .site-header--badge .site-badge { flex: 0 0 auto; width: var(--badge-size); height: var(--badge-size); border-radius: 50%; overflow: hidden; margin: 0 0 -68px; align-self: flex-start; position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; } /* No plate by default. The circle used to be filled with the primary colour no matter what, and badge logos almost always carry their own background — the fill then peeked out around the artwork as a coloured ring (measured: a badge PNG whose own circle sits at 92% of the canvas leaves a 4% ring; a wide logo gets bands above and below it from object-fit: contain). A cut-out logo is the one case that does need something behind it, so the plate is a header option ("Farbige Fläche hinter dem Logo") and stays out of the way until asked for. */ .site-header--badge.has-badge-plate .site-badge { background: var(--c-primary); } /* max-height:none overrides the generic .site-brand img cap (46px) — the badge nests inside .site-brand, so without this the logo stays tiny in the circle. */ .site-header--badge .site-badge img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; } .site-header--badge .site-brand-text { display: flex; flex-direction: column; gap: 1px; } .site-header--badge .site-brand-name { font-weight: 800; font-size: 20px; letter-spacing: .5px; color: var(--ink); line-height: 1.2; } .site-header--badge .site-brand-sub { color: var(--ink-soft); font-size: 14px; font-weight: 300; } /* option: utility bar above the header */ .site-utilitybar { background: var(--muted-bg); border-bottom: 1px solid var(--line); font-size: 13px; } .site-utilitybar-inner { max-width: var(--maxw); margin: 0 auto; padding: 6px var(--gutter); display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; align-items: center; color: var(--ink-soft); } /* Must out-specify the global link colour (.findd-site a:not(.fb-btn) = 0-2-1): as a plain .site-utilitybar-inner a (0-2-0) the phone number and mail address rendered primary-coloured and therefore never followed the theme — the same specificity trap the footer links and the nav items hit. They are text in a strip, not links to be spotted, so they look like the text beside them. */ .findd-site .site-utilitybar-inner a:not(.fb-btn) { color: var(--ink-soft); text-decoration: none; } .findd-site .site-utilitybar-inner a:not(.fb-btn):hover { color: var(--ink); } .site-main { min-height: 50vh; } /* Announcement bar — one time-limited sentence above everything, in the brand colour so it reads as the site speaking, not as a system message. Sits inside the header wrapper, so it scrolls away with a sticky bar and stays above a transparent one. */ /* --ann-bg/--ann-ink are set inline by Header::announceHtml only when the customer picked a colour; unset, the fallbacks ARE the previous hard-coded values, so a site that never touches this renders exactly as before. */ .site-announce { background: var(--ann-bg, var(--c-primary)); color: var(--ann-ink, #fff); font-size: 14px; } .site-announce-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: center; text-align: center; } /* Same specificity trap as the footer and the utility bar: a bare .site-announce a (0-2-0) loses to .findd-site a:not(.fb-btn) (0-2-1) and the link would render in the primary colour ON the primary colour — invisible. */ .findd-site .site-announce-link:not(.fb-btn) { color: var(--ann-ink, #fff); text-decoration: underline; font-weight: 600; } .findd-site .site-announce-link:not(.fb-btn):hover { opacity: .85; } .site-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 22px var(--gutter); background: var(--muted-bg); } /* Everything on one line — company, contact, legal, credit; wraps only when the viewport is narrower than the line. */ .site-footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ink-soft); font-size: 14px; } /* Footer links read as text, not as links: no underline, same colour as the unlinked text next to them. :not(.fb-btn) is needed to out-specify the site-wide link colour (.findd-site a:not(.fb-btn), 0-2-1) — a plain .site-footer a would lose and stay primary-coloured. */ .findd-site .site-footer a:not(.fb-btn) { color: var(--ink-soft); text-decoration: none; } .findd-site .site-footer a:not(.fb-btn):hover { color: var(--ink); } /* The tenant logo no longer renders down here (02.09.2026) — the mark belongs in the header, the footer carries the name in words. Only the findd mark is left, and it always inverts in dark mode: it is our own dark drawing. */ html.theme-dark .findd-site .site-footer-mark { filter: grayscale(1) invert(1); } .site-footer-credit { margin-left: auto; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } /* Scoped to .findd-site: the generic `.findd-site img { height: auto }` (0-1-1) would otherwise out-specify a bare .site-footer-mark and blow the mark up to its intrinsic size. */ .findd-site .site-footer-mark { height: 15px; width: auto; filter: grayscale(1); opacity: .7; } /* Footer variant "columns" — the multi-column shape. The legal row keeps the one-line look underneath, so the two variants share their vocabulary. */ .site-footer--columns { padding-top: 34px; padding-bottom: 18px; } .site-footer-cols { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); color: var(--ink-soft); font-size: 14px; } .site-footer-name { font-weight: 700; color: var(--ink); margin-bottom: 4px; } .site-footer-cols address { font-style: normal; line-height: 1.6; } .site-footer-head { font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .site-footer-head.mt { margin-top: 16px; } .site-footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; line-height: 1.5; } .site-footer-today { margin: 0; } /* The legal row: same rules as the single-line variant, one border above it. */ .site-footer-legal { max-width: var(--maxw); margin: 26px auto 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ink-soft); font-size: 14px; } .site-footer--columns .site-footer-credit { margin-left: auto; } @media (max-width: 600px) { .site-footer-cols { gap: 22px; } } .site-page { } /* Headings may use their own family. --font-head is emitted by SiteSettings::cssVars ONLY when a heading font was picked, so the fallback here is what "same as body text" means — one place decides it. */ /* The weight rides along on the same selector, and the fallback IS the browser's own default for a heading — so a site that never picks one renders byte for byte as before. `.findd-site :is(h1…)` is 0-1-1, which beats a single-class rule on a heading (.fb-pay-grouptitle is the only one), and that is deliberate: the setting says "headings", so it has to reach all of them. */ .findd-site :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-head, var(--font-body)); font-weight: var(--font-head-weight, 700); } .site-empty, .site-404 { max-width: var(--maxw); margin: 80px auto; padding: 0 var(--gutter); text-align: center; color: var(--ink-soft); } /* Suggestions on the 404 page. Prefixed with .findd-site so the link colour does not lose to the global .findd-site a:not(.fb-btn) rule (0-2-1). */ .site-404-links { margin: 28px auto; } .site-404-lead { margin: 0 0 10px; font-size: .95rem; } .site-404-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; } .findd-site .site-404-links a:not(.fb-btn) { color: var(--ink); font-weight: 600; } .findd-site .site-404-links a:not(.fb-btn):hover { color: var(--c-primary); } /* --- containers ----------------------------------------------------------- */ /* per-device visibility (B2): wrapper contributes no box, only toggles display */ .fb-vis { display: contents; } @media (max-width: 600px) { .fb-hide-mobile { display: none !important; } } @media (min-width: 901px) { .fb-hide-desktop { display: none !important; } } /* Padding and min-height travel as custom properties so --hero-offset (see "hero under an overlaying header") can be added without repeating the constants. It is 0 for every section but a hero the header overlays. */ .fb-section { width: 100%; position: relative; padding-top: calc(var(--fb-pad, 0px) + var(--hero-offset, 0px)); padding-bottom: var(--fb-pad, 0px); min-height: calc(var(--fb-mh, 0px) + var(--fb-mh-grow, var(--hero-offset, 0px))); } /* Section background photo — same reasoning as .fb-slide-img (srcset needs an ), and the same two traps: the `.findd-site` prefix is required or `.findd-site img { height: auto }` wins and the image collapses to 0, and the overlay has to be lifted above it — that lift lives in the shared .fb-ov-* rule below, NOT here; see the note there for why a copy of it up here was dead. The container sits at z-index 2. */ .findd-site .fb-section-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .fb-section .fb-container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } .fb-w-full .fb-container { max-width: none; } /* "Reduzierte Breite" — 2/3 of the section's normal cap, the reading measure for a text-only section. Both rules are 0-2-0, exactly like .fb-section .fb-container above, so they win on ORDER alone and have to stay below it (see the .fb-ov-* note). 2/3 of --maxw, not of the content box: --maxw is what the customer sets as "Inhaltsbreite", so the reduced section is two thirds of the thing they chose; the gutter is unchanged, so the visible text is 65% of the normal one. No media query — below 747px the cap stops binding and the section is contained again. */ .fb-w-narrow .fb-container { max-width: calc(var(--maxw) * 2 / 3); } .fb-pad-s { --fb-pad: 24px; } .fb-pad-m { --fb-pad: 52px; } .fb-pad-l { --fb-pad: 90px; } /* Even section padding: a section's top/bottom edge spacing must come SOLELY from its own padding. A block's vertical margin is meant for spacing to its siblings; at the very top/bottom of a section it would stack on top of the section padding and make it look uneven (e.g. a heading's leading, or a trailing grid's margin-bottom). So collapse the first child's top margin and the last child's bottom margin — unwrapping the display:contents visibility wrapper. Spacing BETWEEN blocks (heading → content, etc.) is untouched. */ .fb-container > :first-child, .fb-container > .fb-vis:first-child > * { margin-top: 0; } .fb-container > :last-child, .fb-container > .fb-vis:last-child > * { margin-bottom: 0; } /* Many self-boxing blocks (contact, payment, docs, catalog …) wrap an inner headline/element whose default margin would collapse OUT through the padding- less block+container and stack onto the section padding — so the block's own margin being 0 isn't enough. Also zero the inner edge margin of the section's first and last block (one level down, incl. the display:contents wrapper). Scoped to .fb-container so bare (non-section) blocks keep this inner margin as their inter-block spacing. */ .fb-container > :first-child > :first-child, .fb-container > .fb-vis:first-child > * > :first-child { margin-top: 0; } .fb-container > :last-child > :last-child, .fb-container > .fb-vis:last-child > * > :last-child { margin-bottom: 0; } .fb-bg-muted { background: var(--muted-bg); } .fb-bg-primary { background: var(--c-primary); color: #fff; } .fb-bg-primary .fb-heading { color: #fff; } .fb-bg-gradient { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); color: #fff; } .fb-bg-gradient .fb-heading { color: #fff; } /* Links follow the light text on coloured backgrounds. Scoped with .findd-site + :not(.fb-btn) so this out-specifies the base link colour (.findd-site a) — without the extra class it loses on specificity and links stay primary-coloured. */ .findd-site .fb-bg-primary a:not(.fb-btn), .findd-site .fb-bg-gradient a:not(.fb-btn) { color: #fff; } /* section: background image + overlay. The image itself is a positioned (.fb-section-img) since srcset needs one — the old .fb-bg-image sizing rule had nothing left to size and is gone; the class stays only as a state marker. ONE rule for all three, the lift included. It used to be this block with `z-index: 0` plus three separate `z-index: 1` lifts — and the SECTION's lift stood BEFORE this block. Same specificity (0-2-1: class + attribute selector + pseudo-element), so the later rule won and the section's scrim stayed at 0, tied with its own ; a tie is settled by DOM order, and the ::before is the FIRST child while the comes after it — the photo painted over the scrim. The result: "Überlagerung" did nothing on any section with a background image, while slide and teaser (whose lifts stand after this block) were fine. That is Falle 1 in its equal-specificity form, and it stayed invisible because the two working cases looked like proof that the mechanism worked. All three stack identically anyway — image 0 · scrim 1 · content 2 (.fb-container / .fb-slide-wrap / .fb-teaser-body) — so there is nothing for a per-block lift to say. Absolutely positioned so the scrim stays out of flow and never becomes a grid item of its own (which would open a second teaser row). */ .fb-section[class*="fb-ov-"]::before, .fb-teaser[class*="fb-ov-"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; } .fb-ov-light::before { opacity: .25; } .fb-ov-medium::before { opacity: .45; } .fb-ov-strong::before { opacity: .65; } /* section: explicit text theme (e.g. custom colour → light/dark). The link rules carry .findd-site + :not(.fb-btn) so they out-specify the base link colour. */ .fb-text-light, .fb-text-light .fb-heading { color: #fff; } .fb-text-dark, .fb-text-dark .fb-heading { color: var(--ink); } .findd-site .fb-text-light a:not(.fb-btn) { color: #fff; } .findd-site .fb-text-dark a:not(.fb-btn) { color: var(--ink); } /* section: min-height (content vertically centered when set) */ .fb-mh-s, .fb-mh-m, .fb-mh-l, .fb-mh-screen { display: flex; flex-direction: column; justify-content: center; } .fb-mh-s { --fb-mh: 320px; } .fb-mh-m { --fb-mh: 480px; } .fb-mh-l { --fb-mh: 640px; } /* One screen stays one screen: a full-height hero must not grow by the header's height (the header is inside the viewport), it only pushes its content down. */ .fb-mh-screen { --fb-mh: 100vh; --fb-mh-grow: 0px; } .fb-grid { display: flex; flex-wrap: wrap; gap: 24px; max-width: var(--maxw); margin: 24px auto; padding: 0 var(--gutter); } /* 220px is not a cosmetic minimum, it IS the wrap mechanism: with flex-wrap a column that would fall below it moves to the next line, which is how every grid becomes single-column on a phone without a media query. */ .fb-grid .fb-col { min-width: 220px; } /* …but that floor also silently swallowed a dragged ratio: on a 620px canvas the splits 30, 17 and 10 all rendered 220/332 — the handle moved, the boundary did not (measured, that was the report). A dragged ratio is an explicit instruction, so above the stacking width the floor gives way. `auto`, not `0`: that is the flex default (≈ min-content), so the column shrinks to what its content really needs and the content can never overflow the column — it wraps instead, which is visible in the editor while dragging. Below 700px the floor wins again and the columns stack, exactly as for every other grid. Three classes so this beats the rule above on specificity and not merely on source order. */ @media (min-width: 700px) { .fb-grid.fb-grid--split > .fb-col { min-width: auto; } } /* Nesting reset — the horizontal gutter (and max-width cap) must be applied only ONCE, at the outermost content level. Self-boxing blocks carry their own gutter so they align when dropped directly on the page; but inside a section (.fb-container) or a grid column (.fb-col) the parent already provides the box, so here they drop the gutter + cap and fill the parent. Without this a block in a section sits at 44px (22 + 22) while a plain heading beside it sits at 22px. */ .fb-container :is( .fb-grid, .fb-stats, .fb-pricing, .fb-booking, .fb-socials, .fb-divider, .fb-gallery, .fb-team, .fb-testimonials, .fb-partners, .fb-video, .fb-videos, .fb-contact, .fb-opening, .fb-map, .fb-catalog, .fb-docs, .fb-pay), .fb-slide-inner :is( .fb-grid, .fb-stats, .fb-pricing, .fb-booking, .fb-socials, .fb-divider, .fb-gallery, .fb-team, .fb-testimonials, .fb-partners, .fb-video, .fb-videos, .fb-contact, .fb-opening, .fb-map, .fb-catalog, .fb-docs, .fb-pay), .fb-col :is( .fb-grid, .fb-stats, .fb-pricing, .fb-booking, .fb-socials, .fb-divider, .fb-gallery, .fb-team, .fb-testimonials, .fb-partners, .fb-video, .fb-videos, .fb-contact, .fb-opening, .fb-map, .fb-catalog, .fb-docs, .fb-pay) { max-width: none; margin-inline: 0; padding-inline: 0; } /* Narrow-measure blocks (readability width) stay centered when nested, but must not double up the gutter. */ .fb-container :is(.fb-faq, .fb-form-wrap, .fb-form-result), .fb-slide-inner :is(.fb-faq, .fb-form-wrap, .fb-form-result), .fb-col :is(.fb-faq, .fb-form-wrap, .fb-form-result) { padding-inline: 0; } /* A section nested inside a column shouldn't re-pad its own container. */ .fb-col > .fb-section .fb-container { padding-inline: 0; } /* "Bare" content blocks (heading/text/image/button/teaser) carry no box of their own — inside a section/column the parent boxes them, but placed directly on the page they'd run edge-to-edge and misalign with self-boxing blocks. Give them the same canonical box there. (.fb-vis = optional display:contents visibility wrap.) Keyed off .site-page, the element that HOLDS the blocks — as .site-main it never matched on the public page at all, where
wraps them in an
. */ .site-page > :is(.fb-heading, .fb-text, .fb-btn-wrap, .fb-image, .fb-teaser), .site-page > .fb-vis > :is(.fb-heading, .fb-text, .fb-btn-wrap, .fb-image, .fb-teaser) { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* The teaser is the exception in that list: it DRAWS a card (border, background), so the gutter as padding puts the card EDGE on the frame edge, while every self-boxing block next to it insets its visible box by one gutter — measured against the big Events box: 1120 vs 1076, i.e. the card sticking out 22px on each side. Inset the box itself instead. The width pair is load-bearing: the max-width alone stops centring below --maxw, where the box would then run edge-to-edge. */ .site-page > .fb-teaser, .site-page > .fb-vis > .fb-teaser { padding-inline: 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); } /* --- basic content -------------------------------------------------------- */ .fb-heading { margin: 0 0 .4em; line-height: 1.2; } /* Widget headline + subline — ONE rule for every widget (every widget template renders .fb-wtitle / .fb-wsub). Before, the titles were bare

with the UA margins and each block brought its own subline class, so the pair drifted per block (measured: 27px gap in the catalog widgets, 23 in the video block, 9 in the payment block) and a later, more specific rule (.fb-cat-feature > h2) silently overrode a shared one. Change the gap here and it changes everywhere. The top margin is spelled out rather than inherited from the UA: it is what spaces a free-standing widget from the block above (.fb-container collapses it away inside a section). The subline runs in the normal ink, not a soft grey: the hand-built twin of this pair is a heading block + a text block (see below), and a text block is body copy in --ink — a greyed widget subline made the two arrangements read differently. */ .fb-wtitle { font-size: 1.5rem; line-height: 1.2; margin: .83em 0 .2em; } .fb-wsub { margin: 0 0 1rem; } /* The tight .2em is the PAIR gap — it belongs to a subline sitting right under the title. With no subline (most widgets have none) it became the gap to the content itself and the headline sat on top of the first row. Then the title has to carry the subline's bottom spacing instead, so the distance from the header unit to the content is the same either way. */ .fb-wtitle:not(:has(+ .fb-wsub)) { margin-bottom: 1rem; } /* One ratio for the whole scale: 1.2 per step — 1.25rem → 1.5rem → 1.8rem (20 / 24 / 28.8px at the default root size). The h1 was clamp(28px, 4vw, 44px) and grew to 1.83x the h2 on a wide screen: a display size, not a headline, on a page whose body copy is 16px. The clamp goes with it — its floor was 28px, so phones see 0.8px more than before and nothing else moves. In rem (h3 was a bare 20px) so the step survives a reader who runs a larger root font size; h2 was already rem, and next to it the px h3 collapsed the scale to 1.5 : 1 on such a setup. */ h1.fb-heading { font-size: 1.8rem; } h2.fb-heading { font-size: 1.5rem; } h3.fb-heading { font-size: 1.25rem; } /* A block's own text alignment. `left` needs a REAL rule, not just "no class": inside a slide the surrounding text-align is the slider's setting (centre by default), so a block whose dropdown said "Links" inherited that and rendered centred — the field lied, and of its three options the DEFAULT was the one that did nothing. Everywhere else this rule changes nothing, because text-align inherits left there anyway; that is exactly why it stayed invisible (Falle 1 — a rule that never runs against its counterpart). The class is emitted only when the editor picked a direction; unset means "wie im Umfeld", i.e. inherit, which is what keeps the slider's own control working for untouched blocks. */ .fb-align-left { text-align: left; } .fb-align-center { text-align: center; } .fb-align-right { text-align: right; } .fb-text { margin: 0 0 1em; } /* Rich text may or may not wrap its first line in a

(the RTE only creates paragraphs once the editor pressed Enter / pasted markup). A leading

's top margin collapses out of the block and shoves it down — two text blocks side by side in a grid then start on different lines. Edge spacing belongs to the block, not to its content, so neutralize the outer margins of the content. */ .fb-text > :first-child { margin-top: 0; } .fb-text > :last-child { margin-bottom: 0; } .fb-text :is(h2,h3) { margin-top: 0; } .fb-text :is(ul,ol) { margin: .5em 0; padding-left: 1.5em; } .fb-text li { margin: .2em 0; } /* The underline is what this rule is for; the colour loses to the global link rule (0-1-1 vs 0-2-1) and is kept in step so raising this selector's specificity later cannot silently undo the link colour. */ .fb-text a { color: var(--c-link, var(--c-primary)); text-decoration: underline; } .fb-text blockquote { margin: .6em 0; padding-left: 1em; border-left: 3px solid var(--line); color: var(--ink-soft); } /* "Widget-like" intro built by hand: a heading block + a text block above the actual content (grid, FAQ, stats …) is the same arrangement a widget renders as .fb-wtitle + .fb-wsub + content, so it gets the same rhythm — measured before: 13.4px under the heading and 27.6px before the content, vs the widget's 8.6 / 19.6. The heading tightens to the widget's .2em, and the content block drops its own 24px top margin to the widget's 1rem. Only when the blocks are actually adjacent (an intro, not two unrelated blocks that happen to follow each other). .fb-vis is the optional display:contents visibility wrapper (hide_on) and sits between the siblings, so every rule needs the variant that reaches through it. */ .fb-heading:has(+ .fb-text), .fb-heading:has(+ .fb-vis > .fb-text), .fb-vis:has(+ .fb-text) > .fb-heading, .fb-vis:has(+ .fb-vis > .fb-text) > .fb-heading { margin-bottom: .2em; } :is(.fb-text, .fb-vis:has(> .fb-text)) + :is(.fb-grid, .fb-faq, .fb-stats, .fb-pricing, .fb-booking, .fb-form-wrap), :is(.fb-text, .fb-vis:has(> .fb-text)) + .fb-vis > :is(.fb-grid, .fb-faq, .fb-stats, .fb-pricing, .fb-booking, .fb-form-wrap) { margin-top: 1rem; } .fb-image { margin: 0; } .fb-image img { border-radius: var(--radius); width: 100%; } .fb-image figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 6px; } .fb-btn-wrap { margin: 8px 0; } .fb-btn { display: inline-block; text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: var(--radius); cursor: pointer; border: 2px solid var(--c-primary); /* A