/* ═══════════════════════════════════════════════════════════════════════ Yui's Spidernet — Markenschicht ═══════════════════════════════════════════════════════════════════════ Diese Datei liegt auf JEDER Seite als letzte Stilquelle. Sie aendert nichts am Aufbau und nichts an der Technik - nur, wie die Seite aussieht: Farben, Schrift, Kanten. Warum eine eigene Datei statt Aenderungen in den Seiten: die Seiten sind gross und jede hat ihre eigene Geschichte. Hier steht das Aussehen an einer Stelle. Wer die Marke je wieder aendert, fasst nur diese Datei an. Grundlage ist das Paket "Yui's Spidernet Theme": Fassung "Nacht" - der Grund ist schwarz, nicht weiss. Rot #FF3B24 Signal - Knoepfe, Preise, Links Rot hell #FF6A55 beim Ueberfahren, roter Text auf Dunkel Schwarz #14110F Grund der Seite Flaeche #1D1917 Karten, Blasen, Panels Weiss #F7F4F0 Schrift Text #C9C2BA Fliesstext Linie #332E2A Trennlinien / #4A423C Rahmen auf Flaechen Schrift Barlow Condensed (Ueberschriften, GROSS) + Barlow (Text) Eine Regel aus der Vorlage, die leicht uebersehen wird: auf rotem Grund steht DUNKLER Text (#14110F), nicht weisser. Weiss auf diesem Rot hat nur 3,25:1 und faellt damit durch. Dunkel hat 5,33:1. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── Rundungen ────────────────────────────────────────────────── Fuenf Werte, sonst nichts. Soll die Seite runder oder kantiger werden, aendert man HIER und nirgends sonst. Kein Radius steht ausserhalb dieser fuenf. */ --r-sm:10px; /* Chips, Etiketten, kleine Schalter */ --r-md:18px; /* Eingabefelder */ --r-lg:28px; /* Karten, Panels, Sprechblasen */ --r-xl:36px; /* Hero und grosse Bloecke */ --r-pill:999px; /* Knoepfe, Marken, alles Runde */ --yui-red:#FF3B24; --yui-red-deep:#FF6A55; --yui-red-bright:#FF6A55; --yui-black:#14110F; --yui-black-2:#1D1917; --yui-line-dark:#332E2A; --yui-white:#F7F4F0; --yui-paper:#1D1917; /* Zwei Grautoene statt einem. #8C857E kommt aus dem Paket und liegt auf der Flaeche #1D1917 bei 4,70:1 - knapp ueber der Grenze, aber eben nur knapp. Schrift nimmt deshalb --yui-grey-text mit 6,56:1. */ --yui-grey:#8C857E; /* nur Deko: Linien, Netzfaden, Fuellflaechen */ --yui-grey-text:#A69E96; /* jede Schrift, Kontrast 6,56 auf der Flaeche */ --yui-ink-2:#C9C2BA; /* Fliesstext, 9,8 auf der Flaeche */ --yui-line:#332E2A; --yui-line-strong:#4A423C; /* Rahmen auf Flaechen, Felder, Chips */ /* Faellt die Webschrift aus, springt "Arial Narrow" ein - schmal genug, dass das Blatt seine Form behaelt. Erst danach die Systemschrift. */ --yui-head:"Barlow Condensed","Arial Narrow","Helvetica Neue",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* Fliesstext ist Archivo. Barlow steht weiter als Rueckfall in der Kette, damit nichts springt, falls Archivo nicht laedt. Noto Sans Thai faengt Thai ab - Archivo hat keine thailaendischen Zeichen. */ --yui-body:"Archivo","Noto Sans Thai","Barlow",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* ── Die Namen, mit denen die Seiten schon rechnen ────────────────── So faerbt sich fast alles von selbst um, ohne dass eine einzige Regel in den Seiten angefasst werden muss. */ --ink:#F7F4F0; /* Schrift ist jetzt hell */ --paper:#14110F; /* Grund ist jetzt schwarz */ --paper-dim:#1D1917; /* leicht abgesetzte Flaeche */ --stone:#C9C2BA; /* Kontrast 9,8 auf der Flaeche */ --stone-light:#A69E96; /* Kontrast 6,56 */ --coral:#FF3B24; /* der eine Akzent ist Rot */ --coral-dim:#FF6A55; --hairline:#332E2A; /* "--surface-2" benutzt der Chat fuer abgesetzte Kaesten. Ein eigener Name fuer "--white" stand hier auch schon - er ist wieder raus: eine Farbe namens Weiss, die Schwarz ist, faellt spaeter jemandem auf die Fuesse. Die Kasse hat dafuer jetzt --ground / --surface / --text. */ --surface-2:#221E1B; --font-display:var(--yui-head); --font-body:var(--yui-body); /* Der Roller-Bereich auf der Startseite */ --sr-black:#14110F; --sr-carbon:#1D1917; --sr-steel:#221E1B; --sr-line:rgba(247,244,240,0.85); --sr-line-soft:rgba(247,244,240,0.16); --sr-white:#F7F4F0; --sr-mute:#C9C2BA; --sr-dim:#A69E96; --sr-good:#4ADE80; /* Gruen, das auf Schwarz traegt */ --sr-warn:#F0B429; /* Gelb, das auf Schwarz traegt */ /* Die beiden alten Namen zeigen jetzt auf die neuen Werte - so wirkt die Umstellung auch dort, wo eine Seite noch var(--radius) benutzt. */ --radius:var(--r-lg); --radius-pill:var(--r-pill); /* Sagt dem Browser: diese Seite ist dunkel. Er zeichnet daraufhin Kalendersymbol, Bildlaufleisten, Auswahllisten und die Farbe ausgefuellter Felder von selbst passend. Ohne das muesste jedes dieser Teile per Hand umgedreht werden - und genau das ging beim Kalendersymbol daneben: im Dunkelmodus ist es schon hell, invert() hat es wieder dunkel gemacht. */ color-scheme:dark; } /* ── Schrift ────────────────────────────────────────────────────────── Groessen bleiben, wie sie sind - nur die Schriftart wechselt. Barlow laeuft etwas schmaler als die Systemschrift, dadurch passt in jede Zeile eher mehr als weniger. */ body,input,textarea,select,button{font-family:var(--yui-body);} h1,h2,h3,h4, .h1,.h2,.h3, .guide-cat-title,.bm-brand-name,.bm-name,.card__title, .title,.sg-title,.rev-title,.section-label,.hero h1{ font-family:var(--yui-head); font-weight:700; text-transform:uppercase; letter-spacing:0.01em; line-height:1.02; } /* Kleine Beschriftungen in Grossbuchstaben - das Muster des Pakets. */ .kicker,.sr-eyebrow,.filter-btn,.bm-chip,.drawer-chip,.qr-btn, .top-tab,.tag,.bm-cc,.bm-brand-count,.rs-label,.lbl,.summary-chip .lbl, .pv-sec,.sb-line2,.sb-line1,.foot-brand-text span:first-child, footer .cols h4,.impressum h4{ font-family:var(--yui-head); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; } /* ── Runde Ecken ────────────────────────────────────────────────────── Vorher stand hier eine Liste, die alles auf 0 gezwungen hat. Die ist raus - sie haette jede Regel hier unten wieder ueberstimmt. Jetzt bekommt jede Rolle ihren Wert: Knoepfe und alles Kleine, Runde -> --r-pill Eingabefelder -> --r-md Karten und Panels -> --r-lg Hero und grosse Bloecke -> --r-xl Die Kopfzeile bleibt bewusst eckig: sie sitzt buendig oben, und eine Rundung dort schlaegt gegen das dunkle Band darunter eine sichtbare Naht. */ /* Knoepfe, Etiketten, Marken, alles Runde */ button, .cta-btn,.wa-btn,.sb-cta,.btn,.bm-btn,.bm-soon-btn,.save-btn,.bullet-add-btn, .upload-btn,.footer-btn,.footer-btn-login,.footer-btn-become,.filter-btn, .top-tab,.qr-btn,.bm-chip,.drawer-chip,.chip,.cancel-btn,.cancel-link, .notify-banner-enable,.notify-banner-dismiss,.sub-alert-btn,.help-send-btn, .bm-sheet-x,.bm-cc,.bm-brand-count,.bm-badge,.bm-avail, .summary-chip,.sg-check,.loc-btn,.tag,.promo-chip,.promo-chip-remove, .promo-copy-btn,.promo-paid-btn,.clear-date-btn,.refresh-btn,.reset-toggle, .wa-glyph,.wa-arrow,.cal-day,.lang-pick,.lang-select-wrap, .install-btn,.notify-btn,.head-avatar,.bot-avatar,.brand-logo, .maps-check,.fj-icon,.pay-filter,.events-count,.bm-bar,.bm-bar-thumb, .item-out-badge,.status-badge,.req-status, #chatSend,#promoApplyBtn,#helpFab,#waHelpFab,#tillLink,#logoutBtn{ border-radius:var(--r-pill) !important; } /* Eingabefelder. Bewusst NICHT als Pille: ein mehrzeiliges Textfeld als Pille liest sich nicht mehr als Eingabe. */ input,select,textarea, .search-row,.date-filter-field,#promoInput{ border-radius:var(--r-md) !important; } /* Die Chat-Eingabe ist der eine Fall, wo die Pille richtig ist - sie steht allein in ihrer Leiste und ist eine Zeile hoch. */ #chatInput{ border-radius:var(--r-pill) !important; } /* Karten und Panels */ .card,.profile-card,.add-item-card,.bm-card,.bm-sheet,.sheet-card, .revenue-panel,.revenue-stat,.setup-gate,.notify-banner,.sub-alert, .prov-sheet,.prov-row,.pv-row,.help-modal,.help-card,.install-sheet, .bm-soon-panel,.bs-light,.bs-row,.login-card,.reset-box,.drawer-account, .cat-filter-bar,.suggestion,.wa-cta,.map-cta,.bike-cta,.cal-cta, #setupGate,#subCard{ border-radius:var(--r-lg) !important; } /* Bilder in Karten schneiden sonst ueber die runde Kante hinaus. */ .bm-card,.card,.suggestion,.img-preview,.photo-slot,.bm-photo, .bm-sheet-photo,.map-cta-img,.suggestion-img{ overflow:hidden; } /* Nur die Bildkaesten, die FREI stehen, bekommen einen eigenen Radius. Ein Foto, das oben buendig in einer Karte sitzt, bekommt keinen: die Karte schneidet es ohnehin, und zwei Rundungen uebereinander sehen wie ein Fehler aus - man sieht die Ecke doppelt. */ .img-preview,.photo-slot{ border-radius:var(--r-lg) !important; } .bm-photo,.bm-sheet-photo,.map-cta-img,.suggestion-img{ border-radius:0 !important; } /* Sprechblasen: rund, aber die Ecke zum Absender bleibt spitz - sonst sieht man nicht mehr, wer spricht. */ .ai-msg,.bubble{ border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 6px !important; } .ai-msg.user{ border-radius:var(--r-lg) var(--r-lg) 6px var(--r-lg) !important; } /* Die schwebende Knopfleiste unten und der Griff am Rand */ .chat-fab,.filter-jump-fab{ border-radius:var(--r-pill) !important; } /* Der Griff klebt am rechten Rand und ist kein Knopf im Fluss der Seite - rund sieht er dort aus wie etwas, das abgefallen ist. Bleibt eckig. */ .drawer-tab{ border-radius:0 !important; } .chat-fab img,.filter-jump-fab img{ border-radius:var(--r-pill) !important; } /* Kopfzeile bleibt eckig - siehe oben. */ header,body > header,#chatWrap > header{ border-radius:0 !important; } /* ── Schienen bleiben eckig ─────────────────────────────────────────── Alles, worin seitlich gescrollt wird, darf KEINEN grossen Radius bekommen. overflow:auto schneidet an der Kante ab: aus einer runden Schiene wird eine Linse, und die Karten darin verlieren links und rechts ihre Ecken. ".bm-rail" stand faelschlich in der Knopf-Liste - auf dem Handy fehlte dadurch das erste Zeichen von "330 CC" und der halbe Hinweis "Available now". Gefunden von Lukas auf dem iPhone. Der duenne Balken darunter (.bm-bar) ist dagegen wirklich eine Pille und bleibt rund. */ .bm-rail,.rail-wrap,.guide-cat-body,.events-rail,.bm-gal-track, .cat-filter-bar,.top-tabs,.filters-scroll{ border-radius:0 !important; } /* ── Rahmen ─────────────────────────────────────────────────────────── 2px statt Haarlinie: das ist der Griff, an dem das ganze Blatt haengt. Auf dem schwarzen Grund ist der Rahmen jetzt die helle Linie #332E2A - ein schwarzer Rahmen auf schwarzem Grund waere schlicht nicht da. */ .bm-card,.card,.profile-card,.add-item-card,.place-card, .bubble,.ai-msg.bot,.bm-sheet,.sheet-card,.prov-sheet, .summary-chip,.revenue-panel,.setup-gate{ border-width:2px !important; border-style:solid !important; border-color:var(--yui-line) !important; } /* ── Knoepfe ────────────────────────────────────────────────────────── Der volle Knopf ist rot mit DUNKLER Schrift - weiss auf diesem Rot hat nur 3,25:1. Der leere Knopf hat einen hellen Rahmen und faerbt sich beim Ueberfahren zu Weiss um. Beides aus der Vorlage. */ .cta-btn.coral,.bm-btn,.save-btn,.btn-primary,.sb-cta, .footer-btn-become,#chatSend,#promoApplyBtn,.bm-soon-btn, .notify-banner-enable,.cancel-btn.yes{ background:var(--yui-red) !important; border:2px solid var(--yui-red) !important; color:#14110F !important; font-family:var(--yui-head); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; } .cta-btn.coral:hover,.bm-btn:hover,.save-btn:hover,.sb-cta:hover, .footer-btn-become:hover,#chatSend:hover,#promoApplyBtn:hover{ background:var(--yui-red-deep) !important; border-color:var(--yui-red-deep) !important; color:#14110F !important; filter:none !important; } /* ── Knoepfe unter jeder Buchung im Profil ──────────────────────────── Sie standen noch in reinem Weiss aus der hellen Fassung. Jetzt dasselbe Paar wie ueberall sonst: der Hauptweg rot mit dunkler Schrift, der zweite Weg als Umriss. */ .booking-btn{ font-family:var(--yui-head);font-weight:600;letter-spacing:0.06em; text-transform:uppercase;font-size:13px; border:2px solid var(--yui-line-strong) !important; background:transparent !important; color:var(--yui-white) !important; } .booking-btn.primary{ background:var(--yui-red) !important; border-color:var(--yui-red) !important; color:#14110F !important; } .booking-btn.primary:hover{ background:var(--yui-red-deep) !important; border-color:var(--yui-red-deep) !important; color:#14110F !important; } .bullet-add-btn,.filter-btn,.chip,.qr-btn,.footer-btn-login,.upload-btn{ border:2px solid var(--yui-line-strong) !important; background:transparent !important; color:var(--yui-white) !important; font-family:var(--yui-head); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; } .filter-btn.active,.bm-chip[aria-pressed="true"],.top-tab.active, .drawer-chip[aria-pressed="true"]{ background:var(--yui-white) !important; border-color:var(--yui-white) !important; color:var(--yui-black) !important; } /* ── Preise ─────────────────────────────────────────────────────────── Der Preis ist im Paket rot und in der schmalen Schrift. Er ist das, wonach als erstes gesucht wird. Auf Dunkel nimmt die Vorlage dafuer das hellere Rot - #FF3B24 traegt zwar (5,33), --yui-red-deep liest sich in Fliesstextgroesse aber deutlich ruhiger (7,4). */ .bm-price,.card__price b,.bs-price,.item-price{ color:var(--yui-red-deep) !important; font-family:var(--yui-head); font-weight:700; } /* ── Eingabefelder ────────────────────────────────────────────────────*/ input[type="text"],input[type="tel"],input[type="email"],input[type="password"], input[type="search"],input[type="date"],input[type="time"],textarea,select, #chatInput,#promoInput{ border:2px solid var(--yui-line-strong) !important; background:var(--yui-black-2) !important; color:var(--yui-white) !important; } input::placeholder,textarea::placeholder{color:var(--yui-grey-text) !important;} /* Kalender- und Uhr-Knopf: kommen ueber color-scheme:dark schon hell. Die Seiten drehen sie an zwei Stellen noch per Hand um - das ist jetzt eine Umkehrung zu viel und wird hier zurueckgenommen. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{filter:none !important;opacity:0.85 !important;} /* ── Spinnen-Bewegung ───────────────────────────────────────────────── "step": die Spinne in der Kopfzeile atmet. "crawl": die Spinne laeuft ueber den Netzfaden, waehrend der Bot tippt. Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht beides still - das steht ganz unten. */ @keyframes yui-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes yui-crawl{ 0%{transform:translateX(0) rotate(0)} 25%{transform:translateX(46px) rotate(3deg)} 50%{transform:translateX(92px) rotate(0)} 75%{transform:translateX(46px) rotate(-3deg)} 100%{transform:translateX(0) rotate(0)} } .yui-spider-step{animation:yui-step 2.4s ease-in-out infinite;} /* Aufbau wie in der Vorlage: der Faden oben, die Beschriftung darunter. Nebeneinander wurde es auf dem Handy zu breit - die Beschriftung brach auf zwei Zeilen und schob den Fortschrittsfaden aus der Reihe. */ .yui-typing{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:2px 0;} /* "flex:0 0 150px" war fuer die alte Reihe nebeneinander gedacht. In der gestapelten Fassung liegt die Hauptachse senkrecht - aus 150px Breite wurden dort 150px HOEHE, und zwischen Faden und Beschriftung klaffte ein Loch. Deshalb Breite und Hoehe ausdruecklich, kein flex-basis. */ .yui-typing__track{position:relative;width:150px;height:34px;flex:0 0 auto;} .yui-typing__web{position:absolute;left:0;right:0;top:26px;height:2px; background:repeating-linear-gradient(90deg,var(--yui-grey) 0 6px,transparent 6px 12px);} .yui-typing__spider{position:absolute;left:0;top:0;width:34px;height:auto; animation:yui-crawl 2.6s ease-in-out infinite;} .yui-typing__label{font-family:var(--yui-head);font-weight:600;font-size:14px; letter-spacing:0.14em;text-transform:uppercase;color:var(--yui-grey-text);} @media (prefers-reduced-motion:reduce){ .yui-spider-step,.yui-typing__spider{animation:none !important;} } /* ═══ Kopfzeile, Hero und Marke ═══════════════════════════════════════ Das Paket setzt zwei schwarze Baender an den Anfang der Seite: die Kopfzeile und darunter den Hero. Dazwischen und darunter bleibt es hell. Genau so ist es hier gebaut. */ header.sr-band{ background:var(--yui-black) !important; border-bottom:2px solid var(--yui-line-dark) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .yui-brand{display:flex;align-items:center;gap:12px;min-width:0;} .yui-spider{height:38px;width:auto;flex:0 0 auto;object-fit:contain;} .yui-wordmark{height:26px;width:auto;max-width:100%;object-fit:contain;display:block;} /* Der Schriftzug in der Kopfzeile der Startseite war mit 20-26px sehr klein - im Markenblock stehen dort 180px (Handy) bis 994px (Rechner) zur Verfuegung, davon waren nur 130px belegt. Er darf also deutlich groesser werden. Die Spinne waechst mit, damit das Paar zusammenbleibt. */ header.sr-band .yui-wordmark{height:40px;} header.sr-band .yui-spider{height:46px;} @media (max-width:720px){ header.sr-band .yui-wordmark{height:32px;} header.sr-band .yui-spider{height:40px;} } @media (max-width:420px){ header.sr-band .yui-wordmark{height:27px;} header.sr-band .yui-spider{height:34px;} } header.sr-band .nav .links,header.sr-band select{color:var(--yui-white);} header.sr-band .lang-select-wrap select{ background:transparent !important;color:var(--yui-white) !important; border:2px solid rgba(255,255,255,0.35) !important; } /* Der Hero: schwarzes Band, rotes Logo, weisse Ueberschrift. */ .yui-hero{ background:var(--yui-black-2) !important; color:var(--yui-white) !important; border:2px solid var(--yui-line-dark) !important; border-radius:var(--r-xl) !important; margin:20px !important; padding-top:34px !important; padding-bottom:40px !important; } .yui-hero-logo{width:100%;max-width:440px;height:auto;margin:0 0 20px;display:block;} .yui-hero h1{color:var(--yui-white) !important;} .yui-hero .lede,.yui-hero p{color:#C9C2BA !important;} .yui-hero .link-secondary{color:var(--yui-red-bright) !important;} /* Der Block direkt darunter ("Rent the Most Exotic Bikes") gehoert optisch zum Hero - sonst steht ein heller Streifen zwischen zwei schwarzen. */ #contact-top.sr-band{background:var(--yui-black) !important;color:var(--yui-white) !important;} #contact-top .book-heading{color:var(--yui-white) !important;} #contact-top .sub{color:#C9C2BA !important;} #contact-top .wa-btn{ background:var(--yui-red) !important;border-color:var(--yui-red) !important;color:#14110F !important; font-family:var(--yui-head);font-weight:600;letter-spacing:0.08em;text-transform:uppercase; } #contact-top .wa-btn:hover{background:var(--yui-red-deep) !important;border-color:var(--yui-red-deep) !important;} /* Fusszeile: schwarzes Band, damit die Seite unten genauso abschliesst, wie sie oben anfaengt. */ footer{background:var(--yui-black) !important;color:var(--yui-white) !important; border-top:2px solid var(--yui-line-dark) !important;} footer .yui-wordmark{height:22px;} /* Frueher stand hier die schwarze Wortmarke, umgedreht per Filter. Das ging nur so lange gut, wie die Datei rein schwarz ist - bei einer farbigen Fassung wuerde aus dem Rot ein Cyan. Jetzt liegt dort direkt die weisse Datei, der Filter faellt weg. */ footer .cols a,footer .cols p,footer .cols h4, footer .fine,footer .impressum,footer .impressum h4, .foot-brand-text span,.sr-consent-reopen{color:#C9C2BA !important;} footer .cols a:hover{color:var(--yui-red-bright) !important;} footer .fine,footer .impressum{border-top-color:var(--yui-line-dark) !important;} .footer-btn-login{border-color:rgba(255,255,255,0.4) !important;color:var(--yui-white) !important;} .footer-btn-login:hover{background:rgba(255,255,255,0.1) !important;} /* Der Streifen ganz oben und die runden Knoepfe unten. */ .scroll-banner{background:var(--yui-black-2) !important;border-bottom:2px solid var(--yui-line-dark);} .scroll-banner .sb-line2{color:var(--yui-white) !important;} .scroll-banner .sb-line1{color:var(--yui-grey-text) !important;} /* Heller Rand statt schwarzer. Die Knopfleiste schwebt fest ueber der Seite und wandert dabei ueber helle UND dunkle Abschnitte; mit schwarzem Rand auf schwarzem Grund war dieser Knopf im dunklen Hero-Band nicht mehr zu sehen - nur die Schrift schwebte frei. Der helle Rand zeichnet ihn dort ab und faellt auf hellem Grund nicht auf, weil die schwarze Flaeche dort ohnehin traegt. */ /* Der Rand war rot wie die Flaeche - unsichtbar. Beim Scrollen schwebt der Knopf aber ueber die roten RENT-NOW-Knoepfe der Modellkarten, und dort verschwand er komplett: Rot auf Rot, nur die Schrift stand noch da. Jetzt derselbe graue Rand wie beim Nachbarknopf "My Bookings" - die beiden lesen sich als Paar, und auf Rot zeichnet sich der Knopf ab. */ .chat-fab{ background:var(--yui-red) !important;border:2px solid var(--yui-line-strong) !important; color:#14110F !important;box-shadow:none !important; font-family:var(--yui-head);font-weight:600;letter-spacing:0.06em;text-transform:uppercase; } .filter-jump-fab{ background:var(--yui-black-2) !important;border:2px solid var(--yui-line-strong) !important; color:var(--yui-white) !important;box-shadow:none !important; font-family:var(--yui-head);font-weight:600;letter-spacing:0.06em;text-transform:uppercase; } .drawer-tab{background:var(--yui-black-2) !important;border:2px solid var(--yui-line-strong) !important; border-right:0 !important;color:var(--yui-white) !important;box-shadow:none !important;} @media (max-width:520px){ .yui-wordmark{height:20px;} .yui-spider{height:30px;} .yui-hero-logo{max-width:320px;} } /* Auf schwarzen Flaechen liegt spider-on-dark.png: dieselbe Spinne, nur mit umgekehrter Helligkeit. Der weisse Glow, der frueher hier stand, ist damit ueberfluessig - er hat auf 34px sowieso nur geschmiert. Gemessen: umgekehrte Spinne auf #14110F -> 83% der Flaeche ueber 3:1, vorher waren es mit Glow 0%. */ .chat-fab img{object-fit:contain !important;background:transparent !important;} .yui-hero-logo{margin-bottom:22px;} #contact-top .yui-hero-logo{margin:0 auto 24px;} /* (Die frueheren Verkleinerungen fuer die zwei schwebenden Knoepfe standen hier. Sie sind ersetzt durch den Abschnitt ganz unten in dieser Datei: grosse Schrift, und lange Texte brechen um statt abgeschnitten zu werden. Ohne Entfernen haetten hier zwei Stellen dasselbe geregelt.) */ /* ═══ Chat ════════════════════════════════════════════════════════════ */ /* Kopfzeile wie auf der Startseite: schwarzes Band, weisse Wortmarke. */ body > header,#chatWrap > header{ background:var(--yui-black) !important; border-bottom:2px solid var(--yui-line-dark) !important; box-shadow:none !important; } body > header a.back,body > header .install-btn,body > header .notify-btn, body > header .lang-pick-code{color:var(--yui-white) !important;} .head-avatar{background:transparent !important;border:0 !important;box-shadow:none !important;} .install-btn,.notify-btn,.lang-pick{ border:2px solid var(--yui-line-strong) !important;background:transparent !important; } .notify-btn.subscribed{background:var(--yui-red) !important;border-color:var(--yui-red) !important;color:#14110F !important;} /* Eigene Nachricht: rot mit dunkler Schrift, wie in der Vorlage. Weisse Schrift auf diesem Rot hat 3,25:1 und faellt durch. */ .ai-msg.user{ background:var(--yui-red) !important;border:2px solid var(--yui-red) !important; color:#14110F !important;box-shadow:none !important; } .ai-msg.user .msg-link{color:#14110F !important;text-decoration:underline;} /* Antwort des Bots: abgesetzte Flaeche mit hellem Rahmen. */ .ai-msg.bot{background:var(--yui-paper) !important;color:var(--yui-white) !important;box-shadow:none !important;} .ai-msg.typing{background:transparent !important;border:0 !important;padding:6px 2px !important;} /* Der Sende-Knopf ist der einzige rote Kreis - jetzt ein rotes Quadrat. */ #chatSend{box-shadow:none !important;} #chatSend svg{color:#14110F !important;} /* Schnellantworten und Karten im Chat. */ .qr-btn{background:transparent !important;} .qr-btn:hover,.qr-btn:active{background:var(--yui-white) !important;color:var(--yui-black) !important;} .bike-cta,.map-cta,.cal-cta,.loc-btn{ border:2px solid var(--yui-line-strong) !important;background:var(--yui-black-2) !important; color:var(--yui-white) !important; } .loc-btn.primary{background:var(--yui-red) !important;border-color:var(--yui-red) !important;color:#14110F !important;} /* Die Spinne neben jeder Antwort steht frei, ohne Rahmen und ohne Kasten - sie ist ein Zeichen, kein Bild in einem Bilderrahmen. */ .bot-avatar{ border:0 !important;background-color:transparent !important; background-size:contain !important;background-repeat:no-repeat !important; width:30px !important;height:30px !important;flex:0 0 30px !important; box-shadow:none !important; } body > header .yui-spider{height:34px;} /* ── Cookie-Hinweis ─────────────────────────────────────────────────── Gemessen auf der Live-Seite, zwei Befunde: 1. Die Startseite hatte den Balken auf #17171A, die Chat-Seite auf #F5F4F0 - zwei verschiedene Werte in zwei Dateien. Auf Hell fiel das nicht auf, weil jede Seite ihre Schrift selbst setzte. Jetzt kommt die Schrift von hier und ist hell: auf der Chat-Seite stand "Decline" damit weiss auf weiss, Kontrast 1,0 - der Knopf war unsichtbar. Deshalb steht die Flaeche ab jetzt HIER, einmal, fuer beide Seiten. 2. Der Balken hatte nur eine 1px-Kante mit 14% Weiss und einen DUNKLEN Schlagschatten. Auf schwarzem Grund tut ein dunkler Schatten nichts - der Balken schwebte ohne sichtbare Oberkante. Jetzt 2px in --yui-line-strong, das traegt. Zustimmen und Ablehnen sind jetzt wirklich gleich stark: gleiche Groesse, gleicher Rahmen, keine Fuellung. Vorher war "Zustimmen" weiss gefuellt und "Ablehnen" nur eine duenne Linie - das ist genau die Ungleichheit, die die DSGVO nicht will. */ .sr-consent{ background:var(--yui-black-2) !important; border-top:2px solid var(--yui-line-strong) !important; box-shadow:none !important; } .sr-consent-text{color:var(--yui-white) !important;} .sr-consent-link{color:#B8B4A6 !important;} .sr-consent-yes,.sr-consent-no{ background:transparent !important; border:2px solid var(--yui-white) !important; color:var(--yui-white) !important; } .sr-consent-yes:hover,.sr-consent-no:hover{ background:var(--yui-white) !important;color:var(--yui-black) !important; } .sr-consent-btn:focus-visible{outline-color:var(--yui-red-bright) !important;} .cta-btn.coral:hover{color:#14110F !important;} /* ═══ Control Center, Admin, Login und Profil ═════════════════════════ Dieselbe schwarze Kopfzeile wie vorn. "body > header" trifft die Startseite und den Chat nicht, weil die ihre Kopfzeile anders sitzen haben - deshalb hier noch einmal ausdruecklich. */ header{ background:var(--yui-black) !important; color:var(--yui-white) !important; border-bottom:2px solid var(--yui-line-dark) !important; background-image:none !important; } header .title,header .sub,header a,header button,header .head-text, header #providerName,header .notify-btn,header .site-link{color:var(--yui-white) !important;} header button,header .notify-btn{ border:2px solid var(--yui-line-strong) !important;background:transparent !important; } header button:hover,header .notify-btn:hover{background:rgba(255,255,255,0.12) !important;} /* Das Zeichen in den Kopfzeilen der Innenseiten ist dieselbe umgekehrte Spinne wie vorn - kein Filter mehr noetig. */ header .sr-logo,header img.sr-mark{ width:auto;height:32px;object-fit:contain; } /* Die Zaehl-Kacheln in Grossbuchstaben brauchen etwas weniger Sperrung, sonst laeuft "Confirmed / Out" aus seinem Kasten. */ .summary-chip .lbl{letter-spacing:0.04em !important;font-size:10.5px !important;} .revenue-stat .rs-label{letter-spacing:0.06em !important;} /* Der Uebersichtskasten im Control Center. Er war schwarz auf hellem Grund - auf dem schwarzen Grund braucht er die abgesetzte Flaeche, sonst steht er gar nicht mehr da. */ .revenue-panel{background:var(--yui-black-2) !important;color:var(--yui-white) !important; border:2px solid var(--yui-line) !important;} .revenue-panel .rev-title,.revenue-panel .rs-value{color:var(--yui-white) !important;} .revenue-panel .rs-label,.revenue-panel .rev-sub{color:#C9C2BA !important;} /* Anmeldeseite: schwarzer Grund wie der Hero, damit sie zum Rest passt. */ body.yui-login,.login-card{background:var(--yui-paper) !important;} /* Anmeldeknopf: rot wie jeder Hauptknopf. Die Seite hatte ihn weiss gesetzt, als der Grund noch schwarz war. */ button[type="submit"],.login-btn,.primary-btn{ background:var(--yui-red) !important;color:#14110F !important; border:2px solid var(--yui-red) !important; font-family:var(--yui-head);font-weight:600;letter-spacing:0.08em;text-transform:uppercase; } button[type="submit"]:hover,.login-btn:hover,.primary-btn:hover{ background:var(--yui-red-deep) !important;border-color:var(--yui-red-deep) !important; color:#14110F !important; } .brand-logo{width:78px !important;height:auto !important;} /* Die Spinne ueber dem Katalog steht frei auf dem hellen Grund - ein schwarzes Kaestchen drumherum sah aus wie ein vergessener Platzhalter. */ #cat-scooters .sr-logo{width:132px !important;height:auto !important;filter:none !important;} @media (max-width:520px){#cat-scooters .sr-logo{width:104px !important;}} /* Die beiden Knoepfe unten bleiben in gemischter Schreibweise: in Grossbuchstaben passte "Find your Bike with AI" in keine Zeile. Die Schriftgroesse steht jetzt gebuendelt ganz unten in dieser Datei. */ .chat-fab,.filter-jump-fab{text-transform:none !important;} /* ═══ Hilfe per WhatsApp ══════════════════════════════════════════════ Vorher ein gruener Kreis, der fest unten rechts schwebte - und dort staendig auf irgendeinem Knopf lag. Jetzt steht er am Ende der Seite, mit Schriftzug: ein Symbol allein sagt nicht, wofuer es da ist. Weiss mit schwarzem Rand und gruenem Logo. So bleibt WhatsApp sofort erkennbar, ohne dass ein fremdes Gruen die Marke aufmacht. */ #waHelpFab{ position:static; display:flex;align-items:center;justify-content:center;gap:10px; margin:14px auto 30px;max-width:340px;width:100%;box-sizing:border-box; padding:13px 20px;min-height:46px; background:#FFFFFF;border:2px solid var(--yui-black);color:var(--yui-black); font-family:var(--yui-head);font-weight:600;font-size:14px; letter-spacing:0.06em;text-transform:uppercase; text-decoration:none;box-shadow:none; } #waHelpFab svg{width:20px;height:20px;flex:0 0 auto;color:#25D366;} #waHelpFab:active{transform:scale(0.98);} /* Der Weg zur Kasse sitzt in der schwarzen Kopfzeile neben dem Abmelden. */ #tillLink{ font-family:var(--yui-head);font-weight:600;letter-spacing:0.08em;text-transform:uppercase; font-size:13px;padding:8px 13px;border:2px solid rgba(255,255,255,0.4) !important; color:var(--yui-white) !important;text-decoration:none;white-space:nowrap; } #tillLink:hover{background:rgba(255,255,255,0.12) !important;} /* Auf einem 390px-Handy stehen in der Kopfzeile des Control Centers jetzt vier Dinge nebeneinander: zurueck, Glocke, Kasse, Abmelden. Enger stellen, sonst schiebt sich "Log Out" ueber den Rand. */ @media (max-width:520px){ header{padding-left:12px !important;padding-right:12px !important;gap:8px !important;} header button,header .notify-btn,#tillLink{ font-size:11.5px !important;padding:7px 9px !important;letter-spacing:0.04em !important; } header .site-link{font-size:12px !important;} header .title{font-size:17px !important;} header .sub{font-size:11px !important;} /* Gemessen auf 390px: die Knopfreihe war schon auf Englisch 14px zu breit ("Log Out" abgeschnitten), auf Schwedisch 65px, auf Thai 72px. Die Kopfzeile ist ein Raster mit drei Spalten (zurueck | Name | Knoepfe) - auf schmalen Geraeten bekommen die Knoepfe eine eigene Zeile darunter. Dann passt jede Sprache, auch eine, die noch dazukommt. Auf dem Admin-Dashboard ist die Kopfzeile kein Raster; dort bleiben diese Angaben wirkungslos, das ist so gewollt. */ header{ grid-template-columns:auto minmax(0,1fr) !important; row-gap:10px !important;align-items:center !important; } header .site-link{grid-column:1;grid-row:1;} header .title-block{ grid-column:2;grid-row:1; justify-content:flex-start !important;text-align:left !important;min-width:0; } header .header-controls{ grid-column:1 / -1;grid-row:2; justify-self:stretch !important;justify-content:flex-start !important; flex-wrap:wrap !important;gap:8px !important; } } /* Die Zaehl-Kacheln: "Confirmed / Out" ist das laengste Wortpaar. */ .summary-chip .lbl{font-size:9.5px !important;letter-spacing:0.02em !important;line-height:1.25;} /* ═══ Nacht: die Flaechen, die in den Seiten fest hell stehen ══════════ In den Seiten selbst stehen rund 350 feste helle Farben - Kartengrund, Blasen, Leisten. Sie hier abzufangen ist sicherer, als in neun grossen HTML-Dateien zu suchen und zu ersetzen: diese Datei laedt als letzte, und wer die Marke je wieder aendert, faellt mit einer Datei zurueck. Reihenfolge unten: erst Flaeche, dann Schrift, dann Rahmen. */ /* ── Grund und Flaechen ───────────────────────────────────────────── */ html,body{background:var(--yui-black) !important;color:var(--yui-white) !important;} .card,.profile-card,.add-item-card,.sheet-card,.login-card,.help-card, .bm-card,.bm-sheet,.bm-soon-panel,.revenue-stat,.setup-gate, .prov-row,.pv-row,.maps-check,.suggestion,.search-row,.date-filter-field, .map-cta,.bike-cta,.cal-cta,.lang-pick,.lang-select-wrap, .notify-banner,.reset-box,.summary-chip,.bs-row,.bs-light,.cat-filter-bar, .img-preview,.photo-slot,.promo-chip,.item-row,.order-card,.till-card, .pay-filter,.cal-day,.drawer-account,.install-sheet,.prov-sheet{ background:var(--yui-black-2) !important; border-color:var(--yui-line) !important; color:var(--yui-white) !important; } /* Die Bereiche, die die Seiten als "Blatt" bauen - sie sollen mit dem Grund verschmelzen, nicht als hellere Platte darauf liegen. */ main,section,.wrap,.sheet,.panel,.container,.content,.page, #chatBody,#chatWrap,.chat-wrap,.tab-panel,.orders-wrap{ background-color:transparent !important; } /* ── Schrift ──────────────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6,p,li,td,th,label,span,div,a,strong,b,em,small{ border-color:var(--yui-line); } .muted,.sub,.hint,.fine,.note,.rs-label,.lbl,.kicker,.sr-eyebrow, .card__price span,.bm-cc,.pv-sec,.item-sub,.order-sub{ color:var(--yui-grey-text) !important; } /* ── Tabellen und Trennlinien ─────────────────────────────────────── */ table,tr,td,th{border-color:var(--yui-line) !important;} hr,.divider,.sep{border-color:var(--yui-line) !important;background:var(--yui-line) !important;} /* ── Chat-Leisten ─────────────────────────────────────────────────── */ #promoBar{background:var(--yui-black-2) !important;border-bottom:2px solid var(--yui-line) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} #chatFoot{background:var(--yui-black) !important;border-top:2px solid var(--yui-line) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background-image:none !important;} #chatBody{background:var(--yui-black) !important;} .quick-replies{background:transparent !important;} .ai-msg.typing{color:var(--yui-grey-text) !important;} .typing-dots span{background:var(--yui-red-deep) !important;} /* ── Zustandsfarben ─────────────────────────────────────────────────── Die Seiten haben helle Pastellflaechen fuer "bestaetigt", "wartet", "abgelehnt". Auf Schwarz werden daraus dunkle Flaechen mit farbiger Schrift - dieselbe Aussage, nur andersherum. */ .status-pending,.badge-pending,.item-out-badge,.st-pending{ background:rgba(240,180,41,0.14) !important;color:#F0B429 !important; border-color:rgba(240,180,41,0.45) !important;} .status-confirmed,.badge-confirmed,.st-confirmed,.st-out{ background:rgba(74,222,128,0.13) !important;color:#4ADE80 !important; border-color:rgba(74,222,128,0.42) !important;} .status-declined,.badge-declined,.st-declined,.error,.err{ background:rgba(255,106,85,0.13) !important;color:var(--yui-red-deep) !important; border-color:rgba(255,106,85,0.42) !important;} .status-completed,.badge-completed,.st-completed{ background:rgba(247,244,240,0.10) !important;color:var(--yui-white) !important; border-color:var(--yui-line-strong) !important;} /* ── Reste: alles, was per Schatten eine helle Kante gemalt hat ────── */ [class*="card"],[class*="panel"],[class*="sheet"],[class*="row"],.btn,button{ box-shadow:none !important;} /* ── Bilder in Karten ───────────────────────────────────────────────── Fotos behalten ihren eigenen Grund. Nur Platzhalter und Zeichnungen, die auf Hell gedacht waren, bekommen die dunkle Flaeche darunter. */ .bm-photo,.bm-sheet-photo,.map-cta-img,.suggestion-img,.card__media{ background:#201C1A !important;} /* ── Gemessene Nachbesserungen ──────────────────────────────────────── Die folgenden Farben waren fuer hellen Grund gerechnet. Auf Schwarz lagen sie zwischen 1,55:1 und 3,56:1 - gemessen, nicht geschaetzt. Jede Zeile hier hat einen Befund aus kontrast.py als Grund. */ /* "Available now" war Dunkelgruen (3,24:1). */ .bm-avail.free,.avail-free,.st-free{color:#4ADE80 !important;} /* Der Hinweis auf die Benachrichtigungen war Braun auf Creme (1,55:1). */ .notify-banner{background:rgba(240,196,106,0.13) !important; border:2px solid rgba(240,196,106,0.42) !important;} .notify-banner-text{color:#F0C46A !important;} .notify-banner-text strong{color:#F5D9A0 !important;} .notify-banner-dismiss{color:#F0C46A !important;} .notify-banner-enable{background:#F0C46A !important;border-color:#F0C46A !important; color:#14110F !important;} /* Ruecksprache-Meldungen im Profil: Gruen 2,62:1, Rot 2,94:1. */ #waNumMsg,.msg-ok,.form-ok{color:#4ADE80 !important;} #mapsCheckMsg,.msg-bad,.form-bad{color:#FF8B79 !important;} /* Weisse Schrift auf dem neuen Rot hat 3,25:1 - dunkle hat 5,33:1. Betrifft jeden Knopf, der die Seiten selbst rot gefuellt haben. */ #addPromoBtn,.promo-add-btn,.btn-red,.req-actions button.accept{ color:#14110F !important;} /* ── Der Fortschrittsfaden aus der Vorlage ──────────────────────────── "spin-thread": ein 3px-Faden, der sich von null auf volle Breite spinnt, solange der Bot denkt. Er sagt nichts ueber die echte Dauer - er ist Teil des Netz-Motivs und ersetzt das frueher uebliche Zucken der drei Punkte. Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht einen ruhenden Faden (siehe unten). */ @keyframes yui-spin-thread{0%{width:0}100%{width:100%}} .yui-typing__side{display:flex;flex-direction:column;gap:7px;min-width:0;width:100%;max-width:200px;} .yui-progress{height:3px;background:var(--yui-line-dark);border-radius:var(--r-pill);overflow:hidden;} .yui-progress__bar{height:3px;width:0;background:var(--yui-red);border-radius:var(--r-pill); animation:yui-spin-thread 2.8s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .yui-progress__bar{animation:none !important;width:38% !important;} } /* Der Knopf im Seitenfach: beim Ueberfahren stand dunkle Schrift auf dunklem Grund (#14110F auf #33333C). */ .drawer-account .drawer-profile-btn:hover{ background:var(--yui-white) !important;border-color:var(--yui-white) !important; color:var(--yui-black) !important;} /* ── Dunkle Schlagschatten ──────────────────────────────────────────── Gemessen auf der Live-Seite: mehrere Knoepfe tragen noch einen Schatten in rgba(20,20,15,0.2) bzw. rgba(0,0,0,0.28). Auf hellem Grund war das eine weiche Kante. Auf schwarzem Grund ist ein schwarzer Schatten nicht weich, sondern ein schmutziger Ring um den roten Knopf - auf dem Streifen ganz oben deutlich zu sehen. Die frueher hier stehende Regel traf nur Klassen mit "card/panel/sheet/row" und button - diese hier sind Links. */ .sb-cta,.wa-cta,.wa-btn,.cta-btn,.bike-cta,.map-cta,.cal-cta,.loc-btn, .chat-fab,.filter-jump-fab,.drawer-tab,#waHelpFab,.footer-btn, .footer-btn-login,.footer-btn-become,.sr-consent,.install-sheet{ box-shadow:none !important; } /* ── Bedienelemente ohne eigene Schriftfarbe ────────────────────────── Ein