/* GLOBALANE Design-Schicht (glx) v2 — 09.08.2026 Mobil zuerst und SOFORT sichtbar: Einblendung beim Laden, deutliche Kamerafahrt auf den echten Fotos (auch ohne Maus), wandernder Scheinwerfer über dem Schwarz, hochzählende Preise. Nur transform/opacity/filter — keine Layout-Sprünge. Greift nur mit (setzt gl-design.js). Der Rechner (#mrwiz-wrap) bleibt unberührt. */ /* ---------- 0) Bewertungen ganz oben abschalten ---------- Vorgabe des Inhabers 09.08.: „Google-Bewertungen haben ganz oben nichts zu suchen und sind nicht aktuell." Der Sync-Block fügt sie per JavaScript ein (hartkodiert „5,0 (14)"), gl-design.js entfernt sie wieder aus dem DOM. Diese Regel ist der Sofort-Schutz (auch bevor das Skript läuft) und NICHT an .glx gebunden, damit sie greift, sobald diese Datei geladen ist — unabhängig vom Seiten-Cache. */ .mr-revbox, .mr-chip-rev { display: none !important; } /* ---------- 0b) Hero-Foto mit Kamerafahrt („videolisiert") ---------- Echtes Foto des Betriebs (Fahrer macht sich für den Kunden bereit) hinter der Kopf-Überschrift „Premium Chauffeur- & Fahrservice in Wien" (.mw-intro). Langsame Zoom-/Schwenkfahrt (::before) + dunkler Verlauf (::after) für lesbaren weißen Text — wirkt wie ein Videoclip, lädt wie ein Bild. ⚠️ .mw-intro liegt im Rechner-Wrapper, ist aber NUR der Text-Kopf, NICHT das Formular. Rein per CSS (kein JavaScript, kein DOM-Eingriff) — die Rechner-Funktion bleibt völlig unberührt. Beide Pseudo-Elemente von .mw-intro sind frei (geprüft). */ .glx body.home .mw-intro { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; padding: 46px 26px 42px; } .glx body.home .mw-intro::before { content: ""; position: absolute; inset: -8%; z-index: -2; /* 09.08.2026: 1600px-Variante (123 KB statt 370 KB) unter NEUEM Namen in den Plugin-Assets — relative URL, wandert mit dem Plugin. Original bleibt unberuehrt. */ background: url('gl-hero-fahrer.jpg') center 38% / cover no-repeat; animation: glxHeroKen 24s ease-in-out infinite alternate; will-change: transform; } @keyframes glxHeroKen { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.18) translate(-2.5%, -2%); } } .glx body.home .mw-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(8, 8, 10, .60) 0%, rgba(8, 8, 10, .66) 55%, rgba(8, 8, 10, .84) 100%), radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 55%); } .glx body.home .mw-intro > * { position: relative; z-index: 1; } /* Am Handy etwas kompakter, damit das Bild nicht die halbe Höhe frisst. */ @media (max-width: 782px) { .glx body.home .mw-intro { padding: 38px 20px 34px; border-radius: 16px; } } /* ---------- 1) Kopf-Einblendung beim Laden ---------- ⚠️ 09.08.2026, Inhaber-Meldung „einem Fable-Agenten nicht würdig": Die frühere Fassung startete die WICHTIGSTE Überschrift der Seite bei opacity:0 + blur(6px) und blendete sie per transition ein. Auf echten Handys blieb sie sichtbar bei ~0,3 Deckkraft und 6 px Unschärfe hängen (transition wurde nie fertig / Tab gedrosselt) — die H1 jeder Money-Page war beim Laden dunkel-verwaschen und unlesbar. Genau das wirkte kaputt. NEU: Der Grundzustand ist IMMER voll sichtbar (opacity:1, keine Unschärfe). Läuft die Einblendung nicht (JS aus, gedrosselt, gecacht), steht der Text trotzdem gestochen da. Die Bewegung ist eine EINMAL-Animation, die garantiert bei voller Deckkraft endet und die Schärfe nie anfasst. */ .glx .glx-hero-el { opacity: 1; } .glx .glx-hero-el.glx-hero-go { animation: glxHeroRise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--glx-hd, 0s); } /* ⚠️ 09.08.2026, LIVE BEWIESEN: Die Einblendung darf die DECKKRAFT NICHT anfassen. Steht auch nur ein `opacity < 1` im Keyframe, hält der Browser bei Fill-Mode `both` (oder wenn die Animation nicht durchläuft — gedrosselter Tab, langsames Handy) den reduzierten Wert im Bild fest: die H1 rendert grau, obwohl getComputedStyle „1" meldet (der Automations-Browser hat es zweimal so gezeigt). Deshalb bewegt die Animation NUR noch (translateY); die Deckkraft bleibt konstant 1. Selbst ein „hängender" 12-px-Versatz ist unsichtbar — grau kann die Überschrift so nie mehr werden. */ @keyframes glxHeroRise { from { transform: translateY(12px); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .glx .glx-hero-el.glx-hero-go { animation: none; } } /* ---------- 2) Enthüllung beim Scrollen ---------- */ .glx .glx-r { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--glx-d, 0s); will-change: opacity, transform; } .glx .glx-in { opacity: 1; transform: none; } /* ---------- 3) Kamerafahrt: Fotos werden Filmszenen (auch am Handy) ---------- */ .glx .mr-fleet-img, .glx .mw-fleet-img { overflow: hidden; } .glx .glx-kb { animation: glxKbA 14s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; } .glx .glx-kb-b { animation-name: glxKbB; animation-duration: 17s; } @keyframes glxKbA { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.14) translate(-10px, -6px); } } @keyframes glxKbB { from { transform: scale(1.14) translate(8px, -5px); } to { transform: scale(1.03) translate(0, 0); } } /* ---------- 4) Karten: Tiefe, Antwort, periodischer Glanz (mobil) ---------- */ .glx .mr-card, .glx .mw-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease; box-shadow: 0 1px 2px rgba(14, 14, 16, .05); position: relative; overflow: hidden; } .glx .mr-card:hover, .glx .mw-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(14, 14, 16, .05), 0 18px 40px -12px rgba(14, 14, 16, .28); border-color: rgba(14, 14, 16, .25); } .glx .mr-card:active, .glx .mw-card:active { transform: scale(.99); transition-duration: .12s; } /* Ein feiner Glanz wandert einmal über eine Karte, wenn sie erscheint — reine Deko, aber am Handy sichtbar (dort gibt es kein Hover). */ .glx .glx-in.mr-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 66%); transform: translateX(-120%); animation: glxSheen 1.1s ease-out .2s 1; pointer-events: none; } @keyframes glxSheen { to { transform: translateX(120%); } } /* Schritt-Nummern kommen mit Ring */ .glx .mr-step, .glx .mw-step { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; } .glx .mr-step-num, .glx .mw-step-num { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease; } .glx .glx-r .mr-step-num { transform: scale(.5); } .glx .glx-in .mr-step-num { transform: scale(1); box-shadow: 0 0 0 7px rgba(14, 14, 16, .07); } /* Strecken-Zeilen */ .glx .mr-route, .glx .mw-route { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; } .glx .mr-route:hover, .glx .mw-route:hover { transform: translateX(6px); box-shadow: 0 10px 26px -14px rgba(14, 14, 16, .22); } /* ---------- 5) Überschriften: Akzentlinie wächst ---------- */ .glx .mr-section h2, .glx .mw-section h2 { position: relative; padding-bottom: .38em; } .glx .mr-section h2::after, .glx .mw-section h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 2px; background: currentColor; opacity: .9; transition: width 1s cubic-bezier(.16, 1, .3, 1) .15s; } .glx h2.glx-in::after { width: 56px; } .glx .mr-cta h2, .glx .mw-cta h2 { padding-bottom: 0; } .glx .mr-cta h2::after, .glx .mw-cta h2::after { display: none; } /* ---------- 6) Scheinwerfer über den dunklen Flächen ---------- */ .glx .glx-nacht { position: relative; isolation: isolate; overflow: hidden; } .glx .glx-nacht::after { content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: -40%; width: 42%; transform: rotate(16deg) translateX(-60%); background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .07) 58%, rgba(255, 255, 255, 0) 100%); animation: glxLicht 7s cubic-bezier(.45, .05, .3, 1) infinite; pointer-events: none; } .glx .glx-nacht::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(130% 90% at 16% 0%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(130% 100% at 100% 100%, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%); pointer-events: none; } @keyframes glxLicht { 0% { transform: rotate(16deg) translateX(-160%); } 60% { transform: rotate(16deg) translateX(520%); } 100% { transform: rotate(16deg) translateX(520%); } } /* ---------- 7) Knöpfe & Chips ---------- */ .glx .mr-btn, .glx .mw-btn { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, filter .25s ease; } .glx .mr-btn:hover, .glx .mw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(14, 14, 16, .4); filter: brightness(1.03); } .glx .mr-btn:active, .glx .mw-btn:active { transform: scale(.97); transition-duration: .1s; } .glx .mr-chip, .glx .mw-chip { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .glx .mr-chip:hover, .glx .mw-chip:hover { background: #0e0e10; color: #fff; border-color: #0e0e10; transform: translateY(-2px); } .glx .mr-chip:active, .glx .mw-chip:active { transform: scale(.96); } /* ⚠️ SICHERHEITSNETZ zur Enthüllung (21.08.2026). `.glx-r` startet mit `opacity: 0` und wird erst sichtbar, wenn JavaScript die Klasse `.glx-in` setzt. Faellt das Skript aus — Fehler weiter oben, langsames Netz, Browser ohne IntersectionObserver, Werbeblocker — bleibt der Abschnitt DAUERHAFT unsichtbar. Der Inhaber hat am 21.08. zweimal blasse Elemente fotografiert; beide Male war es nur die laufende Bewegung, aber der Fall „Skript kommt nie" haette denselben Anblick ergeben und niemand haette es gemerkt. Unsichtbarer Inhalt kostet Buchungen und gilt bei Google zudem als verstecktes Element. Deshalb: eine reine CSS-Uhr. Nach 4 Sekunden wird JEDER `.glx-r` sichtbar, ganz ohne JavaScript. Kommt das Skript rechtzeitig (Normalfall), hat es die Bewegung laengst gespielt und diese Regel aendert nichts. */ @keyframes glx-notfall-sichtbar { to { opacity: 1; transform: none; } } .glx .glx-r { animation: glx-notfall-sichtbar .01s linear 4s forwards; } /* Sobald das Skript da ist, gehoert die Buehne wieder ihm — sonst wuerde die Uhr eine gerade laufende Einblendung ueberholen. */ .glx .glx-r.glx-in { animation: none; } /* ---------- 8) Ruhe, wo verlangt ---------- */ @media (prefers-reduced-motion: reduce) { .glx .glx-hero-el { opacity: 1; transform: none; filter: none; transition: none; } .glx .glx-r { opacity: 1; transform: none; transition: none; } .glx .glx-kb, .glx .glx-nacht::after, .glx .glx-in.mr-card::after { animation: none; } } /* ---------- 9) Am Handy: Bewegung bleibt, nur Hover-Anhebung weg ---------- */ @media (max-width: 782px) { .glx .mr-card:hover, .glx .mw-card:hover { transform: none; box-shadow: 0 1px 2px rgba(14, 14, 16, .05); } .glx .glx-nacht::after { animation-duration: 9s; } } /* ============================================================ GLOBALANE Design-Audit v4 — 09.08.2026 Leitidee: aus flachem Grau-auf-Weiss ein ruhig gestufter Schwarz-Weiss- Editorial-Rhythmus. Groessere Titel, tintigerer Text, gestufter Weissraum, echte Tiefe, EIN tiefschwarzer Anker-Abschnitt. Bordeaux (#7a1f2b) als sparsamer Marken-Akzent (Preise). Rein additiv — Rechner #mrwiz-wrap tabu. ============================================================ */ /* --- 1) Hierarchie: Abschnitts- & Kartentitel gross --- */ html .mr-home .mr-section h2, html .mr-home .mw-section h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; margin-bottom: 14px; } html .mr-home .mr-sub, html .mr-home .mw-sub { font-size: clamp(1rem, .5vw + .9rem, 1.125rem); line-height: 1.5; margin-bottom: 36px; max-width: 56ch; } html .mr-home .mr-card-title { font-size: clamp(18px, .8vw + 15px, 21px); line-height: 1.2; letter-spacing: -.012em; font-weight: 700; } @media (max-width: 782px) { html .mr-home .mr-section h2, html .mr-home .mw-section h2 { font-size: 26px; line-height: 1.16; letter-spacing: -.6px; } html .mr-home .mr-card-title { font-size: 18px; } } /* --- 2) Text aus dem Grau holen (tintiger, mehr Kontrast) --- */ html .mr-home .mr-card-desc, html .mr-home .mr-route-name { color: #26262a; } html .mr-home .mr-sub, html .mr-home .mw-sub, html .mr-home .mr-card-foot { color: #55555b; } html .mr-home .mr-section--seo p { color: #3f3f43; max-width: 68ch; line-height: 1.65; } @media (max-width: 782px) { html .mr-home .mr-sub, html .mr-home .mw-sub { color: #55555a; } html .mr-home .mr-card-desc { color: #4d4d52; } } /* --- 3) Vertikaler Rhythmus + Raster-Gaps --- */ html .mr-home .mr-section { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 1024px) { html .mr-home .mr-section { padding-top: 100px; padding-bottom: 100px; } } html .mr-home .mr-section--pt0 { padding-top: 0; } html .mr-home .mr-section--seo { padding-top: 8px; } html .mr-home .mr-grid { gap: 20px; } @media (min-width: 1024px) { html .mr-home .mr-grid--fleet { gap: 24px; } html .mr-home .mr-grid--routes, html .mr-home .mr-grid--why { gap: 22px; } } /* --- 4) Echte Karten-Elevation im Ruhezustand --- */ .glx .mr-card, .glx .mw-card { box-shadow: 0 1px 2px rgba(14, 14, 16, .04), 0 12px 30px -16px rgba(14, 14, 16, .20); border-color: rgba(18, 18, 22, .10); } .glx .mr-card:hover, .glx .mw-card:hover { box-shadow: 0 1px 2px rgba(14, 14, 16, .05), 0 24px 48px -16px rgba(14, 14, 16, .30); } @media (max-width: 782px) { .glx .mr-card:hover, .glx .mw-card:hover { transform: none; box-shadow: 0 1px 2px rgba(14, 14, 16, .04), 0 12px 30px -16px rgba(14, 14, 16, .20); } } /* --- 5) Graue Baender sichtbar + Fahrzeug-Foto auf eine Buehne --- */ html .mr-home .mr-section--alt { background: #F1F1F3; box-shadow: inset 0 1px 0 rgba(18, 18, 22, .05), inset 0 -1px 0 rgba(18, 18, 22, .05); } .glx .mr-fleet-img, .glx .mw-fleet-img { background: linear-gradient(180deg, #FAFAFB 0%, #ECECEF 100%); border-bottom: 1px solid rgba(18, 18, 22, .07); } /* --- 6) Hero-Titel zum Blickanker (nur Text-Kopf .mw-intro) --- */ .glx body.home .mw-intro .mw-t { font-size: clamp(30px, 6.2vw, 46px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } .glx body.home .mw-intro p { font-size: clamp(15px, 2.4vw, 17px); color: rgba(255, 255, 255, .85); max-width: 40ch; margin-inline: auto; } /* --- 7) Preis als Conversion-Anker — Bordeaux, gross, tabellarische Ziffern --- */ .glx .mr-home .mr-card-foot .mr-price { font-size: clamp(1.25rem, 1vw + 1.05rem, 1.4rem); font-weight: 800; letter-spacing: -.02em; color: #7a1f2b; font-variant-numeric: tabular-nums; } .glx .mr-home .mr-price small { font-size: .72rem; font-weight: 600; color: #6B6B70; letter-spacing: 0; } .glx .mr-route-right .mr-price { font-size: 1.05rem; font-weight: 800; color: #7a1f2b; } /* --- 8) Barrierefreiheit + Touch-Ruhe --- */ .glx a.mr-btn:focus-visible, .glx a.mr-chip:focus-visible, .glx .mr-route:focus-visible, .glx .mr-card a:focus-visible { outline: 2px solid #0e0e10; outline-offset: 3px; border-radius: 12px; } .glx a.mr-chip:focus-visible { border-radius: 999px; } .glx body.home .mw-intro a:focus-visible, .glx .mr-cta a:focus-visible, .glx .glx-nacht a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .45); } @media (prefers-reduced-motion: reduce) { .glx body.home .mw-intro::before { animation: none; transform: scale(1.06); } } @media (max-width: 782px) { .glx a.mr-chip { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } .glx a.mr-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .glx .mr-chips { gap: 12px; } .glx .mr-route:hover, .glx .mw-route:hover { transform: none; } .glx .mr-btn:hover, .glx .mw-btn:hover { transform: none; filter: none; } .glx .mr-chip:hover, .glx .mw-chip:hover { transform: none; } } /* --- 9) Knoepfe: kein Abdimmen, Primaer/Sekundaer, Marken-Halt --- */ .glx .mr-btn:hover, .glx .mw-btn:hover { opacity: 1; filter: none; } .glx .mr-btn, .glx .mw-btn { font-size: 15.5px; letter-spacing: .01em; font-weight: 700; } .glx .mr-btn:not(.mr-btn--light):not(.mr-btn--wa) { background: #0B0B0C; color: #fff; } .glx .mr-btn--wa { box-shadow: 0 8px 20px -8px rgba(37, 211, 102, .45); } .glx .mr-cta .mr-btn--light { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55); } .glx .mr-section:not(.mr-cta) .mr-btn--light { background: transparent; border: 1.5px solid rgba(11, 11, 12, .18); color: #0B0B0C; } /* ⚠️ 21.08.2026 — SCHWARZ AUF SCHWARZ. Inhaber-Foto: „Schaut schlecht aus." Nachgemessen auf der Startseite, Abschnitt „Ihr Fixpreis in 10 Sekunden": Der Knopf „Preis berechnen" hatte Schrift rgb(11,11,12) auf einem DUNKLEN Kasten — 208x51 Pixel gross, technisch sichtbar, fuer ein Auge unsichtbar. Daneben leuchtete nur WhatsApp gruen. Ursache ist die Zeile direkt darueber: sie faerbt „helle" Knoepfe dunkel und nimmt dabei an, dass jeder Abschnitt ausser `.mr-cta` einen WEISSEN Grund hat. Dieser Abschnitt ist dunkel und heisst trotzdem nicht `.mr-cta`. Die neue Klick-Messung hat den Schaden gleich beziffert: „Jetzt buchen" in sieben Tagen 2 Klicks, WhatsApp 10 — die Gaeste nahmen WhatsApp, weil der andere Knopf fuer sie nicht existierte. ⚠️ DER EIGENTLICHE DENKFEHLER, live gemessen: Die Ausnahme prueft `.mr-section:not(.mr-cta)` — aber `.mr-cta` ist NICHT der Abschnitt, sondern der Kasten eine Ebene TIEFER (`.mr-section > .mr-wrap > .mr-cta.glx-nacht`). Der Abschnitt heisst nur `mr-section mr-section--pt0`, `:not(.mr-cta)` trifft also zu, und der Knopf im dunklen Kasten wird schwarz gefaerbt. Die Regel hat nie das gemeint, was sie trifft. Repariert wird nach dem, was zaehlt — liegt der Knopf IN einem dunklen Kasten, ist er hell. Beide Namen der dunklen Kaesten sind gemessen, nicht geraten. */ /* ⚠️ Gewicht: Die Regel oben wiegt vier Klassen, weil `:not(.mr-cta)` mitzaehlt. Eine Regel mit drei Klassen verliert dagegen, auch wenn sie spaeter steht — live gemessen, der Knopf blieb schwarz. Deshalb hier ebenfalls vier Klassen; bei Gleichstand gewinnt die spaetere, und das ist diese. */ .glx .mr-section .mr-cta .mr-btn--light, .glx .mr-section .glx-nacht .mr-btn--light { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; } .glx .mr-section .mr-cta .mr-btn--light:hover, .glx .mr-section .glx-nacht .mr-btn--light:hover { background: #fff; border-color: #fff; color: #0B0B0C; } /* --- 10) Chips: gefuellt statt Umriss-Pille --- */ .glx .mr-chip, .glx .mw-chip { background: #F1F1F3; border-color: transparent; font-weight: 600; color: #26262b; } .glx .mr-chip-price { background: #0B0B0C; color: #fff; border-color: transparent; } /* --- 11) Vertrauens-Zeile als Premium-Proof-Band --- */ .glx .mr-trust { border-top: 1px solid rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(0, 0, 0, .08); padding: 22px 0; background: #FAFAFB; } .glx .mr-trust-item { flex-direction: column; text-align: center; gap: 10px; font-size: .95rem; font-weight: 600; letter-spacing: -.005em; } .glx .mr-trust-item .mr-ico { width: 24px; height: 24px; padding: 9px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 50%; box-sizing: content-box; stroke-width: 1.6; } /* --- 12) Editorial-Eyebrow: Haarlinien-Tick ueber jedem Titel --- */ .glx .mr-section h2 { padding-top: 20px; } .glx .mr-section h2::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px; background: currentColor; opacity: .4; } .glx .mr-cta h2::before { display: none; } /* --- 13) Strecken-Leitkante + Schritt-Nummer als gestaltete Ziffer --- */ .glx .mr-route, .glx .mw-route { box-shadow: inset 3px 0 0 #0B0B0C, 0 1px 2px rgba(14, 14, 16, .04), 0 6px 16px -11px rgba(14, 14, 16, .16); } .glx .mr-route-name { font-size: 1.02rem; letter-spacing: -.01em; } .glx .mr-step, .glx .mw-step { padding: 26px 22px; } .glx .mr-step-num, .glx .mw-step-num { width: 46px; height: 46px; font-size: 1.2rem; font-weight: 800; } .glx .glx-in .mr-step-num { box-shadow: 0 0 0 6px rgba(11, 11, 12, .06); } /* --- 14) Dunkle CTA veredeln: Graphit-Verlauf, mehr Ruhe --- */ html .mr-home .mr-cta { border-radius: 20px; padding: 56px 28px; } @media (min-width: 1024px) { html .mr-home .mr-cta { padding: 80px 56px; } } html .mr-home .mr-cta p { margin-bottom: 32px; } .glx .mr-cta { background: linear-gradient(158deg, #17171b 0%, #050506 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px -24px rgba(0, 0, 0, .55); } .glx .mr-section h2::after { background: linear-gradient(90deg, #0b0b0c 0%, #6a6a70 100%); opacity: 1; } /* --- 15) GELOESCHT am 12.09.2026 (v8, Design-Pruefung) --- Hier stand der dunkle Anker-Abschnitt „So funktioniert es" (neun Zeilen, u. a. `html .mr-home .mr-section:has(.mr-grid--steps) .mr-step { background:#17171A }`). v7 (Abschnitt 6) hat die Schritte am 05.09. wieder weiss als Tafel-Zeilen gebaut, diese Zeilen aber stehen lassen. Sie wogen 0,4,1 bzw. 0,4,2 und schlugen v7 (0,4,0 / 0,4,1): Hintergrund #17171A und weisse Schrift kamen von hier, Innenabstand „22px 0 0" und die schwarze Ziffer von v7. Ergebnis (Inhaber-Foto 12.09.): schwarze Kacheln, Text am Rand, Ziffern 1/2/3 schwarz auf schwarz („schaut scheisse aus"). Die Regeln wurden ERSATZLOS geloescht statt uebermalt — jetzt gilt allein v7. Wache: E:/Taxi/wachen/wache-design-schritte.js wird rot, falls sie zurueckkommen. */ /* ============================================================ GLOBALANE Design v5 — 09.08.2026 (Money-Page-Hero) Inhaber: „einem Fable-Agenten nicht wuerdig — die Website muss grundlegend ein viel professionelleres Design/Struktur haben." Ausloeser war der Kopf der Money-Pages: flaches Leer-Schwarz, dunkle Buttons auf Dunkel, H1 durch die haengende Einblendung unlesbar. Hier bekommt JEDE Landing-Page (.mr-lp) EINEN konsistenten, edlen Kopf — zentral in der Design-Schicht, damit nicht jede der ~120 Seiten ihr eigenes Inline-CSS traegt. Reine CSS-Schicht, kein Bild (kein LCP-Aufschlag), Rechner + Startseite tabu. Die Startseite ist .mr-home (NICHT .mr-lp .mr-hero) und bleibt unberuehrt. */ .glx .mr-lp .mr-hero { position: relative; isolation: isolate; overflow: hidden; /* Tiefe statt Flaeche: sanfter Lichtkegel oben, der ins Tiefschwarz auslaeuft. */ background: radial-gradient(135% 100% at 50% -15%, #24242c 0%, #16161b 46%, #0b0b0e 100%); padding: clamp(76px, 12vw, 132px) 22px clamp(52px, 7vw, 86px); } /* Feiner Schimmer + Bodenvignette fuer Raeumlichkeit. */ .glx .mr-lp .mr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 46% at 50% 0%, rgba(255, 255, 255, .08), transparent 72%), linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .38) 100%); } /* Ein feiner Bordeaux-Faden ganz oben — der Marken-Akzent, sonst nichts Buntes. */ .glx .mr-lp .mr-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, transparent, #7a1f2b 28%, #b0424f 50%, #7a1f2b 72%, transparent); } .glx .mr-lp .mr-hero > * { position: relative; z-index: 1; } .glx .mr-lp .mr-hero h1 { color: #fff; font-size: clamp(30px, 6.2vw, 52px); line-height: 1.08; letter-spacing: -.018em; font-weight: 700; max-width: 16ch; margin: 0 auto; text-wrap: balance; } .glx .mr-lp .mr-hero h1 + p, .glx .mr-lp .mr-hero .mr-sub, .glx .mr-lp .mr-hero > p { color: rgba(255, 255, 255, .82); font-size: clamp(15px, 2.5vw, 18px); line-height: 1.62; max-width: 58ch; margin: 18px auto 0; } /* Buttons mit echter Hierarchie statt drei fast gleicher dunkler Pillen. Primaer = weiss gefuellt (die Fixpreis-Aktion springt heraus), WhatsApp = Gruen, der Rest = Glas mit hellem Rand. */ .glx .mr-lp .mr-hero .mr-btn { border-radius: 11px; font-weight: 700; padding: 14px 24px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .glx .mr-lp .mr-hero .mr-btn-primary { background: #fff !important; color: #111 !important; border-color: #fff !important; box-shadow: 0 10px 34px rgba(0, 0, 0, .4); } .glx .mr-lp .mr-hero .mr-btn-wa { background: #25d366 !important; color: #06210f !important; border-color: #25d366 !important; } .glx .mr-lp .mr-hero .mr-btn:not(.mr-btn-primary):not(.mr-btn-wa) { background: rgba(255, 255, 255, .09) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .34) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .glx .mr-lp .mr-hero .mr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); } /* Die Chip-Zeile direkt unter dem Kopf bekommt Luft und sitzt nicht am Rand. */ .glx .mr-lp .mr-hero + * .mr-chips, .glx .mr-lp .mr-chips { row-gap: 10px; } @media (max-width: 782px) { .glx .mr-lp .mr-hero { padding: clamp(60px, 20vw, 92px) 18px 44px; } .glx .mr-lp .mr-hero h1 { max-width: 20ch; } } /* ============================================================ Design v5b — 09.08.2026 (Struktur + Inhaltsabschnitte der Landing-Pages) ============================================================ */ /* --- Doppel-Kopf weg (Struktur): Landing-Pages tragen ihre eigene H1 im Hero. Die Rechner-Kopfzeile darueber war ein ZWEITER dunkler Block mit anderer Botschaft — auf EN-Seiten sogar auf Deutsch (Inhaber-Screenshot 09.08.). Auf Seiten mit .mr-lp faellt sie weg; die Startseite (kein .mr-lp) behaelt sie samt Foto-Hero. .mw-intro ist reiner Text-Kopf, kein Formular — CSS-only ist der erlaubte Weg. Aeltere Browser ohne :has zeigen sie weiter: kein Schaden. */ .glx body:has(.mr-lp) .mw-intro { display: none; } /* --- Chips-Streifen unter dem Hero --- ⚠️ 21.08.2026, Inhaber-Screenshot von /fr/ am Handy: „das weisse Feld schaut richtig scheisse aus, das habe ich auf mehreren Seiten an mehreren Stellen gesehen." Nachgemessen war es kein Geschmacksurteil, sondern ein Fehler: .mr-glance weiss (#fff), Rahmen #E8E1D4, eigener Schatten .mr-glance-inner darin nochmal Radius + Schatten (v5b, siehe unten) body ebenfalls weiss Also ein WEISSER Kasten mit Rahmen und zwei Schatten auf WEISSEM Grund, eingeklemmt zwischen dem dunklen Hero und dem Abschnitt darunter — ein Rahmen, der nichts umschliesst. Der Rahmenton #E8E1D4 ist ausserdem beige und damit ein Rest der warmen Editorial-Richtung, die der Inhaber im Juli abgelehnt hat (gemessen: es war die letzte warme Farbe der ganzen Seite). Der v5b-Versuch „schwebende Karte statt verlorenem Weissband" hat das Problem verdoppelt statt geloest, weil er den AEUSSEREN Kasten stehen liess. Deshalb hier der umgekehrte Weg: kein Kasten. Die Chips stehen frei auf der Seite, wie in den Ride-Hailing-Apps, an denen sich das Design ausrichtet. Rueckweg: diesen Block loeschen, dann gilt wieder der Stand von v5b. */ .glx .mr-lp .mr-glance, .glx .mr-lp .mr-hero + .mr-glance { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .glx .mr-lp .mr-glance-inner, .glx .mr-lp .mr-hero + .mr-glance .mr-glance-inner { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; } /* ============================================================ Design v6 — 21.08.2026 (Inhaber: „wirkt billig", „zu unruhig", „Kopf und Rechner passen nicht zusammen", „Schrift und Farben") Alle vier Punkte hat er selbst angekreuzt, nachdem er ein Bildschirmfoto von /fr/ geschickt hatte. Vier Eingriffe, mehr nicht: 1) Der Kopfbereich war ein FLACHER dunkler Verlauf ohne Bild. Ein Dienst ab 149 €/Stunde darf nicht aussehen wie eine Taxi-App. Jetzt das vorhandene Fahrer-Foto mit einer Abdunklung, die gerade so stark ist, dass der Text sicher lesbar bleibt (gemessen an der laengsten Ueberschrift, Franzoesisch). 2) Kopf und Rechner waren zwei getrennte Bloecke mit einer harten Kante dazwischen. Jetzt schiebt sich die Rechner-Karte in den Kopf hinein — eine Einheit, wie in den Ride-Hailing-Apps, an denen sich das Design ausrichtet. 3) EIN Kasten-Mass fuer die Seite: ein Radius, ein Schatten, kein Rahmen. 4) Die Ueberschrift war am Handy 23 px — zu klein fuer einen Kopfbereich. ⚠️ Selektor mit `body` davor: eine gebackene Seitenregel schlaegt sonst `.glx .mr-lp .mr-hero`. Live gemessen — ohne `body` greift der Hintergrund nicht. Rueckweg: diesen Block bis zum naechsten Trenner loeschen. */ .glx body .mr-lp .mr-hero { position: relative; padding: 56px 20px 104px !important; background-image: linear-gradient(180deg, rgba(8, 8, 10, .45) 0%, rgba(8, 8, 10, .62) 46%, rgba(8, 8, 10, .90) 100%), url('gl-hero-fahrer.jpg') !important; background-size: cover !important; background-position: center 30% !important; background-repeat: no-repeat !important; } .glx body .mr-lp .mr-hero h1 { font-size: clamp(28px, 8.2vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -.02em; /* v8 12.09.2026: war „0 0 14px" — das nahm der H1 die auto-Raender der Seitenspalte (mr-fix2: max-width 1120 + margin auto). H1 klebte bei x=20, Text/Knoepfe bei x=400. */ margin: 0 auto 14px !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); } .glx body .mr-lp .mr-hero p { font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .88) !important; margin-bottom: 0 !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); } /* Die Merkmale stehen IM dunklen Kopf, nicht als Band darunter. Deshalb helle Pillen — auf Weiss waren sie hellgrau auf weiss und sahen aus wie ein Ladefehler. Nur der Preis bleibt gefuellt: er ist die Aussage, wegen der jemand die Seite geoeffnet hat. */ .glx body .mr-lp .mr-hero + .mr-glance { /* v8 12.09.2026: „-72px 0 0" → „auto": die Chip-Leiste (max 1160) hing links am Rand. */ margin: -72px auto 0 !important; padding: 0 20px !important; position: relative; z-index: 2; } .glx .mr-lp .mr-glance .mr-chip { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff; box-shadow: none; } .glx .mr-lp .mr-glance .mr-chip-price { background: #fff; border-color: #fff; color: #0B0B0C; font-weight: 700; } /* Der Rechner als Fortsetzung des Kopfes, nicht als naechster Block. */ .glx body .mr-lp #mrwiz, .glx body #mrwiz { margin-top: -26px !important; position: relative; z-index: 3; border-radius: 20px !important; border: 0 !important; box-shadow: 0 20px 56px rgba(8, 8, 12, .26) !important; } /* --- Abschnitts-Rhythmus: mehr Luft, sichtbare Wechselbaender --- */ .glx .mr-lp .mr-sec { padding: clamp(52px, 7.5vw, 88px) 20px; } .glx .mr-lp .mr-sec-alt { background: #F1F1F3; } /* --- Editorial-Typo wie auf der Startseite (v4): grosse Titel, Tinten-Text --- */ /* ⚠️ !important noetig: Die Seiten backen eigene Inline-Styles mit !important (gemessen auf den EN-Seiten: `.mr-lp h2{font-size:20px!important}`) — ohne eigenes !important verliert die zentrale Schicht gegen ~120 gebackene Seiten. */ .glx .mr-lp .mr-sec h2 { font-size: clamp(1.6rem, 4vw, 2.3rem) !important; line-height: 1.12 !important; letter-spacing: -.02em; font-weight: 700; color: #101014; max-width: 28ch; margin: 0 0 16px !important; } .glx .mr-lp .mr-sec h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: #7a1f2b; margin: 0 0 14px; } /* Der dunkle Abschluss-Abschnitt (Anfrage/CTA) traegt helle Titel — dort weisser Tick. */ .glx .mr-lp .mr-sec:last-of-type h2 { max-width: none; } .glx .mr-lp .mr-sec p, .glx .mr-lp .mr-sec li { color: #26262a; line-height: 1.68; } .glx .mr-lp .mr-wrap > p { max-width: 70ch; } /* --- FAQ: aus nackten h3+p werden ruhige, greifbare Bloecke --- */ .glx .mr-lp .mr-sec h3 { margin: 26px 0 8px; padding-left: 14px; border-left: 3px solid #7a1f2b; font-size: 1.06rem; font-weight: 700; color: #101014; line-height: 1.35; } .glx .mr-lp .mr-sec h3 + p { margin-top: 0; padding-left: 17px; } /* --- Anfrage-Formular wieder sichtbar (Inhaber-Wunsch 09.08.2026) --- Die Alt-Regel `.mr-lp .mr-anfrage{display:none}` (aus der Rechner-nach-oben-Zeit) versteckte das Kontaktformular auf ALLEN Landing-Pages — der neue „Anfrage"-Knopf der Handy-Leiste sprang deshalb ins Leere. Hier gezielt aufgehoben. */ .glx .mr-lp .mr-anfrage { display: block !important; } /* ⚠️ Der Anfrage-Abschnitt ist DUNKEL — die Editorial-Tinte von oben (#101014) machte seine Überschrift schwarz-auf-schwarz (Eigentor beim v5b-Deploy, sofort gefunden). Dunkle Abschnitte bekommen helle Titel und einen helleren Bordeaux-Tick. */ .glx .mr-lp .mr-anfrage h2 { color: #fff !important; } .glx .mr-lp .mr-anfrage h2::before { background: #b0424f; } .glx .mr-lp .mr-anfrage p { color: rgba(255, 255, 255, .85); } /* --- Verwandt-Kasten („Das koennte auch passen") an die Handschrift anpassen --- */ .glx .mr-verwandt { background: #fff; } .glx .mr-verwandt a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122, 31, 43, .35); } .glx .mr-verwandt a:hover { text-decoration-color: #7a1f2b; color: #101014; } @media (max-width: 782px) { .glx .mr-lp .mr-sec { padding: 44px 18px; } .glx .mr-lp .mr-sec h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); } } /* ============================================================ GLOBALANE Design v7 — 05.09.2026 — "Das Handwerk des Chauffeurs" Grundlage: Entwurf C (Sieger bei beiden Richtern). Dazu, was beide Richter aus A/B in jedem Fall wollten: Fahrzeugkarten (A4/B5), Schritte wieder weiss (A6/B7), Strecken- und Warum-Listen (A7/A8/B6/B8), CTA weiss mit schwarzem Knopf (A9), Ersatzschrift + Zwei-Gewichte-Typo (B2), Trust-Zeile als Tabelle mit fester Zeilenhoehe (A3/B4), Ueber uns (A12/B12/C11), Formular (C10, nur CSS). Regeln: alles unter .glx, mobil zuerst, keine opacity-Animation, keine Regel an #mrwiz-wrap / #mrwiz / .mrc-* (nur die Kamerafahrt auf .mw-intro::before wird abgestellt — Praezedenz v2/v4, beide Richter). Feste Hoehen, wo die Schicht die Form aendert. Der Block steht am ENDE der Datei und gewinnt bei Gleichstand durch Position; wo Altregeln gleich schwer wiegen und frueh greifen muessen: !important. VORAUSSETZUNG (Runde 1, Schritt 0): EINE Zeile in globalane-core.php — add_action('wp_head', function(){ echo ''; }, 0); Ohne sie greift jede Geometrieregel erst bei DOMContentLoaded = Layout-Sprung ueber die ganze Seite (Hauptquelle des CLS 1,15). AUFRAEUMEN (Runde 2, nach Messung): v2-Bloecke 0b(Animation)/1/2/3/4/5/6/7/9 + Sicherheitsnetz, v4-Bloecke 4/7/9(21.08.-Regel)/11/12/13/14/15, v5 ::before/::after, v6 Text-Schatten und h2::before/h3-Rand loeschen — dann entfallen die !important. ============================================================ */ /* ---- 0) Ersatzschrift gegen den Font-Swap-Sprung (B2) ---- @font-face laesst sich nicht scopen; sie wirkt nur, wo der Stapel sie nennt. ⚠️ Die vier Werte sind Startwerte — vor dem Deploy mit fontaine/capsize gegen DM Sans 400 messen; falsche Werte machen den Swap sichtbar statt unsichtbar. */ @font-face { font-family: "DM Sans Ersatz"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 103%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; } /* ---- 1) Fundament: Ruhe, eine Schrift, Tafel-Ziffern ---- Die alten JS-Bloecke vergeben weiterhin glx-r / glx-hero-go / glx-kb / glx-nacht, bis sie geloescht sind. Diese Regeln machen jede dieser Klassen wirkungslos — mit !important, weil die Enthuellung sonst opacity:0 als Startzustand behaelt. */ .glx .glx-r, .glx .glx-r.glx-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; will-change: auto !important; } .glx .glx-hero-el, .glx .glx-hero-el.glx-hero-go { animation: none !important; transform: none !important; opacity: 1 !important; } /* Ken-Burns aus — NICHT transform:none: ein Fahrzeugfoto traegt gebacken scale(.6) (c-class). */ .glx .glx-kb, .glx .glx-kb-b, .glx .mr-fleet-img img { animation: none !important; will-change: auto !important; } .glx .glx-nacht { isolation: auto; overflow: visible; } .glx .glx-nacht::before, .glx .glx-nacht::after { content: none !important; animation: none !important; } .glx .glx-in.mr-card::after, .glx .mr-card::after { content: none !important; animation: none !important; } /* Kamerafahrt auf dem Foto-Kopf (liegt im Rechner-Umschlag): nur die Animation, keine Geometrie — Vorgabe 3. Text-Schatten weg (beide Richter tolerieren das). */ .glx body.home .mw-intro::before { animation: none !important; transform: none !important; will-change: auto !important; } .glx body.home .mw-intro .mw-t { text-shadow: none; } /* Schritt-Nummern: Ring, Halo, Skalierung aus */ .glx .mr-home .mr-step-num, .glx .mr-home .glx-r .mr-step-num, .glx .mr-home .glx-in .mr-step-num { transform: none !important; box-shadow: none !important; transition: none !important; } /* Hover-Antworten nur als Farbwechsel — keine Anhebung, kein Schatten, kein Filter */ .glx .mr-home .mr-card, .glx .mr-home .mr-route, .glx .mr-home .mr-step, .glx .mr-home .mr-btn, .glx .mr-home .mr-chip, .glx .mr-lp .mr-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .glx .mr-home .mr-card:hover, .glx .mr-home .mr-card:active, .glx .mr-home .mr-route:hover, .glx .mr-home .mr-btn:hover, .glx .mr-home .mr-btn:active, .glx .mr-home .mr-chip:hover, .glx .mr-home .mr-chip:active, .glx .mr-lp .mr-btn:hover, .glx .mr-lp .mr-hero .mr-btn-primary:hover { transform: none !important; filter: none !important; box-shadow: none !important; opacity: 1; } /* Eine Schriftfamilie fuer die ganze Seite. Footer und Legal-Leiste setzen heute Arial hart — Farben des Footers bleiben, nur die Familie wird dieselbe. */ .glx .mr-home, .glx .mr-lp, .glx .mr-fl, .glx .mr-fl *, .glx .mr-legalbar, .glx .mr-legalbar * { font-family: "DM Sans", "DM Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .glx .mr-home, .glx .mr-lp { font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tafel-Ziffern: ueberall, wo Zahlen stehen (Preise, Telefon, Storno-Prozent, GISA) */ .glx .mr-home .mr-price, .glx .mr-home .mr-trust-item, .glx .mr-home .mr-cta-tel, .glx .mr-home .mr-step-num, .glx .mr-lp .mr-facts, .glx .mr-legalbar, .glx a[href^="tel:"] { font-variant-numeric: tabular-nums; } /* ---- 2) Kopf: H1 linksbuendig als Tafel-Titel; Telefon im Theme-Kopf lesbar ---- Inline: .mr-home-h1 800 zentriert clamp(21-32px) (0,1,0) — hier (0,2,0). */ .glx .mr-home-h1 { text-align: left; max-width: 1120px; margin: 28px auto 18px; padding: 0 20px; font-size: clamp(26px, 5.6vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #0B0B0C; text-wrap: balance; } /* Nur Farbe/Form, kein Text (Richter: JS-Umformatierung der Nummer nur nach Freigabe). ⚠️ v8 12.09.2026: Hier stand Telefon #0B0B0C und E-Mail #55555B — geschrieben fuer einen WEISSEN Kopf. Der Kopf ist schwarz: das war schwarz auf schwarz (1,0:1) bzw. 2,6:1 und nur durch ein Inline-!important (mr-headerfix) verdeckt. Jetzt hell, damit die Lesbarkeit nicht mehr an der Inline-Regel haengt. Die E-Mail-Helligkeit selbst: v8 Abschnitt 3. */ .glx #header_contents a[href^="tel:"], .glx .sticky_header_area a[href^="tel:"] { color: #fff; font-weight: 600; white-space: nowrap; letter-spacing: .01em; } .glx #header_contents a[href^="mailto:"], .glx .sticky_header_area a[href^="mailto:"] { color: rgba(255, 255, 255, .78); white-space: nowrap; } .glx #header_contents a[href^="tel:"]:hover, .glx .sticky_header_area a[href^="tel:"]:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- 3) DIE Tafel: Trust-Zeile als Tabelle mit fester Zeilenhoehe ---- Runde 1 = weisse Fassung (Richter 2: schwarze Tafel nur nach Sichtfreigabe). Feste Hoehen: Handy 2x2 a 56 px = 112 px + Linien; Desktop 1x4 a 64 px. Damit ist die Hoehe VOR dem ersten Paint bekannt (Klasse im head) — kein Nachruecken. v4 (0,2,0) setzte Spalte + Icon-Kreis + #FAFAFB; hier (0,3,0)/(0,4,0). */ .glx .mr-home .mr-trust { background: #fff; border-top: 2px solid #0B0B0C; border-bottom: 1px solid rgba(11, 11, 12, .14); padding: 0; } .glx .mr-home .mr-trust-grid { grid-template-columns: 1fr 1fr; gap: 0; } .glx .mr-home .mr-trust-item { flex-direction: row; align-items: center; text-align: left; gap: 10px; min-height: 56px; padding: 6px 0; margin: 0; border: 0; font-size: .9rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #0B0B0C; } .glx .mr-home .mr-trust-item:nth-child(odd) { padding-right: 12px; border-right: 1px solid rgba(11, 11, 12, .14); } .glx .mr-home .mr-trust-item:nth-child(even) { padding-left: 14px; } .glx .mr-home .mr-trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(11, 11, 12, .14); } .glx .mr-home .mr-trust-item .mr-ico { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; box-sizing: content-box; flex: none; stroke: currentColor; stroke-width: 1.75; fill: none; } @media (min-width: 640px) { .glx .mr-home .mr-trust-grid { grid-template-columns: repeat(4, 1fr); } .glx .mr-home .mr-trust-item:nth-child(n) { min-height: 64px; padding: 0 16px; border: 0; border-left: 1px solid rgba(11, 11, 12, .14); font-size: .92rem; } .glx .mr-home .mr-trust-item:first-child { border-left: 0; padding-left: 0; } .glx .mr-home .mr-trust-item:last-child { padding-right: 0; } } @media (min-width: 1024px) { .glx .mr-home .mr-trust-item:nth-child(n) { font-size: 1rem; min-height: 72px; } } /* Schwarze Anzeigetafel (Idee C) — Runde 2, EIN Schalter: html.glx.glx-tafel (dieselbe wp_head-Zeile). Nur Farbwerte tauschen, Hoehen bleiben identisch = kein Sprung. */ .glx.glx-tafel .mr-home .mr-trust { background: #0B0B0C; color: #fff; border-top: 0; border-bottom: 0; } .glx.glx-tafel .mr-home .mr-trust-item { color: #fff; border-color: rgba(255, 255, 255, .16); } .glx.glx-tafel .mr-home .mr-trust-item:nth-child(odd) { border-right-color: rgba(255, 255, 255, .16); } .glx.glx-tafel .mr-home .mr-trust-item:nth-child(-n+2) { border-bottom-color: rgba(255, 255, 255, .16); } @media (min-width: 640px) { .glx.glx-tafel .mr-home .mr-trust-item:nth-child(n) { border-left-color: rgba(255, 255, 255, .16); } } /* ---- 4) Abschnittstitel ohne Tick und Unterlinie, Untertitel links (C12) ---- v4 html .mr-home .mr-section h2 (0,2,2) und .glx .mr-section h2 (0,2,1) — hier (0,3,1). */ .glx .mr-home .mr-section h2 { position: static; padding: 0; margin: 0 0 12px; font-size: clamp(1.6rem, 4.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: #0B0B0C; max-width: 24ch; text-align: left; text-wrap: balance; } .glx .mr-home .mr-section h2::before, .glx .mr-home .mr-section h2::after, .glx .mr-home h2.glx-in::after { content: none !important; display: none; } .glx .mr-home .mr-sub { color: #55555B; text-align: left; max-width: 56ch; margin-bottom: 28px; text-wrap: pretty; } .glx .mr-home .mr-section--seo p { color: #3F3F43; text-align: left; max-width: 60ch; /* v8: 68ch ergab ~86 Zeichen je Zeile */ } /* Wechselbaender: weiss mit Haarlinie oben (A6, beide Richter); nur das Formular behaelt eine Flaeche. v4 html .mr-home .mr-section--alt (0,2,1) < hier (0,3,0). */ .glx .mr-home .mr-section--alt { background: #fff; box-shadow: none; border-top: 1px solid rgba(11, 11, 12, .12); } .glx .mr-home #anfrage.mr-section--alt { background: #F4F4F6; border-top: 0; } /* ---- 5) Fuhrpark: vier stille Fotokarten (C5 + A4/B5, ohne aspect-ratio auf dem Wrapper und ohne transform:none auf dem img — Richter 2) ---- Das img traegt inline width/height + aspect-ratio 16/9: Hoehe ist reserviert. */ .glx .mr-home .mr-grid--fleet { gap: 16px; grid-template-columns: 1fr; } .glx .mr-home .mr-card:not(.mr-route):not(.mr-why) { background: #fff; border: 1px solid rgba(11, 11, 12, .14); border-radius: 12px; box-shadow: none; overflow: hidden; } .glx .mr-home .mr-card:not(.mr-route):not(.mr-why):hover { border-color: #0B0B0C; box-shadow: none; } .glx .mr-home .mr-card:not(.mr-route):not(.mr-why):hover .mr-card-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .glx .mr-home .mr-fleet-img { background: #F4F4F6; border-bottom: 1px solid rgba(11, 11, 12, .08); } .glx .mr-home .mr-card-body { padding: 16px 18px 18px; gap: 6px; } .glx .mr-home .mr-card-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.012em; color: #0B0B0C; } .glx .mr-home .mr-card-desc { color: #3F3F43; font-size: .9rem; line-height: 1.5; } .glx .mr-home .mr-specs { color: #55555B; } .glx .mr-home .mr-card-foot { border-top: 1px solid rgba(11, 11, 12, .12); padding-top: 12px; margin-top: auto; color: #55555B; } /* Preis: Tinte statt Bordeaux, 700 statt 800, tabellarisch. v4 gleicher Selektor (0,4,0), spaeter gewinnt. */ .glx .mr-home .mr-card-foot .mr-price { color: #0B0B0C; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .glx .mr-home .mr-price small { color: #55555B; font-weight: 500; font-size: .75rem; letter-spacing: 0; } /* Pfeil am Kartenfuss ist Deko ohne Information */ .glx .mr-home .mr-card-foot .mr-ico--s { display: none; } @media (min-width: 640px) { .glx .mr-home .mr-grid--fleet { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .glx .mr-home .mr-grid--fleet { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* ---- 6) So funktioniert es: weiss statt invertiert, Ziffern als Tafel-Zeilen (C6) ---- v4: html .mr-home .mr-section--alt:has(.mr-grid--steps) (0,3,1) — hier (0,4,0). Browser ohne :has zeigen die Inline-Fassung (weisse Karten) — kein Schaden. */ .glx .mr-home .mr-section--alt:has(.mr-grid--steps) { background: #fff; color: #0B0B0C; box-shadow: none; } .glx .mr-home .mr-section:has(.mr-grid--steps) h2 { color: #0B0B0C; } .glx .mr-home .mr-section:has(.mr-grid--steps) .mr-sub { color: #55555B; } .glx .mr-home .mr-grid--steps { gap: 0; grid-template-columns: 1fr; border-top: 1px solid #0B0B0C; } .glx .mr-home .mr-grid--steps .mr-step { background: transparent; border: 0; border-bottom: 1px solid rgba(11, 11, 12, .14); border-radius: 0; box-shadow: none; padding: 20px 4px 22px; display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; align-items: start; } .glx .mr-home .mr-grid--steps .mr-step-num { grid-row: 1 / 3; width: auto; height: auto; margin: 0; background: transparent; color: #0B0B0C; border-radius: 0; box-shadow: none; justify-content: flex-start; font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; } .glx .mr-home .mr-grid--steps .mr-step h3 { grid-column: 2; color: #0B0B0C; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; } .glx .mr-home .mr-grid--steps .mr-step p { grid-column: 2; color: #55555B; font-size: .92rem; line-height: 1.5; margin: 0; } @media (min-width: 768px) { .glx .mr-home .mr-grid--steps { grid-template-columns: repeat(3, 1fr); column-gap: 32px; } .glx .mr-home .mr-grid--steps .mr-step { border-bottom: 0; padding: 22px 0 0; grid-template-columns: 1fr; row-gap: 10px; } .glx .mr-home .mr-grid--steps .mr-step-num { grid-row: auto; font-size: 2rem; } .glx .mr-home .mr-grid--steps .mr-step h3, .glx .mr-home .mr-grid--steps .mr-step p { grid-column: 1; } } /* ---- 7) Beliebte Strecken: Tafel-Zeilen mit Tuer-zu-Tuer-Marke (C4 — das Erinnerbare) ---- Markup (Z. 305): a.mr-card.mr-route > span.mr-route-name (> span.mr-route-tag) + span.mr-route-right (> .mr-price + svg). .mr-route-name ist Flex-Kind (blockifiziert) — position:relative + padding-left tragen die Marke. Inline setzt 2/3 Spalten (0,1,0 / 0,2,0) — hier (0,3,0) mit eigenen Breakpoints. */ .glx .mr-home .mr-grid--routes { gap: 0; grid-template-columns: 1fr; border-top: 1px solid #0B0B0C; } .glx .mr-home .mr-card.mr-route { background: #fff; border: 0; border-bottom: 1px solid rgba(11, 11, 12, .14); border-radius: 0; box-shadow: none; padding: 16px 4px; min-height: 66px; overflow: visible; gap: 16px; } .glx .mr-home .mr-card.mr-route:hover { background: #F4F4F6; border-color: rgba(11, 11, 12, .14); } .glx .mr-home .mr-card.mr-route:focus-visible { outline: 2px solid #0B0B0C; outline-offset: -2px; border-radius: 4px; } .glx .mr-home .mr-route-name { position: relative; padding-left: 44px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: #0B0B0C; line-height: 1.35; } /* Die Marke: Startpunkt schwarz — Linie — Zielpunkt Bordeaux. Der einzige Bordeaux-Punkt der Seite. */ .glx .mr-home .mr-route-name::before { content: ""; position: absolute; left: 3px; top: .6em; width: 26px; height: 2px; background: #0B0B0C; } .glx .mr-home .mr-route-name::after { content: ""; position: absolute; left: 0; top: calc(.6em - 2px); width: 6px; height: 6px; border-radius: 50%; background: #0B0B0C; box-shadow: 26px 0 0 #7A1F2B; } .glx .mr-home .mr-route:hover .mr-route-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .glx .mr-home .mr-route-tag { color: #55555B; font-size: .82rem; font-weight: 500; margin-top: 2px; } .glx .mr-home .mr-route-right { gap: 0; } .glx .mr-home .mr-route-right .mr-price { color: #0B0B0C; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; min-width: 6ch; text-align: right; } .glx .mr-home .mr-route-right .mr-ico--s { display: none; } .glx .mr-home .mr-note { color: #55555B; font-size: .85rem; margin-top: 14px; } @media (min-width: 1024px) { .glx .mr-home .mr-grid--routes { grid-template-columns: 1fr 1fr; column-gap: 48px; } .glx .mr-home .mr-card.mr-route { padding: 18px 4px; } } /* ---- 8) Warum GLOBALANE: sechs Zeilen mit Haarlinie statt sechs Karten (C7) ---- */ .glx .mr-home .mr-grid--why { gap: 0; grid-template-columns: 1fr; border-top: 1px solid #0B0B0C; } .glx .mr-home .mr-card.mr-why { background: transparent; border: 0; border-bottom: 1px solid rgba(11, 11, 12, .14); border-radius: 0; box-shadow: none; padding: 18px 4px; display: flex; flex-direction: row; gap: 14px; align-items: flex-start; overflow: visible; } .glx .mr-home .mr-card.mr-why:hover { border-color: rgba(11, 11, 12, .14); box-shadow: none; } .glx .mr-home .mr-why > .mr-ico { width: 20px; height: 20px; flex: none; margin-top: 3px; stroke: #0B0B0C; stroke-width: 1.75; fill: none; } .glx .mr-home .mr-why h3 { font-size: 1rem; font-weight: 700; color: #0B0B0C; margin: 0 0 4px; } .glx .mr-home .mr-why p { color: #55555B; font-size: .92rem; line-height: 1.5; margin: 0; } @media (min-width: 768px) { .glx .mr-home .mr-grid--why { grid-template-columns: 1fr 1fr; column-gap: 48px; } .glx .mr-home .mr-card.mr-why { padding: 20px 4px; } } /* ---- 9) Chips als Umriss-Pille, Knoepfe ein Mass (C12 / B9 ohne WhatsApp-Entfaerbung) ---- */ .glx .mr-home .mr-chips { gap: 10px; } .glx .mr-home a.mr-chip { background: #fff; border: 1.5px solid rgba(11, 11, 12, .22); color: #0B0B0C; border-radius: 999px; font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; } .glx .mr-home a.mr-chip:hover, .glx .mr-home a.mr-chip:focus-visible { background: #0B0B0C; color: #fff; border-color: #0B0B0C; } .glx .mr-home .mr-chip-price { background: #0B0B0C; color: #fff; border-color: #0B0B0C; } .glx .mr-home .mr-btn { border-radius: 10px; min-height: 48px; font-size: 15px; font-weight: 700; letter-spacing: 0; box-shadow: none; } .glx .mr-home .mr-btn--wa { box-shadow: none; } /* ---- 10) Abholschild: der CTA als weisses Schild mit schwarzem Rahmen (C8-CSS, A9) ---- Ersetzt Graphit-Verlauf, Schimmer, Scheinwerfer (v4 Nr. 14 / v2 Nr. 6). ⚠️ Knopf: die 21.08.-Regel (.glx .mr-section .mr-cta .mr-btn--light, 4 Klassen) macht den Knopf weiss-transparent — auf dem weissen Schild waere er unsichtbar (Schwarz-auf-Schwarz spiegelverkehrt). Hier 5 Klassen UND spaeter. Vor Deploy getComputedStyle messen. */ .glx .mr-home .mr-cta, .glx .mr-home .mr-cta.glx-nacht { background: #fff; color: #0B0B0C; border: 2px solid #0B0B0C; border-radius: 8px; box-shadow: none; padding: 36px 22px; text-align: left; isolation: auto; overflow: visible; } .glx .mr-home .mr-cta h2 { color: #0B0B0C; font-size: clamp(1.9rem, 6.2vw, 3rem); letter-spacing: -.03em; line-height: 1.02; margin: 0 0 12px; padding: 0; max-width: 14ch; } /* v8 12.09.2026: `:not(.mr-cta-tel)` — die Telefonzeile ist auch ein

; diese Regel (0,3,1) schlug `.mr-cta-tel {margin:18px 0 0}` (0,3,0), die Zeile klebte ohne Abstand an den Knoepfen. */ .glx .mr-home .mr-cta p:not(.mr-cta-tel) { color: #3F3F43; margin: 0 0 24px; max-width: 48ch; font-size: 1rem; } .glx .mr-home .mr-cta-btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: flex-start; } .glx .mr-home .mr-section .mr-cta .mr-btn--light, .glx .mr-home .mr-section .glx-nacht .mr-btn--light { background: #0B0B0C; border: 1.5px solid #0B0B0C; color: #fff; border-radius: 10px; min-height: 52px; box-shadow: none; justify-content: center; } .glx .mr-home .mr-section .mr-cta .mr-btn--light:hover, .glx .mr-home .mr-section .glx-nacht .mr-btn--light:hover { background: #242427; border-color: #242427; color: #fff; } .glx .mr-home .mr-cta .mr-btn--light .mr-ico--s { display: none; } /* WhatsApp bleibt gruen gefuellt (Klickweg Nr. 1) — nur flach und gleiches Mass */ .glx .mr-home .mr-cta .mr-btn--wa { border-radius: 10px; min-height: 52px; box-shadow: none; justify-content: center; } .glx .mr-home .mr-cta-tel { color: #55555B; margin: 18px 0 0; font-size: .95rem; } .glx .mr-home .mr-cta-tel a { color: #0B0B0C; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; /* v8: Nummer brach am Handy mitten in der Zahl um */ } .glx .mr-home .mr-cta a:focus-visible { outline: 2px solid #0B0B0C; outline-offset: 3px; box-shadow: none; } @media (min-width: 640px) { .glx .mr-home .mr-cta { padding: 56px 48px; } .glx .mr-home .mr-cta-btns { flex-direction: row; align-items: center; } .glx .mr-home .mr-cta .mr-btn { min-width: 200px; } } /* Zahlungsarten-Zeile im Schild — wird NUR gerendert, wenn das Plugin window.GL_BEWEIS liefert (Runde 2, nach Freigabe). Feste Mindesthoehe, damit nichts nachrueckt. */ .glx .glx-zahlung { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 48px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(11, 11, 12, .14); font-size: .82rem; color: #55555B; line-height: 1.3; } .glx .glx-zahlung span { display: inline-block; padding: 4px 9px; border: 1px solid rgba(11, 11, 12, .22); border-radius: 6px; color: #0B0B0C; font-weight: 600; white-space: nowrap; } .glx .glx-zahlung .glx-zahlung-t { border: 0; padding: 0; font-weight: 500; color: #55555B; margin-right: 4px; white-space: normal; } /* ---- 11) Anfrageformular: Felder wie Tafel-Zeilen, schwarzer Sendeknopf (C10, nur CSS) ---- Bootstrap-Raster des CF7-Formulars bleibt. 16 px verhindert den iOS-Zoom. */ .glx #anfrage .mr-form-wrap { max-width: 640px; } .glx #anfrage .mr-form-wrap h2 { text-align: left; } .glx #anfrage .mr-form-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .glx #anfrage .mr-form-wrap textarea, .glx #anfrage .mr-form-wrap select { width: 100%; border: 1.5px solid rgba(11, 11, 12, .22); border-radius: 8px; background: #fff; color: #0B0B0C; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; box-shadow: none; transition: border-color .15s ease; } .glx #anfrage .mr-form-wrap input:focus, .glx #anfrage .mr-form-wrap textarea:focus, .glx #anfrage .mr-form-wrap select:focus { border-color: #0B0B0C; outline: 2px solid #0B0B0C; outline-offset: 1px; } .glx #anfrage .mr-form-wrap ::placeholder { color: #8A8A90; } .glx #anfrage .mr-form-wrap input[type="submit"], .glx #anfrage .mr-form-wrap button[type="submit"] { width: 100%; min-height: 52px; background: #0B0B0C; color: #fff; border: 0; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: none; } .glx #anfrage .mr-form-wrap input[type="submit"]:hover, .glx #anfrage .mr-form-wrap button[type="submit"]:hover { background: #242427; } .glx #anfrage .mr-form-wrap input[type="submit"]:focus-visible, .glx #anfrage .mr-form-wrap button[type="submit"]:focus-visible { outline: 2px solid #0B0B0C; outline-offset: 3px; } .glx #anfrage .wpcf7-not-valid-tip { color: #7A1F2B; font-size: .85rem; } .glx #anfrage .wpcf7-response-output { border: 1.5px solid #0B0B0C; border-radius: 8px; padding: 12px 14px; margin: 16px 0 0; } @media (min-width: 640px) { .glx #anfrage .mr-form-wrap input[type="submit"], .glx #anfrage .mr-form-wrap button[type="submit"] { width: auto; padding: 0 36px; } } /* Betreiber-Zeile vor dem Formular — nur mit window.GL_BEWEIS (Runde 2). Feste Mindesthoehe. */ .glx .glx-betreiber { max-width: 640px; margin: 0 auto 22px; min-height: 48px; border-top: 1px solid #0B0B0C; border-bottom: 1px solid rgba(11, 11, 12, .14); padding: 12px 4px; display: grid; grid-template-columns: 1fr; gap: 6px; font-size: .88rem; line-height: 1.45; color: #3F3F43; text-align: left; font-variant-numeric: tabular-nums; } .glx .glx-betreiber b { color: #0B0B0C; font-weight: 700; } .glx .glx-betreiber .glx-google { color: #0B0B0C; font-weight: 600; text-decoration: none; } .glx a.glx-google:hover { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 640px) { .glx .glx-betreiber { grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; } } /* ---- 12) Ueber uns / alle .mr-lp-Seiten: ein Foto, Betreiberdaten als Tafel, Bordeaux-Chrome und Beige weg ---- (C11 + A12/B12). Erster Kopf: Foto bleibt (v6, Inhaber), Ausrichtung UNVERAENDERT (Wrap-Breite der LPs ungemessen — Richter 2); nur Schimmer, Bordeaux-Faden, Text-Schatten, Glas und Anhebung weg. Zweiter Kopf (der mit h2, Z. 319, Geschwister — verifiziert): kein zweites Foto, flaches Schwarz, kleiner. !important nur, wo v6/Inline selbst !important backen. */ .glx .mr-lp .mr-hero::before, .glx .mr-lp .mr-hero::after { content: none !important; } .glx body .mr-lp .mr-hero h1, .glx body .mr-lp .mr-hero p { text-shadow: none; } .glx body .mr-lp .mr-hero:has(> h2:first-child) { background-image: none !important; background-color: #0B0B0C !important; padding: 44px 20px 48px !important; } /* v8 12.09.2026: margin „0 0 14px" → „0 auto 14px" und nur das direkte Kind — sonst stand die H2 des Abschluss-Bands bei x=20, der Text darunter bei x=400. */ .glx body .mr-lp .mr-hero:has(> h2:first-child) > h2 { font-size: clamp(24px, 3.2vw, 33px) !important; line-height: 1.15 !important; margin: 0 auto 14px !important; text-shadow: none; } .glx .mr-lp .mr-hero .mr-btn { border-radius: 10px; box-shadow: none; } .glx .mr-lp .mr-hero .mr-btn:not(.mr-btn-primary):not(.mr-btn-wa) { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Abschnitte: kein Bordeaux-Tick (v6) und keine Bordeaux-Unterlinie (Inline Z. 459), kein Bordeaux-Rand an h3 */ .glx .mr-lp .mr-sec h2 { padding-bottom: 0; color: #0B0B0C; } .glx .mr-lp .mr-sec h2::before, .glx .mr-lp .mr-sec h2::after { content: none !important; display: none; } .glx .mr-lp .mr-sec h3 { border-left: 0; padding-left: 0; color: #0B0B0C; } .glx .mr-lp .mr-sec h3 + p { padding-left: 0; } .glx .mr-lp .mr-sec ul li::before { color: #0B0B0C; } /* v8 12.09.2026: `:not(.mr-anfrage)` ergaenzt. Ohne sie faerbte diese Zeile (0,3,1, spaeter) auch den DUNKLEN Anfrage-Abschnitt #3F3F43 auf #0E0E12 (Kontrast 1,84) — sie schlug die helle Regel `.glx .mr-lp .mr-anfrage p` aus v5b bei Gleichstand durch Position. */ .glx .mr-lp .mr-sec:not(.mr-anfrage) p, .glx .mr-lp .mr-sec:not(.mr-anfrage) li { color: #3F3F43; } /* Wofuer wir stehen: Zeilen statt Karten */ .glx .mr-lp .mr-about-grid { gap: 0; border-top: 1px solid #0B0B0C; margin: 8px 0 0; } .glx .mr-lp .mr-vcard { background: transparent; border: 0; border-bottom: 1px solid rgba(11, 11, 12, .14); border-radius: 0; box-shadow: none; padding: 18px 4px; } .glx .mr-lp .mr-vcard h3 { margin: 0 0 6px; } @media (min-width: 768px) { .glx .mr-lp .mr-about-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } } /* Beige-Chips (abgelehnte Editorial-Richtung) -> Umriss wie auf der Startseite */ .glx .mr-lp ul.mr-chips li { background: #fff; border: 1.5px solid rgba(11, 11, 12, .22); color: #0B0B0C; font-weight: 600; } /* Kontakt & Betreiber als Tafel: Label grau links, Wert schwarz rechts, tabellarisch */ .glx .mr-lp ul.mr-facts { border-top: 1px solid #0B0B0C; margin-top: 10px; } .glx .mr-lp .mr-facts li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 4px; border-bottom: 1px solid rgba(11, 11, 12, .14); font-size: 15.5px; } .glx .mr-lp .mr-facts li:last-child { border-bottom: 1px solid rgba(11, 11, 12, .14); } .glx .mr-lp .mr-facts strong { display: block; min-width: 0; color: #55555B; font-weight: 500; font-size: .85rem; } .glx .mr-lp .mr-facts a { color: #0B0B0C; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 11, 12, .3); } @media (min-width: 640px) { .glx .mr-lp .mr-facts li { grid-template-columns: 160px 1fr; align-items: baseline; } .glx .mr-lp .mr-facts strong { font-size: 15.5px; } } .glx .mr-verwandt a { text-decoration-color: rgba(11, 11, 12, .35); } .glx .mr-verwandt a:hover { text-decoration-color: #0B0B0C; color: #0B0B0C; } /* ---- 13) Ruhe, wo verlangt: keine Uebergaenge — ohne den Rechner (explizite Liste, kein Stern) ---- */ @media (prefers-reduced-motion: reduce) { .glx .mr-home .mr-card, .glx .mr-home .mr-route, .glx .mr-home .mr-step, .glx .mr-home .mr-btn, .glx .mr-home .mr-chip, .glx .mr-lp .mr-btn, .glx #anfrage .mr-form-wrap input, .glx #anfrage .mr-form-wrap textarea, .glx #anfrage .mr-form-wrap select { transition: none !important; } } /* ============================================================ v8 — Design-Pruefung 12.09.2026 Anlass: drei Inhaber-Fotos („So funktioniert es" schwarz, „Deutschv" im Portal, Startseiten-Kopf „zusammengepresst") + Auftrag „Design ueberpruefen Desktop und Mobile". Sechs Pruefer haben Startseite, Landingpages, Sprachen, Portal/Formulare, Textseiten und Handy gemessen; hier stehen nur Befunde, die am Code bestaetigt sind. Wo eine ALTE Regel die Ursache war, wurde sie an ihrer Stelle geloescht oder korrigiert (v4 Block 15, v6 H1/Chips, v7 Kopf-Farben, CTA-Telefon, .mr-sec p) — dieser Block ergaenzt nur, was es noch nicht gab. Linie unveraendert: Schwarz-Weiss, Primaer #0B0B0C, Bordeaux nur Mikro-Akzent, keine Animation, keine Regel an Formularfeldern/IDs/Ereignissen des Rechners. !important nur dort, wo die Gegenregel selbst !important oder ein style-Attribut ist — jeweils dazugeschrieben. ============================================================ */ /* ---- 1) Startseite: Foto-Kopf als breite Buehne (Inhaber: „Warum zusammengepresst") ---- Ursache: Inline-CSS des Sync-Blocks `#mrwiz-wrap .mw-intro {max-width:660px; text-align:center}` und `.mw-t {font-size:34px}`. Die ID (1,1,0) schlug jede Regel dieser Datei — das Foto war bei 1920 px ein 660x280-Kasten (34 % der Breite), der Rechner darunter (780 px) breiter als die Buehne. Hier wiegt #mrwiz-wrap mit — nur als Gewichtsanker; beruehrt wird allein der Text-Kopf .mw-intro und sein Foto (::before/ ::after), NICHT das Formular. Erst ab 992 px; darunter bleibt der Handy-Stand. Kein Layout-Sprung: html.glx wird im gesetzt (design_klasse_frueh), die Masse gelten ab dem ersten Bild; keine Animation, Deckkraft bleibt 1. */ @media (min-width: 992px) { .glx body.home #mrwiz-wrap .mw-intro { max-width: 1200px; text-align: left; padding: 92px 64px 104px; border-radius: 20px; } /* Foto ohne den Zoom-Rand der alten Kamerafahrt (inset -8 % war fuer scale 1.18). */ .glx body.home #mrwiz-wrap .mw-intro::before { inset: 0; background-position: center 36%; } /* Abdunklung von links: der Text steht auf dem dunklen Teil, rechts bleibt das Foto sichtbar. */ .glx body.home #mrwiz-wrap .mw-intro::after { background: linear-gradient(90deg, rgba(8, 8, 10, .88) 0%, rgba(8, 8, 10, .72) 40%, rgba(8, 8, 10, .30) 100%), linear-gradient(180deg, rgba(8, 8, 10, 0) 55%, rgba(8, 8, 10, .55) 100%); } .glx body.home #mrwiz-wrap .mw-intro .mw-t { font-size: clamp(42px, 3.4vw, 58px); line-height: 1.05; letter-spacing: -.03em; max-width: 15ch; margin: 0 0 18px; } /* Untertitel: ~54 Zeichen je Zeile statt 4 zentrierter Kurzzeilen (v4: max 40ch). */ .glx body.home #mrwiz-wrap .mw-intro p:not(.mw-t) { max-width: 54ch; margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .86); } } /* ---- 2) Startseite: Kanten und Kleinigkeiten ---- */ /* Anfrageformular auf die linke Kante der 1120er-Spalte statt eigener Mitte (x=640 bei 1920). */ .glx .mr-home #anfrage .mr-form-wrap, .glx .mr-home .glx-betreiber { margin-left: 0; } /* Economy-Karte sass 15 px tiefer: ein von wpautop erzeugtes leeres

ist erstes Kind der Karte (die Inline-Regel versteckt nur

direkt im Raster). */ .glx .mr-home .mr-card > p:empty { display: none; } /* ---- 3) Kopfzeile (alle Seiten) ---- Sprachknopf: erbte die Theme-Grauschrift #626262 (3,2:1) und brach bei 1366 um („DE" ueber dem Pfeil) — dieselbe Fehlerfamilie wie „Deutschv" im Portal. */ .glx .mr-lang--hdr { flex-shrink: 0; } .glx .mr-lang--hdr .mr-lang-btn { white-space: nowrap; color: #fff; } .glx .mr-lang--hdr .mr-lang-btn:hover { border-color: rgba(255, 255, 255, .6); } /* E-Mail heller (Inhaber: „kaum lesbar"). !important: die Inline-Regel mr-headerfix setzt rgba(255,255,255,.6) selbst mit !important — hier eine Klasse schwerer. */ .glx #header_contents > a[href^="mailto:"], .glx .sticky_header_content > a[href^="mailto:"] { color: rgba(255, 255, 255, .78) !important; } /* Zu schmale Laptops: die Kopfzeile brauchte 1306 px; bei 1280 war „Jetzt buchen" angeschnitten (auch auf dem Inhaber-Foto: rechts nur „Je"), bei 1024 fehlte er ganz. E-Mail und Telefon stehen weiter im Footer und in der Handy-Leiste. !important beim Ausblenden: das Theme setzt die Kopf-Links ungemessen — sicher ist sicher. */ @media (min-width: 992px) and (max-width: 1365px) { .glx #header_contents, .glx .sticky_header_content { gap: 12px; } .glx #header_contents > a[href^="mailto:"], .glx .sticky_header_content > a[href^="mailto:"] { display: none !important; } .glx #menu-hauptmenue > li > a { padding-left: 10px; padding-right: 10px; } } @media (min-width: 992px) and (max-width: 1199px) { .glx #header_contents > a[href^="tel:"], .glx .sticky_header_content > a[href^="tel:"] { display: none !important; } } /* ---- 4) Handy: Kopf, schwebende Knoepfe, Menue ---- */ @media (max-width: 991px) { /* Die mitfahrende Theme-Leiste wurde von mr-headerfix (position:relative) in den Seitenfluss gezogen: 199 px schwarzer Balken mit aufgeblasenem Logo zwischen Rechner und H1. Am Handy tragen #mrb-toggle und die untere Leiste die Navigation. !important: das Theme blendet die Leiste per Skript/Klasse ein. */ .glx .sticky_header_area { display: none !important; } /* Menueknopf: Bordeaux-Flaeche → Schwarz (Bordeaux nur Mikro-Akzent). Er bleibt fest, weil er die Navigation traegt. */ .glx #mrb-toggle { background: #0B0B0C; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } /* Offenes Menue: Arial → DM Sans, Bordeaux-Flaechen → Schwarz/Weiss. */ .glx #mrb-panel, .glx #mrb-panel a { font-family: "DM Sans", "DM Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .glx #mrb-panel a:hover, .glx #mrb-panel a:active { background: rgba(255, 255, 255, .08); } .glx #mrb-panel .mrb-cta a.c, .glx #mrb-panel .mrb-cta a.c:hover { background: #fff; color: #0B0B0C; } .glx #mrb-panel .mrb-cta a.w:hover { background: #25D366; } /* Theme-Kreis „nach oben": schwebte ueber Preisen und der unteren Leiste. !important: das Theme setzt ihn per Klasse .active-progress sichtbar. */ .glx .prgoress_indicator { display: none !important; } } /* Sprachpille: war fest (position:fixed) und schwamm ohne Hintergrund ueber Preisen und Text. Jetzt sitzt sie oben im Kopf und scrollt mit weg. (Inline mr-sync2 0,1,0.) */ @media (max-width: 980px) { .glx .mr-lang--fix { position: absolute; } } /* Cookie-Banner: die untere Leiste #mrbar lag ueber der unteren Haelfte von „Ablehnen" — Ablehnen muss so leicht sein wie Akzeptieren. Solange der Banner offen ist, pausiert die Leiste (Inline `#mrbar{display:flex}` wiegt 1,0,0 — hier 1,3,1, kein !important noetig). */ .glx body:has(.cmplz-cookiebanner.cmplz-show) #mrbar { display: none; } /* „Akzeptieren" war eine gefuellte Bordeaux-Flaeche (Complianz-Vorgabe) — Primaerknopf ist Tiefschwarz, Bordeaux nur Mikro-Akzent. Nur die Farbvariablen des Banners (0,2,0 gegen 0,1,0). */ .glx .cmplz-cookiebanner { --cmplz_button_accept_background_color: #0B0B0C; --cmplz_button_accept_border_color: #0B0B0C; --cmplz_button_accept_text_color: #fff; } /* Letzte Zeilen lagen unter der 61-px-Leiste samt iPhone-Balken (Inline: 50 px). */ @media (max-width: 820px) { .glx body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* ---- 5) Footer ---- */ /* Die Gruppen-Ueberschriften der Fusskaesten waren 22 px: die Inline-Regel `font:700 12px/1.3 inherit` ist UNGUELTIG (inherit darf in der Kurzform nicht stehen), der Browser verwirft sie, es greift das Theme-h4. Hier ausgeschrieben. */ .glx .mr-airnav h4 { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; } .glx .mr-airnav .lbl { font-size: 11px; font-weight: 600; line-height: 1.7; color: rgba(255, 255, 255, .62); } .glx .mr-fl .mr-airnav .in { padding-left: 0; padding-right: 0; } /* „powered by Kodaro" stand als weisser Streifen unter dem schwarzen Footer (2,6:1). Sichtbarkeit bleibt Inhaber-Entscheid; nur die Farbe folgt dem Footer. !important: Farben stehen im style-Attribut (kodaro-ride-os/includes/credit.php). */ .glx .kodaro-fuss { background: #0B0B0C; margin: 0; color: rgba(255, 255, 255, .5) !important; } .glx .kodaro-fuss a { color: rgba(255, 255, 255, .72) !important; } /* ---- 6) Landingpages .mr-lp ---- */ /* Arabisch: `.mr-lp .mr-hero {text-align:left}` (Inline) liess RTL-Text links flattern. start = links in LTR (unveraendert), rechts in RTL. */ .glx body .mr-lp .mr-hero { text-align: start; } /* Seiten ohne .mr-sec-Huelle (AR): H2/P hingen randlos 0–1920 px in .mr-lp. */ .glx .mr-lp > h2, .glx .mr-lp > h3, .glx .mr-lp > p, .glx .mr-lp > ul { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .glx .mr-lp > h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin-top: 40px; } /* Handy: weisser Querstreifen zwischen Foto-Kopf und Rechner. Zwei Chip-Zeilen machen die Leiste hoeher als die -72-px-Ueberlappung, und der 20-px-Aussenrand von .mr-glance-inner kollabierte nach draussen. Innenabstand stoppt das Kollabieren; der Teil UNTER dem Foto bekommt Schwarz, der ueberlappende Teil bleibt durchsichtig. Nur wenn der Rechner direkt folgt. !important nur beim Innenabstand: v6 setzt `padding:0 20px !important`. */ @media (max-width: 991px) { .glx body .mr-lp .mr-hero + .mr-glance:has(+ #mrwiz-wrap) { padding-bottom: 1px !important; background: linear-gradient(#0B0B0C, #0B0B0C) left bottom / 100% calc(100% - 72px) no-repeat; } .glx .mr-lp .mr-hero + .mr-glance + #mrwiz-wrap[data-mrup] { margin-top: 0; } } /* Anfrageformular im dunklen Abschnitt: Bordeaux-Sendeknopf und beige Rahmen (gebackenes Seiten-CSS mit !important) → weisser Primaerknopf wie im Foto-Kopf. */ .glx .mr-lp .mr-anfrage input[type="submit"], .glx .mr-lp .mr-anfrage .wpcf7-submit { background-color: #fff !important; color: #0B0B0C !important; border-color: #fff !important; } .glx .mr-lp .mr-anfrage input[type="submit"]:hover, .glx .mr-lp .mr-anfrage .wpcf7-submit:hover { background-color: #E9E9EB !important; border-color: #E9E9EB !important; } .glx .mr-lp .mr-anfrage .wpcf7-form-control:not([type="submit"]):not(.wpcf7-submit) { border-color: rgba(255, 255, 255, .22) !important; } /* ---- 7) Vorlage .gl-page (Maybach, Reisebus) ---- */ /* E-Mail im dunklen Hinweiskasten war #111 auf #111: `.gl-page a` steht nach `.gl-note a`. */ .glx .gl-page .gl-note a { color: #fff; text-underline-offset: 3px; } /* H1 am Handy 55 px und „Mercedes-M / aybach" mitten im Wort; am Desktop breiter als die Spalte. */ .glx body:has(.gl-page) .entry-content > h1 { max-width: 920px; margin: 0 auto 12px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; word-break: normal; overflow-wrap: normal; text-wrap: balance; } /* Handy: die Spalte (.gl-wrap) hat 20 px Innenabstand, die H1 steht ausserhalb davon — gemessen H1 x=17, Rechner und Kacheln x=37. Gleiche Kante ueber Innenabstand. */ @media (max-width: 767px) { .glx body:has(.gl-page) .entry-content > h1 { padding-left: 20px; padding-right: 20px; } } /* Rechner-Umschlag im grauen Kasten = Rahmen im Rahmen. Nur der Kasten wird still; am Umschlag nur der Radius (kein overflow — Aufklapper des Rechners duerfen nicht klemmen). */ .glx .gl-page .gl-calcbox { background: transparent; border: 0; padding: 0; } .glx .gl-page .gl-calcbox > #mrwiz-wrap { border-radius: 16px; } /* Kacheln 20 px eingerueckt (Theme-ul-Einzug) und eine Waise in Reihe zwei. */ .glx .gl-page ul.gl-tiles { padding: 0; } @media (min-width: 700px) { .glx .gl-page .gl-tiles { grid-template-columns: repeat(2, 1fr); } } /* ---- 8) Textseiten (Impressum, AGB, Datenschutz, Blog) ---- Theme: h1 55 px / h2 45 px ohne Handy-Stufe, Zeilen bis 1136 px. Nur Seiten ohne eigenen Baukasten; nur DIREKTE Kinder, damit Portal, Angebot und Rechner unberuehrt bleiben. */ .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content, .elementor-widget-container) > h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.02em; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content, .elementor-widget-container) > h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -.01em; color: #0B0B0C; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content, .elementor-widget-container) > h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content) > h2 { margin-top: 1.6em; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content, .elementor-widget-text-editor) > :is(p, ul, ol) { max-width: 75ch; } @media (max-width: 767px) { /* lang="de-DE" ist gesetzt: der Browser trennt „Kammerzugehörig-keit" mit Strich statt ohne. */ .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) :is(.entry-content, .post_single_content, .elementor-widget-container) > :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* Datenschutz: Absaetze in Roboto (Elementor-Kit), Listen in DM Sans — eine Schrift. */ .glx .elementor-widget-text-editor { font-family: "DM Sans", "DM Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #3A3A3F; } .glx .elementor-widget-text-editor li { margin-bottom: 6px; } /* Blog-Kommentare: Ueberschrift 34 px groesser als jede Zwischenueberschrift, Einwilligung in Times. */ .glx .sec_comments .comment-reply-title { font-size: 22px; } .glx .comment-form label { font-family: inherit; } /* ---- 9) Portal „Meine Buchung": Markenfarben statt Signal-Blau ---- Das Produkt (portal.css) fokussiert blau (#1f4fd1) und hovert blauschwarz (#1b2029) — das einzige Blau der Seite. GLOBALANE-Look hier, das Produkt bleibt neutral. Gesperrter Knopf ausgenommen: dessen graue Flaeche ist die Aussage. */ .glx #mr-portal :focus-visible { outline-color: #0B0B0C; } .glx #mr-portal input:focus { border-color: #0B0B0C; box-shadow: 0 0 0 3px rgba(11, 11, 12, .12); } .glx #mr-portal .cta:not([disabled]) { background: #0B0B0C; } .glx #mr-portal .cta:not([disabled]):hover { background: #242427; } .glx #mr-portal .pay-btn:not([disabled]) { background: #0B0B0C; } .glx #mr-portal .pay-btn:not([disabled]):hover { background: #242427; } /* Nur Fliesstext-Links ohne Klasse — Knoepfe (a.pay-btn u. a.) behalten ihre weisse Schrift. */ .glx #mr-portal a:not([class]) { color: #0B0B0C; text-decoration: underline; text-underline-offset: 3px; } /* ---- 10) Startseite: Footer und Abholschild auf der 1120er-Kante ---- Footer-Spalten liefen auf 1180 px ab x=370, der Inhalt auf 1120 ab x=420 — vier linke Kanten bei 1920. !important: die Inline-Regel `.mr-fl .mr-flw{max-width:1180px!important}` (Sync-Block) setzt es selbst; hier eine Klasse schwerer. */ /* 1080 = 1120er-Spalte minus deren 2x20 px Innenabstand: gemessen fluchten die Spalten dann mit den Abschnittstiteln (x=420 bei 1920), mit 1120 standen sie bei x=400. */ .glx .mr-fl .mr-flw { max-width: 1080px !important; } /* Abholschild: in der 1120er-Box blieb die rechte Haelfte leer (h2 14ch, Text 48ch) — kompakt und links auf der Kante statt halb leer. */ @media (min-width: 1024px) { .glx .mr-home .mr-cta { max-width: 760px; } } /* ---- 11) 404-Seite, Impressum, Datenschutz ---- 404: Die Theme-Vorlage gibt keinen Kopf aus; globalane-core.php (mr_linkpflege, 404-Zweig) setzt eine Markenleiste .gl-404-kopf ein. Schwarz wie der Seitenkopf, Logo links, Telefon rechts. Am Handy rechts Platz fuer Sprachkapsel und Menueknopf (die schweben dort). */ .glx .gl-404-kopf { background: #0B0B0C; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 30px; box-sizing: border-box; } .glx .gl-404-kopf .gl-404-logo { display: inline-flex; line-height: 0; } .glx .gl-404-kopf .gl-404-logo img { height: 24px; width: auto; max-width: none; } .glx .gl-404-kopf .gl-404-tel { color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; } @media (max-width: 991px) { .glx .gl-404-kopf { padding-right: 150px; } .glx .gl-404-kopf .gl-404-tel { display: none; } } /* 404-Rueckwege: drei Theme-Knoepfe gleich laut. Primaer bleibt „Zur Startseite"/„Fixpreis"; „Anrufen" (tel:) wird Zweitknopf. !important: margin-left steht im style-Attribut. */ .glx body.error404 main a.theme_btn[href^="tel:"] { background: #fff; color: #0B0B0C; border: 1.5px solid #0B0B0C; } @media (max-width: 575px) { .glx body.error404 main a.theme_btn { margin: 6px 4px 0 !important; } } /* Impressum: Die Textspalte (Elementor-Container 007f9f3, 820 px) lag links in der 1140er-Reihe (x 400–1200 bei 1920) neben der Mitte der Kopfzeile. Mitte statt links. */ .glx .elementor-element-007f9f3 { margin-left: auto; margin-right: auto; } /* Luxride-Texteditor (Impressum u. a.): die Ueberschriften sitzen eine Ebene tiefer (.elementor-widget-container > .position_p_relative > h2) — Abschnitt 8 erreichte sie nicht, sie blieben 55/45 px. Dieselbe Skala wie dort. */ .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .elementor-widget-container > .position_p_relative > h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.02em; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .elementor-widget-container > .position_p_relative > h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -.01em; color: #0B0B0C; margin-top: 1.6em; } .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .elementor-widget-container > .position_p_relative > h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; } @media (max-width: 767px) { .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .elementor-widget-container > .position_p_relative > :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } .glx h1.gl-impressum-h1 { margin: 8px 0 24px; } /* Datenschutz: Absaetze liefen 1127 px breit (~150 Zeichen je Zeile). Abschnitt 8 zielt auf `.elementor-widget-text-editor > p`, Elementor legt die Absaetze aber in den .elementor-widget-container. Gleiche Grenze, eine Ebene tiefer. */ .glx body:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .elementor-widget-text-editor > .elementor-widget-container > :is(p, ul, ol) { max-width: 75ch; } /* Datenschutz: die H1 klebte mit rund 10 px an der Kopfzeile. */ .glx h1.adsimple-112845564 { margin-top: 48px; } /* ============================================================ v9 — Ratgeber + Seiten ohne Baustein, 13.09.2026 Inhaber 13.09. zu /hallstatt-anreise-ab-wien/: „Seite ist unformatiert. Weiß Gott wie viele solche Seiten es gibt." Suchlauf ueber 591 Adressen: 34 Seiten ohne Baustein. Die Seitenart setzt globalane-core.php (gl_seitenart) als Koerperklasse: body.gl-ratgeber — 8 Blogbeitraege: Kopf .gl-kopf, Inhaltsverzeichnis .gl-toc, Buchungsblock .gl-buchung (Markup: gl_ratgeber_vorlage) body.gl-verkauf — 18 Verkaufsseiten: bekommen das ECHTE Landingpage-Kopf-Markup (.mr-lp.gl-lp-kopf > .mr-hero) — Kopf, Chips und Rechner kommen aus v6/v8 + Sync-Block; hier nur Spalte und Abschnitte darunter body.gl-textseite — Rechtsseiten: nur ruhige Text-Skala, NIE ein dunkler Kopf Keine Animation, keine Deckkraft-Spiele: die Koepfe stehen ab dem ersten Bild. Rechner (#mrwiz-wrap) nur Umgebung — keine Regel greift in ihn hinein. ============================================================ */ /* ---- 1) Ratgeber: Kopf ---- Dasselbe Foto und dieselbe Abdunklung wie der Landingpage-Kopf (v6), Text auf der Kante der Lesespalte (720 px) — Ueberzeile, H1, Stand und Lesezeit fluchten mit dem Fliesstext darunter. */ .glx body.gl-ratgeber .gl-kopf { margin: 0 0 clamp(28px, 4vw, 48px); padding: clamp(44px, 6vw, 76px) 20px clamp(36px, 5vw, 60px); background-color: #0B0B0C; background-image: linear-gradient(180deg, rgba(8, 8, 10, .55) 0%, rgba(8, 8, 10, .74) 50%, rgba(8, 8, 10, .93) 100%), url('gl-hero-fahrer.jpg'); background-size: cover; background-position: center 30%; background-repeat: no-repeat; color: #fff; } .glx body.gl-ratgeber .gl-kopf-in { max-width: 720px; margin: 0 auto; } .glx body.gl-ratgeber .gl-kopf .gl-kopf-ueber { margin: 0 0 14px; font-size: 12.5px; line-height: 1.2; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* Bordeaux nur als Mikro-Akzent: ein kurzer Strich vor der Ueberzeile (heller Ton, der auf Schwarz noch lesbar ist — derselbe wie im dunklen Anfrage-Abschnitt, v5b). */ .glx body.gl-ratgeber .gl-kopf .gl-kopf-ueber::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 10px 3px 0; vertical-align: middle; background: #b0424f; } .glx body.gl-ratgeber .gl-kopf .gl-kopf-ueber a { color: inherit; text-decoration: none; } .glx body.gl-ratgeber .gl-kopf .gl-kopf-ueber a:hover { color: #fff; } .glx body.gl-ratgeber .gl-kopf h1 { margin: 0 0 16px; padding: 0; max-width: none; color: #fff; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -.022em; font-weight: 700; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } .glx body.gl-ratgeber .gl-kopf .gl-kopf-meta { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; } .glx body.gl-ratgeber .gl-kopf-trenner { margin: 0 .55em; } /* Handy: gemessen stand der Kasten bei x=17, die H1 darin bei x=37, der Fliesstext bei x=17 — zwei Kanten. Randlos ueber die Theme-Spalte hinaus, der Innenabstand ist genau der Weg zurueck: H1 und Text fluchten, egal welchen Innenabstand das Theme gerade hat. */ @media (max-width: 767px) { .glx body.gl-ratgeber .gl-kopf { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } } /* ---- 2) Ratgeber: Lesespalte ---- ⚠️ Gewicht: Abschnitt 8 (Textseiten) steht mit `:not(:has(#mr-portal))` auf (1,5,2) — die ID darin zaehlt. Normale Regeln verloren dagegen (Absaetze blieben 75ch breit und neben der Spalte, H2 blieb 28 px). Deshalb derselbe Vorspann plus .gl-ratgeber = eine Klasse schwerer, ohne !important. Der Vorspann ist lang, aber er erklaert sich von selbst. */ .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content { color: #26262a; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :not(.gl-kopf) { max-width: 720px; margin-left: auto; margin-right: auto; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > p, .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(ul, ol) > li { font-size: 17px; line-height: 1.72; color: #26262a; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > p { margin-top: 0; margin-bottom: 1.15em; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > h2 { margin: 2.1em auto .65em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.018em; font-weight: 700; color: #0B0B0C; scroll-margin-top: 96px; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(.gl-kopf, .gl-toc) + h2 { margin-top: 0; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > h3 { margin: 1.7em auto .45em; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.32; font-weight: 700; color: #0B0B0C; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(ul, ol) { margin-top: 0; margin-bottom: 1.3em; padding-left: 1.25em; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(ul, ol) > li { margin: 0 0 .55em; padding-left: .2em; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > ul > li::marker { color: #7A1F2B; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(p, ul, ol) strong { color: #0B0B0C; font-weight: 700; } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(p, ul, ol) a { color: #0B0B0C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(11, 11, 12, .38); } .glx body.gl-ratgeber:not(.home):not(:has(.mr-lp)):not(:has(.gl-page)):not(:has(#mr-portal)) .post_single_content > :is(p, ul, ol) a:hover { text-decoration-color: #7A1F2B; } /* ---- 3) Ratgeber: Inhaltsverzeichnis (ab vier H2; am Handy zugeklappt, s. gl_ratgeber_vorlage) ---- */ .glx body.gl-ratgeber .gl-toc { margin-bottom: 44px; padding: 18px 22px 8px; border: 1px solid #E4E4E7; border-radius: 14px; background: #fff; } .glx body.gl-ratgeber .gl-toc > summary { list-style: none; padding-bottom: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #55555B; cursor: pointer; } .glx body.gl-ratgeber .gl-toc > summary::-webkit-details-marker { display: none; } .glx body.gl-ratgeber .gl-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: gltoc; } .glx body.gl-ratgeber .gl-toc li { counter-increment: gltoc; display: flex; gap: 14px; margin: 0; padding: 9px 0; border-top: 1px solid #EFEFF1; font-size: 15.5px; line-height: 1.4; } .glx body.gl-ratgeber .gl-toc li::before { content: counter(gltoc, decimal-leading-zero); flex: 0 0 auto; min-width: 1.7em; color: #8A8A90; font-variant-numeric: tabular-nums; } .glx body.gl-ratgeber .gl-toc a { color: #0B0B0C; text-decoration: none; } .glx body.gl-ratgeber .gl-toc a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 768px) { /* Am Desktop bleibt die Liste offen — die Ueberschrift ist Beschriftung, kein Schalter. */ .glx body.gl-ratgeber .gl-toc > summary { pointer-events: none; cursor: default; } } @media (max-width: 767px) { .glx body.gl-ratgeber .gl-toc { padding: 0 18px; } .glx body.gl-ratgeber .gl-toc[open] { padding-bottom: 8px; } .glx body.gl-ratgeber .gl-toc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0; } .glx body.gl-ratgeber .gl-toc > summary::after { content: "+"; font-size: 22px; font-weight: 400; letter-spacing: 0; color: #0B0B0C; } .glx body.gl-ratgeber .gl-toc[open] > summary::after { content: "\2013"; } } /* ---- 4) Ratgeber: Buchungsblock (nach dem zweiten Abschnitt hell, am Ende dunkel) ---- Primaer Tiefschwarz, WhatsApp gruen wie im Landingpage-Kopf (v4: #25d366 / #06210f). */ .glx body.gl-ratgeber .gl-buchung { margin-top: 44px; margin-bottom: 44px; padding: 26px 28px; border-radius: 16px; background: #F4F4F5; } .glx body.gl-ratgeber .gl-buchung .gl-buchung-titel { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #0B0B0C; } .glx body.gl-ratgeber .gl-buchung .gl-buchung-text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: #3F3F43; } .glx body.gl-ratgeber .gl-buchung .gl-buchung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .glx body.gl-ratgeber .gl-buchung .gl-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 11px; font-size: 15.5px; font-weight: 700; line-height: 1.2; text-decoration: none; } .glx body.gl-ratgeber .gl-buchung .gl-knopf--primaer { background: #0B0B0C; color: #fff; } .glx body.gl-ratgeber .gl-buchung .gl-knopf--primaer:hover { background: #242427; color: #fff; } .glx body.gl-ratgeber .gl-buchung .gl-knopf--wa { background: #25d366; color: #06210f; } .glx body.gl-ratgeber .gl-buchung .gl-knopf--wa:hover { background: #1fbe5a; color: #06210f; } .glx body.gl-ratgeber .gl-buchung .gl-knopf:focus-visible { outline: 2px solid #0B0B0C; outline-offset: 3px; } .glx body.gl-ratgeber .gl-buchung--ende { margin-top: 56px; padding: 34px 32px; background: #0B0B0C; } .glx body.gl-ratgeber .gl-buchung--ende .gl-buchung-titel { color: #fff; font-size: clamp(22px, 2.4vw, 26px); } .glx body.gl-ratgeber .gl-buchung--ende .gl-buchung-text { color: rgba(255, 255, 255, .74); } .glx body.gl-ratgeber .gl-buchung--ende .gl-knopf--primaer { background: #fff; color: #0B0B0C; } .glx body.gl-ratgeber .gl-buchung--ende .gl-knopf--primaer:hover { background: #E9E9EB; color: #0B0B0C; } .glx body.gl-ratgeber .gl-buchung--ende .gl-knopf:focus-visible { outline-color: #fff; } @media (max-width: 575px) { .glx body.gl-ratgeber .gl-buchung { padding: 22px 20px; } .glx body.gl-ratgeber .gl-buchung .gl-knopf { flex: 1 1 100%; } } /* Kommentare: an Beitraegen zu (beitrag_kommentare_zu, 12.09.) und es gibt keine. Bleibt das Theme-Geruest trotzdem stehen, verschwindet es — nur solange keine Kommentarliste darin ist. */ .glx body.gl-ratgeber .single_content_lower:not(:has(.comment-list, .commentlist, .comment-body)) { display: none; } /* ---- 5) Verkaufsseiten ohne Baustein: Spalte und Abschnitte unter dem Kopf ---- Kopf + Chips + Rechner sind die Landingpage-Regeln (v6/v8, Sync-Block). Darunter standen die Inhalte in drei Bauarten: in .entry-content (Kleinbus, Reisebus, Pitbull), in der vollen Breite von .full_width_box (Hallstatt FR/IT/ES/TR/AR, drei EN-Seiten) und in eigenen Huellen (.gl-lp 780/960, .gl-wrap, .gl-sec, div[dir=rtl]). Eine Spalte fuer alle: 780 px wie die Abschnitte der Landingpages, mittig. `:not(.mr-lp *):not(#mrwiz-wrap *)` haelt Kopf und Rechner aus der Typografie heraus. */ .glx body.gl-verkauf .entry-content > :not(.mr-lp):not(#mrwiz-wrap) { max-width: 780px; margin-left: auto; margin-right: auto; } .glx body.gl-verkauf .full_width_box > :not(.mr-lp):not(#mrwiz-wrap) { max-width: 780px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; } .glx body.gl-verkauf .gl-lp-kopf + * { margin-top: clamp(36px, 5vw, 64px); } /* Eine Schrift (v7): Kleinbus/Reisebus backen `.gl-lp{font-family:-apple-system,…}` ein — gemessen lief der Fliesstext in Segoe UI unter DM-Sans-Ueberschriften. */ .glx body.gl-verkauf :is(.entry-content, .full_width_box) > :not(.mr-lp):not(#mrwiz-wrap) { font-family: "DM Sans", "DM Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) h2:not(.mr-lp *):not(#mrwiz-wrap *) { margin: 2.1em 0 .6em; font-size: clamp(24px, 3vw, 32px); line-height: 1.16; letter-spacing: -.02em; font-weight: 700; color: #0B0B0C; text-wrap: balance; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) h3:not(.mr-lp *):not(#mrwiz-wrap *) { margin: 1.6em 0 .4em; font-size: clamp(17px, 1.7vw, 19px); line-height: 1.35; font-weight: 700; color: #0B0B0C; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) :is(p, li):not(.mr-lp *):not(#mrwiz-wrap *) { font-size: 16.5px; line-height: 1.7; color: #26262a; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) :is(p, li) strong:not(.mr-lp *):not(#mrwiz-wrap *) { color: #0B0B0C; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) :is(p, li) a:not([style]):not([class]):not(.mr-lp *):not(#mrwiz-wrap *) { color: #0B0B0C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(11, 11, 12, .38); } /* Preistabellen (Hallstatt, Salzburg): Tafel-Zeilen statt Theme-Gitter; am Handy seitlich scrollbar statt aus der Seite zu ragen. */ .glx body.gl-verkauf :is(.entry-content, .full_width_box) table:not(.mr-lp *):not(#mrwiz-wrap *) { border-collapse: collapse; margin: 1.2em auto 1.4em; font-size: 15px; font-variant-numeric: tabular-nums; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) :is(th, td):not(.mr-lp *):not(#mrwiz-wrap *) { padding: 10px 12px; border: 0; border-bottom: 1px solid #E4E4E7; text-align: start; vertical-align: top; color: #26262a; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) th:not(.mr-lp *):not(#mrwiz-wrap *) { color: #0B0B0C; font-weight: 700; border-bottom-color: #0B0B0C; } @media (max-width: 767px) { /* Handy, Vorlage mit .entry-content: die Kopf-H1 steht bei x=37 (17 Theme + 20 Kopf), der Text stand bei 33 (.gl-lp 16 px) bzw. 17 (Pitbull, nackte Absaetze). 20 px = eine Kante. */ .glx body.gl-verkauf .entry-content > :not(.mr-lp):not(#mrwiz-wrap) { padding-left: 20px; padding-right: 20px; } .glx body.gl-verkauf .entry-content > :is(ul, ol) { padding-left: calc(20px + 1.2em); } .glx body.gl-verkauf :is(.entry-content, .full_width_box) table:not(.mr-lp *):not(#mrwiz-wrap *) { display: block; overflow-x: auto; } .glx body.gl-verkauf :is(.entry-content, .full_width_box) :is(h2, h3):not(.mr-lp *):not(#mrwiz-wrap *) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* Rechts-nach-links (/ar/): der Landingpage-Kopf ist fest links gesetzt (mr-fix2 `.mr-lp .mr-hero{text-align:left}`) — auf Arabisch gehoert die Kante nach rechts. */ html.glx[dir="rtl"] body.gl-verkauf .gl-lp-kopf .mr-hero { text-align: right; } /* Chinesisch: ohne Leerzeichen bricht der Browser an jeder Silbe; ausgewogene Zeilen statt eines einzelnen Zeichens in der letzten Zeile. */ html.glx[lang^="zh"] body.gl-verkauf .gl-lp-kopf h1 { text-wrap: balance; line-break: strict; word-break: keep-all; overflow-wrap: anywhere; } /* Foto 13.09.: auf ZH brach „维也纳" (Wien) als „维也 | 纳". keep-all bricht an den Leerzeichen um „—" und „Wiener Stadthalle"; overflow-wrap:anywhere rettet einen zu langen Lauf. */ /* Pitbull-Untertitel (Veranstaltungszeile in ) war dunkel auf dunkel: das Theme faerbt selbst, mr-fix2 macht nur p/h1 weiss. Im Kopf erbt es die helle Schrift. */ .glx body.gl-verkauf .gl-lp-kopf .mr-hero :is(strong, b) { color: inherit; font-weight: 600; } /* ---- 6) Rechtsseiten auf der fullwidth-Vorlage (EN/RU/TR Impressum + Datenschutz) ---- Abschnitt 8/11 erreichen nur .entry-content / Elementor — in .full_width_box standen die Ueberschriften weiter bei 55/45 px und die Zeilen liefen ueber die ganze Breite. Dieselbe ruhige Skala wie Abschnitt 8; KEIN dunkler Kopf (Wache: wache-ratgeber-vorlage.js). */ .glx body.gl-textseite .full_width_box > *, .glx body.gl-textseite .full_width_box > .position_p_relative > * { max-width: 760px; margin-left: auto; margin-right: auto; } .glx body.gl-textseite .full_width_box { padding-left: 20px; padding-right: 20px; } .glx body.gl-textseite .full_width_box :is(h1, h2, h3) { color: #0B0B0C; } .glx body.gl-textseite .full_width_box h1 { margin-top: 8px; margin-bottom: 24px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.02em; } .glx body.gl-textseite .full_width_box h2 { margin-top: 1.8em; margin-bottom: .5em; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.25; letter-spacing: -.01em; } .glx body.gl-textseite .full_width_box h3 { margin-top: 1.4em; margin-bottom: .4em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3; } .glx body.gl-textseite .full_width_box :is(p, li) { font-size: 16px; line-height: 1.65; color: #3A3A3F; } @media (max-width: 767px) { .glx body.gl-textseite .full_width_box :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* ---- 7) Startseite „So funktioniert es": Ueberschriften auf einer Hoehe ---- Koordinator 13.09.: bei 1366 stand die H3 von Schritt 3 (Text 3 Zeilen) 8 px HOEHER als in Schritt 1/2 (gemessen: Ziffern y 2586, H3 2636/2636/2628). Ursache: .mr-step ist ab 768 px selbst ein Grid und wird auf die Hoehe des laengsten Schritts gestreckt; mit align-content:normal verteilt sich der freie Platz auf die Zeilen der kuerzeren Schritte. `start` packt die Zeilen oben — Tafel-Optik unveraendert. */ @media (min-width: 768px) { .glx .mr-home .mr-grid--steps .mr-step { align-content: start; } } /* ---- 8) Website-Audit 13.09.2026: Kontrast Anfrageformular + Hinweisbox ---- */ /* 13.09.2026 Website-Audit H1: Das Anfrageformular stand auf 262 EN/RU/TR-Landingpages weiss auf weiss. Diese Datei faerbt Titel und Text von .mr-anfrage hell (v5b, Abschnitt oben) und das Seiten-CSS `mr-cf7-fix` die Feldnamen #f2efe9 — den dunklen Grund lieferte aber nur ein Inline-Style `.mr-lp .mr-anfrage{background:#0E0E12}`, den nur 104 der 366 Seiten tragen. Hier zentral derselbe Grund (gleiche Farbe, Innenabstand/Rundung wie bisher von .mr-sec — die deutschen Seiten setzen inline nur die Farbe, sie sehen daher unveraendert aus). Steht NACH `.glx .mr-lp .mr-sec-alt{background:#F1F1F3}` (gleiches Gewicht), damit auch die eine Seite mit `mr-sec mr-sec-alt mr-anfrage` dunkel bleibt. Wache: wache-web-kontrast.js. */ .glx .mr-lp .mr-anfrage { background: #0E0E12; } /* Feldnamen und Meldungen: #f2efe9 kommt aus dem Seiten-CSS; hier als Rueckfall fuer Seiten ohne diesen Block (Theme-Grau waere auf #0E0E12 unlesbar). Weisse Felder bekommen einen sichtbaren Rand: die Zeile oben (rgba(255,255,255,.22)) ist auf weissem Feld unsichtbar. */ .glx .mr-lp .mr-anfrage label, .glx .mr-lp .mr-anfrage .wpcf7-response-output { color: #f2efe9; } .glx .mr-lp .mr-anfrage .wpcf7-form-control:not([type="submit"]):not(.wpcf7-submit) { border-color: #7C7C84 !important; } .glx .mr-lp .mr-anfrage p a:not(.mr-btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* 13.09.2026 Website-Audit M11: Hinweisbox „Gruppenfahrt planen? …" auf Reisebus/Kleinbus (.gl-cta, inline #111 mit weisser Schrift) war dunkel auf schwarz (Kontrast 1,25 / Link 1,04). Ursache: Abschnitt 5 oben faerbt p/li/strong/a in .gl-verkauf dunkel und traegt dabei `:not(#mrwiz-wrap *)` — das ist ID-Gewicht (1,4,2 bzw. 1,6,3) und schlaegt jede Klassenregel der Seite. Darum hier mit !important, eng auf die dunkle Box begrenzt. */ .glx body.gl-verkauf .gl-cta :is(h2, h3, p, li, strong, b, span) { color: #fff !important; } .glx body.gl-verkauf .gl-cta :is(h2, h3) { margin-top: 0 !important; } /* Abschnitt 5 gibt h2 2.1em Abstand (ID-Gewicht) — in der Box stand der Titel 60 px tief */ .glx body.gl-verkauf .gl-cta a { color: #fff !important; text-decoration-color: rgba(255, 255, 255, .6) !important; } /* ========================================================================= v10 — Startseiten-Grundgerüst .mr-home (15.09.2026) WARUM: Die deutsche Startseite trägt ihr Grund-CSS als