/* ============================================================ superfeed-refresh.css · Safe Refresh Layer ------------------------------------------------------------ Wird NACH dem Webflow-Stylesheet geladen und überschreibt nur gezielt Typografie, Schriftgewichte, Tracking und das Farb- band-System. Voll reversibel: diese Datei aus den s entfernen -> exakt der Originalzustand. Reihenfolge der Blöcke = Reihenfolge der Design-Fixes. ============================================================ */ /* ------------------------------------------------------------ 1) ExtraLight (Weight 200) raus · der eigentliche Kontrast-Fix Die Feature-Bullets und die Leistungsliste waren in Archivo ExtraLight bei ~15px gesetzt -> wirkte dünn/„ausgewaschen". 400 macht sie klar lesbar (und entfernt den 200er-Schnitt). ------------------------------------------------------------ */ .highlight, .highlight.list, .highlight.list.bottom { font-weight: 400; } /* ------------------------------------------------------------ 2) Überschriften „erden" · der eigentliche „hängt komisch"-Fix Die Sektionstitel (.headline2) hatten line-height 1.5 – also Fließtext-Zeilenabstand auf einer Überschrift. Dadurch eine viel zu hohe Zeilenbox -> die Headline „schwebt". Jetzt eng gesetzt plus leicht negatives Tracking = kompakter, bewusster Auftritt. ------------------------------------------------------------ */ .headlinehero { /* nur leicht enger getrackt – KEINE line-height-Änderung: das große "SUPERFEED" (160px) lief sonst unten aus seinem Creme-Band heraus aufs Bild-Grid. */ letter-spacing: -0.01em; } .headline2 { font-size: clamp(30px, 3.4vw, 44px); /* war ~33px – mehr Präsenz, klare Hierarchie */ font-weight: 500; /* war 600 – löst die Gewichts-Inversion (kein Untertitel schwerer als die größeren Claims) */ line-height: 1.1; letter-spacing: -0.015em; } .claim { font-weight: 500; /* war 400 -> etwas mehr Substanz */ letter-spacing: -0.02em; line-height: 1.04; } .claim.about { font-weight: 500; letter-spacing: -0.015em; line-height: 1.06; } /* Fließtext & Bullets: die zu lose Laufweite (+0.04em) raus. Das nimmt das „auseinandergezogene" Gefühl. */ .paragraph, .highlight, .highlight.list, .caption, .caseinfo { letter-spacing: 0; } .highlight { font-size: 15px; /* Textgrößen-Tier zusammenführen (war 15.2) */ line-height: 1.5; /* an Body-Rhythmus angeglichen */ } /* ------------------------------------------------------------ 3) Eyebrows & Buttons als echte Signposts Uppercase-Labels brauchen mehr Tracking, um zu funktionieren. ------------------------------------------------------------ */ .navflowtitle { letter-spacing: 0.10em; } .ctacontactbuttontext, .submit-button { letter-spacing: 0.08em; font-weight: 600; /* Submit war 500 -> auf 600 (500 entfällt) */ } /* ------------------------------------------------------------ 3b) Weißraum in den Feature-Bullets straffen Row-Gap war ~32px -> die Stichpunkte „schwebten". Kompakter gruppiert wirken sie als zusammengehörige Liste, nicht verstreut. ------------------------------------------------------------ */ .highlightgrid { row-gap: 24px; column-gap: 32px; } /* ------------------------------------------------------------ 4) Footer-Grau abdunkeln · echter Kontrast Adresse und Copyright waren in echtem Grau (#58585a / 60%). ------------------------------------------------------------ */ .text-block-15-copy { color: #2b2b2c; } .text-block-16 { color: rgba(43, 43, 44, 0.72); } /* ------------------------------------------------------------ 5) Formularfelder & Labels etwas größer/lesbarer (Vollständiges Form-Restyling kommt mit dem PHP-Endpoint.) ------------------------------------------------------------ */ .paragraph.form { font-size: 15px; } .text-field.w-input, .text-field-2.w-input, .textarea.w-input { font-size: 16px; /* verhindert iOS-Zoom beim Fokus */ } /* ------------------------------------------------------------ 6) Farbband-System: bleibt beim Original (Warmtöne + Dunkelgraus). (Vereinheitlichung auf Wunsch zurückgenommen.) ------------------------------------------------------------ */ /* ------------------------------------------------------------ 8) Über-uns-Bereich: Sidebar-Labels „einfangen" Das Grid hatte eine 389px breite Label-Spalte -> zwischen Label („Unsere Leistungen"/„Referenzen") und Inhalt klaffte ~260px Leere -> die Seite „fiel auseinander". Schmalere Label-Spalte rückt das Label an den Inhalt; Textmaß bleibt begrenzt. ------------------------------------------------------------ */ /* Schmalere Label-Spalte nur ab Tablet aufwärts – Webflows Mobile- Layout (gestapelt, 1 Spalte) bleibt unangetastet. 176px statt 236px: Sidebar bleibt, aber der Fließtext rückt näher an die linke Seitenkante -> Drift zum Rest der Seite gemildert. */ @media (min-width: 768px) { .websitegrid { grid-template-columns: 192px 1fr; /* schmal genug für weniger Drift, breit genug dass die Namen (167px) und „Unsere Leistungen" (164px) nicht umbrechen */ column-gap: 24px; } } /* Team-Namen (Eigennamen) nie mitten im Namen umbrechen. Nur die Namen (strong.semibold), nicht der Fließtext. */ .websitegrid strong.semibold { white-space: nowrap; } /* Sidebar-Labels als saubere Overlines statt schwebender Mini-Headlines */ .bold-text, .bold-text-2 { text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.10em; color: #4a4a4c; line-height: 1.3; } /* Fließtext-Maß begrenzen, damit die breitere Spalte den Lesefluss nicht auseinanderzieht (ideal ~60-75 Zeichen). */ .caseinfo.about .paragraph { max-width: 56ch; /* näher am Case-Body-Maß -> ein Lesemaß über die ganze Seite */ } /* ------------------------------------------------------------ 10) Case-Sektionen: Titel-Präsenz, Textmaß & Rhythmus - Titel .headline2 größer (siehe Block 2) + näher am Inhalt - Textspalte war 356px (~30 Zeichen, hakelig) -> breiter - Bullet-Spalten fix 274px -> flexibel (1fr), damit sie in die schmalere Spalte passen ------------------------------------------------------------ */ .casetitlecontainer { margin-bottom: 22px; /* war ~38px – Titel näher an seinen Inhalt */ } @media (min-width: 768px) { .casetext { width: 44%; margin-right: 4%; } .casehighlight{ width: 52%; } .highlightgrid{ grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------ 11) Footer/Kontakt bündig zum Rest Die meisten Sektionen sind width:100vw (bis unter die Scrollbar), Footer- und Kontakt-Sektion aber width:100% -> ~15px schmaler -> deren Inhalt saß nach links verschoben. Angleichen = bündig. ------------------------------------------------------------ */ .footersection, .contactsection { width: 100%; /* war 100vw -> zentrierte Inhalte lagen 100vw-zentriert (rechts versetzt) statt auf der 100%-Flucht der Cases; 100% = eine Kante. Full-Bleed bleibt: die Sektion endet exakt an der Scrollbar. */ } /* ------------------------------------------------------------ 12) Harmonisierung (Typografen-Review) ------------------------------------------------------------ */ /* Section-Eyebrows von 22px -> 14px. Bei 22px kollidierten sie mit den 13px-Overlines („ÜBER UNS" fast so groß wie eine Headline, direkt über einem 13px-„UNSERE LEISTUNGEN"). Jetzt eine klare 2-Stufen-Label-Logik: Eyebrow 14px near-black, Overline 13px grau. Nur statische Eyebrows – die animierten Hero-Track-Titel (.hero) bleiben unangetastet. */ .navflowtitle:not(.hero) { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #191919; } /* Leistungsliste 19px -> 18px = gleiches Maß wie Body (war größer als der Fließtext daneben -> Liste „überschrie" die Prosa). */ .highlight.list, .highlight.list.bottom { font-size: 18px; line-height: 1.5; } /* Sekundär-Grau vereinheitlichen: EIN grauer Ton für alle Sekundär-Labels statt zweier fast identischer (#4a4a4c vs #58585a). Ergibt mit den near-black Eyebrows eine saubere 2-Stufen-Tonleiter. */ .bold-text, .bold-text-2, .footernav { color: #4a4a4c; } /* ------------------------------------------------------------ 14) Hero: CTA-Button + „Mehr erfahren"-Scrollhinweis entfernt (auf Wunsch – räumt den Übergang zum Claim auf, weniger Leerraum- Clutter). Reversibel: diesen Block löschen bringt beide zurück. Kontaktweg bleibt über Nav-„KONTAKT" und das Formular unten. ------------------------------------------------------------ */ .ctacontainer { display: none; } /* ------------------------------------------------------------ 13) Kundenlogos nicht verzerren Die Slide-Grafiken (Seitenverhältnis ~2.55) wurden per object-fit:fill in eine breitere Box gezwängt -> horizontal gestreckt. contain hält das Seitenverhältnis (undeformiert, zentriert). Betrifft nur die Referenzen-Slider. ------------------------------------------------------------ */ .clientcontainer img { object-fit: contain; object-position: center; } /* ------------------------------------------------------------ 15) Hero: SUPER / FEED gestapelt, irisierend-glasig über den Kacheln - zweizeilig (SUPER
FEED) + groß -> füllt die Bildfläche - vertikal zentriert; Creme-Band hinter dem Titel entfernt (Grid scheint durch), Grid bleibt VOLL bunt (kein globales Abdunkeln) - irisierender Pastell-Verlauf in den Buchstaben (background-clip:text) + screen-Blend -> glasig/holografisch - weicher Schein NUR hinter dem Wort (.heroinfoname) -> im Stand lesbar, Grid ringsum bleibt bunt - Scroll-weg bleibt (Titel im Fluss, Grid ist fixed) ------------------------------------------------------------ */ .herocontainer { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } .herointro, .herointrocontainer { background-color: transparent; } /* Hero-Mosaik: Gesamtschleier deaktiviert (Test) -> Mosaik klar/leuchtend wie die Case-Mosaike; SUPERFEED-Weiss traegt jetzt ueber Schlagschatten an den Buchstaben (siehe .sf-ltr im Intro-Skript). Frueher rgba(0,0,0,.3). */ .caseimagegrid.intro::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); pointer-events: none; } .headlinehero { font-size: 21vw; line-height: 0.86; text-align: center; letter-spacing: -0.005em; } /* Zwei Zeilen als eigene, animierbare Blöcke (irisierender Verlauf je Zeile) */ .headlinehero .ln { display: block; color: #f5f5f5; -webkit-text-fill-color: #f5f5f5; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.34), 0 1px 4px rgba(0, 0, 0, 0.28); /* SUPERFEED blendet ERST NACH dem Grid-Aufbau sanft ein (Delay ~1.4s), damit nicht beides gleichzeitig läuft (wäre too much). Nur Fade + minimaler Versatz = ruhig. */ animation: heroLineIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.0s both; } .headlinehero .ln:nth-child(2) { animation-delay: 1.1s; } /* FEED minimal versetzt nach */ @keyframes heroLineIn { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------ 16) Kein horizontales Wackeln (Trackpad links/rechts) Mehrere Webflow-Sektionen sind 100vw breit -> ~15px Überlauf unter der Scrollbar, den man seitlich „wegwischen" konnte. `clip` kappt den Überlauf, ohne (wie `hidden`) sticky/fixed zu brechen; overscroll-behavior stoppt das seitliche Gummiband. ------------------------------------------------------------ */ /* overflow-x:clip (NICHT hidden!) kappt den horizontalen Überlauf und blockiert den Seitwärts-Scroll, ohne position:sticky zu brechen — clip erzwingt (anders als hidden) kein overflow-y:auto, das die Scroll-Titel kaputt macht. Plus Gummiband-Stopp. */ html, body { overflow-x: clip; overscroll-behavior: none; /* stoppt seitliches UND vertikales Gummiband-Überscrollen */ } /* Der eigentliche Überlauf-Fix: diverse Webflow-Sektionen sind width:100vw (= inkl. Scrollbar) und ~15px breiter als der Inhalt. Fixed/absolute davon (Hero-Grid, Nav-Ebenen) entkommen dem Body-Clipping -> sie hier auf max-width:100% klemmen. Vollbreite bleibt, Überlauf weg, sticky bleibt intakt. */ .herosection, .herointro, .navflowcontainer, .navflowsection, .caseimagegrid.intro, .caseinfo, .caseimage, .caseimagecontainer, .animationtrack, .top, .examplessection, .feedanimationsection, .heroimage, .heroimagecontainer, .heroimageoverlay { max-width: 100%; } /* ------------------------------------------------------------ (17 entfällt: die originalen farbigen Sticky-Sektionsleisten sind wiederhergestellt – durchgezogener Streifen, der oben einrastet.) ------------------------------------------------------------ */ /* ------------------------------------------------------------ 18) Creme-Bänder leicht transparent Das obere Nav-Band und das „Wir kreieren…"-Band sind Creme über dem fixen Mosaik. Leicht durchscheinend -> die Fotos schimmern dezent durch (geschichteter, attraktiverer Look). Text bleibt lesbar (nur ~15 % geöffnet). ------------------------------------------------------------ */ .navflowcontainer.hero, .caseinfo.intro { background-color: rgba(242, 229, 218, 0.95) !important; /* sehr dezent – Mosaik nur leise angedeutet */ } /* ------------------------------------------------------------ (19 entfällt: frosted Nav-Band + cross-fade-Label entfernt.) ------------------------------------------------------------ */ /* ------------------------------------------------------------ 9) Mobile: Fließtext nie unter 16px, Highlights lesbar halten ------------------------------------------------------------ */ @media (max-width: 767px) { .paragraph { font-size: 16px; } .highlight, .highlight.list { font-size: 15px; font-weight: 400; } } /* ------------------------------------------------------------ 20) Obere Leiste (Creme-Balken + Menue) faehrt erst RUNTER, nachdem das Mosaik/SUPERFEED aufgebaut ist. Start: nach oben versteckt; das Intro-Skript setzt body.sf-navdown, sobald die Kachel-Animationen fertig sind (dynamisch getimt) -> Slide-down. Kleiner Versatz: Menue kommt einen Tick nach dem Balken. Nur bei erlaubter Animation (reduced-motion sieht die Leiste normal). ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .navflowcontainer.hero, .navbar { transform: translateY(-120%); transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1); will-change: transform; } .navbar { transition-delay: 0.12s; } /* kleiner Versatz hinter dem Balken */ body.sf-navdown .navflowcontainer.hero, body.sf-navdown .navbar { transform: translateY(0); } } /* ------------------------------------------------------------ 21) Case-Mosaike: Sektionsfarben-Overlay (.caseimageoverlay) beim Scrollen deaktiviert -> Mosaike bleiben voll farbig, kein Ueberblenden in die Sektionsfarbe. (Webflow-Interaktion setzt inline opacity -> mit !important ausgehebelt.) ------------------------------------------------------------ */ .caseimageoverlay { opacity: 0 !important; } /* ------------------------------------------------------------ 22) Case-Text-Flächen leicht transparent -> das fixe Hero-Mosaik (inkl. SUPERFEED) scheint dezent durch = glasiger, geschichteter Look. ~90% deckend, Text bleibt lesbar. ------------------------------------------------------------ */ /* Slot-Farben (Reihenfolge hell,hell,hell,dunkel,dunkel) bleiben ORTSFEST. Nach der Inhalts-Umsortierung tragen die Klassen andere Slot-Farben: photokina/top3 sitzen jetzt in hellen Slots, travelneu/berlinstagram in dunklen. Sticky-Leisten (.navflowcontainer.KLASSE) mitgeschwenkt. */ .caseinfo.intro { background-color: rgba(242, 229, 218, 0.98) !important; } .caseinfo.huawei { background-color: rgba(255, 250, 235, 0.98) !important; } .caseinfo.photokina { background-color: rgba(255, 202, 156, 0.98) !important; } /* Slot 2 hell */ .caseinfo.top3 { background-color: rgba(230, 203, 184, 0.98) !important; } /* Slot 3 hell */ .caseinfo.travelneu { background-color: rgba(66, 65, 65, 0.98) !important; } /* Slot 4 dunkel */ .caseinfo.berlinstagram { background-color: rgba(82, 84, 89, 0.98) !important; } /* Slot 5 dunkel */ .navflowcontainer.photokina { background-color: rgb(255, 202, 156) !important; } .navflowcontainer.top3 { background-color: rgb(230, 203, 184) !important; } .navflowcontainer.travelneu { background-color: rgb(66, 65, 65) !important; } .navflowcontainer.berlinstagram { background-color: rgb(82, 84, 89) !important; } /* ------------------------------------------------------------ 23) Variante 2 (?surface=wm): Case-Flaechen DECKEND, dahinter nur Grid-Linien + SUPERFEED als Watermark-Muster (keine Fotos). helle Flaechen -> dunkles Watermark, dunkle -> helles. ------------------------------------------------------------ */ body.sf-wm .caseinfo.intro { background-color: rgb(242,229,218) !important; } body.sf-wm .caseinfo.huawei { background-color: rgb(255,250,235) !important; } body.sf-wm .caseinfo.travelneu { background-color: rgb(255,202,156) !important; } body.sf-wm .caseinfo.berlinstagram { background-color: rgb(230,203,184) !important; } body.sf-wm .caseinfo.photokina { background-color: rgb(66,65,65) !important; } body.sf-wm .caseinfo.top3 { background-color: rgb(82,84,89) !important; } body.sf-wm .caseinfo.intro, body.sf-wm .caseinfo.huawei, body.sf-wm .caseinfo.travelneu, body.sf-wm .caseinfo.berlinstagram { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27680%27%20height%3D%27340%27%20viewBox%3D%270%200%20680%20340%27%3E%3Cg%20fill%3D%27black%27%20fill-opacity%3D%270.07%27%20font-family%3D%27Archivo%2CArial%2Csans-serif%27%20font-weight%3D%27900%27%20text-anchor%3D%27middle%27%3E%3Ctext%20x%3D%27340%27%20y%3D%27150%27%20font-size%3D%27150%27%20letter-spacing%3D%27-4%27%3ESUPER%3C%2Ftext%3E%3Ctext%20x%3D%27340%27%20y%3D%27320%27%20font-size%3D%27150%27%20letter-spacing%3D%27-4%27%3EFEED%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"), repeating-linear-gradient(to right,rgba(0,0,0,0.07) 0,rgba(0,0,0,0.07) 1.5px,transparent 1.5px,transparent 14.2857vw), repeating-linear-gradient(to bottom,rgba(0,0,0,0.07) 0,rgba(0,0,0,0.07) 1.5px,transparent 1.5px,transparent 14.2857vw); background-repeat: no-repeat, repeat, repeat; background-position: center, 0 0, 0 0; background-size: min(78vw,860px) auto, auto, auto; } body.sf-wm .caseinfo.photokina, body.sf-wm .caseinfo.top3 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27680%27%20height%3D%27340%27%20viewBox%3D%270%200%20680%20340%27%3E%3Cg%20fill%3D%27white%27%20fill-opacity%3D%270.11%27%20font-family%3D%27Archivo%2CArial%2Csans-serif%27%20font-weight%3D%27900%27%20text-anchor%3D%27middle%27%3E%3Ctext%20x%3D%27340%27%20y%3D%27150%27%20font-size%3D%27150%27%20letter-spacing%3D%27-4%27%3ESUPER%3C%2Ftext%3E%3Ctext%20x%3D%27340%27%20y%3D%27320%27%20font-size%3D%27150%27%20letter-spacing%3D%27-4%27%3EFEED%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"), repeating-linear-gradient(to right,rgba(255,255,255,0.12) 0,rgba(255,255,255,0.12) 1.5px,transparent 1.5px,transparent 14.2857vw), repeating-linear-gradient(to bottom,rgba(255,255,255,0.12) 0,rgba(255,255,255,0.12) 1.5px,transparent 1.5px,transparent 14.2857vw); background-repeat: no-repeat, repeat, repeat; background-position: center, 0 0, 0 0; background-size: min(78vw,860px) auto, auto, auto; } /* ------------------------------------------------------------ 24) Header-Tagline (Funnel-Hook) neben dem Logo. Dezent/gedaempft, Gedankenstrich; blendet ein, sobald die Leiste unten ist (sf-navdown); auf schmalen Screens ausgeblendet. ------------------------------------------------------------ */ .navflowtitle.hero .sf-tagline { letter-spacing: 0; font-weight: 400; color: #6a6a6c; font-size: 0.66em; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .navflowtitle.hero .sf-tagline { opacity: 0; transition: opacity 0.8s ease 0.55s; } body.sf-navdown .navflowtitle.hero .sf-tagline { opacity: 1; } } @media (max-width: 991px) { .navflowtitle.hero .sf-tagline { display: none; } } /* ------------------------------------------------------------ 25) FUNNEL-BEREICH (Preview, Branch funnel) zwischen Hero und Cases: Hook -> Problem-Akte -> Reframe -> Loesung. Scoped unter .sffunnel. Alter generischer Claim (#FALLBEISPIELE) ausgeblendet (ersetzt). ------------------------------------------------------------ */ .sffunnel{--sf-cream:#f2e5da;--sf-ink:#191919;--sf-dark:#141413;--sf-onDark:#ece7df;--sf-onMute:#726c64;--sf-pad:20px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;position:relative;z-index:2} .sffunnel section{padding:clamp(90px,14vh,190px) var(--sf-pad)} .sffunnel .sf-wrap{max-width:1200px;margin:0 auto;position:relative} .sffunnel .sf-r{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)} .sffunnel .sf-r.sf-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.sffunnel .sf-r{opacity:1;transform:none;transition:none}} .sffunnel .sf-hook{background:var(--sf-cream);color:var(--sf-ink)} .sffunnel .sf-h1{margin:0 0 clamp(24px,3.4vh,40px);font-weight:900;font-size:clamp(34px,5.6vw,84px);line-height:1.0;letter-spacing:-.02em;max-width:19ch} .sffunnel .sf-hooklead{margin:0;font-weight:500;font-size:clamp(19px,2vw,30px);line-height:1.34;letter-spacing:-.005em;max-width:50ch;color:#524d46} /* gezielte Hook-Umbrueche nur auf Desktop; auf schmalen Screens natuerlicher Umbruch */ @media (max-width:768px){.sf-hb{display:none}} .sffunnel .sf-dark{background:var(--sf-dark);color:var(--sf-onDark)} .sffunnel .sf-plead{margin:0 0 clamp(48px,8vh,92px);font-weight:600;font-size:clamp(18px,1.7vw,26px);letter-spacing:-.005em;color:var(--sf-onMute)} .sffunnel .sf-set{color:var(--sf-onMute)} .sffunnel .sf-hit{color:var(--sf-onDark)} .sffunnel .sf-acts{display:flex;flex-direction:column;gap:clamp(58px,10vh,124px)} .sffunnel .sf-act p{margin:0;line-height:1.06;letter-spacing:-.014em} .sffunnel .sf-act-head p{font-size:clamp(25px,3.3vw,50px);font-weight:700} .sffunnel .sf-act-head .sf-set{font-weight:600} .sffunnel .sf-act-sub{margin:clamp(44px,6vh,66px) 0 0;padding-left:clamp(0px,4.5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vh,36px) clamp(40px,5vw,84px)} .sffunnel .sf-act-sub .sf-s p{font-size:clamp(18px,1.6vw,25px);font-weight:600} .sffunnel .sf-act-sub .sf-s .sf-set{font-weight:500} .sffunnel .sf-reframe{margin-top:clamp(64px,11vh,150px)} .sffunnel .sf-reframe p{margin:0;font-weight:900;font-size:clamp(28px,4.2vw,62px);line-height:1.02;letter-spacing:-.02em;max-width:20ch} .sffunnel .sf-reframe .sf-q{color:var(--sf-onMute);font-weight:500} .sffunnel .sf-solve{background:var(--sf-cream);color:var(--sf-ink)} .sffunnel .sf-lead{margin:0 0 clamp(26px,4vh,40px);font-weight:900;font-size:clamp(26px,3.6vw,52px);line-height:1.05;letter-spacing:-.018em;max-width:20ch} .sffunnel .sf-sub{margin:0 0 clamp(30px,4vh,46px);font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:.01em;color:#3a3733} .sffunnel .sf-body{margin:0;max-width:60ch;font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#2c2a27} .sffunnel .sf-kick{margin:clamp(34px,5vh,52px) 0 0;font-weight:700;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.01em} @media (max-width:760px){.sffunnel .sf-act-sub{grid-template-columns:1fr;padding-left:clamp(14px,4vw,40px)}} #FALLBEISPIELE{display:none!important} /* ------------------------------------------------------------ 26) Funnel kompakter (weniger Groesse/Weissraum) + Flaechen transparent wie die Case-Flaechen (Hero-Mosaik scheint durch). ------------------------------------------------------------ */ .sffunnel section{padding:clamp(46px,6.5vh,86px) var(--sf-pad)} .sffunnel .sf-hook, .sffunnel .sf-solve{background:rgba(242,241,237,0.98)} .sffunnel .sf-dark{background:rgba(20,20,19,0.98)} .sffunnel .sf-h1{font-size:clamp(30px,4.6vw,64px);max-width:20ch} .sffunnel .sf-hooklead{font-size:clamp(18px,1.7vw,25px)} .sffunnel .sf-plead{font-size:clamp(16px,1.4vw,21px);margin-bottom:clamp(34px,5vh,60px)} .sffunnel .sf-acts{gap:clamp(30px,4.5vh,58px)} .sffunnel .sf-act-head p{font-size:clamp(22px,2.7vw,40px)} .sffunnel .sf-act-sub{margin-top:clamp(44px,6vh,66px);gap:clamp(18px,2.4vh,28px) clamp(36px,4vw,64px)} .sffunnel .sf-act-sub .sf-s p{font-size:clamp(16px,1.4vw,21px)} .sffunnel .sf-reframe{margin-top:clamp(36px,6vh,74px)} .sffunnel .sf-reframe p{font-size:clamp(24px,3.4vw,48px)} .sffunnel .sf-lead{font-size:clamp(23px,3vw,42px)} .sffunnel .sf-sub{margin-bottom:clamp(24px,3vh,36px)} .sffunnel .sf-kick{font-size:clamp(18px,1.5vw,22px)} /* ------------------------------------------------------------ 27) Fixe Menue-Leiste ueber dunkler Funnel-Flaeche auf hell (schwarzer Nav-Text war sonst unsichtbar auf Dunkel). ------------------------------------------------------------ */ .navbar .navtext, .navbar .hamburgerline1, .navbar .hamburgerline2, .navbar .hamburgerline3, .navbar .languageunderline { transition: color 0.3s ease, background-color 0.3s ease; } body.sf-navdark .navbar .navtext { color: #ece7df !important; } body.sf-navdark .navbar .hamburgerline1, body.sf-navdark .navbar .hamburgerline2, body.sf-navdark .navbar .hamburgerline3, body.sf-navdark .navbar .languageunderline { background-color: #ece7df !important; } /* ------------------------------------------------------------ 28) Funnel Reveal-Upgrade: grosse Aussagen mit Blur-In + staerkerem Aufsteigen (statt nur Fade); Sub-Punkte leicht gestaffelt. (Kein clip-path: das laesst den IntersectionObserver die Elemente als nicht sichtbar werten -> Reveal bleibt aus.) ------------------------------------------------------------ */ .sffunnel .sf-h1.sf-r, .sffunnel .sf-reframe.sf-r, .sffunnel .sf-answer.sf-r, .sffunnel .sf-lead.sf-r { transform: scale(0.985); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2,0.75,0.2,1); } .sffunnel .sf-h1.sf-in, .sffunnel .sf-reframe.sf-in, .sffunnel .sf-answer.sf-in, .sffunnel .sf-lead.sf-in { filter: none; transform: none; } .sffunnel .sf-act-sub .sf-s:nth-child(2){ transition-delay: 0.12s; } @media (prefers-reduced-motion:reduce){ .sffunnel .sf-h1,.sffunnel .sf-act-head,.sffunnel .sf-reframe,.sffunnel .sf-answer,.sffunnel .sf-lead{filter:none !important} } /* ------------------------------------------------------------ 29) Akt-Ueberschriften zeilenweise: erst Setup-Zeile, dann Pointe. Wrapper (.sf-act-head) ist nur Scroll-Trigger; die zwei

animieren. ------------------------------------------------------------ */ .sffunnel .sf-act-head.sf-r{opacity:1;transform:none;filter:none} .sffunnel .sf-act-head p{opacity:0;transform:scale(0.985);transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.75,0.2,1)} .sffunnel .sf-act-head.sf-in p{opacity:1;filter:blur(0);transform:none} .sffunnel .sf-act-head.sf-in p:nth-child(2){transition-delay:0.15s} @media (prefers-reduced-motion:reduce){.sffunnel .sf-act-head p{opacity:1;filter:none;transform:none;transition:none}} /* ------------------------------------------------------------ 30) Case-Praesentationen aufs Funnel-System abgeleitet: Icons raus, editoriale Archivo-Typo, Capabilities als nummerierte Liste mit Haarlinien, Reveal fuer den Beschreibungstext. Scoped auf .sf-case (nur Case-Sektionen, nicht About/Kontakt). ------------------------------------------------------------ */ .sf-case .highlighticon{display:none !important} .sf-case .casetext .paragraph{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.62;color:#2c2a27;letter-spacing:0} .sf-case .highlightgrid{grid-template-columns:1fr 1fr;column-gap:clamp(30px,3.6vw,60px);row-gap:0;padding-right:0} .sf-case .casehighlight{counter-reset:cap} .sf-case .highlightgridblock{display:block;counter-increment:cap;border-top:1px solid rgba(25,25,25,0.16);padding:15px 0 20px;margin:0} .sf-case .highlightgridblock::before{content:counter(cap,decimal-leading-zero);display:block;font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;color:#8f8a80;margin-bottom:9px} .sf-case .highlighttext{margin:0} .sf-case .highlight{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.42;color:#26241f;letter-spacing:0} .sf-case .casetext.sf-cr{opacity:0;transform:scale(0.985);transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.75,0.2,1)} .sf-case .casetext.sf-in{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){.sf-case .casetext.sf-cr{opacity:1;transform:none;filter:none;transition:none}} /* ------------------------------------------------------------ 30x) Referenz-Reveal als Kaskade — abgeleitet vom Kontakt-/ Leistungen-Reveal (.sf-r2). Jede Referenz "schreibt sich" von oben nach unten ein: Kicker -> Titel -> Text -> Leistungen-Label -> Leistungspunkte (01,02,03…) staffeln mit 70ms Versatz nacheinander ein (translateY + Fade), statt als drei ganze Blöcke zu faden. Loest die alte .sf-cr-Blockanimation ab (JS vergibt jetzt .sf-cq + --ci pro Element; Panel-Trigger setzt .sf-cq-in). ------------------------------------------------------------ */ .sf-case .sf-cq{opacity:0;transform:translateY(30px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--ci,0)*70ms)} .sf-case.sf-cq-in .sf-cq{opacity:1;transform:none} /* Titel etwas markanter: größerer Hub + Hauch Scale (Echo der Funnel-Headlines) */ .sf-case .casetitlecontainer .headline2.sf-cq{transform:translateY(34px) scale(.99)} .sf-case.sf-cq-in .casetitlecontainer .headline2.sf-cq{transform:none} @media (prefers-reduced-motion:reduce){.sf-case .sf-cq{opacity:1!important;transform:none!important;transition:none!important}} /* Mobile: Case-Reveal spuerbar schneller (kuerzere Dauer + engerer Stagger), passt zum frueheren Trigger (rootMargin) in sf-case-marker. */ @media (max-width:767px){ .sf-case .sf-cq{transition-duration:.45s;transition-delay:calc(var(--ci,0)*40ms);transform:translateY(20px)} .sf-case .casetitlecontainer .headline2.sf-cq{transform:translateY(22px) scale(.995)} } /* 30b) Dunkle Cases: helle Schrift. Dunkle Slots = jetzt travelneu + berlinstagram (nach Reihenfolge-/Farbtausch), nicht mehr photokina/top3. */ .sf-case.travelneu .casetext .paragraph, .sf-case.berlinstagram .casetext .paragraph{color:#e7e2da} .sf-case.travelneu .highlight, .sf-case.berlinstagram .highlight{color:#ece7df} .sf-case.travelneu .highlightgridblock, .sf-case.berlinstagram .highlightgridblock{border-top-color:rgba(236,231,223,0.20)} .sf-case.travelneu .highlightgridblock::before, .sf-case.berlinstagram .highlightgridblock::before{color:#a29c92} /* 30c) Case-Kicker/Eyebrow ueber dem Mosaik-Titel */ .sf-ct-kick{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(12px,1vw,15px);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;opacity:0.9;margin:0 0 0.55em 0.12em;line-height:1} /* 30d) Case-Textbox: Client-Kicker oben + "Leistungen"-Label ueber den Punkten */ .sf-case .casetitlecontainer .sf-case-kick{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#4a463f;margin:0 0 clamp(6px,0.9vh,10px) 0;line-height:1} .sf-case .casehighlight .sf-case-lbl{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;margin:0 0 clamp(18px,2.6vh,26px) 0;line-height:1} .sf-case.travelneu .sf-case-kick,.sf-case.berlinstagram .sf-case-kick{color:#d8d3ca} .sf-case.travelneu .sf-case-lbl,.sf-case.berlinstagram .sf-case-lbl{color:#a29c92} /* 30e) Case-Text auf die Funnel-Flucht: zentrierte 1200er-Spalte. Ergebnis: linke Kante = (vw-1200)/2 -> exakt dieselbe Flucht wie der Funnel (.sffunnel .sf-wrap). Das umgebende Padding kuerzt sich mathematisch raus, greift also erst ab Desktop (vw>1240). */ @media (min-width:992px){ .sf-case .caseinfocontainer, .sf-case .casetitlecontainer{max-width:1200px;margin-left:auto;margin-right:auto} } /* 30f) Nav auf dieselbe Flucht: linkes Flow-Label + rechtes Menue-Cluster in die zentrierte 1200er-Spalte. Gilt global (Hero + alle Case-Sektionen), damit die Leiste ueberall buendig zum Inhalt laeuft. */ @media (min-width:992px){ .navflowcontainer .websitecontainer > *{max-width:1200px;margin-left:auto;margin-right:auto} .navbar .websitecontainer > .navcontainer{max-width:1200px;margin-left:auto;margin-right:auto} } /* 30g) Unterer Bereich (Ueber uns / Kontakt / Footer) auf dieselbe Flucht. Vorlaeufig rein strukturell (Inhalt wird noch ueberarbeitet) -- zieht die Inhaltscontainer in die zentrierte 1200er-Spalte, analog zu Funnel + Cases. Die Flow-Labels ("Kontakt", "SUPERFEED") laufen bereits ueber 30f mit. */ @media (min-width:992px){ .caseinfo.about .caseinfocontainer, .caseinfo.about .casetitlecontainer, .footersection .footercontainer{max-width:1200px;margin-left:auto;margin-right:auto} } /* ------------------------------------------------------------ 30h) "Ueber uns" (.sf-about) -- editoriale Angleichung an Funnel/Cases - Referenzen/Logoleiste vorlaeufig raus (nur ausgeblendet, s. REFERENZEN-ASSETS.md) - Namen raus (Platzhalter-Kicker "Wer wir sind", spaeter evtl. Fotos) - Claim -> Lead; Leistungen -> nummerierte Kapazitaeten 01-09 mit Haarlinien ------------------------------------------------------------ */ .sf-about .sf-ab-referenzen{display:none !important} /* Claim als Lead (Sprache wie .sf-lead im Funnel) */ .sf-about .claim.about{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:clamp(30px,3.9vw,56px);line-height:1.06;letter-spacing:-0.02em;color:#191919;max-width:22ch;margin:0} .sf-about .casetitlecontainer.about{margin-bottom:clamp(46px,7vh,84px)} /* Zeilen-Rhythmus + Label-Spalte oben ausrichten */ .sf-about .caseinfocontainer.about{gap:clamp(44px,7vh,80px)} .sf-about .caseinfocontainer.about .websitegrid{align-items:start} /* Kicker/Label links (wie "LEISTUNGEN" bei den Cases) */ .sf-about .sf-ab-kick, .sf-about .sf-ab-kick strong{font-family:Archivo,"Helvetica Neue",Arial,sans-serif !important;font-size:12px !important;font-weight:600 !important;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80 !important;line-height:1.35;margin:0} strong.sf-ab-kick{display:inline-block} /* Body-Text (wie .sf-body): nur die echten Textabsaetze, nicht die Kicker-Wrapper */ .sf-about .caseinfocontainer.about .websitegrid > .paragraph:not(.sf-ab-kick){font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.62;color:#2c2a27;letter-spacing:0;max-width:62ch;margin:0} /* Leistungen -> nummerierte Kapazitaeten, 2 Spalten, Haarlinien, 01-09 */ .sf-about .liste{list-style:none;counter-reset:svc;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,3.6vw,60px);row-gap:0;margin:0;padding:0} .sf-about .liste li{list-style:none;counter-increment:svc;border-top:1px solid rgba(25,25,25,0.16);padding:15px 0 18px;margin:0;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.42;color:#26241f;background:none} .sf-about .liste li::before{content:counter(svc,decimal-leading-zero);display:block;font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;color:#8f8a80;margin-bottom:8px} .sf-about .liste li.bottom{border-bottom:none} /* ------------------------------------------------------------ 31) Kontakt + Footer -- Angleichung an Funnel/Cases (Typograf-Review) Additiv, gescopet auf .contactsection / .footersection / .navflowcontainer:not(.hero). Funnel + Header-Hero bleiben unberuehrt. ------------------------------------------------------------ */ /* A2 -- Section-Flow-Labels ("KONTAKT"/"UEBER UNS"/"UNSERE PROJEKTE") auf EIN Label-Alphabet (12px / 0.16em), Wayfinding-Ton eine Stufe ueber dem Content-Kicker (#8f8a80). */ .navflowcontainer:not(.hero) .navflowtitle{font-size:12px;letter-spacing:0.16em;color:#4a463f} /* Lead -- Kontakt-Headline im Funnel-Lead-Duktus (900) */ .contactsection .sf-contact-lead{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-0.018em;color:#191919;margin:0 0 clamp(22px,3.2vh,36px)} /* A1 -- Kontakt-Body auf das eine Lesemass (17->20 / lh 1.6 / #2c2a27) */ .contactsection .casetext .paragraph{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.6;letter-spacing:0;color:#2c2a27;max-width:38ch;margin:0} /* B1 -- Kontakt atmen lassen wie der Funnel */ .contactsection .caseinfo.about{padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(56px,9vh,110px)} @media (min-width:768px){.contactsection .caseinfocontainer.contact{column-gap:clamp(40px,5vw,84px);align-items:start}} /* A4 -- Formular-Labels als Kicker-Micro-Labels */ .contactsection .paragraph.form{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;margin:clamp(20px,2.8vh,28px) 0 9px} .contactsection label[for="Name-3"]{margin-top:0} /* B2 -- Formularfelder als randlose Haarlinien-Inputs */ .contactsection .text-field.w-input, .contactsection .text-field-2.w-input, .contactsection .textarea.w-input{border:0;border-bottom:1px solid rgba(25,25,25,0.22);border-radius:0;background:transparent;padding:10px 0;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:16px;color:#191919;transition:border-color .25s ease} .contactsection .text-field.w-input:focus, .contactsection .text-field-2.w-input:focus, .contactsection .textarea.w-input:focus{border-bottom-color:#191919;outline:none} .contactsection .textarea.w-input{min-height:120px;resize:vertical} /* B4 -- "Senden" als ruhiger Ink-Button (einziger Button der Seite) */ .contactsection .submit-button.w-button{background:#191919;color:#ece7df;border:0;border-radius:0;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-size:13px;padding:15px 30px;margin-top:clamp(22px,3vh,32px);cursor:pointer;transition:background-color .25s ease} .contactsection .submit-button.w-button:hover{background:#000} /* A3 -- Footer-Wortmarke: echte Archivo-900-Wortmarke in Ink (GESCOPET!) */ .footersection .navflowtitle.hero{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(34px,4.4vw,60px);letter-spacing:-0.02em;line-height:1.0;color:#191919} /* A5 -- Footer-Adresse an Body-Ton */ .footersection .text-block-15-copy{font-size:15px;line-height:1.6;letter-spacing:0;color:#2c2a27;margin-top:clamp(16px,2vh,22px)} /* A6 -- Footer-Sekundaertext vereinheitlichen */ .footersection .footernav{font-size:15px;letter-spacing:0;color:#4a463f} .footersection .text-block-16, .footersection .text-block-14{font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80} /* B3 -- Footer als bewusster Schluss-Block (feine Oberlinie + Rhythmus) */ .footersection{border-top:1px solid rgba(25,25,25,0.14);padding-top:clamp(56px,9vh,104px);padding-bottom:clamp(56px,9vh,104px)} /* ------------------------------------------------------------ 33) Case-Titel als gefuellte Headline IM Textblock (statt Overlay aufs Mosaik). Mosaike bleiben ruhig/reine Bilder. Hierarchie je Case: HUAWEI (Kicker) -> Smartphone (900-Lead) -> Text | Leistungen -- analog zu Ueber-uns. Altes Mosaik-Overlay optional via ?casetitles=mosaic. ------------------------------------------------------------ */ .sf-case .casetitlecontainer{margin-bottom:clamp(28px,4.2vh,52px)} .sf-case .casetitlecontainer .headline2{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(34px,5vw,72px);line-height:1.0;letter-spacing:-0.02em;color:#191919;margin:0} .sf-case.travelneu .casetitlecontainer .headline2, .sf-case.berlinstagram .casetitlecontainer .headline2{color:#ece7df} /* Reveal (Blur-in) fuer den Header analog zum Body */ .sf-case .casetitlecontainer.sf-cr{opacity:0;transform:scale(0.985);transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.75,0.2,1)} .sf-case .casetitlecontainer.sf-in{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){.sf-case .casetitlecontainer.sf-cr{opacity:1;transform:none;filter:none;transition:none}} /* ------------------------------------------------------------ 34) Funnel Abschnitt 3 (Auflösung .sf-solve) — Antwort-Twist Kommt direkt aus der dunklen Problemfläche: erst die Antwort (zwei große Zeilen, gedämpft -> hell, spiegelt das Reframe-Ende), dann SUPERFEED. Ruhiger Fluss via Flex-Gap, kein langer About-Block. ------------------------------------------------------------ */ /* Antwort */ .sffunnel .sf-solve .sf-answer{margin:0 0 clamp(34px,4.8vh,54px);font-weight:900;font-size:clamp(26px,3.6vw,52px);line-height:1.06;letter-spacing:-.018em;max-width:26ch} .sffunnel .sf-solve .sf-answer .sf-a1{color:#524d46;font-weight:500} .sffunnel .sf-solve .sf-answer .sf-a2{color:var(--sf-ink)} .sffunnel .sf-solve .sf-body{margin:0} /* Gruppen sichtbar getrennt (Haarlinie wie Case-Kapazitaeten) */ .sffunnel .sf-solve .sf-block{border-top:1px solid rgba(25,25,25,0.14);margin-top:clamp(28px,3.8vh,46px);padding-top:clamp(24px,3.4vh,40px)} .sffunnel .sf-solve .sf-glabel{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;margin:0 0 clamp(14px,2vh,20px)} /* 1) SUPERFEED als Gegenmodell */ .sffunnel .sf-solve .sf-gegen .sf-neg{margin:0;font-weight:800;font-size:clamp(22px,2.7vw,34px);line-height:1.1;letter-spacing:-.015em;color:var(--sf-ink)} .sffunnel .sf-solve .sf-gegen .sf-pos{margin:clamp(5px,0.9vh,9px) 0 0;font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:#524d46} /* 2) Wer dahintersteht — 3er-Steckbrief */ .sffunnel .sf-solve .sf-team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)} .sffunnel .sf-solve .sf-m-name{margin:0 0 6px;font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.2;letter-spacing:-.01em;color:var(--sf-ink)} .sffunnel .sf-solve .sf-m-desc{margin:0;font-weight:400;font-size:clamp(14px,1.1vw,15px);line-height:1.5;color:#6a655d} @media (max-width:760px){.sffunnel .sf-solve .sf-team{grid-template-columns:1fr;gap:clamp(16px,3vh,24px)}} /* 3) Wann wir dazukommen */ .sffunnel .sf-solve .sf-gtext{margin:0;max-width:52ch;font-weight:500;font-size:clamp(18px,1.7vw,23px);line-height:1.4;letter-spacing:-.005em;color:var(--sf-ink)} /* 4) Wie wir arbeiten — vier kurze Zeilen */ .sffunnel .sf-solve .sf-how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,1vh,10px)} .sffunnel .sf-solve .sf-how li{font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.3;letter-spacing:-.008em;color:#2c2a27} /* 5) Schlussgedanke */ .sffunnel .sf-solve .sf-close .sf-body-quiet{margin:0;max-width:56ch;font-weight:400;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#6a655d} .sffunnel .sf-solve .sf-kick{margin:0 0 clamp(16px,2.4vh,26px);font-weight:800;font-size:clamp(21px,2.2vw,32px);line-height:1.1;letter-spacing:-.015em;color:var(--sf-ink)} @media (max-width:640px){.sffunnel .sf-solve .sf-answer{max-width:none}} /* ------------------------------------------------------------ 35) Präzisions-Fixes (Typo-Review 2) A1: Webflow-Basis .paragraph{letter-spacing:.04em} vererbt +0.69px in die Funnel-Bodies, die selbst kein Tracking setzen -> auf 0 (wie Case/ About/Contact-Body). A2 (Case-Kicker 12px), A3 (Nummern 0.16em) und A4 (sf-a1 #524d46) sind oben in den jeweiligen Regeln gesetzt. ------------------------------------------------------------ */ .sffunnel .sf-body, .sffunnel .sf-solve .sf-pos, .sffunnel .sf-solve .sf-m-desc{letter-spacing:0} /* ------------------------------------------------------------ 36) Overlay-Menue ohne Webflow-JS (Vanilla, sf-nav-menu-Skript) Hamburger .stateburgeria oeffnet das .navmenu-Overlay; body.sf-nav-open steuert Sichtbarkeit + Hamburger->X. Ersetzt die Webflow-IX2-Interaktion (display:flex + Backdrop-Fade), damit jQuery + webflow.js entfallen koennen. ------------------------------------------------------------ */ body.sf-nav-open .navmenu{display:flex !important;background-color:rgba(20,20,19,0.92) !important;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important} .navbar .hamburgerline1, .navbar .hamburgerline2, .navbar .hamburgerline3{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease;transform-origin:center} body.sf-nav-open .hamburgerline1{transform:translateY(7px) rotate(45deg)} body.sf-nav-open .hamburgerline2{opacity:0} body.sf-nav-open .hamburgerline3{transform:translateY(-7px) rotate(-45deg)} /* ------------------------------------------------------------ 37) Fixes nach jQuery/Webflow-JS-Ausbau a) Leistungsbloecke (.highlightgridblock) hatten Webflow-IX2 opacity:0 (auf Scroll animiert) -> ohne webflow.js unsichtbar. Sichtbar machen — ABER nur solange sie nicht Teil der Referenz-Kaskade sind (.sf-cq). Die Kaskade (30x) steuert Sichtbarkeit der Case-Punkte jetzt selbst; das :not(.sf-cq) laesst den Webflow-Rest (About etc.) sichtbar. b) .closeoverlay (40x50, z1) ueberlappte den Hamburger und fing Klicks ab -> nur bei offenem Menue klickbar. ------------------------------------------------------------ */ .highlightgridblock:not(.sf-cq){opacity:1 !important} .sf-case .casehighlight.sf-cr{opacity:0;transform:scale(0.985);transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.75,0.2,1)} .sf-case .casehighlight.sf-in{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){.sf-case .casehighlight.sf-cr{opacity:1;transform:none;filter:none;transition:none}} .closeoverlay{pointer-events:none} body.sf-nav-open .closeoverlay{pointer-events:auto} /* ------------------------------------------------------------ 39) Sticky-Sektionslabels erst beim Andocken zeigen Label (casenavflow / navflowtitle) ist unsichtbar, solange die Leiste noch mitscrollt; erscheint erst, wenn sie oben andockt (body-agnostisch via .is-stuck, gesetzt vom sf-sticky-label-Skript). Hero-Leiste ausgenommen (die zeigt die Tagline durchgehend). ------------------------------------------------------------ */ .navflowcontainer:not(.hero) .casenavflow, .navflowcontainer:not(.hero) .navflowtitle{opacity:0;transition:opacity .35s ease} .navflowcontainer:not(.hero).is-stuck .casenavflow, .navflowcontainer:not(.hero).is-stuck .navflowtitle{opacity:1} @media (prefers-reduced-motion:reduce){.navflowcontainer:not(.hero) .casenavflow,.navflowcontainer:not(.hero) .navflowtitle{transition:none}} /* ------------------------------------------------------------ 40) TEST Funnel-Sticky-Labels (?stickyfunnel=1) Sticky-Leisten "Problem" (dunkle Flaeche) + "Loesung" (Aufloesung), analog zu den Case-/Sektions-Leisten: Label erscheint erst beim Andocken (.is-stuck vom sf-sticky-label-Skript). Default: aus. Hook bewusst OHNE Leiste gelassen (Label offen -- s. Notiz). ------------------------------------------------------------ */ .sf-fbar{display:none} .sf-stickyfunnel .sffunnel .sf-fbar{display:block;position:sticky;top:0;z-index:4;height:52px} .sf-stickyfunnel .sffunnel .sf-dark .sf-fbar{background:rgba(20,20,19,0.98)} .sf-stickyfunnel .sffunnel .sf-solve .sf-fbar{background:rgba(242,229,218,0.98)} .sf-fbar .sf-wrap{height:100%;display:flex;align-items:center} .sf-fbar-label{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;opacity:0;transition:opacity .35s ease} .sffunnel .sf-dark .sf-fbar-label{color:#c9c3b8} .sffunnel .sf-solve .sf-fbar-label{color:#4a463f} .sf-fbar.is-stuck .sf-fbar-label{opacity:1} @media (prefers-reduced-motion:reduce){.sf-fbar-label{transition:none}} /* 39b) Sticky-Label "Ausgewaehlte Referenzen" auf die 12px-Groesse der anderen Sektionslabels (war Webflow-Default 22px). */ .navflowcontainer .casenavflow{font-size:12px;letter-spacing:0.16em} /* ------------------------------------------------------------ 41) Top-Nav auf 12px-Label-Optik + Desktop-Menue Nav-Text war 15px/500 -> zu wuchtig; auf 12px/600/0.16em wie die Labels. Desktop (>=992px): sf-desktop-nav-Skript verschiebt .navmenu in die rechte .navcontainer -> Links (Unsere Projekte/Ueber uns/Kontakt) inline, rechts- buendig auf der Flucht neben DE/EN; Hamburger/Redundanzen aus. Mobile: Hamburger-Overlay bleibt. ------------------------------------------------------------ */ .navbar .navtext{font-size:12px;font-weight:600;letter-spacing:0.16em} @media (min-width:992px){ .navbar .navcontainer .navmenu{display:flex;flex-direction:row;align-items:center;position:static;width:auto;height:auto;background:none !important;-webkit-backdrop-filter:none;backdrop-filter:none;inset:auto;gap:clamp(18px,1.8vw,30px);margin:0 clamp(22px,2.4vw,42px) 0 0} .navbar .navcontainer .navmenu .navcontainer.mobile{display:none} .navbar .navcontainer .navmenu .navmenuitem{padding:0;display:flex;align-items:center} .navbar .navcontainer .navmenu .navmenuitem .navlink{font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#4a463f;line-height:1;white-space:nowrap} .navbar .navcontainer .navmenu .navmenuunderline{display:none} .navbar .navbutton.stateburgeria{display:none} .navbar .closeoverlay{display:none} .navbar .websitecontainer .navcontainer > .navitem:not(.languageswitch){display:none} } /* ------------------------------------------------------------ 42) Top-Nav: eine Hoehe/Baseline + Sprachumschalter raus Nav war auf 32px geschrumpft (12px-Text) -> Menue lag hoeher als das 52px-Hero-/Sektions-Band. Nav auf 52px, alles vertikal zentriert -> linkes Label, Menue auf einer Linie. DE/EN aus der Top-Nav (jetzt Footer). ------------------------------------------------------------ */ .navbar{min-height:52px;align-items:center} .navbar .navitem.languageswitch{display:none} @media (min-width:992px){ .navbar .websitecontainer, .navbar .websitecontainer .navcontainer, .navbar .navcontainer .navmenu, .navbar .navcontainer .navmenu .navmenuitem{align-items:center;margin:0;line-height:1} .navbar .navcontainer .navmenu .navmenuitem .navlink{margin:0} .navbar .navcontainer{height:52px} } /* Footer-Sprachumschalter (DE/EN) im Ton der Footer-Nav */ .footersection .sf-footerlang{display:flex;gap:8px;margin-top:clamp(16px,2.2vh,24px)} .footersection .sf-footerlang a{font-size:15px;letter-spacing:0;color:#4a463f} .footersection .sf-footerlang a.active{font-weight:600;color:#191919} .footersection .sf-footerlang .sep{color:#8f8a80} /* ------------------------------------------------------------ 43) Mosaik-Grid-Abstand feiner: 3.5px -> 2px (Hero + Cases) Die weissen Gitterlinien einen Tick schmaler; SUPERFEED sitzt weiter sichtbar im Raster. ------------------------------------------------------------ */ html .caseimagegrid,html .caseimagegrid.intro,html .caseimagegrid.mobile{grid-column-gap:2px !important;grid-row-gap:2px !important;column-gap:2px !important;row-gap:2px !important} /* ------------------------------------------------------------ 43b) Referenzen-Mosaik responsive (nur Case-Grid, nicht .intro/.mobile): - >=1250px (breiter Desktop): 6 Spalten -> 6x4 = 24 Kacheln - 992-1249px (zwischen Tablet und breitem Desktop): 5 Spalten, die letzten 4 Kacheln aus -> sauberes 5x4 = 20 (sonst laesst das schmalere 6er-Grid unten eine leere Flaeche stehen). - <=991px: .mobile-Grid (3 Spalten). ------------------------------------------------------------ */ @media screen and (min-width:1250px){ html .caseimagegrid:not(.intro):not(.mobile){ grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr !important; grid-template-rows:auto auto auto auto !important; } } @media screen and (min-width:992px) and (max-width:1249.98px){ html .caseimagegrid:not(.intro):not(.mobile){ grid-template-columns:1fr 1fr 1fr 1fr 1fr !important; grid-template-rows:auto auto auto auto !important; } html .caseimagegrid:not(.intro):not(.mobile) > .caseimagedesktop:nth-child(n+21){display:none !important} } /* 42b) Nav-Container-Flucht forcieren: die 1200er-Spalte (mit dem Menue, flex-end) rechtsbuendig auf die Content-Flucht bringen. Block 30f wurde irgendwo ueberschrieben -> hier mit !important. */ @media (min-width:992px){ .navbar .websitecontainer > .navcontainer{margin-left:auto !important;margin-right:auto !important} } /* ------------------------------------------------------------ 44) navdark-Fix nach Nav-Umbau Ueber dunklem Grund wurde nur .navtext hell, nicht die Desktop-Menue- Links (.navlink) und nicht das Sticky-Label -> beide blieben dunkel. Jetzt mitfaerben. ------------------------------------------------------------ */ body.sf-navdark .navbar .navmenu .navlink{color:#ece7df !important} body.sf-navdark .navflowcontainer.fallbeispiele .casenavflow{color:#ece7df !important} /* ------------------------------------------------------------ 45) ?logo=1: EINE fixe Inhalts-Leiste + sticky Farb-Baender Trennung von Inhalt und Flaeche: - Die vorhandenen Baender bleiben sticky, sind aber NUR Farbe (kein Text) -> sie schieben sich pro Abschnitt raus, nur die Farbe wechselt. - EINE fixe Leiste darueber traegt SUPERFEED + Wegweiser + Menue. Sie bleibt stehen (Menue springt/doppelt nie), blendet beim Runterscrollen im Hero raus, ist im Funnel weg und blendet bei der Loesung wieder ein. ------------------------------------------------------------ */ body.sf-logomode .navbar{display:none !important} /* Baender = reine Farbflaechen: alten Band-Text ausblenden */ body.sf-logomode .navflowcontainer .websitecontainer{display:none !important} /* Hero-Band braucht keine eigene Flaeche (die fixe Leiste hat sie), nicht pinnen */ body.sf-logomode .navflowcontainer.hero{position:relative !important;background:transparent !important} /* neues Loesungs-Farbband (Wiederauftauchen), Grundfarbe wie Hero */ body.sf-logomode .sf-solveband{background:#f2e5da} /* ENDGUELTIGER Fix "Leiste hinter der Leiste": ALLE Farb-/Flaechen-Baender (ausser Hero) werden transparent -> nur noch unsichtbare 52px-Platzhalter (halten den Inhalt frei). Die Leiste ist IMMER deckend und traegt ihre Farbe selbst (per JS pro Abschnitt, inkl. dunkle Cases + .on-dark). Es gibt damit kein separates, hochfahrendes Farbband mehr, das dahinter durchblitzen kann. */ body.sf-logomode .navflowcontainer:not(.hero){background:transparent !important} body.sf-logomode .sf-topbar.on-dark .sf-logo{color:#f4efe6} body.sf-logomode .sf-topbar.on-dark .sf-wayfind{color:#c9c4ba} body.sf-logomode .sf-topbar.on-dark .sf-menu a{color:#e7e2d8} /* die Inhalts-Leiste - normal position:absolute -> im Hero scrollt sie mit nach oben weg (wie angeklebt), nicht ausblenden. - .stuck (ein Farb-Band dockt oben an) -> fixed + transparent: die Leiste bleibt stehen und die Farb-Baender scheinen durch/schieben sich raus. - opacity: nur sichtbar im Hero-Top oder wenn ein Band angedockt ist -> der Inhalt blendet genau im Moment des Andockens ein, nicht vorher. */ .sf-topbar{position:absolute;top:0;left:0;width:100%;height:52px;z-index:20;display:flex;justify-content:center;align-items:center;pointer-events:none;opacity:0;background:#f2e5da;transition:background-color .32s ease} .sf-topbar.on{opacity:1} /* Leiste ist IMMER deckend; ihre Hintergrundfarbe wird per JS pro Abschnitt gesetzt (bar.style.backgroundColor) und cross-fadet oben ueber die transition zwischen zwei deckenden Farben -> es wird nie etwas dahinter sichtbar. */ .sf-topbar.stuck{position:fixed} /* deckende Abschnitts-Flaechen (Loesung/Ueber uns/Kontakt): volle Deckung, damit der durchscrollende Inhalt nicht mit der Leisten-Schrift kollidiert */ body.sf-logomode .navflowcontainer.sf-surface{z-index:3} /* Loesungs-Flaeche haengt sonst schon oben, bevor die Leiste reingleitet -> bis zum Slide verborgen halten und gemeinsam mit der Leiste reinschieben. */ body.sf-logomode .navflowcontainer.sf-surface.sf-surf-slide{transform:translateY(-100%)} body.sf-logomode .navflowcontainer.sf-surface.sf-surf-slide.slide{animation:sfSlideDown .42s cubic-bezier(.2,.72,.28,1) both} /* Reinschieben von oben: beim Andocken (Loesung) zuegig, beim Seitenaufbau (Intro) langsamer und eleganter (weicher Auslauf). */ .sf-topbar.slide{animation:sfSlideDown .42s cubic-bezier(.2,.72,.28,1) both} .sf-topbar.slide-intro{animation:sfSlideDown .85s cubic-bezier(.16,1,.3,1) both} @keyframes sfSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}} .sf-topbar .sf-inner{width:1200px;max-width:calc(100% - 40px);display:flex;align-items:center;justify-content:space-between;gap:20px} .sf-topbar .sf-barleft{display:flex;align-items:center;gap:16px;line-height:1;pointer-events:auto} .sf-topbar .sf-logo{font-size:22px;font-weight:600;letter-spacing:0.1em;color:#191919;text-decoration:none;white-space:nowrap;cursor:pointer;line-height:1} /* ------------------------------------------------------------ 40) Logo-Reel: SUPERFEED-Wortmarke laeuft scroll-gekoppelt wie ein Reel — je Buchstabe ein vertikaler Filmstreifen (.sf-lgreel) in einem 1em-Fenster (.sf-lglet); versetzt pro Buchstabe, richtungs- abhaengig, ruht auf S-U-P-E-R-F-E-E-D. Steuerung: JS sf-logo-reel. Faellt ohne JS / bei reduced-motion auf statischen Text zurueck. ------------------------------------------------------------ */ .sf-topbar .sf-logo.sf-reeled{display:inline-block} .sf-topbar .sf-logo .sf-lglet{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:top} .sf-topbar .sf-logo .sf-lgreel{display:block;will-change:transform} .sf-topbar .sf-logo .sf-lgreel>span{display:block;height:1em;line-height:1;text-align:center;font:inherit;color:inherit} /* Wegweiser (einblendendes Section-Label) raus -> war doppelt mit dem Menue (z.B. 'Leistungen' links + rechts). Nur noch SUPERFEED + Menue. */ .sf-topbar .sf-wayfind{display:none} .sf-topbar .sf-menu{display:flex;align-items:center;gap:clamp(18px,1.8vw,30px);pointer-events:auto} .sf-topbar .sf-menu a{font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#4a463f;text-decoration:none;white-space:nowrap} /* ------------------------------------------------------------ 47) Zwischen-CTA nach der Loesung, vor den Referenzen (echter Inhalt, nicht Flag-gated). Niedrigschwelliger Kontakt-Anstoss. ------------------------------------------------------------ */ .sf-midcta{background:#e9ddc3;padding:clamp(64px,8.5vw,120px) 0;position:relative;z-index:3} .sf-midcta > .websitecontainer{width:100%} .sf-midcta-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box} .sf-midcta-lead{font-family:inherit;font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-0.01em;color:#191919;margin:0 0 14px;text-wrap:balance;max-width:20ch} .sf-midcta-sub{font-family:inherit;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:#4a463f;margin:0 0 30px;max-width:48ch} .sf-midcta-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .sf-midcta-btn{display:inline-block;background:#191919;color:#f2e5da;font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:16px 30px;transition:background-color .2s ease} .sf-midcta-btn:hover{background:#000} .sf-midcta-link{font-weight:600;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:#4a463f;text-decoration:none;border-bottom:1px solid rgba(74,70,63,.35);padding-bottom:3px;transition:color .2s ease,border-color .2s ease} .sf-midcta-link:hover{color:#191919;border-bottom-color:#191919} /* ------------------------------------------------------------ 49) Shuffle-Gimmick: oben (Hero) neben SUPERFEED ein dezenter Hinweis "Shuffle" (Klick auf SUPERFEED baut das Mosaik neu). Absolut positioniert (kein Layout-Einfluss), nur sichtbar am Seitenanfang - auf Hover + kurzem Flash nach dem Aufbau. Klick -> window.sfMosaicReshuffle(). ------------------------------------------------------------ */ body.sf-logomode .sf-topbar .sf-barleft{position:relative} .sf-shuffle-hint{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:14px;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;opacity:0;transition:opacity .35s ease;pointer-events:none;white-space:nowrap} body.sf-athero .sf-topbar .sf-barleft:hover .sf-shuffle-hint{opacity:.7} body.sf-athero .sf-topbar.shuffle-flash .sf-shuffle-hint{opacity:.7} /* ------------------------------------------------------------ 50) Externer Link in Case-Texten (z.B. Berlinstagram -> michael-schulz.com) ------------------------------------------------------------ */ /* mehrere Case-Links nebeneinander */ .sf-caselinks{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:24px} /* Berlinstagram: die beiden Links links/rechts im Textcontainer verteilen */ .caseinfo.berlinstagram .sf-caselinks{justify-content:space-between} .sf-caselinks .sf-caselink{margin-top:0} .sf-caselink{display:inline-block;margin-top:22px;font-weight:600;font-size:15px;letter-spacing:0.01em;color:#191919;text-decoration:none;border-bottom:1px solid rgba(25,25,25,.35);padding-bottom:3px;transition:border-color .2s ease,opacity .2s ease} .sf-caselink:hover{border-bottom-color:#191919;opacity:.75} .sf-case.berlinstagram .sf-caselink,.caseinfo.berlinstagram .sf-caselink{color:#f4efe6;border-bottom-color:rgba(244,239,230,.4)} .sf-case.berlinstagram .sf-caselink:hover,.caseinfo.berlinstagram .sf-caselink:hover{border-bottom-color:#f4efe6} /* ------------------------------------------------------------ 51) Leistungen-Section neu: grosser Satz (.claim.about) bleibt stark links, darunter Subline + Intro, dann scannbare Module ("Was wir uebernehmen") als 2-Spalten-Raster mit Hairline-Trennern, Schlusssatz. Keine About-Textwueste. ------------------------------------------------------------ */ .sf-lg-sub{font-family:inherit;font-weight:700;font-size:clamp(18px,2vw,26px);line-height:1.28;letter-spacing:-0.005em;color:#191919;margin:0 0 22px;max-width:42ch} .sf-lg-lede{font-family:inherit;font-size:clamp(15px,1.35vw,18px);line-height:1.55;color:#4a463f;margin:0 0 clamp(40px,5vw,64px);max-width:66ch} .sf-lg-label{font-family:inherit;font-weight:600;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:#8f8a80;margin:0 0 26px} .sf-lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);margin:0 0 clamp(40px,5vw,60px)} .sf-lg-mod{padding:20px 0;border-top:1px solid rgba(25,25,25,.14)} .sf-lg-mt{font-family:inherit;font-weight:800;font-size:clamp(17px,1.4vw,20px);line-height:1.2;color:#191919;margin:0 0 8px} .sf-lg-md{font-family:inherit;font-size:15px;line-height:1.5;color:#4a463f;margin:0;max-width:44ch} .sf-lg-close{font-family:inherit;font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.32;letter-spacing:-0.005em;color:#191919;margin:0;max-width:48ch} @media (max-width:767px){.sf-lg-grid{grid-template-columns:1fr}} /* Leistungen-Body: altes About-Flex (2-Spalten mit gap) ueberschreiben -> Blöcke sauber gestapelt und linksbuendig auf der Flucht. */ .caseinfo.about .caseinfocontainer.about{display:block !important;gap:0 !important} /* ------------------------------------------------------------ 52) Kontaktbereich: Hinweis unter dem Formular + optional-Label ------------------------------------------------------------ */ .sf-contact-hint{ font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:13px;line-height:1.5;color:#8f8a80; margin-top:14px;max-width:46ch; } .paragraph.form .sf-opt{color:#a8a196;font-weight:400;} /* ============================================================ 53) MODULARE TYPE-SCALE (Review: "was ist gross, was stuetzt nur") Ersetzt die ~11 bespoke Headline-Groessen durch 4 klare Stufen. Spaeter im File -> gleiche Spezifitaet gewinnt ueber die frueheren Regeln. XL Hook (Opening) > L Peaks (Problem-Endpunkt / Cases / Kontakt-Abschluss) > M Oeffner (Loesung / Leistungen) > S sekundaer (Mid-CTA / Ref-Intro ...) ============================================================ */ :root{ --t-xl: clamp(34px,4.8vw,72px); /* Mobile-Floor angehoben: Hook bleibt klar der groesste Ton */ --t-l: clamp(28px,3.9vw,60px); --t-m: clamp(23px,3vw,46px); /* Mobile-Floor leicht runter -> klarer Abstand zur L-Stufe */ --t-s: clamp(20px,2.4vw,34px); /* dito zur M-Stufe */ --t-lede:clamp(17px,1.4vw,20px); } /* XL */ .sffunnel .sf-h1{font-size:var(--t-xl)} /* L -- die drei bewussten Grossmomente */ .sffunnel .sf-reframe p{font-size:var(--t-l);font-weight:900} .sf-case .casetitlecontainer .headline2{font-size:var(--t-l)} .contactsection .sf-contact-lead{font-size:var(--t-l)} /* M -- ruhige zweite Stufe (Oeffner), einheitlich fw800 */ .sffunnel .sf-solve .sf-answer{font-size:var(--t-m);font-weight:800} .sf-about .claim.about{font-size:var(--t-m)} /* S -- sekundaere Oeffner / Pointen */ .sf-midcta-lead{font-size:var(--t-s)} .sffunnel .sf-solve .sf-gegen .sf-neg{font-size:var(--t-s)} .sffunnel .sf-solve .sf-kick{font-size:var(--t-s)} /* ============================================================ 54) PROBLEMFLAECHE neu gewichtet -- Endpunkt muss dominieren. Intro leiser, Haupttreffer klar, Sub-Paare eindeutig stuetzend, "Es ist ein Strukturproblem." (sf-reframe = L, s.o.) als Peak. ============================================================ */ .sffunnel .sf-plead{font-size:var(--t-lede);font-weight:500} .sffunnel .sf-act-head p{font-size:clamp(23px,2.9vw,44px)} .sffunnel .sf-act-head .sf-hit{font-weight:800} .sffunnel .sf-act-head .sf-set{font-weight:500} .sffunnel .sf-act-sub .sf-s p{font-size:clamp(15px,1.35vw,20px)} /* ============================================================ 55) ABSCHLUSS -- dunkles Footer-Bookend (spiegelt die Problemflaeche) + Kontakt-Reassurance/Direktdraht/Sign-off in der linken Spalte. Kontakt-Headline ist bereits L (s. 53) -> finaler Peak. ============================================================ */ /* Dunkler Footer als Schluss-Bahn (Ton der Problemflaeche, nicht reinschwarz) */ .footersection{background:#141413;border-top:0} .footersection .navflowtitle.hero{color:#f2e5da;font-size:clamp(30px,3.8vw,54px)} .footersection .sf-footer-claim{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;color:#8f8a80;margin-top:10px;max-width:34ch} .footersection .text-block-15-copy{color:#b4aea4} .footersection .footernav{color:#b4aea4} .footersection .footernav:hover{color:#f2e5da} .footersection .text-block-14{color:#8f8a80} .footersection .div-block-34-copy:hover .text-block-14{color:#f2e5da} .footersection .text-block-16{color:#7a756c} .footersection .sf-footerlang a{color:#b4aea4} .footersection .sf-footerlang a.active{color:#f2e5da} .footersection .sf-footerlang .sep{color:#5a554d} /* Kontakt: Reassurance + direkter Draht + menschlicher Sign-off (fuellt den Totraum links) */ .sf-contact-reassure{margin-top:clamp(30px,4.5vh,48px)} .sf-cr-line{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.4;letter-spacing:-.005em;color:#191919;margin:0 0 clamp(16px,2.4vh,22px);max-width:34ch} .sf-cr-direct{display:flex;flex-direction:column;gap:5px;margin:0 0 clamp(16px,2.4vh,22px)} .sf-cr-direct a{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:16px;color:#2c2a27;text-decoration:none;border-bottom:1px solid transparent;width:max-content;transition:border-color .2s ease} .sf-cr-direct a:hover{border-bottom-color:#191919} .sf-cr-sign{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:15px;color:#6a655d;margin:0} /* ============================================================ 56) EYEBROW/Label-Drift beseitigen: die zwei neuen Sektionen (13px/0.18em) auf den Mehrheits-Standard (12px/0.16em/#8f8a80) ziehen. ============================================================ */ .sf-lg-label{font-size:12px;letter-spacing:0.16em;color:#8f8a80} /* ============================================================ 57) Leistungen-Module: Gewichts-Inversion beheben (Titel fw800 war schwerer als die Subline fw700 darueber) -> Titel auf fw700. ============================================================ */ .sf-lg-mt{font-weight:700} .sf-nowrap{white-space:nowrap} /* ============================================================ 58) Typo-Feinschliff (Review 2): Umbruch-Guards + Kontrast ============================================================ */ /* "Umsetzung."-Runt in der Leistungen/About-Headline vermeiden */ .sf-about .claim.about,.claim.about{text-wrap:balance} /* Kontakt-Peak: reproduzierbarer Umbruch statt Zufall der Spaltenbreite */ .contactsection .sf-contact-lead{max-width:17ch;text-wrap:balance} /* Footer-Copyright auf AA-Kontrast (war ~4.3:1) */ .footersection .text-block-16{color:#8f8a80} /* Mid-CTA-Link auf Eyebrow-Standard-Laufweite */ .sf-midcta-link{letter-spacing:0.16em} /* ============================================================ 59) FINALE-Umbau (unterer Teil spannender): Feed-Streifen (Bild-Beat) + Footer-Wortmarken-Stempel + Portrait-Platzhalter + Leistungen-Schluss-Peak + Kontakt-Ton ============================================================ */ /* Footer-Stempel entfernt -> alter Footer mit SUPERFEED-Wortmarke wiederhergestellt */ /* Portrait-Platzhalter am Kontakt (Foto Michael & Stephan folgt) */ .sf-portrait-ph{margin-top:clamp(30px,4.5vh,48px);width:100%;max-width:360px;aspect-ratio:5/4;display:flex;align-items:flex-end;justify-content:flex-start;padding:14px;box-sizing:border-box;background-color:#cfc6b8;background-image:repeating-linear-gradient(135deg,rgba(60,50,40,.10) 0 1px,transparent 1px 10px);border:1px solid rgba(60,50,40,.22)} .sf-portrait-ph span{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#7a746a} /* Leistungen-Schlusssatz als Groessensprung-Peak statt Fussnote */ .sf-lg-close{font-size:clamp(24px,2.8vw,40px);font-weight:800;line-height:1.16;margin-top:clamp(44px,6vw,84px);max-width:52ch} /* ============================================================ 60) Funnel-LÖSUNG als starker Payoff (Agenten-Review): eigener L-Peak, der das "Strukturproblem" kontert; 3 Konter-Zeilen; "keine Agentur" als 2. Peak; Proofs inszeniert; Kick zurueckgenommen. ============================================================ */ /* Auflösungs-Satz auf Problem-Peak-Niveau (L/900 statt M/800) */ .sffunnel .sf-solve .sf-answer{font-size:var(--t-l);font-weight:900;max-width:22ch} .sffunnel .sf-solve .sf-answer .sf-a1{color:#726c64;font-weight:500} .sffunnel .sf-solve .sf-answer .sf-a2{color:var(--sf-ink)} /* 3 Konter-Zeilen: Lösung (Ink/fett) + gedämpfter Kontrast */ .sffunnel .sf-solve .sf-wins{margin:clamp(26px,3.8vh,44px) 0 0;display:flex;flex-direction:column;gap:clamp(9px,1.5vh,15px);max-width:none} .sffunnel .sf-solve .sf-win{margin:0;font-size:clamp(17px,1.7vw,23px);line-height:1.25;letter-spacing:-.008em} .sffunnel .sf-solve .sf-win-hit{font-weight:800;color:var(--sf-ink)} .sffunnel .sf-solve .sf-win-not{font-weight:500;color:#8f8a80} /* "SUPERFEED ist keine Agentur." als 2. Peak (M/900) */ .sffunnel .sf-solve .sf-gegen .sf-neg{font-size:var(--t-m);font-weight:900} /* Proofs inszeniert: 2 Spalten, Namen groesser/Ink, Zahlen betont */ .sffunnel .sf-solve .sf-team{grid-template-columns:1fr 1fr;max-width:none;gap:clamp(24px,3vw,52px)} .sffunnel .sf-solve .sf-m-name{font-size:clamp(19px,1.7vw,24px);font-weight:800;color:var(--sf-ink)} .sffunnel .sf-solve .sf-m-num{color:inherit;font-weight:400} /* Kick als ruhige Landung zuruecknehmen (raus aus der 34px-Konkurrenz) */ .sffunnel .sf-solve .sf-kick{font-size:clamp(18px,1.7vw,24px);font-weight:700} /* ============================================================ 61) Lösung: kurzer Payoff + vier gestapelte "Wie"-Zeilen (Michael) ============================================================ */ /* kurzer Payoff darf breiter, damit die 2 Zeilen je einzeilig bleiben */ .sffunnel .sf-solve .sf-answer{max-width:26ch} /* vier klare Aktions-Zeilen untereinander */ .sffunnel .sf-solve .sf-steps{margin:clamp(26px,3.8vh,44px) 0 0;display:flex;flex-direction:column;gap:clamp(6px,1vh,11px)} .sffunnel .sf-solve .sf-steps p{margin:0;font-weight:700;font-size:clamp(18px,1.9vw,26px);line-height:1.18;letter-spacing:-.01em;color:var(--sf-ink)} /* ============================================================ 62) Lösung: "SUPERFEED ist keine Agentur." als eigenständige These (Register-Wechsel statt Größe: leiser Vorlauf -> isolierte Pointe, Hairline raus, Kapitel-Weißraum) + Schluss-Block-Hierarchie. ============================================================ */ /* These aus dem Peer-Rhythmus lösen: keine Oberlinie, echter Kapitel-Abstand */ .sffunnel .sf-solve .sf-gegen{border-top:0;padding-top:0;margin-top:clamp(58px,9vh,112px)} .sffunnel .sf-solve .sf-neg{margin:0} .sffunnel .sf-solve .sf-neg-lead{display:block;font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:0;color:#8f8a80;margin:0 0 clamp(6px,1vh,12px)} .sffunnel .sf-solve .sf-neg-hit{display:block;font-weight:900;font-size:clamp(30px,3.4vw,50px);line-height:.98;letter-spacing:-.022em;color:var(--sf-ink)} .sffunnel .sf-solve .sf-gegen .sf-pos{margin-top:clamp(12px,1.8vh,20px)} /* Schluss-Block: Kick über die Proofs, Body kräftiger, Staccato als eigener Beat */ .sffunnel .sf-solve .sf-close{margin-top:clamp(40px,6vh,72px)} .sffunnel .sf-solve .sf-kick{font-weight:800;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.015em;margin:0 0 clamp(18px,2.6vh,28px)} .sffunnel .sf-solve .sf-close .sf-body-quiet{color:#524d46;font-size:clamp(16px,1.35vw,19px);line-height:1.55;max-width:52ch} /* ============================================================ 63) Lösung in drei klaren Ebenen (Michael-Briefing): (1) Payoff gross links + (2) vier Zeilen als Scan-Gruppe rechts, (3) About-Cut (gestufte Aussage) + Proof als Beweis + Abschluss abgesetzt. ============================================================ */ /* Ebene 1+2: zweispaltig (Payoff | Scan-Gruppe) */ .sffunnel .sf-solve .sf-solve-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,5vw,84px);align-items:start} .sffunnel .sf-solve .sf-solve-top .sf-answer{margin:0} .sffunnel .sf-solve .sf-solve-top .sf-steps{margin:0;padding-top:clamp(6px,1vh,16px);border-left:1px solid rgba(25,25,25,.16);padding-left:clamp(24px,2.6vw,44px)} @media(max-width:820px){ .sffunnel .sf-solve .sf-solve-top{grid-template-columns:1fr;gap:clamp(22px,4vh,34px)} .sffunnel .sf-solve .sf-solve-top .sf-steps{border-left:0;padding-left:0} } /* Ebene 3: About-Cut — klare Trennung, gestufte Aussage */ .sffunnel .sf-solve .sf-gegen{border-top:1px solid rgba(25,25,25,.14);margin-top:clamp(56px,8vh,104px);padding-top:clamp(40px,6vh,72px)} .sffunnel .sf-solve .sf-gegen .sf-neg{font-size:var(--t-m);font-weight:900;line-height:1.02;letter-spacing:-.02em;margin:0;color:var(--sf-ink)} .sffunnel .sf-solve .sf-gegen .sf-pos{font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.25;color:#3a3733;margin:clamp(8px,1.4vh,16px) 0 0;max-width:36ch} .sffunnel .sf-solve .sf-about-detail{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#6a655d;margin:clamp(16px,2.4vh,26px) 0 0;max-width:58ch} /* Proof als Beweis: Foto + Name gross + Rolle kompakt */ .sffunnel .sf-solve .sf-proof{border-top:1px solid rgba(25,25,25,.14);margin-top:clamp(36px,5vh,60px);padding-top:clamp(28px,4vh,44px)} .sffunnel .sf-solve .sf-team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);max-width:none} .sffunnel .sf-solve .sf-member{display:flex;gap:clamp(14px,1.4vw,20px);align-items:flex-start} .sffunnel .sf-solve .sf-m-photo{flex:0 0 auto;width:clamp(60px,6vw,84px);aspect-ratio:1/1;background-color:#cfc6b8;background-image:repeating-linear-gradient(135deg,rgba(60,50,40,.10) 0 1px,transparent 1px 10px);border:1px solid rgba(60,50,40,.2)} .sffunnel .sf-solve .sf-m-name{font-size:clamp(20px,1.9vw,26px);font-weight:800;color:var(--sf-ink);margin:0 0 5px;line-height:1.1} .sffunnel .sf-solve .sf-m-desc{font-size:clamp(13px,1.05vw,15px);line-height:1.42;color:#6a655d;margin:0} /* Abschluss: klar abgesetzt als letzte breite Zeile */ .sffunnel .sf-solve .sf-close{border-top:1px solid rgba(25,25,25,.14);margin-top:clamp(44px,6.5vh,84px);padding-top:clamp(32px,4.5vh,56px)} @media(max-width:640px){.sffunnel .sf-solve .sf-team{grid-template-columns:1fr}} /* ============================================================ 64) Lösung 3-Ebenen Feinschliff (Michael): Trennlinie raus, rechten Block näher, vier Zeilen etwas kleiner/leichter. ============================================================ */ .sffunnel .sf-solve .sf-solve-top{gap:clamp(22px,2.8vw,50px)} .sffunnel .sf-solve .sf-solve-top .sf-steps{border-left:0;padding-left:0} .sffunnel .sf-solve .sf-steps p{font-weight:600;font-size:clamp(16px,1.5vw,22px)} /* 65) "SUPERFEED ist keine Agentur." auf Payoff-Niveau (L) — Michael-Entscheid B */ .sffunnel .sf-solve .sf-gegen .sf-neg{font-size:var(--t-l);line-height:.98} /* ============================================================ 66) Payoff als eigene Farbfläche (Taupe) bündig unter dem Problem; Trennlinie raus (Farbgrenze übernimmt). Dunkel einen Tick grauer. ============================================================ */ .sffunnel .sf-solve{padding-top:0} .sffunnel .sf-solve > .sf-fbar{display:none} .sffunnel .sf-solve .sf-solve-top{background:#e6cbb8;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-top:clamp(50px,7.5vh,96px);padding-bottom:clamp(50px,7.5vh,96px);padding-left:max(20px,calc((100vw - 1200px)/2));padding-right:max(20px,calc((100vw - 1200px)/2));box-sizing:border-box} .sffunnel .sf-solve .sf-gegen{border-top:0;margin-top:clamp(50px,7.5vh,92px);padding-top:0} /* Dunkel-Ton konsistent einen Tick grauer (nicht reinschwarz) */ .sffunnel .sf-dark{background:rgba(36,34,32,0.98)} .footersection{background:#242220} /* ============================================================ 67) Schluss-Block als 3 Paare (Michael-Copy): Label + Erklärung ============================================================ */ .sffunnel .sf-solve .sf-close-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);margin-top:clamp(22px,3.4vh,38px)} .sffunnel .sf-solve .sf-cg-lbl{font-weight:800;font-size:clamp(17px,1.4vw,20px);line-height:1.2;letter-spacing:-.01em;color:var(--sf-ink);margin:0 0 8px} .sffunnel .sf-solve .sf-cg-txt{font-weight:400;font-size:clamp(14px,1.15vw,16px);line-height:1.45;color:#6a655d;margin:0;max-width:36ch} @media(max-width:760px){.sffunnel .sf-solve .sf-close-grid{grid-template-columns:1fr;gap:clamp(16px,3vh,24px)}} /* ============================================================ 68) Zwischen-CTA als contained Taupe-Box (statt Vollstreifen), links auf der Flucht, ~2/3 Breite; Fläche drumherum Creme. ============================================================ */ .sf-midcta{background:#f2e5da} .sf-midcta .sf-midcta-inner{background:#e6cbb8;max-width:820px;margin:0;padding:clamp(40px,4.2vw,60px);box-sizing:border-box} .sf-midcta .sf-midcta-lead{max-width:22ch} .sf-midcta .sf-midcta-sub{max-width:44ch} /* ============================================================ 69) CTA-Box an Content-Flucht + Content-Breite; Referenzen-Intro auf schlanken Eyebrow-Marker reduziert (grosser Satz raus). ============================================================ */ /* Box: gleicher Flucht-/Breiten-Rahmen wie .sf-wrap */ .sf-midcta{padding-left:20px;padding-right:20px} .sf-midcta > .websitecontainer{width:100%;max-width:1200px;margin:0 auto;padding:0} .sf-midcta .sf-midcta-inner{background:#e6cbb8;width:100%;max-width:none;margin:0;padding:clamp(40px,4.2vw,60px);box-sizing:border-box} /* ============================================================ 70) Team-Fotos im Proof (echt) + CTA-Box heller/mittig/kompakter ============================================================ */ /* Proof: echte Fotos (etwas groesser, gecovert) */ .sffunnel .sf-solve .sf-m-photo{width:clamp(68px,6.5vw,96px);object-fit:cover;object-position:50% 30%;display:block;background:none} /* CTA-Box: warm-weiss + feine Kante, mittig, kompakter, weniger Flaeche */ .sf-midcta{padding-top:clamp(34px,4.2vw,60px);padding-bottom:clamp(34px,4.2vw,60px)} .sf-midcta .sf-midcta-inner{background:#fcf9f3;border:1px solid rgba(25,25,25,.11);max-width:720px;margin:0 auto;padding:clamp(36px,3.6vw,52px);text-align:center} .sf-midcta .sf-midcta-lead{max-width:20ch;margin:0 auto 14px} .sf-midcta .sf-midcta-sub{max-width:46ch;margin:0 auto 26px} .sf-midcta .sf-midcta-actions{justify-content:center} /* ============================================================ 71) CTA-Box zurueck auf Taupe + content-breit; Sektion an obere Flaeche angleichen (kein doppelter Untergrund); Proof-Fotos groesser. ============================================================ */ /* Box-Sektion wie die Loesungs-Flaeche darueber (leicht transparent) -> kein Seam */ .sf-midcta{background:rgba(242,229,218,0.98)} /* Box: Taupe, content-breit, ohne Kante; Inhalt bleibt zentriert */ .sf-midcta .sf-midcta-inner{background:#e6cbb8;border:0;max-width:none;margin:0;padding:clamp(40px,4.2vw,60px);text-align:center} /* Proof-Fotos ~2,3x groesser, Text vertikal daneben zentriert */ .sffunnel .sf-solve .sf-member{align-items:center} .sffunnel .sf-solve .sf-m-photo{width:clamp(130px,14vw,220px)} /* ============================================================ 72) Dramaturgie-Feinschliff unterer Funnel (Michael): Personen als Module (Foto oben, Name drunter, groesser, links geclustert); Vorteile mit Punch (Label gross, Erklaerung klein/hell); CTA kein Card-Look -> full-width Taupe-Band, linksbuendig. ============================================================ */ /* Personen-Module: Foto oben, Name/Rolle darunter, kompakt & links */ .sffunnel .sf-solve .sf-team{display:flex;flex-wrap:wrap;gap:clamp(30px,3.6vw,60px);justify-content:flex-start;max-width:none} .sffunnel .sf-solve .sf-member{flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vh,16px);width:clamp(220px,22vw,300px)} .sffunnel .sf-solve .sf-m-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%} .sffunnel .sf-solve .sf-m-name{margin:0 0 4px} .sffunnel .sf-solve .sf-m-desc{max-width:none} /* Vorteile: Label gross/stark, Erklaerung klein/hell -> mehr Kontrast */ .sffunnel .sf-solve .sf-cg-lbl{font-size:clamp(20px,2vw,28px);margin:0 0 6px} .sffunnel .sf-solve .sf-cg-txt{font-size:clamp(13px,1.02vw,14px);color:#8f8a80;max-width:32ch} /* CTA: full-width Taupe-Band, linksbuendig, kein Kasten */ .sf-midcta{background:#e6cbb8;padding-top:clamp(52px,6.5vw,92px);padding-bottom:clamp(52px,6.5vw,92px)} .sf-midcta .sf-midcta-inner{background:none;border:0;max-width:none;margin:0;padding:0;text-align:left} .sf-midcta .sf-midcta-lead{max-width:24ch;margin:0 0 14px} .sf-midcta .sf-midcta-sub{max-width:48ch;margin:0 0 28px} .sf-midcta .sf-midcta-actions{justify-content:flex-start} /* ============================================================ 73) Feinschliff (Michael): Personen ueber die Breite verteilt, Label naeher an Fotos, Benefit-Erklaerungen kleiner/heller. ============================================================ */ /* Personen-Module ueber die Breite verteilen (weniger links-lastig) */ .sffunnel .sf-solve .sf-team{justify-content:space-between;max-width:1040px} /* "Wer dahintersteht" naeher an die Fotos */ .sffunnel .sf-solve .sf-proof .sf-glabel{margin:0 0 clamp(8px,1.2vh,14px)} /* Benefit-Erklaerungen zurueckgenommen -> Headlines knallen mehr */ .sffunnel .sf-solve .sf-cg-txt{font-size:clamp(12px,0.95vw,13px);color:#9a948a} /* ============================================================ 74) CTA kein farbiger Kasten mehr -> ruhiger Zwischenabschluss des About-Blocks im bestehenden Raster (Michael). ============================================================ */ /* keine eigene Flaeche -> wie die Loesungsflaeche; grosszuegig unten */ .sf-midcta{background:rgba(242,229,218,0.98);padding-top:0;padding-bottom:clamp(60px,9vw,116px)} /* feine Linie darueber (wie die anderen Sub-Bloecke), linksbuendig, kein bg */ .sf-midcta .sf-midcta-inner{background:none;border-top:1px solid rgba(25,25,25,.14);max-width:none;margin:0;padding:clamp(44px,6.5vh,80px) 0 0;text-align:left} .sf-midcta .sf-midcta-lead{max-width:24ch;margin:0 0 14px} .sf-midcta .sf-midcta-sub{max-width:48ch;margin:0 0 30px} .sf-midcta .sf-midcta-actions{justify-content:flex-start} /* Sekundaerlink deutlich ruhiger als der Button */ .sf-midcta .sf-midcta-link{color:#8f8a80;border-bottom-color:rgba(138,132,121,.3)} .sf-midcta .sf-midcta-link:hover{color:#191919;border-bottom-color:#191919} /* ============================================================ 75) Auflösung kein eigener Slab mehr: Payoff auf Creme im Flow (Taupe raus, kein full-bleed), Abstand zu "keine Agentur" gestrafft. ============================================================ */ .sffunnel .sf-solve .sf-solve-top{background:none;width:auto;margin-left:0;margin-right:0;padding-left:0;padding-right:0;padding-top:clamp(46px,7vh,88px);padding-bottom:clamp(18px,2.6vh,32px)} /* Abstand Payoff -> "SUPERFEED ist keine Agentur" straffen */ .sffunnel .sf-solve .sf-gegen{margin-top:clamp(30px,4vh,52px)} /* ============================================================ 76) Referenzen-Dropdown in der Logo-Topbar (nur Desktop) Panel traegt eigene Farbe (Creme, Ink-Text) -> auf jeder Leisten-Farbe lesbar. Erscheint on-hover / focus-within. ============================================================ */ .sf-drop{display:none} @media (min-width:769px){ .sf-topbar .sf-hasdrop{position:relative;display:flex;align-items:center;height:52px} /* Panel: nur Flaeche (kein Rahmen, kein Blur); linksbuendig zum "R" von Referenzen; faehrt von oben nach unten aus (Hoehen-Reveal, Schatten bleibt); Farbe kommt per JS aus dem aktuellen Abschnitt (.32s wie die Leiste). */ .sf-topbar .sf-drop{display:block;position:absolute;top:100%;left:-18px;min-width:236px;background:#f2f1ed;box-shadow:0 20px 46px -16px rgba(20,18,16,.34);border-radius:3px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .34s cubic-bezier(.2,.72,.28,1),opacity .2s ease,background-color .32s ease;z-index:40} .sf-topbar .sf-hasdrop:hover .sf-drop,.sf-topbar .sf-hasdrop:focus-within .sf-drop{opacity:1;pointer-events:auto;max-height:420px} .sf-drop-inner{padding:6px} .sf-topbar .sf-drop a.sf-drop-item{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:9px 12px;border-radius:2px;text-decoration:none;text-transform:none;letter-spacing:0;white-space:nowrap} .sf-topbar .sf-drop a.sf-drop-item:hover{background:rgba(25,25,25,.06)} .sf-drop-name{font-size:14px;font-weight:600;letter-spacing:0.005em;text-transform:none;color:#242220} .sf-drop-cat{font-size:10.5px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:#8f8a80} /* Dunkle Abschnitte: Panel-Farbe kommt per JS, Text/Hover invertieren */ .sf-topbar.on-dark .sf-drop-name{color:#f4efe6} .sf-topbar.on-dark .sf-drop-cat{color:#bdb7ac} .sf-topbar.on-dark .sf-drop a.sf-drop-item:hover{background:rgba(255,255,255,.09)} } /* ============================================================ 77) Flacker-Fix Dropdown/Leiste: Topbar dauerhaft auf eigene Compositing-Ebene heben, damit das Oeffnen/Schliessen des Panels (Ebene entsteht/vergeht) nicht die Leisten-Unterkante neu zeichnet. Nur im nicht-gescrollten (absolute) Zustand trat das auf. ============================================================ */ .sf-topbar{will-change:transform} .sf-topbar .sf-drop{will-change:max-height,opacity} /* ============================================================ 78) Footer: gesamte Schrift weiss (Wortmarke, Claim, Adresse, Navigation, Sprache, Copyright). Hover leicht abgesenkt. ============================================================ */ .footersection .navflowtitle.hero, .footersection .sf-footer-claim, .footersection .text-block-15-copy, .footersection .footernav, .footersection .text-block-14, .footersection .text-block-16, .footersection .sf-footerlang a, .footersection .sf-footerlang a.active, .footersection .sf-footerlang .sep{color:#f5f5f5} .footersection .footernav:hover, .footersection .div-block-34-copy:hover .text-block-14, .footersection .sf-footerlang a:hover{color:#f5f5f5;opacity:.68} /* ============================================================ 79) Footer kompakter: Claim raus (HTML), Trennlinie (footercontainer border-bottom) raus, Abstaende reduziert, Sprachumschalter oben buendig. ============================================================ */ .footersection{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(26px,3.6vh,46px)} .footersection .footercontainer{border-bottom:0;padding-bottom:clamp(26px,3.6vh,44px)} .footergrid{grid-row-gap:clamp(22px,3vh,38px)} .footersection .text-block-15-copy{margin-top:clamp(10px,1.4vh,16px)} .footersection .sf-footerlang{margin-top:0} .footersection .text-block-16{margin-top:clamp(18px,2.4vh,28px)} /* ============================================================ 80) Leistungsbereich — Umsetzung der 3 Reviews (Typo/Layout/Copy) ============================================================ */ /* Intro: Headline oben ganzflaechig (links, sauber 2-zeilig), darunter Sub + Lede als 2-Spalter -> Breite genutzt, Headline nicht gequetscht */ @media (min-width:900px){ .sf-lg-introtext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,5vw,80px);align-items:start} } .sf-lg-introtext{margin-top:clamp(20px,3vh,34px)} .sf-lg-intro .sf-lg-sub{margin-bottom:0;max-width:26ch} .sf-lg-intro .sf-lg-lede{margin-bottom:0;max-width:48ch} /* v325: Unter Grid-Breite stapeln Sub + Lede -> sonst kleben sie (Mobile/Tablet). Eigene max-width-Query, damit die 900px-Grid-Regel (Sub/Lede nebeneinander) unberuehrt bleibt. */ @media (max-width:899px){ .sf-lg-intro .sf-lg-sub{margin-bottom:clamp(14px,2vh,20px)} } /* Mittelregister trennen: Sub groesser (Balance), Modultitel kleiner -> klare Stufe */ .sf-lg-sub{font-size:clamp(20px,2vw,28px);text-wrap:balance} .sf-lg-mt{font-size:clamp(15px,1.15vw,17px)} /* Modultext leicht fluid fuer breite Screens */ .sf-lg-md{font-size:clamp(15px,1.05vw,16px)} /* Schluss-Peak enger setzen wie die Headline */ .sf-lg-close{letter-spacing:-0.015em} /* Sektion polstern — oben knapp, da im Logo-Modus schon eine 52px-Titelleiste darueber liegt (sonst zu grosse Creme-Luecke zum letzten Case); unten grosszuegig. */ .caseinfo.about.sf-about{padding-top:clamp(18px,2.2vh,34px);padding-bottom:clamp(64px,8vh,104px)} /* Leistungen als klare Uebersicht: beide Spalten auf gleicher Hoehe, Spalten-Fluss (linke Spalte = Modul 1-4, rechte = 5-8). Kein Versatz. */ @media (min-width:900px){ .sf-lg-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;margin-bottom:clamp(40px,5vw,64px)} } /* Schluss-Satz als Abschlussmoment mit mehr Abstand zur Liste */ .sf-lg-close{margin-top:clamp(60px,8vw,108px)} /* ============================================================ 81) Globale, konsistente Section-Abstaende (unten). Im Logo-Modus liegt vor jeder Sektion eine 52px-Titelleiste (Topbar-Freihaltung). Deshalb Section-Padding OBEN klein halten und pro-Sektion-Alt-Abstaende (80px casetitle-Margin, 52px contactcontainer) neutralisieren; UNTEN ein einheitlicher Wert. ============================================================ */ :root{--sf-sec-top:clamp(8px,1.2vh,16px);--sf-sec-bottom:clamp(40px,5vh,64px)} /* Alt-Abstaende raus */ .sf-about .casetitlecontainer.about{margin-top:0} .contactsection .contactcontainer{padding-top:0} /* Einheitliche Section-Polsterung: Leistungen + Kontakt */ .caseinfo.about.sf-about, .contactsection .caseinfo.about{padding-top:var(--sf-sec-top);padding-bottom:var(--sf-sec-bottom)} /* Footer oben im gleichen Rhythmus */ .footersection{padding-top:var(--sf-sec-bottom)} /* ============================================================ 82) Sticky-Stacking-Funnel — Prototyp, nur mit ?stack=1 (Desktop). Hook bleibt oben kleben (Basis, KEIN Abdunkeln); die Problem-Flaeche schiebt sich deckend darueber. Problem pinnt NICHT -> scrollt durch, danach schiebt sich die Loesung darueber (und pinnt). ============================================================ */ /* Neu (2026-08-21): Hook+Offerstrip = Block 1 (sf-stackblock) pinnt oben und faded weg, sobald About drueberschiebt; About bleibt hell, laesst aber das Grid durch -> kein Doppel-Schleier. Desktop + Mobile. */ .sf-stack .sffunnel{position:relative} /* Block 1 = volle Viewport-Hoehe, EIN Schleier auf dem Wrapper, pinnt oben, faded weg */ .sf-stack .sf-stackblock{ position:sticky;top:0;z-index:1; min-height:100vh;min-height:100svh;box-sizing:border-box; display:flex;flex-direction:column;justify-content:flex-start; padding-top:clamp(64px,9vh,120px); background:rgba(18,17,16,calc(.8 * var(--scrimA,1))); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); will-change:background-color; } /* Hook-Textzeilen faden per JS (von unten nach oben) -> weiche Transition */ .sf-stack .sf-stackblock .sf-hook-eyebrow, .sf-stack .sf-stackblock .sf-h1, .sf-stack .sf-stackblock .sf-hooklead, .sf-stack .sf-stackblock .sf-offer-kicker, .sf-stack .sf-stackblock .sf-offer-grid{transition:opacity .12s linear;will-change:opacity} /* Kinder-Schleier raus -> nur der eine Wrapper-Schleier (kein Doppel). Hohe Spezifitaet, um die noproblem-Schleier-Regel zu schlagen. */ body.body.sf-stack.sf-noproblem .sffunnel .sf-hook, body.body.sf-stack.sf-noproblem .sffunnel .sf-offerstrip{ background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; } /* About schiebt sich drueber: bleibt hell, Grid scheint durch */ .sf-stack .sffunnel > .sf-solve{position:relative;z-index:3} body.body.sf-stack.sf-noproblem .sffunnel .sf-solve{background:rgba(242,241,237,0.98)} /* Stufe 2: Kontakt-CTA "Soll Ihr Kanal staerker werden?" liegt FIX (position:fixed) zentriert auf dem dunklen Schleier hinter dem Content. About scrollt weg und deckt sie in einer ~halben-Viewport-Luecke auf; Referenzband/Cases decken wieder zu. JS schaltet .sf-cta-live nur im Reveal-Fenster (sonst wuerde sie ueber Hero schweben). */ body.body.sf-stack .sf-midcta{ position:fixed;top:0;left:0;right:0;height:100vh;height:100svh;box-sizing:border-box; display:none;flex-direction:column;justify-content:center; z-index:1; } body.body.sf-stack .sf-midcta.sf-cta-live{display:flex} /* halbe-Viewport-Luecke zwischen About und Referenzband (Reveal-Fenster) */ body.body.sf-stack .sf-refband{margin-top:50vh;margin-top:50svh} body.body.sf-stack .sf-refband, body.body.sf-stack .aboutsection, body.body.sf-stack .casesection{position:relative;z-index:2} /* ============================================================ 83) Kontakt als dunkler Abschluss (Favorit): dunkle Flaeche wie die Problemflaeche, helle Typografie, zurueckhaltende Formularlinien, heller kontrastreicher Button. ============================================================ */ .contactsection{background:#242220} .contactsection .sf-contact-lead{color:#f4efe6} .contactsection .casetext .paragraph{color:#c9c3b8} .contactsection .sf-cr-line{color:#f4efe6} .contactsection .sf-cr-direct a{color:#c9c3b8} .contactsection .sf-cr-direct a:hover{border-bottom-color:#f4efe6} .contactsection .sf-cr-sign{color:#8f8a80} .contactsection .paragraph.form{color:#a8a196} .contactsection .text-field.w-input, .contactsection .text-field-2.w-input, .contactsection .textarea.w-input{color:#f4efe6;border-bottom-color:rgba(255,255,255,0.24)} .contactsection .text-field.w-input:focus, .contactsection .text-field-2.w-input:focus, .contactsection .textarea.w-input:focus{border-bottom-color:#f4efe6} .contactsection .submit-button.w-button{background:#f4efe6;color:#191919} .contactsection .submit-button.w-button:hover{background:#e6cbb8;color:#191919;box-shadow:none;transform:none} /* ============================================================ 84) Footer wieder HELL (Kontakt ist jetzt dunkel -> heller Abschluss). Ueberschreibt die dunklen Footer-Regeln (Bg + weisse Schrift) mit der hellen Palette (Creme-Flaeche, Ink/Grau-Text) wie vor v96. ============================================================ */ .footersection{background:#f2e5da} .footersection .navflowtitle.hero{color:#191919} .footersection .sf-footer-claim{color:#8f8a80} .footersection .text-block-15-copy{color:#2c2a27} .footersection .footernav{color:#4a463f} .footersection .footernav:hover{color:#191919;opacity:1} .footersection .text-block-14{color:#8f8a80} .footersection .div-block-34-copy:hover .text-block-14{color:#191919;opacity:1} .footersection .text-block-16{color:#8f8a80} .footersection .sf-footerlang a{color:#4a463f} .footersection .sf-footerlang a:hover{color:#191919;opacity:1} .footersection .sf-footerlang a.active{color:#191919} .footersection .sf-footerlang .sep{color:#8f8a80} /* ============================================================ 85) Footer-Struktur: Primaer-Nav bleibt Spalte; Legal (Datenschutz/ Impressum) + Sprache + Copyright wandern in eine ruhige, kleine Fusszeile mit feiner Trennlinie. Klare Hierarchie statt "random". ============================================================ */ /* Ausgewogener Footer: Wortmarke+Adresse links, Nav rechts */ .footersection .footergrid{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(40px,6vw,120px)} .footersection .footergrid > div{width:auto} .footersection .div-block-52{display:block} .footersection .div-block-52 .div-block-33{width:auto} /* Fusszeile: Copyright links, Rechtstexte+Sprache rechts, EINE Typo-Familie */ .footersection .sf-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between;margin-top:clamp(32px,4.5vh,56px);padding-top:clamp(16px,2.2vh,24px);border-top:1px solid rgba(25,25,25,0.12)} .footersection .sf-footer-meta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px 14px} .footersection .sf-footer-bottom .text-block-16, .footersection .sf-footer-bottom .sf-legal-link, .footersection .sf-footer-bottom .sf-footerlang a, .footersection .sf-footer-bottom .sf-dot, .footersection .sf-footer-bottom .sf-footerlang .sep{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;line-height:1;color:#8f8a80;margin:0;text-decoration:none} .footersection .sf-footer-bottom .sf-legal-link{transition:color .2s ease} .footersection .sf-footer-bottom .sf-legal-link:hover, .footersection .sf-footer-bottom .sf-footerlang a:hover{color:#191919;opacity:1} .footersection .sf-footer-bottom .sf-footerlang{display:inline-flex;align-items:center;gap:6px;margin:0} .footersection .sf-footer-bottom .sf-footerlang a.active{color:#191919} .footersection .sf-footer-bottom .sf-dot, .footersection .sf-footer-bottom .sf-footerlang .sep{color:#c9bdae} @media (max-width:760px){ .footersection .footergrid{flex-direction:column;gap:clamp(28px,5vh,44px)} } @media (max-width:600px){ .footersection .sf-footer-bottom{flex-direction:column;align-items:flex-start;gap:12px} } /* ============================================================ 86) Dramaturgie Problem -> Loesung -> Ueber uns: Loesungsprinzip als FINALE im dunklen Block (verschoben), heller Block startet erst mit SUPERFEED. Auflösung dunkel inszeniert. ============================================================ */ /* Auflösung als Finale: Held-Zeile (2. Peak, knapp unter Reframe) + Grid Answer|Steps */ .sffunnel .sf-dark .sf-solve-top{margin-top:clamp(48px,8vh,104px);padding:0} .sffunnel .sf-dark .sf-solve-hero{margin:0 0 clamp(22px,3.2vh,38px);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:var(--t-l);line-height:1.04;letter-spacing:-.018em;color:#f4efe6;max-width:18ch} .sffunnel .sf-dark .sf-solve-grid .sf-answer{margin:0;font-size:clamp(20px,2vw,28px);font-weight:800;line-height:1.14;letter-spacing:-.01em;max-width:none} .sffunnel .sf-dark .sf-answer .sf-a1{color:#8f8a80;font-weight:500} .sffunnel .sf-dark .sf-answer .sf-a2{color:#f4efe6;font-weight:800} .sffunnel .sf-dark .sf-solve-grid .sf-steps{margin:0;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px)} .sffunnel .sf-dark .sf-steps p{margin:0;font-size:clamp(18px,1.7vw,23px);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#c9c3b8} @media (min-width:900px){ .sffunnel .sf-dark .sf-solve-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:start} .sffunnel .sf-dark .sf-solve-grid .sf-steps{border-left:1px solid rgba(255,255,255,0.18);padding-left:clamp(24px,2.6vw,44px)} } /* Heller Block oeffnet jetzt mit SUPERFEED (sf-gegen ist erstes Element) */ .sffunnel .sf-solve > .sf-wrap{padding-top:clamp(56px,9vh,110px)} .sffunnel .sf-solve .sf-gegen{margin-top:0} /* ============================================================ 87) Hygiene: alte Webflow-Navbar dauerhaft deaktiviert (die Logo- Topbar ist die eine Navigation) + Anchor-Sprungziele unter der fixen Topbar freihalten (native Hash-Sprünge / Mobile). ============================================================ */ .navbar{display:none !important} #hero,#ueber-uns,#referenzen,#leistungen,#kontakt,.casecontainer{scroll-margin-top:96px} /* 89 — Hook Einstiegs-Anker (Positionierung + Beleg) */ .sf-hook-eyebrow{margin:0 0 clamp(16px,2.2vh,26px);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;max-width:none} /* 90 — Feinschliff: Nummerierung raus, Footer mittig, Anker tiefer */ .sf-case .highlightgridblock::before,.sf-about .liste li::before{content:none;display:none} .sf-case .highlightgridblock,.sf-about .liste li{padding-top:18px} .footersection .sf-footer-bottom{justify-content:center;text-align:center} @media screen and (max-width:767px){.footersection .sf-footer-bottom{flex-direction:row;align-items:center;justify-content:center}} /* 91 — Nav-Hover (Topbar): Abdunkeln + wachsende Unterstreichung */ .sf-topbar .sf-menu>a,.sf-topbar .sf-menu>.sf-hasdrop>a.sf-navtop{position:relative;transition:color .2s ease} .sf-topbar .sf-menu>a::after,.sf-topbar .sf-menu>.sf-hasdrop>a.sf-navtop::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.72,.28,1)} .sf-topbar .sf-menu>a:hover,.sf-topbar .sf-menu>.sf-hasdrop>a.sf-navtop:hover{color:#191919} .sf-topbar .sf-menu>a:hover::after,.sf-topbar .sf-menu>.sf-hasdrop>a.sf-navtop:hover::after,.sf-topbar .sf-hasdrop:hover>a.sf-navtop::after{transform:scaleX(1)} .sf-topbar.on-dark .sf-menu>a:hover,.sf-topbar.on-dark .sf-menu>.sf-hasdrop>a.sf-navtop:hover{color:#f5f5f5} /* 92 — Mobile-Feinschliff: Problemwolke-Rhythmus, Footer mittig */ @media screen and (max-width:760px){ .sffunnel .sf-acts{gap:clamp(50px,8vh,74px)} .sffunnel .sf-act-sub{margin-top:clamp(20px,3vh,30px);gap:clamp(16px,2.4vh,22px)} } .footersection .sf-footer-bottom .sf-footer-meta{justify-content:center} /* 93 — Mobile-Menü (Sandwich) */ .sf-burger{display:none} .sf-mobilemenu{display:none} @media screen and (max-width:760px){ .sf-topbar .sf-menu{display:none !important} .sf-burger{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:34px;height:34px;padding:0;margin:0;background:none;border:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;color:#191919} .sf-topbar.on-dark .sf-burger{color:#f4efe6} .sf-burger span{display:block;height:2px;width:26px;background:currentColor;transition:transform .3s cubic-bezier(.2,.72,.28,1),opacity .2s ease} body.sf-mnav-open .sf-burger{color:#191919} body.sf-mnav-open .sf-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.sf-mnav-open .sf-burger span:nth-child(2){opacity:0} body.sf-mnav-open .sf-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .sf-mobilemenu{display:flex;position:fixed;inset:0;z-index:55;background:#f2e5da;flex-direction:column;justify-content:center;padding:clamp(28px,8vw,52px);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .3s ease,transform .34s cubic-bezier(.2,.72,.28,1)} body.sf-mnav-open .sf-mobilemenu{opacity:1;pointer-events:auto;transform:none} body.sf-mnav-open{overflow:hidden} .sf-mobilemenu nav{display:flex;flex-direction:column;gap:clamp(12px,2vh,20px)} .sf-mobilemenu a.sf-mm-main{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(30px,8.5vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.04;color:#191919;text-decoration:none} .sf-mm-cases{display:flex;flex-direction:column;gap:9px;margin:10px 0 6px;padding-left:2px} .sf-mobilemenu a.sf-mm-case{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0.005em;color:#6b665e;text-decoration:none} .sf-mm-foot{margin-top:clamp(30px,6vh,52px);display:flex;align-items:center;gap:12px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80} .sf-mm-foot a{color:#8f8a80;text-decoration:none} .sf-mm-foot a.active{color:#191919} } /* 93b — Topbar über Overlay (X sichtbar) */ @media screen and (max-width:760px){ body.sf-mnav-open .sf-topbar{position:fixed;top:0;left:0;z-index:60;background:#f2e5da !important;opacity:1 !important} body.sf-mnav-open .sf-topbar .sf-logo{color:#191919} body.sf-mnav-open .sf-shuffle-hint{opacity:0 !important} } /* 94 — Case-Links: Ghost-Kachel + Icon-Kreis (V6), unter der Leistungsbox */ .sf-caselinks{display:flex;flex-direction:column;gap:10px;margin-top:clamp(30px,4vh,46px)} .sf-caselinks-kicker{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#8f8a80;margin:0 0 4px} .sf-caselinks .sf-caselink{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:14px 16px;border:0;border-radius:3px;background:rgba(25,25,25,0.05);font-weight:600;font-size:15.5px;letter-spacing:0.005em;color:#191919;text-decoration:none;transition:background-color .2s ease} .sf-caselinks .sf-caselink span{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(25,25,25,0.3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:400;color:#191919;transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .25s cubic-bezier(.2,.72,.28,1)} .sf-caselinks .sf-caselink:hover{background:rgba(25,25,25,0.1)} .sf-caselinks .sf-caselink:hover span{background:#191919;color:#f2e5da;border-color:#191919;transform:translate(1px,-1px)} .sf-case.berlinstagram .sf-caselinks-kicker,.caseinfo.berlinstagram .sf-caselinks-kicker{color:#bdb7ac} .sf-case.berlinstagram .sf-caselinks .sf-caselink,.caseinfo.berlinstagram .sf-caselinks .sf-caselink{background:rgba(255,255,255,0.07);color:#f4efe6} .sf-case.berlinstagram .sf-caselinks .sf-caselink span,.caseinfo.berlinstagram .sf-caselinks .sf-caselink span{border-color:rgba(244,239,230,0.4);color:#f4efe6} .sf-case.berlinstagram .sf-caselinks .sf-caselink:hover,.caseinfo.berlinstagram .sf-caselinks .sf-caselink:hover{background:rgba(255,255,255,0.13)} .sf-case.berlinstagram .sf-caselinks .sf-caselink:hover span,.caseinfo.berlinstagram .sf-caselinks .sf-caselink:hover span{background:#f4efe6;color:#191919;border-color:#f4efe6} /* 95 — Mid-CTA-Button: sichtbarer Hover (Invert auf Taupe) */ .sf-midcta-btn{transition:background-color .22s ease,color .22s ease,transform .22s ease} .sf-midcta-btn:hover{background:#e6cbb8;color:#191919;transform:translateY(-1px)} /* 96 — Mobile: Topbar dauerhaft fixiert (kein absolute->fixed-Sprung) */ @media screen and (max-width:760px){ body.sf-logomode .sf-topbar{position:fixed !important;top:0 !important;opacity:1 !important;animation:none !important} } /* 97 — Über-uns (revidiert: grosse Fotos, ruhig) + Skeleton + linker CTA */ @keyframes sfShimmer{0%{background-position:200% 0}100%{background-position:-140% 0}} img.caseimageintro,img.caseimagedesktop{background-color:#d8d1c5;background-image:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 62%);background-size:220% 100%;background-repeat:no-repeat;animation:sfShimmer 1.5s ease-in-out infinite} img.sf-img-loaded{animation:none !important;background-image:none !important;background-color:transparent !important} @media (prefers-reduced-motion:reduce){img.caseimageintro,img.caseimagedesktop{animation:none}} .sffunnel .sf-solve .sf-gegen .sf-pos{margin-top:clamp(8px,1.4vh,16px)} /* Team: grosse Fotos, enger zusammen */ .sffunnel .sf-solve .sf-team{display:flex !important;flex-wrap:wrap;gap:clamp(22px,2.4vw,40px);max-width:none;justify-content:flex-start} .sffunnel .sf-solve .sf-member{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vh,16px);width:clamp(210px,21vw,300px)} .sffunnel .sf-solve .sf-m-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;border-radius:2px;background:none} .sffunnel .sf-solve .sf-m-name{font-size:clamp(21px,2vw,27px);font-weight:800;margin:0 0 4px;line-height:1.1;color:var(--sf-ink)} .sffunnel .sf-solve .sf-m-desc{font-size:clamp(13px,1.05vw,15px);line-height:1.42;color:#6a655d;margin:0;max-width:none} @media(max-width:640px){.sffunnel .sf-solve .sf-team{gap:clamp(24px,4vh,34px)}.sffunnel .sf-solve .sf-member{width:clamp(210px,64vw,320px)}} /* Vorteile: ruhig, ohne Nummern/Linien */ .sffunnel .sf-solve .sf-close-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(22px,3.4vh,40px)} .sffunnel .sf-solve .sf-cg-item{border-top:0;padding-top:0} .sffunnel .sf-solve .sf-cg-lbl{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.015em;line-height:1.12;margin:0 0 8px;color:var(--sf-ink)} .sffunnel .sf-solve .sf-cg-txt{font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:#6a655d;margin:0;max-width:36ch} @media(max-width:760px){.sffunnel .sf-solve .sf-close-grid{grid-template-columns:1fr;gap:clamp(18px,3vh,26px)}} /* CTA: linksbündig, ruhiger Übergang statt zentrierter Box */ .sf-midcta{background:rgba(242,229,218,0.98) !important;padding-top:clamp(30px,3.6vw,48px) !important;padding-bottom:clamp(44px,5.5vw,80px) !important} .sf-midcta .sf-midcta-inner{background:transparent !important;border:0 !important;max-width:1200px !important;margin:0 auto !important;padding:clamp(30px,4vw,48px) 0 0 !important;text-align:left !important} .sf-midcta .sf-midcta-lead{font-size:clamp(22px,2.4vw,32px) !important;max-width:26ch;margin:0 0 12px !important;text-align:left} .sf-midcta .sf-midcta-sub{font-size:clamp(15px,1.3vw,18px) !important;max-width:54ch;margin:0 0 22px !important;text-align:left} .sf-midcta .sf-midcta-actions{justify-content:flex-start !important} /* 98 — Travel dunkle Caselink-Variante (dunkler Case-Hintergrund) */ .sf-case.travelneu .sf-caselinks-kicker,.caseinfo.travelneu .sf-caselinks-kicker{color:#bdb7ac} .sf-case.travelneu .sf-caselinks .sf-caselink,.caseinfo.travelneu .sf-caselinks .sf-caselink{background:rgba(255,255,255,0.07);color:#f4efe6} .sf-case.travelneu .sf-caselinks .sf-caselink span,.caseinfo.travelneu .sf-caselinks .sf-caselink span{border-color:rgba(244,239,230,0.4);color:#f4efe6} .sf-case.travelneu .sf-caselinks .sf-caselink:hover,.caseinfo.travelneu .sf-caselinks .sf-caselink:hover{background:rgba(255,255,255,0.13)} .sf-case.travelneu .sf-caselinks .sf-caselink:hover span,.caseinfo.travelneu .sf-caselinks .sf-caselink:hover span{background:#f4efe6;color:#191919;border-color:#f4efe6} /* 99 — Trennlinie ueber Kernteam raus (Proof-Zeile entfernt) */ .sffunnel .sf-solve .sf-proof{border-top:0 !important;margin-top:clamp(30px,4.5vh,64px);padding-top:0} /* 100 — Vorteile harmonischer (3 Spalten enger) + Strich darueber raus */ .sffunnel .sf-solve .sf-close{border-top:0 !important} .sffunnel .sf-solve .sf-close-grid{max-width:940px;gap:clamp(22px,2.6vw,40px)} /* 101 — Feinschliff Über-uns (Fotos groesser/enger, Benefits ruhiger) */ .sffunnel .sf-solve .sf-team{gap:clamp(18px,1.8vw,28px)} .sffunnel .sf-solve .sf-member{width:clamp(230px,24vw,340px)} .sffunnel .sf-solve .sf-close-grid{max-width:980px;gap:clamp(22px,2.6vw,40px);margin-top:clamp(16px,2.4vh,28px)} .sffunnel .sf-solve .sf-cg-lbl{font-size:clamp(18px,1.7vw,22px);text-wrap:balance} @media(max-width:640px){.sffunnel .sf-solve .sf-member{width:clamp(220px,66vw,340px)}} /* 102 — Inline-Link im Fliesstext (z.B. @berlinstagram) */ .sf-inlink{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor;transition:opacity .2s ease} .sf-inlink:hover{opacity:.68} /* 103 — Witwen-Feinschliff (Zeilen balancieren) */ .sf-cr-line{text-wrap:balance} /* 104 — Team-Zeile + Rollenzeilen */ .sffunnel .sf-solve .sf-team-lead{margin:clamp(10px,1.6vh,18px) 0 clamp(24px,3.2vh,38px);max-width:52ch;font-size:clamp(15px,1.2vw,17px);line-height:1.55;font-weight:400;color:#6a655d} /* 105 — Warmer Lade-Hintergrund statt hartem Schwarz (erster Eindruck) */ html,body{background-color:#d8d1c5} /* 106 — Hero-Kachel-Aufbau (sanftes Rein-Faden, Spaltenwelle) */ @keyframes sfFeedIn{from{opacity:0}to{opacity:1}} .caseimagegrid.intro .sf-feedcell{animation:sfFeedIn .5s ease both} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+1){animation-delay:0s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+2){animation-delay:.05s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+3){animation-delay:.10s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+4){animation-delay:.15s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+5){animation-delay:.20s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n+6){animation-delay:.25s} .caseimagegrid.intro .sf-feedcell:nth-of-type(7n){animation-delay:.30s} @media (prefers-reduced-motion:reduce){.caseimagegrid.intro .sf-feedcell{animation:none}} .caseimagegrid.intro.sf-shuffled .sf-feedcell{animation:none !important} /* ---- Leistungen + Kontakt: gleiche Transparenz wie die uebrigen Flaechen (0.98), damit das fixe Hero-Grid dahinter durchscheint wie bei .sf-solve / .sf-dark ---- */ .aboutsection{background-color:rgba(242,229,218,0.98)} .aboutsection .navflowcontainer.warmconcrete{background-color:rgba(242,229,218,0.98)} .contactsection{background:rgba(36,34,32,0.98)} /* ============================================================ Kontaktformular — Honeypot + Validierungs-/Statusfehler Dunkle Contact-Section (#242220): helles Fehler-Rot #ff8a75 (Kontrast ~7:1), Erfolg in Creme #f4efe6. Nach allen .contactsection-Regeln, damit die Auszeichnung gewinnt. ============================================================ */ .sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contactsection .sf-field-error{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.35;color:#ff8a75;margin:6px 0 0} .contactsection .text-field.w-input.is-invalid, .contactsection .text-field-2.w-input.is-invalid, .contactsection .textarea.w-input.is-invalid{border-bottom-color:#ff8a75;border-bottom-width:2px} .contactsection .text-field.w-input.is-invalid:focus, .contactsection .text-field-2.w-input.is-invalid:focus, .contactsection .textarea.w-input.is-invalid:focus{border-bottom-color:#ff8a75;border-bottom-width:2px} .contactsection .sf-form-status{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;margin:clamp(18px,2.6vh,26px) 0 0;max-width:38ch} .contactsection .sf-form-error{color:#ff8a75;font-weight:600} /* Erfolgsmeldung = editorialer Abschluss (Variante A): große Archivo-Headline + Subline, ersetzt das Formular. Sanftes Fade-in, respektiert reduced-motion. */ .contactsection .sf-success-h{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(34px,3.4vw,48px);line-height:1;letter-spacing:-0.02em;color:#f4efe6;margin:0 0 clamp(14px,2vh,18px)} .contactsection .sf-success-sub{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#c9c3b8;margin:0;max-width:32ch} @media (prefers-reduced-motion:no-preference){.contactsection .sf-form-success{opacity:0;transform:translateY(10px);animation:sfSuccessIn .7s cubic-bezier(.2,.75,.2,1) forwards}} @keyframes sfSuccessIn{to{opacity:1;transform:none}} .contactsection .submit-button.w-button:disabled{opacity:.5;cursor:wait} /* ===== Leistungen/Kontakt: Flaechen-Parallax (Textur) + dezentes Auftauchen (v182) ===== */ #leistungen{position:relative;z-index:3;will-change:transform}#kontakt{position:relative;z-index:4;will-change:transform}.footersection{position:relative;z-index:5;will-change:transform} #leistungen .sf-r2,#kontakt .sf-r2{opacity:0;transform:translateY(34px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)} #leistungen .sf-r2.sf-in2,#kontakt .sf-r2.sf-in2{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){#leistungen .sf-r2,#kontakt .sf-r2{transition:none!important;opacity:1!important;transform:none!important}#leistungen,#kontakt{transform:none!important}} /* ===== v183: Mobile-Menue milchig + Schliessen-X immer sichtbar ===== */ .sf-mobilemenu{background:rgba(242,229,218,0.75)!important;-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)} .sf-mnav-open .sf-burger{color:#191919!important} .sf-mnav-open .sf-topbar{background:rgba(242,229,218,0.75)!important;-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)} /* v188: Leistungen Bottom-Flaeche kuerzer */ #leistungen .caseinfo.about.sf-about{padding-bottom:clamp(30px,4vh,54px)} /* v191: #ueber-uns slidet ueber den Problembereich (sffunnel) */ #ueber-uns{position:relative;z-index:2;will-change:transform} /* ===== v192: Mobile-Menue als dunkles Overlay (Briefing) — kein Glassmorphism ===== */ .sf-mobilemenu{background:rgba(18,18,17,0.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;justify-content:flex-start!important;align-items:flex-start!important;padding:clamp(84px,13vh,116px) clamp(26px,7vw,56px) clamp(30px,5vh,46px)!important;color:#ece7df} .sf-mobilemenu nav{gap:clamp(11px,1.9vh,17px)!important;width:100%;align-items:flex-start} /* Hauptlinks: ~25% kleiner, weniger fett, kontrollierte Zeilenhoehe, Creme */ .sf-mobilemenu a.sf-mm-main{font-size:clamp(23px,6.3vw,33px)!important;font-weight:600!important;line-height:1.12!important;letter-spacing:-.01em!important;color:#ece7df!important} /* Referenz-Unterpunkte: kleiner, ruhiger, nicht fett, eingerueckt */ .sf-mm-cases{padding-left:clamp(6px,3vw,16px)!important;gap:clamp(6px,1.1vh,10px)!important;margin:clamp(8px,1.4vh,14px) 0 clamp(6px,1vh,10px)!important;border-left:1px solid rgba(236,231,223,0.14)} .sf-mobilemenu a.sf-mm-case{font-size:14px!important;font-weight:400!important;letter-spacing:.01em!important;color:rgba(236,231,223,0.55)!important} /* Sprachumschalter unten, klein & ruhig */ .sf-mm-foot{margin-top:clamp(20px,3.5vh,34px)!important;padding-top:0!important;gap:clamp(16px,5vw,26px)!important;font-size:clamp(18px,5.2vw,22px)!important;letter-spacing:0.1em;color:rgba(236,231,223,0.72)!important} .sf-mm-foot a{color:rgba(236,231,223,0.72)!important} .sf-mm-foot a.active{color:#ece7df!important} /* Topbar im Menue-Zustand: transparent (dunkles Overlay durchgehend), Logo + X in Creme */ .sf-mnav-open .sf-topbar{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .sf-mnav-open .sf-topbar .sf-logo{color:#f4efe6!important} .sf-mnav-open .sf-burger{color:#f4efe6!important} /* ===== v193: Menue Tap-Flaechen (Finger) + Topbar-Logo creme ===== */ .sf-mobilemenu a.sf-mm-main{display:block;padding:8px 2px!important} .sf-mobilemenu nav{gap:clamp(6px,1.2vh,12px)!important} .sf-mm-cases{gap:2px!important} .sf-mobilemenu a.sf-mm-case{display:block;padding:10px 2px!important;min-height:24px} .sf-mnav-open .sf-topbar .sf-logo{color:#f4efe6!important} /* ===== v196: Footer gestauchter - Legal-Linie hoeher, weniger Leerraum ===== */ .footersection{padding-top:clamp(28px,4vh,52px)!important;padding-bottom:clamp(16px,2.2vh,28px)!important} .footersection .footercontainer{padding-bottom:0!important} .footersection .sf-footer-bottom{margin-top:clamp(14px,2vh,22px)!important} /* ===== v197: End-Reveal (Vorhang) hinter ?endreveal=1 ===== */ body.sf-endreveal .sf-endzone{height:145vh;position:relative;background:transparent;pointer-events:none} /* Mobile: natuerliches Wegscrollen — Footer scrollt raus, Grid scheint durch die Endzone, dann Swipe. Endzone = ~1 Screen (Footer raus) + Swipe */ @media(max-width:760px){body.sf-endreveal .sf-endzone{height:165vh}} body.sf-endreveal #kontakt,body.sf-endreveal .footersection{will-change:transform} /* v198: Endreveal - Weissraum unter Legal-Zeile, Footer haelt kurz */ body.sf-endreveal .footersection{padding-bottom:clamp(40px,7vh,80px)!important} /* v199: Endreveal Stufe 2 - Buchstaben-Swipe (Zwei-Schicht-Kachel) */ .sf-endswipe{position:absolute;inset:0;overflow:hidden;z-index:3} .sf-endswipe-in{position:absolute;left:0;right:0;top:0;height:200%;transform:translateY(0);will-change:transform} .sf-endswipe-f{position:relative;width:100%;height:50%;background-size:cover;background-position:center} .sf-endswipe-f:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)} .sf-endswipe-f .sf-ltr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-size:126cqmin;line-height:1;color:#f5f5f5;-webkit-text-fill-color:#f5f5f5;z-index:2} /* ===== v204: Profilfotos - minimales Parallax im Quadrat ===== */ .sf-m-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:1/1;border-radius:2px} .sf-m-frame .sf-m-photo{position:absolute!important;left:0;top:-7%;width:100%!important;height:114%!important;aspect-ratio:auto!important;object-fit:cover;object-position:50% 14%;border-radius:0!important;will-change:transform} @media (prefers-reduced-motion:reduce){.sf-m-frame .sf-m-photo{transform:none!important}} /* v206: Endreveal - Footer-Beige nach unten verlaengern (kein Grid-Durchschimmern unterm Footer) */ body.sf-endreveal .footersection{box-shadow:0 20vh 0 20vh #f2e5da} /* v207: Shuffle-Anzeige auf Touch ausblenden (Tap-Reshuffle bleibt aktiv) */ @media (pointer:coarse){.sf-shuffle-hint{display:none!important}} /* v208: Footer unten abdichten (kein Grid-Durchblitzen, auch Mobile) + mehr Weissraum mobil */ .footersection{box-shadow:0 22vh 0 22vh #f2e5da} @media (max-width:760px){.footersection{padding-bottom:clamp(48px,10vh,96px)!important}} /* v210: Mobile-Typo-Fixes (Leistungen-Sub kleiner/leichter, Abstand vor Solve-Liste) */ @media (max-width:760px){ .sf-lg-sub{font-size:18px!important;font-weight:600!important;line-height:1.34!important;text-wrap:balance} .sf-solve-grid .sf-steps{margin-top:clamp(22px,3.6vh,34px)!important} } /* ===== v218: Mobile-Footer kurz — Farbflaeche (box-shadow) + langes padding-bottom weg -> endet an der Impressum-Zeile, darunter direkt das Grid (Endzone). Desktop behaelt Dock-Dichtung. ===== */ @media (max-width:760px){ .footersection{box-shadow:none!important;padding-bottom:clamp(16px,2.5vh,26px)!important} body.sf-endreveal .footersection{padding-bottom:clamp(16px,2.5vh,26px)!important} } /* ============================================================ FARBSCHEMA "Greige & Ultramarin" (aktiv/online) Off-White-Greige-Basis, Ultramarin #2f2bd6 als Handlungsfarbe (nur Zwischen-CTA + Kontakt-Senden). B-Logik: helle Case-Familie mit Stufung (a1>a2>a3), dunkles Paar (b1/b2); Footer hell, Kontakt der einzige dunkle Schlussblock. ============================================================ */ /* Hero-Backdrop */ body.body { background-color: #201f1b !important; } /* Funnel-Variablen */ body.body .sffunnel { --sf-cream: #f2f1ed; --sf-ink: #1a1916; --sf-dark: #1a1915; --sf-onDark: #f5f5f5; --sf-onMute: #66635c; } body.body .sffunnel .sf-hook { background: rgba(242,241,237,0.98); } /* Team-/Loesungsflaeche ("SUPERFEED ist keine Agentur") bewusst transparenter, damit das fixe Hero-Mosaik dahinter durchscheint. Nur .sf-solve, nicht Opener. */ body.body .sffunnel .sf-solve { background: rgba(242,241,237, var(--sf-glass,0.85)) !important; } body.body .sffunnel .sf-dark { background: rgba(19,18,16,0.98); } body.body .sf-stickyfunnel .sffunnel .sf-dark .sf-fbar { background: rgba(19,18,16,0.98); } body.body .sf-stickyfunnel .sffunnel .sf-solve .sf-fbar { background: rgba(242,241,237,0.98); } body.body .sffunnel .sf-solve .sf-solve-top { background: #e5e3dc; } body.body.sf-logomode .sf-solveband { background: #f2f1ed; } body.body .sf-topbar { background: #f2f1ed; } body.body.sf-mnav-open .sf-topbar { background: transparent !important; } body.body .sf-mobilemenu { background: rgba(18,18,17,0.97) !important; } body.body .sffunnel .sf-hooklead { color: #66635c; } /* Case-Slots (hell,hell,a2,hell,dunkel,dunkel) */ body.body .caseinfo.intro { background-color: rgba(242,241,237,0.98) !important; } body.body .caseinfo.huawei { background-color: rgba(250,249,246,0.98) !important; } body.body .caseinfo.photokina { background-color: rgba(242,241,237,0.98) !important; } body.body .caseinfo.top3 { background-color: rgba(232,230,223,0.98) !important; } body.body .caseinfo.travelneu { background-color: rgba(64,62,56,0.98) !important; } body.body .caseinfo.berlinstagram { background-color: rgba(85,82,75,0.98) !important; } body.body .navflowcontainer.photokina { background-color: #f2f1ed !important; } body.body .navflowcontainer.top3 { background-color: #e8e6df !important; } body.body .navflowcontainer.travelneu { background-color: #403e38 !important; } body.body .navflowcontainer.berlinstagram { background-color: #55524b !important; } /* Zwischen-CTA + Handlungs-Button (Ultramarin) */ body.body .sf-midcta { background: rgba(242,241,237,0.98) !important; } body.body .sf-midcta-btn { background: #2f2bd6; color: #f5f5f5; } body.body .sf-midcta-btn:hover { background: #221fa8; color: #f5f5f5; } /* Ueber uns */ body.body .aboutsection { background-color: rgba(242,241,237,0.55) !important; } body.body .aboutsection .navflowcontainer.warmconcrete { background-color: rgba(242,241,237,0.55) !important; } /* Kontakt (dunkel) */ body.body .contactsection { background: #1a1915; } body.body .contactsection .casetext .paragraph, body.body .contactsection .sf-cr-direct a { color: rgba(245,245,245,0.66); } body.body .contactsection .sf-cr-sign { color: rgba(245,245,245,0.45); } body.body .contactsection .paragraph.form { color: rgba(245,245,245,0.55); } body.body .contactsection .submit-button.w-button { background: #2f2bd6; color: #f5f5f5; } body.body .contactsection .submit-button.w-button:hover { background: #221fa8; color: #f5f5f5; } /* Footer HELL (Grundfarbe); Kontakt bleibt einziger dunkler Block */ body.body .footersection { background: #f2f1ed; box-shadow: 0 22vh 0 22vh #f2f1ed; } body.body.sf-endreveal .footersection { box-shadow: 0 20vh 0 20vh #f2f1ed; } body.body .footersection .navflowtitle.hero { color: #1a1916; } body.body .footersection .sf-footer-claim { color: #66635c; } body.body .footersection .text-block-15-copy { color: #1a1916; } body.body .footersection .footernav { color: #66635c; } body.body .footersection .footernav:hover { color: #1a1916; } body.body .footersection .text-block-14, body.body .footersection .text-block-16, body.body .footersection .sf-footerlang a, body.body .footersection .sf-footer-bottom .text-block-16, body.body .footersection .sf-footer-bottom .sf-legal-link, body.body .footersection .sf-footer-bottom .sf-footerlang a { color: #66635c; } body.body .footersection .sf-footerlang a.active { color: #1a1916; } /* Platzhalter */ body.body .sf-portrait-ph, body.body .sffunnel .sf-solve .sf-m-photo { background-color: #dbd8d1; } /* ============================================================ v223 — A11y-/Semantik-Fixes (Relaunch-Review Paket 1) ============================================================ */ /* Hero-Claim ist jetzt

: Webflow-Basis setzt h1{uppercase,margin,font-size}. Nur Margin + Transform neutralisieren, Typo kommt weiter aus .headline2. */ .herotitlecontainer h1.headline2{margin:0;text-transform:none;} /* main als Block absichern (aeltere Engines) */ main{display:block;} /* Eyebrow-Kontrast: #8f8a80 auf Creme = 2.78:1 (WCAG-Fail). NUR die Labels auf hellen Gruenden auf ~5.2:1 abdunkeln. Labels auf dunklen Flaechen (Footer, Kontakt, sf-dark, dunkle Cases) bleiben bewusst #8f8a80. */ .sf-hook-eyebrow, .sf-lg-label, .sf-caselinks-kicker, .sffunnel .sf-solve .sf-glabel{color:#645d54;} .sf-about .sf-ab-kick strong{color:#645d54 !important;} /* ============================================================ v226 — Codex-Optimierung: Funnel verdichten + Angebot frueher Ziel: Nach dem starken Mosaik schneller von These zu Angebot und Proof. ============================================================ */ body.body .sffunnel .sf-hook{ padding-top:clamp(64px,8vh,96px); padding-bottom:clamp(46px,6vh,72px); } body.body .sffunnel .sf-h1{ max-width:18ch; margin-bottom:clamp(16px,2.2vh,26px); } body.body .sffunnel .sf-hooklead{ max-width:42ch; font-size:clamp(18px,1.55vw,23px); line-height:1.34; } .sf-offerstrip{ position:relative; z-index:3; background:rgba(242,241,237,0.98); color:#1a1916; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; padding:0 20px clamp(42px,5.8vh,72px); } .sf-offerstrip .sf-wrap{ max-width:1200px; margin:0 auto; padding-top:clamp(24px,3.6vh,42px); border-top:1px solid rgba(26,25,22,0.14); } .sf-offer-kicker{ margin:0 0 clamp(14px,1.8vh,22px); font-size:12px; font-weight:600; letter-spacing:0.16em; line-height:1.2; text-transform:uppercase; color:#645d54; } .sf-offer-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:rgba(26,25,22,0.12); border:1px solid rgba(26,25,22,0.12); } .sf-offer-grid span{ display:flex; align-items:center; min-height:clamp(58px,6.2vh,78px); padding:clamp(14px,1.6vw,20px); background:rgba(250,249,246,0.72); font-size:clamp(15px,1.16vw,17px); font-weight:800; line-height:1.16; letter-spacing:-0.01em; } body.body .sffunnel .sf-dark{ padding-top:clamp(58px,7vh,88px); padding-bottom:clamp(64px,8vh,104px); } body.body .sffunnel .sf-dark .sf-fbar{ display:none; } body.body .sffunnel .sf-plead{ margin-bottom:clamp(24px,3.4vh,40px); } body.body .sffunnel .sf-acts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,52px); align-items:start; } body.body .sffunnel .sf-act{ border-top:1px solid rgba(255,255,255,0.14); padding-top:clamp(18px,2.4vh,28px); } body.body .sffunnel .sf-act-head p{ font-size:clamp(24px,2.4vw,38px); line-height:1.02; } body.body .sffunnel .sf-act-sub{ margin-top:clamp(18px,2.6vh,28px); padding-left:0; grid-template-columns:1fr; gap:clamp(12px,1.6vh,18px); } body.body .sffunnel .sf-act-sub .sf-s p{ font-size:clamp(15px,1.15vw,17px); line-height:1.22; } body.body .sffunnel .sf-reframe{ margin-top:clamp(38px,5.4vh,70px); } body.body .sffunnel .sf-reframe p{ font-size:clamp(38px,5vw,72px); max-width:16ch; } body.body .sffunnel .sf-dark .sf-solve-top{ margin-top:clamp(34px,4.8vh,62px); } body.body .sffunnel .sf-dark .sf-solve-hero{ font-size:clamp(34px,4.6vw,66px); max-width:15ch; } body.body .sffunnel .sf-dark .sf-solve-grid{ gap:clamp(24px,3vw,48px); } body.body .sffunnel .sf-dark .sf-steps p{ font-size:clamp(16px,1.45vw,20px); } body.body .sffunnel .sf-solve > .sf-wrap{ padding-top:clamp(46px,6.5vh,80px); } body.body .sffunnel .sf-solve .sf-about-detail{ max-width:48ch; } body.body .sffunnel .sf-solve .sf-proof{ margin-top:clamp(26px,3.5vh,44px); } body.body .sffunnel .sf-solve .sf-team{ gap:clamp(16px,1.6vw,26px); } body.body .sffunnel .sf-solve .sf-member{ width:clamp(200px,20vw,280px); } body.body .sffunnel .sf-solve .sf-close{ margin-top:clamp(28px,4vh,50px); } body.body .sf-midcta{ padding-top:0!important; } @media(max-width:980px){ .sf-offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))} body.body .sffunnel .sf-acts{grid-template-columns:1fr} body.body .sffunnel .sf-act{max-width:720px} body.body .sffunnel .sf-reframe p{font-size:clamp(34px,8vw,62px)} } @media(max-width:760px){ body.body .sffunnel .sf-hook{ padding-top:clamp(48px,6vh,70px); padding-bottom:clamp(34px,4.8vh,56px); } body.body .sffunnel .sf-h1{ font-size:clamp(34px,9vw,46px); max-width:12ch; } body.body .sffunnel .sf-hooklead{ max-width:27ch; font-size:clamp(17px,4.4vw,20px); } .sf-offerstrip{ padding-left:20px; padding-right:20px; padding-bottom:clamp(34px,5vh,50px); } .sf-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sf-offer-grid span{ min-height:58px; font-size:15px; } body.body .sffunnel .sf-dark{ padding-top:clamp(44px,6vh,64px); padding-bottom:clamp(50px,7vh,76px); } body.body .sffunnel .sf-act-head p{ font-size:clamp(26px,7vw,34px); } body.body .sffunnel .sf-act-sub{ grid-template-columns:1fr 1fr; gap:14px 18px; } body.body .sffunnel .sf-reframe{ margin-top:clamp(32px,4.8vh,50px); } body.body .sffunnel .sf-dark .sf-solve-grid{ grid-template-columns:1fr; } body.body .sffunnel .sf-dark .sf-solve-grid .sf-steps{ border-left:0; padding-left:0; } body.body .sffunnel .sf-solve .sf-member{ width:min(100%,320px); } } @media(max-width:420px){ .sf-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sf-offer-grid span{ min-height:54px; padding:13px 12px; } body.body .sffunnel .sf-act-sub{grid-template-columns:1fr} body.body .sffunnel .sf-act-sub .sf-s:nth-child(2){display:none} } /* ============================================================ v227 — Problemteil als kompakter Diagnose-Screen Weniger Kaskade, schneller zur Aufloesung. ============================================================ */ body.body .sffunnel .sf-dark{ padding-top:clamp(42px,5.5vh,68px); padding-bottom:clamp(46px,6vh,76px); } body.body .sffunnel .sf-plead{ margin:0; font-size:clamp(15px,1.15vw,17px); line-height:1.35; } body.body .sffunnel .sf-act-sub .sf-s:nth-child(2){ display:none; } body.body .sffunnel .sf-reframe p{ font-size:clamp(30px,3.65vw,54px); line-height:1.02; } body.body .sffunnel .sf-dark .sf-solve-hero{ font-size:clamp(29px,3.45vw,50px); } body.body .sffunnel .sf-dark .sf-solve-grid .sf-answer{ font-size:clamp(17px,1.45vw,21px); } body.body .sffunnel .sf-dark .sf-steps p{ font-size:clamp(14px,1.12vw,16px); } @media(min-width:981px){ body.body .sffunnel .sf-dark > .sf-wrap{ display:grid; grid-template-columns:minmax(180px,0.42fr) minmax(0,1fr); grid-template-areas: "lead acts" "reframe solve"; column-gap:clamp(36px,5vw,84px); row-gap:clamp(34px,4.8vh,56px); align-items:start; } body.body .sffunnel .sf-plead{grid-area:lead;padding-top:4px} body.body .sffunnel .sf-acts{ grid-area:acts; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px); } body.body .sffunnel .sf-act{ padding-top:clamp(14px,1.8vh,20px); } body.body .sffunnel .sf-act-head p{ font-size:clamp(21px,1.95vw,31px); } body.body .sffunnel .sf-act-sub{ margin-top:clamp(12px,1.7vh,18px); } body.body .sffunnel .sf-act-sub .sf-s p{ font-size:clamp(13px,0.98vw,15px); } body.body .sffunnel .sf-reframe{ grid-area:reframe; margin-top:0; align-self:start; } body.body .sffunnel .sf-reframe p{ max-width:12ch; } body.body .sffunnel .sf-dark .sf-solve-top{ grid-area:solve; margin-top:0; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1fr); gap:clamp(26px,3.2vw,52px); align-items:start; } body.body .sffunnel .sf-dark .sf-solve-hero{ margin-bottom:0; } body.body .sffunnel .sf-dark .sf-solve-grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,1.6vh,20px); } body.body .sffunnel .sf-dark .sf-solve-grid .sf-steps{ border-left:0; padding-left:0; gap:clamp(5px,0.8vh,8px); } } @media(max-width:980px){ body.body .sffunnel .sf-acts{ gap:clamp(20px,3.1vh,34px); } body.body .sffunnel .sf-reframe{ margin-top:clamp(26px,4vh,44px); } } @media(max-width:760px){ body.body .sffunnel .sf-dark{ padding-top:clamp(34px,5vh,50px); padding-bottom:clamp(38px,5.8vh,58px); } body.body .sffunnel .sf-act{ padding-top:clamp(13px,2vh,18px); } body.body .sffunnel .sf-act-head p{ font-size:clamp(22px,6vw,30px); } body.body .sffunnel .sf-act-sub{ margin-top:clamp(10px,1.7vh,15px); } body.body .sffunnel .sf-reframe p{ font-size:clamp(30px,8.1vw,42px); max-width:100%; } body.body .sffunnel .sf-dark .sf-solve-top{ margin-top:clamp(24px,3.6vh,36px); } body.body .sffunnel .sf-dark .sf-solve-hero{ font-size:clamp(28px,7.4vw,38px); } } /* ============================================================ v228 — Ueber-uns-Block: kompakter Senior-Kern statt langer Teamstrecke ============================================================ */ body.body .sffunnel .sf-solve > .sf-wrap{ padding-top:clamp(44px,5.8vh,72px); padding-bottom:clamp(42px,5.6vh,70px); } body.body .sffunnel .sf-solve .sf-gegen .sf-neg{ max-width:13ch; font-size:clamp(38px,4.9vw,70px); } body.body .sffunnel .sf-solve .sf-gegen .sf-pos{ max-width:34ch; font-size:clamp(18px,1.55vw,23px); } body.body .sffunnel .sf-solve .sf-about-detail{ max-width:44ch; margin-top:clamp(14px,1.8vh,22px); } body.body .sffunnel .sf-solve .sf-team-lead{ max-width:34ch; margin-bottom:clamp(18px,2.2vh,26px); } body.body .sffunnel .sf-solve .sf-member{ border-top:1px solid rgba(26,25,22,0.14); padding-top:clamp(14px,1.8vh,20px); } body.body .sffunnel .sf-solve .sf-m-name{ font-size:clamp(18px,1.6vw,23px); } body.body .sffunnel .sf-solve .sf-m-desc{ font-size:clamp(13px,0.98vw,14px); line-height:1.42; } body.body .sffunnel .sf-solve .sf-close{ margin-top:clamp(28px,3.6vh,46px); padding-top:clamp(22px,2.8vh,34px); border-top:1px solid rgba(26,25,22,0.14)!important; } body.body .sffunnel .sf-solve .sf-kick{ max-width:24ch; font-size:clamp(22px,2.4vw,34px); margin-bottom:clamp(16px,2vh,24px); } body.body .sffunnel .sf-solve .sf-close-grid{ max-width:none; margin-top:0; gap:1px; background:rgba(26,25,22,0.12); border:1px solid rgba(26,25,22,0.12); } body.body .sffunnel .sf-solve .sf-cg-item{ background:rgba(250,249,246,0.56); padding:clamp(18px,2vw,26px); } body.body .sffunnel .sf-solve .sf-cg-lbl{ font-size:clamp(17px,1.4vw,20px); margin-bottom:6px; } body.body .sffunnel .sf-solve .sf-cg-txt{ max-width:28ch; font-size:clamp(13px,1vw,15px); } @media(min-width:981px){ body.body .sffunnel .sf-solve > .sf-wrap{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(320px,0.82fr); grid-template-areas: "intro team" "principles principles"; column-gap:clamp(52px,7vw,110px); row-gap:clamp(26px,3.8vh,46px); align-items:start; } body.body .sffunnel .sf-solve .sf-gegen{grid-area:intro} body.body .sffunnel .sf-solve .sf-proof{ grid-area:team; margin-top:0; padding-top:0; } body.body .sffunnel .sf-solve .sf-team{ display:grid!important; grid-template-columns:1fr; gap:clamp(16px,2vh,24px); max-width:480px; } body.body .sffunnel .sf-solve .sf-member{ width:auto; display:grid; grid-template-columns:clamp(86px,8vw,118px) minmax(0,1fr); gap:clamp(14px,1.4vw,20px); align-items:start; } body.body .sffunnel .sf-solve .sf-member .sf-m-frame, body.body .sffunnel .sf-solve .sf-member .sf-m-photo{ width:100%!important; } body.body .sffunnel .sf-solve .sf-close{ grid-area:principles; display:grid; grid-template-columns:minmax(220px,0.45fr) minmax(0,1fr); gap:clamp(30px,4vw,70px); align-items:start; } body.body .sffunnel .sf-solve .sf-close-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:760px){ body.body .sffunnel .sf-solve > .sf-wrap{ padding-top:clamp(36px,5vh,52px); padding-bottom:clamp(36px,5vh,54px); } body.body .sffunnel .sf-solve .sf-gegen .sf-neg{ max-width:12ch; font-size:clamp(34px,9vw,44px); } body.body .sffunnel .sf-solve .sf-gegen .sf-pos{ font-size:clamp(18px,4.8vw,22px); } body.body .sffunnel .sf-solve .sf-proof{ margin-top:clamp(26px,3.8vh,40px); } body.body .sffunnel .sf-solve .sf-team{ display:grid!important; grid-template-columns:1fr; gap:clamp(18px,2.8vh,26px); } body.body .sffunnel .sf-solve .sf-member{ width:100%; display:grid; grid-template-columns:86px minmax(0,1fr); gap:14px; align-items:start; } body.body .sffunnel .sf-solve .sf-member .sf-m-frame, body.body .sffunnel .sf-solve .sf-member .sf-m-photo{ width:86px!important; } body.body .sffunnel .sf-solve .sf-close-grid{ grid-template-columns:1fr; } } /* ============================================================ v229 — "Weniger Beats, mehr Wucht" (Schulz-Konzept) Statt Codex' engem 2x2-Grid: ruhige Screens. A) Angebot = leise Leistungs-Zeile statt Tabellen-Gitter B) Problem = Diagnose-Liste (Annahme gedimmt -> Realitaet gross), die 6 Unterpaare raus, Aufloesung darunter. ============================================================ */ /* ---------- A) Angebots-Zeile ---------- */ body.body .sf-offerstrip .sf-offer-grid{ display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(13px,1.3vw,20px) clamp(20px,2.4vw,40px); background:none; border:0; } body.body .sf-offerstrip .sf-offer-grid span{ display:inline-flex; min-height:0; padding:0; background:none; font-size:clamp(16px,1.35vw,21px); font-weight:800; line-height:1.1; letter-spacing:-.01em; position:relative; } body.body .sf-offerstrip .sf-offer-grid span:not(:last-child)::after{ content:""; position:absolute; right:calc(-1 * clamp(10px,1.2vw,20px)); top:.15em; bottom:.15em; width:1px; background:rgba(26,25,22,.18); } /* beim Umbruch keine haengenden Trennstriche: nur ab einer Zeile (Desktop) */ @media(max-width:980px){ body.body .sf-offerstrip .sf-offer-grid{ gap:clamp(9px,1.6vh,14px) clamp(18px,5vw,30px); } body.body .sf-offerstrip .sf-offer-grid span::after{ display:none; } } /* ---------- B) Problem als Diagnose-Liste ---------- */ /* Codex' Desktop-2x2 zuruecknehmen: wieder ruhiger Vertikalfluss */ @media(min-width:981px){ body.body .sffunnel .sf-dark > .sf-wrap{ display:block; } body.body .sffunnel .sf-acts{ grid-template-columns:none; } body.body .sffunnel .sf-reframe{ margin-top:clamp(32px,4.6vh,56px); } body.body .sffunnel .sf-reframe p{ max-width:24ch; } body.body .sffunnel .sf-dark .sf-solve-top{ margin-top:clamp(30px,4.4vh,54px); } } /* die 6 Unterpaare verlassen den Hauptfluss */ body.body .sffunnel .sf-dark .sf-act-sub{ display:none; } /* Kicker "Im Alltag sieht das oft so aus." */ body.body .sffunnel .sf-dark .sf-plead{ margin:0 0 clamp(20px,2.8vh,32px); font-size:12px; font-weight:600; letter-spacing:.16em; line-height:1.2; text-transform:uppercase; color:var(--sf-onMute); } /* die Liste */ body.body .sffunnel .sf-dark .sf-acts{ display:block; gap:0; margin:0; border-top:1px solid rgba(236,231,223,.16); } body.body .sffunnel .sf-dark .sf-act{ border:0; border-bottom:1px solid rgba(236,231,223,.16); margin:0; max-width:none; padding:clamp(20px,3vh,38px) 0; } body.body .sffunnel .sf-dark .sf-act-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin:0; } body.body .sffunnel .sf-dark .sf-act-head .sf-set{ margin:0; font-weight:500; font-size:clamp(15px,1.15vw,18px); line-height:1.25; letter-spacing:.005em; color:rgba(236,231,223,.52); } body.body .sffunnel .sf-dark .sf-act-head .sf-hit{ margin:0; font-weight:900; font-size:clamp(25px,3.3vw,50px); line-height:1.03; letter-spacing:-.017em; color:#f4efe6; } @media(min-width:900px){ body.body .sffunnel .sf-dark .sf-act-head{ grid-template-columns:minmax(200px,.34fr) minmax(0,1fr); gap:clamp(24px,3vw,60px); align-items:baseline; } body.body .sffunnel .sf-dark .sf-act-head .sf-set{ padding-top:.55em; } } /* ============================================================ v230 — "Der Umschlag": Problem-Abschnitt als ruhige Buehne, endet auf der Bruecke. Antwort + Schritte verlassen den Problemteil (nehmen die Loesung nicht mehr vorweg). Reveal = Timing-Dramaturgie: erst die Annahme, dann schlaegt die Realitaet ein. Synthese aus 4 Design-Agenten (Editorial / Funnel / Motion / Reduktion). ============================================================ */ /* Antwort + Schritte raus aus dem Problem-Abschnitt -> Abschnitt endet auf der Bruecke. (Inhalt bleibt im HTML erhalten; wandert als naechster Schritt in den Loesungsteil.) */ body.body .sffunnel .sf-dark .sf-solve-grid{ display:none; } /* Buehne: volle Hoehe, vertikal zentriert, viel Luft (Ruhe zwischen den Bild-Mosaiken) */ @media(min-width:981px){ body.body .sffunnel .sf-dark{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(72px,10vh,150px); padding-bottom:clamp(72px,10vh,150px); } /* etwas mehr Atem zwischen den Diagnose-Zeilen */ body.body .sffunnel .sf-dark .sf-act{ padding:clamp(24px,3.6vh,46px) 0; } } /* Reframe = klare Zaesur / Hoehepunkt */ body.body .sffunnel .sf-dark .sf-reframe{ margin-top:clamp(38px,6vh,84px); } /* Bruecke = letzter, allein stehender Beat (Cliffhanger) */ body.body .sffunnel .sf-dark .sf-solve-top{ display:block; margin-top:clamp(34px,5.2vh,72px); } body.body .sffunnel .sf-dark .sf-solve-hero{ margin:0; max-width:20ch; } /* --- Umschlag-Reveal: erst Annahme, dann schlaegt die Realitaet ein --- */ /* Realitaet startet leicht tiefer und kommt spuerbar spaeter als die Annahme */ body.body .sffunnel .sf-dark .sf-act-head p.sf-hit{ transform:translateY(.32em) scale(1); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1); } body.body .sffunnel .sf-dark .sf-act-head.sf-in p.sf-hit{ transform:none; transition-delay:.48s; } body.body .sffunnel .sf-dark .sf-act-head.sf-in p.sf-set{ transition-delay:0s; } @media(prefers-reduced-motion:reduce){ body.body .sffunnel .sf-dark .sf-act-head p.sf-hit{ transform:none; transition:none; } } /* ============================================================ v231 — "Ueber uns": grosse Portraets zurueck (Codex-v228-Avatare raus). Synthese aus 4 Design-Agenten (Editorial / Trust / Motion / Reduktion). Portraet-Diptychon (4:5), linksbuendig, Bildunterschriften darunter; 3er-Kachel-Block -> ruhige linksbuendige Liste (keine Kaesten/Nummern/Linien); Reveal gestaffelt (Michael, dann Stephan). Raster skaliert 2 -> 4 Personen. ============================================================ */ /* Codex-v228-Grid (intro | schmale Team-Spalte) zurueck: ruhige gestapelte Baender */ @media(min-width:981px){ body.body .sffunnel .sf-solve > .sf-wrap{ display:block; } body.body .sffunnel .sf-solve .sf-proof{ margin-top:clamp(46px,7vh,96px); padding-top:0; max-width:none; } body.body .sffunnel .sf-solve .sf-close{ display:block; margin-top:clamp(52px,8vh,96px); } } /* Team = Portraet-Diptychon; repeat(2) => 2 nebeneinander, 4 werden 2x2 */ body.body .sffunnel .sf-solve .sf-team{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vh,34px) clamp(20px,3vw,40px); max-width:clamp(520px,60vw,840px); margin:0; } /* jede Person = Foto oben, Bildunterschrift darunter (keine Avatar-Zeile) */ body.body .sffunnel .sf-solve .sf-member{ display:block !important; width:auto !important; border:0 !important; padding:0 !important; margin:0; } body.body .sffunnel .sf-solve .sf-member .sf-m-photo{ width:100% !important; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; border-radius:2px; background:#e7e3da; display:block; } body.body .sffunnel .sf-solve .sf-member .sf-m-name{ font-weight:700; font-size:clamp(19px,1.5vw,24px); letter-spacing:-.01em; color:#1a1916; margin:clamp(14px,1.7vh,18px) 0 0; } body.body .sffunnel .sf-solve .sf-member .sf-m-desc{ font-weight:400; font-size:clamp(14px,1vw,15.5px); line-height:1.5; color:#726c64; max-width:34ch; margin:6px 0 0; } /* Abschluss: 3er-Kachel-Grid -> ruhige linksbuendige Liste (keine Kaesten/Nummern/Linien) */ body.body .sffunnel .sf-solve .sf-close-grid{ display:flex !important; flex-direction:column; gap:clamp(16px,2.4vh,26px); max-width:64ch; margin-top:0; background:none !important; border:0 !important; } body.body .sffunnel .sf-solve .sf-cg-item{ background:none !important; padding:0 !important; } body.body .sffunnel .sf-solve .sf-cg-lbl{ font-weight:700; font-size:clamp(17px,1.35vw,20px); color:#1a1916; margin:0 0 4px; } body.body .sffunnel .sf-solve .sf-cg-txt{ font-weight:400; font-size:clamp(15px,1.15vw,17px); line-height:1.5; color:#726c64; max-width:54ch; margin:0; } /* Reveal: Portraets kommen als Paar an (Michael, dann Stephan; skaliert bis 4) */ body.body .sffunnel .sf-solve .sf-proof .sf-member{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } body.body .sffunnel .sf-solve .sf-proof.sf-in .sf-member{ opacity:1; transform:none; } body.body .sffunnel .sf-solve .sf-proof.sf-in .sf-member:nth-child(2){ transition-delay:.10s; } body.body .sffunnel .sf-solve .sf-proof.sf-in .sf-member:nth-child(3){ transition-delay:.20s; } body.body .sffunnel .sf-solve .sf-proof.sf-in .sf-member:nth-child(4){ transition-delay:.30s; } @media(prefers-reduced-motion:reduce){ body.body .sffunnel .sf-solve .sf-proof .sf-member{ opacity:1; transform:none; transition:none; } } /* Mobile: Portraets gross gestapelt, nicht zurueck zu Avataren */ @media(max-width:760px){ body.body .sffunnel .sf-solve .sf-team{ grid-template-columns:1fr; gap:clamp(24px,4vh,34px); max-width:440px; } body.body .sffunnel .sf-solve .sf-member .sf-m-photo{ width:100% !important; max-width:440px; aspect-ratio:4/5; } body.body .sffunnel .sf-solve .sf-close-grid{ gap:clamp(14px,2.4vh,20px); } } /* ============================================================ v232 — Reframe-Pointe farblich an die großen Pointen angleichen. "Es ist ein Strukturproblem." war reinweiß (geerbt) -> jetzt #f4efe6 wie .sf-hit / die Brücke. "Das ist kein Fleißproblem." (.sf-q) bleibt grau. ============================================================ */ body.body .sffunnel .sf-dark .sf-reframe p{ color:#f4efe6; } body.body .sffunnel .sf-dark .sf-reframe .sf-q{ color:var(--sf-onMute); } /* ============================================================ v233 (Worktree) — About: "Warum"-Band als kompakter 3-Spalter (spart Höhe), reichere Captions. Keine Kästen/Nummern/Linien-Cluster. ============================================================ */ body.body .sffunnel .sf-solve .sf-close-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.6vw,44px); max-width:none; } body.body .sffunnel .sf-solve .sf-cg-lbl{ margin:0 0 5px; } body.body .sffunnel .sf-solve .sf-cg-txt{ max-width:34ch; } /* Captions: 3 Zeilen ruhig, etwas mehr Zeilenabstand */ body.body .sffunnel .sf-solve .sf-m-desc{ line-height:1.5; max-width:38ch; } @media(max-width:760px){ body.body .sffunnel .sf-solve .sf-close-grid{ grid-template-columns:1fr; gap:clamp(16px,2.4vh,22px); } } /* ============================================================ v234 (Worktree) — Dunkles Referenzen-Band als sichtbare Überschrift zwischen Kontaktbox (Creme) und erstem Case (hell). Setzt die Kontaktbox ab + gibt der Referenzen-Überschrift Kontrast. Alte, unsichtbare Webflow-Einleitung (dunkel-auf-dunkel) wird ausgeblendet. ============================================================ */ body.body .sf-refband{ background:#141312; color:#ece7df; padding:clamp(48px,7.5vh,96px) var(--sf-pad,20px); position:relative; z-index:2; } body.body .sf-refband .sf-wrap{ max-width:1180px; margin:0 auto; } body.body .sf-refband .sf-refband-k{ margin:0 0 clamp(14px,2vh,22px); font-weight:600; font-size:12px; letter-spacing:.18em; line-height:1.2; text-transform:uppercase; color:rgba(236,231,223,.55); } body.body .sf-refband .sf-refband-h{ margin:0; max-width:20ch; font-weight:900; font-size:clamp(28px,3.6vw,52px); line-height:1.03; letter-spacing:-.02em; color:#f4efe6; } /* alte unsichtbare Einleitung raus */ body.body .casesection .navflowcontainer.fallbeispiele{ display:none !important; } body.body #FALLBEISPIELE{ display:none !important; } /* ============================================================ v235 (Worktree) — Kontakt-Schleier + helle Referenzen-Fläche Referenzen-Band jetzt HELL (wie Huawei), die zwei Kontakt-Momente (Mid-CTA + echte Kontakt-Sektion) als transparent-schwarzer Schleier (Mosaik scheint durch). Ersetzt den dunklen Referenzen-Block aus v234. ============================================================ */ /* Referenzen-Band: hell wie Huawei (#faf9f6), dunkle Schrift */ body.body .sf-refband{ background:#faf9f6 !important; color:#1a1916; } body.body .sf-refband .sf-refband-k{ color:#726c64; } body.body .sf-refband .sf-refband-h{ color:#1a1916; } /* Mid-CTA Kontaktbox: dunkler Schleier */ body.body .sf-midcta{ background:rgba(18,17,16,.8) !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); position:relative; z-index:3; } body.body .sf-midcta .sf-midcta-lead{ color:#f4efe6 !important; } body.body .sf-midcta .sf-midcta-sub{ color:rgba(236,231,223,.72) !important; } body.body .sf-midcta .sf-midcta-link{ color:rgba(236,231,223,.62) !important; } /* echte Kontakt-Sektion unten: dunkler Schleier */ body.body #kontakt.contactsection{ background:rgba(18,17,16,.8) !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); position:relative; z-index:2; } /* ============================================================ v236 (Worktree) — Abstände der neuen Elemente straffen (Referenzen-Band + Mid-CTA waren zu üppig, an den ~55px-Rhythmus der übrigen Sektionen angeglichen). ============================================================ */ body.body .sf-midcta .sf-midcta-inner{ padding-top:clamp(34px,4.4vh,50px) !important; } body.body .sf-midcta{ padding-bottom:clamp(32px,4.2vh,46px) !important; } body.body .sf-refband{ padding-top:clamp(34px,4.4vh,52px) !important; padding-bottom:clamp(34px,4.4vh,52px) !important; } /* v237 (Worktree) — doppelte Polsterung About->CTA entfernen (war ~124px) */ body.body .sf-solve{ padding-bottom:clamp(4px,0.8vh,12px) !important; } body.body .sffunnel .sf-solve > .sf-wrap{ padding-bottom:clamp(30px,3.8vh,46px) !important; } /* v238 (Worktree) — About: Linie über "Warum" raus + Abstand straffen (war 82px margin + 28px padding + Haarlinie zwischen Captions und Warum) */ body.body .sffunnel .sf-solve .sf-close{ border-top:0 !important; margin-top:clamp(48px,6vh,72px) !important; padding-top:0 !important; } /* v239 (Worktree) — Referenzen-Box: dezente Transparenz wie die normalen hellen Flaechen (0.98), kein Blur. Mosaik scheint genauso leicht durch wie im Cremefeld/bei Huawei. */ body.body .sf-refband{ background:rgba(250,249,246, var(--sf-glass,0.85)) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* v240 (Worktree) — Reveal für Elemente außerhalb .sffunnel (Mid-CTA + Referenzen-Überschrift), analog zu .sffunnel .sf-r (opacity + translateY 24px, 0.75s). */ .sf-r2{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);} .sf-r2.sf-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.sf-r2{opacity:1;transform:none;transition:none}} /* ============================================================ v241 (Worktree) — Variante "ohne Problem-Block" (?noproblem / ?variant=b) Problem-Block ausgeblendet; dafür Hook + Angebots-Zeile DUNKEL (Farbe vom Problembereich), damit der Bereich darunter wieder hell ist. ============================================================ */ body.body.sf-noproblem .sffunnel .sf-dark{ display:none !important; } body.body.sf-noproblem .sffunnel .sf-hook, body.body.sf-noproblem .sf-offerstrip{ background:rgba(18,17,16,.8) !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); position:relative; z-index:2; } body.body.sf-noproblem .sffunnel .sf-hook .sf-hook-eyebrow{ color:rgba(236,231,223,.6) !important; } body.body.sf-noproblem .sffunnel .sf-hook .sf-h1{ color:#f4efe6 !important; } body.body.sf-noproblem .sffunnel .sf-hook .sf-hooklead{ color:rgba(236,231,223,.75) !important; } body.body.sf-noproblem .sf-offerstrip .sf-offer-kicker{ color:rgba(236,231,223,.6) !important; } body.body.sf-noproblem .sf-offerstrip .sf-offer-grid span{ color:#f4efe6 !important; } body.body.sf-noproblem .sf-offerstrip .sf-offer-grid span:not(:last-child)::after{ background:rgba(236,231,223,.25) !important; } body.body.sf-noproblem .sf-offerstrip .sf-wrap{ border-top-color:rgba(236,231,223,.18) !important; } /* ============================================================ v242 (2026-08-21) — Mobile-Fixes A) Team-Portraits GROSS (gestapelt) statt 86px-Thumbnails B) "Was wir übernehmen"-Reveal ohne Vertikal-Versatz (kein Ruckler) ============================================================ */ @media(max-width:760px){ /* A) Team-Portraits: Foto gross oben, Text darunter */ body.body .sffunnel .sf-solve .sf-team{ grid-template-columns:1fr!important; gap:clamp(30px,5.5vh,48px)!important; } body.body .sffunnel .sf-solve .sf-member{ width:100%!important; display:block!important; grid-template-columns:none!important; } body.body .sffunnel .sf-solve .sf-member .sf-m-frame, body.body .sffunnel .sf-solve .sf-member .sf-m-photo{ width:100%!important; max-width:min(100%,460px)!important; } body.body .sffunnel .sf-solve .sf-m-txt{ margin-top:clamp(12px,2vh,18px); } /* B) Angebots-Reveal ohne translateY -> in-place Fade, kein Ruckler */ body.body .sffunnel .sf-offerstrip .sf-r, body.body .sffunnel .sf-offerstrip .sf-r.sf-in{ transform:none!important; } } /* ============================================================ v250 (2026-08-21) — About-Ueberschrift blendet zeilenweise ein (analog zum Hook: sf-r jetzt pro Zeile statt auf dem Container), mit sanfter Staffelung. ============================================================ */ body.body .sffunnel .sf-solve .sf-gegen .sf-neg.sf-r{transition-delay:.04s} body.body .sffunnel .sf-solve .sf-gegen .sf-pos.sf-r{transition-delay:.18s} /* ============================================================ v254 (2026-08-21) — Sequenzielles Einblenden (links→rechts) A) Leistungs-Zeile (Angebots-Spans) auf der ersten Folie B) die 3 "Warum"-Punkte im About-Block ============================================================ */ body.body .sffunnel .sf-offer-grid .sf-r:nth-child(1){transition-delay:0s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(2){transition-delay:.08s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(3){transition-delay:.16s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(4){transition-delay:.24s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(5){transition-delay:.32s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(6){transition-delay:.40s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(1){transition-delay:.06s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(2){transition-delay:.18s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(3){transition-delay:.30s} /* v254b — DE/EN-Umschalter prominent im Desktop-Top-Nav (rechts, in .sf-menu = nur Desktop) */ .sf-topbar .sf-navlang{display:inline-flex;align-items:center;gap:7px} .sf-topbar .sf-navlang a{opacity:.4;transition:opacity .2s ease} .sf-topbar .sf-navlang a.on{opacity:1} .sf-topbar .sf-navlang a:hover{opacity:.9} .sf-topbar .sf-navlang .sf-navlang-sep{opacity:.3;font-size:12px} /* v255 (2026-08-21) — Sequenz-Reveal langsamer + deutlicher (Michael: "sieht man kaum, sofort da") */ body.body .sffunnel .sf-offer-grid .sf-r, body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r{transition-duration:1.05s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(1){transition-delay:0s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(2){transition-delay:.16s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(3){transition-delay:.32s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(4){transition-delay:.48s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(5){transition-delay:.64s} body.body .sffunnel .sf-offer-grid .sf-r:nth-child(6){transition-delay:.80s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(1){transition-delay:.1s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(2){transition-delay:.4s} body.body .sffunnel .sf-close-grid .sf-cg-item.sf-r:nth-child(3){transition-delay:.7s} /* ============================================================ v256 (2026-08-21) — Reveal für Referenzband + fixe Kontaktbox ============================================================ */ /* Referenzband: spät + gestaffelt (Observer feuert bei rootMargin -30%) */ .sf-rbrev{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .sf-rbrev.sf-in{opacity:1;transform:none} .sf-refband .sf-refband-h.sf-rbrev{transition-delay:.12s} /* Kontaktbox: Inhalt blendet auf, wenn die fixe Box ins Reveal-Fenster kommt (.sf-cta-live) */ .sf-ctarev{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} body.body.sf-stack .sf-midcta.sf-cta-live .sf-ctarev{opacity:1;transform:none} body.body.sf-stack .sf-midcta.sf-cta-live .sf-midcta-sub.sf-ctarev{transition-delay:.1s} body.body.sf-stack .sf-midcta.sf-cta-live .sf-midcta-actions.sf-ctarev{transition-delay:.2s} /* Fallback: ohne Stack (?stack=0) die Kontaktbox-Inhalte normal sichtbar */ body.body:not(.sf-stack) .sf-ctarev{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.sf-rbrev,.sf-ctarev{opacity:1!important;transform:none!important;transition:none!important}} /* ============ v257 ============ */ /* Kontaktbox: scroll-gekoppelter Skalier-Effekt (klein beim Ein-/Ausscrollen, gross mittig). --ctascale wird im Stack-JS gesetzt; skaliert nur den Inhalt (websitecontainer), nicht das Scrim. */ body.body.sf-stack .sf-midcta .websitecontainer{transform:scale(var(--ctascale,0.86));transform-origin:center center;transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform} @media (prefers-reduced-motion:reduce){body.body.sf-stack .sf-midcta .websitecontainer{transform:none!important}} /* Case-„Mehr / Case ansehen (extern)"-Link vorerst deaktiviert (nur ausgeblendet, nicht entfernt) */ .sf-caselinks{display:none!important} /* ============ v258 ============ */ /* Kontaktbox: zentrierte Mittelachse (bewusste Unterbrechung/Pause) + Wachstum von unten nach oben */ body.body.sf-stack .sf-midcta .sf-midcta-inner{max-width:760px!important;margin:0 auto!important;text-align:center!important} body.body.sf-stack .sf-midcta .sf-midcta-lead,body.body.sf-stack .sf-midcta .sf-midcta-sub{text-align:center!important;margin-left:auto!important;margin-right:auto!important} body.body.sf-stack .sf-midcta .sf-midcta-actions{justify-content:center!important} body.body.sf-stack .sf-midcta .websitecontainer{transform-origin:center bottom} /* ============ v260 ============ */ /* Erste Kontaktbox auf Desktop etwas groesser (Schrift + Box) */ @media (min-width:1000px){ body.body.sf-stack .sf-midcta .sf-midcta-inner{max-width:840px!important} body.body.sf-stack .sf-midcta .sf-midcta-lead{font-size:clamp(30px,3vw,40px)!important} body.body.sf-stack .sf-midcta .sf-midcta-sub{font-size:clamp(18px,1.5vw,22px)!important} body.body.sf-stack .sf-midcta .sf-midcta-btn{font-size:15px;padding:18px 38px} } /* ===== Paletten-Switcher / -Picker (Test, nur Branch color-experiment-v2 — komplett entfernbar) ===== */ body.sfpal-terrakotta { --sfB-bg:#f2e5da; --sfB-ink:#201b16; --sfB-muted:#6a5f53; --sfB-line:#dcccbc; --sfB-brand:#23201c; --sfB-dark:#171410; --sfB-band:#e7d6c5; --sfB-a1:#faf3e6; --sfB-a2:#f2e5da; --sfB-a3:#ead9c7; --sfB-b1:#423c35; --sfB-b2:#575049; --sfB-action:#9c4a26; --sfB-actionText:#f5f5f5; --sfB-actionHover:#7f3a1d; --sfB-contact:#23201c; } body.sfpal-kobalt { --sfB-bg:#eef0ee; --sfB-ink:#191c1b; --sfB-muted:#5c6360; --sfB-line:#d4d8d5; --sfB-brand:#1e2220; --sfB-dark:#121514; --sfB-band:#dfe2e7; --sfB-a1:#f7f8f6; --sfB-a2:#eef0ee; --sfB-a3:#e2e6e3; --sfB-b1:#3f4442; --sfB-b2:#4d5359; --sfB-action:#2138c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#182ba0; --sfB-contact:#17191b; } body.sfpal-signal { --sfB-bg:#f5f2ec; --sfB-ink:#171614; --sfB-muted:#676259; --sfB-line:#ddd8ce; --sfB-brand:#1c1b18; --sfB-dark:#121110; --sfB-band:#e4e4de; --sfB-a1:#fdfbf6; --sfB-a2:#f5f2ec; --sfB-a3:#ebe6dc; --sfB-b1:#3d3b36; --sfB-b2:#514e47; --sfB-action:#d63513; --sfB-actionText:#f5f5f5; --sfB-actionHover:#b52d10; --sfB-contact:#131210; } body.sfpal-mono { --sfB-bg:#f4f4f2; --sfB-ink:#121212; --sfB-muted:#6c6c6a; --sfB-line:#d7d7d4; --sfB-brand:#1f1f1e; --sfB-dark:#0e0e0e; --sfB-band:#dededb; --sfB-a1:#fbfbfa; --sfB-a2:#f4f4f2; --sfB-a3:#e9e9e7; --sfB-b1:#3c3c3b; --sfB-b2:#52524f; --sfB-action:#121212; --sfB-actionText:#f5f5f5; --sfB-actionHover:#333331; --sfB-contact:#111111; } body.sfpal-tanne { --sfB-bg:#f1f0ea; --sfB-ink:#171b16; --sfB-muted:#5f655c; --sfB-line:#d6d8cf; --sfB-brand:#1d241e; --sfB-dark:#121711; --sfB-band:#e0e3d8; --sfB-a1:#f9f8f2; --sfB-a2:#f1f0ea; --sfB-a3:#e5e6db; --sfB-b1:#34423a; --sfB-b2:#46554c; --sfB-action:#1f5c40; --sfB-actionText:#f5f5f5; --sfB-actionHover:#174630; --sfB-contact:#16201a; } body.sfpal-wein { --sfB-bg:#f5efe9; --sfB-ink:#1d1416; --sfB-muted:#6d5f61; --sfB-line:#e0d4cf; --sfB-brand:#241a1c; --sfB-dark:#170f11; --sfB-band:#e9dcd6; --sfB-a1:#fbf7f2; --sfB-a2:#f5efe9; --sfB-a3:#ecdfd8; --sfB-b1:#46333a; --sfB-b2:#5a4650; --sfB-action:#7d2439; --sfB-actionText:#f5f5f5; --sfB-actionHover:#611b2c; --sfB-contact:#221518; } body.sfpal-ocker { --sfB-bg:#f6efe0; --sfB-ink:#1c1710; --sfB-muted:#6b6150; --sfB-line:#e0d5bd; --sfB-brand:#211c12; --sfB-dark:#15110a; --sfB-band:#ecdfc4; --sfB-a1:#fcf7ea; --sfB-a2:#f6efe0; --sfB-a3:#eee3cc; --sfB-b1:#453d2c; --sfB-b2:#5a5140; --sfB-action:#8f6400; --sfB-actionText:#f5f5f5; --sfB-actionHover:#715000; --sfB-contact:#201b11; } body.sfpal-nordisch { --sfB-bg:#eef1f4; --sfB-ink:#161b20; --sfB-muted:#5a626b; --sfB-line:#d3d9df; --sfB-brand:#1c2229; --sfB-dark:#10151a; --sfB-band:#dfe5ea; --sfB-a1:#f7f9fb; --sfB-a2:#eef1f4; --sfB-a3:#e2e7ec; --sfB-b1:#37424c; --sfB-b2:#48545f; --sfB-action:#2e5876; --sfB-actionText:#f5f5f5; --sfB-actionHover:#234459; --sfB-contact:#151b21; } body.sfpal-puder { --sfB-bg:#f6edea; --sfB-ink:#1e1516; --sfB-muted:#6f5f5e; --sfB-line:#e3d2cd; --sfB-brand:#251b1c; --sfB-dark:#171011; --sfB-band:#eddcd6; --sfB-a1:#fcf6f3; --sfB-a2:#f6edea; --sfB-a3:#eeded8; --sfB-b1:#4a3a3c; --sfB-b2:#5e4c4e; --sfB-action:#8d3745; --sfB-actionText:#f5f5f5; --sfB-actionHover:#6f2a36; --sfB-contact:#231719; } body.sfpal-tinte { --sfB-bg:#f1eff4; --sfB-ink:#191621; --sfB-muted:#625d6c; --sfB-line:#d8d4df; --sfB-brand:#201c2a; --sfB-dark:#131019; --sfB-band:#e3dfe9; --sfB-a1:#f8f7fa; --sfB-a2:#f1eff4; --sfB-a3:#e6e2ec; --sfB-b1:#3d374b; --sfB-b2:#4f485e; --sfB-action:#4a3a8c; --sfB-actionText:#f5f5f5; --sfB-actionHover:#392c70; --sfB-contact:#191525; } body.sfpal-greige { --sfB-bg:#f2f1ed; --sfB-ink:#1a1916; --sfB-muted:#66635c; --sfB-line:#dbd8d1; --sfB-brand:#201f1b; --sfB-dark:#131210; --sfB-band:#e5e3dc; --sfB-a1:#faf9f6; --sfB-a2:#f2f1ed; --sfB-a3:#e8e6df; --sfB-b1:#403e38; --sfB-b2:#55524b; --sfB-action:#2f2bd6; --sfB-actionText:#f5f5f5; --sfB-actionHover:#221fa8; --sfB-contact:#1a1915; } body.sfpal-lavendel { --sfB-bg:#f4f1f7; --sfB-ink:#1b1723; --sfB-muted:#665f72; --sfB-line:#dcd6e3; --sfB-brand:#211c2c; --sfB-dark:#14101c; --sfB-band:#e8e3ef; --sfB-a1:#faf8fc; --sfB-a2:#f4f1f7; --sfB-a3:#eae5f1; --sfB-b1:#423a52; --sfB-b2:#564d66; --sfB-action:#6246ea; --sfB-actionText:#f5f5f5; --sfB-actionHover:#4c33c4; --sfB-contact:#1a1524; } body.sfpal-acid { --sfB-bg:#f3f2ec; --sfB-ink:#181a12; --sfB-muted:#64665a; --sfB-line:#dcddd0; --sfB-brand:#1e201a; --sfB-dark:#12140e; --sfB-band:#e7e8db; --sfB-a1:#fafaf3; --sfB-a2:#f3f2ec; --sfB-a3:#e9e9dd; --sfB-b1:#3e4233; --sfB-b2:#535746; --sfB-action:#b8e42c; --sfB-actionText:#161a06; --sfB-actionHover:#9fc915; --sfB-contact:#191b13; } body.sfpal-butter { --sfB-bg:#f8f4e6; --sfB-ink:#1c1a10; --sfB-muted:#6b6753; --sfB-line:#e2ddc6; --sfB-brand:#211f14; --sfB-dark:#14130b; --sfB-band:#efe9cf; --sfB-a1:#fdfaf0; --sfB-a2:#f8f4e6; --sfB-a3:#f0ead4; --sfB-b1:#45412f; --sfB-b2:#5a5642; --sfB-action:#f2ce33; --sfB-actionText:#1c1a08; --sfB-actionHover:#e0bb1a; --sfB-contact:#1f1d12; } body.sfpal-cherry { --sfB-bg:#f6f4f2; --sfB-ink:#1c1416; --sfB-muted:#6b6062; --sfB-line:#e0dad8; --sfB-brand:#211a1c; --sfB-dark:#140f11; --sfB-band:#ece6e3; --sfB-a1:#fcfaf9; --sfB-a2:#f6f4f2; --sfB-a3:#ede8e6; --sfB-b1:#423440; --sfB-b2:#574753; --sfB-action:#c4114b; --sfB-actionText:#f5f5f5; --sfB-actionHover:#a30c3c; --sfB-contact:#1a1216; } body.sfpal-chrom { --sfB-bg:#f0f1f3; --sfB-ink:#16181b; --sfB-muted:#5d6167; --sfB-line:#d5d8dc; --sfB-brand:#1b1e22; --sfB-dark:#101317; --sfB-band:#e1e4e8; --sfB-a1:#f8f9fa; --sfB-a2:#f0f1f3; --sfB-a3:#e5e7ea; --sfB-b1:#3b4046; --sfB-b2:#4f555c; --sfB-action:#cc3e00; --sfB-actionText:#f5f5f5; --sfB-actionHover:#a83300; --sfB-contact:#14171b; } body.sfpal-inkpop { --sfB-bg:#f4efe7; --sfB-ink:#201914; --sfB-muted:#6d6357; --sfB-line:#dfd6c9; --sfB-brand:#251e17; --sfB-dark:#16110c; --sfB-band:#eae2d4; --sfB-a1:#fbf7f0; --sfB-a2:#f4efe7; --sfB-a3:#ece4d7; --sfB-b1:#443a30; --sfB-b2:#594e42; --sfB-action:#0f62fe; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0a4ccc; --sfB-contact:#221b14; } body.sfpal-holo { --sfB-bg:#f2f2f5; --sfB-ink:#17171c; --sfB-muted:#61616b; --sfB-line:#d9d9df; --sfB-brand:#1d1d24; --sfB-dark:#111117; --sfB-band:#e5e5ec; --sfB-a1:#f6f8fc; --sfB-a2:#f6f2f8; --sfB-a3:#eff5f1; --sfB-b1:#3d3a50; --sfB-b2:#514d63; --sfB-action:#c2187e; --sfB-actionText:#f5f5f5; --sfB-actionHover:#9e1264; --sfB-contact:#16161d; } body.sfpal-hyper { --sfB-bg:#f1f4f2; --sfB-ink:#141a16; --sfB-muted:#5c655f; --sfB-line:#d6ddd8; --sfB-brand:#1a211c; --sfB-dark:#0f1511; --sfB-band:#e2e8e4; --sfB-a1:#f8fbf9; --sfB-a2:#f1f4f2; --sfB-a3:#e6ece8; --sfB-b1:#3b3f3d; --sfB-b2:#505553; --sfB-action:#2ee56f; --sfB-actionText:#0c1810; --sfB-actionHover:#1cc95a; --sfB-contact:#141715; } body.sfpal-petrol { --sfB-bg:#eff3f3; --sfB-ink:#131b1b; --sfB-muted:#576364; --sfB-line:#d3dcdc; --sfB-brand:#192222; --sfB-dark:#0e1516; --sfB-band:#dfe7e7; --sfB-a1:#f7fafa; --sfB-a2:#eff3f3; --sfB-a3:#e4ebeb; --sfB-b1:#2f4449; --sfB-b2:#41585e; --sfB-action:#0e7490; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0a5a70; --sfB-contact:#131c1e; } body.sfpal-msblau { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#e4e0d8; --sfB-a1:#f6f6f4; --sfB-a2:#ededeb; --sfB-a3:#dde0dd; --sfB-b1:#3a3a38; --sfB-b2:#4e4e4c; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#1e1f1d; } body.sfpal-msfeuer { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#dde0dd; --sfB-a1:#f5f3ee; --sfB-a2:#ece9e2; --sfB-a3:#e4e0d8; --sfB-b1:#423b34; --sfB-b2:#56504a; --sfB-action:#e02000; --sfB-actionText:#f5f5f5; --sfB-actionHover:#b81a00; --sfB-contact:#1e1f1d; } body.sfpal-msduo { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#e4e0d8; --sfB-a1:#f6f6f4; --sfB-a2:#ededeb; --sfB-a3:#e1e1dd; --sfB-b1:#3a3a38; --sfB-b2:#4e4e4c; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#1e1f1d; } body.sfpal-msverlauf { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#dde0dd; --sfB-a1:#f3f5f3; --sfB-a2:#edebe5; --sfB-a3:#e4e0d8; --sfB-b1:#3a3a38; --sfB-b2:#4e4e4c; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#1e1f1d; } body.sfpal-msnacht { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1d1f27; --sfB-dark:#12141c; --sfB-band:#e0e2df; --sfB-a1:#f4f5f4; --sfB-a2:#ebedec; --sfB-a3:#dde0dd; --sfB-b1:#33364a; --sfB-b2:#474a5f; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#1c1e26; } body.sfpal-msglut { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#241e1b; --sfB-dark:#17120f; --sfB-band:#e6e2da; --sfB-a1:#f5f3ee; --sfB-a2:#ece9e2; --sfB-a3:#e4e0d8; --sfB-b1:#423b34; --sfB-b2:#56504a; --sfB-action:#e02000; --sfB-actionText:#f5f5f5; --sfB-actionHover:#b81a00; --sfB-contact:#241e1b; } body.sfpal-mshauch { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#e7e7e4; --sfB-a1:#f6f6f4; --sfB-a2:#ededeb; --sfB-a3:#e3e3e0; --sfB-b1:#3a3a38; --sfB-b2:#4e4e4c; --sfB-action:#252525; --sfB-actionText:#f5f5f5; --sfB-actionHover:#1228c8; --sfB-contact:#1e1f1d; } body.sfpal-msmut { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#e4e0d8; --sfB-a1:#f4f6fa; --sfB-a2:#e9edf5; --sfB-a3:#d9def0; --sfB-b1:#33364a; --sfB-b2:#474a5f; --sfB-action:#e02000; --sfB-actionText:#f5f5f5; --sfB-actionHover:#b81a00; --sfB-contact:#1e1f1d; } body.sfpal-mspapier { --sfB-bg:#f7f7f5; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#141414; --sfB-band:#dde0dd; --sfB-a1:#ffffff; --sfB-a2:#f4f4f2; --sfB-a3:#ededeb; --sfB-b1:#3a3a38; --sfB-b2:#4e4e4c; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#1e1f1d; } body.sfpal-mskohle { --sfB-bg:#ededeb; --sfB-ink:#252525; --sfB-muted:#686868; --sfB-line:#d4d4d2; --sfB-brand:#1e1f1d; --sfB-dark:#101010; --sfB-band:#e0e2df; --sfB-a1:#f5f5f3; --sfB-a2:#ebebe9; --sfB-a3:#e0e0dd; --sfB-b1:#343432; --sfB-b2:#484846; --sfB-action:#1228c8; --sfB-actionText:#f5f5f5; --sfB-actionHover:#0e1fa0; --sfB-contact:#141414; } body.sfpal-hafen { --sfB-bg:#f2f1ed; --sfB-ink:#1b2a35; --sfB-muted:#5f6b74; --sfB-line:#dbd8d1; --sfB-brand:#1e3245; --sfB-dark:#172836; --sfB-band:#e5e3dc; --sfB-a1:#faf9f6; --sfB-a2:#f2f1ed; --sfB-a3:#e8e6df; --sfB-b1:#22384a; --sfB-b2:#2d485a; --sfB-action:#2f2bd6; --sfB-actionText:#f5f5f5; --sfB-actionHover:#221fa8; --sfB-contact:#1a1916; } body[class*="sfpal-"].body { background-color: var(--sfB-brand) !important; } body[class*="sfpal-"] .sffunnel { --sf-cream: var(--sfB-bg); --sf-ink: var(--sfB-ink); --sf-dark: var(--sfB-contact); --sf-onDark: #f5f5f5; --sf-onMute: var(--sfB-muted); } body[class*="sfpal-"] .sffunnel .sf-hook, body[class*="sfpal-"] .sffunnel .sf-solve { background: color-mix(in srgb, var(--sfB-bg) 98%, transparent); } body[class*="sfpal-"] .sffunnel .sf-dark { background: color-mix(in srgb, var(--sfB-dark) 98%, transparent); } body[class*="sfpal-"] .sf-stickyfunnel .sffunnel .sf-dark .sf-fbar { background: color-mix(in srgb, var(--sfB-dark) 98%, transparent); } body[class*="sfpal-"] .sf-stickyfunnel .sffunnel .sf-solve .sf-fbar { background: color-mix(in srgb, var(--sfB-bg) 98%, transparent); } body[class*="sfpal-"] .sffunnel .sf-solve .sf-solve-top { background: var(--sfB-band); } body[class*="sfpal-"].sf-logomode .sf-solveband { background: var(--sfB-bg); } body[class*="sfpal-"] .sf-topbar { background: var(--sfB-bg); } body[class*="sfpal-"].sf-mnav-open .sf-topbar { background: color-mix(in srgb, var(--sfB-bg) 75%, transparent) !important; } body[class*="sfpal-"] .sf-mobilemenu { background: color-mix(in srgb, var(--sfB-bg) 75%, transparent) !important; } body[class*="sfpal-"] .sffunnel .sf-hooklead { color: var(--sfB-muted); } body[class*="sfpal-"] .sf-hook-eyebrow { color: var(--sfB-muted); } /* Case-Slots im B-Mapping */ body[class*="sfpal-"] .caseinfo.intro { background-color: color-mix(in srgb, var(--sfB-bg) 98%, transparent) !important; } body[class*="sfpal-"] .caseinfo.huawei { background-color: color-mix(in srgb, var(--sfB-a1) 98%, transparent) !important; } body[class*="sfpal-"] .caseinfo.photokina { background-color: color-mix(in srgb, var(--sfB-a2) 98%, transparent) !important; } body[class*="sfpal-"] .caseinfo.top3 { background-color: color-mix(in srgb, var(--sfB-a3) 98%, transparent) !important; } body[class*="sfpal-"] .caseinfo.travelneu { background-color: color-mix(in srgb, var(--sfB-b1) 98%, transparent) !important; } body[class*="sfpal-"] .caseinfo.berlinstagram { background-color: color-mix(in srgb, var(--sfB-b2) 98%, transparent) !important; } body[class*="sfpal-"] .navflowcontainer.photokina { background-color: var(--sfB-a2) !important; } body[class*="sfpal-"] .navflowcontainer.top3 { background-color: var(--sfB-a3) !important; } body[class*="sfpal-"] .navflowcontainer.travelneu { background-color: var(--sfB-b1) !important; } body[class*="sfpal-"] .navflowcontainer.berlinstagram { background-color: var(--sfB-b2) !important; } /* Zwischen-CTA + Handlungs-Buttons */ /* Schleier-Flaechen (Mid-CTA, Kontakt, erste Slide/.sf-stackblock) bleiben BEWUSST im warmen Basis-Schwarz (rgba(18,17,16,.8)) — Michael 23.08.: Schwarz sieht besser aus als der Navy-Schleier. Daher hier KEIN Palette-Background-Override auf diese Flaechen. */ body[class*="sfpal-"] .sf-midcta-btn { background: var(--sfB-action); color: var(--sfB-actionText); } body[class*="sfpal-"] .sf-midcta-btn:hover { background: var(--sfB-actionHover); color: var(--sfB-actionText); } /* Ueber uns */ body[class*="sfpal-"] .aboutsection { background-color: color-mix(in srgb, var(--sfB-bg) 98%, transparent) !important; } body[class*="sfpal-"] .aboutsection .navflowcontainer.warmconcrete { background-color: color-mix(in srgb, var(--sfB-bg) 98%, transparent) !important; } /* Kontakt (dunkel) */ body[class*="sfpal-"] .contactsection { background: var(--sfB-contact); } body[class*="sfpal-"] .contactsection .casetext .paragraph, body[class*="sfpal-"] .contactsection .sf-cr-direct a { color: rgba(245,245,245,0.66); } body[class*="sfpal-"] .contactsection .sf-cr-sign { color: rgba(245,245,245,0.45); } body[class*="sfpal-"] .contactsection .paragraph.form { color: rgba(245,245,245,0.55); } body[class*="sfpal-"] .contactsection .submit-button.w-button { background: var(--sfB-action); color: var(--sfB-actionText); } body[class*="sfpal-"] .contactsection .submit-button.w-button:hover { background: var(--sfB-actionHover); color: var(--sfB-actionText); } /* Footer HELL (Grundfarbe der Palette); Kontakt bleibt der einzige dunkle Schlussblock. Texte NICHT ueberschrieben -> dunkle Basis-Footer-Texte greifen (auf jedem hellen Palette-bg lesbar). */ body[class*="sfpal-"] .footersection { background: var(--sfB-bg); box-shadow: 0 22vh 0 22vh var(--sfB-bg); } body[class*="sfpal-"].sf-endreveal .footersection { box-shadow: 0 20vh 0 20vh var(--sfB-bg); } body[class*="sfpal-"] .footersection .navflowtitle.hero { color: var(--sfB-ink); } body[class*="sfpal-"] .footersection .sf-footer-claim { color: var(--sfB-muted); } body[class*="sfpal-"] .footersection .text-block-15-copy { color: var(--sfB-ink); } body[class*="sfpal-"] .footersection .footernav { color: var(--sfB-muted); } body[class*="sfpal-"] .footersection .footernav:hover { color: var(--sfB-ink); } body[class*="sfpal-"] .footersection .text-block-14, body[class*="sfpal-"] .footersection .text-block-16, body[class*="sfpal-"] .footersection .sf-footerlang a, body[class*="sfpal-"] .footersection .sf-footer-bottom .text-block-16, body[class*="sfpal-"] .footersection .sf-footer-bottom .sf-legal-link, body[class*="sfpal-"] .footersection .sf-footer-bottom .sf-footerlang a { color: var(--sfB-muted); } body[class*="sfpal-"] .footersection .sf-footerlang a.active { color: var(--sfB-ink); } /* Platzhalter */ body[class*="sfpal-"] .sf-portrait-ph, body[class*="sfpal-"] .sffunnel .sf-solve .sf-m-photo { background-color: var(--sfB-line); } /* msduo: Zwei-Akzent-Ausnahme — Kontakt-Senden in Fire Red */ body.sfpal-msduo .contactsection .submit-button.w-button { background: #e02000; } body.sfpal-msduo .contactsection .submit-button.w-button:hover { background: #b81a00; } /* ===== Fliesstext in die Palette-Ink-Familie ziehen (Rest-Warmtoene aus dem Basis-Design vereinheitlichen; nur helle Flaechen) ===== */ /* Aussage-/Emphase-Zeilen -> Palette-Ink */ body[class*="sfpal-"] .sf-pos, body[class*="sfpal-"] .sf-m-name, body[class*="sfpal-"] .sf-cg-lbl, body[class*="sfpal-"] .sf-refband-h { color: var(--sfB-ink) !important; } body[class*="sfpal-"] .sf-pos { color: var(--sfB-ink) !important; } /* laufender Fliesstext / Sekundaeres -> Palette-Muted (Hierarchie bleibt) */ body[class*="sfpal-"] .sf-cg-txt, body[class*="sfpal-"] .sf-refband-k, body[class*="sfpal-"] .sf-lg-lede, body[class*="sfpal-"] .sf-lg-md { color: var(--sfB-muted) !important; } /* Case-Kicker nur auf HELLEN Cases umfaerben (dunkle Cases bleiben hell) */ body[class*="sfpal-"] .caseinfo.huawei .sf-case-kick, body[class*="sfpal-"] .caseinfo.photokina .sf-case-kick, body[class*="sfpal-"] .caseinfo.top3 .sf-case-kick { color: var(--sfB-muted) !important; } /* ===== Rest-Inks (Ueber-uns / Cases / Referenzen) in die Palette-Familie ziehen ===== */ /* Emphase/Titel auf hellen Flaechen -> Ink */ body[class*="sfpal-"] .sf-lg-sub, body[class*="sfpal-"] .sf-lg-mt, body[class*="sfpal-"] .claim, body[class*="sfpal-"] .casenavflow, body[class*="sfpal-"] .sf-drop-name { color: var(--sfB-ink) !important; } /* Sekundaer/Label auf hellen Flaechen -> Muted */ body[class*="sfpal-"] .sf-lg-label, body[class*="sfpal-"] .navflowtitle:not(.hero), body[class*="sfpal-"] .sf-drop-cat { color: var(--sfB-muted) !important; } /* Case-Kontext NUR auf HELLEN Cases (dunkle Cases behalten helle Schrift) */ body[class*="sfpal-"] .caseinfo.intro .highlight, body[class*="sfpal-"] .caseinfo.huawei .highlight, body[class*="sfpal-"] .caseinfo.photokina .highlight, body[class*="sfpal-"] .caseinfo.top3 .highlight, body[class*="sfpal-"] .caseinfo.intro .headline2, body[class*="sfpal-"] .caseinfo.huawei .headline2, body[class*="sfpal-"] .caseinfo.photokina .headline2, body[class*="sfpal-"] .caseinfo.top3 .headline2 { color: var(--sfB-ink) !important; } body[class*="sfpal-"] .caseinfo.intro .sf-case-lbl, body[class*="sfpal-"] .caseinfo.huawei .sf-case-lbl, body[class*="sfpal-"] .caseinfo.photokina .sf-case-lbl, body[class*="sfpal-"] .caseinfo.top3 .sf-case-lbl, body[class*="sfpal-"] .caseinfo.intro .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.huawei .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.photokina .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.top3 .sf-caselinks-kicker { color: var(--sfB-muted) !important; } /* ===== Nachzuegler: Team-Beschreibungen, Case-Lead-Absaetze, Funnel-Vergleichszeile ===== */ body[class*="sfpal-"] .sf-m-desc { color: var(--sfB-muted) !important; } body[class*="sfpal-"] .sf-a1 { color: var(--sfB-muted) !important; } /* Case-Lead-Absatz (.paragraph.sf-cq) NUR auf hellen Cases -> Ink (Body-Absaetze bleiben Muted) */ body[class*="sfpal-"] .caseinfo.intro .paragraph.sf-cq, body[class*="sfpal-"] .caseinfo.huawei .paragraph.sf-cq, body[class*="sfpal-"] .caseinfo.photokina .paragraph.sf-cq, body[class*="sfpal-"] .caseinfo.top3 .paragraph.sf-cq { color: var(--sfB-ink) !important; } /* ===== Michael 23.08.: Footer in Online-Greige (#f2f1ed) statt hafen-Creme; Navy-Text bleibt ===== 24.08.: Leistungen-Sektion jetzt transparent (0.55) wie die anderen Slides -> Mosaik scheint durch. (War vorher #f2f1ed deckend und ueberschrieb als hafen-spezifische Regel die generische 0.55.) */ body.sfpal-hafen .aboutsection, body.sfpal-hafen .aboutsection .navflowcontainer.warmconcrete { background-color: rgba(242,241,237, var(--sf-glass,0.85)) !important; } :root{ --sf-glass:0.96; } /* zentrale Glas-Transparenz aller Creme-Flaechen; per Regler (?glass) einstellbar */ /* 24.08.: Footer + drei creme-Cases (huawei/photokina/top3) transparent (0.55) wie die anderen Flaechen -> Mosaik scheint durch. Navy-Cases (travelneu/berlinstagram) bleiben deckend. */ body.sfpal-hafen .footersection { background: rgba(242,241,237, var(--sf-glass,0.85)) !important; box-shadow: 0 22vh 0 22vh rgba(242,241,237, var(--sf-glass,0.85)) !important; } body.sfpal-hafen.sf-endreveal .footersection { box-shadow: 0 20vh 0 20vh rgba(242,241,237, var(--sf-glass,0.85)) !important; } /* 24.08.: Mobile-Footer kurz halten — 22vh-Greige-Schatten (oben reaktiviert durch die hafen-Transparenz) auf Mobile wieder weg, wie v218. */ @media (max-width:760px){ body.sfpal-hafen .footersection, body.sfpal-hafen.sf-endreveal .footersection { box-shadow: none !important; } } body.sfpal-hafen .caseinfo.huawei { background-color: rgba(250,249,246, var(--sf-glass,0.85)) !important; } body.sfpal-hafen .caseinfo.photokina { background-color: rgba(242,241,237, var(--sf-glass,0.85)) !important; } body.sfpal-hafen .caseinfo.top3 { background-color: rgba(232,230,223, var(--sf-glass,0.85)) !important; } /* ===== Topbar-Text (Logo + Menue + Dropdown) im HELL-Zustand auf Palette-Navy; .on-dark bleibt hell ===== */ body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-logo, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-menu a, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-menu>a:hover, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-menu>.sf-hasdrop>a.sf-navtop:hover, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-drop-name, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-burger { color: var(--sfB-ink) !important; } body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-wayfind, body[class*="sfpal-"] .sf-topbar:not(.on-dark) .sf-drop-cat { color: var(--sfB-muted) !important; } /* ===== Kicker/Eyebrows: sollen die TEXTFARBE haben (Michael 23.08.: eigener Blau-Ton stoerte, passt nicht); daher = Navy-Muted der Schrift, kein separater Akzent ===== */ body.sfpal-hafen { --sfB-kicker:#5f6b74; } body[class*="sfpal-"] .aboutsection .navflowtitle:not(.hero), body[class*="sfpal-"] .sf-lg-label, body[class*="sfpal-"] .sf-refband-k, body[class*="sfpal-"] .caseinfo.intro .sf-case-kick, body[class*="sfpal-"] .caseinfo.huawei .sf-case-kick, body[class*="sfpal-"] .caseinfo.photokina .sf-case-kick, body[class*="sfpal-"] .caseinfo.top3 .sf-case-kick, body[class*="sfpal-"] .caseinfo.intro .sf-case-lbl, body[class*="sfpal-"] .caseinfo.huawei .sf-case-lbl, body[class*="sfpal-"] .caseinfo.photokina .sf-case-lbl, body[class*="sfpal-"] .caseinfo.top3 .sf-case-lbl, body[class*="sfpal-"] .caseinfo.intro .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.huawei .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.photokina .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.top3 .sf-caselinks-kicker { color: var(--sfB-kicker, var(--sfB-muted)) !important; } /* ===== Audit-Nachzuegler (23.08.) ===== */ /* Funnel-Fortschrittslabel "LOESUNG" (heller Slide) war warm #4a463f -> Kicker-Blau */ body[class*="sfpal-"] .sffunnel .sf-solve .sf-fbar-label { color: var(--sfB-kicker, #3f5c82) !important; } /* Kontakt-Eyebrow auf dem dunklen Schleier: war #5f6b74 (zu kontrastarm) -> helle kuehle Toenung */ body[class*="sfpal-"] .contactsection .navflowtitle:not(.hero) { color: #b7c1d1 !important; } /* Hero-Wortmarke SUPERFEED war #191919 -> Palette-Navy */ body[class*="sfpal-"] .herosection .navflowtitle.hero { color: var(--sfB-ink) !important; } /* ===== Dunkle Cases (Reisen/travelneu + Berlinstagram) auf KUEHLE Toene (waren warme Off-Whites) — Kohaerenz mit der Navy-Palette; Hierarchie bleibt (Headline hell, Kicker/Label gedaempft) ===== */ /* Primaerer heller Text: Headline, Highlights, Absaetze, Links + Pfeil */ body[class*="sfpal-"] .caseinfo.travelneu .headline2, body[class*="sfpal-"] .caseinfo.berlinstagram .headline2, body[class*="sfpal-"] .caseinfo.travelneu .highlight, body[class*="sfpal-"] .caseinfo.berlinstagram .highlight, body[class*="sfpal-"] .caseinfo.travelneu .paragraph, body[class*="sfpal-"] .caseinfo.berlinstagram .paragraph, body[class*="sfpal-"] .caseinfo.travelneu .casetext, body[class*="sfpal-"] .caseinfo.berlinstagram .casetext, body[class*="sfpal-"] .caseinfo.travelneu a, body[class*="sfpal-"] .caseinfo.berlinstagram a, body[class*="sfpal-"] .caseinfo.travelneu a span, body[class*="sfpal-"] .caseinfo.berlinstagram a span { color: #e8ecf0 !important; } /* Kicker (Eyebrow) — gedaempft */ body[class*="sfpal-"] .caseinfo.travelneu .sf-case-kick, body[class*="sfpal-"] .caseinfo.berlinstagram .sf-case-kick { color: #b3bcc6 !important; } /* Leistungen-Label — am dezentesten */ body[class*="sfpal-"] .caseinfo.travelneu .sf-case-lbl, body[class*="sfpal-"] .caseinfo.berlinstagram .sf-case-lbl { color: #929ca7 !important; } /* Mehr-Kicker */ body[class*="sfpal-"] .caseinfo.travelneu .sf-caselinks-kicker, body[class*="sfpal-"] .caseinfo.berlinstagram .sf-caselinks-kicker { color: #a3adb8 !important; } /* ===== Topbar-Text im DUNKEL-Zustand (.on-dark: dunkle Cases + Kontakt) auf KUEHLE helle Toene statt warm-creme (Hafen-Palette) ===== */ body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-logo, body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-menu a, body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-drop-name, body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-burger { color: #e8ecf0 !important; } body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-wayfind, body.sfpal-hafen .sf-topbar.on-dark:not(.sf-bar-warm) .sf-drop-cat { color: #b3bcc6 !important; } /* (Services-Grid: erste-Reihe-ohne-Oberlinie wieder entfernt — Michael: Linien sollen bleiben.) */ /* ------------------------------------------------------------ 86) Footer-Adresse: Webflow setzt .text-block-15-copy auf Mobile (<=479px) auf display:flex. Dadurch werden die drei
-getrennten Zeilen zu Flex-Row-Items und brechen je nach Breite unzuverlaessig / "verdreht" um. Zurueck auf normales block-Layout. ------------------------------------------------------------ */ @media (max-width:767px){ .footersection .text-block-15-copy{display:block !important} } /* ------------------------------------------------------------ 87) Mobile-Menu unter Farbpaletten deckend halten. Die sfpal-Regel setzt den Overlay-Hintergrund auf 75% transparent und verlaesst sich auf backdrop-filter:blur. Der dunkle Basis-Style deaktiviert den Blur jedoch (backdrop-filter:none !important) -> das Menu wird durchsichtig und mit hellem Text unlesbar. Deshalb hier wieder ein deckender dunkler Hintergrund (palette-unabhaengig, kein Blur noetig). ------------------------------------------------------------ */ body[class*="sfpal-"] .sf-mobilemenu{ background:rgba(18,17,16,0.66) !important; -webkit-backdrop-filter:blur(24px) saturate(1.1) !important; backdrop-filter:blur(24px) saturate(1.1) !important; } /* Bei offenem Menu ist die Topbar dunkel (JS: #141413). Die Paletten-Regel "body[class*=sfpal-] .sf-topbar:not(.on-dark) .sf-logo/.sf-burger" (0,4,1) zwingt Logo + X aber auf Palette-Navy (dunkel-auf-dunkel). Hier mit hoeherer Specificity (0,5,1) wieder hell setzen. */ body[class*="sfpal-"].sf-mnav-open .sf-topbar:not(.on-dark) .sf-logo, body[class*="sfpal-"].sf-mnav-open .sf-topbar:not(.on-dark) .sf-burger{color:#ece7df !important} /* Fallback ohne Palette: Burger/X ebenfalls hell auf dunkler Topbar. */ body.sf-mnav-open .sf-topbar .sf-burger{color:#ece7df !important} /* ------------------------------------------------------------ 89) Topbar-Farbe: kurze Ueberblendung (0.15s statt 0.32s). Die urspruenglichen 0.32s liessen beim HOCHscrollen aus einem dunklen Case-Textpanel die Leiste zu lange navy ueber dem hellen Mosaik haengen ("Blau auf Creme"). 0.15s = weicher Wechsel ohne sichtbares Nachhaengen. Betrifft nur die Leiste selbst; Kind-Transitions (Menu/Dropdown) bleiben. ------------------------------------------------------------ */ html body .sf-topbar{transition:background-color .24s ease !important} /* ------------------------------------------------------------ 90) Sticky Case-Label-Leisten (.navflowcontainer) im Logo-Modus wirklich transparent halten. Block 30 macht sie transparent, aber die Paletten- Regeln (body[class*=sfpal-] .navflowcontainer.{background:var(--sfB-*)}) haben gleiche Specificity + stehen spaeter -> gewinnen -> dunkle Cases (reisen/berlinstagram) bekamen eine navy Leiste, die als Streifen ueber dem Mosaik klebte ("leere breite Leiste" / Blau ueberm Grid). Hier mit hoeherer Specificity (Logo-Modus + Palette) endgueltig transparent. ------------------------------------------------------------ */ body[class*="sfpal-"].sf-logomode .navflowcontainer:not(.hero){background:transparent !important} /* ------------------------------------------------------------ 91) Shuffle-Hinweis ("↻ Shuffle") ausblenden — Funktion (Logo-Klick mischt das Hero-Mosaik) bleibt, nur das Label weg. Vorher nur auf Touch (@pointer:coarse) versteckt; jetzt generell. ------------------------------------------------------------ */ html body .sf-shuffle-hint{display:none !important} /* ------------------------------------------------------------ 92) Porträt-Rahmen (Passepartout): weiße Matte + feine Linie + sanfter Schatten -> lässt den Cover-Zuschnitt der Team-Fotos gewollter wirken. box-sizing:border-box, damit die Matte die Breite nicht sprengt; Rand skaliert responsive (auf Mobile dünner). ------------------------------------------------------------ */ /* Passepartout auf den FRAME-Container (clippt via overflow:hidden) bzw. aufs Foto NUR wenn es keinen Parallax-Frame gibt (reduced-motion). So bleibt die Matte stehen, waehrend das Foto darin parallaxt (sonst wird der Rand mit- geschnitten). */ body.body .sffunnel .sf-solve .sf-member .sf-m-frame, body.body .sffunnel .sf-solve .sf-member > .sf-m-photo{ box-sizing:border-box; border:clamp(6px,1.1vw,10px) solid var(--sfB-b1,#22384a) !important; outline:0 !important; box-shadow:0 10px 26px -10px rgba(34,56,74,0.38); border-radius:1px !important; } /* im Frame: kein Rand aufs bewegte Foto (wuerde geclippt) */ body.body .sffunnel .sf-solve .sf-member .sf-m-frame .sf-m-photo{ border:0 !important;outline:0 !important;box-shadow:none !important; } /* ------------------------------------------------------------ Mosaik-Gitterlinien: warmes Fast-Schwarz statt Weiss/Floral. Die Linien sind die 2px-Grid-Luecken; ihre Farbe kommt vom Hintergrund hinter den Kacheln (Hero: Grid selbst, Cases: Container). #1a1916 = Headline-Ink; editorialer, ruhiger als das alte Weiss. ------------------------------------------------------------ */ html .caseimagegrid.intro, html .caseimagegrid, html .caseimagegrid.mobile{ background-color:#1a1916 !important; } html .caseimagecontainer{ background-color:#1a1916 !important; } /* Schalter ?white : altes weisses Grid zum Vorzeigen (setzt sf-whitegrid auf ) */ html.sf-whitegrid .caseimagegrid.intro, html.sf-whitegrid .caseimagegrid, html.sf-whitegrid .caseimagegrid.mobile, html.sf-whitegrid .caseimagecontainer{ background-color:#fff !important; } /* ------------------------------------------------------------ Reveal-Tempo zentral: EINE Stellschraube fuer alle Text-Einblendungen. Frueher pro Regel 0.7s-0.85s verstreut; jetzt ueberschreibt transition-duration (Longhand + !important) nur die Dauer und laesst Easing, transform und Stagger-Delays unangetastet. Zum Tunen einfach --sf-rev aendern (kleiner = schneller). ------------------------------------------------------------ */ :root{ --sf-rev:.55s; } /* Desktop-Reveal-Dauer */ :root{ --sf-rev-m:.42s; } /* Mobile: einen Tick schneller */ html .sffunnel .sf-r, html .sffunnel .sf-h1.sf-r, html .sffunnel .sf-reframe.sf-r, html .sffunnel .sf-answer.sf-r, html .sffunnel .sf-lead.sf-r, html .sffunnel .sf-act-head p, html .sf-case .casetext.sf-cr, html .sf-case .casetitlecontainer.sf-cr, html .sf-case .casehighlight.sf-cr, html .sf-case .sf-cq{ transition-duration:var(--sf-rev) !important; } @media (max-width:767px){ html .sf-case .sf-cq, html .sffunnel .sf-r, html .sffunnel .sf-act-head p, html .sf-case .casetext.sf-cr, html .sf-case .casetitlecontainer.sf-cr, html .sf-case .casehighlight.sf-cr{ transition-duration:var(--sf-rev-m) !important; } } /* ============================================================ A11y: sichtbarer Tastatur-Fokus (Audit 25.08.2026) Greift nur bei Keyboard-Fokus (:focus-visible) — Maus-Klicks bleiben ringfrei, daher keine optische Aenderung im Normalbetrieb. #1228c8 = Marken-Action-Farbe (Kontrast ~8:1, Audit bestaetigt). ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, .w-input:focus-visible, .sf-burger:focus-visible{ outline:2px solid #1228c8 !important; outline-offset:2px !important; border-radius:2px; } /* ============================================================ 99) Referenzen-Sektion — typografischer Rhythmus (Branch typo-referenzen, 26.08.2026) Ziel: die fehlende Mittelebene schaffen + die Textebenen entkoppeln, ohne den ruhigen, foto-forward Charakter oder die Farbpanels zu stoeren. Rein additiv, am Dateiende -> gewinnt per Quell-Reihenfolge. Farbneutral (erbt pro Panel), daher auf hellen UND dunklen Panels (travelneu/berlinstagram) korrekt. ============================================================ */ /* A1 — Sektions-Headline (Refband) unter die Case-Titel setzen. War 900/~52px, praktisch gleichauf mit den Case-Woertern (900/56px) -> "Headline gegen Headline". Jetzt ruhige Anmoderation, damit das einzelne Case-Wort die staerkste Stimme der Sektion wird. */ body.body .sf-refband .sf-refband-h{ font-weight:600; font-size:clamp(24px,2.9vw,42px); letter-spacing:-0.01em; line-height:1.14; text-wrap:balance; } /* A2 — Leistungsliste vom Fliesstext abheben: kleiner + einen Tick offener -> liest als technische Spec-Liste statt als zweiter Absatz. (Fliesstext bleibt 20px.) */ .sf-case .highlight{ font-size:clamp(14px,1.05vw,15.5px); letter-spacing:0.01em; line-height:1.45; } /* A3 — Echte Tabellenziffern fuer die Beleg-Zahlen (10.000, 1.000+, 2.000+ ...): saubere Ausrichtung + Gewicht ohne Fettung. Ladefrei. */ .sf-case .casetext .paragraph, .sf-case .casetext .sf-lede, .sf-case .highlight{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1; } /* A4 — Umbrueche glaetten (Schusterjungen im schmalen Textfeld). */ .sf-case .casetext .paragraph{ text-wrap:pretty; } /* B1 — Erste Absatz-Zeile als Lede: die fehlende Ebene zwischen Case-Titel (~56px) und Body (20px). Der Content ist bereits so getextet (Satz 1 stand als eigener Block). Farbe wird geerbt (kein Flip noetig) -> auf jedem Panel korrekt. */ .sf-case .casetext .sf-lede{ display:block; font-size:clamp(20px,1.9vw,27px); font-weight:500; line-height:1.3; letter-spacing:-0.01em; margin:0 0 clamp(16px,1.6vw,22px); text-wrap:balance; } /* ============================================================ 100) Mittelebene-Fixe: Leistungen + Ueber-uns (Branch typo-referenzen, 26.08.2026) Behebt die verschwommene Mittelebene in beiden Sektionen — analog zum Referenzen-Refactor. Rein additiv am Dateiende. ============================================================ */ /* Leistungen A1 — Lede aus der Farb-+Gewichts-Kollision mit .sf-lg-md loesen. Live teilen beide #5f6b74 (--sfB-muted) + fw400 -> Lede verschmilzt mit dem Modul-Text. Lede wird dunkler (--sfB-b1) + medium -> eigene Registerstufe. Farbe MUSS ueber den sfpal-Selektor laufen, sonst schlaegt die !important-Palette-Regel (Z.3204/3205) durch. */ .sf-lg-lede{ font-weight:500; } body[class*="sfpal-"] .sf-lg-lede{ color:var(--sfB-b1) !important; } /* Ueber-uns A2 — Voice-Satz (.sf-pos) ueber die Team-Namen heben. War 22.3px/600, praktisch gleich mit .sf-m-name (21.6px/700) -> der Name konkurrierte mit der Leitaussage. Jetzt klar groesser; Gewicht unveraendert. */ body.body .sffunnel .sf-solve .sf-gegen .sf-pos{ font-size:clamp(19px,1.9vw,26px); letter-spacing:-.006em; max-width:32ch; } /* ============================================================ 101) Konsistenz-Cleanup Startseite + ein Kursiv-Akzent (Branch typo-referenzen, 26.08.2026) ============================================================ */ /* Tabellen-/Versalziffern fuer ALLE Belegzahlen der Startseite (Cases haben's schon) -> ein Zahlen-System. Leistungen + Ueber-uns/CTA. */ .sf-lg-lede, .sf-lg-md, body.body .sffunnel .sf-solve, body.body .sffunnel .sf-dark .sf-solve-grid, body.body .sf-midcta{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1; } /* Ueber-uns A3 — Negativ-Tracking der dunklen sf-steps neutralisieren (16px auf Dunkel; kleine Grade wollen kein Minus-Tracking). */ body.body .sffunnel .sf-dark .sf-steps p{ letter-spacing:0; } /* Leistungen A3 — Modul-Titel schaerfen + Titel/Text enger -> jedes Modul liest als eine Einheit (Titel bleibt bei 16.56px). */ .sf-lg-mt{ letter-spacing:-0.01em; margin-bottom:6px; } /* ============================================================ 102) Footer-Feinschliff (Branch typo-referenzen, 26.08.2026) ============================================================ */ /* A1 — Nav-Spalte: einziger Uppercase-Block der Seite OHNE Laufweite (15px/600/ls0) -> wirkte gedraengt. Tracking rein, Gewicht runter, Zeilenabstand luftiger -> naeher am Haus-Label-System. Farbe bleibt. */ .footersection .footernav{ font-size:14px; font-weight:500; letter-spacing:0.08em; margin-bottom:clamp(12px,1.6vh,16px); } /* A2 — Adress-Hierarchie: Anschrift zurueckgenommen (muted, atmet), E-Mail als Ink-Anker + jetzt echter mailto-Link (war nicht klickbar). Adress-Farbe muss die sfpal-Regel (Z.3176) schlagen. */ body[class*="sfpal-"] .footersection .text-block-15-copy{ color:var(--sfB-muted) !important; } .footersection .text-block-15-copy{ display:block; line-height:1.7; } .footersection .sf-footer-mail{ color:var(--sfB-ink); text-decoration:none; border-bottom:1px solid rgba(26,25,22,0.28); padding-bottom:1px; transition:border-color .2s ease; } .footersection .sf-footer-mail:hover{ border-color:var(--sfB-ink); } /* A3 — Tabellen-/Versalziffern fuer PLZ + Jahr (Haus-Regel). */ .footersection .text-block-15-copy, .footersection .sf-footer-bottom .text-block-16{ font-variant-numeric:lining-nums tabular-nums; } /* ============================================================ 103) Opener/Hero — A1-A3 (Branch typo-referenzen, 26.08.2026) ============================================================ */ /* A1 — H1-Cap anheben (war var(--t-xl) -> 72px). Der Hero darf auf breiten Screens dominieren. NUR Desktop (>=761px); die Mobile-H1 (Z.2199, @media max-width:760) bleibt unangetastet. */ @media(min-width:761px){ body.body .sffunnel .sf-hook .sf-h1{ font-size:clamp(40px,5.4vw,90px); } } /* A2 — ausgewogene, ruhige Umbruch-Silhouette der H1 (statt Zufall). */ body.body .sffunnel .sf-hook .sf-h1{ text-wrap:balance; } /* A3 — Lead-Kontrast ueber dem Foto leicht anheben (.75 -> .82). Muss die !important-Regel (Z.2973) matchen. */ body.body.sf-noproblem .sffunnel .sf-hook .sf-hooklead{ color:rgba(236,231,223,.82) !important; } /* ============================================================ 104) Gesamtbild-Mini-Konsolidierung (Branch typo-referenzen) ============================================================ */ /* CTA-Sub war der einzige Nicht-Label-Text mit POSITIVEM Tracking (geerbt, +0.69px). In die Lead-Familie ziehen (leicht negativ, wie Hero-Lead -0.005em) -> Tracking-System lueckenlos. */ .sf-midcta .sf-midcta-sub{ letter-spacing:-0.005em; } /* ============================================================ 105) Destinationen (travelneu) — Logo-Wand unter Text/Leistung 21 Tourismus-Partner, EIN Ton via filter (Originalfarbe egal), hoehen-normiert (Logo-Wall-Standard), 7x3-Raster, full-width unter der zweispaltigen Info-Row. Reveal = letzter sf-cq-Kaskadenschritt. ============================================================ */ .sf-logowall{ margin-top:clamp(44px,6vh,76px); border-top:1px solid rgba(236,231,223,0.20); padding-top:clamp(28px,3.6vh,42px); } .sf-logowall-lbl{ font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase; color:#a29c92;margin:0 0 clamp(24px,3vh,32px);line-height:1; } .sf-logowall-grid{ --logo-base:26px; /* neutrale Basishoehe (--s=1); fix = WYSIWYG mit logo-arrange.html */ display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(30px,3.6vw,48px) clamp(22px,2.6vw,40px); align-items:center;justify-items:center; } .sf-logowall-grid img{ /* optische Einzel-Normierung: Hoehe = Basis * inline --s (1 = neutral). Hoehenbasiert (nicht transform:scale) -> reserviert Platz, keine Ueberlappung. */ height:calc(var(--logo-base) * var(--s,1)); width:auto;max-width:100%;object-fit:contain; /* alle Logos auf EINEN warmen Off-White-Ton (#ece7df-nah), unabh. der Quelle */ filter:brightness(0) invert(1) sepia(.35) saturate(.5) brightness(1.03); opacity:.72;transition:opacity .35s ease; } .sf-logowall-grid img:hover{opacity:1} /* Logo-Wrapper + Hover-Tooltip mit Markenname (viele Logos sind reine Signets) */ .sf-logowall-grid .sf-logo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0} .sf-logowall-grid .sf-logo:hover img{opacity:1} .sf-logowall-grid .sf-logo::after{ content:attr(data-name); position:absolute;bottom:100%;left:50%;transform:translate(-50%,-11px); color:#e8ecf0; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; white-space:nowrap; opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:6; } .sf-logowall-grid .sf-logo:hover::after{opacity:1} @media (hover:none){ .sf-logowall-grid .sf-logo::after{display:none} } @media (max-width:900px){ .sf-logowall-grid{grid-template-columns:repeat(4,1fr);gap:30px 30px} } @media (max-width:520px){ .sf-logowall-grid{grid-template-columns:repeat(3,1fr)} } /* Wand in die zentrierte 1200er-Flucht wie .caseinfocontainer (s. Block 30e) */ @media (min-width:992px){ .sf-case .sf-logowall{max-width:1200px;margin-left:auto;margin-right:auto} } /* Berlinstagram (letzter Case): mehr Luft unter den Logos, damit sich die naechste Flaeche (Leistungen) erst spaeter darueberschiebt. */ .caseinfo.berlinstagram{padding-bottom:120px} /* Palette aktiv (Navy/Hafen etc.): Logo-Ton + Label auf KUEHL angleichen, analog zur Umfaerbung der dunklen Cases (Block 105 warm = nur Default). */ body[class*="sfpal-"] .sf-logowall{border-top-color:rgba(232,236,240,0.18)} body[class*="sfpal-"] .sf-logowall-lbl{color:#a3adb8} body[class*="sfpal-"] .sf-logowall-grid img{ filter:brightness(0) invert(1); /* reines Kaltweiss -> passt zu Text #e8ecf0 */ opacity:.7; } /* Hinweis: "Tourismusprojekte ansehen"-Link bleibt (wie global) ausgeblendet. Zum Reaktivieren nur fuer diesen Case: .caseinfo.travelneu .sf-caselinks{display:flex!important} */ /* Dezenter Textlink unter der linken Beschreibung (travelneu): gleiche Schrift/Groesse/Farbe wie der Absatz, nur hauchduenn unterstrichen (Klickbarkeit bleibt erkennbar, faellt aber kaum auf). */ .caseinfo.travelneu .sf-travel-link, .caseinfo.berlinstagram .sf-travel-link{ display:inline-block;margin-top:clamp(20px,2.6vh,30px); font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:clamp(17px,1.4vw,20px);font-weight:400;line-height:1.62;letter-spacing:0; color:#e7e2da; /* = Absatzfarbe (Default warm) */ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:rgba(231,226,218,.30); /* sehr leise */ opacity:0;transform:translateY(12px); /* Reveal-Startzustand (s. sf-wall-in) */ transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),text-decoration-color .22s ease,color .22s ease,text-underline-offset .22s ease; } /* Hover: Unterstrich wird voll + Text hellt leicht auf + Strich rueckt naeher */ .caseinfo.travelneu .sf-travel-link:hover, .caseinfo.berlinstagram .sf-travel-link:hover{color:#f4efe6;text-decoration-color:#f4efe6;text-underline-offset:2px} /* Palette (Navy/Hafen): kuehl angleichen (= Absatzfarbe #e8ecf0) */ body[class*="sfpal-"] .caseinfo.travelneu .sf-travel-link, body[class*="sfpal-"] .caseinfo.berlinstagram .sf-travel-link{ color:#e8ecf0;text-decoration-color:rgba(232,236,240,.28); } body[class*="sfpal-"] .caseinfo.travelneu .sf-travel-link:hover, body[class*="sfpal-"] .caseinfo.berlinstagram .sf-travel-link:hover{color:#f5f5f5;text-decoration-color:#f5f5f5} /* ============================================================ Reveal fuer Logo-Waende + Textlinks — eigener Trigger beim Einscrollen (JS /*sf-wall-reveal*/ setzt .sf-wall-in). Grund: beide sitzen am Fuss langer Panels; die Panel-Kaskade (sf-cq) ist dort laengst durch, bevor man sie sieht. Logos staffeln als Welle (--li), im Seiten-Rhythmus. ============================================================ */ .sf-logowall-lbl{opacity:0;transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .sf-logowall-grid .sf-logo{opacity:0;transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(140ms + var(--li,0) * 48ms)} .sf-logowall.sf-wall-in .sf-logowall-lbl{opacity:1;transform:none} .sf-logowall.sf-wall-in .sf-logo{opacity:1;transform:none} .caseinfo .sf-travel-link.sf-wall-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .sf-logowall-lbl,.sf-logowall-grid .sf-logo,.caseinfo .sf-travel-link{ opacity:1!important;transform:none!important;transition:none!important} } /* Hero-Wortmarke/Mosaik nicht markierbar (kein versehentliches Text-Selektieren) */ #hero,#hero *{-webkit-user-select:none;-moz-user-select:none;user-select:none} /* ============================================================ PROTOTYP leistungen-refresh: 4 Cluster statt 8 Module, Proof-Zeile, Cluster-Stichworte, Mikro-CTA (Schluss-Peak + Link). ============================================================ */ /* Proof-Strip zwischen Intro-Lede und Modul-Label */ .sf-lg-proof{font-family:inherit;font-weight:600;font-size:clamp(13px,1.05vw,15px);line-height:1.5;letter-spacing:0.01em;color:#3a362f;margin:0 0 24px;font-variant-numeric:tabular-nums;text-wrap:balance} /* Cluster-Stichwortzeile unter dem Nutzen-Satz (die alten Einzelleistungen) */ .sf-lg-keys{list-style:none;padding:0;margin:14px 0 0}.sf-lg-keys li{font-family:inherit;font-weight:500;font-size:15px;line-height:1.75;color:#2a2621;padding-left:20px;position:relative}.sf-lg-keys li::before{content:"—";position:absolute;left:0;color:#b6ae9f;font-weight:400} /* 4er-Cluster-Grid: sauberes 2x2 im Zeilenfluss statt 8er-Spaltenfluss */ @media (min-width:900px){ .sf-lg-grid.sf-lg-grid--cl{grid-template-rows:auto;grid-auto-flow:row;row-gap:0} } /* Mikro-CTA am Blockende: Schluss-Peak (.sf-lg-close) + Sub + Link */ .sf-lg-cta .sf-lg-close{margin-bottom:0} .sf-lg-ctasub{font-family:inherit;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:#4a463f;margin:16px 0 0;max-width:52ch} .sf-lg-ctalink{display:inline-block;margin-top:22px;font-family:inherit;font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:#191919;text-decoration:none;border-bottom:1px solid rgba(25,25,25,.42);padding-bottom:3px;transition:border-color .2s ease,color .2s ease} .sf-lg-ctalink:hover{border-color:#191919;color:#000} /* ============================================================ Leistungen-Feinschliff (Design-Review · Kontext-Kohaerenz): Hairline-Familie an Cases/About angleichen, klare 3-Stufen-Skala, Keys als kompakte Tag-Ebene, Eyebrow enger, Spaltenmass = Haus-Wert. ============================================================ */ /* P1 — Hairline + Padding in die "Listenblock"-Familie (.highlightgridblock/.liste li: .16 + padding-top:18) */ .sf-lg-mod{border-top-color:rgba(25,25,25,0.16);padding:18px 0 20px} /* P5 — Spaltenabstand = About-.liste (ein Spaltenmass ueber beide 2-Spalter) */ .sf-lg-grid{column-gap:clamp(30px,3.6vw,60px)} /* P4 — Eyebrow "WAS WIR UEBERNEHMEN" enger ans Grid binden */ .sf-lg-label{margin-bottom:18px} /* P3 — Modultitel einen Tick ueber den Nutzensatz (Groesse + Gewicht tragen die Titelzeile) */ .sf-lg-mt{font-size:clamp(16px,1.3vw,18px)} /* P2 — Keys als tertiaere Tag-Ebene: kleiner + Rhythmus an den Modultext (1.5) */ .sf-lg-keys{margin-top:12px} .sf-lg-keys li{font-size:14px;line-height:1.55;padding-left:18px} /* ============================================================ SPRACHHINWEIS statt Auto-Redirect · SEO-Fix ------------------------------------------------------------ Vorher leitete eine JS-Sprachweiche jeden Besucher ohne deutsche Browsersprache von "/" nach "/en/" um. Googlebot rendert immer mit en-US -> Google sah unter superfeed.social die englische Seite und zeigte in den deutschen SERPs den englischen Titel/Snippet. Jetzt: kein Redirect, sondern ein dezenter Hinweis unten rechts, der nur erscheint, wenn die Browsersprache nicht zur Seitensprache passt. Wegklicken oder Sprachwahl merkt sich die Seite (localStorage sf-lang). z-index bewusst unter Mobile-Menue (55) und Topbar (60). ============================================================ */ .sf-langhint{ position:fixed;z-index:45; right:clamp(14px,2vw,26px);bottom:clamp(14px,2vh,26px); display:flex;align-items:center;gap:14px; max-width:min(430px,calc(100vw - 28px)); padding:12px 12px 12px 18px; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-weight:400;font-size:14px;line-height:1.35;letter-spacing:0; color:#1a1916; background:rgba(242,241,237,.97); -webkit-backdrop-filter:saturate(1.15) blur(8px);backdrop-filter:saturate(1.15) blur(8px); border:1px solid rgba(25,25,25,.16);border-radius:2px; box-shadow:0 8px 28px -10px rgba(20,18,16,.28); opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .45s ease,transform .45s cubic-bezier(.2,.72,.28,1); } .sf-langhint.is-on{opacity:1;transform:none;pointer-events:auto} .sf-langhint-t{flex:1 1 auto;text-wrap:pretty} .sf-langhint-a{ flex:0 0 auto;white-space:nowrap; font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:#1a1916;text-decoration:none; border-bottom:1px solid rgba(25,25,25,.42);padding-bottom:3px; transition:border-color .2s ease,color .2s ease; } .sf-langhint-a:hover{border-color:#1a1916;color:#000} /* Schliessen: 44x44 Tippflaeche (Apple-Richtwert). Das Zeichen bleibt klein — nur der Kasten waechst; die negativen Margins halten die Pille flach. */ .sf-langhint-x{ flex:0 0 auto;appearance:none;-webkit-appearance:none; background:none;border:0;cursor:pointer;padding:0; width:44px;height:44px;margin:-10px -8px -10px 2px; display:flex;align-items:center;justify-content:center; font:400 22px/1 Archivo,"Helvetica Neue",Arial,sans-serif;color:#8a857c; border-radius:2px; transition:color .2s ease,background-color .2s ease; } .sf-langhint-x span{display:block;margin-top:-2px} .sf-langhint-x:hover{color:#1a1916;background:rgba(25,25,25,.06)} .sf-langhint-x:focus-visible{outline:2px solid #1a1916;outline-offset:-2px} @media (max-width:600px){ .sf-langhint{left:12px;right:12px;bottom:12px;max-width:none;gap:12px;padding:11px 8px 11px 14px;font-size:13px} .sf-langhint-a{font-size:11px;letter-spacing:.12em} /* Tippflaeche bleibt 44x44, auf Touch etwas mehr Luft zum Link */ .sf-langhint-x{margin:-11px -6px -11px 4px} }