/* LexUp Header, Handy-Menue und Kontakt-Popup - Stand 20260808. Eine Datei fuer alle Seiten; der Browser haelt sie im Zwischenspeicher. */ /* ---------- Grundwerte (dieser Block gehoert VOR alles andere) ---------- */ :root{--lxk-wa:#25D366;--lxk-blue:#167BFC;--lxk-deep:#1C3190;--lxk-navy:#0F2542; --lxk-orange:#CC5500;--lxk-ink:#0B1220;--lxk-muted:#6B7280;--lxk-border:#ECEDF1; --lxk-soft:#F5F7FA;--lxk-ease:cubic-bezier(.16,1,.3,1)} html,body{margin:0} #lexup-hdr .lxk-cta{display:flex;flex-direction:column;align-items:center;gap:5px} #lexup-hdr .lxk-hint{font:600 .62rem/1 'Google Sans',sans-serif;color:var(--lxk-muted);white-space:nowrap;letter-spacing:.01em} #lexup-hdr .lxk-open .pill i,#lexup-hdr .lxk-open .pill svg{transition:transform .35s var(--lxk-ease)} #lexup-hdr .lxk-open[aria-expanded="true"] .pill i, #lexup-hdr .lxk-open[aria-expanded="true"] .pill svg{transform:rotate(180deg)} /* ---------- Kopfleiste (Desktop) ---------- */ #lexup-hdr{ --ink:#333132;--black:#000;--logo-ink:#333132; --bg:#F7F7F7;--surface:#FFFFFF;--surface-soft:#F7F7F7;--border:rgba(51,49,50,.12);--muted:rgba(51,49,50,.70); --blue:#167BFC;--blue-light:#167BFC;--blue-deep:#1C3190;--blue-tint:rgba(22,123,252,.08);--logo-x:#3A79F4; --orange:#CC5500;--orange-tint:rgba(204,85,0,.10); --navy:#0F2542;--navy-tint:rgba(15,37,66,.12); } #lexup-hdr *{box-sizing:border-box} body > header.elementor-location-header, header.elementor-location-header.elementor-10, header[data-elementor-id="10"].elementor-location-header{position:sticky !important;top:0 !important;z-index:99999 !important} header[data-elementor-id="10"].elementor-location-header, header[data-elementor-id="10"].elementor-location-header .elementor-section, header[data-elementor-id="10"].elementor-location-header .elementor-container, header[data-elementor-id="10"].elementor-location-header .elementor-widget-wrap{overflow:visible !important} #lx-hdr-mount{position:sticky !important;top:0 !important;z-index:99999 !important} #lexup-hdr{font-family:'Google Sans', system-ui, -apple-system, sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;position:relative !important;z-index:99999 !important} #lexup-hdr .tnum{font-variant-numeric:tabular-nums} #lexup-hdr .btn-ios{transition:transform .15s ease,opacity .15s ease} #lexup-hdr .btn-ios:active{transform:scale(.97);opacity:.85} #lexup-hdr .eyebrow{display:inline-block;font-size:.625rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:var(--blue)} /* ===== Glass-Bar ===== */ #lexup-hdr .bar{position:relative !important;top:0;left:0;right:0;z-index:50;background:rgba(242,242,247,.72);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:0 1px 0 rgba(0,0,0,.04)} #lexup-hdr .bar-in{position:relative;max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px} #lexup-hdr .logo{height:30px;width:auto;display:block} #lexup-hdr .nav{display:flex;align-items:center;gap:2px} #lexup-hdr .navlink{font:600 .875rem/1 'Google Sans',sans-serif;color:rgba(51,49,50,.70);padding:10px 13px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .2s,background .2s} #lexup-hdr .navlink:hover{color:#000;background:rgba(0,0,0,.04)} #lexup-hdr .navlink .chev{width:14px;height:14px;stroke-width:2.5;opacity:.55;transition:transform .25s cubic-bezier(.2,1,.3,1)} #lexup-hdr .nav-item{position:static} #lexup-hdr .nav-item.open .navlink{color:#000;background:rgba(0,0,0,.04)} #lexup-hdr .nav-item.open .chev{transform:rotate(180deg);opacity:1;color:var(--blue)} /* Telefon — Icon klingelt + animierte Unterstreichung der Nummer */ #lexup-hdr .tel{display:inline-flex;align-items:center;gap:7px;font:700 .875rem/1 'Google Sans',sans-serif;color:rgba(51,49,50,.70);text-decoration:none;white-space:nowrap;transition:color .2s} #lexup-hdr .tel:hover{color:var(--blue)} #lexup-hdr .tel i{transition:transform .2s,color .2s;transform-origin:50% 30%} #lexup-hdr .tel:hover i{animation:ring .6s ease} #lexup-hdr .tel .tnum{position:relative} #lexup-hdr .tel .tnum::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,1,.3,1)} #lexup-hdr .tel:hover .tnum::after{transform:scaleX(1)} @keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-15deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}} /* CTA — anheben, blauer Glow, Pfeil-Pill wird weiss, Glanz-Sweep */ #lexup-hdr .cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;font:700 .875rem/1 'Google Sans',sans-serif;padding:12px 20px;border-radius:999px;text-decoration:none} #lexup-hdr .cta .lbl{position:relative;z-index:2} #lexup-hdr .cta .pill{position:relative;z-index:2;width:26px;height:26px;border-radius:99px;background:var(--blue-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .35s ease,color .35s ease} #lexup-hdr .cta .morph{position:absolute;z-index:1;right:20px;top:50%;width:26px;height:26px;border-radius:99px;background:var(--blue);transform:translateY(-50%) scale(1);transition:transform .5s cubic-bezier(.65,0,.25,1)} #lexup-hdr .cta:hover .morph{transform:translateY(-50%) scale(16)} #lexup-hdr .cta:hover .pill{background:#fff;color:var(--blue)} #lexup-hdr .cta:hover .pill i,#lexup-hdr .cta:hover .pill svg{animation:arrowFly .85s cubic-bezier(.5,0,.2,1) infinite} #lexup-hdr .cta:active{transform:scale(.97)} @keyframes arrowFly{0%{transform:translateX(0)}40%{transform:translateX(16px)}41%{transform:translateX(-16px)}100%{transform:translateX(0)}} /* ===== Panel-Shell ===== */ /* Alle Panels öffnen einheitlich: gleiche Breite,#lexup-hdr mittig unter der Bar */ #lexup-hdr .panel{position:absolute;top:calc(100% + 13px);left:50%;width:min(1280px,calc(100vw - 40px));opacity:0;visibility:hidden;transform:translate(-50%,8px); transition:opacity .24s cubic-bezier(.2,1,.3,1),transform .28s cubic-bezier(.2,1,.3,1),visibility .24s; background:var(--surface);border:1px solid var(--border);border-radius:32px; box-shadow:0 40px 80px -32px rgba(15,37,66,.28),0 0 0 1px rgba(0,0,0,.02);overflow:hidden;z-index:60} #lexup-hdr .nav-item.open .panel{opacity:1;visibility:visible;transform:translate(-50%,0)} /* ===== Duo: statische Bild-Spalte (links) + Command-Menü (rechts) ===== */ #lexup-hdr .duo{display:grid;grid-template-columns:380px 1fr;width:100%} #lexup-hdr .duo.tools{grid-template-columns:320px 1fr} #lexup-hdr .duo.rat{grid-template-columns:360px 1fr} /* LINKS: statisches,#lexup-hdr persönliches Bild (wechselt NICHT) */ #lexup-hdr .media{position:relative;overflow:hidden;background:var(--navy);min-height:420px} #lexup-hdr .media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #lexup-hdr .media .mov{position:absolute;inset:0;background:linear-gradient(176deg,rgba(15,37,66,.12) 0%,rgba(15,37,66,.5) 46%,rgba(15,37,66,.9) 100%)} #lexup-hdr .media .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 24px 26px} #lexup-hdr .media .meye{font:900 .6rem/1 'Google Sans',sans-serif;text-transform:uppercase;letter-spacing:.18em;color:#fff;opacity:.9;margin-bottom:auto} #lexup-hdr .media .mh{font:900 1.7rem/1.06 'Google Sans',sans-serif;letter-spacing:-.03em;color:#fff} #lexup-hdr .media .ml{font:500 .85rem/1.45 'Google Sans',sans-serif;color:rgba(255,255,255,.85);margin-top:10px} #lexup-hdr .media .mchip{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:rgba(255,255,255,.13);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(255,255,255,.22);border-radius:15px;padding:9px 12px 9px 9px;width:max-content;max-width:100%} #lexup-hdr .media .mchip .won{font:900 .54rem/1 'Google Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--orange);padding:6px 9px;border-radius:99px;flex-shrink:0} #lexup-hdr .media .mchip .mv{font:800 .9rem/1.1 'Google Sans',sans-serif;color:#fff} #lexup-hdr .media .mchip .mv small{font-weight:600;font-size:.74em;color:rgba(255,255,255,.72)} /* RECHTS: Command-Palette (Spotlight-Dynamik + Boutique-Typo) */ #lexup-hdr .pal{padding:16px 18px 12px;min-width:0} /* Suchfeld */ #lexup-hdr .psearch{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)} #lexup-hdr .psearch .si{width:18px;height:18px;color:var(--blue);flex-shrink:0} #lexup-hdr .psearch .ph{flex:1;font:500 .95rem/1 'Google Sans',sans-serif;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #lexup-hdr .psearch .ph b{color:var(--ink);font-weight:600} #lexup-hdr .psearch{transition:border-color .18s,box-shadow .18s} #lexup-hdr .psearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,123,252,.12);background:#fff} #lexup-hdr .psearch-input{flex:1;min-width:0;border:none;background:transparent;outline:none;padding:0;font:500 .95rem/1.3 'Google Sans',sans-serif;color:var(--ink)} #lexup-hdr .psearch.tipp-aktiv .psearch-input{caret-color:transparent} #lexup-hdr .psearch-input::placeholder{color:var(--muted);opacity:1} #lexup-hdr .psearch-ghost{position:absolute;left:46px;right:16px;top:50%;transform:translateY(-50%);display:none;align-items:center;overflow:hidden;pointer-events:none;white-space:nowrap;font:500 .95rem/1.3 'Google Sans',sans-serif;color:var(--muted)} #lexup-hdr .psearch-ghost.is-active{display:flex} #lexup-hdr .psearch-caret{width:1px;height:1em;margin-left:1px;flex:0 0 1px;background:currentColor;opacity:1;animation:lx-psearch-caret .9s steps(1,end) infinite} @keyframes lx-psearch-caret{0%,49%{opacity:1}50%,100%{opacity:0}} #lexup-hdr .filtered{display:none !important} #lexup-hdr .noresults{display:none;padding:16px 14px;font:500 .9rem/1.4 'Google Sans',sans-serif;color:var(--muted)} #lexup-hdr .noresults.show{display:block} #lexup-hdr .kbd{font:800 .66rem/1 'Google Sans',sans-serif;color:var(--muted);background:#fff;border:1px solid var(--border);border-bottom-width:2px;border-radius:7px;padding:5px 7px;display:inline-flex;align-items:center;gap:3px;flex-shrink:0} /* "Beliebt"-Chips */ #lexup-hdr .chips{display:flex;align-items:center;gap:8px;padding:14px 6px 2px;flex-wrap:wrap} #lexup-hdr .chips .cl{font:900 .58rem/1 'Google Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} #lexup-hdr .chip{font:600 .8rem/1 'Google Sans',sans-serif;color:var(--ink);background:#fff;border:1px solid var(--border);padding:7px 12px;border-radius:99px;text-decoration:none;transition:border-color .2s,color .2s} #lexup-hdr .chip:hover{border-color:var(--blue);color:var(--blue)} /* Ergebnis-Sektion */ #lexup-hdr .sec{padding:6px 4px 0} #lexup-hdr .sech{display:block;font:900 .6rem/1 'Google Sans',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);padding:12px 12px 4px} #lexup-hdr .opt{position:relative;display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:13px;text-decoration:none;transition:background .18s} #lexup-hdr .opt + .opt{border-top:1px solid var(--border)} #lexup-hdr .opt{transition:background .18s,transform .18s} #lexup-hdr .opt::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--blue);opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s} #lexup-hdr .opt:hover::before,#lexup-hdr .opt.is-on::before{opacity:1;transform:scale(1)} #lexup-hdr .opt:hover,#lexup-hdr .opt.is-on{background:var(--blue-tint)} #lexup-hdr .opt .ot{transition:transform .18s} #lexup-hdr .opt:hover .ot,#lexup-hdr .opt.is-on .ot{transform:translateX(9px)} #lexup-hdr .opt:hover + .opt,#lexup-hdr .opt.is-on + .opt{border-top-color:transparent} #lexup-hdr .opt .ot{flex:1;min-width:0} #lexup-hdr .opt .on{display:block;font:700 1.05rem/1.2 'Google Sans',sans-serif;letter-spacing:-.015em;color:var(--ink);transition:color .18s} #lexup-hdr .opt .od{display:block;font:500 .82rem/1.4 'Google Sans',sans-serif;color:var(--muted);margin-top:3px} #lexup-hdr .opt .ret{flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s} #lexup-hdr .opt:hover .ret,#lexup-hdr .opt.is-on .ret{opacity:1;transform:none;color:var(--blue);border-color:rgba(22,123,252,.4)} #lexup-hdr .opt .badge{font:900 .54rem/1 'Google Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--orange);padding:6px 9px;border-radius:99px;flex-shrink:0} /* Footer: Tastatur-Hints + Kontextlink */ #lexup-hdr .pfoot{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:12px;padding:13px 10px 4px;border-top:1px solid var(--border)} #lexup-hdr .hints{display:flex;align-items:center;gap:16px} #lexup-hdr .hint{display:inline-flex;align-items:center;gap:7px;font:600 .74rem/1 'Google Sans',sans-serif;color:var(--muted)} #lexup-hdr .pfoot .all{display:inline-flex;align-items:center;gap:7px;font:800 .82rem/1 'Google Sans',sans-serif;color:var(--ink);text-decoration:none} #lexup-hdr .pfoot .all i{transition:transform .2s} #lexup-hdr .pfoot .all:hover i{transform:translateX(4px)} /* V10-Fix — NUR Tools-Panel "Rechner & Checks": .media{min-height:420px} erzwang die Panel-Höhe von 420px, obwohl der Inhalt nur ~330px braucht. min-height:0 lässt die Grid-Zeile auf die Inhaltshöhe schrumpfen — das GANZE Panel (Foto + Inhalt) wird kürzer, keine Lücke mehr. Der Fototext (.media .inner) ist position:absolute und bleibt unten angedockt. Leistungen/Wissen (.duo.dienst/.duo.rat) unverändert. */ #lexup-hdr .duo.tools .media{min-height:0} /* Tools: 3 gruppierte Spalten */ #lexup-hdr .grpcols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;padding:8px 4px 0} #lexup-hdr .grp{min-width:0} #lexup-hdr .grp .sech{border-bottom:1px solid var(--border);margin:0 4px;padding:6px 8px 8px} #lexup-hdr .grp .opt{gap:10px;padding:11px 10px} #lexup-hdr .grp .opt + .opt{border-top:none} #lexup-hdr .grp .opt .on{font-size:.92rem} #lexup-hdr .grp .opt .od{font-size:.72rem;margin-top:2px} /* Der Punkt sitzt bei ::before auf top:50% der GANZEN .opt-Box -- bricht die Beschreibung in dieser schmaleren Spalte auf zwei Zeilen um, landet der Punkt neben der Beschreibung statt neben dem Titel. Feste Position statt prozentualer Mitte, an der Titelzeile ausgerichtet. */ #lexup-hdr .grp .opt::before{top:20px;margin-top:0} /* V5 (21.08.2026): Leistungen-Panel ohne Luecken. Die 6 Kategorien sitzen paarweise in 3 Spalten-Wrappern (.col), jede Spalte endet bei 8 Eintraegen + 2 Koepfen: Unfall(6)+Abnahmen(2) | Wert(4)+Fahrzeuge(4) | Streit(5)+Gewerbe(3). Vorher listete jede Grid-Zelle nur ihre eigene Kategorie -- kurze Kategorien endeten mitten in der Spalte und hinterliessen Leerraum, waehrend die Nachbarspalte noch voll war. Nur .duo.dienst, Tools/Wissen bleiben wie bisher. */ #lexup-hdr .duo.dienst .col{min-width:0} #lexup-hdr .duo.dienst .col .grp + .grp{margin-top:12px;padding-top:6px;border-top:1px solid var(--border)} /* 🔴 28.08.2026: Suche im Leistungs-Panel — Trefferliste ohne Loecher. Ungefiltert stehen die fuenf Gruppen in drei festen .col-Spalten. Filtert die Suche eine ganze Spalte weg, blieb deren Platz als Loch stehen: bei "oldtimer" sass der einzige Treffer mittig zwischen zwei leeren Dritteln. Waehrend der Suche werden die Spalten aufgeloest — die Gruppen fliessen direkt ins Raster und fuellen von links. align-items:start verhindert, dass eine kurze Gruppe auf die Hoehe ihrer Nachbarin gestreckt wird. */ #lexup-hdr .nav-item.suchend .duo.dienst .grpcols{align-items:start} #lexup-hdr .nav-item.suchend .duo.dienst .col{display:contents} #lexup-hdr .nav-item.suchend .duo.dienst .col .grp + .grp{margin-top:0;padding-top:0;border-top:0} /* Fuss klebt am unteren Rand: Bei wenigen Treffern endete die Liste in der Mitte, Trennlinie und "Alle 25 Leistungen" schwebten im Leeren und darunter blieb eine offene Flaeche. Unten angeschlagen rahmt der Fuss das Panel in jedem Zustand. Ungefiltert aendert sich nichts — dort ist kein Platz uebrig. */ #lexup-hdr .duo.dienst .pal{display:flex;flex-direction:column} #lexup-hdr .duo.dienst .pal .pfoot{margin-top:auto} /* V6: Das Glossar ist eine bewusst durchgehende Querzeile unter dem balancierten 3-Spalten-Raster statt Inhalt einer einzelnen Spalte. */ #lexup-hdr .duo.rat .secwide{display:grid;grid-template-columns:144px minmax(0,1fr);align-items:stretch;margin:14px 10px 0;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);overflow:hidden} #lexup-hdr .duo.rat .secwide-lbl{display:flex;align-items:center;padding:14px 16px;border-right:1px solid var(--border);font:900 .6rem/1.2 'Google Sans',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)} #lexup-hdr .duo.rat .secwide-opt{width:100%;min-width:0;padding:15px 16px;border-radius:0;background:#fff} #lexup-hdr .duo.rat .secwide-opt:hover,#lexup-hdr .duo.rat .secwide-opt.is-on{background:var(--blue-tint)} #lexup-hdr .duo.rat .secwide-opt:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--blue)} /* Demo-Kontext */ #lexup-hdr .demo{max-width:1280px;margin:0 auto;padding:150px 32px 90px} /* ===== Responsive: Desktop / Laptop / Tablet (Handy = eigene Version) ===== */ @media (max-width:1180px){ #lexup-hdr .bar-in{padding:14px 22px} #lexup-hdr .navlink{padding:10px 10px} #lexup-hdr .duo{grid-template-columns:300px 1fr} #lexup-hdr .duo.tools{grid-template-columns:250px 1fr} #lexup-hdr .duo.rat{grid-template-columns:280px 1fr} #lexup-hdr .media .mh{font-size:1.5rem} #lexup-hdr .grpcols{gap:0 12px} } /* 10.08.2026: Zwischen 768 und 820 px reichten Logo (128) + Nav (447) + rechte Gruppe (159) plus Abstaende und Innenrand nicht in die Leiste - gemessen 790 px Bedarf bei 768 px Platz. Die Leiste lief 6 px ueber. Hier wird nur horizontal verdichtet, die Hoehe bleibt. */ @media (min-width:768px) and (max-width:820px){ #lexup-hdr .bar-in{gap:8px;padding-inline:12px} #lexup-hdr .navlink{padding-inline:5px} #lexup-hdr .cta{padding-inline:16px} } @media (max-width:980px){#lexup-hdr .bar-in{padding:12px 16px;gap:12px}#lexup-hdr .nav{gap:0}#lexup-hdr .navlink{padding:9px 8px;font-size:.82rem}#lexup-hdr .tel .tnum{display:none}#lexup-hdr .duo{grid-template-columns:240px 1fr}#lexup-hdr .duo.tools{grid-template-columns:230px 1fr}#lexup-hdr .duo.rat{grid-template-columns:240px 1fr}#lexup-hdr .opt .on{font-size:1rem}#lexup-hdr .media .mh{font-size:1.4rem}} @media (max-width:840px){#lexup-hdr .duo .media{display:none}#lexup-hdr .duo,#lexup-hdr .duo.tools,#lexup-hdr .duo.rat{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce){#lexup-hdr *{transition:none !important;animation:none !important}} /* ---------- Handy-Menue ---------- */ body > header.elementor-location-header, header.elementor-location-header.elementor-10, header[data-elementor-id="10"].elementor-location-header{position:sticky !important;top:0 !important;z-index:99999 !important} header[data-elementor-id="10"].elementor-location-header, header[data-elementor-id="10"].elementor-location-header .elementor-section, header[data-elementor-id="10"].elementor-location-header .elementor-container, header[data-elementor-id="10"].elementor-location-header .elementor-widget-wrap{overflow:visible !important} #lx-hdr-mount{position:sticky !important;top:0 !important;z-index:99999 !important} /* ============================================================ MOBILE-HEADER — echte Fassung (ersetzt den fruehenen Stopgap, der nur Logo + Telefon + Button hatte und KEINE Navigation). Bar bleibt schmal; das Menue liegt in einem Vollbild-Sheet. ============================================================ */ #lexup-mob{font-family:'Google Sans', system-ui, -apple-system, sans-serif;-webkit-font-smoothing:antialiased;position:relative !important;z-index:99999 !important; --m-blue:#167BFC;--m-deep:#1C3190;--m-orange:#CC5500;--m-ink:#333132;--m-navy:#0F2542; --m-border:rgba(51,49,50,.14);--m-muted:rgba(51,49,50,.68);--m-soft:#F7F7F7;--m-wa:#25D366; --m-ease:cubic-bezier(.16,1,.3,1)} #lexup-mob *{box-sizing:border-box} /* ---------- die schmale Leiste ---------- */ #lexup-mob .mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:rgba(247,247,247,.92);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:0 1px 0 rgba(51,49,50,.05)} #lexup-mob .logo{height:27px;width:auto;display:block} #lexup-mob .mbar > a{color:var(--m-ink);text-decoration:none} #lexup-mob .mlogo{display:block;font:900 1.35rem/1 'Google Sans',sans-serif;letter-spacing:-.055em;text-transform:uppercase;font-style:italic;color:var(--m-ink)} #lexup-mob .mb-right{display:flex;align-items:center;gap:9px} #lexup-mob .mb-tel{display:inline-flex;width:44px;height:44px;border-radius:99px;background:#fff;border:1px solid var(--m-border);align-items:center;justify-content:center;color:var(--m-blue);text-decoration:none;flex-shrink:0} #lexup-mob .mb-tel:active{background:var(--m-soft)} /* Burger: 44px Touch-Ziel, Linien morphen zum X */ #lexup-mob .mb-burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;border-radius:14px;background:var(--m-ink);border:0;cursor:pointer;padding:0;flex-shrink:0} #lexup-mob .mb-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .38s var(--m-ease),opacity .2s} #lexup-mob.open .mb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} #lexup-mob.open .mb-burger span:nth-child(2){opacity:0} #lexup-mob.open .mb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Menue-Sheet ---------- */ #lexup-mob .mscrim{position:fixed;inset:0;z-index:99998;background:rgba(15,37,66,.45);opacity:0;pointer-events:none;transition:opacity .32s} #lexup-mob.open .mscrim{opacity:1;pointer-events:auto} #lexup-mob .msheet{position:fixed;top:0;right:0;bottom:0;z-index:99999;width:min(92vw,400px); background:#fff;display:flex;flex-direction:column; box-shadow:-24px 0 60px -20px rgba(15,37,66,.45); transform:translateX(101%);visibility:hidden; transition:transform .46s var(--m-ease),visibility 0s linear .46s; padding-top:env(safe-area-inset-top);overscroll-behavior:contain} #lexup-mob.open .msheet{transform:none;visibility:visible; transition:transform .46s var(--m-ease)} #lexup-mob .msheet-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--m-border);flex-shrink:0} #lexup-mob .msheet-top .st{display:flex;align-items:center;gap:8px;font:800 .68rem/1 'Google Sans',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--m-muted)} #lexup-mob .msheet-top .st i{width:7px;height:7px;border-radius:50%;background:var(--m-wa)} #lexup-mob .mclose{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--m-border);background:#fff;border-radius:12px;cursor:pointer;color:var(--m-ink);padding:0} #lexup-mob .mnav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 12px 14px;display:flex;flex-direction:column} /* Akkordeon */ #lexup-mob .macc{border-bottom:1px solid var(--m-border)} #lexup-mob .macc-h{display:flex;align-items:center;justify-content:space-between;width:100%; padding:19px 8px;background:none;border:0;cursor:pointer;text-align:left; font:800 1.12rem/1.2 'Google Sans',sans-serif;color:var(--m-ink);letter-spacing:-.015em} #lexup-mob .macc-h svg{width:19px;height:19px;stroke-width:2.2;color:var(--m-muted);transition:transform .36s var(--m-ease);flex-shrink:0} #lexup-mob .macc.on .macc-h svg{transform:rotate(180deg);color:var(--m-blue)} #lexup-mob .macc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--m-ease)} #lexup-mob .macc.on .macc-b{grid-template-rows:1fr} #lexup-mob .macc-in{overflow:hidden;min-height:0} #lexup-mob .macc-in > *{margin-bottom:2px} #lexup-mob .macc a{display:block;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--m-ink)} #lexup-mob .macc a:active{background:var(--m-soft)} #lexup-mob .macc a b{display:block;font:700 .92rem/1.25 'Google Sans',sans-serif} #lexup-mob .macc a span{display:block;font:400 .78rem/1.35 'Google Sans',sans-serif;color:var(--m-muted);margin-top:2px} #lexup-mob .macc .mall{display:flex;align-items:center;gap:7px;margin:4px 0 12px;padding:11px 12px;border-radius:12px;background:var(--m-soft);font:800 .84rem/1 'Google Sans',sans-serif;color:var(--m-blue)} #lexup-mob .macc .mall svg{width:15px;height:15px;stroke-width:2.4} /* einfacher Link ohne Unterpunkte */ #lexup-mob .mlink{display:flex;align-items:center;justify-content:space-between;padding:19px 8px;border-bottom:1px solid var(--m-border);text-decoration:none;font:800 1.12rem/1.2 'Google Sans',sans-serif;color:var(--m-ink);letter-spacing:-.015em} #lexup-mob .mlink svg{width:17px;height:17px;stroke-width:2.2;color:var(--m-muted)} /* Info unter der Navigation — fuellt den Leerraum bei zugeklapptem Akkordeon mit echter Auskunft statt weisser Flaeche */ #lexup-mob .minfo{padding:24px 10px 6px;margin-top:auto;flex-shrink:0} #lexup-mob .minfo b{display:block;font:800 .84rem/1.2 'Google Sans',sans-serif;color:var(--m-ink);margin-bottom:6px} #lexup-mob .minfo span{display:block;font:400 .8rem/1.5 'Google Sans',sans-serif;color:var(--m-muted)} #lexup-mob .minfo em{display:block;font-style:normal;font:400 .74rem/1.5 'Google Sans',sans-serif;color:var(--m-muted);opacity:.8;margin-top:12px;padding-top:12px;border-top:1px dashed var(--m-border)} /* Kontaktblock unten — bleibt immer sichtbar */ #lexup-mob .mfoot{flex-shrink:0;border-top:1px solid var(--m-border);background:#fff;padding:14px 16px calc(14px + env(safe-area-inset-bottom))} #lexup-mob .mprime{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;border-radius:16px;background:var(--m-blue);color:#fff;text-decoration:none;font:800 1rem/1 'Google Sans',sans-serif;box-shadow:0 10px 24px -10px rgba(22,123,252,.42)} #lexup-mob .mprime:active{background:var(--m-deep)} #lexup-mob .mprime svg{width:17px;height:17px;stroke-width:2.4} #lexup-mob .mways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px} #lexup-mob .mways a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:13px;background:var(--m-soft);text-decoration:none;color:var(--m-ink);font:700 .72rem/1 'Google Sans',sans-serif} #lexup-mob .mways a:active{background:rgba(22,123,252,.10)} #lexup-mob .mways svg{width:18px;height:18px;stroke-width:1.9} #lexup-mob .mways .wa svg{color:var(--m-wa)} #lexup-mob .mways .tel svg{color:var(--m-blue)} #lexup-mob .mways .mail svg{color:var(--m-deep)} #lexup-mob .mmehr{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:12px;border:0;border-radius:13px;background:transparent;color:var(--m-blue);font:700 .8rem/1 'Google Sans',sans-serif;cursor:pointer} #lexup-mob .mmehr svg{width:15px;height:15px;stroke-width:2.2} #lexup-mob .mmehr:active{background:var(--m-soft)} body.lxm-lock{overflow:hidden} /* ---------- Kontakt-Popup ---------- */ #lxk .r{display:flex;align-items:center;gap:13px;padding:11px 11px;border-radius:14px;text-decoration:none;color:var(--lxk-ink);transition:background .18s,transform .24s var(--lxk-ease)} #lxk .r:hover{background:var(--lxk-soft)} #lxk .r .ic{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:var(--lxk-soft)} #lxk .r svg{width:18px;height:18px;stroke-width:1.9} #lxk .r b{display:block;font:800 .92rem/1.15 'Google Sans',sans-serif} #lxk .r .tx span{display:block;font:500 .76rem/1.2 'Google Sans',sans-serif;color:var(--lxk-muted);margin-top:2px} #lxk .r .go{margin-left:auto;color:var(--lxk-muted);opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s} #lxk .r .go svg{width:16px;height:16px;stroke-width:2.2} #lxk .r:hover .go{opacity:1;transform:none} #lxk .r[data-c="akt"]{background:var(--lxk-orange);color:#fff;margin-bottom:4px} #lxk .r[data-c="akt"] .ic{background:rgba(255,255,255,.22)} #lxk .r[data-c="akt"] .tx span{color:rgba(255,255,255,.82)} #lxk .r[data-c="akt"]:hover{background:#b34a00} #lxk .r[data-c="tel"] .ic{color:var(--lxk-blue)} #lxk .r[data-c="mail"] .ic{color:var(--lxk-navy)} #lxk .r[data-c="ber"] .ic{color:var(--lxk-deep)} /* Hervorhebung fuer die Empfehlung (20.08.2026, dritter Anlauf) -- der Leuchtstrich (::after, box-shadow blur 24px auf einer 3px-Linie) schluckte sich selbst zu einem diffusen Fleck. Explizite Ansage: keine background-color, kein box-shadow auf der Zeile. Stattdessen zwei rein typografische Signale, die unabhaengig von Form/Hintergrund der Zeile funktionieren: das Icon traegt WhatsApp-Gruen, der Titel bekommt ein umrandetes Badge (nur border, keine Flaeche). */ @media(min-width:721px){ #lxk .ways .r[data-c="wa"] .ic{color:var(--lxk-wa)} #lxk .ways .r[data-c="wa"] b{color:var(--navy);font-weight:900} #lxk .ways .r[data-c="wa"] b::after{content:"Schnellster Weg";display:inline-block; margin-left:.55rem;vertical-align:.16em;font:800 .625rem/1 'Google Sans',sans-serif; letter-spacing:.06em;text-transform:uppercase;color:#0F7A38; padding:.3rem .55rem;border:1px solid rgba(15,122,56,.55);border-radius:999px} } /* Auf der Handy-Kachel (siehe @media max-width:720px weiter unten) bleibt das bestehende Design (Icon navy auf hellblauem Grund) unangetastet -- die Kachel ist dort ueber die 2-Kachel-Vorrangposition schon eigenstaendig hervorgehoben, ein weiteres Signal waere auf der kleinen Flaeche zu viel. */ #lxk{ --ink:#333132;--navy:#0F2542;--grund:#F7F7F7; --leise:rgba(51,49,50,.70);--linie:rgba(51,49,50,.14); color:var(--ink) } #lxk,#lxk *{box-sizing:border-box} #lxk .r{border:0;border-radius:0;background:transparent;padding:0;margin:0;text-decoration:none;color:var(--ink)} #lxk .r:hover{background:transparent;transform:none} #lxk .r b{color:inherit} #lxk .r .tx{display:block;min-width:0;flex:none;gap:0} #lxk .r .tx span{color:var(--leise)} #lxk .r[data-c="akt"],#lxk .r[data-c="akt"]:hover{background:transparent;margin:0;color:var(--ink);border:0} #lxk .r[data-c="akt"] .tx span,#lxk .r[data-c="akt"] .tx b{color:var(--leise)} #lxk .r[data-c="akt"] .tx b{color:var(--ink)} #lxk .r[data-c="akt"] .ic,#lxk .r[data-c="wa"] .ic,#lxk .r[data-c="tel"] .ic, #lxk .r[data-c="mail"] .ic,#lxk .r[data-c="ber"] .ic,#lxk .r[data-c="frm"] .ic{background:transparent;color:var(--ink)} #lxk .num,#lxk .eye{display:none} /* Nachtrag 20.08.: 28% Grau liess die Seite dahinter fast lesbar -- auf kurzen Bildschirmen (Karte waechst nur mit Inhalt, kein min-height) blieb dadurch bewegter Marquee-Text und ein schwebender Button sichtbar und konkurrierte mit dem Popup. Dunkler (Navy statt Grau, passt zu .pane) und weichgezeichnet, damit der Seiteninhalt dahinter unkenntlich wird, statt die Karte kuenstlich auf volle Hoehe zu zwingen. */ #lxk-scrim{position:fixed;inset:0;z-index:98990;background:rgba(15,37,66,.5); backdrop-filter:blur(6px) saturate(.8);-webkit-backdrop-filter:blur(6px) saturate(.8); opacity:0;pointer-events:none;transition:opacity .3s} body.lxk-on #lxk-scrim{opacity:1;pointer-events:auto} #lxk{position:fixed;top:0;left:0;right:0;z-index:99000;padding-top:0;background:#fff; border:1px solid var(--linie);border-top:0;border-radius:0 0 1.5rem 1.5rem; box-shadow:0 .5rem 1rem rgba(51,49,50,.08),0 2rem 4rem rgba(51,49,50,.18); max-height:100dvh;overflow-x:hidden;overflow-y:auto;transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--lxk-ease),visibility 0s linear .5s} body.lxk-on #lxk{transform:none;visibility:visible;transition:transform .5s var(--lxk-ease)} #lxk .lxk-titel{font:800 2rem/1.08 'Google Sans',sans-serif;letter-spacing:-.036em;margin:0;color:var(--ink)} #lxk .lead{font:400 .9375rem/1.5 'Google Sans',sans-serif;color:var(--leise);margin:.625rem 0 0} #lxk .r b{display:block;font:700 .96875rem/1.2 'Google Sans',sans-serif} #lxk .sit{display:block;font:400 .75rem/1.35 'Google Sans',sans-serif;color:var(--leise)} #lxk .zu{display:block;font:500 .75rem/1.35 'Google Sans',sans-serif;color:var(--leise)} #lxk .r .ic{display:grid;place-items:center;width:1.125rem;height:1.125rem;flex-shrink:0; background:transparent;border-radius:0;transition:opacity .18s} #lxk .r .ic svg{width:1.125rem;height:1.125rem;stroke-width:1.6} #lxk .r .go{width:1rem;height:1rem;flex-shrink:0;display:grid;place-items:center;color:var(--ink); opacity:0;transform:none;transition:opacity .18s,transform .18s} #lxk .r .go svg{width:1rem;height:1rem;stroke-width:2} #lxk .r:hover .go{opacity:1;transform:translateX(.1875rem)} #lxk .lxk-close{position:absolute;right:2.5rem;top:4.75rem;width:2.25rem;height:2.25rem;display:grid;place-items:center; border:1px solid var(--linie);background:#fff;border-radius:50%;cursor:pointer;color:var(--ink); box-shadow:0 .25rem .75rem rgba(51,49,50,.1);transition:transform .3s;z-index:3} #lxk .lxk-close:hover{transform:rotate(90deg)} #lxk .lxk-close svg{width:.9375rem;height:.9375rem;stroke-width:2.2} #lxk .hint{list-style:none;margin:0;padding:1.125rem 0 0;border-top:1px solid rgba(255,255,255,.28);display:grid;gap:.5rem} #lxk .hint li{font:400 .75rem/1.4 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .hint b{font-weight:600;color:#fff} #lxk .hint span{color:rgba(255,255,255,.75)} #lxk .hint span::before{content:" → "} #lxk .in{max-width:84rem;margin:0 auto;padding:4.75rem 2.5rem 1.5rem;position:relative; display:grid;grid-template-columns:19.5rem minmax(0,1fr);gap:2.25rem;align-items:stretch} #lxk .pane{position:relative;margin:-4.75rem 0 -1.5rem -2.5rem;padding:4.75rem 2.25rem 1.5rem 2.5rem; background:var(--navy);border:0;display:flex;flex-direction:column;color:#fff} #lxk .pane::before{content:"";position:absolute;top:0;right:100%;bottom:0;width:100vw;background:var(--navy)} #lxk .pane .lxk-titel{color:#fff} #lxk .pane .lead,#lxk .pane .marke{color:rgba(255,255,255,.75)} #lxk .pane .hint{margin-top:auto;padding-top:1.25rem} #lxk .liste{padding-right:2.5rem;background:#fff} #lxk .kopf{display:grid;grid-template-columns:1.125rem minmax(0,13rem) minmax(0,1fr) minmax(0,9.5rem); gap:1rem;padding-bottom:.625rem;border-bottom:1px solid var(--ink); font:700 .75rem/1 'Google Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--leise)} #lxk .kopf span:first-child{grid-column:2} #lxk .ways .r{position:relative;display:grid;grid-template-columns:1.125rem minmax(0,13rem) minmax(0,1fr) minmax(0,9.5rem); gap:1rem;align-items:center;padding:.625rem 0;border-bottom:1px solid var(--linie); transition:background .18s,opacity .18s} #lxk .ways .r:hover{background:var(--grund)} #lxk .ways .r:hover .ic{opacity:.62} #lxk .ways .r .tx{display:contents} #lxk .ways .r b{grid-column:2} #lxk .ways .sit{grid-column:3} #lxk .ways .zu{grid-column:4;color:var(--ink);opacity:.7} #lxk .ways .r .go{display:none} #lxk .ways .r[data-c="akt"],#lxk .ways .r[data-c="akt"]:hover{background:var(--grund);color:var(--ink)} #lxk .ways .r[data-c="akt"]::before{content:"";position:absolute;left:-.5rem;top:50%;width:.1875rem;height:1.125rem; border-radius:.1875rem;background:var(--ink);transform:translateY(-50%)} #lxk .ways .r[data-c="akt"] .ic,#lxk .ways .r[data-c="akt"] b{color:var(--ink)} #lxk .marke{display:flex;align-items:center;gap:.5rem;margin-top:1rem; font:500 .75rem/1.4 'Google Sans',sans-serif;color:var(--leise)} #lxk .marke::before{content:"";width:.375rem;height:.375rem;flex:0 0 .375rem;border-radius:50%;background:#fff} @media(max-width:1240px){ #lxk .kopf,#lxk .ways .r{grid-template-columns:1.125rem minmax(0,10.5rem) minmax(0,1fr);align-items:start} #lxk .kopf span:last-child{display:none} #lxk .ways .zu{grid-column:3;margin-top:.1875rem} } @media(max-width:1100px){ #lxk{padding-top:0} #lxk .in{grid-template-columns:1fr;gap:1.5rem;padding:4.5rem 1.5rem 1.5rem} #lxk .pane{margin:-4.5rem -1.5rem 0;padding:4.5rem 4.5rem 1.5rem 1.5rem} #lxk .pane .hint{margin-top:1rem} #lxk .liste{padding-right:0} #lxk .lxk-titel{font-size:1.875rem} #lxk .lxk-close{right:1.5rem;top:4.25rem} } @media(max-width:720px){ #lxk .kopf{grid-template-columns:1.125rem minmax(0,1fr)} #lxk .kopf span:first-child{grid-column:2} #lxk .kopf span:not(:first-child){display:none} #lxk .ways .r{grid-template-columns:1.125rem minmax(0,1fr);gap:.75rem;padding:.75rem 0} #lxk .ways .r b,#lxk .ways .sit,#lxk .ways .zu{grid-column:2} #lxk .ways .sit,#lxk .ways .zu{margin-top:.125rem} } /* Nachtrag: Innenabstand oben war wieder auf 11px geschrumpft. */ #lxk .in{padding-top:6.5rem} #lxk .pane{margin-top:-6.5rem;padding-top:6.5rem} #lxk .lxk-close{top:6.5rem} @media(max-width:1100px){#lxk .in{padding-top:5.5rem}#lxk .pane{margin-top:-5.5rem;padding-top:5.5rem}} /* Nachtrag: wird das Blatt hoeher als der Bildschirm, muss es scrollen. overflow-x bleibt hidden - sonst laeuft die randlose Flaeche aus. */ #lxk{max-height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch} /* ============================================================ Nachtrag 03.08.: Seitenflucht, mehr Luft, neuer Schliesser ============================================================ */ /* 1) Flucht: Der Header-Container ist 76rem breit und zentriert - das Logo sitzt bei 112px. Das Popup lag mit 84rem und seitlichem Innenmass 24px daneben. Jetzt dieselbe Breite, kein seitliches Innenmass: der Text beginnt exakt auf der Logo-Kante, die Tabelle endet auf der Gegenkante. */ /* 4) Nachtrag 20.08.: die 5.5rem hier waren eine geratene Kopf-Clearance aus der Zeit vor lx-header.js:kopfhoeheSetzen(). Seit die Funktion die echte Kopfhoehe misst und #lxk per Inline-Style exakt darunter positioniert (#lxk{padding-top:0} oben), ist dieser Wert reiner visueller Innenabstand -- nicht mehr Header-Clearance. 5.5rem+2rem=120px Leerraum waren dadurch doppelt gerechnet. Runter auf 2rem (mit .pane/.lxk-close mitgezogen, da deren Werte an diesem hier haengen). */ #lxk .in{max-width:76rem;padding:2rem 0 3rem;gap:2rem; grid-template-columns:21rem minmax(0,1fr)} #lxk .pane{margin:-2rem 0 -3rem 0;padding:2rem 3rem 3rem 0} #lxk .liste{padding-right:0;padding-top:1.5rem} /* 2) Nachtrag 20.08.: "mehr Luft" war zu viel Luft geworden -- Kopfabstand und Zeilenhoehe zurueck auf die Werte von vor diesem Block, nur die Seitenflucht (1) und der Schliesser (3) bleiben. */ #lxk .kopf{padding-bottom:.625rem} #lxk .ways .r{padding:.625rem 0} #lxk .pane .hint{padding-top:1.25rem} #lxk .hint{gap:.75rem} #lxk .hint li{line-height:1.55} #lxk .lead{margin-top:.875rem} /* 4) Nachtrag 20.08.: die Erreichbarkeits-Zeile (JS fuegt sie zwischen den Dialogtitel und .lead ein, lx-header.js "statusInDieUebersicht") war nur innerhalb @media(max-width:720px) gestylt -- auf dem Desktop fiel sie mangels font-family auf die Browser-Serifenschrift zurueck, der Punkt blieb unsichtbar (0x0 ohne eigene Masse). Eigene, zur dunklen .pane passende Fassung statt der mobilen weissen Pille. */ #lxk .lxk-status{display:flex;align-items:center;gap:.5rem;margin-top:.875rem; font:600 .8125rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .lxk-status .pkt{width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto; background:#34D17B;box-shadow:0 0 0 .25rem rgba(52,209,123,.2)} #lxk .lxk-status.aus .pkt{background:rgba(255,255,255,.35);box-shadow:none} #lxk .lxk-status em{font-style:normal;font-weight:500;color:rgba(255,255,255,.62)} /* 3) Schliesser: gefuellte Flaeche statt duenner Kontur, groesseres Ziel, beim Ueberfahren kippt er auf Navy und dreht nur das Kreuz. */ #lxk .lxk-close{right:0;top:2rem;width:2.75rem;height:2.75rem;border:0; background:var(--grund);color:var(--ink);border-radius:50%; box-shadow:0 1px 2px rgba(15,37,66,.06),0 .5rem 1.25rem -.625rem rgba(15,37,66,.3); transition:background .22s var(--lxk-ease),color .22s var(--lxk-ease), box-shadow .22s var(--lxk-ease),transform .18s var(--lxk-ease)} #lxk .lxk-close svg{width:1.0625rem;height:1.0625rem;stroke-width:2.2; transition:transform .35s var(--lxk-ease)} #lxk .lxk-close:hover{background:var(--navy);color:#fff;transform:none; box-shadow:0 2px 4px rgba(15,37,66,.14),0 .875rem 1.875rem -.75rem rgba(15,37,66,.55)} #lxk .lxk-close:hover svg{transform:rotate(90deg)} #lxk .lxk-close:active{transform:scale(.94)} html.lxk-kbd #lxk .lxk-close:focus-visible{outline:2px solid var(--navy);outline-offset:3px} @media(max-width:1100px){ #lxk .in{padding:6.5rem 1.75rem 2.25rem;gap:1.75rem} #lxk .pane{margin:-6.5rem -1.75rem 0;padding:6.5rem 1.75rem 1.75rem} #lxk .liste{padding-top:1.75rem} #lxk .lxk-close{right:1.25rem;top:5rem} } /* ============================================================ Nachtrag 03.08. (2): Spalte "Gut zu wissen" entfernt, Schliesser blau ============================================================ */ /* Das Raster hatte vier Spalten - die vierte ist weg, die Erklaerung bekommt die freie Breite. */ #lxk .kopf,#lxk .ways .r{grid-template-columns:1.125rem minmax(0,15rem) minmax(0,1fr)} #lxk .zu{display:none} /* Nachtrag 20.08.: Primaerblau widersprach dem Prinzip, das der spaetere Kommentar bei der Mobile-Fassung selbst festhaelt -- "Blau heisst hier geht es weiter, der einzige Knopf der nichts erledigt soll den Blick nicht holen". Bisher galt die neutrale Fassung nur mobil/touch, hier auf allen Breiten dieselbe ruhige Variante. */ #lxk .lxk-close{background:var(--grund);color:var(--ink);box-shadow:none} #lxk .lxk-close:hover{background:rgba(15,37,66,.1);color:var(--ink)} html.lxk-kbd #lxk .lxk-close:focus-visible{outline:2px solid var(--blau);outline-offset:3px} @media(max-width:1240px){ #lxk .kopf,#lxk .ways .r{grid-template-columns:1.125rem minmax(0,12rem) minmax(0,1fr)} #lxk .kopf span:last-child{display:inline} } /* ============================================================ Nachtrag 03.08. (3): graues Hover raus, Marker-Strich raus, Icons groesser und in Primaerblau ============================================================ */ /* Das graue Hoverfeld lief nur ueber den Rasterbereich und wirkte dadurch angeschnitten. Ersetzt durch eine Reaktion ohne Flaeche: das Icon wird dunkler, die Bezeichnung bekommt eine Unterlaenge. */ #lxk .ways .r:hover,#lxk .ways .r[data-c="akt"],#lxk .ways .r[data-c="akt"]:hover{background:transparent} #lxk .ways .r:hover .ic{opacity:1;color:var(--navy)} /* Der Strich links neben "Schaden melden" faellt weg. */ #lxk .ways .r[data-c="akt"]::before{display:none} /* Icons: groesser und in Primaerblau, Strichstaerke dafuer etwas feiner. */ #lxk .ways .r .ic{width:1.625rem;height:1.625rem;color:var(--blau);opacity:1} #lxk .ways .r .ic svg{width:1.625rem;height:1.625rem;stroke-width:1.5} #lxk .kopf,#lxk .ways .r{grid-template-columns:1.625rem minmax(0,15rem) minmax(0,1fr)} #lxk .kopf span:first-child{grid-column:2} @media(max-width:1240px){ #lxk .kopf,#lxk .ways .r{grid-template-columns:1.625rem minmax(0,12rem) minmax(0,1fr)} } /* Der Tokenblock dieser Fassung kennt kein --blau. Ohne die Definition fallen background/color auf den vorigen Wert zurueck - der Schliesser blieb weiss, die Icons dunkel. */ #lxk{--blau:#167BFC} /* Das Icon des ersten Weges hatte eine eigene, staerkere Regel und blieb dadurch dunkel. */ #lxk .ways .r[data-c="akt"] .ic{color:var(--blau)} /* --- Hover: Tausch --- */ /* Der bisherige Hover (Unterstrich, Icon dunkler) wird abgeraeumt. */ #lxk .ways .r:hover b{text-decoration:none} #lxk .ways .r,#lxk .ways .r:hover{background:transparent} #lxk .ways .r{perspective:600px} #lxk .ways .r .ic{transform-origin:center; transition:transform .3s var(--lxk-ease),opacity .18s ease,color .2s ease} #lxk .ways .r:hover .ic,html.lxk-kbd #lxk .ways .r:focus-visible .ic{ opacity:0;transform:rotateY(90deg) scale(.85)} /* Der Pfeil sitzt exakt auf dem Platz des Icons. */ #lxk .ways .r .go{display:grid;place-items:center;position:absolute;left:0;top:50%; width:1.625rem;height:1.625rem;color:var(--blau);pointer-events:none; opacity:0;transform:translateY(-50%) rotateY(-90deg) scale(.85); transition:opacity .2s ease .06s,transform .36s cubic-bezier(.34,1.56,.64,1) .06s} #lxk .ways .r .go svg{width:1.5rem;height:1.5rem;stroke-width:2.1} #lxk .ways .r:hover .go,html.lxk-kbd #lxk .ways .r:focus-visible .go{ opacity:1;transform:translateY(-50%) rotateY(0deg) scale(1)} /* Die Bezeichnung folgt dem Richtungswechsel mit leichtem Nachschwingen. */ #lxk .ways .r b,#lxk .ways .r .sit{transition:transform .36s cubic-bezier(.34,1.56,.64,1)} #lxk .ways .r:hover b,html.lxk-kbd #lxk .ways .r:focus-visible b{transform:translateX(.5rem)} #lxk .ways .r:hover .sit,html.lxk-kbd #lxk .ways .r:focus-visible .sit{transform:translateX(.25rem)} @media (prefers-reduced-motion: reduce){ #lxk .ways .r .ic,#lxk .ways .r .go,#lxk .ways .r b,#lxk .ways .r .sit{transition-duration:.01ms} #lxk .ways .r:hover .ic{opacity:1;transform:none;color:var(--navy)} #lxk .ways .r:hover .go{opacity:0} #lxk .ways .r:hover b,#lxk .ways .r:hover .sit{transform:none} } /* --- Linke Spalte: was du bereithalten solltest --- */ #lxk .pane .lead{max-width:20rem} #lxk .mit{margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.16); display:flex;flex-direction:column;flex:1} #lxk .mit .mitkopf{margin:0;font:600 .75rem/1.4 'Google Sans',sans-serif;letter-spacing:.09em; text-transform:uppercase;color:rgba(255,255,255,.6)} #lxk .mitliste{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0} #lxk .mitliste li{position:relative;padding:.6875rem 0 .6875rem 1.5rem; font:500 .9375rem/1.4 'Google Sans',sans-serif;color:#fff; border-bottom:1px solid rgba(255,255,255,.12)} #lxk .mitliste li:first-child{border-top:1px solid rgba(255,255,255,.12)} /* Ein feiner Haken statt eines Aufzaehlungspunkts. */ #lxk .mitliste li::before{content:"";position:absolute;left:.0625rem;top:1.0625rem; width:.5rem;height:.3125rem;border-left:1.5px solid rgba(255,255,255,.55); border-bottom:1.5px solid rgba(255,255,255,.55);transform:rotate(-45deg)} #lxk .mitfuss{margin:auto 0 0;padding-top:1.25rem; font:400 .8125rem/1.5 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} @media(max-width:1100px){ #lxk .mit{margin-top:1.5rem;padding-top:1.25rem} #lxk .mitfuss{margin-top:1.25rem} } /* --- Handy und Tablet --------------------------------------------------- Die Nachtraege weiter oben stehen im Stylesheet NACH den urspruenglichen Media-Queries und haben deren Einspaltigkeit ueberschrieben. Folge: unter 1100px behielt das Gitter 21rem fuer die dunkle Spalte und die rechte bekam 0px - die sechs Wege waren auf dem Handy unsichtbar. Dieser Block steht am Ende und holt die Einspaltigkeit zurueck. */ @media(max-width:1100px){ /* Nachtrag 20.08.: dieselbe Doppelspaltung wie Desktop (siehe Kommentar bei #lxk .in weiter oben) -- 5.5rem waren geratene Kopf-Clearance, obsolet seit lx-header.js:kopfhoeheSetzen() misst. Runter auf 2rem. */ #lxk .in{max-width:none;grid-template-columns:minmax(0,1fr);gap:0; padding:2rem 1.5rem 2rem} #lxk .pane{margin:-2rem -1.5rem 0;padding:2rem 1.5rem 1.75rem} #lxk .pane::before{display:none} #lxk .liste{padding:1.75rem 0 0} #lxk .lxk-close{right:1.5rem;top:2rem;width:2.5rem;height:2.5rem} #lxk .lxk-titel{font-size:1.625rem;padding-right:3.5rem} #lxk .lead{max-width:none} } @media(max-width:720px){ /* Wer gerade einen Unfall hatte, braucht zuerst den Weg. Die Checkliste stuende sonst vor den sechs Moeglichkeiten und schoebe sie aus dem Bild. */ #lxk .pane .mit{display:none} #lxk .kopf,#lxk .ways .r{grid-template-columns:1.625rem minmax(0,1fr)} #lxk .kopf span:last-child{display:none} #lxk .ways .sit{grid-column:2;margin-top:.25rem} #lxk .ways .r{align-items:start;padding:.875rem 0} } /* Ohne Zeigegeraet gibt es keinen Hover - dann bleibt das Wege-Icon stehen, statt sich gegen den Pfeil zu tauschen. */ @media(hover:none){ #lxk .ways .r .go{display:none} #lxk .ways .r:hover .ic,#lxk .ways .r .ic{opacity:1;transform:none} } /* --- Ebene 2: gemeinsame Bauteile --- */ #lxk .d2[hidden]{display:none} #lxk .d2k{display:flex;align-items:center;gap:1.125rem;margin:0 0 .625rem;flex-wrap:wrap} #lxk .zur2{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;flex:none; padding:0 .875rem 0 .6875rem;border-radius:1.25rem;cursor:pointer; font:700 .8125rem/1 'Google Sans',sans-serif;transition:background .18s,border-color .18s} #lxk .zur2 svg{width:1rem;height:1rem;stroke-width:2;transition:transform .22s} #lxk .zur2:hover svg{transform:translateX(-.1875rem)} #lxk .d2h{margin:0;font:800 1.75rem/1.1 'Google Sans',sans-serif;letter-spacing:-.035em} #lxk .d2s{margin:0 0 1.375rem;max-width:34rem; font:400 .9375rem/1.5 'Google Sans',sans-serif} #lxk .fgit{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.125rem;max-width:36rem} #lxk .f2{display:block;min-width:0} #lxk .f2.weit{grid-column:1/-1} #lxk .f2k{display:block;margin:0 0 .375rem;font:700 .8125rem/1.3 'Google Sans',sans-serif} #lxk .f2 input,#lxk .f2 textarea,#lxk .f2 select{width:100%;min-height:2.75rem; padding:.625rem .875rem;border-radius:.625rem;background:#fff;color:var(--ink); font:500 .9375rem/1.4 'Google Sans',sans-serif;border:1px solid var(--linie)} #lxk .f2 textarea{min-height:4.5rem;resize:vertical} #lxk .f2 select{cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333132' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .75rem center;background-size:1.125rem; padding-right:2.5rem} #lxk .f2 [aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E} /* Die Fehlerzeile beansprucht erst Platz, wenn sie etwas zu sagen hat. */ #lxk .f2f{display:block;margin:0;font:600 .75rem/1.3 'Google Sans',sans-serif;color:#B3261E} #lxk .f2f:not(:empty){margin-top:.3125rem} #lxk .d2akt{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem} #lxk .snd2,#lxk .kopf2{display:inline-flex;align-items:center;justify-content:center; min-height:2.875rem;padding:0 1.375rem;border:0;border-radius:1.5rem;cursor:pointer; background:var(--blau);color:#fff;font:700 .875rem/1 'Google Sans',sans-serif; transition:background .18s,transform .18s} #lxk .snd2:hover,#lxk .kopf2:hover{background:var(--navy)} #lxk .snd2:active,#lxk .kopf2:active{transform:scale(.97)} #lxk .snd2:disabled{opacity:.6;cursor:wait} #lxk .sndst,#lxk .kopfst{font:600 .8125rem/1.4 'Google Sans',sans-serif} #lxk .ehrl{margin:.75rem 0 0;max-width:32rem; font:400 .8125rem/1.5 'Google Sans',sans-serif} /* --- 18: Anrufen am Rechner ------------------------------------------------ Die grosse Rufnummer ist ersetzt. Sie stand schon im Header und in der Wegezeile; ein drittes Mal bringt sie niemanden ans Telefon. Jetzt steht hier, was am Rechner wirklich traegt: der QR-Code als Bruecke ins Handy, eine ehrlich gerechnete Erreichbarkeit und "wir rufen dich an" als Weg ohne Telefon in der Hand. */ #lxk .d2 .tstat{display:flex;align-items:center;gap:.625rem;margin:-.25rem 0 1.375rem; font:500 .9375rem/1.45 'Google Sans',sans-serif;color:rgba(255,255,255,.85)} #lxk .d2 .tstat strong{font-weight:700;color:#fff} #lxk .d2 .tdot{flex:none;width:.625rem;height:.625rem;border-radius:50%;background:#fff} #lxk .d2 .tdot.aus{width:.375rem;height:.375rem;background:transparent; border:2px solid rgba(255,255,255,.6)} #lxk .d2 .telgit{display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap} #lxk .d2 .qrt-bild{flex:none;display:block;background:#fff;color:var(--navy); border-radius:1.25rem;box-shadow:0 .75rem 2rem rgba(0,0,0,.3)} #lxk .d2 .qrt-bild svg{display:block;width:100%;height:100%} #lxk .d2 .qrt-seite{flex:1 1 16rem;min-width:0}#lxk .d2 .telgit .qrt-bild{width:15rem;height:15rem;padding:.5rem} #lxk .d2 .tschritte{list-style:none;margin:.25rem 0 0;padding:0;display:grid; gap:1.125rem;counter-reset:ts} #lxk .d2 .tschritte li{position:relative;padding-left:2.75rem;counter-increment:ts} #lxk .d2 .tschritte li::before{content:counter(ts);position:absolute;left:0;top:.125rem; width:1.75rem;height:1.75rem;border-radius:50%;background:var(--blau);color:#fff; display:flex;align-items:center;justify-content:center; font:700 .875rem/1 'Google Sans',sans-serif} #lxk .d2 .tschritte b{display:block;font:700 1rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .d2 .tschritte span{display:block;margin-top:.125rem; font:400 .875rem/1.45 'Google Sans',sans-serif;color:rgba(255,255,255,.72)} #lxk .d2 .tzweit{margin-top:1.75rem;padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.22);max-width:38rem} #lxk .d2 .tzw-h{margin:0 0 1rem;font:700 1.125rem/1.35 'Google Sans',sans-serif;color:#fff} #lxk .d2 .tfgit{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap} #lxk .d2 .tfgit .f2{flex:1 1 15rem} #lxk .d2 .tfbtn{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} html.lxk-kbd #lxk .zur2:focus-visible,html.lxk-kbd #lxk .snd2:focus-visible,html.lxk-kbd #lxk .kopf2:focus-visible,html.lxk-kbd #lxk .f2 :focus-visible{outline:2px solid var(--blau);outline-offset:2px} @media(max-width:720px){ #lxk .d2k{gap:.75rem} #lxk .d2h{font-size:1.4375rem} #lxk .d2s{margin-bottom:1rem} #lxk .fgit{grid-template-columns:1fr;gap:.625rem;max-width:none} #lxk .f2.weit{grid-column:auto} #lxk .snd2,#lxk .kopf2{width:100%} /* Spezifitaet wie die Varianten-Regeln oben, sonst gewinnen die. */ #lxk .d2 .telgit{gap:1.25rem} #lxk .d2 .telgit .qrt-bild{width:13.5rem;height:13.5rem;padding:1.75rem} #lxk .d2 .tfgit{flex-direction:column;align-items:stretch} #lxk .d2 .tfbtn .snd2{width:100%} } /* --- 17a: die dunkle Spalte uebernimmt --- */ /* Die Spaltenbreiten NICHT animieren - das rechnet der Browser in jedem Einzelbild neu und ruckelt. Der Wechsel wird ueber Transparenz weich. */ #lxk .in{transition:none} #lxk .liste,#lxk .pane{transition:opacity .28s ease} #lxk.st2 .in{grid-template-columns:minmax(0,1fr) 17rem} #lxk.st2 .pane .mit{display:none} #lxk.st2 .pane .lxk-titel,#lxk.st2 .pane .lead{display:none} #lxk .d2{color:#fff} #lxk .d2 .zur2{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff} #lxk .d2 .zur2:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} #lxk .d2 .d2h{color:#fff} #lxk .d2 .d2s,#lxk .d2 .ehrl{color:rgba(255,255,255,.75)} #lxk .d2 .f2k{color:#fff} #lxk .d2 .f2f{color:#FFB4AB} #lxk .d2 .f2 [aria-invalid="true"]{border-color:#FFB4AB;box-shadow:0 0 0 1px #FFB4AB} /* 18: Die Anruf-Bausteine sind weiter oben direkt fuer die dunkle Spalte gesetzt - hier gab es nur die alte Nummernkarte zu faerben. */ #lxk .d2 .sndst,#lxk .d2 .kopfst{color:rgba(255,255,255,.82)} #lxk .d2 .sndst.gut,#lxk .d2 .kopfst.gut{color:#fff} #lxk .d2 .snd2,#lxk .d2 .kopf2{background:#fff;color:var(--navy)} #lxk .d2 .snd2:hover,#lxk .d2 .kopf2:hover{background:rgba(255,255,255,.86)} #lxk .d2 .fgit{max-width:38rem} /* Rechts bleibt die Spur: nur noch die Titel, der gewaehlte Weg markiert. */ #lxk.st2 .liste .kopf{opacity:0;pointer-events:none} #lxk.st2 .ways .r .sit{display:none} #lxk.st2 .ways .r{opacity:.42;transition:opacity .3s} #lxk.st2 .ways .r:hover{opacity:.8} #lxk.st2 .ways .r.gewaehlt{opacity:1} #lxk.st2 .ways .r.gewaehlt b{color:var(--blau)} @media(max-width:1100px){ /* Sobald gestapelt wird, laege die Spur unter dem Formular - dort hilft sie niemandem und kostet nur Hoehe. Der gewaehlte Weg steht in der Ueberschrift. */ #lxk.st2 .in{grid-template-columns:1fr} #lxk.st2 .liste{display:none} #lxk.st2 .pane{padding-bottom:2rem} } /* --- Runde 19: dieselbe Sprache fuer alle sechs Wege --- */ #lxk .d2 .wawahl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1.25rem} #lxk .d2 .wawahl-k{font:700 .8125rem/1 'Google Sans',sans-serif;color:rgba(255,255,255,.75);margin-right:.25rem} #lxk .d2 .wapill{min-height:2.25rem;padding:0 .875rem;border-radius:1.125rem;cursor:pointer; border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff; font:600 .8125rem/1 'Google Sans',sans-serif;transition:background .18s,border-color .18s} #lxk .d2 .wapill:hover{background:rgba(255,255,255,.12)} #lxk .d2 .wapill.an{background:#fff;color:var(--navy);border-color:#fff} #lxk .d2 .wavor{margin:0 0 1rem;padding:.75rem .875rem;border-radius:.625rem; background:rgba(255,255,255,.09);border-left:2px solid rgba(255,255,255,.4); font:400 .875rem/1.5 'Google Sans',sans-serif;color:#fff;max-width:26rem} #lxk .d2 .wknopfe{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1.25rem} #lxk .d2 .wknopf{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem; padding:0 1.25rem;border:0;border-radius:1.375rem;cursor:pointer;text-decoration:none; background:#fff;color:var(--navy);font:700 .875rem/1 'Google Sans',sans-serif; transition:background .18s,transform .18s} #lxk .d2 .wknopf:hover{background:rgba(255,255,255,.86)} #lxk .d2 .wknopf:active{transform:scale(.97)} #lxk .d2 .wknopf.leise{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)} #lxk .d2 .wknopf.leise:hover{background:rgba(255,255,255,.12)} #lxk .d2 .wagehoert{margin:1.25rem 0 .5rem;font:700 .8125rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .d2 .wliste{list-style:none;margin:0;padding:0;display:grid;gap:.375rem} #lxk .d2 .wliste li{position:relative;padding-left:1.125rem; font:400 .875rem/1.45 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .d2 .wliste li::before{content:"";position:absolute;left:0;top:.5rem;width:.3125rem;height:.3125rem; border-radius:50%;background:rgba(255,255,255,.5)} #lxk .d2 .waleise{margin:.75rem 0 0;font:400 .8125rem/1.5 'Google Sans',sans-serif; color:rgba(255,255,255,.75);max-width:26rem} html.lxk-kbd #lxk .d2 .wknopf:focus-visible{outline:2px solid #fff;outline-offset:2px} html.lxk-kbd #lxk .d2 .wapill:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Die WhatsApp-Codes sind mit 49 Modulen viel dichter als der Telefoncode - unter dieser Groesse wird das Scannen wacklig. */ #lxk .d2 .telgit .qrt-bild{width:13.5rem;height:13.5rem;padding:.375rem} #lxk.st2 .ways .r{padding:.3125rem 0} #lxk.st2 .liste{padding-top:1.5rem} #lxk .d2 .wagehoert{margin:0 0 .5rem} #lxk .d2 .wknopfe{margin-top:1rem} @media(max-width:900px){ #lxk .d2 .telgit .qrt-bild{width:12rem;height:12rem} #lxk .d2 .wknopfe .wknopf{flex:1 1 12rem} } /* Am Handy oeffnet jeder Weg direkt, was er soll - ein Code fuer das eigene Geraet waere sinnlos. */ @media(max-width:720px),(hover:none) and (pointer:coarse){ #lxk .d2 .telgit .qrt-bild{display:none} #lxk .d2 .telgit{display:block} } /* --- Runde 20: Beratung und Rueckruf --- */ #lxk .d2 .fragen{margin:0;display:grid;gap:.625rem} #lxk .d2 .fragen dt{font:700 .875rem/1.35 'Google Sans',sans-serif;color:#fff} #lxk .d2 .fragen dd{margin:.125rem 0 0;font:400 .8125rem/1.5 'Google Sans',sans-serif; color:rgba(255,255,255,.75);max-width:28rem} /* Rueckruf: die Zeitwahl traegt links, das Formular steht rechts. */ #lxk .d2 .rgit{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:2.5rem;align-items:start} #lxk .d2 .zwahl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:.125rem} #lxk .d2 .zk{display:grid;gap:.125rem;padding:.625rem .375rem;border-radius:.625rem;cursor:pointer; border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;text-align:center; transition:background .18s,border-color .18s,transform .18s} #lxk .d2 .zk:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)} #lxk .d2 .zk.an{background:#fff;color:var(--navy);border-color:#fff} #lxk .d2 .zk-t{font:700 .8125rem/1.2 'Google Sans',sans-serif} #lxk .d2 .zk-z{font:500 .75rem/1.2 'Google Sans',sans-serif;opacity:.78} html.lxk-kbd #lxk .d2 .zk:focus-visible{outline:2px solid #fff;outline-offset:2px} #lxk .d2 .frm2.rueck .fgit{grid-template-columns:1fr;gap:.75rem;max-width:22rem} #lxk .d2 .zusammen{margin:.875rem 0 0;font:400 .875rem/1.5 'Google Sans',sans-serif; color:rgba(255,255,255,.75)} #lxk .d2 .zusammen b{color:#fff;font-weight:700} #lxk .d2 .dshin{margin:.5rem 0 0;max-width:26rem; font:400 .75rem/1.5 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .d2 .dshin a{color:#fff;text-decoration:underline;text-underline-offset:.125rem} #lxk .d2 .dshin a:hover{text-decoration-thickness:2px} @media(max-width:900px){ #lxk .d2 .rgit{grid-template-columns:1fr;gap:1.5rem} #lxk .d2 .zwahl{grid-template-columns:1fr 1fr 1fr} } @media(max-width:520px){ #lxk .d2 .zwahl{grid-template-columns:1fr 1fr} } /* --- Runde 21: ein Muster fuer alle Zustaende --- */ /* Der Zusatz sitzt unter dem Gitter, nicht neben dem Code - so bleibt die Anleitung immer auf gleicher Hoehe wie die Kachel. */ #lxk .d2 .zusatz{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.2)} #lxk .d2 .zusatz .wagehoert{margin:0 0 .5rem} #lxk .d2 .zusatz .wavor{margin:0 0 1rem} #lxk .d2 .zusatz .wknopfe{margin-top:1rem} #lxk .d2 .zusatz .waleise{margin-top:.75rem} #lxk .d2 .rlinks .tschritte{margin-top:1.25rem;padding-top:1.125rem; border-top:1px solid rgba(255,255,255,.2)} /* Die Schritte neben dem Code duerfen die Kachelhoehe nicht sprengen. */ #lxk .d2 .telgit .tschritte{gap:.75rem} #lxk .d2 .fragen{gap:.5rem} @media(max-width:900px){ #lxk .d2 .zusatz{margin-top:1.25rem;padding-top:1rem} } /* --- Runde 22: alles nebeneinander --- */ /* Code, Anleitung und das Besondere stehen in einer Reihe. Untereinander waeren es zwei Bildschirmhoehen. */ #lxk .d2 .telgit.drei{display:grid; grid-template-columns:auto minmax(0,16rem) minmax(0,1fr); gap:1.75rem;align-items:start} #lxk .d2 .telgit.drei .dazu{padding-left:1.75rem;border-left:1px solid rgba(255,255,255,.2);min-width:0} #lxk .d2 .dazuk{margin:0 0 .625rem;font:700 .8125rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .d2 .dazu .wavor{margin:0 0 1rem} #lxk .d2 .dazu .wknopfe{margin-top:1rem;gap:.625rem} #lxk .d2 .dazu .wknopf{min-height:2.5rem;padding:0 .875rem;font-size:.8125rem;white-space:nowrap} #lxk .d2 .dazu .waleise{margin-top:.75rem} #lxk .d2 .dazu .fragen dd{max-width:none} /* Der Zusatzblock von Runde 21 wird nicht mehr gebraucht. */ #lxk .d2 .zusatz{margin:0;padding:0;border:0} @media(max-width:1240px){ /* Zu dritt zu eng - dann traegt die Anleitung unter dem Code. */ #lxk .d2 .telgit.drei{grid-template-columns:auto minmax(0,1fr);gap:1.5rem 2rem} #lxk .d2 .telgit.drei .dazu{grid-column:1/-1;padding-left:0;padding-top:1.25rem; border-left:0;border-top:1px solid rgba(255,255,255,.2)} } @media(max-width:720px),(hover:none) and (pointer:coarse){ #lxk .d2 .telgit.drei{grid-template-columns:1fr} #lxk .d2 .telgit.drei .dazu{grid-column:auto} } /* --- Runde 23: eine Anordnung fuer alle --- */ /* Die Wahl steht jetzt in der dritten Spalte, also untereinander statt nebeneinander. */ #lxk .d2 .dazu .wawahl{display:grid;gap:.375rem;margin:0 0 1rem} #lxk .d2 .dazu .wapill{text-align:left;justify-content:flex-start} #lxk .d2 .dazu .wawahl-k{display:none} /* Die Zeitwahl steht an der Stelle des Codes und ist genauso breit. */ #lxk .d2 .zkachel{width:13rem;flex:none} /* Spaltenweise fuellen, damit "heute" und "morgen" je eine Spalte bilden - zeilenweise stuende "heute abends" neben "morgen vormittags". */ #lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto); grid-auto-flow:column;gap:.375rem;margin-top:0} #lxk .d2 .zkachel .zk{padding:.5rem .25rem} #lxk .d2 .grossnum{margin:.5rem 0 0;font:800 1.5rem/1.1 'Google Sans',sans-serif; letter-spacing:-.03em;font-variant-numeric:tabular-nums} #lxk .d2 .grossnum a{color:#fff;text-decoration:none} #lxk .d2 .grossnum a:hover{text-decoration:underline;text-underline-offset:.1875rem} #lxk .d2 .dazu .frm2.rueck .fgit{max-width:none;gap:.625rem} #lxk .d2 .dazu .zusammen{margin-top:.75rem} #lxk .d2 .dazu .ehrl,#lxk .d2 .dazu .dshin{max-width:none} /* Der alte Rueckruf-Sonderweg wird nicht mehr gebraucht. */ #lxk .d2 .rgit{display:block} @media(max-width:1240px){ #lxk .d2 .zkachel{width:auto} #lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto;grid-auto-flow:row} #lxk .d2 .dazu .wawahl{grid-template-columns:1fr 1fr 1fr} } @media(max-width:520px){ #lxk .d2 .dazu .wawahl,#lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr; grid-template-rows:auto;grid-auto-flow:row} } /* --- Runde 24: Rueckruf per SMS oder E-Mail --- */ /* Die Zeitwahl steht jetzt rechts bei den Wegen, weil sie deren Text bestimmt. */ #lxk .d2 .dazu .zwahl{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto); grid-auto-flow:column;gap:.375rem;margin:0 0 1rem} #lxk .d2 .dazu .zk{padding:.5rem .375rem} #lxk .d2 .dazu .dshin{margin-top:.75rem} /* Ohne Formular wird der alte Sonderweg nicht mehr gebraucht. */ #lxk .d2 .zkachel{display:none} @media(max-width:1240px){ #lxk .d2 .dazu .zwahl{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-auto-flow:row} } @media(max-width:520px){ #lxk .d2 .dazu .zwahl{grid-template-columns:1fr 1fr} } /* --- Runde 25: Rueckruf mit Formular und echtem Ziel --- */ #lxk .d2 .honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} #lxk .d2 .dazu .frm2.rueck{margin-top:.25rem} #lxk .d2 .dazu .frm2.rueck .fgit{grid-template-columns:1fr;gap:.625rem;max-width:none} #lxk .d2 .qrhint{margin:1rem 0 0;padding-top:.875rem;border-top:1px solid rgba(255,255,255,.2); font:400 .8125rem/1.5 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .d2 .qrhint b{color:#fff;font-weight:700} #lxk .d2 .txtlink{color:#fff;text-decoration:underline;text-underline-offset:.125rem} #lxk .d2 .dazu .waleise{margin-top:.75rem} /* --- Runde 26: Rueckruf ohne Scan-Code --- */ /* Die Zeitwahl steht wieder links an der Stelle des Codes. */ #lxk .d2 .zkachel{display:block;width:13rem;flex:none} #lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto); grid-auto-flow:column;gap:.375rem;margin:0} #lxk .d2 .zkachel .zk{padding:.5rem .25rem} #lxk .d2 .dazu .frm2.rueck{margin-top:0} @media(max-width:1240px){ #lxk .d2 .zkachel{width:auto} #lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-auto-flow:row} } @media(max-width:520px){ #lxk .d2 .zkachel .zwahl{grid-template-columns:1fr 1fr} } /* --- Runde 27: der rechte Bereich beim Rueckruf laeuft bis nach oben --- */ /* Nur dieser eine Zustand - erkannt am Formular, das nur er enthaelt. */ #lxk .d2:has(.frm2.rueck){display:grid; grid-template-columns:minmax(0,21rem) minmax(0,1fr); /* Die ersten drei Zeilen bleiben so hoch wie ihr Inhalt; ueberschuessige Hoehe des rechten Blocks landet in der letzten Zeile, sonst wuerden Titel und Statuszeile auseinandergezogen. */ grid-template-rows:auto auto auto 1fr; gap:0 1.75rem;align-items:start} #lxk .d2:has(.frm2.rueck) .d2k{grid-column:1;grid-row:1} #lxk .d2:has(.frm2.rueck) .d2s{grid-column:1;grid-row:2} #lxk .d2:has(.frm2.rueck) .tstat{grid-column:1;grid-row:3} /* Die Reihe loest sich auf, damit ihre drei Teile eigene Gitterplaetze bekommen. */ #lxk .d2:has(.frm2.rueck) .telgit.drei{display:contents} #lxk .d2:has(.frm2.rueck) .qrt-seite{grid-column:1;grid-row:4} /* Ueber alle Zeilen - dadurch startet der Block oben beim Titel. */ #lxk .d2:has(.frm2.rueck) .dazu{grid-column:2;grid-row:1/-1;align-self:start; padding-left:1.75rem;border-left:1px solid rgba(255,255,255,.2)} /* Die erste Zeile rechts soll mit dem Titel fluchten. */ #lxk .d2:has(.frm2.rueck) .dazu .dazuk{margin-top:.375rem} /* In der schmalen Spalte darf "Jetzt erreichbar" nicht mitten im Begriff umbrechen - der Rest des Satzes darf es sehr wohl. */ #lxk .d2:has(.frm2.rueck) .tstat{display:block;line-height:1.5} #lxk .d2:has(.frm2.rueck) .tstat strong{white-space:nowrap} /* Im Blockfluss hat ein leerer span keine Groesse - deshalb hier explizit. */ #lxk .d2:has(.frm2.rueck) .tstat .tdot{display:inline-block;width:.625rem;height:.625rem; border-radius:50%;background:#fff;vertical-align:.0625rem;margin-right:.4375rem} #lxk .d2:has(.frm2.rueck) .tstat .tdot.aus{background:rgba(255,255,255,.45)} #lxk .d2:has(.frm2.rueck) .d2s{max-width:19rem} @media(max-width:1240px){ /* Zu schmal fuer drei Spalten: dann wieder untereinander. */ #lxk .d2:has(.frm2.rueck){grid-template-columns:minmax(0,1fr)} #lxk .d2:has(.frm2.rueck) .dazu{grid-column:1/-1;grid-row:auto; padding-left:0;padding-top:1.25rem; border-left:0;border-top:1px solid rgba(255,255,255,.2)} } @media(max-width:720px),(hover:none) and (pointer:coarse){ #lxk .d2:has(.frm2.rueck){display:block} #lxk .d2:has(.frm2.rueck) .telgit.drei{display:block} } /* --- Runde 28: ein WhatsApp-Knopf --- */ /* Alleinstehend darf er die Breite der Spalte nutzen statt schmal zu wirken. */ #lxk .d2 .dazu .wknopfe .wknopf:only-child{padding:0 1.5rem} /* --- Runde 29: der Ausweg bei WhatsApp --- */ #lxk .d2 .ausweg{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)} #lxk .d2 .auswegk{margin:0;font:700 .8125rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .d2 .auswegt{margin:.3125rem 0 0;max-width:24rem; font:400 .8125rem/1.5 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .d2 .auswegnum{margin:.625rem 0 0;font:800 1.375rem/1.1 'Google Sans',sans-serif; letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} #lxk .d2 .ausweg .wknopfe{margin-top:.75rem} /* Die Rueckmeldung des Kopierens steht direkt neben dem Knopf. */ #lxk .d2 .ausweg .kopfst{font:600 .8125rem/1.4 'Google Sans',sans-serif;color:rgba(255,255,255,.82)} #lxk .d2 .ausweg .kopfst.gut{color:#fff} /* --- Runde 30: benannte Wege in den WhatsApp-Chat --- */ #lxk .d2 .waweg2{margin-top:.875rem;padding-top:.875rem;border-top:1px solid rgba(255,255,255,.14)} #lxk .d2 .waweg2:first-of-type{margin-top:1rem} #lxk .d2 .wawegk{display:block;font:700 .8125rem/1.3 'Google Sans',sans-serif;color:#fff} #lxk .d2 .wawegt{margin:.25rem 0 0;max-width:26rem; font:400 .8125rem/1.45 'Google Sans',sans-serif;color:rgba(255,255,255,.75)} #lxk .d2 .wawegtu{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.5rem} #lxk .d2 .waweg2 .auswegnum{margin:.375rem 0 0;font:800 1.25rem/1.1 'Google Sans',sans-serif; letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} #lxk .d2 .waweg2 .wknopf{min-height:2.375rem;padding:0 1rem;font-size:.8125rem} /* Der alte Fussnoten-Ausweg ist Geschichte. */ #lxk .d2 .ausweg{display:none} /* --- Runde 31: WhatsApp entruempelt --- */ #lxk .d2 .dazu .wknopfe{margin-top:1.125rem} /* Der Ausweg-Block traegt wieder - Runde 30 hatte ihn versteckt. */ #lxk .d2 .ausweg{display:block;margin-top:1.25rem;padding-top:1rem; border-top:1px solid rgba(255,255,255,.2)} /* Der Kontakt-Knopf ist ein