/* * Grafiken zu den Leistungen (templates/teile/grafiken.php, assets/grafiken.js) und die * Karten „Was uns anders macht" auf der Startseite. Seit 1.28.0 (24.09.2026) * in einer eigenen Datei; vorher hingen die Runden 23 bis 28 hinten an startseite-v3.css. * * Maße der Szenen in em: die Schriftgröße der Bühne hängt an der Breite der Fläche (cqw), * eine Szene skaliert also wie ein Bild. Unter 520 px Breite (@container) hat jede Szene * eine eigene Handy-Anordnung. */ /* ════════════════════════════════════════════════════════════════════════════ Fläche Seit 1.29.0 hell (Marcel, 24.09.2026: „warum Dark Mode"): auf den Leistungen ein heller Ton der Kartenfarbe, auf der Startseite neutral (siehe unten). ════════════════════════════════════════════════════════════════════════════ */ .ldc .ldc-gr-figur { container-type: inline-size; isolation: isolate; background: var(--gr-grund, #eef0f3); } .ldc .ldc-stapelkarte-bild.ldc-gr-figur { aspect-ratio: 4 / 3.4; padding: 0; } .ldc-gr-figur figcaption { z-index: 30; pointer-events: none; } .ldc-gr-figur-webdesign { --gr-grund: linear-gradient(160deg, #d6e8f6, #c0dbf0); } .ldc-gr-figur-onlineshop { --gr-grund: linear-gradient(160deg, #e3ddf8, #d0c7f3); } .ldc-gr-figur-grafik { --gr-grund: #ece5da; } .ldc-gr-figur-seo { --gr-grund: linear-gradient(160deg, #d6ede0, #c1e3cf); } .ldc-gr-figur-hosting { --gr-grund: linear-gradient(160deg, #dfe6ee, #cbd6e2); } .ldc-gr-figur-ki { --gr-grund: linear-gradient(160deg, #d4eeec, #bde3e0); } .ldc .ldc-stapelkarte:hover .gx-buehne img { transform: none; } @media (max-width: 600px) { .ldc .ldc-stapelkarte .ldc-stapelkarte-bild.ldc-gr-figur { aspect-ratio: 4 / 5; } .ldc-gr-figur figcaption { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ Bühne und Gemeinsames ════════════════════════════════════════════════════════════════════════════ */ .ldc .gx-buehne { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: .8em; padding: 4.5%; font-family: "Manrope LD", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(8px, 2.45cqw, 15px); line-height: 1.3; letter-spacing: 0; color: #0a1720; text-align: left; -webkit-user-select: none; user-select: none; } .ldc .ldc-stapelkarte-bild .gx-buehne { padding-bottom: 13.5%; } .ldc .gx-buehne *, .ldc .gx-buehne *::before, .ldc .gx-buehne *::after { box-sizing: border-box; } .ldc .gx-buehne button { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: 1em; letter-spacing: inherit; line-height: 1.2; text-transform: none; cursor: pointer; box-shadow: none; min-height: 0; height: auto; width: auto; } .ldc .gx-buehne svg { display: block; overflow: visible; } .ldc .gx-buehne img { max-width: none; } .ldc .gx-buehne b, .ldc .gx-buehne strong { color: inherit; } .ldc .gx-buehne p, .ldc .gx-buehne ul, .ldc .gx-buehne ol, .ldc .gx-buehne li, .ldc .gx-buehne blockquote, .ldc .gx-buehne dl, .ldc .gx-buehne dd { margin: 0; padding: 0; list-style: none; } .ldc .gx-buehne em, .ldc .gx-buehne i { font-style: normal; } /* Das Theme gibt jedem Zitat ein großes Anführungszeichen und eine farbige Linie mit */ .ldc .gx-buehne blockquote { border: 0; background: none; box-shadow: none; quotes: none; } .ldc .gx-buehne blockquote::before, .ldc .gx-buehne blockquote::after { content: none; display: none; } /* Browserfenster */ .gx-browser { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: .9em; overflow: hidden; background: #fff; box-shadow: 0 1.6em 3.2em -1.8em rgba(10, 30, 60, .42), 0 0 0 1px rgba(10, 23, 32, .08); } .gx-leiste { flex: none; display: flex; align-items: center; gap: .38em; height: 2.05em; padding: 0 .8em; background: #f3f3f4; border-bottom: 1px solid #e6e6e9; } .gx-leiste > i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: #ff5f57; } .gx-leiste > i:nth-child(2) { background: #febc2e; } .gx-leiste > i:nth-child(3) { background: #28c840; } .gx-url { display: flex; align-items: center; gap: .35em; margin: 0 auto; padding: .28em .9em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e3e3e7; color: #52525b; font-size: .64em; font-weight: 600; white-space: nowrap; } .gx-url svg { width: 1.05em; height: 1.05em; color: #16a34a; } .gx-fenster { position: relative; flex: 1; min-height: 0; overflow: hidden; } .gx-seite { --scroll: 0px; transform: translateY(calc(var(--scroll) * -1)); transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); } .gx-schleier { position: absolute; inset: 0; z-index: 4; background: rgba(12, 9, 6, .42); opacity: 0; pointer-events: none; transition: opacity .45s ease; } .gx-buehne.ist-offen .gx-schleier { opacity: 1; pointer-events: auto; } .ldc .gx-buehne .gx-zu { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: .8em; line-height: 1; } .gx-caret { width: 1.5px; height: 1.1em; margin-left: .1em; background: currentColor; opacity: 0; } .ist-fokus > .gx-caret { opacity: 1; animation: gxBlinken 1s steps(1) infinite; } @keyframes gxBlinken { 50% { opacity: 0; } } .gx-fertig-haken { width: 3.2em; height: 3.2em; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .gx-fertig-haken circle { stroke-dasharray: 145; stroke-dashoffset: 145; } .gx-fertig-haken path { stroke-dasharray: 36; stroke-dashoffset: 36; } .ist-fertig .gx-fertig-haken circle { animation: gxStrich .6s ease forwards; } .ist-fertig .gx-fertig-haken path { animation: gxStrich .45s .45s cubic-bezier(.65, 0, .35, 1) forwards; } @keyframes gxStrich { to { stroke-dashoffset: 0; } } @keyframes gxDrehen { to { rotate: 360deg; } } .gx-laedt { position: relative; } .gx-laedt > span { opacity: 0; } .gx-laedt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border: .18em solid rgba(255, 255, 255, .35); border-top-color: currentColor; border-radius: 50%; animation: gxDrehen .7s linear infinite; } /* Mauszeiger der Vorführung */ .gx-maus { position: absolute; z-index: 40; left: 0; top: 0; width: 1.55em; height: 1.72em; pointer-events: none; opacity: 0; transform: translate(60%, 70%); transition: transform .95s cubic-bezier(.65, 0, .35, 1), opacity .35s ease; } .gx-maus.ist-da { opacity: 1; } .gx-maus svg { width: 100%; height: 100%; filter: drop-shadow(0 .15em .3em rgba(0, 0, 0, .35)); } .gx-welle { position: absolute; left: .1em; top: .1em; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(10, 23, 32, .2); opacity: 0; scale: .2; } .gx-maus.ist-klick .gx-welle { animation: gxWelle .55s ease-out; } .gx-maus.ist-klick svg { animation: gxDruck .3s ease; } @keyframes gxWelle { 0% { opacity: .95; scale: .2; } 100% { opacity: 0; scale: 1.3; } } @keyframes gxDruck { 50% { scale: .82; } } /* Nachricht beim Betrieb */ .gx-push { position: absolute; z-index: 35; right: 3.2%; top: 3.2%; display: flex; align-items: flex-start; gap: .7em; width: 23em; max-width: 76%; padding: .85em .95em; border-radius: 1.15em; background: rgba(250, 250, 250, .9); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1.4em 2.6em -1.2em rgba(0, 12, 30, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); color: #1c1917; opacity: 0; translate: 0 -1.4em; scale: .94; transition: opacity .45s ease, translate .7s cubic-bezier(.2, .9, .3, 1.2), scale .7s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; } .gx-push.ist-da { opacity: 1; translate: 0 0; scale: 1; } .gx-push > i { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .72em; background: var(--push, #1c1917); } .gx-push > i svg { width: 1.3em; height: 1.3em; } .gx-push > span { display: grid; grid-template-columns: 1fr auto; column-gap: .5em; min-width: 0; } .ldc .gx-push b { font-size: .88em; font-weight: 800; color: #1c1917; } .gx-push small { color: #78716c; font-size: .76em; } .gx-push em { grid-column: 1 / -1; margin-top: .15em; color: #3f3f46; font-size: .84em; font-weight: 600; line-height: 1.35; } /* ════════════════════════════════════════════════════════════════════════════ Webdesign und Onlineshop: Café Lind und Rösterei Hauser (Runde 23 bis 28 vom 23.09.2026, seit 1.31.0 wieder; Marcel: „ich meinte die zweite Version, die mit der Café-Website"). Die Regeln stammen aus der damaligen startseite-v3.css; Fläche hell abgetönt auf der Leistungsseite, auf der Startseite neutral. ════════════════════════════════════════════════════════════════════════════ */ /* Seit 1.32.0 auch hier nur leicht abgetönt wie bei SEO und GEO, ohne Raster (Marcel, 25.09.2026: „den lila Hintergrund so leicht abtönen, nicht so stark lila, im Stil wie beim grünen Abschnitt; genau das gleiche bei Webdesign"). Die Farben stehen oben unter „Fläche". */ .ldc-gr-figur-webdesign { --gr-akzent: #0a6fb0; } .ldc-gr-figur-onlineshop { --gr-akzent: #5a43b8; } /* Bühne der Runde-28-Szenen (statt .gx-buehne) */ .ldc-gr-buehne { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1em; padding: 6% 7% 15%; font-size: clamp(8.5px, 2.45cqw, 15px); line-height: 1.3; color: #0a1720; } .ldc-gr-buehne button { font-family: inherit; letter-spacing: inherit; line-height: 1.2; cursor: pointer; } .ldc-gr-buehne svg { display: block; } .ldc .ldc-gr-buehne strong, .ldc .ldc-gr-buehne b { color: inherit; } .ldc .ldc-dienstbild .ldc-gr-buehne { padding-bottom: 6%; } /* Plakette unten links */ /* Plakette unten links (Webdesign, Shop) */ .ldc-gr-plakette { position: absolute; left: 7%; bottom: 16.5%; z-index: 2; display: inline-flex; align-items: center; gap: .55em; padding: .5em 1em .5em .5em; border-radius: 999px; background: #fff; color: #0a1720; font-size: .8em; font-weight: 700; line-height: 1; box-shadow: 0 1.2em 2.4em -1.2em rgba(0, 12, 30, .55); opacity: 0; translate: 0 .6em; scale: .96; transition: opacity .45s var(--v3-kurve), translate .6s var(--v3-kurve), scale .6s var(--v3-kurve); } .ldc-gr-plakette svg { flex: none; width: 1.7em; height: 1.7em; padding: .38em; border-radius: 50%; background: var(--gr-akzent); color: #fff; } .ldc-gr-plakette.ist-da { opacity: 1; translate: 0 0; scale: 1; } /* ── Webdesign ──────────────────────────────────────────────────────────── */ .ldc-gr-browser { position: relative; width: 100%; max-width: 30em; height: 19em; border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 2em 4em -1.8em rgba(0, 12, 30, .6), 0 0 0 1px rgba(255, 255, 255, .2); transition: max-width .85s var(--v3-kurve), height .85s var(--v3-kurve), border-radius .85s var(--v3-kurve); } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-browser { max-width: 18.5em; height: 20em; border-radius: 1.3em; } .ldc-gr-web[data-geraet="handy"] .ldc-gr-browser { max-width: 11em; height: 20.5em; border-radius: 1.8em; } .ldc-gr-leiste { display: flex; align-items: center; gap: .38em; height: 2.2em; padding: 0 .85em; background: #f4f4f5; border-bottom: 1px solid #ececef; } .ldc-gr-leiste > i { flex: none; width: .56em; height: .56em; border-radius: 50%; background: #ff5f57; } .ldc-gr-leiste > i:nth-child(2) { background: #febc2e; } .ldc-gr-leiste > i:nth-child(3) { background: #28c840; } .ldc-gr-url { display: flex; align-items: center; justify-content: center; gap: .35em; min-width: 0; margin: 0 auto; padding: .28em .9em; border-radius: 999px; background: #fff; color: #52525b; font-size: .66em; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px #e4e4e7; } .ldc-gr-url svg { width: 1.05em; height: 1.05em; color: #16a34a; } .ldc-gr-web[data-geraet="handy"] .ldc-gr-leiste > i { display: none; } .ldc-gr-seite { display: grid; gap: .9em; padding: .95em 1.1em; } .ldc-gr-nav { display: flex; align-items: center; gap: .75em; } .ldc-gr-nav b { display: flex; align-items: center; gap: .4em; margin-right: auto; font-size: .8em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .ldc-gr-nav b i { width: 1.1em; height: 1.1em; border-radius: .3em; background: linear-gradient(140deg, #d99a5e, #8a5230); } .ldc-gr-nav > span { width: 2.2em; height: .34em; border-radius: 999px; background: #e4e4e7; } .ldc-gr-nav em { padding: .45em .85em; border-radius: 999px; background: #0a1720; color: #fff; font-size: .62em; font-style: normal; font-weight: 800; } .ldc-gr-nav u { display: none; flex-direction: column; gap: .2em; } .ldc-gr-nav u s { display: block; width: 1.05em; height: .13em; border-radius: 1px; background: #0a1720; } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-nav > span, .ldc-gr-web[data-geraet="handy"] .ldc-gr-nav > span, .ldc-gr-web[data-geraet="handy"] .ldc-gr-nav em { display: none; } .ldc-gr-web[data-geraet="handy"] .ldc-gr-nav u { display: flex; } .ldc-gr-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1em; align-items: center; } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-hero, .ldc-gr-web[data-geraet="handy"] .ldc-gr-hero { grid-template-columns: 1fr; gap: .8em; } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-hero-bild, .ldc-gr-web[data-geraet="handy"] .ldc-gr-hero-bild { order: -1; height: 6.2em; } .ldc-gr-hero-text small { display: block; color: #b0703f; font-size: .58em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .ldc .ldc-gr-hero-text strong { display: block; margin: .25em 0 .5em; font-size: 1.55em; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #0a1720; } .ldc-gr-web[data-geraet="handy"] .ldc-gr-hero-text strong { font-size: 1.3em; } .ldc-gr-zeile { display: block; height: .4em; margin-bottom: .35em; border-radius: 999px; background: #e4e4e7; } .ldc-gr-kurz { width: 68%; } .ldc-gr-knopfchen { display: inline-block; margin-top: .55em; padding: .55em 1em; border-radius: 999px; background: linear-gradient(120deg, #d0935a, #9a5f36); color: #fff; font-size: .62em; font-weight: 800; white-space: nowrap; } .ldc-gr-hero-bild { position: relative; height: 8.4em; border-radius: .8em; overflow: hidden; background: linear-gradient(170deg, #f7e2c8 0%, #e2ad7c 55%, #a8683c 100%); transition: height .85s var(--v3-kurve); } .ldc-gr-hero-bild i { position: absolute; display: block; } .ldc-gr-hero-bild i:nth-child(1) { right: 14%; top: 14%; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255, 250, 240, .75); } .ldc-gr-hero-bild i:nth-child(2) { left: 12%; right: 12%; bottom: 22%; height: .9em; border-radius: .2em; background: #7a4526; box-shadow: 0 .5em 0 -.2em rgba(0, 0, 0, .12); } .ldc-gr-hero-bild i:nth-child(3) { left: 20%; bottom: 22%; width: .5em; height: 3em; border-radius: .1em; background: #8c5431; box-shadow: 8.2em 0 0 #8c5431; } .ldc-gr-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; } .ldc-gr-kacheln span { height: 3.3em; border-radius: .6em; background: #f4f4f5; } .ldc-gr-kacheln i { display: block; width: 45%; height: .34em; margin: .75em; border-radius: 999px; background: #d4d4d8; } .ldc-gr-web[data-geraet="handy"] .ldc-gr-kacheln { grid-template-columns: 1fr; } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-kacheln { grid-template-columns: 1fr 1fr; } .ldc-gr-web[data-geraet="tablet"] .ldc-gr-kacheln span:nth-child(3) { display: none; } /* ── Onlineshop ─────────────────────────────────────────────────────────── */ .ldc-gr-shopfenster { width: 100%; max-width: 31em; padding: 1em 1.2em 1.05em; border-radius: 1.1em; background: #fff; box-shadow: 0 2em 4em -1.8em rgba(10, 4, 40, .65); } .ldc-gr-shopkopf { display: flex; align-items: center; gap: 1em; padding-bottom: .8em; border-bottom: 1px solid #f0f0f3; font-size: .78em; } .ldc-gr-shopkopf b { font-size: 1.1em; font-weight: 800; letter-spacing: -.02em; } .ldc-gr-shopkopf > span { color: #71717a; font-weight: 600; } .ldc-gr-shopkopf .ldc-gr-korb { position: relative; margin-left: auto; color: #0a1720; } .ldc-gr-korb svg { width: 1.8em; height: 1.8em; } .ldc-gr-korb em { position: absolute; top: -.35em; right: -.5em; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: 999px; background: #5a43b8; color: #fff; font-size: .72em; font-style: normal; font-weight: 800; } .ldc-gr-korb em.ist-neu { animation: ldcGrHupf .5s var(--v3-kurve); } @keyframes ldcGrHupf { 40% { scale: 1.45; } } .ldc-gr-produkt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.2em; align-items: center; margin: .95em 0 .9em; } .ldc-gr-packung { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.02; border-radius: .9em; background: radial-gradient(80% 70% at 50% 40%, #f6f2ff, #ddd3ff); overflow: hidden; } .ldc-gr-beutel { --gross: 1; position: relative; width: 58%; height: 76%; border-radius: .45em .45em .9em .9em; background: linear-gradient(160deg, #33284d, #140f22); box-shadow: inset -.6em 0 1em rgba(0, 0, 0, .35), inset .4em 0 .6em rgba(255, 255, 255, .06), 0 1.2em 1.6em -1em rgba(20, 10, 60, .6); scale: var(--gross); transition: scale .6s var(--v3-kurve); color: #fff; text-align: center; } .ldc-gr-beutel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; border-radius: .45em .45em 0 0; background: repeating-linear-gradient(90deg, #463866 0 .3em, #3a2e57 .3em .6em); } .ldc-gr-beutel-marke { position: absolute; left: 0; right: 0; top: 17%; font-size: .5em; font-weight: 800; letter-spacing: .16em; line-height: 1.2; color: #c9bbff; } .ldc-gr-beutel-name { position: absolute; left: 0; right: 0; top: 42%; font-size: .72em; line-height: 1.1; color: rgba(255, 255, 255, .8); } .ldc-gr-beutel-name b { display: block; font-size: 1.3em; color: #fff; } .ldc-gr-beutel-gewicht { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; padding: .25em .7em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(201, 187, 255, .45); color: #c9bbff; font-size: .55em; font-weight: 800; white-space: nowrap; } .ldc-gr-bohne { position: absolute; width: 1.3em; height: .9em; border-radius: 50%; background: linear-gradient(140deg, #8a5634, #4a2814); } .ldc-gr-bohne::after { content: ""; position: absolute; left: 20%; right: 20%; top: 45%; height: .1em; border-radius: 1px; background: rgba(0, 0, 0, .45); rotate: -8deg; } .ldc-gr-bohne:nth-of-type(1) { left: 10%; bottom: 8%; rotate: -20deg; } .ldc-gr-bohne:nth-of-type(2) { right: 12%; bottom: 12%; rotate: 25deg; } .ldc-gr-bohne:nth-of-type(3) { right: 22%; bottom: 5%; rotate: -60deg; scale: .85; } .ldc-gr-produktinfo small { display: block; color: #5a43b8; font-size: .6em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .ldc .ldc-gr-produktinfo strong { display: block; margin: .2em 0 .15em; font-size: 1.28em; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #0a1720; } .ldc-gr-sterne { color: #f5a623; font-size: .78em; letter-spacing: .08em; } .ldc-gr-varianten { display: flex; flex-wrap: wrap; gap: .35em; margin: .65em 0 .7em; } .ldc-gr-varianten button { padding: .45em .7em; border: 0; border-radius: .55em; background: #fff; color: #3f3f46; font-size: .7em; font-weight: 700; box-shadow: inset 0 0 0 1.5px #e4e4e7; transition: box-shadow .3s ease, color .3s ease, background .3s ease; } .ldc-gr-varianten button.ist-an { background: #f4f1ff; color: #5a43b8; box-shadow: inset 0 0 0 1.5px #5a43b8; } .ldc-gr-preis b { display: inline-block; font-size: 1.45em; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .ldc-gr-preis b.ist-neu { animation: ldcGrPreis .5s var(--v3-kurve); } @keyframes ldcGrPreis { from { opacity: 0; translate: 0 .4em; } } .ldc-gr-preis small { display: block; color: #71717a; font-size: .58em; } .ldc-gr-kaufen { position: relative; width: 100%; margin-top: .7em; padding: .75em; border: 0; border-radius: .7em; background: #5a43b8; color: #fff; font-size: .74em; font-weight: 800; transition: background .4s var(--v3-kurve), scale .2s ease; } .ldc-gr-kaufen:active { scale: .97; } .ldc-gr-kaufen.ist-drin { background: #16a34a; } .ldc-gr-zahlung { display: flex; flex-wrap: wrap; gap: .35em; padding-top: .8em; border-top: 1px solid #f0f0f3; } .ldc-gr-zahlung span { padding: .35em .6em; border-radius: .4em; background: #f4f4f5; color: #52525b; font-size: .58em; font-weight: 700; } .ldc-gr-flug { position: absolute; z-index: 4; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; background: #5a43b8; box-shadow: 0 0 0 .3em rgba(90, 67, 184, .25); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ Runde 26 (23.09.2026): Webdesign zurück zur ersten Fassung (Runde 23) und ausgebaut · die Website füllt fast die ganze Fläche, echtes Foto, echte Texte, scrollt von selbst · Handy: Rahmen und Notch statt nur schmäler, Tablet mit Rahmen · ein Mauszeiger klickt die Umschalter ═══════════════════════════════════════════════════════════════════════════ */ .ldc-gr-figur-webdesign::before { display: block; } .ldc .ldc-gr-figur-webdesign figcaption span { background: rgba(255, 255, 255, .94); color: var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .ldc .ldc-gr-buehne.ldc-web2 { justify-content: flex-start; gap: .75em; padding: 4.5% 4.5% 13.5%; } .ldc-web2 .ldc-gr-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; height: auto; border: 0 solid #0b0f14; transition: max-width .9s var(--v3-kurve), border-radius .9s var(--v3-kurve), border-width .6s ease; } .ldc-web2[data-geraet="desktop"] .ldc-gr-browser { max-width: 100%; height: auto; } .ldc-web2[data-geraet="tablet"] .ldc-gr-browser { max-width: 62%; height: auto; border-width: .42em; border-radius: 1.3em; } .ldc-web2[data-geraet="handy"] .ldc-gr-browser { max-width: 31%; height: auto; border-width: .42em; border-radius: 2em; } .ldc-web2 .ldc-gr-leiste { flex: none; overflow: hidden; transition: height .6s var(--v3-kurve), opacity .4s ease; } .ldc-web2[data-geraet="handy"] .ldc-gr-leiste { height: 0; opacity: 0; border: 0; } .ldc-w2-notch { position: absolute; z-index: 3; left: 50%; top: .45em; width: 34%; height: 1.05em; border-radius: 999px; background: #0b0f14; translate: -50% 0; opacity: 0; transition: opacity .4s ease; } .ldc-web2[data-geraet="handy"] .ldc-w2-notch { opacity: 1; transition-delay: .4s; } .ldc-w2-fenster { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; transition: padding .6s var(--v3-kurve); } .ldc-web2[data-geraet="handy"] .ldc-w2-fenster { padding-top: 2em; } /* --w-zoom: Größe der Café-Website im Fenster (seit 25.09.2026 größer, Marcel: „das alles so klein"). Man sieht dafür nur einen Ausschnitt der Seite; die Vorführung rollt zur Karte und nach unten. */ .ldc-w2-seite { --scroll: 0px; font-size: var(--w-zoom, 1.2em); color: #0a1f33; transform: translateY(calc(var(--scroll) * -1)); transition: transform 1.9s cubic-bezier(.65, 0, .35, 1); } /* die erfundene Website „Café Lind" */ .ldc-w2-nav { display: flex; align-items: center; gap: 1em; padding: .85em 1.2em; } .ldc .ldc-w2-nav b { display: flex; align-items: center; gap: .45em; margin-right: auto; color: #0a1f33; font-size: .92em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .ldc-w2-nav b i { width: .8em; height: .8em; border-radius: 50%; background: #0a84c9; box-shadow: .35em 0 0 -.1em #0b2a45; } .ldc-w2-nav > span { color: #44576a; font-size: .7em; font-weight: 600; white-space: nowrap; } .ldc-w2-nav em { padding: .55em .95em; border-radius: 999px; background: #0b2a45; color: #fff; font-size: .66em; font-style: normal; font-weight: 800; white-space: nowrap; } .ldc-w2-nav u { display: none; flex-direction: column; gap: .22em; } .ldc-w2-nav u s { display: block; width: 1.1em; height: .14em; border-radius: 1px; background: #0a1f33; } .ldc-web2[data-geraet="tablet"] .ldc-w2-nav > span { display: none; } .ldc-web2[data-geraet="handy"] .ldc-w2-nav > span, .ldc-web2[data-geraet="handy"] .ldc-w2-nav em { display: none; } .ldc-web2[data-geraet="handy"] .ldc-w2-nav u { display: flex; } .ldc-w2-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.1em; align-items: center; padding: .2em 1.2em 1.1em; } .ldc-w2-hero-text small { display: block; color: #0a84c9; font-size: .6em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .ldc .ldc-w2-hero-text strong { display: block; margin: .3em 0 .45em; color: #0a1f33; font-size: 1.8em; font-weight: 800; letter-spacing: -.045em; line-height: 1; } .ldc .ldc-w2-hero-text p { margin: 0 0 .85em; color: #44576a; font-size: .7em; line-height: 1.5; } .ldc-w2-knoepfe { display: flex; flex-wrap: wrap; gap: .4em; } .ldc-w2-knoepfe em { padding: .62em 1em; border-radius: 999px; background: #0a84c9; color: #fff; font-size: .64em; font-style: normal; font-weight: 800; white-space: nowrap; } .ldc-w2-knoepfe .ldc-w2-leise { background: #eef4f9; color: #0a1f33; } .ldc-w2-foto { height: 9.6em; border-radius: .7em; overflow: hidden; background: #e0e9f1; } .ldc-w2-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .ldc-web2[data-geraet="tablet"] .ldc-w2-hero, .ldc-web2[data-geraet="handy"] .ldc-w2-hero { grid-template-columns: 1fr; gap: .8em; } .ldc-web2[data-geraet="tablet"] .ldc-w2-foto, .ldc-web2[data-geraet="handy"] .ldc-w2-foto { order: -1; height: 7.2em; } .ldc .ldc-web2[data-geraet="handy"] .ldc-w2-hero-text strong { font-size: 1.45em; } .ldc-w2-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; padding: 0 1.2em 1.1em; } .ldc-w2-karten span { display: grid; gap: .15em; padding: .75em; border-radius: .6em; background: #f7fafc; box-shadow: inset 0 0 0 1px #e8f0f7; } .ldc-w2-karten i { display: grid; place-items: center; width: 1.8em; height: 1.8em; margin-bottom: .35em; border-radius: .45em; background: #e2f0fa; color: #0a84c9; } .ldc-w2-karten svg { width: 1.05em; height: 1.05em; } .ldc .ldc-w2-karten b { color: #0a1f33; font-size: .7em; font-weight: 800; } .ldc-w2-karten small { color: #5f7285; font-size: .6em; } .ldc-web2[data-geraet="tablet"] .ldc-w2-karten { grid-template-columns: 1fr 1fr; } .ldc-web2[data-geraet="handy"] .ldc-w2-karten { grid-template-columns: 1fr; } .ldc-w2-stimme { margin: 0 1.2em 1.1em; padding: .95em 1.05em; border-radius: .7em; background: #0b2a45; color: #fff; } .ldc-w2-stimme > span { color: #f5b44a; font-size: .6em; letter-spacing: .1em; } .ldc-w2-stimme q { display: block; margin: .3em 0 .35em; font-size: .88em; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .ldc-w2-stimme small { font-size: .62em; opacity: .75; } .ldc-w2-fuss { padding: .9em 1.2em 1.2em; border-top: 1px solid #eaf1f7; } .ldc .ldc-w2-fuss b { display: block; color: #0a1f33; font-size: .7em; font-weight: 800; } .ldc-w2-fuss small { color: #5f7285; font-size: .6em; } /* Mauszeiger, der die Umschalter anklickt */ .ldc-w2-maus { position: absolute; z-index: 5; left: 0; top: 0; width: 1.55em; height: 1.72em; pointer-events: none; opacity: 0; transform: translate(80%, 90%); transition: transform .95s cubic-bezier(.65, 0, .35, 1), opacity .35s ease; } .ldc-w2-maus svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .15em .3em rgba(0, 0, 0, .35)); } .ldc-w2-maus.ist-da { opacity: 1; } .ldc-w2-maus.ist-klick svg { animation: ldcW2Klick .35s ease; } @keyframes ldcW2Klick { 50% { scale: .8; } } .ldc-web2 .ldc-gr-plakette { left: 4.5%; bottom: 15.5%; } /* ═══════════════════════════════════════════════════════════════════════════ Runde 27 (23.09.2026): Webdesign Fassung 3 – die Website arbeitet für den Betrieb Kein Geräte-Umschalter mehr. Online-Reservierung im Café, Push-Nachricht beim Wirt. Baut auf den Klassen von Fassung 2 auf (.ldc-web2, .ldc-w2-*). ═══════════════════════════════════════════════════════════════════════════ */ .ldc .ldc-gr-buehne.ldc-web3 { padding: 4.5% 4.5% 13.5%; } .ldc-web3 .ldc-gr-browser { box-shadow: 0 2.4em 4.5em -2em rgba(0, 12, 30, .7), 0 0 0 1px rgba(255, 255, 255, .22); } .ldc-web3 .ldc-w2-seite { transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); } /* Leben in der erfundenen Website */ .ldc-web3 .ldc-w2-foto img { animation: ldcW3Zoom 18s ease-in-out infinite alternate; transform-origin: 60% 40%; } @keyframes ldcW3Zoom { to { transform: scale(1.07); } } .ldc-web3 [data-aktion] { cursor: pointer; transition: background .3s ease, color .3s ease, translate .3s var(--v3-kurve); } .ldc-web3 .ldc-w2-nav > span[data-aktion]:hover { color: #0a84c9; } .ldc-web3 .ldc-w2-nav em:hover { background: #0a84c9; } .ldc-web3 .ldc-w3-haupt:hover, .ldc-web3 .ldc-w3-haupt.ist-gedrueckt { background: #086ea8; } .ldc-web3 .ldc-w2-knoepfe em.ist-gedrueckt { translate: 0 .08em; } .ldc-web3 .ldc-w2-karten span { transition: translate .45s var(--v3-kurve), box-shadow .45s var(--v3-kurve), background .45s ease; } .ldc-web3 .ldc-w2-karten span:hover, .ldc-web3 .ldc-w2-karten span.ist-hover { translate: 0 -.25em; background: #fff; box-shadow: inset 0 0 0 1px #e8f0f7, 0 .9em 1.6em -1em rgba(10, 40, 70, .35); } .ldc-w3-speisen { display: grid; gap: .5em; margin: 0 1.2em 1.1em; padding: 1em 1.05em; border-radius: .7em; box-shadow: inset 0 0 0 1px #e8f0f7; } .ldc .ldc-w3-speisen > b { margin-bottom: .2em; color: #0a1f33; font-size: .78em; font-weight: 800; letter-spacing: -.01em; } .ldc-w3-speisen span { display: flex; align-items: baseline; gap: .5em; font-size: .68em; } .ldc-w3-speisen i { color: #0a1f33; font-style: normal; font-weight: 600; white-space: nowrap; } .ldc-w3-speisen s { flex: 1; border-bottom: 1.5px dotted #cfdbe6; text-decoration: none; } .ldc-w3-speisen em { color: #0a84c9; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; } /* Buchungsfenster */ .ldc-w3-dialog { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(8, 30, 52, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .45s ease; } .ldc-w3-dialog.ist-offen { opacity: 1; pointer-events: auto; } .ldc-w3-panel { position: relative; width: 19.5em; max-width: 92%; padding: 1.1em 1.2em 1.2em; border-radius: 1em; background: #fff; color: #0a1f33; font-size: var(--w-dialog, 1.22em); box-shadow: 0 2em 3em -1.4em rgba(8, 30, 52, .6); translate: 0 1.4em; scale: .96; transition: translate .6s cubic-bezier(.2, .9, .3, 1.15), scale .6s cubic-bezier(.2, .9, .3, 1.15); } .ldc-w3-dialog.ist-offen .ldc-w3-panel { translate: 0 0; scale: 1; } .ldc-w3-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; } .ldc .ldc-w3-kopf b { color: #0a1f33; font-size: .9em; font-weight: 800; letter-spacing: -.02em; } .ldc-w3-zu { display: grid; place-items: center; width: 1.6em; height: 1.6em; padding: 0; border: 0; border-radius: 50%; background: #eef4f9; color: #44576a; font-size: .8em; line-height: 1; } .ldc-w3-formular { display: grid; gap: .6em; transition: opacity .35s ease; } .ldc-w3-zeile { display: flex; align-items: center; justify-content: space-between; font-size: .76em; font-weight: 700; color: #44576a; } .ldc-w3-stepper { display: inline-flex; align-items: center; gap: .6em; padding: .2em; border-radius: 999px; background: #eef4f9; } .ldc-w3-stepper button { display: grid; place-items: center; width: 1.7em; height: 1.7em; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0a1f33; font-size: 1em; font-weight: 800; line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .ldc .ldc-w3-stepper b { min-width: 1em; color: #0a1f33; font-size: 1.1em; text-align: center; font-variant-numeric: tabular-nums; } .ldc-w3-stepper b.ist-neu { animation: ldcGrPreis .35s var(--v3-kurve); } .ldc-w3-chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3em; } .ldc-w3-chips button { padding: .55em .2em; border: 0; border-radius: .55em; background: #eef4f9; color: #3f3f46; font-size: .7em; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .3s ease, color .3s ease, scale .25s ease; } .ldc-w3-chips button.ist-an { background: #0a1f33; color: #fff; } .ldc-w3-chips button.ist-voll { color: #a7b6c4; text-decoration: line-through; pointer-events: none; } .ldc-w3-chips button:active { scale: .95; } .ldc-w3-feld { display: flex; align-items: center; gap: .45em; min-height: 2.3em; padding: 0 .75em; border-radius: .6em; box-shadow: inset 0 0 0 1.5px #e0e9f1; font-size: .76em; cursor: text; transition: box-shadow .3s ease; } .ldc-w3-feld.ist-fokus { box-shadow: inset 0 0 0 1.5px #0a84c9, 0 0 0 .25em rgba(10, 132, 201, .14); } .ldc-w3-feld small { color: #93a4b5; font-size: .85em; font-weight: 700; } .ldc-w3-feld span { color: #0a1f33; font-weight: 700; } .ldc-w3-caret { width: 1.5px; height: 1.1em; margin-left: -.3em; background: #0a84c9; opacity: 0; } .ldc-w3-feld.ist-fokus .ldc-w3-caret { opacity: 1; animation: ldcGrBlink 1s steps(1) infinite; } .ldc-w3-senden { position: relative; display: grid; place-items: center; min-height: 2.5em; margin-top: .15em; border: 0; border-radius: .65em; background: #0a84c9; color: #fff; font-size: .72em; font-weight: 800; overflow: hidden; transition: background .3s ease, scale .2s ease; } .ldc-w3-senden:hover { background: #086ea8; } .ldc-w3-senden:active { scale: .98; } .ldc-w3-senden.ist-laedt span { opacity: 0; } .ldc-w3-senden.ist-laedt::after { content: ""; position: absolute; width: 1.2em; height: 1.2em; border: .18em solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ldcGrDreh .7s linear infinite; } .ldc-w3-fertig { position: absolute; inset: 2.4em 1em 1em; display: grid; place-items: center; align-content: center; gap: .4em; text-align: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .ldc-w3-fertig svg { width: 3.2em; height: 3.2em; margin-bottom: .3em; fill: none; stroke: #16a34a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .ldc-w3-fertig circle { stroke: #bbf7d0; stroke-dasharray: 145; stroke-dashoffset: 145; } .ldc-w3-fertig path { stroke-dasharray: 36; stroke-dashoffset: 36; } .ldc .ldc-w3-fertig b { color: #0a1f33; font-size: .95em; font-weight: 800; letter-spacing: -.02em; } .ldc-w3-fertig small { color: #5f7285; font-size: .66em; } .ldc-w3-panel.ist-fertig .ldc-w3-formular { opacity: 0; } .ldc-w3-panel.ist-fertig .ldc-w3-fertig { opacity: 1; } .ldc-w3-panel.ist-fertig .ldc-w3-fertig circle { animation: ldcW3Strich .6s ease forwards; } .ldc-w3-panel.ist-fertig .ldc-w3-fertig path { animation: ldcW3Strich .45s .45s cubic-bezier(.65, 0, .35, 1) forwards; } @keyframes ldcW3Strich { to { stroke-dashoffset: 0; } } /* Push-Nachricht beim Wirt */ .ldc-w3-push { position: absolute; z-index: 6; right: 3%; top: 3%; display: flex; align-items: flex-start; gap: .7em; width: 23em; max-width: 76%; padding: .85em .95em; border-radius: 1.15em; background: rgba(250, 250, 250, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1.4em 2.6em -1.2em rgba(0, 12, 30, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); color: #0a1f33; opacity: 0; translate: 0 -1.4em; scale: .94; transition: opacity .45s ease, translate .7s cubic-bezier(.2, .9, .3, 1.2), scale .7s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; } .ldc-w3-push.ist-da { opacity: 1; translate: 0 0; scale: 1; } .ldc-w3-push > i { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .72em; background: #0b2a45; } .ldc-w3-push > i span { width: .95em; height: .95em; border-radius: 50%; background: #0a84c9; box-shadow: .35em 0 0 -.1em #fff; } .ldc-w3-push > span { display: grid; grid-template-columns: 1fr auto; column-gap: .5em; min-width: 0; } .ldc .ldc-w3-push b { color: #0a1f33; font-size: .88em; font-weight: 800; } .ldc-w3-push small { color: #5f7285; font-size: .76em; } .ldc-w3-push em { grid-column: 1 / -1; margin-top: .15em; color: #3f3f46; font-size: .84em; font-style: normal; font-weight: 600; line-height: 1.35; } /* Klick-Welle am Mauszeiger */ .ldc-w3-welle { position: absolute; left: .1em; top: .1em; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: rgba(10, 132, 201, .35); opacity: 0; scale: .2; pointer-events: none; } .ldc-w2-maus.ist-klick .ldc-w3-welle { animation: ldcW3Welle .6s ease-out; } @keyframes ldcW3Welle { 0% { opacity: .9; scale: .2; } 100% { opacity: 0; scale: 1.3; } } .ldc-web3 .ldc-w2-maus { z-index: 7; } @media (prefers-reduced-motion: reduce) { .ldc-web3 .ldc-w2-foto img { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ Runde 28 (23.09.2026): Onlineshop, Logo, SEO und Hosting nach dem Muster von Webdesign 3 Jede Szene: eine echte Handlung, am Ende die Nachricht beim Betrieb. Größere Schrift. ═══════════════════════════════════════════════════════════════════════════ */ .ldc-w3-push > i { background: var(--push-farbe, #2a1a12); } .ldc-w3-push > i svg { width: 1.3em; height: 1.3em; } .ldc-gr-buehne .ldc-w3-push { z-index: 7; } .ldc-gr-buehne .ldc-w2-maus { z-index: 8; } .ldc .ldc-gr-buehne.ldc-shop2 { padding: 4.5% 4.5% 13.5%; } @keyframes ldcC2Haken { from { scale: 0; } } /* ── Onlineshop ───────────────────────────────────────────────────────── */ .ldc-shop2 .ldc-gr-shopfenster { position: relative; width: 100%; max-width: none; overflow: hidden; font-size: 1.12em; } .ldc-shop2 .ldc-gr-shopkopf .ldc-gr-korb { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; } .ldc-s2-kasse { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 56%; padding: 1em 1.1em; background: #fff; box-shadow: -1.6em 0 3em -1.6em rgba(20, 10, 60, .4); translate: 105% 0; transition: translate .65s cubic-bezier(.2, .9, .3, 1); } .ldc-s2-kasse.ist-offen { translate: 0 0; } .ldc-s2-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9em; } .ldc .ldc-s2-kopf b { color: #0a1720; font-size: .88em; font-weight: 800; } .ldc-s2-zu { display: grid; place-items: center; width: 1.6em; height: 1.6em; padding: 0; border: 0; border-radius: 50%; background: #f4f4f5; color: #52525b; font-size: .8em; line-height: 1; cursor: pointer; } .ldc-s2-inhalt { display: grid; gap: .8em; transition: opacity .35s ease; } .ldc-s2-posten { display: flex; align-items: center; gap: .7em; padding-bottom: .8em; border-bottom: 1px solid #f0f0f3; } .ldc-s2-mini { flex: none; width: 2.3em; height: 2.8em; border-radius: .35em; background: linear-gradient(160deg, #33284d, #140f22); } .ldc .ldc-s2-posten b { display: block; color: #0a1720; font-size: .72em; font-weight: 800; } .ldc-s2-posten small { color: #71717a; font-size: .64em; } .ldc-s2-posten em { margin-left: auto; color: #0a1720; font-size: .74em; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; } .ldc .ldc-s2-summe { display: grid; gap: .35em; margin: 0; } .ldc-s2-summe div { display: flex; justify-content: space-between; color: #52525b; font-size: .66em; } .ldc-s2-summe dt, .ldc-s2-summe dd { margin: 0; font-variant-numeric: tabular-nums; } .ldc-s2-summe .ldc-s2-gesamt { padding-top: .4em; border-top: 1px solid #f0f0f3; color: #0a1720; font-size: .8em; font-weight: 800; } .ldc-s2-zahlarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; } .ldc-s2-zahlarten button { padding: .6em .2em; border: 0; border-radius: .55em; background: #f4f4f5; color: #3f3f46; font-size: .64em; font-weight: 700; cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } .ldc-s2-zahlarten button.ist-an { background: #f4f1ff; color: #5a43b8; box-shadow: inset 0 0 0 1.5px #5a43b8; } .ldc-s2-bezahlen { position: relative; display: grid; place-items: center; min-height: 2.5em; border: 0; border-radius: .65em; background: #5a43b8; color: #fff; font-size: .72em; font-weight: 800; cursor: pointer; overflow: hidden; } .ldc-s2-bezahlen.ist-laedt span { opacity: 0; } .ldc-s2-bezahlen.ist-laedt::after { content: ""; position: absolute; width: 1.2em; height: 1.2em; border: .18em solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ldcGrDreh .7s linear infinite; } .ldc-s2-fertig { position: absolute; inset: 2.8em 1em 1em; display: grid; place-items: center; align-content: center; gap: .4em; text-align: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .ldc-s2-fertig svg { width: 3em; height: 3em; margin-bottom: .3em; fill: none; stroke: #16a34a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .ldc-s2-fertig circle { stroke: #bbf7d0; stroke-dasharray: 145; stroke-dashoffset: 145; } .ldc-s2-fertig path { stroke-dasharray: 36; stroke-dashoffset: 36; } .ldc .ldc-s2-fertig b { color: #0a1720; font-size: .85em; font-weight: 800; } .ldc-s2-fertig small { color: #71717a; font-size: .64em; } .ldc-s2-kasse.ist-fertig .ldc-s2-inhalt { opacity: 0; } .ldc-s2-kasse.ist-fertig .ldc-s2-fertig { opacity: 1; } .ldc-s2-kasse.ist-fertig .ldc-s2-fertig circle { animation: ldcW3Strich .6s ease forwards; } .ldc-s2-kasse.ist-fertig .ldc-s2-fertig path { animation: ldcW3Strich .45s .45s cubic-bezier(.65, 0, .35, 1) forwards; } /* Runde 28b: Hauptknöpfe in den Szenen gut lesbar; Kasse am Handy über die ganze Breite */ .ldc-w3-senden, .ldc-s2-bezahlen { font-size: .82em; } /* Auf der neutralen Startseite: weicher Schatten statt dunklem Rand */ .ldc .ldc-dienstbild .ldc-gr-browser, .ldc .ldc-dienstbild .ldc-gr-shopfenster { box-shadow: 0 1.6em 3.2em -1.8em rgba(10, 30, 60, .42), 0 0 0 1px rgba(10, 23, 32, .08); } /* ── Onlineshop größer (seit 25.09.2026; Marcel: „beim Onlineshop würde ich auch sagen, dass das zu klein ist") ── Das Shopfenster füllt die Fläche: der Produktbereich wächst mit, die Packung steht über die ganze Höhe, Texte und Knöpfe rund ein Drittel größer. Die Kasse fährt wie bisher von rechts herein, der Knopf „Jetzt kaufen" steht unten wie in einem echten Warenkorb. */ .ldc .ldc-gr-buehne.ldc-shop2 { align-items: stretch; } .ldc-shop2 .ldc-gr-shopfenster { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 1.05em 1.25em 1.15em; font-size: 1.2em; } .ldc-shop2 .ldc-gr-shopkopf { flex: none; gap: 1.1em; padding-bottom: .85em; font-size: .8em; } .ldc-shop2 .ldc-gr-produkt { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.2em; align-items: stretch; margin: .95em 0 0; } /* Die Packung passt sich der Fläche an (Container-Einheiten): nie breiter als 60 % und nie höher als 75 % der Fläche, die Schrift darauf wächst mit */ .ldc-shop2 .ldc-gr-packung { container-type: size; aspect-ratio: auto; min-height: 0; } .ldc-shop2 .ldc-gr-beutel { width: min(60cqw, 58cqh); height: auto; aspect-ratio: 1 / 1.3; font-size: min(7.5cqw, 7.25cqh); } .ldc-shop2 .ldc-gr-produktinfo { align-self: center; min-width: 0; } .ldc-shop2 .ldc-gr-produktinfo small { font-size: .62em; } .ldc .ldc-shop2 .ldc-gr-produktinfo strong { font-size: 1.42em; } .ldc-shop2 .ldc-gr-sterne { font-size: .84em; } .ldc-shop2 .ldc-gr-varianten { gap: .4em; margin: .7em 0 .75em; } .ldc-shop2 .ldc-gr-varianten button { padding: .5em .8em; font-size: .78em; } .ldc-shop2 .ldc-gr-preis b { font-size: 1.6em; } .ldc-shop2 .ldc-gr-preis small { font-size: .62em; } .ldc-shop2 .ldc-gr-kaufen { margin-top: .8em; padding: .8em; border-radius: .75em; font-size: .82em; } .ldc-shop2 .ldc-s2-kasse { width: 58%; padding: 1.05em 1.2em 1.15em; font-size: 1.08em; } .ldc .ldc-shop2 .ldc-s2-kopf b { font-size: .95em; } .ldc-shop2 .ldc-s2-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; } .ldc-shop2 .ldc-s2-mini { width: 2.5em; height: 3.1em; } .ldc .ldc-shop2 .ldc-s2-posten b { font-size: .8em; } .ldc-shop2 .ldc-s2-posten small { font-size: .7em; } .ldc-shop2 .ldc-s2-posten em { font-size: .8em; white-space: nowrap; } .ldc-shop2 .ldc-s2-summe div { font-size: .72em; } .ldc-shop2 .ldc-s2-summe .ldc-s2-gesamt { font-size: .86em; } .ldc-shop2 .ldc-s2-zahlarten button { padding: .65em .2em; font-size: .7em; } /* Wie in einem echten Warenkorb: der Artikel oben, Summe, Zahlart und Knopf unten */ .ldc-shop2 .ldc-s2-summe { margin-top: auto; } .ldc-shop2 .ldc-s2-bezahlen { min-height: 2.6em; font-size: .86em; } /* „Passt dazu": nur wo im Warenkorb Platz ist (Startseite, Handy), siehe dort */ .ldc-s2-dazu { display: none; } .ldc-s2-dazu small { display: block; margin-bottom: .45em; color: #71717a; font-size: .66em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ldc-s2-dazu span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .65em; padding: .5em .6em; border-radius: .75em; background: #f7f5fd; } .ldc-s2-dazu i { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .55em; background: #fff; color: #5a43b8; box-shadow: 0 0 0 1px #ebe7fa; } .ldc-s2-dazu i svg { width: 1.3em; height: 1.3em; } .ldc .ldc-s2-dazu b { grid-column: 2; align-self: end; min-width: 0; overflow: hidden; color: #0a1720; font-size: .74em; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .ldc-s2-dazu em { grid-column: 2; align-self: start; color: #5a43b8; font-size: .7em; font-style: normal; font-weight: 800; white-space: nowrap; } .ldc .ldc-s2-dazu u { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #5a43b8; color: #fff; font-size: .9em; font-weight: 800; line-height: 1; text-decoration: none; } .ldc-s2-lieferung { display: flex; align-items: center; gap: .5em; color: #3f7d4f; font-size: .7em; font-weight: 700; } .ldc-s2-lieferung svg { flex: none; width: 1.35em; height: 1.35em; } .ldc .ldc-shop2 .ldc-s2-fertig b { font-size: .95em; } .ldc-shop2 .ldc-s2-fertig small { font-size: .7em; } /* ════════════════════════════════════════════════════════════════════════════ Logo und Grafik: „Vom Logo zur Auflage" (Runde 33, Korrekturfassung) Das Logo entsteht in der Mitte wie im Gestaltungsprogramm, dockt links als Markenblatt an, die Drucksorten werden gesetzt, geprüft, gedruckt, geschnitten und zur Auflage gebündelt. Lage und Größe aller Teile stehen als Variablen auf .dr-welt (Leistungsseite, Startseite, Handy); skript.js bewegt nur. Schärfe: Im Stand tragen die Drucksorten nur 2D-Transformationen und nichts in ihrer Kette hat perspective oder preserve-3d. 3D gibt es nur, solange sich etwas bewegt (skript.js setzt dann perspective() in die Transformation selbst). Sonst rastert Chrome die Ebenen zu grob. Werkzeug-Blau (Pfad, Anker, Kerning) ist das Blau von Life Design. ════════════════════════════════════════════════════════════════════════════ */ .ldc .gx-buehne.gx-druck { gap: 0; overflow: hidden; --dr-werkzeug: #0a84c9; --box-b: 37.2; --box-h: 27.4; } .ldc .gx-druck .dr-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .ldc .gx-druck .dr-rahmen { position: relative; flex: 1; min-height: 0; } /* Die Komposition hat je Fläche eine feste Größe in em; ist die Fläche größer (Tablet), steht sie mittig */ /* skript.js setzt --dr-fit < 1, wenn die Fläche kleiner ist als die Komposition: dann wird alles gleichmäßig kleiner */ .ldc .gx-druck .dr-box { position: absolute; inset: 0; margin: auto; font-size: calc(var(--dr-fit, 1) * 1em); width: min(100%, calc(var(--box-b) * 1em)); height: min(100%, calc(var(--box-h) * 1em)); } .ldc .gx-druck .dr-welt { position: absolute; inset: 0; /* Zeichen in der Mitte (Mittelpunkt, Kantenlänge) und angedockt */ --zm-x: 18.6; --zm-y: 9.5; --zm-g: 11.4; --zd-x: 2.8; --zd-y: 8.3; --zd-g: 4.8; /* Schriftzug in der Mitte (Punkt oben, Maßstab, Ausrichtung 0 links / .5 Mitte) und angedockt */ --wm-x: 18.6; --wm-y: 17.2; --wm-g: 1; --wm-a: .5; --wd-x: .35; --wd-y: 11.4; --wd-g: .44; --wd-a: 0; /* Werkzeugleiste (oberer Rand), Farben und Schrift (--sp-an 0: Farbfelder docken nicht an) */ --wz-y: 22.3; --wz-f: .92; --sp-x: .35; --sp-y: 14.4; --sp-an: 1; /* Drucksorten: Lage (em), Breite (em), Drehung (Grad) */ --pl-x: 25.7; --pl-y: .2; --pl-b: 12.4; --pl-rz: 4; --et-x: 32.1; --et-y: 17.3; --et-b: 5.6; --et-rz: 7; --et1-f: 1.34; --et1-dx: -1.9; --vk-x: .35; --vk-y: 21.7; --vk-b: 9.2; --vk-rz: -5; --vk-hy: -16%; --fl-x: 13.4; --fl-y: 1.1; --fl-b: 17.6; --fl-rz: -1.5; /* Hinweise über dem Flyer: Abstand von seiner Mitte (Anteil der Höhe) */ --pille-y: .28; --hinweis-y: -.3; } /* ── Bedienung: Marken-Chips und Schrittleiste ──────────────────────────── */ .ldc .gx-druck .dr-steuer { position: absolute; left: 0; top: 0; z-index: 40; display: grid; gap: .7em; width: var(--st-b, 11.9em); } .ldc .gx-druck .dr-chips { display: flex; gap: .5em; } .ldc .gx-buehne .dr-chip { position: relative; display: block; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; box-shadow: 0 .55em 1.1em -.6em rgba(60, 40, 20, .45), inset 0 0 0 1px rgba(10, 23, 32, .07); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; } .ldc .gx-buehne .dr-chip::before { content: ""; position: absolute; inset: -.3em; border-radius: 50%; } .ldc .gx-buehne .dr-chip.ist-an { transform: scale(1.08); box-shadow: 0 .7em 1.3em -.6em var(--mf), inset 0 0 0 1px rgba(10, 23, 32, .05); } .ldc .gx-buehne .dr-chip:focus-visible { outline: 2px solid var(--dr-werkzeug); outline-offset: 3px; } .ldc .gx-druck .dr-chip svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ldc .gx-druck .dr-chip-spur { fill: none; stroke: rgba(10, 23, 32, .07); stroke-width: 3.2; } .ldc .gx-druck .dr-chip-lauf { fill: none; stroke: var(--mf); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50px 50px; opacity: 0; } .ldc .gx-druck .dr-chip.ist-an .dr-chip-lauf { opacity: 1; } /* Name der Marke: nur mit echter Maus (auf Touch bliebe er nach dem Antippen stehen) und per Tastatur */ .ldc .gx-buehne .dr-chip::after { content: attr(data-name); position: absolute; left: 50%; top: calc(100% + .55em); padding: .45em .75em; border-radius: 999px; background: #0a1720; color: #fff; font-size: max(11px, .78em); font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, -.3em); transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); pointer-events: none; z-index: 2; } .ldc .gx-buehne .dr-chip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } @media (hover: hover) and (pointer: fine) { .ldc .gx-buehne .dr-chip:hover { transform: translateY(-.14em) scale(1.05); } .ldc .gx-buehne .dr-chip:hover::after { opacity: 1; transform: translate(-50%, 0); } } .ldc .gx-druck .dr-schritt { position: relative; display: grid; gap: .5em; padding: .15em 0 .35em; cursor: pointer; touch-action: pan-y; outline: none; } .ldc .gx-druck .dr-schritt:focus-visible .dr-schritt-balken { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dr-werkzeug); border-radius: 3px; } .ldc .gx-druck .dr-schritt-text { position: relative; display: block; height: 1.3em; font-size: max(11px, .8em); line-height: 1.3em; } .ldc .gx-druck .dr-schritt-text b { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: .5em; height: 1.3em; font-weight: 800; letter-spacing: -.005em; color: #0a1720; white-space: nowrap; opacity: 0; } .ldc .gx-druck .dr-schritt-text b:first-child { opacity: 1; } .ldc .gx-druck .dr-schritt-text em { font-style: normal; font-weight: 800; color: var(--mft, #7b1e34); font-variant-numeric: tabular-nums; } .ldc .gx-druck .dr-schritt-balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: .28em; } .ldc .gx-druck .dr-schritt-balken i { display: block; height: .26em; border-radius: 99px; background: rgba(10, 23, 32, .1); overflow: hidden; } .ldc .gx-druck .dr-schritt-balken u { display: block; height: 100%; background: var(--mf, #b4532a); text-decoration: none; transform: scaleX(0); transform-origin: 0 50%; } .ldc .gx-druck .dr-schritt.ist-gezogen { cursor: grabbing; } @media (hover: hover) { .ldc .gx-druck .dr-schritt:hover .dr-schritt-balken i { background: rgba(10, 23, 32, .16); } } /* ── Das große Zeichen ──────────────────────────────────────────────────── */ .ldc .gx-druck svg.dr-zeichen { position: absolute; left: 0; top: 0; z-index: 12; width: calc(var(--zm-g) * 1em); height: calc(var(--zm-g) * 1em); overflow: visible; transform-origin: 50% 50%; pointer-events: none; } .ldc .gx-druck .dr-form { fill: #7b1e34; } /* Ohne vector-effect: sonst rechnet Chrome die Striche in Bildschirmpunkten und pathLength greift nicht */ .ldc .gx-druck .dr-konstr { fill: none; stroke-width: .5; } .ldc .gx-druck .dr-konstr > g { display: none; } .ldc .gx-druck .dr-konstr > g.ist-an { display: inline; } .ldc .gx-druck .dr-konstr path { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .ldc .gx-druck .dr-konstr .dr-k-hilfe { stroke-opacity: .26; } .ldc .gx-druck .dr-konstr .dr-k-kreis { stroke-opacity: .45; } .ldc .gx-druck .dr-konstr .dr-k-zone { stroke-opacity: .5; } .ldc .gx-druck .dr-konstr text { stroke: none; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 6px; opacity: 0; } .ldc .gx-druck .dr-kontur { fill: none; stroke: var(--dr-werkzeug); stroke-width: .75; stroke-linejoin: round; } .ldc .gx-druck .dr-kontur path { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .ldc .gx-druck .dr-anker .dr-punkt { fill: #fff; stroke: var(--dr-werkzeug); stroke-width: .7; } .ldc .gx-druck .dr-anker .dr-griff path { stroke: var(--dr-werkzeug); stroke-width: .45; fill: none; } .ldc .gx-druck .dr-anker .dr-griff circle { fill: var(--dr-werkzeug); } /* ── Schriftzüge ────────────────────────────────────────────────────────── */ .ldc .gx-druck .dr-wm { position: absolute; left: 0; top: 0; z-index: 12; transform-origin: 0 0; white-space: nowrap; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-wm.ist-da { visibility: visible; } .ldc .gx-druck .dr-wm-name { display: block; font-size: var(--wmf); line-height: 1; transform: scaleX(var(--sx, 1)); transform-origin: 0 50%; } .ldc .gx-druck .dr-wm-name i { display: inline-block; font-style: inherit; } .ldc .gx-druck .dr-wm-name i + i { margin-left: var(--ls, 0); } .ldc .gx-druck .dr-wm-name .dr-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; } .ldc .gx-druck .dr-wm-zusatz { position: absolute; left: 0; top: 0; z-index: 12; white-space: nowrap; font-size: .78em; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1; font-family: "Manrope LD", system-ui, sans-serif; opacity: 0; } /* Zusatzfarben mit mindestens 4,5 : 1 auf beiden Flächen */ .ldc .gx-druck .dr-z-0 { color: #85505c; } .ldc .gx-druck .dr-z-1 { color: #3f6394; } .ldc .gx-druck .dr-z-2 { color: #93455a; } .ldc .gx-druck .dr-z-3 { color: #7f5424; } .ldc .gx-druck .dr-wm-0 { --wmf: 2.2em; --ls: .13em; --vh: .69; color: #6e1a2f; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .ldc .gx-druck .dr-wm-1 { --wmf: 2.7em; --ls: -.02em; --vh: .72; color: #123a6e; font-weight: 800; } .ldc .gx-druck .dr-wm-2 { --wmf: 2.7em; --ls: -.01em; --vh: .48; color: #4a2a22; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; } /* leicht schmal (nie unter 0,9, sonst verzerren die Strichstärken sichtbar) */ .ldc .gx-druck .dr-wm-3 { --wmf: 2.75em; --ls: .01em; --sx: .9; --vh: .72; color: #3a2314; font-weight: 800; } /* Grundlinie und Versal- bzw. x-Höhe (Beschriftung links vor den Linien), Kerning, Mauszeiger */ .ldc .gx-druck .dr-linien { position: absolute; left: 0; top: 0; z-index: 11; height: 1em; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-linien > i { position: absolute; left: 0; right: 0; height: 1px; background: var(--dr-werkzeug); opacity: .5; transform-origin: 0 50%; } .ldc .gx-druck .dr-linien > .dr-l-vh { top: 0; } .ldc .gx-druck .dr-linien > .dr-l-gl { bottom: 0; opacity: .75; } .ldc .gx-druck .dr-l-t { position: absolute; right: 100%; margin-right: .55em; font-size: .78em; font-weight: 700; letter-spacing: .01em; line-height: 1; color: #08639a; white-space: nowrap; opacity: 0; } .ldc .gx-druck .dr-l-vh-t { top: -.5em; } .ldc .gx-druck .dr-l-gl-t { bottom: -.5em; } .ldc .gx-druck .dr-kern-kasten { position: absolute; left: 0; top: 0; z-index: 11; border: 1px solid var(--dr-werkzeug); background: rgba(10, 132, 201, .07); visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-kern { position: absolute; left: 0; top: 0; z-index: 14; width: 0; height: 0; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-kern-strich { position: absolute; left: -.75px; top: 0; width: 1.5px; background: var(--dr-werkzeug); } .ldc .gx-druck .dr-kern-wert { position: absolute; left: 0; bottom: .45em; padding: .4em .65em; border-radius: .45em; background: #0877b8; color: #fff; font-size: max(11px, .8em); font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: pre; box-shadow: 0 .5em 1em -.5em rgba(10, 132, 201, .7); } .ldc .gx-druck .dr-zeiger { position: absolute; left: 0; top: 0; z-index: 15; width: 1.2em; height: 1.32em; margin: -.1em 0 0 -.1em; visibility: hidden; pointer-events: none; transform-origin: .1em .1em; filter: drop-shadow(0 .25em .35em rgba(10, 23, 32, .3)); } .ldc .gx-druck .dr-zeiger svg { position: relative; width: 100%; height: 100%; } .ldc .gx-druck .dr-zeiger-welle { position: absolute; left: -.5em; top: -.5em; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--dr-werkzeug); opacity: 0; } /* ── Werkzeugleiste des Gestaltungsprogramms (01 Logo) ──────────────────── */ /* Lage in em der Fläche: die Leiste hat eine eigene Schriftgröße, deshalb durch --wz-f teilen */ .ldc .gx-druck .dr-werkzeug { position: absolute; left: calc(var(--wm-x) / var(--wz-f) * 1em); top: calc(var(--wz-y) / var(--wz-f) * 1em); z-index: 13; display: flex; align-items: center; gap: .15em; padding: .3em; border-radius: 999px; background: #fff; font-size: calc(var(--wz-f) * 1em); box-shadow: 0 .9em 1.8em -1em rgba(50, 35, 20, .45), 0 0 0 1px rgba(10, 23, 32, .06); visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-wz { position: relative; z-index: 1; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; color: #4b5563; transition: color .25s ease; } .ldc .gx-druck .dr-wz.ist-an { color: #fff; } .ldc .gx-druck .dr-wz svg { width: 1.25em; height: 1.25em; } .ldc .gx-druck .dr-wz-marke { position: absolute; left: 0; top: .3em; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--dr-werkzeug); } .ldc .gx-druck .dr-wz-trenn { flex: none; width: 1px; height: 1.4em; margin: 0 .45em 0 .35em; background: rgba(10, 23, 32, .12); } .ldc .gx-druck .dr-wz-slot { flex: none; width: 5.2em; height: 2.1em; border-radius: 999px; background: #f3f4f6; } /* ── Farben und Schrift (angedockt) ─────────────────────────────────────── */ .ldc .gx-druck .dr-spec { position: absolute; left: calc(var(--sp-x) * 1em); top: calc(var(--sp-y) * 1em); z-index: 14; width: 12em; display: grid; gap: .6em; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-spec.ist-da { visibility: visible; } .ldc .gx-buehne .dr-spec > p { display: flex; align-items: center; gap: .7em; opacity: 0; } .ldc .gx-druck .dr-spec-farben { flex: none; display: flex; padding-left: .16em; } .ldc .gx-druck .dr-spec-farben i { transform: scale(0); width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 .16em #fff, 0 .5em 1em -.5em rgba(40, 25, 10, .45); } .ldc .gx-druck .dr-spec-farben i + i { margin-left: -.4em; } .ldc .gx-druck .dr-spec-text { opacity: 0; display: grid; gap: .15em; line-height: 1.2; } .ldc .gx-druck .dr-spec-text small { font-size: .78em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b6158; } .ldc .gx-druck .dr-spec-text > span { font-size: .8em; font-weight: 700; color: #1c1917; } .ldc .gx-druck .dr-spec-zeile + .dr-spec-zeile .dr-spec-text { opacity: 1; } .ldc .gx-druck .dr-spec-aa { flex: none; width: 2.57em; font-size: 1.75em; line-height: 1; color: #1c1917; text-align: center; } .ldc .gx-druck .dr-f-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .ldc .gx-druck .dr-f-serifk { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; } .ldc .gx-druck .dr-f-grotesk { font-weight: 800; letter-spacing: -.02em; } .ldc .gx-druck .dr-f-versal { font-weight: 800; transform: scaleX(.9); } /* ── Drucksorten ────────────────────────────────────────────────────────── */ /* Jede Marke ein Satz. Kein perspective, kein preserve-3d: die Reihenfolge regelt z-index. */ .ldc .gx-druck .dr-set { position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-set.ist-an { visibility: visible; } .ldc .gx-druck .dr-t { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: calc(var(--b) * 1em); transform: rotate(calc(var(--rz) * 1deg)); visibility: hidden; } .ldc .gx-druck .dr-t-pl { z-index: 1; --x: var(--pl-x); --y: var(--pl-y); --b: var(--pl-b); --rz: var(--pl-rz); aspect-ratio: 200 / 283; } .ldc .gx-druck .dr-t-fl { z-index: 2; --x: var(--fl-x); --y: var(--fl-y); --b: var(--fl-b); --rz: var(--fl-rz); aspect-ratio: 200 / 284; } .ldc .gx-druck .dr-t-et { z-index: 3; --x: var(--et-x); --y: var(--et-y); --b: var(--et-b); --rz: var(--et-rz); } .ldc .gx-druck .dr-t-vk { z-index: 4; --x: var(--vk-x); --y: var(--vk-y); --b: var(--vk-b); --rz: var(--vk-rz); aspect-ratio: 200 / 129; } .ldc .gx-druck .dr-e-0 { aspect-ratio: 200 / 250; } .ldc .gx-druck .dr-e-2, .ldc .gx-druck .dr-e-3 { aspect-ratio: 1; } .ldc .gx-druck .dr-e-1 { --b: calc(var(--et-b) * var(--et1-f, 1.34)); --x: calc(var(--et-x) + var(--et1-dx, -1.3)); aspect-ratio: 200 / 126; } .ldc .gx-druck .dr-flug { position: absolute; inset: 0; } /* Papier: leicht getönter Schatten, feine Körnung, Glanz */ .ldc .gx-druck .dr-papier, .ldc .gx-druck .dr-seite, .ldc .gx-druck .dr-kopie { position: absolute; inset: 0; border-radius: .1em; background: var(--papier, #fff); box-shadow: 0 1.5em 2.4em -1.3em rgba(60, 35, 15, .5), 0 .12em .35em rgba(60, 35, 15, .14); } .ldc .gx-druck .dr-papier { overflow: hidden; } .ldc .gx-druck svg.dr-druck { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .ldc .gx-druck .dr-korn { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E"); background-size: 9em 9em; } .ldc .gx-druck .dr-glanz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%) no-repeat; background-size: 300% 100%; background-position: 100% 0; opacity: 0; } .ldc .gx-druck .dr-druck [data-an] { transform-box: fill-box; transform-origin: 50% 50%; } /* Geformte Drucksorten: Schatten folgt der Form */ .ldc .gx-druck .dr-etikett, .ldc .gx-druck .dr-rund, .ldc .gx-druck .dr-ticket { background: none; box-shadow: none; overflow: visible; filter: drop-shadow(0 .45em .5em rgba(60, 35, 15, .3)) drop-shadow(0 .05em .1em rgba(60, 35, 15, .18)); } .ldc .gx-druck .dr-rund svg.dr-druck, .ldc .gx-druck .dr-etikett svg.dr-druck, .ldc .gx-druck .dr-ticket svg.dr-druck { overflow: visible; } /* Visitenkarten: zwei Karten übereinander (2D, damit sie scharf bleiben) */ .ldc .gx-druck .dr-vk-h { transform: translate(var(--vk-hx, 17%), var(--vk-hy, -22%)) rotate(var(--vk-hr, 8deg)); } /* Flyer: Vorder- und Rückseite, Beschnitt, Druckbogen, Walzen, Auflage */ .ldc .gx-druck .dr-t-fl { touch-action: pan-y; } .ldc .gx-druck .dr-t-fl.ist-drehbar { cursor: grab; } .ldc .gx-druck .dr-t-fl.ist-gezogen { cursor: grabbing; } .ldc .gx-druck .dr-set.ist-an .dr-t-fl { pointer-events: auto; } .ldc .gx-druck .dr-dreh { position: absolute; inset: 0; } /* In Ruhe flach: die gezeigte Seite ohne 3D, die andere versteckt */ .ldc .gx-druck .dr-dreh:not(.ist-dreht) .dr-kante { display: none; } .ldc .gx-druck .dr-dreh:not(.ist-dreht) .dr-hinten { visibility: hidden; } .ldc .gx-druck .dr-dreh.ist-hinten:not(.ist-dreht) .dr-hinten { visibility: inherit; } .ldc .gx-druck .dr-dreh.ist-hinten:not(.ist-dreht) .dr-vorne { visibility: hidden; } /* Beim Drehen 3D: Rückseite ein halbes Pixel dahinter (deckungsgleiche Flächen zerschneidet Chrome sonst) */ .ldc .gx-druck .dr-dreh.ist-dreht { transform-style: preserve-3d; } .ldc .gx-druck .dr-dreh.ist-dreht .dr-seite { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ldc .gx-druck .dr-dreh.ist-dreht .dr-hinten { transform: rotateY(180deg) translateZ(.5px); } /* Papierkante: steht senkrecht auf dem Blatt und ist nur beim Drehen zu sehen */ .ldc .gx-druck .dr-kante { position: absolute; top: 0; bottom: 0; width: .11em; background: linear-gradient(90deg, #d9d2c6, #fbf8f2 45%, #e4ddd1); transform-origin: 0 50%; pointer-events: none; } .ldc .gx-druck .dr-kante-l { left: 0; transform: rotateY(90deg) translateX(-.055em); } .ldc .gx-druck .dr-kante-r { left: 100%; transform: rotateY(90deg) translateX(-.055em); } /* Die Druckdaten ragen 4 von 200 Einheiten über den Rand (3 mm Beschnitt); nach dem Schnitt weg */ .ldc .gx-druck .dr-seite > svg.dr-druck { left: -2%; top: -1.4085%; width: 104%; height: 102.817%; } .ldc .gx-druck .dr-hinten > svg.dr-druck { clip-path: inset(1.37% 1.923%); } .ldc .gx-druck .dr-seite > .dr-korn, .ldc .gx-druck .dr-seite > .dr-glanz { border-radius: .1em; } /* 02 Satz und 03 Prüflauf: Hilfen im Flyer (nur im PDF, nie im Druck) */ .ldc .gx-druck .dr-satzhilfe, .ldc .gx-druck .dr-auswahl, .ldc .gx-druck .dr-beschnitt, .ldc .gx-druck .dr-beschnitt-flaeche { visibility: hidden; } .ldc .gx-druck .dr-beschnitt { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .ldc .gx-druck .dr-beschnitt-flaeche { opacity: 0; } /* 04 Druck: Zwischenstufen der Farbwerke */ .ldc .gx-druck .dr-lage { mix-blend-mode: screen; } /* Druckbogen (Endformat 0…200 x 0…284 in einem Bogen −13…213 x −13…301) */ .ldc .gx-druck .dr-bogen { position: absolute; left: -6.5%; top: -4.577%; width: 113%; height: 110.563%; pointer-events: none; visibility: hidden; } .ldc .gx-druck svg.dr-b { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden; } .ldc .gx-druck svg.dr-b-o { clip-path: inset(0 0 95.86% 0); transform-origin: 50% 2%; } .ldc .gx-druck svg.dr-b-u { clip-path: inset(94.586% 0 0 0); transform-origin: 50% 98%; } .ldc .gx-druck svg.dr-b-l { clip-path: inset(4.14% 94.248% 5.414% 0); transform-origin: 3% 50%; } .ldc .gx-druck svg.dr-b-r { clip-path: inset(4.14% 0 5.414% 94.248%); transform-origin: 97% 50%; } .ldc .gx-druck svg.dr-b-u { filter: drop-shadow(0 .5em .8em rgba(60, 35, 15, .2)); } .ldc .gx-druck .dr-schnittmarken { opacity: var(--mk, 1); } /* Passkreuze: im PDF deckungsgleich, beim Druck je Farbe versetzt, dann im Register */ .ldc .gx-druck .dr-pk { opacity: 0; } .ldc .gx-druck .dr-pk-c { opacity: var(--pko-c, 0); transform: translate(calc(var(--pkv, 1) * 1.7px), calc(var(--pkv, 1) * -1.2px)); } .ldc .gx-druck .dr-pk-m { opacity: var(--pko-m, 0); transform: translate(calc(var(--pkv, 1) * -1.4px), calc(var(--pkv, 1) * 1.5px)); } .ldc .gx-druck .dr-pk-y { opacity: var(--pko-y, 0); transform: translate(calc(var(--pkv, 1) * 1.2px), calc(var(--pkv, 1) * 1.6px)); } .ldc .gx-druck .dr-pk-k { opacity: var(--pko-k, 0); } .ldc .gx-druck svg.dr-schnittlage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ldc .gx-druck .dr-schnitt { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } /* Walzen der Farbwerke: schmales Farbband mit frischem Farbfilm dahinter */ .ldc .gx-druck .dr-walze { position: absolute; left: -2.5%; right: -2.5%; top: 0; height: .34em; margin-top: -.17em; border-radius: .2em; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%), var(--wf); box-shadow: 0 .2em .5em -.1em var(--wf), 0 0 0 .5px rgba(0, 0, 0, .08); visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-walze::before { content: ""; position: absolute; left: 2.4%; right: 2.4%; bottom: 100%; height: 1.8em; background: linear-gradient(180deg, transparent, var(--wf)); opacity: .12; } /* Auflage: Kopien unter dem Flyer (Papierkanten sichtbar), Banderole mit Zähler darüber */ .ldc .gx-druck .dr-kopien { position: absolute; inset: 0; } .ldc .gx-druck .dr-kopie { overflow: hidden; visibility: hidden; box-shadow: 0 .8em 1.6em -1em rgba(60, 35, 15, .4), 0 0 0 .5px rgba(60, 35, 15, .2), inset 0 -.05em 0 rgba(60, 35, 15, .12); } .ldc .gx-druck .dr-kopie svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ldc .gx-druck .dr-band { position: absolute; left: -1.2%; right: calc(-1.2% - .3em); top: 44%; height: 9.5%; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .06)), repeating-linear-gradient(90deg, rgba(90, 60, 25, .05) 0 .18em, rgba(255, 255, 255, .04) .18em .4em), #cda877; box-shadow: 0 .35em .6em -.3em rgba(60, 35, 15, .55), 0 0 0 .5px rgba(90, 60, 25, .25); visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-band-etikett { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: baseline; gap: .38em; padding: .42em .8em; border-radius: .25em; background: #fff; color: #0a1720; font-size: max(11px, .82em); line-height: 1; white-space: nowrap; box-shadow: 0 .4em .8em -.4em rgba(40, 25, 10, .5); opacity: 0; } .ldc .gx-druck .dr-band-etikett small { font-size: 1em; font-weight: 700; color: #5c5750; } .ldc .gx-druck .dr-zahl { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; } /* Hinweise über dem Flyer: Prüflauf / Druckfertig und die laufende Druckfarbe. Sie stehen außerhalb des Flyers (drehen und schrumpfen nicht mit), mittig über seinem unteren Drittel. */ /* Lage (left/top in px) setzt skript.js aus --fl-x, --fl-y, --fl-b und --pille-y; so darf die Schrift nie unter 11 px */ .ldc .gx-druck .dr-tag, .ldc .gx-druck .dr-farbinfo { position: absolute; left: 50%; top: 80%; z-index: 10; display: inline-flex; align-items: center; gap: .5em; padding: .42em .9em .42em .42em; border-radius: 999px; background: #fff; color: #0a1720; font-size: max(11px, .82em); font-weight: 800; line-height: 1.25; white-space: nowrap; box-shadow: 0 .8em 1.6em -.8em rgba(40, 30, 15, .55), 0 0 0 1px rgba(10, 23, 32, .05); opacity: 0; visibility: hidden; pointer-events: none; } .ldc .gx-druck .dr-tag-haken { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #dcece1; color: #17783f; transition: background .3s ease, color .3s ease; } .ldc .gx-druck .dr-tag.ist-fertig .dr-tag-haken { background: #17783f; color: #fff; } .ldc .gx-druck .dr-tag-haken svg { width: 1em; height: 1em; } .ldc .gx-druck .dr-tag-fenster { position: relative; display: block; height: 1.25em; } .ldc .gx-druck .dr-tag-fenster b { position: absolute; left: 0; top: 0; font-weight: 800; white-space: nowrap; opacity: 0; } .ldc .gx-druck .dr-tag-fenster b:last-child { color: #17783f; } .ldc .gx-druck .dr-farbinfo { padding: .42em .9em .42em .6em; gap: .6em; } .ldc .gx-druck .dr-fi-punkte { display: flex; gap: .28em; } .ldc .gx-druck .dr-fi-punkt { display: block; width: .78em; height: .78em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transform: scale(.35); } .ldc .gx-druck .dr-fi-worte { position: relative; display: block; width: 4.4em; height: 1.25em; } .ldc .gx-druck .dr-fi-wort { position: absolute; left: 0; top: 0; font-weight: 800; opacity: 0; } .ldc .gx-druck .dr-hinweis { position: absolute; left: 50%; top: 20%; z-index: 30; opacity: 0; pointer-events: none; } .ldc .gx-druck .dr-hinweis > span { display: inline-flex; align-items: center; gap: .45em; padding: .5em .9em .5em .6em; border-radius: 999px; background: rgba(10, 23, 32, .86); color: #fff; font-size: max(11px, .82em); font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 .8em 1.6em -.8em rgba(20, 15, 10, .6); } .ldc .gx-druck .dr-hinweis svg { width: 1.3em; height: 1.3em; } /* ════════════════════════════════════════════════════════════════════════════ Startseite: quadratischere Fläche, alles etwas größer ════════════════════════════════════════════════════════════════════════════ */ .ldc .ldc-dienstbild .gx-buehne.gx-druck { --box-b: 40; --box-h: 38.7; } .ldc .ldc-dienstbild .gx-druck .dr-welt { --zm-x: 20; --zm-y: 14.2; --zm-g: 15.6; --zd-x: 3.3; --zd-y: 9.5; --zd-g: 5.8; --wm-x: 20; --wm-y: 24; --wm-g: 1.28; --wm-a: .5; --wd-x: .35; --wd-y: 13.3; --wd-g: .5; --wd-a: 0; --wz-y: 30.6; --wz-f: 1; --sp-x: .35; --sp-y: 17.2; --pl-x: 28.3; --pl-y: .6; --pl-b: 13; --pl-rz: 4; --et-x: 34.4; --et-y: 22.8; --et-b: 6.6; --et-rz: 7; --et1-f: 1.22; --et1-dx: -.9; --vk-x: .35; --vk-y: 28.2; --vk-b: 11; --vk-rz: -5; --fl-x: 13.9; --fl-y: 4.5; --fl-b: 20.4; --fl-rz: -1.5; } .ldc .ldc-dienstbild .gx-druck .dr-steuer { --st-b: 12.6em; } /* ════════════════════════════════════════════════════════════════════════════ Handy: Chips und Schrittleiste oben in einer Reihe, Zeichen und Schriftzug nebeneinander, der Flyer groß links, Plakat, Etikett und Visitenkarten rechts. Alles, was man lesen soll, ist mindestens 11 px groß (1 em ≈ 11,9 px). ════════════════════════════════════════════════════════════════════════════ */ @container (max-width: 519px) { /* Querformat unter 520 px (Leistungsseite bei 1001–1180 px Fensterbreite, zweispaltig): skript.js setzt .ist-quer, dann gilt die Anordnung der Leistungsseite, auf die Fläche eingepasst */ .ldc .ldc-gr-figur .gx-buehne.gx-druck { --dr-handy: 1; } .ldc .ldc-stapelkarte-bild .gx-buehne.gx-druck.ist-quer { padding-bottom: 20%; } /* die Chips brechen hier in zwei Zeilen um */ /* so klein wären Farbnamen und Linienbeschriftung nicht mehr lesbar: weglassen statt Rauschen */ .ldc .ldc-gr-figur .gx-druck.ist-quer .dr-spec-text, .ldc .ldc-gr-figur .gx-druck.ist-quer .dr-l-t { display: none; } .ldc .ldc-gr-figur .gx-buehne.gx-druck:not(.ist-quer) { --box-b: 25.3; --box-h: 32.4; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-welt { --zm-x: 12.65; --zm-y: 12; --zm-g: 12; --zd-x: 2.4; --zd-y: 6.3; --zd-g: 4.4; --wm-x: 12.65; --wm-y: 20.1; --wm-g: .8; --wm-a: .5; --wd-x: 5.2; --wd-y: 4.6; --wd-g: .42; --wd-a: 0; --wz-y: 25.7; --wz-f: .95; --sp-an: 0; --raus-x: 1.6; --raus-y: .04; --pl-x: 13.5; --pl-y: 9; --pl-b: 11.6; --pl-rz: 5; --et-x: 20; --et-y: 3.8; --et-b: 4.9; --et-rz: 7; --et1-f: 1.3; --et1-dx: -1.4; --vk-x: 16.1; --vk-y: 25.2; --vk-b: 9; --vk-rz: -6; --vk-hx: 8%; --vk-hy: -26%; --vk-hr: 7deg; --fl-x: .6; --fl-y: 9.9; --fl-b: 15.6; --fl-rz: -1.5; --pille-y: .28; --hinweis-y: -.3; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-steuer { width: auto; right: 0; grid-template-columns: auto 1fr; align-items: center; gap: .9em; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-chips { gap: .45em; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-chip { width: 2.75em; height: 2.75em; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-schritt-text { font-size: max(11px, .95em); } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-spec > p + p, .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-spec-text { display: none; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-wm-zusatz { font-size: .95em; letter-spacing: .12em; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-l-t { display: none; } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-kern-wert { font-size: max(11px, .95em); } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-tag, .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-farbinfo, .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-hinweis > span, .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-band-etikett { font-size: max(11px, .95em); } .ldc .ldc-gr-figur .gx-druck:not(.ist-quer) .dr-band { height: 11%; } } /* ════════════════════════════════════════════════════════════════════════════ Hosting und Wartung: eine ruhige Übersicht, um die wir uns kümmern (seit 1.30.0) ════════════════════════════════════════════════════════════════════════════ */ /* Seit 1.32.0 füllt die Karte die ganze Fläche (Marcel: „das ist mir zu klein"). Oben und unten gelten die Abstände der Bühne, damit die Chips auf der Leistungsseite frei bleiben. */ .ldc .gx-buehne.gx-pflege { align-items: stretch; justify-content: center; padding-inline: 5.5%; } /* Leistungsseite: die vier Chips brechen dort in zwei Zeilen um, die Karte endet darüber */ .ldc .ldc-stapelkarte-bild .gx-buehne.gx-pflege { padding-bottom: 18%; } .ldc .ldc-stapelkarte-bild .pf-karte { font-size: 1em; } .ldc .ldc-stapelkarte-bild .pf-zeile { padding-block: .45em; } .pf-karte { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: .4em; padding: 1.35em 1.6em 1.2em; border-radius: 1.3em; font-size: 1.12em; background: #fff; box-shadow: 0 1.6em 3.2em -1.8em rgba(10, 30, 60, .42), 0 0 0 1px rgba(10, 23, 32, .07); color: #1f2d3d; } .pf-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding-bottom: .85em; border-bottom: 1px solid #edf0f3; } .pf-domain { display: inline-flex; align-items: center; gap: .45em; font-size: 1.05em; font-weight: 800; letter-spacing: -.01em; } .pf-domain svg { width: 1.05em; height: 1.05em; color: #16a34a; } .pf-status { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border-radius: 999px; background: #e9f8ef; color: #17603b; font-size: .76em; font-weight: 800; } .pf-status i { width: .6em; height: .6em; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 .22em rgba(34, 181, 115, .2); animation: pfPuls 2s ease-out infinite; } @keyframes pfPuls { 0% { box-shadow: 0 0 0 0 rgba(34, 181, 115, .45); } 100% { box-shadow: 0 0 0 .5em rgba(34, 181, 115, 0); } } .pf-liste { flex: 1; min-height: 0; display: flex; flex-direction: column; } .pf-zeile { flex: 1; display: flex; align-items: center; gap: 1em; padding: .7em 0; border-bottom: 1px solid #edf0f3; opacity: 0; translate: 0 .5em; transition: opacity .45s ease, translate .55s cubic-bezier(.2, .8, .2, 1); } .pf-zeile:last-child { border-bottom: 0; } .pf-zeile.ist-da { opacity: 1; translate: 0 0; } .pf-symbol { flex: none; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: .8em; background: #eef2f6; color: #32506c; transition: background .4s ease, color .4s ease; } .pf-symbol svg { width: 1.25em; height: 1.25em; } .pf-zeile.ist-ok .pf-symbol { background: #32506c; color: #fff; } .pf-zeile.ist-laeuft .pf-symbol svg { animation: gxDrehen 1.2s linear infinite; } .pf-text { flex: 1; min-width: 0; display: grid; gap: .15em; } .ldc .pf-text b { color: #1f2d3d; font-size: 1em; font-weight: 800; letter-spacing: -.01em; } .pf-text small { overflow: hidden; color: #6b7785; font-size: .78em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; transition: color .4s ease; } .pf-zeile.ist-ok .pf-text small { color: #17603b; } .pf-balken { display: none; height: .32em; margin-top: .25em; border-radius: 999px; background: #e6ebf0; overflow: hidden; } .pf-balken i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #32506c, #5a86ad); } .pf-zeile.ist-laeuft .pf-balken { display: block; } .pf-zeile.ist-laeuft .pf-balken i { animation: pfLaden 2.8s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes pfLaden { to { width: 100%; } } .pf-haken { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #e9f8ef; color: #17603b; opacity: 0; scale: .5; transition: opacity .35s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); } .pf-haken svg { width: .95em; height: .95em; } .pf-zeile.ist-ok .pf-haken { opacity: 1; scale: 1; } .pf-fuss { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding-top: .85em; border-top: 1px solid #edf0f3; } /* Auf der Startseite ist die Fläche fast quadratisch: die Karte darf dort noch größer schreiben */ .ldc .ldc-dienstbild .pf-karte { font-size: 1.3em; } .pf-wir { display: inline-flex; align-items: center; gap: .55em; color: #4b5563; font-size: .74em; font-weight: 700; } .ldc .pf-wir b { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(140deg, #1fb1fb, #0a6fb0); color: #fff; font-size: .85em; font-weight: 800; letter-spacing: .02em; } .pf-zeit { color: #8a96a3; font-size: .7em; font-weight: 600; font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════════════════ SEO und GEO: Physiotherapie „Lindenhof" Seit 25.09.2026 größer (Marcel: „viel zu klein und man sieht nicht direkt was"): die Umschalter stehen im Suchfenster neben dem Suchfeld (spart eine Zeile), die Treffer haben Kürzel, eine fette Bewertung und farbige Öffnungszeiten; alle Schriften rund ein Drittel größer. ════════════════════════════════════════════════════════════════════════════ */ .ldc .gx-buehne.gx-suche { align-items: stretch; } .gx-suchfenster { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: .75em; padding: 1em; border-radius: 1.15em; background: #fff; box-shadow: 0 1.6em 3.2em -1.8em rgba(10, 50, 30, .38), 0 0 0 1px rgba(10, 50, 30, .07); overflow: hidden; } .gx-suchzeile { flex: none; display: flex; align-items: center; gap: .55em; } .gx-feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55em; height: 2.8em; padding: 0 1.05em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #e2e5e9; color: #1f2937; font-size: .98em; font-weight: 600; } .gx-feld > span { overflow: hidden; white-space: nowrap; } .gx-feld svg { flex: none; width: 1.15em; height: 1.15em; color: #9ca3af; } .gx-feld .gx-caret { flex: none; background: #1e7a4c; opacity: 1; animation: gxBlinken 1s steps(1) infinite; } .gx-tabs { flex: none; display: inline-flex; gap: .15em; padding: .25em; border-radius: 999px; background: #eef3f0; box-shadow: inset 0 0 0 1px rgba(10, 50, 30, .06); } .ldc .gx-buehne .gx-tabs button { padding: .66em 1.05em; border-radius: 999px; color: #3e5147; font-size: .86em; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .45s ease, color .45s ease, box-shadow .45s ease; } .gx-suche[data-modus="google"] [data-m="google"], .gx-suche[data-modus="ki"] [data-m="ki"] { background: #1e7a4c !important; color: #fff !important; box-shadow: 0 .4em .9em -.5em rgba(10, 60, 35, .6) !important; } .gx-ergebnis { position: relative; flex: 1; min-height: 0; } .ldc .gx-treffer { position: absolute; inset: 0; transition: opacity .5s ease, translate .5s ease; } /* --p: Platz (0 = oben); .5em oben frei für die Plakette „Platz 1" */ .gx-treffer li { position: absolute; left: 0; right: 0; top: calc(.5em + var(--p) * 4.3em); display: flex; align-items: center; gap: .75em; height: 3.95em; padding: 0 .85em 0 .7em; border-radius: .9em; transition: top .9s cubic-bezier(.2, .9, .3, 1.1), background .6s ease, box-shadow .6s ease; } .gx-treffer li > i { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .75em; background: var(--f, #eef0f2); color: var(--fs, #4b5563); font-size: .86em; font-weight: 800; letter-spacing: -.01em; } .gx-treffer li > span { flex: 1; min-width: 0; display: grid; } .gx-treffer .gx-du { z-index: 2; background: #f0fbf4; box-shadow: inset 0 0 0 1.5px #a9e4c1; } .gx-treffer .gx-du > i { background: linear-gradient(140deg, #4fb483, #1e7a4c); color: #fff; } .gx-treffer li small { display: block; overflow: hidden; color: #5b6472; font-size: .72em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .ldc .gx-treffer li strong { display: block; overflow: hidden; margin: .05em 0 .1em; color: #1a0dab; font-size: .95em; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .gx-treffer li em { display: flex; align-items: baseline; gap: .35em; min-width: 0; overflow: hidden; color: #6b7280; font-size: .78em; font-weight: 600; white-space: nowrap; } .ldc .gx-treffer li em b { color: #1f2937; font-weight: 800; } /* Sterne wie bei Google anteilig gefüllt: --s ist die Bewertung (4.2 → 84 %) */ .gx-sterne { background: linear-gradient(90deg, #f5a524 calc(var(--s, 5) * 20%), #d5dae1 0); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .02em; } .gx-offen, .gx-bald { overflow: hidden; text-overflow: ellipsis; } .gx-offen::before, .gx-bald::before { content: "·"; margin-right: .35em; color: #9ca3af; } .gx-offen { color: #15803d; } .gx-bald { color: #c2410c; } /* (0,2,0): sonst gilt „li > span" (flex: 1, grid) auch hier und der Knopf zieht sich über die Zeile */ .gx-treffer .gx-du-knoepfe { flex: none; display: block; } .ldc .gx-buehne .gx-route { display: inline-flex; align-items: center; gap: .4em; padding: .62em 1em; border-radius: 999px; background: #1a73e8; color: #fff; font-size: .8em; font-weight: 800; opacity: 0; scale: .8; transition: opacity .4s ease .5s, scale .5s cubic-bezier(.34, 1.56, .64, 1) .5s, background .3s ease; } .gx-route svg { width: 1.05em; height: 1.05em; } .ldc .gx-buehne .gx-route:hover { background: #1557b0; } .gx-suche.ist-oben .gx-route { opacity: 1; scale: 1; } .gx-du > u { position: absolute; top: -.8em; right: 1em; display: inline-flex; align-items: center; gap: .25em; padding: .38em .7em .38em .5em; border-radius: 999px; background: #1e7a4c; color: #fff; font-size: .72em; font-weight: 800; line-height: 1; text-decoration: none; box-shadow: 0 .5em 1em -.5em rgba(10, 60, 35, .7); opacity: 0; scale: .7; transition: opacity .4s ease .7s, scale .5s cubic-bezier(.34, 1.56, .64, 1) .7s; } .gx-du > u svg { width: 1.05em; height: 1.05em; } .gx-suche.ist-oben .gx-du > u { opacity: 1; scale: 1; } /* Karte mit Route */ .gx-karte { position: absolute; inset: 0; overflow: hidden; border-radius: .85em; opacity: 0; scale: .97; pointer-events: none; transition: opacity .5s ease, scale .6s cubic-bezier(.2, .9, .3, 1); } .gx-suche.ist-karte .gx-karte { opacity: 1; scale: 1; pointer-events: auto; } .gx-suche.ist-karte .gx-treffer { opacity: 0; } .gx-karte > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .kt-land { fill: #eef1ea; } .kt-fluss { fill: #bcd9ec; } .kt-park { fill: #cfe6c3; } .kt-baum { fill: #b2d6a2; } .kt-block { fill: #e2e5de; } .kt-strasse-rand path, .kt-strasse path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .kt-strasse-rand path { stroke: #d6dad2; stroke-width: 12; } .kt-strasse path { stroke: #fff; stroke-width: 9; } .kt-route { fill: none; stroke: #1a73e8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; } .gx-suche.ist-karte .kt-route { animation: gxStrich 1.6s .35s cubic-bezier(.65, 0, .35, 1) forwards; } .kt-du circle { fill: #1a73e8; stroke: #fff; stroke-width: 2.5; } .kt-du .kt-du-ring { fill: rgba(26, 115, 232, .18); stroke: none; transform-box: fill-box; transform-origin: center; animation: ktPuls 2s ease-out infinite; } @keyframes ktPuls { 0% { scale: .6; opacity: 1; } 100% { scale: 1.6; opacity: 0; } } .kt-pin path { fill: #1e7a4c; stroke: #fff; stroke-width: 1.5; } .kt-pin-punkt { fill: #fff; } .kt-pin { transform-box: fill-box; transform-origin: 50% 100%; } .gx-suche.ist-karte .kt-pin { animation: ktPin .9s .2s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes ktPin { 0% { translate: 0 -30px; opacity: 0; } 60% { translate: 0 0; opacity: 1; } 75% { scale: 1.1 .9; } 100% { scale: 1; } } /* Karte des Orts unten, rechts darin die Gehzeit (oben links deckte sie am Handy die Stecknadel zu) */ .gx-ortskarte { position: absolute; left: .8em; right: .8em; bottom: .8em; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15em .8em; padding: .8em .85em .8em 1em; border-radius: .85em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(0, 0, 0, .4); opacity: 0; translate: 0 .8em; transition: opacity .45s ease 1.1s, translate .6s cubic-bezier(.2, .9, .3, 1) 1.1s; } .ldc .gx-ortskarte b { grid-column: 1; overflow: hidden; color: #1f2937; font-size: .98em; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .gx-ortskarte small { grid-column: 1; color: #1e7a4c; font-size: .82em; font-weight: 700; } .gx-eta { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .35em; padding: .55em .9em .55em .7em; border-radius: 999px; background: #eaf1fd; color: #1f2937; font-size: .84em; font-weight: 600; white-space: nowrap; opacity: 0; scale: .9; transition: opacity .4s ease 1.5s, scale .5s cubic-bezier(.34, 1.56, .64, 1) 1.5s; } .gx-eta svg { width: 1.2em; height: 1.2em; color: #1a73e8; } .ldc .gx-ortskarte .gx-eta b { color: #1a73e8; font-size: 1.05em; font-weight: 800; } .gx-suche.ist-karte .gx-ortskarte { opacity: 1; translate: 0 0; } .gx-suche.ist-karte .gx-eta { opacity: 1; scale: 1; } /* KI-Suche */ .gx-kiantwort { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .7em; opacity: 0; translate: 0 .8em; pointer-events: none; transition: opacity .5s ease, translate .6s ease; } .gx-kiantwort-karte { padding: 1em 1.15em; border-radius: 1em; background: linear-gradient(160deg, #f0fdf4, #ecfeff); box-shadow: inset 0 0 0 1px #d1fae5; } .gx-suche[data-modus="ki"] .gx-treffer, .gx-suche[data-modus="ki"] .gx-karte { opacity: 0; pointer-events: none; } .gx-suche[data-modus="ki"] .gx-kiantwort { opacity: 1; translate: 0 0; pointer-events: auto; } .gx-kiantwort-kopf { display: flex; align-items: center; gap: .45em; color: #1e7a4c; font-size: .82em; font-weight: 800; letter-spacing: .02em; } .gx-kiantwort-kopf svg { width: 1.3em; height: 1.3em; } .ldc .gx-kiantwort p { margin: .5em 0 .75em; color: #1f2937; font-size: .98em; line-height: 1.5; } .ldc .gx-kiantwort p b { padding: 0 .2em; border-radius: .2em; background: #bbf7d0; color: #064e3b; } .gx-wort { opacity: .12; transition: opacity .25s ease; } .gx-wort.ist-an { opacity: 1; } .gx-quellen { display: flex; flex-wrap: wrap; gap: .4em; } .gx-quellen > span, .ldc .gx-buehne .gx-quelle { display: inline-flex; align-items: center; gap: .4em; padding: .42em .8em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #cdeedd; color: #065f46; font-size: .76em; font-weight: 700; } .gx-quellen i { width: .6em; height: .6em; border-radius: 50%; background: #1e7a4c; } /* Empfehlung und Folgefrage, nach der Antwort */ .gx-empfehlung { display: flex; align-items: center; gap: .8em; padding: .8em .95em; border-radius: 1em; background: #fff; box-shadow: inset 0 0 0 1px #e5e7eb, 0 .9em 1.8em -1.3em rgba(0, 40, 20, .4); opacity: 0; translate: 0 .6em; transition: opacity .45s ease, translate .6s cubic-bezier(.2, .9, .3, 1); } .gx-suche[data-modus="ki"] .gx-empfehlung { opacity: 1; translate: 0 0; transition-delay: 1.5s; } .gx-empfehlung > i { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .75em; background: linear-gradient(140deg, #4fb483, #1e7a4c); color: #fff; font-size: .86em; font-weight: 800; } .gx-empfehlung > span:first-of-type { flex: 1; min-width: 0; display: grid; gap: .12em; } .ldc .gx-empfehlung b { color: #111827; font-size: .95em; font-weight: 800; } .gx-empfehlung small { color: #b45309; font-size: .76em; font-weight: 700; } .gx-empfehlung em { overflow: hidden; color: #6b7280; font-size: .76em; text-overflow: ellipsis; white-space: nowrap; } .gx-empf-knoepfe { flex: none; display: flex; gap: .35em; } .ldc .gx-empf-knoepfe u { padding: .62em .95em; border-radius: 999px; box-shadow: inset 0 0 0 1px #d1d5db; color: #1f2937; font-size: .74em; font-weight: 800; text-decoration: none; white-space: nowrap; } .ldc .gx-empf-knoepfe u:last-child { background: #1e7a4c; box-shadow: none; color: #fff; } /* Ähnliche Fragen: nur auf der Startseite (dort ist unter der Empfehlung Platz), siehe unten */ .gx-weiter { display: none; } .gx-nachfrage { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .42em .42em .42em 1.15em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #e4e4e7; color: #8b93a0; font-size: .86em; opacity: 0; transition: opacity .45s ease; } .gx-suche[data-modus="ki"] .gx-nachfrage { opacity: 1; transition-delay: 2.2s; } .gx-nachfrage span { flex: 1; } .gx-nachfrage i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1e7a4c; color: #fff; } .gx-nachfrage svg { width: 1.05em; height: 1.05em; } /* ════════════════════════════════════════════════════════════════════════════ KI und Automatisierung: Werkstatt „Kfz Novak" (seit 1.29.0 hell) Seit 25.09.2026 größer (Marcel: „ein etwas größeres Design", „dass man schon beim Start etwas vom Chat sieht", „das alles so klein wirkt"): Schrift und Bedienelemente rund ein Viertel größer, der Chat bekommt mehr Breite, die Systeme rechts zeigen den Status in zwei Zeilen statt abgeschnitten. Schon im ersten Bild läuft ein Gespräch (grafiken.js, neuStart), auch bei „Bewegung reduzieren". ════════════════════════════════════════════════════════════════════════════ */ .ldc .gx-buehne.gx-ki { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .75em 1.1em; color: #16302f; -webkit-user-select: text; user-select: text; } .kx-zaehler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em 1.5em; color: #3f5b5a; font-size: .84em; font-weight: 600; } .ldc .kx-zaehler b { margin-right: .12em; color: #0d5b5e; font-size: 1.42em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kx-chat { position: relative; z-index: 1; grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; border-radius: 1.1em; background: #fff; box-shadow: 0 1.4em 2.8em -1.8em rgba(10, 70, 70, .45), 0 0 0 1px rgba(13, 122, 126, .1); overflow: hidden; } .kx-kopf { flex: none; display: flex; align-items: center; gap: .65em; padding: .6em .9em; border-bottom: 1px solid #e4efee; } .kx-avatar { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .75em; background: linear-gradient(140deg, #35c2b8, #0d7a7e); color: #fff; } .kx-avatar svg { width: 1.2em; height: 1.2em; } .ldc .kx-kopf span b { display: block; color: #16302f; font-size: 1em; font-weight: 800; letter-spacing: -.01em; } .kx-kopf small { display: flex; align-items: center; gap: .4em; color: #4f6867; font-size: .78em; font-weight: 600; } .kx-kopf small i { width: .5em; height: .5em; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 .2em rgba(34, 181, 115, .2); } .kx-kopf em { margin-left: auto; padding: .4em .75em; border-radius: 999px; background: #e3f4f2; color: #0d7a7e; font-size: .66em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .kx-verlauf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; padding: .8em .9em .6em; overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 1.4em); mask-image: linear-gradient(transparent, #000 1.4em); } .kx-verlauf::-webkit-scrollbar { display: none; } /* (0,3,0): die Rücksetzregel der Bühne für p hat (0,2,1) und nahm den Abstand sonst weg, der Verlauf klebte oben */ .ldc .gx-buehne .kx-verlauf > :first-child { margin-top: auto; } .ldc .gx-buehne .kx-nachricht { max-width: 90%; padding: .58em .85em; border-radius: 1em; font-size: .9em; line-height: 1.45; overflow-wrap: anywhere; animation: kxRein .4s cubic-bezier(.2, .9, .3, 1.1) both; } @keyframes kxRein { from { opacity: 0; translate: 0 .6em; } } .kx-ich { align-self: flex-end; background: #0d7a7e; color: #fff; font-weight: 600; border-bottom-right-radius: .3em; } .kx-bot { align-self: flex-start; background: #eef5f4; color: #1d3534; border-bottom-left-radius: .3em; } .ldc .gx-buehne .kx-tippt { display: inline-flex; gap: .3em; padding: .85em .95em; } .kx-tippt i { width: .5em; height: .5em; border-radius: 50%; background: #93aaa9; animation: kxPunkt 1.1s ease-in-out infinite; } .kx-tippt i:nth-child(2) { animation-delay: .15s; } .kx-tippt i:nth-child(3) { animation-delay: .3s; } @keyframes kxPunkt { 30% { translate: 0 -.3em; opacity: 1; } 60%, 100% { translate: 0 0; opacity: .5; } } .kx-vorschlaege { flex: none; display: flex; flex-wrap: wrap; gap: .4em; min-height: 2.55em; padding: 0 .9em .6em; } .ldc .gx-buehne .kx-vorschlaege button { padding: .55em .95em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #bfe3df; color: #0d6b6e; font-size: .8em; font-weight: 700; transition: background .3s ease; animation: kxRein .4s ease both; } .ldc .gx-buehne .kx-vorschlaege button:hover { background: #e9f7f5; } .kx-eingabe { flex: none; display: flex; align-items: center; gap: .4em; margin: 0 .9em; padding: .28em .28em .28em 1em; border-radius: 999px; background: #f4f8f8; box-shadow: inset 0 0 0 1px #d8e6e5; transition: box-shadow .3s ease; } .kx-eingabe:focus-within { box-shadow: inset 0 0 0 1.5px #0d7a7e; } .ldc .gx-ki .kx-eingabe input { flex: 1; min-width: 0; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: .5em 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: none !important; box-shadow: none !important; color: #16302f !important; font-family: inherit !important; font-size: .9em !important; line-height: 1.3 !important; } .ldc .gx-ki .kx-eingabe input::placeholder { color: #7d9797; opacity: 1; } .ldc .gx-buehne .kx-eingabe button { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #0d7a7e; color: #fff; transition: background .3s ease, opacity .3s ease; } .ldc .gx-buehne .kx-eingabe button:hover { background: #0a6164; } .ldc .gx-buehne .kx-eingabe button[disabled] { opacity: .4; cursor: default; } .kx-eingabe button svg { width: 1.1em; height: 1.1em; } .kx-hinweis { flex: none; display: block; padding: .5em 1.4em .75em; color: #6f8786; font-size: .68em; line-height: 1.4; } .kx-systeme { position: relative; z-index: 1; grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; gap: .5em; min-height: 0; } .kx-systeme-titel { display: flex; align-items: center; gap: .6em; color: #3f5b5a; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* Lebenszeichen: die Abläufe laufen gerade */ .kx-systeme-titel::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; background: #22b573; animation: kxLebt 2s ease-out infinite; } @keyframes kxLebt { 0% { box-shadow: 0 0 0 0 rgba(34, 181, 115, .5); } 100% { box-shadow: 0 0 0 .6em rgba(34, 181, 115, 0); } } .kx-system { display: flex; align-items: center; gap: .7em; min-height: 4.05em; padding: .45em .75em; border-radius: .95em; background: #fff; box-shadow: 0 .8em 1.6em -1.3em rgba(10, 70, 70, .45), 0 0 0 1px rgba(13, 122, 126, .1); transition: background .45s ease, box-shadow .45s ease, translate .45s cubic-bezier(.2, .9, .3, 1.2); } .kx-system > i { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .7em; background: #e6f4f3; color: #0d7a7e; transition: background .45s ease, color .45s ease; } .kx-system > i svg { width: 1.2em; height: 1.2em; } .kx-system > span { min-width: 0; } .ldc .kx-system b { display: block; color: #16302f; font-size: .88em; font-weight: 800; line-height: 1.25; } .kx-system small { display: -webkit-box; overflow: hidden; margin-top: .1em; color: #6f8786; font-size: .78em; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .45s ease; } .kx-system.ist-aktiv { background: #effaf8; box-shadow: 0 1em 2em -1.2em rgba(13, 122, 126, .6), inset 0 0 0 1.5px #35c2b8; translate: -.25em 0; } .kx-system.ist-aktiv > i { background: #0d7a7e; color: #fff; } .kx-system.ist-erledigt small { color: #0b6e71; font-weight: 700; } /* Haken vor dem Status: erledigt */ .kx-system.ist-erledigt small::before { content: ""; display: inline-block; width: .62em; height: .34em; margin: 0 .45em .22em .1em; border-left: .15em solid currentColor; border-bottom: .15em solid currentColor; rotate: -45deg; } .kx-leitungen { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .kx-leitungen path { fill: none; stroke: rgba(13, 122, 126, .22); stroke-width: 1.3; transition: stroke .4s ease; } .kx-leitungen path.ist-aktiv { stroke: rgba(13, 122, 126, .75); } .kx-leitungen circle { fill: #0d7a7e; filter: drop-shadow(0 0 3px rgba(13, 122, 126, .55)); } @media (prefers-reduced-motion: reduce) { .kx-systeme-titel::before { animation: none; box-shadow: 0 0 0 .2em rgba(34, 181, 115, .2); } } /* Browserrahmen ohne die drei Mac-Punkte, nur noch eine schlichte Adresszeile (seit 1.32.5; Marcel, 25.09.2026: „ich will nicht immer das Mac-Browser-Design haben, halte das einfacher") */ .ldc .ldc-gr-leiste > i, .ldc .gx-leiste > i { display: none; } .ldc .ldc-gr-leiste, .ldc .gx-leiste { justify-content: center; background: #fff; border-bottom-color: rgba(10, 40, 70, .08); } .ldc .ldc-gr-url, .ldc .gx-url { margin: 0 auto; background: rgba(10, 40, 70, .05); box-shadow: none; } .ldc .ldc-web3 .ldc-gr-leiste { height: 2.4em; } .ldc .ldc-web3 .ldc-gr-url { padding: .32em 1em; font-size: .76em; } /* ════════════════════════════════════════════════════════════════════════════ Handy: eigene Anordnung unter 520 px Breite ════════════════════════════════════════════════════════════════════════════ */ @container (max-width: 519px) { .ldc .gx-buehne { font-size: clamp(8.5px, 3.55cqw, 13px); padding: 5%; gap: .7em; } .ldc .ldc-stapelkarte-bild .gx-buehne { padding-bottom: 5%; } .gx-push { left: 4%; right: 4%; width: auto; max-width: none; } /* Webdesign und Onlineshop: eigene Schriftgröße (vorher blieb es bei 8,5 px, alles war winzig) */ .ldc .ldc-gr-buehne { font-size: clamp(8.5px, 3.9cqw, 14px); } .ldc .ldc-gr-buehne.ldc-web3, .ldc .ldc-gr-buehne.ldc-shop2 { padding: 5%; } .ldc-w3-push { left: 4%; right: 4%; width: auto; max-width: none; } /* Logos: der Gegenstand etwas kleiner */ /* KI: Chat oben (etwas größere Schrift als die übrigen Szenen), darunter die Systeme als Reihe von Symbolen. Über der Reihe steht, was zuletzt erledigt wurde (Name und Status des Systems mit .ist-zuletzt, grafiken.js); das Symbol dazu ist umrandet. */ .ldc .gx-buehne.gx-ki { font-size: clamp(8.5px, 3.9cqw, 14px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .55em; } .kx-zaehler, .kx-systeme-titel { display: none; } /* (0,3,0): „.ldc .gx-buehne svg { display: block }" hat (0,2,1), die Leitungen liefen sonst am Handy quer durchs Bild */ .ldc .gx-buehne .kx-leitungen { display: none; } .kx-chat { grid-column: 1; grid-row: 1; } .kx-kopf { gap: .6em; padding: .55em .85em; } .kx-avatar { width: 2.2em; height: 2.2em; } .kx-verlauf { padding: .75em .85em .55em; } .kx-vorschlaege { padding: 0 .85em .55em; } .kx-eingabe { margin: 0 .85em; } .kx-hinweis { padding: .45em 1.2em .65em; } .kx-systeme { grid-column: 1; grid-row: 2; flex-direction: row; align-items: stretch; gap: .35em; padding-top: 1.75em; } .kx-system { flex: 1; justify-content: center; min-height: 0; padding: .4em; border-radius: .75em; } .kx-system > i { width: 2.1em; height: 2.1em; } /* translate: none, nicht 0 0: jeder andere Wert macht die Karte zum Bezugsrahmen der Statuszeile */ .kx-system.ist-aktiv { translate: none; } .kx-system.ist-zuletzt { box-shadow: 0 .8em 1.6em -1.3em rgba(10, 70, 70, .45), inset 0 0 0 1.5px #35c2b8; } .kx-system > span { display: none; } .kx-system.ist-zuletzt > span { position: absolute; left: .15em; right: .15em; top: 0; display: flex; align-items: baseline; gap: .45em; min-width: 0; white-space: nowrap; animation: kxRein .4s cubic-bezier(.2, .9, .3, 1.1) both; } .ldc .kx-system.ist-zuletzt b { flex: none; font-size: .86em; } .kx-system.ist-zuletzt small { display: block; min-width: 0; overflow: hidden; margin: 0; font-size: .86em; text-overflow: ellipsis; white-space: nowrap; } /* Hosting: Untertexte umbrechen statt mit „…" abschneiden */ .ldc .gx-buehne.gx-pflege { padding-inline: 5%; } .ldc .ldc-stapelkarte-bild .gx-buehne.gx-pflege { padding-bottom: 5%; } .ldc .ldc-stapelkarte-bild .pf-karte { font-size: 1.08em; } .pf-karte { font-size: 1.08em; padding: 1.1em 1.15em 1em; } .pf-zeile { gap: .8em; } .pf-text small { white-space: normal; } } /* Nur am Handy (Fläche hochkant 4:5): Webdesign, Onlineshop und SEO bekommen eine eigene Anordnung. Unter 520 px, aber quer (Leistungsseite bei 1001 bis 1180 px Fensterbreite) bleibt es bei der Desktop-Anordnung, kleiner gesetzt (siehe „Leistungsseite schmal" unten). */ @media (max-width: 600px) { @container (max-width: 519px) { /* Webdesign: die Café-Website in ihrer Handy-Fassung, eine Spalte, Foto oben */ .ldc-web3 { --w-zoom: 1.1em; --w-dialog: 1.1em; } .ldc-web3 .ldc-w2-nav { gap: .8em; padding: .75em 1em; } .ldc-web3 .ldc-w2-nav > span { display: none; } .ldc-web3 .ldc-w2-nav em { font-size: .72em; } .ldc-web3 .ldc-w2-hero { grid-template-columns: 1fr; gap: .8em; padding: 0 1em 1em; } .ldc-web3 .ldc-w2-foto { order: -1; height: 7.2em; } .ldc .ldc-web3 .ldc-w2-hero-text strong { font-size: 1.7em; } .ldc .ldc-web3 .ldc-w2-hero-text p { font-size: .8em; } .ldc-web3 .ldc-w2-knoepfe em { font-size: .74em; } .ldc-web3 .ldc-w2-karten { grid-template-columns: 1fr; gap: .45em; padding: 0 1em 1em; } .ldc-web3 .ldc-w2-karten span { grid-template-columns: auto minmax(0, 1fr); column-gap: .75em; align-items: center; padding: .6em .75em; } .ldc-web3 .ldc-w2-karten i { grid-row: 1 / span 2; margin: 0; } .ldc .ldc-web3 .ldc-w2-karten b { font-size: .8em; } .ldc-web3 .ldc-w2-karten small { font-size: .72em; } .ldc-web3 .ldc-w3-speisen { margin: 0 1em 1em; } .ldc-web3 .ldc-w3-speisen span { font-size: .76em; } .ldc-web3 .ldc-w2-stimme { margin: 0 1em 1em; } .ldc-web3 .ldc-w2-stimme small { font-size: .72em; } .ldc-web3 .ldc-w2-fuss small { font-size: .7em; } /* Onlineshop: Packung oben, darunter die Angaben, Preis und Knopf nebeneinander; die Kasse deckt das Fenster */ .ldc-shop2 .ldc-gr-shopfenster { padding: .9em 1em 1em; font-size: 1.1em; } .ldc-shop2 .ldc-gr-shopkopf > span { display: none; } .ldc-shop2 .ldc-gr-produkt { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .8em; margin-top: .8em; } .ldc-shop2 .ldc-gr-packung { min-height: 5em; } .ldc-shop2 .ldc-gr-produktinfo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1em; } .ldc-shop2 .ldc-gr-produktinfo > :not(.ldc-gr-preis):not(.ldc-gr-kaufen) { grid-column: 1 / -1; } .ldc-shop2 .ldc-gr-produktinfo small { font-size: .7em; } .ldc-shop2 .ldc-gr-kaufen { margin-top: 0; } .ldc-shop2 .ldc-s2-kasse { width: 100%; font-size: 1.15em; } .ldc-shop2 .ldc-s2-dazu { display: block; } /* Suche: Umschalter über dem Suchfeld; Schrift wie beim KI-Chat etwas größer als in den übrigen Szenen */ .ldc .gx-buehne.gx-suche { font-size: clamp(8.5px, 3.9cqw, 14px); } .gx-suchfenster { gap: .65em; padding: .85em; } .gx-suchzeile { flex-direction: column; align-items: stretch; gap: .55em; } .gx-tabs { order: -1; align-self: center; } .gx-feld { flex: none; } .gx-treffer li { top: calc(.5em + var(--p) * 4.25em); height: 3.9em; gap: .6em; padding: 0 .6em 0 .55em; } .gx-treffer li > i { width: 2.4em; height: 2.4em; } .ldc .gx-buehne .gx-route { padding: .6em .85em; font-size: .78em; } .gx-eta span { display: none; } .gx-empf-knoepfe u:first-child, .gx-empfehlung em { display: none; } } } /* Leistungsseite schmal (1001 bis 1180 px Fensterbreite, zweispaltig): die Fläche ist unter 520 px breit, aber quer, und unten stehen die Stichworte (bei Webdesign und SEO in zwei Zeilen). Webdesign, Onlineshop und SEO behalten die Desktop-Anordnung, kleiner gesetzt; der KI-Chat nimmt die Handy-Anordnung ohne Hinweiszeile. */ @media (min-width: 601px) { @container (max-width: 519px) { .ldc .ldc-gr-buehne, .ldc .gx-buehne.gx-suche { font-size: clamp(8px, 2.6cqw, 13px); } .ldc .gx-buehne.gx-ki { font-size: clamp(8.5px, 2.9cqw, 13px); } .ldc .ldc-stapelkarte-bild .ldc-gr-buehne.ldc-web3, .ldc .ldc-stapelkarte-bild .gx-buehne.gx-suche { padding-bottom: 22.5%; } .ldc .ldc-stapelkarte-bild .ldc-gr-buehne.ldc-shop2, .ldc .ldc-stapelkarte-bild .gx-buehne.gx-ki { padding-bottom: 13.5%; } .kx-hinweis { display: none; } .ldc-shop2 .ldc-s2-kasse { width: 72%; } } } /* ════════════════════════════════════════════════════════════════════════════ Startseite: Leistungen mit denselben Grafiken Seit 1.29.0 neutral (Marcel, 24.09.2026: „auf der Startseite würde ich nicht diese Farben machen"): eine hellgraue Fläche für alle, keine Kartenfarben. ════════════════════════════════════════════════════════════════════════════ */ .ldc .ldc-dienstbild.ldc-gr-figur { --gr-grund: #f1f2f4; background: var(--gr-grund); } .ldc .ldc-dienstbild .gx-buehne.gx-marke { background: transparent; } .ldc .ldc-dienstbild .gx-buehne img { transition: none; } .ldc .ldc-dienstbild .gx-buehne img { transform: none; } /* Seit 25.09.2026 (Marcel: „das alles so klein"): Die Fläche der Startseite ist fast quadratisch und höher als die Grafik einer Leistungskarte, deshalb schreiben Webdesign, Onlineshop, KI und SEO hier größer. Nur ab 520 px Breite, darunter gilt die Handy-Anordnung. */ @container (min-width: 520px) { /* Webdesign und Onlineshop: unten kein Platz für Stichworte nötig (die gibt es nur auf der Leistungsseite) */ .ldc .ldc-dienstbild .ldc-gr-buehne.ldc-web3, .ldc .ldc-dienstbild .ldc-gr-buehne.ldc-shop2 { padding-bottom: 4.5%; } .ldc .ldc-dienstbild .ldc-web3 { --w-zoom: 1.32em; --w-dialog: 1.3em; } /* Onlineshop: die Fläche ist fast quadratisch, deshalb die Packung groß oben und die Angaben darunter */ .ldc .ldc-dienstbild .ldc-shop2 .ldc-gr-produkt { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1em; } .ldc .ldc-dienstbild .ldc-shop2 .ldc-gr-produktinfo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.3em; } .ldc .ldc-dienstbild .ldc-shop2 .ldc-gr-produktinfo > :not(.ldc-gr-preis):not(.ldc-gr-kaufen) { grid-column: 1 / -1; } .ldc .ldc-dienstbild .ldc-shop2 .ldc-gr-kaufen { margin-top: 0; } .ldc .ldc-dienstbild .ldc-shop2 .ldc-s2-kasse { width: 62%; font-size: 1.2em; } .ldc .ldc-dienstbild .ldc-shop2 .ldc-s2-dazu { display: block; } .ldc .ldc-dienstbild .gx-buehne.gx-ki { font-size: clamp(8px, 2.6cqw, 17px); grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); } .ldc .ldc-dienstbild .gx-buehne.gx-suche { font-size: clamp(8px, 2.6cqw, 17px); } .ldc .ldc-dienstbild .gx-treffer { font-size: 1.1em; } .ldc .ldc-dienstbild .gx-treffer li { top: calc(.5em + var(--p) * 4.55em); height: 4.1em; } .ldc .ldc-dienstbild .gx-kiantwort { font-size: 1.1em; gap: .8em; } .ldc .ldc-dienstbild .gx-weiter { display: grid; padding: .1em .3em 0; opacity: 0; translate: 0 .6em; transition: opacity .45s ease, translate .6s cubic-bezier(.2, .9, .3, 1); } .ldc .ldc-dienstbild .gx-suche[data-modus="ki"] .gx-weiter { opacity: 1; translate: 0 0; transition-delay: 1.85s; } .ldc .ldc-dienstbild .gx-weiter b { margin-bottom: .45em; color: #6b7280; font-size: .7em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .ldc .ldc-dienstbild .gx-weiter span { display: flex; align-items: center; gap: .6em; padding: .55em .2em; border-top: 1px solid #edf0f2; color: #1f2937; font-size: .86em; font-weight: 600; } .ldc .ldc-dienstbild .gx-weiter i { color: #1e7a4c; font-size: 1.2em; font-weight: 700; line-height: 1; } } @media (max-width: 1000px) { .ldc .ldc-dienste-buehne { aspect-ratio: 4 / 3.4; min-height: 0; } } @media (max-width: 600px) { .ldc .ldc-dienste-buehne { aspect-ratio: 4 / 5; } } /* ═══════════════════════════════════════════════════════════════════════════ Karten „Was uns anders macht" im Kartenstil der pixfort-Vorlage (Runde 33, 24./25.09.2026) Markup: markup.php (Karten) und kopf.php (Überschrift + Pille), Verhalten: skript.js. Sechs Karten: 1 Ansprechpartner (Verlaufsrahmen), 2 Du änderst selbst (grau, Mini-Website), 3 Deine Website gehört dir (schwarz), 4 So entsteht deine Website (Video), 5 Support-Nummer (grau, Bürozeiten), 6 Erstgespräch (Foto). Aufbau jeder Karte: article.ldc-kk.px-karte > .px-flaeche (die sichtbare Karte) · .ldc-kk gehört dem Karussell: bewegung.js setzt dort transform/opacity für den räumlichen Abgang. Deshalb neigt sich nur .px-flaeche (eigene Perspektive), die Karte bleibt „flach". · .ldc-kk ist ein Größen-Container: innen wird in em gemessen, die Grundgröße hängt an der Kartengröße (min(5.2cqw, 3.56cqh) = 16 px bei 307 × 450). So skaliert alles wie ein Bild, vom Handy (287 × 420) bis zu den großen Bildschirmen (387 × 540). · Einblenden, Zählwerke, Balken: Web Animations aus skript.js (mit Verzögerung als Zeitleiste). ═══════════════════════════════════════════════════════════════════════════ */ @property --px-rx { syntax: ""; inherits: true; initial-value: 0deg; } /* Der Rahmen zeichnet sich einmal rundum. Die Maske hat eine weiche Vorderkante von 24°, deshalb läuft die Zeichnung bis 384°: erst dann ist auch das letzte Stück vor dem Anfang (336° bis 360°) deckend. */ @property --px-zeig { syntax: ""; inherits: false; initial-value: 384deg; } /* ── Grundgerüst ─────────────────────────────────────────────────────────── */ .ldc .ldc-kk.px-karte { padding: 0; gap: 0; display: block; background: transparent; border-radius: 22px; overflow: visible; transform-style: flat; container-type: size; color: var(--tinte, #0a1720); font-family: "Manrope LD", system-ui, sans-serif; line-height: 1.4; } .ldc .px-karte .px-flaeche { --px-kurve: cubic-bezier(.22, 1, .36, 1); position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; isolation: isolate; font-size: min(5.2cqw, 3.56cqh); background: var(--karte, #f1f1f2); transform: perspective(1100px) rotateX(var(--px-rx, 0deg)) rotateY(var(--px-ry, 0deg)); transition: transform .8s var(--px-kurve), translate .8s var(--px-kurve), box-shadow .8s var(--px-kurve); box-shadow: 0 0 0 0 rgba(10, 70, 110, 0); } .ldc .px-karte.px-schwebt .px-flaeche { translate: 0 -6px; transition: transform .45s var(--px-kurve), translate .6s var(--px-kurve), box-shadow .6s var(--px-kurve); box-shadow: 0 40px 60px -36px rgba(8, 70, 112, .42), 0 14px 28px -20px rgba(8, 40, 70, .22); } .ldc .px-karte.px-wartet .px-flaeche { opacity: 0; } /* Was erst das Skript füllt (Live-Stand, Linie „jetzt“), bleibt ohne Skript verborgen */ .ldc .px-karte [hidden] { display: none !important; } /* Glanz: ein Lichtstreifen und ein weicher Fleck, beide folgen dem Zeiger (skript.js) */ .ldc .px-karte .px-glanz { position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--px-mx, 50%) var(--px-my, 0%), rgba(255, 255, 255, .22), transparent 42%), linear-gradient(112deg, transparent calc(var(--px-gx, 50%) - 18%), rgba(255, 255, 255, .16) var(--px-gx, 50%), transparent calc(var(--px-gx, 50%) + 18%)); opacity: 0; transition: opacity .6s var(--px-kurve); } .ldc .px-karte.px-schwebt .px-glanz { opacity: 1; } /* Unsichtbar für Augen, lesbar für Screenreader (Zählwerke, Wochentage, Meldung) */ .ldc .px-karte .px-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Zählwerk: jede Ziffer rollt in ihrem Fenster ────────────────────────── */ .ldc .px-karte .px-rolle { display: inline-flex; vertical-align: top; } /* Fenster 1,3 em: die Ziffer (Versalhöhe, 23–80 %) sitzt ganz im ungeblendeten Mittelteil; was darüber oder darunter vorbeirollt, ist außerhalb von 10–88 % unsichtbar und läuft nie über die Zeile darunter. */ .ldc .px-karte .px-rolle-fenster { display: inline-block; height: 1.3em; overflow: hidden; margin: -.15em 0; -webkit-mask-image: linear-gradient(transparent 10%, #000 20%, #000 81%, transparent 88%); mask-image: linear-gradient(transparent 10%, #000 20%, #000 81%, transparent 88%); } .ldc .px-karte .px-rolle-band { display: block; will-change: transform; } .ldc .px-karte .px-rolle-band > span, .ldc .px-karte .px-rolle-zeichen { display: block; height: 1.3em; line-height: 1.3em; } .ldc .px-karte .px-rolle-zeichen { display: inline-block; margin: -.15em 0; } /* ── Pfeile, die sich beim Überfahren durchschieben ─────────────────────── */ .ldc .px-karte .px-pfeil, .ldc .px-kopf .px-pfeil { position: relative; display: inline-grid; flex: none; width: 1.05em; height: 1.05em; overflow: hidden; } .ldc .px-karte .px-pfeil svg, .ldc .px-kopf .px-pfeil svg { grid-area: 1 / 1; width: 100%; height: 100%; color: currentColor; transition: transform .55s cubic-bezier(.65, 0, .35, 1); } .ldc .px-karte .px-pfeil svg + svg, .ldc .px-kopf .px-pfeil svg + svg { transform: translateX(-125%); } .ldc .px-karte a:hover .px-pfeil svg:first-child, .ldc .px-kopf a:hover .px-pfeil svg:first-child { transform: translateX(125%); } .ldc .px-karte a:hover .px-pfeil svg + svg, .ldc .px-kopf a:hover .px-pfeil svg + svg { transform: none; } .ldc .px-kopf .px-pfeil-schraeg svg + svg { transform: translate(-125%, 125%); } .ldc .px-kopf a:hover .px-pfeil-schraeg svg:first-child { transform: translate(125%, -125%); } /* ── gemeinsame Bausteine der grauen Karten (K2, K5) ─────────────────────── */ .ldc .px-grau .px-flaeche { display: flex; flex-direction: column; padding: 1.55em 1.5em 1.5em; background: #f0f0f1; } .ldc .px-karte .px-marke { position: absolute; top: 1.35em; right: 1.35em; padding: .34em .8em; border-radius: 999px; background: #e0e1e4; color: rgba(10, 23, 32, .74); font-size: max(12px, .8em); font-weight: 700; line-height: 1.4; letter-spacing: 0; white-space: nowrap; } .ldc .px-karte .px-marke-schwarz { background: var(--tinte, #0a1720); color: #fff; } .ldc .px-karte .px-symbol { flex: none; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: #fff; box-shadow: 0 .7em 1.4em -.8em rgba(10, 70, 110, .35), 0 0 0 1px rgba(10, 23, 32, .04); } .ldc .px-karte .px-symbol svg { display: block; width: 1.55em; height: 1.55em; overflow: visible; } .ldc .px-karte .px-titel { margin: 1.05em 0 0; padding: 0; font-family: inherit; font-size: 1.38em; font-weight: 700; line-height: 1.14; letter-spacing: -.032em; color: var(--tinte, #0a1720); } /* pretty: kein einzelnes Wort allein in der letzten Zeile */ .ldc .px-karte .px-text { margin: .45em 0 0; font-size: max(12.5px, .9em); font-weight: 500; line-height: 1.5; color: rgba(10, 23, 32, .64); text-wrap: pretty; } .ldc .px-karte .px-zwei-saetze span { display: block; text-wrap: balance; } .ldc .px-karte .px-klein { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 .75em; font-size: max(12px, .8em); font-weight: 700; line-height: 1.3; color: rgba(10, 23, 32, .62); } /* ══ K1 · weiße Karte im drehenden Verlaufsrahmen ═══════════════════════ */ .ldc .px-rahmen .px-flaeche { background: #fff; } .ldc .px-rahmen .px-ring-huelle { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; -webkit-mask-image: conic-gradient(from 210deg, #000 calc(var(--px-zeig) - 24deg), transparent var(--px-zeig)); mask-image: conic-gradient(from 210deg, #000 calc(var(--px-zeig) - 24deg), transparent var(--px-zeig)); } /* Ein großes Quadrat mit Kegelverlauf dreht sich (nur transform, läuft auf der Grafikkarte). Ruhelage wie in der Vorlage: oben kühl (Blau), unten warm. */ .ldc .px-rahmen .px-ring { position: absolute; left: 50%; top: 50%; width: 160cqh; height: 160cqh; margin: -80cqh 0 0 -80cqh; /* Rundum satt: kein Stopp heller als #9fdcff bzw. #ffc38a, sonst verschwindet der Rahmen stellenweise auf dem Weiß. Gemischt wird in OKLab, und zwischen Blau und Orange liegt ein Hauch Lavendel (wie bei pixfort): so werden die Übergänge nicht grau. */ background: conic-gradient(in oklab from -40deg, #0a84c9, #1fb1fb 12%, #7fdcff 23%, #a7b4ff 31%, #ffb38a 40%, #ff9254 50%, #ffb06b 58%, #c9a8f0 67%, #7fdcff 76%, #1fb1fb 88%, #0a84c9); animation: px-dreh 16s linear infinite; } .ldc .px-rahmen .px-schein { position: absolute; inset: 10% 6% 4%; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(170deg, rgba(31, 177, 251, .9), rgba(127, 220, 255, .6) 45%, rgba(255, 164, 102, .85)); filter: blur(30px); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .8s var(--px-kurve, ease), transform .8s cubic-bezier(.22, 1, .36, 1); } .ldc .px-rahmen.px-schwebt .px-schein { opacity: .42; transform: translateY(22px) scale(1); } .ldc .px-rahmen .px-weiss { position: absolute; inset: .64em; z-index: 1; border-radius: calc(22px - .64em); background: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 1.35em 1.3em 1.45em; } .ldc .px-karte .px-riesig { display: block; font-weight: 700; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinte, #0a1720); } /* Die Tabellenziffer „1" steht mittig in ihrer Zelle; -.14em holt sie bündig an die Textkante darunter */ .ldc .px-rahmen .px-riesig { font-size: 8.2em; margin-left: -.14em; } .ldc .px-rahmen .px-etikett { display: block; margin-top: .55em; font-size: max(12px, .86em); font-weight: 600; line-height: 1.35; color: rgba(10, 23, 32, .6); } /* Drei Aussagen wie bei pixfort. Jede Zeile bricht ausgeglichen um (nie ein einzelnes Wort allein). */ .ldc .px-rahmen .px-drei { margin: 0; font-size: 1.13em; font-weight: 700; line-height: 1.16; letter-spacing: -.03em; color: rgba(10, 23, 32, .44); } .ldc .px-rahmen .px-drei span { display: block; text-wrap: balance; } .ldc .px-rahmen .px-drei span + span { margin-top: .12em; } .ldc .px-rahmen .px-drei span:first-child { color: var(--tinte, #0a1720); } /* ══ K2 · Du änderst selbst: Mini-Website, deren Überschrift sich ändert ══════ Das weiße Feld ist eine kleine Website (Café Morgenrot) mit Bearbeiten-Leiste. Die Vorführung (skript.js) klickt die Überschrift an, markiert, tippt neu und speichert. Wer selbst hineinklickt, tippt selbst (höchstens 40 Zeichen); Enter oder „Speichern" zeigt die Meldung. data-kein-ziehen am Feld: dort zieht das Karussell nicht (bewegung.js). */ .ldc .px-selbst .px-stift { transform-box: fill-box; transform-origin: 0 100%; } .ldc .px-selbst .px-stift-strich { stroke-dasharray: 1; stroke-dashoffset: 0; } .ldc .px-selbst .px-mini { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; margin: 1.15em -.35em -2.2em; padding: 0 0 2.2em; border-radius: 14px; background: #fff; box-shadow: 0 1em 2.4em -1.6em rgba(10, 70, 110, .35); -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); cursor: default; } .ldc .px-selbst .px-mini-leiste { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: 0; padding: .5em .5em .5em .9em; border-bottom: 1px solid rgba(10, 23, 32, .07); } .ldc .px-selbst .px-mini-ort { display: inline-flex; align-items: center; gap: .4em; min-width: 0; font-size: max(12px, .78em); font-weight: 600; line-height: 1.2; color: rgba(10, 23, 32, .64); white-space: nowrap; } .ldc .px-selbst .px-mini-ort svg { flex: none; width: 1.15em; height: 1.15em; } .ldc .px-selbst .px-mini-speichern { flex: none; display: inline-flex; align-items: center; padding: .52em 1em; border-radius: 999px; background: #0a6ea8; color: #fff; font-size: max(12px, .78em); font-weight: 700; line-height: 1.2; letter-spacing: .005em; white-space: nowrap; -webkit-user-select: none; user-select: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .3s; } /* Knopf und Überschrift sind erst mit Skript bedienbar (role und contenteditable setzt skript.js) */ .ldc .px-selbst .px-mini-speichern[role="button"] { cursor: pointer; } .ldc .px-selbst .px-mini-speichern[role="button"]:hover { background: #085a89; } .ldc .px-selbst .px-mini-speichern:focus-visible { outline: 2px solid #0a84c9; outline-offset: 2px; } .ldc .px-selbst .px-mini.px-drueckt .px-mini-speichern { transform: scale(.9); background: #085a89; transition-duration: .12s; } .ldc .px-selbst .px-mini-seite { padding: .95em 1em 0; } .ldc .px-selbst .px-mini-kopf { display: flex; align-items: center; gap: .45em; margin: 0; padding: 0; font-size: max(12px, .8em); line-height: 1.2; color: #3a2a22; } .ldc .px-selbst .px-mini-kopf svg { flex: none; width: 1.35em; height: 1.35em; } .ldc .px-selbst .px-mini-kopf b { font-weight: 800; letter-spacing: -.01em; } .ldc .px-selbst .px-mini-kopf .px-mini-menue { margin-left: auto; width: 1.3em; height: 1.3em; color: rgba(58, 42, 34, .6); } /* Die Überschrift ist zwei Zeilen hoch, auch leer: nichts springt, während getippt wird */ .ldc .px-selbst .px-mini-h { position: relative; display: block; margin: .7em -.32em 0; padding: .1em .32em .12em; min-height: calc(2 * 1.1em + .22em); font-size: 1.34em; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: #2a1a14; overflow-wrap: anywhere; border-radius: 6px; outline: none; caret-color: #0a84c9; -webkit-user-select: text; user-select: text; transition: box-shadow .35s cubic-bezier(.22, 1, .36, 1), background-color .35s; } .ldc .px-selbst .px-mini-h[contenteditable] { cursor: text; } .ldc .px-selbst .px-mini.px-edit .px-mini-h, .ldc .px-selbst .px-mini-h:focus { box-shadow: 0 0 0 1.5px #0a84c9; background-color: rgba(31, 177, 251, .06); } .ldc .px-selbst .px-mini-h::selection { background: rgba(31, 177, 251, .32); color: inherit; } .ldc .px-selbst .px-mini-sel { background: rgba(31, 177, 251, .32); border-radius: 2px; } /* Schreibmarke der Vorführung: blinkt, solange nicht getippt wird */ .ldc .px-selbst .px-mini-caret { display: inline-block; width: 2px; height: 1.02em; margin: 0 -2px 0 1px; vertical-align: -.14em; border-radius: 1px; background: #0a84c9; animation: px-blinken 1.05s steps(1, end) infinite; } .ldc .px-selbst .px-mini.px-tippt .px-mini-caret { animation: none; } .ldc .px-selbst .px-mini-unter { margin: .5em 0 0; padding: 0; font-size: max(12px, .78em); font-weight: 500; line-height: 1.45; color: rgba(58, 42, 34, .7); text-wrap: balance; } .ldc .px-selbst .px-mini-knopf { display: inline-flex; margin-top: .75em; padding: .5em .95em; border-radius: 999px; background: #b4532a; color: #fff; font-size: max(12px, .76em); font-weight: 700; line-height: 1.2; white-space: nowrap; } /* Meldung nach dem Speichern: fällt unter dem Knopf auf und federt */ .ldc .px-selbst .px-mini-meldung { position: absolute; right: .5em; top: 2.95em; z-index: 5; display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em .45em .45em; border-radius: 999px; background: var(--tinte, #0a1720); color: #fff; font-size: max(12px, .78em); font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 .9em 1.8em -.8em rgba(8, 40, 70, .6); opacity: 0; transform: translateY(-.5em) scale(.8); transform-origin: 88% 0; transition: opacity .22s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; } .ldc .px-selbst .px-mini-meldung i { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: #16a34a; } .ldc .px-selbst .px-mini-meldung svg { display: block; width: 1em; height: 1em; } .ldc .px-selbst .px-mini.px-gespeichert .px-mini-meldung { opacity: 1; transform: none; } .ldc .px-selbst .px-mini.px-gespeichert .px-mini-meldung svg path { animation: px-haken .45s .12s cubic-bezier(.65, 0, .35, 1) both; } /* Zeiger der Vorführung */ .ldc .px-selbst .px-mini-maus { position: absolute; left: 0; top: 0; z-index: 6; width: 1.2em; height: 1.32em; pointer-events: none; opacity: 0; transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .3s ease; } .ldc .px-selbst .px-mini-maus svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .12em .22em rgba(0, 0, 0, .3)); } .ldc .px-selbst .px-mini.px-maus-da .px-mini-maus { opacity: 1; } .ldc .px-selbst .px-mini-maus i { position: absolute; left: .1em; top: .1em; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; background: rgba(10, 132, 201, .25); opacity: 0; scale: .2; } .ldc .px-selbst .px-mini.px-klick .px-mini-maus i { animation: px-klickwelle .55s ease-out; } .ldc .px-selbst .px-mini.px-klick .px-mini-maus svg { animation: px-klickdruck .3s ease; } /* ══ K3 · schwarze Karte mit Lichtkegel ═════════════════════════════════ */ .ldc .px-nacht .px-flaeche { display: flex; flex-direction: column; padding: 1.6em 1.5em 1.45em; background: #0a1720; color: #fff; } .ldc .px-nacht .px-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle 12em at var(--px-lx, 88%) var(--px-ly, 6%), rgba(31, 177, 251, .30), rgba(31, 177, 251, .08) 45%, transparent 72%), radial-gradient(circle 18em at -10% 115%, rgba(10, 132, 201, .20), transparent 70%); } .ldc .px-nacht .px-raster { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(160, 225, 255, .55) 1px, transparent 1.4px); background-size: 1.15em 1.15em; background-position: .3em .3em; -webkit-mask-image: radial-gradient(circle 8.5em at var(--px-lx, 88%) var(--px-ly, 6%), #000, transparent 78%); mask-image: radial-gradient(circle 8.5em at var(--px-lx, 88%) var(--px-ly, 6%), #000, transparent 78%); opacity: .45; transition: opacity .6s; } .ldc .px-nacht.px-schwebt .px-raster { opacity: .8; } .ldc .px-nacht .px-nacht-logo { display: block; width: 7.4em; height: auto; max-width: none; } .ldc .px-nacht .px-aussage { margin: auto 0; font-size: 1.22em; font-weight: 700; line-height: 1.16; letter-spacing: -.03em; color: rgba(255, 255, 255, .46); } .ldc .px-nacht .px-aussage span { display: block; text-wrap: balance; } .ldc .px-nacht .px-aussage span + span { margin-top: .3em; } .ldc .px-nacht .px-aussage span:first-child { color: #fff; } .ldc .px-nacht .px-riesig { font-size: 4.9em; margin-left: -.13em; color: #fff; white-space: nowrap; } .ldc .px-nacht .px-etikett { display: block; margin-top: .45em; font-size: max(12px, .86em); font-weight: 600; color: rgba(255, 255, 255, .6); } /* Glanz auf Schwarz: nur ein Hauch, sonst liegt ein milchiger Schleier über Text und Zahl. Den Rest macht der blaue Lichtkegel. */ .ldc .px-nacht .px-glanz { mix-blend-mode: soft-light; background: radial-gradient(circle at var(--px-mx, 50%) var(--px-my, 0%), rgba(170, 225, 255, .10), transparent 45%), linear-gradient(112deg, transparent calc(var(--px-gx, 50%) - 16%), rgba(170, 225, 255, .07) var(--px-gx, 50%), transparent calc(var(--px-gx, 50%) + 16%)); } /* ══ K4 · Video „So entsteht deine Website" ═════════════════════════════ */ /* Grund wie der Rand des Videos (Poster oben #f1f4f9, unten #e8edf3): vor dem ersten Bild blitzt nichts auf, und ohne Video und Poster bleibt eine ruhige helle Fläche mit der Leiste. */ .ldc .px-video .px-flaeche { background: linear-gradient(#f1f4f9, #e8edf3); } .ldc .px-video .px-film { position: absolute; inset: 0; overflow: hidden; } .ldc .px-video .px-film-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); } .ldc .px-video.px-schwebt .px-film-video { transform: scale(1.045); } /* Ohne Video-Datei: das Poster als ruhiges Bild (fehlt auch das, bleibt die helle Fläche mit der Leiste) */ .ldc .px-video .px-film-bild { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); } .ldc .px-video.px-schwebt .px-film-bild { transform: scale(1.045); } /* Weiße Beschriftungsleiste unten (K4, K6) */ .ldc .px-karte a.px-leiste, .ldc .px-karte a.px-leiste:hover, .ldc .px-karte a.px-leiste:focus { position: absolute; left: .75em; right: .75em; bottom: .75em; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .95em 1.05em .95em 1.15em; border-radius: 12px; background: #fff; color: var(--tinte, #0a1720); text-decoration: none; font-size: .96em; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; box-shadow: 0 1em 2.2em -1.4em rgba(10, 23, 32, .55); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1); } .ldc .px-karte a.px-leiste:hover { transform: translateY(-3px); box-shadow: 0 1.4em 2.6em -1.4em rgba(10, 23, 32, .6); } .ldc .px-karte a.px-leiste .px-pfeil { width: 1.1em; height: 1.1em; color: var(--tinte, #0a1720); } /* ══ K5 · Support-Nummer mit Bürozeiten ══════════════════════════════════ Oben rechts der Live-Stand nach Wiener Zeit (skript.js), darunter die Nummer und die Woche als Balken auf der Zeitachse 7 bis 18 Uhr. Heute ist weiß hinterlegt, die Linie „jetzt" steht an der aktuellen Uhrzeit. Ohne Skript: ruhige Woche ohne Live-Stand, Nummer und Zeiten sind da. */ .ldc .px-support .px-live { display: inline-flex; align-items: center; gap: .5em; padding-left: .6em; background: #fff; color: rgba(10, 23, 32, .78); box-shadow: 0 0 0 1px rgba(10, 23, 32, .06); } .ldc .px-support .px-live i { position: relative; flex: none; width: .56em; height: .56em; border-radius: 50%; background: #9aa1a9; } .ldc .px-support .px-live.px-offen i { background: #16a34a; } .ldc .px-support .px-live.px-offen i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: px-puls 2s cubic-bezier(.22, 1, .36, 1) infinite; } .ldc .px-support .px-live.px-offen { color: var(--tinte, #0a1720); } .ldc .px-support .px-hoerer { transform-box: view-box; transform-origin: 12px 12px; } .ldc .px-support .px-welle { stroke-dasharray: 1; stroke-dashoffset: 0; } .ldc .px-karte a.px-nummer, .ldc .px-karte a.px-nummer:hover, .ldc .px-karte a.px-nummer:focus { align-self: flex-start; display: inline-block; margin: .6em 0 0; padding: 0 0 .12em; font-size: 1.52em; font-weight: 800; line-height: 1.15; letter-spacing: -.028em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinte, #0a1720); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: color .35s, background-size .55s cubic-bezier(.22, 1, .36, 1); } .ldc .px-karte a.px-nummer:hover { color: #0a6ea8; background-size: 100% 2px; } .ldc .px-karte a.px-nummer:focus-visible { outline: 2px solid #0a84c9; outline-offset: 3px; border-radius: 4px; } .ldc .px-support .px-nummer .px-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; } .ldc .px-support .px-nummer .px-w > span { display: inline-block; } .ldc .px-support .px-zeiten { --tag: max(1.8em, 22px); --zeit: max(3.5em, 54px); --luecke: .55em; margin-top: auto; padding-top: .9em; } .ldc .px-support .px-zeiten .px-klein { margin-bottom: .45em; } .ldc .px-support .px-zeiten-feld { position: relative; } .ldc .px-support .px-achse { position: relative; height: 1.3em; padding: 0; margin: 0 calc(var(--zeit) + var(--luecke)) .28em calc(var(--tag) + var(--luecke)); } .ldc .px-support .px-achse span { position: absolute; top: 0; left: var(--p); translate: -50% 0; font-size: max(12px, .76em); font-weight: 600; line-height: 1.3; color: rgba(10, 23, 32, .62); font-variant-numeric: tabular-nums; } .ldc .px-support .px-jetzt-marke { position: absolute; top: -.05em; left: calc(var(--px-jetzt, 0) * 100%); translate: -50% 0; z-index: 2; padding: .08em .5em .12em; border-radius: 99px; background: var(--tinte, #0a1720); color: #fff; font-size: max(12px, .74em); font-weight: 700; line-height: 1.25; white-space: nowrap; } .ldc .px-support .px-zeiten-liste { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; } .ldc .px-support .px-zeiten-liste li { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--tag) minmax(0, 1fr) var(--zeit); align-items: center; column-gap: var(--luecke); margin: 0; padding: 0; } .ldc .px-support .px-tag { font-size: max(12px, .76em); font-weight: 700; line-height: 1.3; color: rgba(10, 23, 32, .62); } .ldc .px-support .px-zeiten-spur { position: relative; display: block; height: .56em; border-radius: 99px; background: rgba(10, 23, 32, .06); } .ldc .px-support .px-zeiten-spur s { position: absolute; top: 0; bottom: 0; left: var(--l); right: var(--r); border-radius: inherit; background: rgba(10, 23, 32, .22); text-decoration: none; transform-origin: 0 50%; } .ldc .px-support .px-zeit { justify-self: end; font-size: max(12px, .76em); font-weight: 600; line-height: 1.3; white-space: nowrap; color: rgba(10, 23, 32, .62); font-variant-numeric: tabular-nums; } /* Geschlossen: feine gestrichelte Spur statt Balken */ .ldc .px-support .px-zu .px-zeiten-spur, .ldc .px-support .px-feiertag .px-zeiten-spur { height: 2px; background: repeating-linear-gradient(90deg, rgba(10, 23, 32, .22) 0 .32em, transparent .32em .62em); } .ldc .px-support .px-feiertag .px-zeiten-spur s { display: none; } /* Heute: weiß hinterlegt, Balken im Markenverlauf */ .ldc .px-support .px-heute::before { content: ""; position: absolute; inset: -.24em -.5em; z-index: -1; border-radius: .7em; background: #fff; box-shadow: 0 .35em .9em -.55em rgba(10, 70, 110, .35), 0 0 0 1px rgba(10, 23, 32, .04); } .ldc .px-support .px-heute .px-tag, .ldc .px-support .px-heute .px-zeit { color: var(--tinte, #0a1720); font-weight: 800; } .ldc .px-support .px-heute .px-zeiten-spur s { background: linear-gradient(90deg, #0a84c9, #1fb1fb 45%, #7fdcff 75%, #ffb06b); } /* Linie „jetzt": liegt über der Spalte der Balken */ .ldc .px-support .px-jetzt { position: absolute; top: 1.2em; bottom: -.3em; z-index: 2; width: 1.5px; margin-left: -.75px; left: calc(var(--tag) + var(--luecke) + (100% - var(--tag) - var(--zeit) - 2 * var(--luecke)) * var(--px-jetzt, 0)); background: var(--tinte, #0a1720); border-radius: 1px; transform-origin: 50% 0; } /* ══ K6 · Foto mit weißer Leiste ════════════════════════════════════════ */ .ldc .px-karte .px-foto { position: absolute; inset: 0; overflow: hidden; background: #cfd6dc; } .ldc .px-karte .px-foto img { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 22%; transform: translate3d(calc(var(--px-px, 0) * -12px), calc(var(--px-py, 0) * -12px + var(--px-sy, 0px)), 0); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); animation: px-zoom 24s ease-in-out infinite alternate; } /* Beratungsgespräch (Shutterstock 2754908755, seit 1.33.24 statt der Hand mit Handy): schon auf die beiden Personen zugeschnitten (900 × 1250), Gesichter im oberen Drittel, die weiße Leiste liegt auf Tisch und Laptop. */ .ldc .px-foto-karte .px-foto img { object-position: 50% 30%; } /* ══ Kopf des Abschnitts ═══════════════════════════════════════════════ */ .ldc .px-kopf .px-kopf-titel .px-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .ldc .px-kopf .px-kopf-titel .px-w > span { display: inline-block; } .ldc .px-kopf a.px-kopf-pille, .ldc .px-kopf a.px-kopf-pille:hover { gap: .6em; padding: .82em 1.3em .82em 1.4em; font-size: .9375rem; font-weight: 700; color: var(--tinte, #0a1720); } .ldc .px-kopf a.px-kopf-pille .px-pfeil { width: 1em; height: 1em; } /* Pfeil des Karussells mittig zur Kartenhöhe (450 / 500 / 540 px) */ @media (min-width: 1800px) { .ldc-v3 .ldc-karussell:has(.px-karte) .ldc-karussell-pfeil { top: 226px; } } @media (min-width: 2300px) { .ldc-v3 .ldc-karussell:has(.px-karte) .ldc-karussell-pfeil { top: 246px; } } @keyframes px-dreh { to { transform: rotate(1turn); } } @keyframes px-zoom { from { scale: 1; } to { scale: 1.1; } } @keyframes px-blinken { 50% { opacity: 0; } } @keyframes px-klickwelle { from { opacity: 1; scale: .2; } to { opacity: 0; scale: 1; } } @keyframes px-klickdruck { 50% { transform: scale(.86); } } @keyframes px-haken { from { stroke-dasharray: 24; stroke-dashoffset: 24; } to { stroke-dasharray: 24; stroke-dashoffset: 0; } } @keyframes px-puls { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } } /* ── Touch-Geräte: kein Dauer-Zoom der Fotos (spart Akku, nichts rechnet im Hintergrund) ── */ @media (hover: none) { .ldc .px-karte .px-foto img { animation: none; } } /* ── Bewegung reduzieren: ruhiges Endbild ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ldc .px-karte .px-ring, .ldc .px-karte .px-foto img, .ldc .px-support .px-live i::after { animation: none !important; } .ldc .px-karte .px-flaeche { transition: none; transform: none; } .ldc .px-karte.px-wartet .px-flaeche { opacity: 1; } .ldc .px-selbst .px-mini-meldung, .ldc .px-selbst .px-mini-h, .ldc .px-selbst .px-mini-speichern { transition: none; } .ldc .px-selbst .px-mini-meldung svg path { animation: none !important; } } /* ── Pfeil und Punkte kommen mit der ersten Karte (skript.js setzt px-kar-wartet nur mit Skript) ── */ .ldc .ldc-karussell.px-kar-wartet > .ldc-karussell-pfeil, .ldc .ldc-karussell.px-kar-wartet > .ldc-karussell-punkte { opacity: 0; } /* ── „Ziehen"-Hinweis am Zeiger (skript.js, nur mit Maus) ────────────────── Der normale Mauszeiger bleibt. Die kleine Pille sitzt versetzt rechts unter dem Zeiger und erscheint nur beim ersten Hineinfahren (kurz) und während gezogen wird. Beim Lesen verdeckt sie nichts. */ .ldc .ldc-karussell .px-ziehen { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; margin: 20px 0 0 16px; height: 30px; padding: 0 11px 0 8px; border-radius: 999px; background: var(--tinte, #0a1720); color: #fff; box-shadow: 0 12px 24px -12px rgba(8, 40, 70, .6); font: 700 12px/1 "Manrope LD", system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; opacity: 0; scale: .4; transform-origin: 0 0; transition: opacity .3s cubic-bezier(.22, 1, .36, 1), scale .5s cubic-bezier(.34, 1.56, .64, 1); } .ldc .ldc-karussell .px-ziehen svg { width: 12px; height: 12px; flex: none; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } .ldc .ldc-karussell .px-ziehen.px-ziehen-an, .ldc .ldc-karussell:has(.ldc-zieht) .px-ziehen { opacity: 1; scale: 1; } .ldc .ldc-karussell:has(.ldc-zieht) .px-ziehen svg:first-child { transform: translateX(-3px); } .ldc .ldc-karussell:has(.ldc-zieht) .px-ziehen svg:last-child { transform: translateX(3px); } .ldc .px-kopf a.px-kopf-pille { transition: background .3s, transform .6s cubic-bezier(.22, 1, .36, 1); } @media (prefers-reduced-motion: reduce) { .gx-buehne *, .gx-buehne *::before, .gx-buehne *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ══ Café Lind: Cappuccino über die Theke (seit 1.33.24, CAFE-FOTO) ══════════════════════════════ Die Tasse steht bei rund 43 % / 45 % des Bildes; darauf zielt der Ausschnitt und der langsame Zoom. */ .ldc-w2-foto-cafe img { object-position: 43% 45%; } .ldc-web3 .ldc-w2-foto-cafe img { transform-origin: 43% 45%; }