/* =========================================================================== max-f it solutions — Website-Feinschliff über dem Baukasten (cms-blocks.css) --------------------------------------------------------------------------- Dunkle Sektionen tragen im Baukasten ein fest verdrahtetes TeamHUB/MyKI-Motiv (Anruf → TeamHUB-Bildmarke → MyKI-Orbit). Auf max-f.de ist das fremdes Branding und muss überall weg. Zwei Stufen: 1) Grundregel: nur die beiden Verlaufs-Ebenen. Die müssen mitkopiert werden, sonst verliert die Sektion ihren Grund und die Schrift ihren Kontrast. 2) Sektionen OHNE Split-Hero bekommen zusätzlich ein eigenes Infrastruktur- Schema (Rathaus/Kanzlei/Werkstatt → Netzwerk → Rechenzentrum → Dienste). Wo ein Split-Hero steht, trägt die Betriebsübersicht daneben das Bild — dort wäre das Schema nur Unruhe hinter dem Text. Höhere Spezifität als der Baukasten (body davor), damit die Ladereihenfolge keine Rolle spielt: das Seiten-CSS steht im VOR cms-blocks.css. =========================================================================== */ body .cms-section.cms-bg-inverse { background-image: radial-gradient(1100px 500px at 82% -12%, color-mix(in srgb, var(--cms-primary) 26%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--cms-primary) 14%, var(--cms-bg-inverse)) 0%, var(--cms-bg-inverse) 48%, color-mix(in srgb, #000000 22%, var(--cms-bg-inverse)) 100%); background-size: auto, auto; background-position: center, center; background-repeat: no-repeat; } body .cms-section.cms-bg-inverse:not(:has(> .cms-hero-split)):not(:has(> .cms-canvas-block > .cms-hero-split)) { background-image: url("/Data/Pages/Files/01ddc465-a316-462a-a1c7-117a64e9095a/maxf-hero.svg"), radial-gradient(1100px 500px at 82% -12%, color-mix(in srgb, var(--cms-primary) 26%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--cms-primary) 14%, var(--cms-bg-inverse)) 0%, var(--cms-bg-inverse) 48%, color-mix(in srgb, #000000 22%, var(--cms-bg-inverse)) 100%); background-size: auto 78%, auto, auto; background-position: calc(50% + 215px) center, center, center; } /* Der Lichtstrahl über dunklen Sektionen lief auf Hellblau (#7fd0ff) — auf die Leitfarbe gezogen. */ body .cms-section.cms-bg-inverse::after { background: linear-gradient(112deg, transparent 30%, color-mix(in srgb, var(--cms-primary) 30%, transparent) 45%, color-mix(in srgb, #ff9d76 18%, transparent) 53%, transparent 70%); } /* Die Betriebsübersicht neben dem Split-Hero bringt ihre eigene Fassung mit — der Bild-Block soll keine zweite darüberlegen. */ body .cms-section.cms-bg-inverse .cms-image { margin: 0; } body .cms-section.cms-bg-inverse .cms-image img { width: 100%; height: auto; max-width: 560px; border-radius: 0; } /* Schmale Viewports: Das Schema würde hinter der Schrift kleben — ausblenden, die Verläufe tragen die Fläche allein. Die Betriebsübersicht rutscht unter den Text und bleibt sichtbar. */ @media (max-width: 900px) { body .cms-section.cms-bg-inverse:not(:has(> .cms-hero-split)):not(:has(> .cms-canvas-block > .cms-hero-split)) { background-image: radial-gradient(1100px 500px at 82% -12%, color-mix(in srgb, var(--cms-primary) 26%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--cms-primary) 14%, var(--cms-bg-inverse)) 0%, var(--cms-bg-inverse) 48%, color-mix(in srgb, #000000 22%, var(--cms-bg-inverse)) 100%); background-size: auto, auto; background-position: center, center; } body .cms-section.cms-bg-inverse .cms-image img { max-width: 100%; } } /* Split-Hero: Der Kernsatz ist lang und soll als Satz lesbar bleiben, nicht als Wortkolonne. Textspalte breiter als die Betriebsübersicht (56/44 statt 50/50) und die H1 im Split eine Stufe kleiner — sonst bricht sie auf sechs Zeilen. */ body .cms-section:has(> .cms-hero-split), body .cms-section:has(> .cms-canvas-block > .cms-hero-split) { grid-template-columns: minmax(0, calc(var(--cms-split-max, var(--cms-max-wide)) * 0.57)) minmax(0, calc(var(--cms-split-max, var(--cms-max-wide)) * 0.43)); } body .cms-hero-split h1 { font-size: clamp(2rem, 3.5vw, 3.15rem); } @media (max-width: 900px) { body .cms-section:has(> .cms-hero-split), body .cms-section:has(> .cms-canvas-block > .cms-hero-split) { grid-template-columns: minmax(0, 1fr); } } /* Wer Animationen abgeschaltet hat, bekommt dasselbe Schema ohne die Datenfluss-Impulse. SMIL im Hintergrundbild lässt sich nicht per Media Query anhalten — deshalb eine zweite, bewegungsfreie Datei. */ @media (prefers-reduced-motion: reduce) { body .cms-section.cms-bg-inverse:not(:has(> .cms-hero-split)):not(:has(> .cms-canvas-block > .cms-hero-split)) { background-image: url("/Data/Pages/Files/01ddc465-a316-462a-a1c7-117a64e9095a/maxf-hero-static.svg"), radial-gradient(1100px 500px at 82% -12%, color-mix(in srgb, var(--cms-primary) 26%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--cms-primary) 14%, var(--cms-bg-inverse)) 0%, var(--cms-bg-inverse) 48%, color-mix(in srgb, #000000 22%, var(--cms-bg-inverse)) 100%); } } /* Wortmarke: Die Datei ist 600×198 (3:1). Der Baukasten gibt Breite UND Höhe fest vor, dadurch wurde sie im Menü auf 160×36 gequetscht (4,4:1). Breite freigeben, Seitenverhältnis erzwingen. */ body .cms-menu-brand img, body .cms-footer-brand img, body footer .cms-footer-logo-light, body footer .cms-footer-logo-dark { width: auto !important; object-fit: contain; } body .cms-menu-brand img { height: 36px; max-width: 200px; } body .cms-footer-brand img, body footer .cms-footer-logo-light, body footer .cms-footer-logo-dark { height: 40px; max-width: 220px; } /* Barrierefreiheit: Die Menü-Links standen auf der gedämpften Textfarbe und kamen damit nur auf 3,71:1 gegen den weißen Kopf — WCAG AA verlangt 4,5:1 für Fließtext. Über color-mix gegen die Textfarbe bleibt der Ton themefähig (hell wie dunkel). */ body .cms-menu-link { color: color-mix(in srgb, var(--cms-text) 88%, var(--cms-bg-surface)); } body .cms-menu-link:hover, body .cms-menu-link:focus-visible { color: var(--cms-primary); } /* Abschnitts-Abstände: Die markante Handschrift setzt --cms-section-pad auf 6,4rem, also 102 px oben UND unten — zwischen zwei Abschnitten stehen damit über 200 px Weißraum. Auf Seiten mit sechs bis zehn Abschnitten wird daraus eine Diaschau, bei der man ständig scrollt, ohne Text zu sehen. Über die Variable statt über .cms-section selbst, damit die Trennlinien-Logik und die Theme-Fallbacks unberührt bleiben. Gesetzt wird sie auf dem Abschnitt SELBST, nicht auf body: das Theme schreibt seinen Wert in einen