/* ========================================================================== * assets/provider-flaechen.css * -------------------------------------------------------------------------- * Die Anbieter-Microsite lief auf einer eigenen Grau-Weiß-Palette, während * der Rest der Seite Creme ist. Nachgezählt in app.css: * * bikes (Erbt Seitenfläche, creme) * spotlight linear-gradient(… → #ffffff) * featured-story #0b1220 → #14181d (dunkel, gewollt) * highlights #14181d (dunkel, gewollt) * areas #fff * gallery-section #fff * news #fff * info #fafaf9 * contact #fff * * Fünf von elf Abschnitten sind reinweiß, einer fast. Beim Scrollen wechselt * die Seite deshalb ständig zwischen Creme und Weiß — genau die "weißen * Bereiche". * * Diese Datei zieht die hellen Abschnitte auf das Cremepaar der Marke: * --bk-mist #F2F1DE als Grundfläche, --bk-paper #F8FAE5 als abgesetzte * Fläche. Die beiden dunklen Abschnitte bleiben dunkel — der Wechsel * hell/dunkel ist Rhythmus, der Wechsel creme/weiß war ein Versehen. * * Wird NACH app.css und provider-microsite.css geladen. * ========================================================================== */ /* ── Grundfläche der Microsite ────────────────────────────────────────── */ body.is-provider-microsite, body.is-provider-page { background: #F2F1DE; } /* ── Helle Abschnitte: Creme statt Weiß ───────────────────────────────── */ body.is-provider-microsite .provider-site-areas, body.is-provider-microsite .provider-site-gallery-section, body.is-provider-microsite .provider-site-news { background: #F2F1DE; } /* Abwechselnd eine Stufe heller, damit die Abschnitte auseinanderfallen, ohne dass Weiß ins Spiel kommt. */ body.is-provider-microsite .provider-site-info, body.is-provider-microsite .provider-site-bikes { background: #F8FAE5; } body.is-provider-microsite .provider-site-spotlight { background: linear-gradient(180deg, #F2F1DE 0%, #F8FAE5 100%); } /* Die dunklen Abschnitte bleiben, wie sie sind — nur die Kante dazwischen sauber setzen, damit kein Streifen der alten Fläche durchscheint. */ body.is-provider-microsite .provider-site-highlights, body.is-provider-microsite .provider-site-featured-story { border-top: 0; border-bottom: 0; } /* ── Karten: sichtbarer Rand statt Schattenandeutung ────────────────────── Gemessen im Bestand: Kartenfläche und Seitenfläche lagen bei Kontrast 1,003 : 1 — also identisch. Rahmen mit dem --bk-line-Wert (14 %) statt der bisherigen 6 %. */ body.is-provider-microsite .provider-site-spotlight__card, body.is-provider-microsite .provider-site-contact__cards > *, body.is-provider-microsite .provider-site-info__card, body.is-provider-microsite .ms-card, body.is-provider-page .market-card, body.is-provider-page .mp-card { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .14); border-radius: 20px; box-shadow: none; } body.is-provider-microsite .provider-site-spotlight__card:hover, body.is-provider-page .market-card:hover, body.is-provider-page .mp-card:hover { border-color: rgba(4, 12, 33, .30); transform: translateY(-2px); transition: border-color .18s ease, transform .18s ease; } /* Produktfotos sind fast immer weiß freigestellt. Ohne Einfassung steht dieser weiße Block als Loch in der cremefarbenen Karte. */ body.is-provider-microsite .provider-site-spotlight__card img, body.is-provider-page .market-card img, body.is-provider-page .mp-card img { border-radius: 14px; background: #FFFDF2; } /* ── Auf dunklem Grund bleiben Karten dunkel ──────────────────────────── */ body.is-provider-microsite .provider-site-highlights .ms-card, body.is-provider-microsite .provider-site-featured-story .ms-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } /* ========================================================================== * Nachtrag: die restlichen weißen Karten * -------------------------------------------------------------------------- * Die Abschnittsflächen allein reichten nicht — in app.css hängen mehrere * Kartenklassen auf einer gemeinsamen Regel (Zeile 4181 ff.): * * .provider-site-focus-card, .provider-site-service-group, * .provider-site-highlight-card, .provider-site-news-card, * .provider-site-panel, .provider-site-contact-card * { background:#FFFDF2; box-shadow:0 12px 30px rgba(15,23,42,0.05); } * * Dazu kommen Bewertungskarten und das Anfrageformular aus eigenen Regeln. * Alle zusammen auf Papierton, sichtbarer Rand statt Schlagschatten. * ========================================================================== */ body.is-provider-microsite .provider-site-focus-card, body.is-provider-microsite .provider-site-service-group, body.is-provider-microsite .provider-site-highlight-card, body.is-provider-microsite .provider-site-news-card, body.is-provider-microsite .provider-site-panel, body.is-provider-microsite .provider-site-contact-card, body.is-provider-microsite .provider-site-offer-card, body.is-provider-microsite .provider-site-auth-card, body.is-provider-microsite .provider-review-card, body.is-provider-microsite .provider-review-form, body.is-provider-microsite .provider-reviews__formcard { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .14); /* Radius mitgeben: ohne ihn erbt eine Karte die eckige Voreinstellung, sobald wir den border setzen — genau das hat aus runden Karten Kästen gemacht. */ border-radius: 22px; /* Schlagschatten raus: auf Creme wirkt er als grauer Rand, nicht als Höhe — der sichtbare Rahmen macht die Kante ohnehin schon. */ box-shadow: none; } /* Karten auf dunklem Grund bleiben dunkel — sonst blitzt Creme im Featured-Story-Block. */ body.is-provider-microsite .provider-site-highlights .provider-site-highlight-card, body.is-provider-microsite .provider-site-highlights .provider-site-fact, body.is-provider-microsite .provider-site-featured-story .provider-site-fact, body.is-provider-microsite .provider-site-featured-story .provider-site-panel { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } /* Eingabefelder im Anfrageformular: eine Stufe heller als die Karte, damit man sie als beschreibbar erkennt — aber nicht weiß. */ body.is-provider-microsite .provider-site-contact__formwrap input, body.is-provider-microsite .provider-site-contact__formwrap textarea, body.is-provider-microsite .provider-review-form input, body.is-provider-microsite .provider-review-form textarea { background: #FDFDF2; border: 1px solid rgba(4, 12, 33, .16); } /* Helle Knöpfe auf Creme statt Weiß. */ body.is-provider-microsite .provider-site-area-tab { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .18); border-radius: 999px; } body.is-provider-microsite .provider-site-area-tab.is-active { background: #040C21; border-color: #040C21; color: #F8FAE5; } /* ========================================================================== * Nachtrag 2: drei Kästen mit eigenen Regeln * -------------------------------------------------------------------------- * Die letzten weißen Flächen hingen nicht an den Kartenklassen, sondern an * drei einzelnen Regeln in app.css: * * 5931 .provider-site-area-panel__empty linear-gradient(#fff → #F8FAE5) * 7898 .provider-reviews__formcard #fff * 7943 .provider-review-empty #f7f8fb (bläulich) * * Das sind der "Weitere Details"-Kasten, die Karte "Deine Bewertung" und * der Hinweiskasten darin. Alle drei auf Creme, Radien bleiben wie sie sind. * ========================================================================== */ body.is-provider-microsite .provider-site-area-panel__empty { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .14); box-shadow: none; } body.is-provider-microsite .provider-reviews__formcard { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .14); box-shadow: none; } /* Der gestrichelte Hinweiskasten bleibt gestrichelt — er soll sich vom Rest absetzen, nur eben in Creme statt in Blaugrau. */ body.is-provider-microsite .provider-review-empty { background: #F2F1DE; border: 1px dashed rgba(4, 12, 33, .20); color: #5E5F61; } /* ========================================================================== * Nachtrag 3: vollständiger Durchgang * -------------------------------------------------------------------------- * Die ersten beiden Runden haben nach "background:#FFFDF2" gesucht, wo in * derselben Zeile auch "provider-site" stand. Das hat alles verfehlt, wo der * Selektor eine Zeile darüber steht — also fast alles. Diesmal Zeile für * Zeile über app.css und jede weiße Deklaration ihrem Selektor zugeordnet: * * 2024 .provider-sidebar__card 4383 .provider-site-news * 2093 .provider-topbar 4444 .provider-site-contact * 3186 .provider-ms-nav 6021 .provider-services-tab * 3255 .provider-ms-mobilebar 7690 .provider-basic__hubcard:hover * 4034 .provider-site-scroll__dot 7692 .provider-site-discover * 4056 .provider-site-nav-wrap 7694 .provider-site-hub-card * 4172 .provider-site-areas * 4188 .provider-site-contact-card * 4347 .provider-site-gallery-section * * Die Navigationsleiste (4056) ist die, die im Screenshot als weißer Streifen * zwischen Hero und Inhalt steht. * ========================================================================== */ /* Sticky-Navigation unter dem Hero */ body.is-provider-microsite .provider-site-nav-wrap, body.is-provider-microsite .provider-ms-nav, body.is-provider-microsite .provider-ms-mobilebar, body.is-provider-microsite .provider-topbar { background: rgba(242, 241, 222, .96); border-top-color: rgba(4, 12, 33, .06); border-bottom-color: rgba(4, 12, 33, .12); /* Schatten raus — auf Creme wird daraus ein grauer Schleier. */ box-shadow: none; } /* Weitere Abschnittsflächen, die in Runde 1 durchgerutscht sind */ body.is-provider-microsite .provider-site-discover { background: #F2F1DE; } /* Restliche Karten */ body.is-provider-microsite .provider-site-hub-card, body.is-provider-microsite .provider-sidebar__card, body.is-provider-microsite .provider-basic__hubcard { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .14); border-radius: 20px; box-shadow: none; } body.is-provider-microsite .provider-basic__hubcard:hover, body.is-provider-microsite .provider-site-hub-card:hover { background: #FDFDF2; border-color: rgba(4, 12, 33, .30); } /* Reiter und Punkte */ body.is-provider-microsite .provider-services-tab { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .16); } body.is-provider-microsite .provider-services-tab.is-active { background: #040C21; border-color: #040C21; color: #F8FAE5; } body.is-provider-microsite .provider-site-scroll__dot { background: rgba(4, 12, 33, .22); } body.is-provider-microsite .provider-site-scroll__dot.is-active { background: #040C21; } /* ── Letzte fünf aus der Gegenprobe ─────────────────────────────────────── Nach dem Nachtrag oben nochmal jede weiße Deklaration gegen die bereits abgedeckten Klassen geprüft. Diese fünf standen noch offen: 5463 .provider-site-news-card--offer …__kind 5554 .provider-site-contact-flash 6541 .provider-picker__selected 6575 .provider-picker__item 7877 .provider-reviews__score .contact-flash.is-error bleibt bewusst rötlich — das ist ein Fehlerhinweis, kein Flächenelement. */ body.is-provider-microsite .provider-site-news-card--offer .provider-site-news-card__kind, body.is-provider-microsite .provider-picker__selected, body.is-provider-microsite .provider-picker__item, body.is-provider-microsite .provider-reviews__score { background: #F8FAE5; border-color: rgba(4, 12, 33, .14); } body.is-provider-microsite .provider-site-contact-flash { background: #F8FAE5; border: 1px solid rgba(15, 110, 86, .28); color: #15503E; } body.is-provider-microsite .provider-site-contact-flash.is-error { background: #F8FAE5; border-color: rgba(163, 45, 45, .28); color: #8A2727; } /* ========================================================================== * Rhythmus: dunkle Abschnitte verteilen * -------------------------------------------------------------------------- * Bisherige Folge (aus dem Markup gezählt): * * 1-3 bikes · 4 spotlight · 5 featured-story ■ · 6 highlights ■ · * 7 areas · 8 gallery · 9 news · 10 info · 11 contact * * Die beiden dunklen Blöcke liegen direkt nebeneinander, danach kommen fünf * helle am Stück. Das liest sich als ein dunkler Klotz in der Mitte und * danach als Flaute — genau das "stumpf". * * Neue Verteilung: dunkel bei 5/6 (bleibt), 8 (Galerie) und 11 (Kontakt). * Damit sitzt je ein dunkler Block bei etwa einem Drittel, zwei Dritteln und * am Ende. Die Galerie profitiert doppelt, weil Fotos auf Dunkel besser * stehen; der Kontakt ist der Abschluss und darf als Handlungsaufforderung * herausstechen. * * Ink #14181D wie in featured-story/highlights, damit kein dritter Dunkelton * dazukommt. * ========================================================================== */ /* Galerie wieder hell: Der Abschnitt ist nur eine schmale Kopfzeile, unter der die Fotos randlos über die volle Breite laufen. Auf Ink wirkte das wie ein dunkler Balken über einem Bild statt wie ein Bildbereich — der dunkle Block hat da nichts gebracht. Dunkel bleibt: featured-story, highlights und der Kontaktabschluss. */ body.is-provider-microsite .provider-site-contact { background: #14181D; color: #F8FAE5; } /* Überschriften und Fließtext umkehren */ /* Karten im Kontaktblock: Glas statt Creme, sonst blitzt es hell auf. */ body.is-provider-microsite .provider-site-contact .provider-site-contact-card, body.is-provider-microsite .provider-site-contact .provider-site-contact__cards > *, body.is-provider-microsite .provider-site-contact .provider-site-contact__formwrap { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #F8FAE5; box-shadow: none; } body.is-provider-microsite .provider-site-contact .provider-site-contact-card__label { color: rgba(236, 238, 242, .60); } body.is-provider-microsite .provider-site-contact .provider-site-contact-card__value { color: #FFFFFF; } /* Formularfelder: dunkel, aber deutlich als Eingabe erkennbar. */ body.is-provider-microsite .provider-site-contact input, body.is-provider-microsite .provider-site-contact textarea { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #F8FAE5; } body.is-provider-microsite .provider-site-contact input::placeholder, body.is-provider-microsite .provider-site-contact textarea::placeholder { color: rgba(236, 238, 242, .42); } body.is-provider-microsite .provider-site-contact input:focus, body.is-provider-microsite .provider-site-contact textarea:focus { outline: none; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .10); } body.is-provider-microsite .provider-site-contact label, body.is-provider-microsite .provider-site-contact label > span { color: rgba(236, 238, 242, .82); } /* Der Absende-Knopf muss auf Dunkel invertieren, sonst verschwindet er. */ body.is-provider-microsite .provider-site-contact .btn-primary, body.is-provider-microsite .provider-site-contact button[type="submit"] { background: #F6F1DF; border-color: #F6F1DF; color: #040C21; } body.is-provider-microsite .provider-site-contact .btn:not(.btn-primary) { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #F8FAE5; } /* Weiche Kante zwischen hell und dunkel: ohne sie stößt Creme hart auf Ink und die Naht wirkt wie ein Fehler. */ /* ========================================================================== * Korrektur: Anfrageformular im dunklen Kontaktblock * -------------------------------------------------------------------------- * Die Karte heisst nicht .provider-site-contact__formwrap (das ist nur der * aeussere Rahmen ohne Flaeche), sondern: * *
*
← die Karte * * .provider-site-panel stand weiter oben in der Kartenliste auf Creme. Im * dunklen Kontaktblock traf also Creme-Flaeche auf helle Schrift — das * Formular war unlesbar. Alles, was im Kontaktblock liegt, wird deshalb * hier gemeinsam invertiert. * * Hoehere Spezifitaet als die Kartenliste (drei Klassen statt zwei), damit * die Reihenfolge im Stylesheet keine Rolle mehr spielt. * ========================================================================== */ body.is-provider-microsite .provider-site-contact .provider-site-panel, body.is-provider-microsite .provider-site-contact .provider-site-contact-form, body.is-provider-microsite .provider-site-contact .provider-site-auth-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; } /* Sämtliche Schrift im Kontaktblock hell — Überschriften, Labels, Hinweise. */ body.is-provider-microsite .provider-site-contact h3, body.is-provider-microsite .provider-site-contact p, body.is-provider-microsite .provider-site-contact .small, body.is-provider-microsite .provider-site-contact strong { color: #F8FAE5; } body.is-provider-microsite .provider-site-contact .provider-site-panel h3 { color: #FFFFFF; } /* Die vier Knöpfe unter den Kontaktkarten waren dunkel auf dunkel. */ body.is-provider-microsite .provider-site-contact__buttons .btn { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24); color: #F8FAE5; } body.is-provider-microsite .provider-site-contact__buttons .btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .40); } /* "Jetzt buchen" bleibt der hervorgehobene Knopf. */ body.is-provider-microsite .provider-site-contact__buttons .btn-primary, body.is-provider-microsite .provider-site-contact__buttons .btn--dark { background: #F6F1DF; border-color: #F6F1DF; color: #040C21; } /* ── Heller Block darüber: Kontrast war zu flach ────────────────────────── "0 ANGEBOTE" und der Hinweiskasten lagen fast auf Seitenfarbe. Eine Stufe absetzen, damit sie als eigene Elemente lesbar sind. */ body.is-provider-microsite .provider-site-area-panel__count { background: #E9E8D2; border: 1px solid rgba(4, 12, 33, .12); color: #040C21; } /* Galerie hell: Überschrift und Text zurück auf Ink. */ body.is-provider-microsite .provider-site-gallery-section .provider-site-section-title { color: #040C21; } body.is-provider-microsite .provider-site-gallery-section .provider-site-section-copy, body.is-provider-microsite .provider-site-gallery-section .provider-site-kicker { color: #5E5F61; } body.is-provider-microsite .provider-site-gallery-section .btn { background: #F8FAE5; border: 1px solid rgba(4, 12, 33, .18); color: #040C21 !important; } /* ========================================================================== * Schriftfarben im dunklen Kontaktblock durchsetzen * -------------------------------------------------------------------------- * Gemessen an den Knöpfen im Screenshot: * "Anrufen" Fläche rgb(39,42,47) ✓ Schrift #14181D ✗ * "Jetzt buchen" Fläche #F8FAE5 ✓ Schrift #FFFFFF ✗ * * Fläche kam an, Schrift nicht — aus demselben Regelblock. Das geht nur, * wenn eine Regel mit !important gewinnt. provider-microsite.css arbeitet * an 165 Stellen damit. Gegen !important hilft keine Spezifität, also hier * dieselbe Münze. Bewusst nur für color, nicht für Flächen. * ========================================================================== */ body.is-provider-microsite .provider-site-contact, body.is-provider-microsite .provider-site-contact h2, body.is-provider-microsite .provider-site-contact h3, body.is-provider-microsite .provider-site-contact p, body.is-provider-microsite .provider-site-contact label, body.is-provider-microsite .provider-site-contact label > span, body.is-provider-microsite .provider-site-contact .small, body.is-provider-microsite .provider-site-contact strong, body.is-provider-microsite .provider-site-contact .provider-site-section-copy, body.is-provider-microsite .provider-site-contact .provider-site-kicker { color: #F8FAE5 !important; } body.is-provider-microsite .provider-site-contact .provider-site-section-title, body.is-provider-microsite .provider-site-contact .provider-site-panel h3, body.is-provider-microsite .provider-site-contact .provider-site-contact-card__value { color: #FFFFFF !important; } body.is-provider-microsite .provider-site-contact .provider-site-kicker, body.is-provider-microsite .provider-site-contact .provider-site-contact-card__label { color: rgba(236, 238, 242, .62) !important; } /* Knöpfe: heller Text auf Glas, dunkler Text auf Cream. */ body.is-provider-microsite .provider-site-contact .btn, body.is-provider-microsite .provider-site-contact__buttons .btn { color: #F8FAE5 !important; } body.is-provider-microsite .provider-site-contact .btn-primary, body.is-provider-microsite .provider-site-contact__buttons .btn-primary, body.is-provider-microsite .provider-site-contact button[type="submit"] { color: #040C21 !important; } body.is-provider-microsite .provider-site-contact input, body.is-provider-microsite .provider-site-contact textarea { color: #F8FAE5 !important; }